/* =====================================================================
   ScanMyCar — marketing + legal site
   Concept: "the instrument cluster at night." Amber instrument lighting
   on near-black, Orbitron numerals, needle-gauge motifs, a green health
   pulse — lifted directly from the app's own theme (lib/app/theme.dart)
   and brand record (branding/BRAND.md). Committed dark single-world, to
   match the app (which ships dark-only).
   Fonts are defined in fonts.css (the app's Orbitron + Rajdhani, inlined).
   ===================================================================== */

/* ---- reset ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, picture { display: block; max-width: 100%; }
button, input, textarea { font: inherit; color: inherit; }
a { color: inherit; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 3px; }

/* ---- tokens (from theme.dart / BRAND.md) ---------------------------- */
:root {
  color-scheme: dark;

  --bg:        #0A0C0E;   /* dash canvas            */
  --surface:   #14171B;   /* cards                  */
  --surface-2: #1B1F24;   /* raised cards / sheets  */
  --surface-3: #21262d;   /* hover / insets         */
  --amber:     #FFB300;   /* primary / needle       */
  --amber-hot: #FFD54F;   /* sweep highlight        */
  --green:     #35D07F;   /* health / AI signifier  */
  --red:       #FF5252;   /* faults / redline       */
  --dim:       #8B9299;   /* secondary text / ticks */
  --text:      #E8EAED;   /* primary text           */
  --track:     #2A2F36;   /* gauge track / inactive */

  --bezel:   rgba(255,255,255,.08);   /* thin card ring (app CardTheme) */
  --bezel-2: rgba(255,255,255,.15);
  --amber-soft: rgba(255,179,0,.14);
  --amber-line: rgba(255,179,0,.28);
  --grid-line:  rgba(255,255,255,.035);

  --font-display: 'Orbitron', 'Rajdhani', system-ui, sans-serif;
  --font-body: 'Rajdhani', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Menlo', 'Consolas', monospace;

  --maxw: 1180px;
  --pad: clamp(1.1rem, 4vw, 2rem);
  --r: 14px;      /* app card radius */
  --r-sm: 10px;
  --r-lg: 22px;
  /* easeInOutCubic — the app's needle-sweep curve (Curves.easeInOutCubic) */
  --ease: cubic-bezier(.65, 0, .35, 1);
}

/* ---- base ----------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1.02rem, 0.97rem + 0.25vw, 1.15rem);
  line-height: 1.62;
  color: var(--text);
  background: var(--bg);
  /* faint instrument-panel grid, fixed behind everything */
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px;
  background-position: center top;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.06; letter-spacing: .2px; }
h1 { font-weight: 700; }
p { text-wrap: pretty; }
strong, b { font-weight: 600; color: #f4f6f8; }
::selection { background: var(--amber); color: #0A0C0E; }

/* ---- layout --------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: clamp(3.6rem, 9vw, 6.5rem); position: relative; }
.section--tight { padding-block: clamp(2.6rem, 6vw, 4rem); }
.section + .section { border-top: 1px solid var(--bezel); }

/* section eyebrow — the instrument micro-label (app labelMedium) */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-body); font-weight: 600;
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim);
}
.eyebrow::before {
  content: ""; width: 26px; height: 1px; background: var(--amber-line);
}
.eyebrow--amber { color: var(--amber); }

.section-head { max-width: 42rem; margin-bottom: clamp(2rem, 5vw, 3rem); }
.section-head h2 { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem); margin-top: .8rem; }
.section-head p { color: var(--dim); font-size: 1.08rem; margin-top: 1rem; max-width: 40rem; }
.section-head--center { text-align: center; margin-inline: auto; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center p { margin-inline: auto; }
.lede { color: var(--dim); }

/* small amber "Pro" pill — mirrors the app's PRO chips */
.pro-chip {
  display: inline-block; vertical-align: .12em; margin-left: .3rem;
  font-family: var(--font-body); font-weight: 700; font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--amber);
  border: 1px solid var(--amber-line); border-radius: 999px;
  padding: .1rem .45rem; background: var(--amber-soft);
}

