/* Public marketing pages — shares brand tokens with the app (navy/gold) but
   its own layout language: darker, higher-contrast, editorial. */
:root{
  --l-navy:#0d3b66;
  --l-navy-deep:#071d33;
  --l-navy-mid:#123a63;
  --l-gold:#b3820f;
  --l-gold-bright:#e2b94d;
  --l-paper:#f6f7fa;
  --l-steel:#4a5568;
  --l-steel-soft:#8996a8;
  --l-line:#e2e6ee;
  --l-ease:cubic-bezier(.2,.7,.3,1);
  --l-dur:.18s;
}

.lp-body{ margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; color:var(--l-navy-deep); background:#fff; }
.lp-body *{ box-sizing:border-box; }
.lp-wrap{ max-width:1120px; margin:0 auto; padding:0 24px; }

@keyframes lpFadeUp{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }
@keyframes lpFadeIn{ from{ opacity:0; } to{ opacity:1; } }

/* Header */
.lp-header{ background:var(--l-navy-deep); }
.lp-header-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; }
.lp-header img{ height:46px; display:block; transition:transform var(--l-dur) var(--l-ease); }
.lp-header-inner > a:hover img{ transform:scale(1.04); }
.lp-header-nav{ display:flex; align-items:center; gap:26px; }
.lp-header-nav a:not(.lp-btn){ color:rgba(255,255,255,.82); text-decoration:none; font-size:14.5px; position:relative; transition:color var(--l-dur) var(--l-ease); }
.lp-header-nav a:not(.lp-btn)::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--l-gold-bright);
  transform:scaleX(0); transform-origin:left; transition:transform var(--l-dur) var(--l-ease);
}
.lp-header-nav a:not(.lp-btn):hover{ color:#fff; }
.lp-header-nav a:not(.lp-btn):hover::after{ transform:scaleX(1); }
.lp-btn{
  display:inline-flex; align-items:center; justify-content:center; padding:10px 20px; border-radius:7px; font-weight:700; font-size:14px;
  text-decoration:none; border:1.5px solid transparent;
  transition:background-color var(--l-dur) var(--l-ease), transform var(--l-dur) var(--l-ease), box-shadow var(--l-dur) var(--l-ease), border-color var(--l-dur) var(--l-ease);
}
.lp-btn:active{ transform:scale(.96); }
.lp-btn-gold{ background:var(--l-gold); color:#1a1204; }
.lp-btn-gold:hover{ background:var(--l-gold-bright); transform:translateY(-1px); box-shadow:0 8px 20px -6px rgba(179,130,15,.5); }
.lp-btn-outline-light{ border-color:rgba(255,255,255,.4); color:#fff; }
.lp-btn-outline-light:hover{ border-color:#fff; background:rgba(255,255,255,.08); transform:translateY(-1px); }
.lp-btn-navy{ background:var(--l-navy); color:#fff; }
.lp-btn-navy:hover{ background:var(--l-navy-mid); transform:translateY(-1px); box-shadow:0 8px 20px -6px rgba(13,59,102,.4); }
.lp-btn-lg{ padding:14px 30px; font-size:15.5px; }

/* Hero */
.lp-hero{ background:linear-gradient(165deg, var(--l-navy-deep) 0%, var(--l-navy) 78%); color:#fff; padding:76px 0 88px; position:relative; overflow:hidden; }
.lp-hero::after{
  content:""; position:absolute; right:-140px; top:-80px; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(179,130,15,.16), transparent 70%);
}
.lp-hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; position:relative; }
.lp-eyebrow{ font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--l-gold-bright); margin:0 0 18px; animation:lpFadeUp .5s var(--l-ease) both; }
.lp-flag-icon{ width:15px; height:10px; display:inline-block; vertical-align:middle; border-radius:1.5px; margin-left:2px; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.lp-hero h1{ font-size:46px; line-height:1.08; font-weight:800; letter-spacing:-.01em; margin:0 0 20px; text-wrap:balance; animation:lpFadeUp .55s var(--l-ease) .05s both; }
.lp-hero-sub{ font-size:17px; line-height:1.6; color:rgba(255,255,255,.78); max-width:46ch; margin:0 0 32px; animation:lpFadeUp .55s var(--l-ease) .12s both; }
.lp-hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:34px; animation:lpFadeUp .55s var(--l-ease) .18s both; }
.lp-hero-stats{ display:flex; gap:32px; flex-wrap:wrap; animation:lpFadeUp .55s var(--l-ease) .24s both; }
.lp-hero-stat b{ display:block; font-size:20px; color:#fff; }
.lp-hero-stat span{ font-size:12.5px; color:rgba(255,255,255,.6); }

/* Hero visual — a pricing snapshot card, since pay-as-you-go is the lead hook */
.lp-hero-visual{
  background:var(--l-paper); border-radius:14px; padding:14px; box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
  transform:rotate(1.2deg); animation:lpFadeIn .7s var(--l-ease) .2s both; position:relative;
}
.lp-price-mini{ background:#fff; border:1px solid var(--l-line); border-radius:8px; padding:28px 26px; }
.lp-price-mini-row{ display:flex; justify-content:space-between; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--l-line); }
.lp-price-mini-row span{ font-size:14px; color:var(--l-steel); }
.lp-price-mini-row b{ font-size:20px; font-weight:800; color:var(--l-navy-deep); }
.lp-price-mini-row b small{ font-size:12px; font-weight:600; color:var(--l-steel-soft); }
.lp-price-mini-free{ border-bottom:1px solid var(--l-line); }
.lp-price-mini-free b{ color:#1f7a4d; }
.lp-price-mini-row:last-of-type{ border-bottom:none; }
.lp-price-mini-foot{ font-size:12px; color:var(--l-steel-soft); text-align:center; padding-top:16px; }

/* Selling-point pillars — the three reasons companies actually switch */
.lp-pillars{ background:var(--l-paper); padding:52px 0 56px; border-bottom:1px solid var(--l-line); }
.lp-pillars-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.lp-pillar{ background:#fff; border:1px solid var(--l-line); border-radius:12px; padding:24px 22px; }
.lp-pillar-stat{ font-size:24px; font-weight:800; color:var(--l-navy); margin-bottom:10px; letter-spacing:-.01em; }
.lp-pillar h3{ font-size:15.5px; font-weight:700; color:var(--l-navy-deep); margin:0 0 8px; line-height:1.35; }
.lp-pillar p{ font-size:13.5px; color:var(--l-steel); line-height:1.55; margin:0; }

/* Sections */
.lp-section{ padding:76px 0; }
.lp-section-head{ max-width:52ch; margin-bottom:44px; }
.lp-section-head h2{ font-size:30px; font-weight:800; letter-spacing:-.01em; margin:0 0 12px; text-wrap:balance; color:var(--l-navy-deep); }
.lp-section-head p{ font-size:15.5px; color:var(--l-steel); line-height:1.6; margin:0; }
.lp-section-alt{ background:var(--l-paper); }

/* How it works — genuinely sequential, numbering earns its place */
.lp-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; counter-reset:step; }
.lp-step{ position:relative; padding-top:8px; }
.lp-step-num{ font-size:13px; font-weight:800; color:var(--l-gold); letter-spacing:.06em; margin-bottom:10px; }
.lp-step h3{ font-size:18px; font-weight:700; margin:0 0 8px; color:var(--l-navy-deep); }
.lp-step p{ font-size:14.5px; color:var(--l-steel); line-height:1.6; margin:0; }
.lp-step-line{ position:absolute; top:11px; left:calc(100% + 16px); width:calc(100% - 32px); height:1px; background:var(--l-line); display:none; }

/* Feature grid */
.lp-features{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.lp-feature{
  padding:26px 24px; border:1px solid var(--l-line); border-radius:12px; background:#fff;
  transition:transform var(--l-dur) var(--l-ease), box-shadow var(--l-dur) var(--l-ease), border-color var(--l-dur) var(--l-ease);
}
.lp-feature:hover{ transform:translateY(-3px); box-shadow:0 16px 32px -16px rgba(13,59,102,.22); border-color:transparent; }
.lp-feature-icon{
  width:38px; height:38px; border-radius:9px; background:var(--l-navy); display:flex; align-items:center; justify-content:center; margin-bottom:16px;
  transition:transform var(--l-dur) var(--l-ease), background-color var(--l-dur) var(--l-ease);
}
.lp-feature:hover .lp-feature-icon{ background:var(--l-gold); transform:scale(1.08) rotate(-4deg); }
.lp-feature-icon svg{ width:19px; height:19px; stroke:#fff; }
.lp-feature h3{ font-size:16px; font-weight:700; margin:0 0 6px; color:var(--l-navy-deep); }
.lp-feature p{ font-size:14px; color:var(--l-steel); line-height:1.6; margin:0; }

/* Final CTA band */
.lp-cta-band{ background:var(--l-navy-deep); color:#fff; text-align:center; padding:64px 0; }
.lp-cta-band h2{ font-size:28px; font-weight:800; margin:0 0 14px; }
.lp-cta-band p{ color:rgba(255,255,255,.72); font-size:15.5px; margin:0 0 28px; }

.lp-footer{ background:var(--l-navy-deep); border-top:1px solid rgba(255,255,255,.08); padding:28px 0; }
.lp-footer-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.lp-footer img{ height:24px; opacity:.85; }
.lp-footer-links{ display:flex; gap:20px; }
.lp-footer-links a{ color:rgba(255,255,255,.6); text-decoration:none; font-size:13px; }
.lp-footer-links a:hover{ color:#fff; }
.lp-footer-copy{ color:rgba(255,255,255,.4); font-size:12.5px; }

/* Signup page */
.lp-signup-wrap{ background:var(--l-paper); min-height:calc(100vh - 68px); display:flex; align-items:center; padding:48px 24px; }
.lp-signup-card{ background:#fff; border:1px solid var(--l-line); border-radius:14px; padding:38px 36px; max-width:460px; margin:0 auto; width:100%; box-shadow:0 20px 44px -24px rgba(13,59,102,.25); }
.lp-signup-card-wide{ max-width:600px; }
.lp-signup-card h1{ font-size:24px; font-weight:800; margin:0 0 6px; color:var(--l-navy-deep); }
.lp-signup-card > p{ font-size:14px; color:var(--l-steel); margin:0 0 26px; }
.lp-signup-card label{ display:block; font-size:13px; font-weight:600; margin-bottom:5px; color:var(--l-navy-deep); }
.lp-signup-card input, .lp-signup-card select{ width:100%; padding:10px 12px; border:1px solid var(--l-line); border-radius:7px; font-size:14.5px; font-family:inherit; background:#fff; color:var(--l-navy-deep); }
.lp-signup-card input:focus, .lp-signup-card select:focus{ outline:2px solid var(--l-navy); outline-offset:1px; }
.lp-field{ margin-bottom:16px; }
.lp-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.lp-form-stack{ display:flex; flex-direction:column; gap:16px; }
.lp-form-stack .lp-field, .lp-form-stack .lp-field-row{ margin-bottom:0; }
.lp-section-label{
  font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--l-gold);
  border-top:1px solid var(--l-line); padding-top:16px; margin-top:2px;
}
.lp-alert-err{ background:#fbe6e4; color:#b23b34; border:1px solid #f0c6c2; padding:12px 14px; border-radius:8px; font-size:13.5px; margin-bottom:18px; }
.lp-signup-foot{ text-align:center; margin-top:20px; font-size:13.5px; color:var(--l-steel); }
.lp-signup-foot a{ color:var(--l-navy); font-weight:600; text-decoration:none; }

/* Hero floating chips */
.lp-hero-visual{ position:relative; }
.lp-hero-chip{
  position:absolute; background:#fff; border-radius:9px; padding:9px 14px; font-size:12.5px; font-weight:700; color:var(--l-navy-deep);
  box-shadow:0 14px 30px -10px rgba(0,0,0,.35); border:1px solid var(--l-line); white-space:nowrap; z-index:2;
}
.lp-hero-chip-a{ top:-16px; left:-22px; animation:lpFadeIn .7s var(--l-ease) .5s both; }
.lp-hero-chip-b{ bottom:-14px; right:-16px; color:var(--l-gold); animation:lpFadeIn .7s var(--l-ease) .65s both; }

/* Trust strip */
.lp-trust-strip{ background:var(--l-paper); border-top:1px solid var(--l-line); border-bottom:1px solid var(--l-line); padding:20px 0; }
.lp-trust-inner{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px 56px; }
.lp-trust-item{ font-size:13.5px; color:var(--l-steel); white-space:nowrap; }
.lp-trust-item b{ color:var(--l-navy-deep); }

/* Problem section reuses .lp-feature but with an alt icon tone */
.lp-problem-grid{ grid-template-columns:repeat(2,1fr); }
.lp-feature-icon-alt{ background:var(--l-navy-deep); }
.lp-feature:hover .lp-feature-icon-alt{ background:var(--l-gold); }

/* Module gallery */
.lp-module-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.lp-module-thumb{ border-radius:10px; overflow:hidden; aspect-ratio:16/9; background:var(--l-navy-deep); box-shadow:0 10px 24px -14px rgba(13,59,102,.35); }
.lp-module-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform var(--l-dur) var(--l-ease); }
.lp-module:hover .lp-module-thumb img{ transform:scale(1.05); }
.lp-module-thumb-placeholder{ display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5); }
.lp-module-title{ font-size:13px; font-weight:600; color:var(--l-navy-deep); margin-top:9px; line-height:1.3; }

/* Product screenshot panels — real screenshots framed in a browser-chrome window */
.lp-mock-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.lp-mock-grid-3{ grid-template-columns:repeat(3,1fr); }
.lp-mock-grid-4{ grid-template-columns:repeat(4,1fr); }
.lp-mock-label{ font-size:13px; font-weight:700; color:var(--l-gold); text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px; }
.lp-mock-window{
  background:#fff; border:1px solid var(--l-line); border-radius:12px; overflow:hidden; box-shadow:0 20px 44px -24px rgba(13,59,102,.3);
  transition:transform var(--l-dur) var(--l-ease), box-shadow var(--l-dur) var(--l-ease);
}
.lp-mock-window:hover{ transform:translateY(-4px); box-shadow:0 28px 52px -22px rgba(13,59,102,.4); }
.lp-mock-topbar{ background:var(--l-navy-deep); padding:10px 14px; display:flex; gap:6px; }
.lp-mock-topbar span{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.25); }
.lp-mock-shot{ width:100%; display:block; }

/* Standalone video showcase — same browser-chrome frame as the screenshot panels */
.lp-video-showcase{ max-width:760px; margin:0 auto; }
.lp-video-frame{ position:relative; padding-top:56.25%; background:#000; }
.lp-video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

/* Pricing */
.lp-pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:20px; }
.lp-pricing-grid-2{ grid-template-columns:repeat(2,1fr); max-width:680px; margin-left:auto; margin-right:auto; margin-bottom:20px; }
.lp-price-card{ background:#fff; border:1px solid var(--l-line); border-radius:12px; padding:28px 24px; text-align:center; transition:transform var(--l-dur) var(--l-ease), box-shadow var(--l-dur) var(--l-ease); }
.lp-price-card:hover{ transform:translateY(-3px); box-shadow:0 16px 32px -16px rgba(13,59,102,.22); }
.lp-price-card-main{ border-color:var(--l-navy); box-shadow:0 16px 32px -16px rgba(13,59,102,.28); }
.lp-price-tag{ font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--l-gold); margin-bottom:10px; }
.lp-price-amount{ font-size:34px; font-weight:800; color:var(--l-navy-deep); margin-bottom:12px; }
.lp-price-amount span{ font-size:13px; font-weight:600; color:var(--l-steel-soft); }
.lp-price-desc{ font-size:13.5px; color:var(--l-steel); line-height:1.55; margin:0; }
.lp-pricing-foot{ text-align:center; font-size:14px; color:var(--l-steel); }

/* About page */
.lp-about-hero{ padding-bottom:8px; }
.lp-eyebrow-dark{ color:var(--l-gold); }
.lp-about-h1{ font-size:36px; font-weight:800; letter-spacing:-.01em; line-height:1.15; margin:0; color:var(--l-navy-deep); }
.lp-about-row{ display:grid; grid-template-columns:1fr 1.3fr; gap:52px; align-items:center; }
.lp-about-row-rev{ grid-template-columns:1.3fr 1fr; }
.lp-about-row-rev .lp-about-photo{ order:2; }
.lp-about-photo{ width:100%; display:block; border-radius:14px; box-shadow:0 24px 48px -24px rgba(13,59,102,.35); }
.lp-about-photo-col{ text-align:center; }
.lp-about-avatar-lg{ width:150px; height:150px; border-radius:50%; object-fit:cover; display:inline-block; box-shadow:0 16px 32px -16px rgba(13,59,102,.35); }
.lp-about-cite{ font-style:italic; font-size:13.5px; color:var(--l-steel-soft); margin:14px 0 0; }
.lp-about-text{ font-size:16px; line-height:1.7; color:var(--l-steel); margin:0 0 20px; }
.lp-about-text:last-child{ margin-bottom:0; }

/* FAQ accordion */
.lp-faq{ max-width:76ch; }
.lp-faq-item{ border-bottom:1px solid var(--l-line); padding:16px 0; }
.lp-faq-item summary{ font-size:15px; font-weight:700; color:var(--l-navy-deep); cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.lp-faq-item summary::-webkit-details-marker{ display:none; }
.lp-faq-item summary::after{ content:"+"; font-size:20px; font-weight:400; color:var(--l-gold); flex-shrink:0; transition:transform var(--l-dur) var(--l-ease); }
.lp-faq-item[open] summary::after{ content:"–"; }
.lp-faq-item p{ font-size:14px; color:var(--l-steel); line-height:1.6; margin:10px 0 0; }

@media (max-width:1024px){
  .lp-mock-grid-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .lp-module-grid{ grid-template-columns:repeat(2,1fr); }
  .lp-mock-grid, .lp-pricing-grid, .lp-pricing-grid-2, .lp-pillars-grid, .lp-about-row{ grid-template-columns:1fr; }
  .lp-hero-chip{ display:none; }
  .lp-trust-inner{ gap:10px 22px; }
  .lp-hero-grid{ grid-template-columns:1fr; }
  .lp-hero h1{ font-size:34px; }
  .lp-hero-visual{ transform:none; max-width:340px; margin:0 auto; }
  .lp-steps, .lp-features{ grid-template-columns:1fr; }
  .lp-header-nav a:not(.lp-btn){ display:none; }
  .lp-section{ padding:56px 0; }
}
@media (max-width:480px){
  .lp-field-row{ grid-template-columns:1fr; }
  .lp-signup-card{ padding:28px 22px; }
  .lp-hero-ctas .lp-btn{ width:100%; }
  .lp-module-grid{ grid-template-columns:1fr 1fr; }
  .lp-mock-grid-4{ grid-template-columns:1fr; }
  .lp-pricing-grid{ gap:16px; }
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}