/**
 * The public CoMiles website.
 *
 * Every colour below is a token from `lib/theme.ts` — the same file the iOS and
 * Android apps resolve their inline styles from. The pre-2026-08-30 stylesheet
 * carried its own palette (--navy #071022, --blue #3678ff, --cyan #3edbe5,
 * --violet #8b76ff) which existed nowhere in the product, so the site and the
 * app were two different-looking things wearing one logo. Those four are gone.
 *
 * `__tests__/utils/siteTokens.test.ts` holds the `--c-*` block below in step
 * with `darkColors` / `lightColors`. A value edited here and not there is a
 * drift the test fails on, because nothing else would ever notice.
 *
 * Type: Manrope 800 is self-hosted for display roles and figures — it is the
 * face the app draws its numerals in and the only one worth the bytes. Body
 * sentences use the platform UI stack (SF on iOS, Roboto on Android, Segoe on
 * Windows); the previous stylesheet *named* Inter without ever loading it, so
 * this is the same rendering, now honestly declared. See the launch audit for
 * what shipping Inter would cost.
 */

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope-800.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Body text uses each platform's UI font for reliable Latin and Devanagari
   coverage. Manrope is reserved for display text and expressive figures. */

:root {
  /* ---- dark theme · lib/theme.ts darkColors ---------------------------- */
  --c-brand: #5B95FF;
  --c-brandStrong: #397CF4;
  --c-brandSoft: rgba(79,142,255,0.16);
  --c-accent: #28D5E8;
  --c-bg: #060B1F;
  --c-bgElevated: #0D1630;
  --c-surfaceSunken: #16224A;
  --c-card: rgba(255,255,255,0.075);
  --c-cardBorder: rgba(180,201,255,0.15);
  --c-glass: rgba(13,22,48,0.80);
  --c-ink900: #F5F8FF;
  --c-ink700: #C3D0E8;
  --c-ink600: #93A4C0;
  --c-ink500: #7C8CAE;
  --c-ink300: #4E5D7C;
  --c-icon: #9CC0FF;
  --c-onBrandSoft: #DCE7FF;
  --c-onBrandInk: #04122E;
  --c-inkDisabled: #3C4A66;
  --c-dangerInk: #FFC9CE;
  --c-danger: #FF7A86;
  --c-dangerSoft: rgba(255,92,106,0.12);
  --c-dangerBorder: rgba(255,122,134,0.34);
  --c-critical: #D6323F;
  --c-onCritical: #FFFFFF;
  --c-success: #45D79B;
  --c-successSoft: rgba(45,200,139,0.12);
  --c-successBorder: rgba(69,215,155,0.32);
  --c-attention: #F2B44C;
  --c-attentionSoft: rgba(242,180,76,0.12);
  --c-attentionBorder: rgba(242,180,76,0.38);
  --c-reflect: #A78BFA;
  --c-reflectSoft: rgba(167,139,250,0.13);
  --c-reflectBorder: rgba(167,139,250,0.34);
  --c-info: #78A9FF;
  --c-infoSoft: rgba(91,149,255,0.13);
  --c-infoBorder: rgba(120,169,255,0.32);
  --c-border: #2B3955;

  /* Site-only values. The aurora and the ticker's edge dissolve are painted in
     whatever is actually behind them; a fade drawn in anything else is a grey
     frame (`CLAUDE.md` §7.3, LiveMap's edgeFadeColor). */
  --c-aurora-brand: rgba(91,149,255,0.26);
  --c-aurora-accent: rgba(40,213,232,0.13);
  --c-aurora-reflect: rgba(167,139,250,0.10);
  --c-hero-shot-frame: linear-gradient(160deg,#2B3955,#0D1630);
  --c-gridline: rgba(180,201,255,0.06);
  --c-wordmark-co: #4F8EFF;
  --c-wordmark-ink: #F1F5F9;
  --c-wordmark-dot: #22D3EE;

  /* ---- geometry · one place, both themes ------------------------------- */
  --r-control: 14px;
  --r-control-sm: 10px;
  --r-card: 26px;
  --r-card-sm: 20px;
  --r-large: 38px;
  --shadow: 0 8px 16px rgba(0,0,0,.30);
  --ease: cubic-bezier(.4,0,.2,1);
  /* The app's motion durations (lib/theme.ts `motion`); siteTokens.test.ts holds them equal. */
  --dur-tap: 120ms;
  --dur-reveal: 280ms;
  --dur-shared: 420ms;
  --dur-route: 620ms;
  --gutter: 22px;
  --pad-section: 40px;
  --measure: 680px;

  --font-display: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --display: var(--font-display);
  --sans: var(--font-body);

  color-scheme: dark;
}

/**
 * The light theme is declared twice on purpose.
 *
 * `html[data-theme='light']` is what the React app stamps once it mounts. The
 * `prefers-color-scheme` copy below is what a crawler, a no-JavaScript reader
 * and the first paint before hydration get — without it a light-mode visitor
 * sees a full-screen flash of the dark ground on every navigation, and the
 * static SEO snapshot in `copy-web-static.mjs` renders dark for everyone.
 * There is no third way: the CSP forbids the inline script that would normally
 * set the attribute before first paint.
 *
 * `__tests__/utils/siteTokens.test.ts` asserts both blocks against
 * `lightColors`, so they cannot drift apart.
 */
html[data-theme='light'] {
  /* ---- light theme · lib/theme.ts lightColors -------------------------- */
  --c-brand: #2563EB;
  --c-brandStrong: #1D4ED8;
  --c-brandSoft: #E8F0FF;
  --c-accent: #0E7490;
  --c-bg: #F4F7FB;
  --c-bgElevated: #FFFFFF;
  --c-surfaceSunken: #E8EEF6;
  --c-card: #FFFFFF;
  --c-cardBorder: #D4DEEA;
  --c-glass: rgba(255,255,255,0.82);
  --c-ink900: #0B1224;
  --c-ink700: #1D2A44;
  --c-ink600: #3A465C;
  --c-ink500: #5E6B84;
  --c-ink300: #667085;
  --c-icon: #3F5C8C;
  --c-onBrandSoft: #1D4ED8;
  --c-onBrandInk: #FFFFFF;
  --c-inkDisabled: #667085;
  --c-dangerInk: #C93C4A;
  --c-danger: #C93C4A;
  --c-dangerSoft: #FFF0F1;
  --c-dangerBorder: #F1B7BE;
  --c-critical: #D6323F;
  --c-onCritical: #FFFFFF;
  --c-success: #087A55;
  --c-successSoft: #E9F8F1;
  --c-successBorder: #A7DEC8;
  --c-attention: #8A5200;
  --c-attentionSoft: #F7F4EC;
  --c-attentionBorder: #B07A20;
  --c-reflect: #6D4FD6;
  --c-reflectSoft: #F3EEFF;
  --c-reflectBorder: #CDBEF6;
  --c-info: #1D5FD1;
  --c-infoSoft: #EAF1FF;
  --c-infoBorder: #B8CCF5;
  --c-border: #D4DEEA;

  --c-aurora-brand: rgba(37,99,235,0.10);
  --c-aurora-accent: rgba(14,116,144,0.07);
  --c-aurora-reflect: rgba(109,79,214,0.06);
  --c-hero-shot-frame: linear-gradient(160deg,#DCE4F0,#F3F6FC);
  --c-gridline: rgba(11,18,36,0.05);
  --c-wordmark-co: #2563EB;
  --c-wordmark-ink: #0F172A;
  --c-wordmark-dot: #06B6D4;

  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  html:not([data-theme='dark']) {
    /* ---- light theme · lib/theme.ts lightColors -------------------------- */
    --c-brand: #2563EB;
    --c-brandStrong: #1D4ED8;
    --c-brandSoft: #E8F0FF;
    --c-accent: #0E7490;
    --c-bg: #F4F7FB;
    --c-bgElevated: #FFFFFF;
    --c-surfaceSunken: #E8EEF6;
    --c-card: #FFFFFF;
    --c-cardBorder: #D4DEEA;
    --c-glass: rgba(255,255,255,0.82);
    --c-ink900: #0B1224;
    --c-ink700: #1D2A44;
    --c-ink600: #3A465C;
    --c-ink500: #5E6B84;
    --c-ink300: #667085;
    --c-icon: #3F5C8C;
    --c-onBrandSoft: #1D4ED8;
    --c-onBrandInk: #FFFFFF;
    --c-inkDisabled: #667085;
    --c-dangerInk: #C93C4A;
    --c-danger: #C93C4A;
    --c-dangerSoft: #FFF0F1;
    --c-dangerBorder: #F1B7BE;
    --c-critical: #D6323F;
    --c-onCritical: #FFFFFF;
    --c-success: #087A55;
    --c-successSoft: #E9F8F1;
    --c-successBorder: #A7DEC8;
    --c-attention: #8A5200;
    --c-attentionSoft: #F7F4EC;
    --c-attentionBorder: #B07A20;
    --c-reflect: #6D4FD6;
    --c-reflectSoft: #F3EEFF;
    --c-reflectBorder: #CDBEF6;
    --c-info: #1D5FD1;
    --c-infoSoft: #EAF1FF;
    --c-infoBorder: #B8CCF5;
    --c-border: #D4DEEA;

    --c-aurora-brand: rgba(37,99,235,0.10);
    --c-aurora-accent: rgba(14,116,144,0.07);
    --c-aurora-reflect: rgba(109,79,214,0.06);
    --c-hero-shot-frame: linear-gradient(160deg,#DCE4F0,#F3F6FC);
    --c-gridline: rgba(11,18,36,0.05);
    --c-wordmark-co: #2563EB;
    --c-wordmark-ink: #0F172A;
    --c-wordmark-dot: #06B6D4;

    color-scheme: light;
  }
}

/**
 * Devanagari.
 *
 * Manrope has no Devanagari glyphs at all, so a Hindi heading set in it falls
 * back per-character and comes out in two faces mid-word. Hindi therefore uses
 * the platform's own Devanagari face — Nirmala UI on Windows, Kohinoor on
 * Apple, Noto Sans Devanagari on Android — which costs nothing to download and
 * is the face those readers already read everything else in. A webfont here
 * would be 200KB+ before subsetting, on the connection least able to afford it.
 *
 * Devanagari also needs more vertical room: matras sit above and below the
 * line, and English leading clips them. Headings get a looser line-height and
 * lose the tight negative tracking, which is a Latin-display device and simply
 * makes conjuncts collide.
 */
html[lang^='hi'] {
  --font-display: 'Nirmala UI', 'Kohinoor Devanagari', 'Noto Sans Devanagari', 'Mangal', system-ui, sans-serif;
  --font-body: 'Nirmala UI', 'Kohinoor Devanagari', 'Noto Sans Devanagari', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: var(--font-display);
  --sans: var(--font-body);
}
html[lang^='hi'] h1,
html[lang^='hi'] h2,
html[lang^='hi'] h3,
html[lang^='hi'] .bento-figure {
  letter-spacing: 0;
  line-height: 1.28;
}
html[lang^='hi'] .hero h1 { line-height: 1.16; }
html[lang^='hi'] body,
html[lang^='hi'] .lede,
html[lang^='hi'] .notice p,
html[lang^='hi'] .qa-answer p,
html[lang^='hi'] .support,
html[lang^='hi'] .info-section p,
html[lang^='hi'] .info-section li,
html[lang^='hi'] .info-section ul { line-height: 1.75; }
html[lang^='hi'] .eyebrow { letter-spacing: 0.06em; }
/* The wordmark and the rupee figures stay in the Latin faces they were drawn
   for; a Devanagari face has the digits but not the same numerals. */
html[lang^='hi'] .brand-word,
html[lang^='hi'] .num { font-family: 'Manrope', 'Segoe UI', system-ui, sans-serif; }
html[lang^='hi'] .num { letter-spacing: -0.02em; }

/* The language switch, beside the other two view controls. */
.lang-switch { display: flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--c-cardBorder); border-radius: 999px; background: var(--c-card); }
.lang-switch a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 8px; border-radius: 999px;
  color: var(--c-ink600); font-size: 0.8125rem; font-weight: 700; line-height: 1;
  transition: background var(--dur-reveal) var(--ease), color var(--dur-reveal) var(--ease);
}
@media (hover: hover) { .lang-switch a:hover { background: var(--c-brandSoft); color: var(--c-ink900); } }
.lang-switch a[aria-current] { background: var(--c-brand); color: var(--c-onBrandInk); }
@media (pointer: coarse) {
  .lang-switch a { min-width: 44px; height: 40px; }
}

/* ============================ base ==================================== */

/**
 * The reset.
 *
 * This used to come from Tailwind's preflight, which arrived through
 * `global.css`. That import is gone: NativeWind's Metro transform routes any
 * CSS imported from JavaScript through `react-native-css-interop`, which
 * imports react-native-web — 193 modules and 129KB brotli of a React Native
 * styling bridge, pulled into a marketing page by an `import './landing.css'`.
 * The stylesheet is now linked from the HTML instead, so it is a stylesheet.
 *
 * Only the preflight rules this site actually depends on are reproduced. Each
 * one is here because removing it broke something, not for completeness:
 * `height: auto` on images is what stops the intrinsic `width`/`height`
 * attributes distorting a scaled image, and `display: block` on svg is what
 * keeps the inline icons off the text baseline inside every flex row.
 */
* { box-sizing: border-box; }
blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; }
ol, ul, menu { margin: 0; padding: 0; list-style: none; }
img, svg, video, canvas { display: block; vertical-align: middle; }
img, video { max-width: 100%; height: auto; }
button, input, optgroup, select, textarea { font: inherit; color: inherit; margin: 0; }
button, [role='button'] { cursor: pointer; }
button { background: none; border: 0; padding: 0; }
input::placeholder { opacity: 1; }
small { font-size: 80%; }
code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1em; }
html { font-size: calc(100% * var(--text-scale, 1)); }
html, body, #root { margin: 0; width: 100%; height: auto !important; min-height: 100% !important; }
#root { display: block !important; overflow: visible !important; }
body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: var(--c-bg);
  color: var(--c-ink900);
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 800; color: var(--c-ink900); }
p { margin: 0; }
ul { margin: 0; }
strong, b { font-weight: 700; }