/* ---- skip link ------------------------------------------------------ */
.skip {
  position: absolute; left: -999px; top: .5rem; z-index: 200;
  background: var(--amber); color: #0A0C0E; padding: .6rem 1rem;
  border-radius: var(--r-sm); font-weight: 600;
}
.skip:focus { left: .8rem; }

/* ---- nav ------------------------------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10,12,14,.72);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--bezel);
}
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 62px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand svg { width: 30px; height: 30px; flex: none; }
.brand__word { font-family: var(--font-display); font-weight: 700; font-size: 1.12rem; letter-spacing: .3px; color: var(--text); }
.brand__word i { color: var(--amber); font-style: normal; }
.nav__links { display: flex; align-items: center; gap: 1.9rem; }
.nav__links a {
  text-decoration: none; color: var(--dim); font-weight: 600; font-size: .95rem;
  letter-spacing: .01em; transition: color .18s var(--ease);
}
.nav__links a:hover { color: var(--text); }
.nav__right { display: flex; align-items: center; gap: 1rem; }

/* ---- buttons -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-body); font-weight: 600; font-size: 1rem;
  letter-spacing: .01em; text-decoration: none; cursor: pointer;
  padding: .72rem 1.25rem; border-radius: var(--r-sm);
  border: 1px solid transparent; transition: transform .16s var(--ease),
    background .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.btn--primary {
  background: var(--amber); color: #0A0C0E; border-color: var(--amber);
  box-shadow: 0 0 0 rgba(255,179,0,0);
}
.btn--primary:hover { background: var(--amber-hot); border-color: var(--amber-hot); box-shadow: 0 8px 30px -8px rgba(255,179,0,.5); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--bezel-2); }
.btn--ghost:hover { border-color: var(--amber); color: var(--amber); }
.btn--sm { padding: .5rem .9rem; font-size: .92rem; }
.btn:active { transform: translateY(1px); }

/* ---- hero ----------------------------------------------------------- */
.hero { position: relative; overflow: hidden; }
.hero::before {   /* amber instrument glow, upper-right, like the app icon */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 60% at 82% 8%, rgba(255,179,0,.14), transparent 62%);
}
.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center; padding-block: clamp(2.6rem, 7vw, 5rem);
}
.hero h1 {
  font-size: clamp(2.15rem, 1.2rem + 4.2vw, 3.85rem);
  letter-spacing: -.01em; margin-top: 1.2rem;
}
.hero h1 .amber { color: var(--amber); }
.hero__sub { color: var(--dim); font-size: clamp(1.08rem, 1rem + .4vw, 1.28rem); margin-top: 1.3rem; max-width: 34rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.9rem; align-items: center; }
.hero__note { color: var(--dim); font-size: .9rem; margin-top: 1.15rem; display: flex; align-items: center; gap: .5rem; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(53,208,127,.5); animation: pulse 2.4s var(--ease) infinite; flex: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(53,208,127,.45); } 70% { box-shadow: 0 0 0 9px rgba(53,208,127,0); } 100% { box-shadow: 0 0 0 0 rgba(53,208,127,0); } }

/* hero instrument stack */
.cluster { position: relative; display: grid; gap: 1rem; }
.cluster__gauge { position: relative; }
.gauge-svg { width: 100%; height: auto; max-width: 420px; margin-inline: auto; overflow: visible; }
.gauge-svg .needle { transform-box: view-box; transform-origin: 120px 120px; transition: transform .7s var(--ease); }
.gauge-svg .g-rpm { font-family: var(--font-display); font-weight: 700; fill: var(--amber); font-variant-numeric: tabular-nums; }
.gauge-svg .g-unit { font-family: var(--font-body); font-weight: 600; fill: var(--dim); letter-spacing: .18em; }
.gauge-svg .g-lab { font-family: var(--font-body); font-weight: 600; fill: var(--dim); letter-spacing: .14em; }
.gauge-readout {   /* small live PID chips flanking the tach */
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem;
}

