/* ==========================================================================
   MobileSignalIQ — Design System
   Dark enterprise SaaS theme. Inter typeface. No external JS frameworks.
   ========================================================================== */

:root{
  color-scheme: light dark;

  /* ---- Light theme (default) ---- */
  --navy-950:#ffffff;   /* page */
  --navy-900:#f5f8fc;   /* soft band / wash */
  --navy-850:#ffffff;   /* cards */
  --navy-800:#f1f5fb;   /* inner surfaces, inputs */
  --navy-700:#e4ebf5;
  --navy-600:#cfd9e8;
  --line:#dfe6f0;
  --line-soft:#e8eef6;

  --text-primary:#0c1730;
  --text-secondary:#566682;
  --text-muted:#6a7a93;

  --white-surface:#ffffff;

  --accent:#2f6df6;
  --accent-strong:#2466f3;
  --accent-blue:#2f6df6;
  --accent-dim:rgba(47,109,246,0.10);
  --accent-line:rgba(47,109,246,0.28);
  --accent-ink:#244d93;
  --cyan:#18c7d7;
  --btn-grad:linear-gradient(135deg,#2466f3,#4b7cff);
  --btn-shadow:0 10px 26px rgba(47,109,246,0.26);

  --healthy:#1f9d62;
  --monitor:#b7791f;
  --attention:#d14343;
  --attn-bg:#fff4f4;
  --attn-line:#ffd5d8;
  --attn-text:#b3323d;
  --ok-bg:#eaf8f0;
  --ok-text:#1f7a4d;

  --chip-bg:#ffffff;
  --stage-bg:#fbfdff;
  --nav-bg:rgba(255,255,255,0.92);
  --glow-a:rgba(53,117,255,0.10);
  --glow-b:rgba(24,199,215,0.09);
  --grid-line:rgba(20,44,85,0.035);

  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:9px;

  --shadow-card:0 12px 30px rgba(24,45,79,0.06);
  --shadow-float:0 28px 80px rgba(24,54,102,0.13);

  --container:1160px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Dark theme: follows the visitor's device setting ---- */
@media (prefers-color-scheme: dark){
  :root{
    --navy-950:#08111f;
    --navy-900:#0d1727;
    --navy-850:#0f1929;
    --navy-800:#111d2f;
    --navy-700:#1b2a42;
    --navy-600:#293a56;
    --line:#22324a;
    --line-soft:#182438;

    --text-primary:#f5f8ff;
    --text-secondary:#aab7ca;
    --text-muted:#8797ae;

    --white-surface:#0f1929;

    --accent:#5c8dff;
    --accent-strong:#79a3ff;
    --accent-blue:#5c8dff;
    --accent-dim:rgba(92,141,255,0.14);
    --accent-line:rgba(92,141,255,0.38);
    --accent-ink:#a9c4ff;
    --cyan:#34d6e5;
    --btn-shadow:0 10px 26px rgba(47,109,246,0.32);

    --healthy:#3dd886;
    --monitor:#fbbf24;
    --attention:#ff6470;
    --attn-bg:#24141a;
    --attn-line:#5c2c37;
    --attn-text:#ff9ba6;
    --ok-bg:#0d2a20;
    --ok-text:#93e8b5;

    --chip-bg:#121f31;
    --stage-bg:#0c1727;
    --nav-bg:rgba(8,17,31,0.88);
    --glow-a:rgba(63,119,255,0.20);
    --glow-b:rgba(52,214,229,0.12);
    --grid-line:rgba(130,156,201,0.055);

    --shadow-card:0 14px 36px rgba(0,0,0,0.20);
    --shadow-float:0 30px 90px rgba(0,0,0,0.42);
  }
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; width:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  font-family:var(--font);
  background:var(--navy-950);
  color:var(--text-primary);
  -webkit-font-smoothing:antialiased;
  line-height:1.55;
  font-size:16px;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

h1,h2,h3,h4{ margin:0; line-height:1.15; font-weight:650; letter-spacing:-0.02em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }
.section{ padding:96px 0; }
.section-tight{ padding:64px 0; }
@media (max-width:768px){
  .section{ padding:64px 0; }
  .section-tight{ padding:44px 0; }
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:16px;
}
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px var(--accent-dim);
}

h1{ font-size:56px; }
h2{ font-size:38px; }
h3{ font-size:22px; }
@media (max-width:768px){
  h1{ font-size:36px; }
  h2{ font-size:28px; }
  h3{ font-size:19px; }
}

.lede{ font-size:19px; color:var(--text-secondary); max-width:640px; }
.section-head{ max-width:720px; margin-bottom:48px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border-radius:10px; font-size:15px; font-weight:600;
  border:1px solid transparent; cursor:pointer; transition:transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width:360px){
  /* A long CTA label ("Get Your Free App Assessment") in a single nowrap
     line is a couple px wider than the smallest real phones (320px, e.g.
     iPhone SE). Let it wrap onto two lines there instead of overflowing. */
  .btn{ white-space:normal; text-align:center; }
}
.btn-primary{ background:var(--btn-grad); color:#fff; box-shadow:var(--btn-shadow); }
.btn-primary:hover{ background:var(--btn-grad); filter:brightness(1.07); transform:translateY(-1px); }
.btn-secondary{ background:transparent; color:var(--text-primary); border-color:var(--line); }
.btn-secondary:hover{ border-color:var(--accent); color:var(--accent); }
.btn-ghost{ background:transparent; color:var(--text-secondary); }
.btn-ghost:hover{ color:var(--text-primary); }
.btn-lg{ padding:16px 28px; font-size:16px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:0.5; cursor:not-allowed; }

.cta-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.trust-line{ margin-top:18px; font-size:13px; color:var(--text-muted); }

/* ---------------- Nav ---------------- */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--nav-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; letter-spacing:-0.01em; color:var(--text-primary); flex-shrink:0; }
.brand-mark{ width:30px; height:30px; flex-shrink:0; }
.nav-links{ display:flex; align-items:center; gap:32px; flex-wrap:nowrap; }
.nav-links a{ font-size:14.5px; font-weight:500; color:var(--text-secondary); transition:color .15s ease; white-space:nowrap; }
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--text-primary); }
.nav-cta{ display:flex; align-items:center; gap:12px; flex-shrink:0; }
.nav-toggle{ display:none; background:none; border:1px solid var(--line); color:var(--text-primary); border-radius:8px; padding:8px 10px; }

