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

:root{
  --navy-950:#060911;
  --navy-900:#0a0f1a;
  --navy-850:#0d1422;
  --navy-800:#111a2b;
  --navy-700:#1b263b;
  --navy-600:#293a56;
  --line:#1e2a3f;
  --line-soft:#161f30;

  --text-primary:#f3f6fb;
  --text-secondary:#a7b3c7;
  --text-muted:#71809a;

  --white-surface:#f7f9fc;
  --white-surface-2:#ffffff;

  --accent:#4fc9e8;
  --accent-strong:#38b6da;
  --accent-blue:#5b8def;
  --accent-dim:rgba(79,201,232,0.12);

  --healthy:#34d399;
  --monitor:#fbbf24;
  --attention:#f97066;

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

  --shadow-card: 0 1px 0 rgba(255,255,255,0.03) inset, 0 20px 40px -24px rgba(0,0,0,0.6);
  --shadow-float: 0 30px 60px -20px rgba(0,0,0,0.55);

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

*,*::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(--accent); color:#04141c; box-shadow:0 8px 24px -8px rgba(79,201,232,0.5); }
.btn-primary:hover{ background:var(--accent-strong); 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:rgba(6,9,17,0.82); 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:#04141c; }
.pricing-switch button.active:hover{ color:#04141c; }
.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:#04141c; 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 rgba(79,201,232,0.35); 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:#04141c; padding:12px 18px; border-radius:8px; z-index:100; font-weight:700;
}
.skip-link:focus{ left:16px; top:16px; }