/* Present for screen readers, absent for everyone else. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 1000;
  padding: 12px 16px; border-radius: var(--r-control);
  color: var(--c-onBrandInk); background: var(--c-brand);
  font-size: 0.875rem; font-weight: 700;
  transform: translateY(-180%); transition: transform var(--dur-reveal) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 3px solid var(--c-brand); outline-offset: 3px; border-radius: 4px;
}

.site-shell { position: relative; min-height: 100vh; overflow: clip; background: var(--c-bg); }

/* The aurora — two radial gradients, no filter, no canvas. */
.ambient { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.ambient-one { width: min(1000px, 150vw); aspect-ratio: 1; top: -340px; left: -22vw; background: radial-gradient(circle, var(--c-aurora-brand), transparent 68%); animation: drift 16s ease-in-out infinite; }
.ambient-two { width: min(860px, 130vw); aspect-ratio: 1; top: 46vh; right: -28vw; background: radial-gradient(circle, var(--c-aurora-accent), transparent 70%); animation: drift 14s ease-in-out infinite reverse; }
.ambient-three { width: min(900px, 140vw); aspect-ratio: 1; top: 190vh; left: -26vw; background: radial-gradient(circle, var(--c-aurora-reflect), transparent 70%); animation: drift 15s ease-in-out infinite; }

@keyframes drift { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(3%,-2%,0) scale(1.06); } }
@keyframes riseIn { from { opacity: 0; transform: translate3d(0,18px,0); } to { opacity: 1; transform: none; } }
@keyframes floatY {
  0%,100% { transform: translate3d(0, var(--drift, 0px), 0); }
  50% { transform: translate3d(0, calc(var(--drift, 0px) - 12px), 0); }
}
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@keyframes sweep { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@keyframes ringPulse { 0% { transform: scale(1); opacity: .5; } 70%,100% { transform: scale(1.6); opacity: 0; } }


/**
 * Arrival.
 *
 * Two shapes only. `.reveal` moves a whole block; `.reveal-stagger` moves each
 * child of a group in turn, 70ms apart, so a grid of six tiles reads as six
 * things settling rather than one panel appearing. The rise carries a hair of
 * scale with it (.985 → 1) because a block that only fades looks switched on,
 * and one that only moves looks dragged.
 *
 * The class is added by `App.web.tsx` after mount, so the default state here is
 * *visible*: a reader without JavaScript, or on a browser with no
 * `IntersectionObserver`, gets the page rather than an empty screen.
 *
 * The stagger is nth-child rules rather than a per-node inline delay, so no
 * layout is written per element. Groups here run to eight; a ninth child simply
 * arrives with the eighth, which is a far better failure than a group that
 * cannot grow.
 */
.reveal { opacity: 0; transform: translate3d(0,24px,0) scale(.985); transition: opacity var(--dur-shared) var(--ease), transform var(--dur-shared) var(--ease); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; will-change: auto; }

.reveal[data-reveal='stagger'] { opacity: 1; transform: none; }
.reveal[data-reveal='stagger'] > * { opacity: 0; transform: translate3d(0,22px,0) scale(.99); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); }
.reveal[data-reveal='stagger'].is-visible > * { opacity: 1; transform: none; }
.reveal[data-reveal='stagger'].is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal[data-reveal='stagger'].is-visible > *:nth-child(2) { transition-delay: 60ms; }
.reveal[data-reveal='stagger'].is-visible > *:nth-child(3) { transition-delay: 120ms; }
.reveal[data-reveal='stagger'].is-visible > *:nth-child(4) { transition-delay: 180ms; }
.reveal[data-reveal='stagger'].is-visible > *:nth-child(5) { transition-delay: 240ms; }
.reveal[data-reveal='stagger'].is-visible > *:nth-child(6) { transition-delay: 300ms; }
.reveal[data-reveal='stagger'].is-visible > *:nth-child(n+7) { transition-delay: 360ms; }

/* ============================ shared atoms ============================= */

.section { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: var(--pad-section) var(--gutter); }
.section[id] { scroll-margin-top: 96px; }

.eyebrow { display: block; font-size: 0.6875rem; line-height: 15px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--c-icon); }
.eyebrow-success { color: var(--c-success); }
.eyebrow-attention { color: var(--c-attention); }
.eyebrow-danger { color: var(--c-danger); }
.eyebrow-reflect { color: var(--c-reflect); }
.eyebrow-brand { color: var(--c-brand); }

.lede { max-width: var(--measure); color: var(--c-ink600); font-size: 0.9375rem; line-height: 1.6; text-wrap: pretty; }
.support { color: var(--c-ink500); font-size: 0.78125rem; line-height: 18px; }
.num { font-variant-numeric: tabular-nums; }

.button {
  display: inline-grid; grid-auto-flow: column; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 0 26px; border: 0; border-radius: 18px;
  font-family: var(--sans); font-size: 1rem; font-weight: 700; cursor: pointer;
  transition: transform var(--dur-reveal) var(--ease), background var(--dur-tap) linear, border-color var(--dur-reveal) var(--ease);
}
.button-primary { background: var(--c-brand); color: var(--c-onBrandInk); box-shadow: 0 14px 30px rgba(91,149,255,.28); }
@media (hover: hover) { .button-primary:hover { transform: translateY(-2px); } }
.button-primary:active { background: var(--c-brandStrong); transform: none; }
.button-secondary { background: var(--c-glass); border: 1px solid var(--c-cardBorder); color: var(--c-ink900); }
@media (hover: hover) { .button-secondary:hover { transform: translateY(-2px); border-color: var(--c-brand); } }
.button:active, .nav-cta:active { transform: scale(.97); transition-duration: var(--dur-tap); }
.button-sm { min-height: 44px; padding: 0 18px; border-radius: var(--r-control); font-size: 0.90625rem; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 999px;
  font-size: 0.78125rem; line-height: 18px; font-weight: 700;
  background: var(--c-infoSoft); border: 1px solid var(--c-infoBorder); color: var(--c-onBrandSoft);
}
.chip-success { background: var(--c-successSoft); border-color: var(--c-successBorder); color: var(--c-success); }
.chip-attention { background: var(--c-attentionSoft); border-color: var(--c-attentionBorder); color: var(--c-attention); }
.chip-reflect { background: var(--c-reflectSoft); border-color: var(--c-reflectBorder); color: var(--c-reflect); }

/* The one notice pattern on the site: icon halo, then a plain explanation.
   Mirrors the app's FeedbackBanner rather than inventing a second voice. */
.notice { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--r-card-sm); border: 1px solid; }
.notice svg { flex: none; margin-top: 1px; }
.notice p { font-size: 0.84375rem; line-height: 20px; }
.notice-attention { background: var(--c-attentionSoft); border-color: var(--c-attentionBorder); color: var(--c-attention); }
.notice-danger { background: var(--c-dangerSoft); border-color: var(--c-dangerBorder); color: var(--c-danger); }

