/* ============================================================
   Mileage India — by NeuralPath Technologies
   Petrol-green + fuel-amber. India-first, offline-first.
   Light + dark (prefers-color-scheme). Built to feel alive.
   ============================================================ */

:root {
  /* palette — exact from the brief §4.2 (light) */
  --brand:#0E7C5A; --brand-ink:#0A5E44; --brand-deep:#0A5E44; --brand-soft:#E4F4EC;
  --accent:#F5A623; --accent-soft:#FFF1D8; --accent-ink:#9A6408;
  --bg:#F7F8F6; --surface:#FFFFFF; --surface-2:#EEF1EE;
  --ink:#131A17; --ink-soft:#5C6B64; --ink-faint:#8A9A92; --line:#E2E7E3;
  --success:#1E9E63; --warn:#E4A11B; --warn-soft:#FBEFD3; --danger:#D64545; --danger-soft:#FBE6E6; --info:#2D6CDF;

  --hero-1:#0E7C5A; --hero-2:#0A5E44; --hero-3:#083E2E;
  --gauge-track:#E2E7E3;

  --shadow-sm:0 6px 18px -10px rgba(10,40,30,.30);
  --shadow:0 18px 40px -22px rgba(10,40,30,.40);
  --shadow-lg:0 40px 80px -34px rgba(6,32,24,.5);
  --ring: inset 0 1px 0 rgba(255,255,255,.9);

  --display:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"Space Mono", ui-monospace, "SF Mono", monospace;

  --maxw:1160px; --pad:clamp(20px,5vw,40px);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand:#25C08A; --brand-ink:#7BE6BE; --brand-deep:#0A5E44; --brand-soft:#12271F;
    --accent:#FFB53D; --accent-soft:#33270F; --accent-ink:#FFB53D;
    --bg:#0E1512; --surface:#17201C; --surface-2:#1F2A25;
    --ink:#EAF2EE; --ink-soft:#9DB0A7; --ink-faint:#728379; --line:#2A342F;
    --success:#34C77B; --warn:#FFC24B; --warn-soft:#332a11; --danger:#FF6B6B; --danger-soft:#3a1c1c; --info:#5B93FF;
    --hero-1:#0c3b2c; --hero-2:#0a2a20; --hero-3:#071b15;
    --gauge-track:#2A342F;
    --shadow-sm:0 6px 18px -10px rgba(0,0,0,.5);
    --shadow:0 18px 40px -22px rgba(0,0,0,.6);
    --shadow-lg:0 40px 80px -34px rgba(0,0,0,.7);
    --ring: inset 0 1px 0 rgba(255,255,255,.06);
    color-scheme: dark;
  }
}

* { box-sizing:border-box; }
body {
  font-family: var(--body); color: var(--ink); background: var(--bg);
  overflow-x: hidden; -webkit-font-smoothing:antialiased;
  font-feature-settings:"tnum" 1, "cv01" 1;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }

.wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }
.section { padding-block: clamp(58px,9vw,104px); position:relative; }
.tnum { font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: var(--mono); font-size:.71rem; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brand); display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before { content:""; width:20px; height:1px; background:currentColor; opacity:.6; }
.arrow { display:inline-block; transition:transform .3s cubic-bezier(.22,1,.36,1); }
a:hover .arrow { transform:translate(3px,-3px); }

/* ---------- nav ---------- */
.nav {
  position:sticky; top:0; z-index:50; padding-block:12px;
  background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid transparent; transition:border-color .3s;
}
.nav.is-stuck { border-bottom-color:var(--line); }
.nav__inner { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:inline-flex; align-items:center; gap:11px; }
.brand__mark { width:38px; height:38px; border-radius:12px; flex:none; box-shadow:0 10px 22px -12px rgba(14,124,90,.9); }
.brand__name { font-weight:800; font-size:1.05rem; letter-spacing:-.02em; }
.brand__tag { display:block; font-family:var(--mono); font-size:.55rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); margin-top:1px; }
.nav__links { display:flex; align-items:center; gap:24px; }
.nav__links a { font-size:.9rem; font-weight:600; color:var(--ink-soft); transition:color .2s; }
.nav__links a:hover { color:var(--ink); }
.nav__up { display:inline-flex; align-items:center; gap:6px; }
.nav__cta {
  color:#fff !important; font-weight:700; font-size:.88rem; padding:10px 17px; border-radius:999px;
  background:linear-gradient(135deg,var(--brand),var(--brand-deep));
  box-shadow:0 12px 24px -12px rgba(14,124,90,.9); transition:transform .18s;
}
.nav__cta:hover { transform:translateY(-1px); }