/* ---- readout tile (mono sensor value) ------------------------------- */
.tile {
  background: var(--surface); border: 1px solid var(--bezel); border-radius: var(--r);
  padding: .85rem .95rem; position: relative; overflow: hidden;
}
.tile--warn { border-color: var(--red); }
.tile__label { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.tile__val { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--amber); margin-top: .35rem; line-height: 1; font-variant-numeric: tabular-nums; }
.tile--warn .tile__val { color: var(--red); }
.tile__val small { font-family: var(--font-body); font-size: .82rem; color: var(--dim); font-weight: 600; margin-left: .25rem; letter-spacing: .04em; }
.tile__bar { height: 4px; border-radius: 3px; background: rgba(255,255,255,.08); margin-top: .7rem; overflow: hidden; }
.tile__bar > i { display: block; height: 100%; background: var(--amber); border-radius: 3px; transition: width .5s var(--ease); }
.tile--warn .tile__bar > i { background: var(--red); }

/* ---- generic card --------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--bezel); border-radius: var(--r);
  padding: clamp(1.3rem, 3vw, 1.8rem);
}
.card h3 { font-family: var(--font-display); font-size: 1.12rem; letter-spacing: .3px; }
.card p { color: var(--dim); margin-top: .6rem; font-size: 1rem; }

/* (how-it-works step styles removed with that section) */

/* (8-vs-92 sensor-wall styles removed — the real sensors.webp shows the list) */

/* ---- DTC decoder --------------------------------------------------- */
.dtc { display: grid; grid-template-columns: 320px 1fr; gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start; }
.dtc__codes { display: flex; flex-direction: column; gap: .55rem; }
.codechip {
  display: flex; align-items: center; gap: .8rem; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--bezel); border-radius: var(--r);
  padding: .85rem 1rem; cursor: pointer; transition: border-color .16s var(--ease), background .16s var(--ease);
}
.codechip:hover { border-color: var(--bezel-2); }
.codechip[aria-selected="true"] { border-color: var(--amber); background: var(--surface-2); }
.codechip__code { font-family: var(--font-mono); font-weight: 600; font-size: 1.02rem; color: var(--amber); letter-spacing: .02em; }
.codechip[data-sev="high"] .codechip__code { color: var(--red); }
.codechip__name { color: var(--dim); font-size: .92rem; line-height: 1.3; }
.codechip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: none; margin-left: auto; }
.codechip[data-sev="high"] .codechip__dot { background: var(--red); }