.card { background: var(--c-card); border: 1px solid var(--c-cardBorder); border-radius: var(--r-card); }

/* ============================ header =================================== */

.site-header {
  position: sticky; top: 10px; z-index: 60;
  width: calc(100% - 20px); max-width: 1180px; margin: 10px auto 0;
  display: flex; align-items: center; gap: 14px;
  padding: 9px 9px 9px 16px; border-radius: 999px;
  background: var(--c-glass); border: 1px solid var(--c-cardBorder);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  transition: max-width var(--dur-shared) var(--ease), padding var(--dur-shared) var(--ease), box-shadow var(--dur-shared) var(--ease), transform var(--dur-shared) var(--ease);
}
.site-header.is-condensed { max-width: 980px; padding-top: 6px; padding-bottom: 6px; box-shadow: 0 10px 28px rgba(0,0,0,.34); }
.wordmark { display: inline-flex; align-items: center; gap: 9px; min-width: 0; flex: none; }
.brand-symbol { width: 30px; height: 30px; flex: none; display: block; border-radius: 9px; object-fit: contain; }
.brand-word { display: inline-flex; align-items: baseline; font-family: var(--display); font-size: 1.1875rem; line-height: 1; font-weight: 800; letter-spacing: -.4px; }
.brand-word-co { color: var(--c-wordmark-co); }
.brand-word-miles { color: var(--c-wordmark-ink); }
.brand-word-dot { color: var(--c-wordmark-dot); }
.footer-brand .brand-word { font-size: 1.5rem; }

.nav-links { display: flex; align-items: center; gap: 22px; margin-left: auto; font-size: 0.875rem; font-weight: 600; color: var(--c-ink700); }
.nav-links a { transition: color var(--dur-reveal) var(--ease); }
@media (hover: hover) { .nav-links a:hover, .nav-links a[aria-current='page'] { color: var(--c-ink900); } }
.header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nav-links + .header-actions { margin-left: 0; }

.view-controls { display: flex; align-items: center; gap: 8px; }
.text-size { display: flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--c-cardBorder); border-radius: 999px; background: var(--c-card); }
.text-size button {
  position: relative;
  /* Flex, not grid: `place-items: center` on a grid puts the letter and its
     sign on two rows, which drew the minus and plus as subscripts. */
  display: inline-flex; align-items: center; justify-content: center; gap: 1px;
  min-width: 40px; height: 36px; padding: 0 4px;
  border: 0; border-radius: 999px; background: none; color: var(--c-ink700);
  font-family: var(--sans); font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background var(--dur-reveal) var(--ease), color var(--dur-reveal) var(--ease);
}
/* On a touch screen the drawn control grows to the 44px target rather than
   relying on slop it does not have room for. */
@media (pointer: coarse) {
  .text-size button { min-width: 46px; height: 40px; }
}
.text-size button:nth-child(1) { font-size: .75rem; }
.text-size button:nth-child(2) { font-size: .875rem; }
.text-size button:nth-child(3) { font-size: 1rem; }
@media (hover: hover) { .text-size button:hover:not(:disabled) { background: var(--c-brandSoft); color: var(--c-ink900); } }
.text-size button:disabled { color: var(--c-inkDisabled); cursor: default; }

.theme-toggle {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--c-cardBorder); border-radius: 999px;
  color: var(--c-icon); background: var(--c-card); cursor: pointer;
  transition: border-color var(--dur-reveal) var(--ease);
}
@media (hover: hover) { .theme-toggle:hover { border-color: var(--c-brand); } }

.nav-cta {
  display: inline-grid; grid-auto-flow: column; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 999px;
  background: var(--c-brand); color: var(--c-onBrandInk);
  font-size: 0.90625rem; font-weight: 700; white-space: nowrap;
  transition: transform var(--dur-reveal) var(--ease), background var(--dur-tap) linear;
}
@media (hover: hover) { .nav-cta:hover { transform: translateY(-2px); } }
.nav-cta:active { background: var(--c-brandStrong); transform: none; }
.download-label-short { display: none; }

.menu-button {
  display: none; width: 40px; height: 40px; flex: none; padding: 0;
  border: 1px solid var(--c-cardBorder); border-radius: 999px;
  color: var(--c-icon); background: var(--c-card); cursor: pointer;
}
.menu-button span { display: block; width: 17px; height: 1.8px; border-radius: 2px; background: currentColor; margin: 4.5px auto; transition: transform var(--dur-reveal) var(--ease), margin var(--dur-reveal) var(--ease); }
.menu-button.open span:first-child { margin-bottom: -6.3px; transform: rotate(45deg); }
.menu-button.open span:last-child { transform: rotate(-45deg); }
.mobile-view-controls { display: none; }

/* ============================ hero ===================================== */

.hero { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 48px; align-items: center; padding-top: 52px; padding-bottom: 24px; }
.hero-copy { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }

.launch-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px 8px 10px; border-radius: 999px;
  background: var(--c-card); border: 1px solid var(--c-cardBorder);
  color: var(--c-ink700); font-size: 0.78125rem; line-height: 18px; font-weight: 700;
}
.launch-pill i { position: relative; display: grid; place-items: center; width: 10px; height: 10px; flex: none; }
.launch-pill i::before { content: ''; position: absolute; inset: 0; border-radius: 999px; background: var(--c-success); animation: ringPulse 2.6s ease-out infinite; }
.launch-pill i::after { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--c-success); }

.hero h1 { font-size: clamp(2.5rem, 7.4vw, 5.5rem); line-height: .94; letter-spacing: -.038em; }
.hero h1 span { display: block; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--c-brand), var(--c-accent), var(--c-brand));
  background-size: 200% auto; background-clip: text; -webkit-background-clip: text; color: transparent;
  animation: sweep 14s linear infinite;
}
.hero-lede { max-width: 600px; color: var(--c-ink600); font-size: 1.0625rem; line-height: 1.62; text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hero-platforms { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; color: var(--c-ink500); font-size: 0.8125rem; font-weight: 500; }
.hero-platforms i { width: 3px; height: 3px; border-radius: 999px; background: var(--c-ink300); }

.hero-shot { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hero-shot-frame {
  position: relative; width: min(330px, 82vw); padding: 9px; border-radius: 46px;
  background: var(--c-hero-shot-frame); box-shadow: var(--shadow);
  --drift: 0px;
  animation: floatY 9s ease-in-out infinite;
}
.hero-shot-frame img { display: block; width: 100%; border-radius: var(--r-large); }
.hero-pill {
  --drift: 0px;
  position: absolute; display: flex; align-items: center; gap: 9px;
  padding: 11px 15px; border-radius: 999px;
  background: var(--c-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow); font-size: 0.8125rem; line-height: 18px; font-weight: 700; white-space: nowrap;
}
.hero-pill-trust { top: 13%; left: -72px; border: 1px solid var(--c-successBorder); color: var(--c-success); animation: floatY 7s ease-in-out infinite; }
.hero-shot-caption { color: var(--c-ink500); font-size: 0.78125rem; line-height: 18px; text-align: center; }
.hero-pill-women { bottom: 19%; right: -64px; border: 1px solid var(--c-attentionBorder); color: var(--c-attention); animation: floatY 8s .8s ease-in-out infinite; }

/* ============================ corridor ticker ========================== */

.ticker { position: relative; z-index: 1; overflow: hidden; padding: 16px 0; background: var(--c-bgElevated); border-top: 1px solid var(--c-cardBorder); border-bottom: 1px solid var(--c-cardBorder); }
.ticker-row { display: flex; gap: 34px; width: max-content; align-items: center; animation: marquee 44s linear infinite; color: var(--c-ink500); font-size: 0.90625rem; font-weight: 700; white-space: nowrap; }
.ticker-row i { color: var(--c-accent); font-style: normal; }
.ticker::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--c-bgElevated), rgba(13,22,48,0) 14%, rgba(13,22,48,0) 86%, var(--c-bgElevated)); }
html[data-theme='light'] .ticker::after { background: linear-gradient(90deg, var(--c-bgElevated), rgba(255,255,255,0) 14%, rgba(255,255,255,0) 86%, var(--c-bgElevated)); }
.ticker-note { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; padding: 10px var(--gutter) 0; color: var(--c-ink500); font-size: 0.75rem; }

/* ============================ the split ================================ */

.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,460px); gap: 44px; align-items: center; }
.split-copy { display: flex; flex-direction: column; gap: 16px; }
.section h2 { font-size: clamp(1.75rem, 4vw, 2.875rem); line-height: 1.06; letter-spacing: -.03em; }

/* Small layout helpers that used to be inline styles in App.web.tsx. */
.stack { display: flex; flex-direction: column; gap: 14px; }
.after-eyebrow { margin-top: 10px; }
.button-start { align-self: flex-start; }
.platform .eyebrow + h3 { margin-top: 6px; }

/* ============================ bento ==================================== */

.band { display: flex; flex-direction: column; gap: 24px; }
.band-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.band-head h2 { max-width: 620px; }
.band-head p { max-width: 340px; color: var(--c-ink500); font-size: 0.9375rem; line-height: 24px; }

.bento { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: minmax(200px, auto); gap: 16px; }
.bento > * { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--r-card); background: var(--c-card); border: 1px solid var(--c-cardBorder); transition: transform var(--dur-reveal) var(--ease), border-color var(--dur-reveal) var(--ease); }
@media (hover: hover) { .bento > *:hover { transform: translateY(-5px); border-color: var(--c-brand); box-shadow: var(--shadow); } }
.bento h3 { font-family: var(--sans); font-size: 1.25rem; line-height: 26px; font-weight: 700; }
.bento p { color: var(--c-ink600); font-size: 0.875rem; line-height: 21px; }
.bento-wide { grid-column: span 2; }
.bento-tall { grid-column: span 2; grid-row: span 2; }
.bento-tall > :not(.bento-shot) { max-width: min(360px, 48%); }
.bento-success { background: var(--c-successSoft); border-color: var(--c-successBorder); }
.bento-success p { color: var(--c-ink700); }
.bento-reflect { background: var(--c-reflectSoft); border-color: var(--c-reflectBorder); }
.bento-reflect p { color: var(--c-ink700); }
.bento-danger { background: var(--c-dangerSoft); border-color: var(--c-dangerBorder); }
.bento-danger p { color: var(--c-dangerInk); }
@media (hover: hover) { .bento-danger:hover { border-color: var(--c-danger); } }
.bento-shot { position: absolute; right: 18px; bottom: -46px; width: min(244px, 46%); padding: 7px 7px 0; border-radius: 32px 32px 0 0; background: var(--c-hero-shot-frame); }
.bento-shot img { display: block; width: 100%; border-radius: 26px 26px 0 0; }
.bento-figure { font-family: var(--display); font-weight: 800; font-size: 2.5rem; line-height: 42px; letter-spacing: -.035em; }
.bento-foot { margin-top: auto; }
.bento-foot > p { margin-top: 4px; }
.bento .bento-foot h3 { font-size: 1.125rem; line-height: 1.5rem; }
.bento-sos-head { display: flex; align-items: center; gap: 12px; }
.bento-sos { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 999px; background: var(--c-critical); color: var(--c-onCritical); font-size: 0.75rem; font-weight: 700; }
.bento-map { display: flex; align-items: center; gap: 18px; }
.bento-map > div:first-child { flex: none; width: min(200px, 40%); border-radius: var(--r-control); overflow: hidden; border: 1px solid var(--c-cardBorder); }
.bento-map img { display: block; width: 100%; }