/* ---------- HERO ---------- */
.hero {
  position:relative; color:#fff; overflow:hidden;
  padding-top:clamp(34px,6vw,64px); padding-bottom:clamp(84px,12vw,140px);
  background:linear-gradient(158deg,var(--hero-1) 0%, var(--hero-2) 55%, var(--hero-3) 100%);
  border-bottom-left-radius:40px; border-bottom-right-radius:40px; box-shadow:var(--shadow);
}
/* faint driving photo baked into the hero */
.hero__photo {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:url("/assets/img/mileage/driving.jpg");
  background-size:cover; background-position:center 38%;
  opacity:.18; mix-blend-mode:luminosity;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,0) 82%);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,0) 82%);
}
.hero::after {
  content:""; position:absolute; right:-8%; top:-22%; width:46vw; height:46vw; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(245,166,35,.16), rgba(245,166,35,0) 66%);
}
.hero__grid { position:relative; z-index:2; display:grid; grid-template-columns:1.04fr .96fr; gap:clamp(28px,4vw,58px); align-items:center; }
.hero .eyebrow { color:#BFF0DC; }
.hero h1 { font-weight:800; font-size:clamp(2.05rem,5vw,3.7rem); letter-spacing:-.035em; line-height:1.05; margin-top:18px; text-wrap:balance; }
.hero h1 .hi { color:var(--accent); font-style:normal; }
.hero__gloss { display:block; font-size:.5em; font-weight:600; color:rgba(255,255,255,.7); letter-spacing:-.01em; margin-top:10px; }
.hero__sub { margin-top:20px; max-width:33em; font-size:clamp(1rem,1.5vw,1.14rem); color:rgba(255,255,255,.85); line-height:1.62; }
.hero__cta { margin-top:28px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.trust { margin-top:20px; display:flex; flex-wrap:wrap; gap:8px 16px; font-size:.82rem; color:rgba(255,255,255,.8); }
.trust span { display:inline-flex; align-items:center; gap:7px; }
.trust span::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; }

/* store badges */
.stores { display:flex; flex-wrap:wrap; gap:12px; }
.store {
  position:relative; display:inline-flex; align-items:center; gap:11px;
  padding:11px 17px; border-radius:15px; color:#fff;
  background:#0b1a14; border:1px solid rgba(255,255,255,.14);
  box-shadow:0 16px 30px -16px rgba(0,0,0,.5); transition:transform .18s;
}
.store:hover { transform:translateY(-2px); }
.store svg { width:22px; height:22px; flex:none; }
.store .s1 { display:block; font-size:.62rem; letter-spacing:.04em; opacity:.72; }
.store .s2 { display:block; font-size:.98rem; font-weight:700; letter-spacing:-.01em; margin-top:1px; }
.store__soon {
  position:absolute; top:-9px; right:-8px; font-family:var(--mono); font-size:.53rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:#0b1a14; background:var(--accent);
  padding:3px 7px; border-radius:999px; box-shadow:0 4px 10px -4px rgba(0,0,0,.4);
}

/* ---------- the live gauge cluster (hero signature) ---------- */
.cluster {
  position:relative; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.16); border-radius:28px;
  padding:clamp(22px,3vw,34px) clamp(18px,3vw,30px);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter:blur(6px);
}
.gauge { position:relative; width:min(340px,86%); }
.gauge svg { width:100%; height:auto; display:block; overflow:visible; }
.gauge .needle {
  transform-box:view-box; transform-origin:150px 150px;
  transform:rotate(28deg); animation:needleSweep 4.6s cubic-bezier(.5,0,.2,1) infinite;
}
@keyframes needleSweep {
  0%,8% { transform:rotate(-72deg); }
  46%,62% { transform:rotate(28deg); }
  94%,100% { transform:rotate(28deg); }
}
.gauge__read { position:absolute; left:0; right:0; bottom:6%; text-align:center; }
.gauge__num { font-family:var(--mono); font-weight:700; font-size:clamp(2.1rem,6vw,3rem); color:#fff; letter-spacing:-.02em; line-height:1; }
.gauge__unit { font-family:var(--mono); font-size:.8rem; color:var(--accent); letter-spacing:.14em; text-transform:uppercase; margin-top:6px; }
.gauge__delta {
  display:inline-flex; align-items:center; gap:5px; margin-top:12px; font-size:.78rem; font-weight:700;
  color:#0b1a14; background:var(--accent); padding:5px 11px; border-radius:999px;
  opacity:0; animation:deltaIn .5s ease 1.6s forwards;
}
@keyframes deltaIn { to { opacity:1; } }
/* floating cluster chips */
.cchip {
  position:absolute; z-index:4; display:inline-flex; align-items:center; gap:9px;
  background:color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter:blur(12px);
  border:1px solid var(--line); box-shadow:var(--shadow);
  padding:9px 13px; border-radius:14px; color:var(--ink); font-weight:700; font-size:.78rem;
}
.cchip small { display:block; font-size:.6rem; font-weight:600; color:var(--ink-faint); }
.cchip .ic { width:26px; height:26px; border-radius:8px; display:grid; place-items:center; font-size:14px; background:var(--brand-soft); }
.cchip.c1 { top:6%; left:-6%; animation:floaty 7s ease-in-out .2s infinite; }
.cchip.c2 { bottom:12%; right:-7%; animation:floaty 7.8s ease-in-out .6s infinite; }
@keyframes floaty { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }
@media (prefers-reduced-motion: reduce) {
  .gauge .needle { animation:none; transform:rotate(30deg); }
  .cchip { animation:none !important; } .gauge__delta { opacity:1; animation:none; }
}

/* ---------- moving road band ---------- */
.road { height:56px; position:relative; overflow:hidden; background:linear-gradient(180deg,#1a2a22,#0f1a15); }
@media (prefers-color-scheme: dark) { .road { background:linear-gradient(180deg,#0a1510,#060d0a); } }
.road::before {
  content:""; position:absolute; top:50%; left:0; width:200%; height:5px; transform:translateY(-50%);
  background:repeating-linear-gradient(90deg, var(--accent) 0 42px, transparent 42px 92px);
  opacity:.9; animation:dash 1.1s linear infinite;
}
@keyframes dash { to { transform:translate(-92px,-50%); } }
@media (prefers-reduced-motion: reduce) { .road::before { animation:none; } }

/* ---------- section head ---------- */
.head { max-width:44rem; }
.head h2 { font-weight:800; font-size:clamp(1.75rem,3.6vw,2.6rem); letter-spacing:-.03em; margin-top:14px; }
.head p { margin-top:13px; font-size:1.03rem; color:var(--ink-soft); line-height:1.65; }
.head--center { margin-inline:auto; text-align:center; }
.head--center .eyebrow { justify-content:center; }

/* ---------- stats band (overlaps hero) ---------- */
.stats {
  position:relative; z-index:5; margin-top:clamp(-70px,-7vw,-48px);
  border-radius:22px; overflow:hidden; box-shadow:var(--shadow), var(--ring);
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
}
.stat { background:var(--surface); padding:clamp(20px,3vw,28px) 16px; text-align:center; }
.stat b {
  display:block; font-family:var(--mono); font-size:clamp(1.5rem,2.8vw,2.1rem); font-weight:700; letter-spacing:-.02em; line-height:1;
  color:var(--brand);
}
.stat span { display:block; margin-top:8px; font-size:.78rem; color:var(--ink-soft); font-weight:600; line-height:1.4; }

/* ---------- worry cards (the pump moment) ---------- */
.worries { margin-top:44px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.worry {
  background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:22px 20px;
  box-shadow:var(--shadow-sm); position:relative; transition:transform .25s, border-color .25s;
}
.worry:hover { transform:translateY(-5px); border-color:color-mix(in srgb,var(--brand) 40%, var(--line)); }
.worry .emo { font-size:26px; }
.worry .q { margin-top:14px; font-weight:800; font-size:1rem; letter-spacing:-.01em; font-style:italic; }
.worry .a { margin-top:8px; font-size:.86rem; color:var(--ink-soft); line-height:1.55; }

/* ---------- feature grid ---------- */
.features { margin-top:46px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feat {
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:20px;
  padding:24px 22px; box-shadow:var(--shadow-sm), var(--ring); transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s, border-color .28s;
}
.feat:hover { transform:translateY(-6px); box-shadow:var(--shadow); border-color:color-mix(in srgb,var(--brand) 34%, var(--line)); }
.feat__ic { width:50px; height:50px; border-radius:14px; display:grid; place-items:center; font-size:23px; background:var(--brand-soft); }
.feat__ic.amber { background:var(--accent-soft); }
.feat h3 { font-size:1.12rem; font-weight:800; letter-spacing:-.01em; margin-top:16px; }
.feat p { margin-top:8px; color:var(--ink-soft); font-size:.93rem; line-height:1.58; }
.feat .tag-soon { position:absolute; top:16px; right:16px; font-family:var(--mono); font-size:.54rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent-soft); padding:3px 8px; border-radius:999px; }

/* ---------- showcase (photo + copy) ---------- */
.showcase { margin-top:50px; display:grid; gap:clamp(40px,7vw,84px); }
.show-row { display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,5vw,60px); align-items:center; }
.show-row:nth-child(even) .show-visual { order:-1; }
.show-copy h3 { font-size:clamp(1.35rem,2.6vw,1.9rem); font-weight:800; letter-spacing:-.02em; margin-top:12px; }
.show-copy > p { margin-top:13px; color:var(--ink-soft); font-size:1.01rem; line-height:1.68; max-width:44ch; }
.show-copy ul { margin-top:16px; display:grid; gap:10px; padding:0; list-style:none; }
.show-copy li { display:flex; gap:11px; align-items:flex-start; font-size:.95rem; color:var(--ink-soft); line-height:1.5; }
.show-copy li .ck { color:var(--brand); font-weight:800; flex:none; }
.photo {
  position:relative; border-radius:22px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line);
  aspect-ratio:4/3;
}
.photo img { width:100%; height:100%; object-fit:cover; }
.photo::after { content:""; position:absolute; inset:0; background:linear-gradient(200deg, rgba(14,124,90,.12), rgba(8,62,46,.42)); }
.photo--tall { aspect-ratio:3/4; }
.photo__badge {
  position:absolute; z-index:2; left:16px; bottom:16px; display:inline-flex; align-items:center; gap:9px;
  background:color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:14px; padding:10px 13px; font-weight:700; font-size:.82rem; box-shadow:var(--shadow);
}
.photo__badge small { display:block; font-size:.62rem; color:var(--ink-faint); font-weight:600; }
.photo__badge .ic { width:28px; height:28px; border-radius:9px; display:grid; place-items:center; font-size:15px; background:var(--brand-soft); }

/* ---------- E20 checker widget ---------- */
.e20-card {
  background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:clamp(22px,3vw,32px);
  box-shadow:var(--shadow), var(--ring); max-width:720px;
}
.e20-card .lab { font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
.e20-fields { margin-top:8px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field label { display:block; font-size:.82rem; font-weight:700; margin-bottom:7px; color:var(--ink); }
.field select, .field input {
  width:100%; font-family:var(--body); font-size:1rem; color:var(--ink); background:var(--surface-2);
  border:1px solid var(--line); border-radius:12px; padding:13px 14px; min-height:48px; appearance:none;
  -webkit-appearance:none; transition:border-color .2s, box-shadow .2s;
}
.field select:focus, .field input:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 25%, transparent); }
.field.select { position:relative; }
.field.select::after { content:"▾"; position:absolute; right:14px; bottom:14px; color:var(--ink-faint); pointer-events:none; }
.e20-verdict { margin-top:22px; border-radius:18px; padding:22px; border:1px solid var(--line); background:var(--surface-2); }
.e20-verdict.ready { background:var(--brand-soft); border-color:color-mix(in srgb,var(--brand) 40%, var(--line)); }
.e20-verdict.minor { background:var(--warn-soft); border-color:color-mix(in srgb,var(--warn) 45%, var(--line)); }
.e20-verdict.care  { background:var(--danger-soft); border-color:color-mix(in srgb,var(--danger) 45%, var(--line)); }
.e20-verdict.na    { background:var(--surface-2); }
.e20-verdict .badge { display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:1.12rem; letter-spacing:-.01em; }
.e20-verdict .impact { font-family:var(--mono); font-size:.78rem; margin-top:2px; color:var(--ink-soft); }
.e20-verdict p { margin-top:12px; color:var(--ink-soft); font-size:.96rem; line-height:1.62; }
.e20-verdict .todo { margin-top:12px; display:grid; gap:8px; padding:0; list-style:none; }
.e20-verdict .todo li { display:flex; gap:9px; font-size:.9rem; color:var(--ink); line-height:1.5; }
.e20-verdict .todo li b { color:var(--brand-ink); }
.e20-disc { margin-top:16px; font-size:.8rem; color:var(--ink-faint); line-height:1.6; border-top:1px dashed var(--line); padding-top:14px; }
.e20-bands { margin-top:34px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.band { border-radius:18px; padding:22px; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-sm); }
.band .h { font-weight:800; display:flex; align-items:center; gap:8px; font-size:1.02rem; }
.band .yr { font-family:var(--mono); font-size:.74rem; color:var(--ink-faint); margin-top:4px; }
.band p { margin-top:11px; font-size:.9rem; color:var(--ink-soft); line-height:1.58; }
.band.ready { border-top:4px solid var(--success); }
.band.minor { border-top:4px solid var(--warn); }
.band.care  { border-top:4px solid var(--danger); }

/* ---------- trip calculator ---------- */
.calc { display:grid; grid-template-columns:1.05fr .95fr; gap:26px; align-items:start; }
.calc-form {
  background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:clamp(22px,3vw,30px);
  box-shadow:var(--shadow-sm), var(--ring); display:grid; gap:16px;
}
.calc-form .two { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.calc-form .toggle { display:flex; align-items:center; gap:10px; font-size:.9rem; color:var(--ink-soft); }
.calc-form .toggle input { width:20px; height:20px; accent-color:var(--brand); }
.calc-out {
  position:sticky; top:88px; border-radius:22px; padding:clamp(24px,3vw,32px); color:#fff; overflow:hidden;
  background:linear-gradient(158deg,var(--hero-1),var(--hero-2) 60%,var(--hero-3)); box-shadow:var(--shadow-lg);
}
.calc-out::before { content:""; position:absolute; right:-20%; top:-30%; width:60%; height:80%; background:radial-gradient(circle, rgba(245,166,35,.22), transparent 60%); }
.calc-out .lab { position:relative; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:#BFF0DC; }
.calc-out .big { position:relative; font-family:var(--mono); font-weight:700; font-size:clamp(2.4rem,7vw,3.4rem); letter-spacing:-.02em; margin-top:6px; line-height:1; }
.calc-out .grid { position:relative; margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.calc-out .cell { background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:14px; }
.calc-out .cell small { display:block; font-size:.68rem; color:rgba(255,255,255,.72); letter-spacing:.04em; }
.calc-out .cell b { font-family:var(--mono); font-size:1.32rem; font-weight:700; margin-top:5px; display:block; }
.calc-out .share { position:relative; margin-top:22px; }

/* ---------- personas ---------- */
.personas { margin-top:32px; display:flex; flex-wrap:wrap; gap:12px; }
.persona { display:inline-flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:10px 18px; font-weight:700; font-size:.92rem; box-shadow:var(--shadow-sm); }
.persona .e { font-size:18px; }

/* ---------- how it works ---------- */
.steps { margin-top:46px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.step { position:relative; padding:24px; border-radius:18px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.step__n { font-family:var(--mono); font-weight:700; font-size:.78rem; color:var(--brand-ink); background:var(--brand-soft); width:34px; height:34px; border-radius:11px; display:grid; place-items:center; }
.step h3 { font-size:1.04rem; font-weight:800; margin-top:15px; }
.step p { margin-top:7px; font-size:.9rem; color:var(--ink-soft); line-height:1.55; }
.step__arrow { position:absolute; top:34px; right:-12px; color:var(--ink-faint); font-size:20px; z-index:2; }
.step:last-child .step__arrow { display:none; }

/* ---------- pricing ---------- */
.pricing { margin-top:44px; display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:840px; }
.plan { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:28px; box-shadow:var(--shadow-sm); }
.plan.pro { position:relative; border-color:color-mix(in srgb,var(--accent) 45%, var(--line)); }
.plan .tier { font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.plan .price { font-weight:800; font-size:2rem; letter-spacing:-.02em; margin-top:8px; }
.plan .price small { font-size:.9rem; color:var(--ink-soft); font-weight:600; }
.plan ul { margin-top:18px; display:grid; gap:11px; padding:0; list-style:none; }
.plan li { display:flex; gap:10px; font-size:.94rem; color:var(--ink-soft); line-height:1.5; }
.plan li .ck { color:var(--brand); font-weight:800; flex:none; }
.plan .badge-soon { position:absolute; top:-11px; right:22px; font-family:var(--mono); font-size:.58rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#0b1a14; background:var(--accent); padding:4px 10px; border-radius:999px; }
.guarantee { margin-top:22px; max-width:840px; background:var(--brand-soft); border:1px solid color-mix(in srgb,var(--brand) 22%, var(--line)); border-radius:16px; padding:18px 20px; color:var(--brand-ink); font-size:.95rem; line-height:1.6; }

/* ---------- privacy strip ---------- */
.privacy { border-radius:26px; overflow:hidden; position:relative; color:#fff; padding:clamp(32px,5vw,54px);
  background:linear-gradient(155deg,#0c2119,#0f2a20 55%,#08160f); box-shadow:var(--shadow-lg); }
.privacy::before { content:""; position:absolute; inset:0; background:radial-gradient(600px 300px at 88% 10%, rgba(37,192,138,.32), transparent 60%); }
.privacy__in { position:relative; display:grid; grid-template-columns:1.3fr 1fr; gap:38px; align-items:center; }
.privacy .eyebrow { color:#7BE6BE; }
.privacy h2 { font-weight:800; font-size:clamp(1.6rem,3.4vw,2.4rem); letter-spacing:-.03em; margin-top:12px; }
.privacy p { margin-top:13px; color:rgba(255,255,255,.76); font-size:1.01rem; line-height:1.65; max-width:42ch; }
.privacy__list { display:grid; gap:11px; padding:0; list-style:none; }
.privacy__list li { display:flex; gap:11px; align-items:flex-start; font-size:.95rem; color:rgba(255,255,255,.9); }
.privacy__list .ck { color:#7BE6BE; font-weight:800; flex:none; }
.privacy__row { margin-top:24px; display:flex; gap:12px; flex-wrap:wrap; }

/* ---------- download band ---------- */
.download { text-align:center; }
.download__card { border-radius:30px; padding:clamp(38px,6vw,64px); position:relative; overflow:hidden;
  background:linear-gradient(155deg,var(--hero-1),var(--hero-2) 60%,var(--hero-3)); color:#fff; box-shadow:var(--shadow-lg); }
.download__card::before { content:""; position:absolute; inset:0; background:radial-gradient(500px 260px at 15% 15%, rgba(245,166,35,.2), transparent 60%); }
.download__in { position:relative; }
.download h2 { font-weight:800; font-size:clamp(1.8rem,4vw,2.8rem); letter-spacing:-.03em; }
.download p { margin-top:13px; color:rgba(255,255,255,.86); font-size:1.04rem; max-width:34rem; margin-inline:auto; line-height:1.6; }
.download .stores { justify-content:center; margin-top:26px; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:.95rem; border-radius:14px; padding:13px 21px; transition:transform .18s, background .2s; cursor:pointer; border:none; }
.btn--white { color:var(--brand-ink); background:#fff; box-shadow:0 16px 34px -16px rgba(0,0,0,.4); }
.btn--white:hover { transform:translateY(-2px); }
.btn--wire { color:#fff; border:1px solid rgba(255,255,255,.34); background:rgba(255,255,255,.08); }
.btn--wire:hover { background:rgba(255,255,255,.16); transform:translateY(-2px); }
.btn--primary { color:#fff; background:linear-gradient(135deg,var(--brand),var(--brand-deep)); box-shadow:0 16px 32px -16px rgba(14,124,90,.9); }
.btn--primary:hover { transform:translateY(-2px); }
.btn--amber { color:#0b1a14; background:linear-gradient(135deg,#FFCB5B,var(--accent)); box-shadow:0 16px 32px -16px rgba(245,166,35,.9); }
.btn--amber:hover { transform:translateY(-2px); }
.btn--ghost { color:var(--ink); border:1px solid var(--line); background:var(--surface); }
.btn--block { width:100%; justify-content:center; }

/* ---------- FAQ ---------- */
.faq { margin-top:44px; display:grid; gap:13px; max-width:840px; }
.faq details { background:var(--surface); border:1px solid var(--line); border-radius:15px; padding:2px 22px; box-shadow:var(--shadow-sm); transition:border-color .2s; }
.faq details[open] { border-color:color-mix(in srgb,var(--brand) 34%, var(--line)); }
.faq summary { cursor:pointer; list-style:none; padding:18px 0; font-weight:700; font-size:1.02rem; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-size:1.5rem; line-height:1; color:var(--brand); font-weight:300; transition:transform .25s; flex:none; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { padding:0 2px 20px; margin:0; color:var(--ink-soft); line-height:1.7; font-size:.97rem; }

/* ---------- footer ---------- */
.foot { background:var(--surface-2); border-top:1px solid var(--line); padding-block:52px 38px; color:var(--ink); }
.foot__grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px; }
.foot__brand { display:flex; align-items:center; gap:11px; }
.foot__brand img { width:36px; height:36px; border-radius:11px; }
.foot__brand .nm { font-weight:800; font-size:1.02rem; }
.foot__blurb { margin-top:15px; max-width:34ch; color:var(--ink-soft); font-size:.9rem; line-height:1.6; }
.foot__col h4 { font-family:var(--mono); font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px; }
.foot__col a { display:block; font-size:.9rem; color:var(--ink-soft); margin-bottom:10px; transition:color .2s; }
.foot__col a:hover { color:var(--brand); }
.foot__legal { margin-top:40px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:.78rem; color:var(--ink-faint); line-height:1.6; }
.foot__legal a { color:var(--ink-soft); } .foot__legal a:hover { color:var(--brand); }
.foot__disc { margin-top:14px; font-size:.74rem; color:var(--ink-faint); max-width:72ch; line-height:1.6; }

/* ---------- sticky mobile download bar ---------- */
.dockbar { display:none; }
@media (max-width:700px) {
  .dockbar {
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60; gap:12px; align-items:center; justify-content:space-between;
    padding:11px 16px calc(11px + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--bg) 90%, transparent);
    backdrop-filter:blur(14px); border-top:1px solid var(--line);
  }
  .dockbar .lbl { font-weight:800; font-size:.9rem; }
  .dockbar .lbl small { display:block; font-size:.66rem; color:var(--ink-faint); font-weight:600; }
  .dockbar .btn { padding:11px 18px; }
  body { padding-bottom:72px; }
}

/* ---------- legal / long-form ---------- */
.legal-head { padding-block:clamp(38px,7vw,60px) 6px; }
.legal-head h1 { font-weight:800; font-size:clamp(1.85rem,4vw,2.7rem); letter-spacing:-.03em; margin-top:13px; }
.legal-head .meta { margin-top:10px; color:var(--ink-soft); font-size:.9rem; }
.legal-head .lede { margin-top:20px; max-width:62ch; color:var(--ink-soft); font-size:1.04rem; line-height:1.8; }
.legal { padding-block:14px clamp(60px,9vw,96px); }
.legal__grid { display:grid; grid-template-columns:220px 1fr; gap:52px; align-items:start; }
.legal__nav { position:sticky; top:86px; display:grid; gap:2px; }
.legal__nav a { font-size:.85rem; color:var(--ink-faint); padding:8px 0 8px 14px; border-left:2px solid var(--line); transition:color .2s, border-color .2s; }
.legal__nav a:hover { color:var(--brand); border-color:var(--brand); }
.legal__col { max-width:720px; }
.legal__col h2 { font-size:1.28rem; font-weight:800; letter-spacing:-.01em; margin-top:56px; padding-bottom:14px; border-bottom:1px solid var(--line); scroll-margin-top:86px; }
.legal__col h2:first-child { margin-top:0; }
.legal__col h3 { font-size:1.02rem; font-weight:800; margin-top:30px; }
.legal__col p { margin-top:20px; color:var(--ink-soft); font-size:1.01rem; line-height:1.85; }
.legal__col ul { margin-top:20px; padding-left:24px; display:grid; gap:14px; }
.legal__col li { color:var(--ink-soft); font-size:1.01rem; line-height:1.75; padding-left:4px; }
.legal__col strong { color:var(--ink); font-weight:700; }
.legal__col a { color:var(--brand); font-weight:600; }
.legal__col a:hover { text-decoration:underline; }
.callout { margin-top:24px; margin-bottom:8px; padding:18px 20px; border-radius:14px; background:var(--brand-soft); border:1px solid color-mix(in srgb,var(--brand) 20%, var(--line)); color:var(--brand-ink); font-size:.96rem; line-height:1.7; }
.callout.amber { background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 30%, var(--line)); color:var(--accent-ink); }
.callout b { font-weight:800; }
.legal__table-wrap { margin-top:16px; overflow-x:auto; border-radius:14px; border:1px solid var(--line); }
.legal__table { width:100%; min-width:480px; border-collapse:collapse; font-size:.9rem; }
.legal__table th, .legal__table td { padding:12px 15px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.legal__table th { background:var(--brand-soft); color:var(--brand-ink); font-weight:700; font-size:.76rem; text-transform:uppercase; letter-spacing:.04em; }
.legal__table tr:last-child td { border-bottom:none; }
.legal__table td { color:var(--ink-soft); }

/* ---------- reveal ---------- */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; } .hero__photo{opacity:.12;} }

/* ---------- focus ---------- */
:focus-visible { outline:3px solid var(--brand); outline-offset:2px; border-radius:4px; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .features { grid-template-columns:repeat(2,1fr); }
  .worries { grid-template-columns:repeat(2,1fr); }
  .e20-bands { grid-template-columns:1fr; }
}
@media (max-width: 880px) {
  .hero__grid { grid-template-columns:1fr; }
  .cluster { order:-1; }
  .stats { grid-template-columns:repeat(2,1fr); }
  .show-row { grid-template-columns:1fr; gap:24px; }
  .show-visual { order:-1; }
  .calc { grid-template-columns:1fr; }
  .calc-out { position:static; }
  .steps { grid-template-columns:1fr; }
  .step__arrow { display:none; }
  .pricing { grid-template-columns:1fr; }
  .privacy__in { grid-template-columns:1fr; gap:24px; }
  .foot__grid { grid-template-columns:1fr 1fr; }
  .foot__brand-col { grid-column:1 / -1; }
  .legal__grid { grid-template-columns:1fr; gap:8px; }
  .legal__nav { position:static; flex-wrap:wrap; display:flex; gap:8px 18px; padding-bottom:18px; border-bottom:1px solid var(--line); margin-bottom:8px; }
  .legal__nav a { border-left:none; padding-left:0; }
}
@media (max-width: 560px) {
  .nav__links a:not(.nav__cta):not(.nav__up) { display:none; }
  .nav__inner { gap:10px; } .nav__links { gap:12px; }
  .brand__tag { display:none; }
  .cchip { display:none; }
  .features, .worries { grid-template-columns:1fr; }
  .e20-fields, .calc-form .two, .calc-out .grid { grid-template-columns:1fr; }
  .foot__grid { grid-template-columns:1fr; }
  .stats { grid-template-columns:1fr 1fr; }
}