.dtc__panel {
  background: var(--surface); border: 1px solid var(--bezel); border-radius: var(--r-lg);
  padding: clamp(1.4rem, 3vw, 2rem); min-height: 15rem; position: relative;
}
.dtc__tag { font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.dtc__head { display: flex; align-items: center; gap: .9rem; margin: .5rem 0 .2rem; flex-wrap: wrap; }
.dtc__code { font-family: var(--font-mono); font-weight: 700; font-size: 1.7rem; color: var(--amber); }
.dtc[data-active-sev="high"] .dtc__code { color: var(--red); }
.dtc__badge { font-family: var(--font-body); font-weight: 600; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  padding: .22rem .55rem; border-radius: 999px; border: 1px solid currentColor; }
.badge-info { color: var(--amber); } .badge-soon { color: var(--amber-hot); } .badge-stop { color: var(--red); }
.dtc__name { font-family: var(--font-display); font-size: 1.15rem; margin-top: .3rem; color: var(--text); }
.dtc__ai { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px dashed var(--bezel-2); display: flex; gap: .8rem; }
.dtc__ai-ico { width: 26px; height: 26px; flex: none; color: var(--green); margin-top: .1rem; }
.dtc__ai p { color: #cdd2d6; font-size: 1rem; }
.dtc__ai .who { color: var(--green); font-weight: 600; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; display: block; margin-bottom: .3rem; }

/* ---- feature split (AI chat / voice) ------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 4vw, 3.2rem); align-items: center; }
.split--rev .split__media { order: -1; }
.split__body h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem); margin-top: .7rem; }
.split__body p { color: var(--dim); margin-top: 1rem; font-size: 1.08rem; }
.flist { margin-top: 1.4rem; display: grid; gap: .8rem; }
.flist li { display: flex; gap: .7rem; align-items: flex-start; color: #cdd2d6; }
.flist svg { width: 20px; height: 20px; color: var(--amber); flex: none; margin-top: .2rem; }

/* (AI chat-mock styles removed — the real ai.webp screenshot shows it) */

/* voice-alert HUD */
.voice {
  background: radial-gradient(120% 90% at 20% 0%, #1a1e23, var(--surface));
  border: 1px solid var(--bezel); border-radius: var(--r-lg); padding: clamp(1.4rem,3vw,2rem);
  max-width: 460px; margin-inline: auto;
}
.voice__row { display: flex; align-items: center; gap: 1rem; }
.voice__spk { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,82,82,.14); color: var(--red);
  display: grid; place-items: center; flex: none; border: 1px solid rgba(255,82,82,.3); }
.voice__spk svg { width: 22px; height: 22px; }
.wave { display: flex; align-items: center; gap: 3px; height: 30px; }
.wave i { width: 3px; height: 30%; background: var(--red); border-radius: 3px; animation: wv 1.1s var(--ease) infinite; }
.wave i:nth-child(2){animation-delay:.1s} .wave i:nth-child(3){animation-delay:.2s} .wave i:nth-child(4){animation-delay:.3s}
.wave i:nth-child(5){animation-delay:.4s} .wave i:nth-child(6){animation-delay:.15s} .wave i:nth-child(7){animation-delay:.28s}
.wave i:nth-child(8){animation-delay:.05s} .wave i:nth-child(9){animation-delay:.36s}
@keyframes wv { 0%,100%{height:20%} 50%{height:100%} }
.voice__say { font-family: var(--font-mono); font-size: 1.02rem; color: var(--text); margin-top: 1.2rem; min-height: 1.5em; }
.voice__say::before { content: "“"; color: var(--red); } .voice__say::after { content: "”"; color: var(--red); }
.voice__meta { color: var(--dim); font-size: .88rem; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--bezel); }
.voice__meta b { color: var(--text); }

/* ---- iPhone device frame (real screenshots, shown in context) ------ */
/* pre-rendered iPhone mockup — docs/img/renders/*.webp (titanium frame + screen
   glare baked at 3x). Grounding shadow follows the phone silhouette via drop-shadow. */
.shot { position: relative; display: grid; place-items: center; padding: clamp(.5rem, 3vw, 1.4rem) 0; }
.shot::before {                      /* ambient amber floor glow behind the phone */
  content: ""; position: absolute; z-index: 0; width: min(70%, 270px); aspect-ratio: 1 / 1.05;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,179,0,.16), transparent 62%); filter: blur(22px);
}
.shot img {
  position: relative; z-index: 1; display: block; width: 300px; max-width: 82%; height: auto;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)) drop-shadow(0 26px 34px rgba(0,0,0,.62));
  transition: transform .55s var(--ease);
}
.split__media:hover .shot img { transform: translateY(-8px); }

/* the "tap a code to decode" hint above the interactive decoder */
.dtc-hint { color: var(--dim); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 600; margin: clamp(2rem, 5vw, 3rem) 0 1rem; display: flex; align-items: center; gap: .6rem; }
.dtc-hint::before { content: ""; width: 22px; height: 1px; background: var(--amber-line); }