@media (max-width:1180px){
  /* Below this, the full nav (logo + 6 links + 2 CTA buttons) no longer
     fits on one line without wrapping or clipping — includes iPad Pro's
     1024px portrait width, which sits awkwardly above the old 920px cutoff. */
  .nav-links{ display:none; }
  .nav-cta .btn-secondary, .nav-cta .btn-primary{ display:none; }
  .nav-toggle{ display:inline-flex; }
}

.mobile-menu{ display:none; border-top:1px solid var(--line-soft); background:var(--navy-900); }
.mobile-menu.open{ display:block; }
.mobile-menu .container{ padding:20px 24px 28px; display:flex; flex-direction:column; gap:18px; }
.mobile-menu a{ font-size:16px; color:var(--text-secondary); }
.mobile-menu .cta-row{ flex-direction:column; align-items:stretch; margin-top:8px; }

/* ---------------- Hero ---------------- */
.hero{ padding:88px 0 40px; position:relative; }
.hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
.hero-grid > *{ min-width:0; }
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; } }

.hero h1{ margin-bottom:22px; }
.hero .lede{ max-width:560px; margin-bottom:28px; font-size:18px; }

.bg-glow{
  position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
}
.bg-glow::before{
  content:""; position:absolute; top:-200px; left:50%; transform:translateX(-50%);
  width:900px; height:600px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(79,201,232,0.16), rgba(79,201,232,0) 70%);
}

