/**
 * 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;
}

: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);
  --gutter: 22px;
  --pad-section: 40px;
  --measure: 680px;

  --display: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  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'] {
  --display: 'Nirmala UI', 'Kohinoor Devanagari', 'Noto Sans Devanagari', 'Mangal', system-ui, sans-serif;
  --sans: 'Nirmala UI', 'Kohinoor Devanagari', 'Noto Sans Devanagari', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
html[lang^='hi'] h1,
html[lang^='hi'] h2,
html[lang^='hi'] h3,
html[lang^='hi'] .calc-figure b,
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-ink500); font-size: 0.8125rem; font-weight: 700; line-height: 1;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.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 .18s 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; } }

@keyframes figureIn { from { opacity: 0; transform: translate3d(0,10px,0); } to { opacity: 1; transform: none; } }

/**
 * 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 .7s var(--ease), transform .7s 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 .6s var(--ease), transform .6s 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: 70ms; }
.reveal[data-reveal='stagger'].is-visible > *:nth-child(3) { transition-delay: 140ms; }
.reveal[data-reveal='stagger'].is-visible > *:nth-child(4) { transition-delay: 210ms; }
.reveal[data-reveal='stagger'].is-visible > *:nth-child(5) { transition-delay: 280ms; }
.reveal[data-reveal='stagger'].is-visible > *:nth-child(6) { transition-delay: 350ms; }
.reveal[data-reveal='stagger'].is-visible > *:nth-child(n+7) { transition-delay: 420ms; }

/* ============================ 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 .2s var(--ease), background .12s linear, border-color .2s var(--ease);
}
.button-primary { background: var(--c-brand); color: var(--c-onBrandInk); box-shadow: 0 14px 30px rgba(91,149,255,.28); }
.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); }
.button-secondary:hover { transform: translateY(-2px); border-color: var(--c-brand); }
.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 .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease), transform .4s 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 .2s var(--ease); }
.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 {
  /* 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 .2s var(--ease), color .2s 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; }
.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 .2s var(--ease);
}
.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 .2s var(--ease), background .12s linear;
}
.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 .25s var(--ease), margin .25s 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;
  animation: riseIn .6s .05s var(--ease) both;
}
.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; animation: riseIn .7s var(--ease) both; }
.hero h1 span:nth-child(1) { animation-delay: .10s; }
.hero h1 span:nth-child(2) { animation-delay: .18s; }
.hero h1 span:nth-child(3) { animation-delay: .26s; }
.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; animation: riseIn .7s .34s var(--ease) both; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; animation: riseIn .7s .42s var(--ease) both; }
.hero-platforms { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; color: var(--c-ink500); font-size: 0.8125rem; font-weight: 500; animation: riseIn .7s .5s var(--ease) both; }
.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; animation: riseIn .8s .3s var(--ease) both; }
.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; }

.calc { display: flex; flex-direction: column; gap: 18px; padding: 26px; border-radius: 30px; background: var(--c-card); border: 1px solid var(--c-cardBorder); box-shadow: var(--shadow); }
.calc-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.calc-energy { display: flex; flex-wrap: wrap; gap: 8px; }
.calc-energy button { cursor: pointer; font: inherit; color: var(--c-ink600); }
.calc-energy .chip-selected {
  color: var(--c-brand); background: var(--c-brandSoft); border-color: var(--c-brand);
}
.calc-energy button:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; }
.calc-stepper { display: flex; align-items: center; gap: 10px; }
.calc-stepper button {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: var(--r-control); background: var(--c-glass);
  border: 1px solid var(--c-cardBorder); color: var(--c-ink900);
  font-size: 1.25rem; font-weight: 700; cursor: pointer; transition: border-color .2s var(--ease);
}
.calc-stepper button:hover:not(:disabled) { border-color: var(--c-brand); }
.calc-stepper button:disabled { background: var(--c-surfaceSunken); border-color: var(--c-border); color: var(--c-inkDisabled); cursor: default; }
.calc-seats { min-width: 108px; text-align: center; font-size: 0.9375rem; font-weight: 700; }
.calc-rule { height: 1px; background: var(--c-cardBorder); }
.calc-figure { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.calc-figure b { font-family: var(--display); font-weight: 800; font-size: clamp(3.5rem, 9vw, 5.25rem); line-height: .95; letter-spacing: -.035em; color: var(--c-ink900); animation: figureIn .32s var(--ease) both; }
.calc-figure span { color: var(--c-ink500); font-size: 0.9375rem; font-weight: 600; }
.calc-rows { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r-card-sm); background: var(--c-bg); border: 1px solid var(--c-cardBorder); font-size: 0.875rem; line-height: 21px; color: var(--c-ink600); }
.calc-rows div { display: flex; justify-content: space-between; gap: 16px; }
.calc-rows div b { color: var(--c-ink700); font-weight: 600; }
.calc-rows .calc-driver span { color: var(--c-ink900); font-weight: 600; }
.calc-rows .calc-driver b { color: var(--c-success); }

/* ============================ 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 .3s var(--ease), border-color .3s var(--ease); }
.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); }
.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-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 1.1s .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 .3s var(--ease), border-color .3s var(--ease); }
.way:hover { transform: translateY(-5px); border-color: var(--c-brand); box-shadow: var(--shadow); }
.way > span:first-child { font-size: 1.625rem; line-height: 1; }
.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; }
.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 .25s var(--ease); }
.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 .25s 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; }
.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); }
.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; }
.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 .2s var(--ease), color .2s var(--ease); }
.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; }
.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; }
}

@media (max-width: 860px) {
  .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); }
  .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, .calc-stepper { 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, .calc, .chip, .text-size, .lang-switch { border-width: 2px; }
  .ambient { display: none; }
  a:focus-visible, button:focus-visible { outline-width: 4px; }
}

@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; }
}