/* ============================ steps ==================================== */

.steps-band { background: var(--c-bgElevated); border-top: 1px solid var(--c-cardBorder); border-bottom: 1px solid var(--c-cardBorder); }
.steps-band > .section { padding-block: calc(var(--pad-section) * 1.2); }
.steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 28px; }
.steps::before {
  content: ''; position: absolute; top: 22px; left: 12%; right: 12%; height: 2px;
  background: linear-gradient(90deg, var(--c-brand), var(--c-accent));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-route) .15s var(--ease);
}
.steps.is-visible::before { transform: scaleX(1); }
.step { display: flex; flex-direction: column; gap: 10px; }
.step b { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 999px; background: var(--c-brand); color: var(--c-onBrandInk); font-family: var(--display); font-size: 1.125rem; font-weight: 800; }
.step h3 { font-family: var(--sans); font-size: 1.25rem; line-height: 26px; font-weight: 700; }
.step p { max-width: 340px; color: var(--c-ink600); font-size: 0.90625rem; line-height: 22px; }

/* ============================ ways in ================================== */

.ways { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.way { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: var(--r-card); background: var(--c-card); border: 1px solid var(--c-cardBorder); transition: transform var(--dur-reveal) var(--ease), border-color var(--dur-reveal) var(--ease); }
@media (hover: hover) { .way:hover { transform: translateY(-5px); border-color: var(--c-brand); box-shadow: var(--shadow); } }
.way-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-control); background: var(--c-brandSoft); color: var(--c-onBrandSoft); }
.way h3 { font-family: var(--sans); font-size: 1.1875rem; line-height: 25px; font-weight: 700; }
.way p { color: var(--c-ink600); font-size: 0.90625rem; line-height: 22px; }
.way a { margin-top: auto; padding-top: 6px; color: var(--c-brand); font-size: 0.90625rem; font-weight: 700; }
@media (hover: hover) { .way a:hover { text-decoration: underline; } }

/* ============================ safety =================================== */

.safety-band { background: var(--c-bgElevated); border-top: 1px solid var(--c-cardBorder); border-bottom: 1px solid var(--c-cardBorder); }
.safety-band > .section { padding-block: calc(var(--pad-section) * 1.2); }
.safety-grid { display: grid; grid-template-columns: minmax(0,320px) minmax(0,1fr); gap: 40px; align-items: start; }
.safety-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.safety-item { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: var(--r-card-sm); background: var(--c-card); border: 1px solid var(--c-cardBorder); }
.safety-item h3 { font-family: var(--sans); font-size: 1.0625rem; line-height: 23px; font-weight: 700; }
.safety-item p { color: var(--c-ink600); font-size: 0.875rem; line-height: 21px; }
.safety-item-critical { background: var(--c-dangerSoft); border-color: var(--c-dangerBorder); }
.safety-item-critical p { color: var(--c-dangerInk); }
.safety-shot { border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--c-cardBorder); }
.safety-shot img { display: block; width: 100%; }

/* ============================ questions ================================ */

.questions { display: grid; grid-template-columns: minmax(0,340px) minmax(0,1fr); gap: 44px; align-items: start; }
.qa { display: flex; flex-direction: column; gap: 10px; }
.qa-item { border-radius: 24px; background: var(--c-card); border: 1px solid var(--c-cardBorder); transition: border-color var(--dur-reveal) var(--ease); }
@media (hover: hover) { .qa-item:hover { border-color: var(--c-brand); } }
.qa-item > button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 24px; border: 0; background: none; text-align: left; cursor: pointer;
  font-family: var(--sans); font-size: 1.125rem; line-height: 25px; font-weight: 700; color: var(--c-ink900);
}
.qa-item > button svg { flex: none; color: var(--c-brand); transition: transform var(--dur-reveal) var(--ease); transform: rotate(-90deg); }
.qa-item > button[aria-expanded='true'] svg { transform: rotate(90deg); }
.qa-answer { padding: 0 24px 22px; }
.qa-answer p { max-width: var(--measure); color: var(--c-ink600); font-size: 0.9375rem; line-height: 24px; }
.qa-answer a { display: inline-block; margin-top: 10px; color: var(--c-brand); font-size: 0.90625rem; font-weight: 700; }
@media (hover: hover) { .qa-answer a:hover { text-decoration: underline; } }

/* ============================ connections ============================== */

.connect { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px; align-items: center; }
.connect-points { display: flex; flex-direction: column; gap: 14px; }
.connect-points > div { display: flex; gap: 14px; padding: 18px 20px; border-radius: var(--r-card-sm); background: var(--c-card); border: 1px solid var(--c-cardBorder); }
.connect-points b { flex: none; font-family: var(--display); font-size: 0.9375rem; font-weight: 800; color: var(--c-reflect); }
.connect-points strong { display: block; font-size: 0.96875rem; }
.connect-points small { display: block; margin-top: 4px; color: var(--c-ink600); font-size: 0.84375rem; line-height: 20px; }

/* ============================ download ================================= */

.download-band { background: var(--c-bgElevated); border-top: 1px solid var(--c-cardBorder); }
.download-band > .section { padding-block: calc(var(--pad-section) * 1.2); }
.download { display: flex; flex-direction: column; gap: 26px; }
.download-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.platform { display: flex; flex-direction: column; gap: 14px; padding: 26px; border-radius: var(--r-card); background: var(--c-card); border: 1px solid var(--c-cardBorder); }
.platform-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.platform-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-control); background: var(--c-surfaceSunken); color: var(--c-ink900); }
.platform h3 { font-family: var(--sans); font-size: 1.25rem; line-height: 26px; font-weight: 700; }
.platform ol { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.platform ol li { display: flex; gap: 11px; color: var(--c-ink600); font-size: 0.90625rem; line-height: 21px; counter-increment: step; }
.platform ol li::before { content: counter(step); flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 0; border-radius: 999px; background: var(--c-brandSoft); color: var(--c-onBrandSoft); font-size: 0.75rem; font-weight: 700; }
.platform ol li code { padding: 1px 6px; border-radius: 6px; background: var(--c-surfaceSunken); color: var(--c-ink900); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8125rem; }
.platform .button { margin-top: auto; }

.download-tail { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.download-qr { display: flex; align-items: center; gap: 18px; padding: 24px; border-radius: var(--r-card); background: var(--c-brandSoft); border: 1px solid var(--c-infoBorder); }
.download-qr img { width: 108px; height: 108px; flex: none; border-radius: var(--r-control); background: #FFFFFF; }
.download-qr strong { display: block; font-size: 1.0625rem; }
.download-qr span { display: block; margin-top: 4px; color: var(--c-ink600); font-size: 0.875rem; line-height: 21px; }
.waitlist { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--r-card); background: var(--c-card); border: 1px solid var(--c-cardBorder); }
.waitlist h3 { font-family: var(--sans); font-size: 1.125rem; line-height: 24px; font-weight: 700; }
.waitlist p { color: var(--c-ink600); font-size: 0.875rem; line-height: 21px; }
.waitlist form { display: flex; flex-wrap: wrap; gap: 10px; }
.waitlist input {
  flex: 1 1 190px; min-height: 52px; padding: 0 16px;
  border-radius: var(--r-control); background: var(--c-card);
  border: 1px solid var(--c-cardBorder); color: var(--c-ink900);
  font-family: var(--sans); font-size: 1rem;
}
.waitlist input::placeholder { color: var(--c-ink500); }
.waitlist input:focus { background: var(--c-surfaceSunken); border: 1.5px solid var(--c-brand); outline: none; }
.download-assurance { display: flex; flex-wrap: wrap; gap: 10px 20px; color: var(--c-ink500); font-size: 0.84375rem; }
.download-assurance span { display: inline-flex; align-items: center; gap: 7px; }

/* ============================ company ================================== */

.company { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px; align-items: start; }
.company-facts { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--r-card); background: var(--c-card); border: 1px solid var(--c-cardBorder); }
.company-facts div { display: flex; flex-direction: column; gap: 2px; }
.company-facts dt { color: var(--c-ink500); font-size: 0.75rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.company-facts dd { margin: 0; color: var(--c-ink900); font-size: 0.9375rem; line-height: 22px; }
.company-facts dd a { color: var(--c-brand); font-weight: 600; }

/* ============================ footer =================================== */

footer.site-footer { position: relative; z-index: 1; background: var(--c-bg); border-top: 1px solid var(--c-cardBorder); }
.footer-inner { max-width: 1240px; margin: 0 auto; padding: 40px var(--gutter); display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0,1fr)); gap: 32px; }
.footer-brand { display: flex; flex-direction: column; gap: 12px; }
.footer-brand p { max-width: 320px; color: var(--c-ink500); font-size: 0.8125rem; line-height: 20px; }
.footer-links { display: flex; flex-direction: column; gap: 6px; font-size: 0.875rem; }
.footer-links strong { margin-bottom: 4px; color: var(--c-ink900); font-size: 0.75rem; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.footer-links a { color: var(--c-ink600); }
@media (hover: hover) { .footer-links a:hover { color: var(--c-ink900); } }
.footer-bottom { max-width: 1240px; margin: 0 auto; padding: 18px var(--gutter) 40px; display: flex; flex-wrap: wrap; gap: 8px 20px; border-top: 1px solid var(--c-cardBorder); color: var(--c-ink500); font-size: 0.78125rem; }

/* ============================ sub-pages (1h) =========================== */

.info-main { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 28px var(--gutter) var(--pad-section); }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--c-ink500); font-size: 0.8125rem; }
@media (hover: hover) { .breadcrumbs a:hover { color: var(--c-ink900); } }
.breadcrumbs span[aria-current] { color: var(--c-ink700); }