/* ---------------- Concept dashboard card ---------------- */
.concept-card{
  background:var(--white-surface); color:#0d1422; border-radius:var(--radius-lg);
  padding:22px; box-shadow:var(--shadow-float); border:1px solid rgba(255,255,255,0.6);
}
.concept-card-label{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  color:#5b6a82; background:#eef1f6; padding:5px 10px; border-radius:20px; margin-bottom:16px;
}
.concept-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.concept-head strong{ font-size:15px; }
.health-score{ display:flex; align-items:baseline; gap:6px; }
.health-score .num{ font-size:28px; font-weight:750; color:#0d1422; }
.health-score .max{ font-size:13px; color:#8a97ac; }

.journey-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.journey-row{
  display:flex; align-items:center; justify-content:space-between;
  background:#fff; border:1px solid #e7ebf1; border-radius:10px; padding:10px 14px; font-size:13.5px; font-weight:600;
}
.status-pill{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:4px 10px; border-radius:20px; }
.status-pill.healthy{ background:#e4f9ef; color:#1a9d6a; }
.status-pill.monitor{ background:#fef3d7; color:#b1791a; }
.status-pill.attention{ background:#fde7e5; color:#d1483a; }
.status-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }

.signal-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.signal-grid > *{ min-width:0; }
.signal-tile{ background:#fff; border:1px solid #e7ebf1; border-radius:10px; padding:12px 14px; }
.signal-tile .n{ font-size:19px; font-weight:750; color:#0d1422; }
.signal-tile .l{ font-size:12px; color:#8a97ac; margin-top:2px; }

/* ---------------- Credibility strip ---------------- */
.strip{ border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); padding:32px 0; }
.strip-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.strip-text{ font-size:14.5px; color:var(--text-secondary); max-width:420px; }
.pill-row{ display:flex; gap:10px; flex-wrap:wrap; }
.tag-pill{ font-size:13px; font-weight:600; color:var(--text-secondary); border:1px solid var(--line); padding:7px 14px; border-radius:20px; }

/* ---------------- Cards / grids ---------------- */
.grid{ display:grid; gap:20px; }
.grid > *{ min-width:0; } /* a bare 1fr track sizes to its content's min-width, not the
  available space — without this, a long line of text (or a nested grid, like .finding-meta
  below) can silently push the whole grid wider than the viewport instead of wrapping. */
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:920px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{
  background:var(--navy-850); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:26px; box-shadow:var(--shadow-card);
}
.card-icon{
  width:40px; height:40px; border-radius:10px; background:var(--accent-dim); color:var(--accent);
  display:flex; align-items:center; justify-content:center; margin-bottom:16px;
}
.card h3{ margin-bottom:8px; }
.card p{ color:var(--text-secondary); font-size:14.5px; }
.card ul{ margin-top:12px; display:flex; flex-direction:column; gap:6px; }
.card ul li{ font-size:13.5px; color:var(--text-muted); padding-left:16px; position:relative; }
.card ul li::before{ content:"—"; position:absolute; left:0; color:var(--accent); }

/* ---------------- Problem / vision flow ---------------- */
.flow-strip{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin:36px 0; }
.flow-chip{ background:var(--navy-800); border:1px solid var(--line); padding:9px 16px; border-radius:20px; font-size:13.5px; font-weight:600; color:var(--text-secondary); }
.flow-arrow{ color:var(--text-muted); font-size:18px; }
.flow-result{
  text-align:center; margin-top:10px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; font-size:13px; color:var(--attention);
}

/* ---------------- Journey visualization ---------------- */
.journeyviz{ overflow-x:auto; padding-bottom:8px; position:relative; }
.journeyviz-track{ display:flex; align-items:center; gap:0; min-width:760px; }
@media (max-width:860px) and (min-width:641px){
  /* Tablet widths still show the horizontal strip (comfortable to swipe) —
     hint that it continues sideways so the cut-off edge doesn't read as broken. */
  .journeyviz::after{
    content:""; position:absolute; top:0; right:0; bottom:8px; width:36px;
    background:linear-gradient(to right, transparent, var(--navy-900));
    pointer-events:none;
  }
  .journeyviz.jv-at-end::after{ opacity:0; }
}
.jv-node{ display:flex; flex-direction:column; align-items:center; gap:10px; flex:1; text-align:center; }
.jv-dot{ width:16px; height:16px; border-radius:50%; border:3px solid var(--navy-950); box-shadow:0 0 0 2px var(--line); flex-shrink:0; }
.jv-dot.healthy{ background:var(--healthy); }
.jv-dot.monitor{ background:var(--monitor); }
.jv-dot.attention{ background:var(--attention); }
.jv-label{ font-size:12.5px; font-weight:600; color:var(--text-secondary); }
.jv-line{ flex:1; height:2px; background:var(--line); position:relative; top:-19px; }

@media (max-width:640px){
  /* Phones: no room for a 9-step horizontal strip even with scrolling feeling
     natural, so it becomes a vertical stepper — everything visible via the
     page's normal vertical scroll, nothing needs a sideways swipe. */
  .journeyviz{ overflow-x:visible; padding-bottom:0; }
  .journeyviz-track{ flex-direction:column; align-items:stretch; min-width:0; width:100%; gap:0; }
  .jv-node{
    flex-direction:row; flex:none; align-items:center; gap:14px; text-align:left;
    position:relative; padding:12px 0;
  }
  .jv-node:not(:last-child)::before{
    content:""; position:absolute; left:7px; top:34px; bottom:-12px; width:2px; background:var(--line);
  }
  .jv-line{ display:none; }
}

.jv-detail{
  margin-top:36px; background:var(--navy-850); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:24px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px;
}
.jv-detail > *{ min-width:0; }
@media (max-width:768px){ .jv-detail{ grid-template-columns:1fr 1fr; } }
.jv-detail .dl{ font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:4px; }
.jv-detail .dv{ font-size:15px; font-weight:600; }

/* ---------------- Steps ---------------- */
.steps{ counter-reset:step; display:flex; flex-direction:column; gap:0; }
.step{ display:grid; grid-template-columns:56px 1fr; gap:20px; padding:26px 0; border-bottom:1px solid var(--line-soft); }
.step:last-child{ border-bottom:none; }
.step-num{ width:44px; height:44px; border-radius:50%; background:var(--navy-800); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--accent); }
.step h3{ margin-bottom:6px; }
.step p{ color:var(--text-secondary); font-size:14.5px; margin-bottom:10px; }
.step .pill-row{ margin-top:4px; }
.step .tag-pill{ font-size:12px; padding:5px 12px; }

/* ---------------- Finding comparison ---------------- */
.finding-compare{ display:grid; grid-template-columns:0.9fr 1.4fr; gap:24px; }
@media (max-width:860px){ .finding-compare{ grid-template-columns:1fr; } }
.finding-basic{ background:var(--navy-800); border:1px dashed var(--line); border-radius:var(--radius-md); padding:22px; color:var(--text-muted); font-size:14.5px; font-style:italic; min-width:0; }
.finding-rich{ background:var(--navy-850); border:1px solid var(--accent); border-radius:var(--radius-md); padding:24px; min-width:0; }
.finding-rich p{ color:var(--text-secondary); font-size:14.5px; margin-bottom:16px; }
.finding-meta{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px; margin-top:16px; }
.finding-meta div{ background:var(--navy-800); border-radius:8px; padding:10px 12px; min-width:0; }
@media (max-width:480px){ .finding-meta{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
.finding-meta .k{ font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); }
.finding-meta .v{ font-size:13.5px; font-weight:600; margin-top:2px; }

/* ---------------- Table ---------------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-md); }
table{ width:100%; border-collapse:collapse; min-width:640px; }
th,td{ text-align:left; padding:16px 20px; font-size:14.5px; border-bottom:1px solid var(--line-soft); }
th{ color:var(--text-muted); font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:0.05em; background:var(--navy-850); }
td:first-child, th:first-child{ color:var(--text-primary); font-weight:600; }
tr:last-child td{ border-bottom:none; }

@media (max-width:640px){
  /* Below 640px the 3-column table becomes a stack of cards so every
     column (including the MobileSignalIQ differentiator) is visible
     without needing a horizontal swipe to discover it. */
  .table-wrap{ overflow-x:visible; border:none; }
  table{ display:block; min-width:0; width:100%; }
  thead{ display:none; }
  tbody{ display:block; }
  tr{ display:block; background:var(--navy-850); border:1px solid var(--line); border-radius:var(--radius-md); padding:6px 18px; margin-bottom:12px; }
  tr:last-child{ margin-bottom:0; }
  td{ display:block; padding:10px 0; border-bottom:1px solid var(--line-soft); }
  tr td:last-child{ border-bottom:none; }
  td:first-child{ font-size:15.5px; padding-top:14px; }
  td:not(:first-child)::before{
    content:attr(data-label); display:block; font-size:11px; font-weight:600;
    text-transform:uppercase; letter-spacing:0.04em; color:var(--text-muted); margin-bottom:4px;
  }
}
td.msiq{ color:var(--accent); }

/* ---------------- Pricing ---------------- */
.pricing-switch{ display:inline-flex; gap:4px; background:var(--navy-850); border:1px solid var(--line); border-radius:999px; padding:4px; margin:28px auto 0; }
.pricing-switch button{ border:none; background:transparent; color:var(--text-secondary); font-size:14px; font-weight:600; padding:9px 22px; border-radius:999px; cursor:pointer; transition:background .15s ease, color .15s ease; }
.pricing-switch button:hover{ color:var(--text-primary); }
.pricing-switch button.active{ background:var(--accent); color:#fff; }
.pricing-switch button.active:hover{ color:#fff; }
.pricing-mode-sub{ font-size:14px; color:var(--text-muted); max-width:560px; margin:14px auto 0; }
.pricing-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; align-items:stretch; }
.pricing-grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.pricing-grid > *{ min-width:0; }
@media (max-width:1000px){ .pricing-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .pricing-grid{ grid-template-columns:1fr; } }
.price-card{ background:var(--navy-850); border:1px solid var(--line); border-radius:var(--radius-md); padding:28px; display:flex; flex-direction:column; position:relative; }
.price-card.popular{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), var(--shadow-card); }
.price-badge{ position:absolute; top:-12px; left:24px; background:var(--accent); color:#fff; font-size:11.5px; font-weight:700; padding:4px 12px; border-radius:20px; letter-spacing:0.03em; }
.price-name{ font-size:14px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:10px; }
.price-amount{ font-size:32px; font-weight:750; margin-bottom:4px; }
.price-amount span{ font-size:14px; color:var(--text-muted); font-weight:500; }
.price-sub{ font-size:13px; color:var(--text-muted); margin-bottom:20px; }
.price-card ul{ display:flex; flex-direction:column; gap:10px; margin-bottom:24px; flex:1; }
.price-card ul li{ font-size:13.5px; color:var(--text-secondary); padding-left:20px; position:relative; }
.price-card ul li::before{ content:"✓"; position:absolute; left:0; color:var(--accent); font-weight:700; }

/* ---------------- FAQ ---------------- */
.faq-item{ border-bottom:1px solid var(--line-soft); }
.faq-q{
  width:100%; background:none; border:none; color:var(--text-primary); text-align:left;
  padding:22px 0; font-size:16px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; gap:16px;
}
.faq-q .plus{ transition:transform .2s ease; color:var(--accent); font-size:20px; flex-shrink:0; }
.faq-item.open .faq-q .plus{ transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.faq-a p{ color:var(--text-secondary); font-size:14.5px; padding-bottom:22px; max-width:760px; }
.faq-item.open .faq-a{ max-height:400px; }

/* ---------------- Forms ---------------- */
.form-card{ background:var(--navy-850); border:1px solid var(--line); border-radius:var(--radius-lg); padding:36px; }
@media (max-width:640px){ .form-card{ padding:24px; } }
.field{ margin-bottom:20px; }
.field label{ display:block; font-size:13.5px; font-weight:600; color:var(--text-secondary); margin-bottom:7px; }
.field .req{ color:var(--accent); }
.field .hint{ font-size:12px; color:var(--text-muted); margin-top:5px; }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], select, textarea{
  width:100%; background:var(--navy-800); border:1px solid var(--line); color:var(--text-primary);
  border-radius:9px; padding:12px 14px; font-size:14.5px; font-family:inherit; transition:border-color .15s ease;
}
input::placeholder, textarea::placeholder{ color:var(--text-muted); }
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--accent); }
textarea{ min-height:110px; resize:vertical; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field-row > *{ min-width:0; }
@media (max-width:560px){ .field-row{ grid-template-columns:1fr; } }

.choice-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.choice-grid > *{ min-width:0; }
@media (max-width:560px){ .choice-grid{ grid-template-columns:1fr; } }
.choice{
  display:flex; align-items:center; gap:10px; background:var(--navy-800); border:1px solid var(--line);
  border-radius:9px; padding:12px 14px; font-size:14px; color:var(--text-secondary); cursor:pointer; transition:border-color .15s ease, color .15s ease;
}
.choice:hover{ border-color:var(--accent); }
.choice input{ accent-color:var(--accent); width:auto; }
.choice.checked{ border-color:var(--accent); color:var(--text-primary); background:var(--accent-dim); }

.checkbox-row{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--text-secondary); }
.checkbox-row input{ width:auto; margin-top:3px; accent-color:var(--accent); }

/* A required field failing validation (e.g. an unchecked consent box) must
   be obvious on its own — the browser's native tooltip alone is too easy to
   miss and reads as "the submit button doesn't work." */
.field.field-error input, .field.field-error select, .field.field-error textarea{
  border-color:var(--attention); box-shadow:0 0 0 1px var(--attention);
}
.checkbox-row.field-error{
  outline:1.5px solid var(--attention); outline-offset:6px; border-radius:6px;
  animation:field-error-shake .35s ease;
}
@keyframes field-error-shake{
  0%, 100%{ transform:translateX(0); }
  25%{ transform:translateX(-4px); }
  75%{ transform:translateX(4px); }
}

.progress-track{ display:flex; gap:8px; margin-bottom:32px; }
.progress-step{ flex:1; height:4px; border-radius:4px; background:var(--line); }
.progress-step.active{ background:var(--accent); }

.form-step{ display:none; }
.form-step.active{ display:block; animation:fadein .25s ease; }
@keyframes fadein{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none; } }

.success-box{ text-align:center; padding:24px 0; }
.success-icon{ width:56px; height:56px; border-radius:50%; background:var(--accent-dim); color:var(--accent); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; font-size:26px; }

/* ---------------- Industry / use-case cards ---------------- */
.usecase-card{ background:var(--navy-850); border:1px solid var(--line); border-radius:var(--radius-md); padding:24px; }
.usecase-card .eyebrow{ font-size:11.5px; margin-bottom:10px; }

/* ---------------- Footer ---------------- */
.footer{ border-top:1px solid var(--line-soft); padding:64px 0 32px; background:var(--navy-900); }
.footer-top{ display:grid; grid-template-columns:1.4fr repeat(4,1fr); gap:32px; margin-bottom:48px; }
.footer-top > *{ min-width:0; }
@media (max-width:860px){ .footer-top{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }
.footer-brand p{ color:var(--text-muted); font-size:13.5px; margin-top:12px; max-width:260px; }
.footer-col h4{ font-size:13px; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-muted); margin-bottom:14px; }
.footer-col ul{ display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:14px; color:var(--text-secondary); }
.footer-col a:hover{ color:var(--accent); }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; border-top:1px solid var(--line-soft); padding-top:24px; font-size:13px; color:var(--text-muted); }

/* ---------------- Badges / misc ---------------- */
.badge{ display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; padding:4px 10px; border-radius:6px; }
.badge-available{ background:rgba(52,211,153,0.14); color:var(--healthy); }
.badge-pilot{ background:rgba(251,191,36,0.14); color:var(--monitor); }
.badge-planned{ background:rgba(91,141,239,0.14); color:var(--accent-blue); }

.status-banner{ background:var(--accent-dim); border:1px solid var(--accent-line); border-radius:var(--radius-md); padding:16px 20px; font-size:14px; color:var(--text-secondary); display:flex; gap:12px; align-items:flex-start; }
.status-banner strong{ color:var(--text-primary); }

.center{ text-align:center; }
.mt-8{ margin-top:8px; } .mt-16{ margin-top:16px; } .mt-24{ margin-top:24px; } .mt-32{ margin-top:32px; } .mt-48{ margin-top:48px; }
.text-muted{ color:var(--text-muted); }
.text-secondary{ color:var(--text-secondary); }
.small{ font-size:13px; }

.page-hero{ padding:64px 0 24px; }
.page-hero .lede{ max-width:640px; }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split > *{ min-width:0; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:32px; } }

.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--accent); color:#fff; padding:12px 18px; border-radius:8px; z-index:100; font-weight:700;
}
.skip-link:focus{ left:16px; top:16px; }