/* ---- privacy strip -------------------------------------------------- */
.priv { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem,4vw,3rem); align-items: center; }
.priv__diagram { background: var(--surface); border: 1px solid var(--bezel); border-radius: var(--r-lg); padding: clamp(1.4rem,3vw,2rem); }
.priv-row { display: flex; align-items: center; gap: 1rem; }
.priv-node { background: var(--surface-2); border: 1px solid var(--bezel-2); border-radius: var(--r); padding: .9rem 1rem; flex: 1; }
.priv-node b { font-family: var(--font-display); font-size: .95rem; letter-spacing: .3px; display: flex; align-items: center; gap: .5rem; }
.priv-node b svg { width: 18px; height: 18px; color: var(--amber); }
.priv-node small { color: var(--dim); font-size: .84rem; display: block; margin-top: .3rem; }
.priv-link { flex: none; width: 84px; text-align: center; position: relative; color: var(--dim); }
.priv-link span { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; color: var(--dim); text-transform: uppercase; }
.priv-link .dash { height: 0; border-top: 1px dashed var(--amber-line); margin: .35rem 0; }
.priv-node--phone b svg { color: var(--green); }
.pill-list { margin-top: 1.4rem; display: grid; gap: .7rem; }
.pill-list li { display: flex; gap: .7rem; align-items: flex-start; color: #cdd2d6; }
.pill-list svg { width: 20px; height: 20px; flex: none; color: var(--green); margin-top: .2rem; }

/* ---- free vs pro plans ---------------------------------------------
   Mirrors the app's own paywall sheet: a quiet free card with green
   checks, and the Pro card in the amber hero treatment. */
.plans {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 1.6rem);
  align-items: stretch; max-width: 62rem; margin-inline: auto;
}
.plan {
  background: var(--surface); border: 1px solid var(--bezel); border-radius: var(--r-lg);
  padding: clamp(1.4rem, 3vw, 2rem); display: flex; flex-direction: column;
}
.plan--pro { background: rgba(255,179,0,.07); border: 1.5px solid var(--amber-line); }
.plan__tag {
  align-self: flex-start; font-weight: 700; font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 999px; padding: .22rem .65rem;
}
.plan__tag--free { color: var(--green); }
.plan__tag--pro { color: var(--amber); }
.plan h3 { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: .3px; margin-top: 1rem; }
.plan__list { margin-top: 1.2rem; gap: .7rem; }
.plan__list li { font-size: .99rem; }
.plan .plan__list svg { color: var(--green); }
.plan--pro .plan__list svg { color: var(--amber); }
.plan__price {
  margin-top: auto; padding-top: 1.4rem; color: var(--dim); font-size: .95rem;
  display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap;
}
.plan__price b {
  font-family: var(--font-display); font-weight: 700; font-size: 1.45rem;
  color: var(--text); font-variant-numeric: tabular-nums;
}
.plan--pro .plan__price b { color: var(--amber); }
.plan__dot { padding-inline: .35rem; }
.plan__fine { color: var(--dim); font-size: .82rem; margin-top: .6rem; }

/* ---- coming soon / notify ------------------------------------------ */
.cta-band { text-align: center; }
.cta-band h2 { font-size: clamp(1.8rem, 1.3rem + 2.4vw, 2.8rem); }
.cta-band .lede { max-width: 34rem; margin: 1rem auto 0; font-size: 1.1rem; }
.platforms { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }
.plat {
  display: inline-flex; align-items: center; gap: .7rem; background: var(--surface);
  border: 1px solid var(--bezel); border-radius: var(--r); padding: .8rem 1.15rem; text-align: left;
  text-decoration: none;
}
a.plat:hover { border-color: var(--amber-line); }
.plat svg { width: 26px; height: 26px; color: var(--text); flex: none; }
.plat b { font-family: var(--font-display); font-size: .95rem; letter-spacing: .3px; display: block; }
.plat small { color: var(--amber); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }

.notify { margin: 2.2rem auto 0; max-width: 32rem; }
.notify__form { display: flex; gap: .6rem; flex-wrap: wrap; }
.notify__form input[type=email] {
  flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--bezel-2);
  border-radius: var(--r-sm); padding: .78rem 1rem; color: var(--text); font-size: 1rem;
}
.notify__form input::placeholder { color: var(--dim); }
.notify__form input:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; border-color: var(--amber); }
.notify__msg { color: var(--green); font-weight: 600; font-size: .95rem; margin-top: .9rem; min-height: 1.2em; }
.notify__fine { color: var(--dim); font-size: .84rem; margin-top: .7rem; }
.notify__fine a { color: var(--dim); }

/* ---- footer --------------------------------------------------------- */
.footer { border-top: 1px solid var(--bezel); padding-block: clamp(2.4rem, 5vw, 3.4rem); }
.footer__grid { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; align-items: flex-start; }
.footer__brand { max-width: 22rem; }
.footer__brand p { color: var(--dim); font-size: .95rem; margin-top: .9rem; }
.footer__cols { display: flex; gap: clamp(2rem, 6vw, 4.5rem); flex-wrap: wrap; }
.footer__col h4 { font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--dim); font-weight: 600; font-family: var(--font-body); }
.footer__col ul { margin-top: .9rem; display: grid; gap: .55rem; }
.footer__col a { text-decoration: none; color: #cdd2d6; font-size: .96rem; }
.footer__col a:hover { color: var(--amber); }
.footer__bottom { margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--bezel);
  display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; justify-content: space-between; align-items: center;
  color: var(--dim); font-size: .86rem; }