.info-hero { display: flex; flex-direction: column; gap: 14px; padding: 32px 0 28px; border-bottom: 1px solid var(--c-cardBorder); }
.info-hero h1 { max-width: 900px; font-size: clamp(1.875rem, 4.6vw, 3.125rem); line-height: 1.06; letter-spacing: -.03em; }
.info-hero > p { max-width: 700px; margin: 26px 0 0; color: var(--c-ink600); font-size: 1.0625rem; line-height: 1.62; }
.info-hero small { color: var(--c-ink500); font-size: 0.8125rem; }

.info-layout { display: grid; grid-template-columns: 232px minmax(0,1fr); gap: 40px; padding-top: 32px; align-items: start; }
.info-toc { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 3px; font-size: 0.875rem; }
.info-toc strong { margin-bottom: 6px; color: var(--c-ink500); font-size: 0.6875rem; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }
.info-toc-group { margin-top: 18px; }
.info-toc a { padding: 7px 12px; border-radius: var(--r-control-sm); color: var(--c-ink600); transition: background var(--dur-reveal) var(--ease), color var(--dur-reveal) var(--ease); }
@media (hover: hover) { .info-toc a:hover { background: var(--c-card); color: var(--c-ink900); } }
.info-toc a[aria-current='page'] { background: var(--c-brandSoft); color: var(--c-onBrandSoft); font-weight: 700; }

.info-card { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.info-section { display: flex; flex-direction: column; gap: 12px; }
.info-section + .info-section { padding-top: 26px; border-top: 1px solid var(--c-cardBorder); }
.info-section h2 { font-size: clamp(1.3125rem, 2.4vw, 1.625rem); line-height: 1.2; letter-spacing: -.02em; }
.info-section p { max-width: var(--measure); color: var(--c-ink600); font-size: 1rem; line-height: 26px; }
/* Tailwind's preflight in `global.css` strips list markers, so a bulleted
   legal clause renders as unlabelled indented prose unless they are restored. */
.info-section ul { display: flex; flex-direction: column; gap: 8px; max-width: var(--measure); padding-left: 22px; list-style: disc outside; color: var(--c-ink600); font-size: 1rem; line-height: 26px; }
.info-section li::marker { color: var(--c-ink300); }
.seo-snapshot .seo-faq { margin-top: 32px; }
.seo-snapshot .seo-faq h2 { margin: 0 0 12px; font-size: 1.375rem; }
.seo-snapshot .seo-faq h3 { margin: 20px 0 6px; font-family: var(--sans); font-size: 1.0625rem; font-weight: 700; }
.seo-snapshot .seo-body ul { list-style: disc outside; }
.info-section .notice { max-width: var(--measure); }

.info-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; padding: 22px 24px; border-radius: var(--r-card); background: var(--c-card); border: 1px solid var(--c-cardBorder); }
.info-cta > div { min-width: 0; flex: 1 1 240px; }
.info-cta .button { flex: 0 0 auto; }
.info-cta strong { display: block; font-size: 1.03125rem; }
.info-cta span { display: block; margin-top: 4px; color: var(--c-ink500); font-size: 0.84375rem; }
.info-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.info-rail { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: var(--r-card); background: var(--c-card); border: 1px solid var(--c-cardBorder); }
.info-rail h3 { font-family: var(--sans); font-size: 0.9375rem; font-weight: 700; }
.info-rail p { color: var(--c-ink600); font-size: 0.875rem; line-height: 21px; }

.info-footer { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 28px var(--gutter) 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; border-top: 1px solid var(--c-cardBorder); color: var(--c-ink500); font-size: 0.8125rem; }
.info-footer > a:first-child { font-family: var(--display); font-weight: 800; font-size: 1.0625rem; color: var(--c-ink900); }
.info-footer div { display: flex; flex-wrap: wrap; gap: 8px 16px; }
@media (hover: hover) { .info-footer a:hover { color: var(--c-ink900); } }

/* ============================ SEO snapshot ============================= */
/* What a crawler and a no-JavaScript reader get, from copy-web-static.mjs. */

.seo-snapshot { max-width: 900px; margin: 0 auto; padding: 40px var(--gutter); color: var(--c-ink700); }
.seo-snapshot header a { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 1.1875rem; font-weight: 800; color: var(--c-ink900); }
.seo-snapshot header img { width: 40px; height: 40px; object-fit: contain; }
.seo-snapshot article { padding: 40px 0 32px; }
.seo-snapshot h1 { max-width: 820px; margin: 16px 0; font-size: clamp(2rem, 6vw, 3.5rem); line-height: 1.04; letter-spacing: -.03em; }
.seo-snapshot p { max-width: var(--measure); color: var(--c-ink600); font-size: 1rem; line-height: 26px; }
.seo-snapshot nav { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; color: var(--c-brand); font-weight: 600; }
.seo-snapshot .seo-body { margin-top: 36px; }
.seo-snapshot .seo-body section { padding: 20px 0; border-top: 1px solid var(--c-cardBorder); }
.seo-snapshot .seo-body h2 { margin: 0 0 10px; font-size: 1.375rem; line-height: 1.25; }
.seo-snapshot .seo-body ul { max-width: var(--measure); padding-left: 22px; color: var(--c-ink600); font-size: 1rem; line-height: 26px; }
/* The sentence saying what a claim cannot do, and the Hindi notice above an
   untranslated body. Both are marked rather than left to read as more prose. */
.seo-snapshot .seo-limit { margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--c-attention); color: var(--c-ink500); font-size: 0.9375rem; line-height: 24px; }
.seo-snapshot .seo-notice { margin-bottom: 8px; padding: 14px 16px; border-radius: var(--r-control); background: var(--c-card); border: 1px solid var(--c-cardBorder); font-size: 0.9375rem; line-height: 24px; }

/* ============================ responsive =============================== */

@media (min-width: 861px) {
  :root { --gutter: 40px; --pad-section: 80px; }
}

@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; gap: 36px; }
  .hero-shot { align-self: center; }
  .split { grid-template-columns: 1fr; gap: 28px; }
  .questions, .safety-grid, .connect, .company { grid-template-columns: 1fr; gap: 26px; }
  .bento { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bento-tall { grid-row: span 1; }
  .bento-shot { position: relative; right: auto; bottom: auto; width: min(240px, 70%); margin-top: 6px; }
  /* The copy only has to clear the screenshot while the screenshot overlaps it. */
  .bento-tall > :not(.bento-shot) { max-width: none; }
  .info-layout { grid-template-columns: 1fr; gap: 26px; }
  .info-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .info-toc strong { width: 100%; margin: 0; }
  .info-toc-group { margin-top: 8px; }
  .info-toc a { border: 1px solid var(--c-cardBorder); border-radius: 999px; }
}

/* The bar collapses at 1080, not 860: between the two the five links, the language
   switch, the text-size group and the download button no longer fit in a pill, and
   "How it works" wrapped onto three lines at 900px (website polish W1.3). */
@media (max-width: 1080px) {
  .nav-links {
    position: fixed; inset: 74px 10px auto; z-index: 59;
    display: none; flex-direction: column; align-items: stretch; gap: 4px;
    padding: 12px; border-radius: var(--r-card);
    background: var(--c-bgElevated); border: 1px solid var(--c-cardBorder);
    box-shadow: var(--shadow); font-size: 1rem;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 14px; border-radius: var(--r-control); }
  .nav-links a:hover { background: var(--c-card); }
  .header-actions { margin-left: auto; }
  .menu-button { display: block; }
  /* The home page moves both view controls into the menu, because the bar has
     no room for them beside the CTA and the hamburger. The sub-pages have no
     menu — their chip rail is the navigation — so they keep the theme switch in
     the bar and drop only the wider text-size group. */
  .header-actions .view-controls { display: none; }
  .info-header .header-actions .view-controls { display: flex; }
  .info-header .text-size { display: none; }
  /* At this width the sub-page bar carries brand, language, theme and the CTA.
     Language is the one a Hindi reader needs most, so the theme switch is what
     gives way — the theme already follows the system without being asked. */
  .info-header .theme-toggle { display: none; }
  .download-label-full { display: none; }
  .download-label-short { display: inline; }
  .mobile-view-controls {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 6px; padding: 10px 12px; border: 1px solid var(--c-cardBorder);
    border-radius: var(--r-control); background: var(--c-card);
    font-size: 0.9375rem;
  }
  .mobile-view-controls > span { color: var(--c-ink500); }
}