/* ==========================================================================
   Conversion rewrite (2026-11) — pain, proof chain, ladder, timeline
   ========================================================================== */
.hero .eyebrow{ letter-spacing:.08em; }
.risk-line{ margin-top:16px; font-size:14px; color:var(--text-secondary); font-weight:500; }
.text-link{ color:var(--accent); font-weight:600; }
.text-link:hover{ text-decoration:underline; }
.cta-stack{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }

.pain-lines{ max-width:680px; margin:28px auto 0; text-align:center; }
.pain-lines p{ font-size:20px; line-height:1.5; color:var(--text-secondary); margin:0 0 10px; }
.pain-lines p.strong{ color:var(--text-primary); font-weight:650; margin-top:22px; }
.know-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:36px 0 8px; }
.know-grid > div{ background:var(--navy-850); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 12px; text-align:center; font-size:14px; font-weight:600; color:var(--text-secondary); }
.callout{ max-width:720px; margin:32px auto 0; text-align:center; font-size:20px; font-weight:650; color:var(--text-primary); }

.proof-chain{ display:flex; flex-direction:column; gap:10px; max-width:640px; margin:0 auto; }
.proof-chain .link{ background:var(--navy-850); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px 18px; font-size:15px; color:var(--text-secondary); }
.proof-chain .plus{ text-align:center; color:var(--accent); font-weight:700; line-height:1; }
.proof-chain .result{ background:var(--accent-dim); border:1px solid var(--accent); border-radius:var(--radius-sm); padding:18px; text-align:center; font-size:18px; font-weight:700; color:var(--text-primary); }
.proof-caption{ max-width:640px; margin:18px auto 0; font-size:13px; color:var(--text-muted); text-align:center; }