.footer__bottom .mono { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .02em; }

/* ---- disclaimer note ------------------------------------------------ */
.note {
  display: flex; gap: .9rem; align-items: flex-start;
  background: rgba(255,179,0,.05); border: 1px solid var(--amber-line); border-radius: var(--r);
  padding: 1.1rem 1.2rem; margin-top: 2rem; color: #dfe3e6;
}
.note svg { width: 22px; height: 22px; color: var(--amber); flex: none; margin-top: .15rem; }
.note b { color: var(--text); }

/* ---- legal pages (privacy / terms) --------------------------------- */
.legal { padding-block: clamp(2.4rem, 6vw, 4rem); }
.legal__head { max-width: 46rem; }
.legal__head h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); }
.legal__meta { color: var(--dim); font-family: var(--font-mono); font-size: .84rem; margin-top: 1rem; letter-spacing: .02em; }
.legal__body { max-width: 46rem; margin-top: 2.6rem; }
.legal__body h2 {
  font-size: 1.35rem; margin-top: 2.6rem; padding-top: .3rem;
  display: flex; align-items: baseline; gap: .7rem;
}
.legal__body h2::before {
  content: counter(sec, decimal-leading-zero); counter-increment: sec;
  font-family: var(--font-mono); font-size: .9rem; color: var(--amber); font-weight: 600;
}
.legal__body { counter-reset: sec; }
.legal__body h3 { font-family: var(--font-display); font-size: 1.05rem; margin-top: 1.6rem; color: var(--text); }
.legal__body p { margin-top: 1rem; color: #cdd2d6; }
.legal__body ul.bul { margin-top: 1rem; display: grid; gap: .6rem; }
.legal__body ul.bul li { position: relative; padding-left: 1.3rem; color: #cdd2d6; }
.legal__body ul.bul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--amber); }
.legal__body a { color: var(--amber); text-decoration-color: var(--amber-line); text-underline-offset: 3px; }
.legal__toc { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.8rem; }
.legal__toc a { font-family: var(--font-mono); font-size: .8rem; color: var(--dim); text-decoration: none;
  border: 1px solid var(--bezel); border-radius: 999px; padding: .3rem .75rem; }
.legal__toc a:hover { border-color: var(--amber); color: var(--amber); }
.kv { background: var(--surface); border: 1px solid var(--bezel); border-radius: var(--r); padding: .3rem 0; margin-top: 1.2rem; overflow-x: auto; }
.kv table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: .95rem; }
.kv td { padding: .7rem 1.1rem; border-top: 1px solid var(--bezel); vertical-align: top; color: #cdd2d6; }
.kv tr:first-child td { border-top: 0; }
.kv td:first-child { color: var(--text); font-weight: 600; white-space: nowrap; width: 34%; }
.kv td .mono { font-family: var(--font-mono); font-size: .84rem; color: var(--amber); }

/* scroll-reveal removed — content renders in place (no fade-in on scroll) */

/* ===================================================================
   RESPONSIVE
   =================================================================== */
@media (max-width: 940px) {
  .hero__grid { grid-template-columns: 1fr; }
  .cluster { order: 2; margin-top: .5rem; }
  .versus { grid-template-columns: 1fr; }
  .dtc { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .split--rev .split__media { order: 0; }
  .priv { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; gap: 1.6rem; }
}
@media (max-width: 720px) {
  .nav__links { display: none; }
}
@media (max-width: 460px) {
  .gauge-readout { grid-template-columns: 1fr 1fr; }
  .hero__cta { gap: .7rem; }
  .hero__cta .btn { flex: 1; }
}

/* ===================================================================
   REDUCED MOTION — honor the app's own respect for it
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .pulse-dot { animation: none; }
  .wave i { height: 55% !important; }
}
html { scroll-behavior: smooth; }
/* keep anchored headings clear of the sticky nav */
[id] { scroll-margin-top: 80px; }