@media (max-width: 860px) {
  .steps, .ways, .safety-list, .download-grid, .download-tail { grid-template-columns: 1fr; }
  .steps::before { display: none; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .hero-shot-frame { width: min(302px, 78vw); padding: 0; background: none; box-shadow: none; }
  .hero-shot-frame img {
    max-height: 480px; object-fit: cover; object-position: top; border-radius: 42px;
    -webkit-mask-image: linear-gradient(#000 76%, transparent);
    mask-image: linear-gradient(#000 76%, transparent);
  }
  .hero-pill-trust { top: 11%; left: -12px; }
  .hero-pill-women { bottom: 6%; right: -12px; }
}

@media (max-width: 620px) {
  /* The sub-page bar has no menu to hide things in, so at this width it gives
     up the badge — the wordmark alone is still the brand, and it is the half
     that says the name. Language and the download link both survive. */
  .info-header .brand-symbol { display: none; }
  .info-header { padding-left: 12px; gap: 10px; }
  .info-header .lang-switch a { min-width: 30px; padding: 0 6px; }
  .info-header .nav-cta { padding: 0 14px; font-size: 0.875rem; }
  .hero h1 { letter-spacing: -.03em; }
  .bento { grid-template-columns: 1fr; }
  .bento-wide, .bento-tall { grid-column: span 1; }
  .bento-map { flex-direction: column; align-items: stretch; }
  .bento-map > div:first-child { width: 100%; }
  .download-qr { flex-direction: column; align-items: flex-start; }
  .info-cta { align-items: stretch; }
  .info-cta .button { width: 100%; }
  .footer-inner { grid-template-columns: 1fr; }
}

/**
 * Print.
 *
 * The Terms, the Privacy Policy and the deletion instructions are the pages
 * people actually print or save to PDF — for a lawyer, for a file, for
 * somebody without a smartphone. Printed as-is they came out as white text on
 * nothing, with a navigation rail and a download banner taking the first page.
 */
@media print {
  :root {
    --c-bg: #FFFFFF; --c-bgElevated: #FFFFFF; --c-card: #FFFFFF; --c-cardBorder: #B9C2D4;
    --c-ink900: #000000; --c-ink700: #111111; --c-ink600: #222222; --c-ink500: #444444;
    --c-brand: #14356B; --c-attention: #6B4400; --c-danger: #8A1220;
  }
  body { background: #FFFFFF; color: #000000; }
  .site-header, .ambient, .ticker, .ticker-note, .skip-link, .info-toc,
  .info-rail, .info-cta, .breadcrumbs, .view-controls, .lang-switch, .menu-button,
  .hero-shot, .bento-shot, .safety-shot, .download-band { display: none !important; }
  .reveal, .reveal[data-reveal='stagger'] > * { opacity: 1 !important; transform: none !important; }
  .section, .info-main { max-width: none; padding: 0; }
  .info-layout { display: block; }
  .info-section, .qa-item, .notice { break-inside: avoid; }
  .info-section h2, .info-hero h1 { break-after: avoid; }
  /* A printed page has no hover and no address bar: spell the link out. */
  .info-card a[href^='/']::after { content: ' (comiles.in' attr(href) ')'; font-size: .8em; color: #444; }
  .info-card a[href^='mailto:']::after { content: ' (' attr(href) ')'; font-size: .8em; color: #444; }
  .info-footer { border-top: 1px solid #B9C2D4; }
}

/**
 * Windows High Contrast and `prefers-contrast: more`.
 *
 * The site leans on tinted surfaces and 15%-opacity hairlines, which are the
 * first things to disappear when a reader has asked for more contrast. Borders
 * go solid and every card edge becomes visible.
 */
@media (prefers-contrast: more) {
  :root, html[data-theme='light'] {
    --c-cardBorder: currentColor;
    --c-border: currentColor;
  }
  .card, .bento > *, .way, .qa-item, .platform, .safety-item, .info-rail,
  .info-cta, .notice, .company-facts, .chip, .text-size, .lang-switch { border-width: 2px; }
  .ambient { display: none; }
  a:focus-visible, button:focus-visible { outline-width: 4px; }
}


/* ============================ revamp: the Night Route world ============== */
/**
 * Website revamp (audit/WEBSITE_POLISH_PLAN_2026-10-18.md §0).
 *
 * A world behind the content (route lines, a map grid, a skyline at the close),
 * choreography when it arrives (proofs stamp in, routes draw), and one signature
 * interaction (the sticky phone). Only transform, opacity and stroke-dashoffset
 * move. Every loop and every pointer effect stands down under Reduce Motion and
 * Save-Data (see the two blocks at the very end of this file).
 */

.progress {
  position: fixed; top: 0; left: 0; right: 0; z-index: 70; height: 3px; pointer-events: none;
  background: linear-gradient(90deg, var(--c-brand), var(--c-accent));
  transform-origin: 0 50%; transform: scaleX(var(--progress, 0));
}

.hero-world { position: relative; }
.hero-world > .hero { position: relative; z-index: 1; }

/* ---- route world (SVG) ---------------------------------------------------- */
.route-world { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.route-world svg { display: block; width: 100%; height: 100%; }
/* The world is a fixed-size stage centred on wide screens (not stretched across a 2560px
   monitor), faded at both edges, and quieter than the copy it sits behind. */
.route-world-hero {
  left: 50%; right: auto; width: min(100%, 1680px); transform: translateX(-50%); opacity: .6;
  -webkit-mask-image: linear-gradient(#000 62%, transparent), linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(#000 62%, transparent), linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.route-world-close { opacity: .55; -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.route-line { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: routeDraw calc(var(--dur-route) * 4) var(--ease) .3s forwards; }
.route-line-glow { stroke-width: 9; opacity: .16; }
.route-line-2 { opacity: .7; animation-delay: .8s; }
.route-line-3 { opacity: .5; animation-delay: 1.3s; }
.route-origin { fill: none; stroke: var(--c-brand); stroke-width: 3; opacity: 0; animation: fadeIn var(--dur-shared) var(--ease) .4s forwards; }
.route-origin-2 { animation-delay: .9s; }
.route-dest { fill: var(--c-accent); opacity: 0; animation: fadeIn var(--dur-shared) var(--ease) 2.4s forwards; }
.car-light { fill: var(--c-accent); filter: drop-shadow(0 0 6px var(--c-accent)); }
@keyframes routeDraw { to { stroke-dashoffset: 0; } }
@keyframes fadeIn { to { opacity: 1; } }
@keyframes stamp { 0% { opacity: 0; transform: scale(1.7); } 100% { opacity: 1; transform: none; } }

/* ---- hero ------------------------------------------------------------------ */
.hero h1 { font-size: clamp(2.25rem, 6.1vw, 4.5rem); line-height: 1; text-wrap: balance; }
/* One static gradient instead of a gradient that sweeps for ever. */
.hero h1 em { animation: none; background-size: 100% auto; }
.hero-shot-frame {
  animation: none;
  transform: translate3d(0, var(--drift, 0px), 0) perspective(1000px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform var(--dur-reveal) var(--ease);
}
.ambient-three { animation: none; }

.proofs { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; padding: 0; list-style: none; }
.proofs li {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 8px; border-radius: 999px;
  border: 1px dashed var(--c-cardBorder); color: var(--c-ink600);
  font-size: 0.8125rem; line-height: 18px; font-weight: 600;
  transition: color var(--dur-reveal) var(--ease), border-color var(--dur-reveal) var(--ease), background var(--dur-reveal) var(--ease);
}
.proofs li > span {
  display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--c-cardBorder); color: transparent;
}
.proofs.is-stamped li { border-style: solid; border-color: var(--c-successBorder); background: var(--c-successSoft); color: var(--c-ink900); }
.proofs.is-stamped li > span { background: var(--c-success); border-color: var(--c-success); color: var(--c-bg); animation: stamp var(--dur-shared) var(--ease) both; }
.proofs.is-stamped li:nth-child(1), .proofs.is-stamped li:nth-child(1) > span { transition-delay: 0ms; animation-delay: 0ms; }
.proofs.is-stamped li:nth-child(2), .proofs.is-stamped li:nth-child(2) > span { transition-delay: 380ms; animation-delay: 380ms; }
.proofs.is-stamped li:nth-child(3), .proofs.is-stamped li:nth-child(3) > span { transition-delay: 760ms; animation-delay: 760ms; }
.proofs.is-stamped li:nth-child(4), .proofs.is-stamped li:nth-child(4) > span { transition-delay: 1140ms; animation-delay: 1140ms; }

/* ---- sub-pages: the route world behind the heading (marketing pages only) ---- */
.info-hero-decorated { position: relative; isolation: isolate; }
.info-hero-decorated > .route-world { position: absolute; inset: -30px -40px 0 -40px; z-index: -1; opacity: .5; -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.info-hero-decorated > .eyebrow, .info-hero-decorated > h1, .info-hero-decorated > p, .info-hero-decorated > small { position: relative; }
.info-cta.spot, .info-rail.spot { position: relative; }

/* ---- the 404 page ------------------------------------------------------------ */
.not-found { position: relative; isolation: isolate; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 760px; margin: 0 auto; padding: 72px var(--gutter) 90px; min-height: 60vh; }
.not-found > .route-world { position: absolute; top: -80px; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1; opacity: .5; }
.not-found-code { margin: 0; font-family: var(--display); font-size: clamp(5rem, 22vw, 11rem); line-height: .9; font-weight: 800; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 2px var(--c-brand); }
.not-found h1 { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.06; letter-spacing: -.03em; }
.not-found-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; color: var(--c-ink500); font-size: 0.9375rem; }
.not-found-links a { color: var(--c-brand); font-weight: 700; }
.not-found-links a:hover { text-decoration: underline; }

/* ---- official store badges (Apple's and Google's artwork, sized only) ------------ */
.hero-stores { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.hero-free { color: var(--c-ink500); font-size: 0.8125rem; font-weight: 500; }
.store-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.store-badge { display: inline-flex; align-items: center; border-radius: 10px; transition: transform var(--dur-tap) var(--ease); }
.store-badge img { display: block; height: auto; max-width: none; }
.store-badge-ios img { width: 143px; height: 48px; }
/* The Play badge ships with its own clear space; trim the layout box, never the artwork. */
.store-badge-android img { width: 166px; height: 64px; margin: -8px -9px; }
.store-badge-android { margin: 0 0 0 0; }
@media (hover: hover) { .store-badge:hover { transform: translateY(-2px); } }
.store-badge:active { transform: scale(.97); }
.platform .store-badges { margin-top: auto; }
.info-actions .store-badges { gap: 8px 16px; }

/* ---- spotlight on cards (fine pointers; --mx/--my written by web/motion.tsx) */
.spot { position: relative; isolation: isolate; }
.spot::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--c-brandSoft), transparent 70%);
  transition: opacity var(--dur-reveal) var(--ease);
}
@media (hover: hover) { .spot:hover::after { opacity: 1; } }

/* ---- magnetic buttons: set after the hover and press rules so it composes -- */
.magnetic, .magnetic:hover { transform: translate3d(var(--pull-x, 0px), var(--pull-y, 0px), 0); }
.magnetic:active { transform: translate3d(var(--pull-x, 0px), var(--pull-y, 0px), 0) scale(.97); }

/* ---- the story: two acts, then the sticky phone ---------------------------- */
.story { padding-bottom: 0; display: flex; flex-direction: column; gap: 28px; }
.acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.act { display: flex; flex-direction: column; gap: 14px; padding-top: 18px; border-top: 2px solid var(--c-cardBorder); }
.act-two { border-top-color: var(--c-reflectBorder); }
.act-kicker { color: var(--c-ink500); font-size: 0.75rem; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }
.act h2 { font-size: clamp(1.5rem, 3.3vw, 2.375rem); line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }

.stage-section { padding-top: var(--pad-section); }
.stage { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 64px; align-items: start; }
.stage-phone-col { position: sticky; top: 92px; display: grid; place-items: center; height: calc(100vh - 120px); min-height: 520px; }
.stage-phone { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.stage-phone-frame {
  position: relative; width: min(290px, 70vw); aspect-ratio: 9 / 18.6; padding: 9px; border-radius: 46px;
  background: var(--c-hero-shot-frame); box-shadow: var(--shadow), 0 0 80px var(--c-aurora-brand);
}
.screen-layer {
  position: absolute; inset: 9px; overflow: hidden; border-radius: 37px; background: #060B1F;
  opacity: 0; transform: scale(.985);
  transition: opacity var(--dur-shared) var(--ease), transform var(--dur-shared) var(--ease);
}
.screen-layer.is-active { opacity: 1; transform: none; }
.screen-layer img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: top; }
.stage-dots { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.stage-dots li { width: 8px; height: 8px; border-radius: 999px; background: var(--c-cardBorder); transition: transform var(--dur-reveal) var(--ease), background var(--dur-reveal) var(--ease); }
.stage-dots li.is-active { background: var(--c-brand); transform: scale(1.5); }

.stage-items { display: flex; flex-direction: column; }
.stage-head { display: flex; flex-direction: column; gap: 14px; padding-bottom: 8vh; }
.stage-item {
  display: flex; flex-direction: column; justify-content: center; gap: 10px; min-height: 64vh; padding-block: 24px;
  padding-left: 22px; border-left: 2px solid var(--c-cardBorder);
  transition: border-color var(--dur-shared) var(--ease);
}
/* The active claim is marked by its rule and its numeral, never by fading the text: a dimmed paragraph fails contrast. */
.stage-item.is-active { border-left-color: var(--c-brand); }
.stage-item.is-active .stage-n { -webkit-text-stroke-color: var(--c-accent); }
.stage-n { font-family: var(--display); font-size: 3.75rem; line-height: 1; font-weight: 800; color: transparent; -webkit-text-stroke: 1.5px var(--c-brand); letter-spacing: -.04em; transition: -webkit-text-stroke-color var(--dur-shared) var(--ease); }
.stage-item h3 { font-size: clamp(1.5rem, 2.8vw, 2.125rem); line-height: 1.12; letter-spacing: -.025em; }
.stage-item p { max-width: 520px; color: var(--c-ink600); font-size: 1.0625rem; line-height: 1.6; }
.stage-fine { max-width: 520px; padding-left: 22px; color: var(--c-ink500); font-size: 0.78125rem; line-height: 18px; }
.stage-item small { max-width: 520px; color: var(--c-ink500); font-size: 0.78125rem; line-height: 18px; }

/* The two screens drawn here rather than screenshotted (web/Story.tsx). */
.screen-art { display: flex; flex-direction: column; align-items: center; width: 100%; height: 100%; background: #060B1F; }
.screen-trust { gap: 14px; padding: 46px 22px 22px; }
.art-bar { width: 60px; height: 5px; border-radius: 3px; background: rgba(180,201,255,.22); margin-bottom: 8px; }
.art-avatar { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #2563EB, #22D3EE); }
.art-line { display: block; height: 10px; border-radius: 5px; background: rgba(180,201,255,.18); }
.art-line-w60 { width: 60%; } .art-line-w40 { width: 40%; }
.art-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 8px 14px; border-radius: 999px; background: rgba(45,200,139,.14); border: 1px solid rgba(69,215,155,.4); color: #45D79B; font-size: 0.8125rem; font-weight: 700; white-space: nowrap; }
.art-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin-top: 18px; }
.art-stats span { height: 64px; border-radius: 14px; background: rgba(180,201,255,.08); border: 1px solid rgba(180,201,255,.12); }
.screen-results { gap: 12px; padding: 46px 16px 16px; align-items: stretch; }
.art-title { color: #F5F8FF; font-family: var(--display); font-size: 1.125rem; font-weight: 800; text-align: left; }
.art-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 16px; background: rgba(180,201,255,.07); border: 1px solid rgba(180,201,255,.14); }
.art-card b { color: #F5F8FF; font-size: 1.125rem; line-height: 1; }
.art-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.art-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: rgba(91,149,255,.14); border: 1px solid rgba(120,169,255,.3); color: #B8CCF5; font-size: 0.6875rem; font-weight: 700; white-space: nowrap; }
.art-chip-ok { background: rgba(45,200,139,.14); border-color: rgba(69,215,155,.4); color: #45D79B; }
.screen-pickup svg { width: 100%; height: 100%; }
.art-streets path { fill: none; stroke: rgba(180,201,255,.14); stroke-width: 2; }
.art-zone { fill: rgba(91,149,255,.2); }
.art-zone-ring { fill: none; stroke: rgba(91,149,255,.7); stroke-width: 1.5; stroke-dasharray: 4 5; }
.art-dot { fill: #5B95FF; }

/* ---- an example journey ---------------------------------------------------- */
.journey { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 56px; align-items: start; }
.journey-head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; position: sticky; top: 100px; }
.journey-head .chip { margin-top: 12px; }
.journey-list { position: relative; display: flex; flex-direction: column; gap: 26px; margin: 0; padding: 0 0 0 34px; list-style: none; }
.journey-list::before {
  content: ''; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px;
  background: linear-gradient(var(--c-brand), var(--c-accent)); transform: scaleY(0); transform-origin: top;
  transition: transform calc(var(--dur-route) * 2) var(--ease) .2s;
}
.journey-list.is-visible::before { transform: scaleY(1); }
.journey-list li { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
.journey-list li::before { content: ''; position: absolute; left: -34px; top: 4px; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--c-brand); background: var(--c-bg); }
.journey-list li:last-child::before { border-radius: 6px; border-color: var(--c-accent); background: var(--c-accent); }
.journey-list time { color: var(--c-brand); font-family: var(--display); font-size: 1.0625rem; font-weight: 800; padding-top: 2px; }
.journey-list h3 { font-family: var(--sans); font-size: 1.1875rem; line-height: 25px; font-weight: 700; }
.journey-list p { margin-top: 4px; max-width: 520px; color: var(--c-ink600); font-size: 0.9375rem; line-height: 23px; }

.journey-map { margin-top: 16px; width: min(340px, 100%); overflow: hidden; border-radius: var(--r-card-sm); border: 1px solid var(--c-cardBorder); }
.journey-map img { display: block; width: 100%; }

/* ---- everything in the app ------------------------------------------------- */
.features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.feature { display: flex; flex-direction: column; gap: 8px; padding: 22px; border-radius: var(--r-card); background: var(--c-card); border: 1px solid var(--c-cardBorder); transition: border-color var(--dur-reveal) var(--ease); }
@media (hover: hover) { .feature:hover { border-color: var(--c-brand); } }
.feature h3 { font-family: var(--sans); font-size: 1.0625rem; line-height: 23px; font-weight: 700; }
.feature p { color: var(--c-ink600); font-size: 0.875rem; line-height: 21px; }
.feature em { margin-top: auto; padding-top: 6px; color: var(--c-brand); font-size: 0.875rem; font-weight: 700; font-style: normal; }
.feature .way-icon { width: 40px; height: 40px; margin-bottom: 4px; }

/* ---- share ---------------------------------------------------------------- */
.share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 22px 26px; border-radius: var(--r-card); background: var(--c-card); border: 1px solid var(--c-cardBorder); }
.share h3 { margin-top: 4px; font-family: var(--sans); font-size: 1.25rem; line-height: 26px; font-weight: 700; }
.share p { margin-top: 2px; color: var(--c-ink600); font-size: 0.9375rem; }
.share-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- the close: route lines over the app's own skyline ----------------------- */
.download-band { position: relative; overflow: hidden; }
.skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; opacity: .55; pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(transparent, #000 45%); mask-image: linear-gradient(transparent, #000 45%); }
.skyline-light { display: none; }
html[data-theme='light'] .skyline-dark { display: none; }
html[data-theme='light'] .skyline-light { display: block; }
@media (prefers-color-scheme: light) {
  html:not([data-theme='dark']) .skyline-dark { display: none; }
  html:not([data-theme='dark']) .skyline-light { display: block; }
}

/* ---- the sticky download bar (phones only, after the hero, until the download) */
.sticky-cta { display: none; }
/* Language, text size and theme live in the footer (and the phone menu), not the header bar. */
.footer-bottom .view-controls { flex-wrap: wrap; width: 100%; padding-bottom: 6px; }
.info-footer .view-controls { flex-wrap: wrap; width: 100%; }

@media (max-width: 1080px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acts { gap: 28px; }
}

@media (max-width: 860px) {
  .route-world-hero { opacity: .4; }
  .acts, .journey { grid-template-columns: 1fr; }
  .journey-head { position: static; }
  .stage { grid-template-columns: 1fr; gap: 0; }
  .stage-phone-col { top: 70px; z-index: 3; height: auto; min-height: 0; padding: 10px 0 18px; background: linear-gradient(var(--c-bg) 82%, transparent); }
  .stage-phone-frame { width: 150px; padding: 5px; border-radius: 26px; }
  .screen-layer { inset: 5px; border-radius: 21px; }
  .stage-dots { display: none; }
  .stage-head { padding-bottom: 20px; }
  .stage-item { min-height: 46vh; }
  .stage-n { font-size: 2.75rem; }
  /* The drawn screens are designed at the desktop phone's size and scaled to the small one. */
  .screen-art { width: 272px; height: 561px; transform: scale(.515); transform-origin: 0 0; }
  .sticky-cta {
    position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 58;
    display: grid; place-items: center; min-height: 52px; border-radius: 18px;
    background: var(--c-brand); color: var(--c-onBrandInk); font-weight: 700; box-shadow: 0 14px 30px rgba(91,149,255,.35);
    /* Hidden means unfocusable too: off-screen alone left it in the tab order. */
    visibility: hidden; transform: translateY(160%);
    transition: transform var(--dur-shared) var(--ease), visibility 0s linear var(--dur-shared);
  }
  html[data-past-hero] .sticky-cta { visibility: visible; transform: none; transition-delay: 0s; }
  html[data-at-download] .sticky-cta { visibility: hidden; transform: translateY(160%); transition-delay: 0s, var(--dur-shared); }
  .footer-bottom { padding-bottom: 96px; }
}
@media (max-width: 620px) {
  .features { grid-template-columns: 1fr; }
  .journey-list li { grid-template-columns: 52px minmax(0, 1fr); }
}

/* Stand down: Reduce Motion and Save-Data. The page is complete without any of it. */
html[data-calm] .car-light, html[data-calm] .route-origin, html[data-calm] .route-dest { animation: none; }
html[data-calm] .route-line, html[data-calm] .route-origin, html[data-calm] .route-dest { stroke-dashoffset: 0; opacity: 1; }
html[data-calm] .route-line-glow { opacity: .16; } html[data-calm] .route-line-2 { opacity: .7; } html[data-calm] .route-line-3 { opacity: .5; }
html[data-calm] .proofs li { border-style: solid; border-color: var(--c-successBorder); background: var(--c-successSoft); color: var(--c-ink900); }
html[data-calm] .proofs li > span { background: var(--c-success); border-color: var(--c-success); color: var(--c-bg); }
html[data-calm] .journey-list::before { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .car-light { display: none; }
  .route-line, .route-origin, .route-dest { stroke-dashoffset: 0 !important; opacity: 1 !important; }
  .route-line-glow { opacity: .16 !important; } .route-line-2 { opacity: .7 !important; } .route-line-3 { opacity: .5 !important; }
  .proofs li { border-style: solid; border-color: var(--c-successBorder); background: var(--c-successSoft); color: var(--c-ink900); }
  .proofs li > span { background: var(--c-success); border-color: var(--c-success); color: var(--c-bg); }
  .journey-list::before { transform: none !important; }
  .progress { transition: none; }
}
html[data-calm] .car-light { display: none; }
@media print { .progress, .route-world, .sticky-cta, .skyline, .stage-phone-col, .share { display: none !important; } .stage { display: block; } .stage-item { opacity: 1; min-height: 0; } }

/* Decorative loops stand down when the visitor asked for less motion (the media
   query below) or is on Save-Data (`html[data-calm]`, set in App.web.tsx). */
html[data-calm] *, html[data-calm] *::before, html[data-calm] *::after { animation: none !important; transition: none !important; }
html[data-calm] .reveal, html[data-calm] .reveal[data-reveal='stagger'] > * { opacity: 1 !important; transform: none !important; }
html[data-calm] .steps::before { transform: scaleX(1) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal, .reveal[data-reveal='stagger'] > * { opacity: 1 !important; transform: none !important; }
  .steps::before { transform: scaleX(1) !important; }
  .hero-shot-frame { transform: none !important; }
}

/* ============================ revision 3: the seven-section page ========== */
/**
 * audit/WEBSITE_POLISH_PLAN_2026-10-18.md §0.7. The hero leads with the store
 * badges and centres itself once it is a single column; each phone-width claim
 * in the trust story carries its own screen instead of a sticky phone over the
 * copy; the money and driver sections are new bands.
 */
.hero-note { color: var(--c-ink500); font-size: 0.8125rem; font-weight: 600; letter-spacing: .01em; }
.hero-copy { gap: 20px; }
.hero h1 em { padding-bottom: .06em; }
.menu-cta { display: none; }

.band-head-center { justify-content: center; text-align: center; }
.band-head-center h2 { max-width: 760px; margin-inline: auto; }
.band-head-center .eyebrow { justify-content: center; }

/* ---- trust story: per-claim screens on phones ------------------------------ */
.stage-item-art { display: none; }
.stage-item-text { display: flex; flex-direction: column; gap: 10px; }

/* ---- money and drivers -------------------------------------------------------- */
.money-band { background: var(--c-bgElevated); border-top: 1px solid var(--c-cardBorder); border-bottom: 1px solid var(--c-cardBorder); }
.money-band > .section { padding-block: calc(var(--pad-section) * 1.1); }
.drivers { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 48px; align-items: center; }
.drivers-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.drivers-copy .button { margin-top: 6px; }
.drivers-points { display: flex; flex-direction: column; gap: 12px; }
.driver-point { display: flex; gap: 16px; align-items: flex-start; padding: 20px 22px; border-radius: var(--r-card); background: var(--c-card); border: 1px solid var(--c-cardBorder); transition: border-color var(--dur-reveal) var(--ease); }
@media (hover: hover) { .driver-point:hover { border-color: var(--c-brand); } }
.driver-point .way-icon { flex: none; }
.driver-point h3 { font-family: var(--sans); font-size: 1.125rem; line-height: 24px; font-weight: 700; }
.driver-point p { margin-top: 4px; color: var(--c-ink600); font-size: 0.90625rem; line-height: 22px; }

/* ---- questions and the close ---------------------------------------------------- */
.questions-more { align-self: flex-start; margin-top: 4px; color: var(--c-brand); font-size: 0.9375rem; font-weight: 700; }
@media (hover: hover) { .questions-more:hover { text-decoration: underline; } }
.download { align-items: center; gap: 36px; }
.download-head { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 680px; text-align: center; }
.download-head .lede { max-width: 560px; }
.download-head .store-badges { justify-content: center; margin-top: 4px; }
.download-head .download-assurance { justify-content: center; }
.download .share { position: relative; z-index: 1; width: 100%; max-width: 880px; background: var(--c-bgElevated); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--shadow); }
.section h2, .stage-item h3 { text-wrap: balance; }
.phrase { white-space: nowrap; }
@media (min-width: 861px) { .stage-item { min-height: 54vh; } }
.download-assurance { gap: 8px 18px; }

/* ---- the drawn screens added in revision 3 ------------------------------------- */
.art-checks { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 14px; }
.art-check { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 14px; background: rgba(180,201,255,.07); border: 1px solid rgba(180,201,255,.14); }
.art-check b { color: #F5F8FF; font-size: 0.875rem; }
.art-check > span:last-child { color: #8FA3C8; font-size: 0.75rem; font-weight: 600; }
.art-check-tick { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #2DC88B; color: #060B1F; }
.screen-women { gap: 12px; padding: 46px 16px 16px; align-items: stretch; }
.art-toggle-row { flex-direction: row; align-items: center; gap: 10px; }
.art-toggle-row b { flex: 1; color: #F5F8FF; font-size: 0.9375rem; }
.art-women-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(245,166,35,.16); color: #F5B547; }
.art-toggle { position: relative; width: 44px; height: 26px; border-radius: 999px; background: #2DC88B; }
.art-toggle i { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.art-chip-wide { align-self: flex-start; padding: 6px 11px; font-size: 0.75rem; }

@media (max-width: 1080px) {
  /* One column: the hero centres, so the badges, proofs and note sit under the headline. */
  .hero { padding-top: 36px; }
  .hero-copy { align-items: center; text-align: center; }
  .hero-lede { margin-inline: auto; }
  .hero-stores, .store-badges, .proofs { justify-content: center; }
  .drivers { grid-template-columns: 1fr; gap: 28px; }
  .menu-cta { display: inline-flex; justify-content: center; margin-top: 6px; }
}

@media (max-width: 860px) {
  .money-band > .section { padding-block: var(--pad-section); }
  /* The sticky phone sat over the claims it explained; each claim brings its own screen instead. */
  .stage-phone-col { display: none; }
  .stage-head { padding-bottom: 8px; }
  .stage-item { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 18px; align-items: start; min-height: 0; padding-block: 22px; padding-left: 0; border-left: 0; border-top: 1px solid var(--c-cardBorder); }
  .stage-item:first-of-type { border-top: 0; }
  .stage-item-art { display: block; width: 104px; padding: 5px; border-radius: 22px; background: var(--c-hero-shot-frame); box-shadow: var(--shadow); }
  .stage-item-screen { position: relative; overflow: hidden; height: 194px; border-radius: 17px; background: #060B1F; }
  .stage-item-screen .screen-art { transform: scale(.3456); }
  .stage-item-screen > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
  .stage-n { font-size: 2rem; }
  .stage-item h3 { font-size: 1.25rem; }
  .stage-item p { font-size: 0.9375rem; line-height: 1.55; }
  .stage-fine { padding-left: 0; padding-top: 6px; }
}

@media (max-width: 620px) {
  /* The phone header is the brand and the menu; the download lives in the menu and in the bar that follows the hero. */
  .site-header:not(.info-header) .nav-cta { display: none; }
  .launch-pill { font-size: 0.75rem; white-space: nowrap; }
  .hero h1 { font-size: clamp(2rem, 9.4vw, 2.75rem); }
  .hero-lede { font-size: 1rem; }
  .proofs { gap: 8px; }
  .proofs li { padding: 6px 11px 6px 7px; font-size: 0.78125rem; }
  .questions-more { align-self: flex-start; }
  .share { flex-direction: column; align-items: flex-start; }
  .driver-point { padding: 18px; }
  /* Plan B cards read as a list on a phone: glyph beside the words, not above them. */
  .way { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; padding: 18px; }
  .way .way-icon { grid-row: span 2; }
  /* Two link columns, legal beneath, instead of one twenty-link column. */
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-inner > .footer-links:last-child { grid-column: 1 / -1; }
}

@media (max-width: 340px) {
  .stage-item { grid-template-columns: 1fr; }
  .stage-item-art { width: 104px; }
}

@media (max-width: 1080px) {
  /* The collapsed nav is a fixed overlay, so it no longer pushes the actions
     right; without this the menu button sat beside the logo on every phone. */
  .nav-links + .header-actions { margin-left: auto; }
}
@media (max-width: 360px) {
  /* Both store badges stay side by side on the narrowest phones. */
  .store-badge-ios img { width: 128px; height: 43px; }
  .store-badge-android img { width: 149px; height: 57px; margin: -7px -8px; }
}

/* ---- the desktop QR: a laptop cannot install the app, so it gets a way across */
.qr-hint { display: none; }
@media (min-width: 861px) {
  .qr-hint { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: 16px; background: var(--c-card); border: 1px solid var(--c-cardBorder); text-align: left; }
  /* The code keeps its white quiet zone on both themes; a QR on a dark ground scans badly. */
  .qr-hint img { display: block; width: 72px; height: 72px; padding: 4px; border-radius: 10px; background: #FFFFFF; }
  .qr-hint strong { display: block; font-size: 0.875rem; color: var(--c-ink900); }
  .qr-hint span { display: block; max-width: 170px; margin-top: 2px; color: var(--c-ink600); font-size: 0.8125rem; line-height: 1.35; }
  .hero-stores { gap: 14px 18px; }
}

/* ---- one store per phone (html[data-platform], set by public/platform.js) ----
   Android sees Google Play, iPhone and iPad see the App Store, each with a quiet
   link to the other store; a computer sees both badges and the QR code. Without
   the attribute (no JavaScript) everyone sees both badges, which is the safe
   failure. */
html[data-platform='android'] .store-badge-ios,
html[data-platform='ios'] .store-badge-android { display: none; }
.store-other { display: none; flex-basis: 100%; margin-top: 4px; color: var(--c-ink500); font-size: 0.8125rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c-cardBorder); }
@media (hover: hover) { .store-other:hover { color: var(--c-ink900); } }
html[data-platform='android'] .store-other-ios,
html[data-platform='ios'] .store-other-android { display: block; }
/* A QR code is for crossing from a computer to a phone; a phone or tablet never needs one. */
html[data-platform='android'] .qr-hint,
html[data-platform='ios'] .qr-hint { display: none; }

/* ---- "More than a ride": six tiles, three across ---------------------------- */
.band-lede { max-width: 520px; margin: 10px auto 0; color: var(--c-ink600); font-size: 1rem; line-height: 1.55; }
@media (min-width: 1081px) { .features-six { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.features-six .feature { gap: 10px; }