.qa-card h3{ font-size:18px; margin-bottom:8px; }

.deliverables{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:28px 0; }
.deliverables .card h3{ font-size:16px; }
.deliverables .card p{ margin:0; }

.timeline{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:center; margin:28px 0; }
.timeline .tl-chip{ background:var(--navy-800); border:1px solid var(--line); padding:9px 14px; border-radius:20px; font-size:13.5px; font-weight:600; color:var(--text-secondary); }
.timeline .tl-chip.alert{ border-color:var(--attention); color:var(--attention); }
.timeline .tl-chip.ok{ border-color:var(--healthy); color:var(--healthy); }
.timeline .tl-arrow{ color:var(--accent); }

.founder{ max-width:760px; margin:0 auto; }
.founder blockquote{ margin:0 0 20px; font-size:20px; line-height:1.5; color:var(--text-primary); font-weight:550; }
.maturity-note{ margin-top:24px; padding:16px 20px; border:1px dashed var(--line); border-radius:var(--radius-sm); font-size:14.5px; color:var(--text-secondary); }

.ps{ max-width:680px; margin:40px auto 0; text-align:left; font-size:16px; color:var(--text-secondary); border-top:1px solid var(--line-soft); padding-top:24px; }
.ps strong{ color:var(--text-primary); }

.ladder .price-card .price-sub{ min-height:20px; }
.ladder-step{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:8px; }

.optional-block{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line-soft); }
.optional-block h4{ font-size:14px; margin:0 0 4px; }
.next-steps{ margin-top:32px; display:flex; flex-direction:column; gap:14px; }
.next-steps .ns{ display:grid; grid-template-columns:32px 1fr; gap:12px; font-size:14.5px; color:var(--text-secondary); }
.next-steps .ns b{ color:var(--text-primary); }
.next-steps .ns .n{ width:28px; height:28px; border-radius:50%; background:var(--navy-800); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--accent); font-weight:700; font-size:13px; }

@media (max-width: 860px){
  .know-grid{ grid-template-columns:repeat(2,1fr); }
  .deliverables{ grid-template-columns:1fr; }
  .pain-lines p{ font-size:18px; }
}

/* ==========================================================================
   Homepage layout v2 — grouped hero card, stacked pain rows, tool grid,
   signal strip, numbered question cards, step grid, offer panel, founder split.
   Dark theme tokens only (no light surfaces except the hero preview card).
   ========================================================================== */
.band{ background:var(--navy-900); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }

.snap{ background:var(--white-surface); color:#0c1730; border:1px solid #dbe4f1; border-radius:24px; padding:26px; box-shadow:var(--shadow-float); }
.snap-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.snap-label{ font-size:12px; font-weight:700; color:#687995; text-transform:uppercase; letter-spacing:.08em; }
.mini-badge{ font-size:11px; font-weight:700; color:#1f7a4d; background:#e6f6ee; padding:6px 10px; border-radius:999px; white-space:nowrap; }
.stage{ border:1px solid #e2e9f3; border-radius:16px; background:#fbfdff; padding:16px; margin-top:12px; }
.stage-title{ font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:#7b89a1; font-weight:700; margin-bottom:10px; }
.stage-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.chip{ background:#fff; border:1px solid #e2e9f3; border-radius:12px; padding:12px 13px; font-size:13px; font-weight:600; color:#293958; }
.priority{ background:var(--navy-800); border:1px solid var(--accent); color:var(--text-primary); border-radius:14px; padding:16px 18px; margin-top:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.priority strong{ display:block; font-size:14px; }
.priority span{ font-size:12px; color:var(--accent); }
.priority b{ color:var(--accent); font-size:18px; }
.snap-foot{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.trust-chip{ font-size:11px; border:1px solid #dfe7f1; background:#fff; border-radius:999px; padding:7px 10px; color:#687995; font-weight:600; }

.pain-stack{ max-width:760px; margin:36px auto 0; display:grid; gap:12px; }
.pain-row{ background:var(--navy-850); border:1px solid var(--line); border-radius:14px; padding:16px 20px; font-weight:600; display:flex; align-items:center; gap:12px; color:var(--text-primary); }
.pain-row .dot{ width:10px; height:10px; border-radius:50%; background:var(--text-muted); flex-shrink:0; }
.pain-row.em{ border-color:rgba(249,112,102,.45); background:rgba(249,112,102,.08); color:#ffb4ad; }
.pain-row.em .dot{ background:var(--attention); }
.callout-box{ max-width:820px; margin:24px auto 0; background:var(--accent-dim); border:1px solid rgba(79,201,232,.35); border-radius:18px; padding:22px 26px; text-align:center; font-size:18px; font-weight:650; color:var(--text-primary); }

.tool-layout{ display:grid; grid-template-columns:1fr .84fr; gap:28px; margin-top:36px; align-items:stretch; }
.tool-list{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tool{ background:var(--navy-850); border:1px solid var(--line); border-radius:14px; padding:18px; }
.tool .k{ font-size:12px; color:var(--text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.tool .v{ margin-top:6px; font-size:14px; font-weight:600; color:var(--text-primary); }
.msiq-card{ background:var(--navy-800); border:1px solid var(--accent); border-radius:20px; padding:28px; display:flex; flex-direction:column; justify-content:center; }
.msiq-card .icon{ width:48px; height:48px; border-radius:14px; background:var(--accent); color:var(--navy-950); display:grid; place-items:center; font-size:22px; font-weight:700; margin-bottom:18px; }
.msiq-card h3{ font-size:24px; line-height:1.15; margin:0 0 10px; }
.msiq-card p{ font-size:15px; color:var(--text-secondary); margin:0; }
.msiq-card p.strong{ margin-top:18px; font-weight:650; color:var(--text-primary); }

.proof-panel{ margin-top:36px; background:var(--navy-850); border:1px solid var(--line); border-radius:22px; padding:28px; box-shadow:var(--shadow-card); }
.signal-row{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
.signal{ min-height:96px; border-radius:14px; background:var(--navy-800); border:1px solid var(--line); padding:16px; display:flex; align-items:center; font-size:13.5px; font-weight:600; color:var(--text-primary); }
.proof-arrow{ text-align:center; font-size:26px; color:var(--accent); font-weight:700; margin:16px 0; }
.result-bar{ background:var(--accent-dim); border:1px solid var(--accent); border-radius:16px; padding:20px; text-align:center; font-size:19px; font-weight:700; color:var(--text-primary); }
.proof-note{ font-size:13px; color:var(--text-muted); text-align:center; margin:16px auto 0; max-width:700px; }

.qgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px; }
.qcard{ background:var(--navy-850); border:1px solid var(--line); border-radius:18px; padding:24px; }
.qcard .iconbox{ width:40px; height:40px; border-radius:12px; background:var(--accent-dim); color:var(--accent); display:grid; place-items:center; font-weight:700; font-size:14px; margin-bottom:16px; }
.qcard h3{ font-size:18px; letter-spacing:-.01em; line-height:1.25; margin:0 0 10px; }
.qcard p{ font-size:14px; color:var(--text-secondary); margin:0; }

.journeys{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:30px; }
.journey-pill{ border-radius:999px; border:1px solid var(--line); background:var(--navy-850); padding:10px 16px; font-size:13px; font-weight:600; color:var(--text-secondary); }

.steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:34px; }
.step-card{ background:var(--navy-850); border:1px solid var(--line); border-radius:16px; padding:22px; }
.step-no{ width:32px; height:32px; border-radius:10px; background:var(--accent-dim); color:var(--accent); display:grid; place-items:center; font-weight:700; margin-bottom:20px; }
.step-card h3{ margin:0 0 8px; font-size:18px; }
.step-card p{ font-size:13.5px; color:var(--text-secondary); margin:0; }

.offer-panel{ background:var(--navy-850); border:1px solid var(--line); border-radius:24px; padding:36px; margin-top:32px; }
.deliverables-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.deliverable{ background:var(--navy-800); border:1px solid var(--line); border-radius:14px; padding:18px; }
.deliverable b{ display:block; font-size:14px; color:var(--text-primary); }
.deliverable span{ display:block; margin-top:4px; font-size:13px; color:var(--text-secondary); }
.offer-bottom{ margin-top:26px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.offer-bottom .risk-line{ margin:0; }

.next-grid{ margin-top:40px; display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.next-item{ border-top:2px solid var(--line); padding-top:16px; }
.next-item b{ display:block; font-size:14px; color:var(--text-primary); }
.next-item span{ display:block; margin-top:6px; font-size:13px; color:var(--text-secondary); }

.founder-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:38px; align-items:center; }
.founder-card{ border-radius:24px; background:var(--navy-850); border:1px solid var(--line); padding:32px; min-height:260px; display:flex; flex-direction:column; justify-content:space-between; gap:24px; }
.founder-card .quote{ font-size:24px; line-height:1.3; letter-spacing:-.02em; font-weight:600; color:var(--text-primary); }
.founder-meta{ font-size:13px; color:var(--text-muted); }

@media (max-width:900px){
  .tool-layout, .founder-grid{ grid-template-columns:1fr; }
  .signal-row, .qgrid, .deliverables-grid, .steps-grid, .next-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  .signal-row, .qgrid, .deliverables-grid, .steps-grid, .next-grid, .stage-grid, .tool-list{ grid-template-columns:1fr; }
  .snap, .offer-panel{ padding:22px; }
  .offer-bottom .btn{ width:100%; }
}

/* ==========================================================================
   Design + theme layer (light/dark via prefers-color-scheme)
   Section rhythm: default page, .soft wash, .dark navy band (navy in both themes)
   ========================================================================== */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ background:var(--navy-950); color:var(--text-primary); }
::selection{ background:var(--accent-dim); }

/* Eyebrow pill */
.eyebrow{
  background:var(--accent-dim); border:1px solid var(--accent-line); border-radius:999px;
  padding:7px 13px; font-size:11.5px; font-weight:700; letter-spacing:.075em; color:var(--accent-ink);
  max-width:100%; line-height:1.35;
}
.eyebrow::before{ box-shadow:none; flex-shrink:0; }
.eyebrow[style]{ width:auto !important; }

/* Nav */
.nav{ border-bottom:1px solid var(--line); }
.brand{ font-weight:800; font-size:19px; letter-spacing:-.02em; }
.nav-toggle{ min-width:44px; min-height:44px; align-items:center; justify-content:center; }
.btn{ min-height:44px; }
.btn-primary{ border-color:transparent; }

/* Hero */
.hero{ padding:96px 0 84px; overflow:hidden;
  background:
    radial-gradient(circle at 12% 10%, var(--glow-a), transparent 34%),
    radial-gradient(circle at 88% 5%, var(--glow-b), transparent 30%); }
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.55), transparent 78%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.55), transparent 78%);
}
.hero > .container{ position:relative; }
.bg-glow{ display:none; }
.hero h1{ font-size:clamp(34px, 5.6vw, 68px); letter-spacing:-.04em; line-height:1.05; }
.hero .lede{ font-size:clamp(16px, 1.6vw, 19px); }
.home .section h2{ font-size:clamp(28px, 4vw, 48px); letter-spacing:-.035em; line-height:1.08; }

/* Section variants */
.section.soft, .band{ background:var(--navy-900); }
.section.final{ background:radial-gradient(circle at 50% 0%, var(--glow-a), transparent 42%), var(--navy-950); }
.section.dark, .footer{
  --navy-950:#060b14; --navy-900:#0a1220; --navy-850:#0d1727; --navy-800:#101b2f; --navy-700:#1b2a42;
  --line:#223652; --line-soft:#182438;
  --text-primary:#f5f8ff; --text-secondary:#aab7ca; --text-muted:#8797ae;
  --accent:#5c8dff; --accent-strong:#79a3ff; --accent-dim:rgba(92,141,255,.14); --accent-line:rgba(92,141,255,.38); --accent-ink:#a9c4ff;
  --healthy:#3dd886; --monitor:#fbbf24; --attention:#ff6470;
  background:#060b14; color:var(--text-primary);
}
.section.dark{ border-top:1px solid #172335; border-bottom:1px solid #172335; }
.footer{ border-top:1px solid #172335; }

/* Hero Snapshot card */
.snap{ position:relative; background:var(--navy-850); color:var(--text-primary); border:1px solid var(--line); box-shadow:var(--shadow-float); border-radius:24px; }
.snap::after{
  content:""; position:absolute; inset:-1px; border-radius:24px; padding:1px; pointer-events:none;
  background:linear-gradient(145deg, var(--accent-line), transparent 55%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0);
}
.snap-label{ color:var(--text-muted); }
.mini-badge{ color:var(--ok-text); background:var(--ok-bg); }
.stage{ background:var(--stage-bg); border-color:var(--line); }
.stage-title{ color:var(--text-muted); }
.chip{ background:var(--chip-bg); border-color:var(--line); color:var(--text-primary); }
.priority{ background:linear-gradient(135deg,#101c33,#163466); border:1px solid #2e5b9f; color:#fff; }
.priority strong{ color:#fff; }
.priority span{ color:#bdd4ff; }
.priority b{ color:#bdd4ff; }
.trust-chip{ background:var(--chip-bg); border-color:var(--line); color:var(--text-muted); }

/* Pain */
.pain-row{ background:var(--navy-850); border-color:var(--line); box-shadow:var(--shadow-card); }
.pain-row.em{ background:var(--attn-bg); border-color:var(--attn-line); color:var(--attn-text); }
.pain-row.em .dot{ background:var(--attention); }
.callout-box{ background:var(--accent-dim); border:1px solid var(--accent-line); color:var(--accent-ink); font-weight:700; }

/* Tools (dark band) */
.msiq-card{ background:linear-gradient(145deg,#123469,#0c1f42); border:1px solid #2f5da4; }
.msiq-card .icon{ background:linear-gradient(135deg,#18c7d7,#2f6df6); color:#fff; }
.msiq-card h3{ color:#fff; }
.msiq-card p{ color:#c3d3ec; }
.msiq-card p.strong{ color:#fff; }

/* Proof */
.proof-panel{ background:var(--navy-850); border-color:var(--line); box-shadow:var(--shadow-card); }
.signal{ background:var(--navy-800); border-color:var(--line); color:var(--text-primary); }
.proof-arrow{ color:var(--accent); }
.result-bar{ background:linear-gradient(135deg,#0c1730,#173b72); border:none; color:#fff; }
.proof-note{ color:var(--text-muted); }

/* Cards on default / soft sections */
.qcard, .tool, .step-card, .deliverable, .journey-pill{ border-color:var(--line); }
.qcard{ box-shadow:var(--shadow-card); }
.offer-panel{ background:var(--navy-850); border-color:var(--line); box-shadow:var(--shadow-card); }
.deliverable{ background:var(--navy-800); }
.next-item{ border-top-color:var(--line); }
.step-no{ color:#9cc2ff; }
.founder-card .quote{ color:var(--text-primary); }

/* Timeline chips */
.tl-chip{ background:var(--navy-850); border:1px solid var(--line); color:var(--text-primary); }
.tl-chip.alert{ background:var(--attn-bg); border-color:var(--attn-line); color:var(--attn-text); }
.tl-chip.ok{ background:var(--ok-bg); border-color:var(--ok-bg); color:var(--ok-text); }
.timeline .tl-arrow{ color:var(--text-muted); }

/* Links & small text */
.text-link{ color:var(--accent); font-weight:700; }
.risk-line{ color:var(--text-muted); font-weight:600; }
.maturity-note{ border-color:var(--line); color:var(--text-secondary); }
.proof-caption{ color:var(--text-muted); }

/* Logo: dark-surface variant is used in the footer via assets/logo-on-dark.svg */
.brand-mark{ width:32px; height:32px; }

/* ---------------- Responsive: phones, folds, tablets ---------------- */
@media (max-width:1180px){ .hero{ padding:72px 0 64px; } }
@media (max-width:900px){
  .hero-grid{ gap:40px; }
  .tool-layout, .founder-grid{ grid-template-columns:1fr; }
  .signal-row, .qgrid, .deliverables-grid, .steps-grid, .next-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:620px){
  .container{ padding-left:18px; padding-right:18px; }
  .hero{ padding:44px 0 52px; }
  .section{ padding:56px 0; }
  .btn{ white-space:normal; text-align:center; }
  .btn-lg{ width:100%; padding:15px 20px; }
  .cta-stack{ align-items:stretch; }
  .cta-stack .text-link{ text-align:center; }
  .signal-row, .qgrid, .deliverables-grid, .steps-grid, .next-grid, .stage-grid, .tool-list{ grid-template-columns:minmax(0,1fr); }
  .snap, .offer-panel{ padding:20px; }
  .offer-bottom{ flex-direction:column; align-items:stretch; text-align:center; }
  .callout-box, .result-bar{ font-size:16px; }
  .founder-card{ min-height:0; padding:24px; }
  .founder-card .quote{ font-size:20px; }
  .proof-panel{ padding:18px; }
  .msiq-card{ padding:22px; }
  .pain-row{ padding:14px 16px; }
}
@media (max-width:380px){
  .container{ padding-left:14px; padding-right:14px; }
  .hero h1{ font-size:31px; }
  .home .section h2{ font-size:26px; }
  .eyebrow{ font-size:10.5px; letter-spacing:.05em; padding:6px 10px; }
  .brand{ font-size:17px; }
  .snap, .offer-panel{ padding:16px; }
  .chip{ font-size:12.5px; }
  .trust-chip{ font-size:10.5px; padding:6px 8px; }
}
@media (hover:none){ .btn-primary:hover{ transform:none; } }

/* ---- Polish: header CTA on tablets, inner-page headings, helper text ---- */
@media (max-width:1180px){
  .nav-cta .btn-primary{ display:inline-flex; padding:11px 16px; font-size:14px; }
}
@media (max-width:520px){
  .nav-cta .btn-primary{ display:none; }
}
.page-hero h1{ font-size:clamp(30px, 4.4vw, 50px); letter-spacing:-.03em; line-height:1.08; margin-bottom:18px; }
.field.hint, p.hint{ font-size:12.5px; color:var(--text-muted); margin:-8px 0 18px; line-height:1.5; }

/* ==========================================================================
   Light theme: former "dark" bands become light (per light v2 preview).
   Footer stays navy in both themes. In dark theme the bands stay deep navy.
   ========================================================================== */
.section.dark{
  --navy-950:#ffffff; --navy-900:#f5f8fc; --navy-850:#ffffff; --navy-800:#f1f5fb; --navy-700:#e4ebf5;
  --line:#dfe6f0; --line-soft:#e8eef6;
  --text-primary:#0c1730; --text-secondary:#566682; --text-muted:#6a7a93;
  --accent:#2f6df6; --accent-strong:#2466f3; --accent-dim:rgba(47,109,246,.10); --accent-line:rgba(47,109,246,.28); --accent-ink:#244d93;
  --healthy:#1f9d62; --monitor:#b7791f; --attention:#d14343;
  background:#f7f9fc; color:var(--text-primary);
  border-top:1px solid #e6ecf4; border-bottom:1px solid #e6ecf4;
}
.msiq-card{ background:linear-gradient(145deg,#edf4ff,#f7fbff); border:1px solid #bcd2fb; box-shadow:0 16px 40px rgba(47,109,246,.08); }
.msiq-card h3{ color:#102449; }
.msiq-card p{ color:#52647f; }
.msiq-card p.strong{ color:#183e7a; }
.step-no{ color:var(--accent); }
.founder-card{ background:linear-gradient(145deg,#ffffff,#f4f8ff); border-color:#dce6f4; box-shadow:0 18px 45px rgba(24,45,79,.07); }
.tool, .step-card{ box-shadow:var(--shadow-card); }

@media (prefers-color-scheme: dark){
  .section.dark{
    --navy-950:#060b14; --navy-900:#0a1220; --navy-850:#0d1727; --navy-800:#101b2f; --navy-700:#1b2a42;
    --line:#223652; --line-soft:#182438;
    --text-primary:#f5f8ff; --text-secondary:#aab7ca; --text-muted:#8797ae;
    --accent:#5c8dff; --accent-strong:#79a3ff; --accent-dim:rgba(92,141,255,.14); --accent-line:rgba(92,141,255,.38); --accent-ink:#a9c4ff;
    --healthy:#3dd886; --monitor:#fbbf24; --attention:#ff6470;
    background:#060b14; border-top-color:#172335; border-bottom-color:#172335;
  }
  .msiq-card{ background:linear-gradient(145deg,#123469,#0c1f42); border-color:#2f5da4; box-shadow:none; }
  .msiq-card h3{ color:#fff; }
  .msiq-card p{ color:#c3d3ec; }
  .msiq-card p.strong{ color:#fff; }
  .step-no{ color:#9cc2ff; }
  .founder-card{ background:var(--navy-850); border-color:var(--line); box-shadow:none; }
  .tool, .step-card{ box-shadow:none; }
}

/* Footer follows the theme: light in light mode, navy in dark mode */
.footer{
  --navy-950:#ffffff; --navy-900:#f5f8fc; --navy-850:#ffffff; --navy-800:#f1f5fb; --navy-700:#e4ebf5;
  --line:#dfe6f0; --line-soft:#e8eef6;
  --text-primary:#0c1730; --text-secondary:#566682; --text-muted:#6a7a93;
  --accent:#2f6df6; --accent-strong:#2466f3; --accent-dim:rgba(47,109,246,.10); --accent-line:rgba(47,109,246,.28); --accent-ink:#244d93;
  background:#f5f8fc; color:var(--text-primary); border-top:1px solid #e6ecf4;
}
@media (prefers-color-scheme: dark){
  .footer{
    --navy-950:#060b14; --navy-900:#0a1220; --navy-850:#0d1727; --navy-800:#101b2f; --navy-700:#1b2a42;
    --line:#223652; --line-soft:#182438;
    --text-primary:#f5f8ff; --text-secondary:#aab7ca; --text-muted:#8797ae;
    --accent:#5c8dff; --accent-strong:#79a3ff; --accent-dim:rgba(92,141,255,.14); --accent-line:rgba(92,141,255,.38); --accent-ink:#a9c4ff;
    background:#060b14; border-top-color:#172335;
  }
}