/* ==========================================================================
   ZAARI — tryzaari.in
   Dark, kinetic, glass. Brand colours sampled from the official logo:
   indigo #4F46E5, amber #F59E0B.
   Hand-written, no framework, no CDN — drops onto shared hosting as-is.
   ========================================================================== */

/* ----------------------------------------------------------------- type --
   Self-hosted (OFL) so there is still no CDN and no third-party request.
   Both families are VARIABLE — one file covers every weight in the range.
   latin-ext is not optional here: the rupee sign U+20B9 lives in that
   subset (U+20AD-20C0), and this site is nothing but prices. Drop it and
   every ₹ silently falls back to a system font mid-number.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/bricolage-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/bricolage-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- tokens --
   The site's whole argument is an itemised receipt: label left, figure right,
   hairline beneath, nothing hidden in between. So the design is built out of
   opaque tonal grounds separated by 1px rules rather than floating translucent
   cards — which is both the move away from dated glassmorphism and the reason
   every contrast ratio below is a computable number rather than a composite
   that happens to look alright.
   ------------------------------------------------------------------------ */
:root {
  /* ══ BRAND — same hues, split roles ═══════════════════════════════════════ */
  --indigo:      #4f46e5;
  --indigo-lit:  #6d64ff;
  --indigo-deep: #2b23a8;
  --indigo-pale: #b3adff;   /* labels + inline links: 9.15:1 on --g-2 */
  --amber:       #f59e0b;   /* CTA, deals, "Coming soon" — nothing else */
  --amber-lit:   #fbbf24;
  --mint:        #34d399;   /* savings / positive / switch-on only */
  --focus:       #7dd3fc;   /* focus ring ONLY, never a state (11.15:1) */
  --fig-neutral: #7f86ab;   /* split-bar tax segment, 5.22:1 */

  /* ══ GROUND RAMP — opaque, no translucency, no blur ═══════════════════════ */
  --g-0: #06071a;   /* page ground            */
  --g-1: #0a0c20;   /* default section ground */
  --g-2: #0e1128;   /* raised band, cards     */
  --g-3: #141733;   /* nested surface         */
  --g-4: #1b1f42;   /* inert tracks           */
  --g-plus: #1d1c4a;/* the ONE emissive surface — Zaari Plus */

  /* ══ RULES — the primary structural device ════════════════════════════════ */
  --rule:        rgba(255,255,255,.085);
  --rule-strong: rgba(255,255,255,.17);
  --rule-accent: rgba(109,100,255,.45);
  --rule-field:  #616a9e;   /* form borders: 3.39:1, clears WCAG 1.4.11 */

  /* ══ TEXT — every value measured against the ground it sits on ════════════ */
  --fg:   #f2f3fa;   /* headings        16.8:1 on --g-2 */
  --fg-2: #c4c8e2;   /* running copy    11.25:1 */
  --fg-3: #9aa0c4;   /* meta / caption   7.26:1 */

  /* ══ SPACING — strict 4px step ════════════════════════════════════════════ */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --space-section: clamp(56px, 2.5rem + 5.2vw, 128px);
  --gutter:        clamp(16px, .9rem + 1.2vw, 32px);

  /* ══ RADII — tightened; the 26/34px steps are gone ════════════════════════ */
  --r-xs:  8px;
  --r-sm: 12px;
  --r:    16px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* ══ TYPE SCALE — every vw term engages at 360px ══════════════════════════ */
  --t-2xs: clamp(.72rem,  .69rem + .10vw, .78rem);
  --t-xs:  clamp(.80rem,  .76rem + .16vw, .875rem);
  --t-sm:  clamp(.90rem,  .86rem + .18vw, .975rem);
  --t-base:clamp(1rem,    .95rem + .22vw, 1.125rem);
  --t-md:  clamp(1.10rem, 1.02rem + .34vw, 1.30rem);
  --t-lg:  clamp(1.35rem, 1.16rem + .82vw, 1.90rem);
  --t-xl:  clamp(1.80rem, 1.34rem + 2.10vw, 3.05rem);
  --t-2xl: clamp(2.20rem, 1.50rem + 3.40vw, 4.00rem);
  --t-3xl: clamp(2.45rem, 1.35rem + 6.10vw, 6.25rem);
  --t-fig: clamp(3.00rem, 1.70rem + 5.80vw, 6.00rem);

  --lh-tight:.96; --lh-display:1.04; --lh-head:1.16;
  --lh-snug:1.30; --lh-body:1.60;    --lh-loose:1.72;
  --measure:66ch; --measure-tight:46ch; --measure-h1:17ch; --measure-h2:22ch;

  /* ══ MOTION — four curves, four jobs ══════════════════════════════════════ */
  --ease-out:   cubic-bezier(.16,1,.3,1);   /* arrivals      */
  --ease-io:    cubic-bezier(.65,0,.35,1);  /* state changes */
  --ease-press: cubic-bezier(.4,0,1,1);     /* finger-down   */
  --ease-spring:linear(0,.402 7.4%,.711 15.3%,.929 23.7%,1.008 28.2%,1.062 33.1%,1.075 38.6%,1.06 46.4%,1.002 62.3%,.992 71.4%,1);
  --t-press:90ms; --t-quick:180ms; --t-state:260ms;
  --t-enter:420ms; --t-exit:220ms; --t-spring:520ms;

  /* ══ ELEVATION — three levels, ZERO x-offset on every shadow ══════════════
     Rim alpha rises with height because a higher object sits nearer the light. */
  --e-0:  inset 0 1px 0 0 rgba(255,255,255,.05);
  --e-1:  inset 0 1px 0 0 rgba(255,255,255,.085),
          0 1px 2px rgba(0,0,0,.34), 0 10px 24px -14px rgba(0,0,0,.80);
  --e-2:  inset 0 1px 0 0 rgba(255,255,255,.13),
          0 2px 4px rgba(0,0,0,.40), 0 24px 48px -24px rgba(0,0,0,.88);
  --e-in: inset 0 2px 5px -1px rgba(0,0,0,.62),
          inset 0 1px 0 rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.05);
  --press: 0 1px 1px rgba(0,0,0,.50), inset 0 1px 2px rgba(0,0,0,.35),
           inset 0 -1px 0 rgba(255,255,255,.10);
  --ring-sel: inset 0 0 0 2px var(--indigo-lit);

  /* ══ AMBIENT LIGHT — set per section, replacing one fixed body blob ═══════ */
  --lx:50%; --ly:-12%; --lc:transparent;

  --wrap: 1180px;
  --nav-h: 64px;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  /* Display face for headlines and big numbers. Falls back to the body stack,
     so a failed font load degrades to the old look rather than to a serif. */
  --display: "Bricolage Grotesque", var(--sans);

  /* ══ COMPATIBILITY ALIASES ════════════════════════════════════════════════
     ~14 inline style="color:var(--dimmer)" uses live in index.html and ~15
     rules still say var(--ease). These aliases let each step above ship on its
     own instead of forcing one enormous commit. Remove once the markup sweep
     is done. ═══════════════════════════════════════════════════════════════ */
  --void: var(--g-0);   --ink: var(--g-1);   --ink-2: var(--g-2);
  --ink-3: var(--g-4);  --white: var(--fg);
  --dim: var(--fg-2);   --dimmer: var(--fg-3);
  --hair: var(--rule);  --hair-2: var(--rule-strong);
  --glass: var(--g-2);  --glass-lit: var(--g-3);
  --ease: var(--ease-out);
  --r-xl: var(--r-lg);
  --glow-i: var(--e-2);
  --glow-a: var(--e-2);
}
@media (min-width: 1021px) { :root { --nav-h: 72px; } }

*, *::before, *::after { box-sizing: border-box; }

/* `hidden` must beat the layout rules below (a .bill-row is display:flex, which
   would otherwise override the attribute and show rows meant to be hidden). */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  /* clip, NOT body{overflow-x:hidden}: making body a scroll container silently
     breaks position:sticky, which the nav depends on. clip contains stray wide
     children without that side effect. */
  overflow-x: clip;
  /* Nine in-page anchors (including the skip link) previously landed underneath
     the sticky header. */
  scroll-padding-top: calc(var(--nav-h) + var(--s-4, 16px));
}

/* Smooth scrolling is a motion preference. It was declared unconditionally and
   then re-declared after the reduce block at equal specificity, so readers who
   asked for no motion still got smooth-scrolled. This is its only correct home. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--g-0, #06071a);
  color: var(--fg-2, #c4c8e2);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
}

/* Ambient light is now PER SECTION rather than one fixed pair of blobs behind
   everything. The old body::before painted a single screen's worth of glow and
   then sat there unchanged for the remaining nine viewports of scroll, so most
   of the page got no light at all — and body::after's full-viewport noise layer
   was a fixed, composited surface repainting on every scroll frame for a 3.5%
   opacity texture nobody could see. Both deleted.

   Each section opts in by setting --lc (and optionally --lx/--ly). Sections
   that don't opt in cost nothing. */
section::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(48rem 32rem at var(--lx) var(--ly), var(--lc), transparent 68%);
}
section > * { position: relative; z-index: 1; }

img, svg { max-width: 100%; display: block; }
/* --indigo-lit measured 4.00:1 on a card ground — below AA for body text.
   --indigo-pale is the same hue at 9.15:1. */
a { color: var(--indigo-pale); text-decoration: none; }
a:hover { color: var(--fg); }

h1, h2, h3, h4 {
  color: var(--fg); margin: 0 0 .6em; font-weight: 800;
  font-family: var(--display);
  /* Bricolage carries an opsz axis (12–96) — let the browser pick the right
     optical size per heading instead of scaling one master up. */
  font-optical-sizing: auto;
  letter-spacing: -.022em;
  /* Ragged-right headlines were breaking with one orphaned word. */
  text-wrap: balance;
}
h1 {
  font-size: var(--t-3xl); line-height: var(--lh-tight);
  letter-spacing: -.035em; max-width: var(--measure-h1);
}
h2 {
  font-size: var(--t-2xl); line-height: var(--lh-display);
  letter-spacing: -.028em; max-width: var(--measure-h2);
}
h3 { font-size: var(--t-md); letter-spacing: -.014em; line-height: var(--lh-snug); }
p  { margin: 0 0 1rem; text-wrap: pretty; }

::selection { background: var(--indigo); color: #fff; }

/* Focus gets its own colour. Amber previously meant focus AND selected-vehicle
   AND switch-on AND "Coming soon" AND primary CTA — five meanings, so none of
   them read as focus. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-xs); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 999; background: var(--fg); color: var(--g-0); padding: .7rem 1.1rem; border-radius: var(--r-xs); }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* Prices are the whole point of this site, so figures must not jitter as they
   recalculate, and the display face must not fake a weight it actually has. */
.num, .fare-total, .bill-row b, .bill-row strong, output {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
body { font-synthesis-weight: none; }

/* gradient display text */
.grad {
  background: linear-gradient(104deg, var(--indigo-lit) 4%, #a99fff 42%, var(--amber-lit) 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ------------------------------------------------------ scroll progress -- */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: 200;
  background: linear-gradient(90deg, var(--indigo-lit), var(--amber));
  transform: scaleX(0); transform-origin: 0 50%;
}

/* ------------------------------------------------------------------ nav -- */
.nav {
  position: sticky; top: 0; z-index: 120; height: var(--nav-h);
  display: flex; align-items: center;
  /* Plain rgba FIRST as the fallback. A browser without color-mix() support
     dropped the whole declaration and rendered a fully transparent sticky
     header over scrolling content — on exactly the mid-range Android this site
     is built for. Same reason -webkit-backdrop-filter is spelled out. */
  background: rgba(6, 7, 26, .72);
  background: color-mix(in srgb, var(--g-0, #06071a) 72%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.nav.stuck {
  background: rgba(6, 7, 26, .92);
  background: color-mix(in srgb, var(--g-0, #06071a) 92%, transparent);
  border-bottom-color: var(--hair);
}
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; width: 100%; }
.brand img { height: 32px; width: auto; }

.menu { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.menu a {
  display: block; padding: .5rem .85rem; border-radius: 999px; font-size: .95rem;
  font-weight: 600; color: var(--dim); transition: color .2s, background .2s;
}
.menu a:hover { color: var(--white); background: var(--glass-lit); }

.nav-right { display: flex; align-items: center; gap: .6rem; }

.burger {
  display: none; width: 44px; height: 44px; border: 1px solid var(--hair-2); border-radius: 12px;
  background: var(--glass); color: var(--white); cursor: pointer; padding: 0;
  place-items: center;
}
.burger svg { width: 22px; height: 22px; }

@media (max-width: 1020px) {
  .burger { display: grid; }
  .menu, .nav-right .btn-text { display: none; }
  .drawer {
    position: fixed; inset: var(--nav-h) 0 auto; z-index: 119;
    background: rgba(10, 12, 32, .97);
    background: color-mix(in srgb, var(--g-1, #0a0c20) 97%, transparent);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px); border-bottom: 1px solid var(--hair);
    padding: 1rem 22px 1.6rem; display: none;
  }
  .drawer.open { display: block; animation: drop .35s var(--ease) both; }
  .drawer ul { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .15rem; }
  .drawer a { display: block; padding: .85rem .5rem; color: var(--white); font-size: 1.06rem; font-weight: 600; border-bottom: 1px solid var(--hair); }
  .drawer .btn { width: 100%; }
}
@keyframes drop { from { opacity: 0; transform: translateY(-10px); } }
@media (min-width: 1021px) { .drawer { display: none !important; } }

/* --------------------------------------------------------------- buttons -- */
.btn {
  --bg: var(--indigo);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.75rem; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-size: 1rem; font-weight: 700; letter-spacing: -.01em;
  color: #fff; background: var(--bg);
  /* was nowrap — which is one of the two real sources of horizontal overflow at
     360px, previously masked by body{overflow-x:hidden} */
  white-space: normal; text-wrap: balance;
  box-shadow: var(--e-1);
  /* Press is fast and accelerating (finger going down); release springs back.
     Asymmetric on purpose — matching in and out feels mushy. */
  transition: transform var(--t-spring) var(--ease-spring),
              box-shadow var(--t-quick) var(--ease-out),
              background var(--t-quick) var(--ease-out);
}
@media (hover: hover) {
  .btn:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--e-2); }
}
/* Real press physics. Previously :active only cancelled the hover lift, so on
   touch — where there is no hover — tapping the primary CTA produced literally
   no feedback at all. Now it travels INTO the surface and the shadow collapses,
   which is what a physical button does. */
.btn:active {
  transform: translateY(1px) scale(.985);
  box-shadow: var(--press);
  transition-duration: var(--t-press);
  transition-timing-function: var(--ease-press);
}
.btn-amber { --bg: var(--amber); color: #241a02; }
.btn-amber:hover { color: #241a02; }
.btn-glass {
  background: var(--glass-lit); color: var(--white); box-shadow: none;
  border: 1px solid var(--hair-2);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--hair-2); backdrop-filter: blur(8px);
}
.btn-glass:hover { background: rgba(255,255,255,.13); }
.btn-lg { padding: 1.1rem 2.15rem; font-size: 1.06rem; }
.btn-sm { padding: .6rem 1.1rem; font-size: .9rem; }

/* --------------------------------------------------------------- shared -- */
section { position: relative; padding-block: var(--space-section); }

/* Per-section ambient light. Each section that opts in gets one soft source,
   placed where its content actually is, so the eye is led down the page instead
   of one glow sitting behind the first screen and nothing behind the other
   nine. Sections that don't set --lc paint nothing (the gradient resolves to
   transparent) and cost nothing.

   Alternating ground tones do the rest of the work: adjacent sections differ by
   one step on the ramp, which is what separates them now that the cards no
   longer float. */
.hero      { --lc: rgba(79,70,229,.30);  --lx: 78%; --ly: -6%;  }
#services  { --lc: rgba(109,100,255,.13); --lx: 12%; --ly: 8%;  background: var(--g-1); }
#fare      { --lc: rgba(79,70,229,.20);  --lx: 88%; --ly: 18%;  }
#how       { --lc: rgba(109,100,255,.10); --lx: 20%; --ly: 0%;  background: var(--g-1); }
#why       { --lc: rgba(52,211,153,.09);  --lx: 82%; --ly: 12%; }
#plus      { --lc: rgba(109,100,255,.22); --lx: 50%; --ly: 0%;  background: var(--g-1); }
#drive     { --lc: rgba(245,158,11,.11);  --lx: 14%; --ly: 10%; }
#fleet     { --lc: rgba(79,70,229,.14);  --lx: 86%; --ly: 6%;   background: var(--g-1); }
#faq       { --lc: transparent; }
#get       { --lc: rgba(109,100,255,.18); --lx: 50%; --ly: 20%; background: var(--g-1); }
#contact   { --lc: rgba(79,70,229,.12);  --lx: 24%; --ly: 4%;   }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: 1.4rem;
  padding: .42rem .95rem .42rem .55rem; border-radius: 999px;
  background: var(--glass-lit); border: 1px solid var(--hair-2);
  font-size: .84rem; font-weight: 600; color: var(--fg);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-size: .84rem; font-weight: 600; color: var(--white); backdrop-filter: blur(8px);
}
.eyebrow .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--mint);
  box-shadow: 0 0 0 0 rgba(52,211,153,.75); animation: pulse 2.2s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 9px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

.kicker {
  display: block; font-size: .8rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--indigo-lit); margin-bottom: 1rem;
}
.lede { font-size: clamp(1.06rem, 1.7vw, 1.28rem); color: var(--dim); max-width: 40ch; }
.head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.head.mid { margin-inline: auto; text-align: center; }
.head p { color: var(--dimmer); margin-bottom: 0; }

/* Opaque tonal card. The old recipe was a translucent gradient over a 14px
   backdrop-blur: three composited layers per card, a contrast ratio that
   depended on whatever happened to be scrolling underneath, and a real
   scroll-performance cost on mid-range Android — for an effect the design does
   not need. A solid ground + one hairline + a real shadow reads more expensive,
   measures exactly, and is free to paint. */
.glass {
  position: relative; border-radius: var(--r); padding: var(--s-6);
  background: var(--g-2);
  border: 1px solid var(--rule);
  box-shadow: var(--e-1);
  transition: transform var(--t-state) var(--ease-out),
              border-color var(--t-state) var(--ease-out),
              box-shadow var(--t-state) var(--ease-out);
  overflow: hidden;
}
/* Top-edge rim light: one implied light source, directly above. */
.glass::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}
/* Hover reward only where a real pointer exists. On touch, :hover fires on tap
   and leaves the card stuck in its hovered state. */
@media (hover: hover) {
  .glass:hover { transform: translateY(-3px); border-color: var(--rule-strong); box-shadow: var(--e-2); }
}
.glass h3 { margin-bottom: .45rem; }
.glass p  { color: var(--dimmer); font-size: .97rem; margin-bottom: 0; }

.ico {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  color: var(--indigo-lit); margin-bottom: 1.1rem;
  background: linear-gradient(145deg, rgba(109,100,255,.28), rgba(109,100,255,.06));
  border: 1px solid rgba(109,100,255,.32);
}
.ico.amber { background: linear-gradient(145deg, rgba(245,158,11,.26), rgba(245,158,11,.05)); border-color: rgba(245,158,11,.32); color: var(--amber-lit); }
.ico .ik { width: 22px; height: 22px; }

/* --------------------------------------------------------- reveal on scroll --
   Content is VISIBLE BY DEFAULT and the reveal is layered on top, rather than
   the reverse. Previously `.rise{opacity:0}` shipped in the stylesheet and only
   JavaScript ever removed it — so a blocked, failed or slow app.js left the
   entire page blank, and the hero (the LCP element) could not paint until a
   script had run. Now: no script, no problem — the page simply renders.

   Where scroll-driven timelines are supported the reveal runs entirely in the
   compositor with zero JS. Where they are not, everything is just visible. */
.rise { opacity: 1; transform: none; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rise {
      animation: rise-in linear both;
      animation-timeline: view();
      animation-range: entry 8% cover 26%;
    }
    /* The hero must never animate opacity — that would re-open the LCP hole by
       another route. It gets transform only, and starts visible. */
    .hero .rise { animation-name: rise-in-flat; }
  }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes rise-in-flat {
  from { transform: translateY(14px); }
  to   { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
/* `html{scroll-behavior:smooth}` used to sit HERE, unconditionally and after the
   reduce block at equal specificity — so the one group that explicitly asked for
   no motion was the only group guaranteed to get smooth scrolling. It now lives
   inside a no-preference query near the top of this file. */

/* ------------------------------------------------------------------ hero -- */
.hero { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; } }

.hero h1 { margin-bottom: 1.15rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin: 2rem 0 1.5rem; }

.hero-meta { display: flex; flex-wrap: wrap; gap: 1.6rem; padding-top: 1.5rem; border-top: 1px solid var(--hair); }
.hero-meta div span { display: block; font-size: .82rem; color: var(--dimmer); }
.hero-meta div strong { color: var(--white); font-family: var(--display); font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; }

/* device */
.device-stage { position: relative; display: grid; place-items: center; }
.device-stage::before {                     /* halo behind the phone */
  content: ""; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(79,70,229,.55), transparent 66%); filter: blur(28px);
}
.device {
  position: relative; width: min(322px, 82vw); aspect-ratio: 9/19.5;
  background: linear-gradient(160deg, #23264d, #0c0e22);
  border-radius: 44px; padding: 9px; box-shadow: 0 46px 90px -30px rgba(0,0,0,.95), 0 0 0 1px var(--hair-2);
  animation: float 7s ease-in-out infinite;
}
@keyframes float { 50% { transform: translateY(-13px); } }
.device .notch {
  position: absolute; top: 17px; left: 50%; translate: -50% 0; z-index: 4;
  width: 86px; height: 21px; border-radius: 999px; background: #05060f;
}
/* Icon system — every <svg class="ik"><use href="#i-…"/></svg> inherits
   currentColor as stroke, so context rules only ever set color + size. */
.ik { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* The phone screen — a light recreation of the real rider-app home. */
.vp { position: relative; height: 100%; border-radius: 36px; overflow: hidden; background: #f6f7fd; color: #171a3a; display: flex; flex-direction: column; }

.ph-head { padding: 2.45rem .9rem .9rem; background: linear-gradient(180deg, #d5d9fa 0%, #e8eafc 72%, #f6f7fd 100%); }
.ph-status { display: flex; justify-content: space-between; align-items: center; font-size: .6rem; font-weight: 800; color: #191c3e; margin-bottom: .6rem; }
.ph-st { width: 46px; height: 11px; color: #191c3e; }
.ph-toprow { display: flex; align-items: center; gap: .45rem; margin-bottom: .7rem; }
.ph-ava { width: 30px; height: 30px; border-radius: 50%; flex: none; background: linear-gradient(140deg, var(--indigo), #8b7cf8); color: #fff; font-size: .72rem; font-weight: 800; display: grid; place-items: center; }
.ph-loc { display: flex; align-items: center; gap: .4rem; background: #fff; border-radius: 999px; padding: .28rem .7rem .28rem .55rem; box-shadow: 0 4px 14px rgba(36,40,100,.1); }
.ph-loc .ik { width: 13px; height: 13px; color: var(--indigo); flex: none; }
.ph-loc small { display: block; font-size: .5rem; color: #7a7ea3; line-height: 1.15; }
.ph-loc b { display: block; font-size: .66rem; color: #171a3a; line-height: 1.15; }
.ph-bell { margin-left: auto; position: relative; width: 32px; height: 32px; flex: none; border-radius: 10px; background: #fff; display: grid; place-items: center; box-shadow: 0 4px 14px rgba(36,40,100,.1); }
.ph-bell .ik { width: 15px; height: 15px; color: #20244d; }
.ph-bell i { position: absolute; top: 6px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: #ef4444; border: 1.5px solid #fff; }
.ph-greet { font-size: 1.16rem; font-weight: 800; letter-spacing: -.03em; color: #15183c; line-height: 1.15; }
.ph-sub { font-size: .66rem; color: #5d6187; margin-top: .1rem; }
.ph-search { margin-top: .75rem; background: #fff; border-radius: 13px; padding: .48rem .55rem; display: flex; align-items: center; gap: .5rem; box-shadow: 0 6px 18px rgba(36,40,100,.12); }
.ph-search-ic { width: 26px; height: 26px; border-radius: 9px; background: var(--indigo); display: grid; place-items: center; flex: none; }
.ph-search-ic .ik { width: 13px; height: 13px; color: #fff; }
.ph-search-txt { font-size: .72rem; font-weight: 700; color: #3c4066; flex: 1; }
.ph-search em { display: flex; align-items: center; gap: .28rem; font-style: normal; font-size: .62rem; font-weight: 700; color: var(--indigo); border-left: 1px solid #e5e7f6; padding-left: .55rem; }
.ph-search em .ik { width: 12px; height: 12px; }

.ph-body { flex: 1; padding: .75rem .9rem; display: flex; flex-direction: column; gap: .65rem; overflow: hidden; }

.ph-book { position: relative; border-radius: 15px; padding: .8rem .8rem; background: linear-gradient(135deg, #6157f4, #4338ca); color: #fff; display: flex; align-items: center; gap: .3rem; overflow: hidden; }
.ph-book::before { /* the dotted texture on the card's right half */
  content: ""; position: absolute; inset: 0 0 0 45%;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.5px);
  background-size: 11px 11px;
}
.ph-book-txt { position: relative; flex: 1; }
.ph-book-txt b { display: block; font-size: .88rem; font-weight: 800; letter-spacing: -.02em; }
.ph-book-txt small { display: block; font-size: .57rem; color: rgba(255,255,255,.8); margin: .14rem 0 .5rem; }
.ph-cta { display: inline-flex; align-items: center; gap: .3rem; background: #fff; color: var(--indigo); font-size: .6rem; font-weight: 800; padding: .34rem .6rem; border-radius: 8px; }
.ph-cta .ik { width: 11px; height: 11px; }
.ph-car { position: relative; width: 118px; flex: none; margin-right: -4px; filter: drop-shadow(0 9px 10px rgba(10,10,40,.35)); }

.ph-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .38rem; }
.ph-feats span { background: #fff; border-radius: 11px; padding: .5rem .15rem .45rem; text-align: center; box-shadow: 0 3px 12px rgba(36,40,100,.07); min-width: 0; }
.ph-feats .ik { width: 15px; height: 15px; color: var(--indigo); margin: 0 auto .28rem; }
.ph-feats b { display: block; font-size: .53rem; font-weight: 800; color: #22254c; letter-spacing: -.01em; white-space: nowrap; }
.ph-feats small { display: block; font-size: .47rem; color: #8a8dad; white-space: nowrap; }

.ph-label { display: flex; justify-content: space-between; align-items: baseline; }
.ph-label b { font-size: .78rem; font-weight: 800; color: #191c3e; letter-spacing: -.02em; }
.ph-label em { font-style: normal; font-size: .58rem; font-weight: 700; color: var(--indigo); }
.ph-svcs { display: grid; grid-template-columns: repeat(4, 1fr); gap: .38rem; }
.ph-svcs span { background: #fff; border-radius: 12px; padding: .5rem .15rem .45rem; text-align: center; box-shadow: 0 3px 12px rgba(36,40,100,.07); border: 1px solid transparent; }
.ph-svcs span.on { border-color: var(--indigo); }
.ph-svcs i { display: grid; place-items: center; width: 26px; height: 26px; margin: 0 auto .28rem; border-radius: 9px; background: #eef0fd; color: var(--indigo); }
.ph-svcs .ik { width: 14px; height: 14px; }
.ph-svcs b { display: block; font-size: .54rem; font-weight: 700; color: #33365e; }

.ph-offer { position: relative; border-radius: 13px; padding: .62rem .7rem; background: linear-gradient(120deg, #f59e0b, #d97706); color: #fff; display: flex; align-items: center; gap: .55rem; overflow: hidden; }
.ph-offer::before { /* ticket notch on the right, like a coupon */
  content: ""; position: absolute; right: 52px; top: -7px; bottom: -7px; width: 0;
  border-left: 2px dashed rgba(255,255,255,.55);
}
.ph-offer-ic { width: 28px; height: 28px; flex: none; border-radius: 9px; background: rgba(255,255,255,.2); display: grid; place-items: center; }
.ph-offer-ic .ik { width: 14px; height: 14px; }
.ph-offer-txt { flex: 1; min-width: 0; }
.ph-offer-txt b { display: block; font-size: .62rem; font-weight: 800; letter-spacing: -.01em; }
.ph-offer-txt small { display: block; font-size: .5rem; color: rgba(255,255,255,.85); }
.ph-offer-pct { flex: none; width: 44px; text-align: center; font-size: 1.05rem; font-weight: 800; line-height: .9; letter-spacing: -.04em; display: flex; align-items: center; justify-content: center; gap: .12rem; }
.ph-offer-pct small { font-size: .45rem; font-weight: 800; line-height: 1.05; text-align: left; text-transform: uppercase; }

.ph-nav { display: grid; grid-template-columns: repeat(4, 1fr); padding: .5rem .55rem .85rem; background: #fff; border-top: 1px solid #ecedf8; }
.ph-nav span { display: grid; justify-items: center; gap: .2rem; font-size: .5rem; font-weight: 700; color: #9093b4; }
.ph-nav .ik { width: 15px; height: 15px; }
.ph-nav .on { color: var(--indigo); }

/* --------------------------------------------------------------- marquee -- */
.marquee {
  position: relative; padding: 1.1rem 0; border-block: 1px solid var(--hair);
  background: rgba(10, 12, 32, .6);
  background: color-mix(in srgb, var(--g-1, #0a0c20) 60%, transparent);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mq-track { display: flex; gap: 3.5rem; width: max-content; animation: slide 34s linear infinite; }
.marquee:hover .mq-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.mq-item {
  display: flex; align-items: center; gap: .6rem; color: var(--fg-2);
  font-variation-settings: 'wght' 560; font-size: var(--t-sm); white-space: nowrap;
}
.mq-item b { color: var(--amber-lit); }
/* An infinite animation keeps its element on the compositor for the whole
   session even when it has scrolled far out of view. This tells the browser to
   stop doing that work while it is off-screen — the single cheapest performance
   win on the page for a device with a weak GPU. */
.marquee { content-visibility: auto; contain-intrinsic-size: auto 56px; }
@media (prefers-reduced-motion: reduce) {
  .mq-track { animation: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
}

/* ------------------------------------------------------------ bento grid -- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.1rem; }
.bento > * { grid-column: span 2; }
.bento .w3 { grid-column: span 3; }
.bento .w4 { grid-column: span 4; }
.bento .w6 { grid-column: span 6; }
@media (max-width: 980px) { .bento { grid-template-columns: repeat(4, 1fr); } .bento > * { grid-column: span 2; } .bento .w3, .bento .w4, .bento .w6 { grid-column: span 4; } }
@media (max-width: 620px) { .bento { grid-template-columns: 1fr; } .bento > *, .bento .w3, .bento .w4, .bento .w6 { grid-column: span 1; } }

.svc { padding: 0; display: flex; flex-direction: column; }
/* The service illustrations carry a pale grey cityscape baked in, so they need
   to sit on a light tile — on the dark card alone they read as stray white
   boxes. Presenting them as a deliberate inset panel fixes that. */
/* Glyph pair replaces the raster illustration. The four PNGs were light-mode
   art on a light panel, dropped into a dark card — they read as pasted-in stock
   and fought the palette, while costing 78 KB. Two line glyphs from the sprite
   already on the page inherit currentColor, weigh nothing, stay crisp at any
   density, and finally look like they belong to the same product as the icons
   used everywhere else. */
.svc-ico {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-6) var(--s-6) 0;
  color: var(--indigo-lit);
}
.svc-ico .ik { width: 30px; height: 30px; stroke-width: 1.6; }
/* The second glyph sits back — a pair reads as a category, not a duplicate. */
.svc-ico .ik:nth-child(2) { width: 22px; height: 22px; color: var(--fg-3); opacity: .8; }
@media (hover: hover) {
  .svc:hover .svc-ico { color: var(--amber-lit); }
  .svc-ico { transition: color var(--t-state) var(--ease-out); }
}
.svc-txt { padding: var(--s-5) var(--s-6) var(--s-6); }
.svc-txt h3 { margin-bottom: .35rem; }
.svc-txt p { color: var(--fg-2); max-width: var(--measure-tight); }
.pills { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-4); }
.pill {
  font-size: var(--t-2xs); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-3); background: var(--g-3);
  border: 1px solid var(--rule); border-radius: var(--r-pill);
  padding: .28rem .68rem;
}

/* -------------------------------------------------------------- estimator -- */
.est { display: grid; grid-template-columns: 1fr .85fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
@media (max-width: 900px) { .est { grid-template-columns: 1fr; } }
/* Opt-in for two-column bands whose copy column carries the section heading:
   on collapse it must lead, or a supporting card sits above its own heading.
   Not a blanket .est rule — the fare estimator's source order is already right. */
@media (max-width: 900px) { .est > .copy-first { order: -1; } }

.veh-set { border: 0; padding: 0; margin: 0 0 var(--s-6); }
.veh-legend {
  font-variation-settings: 'wght' 620; color: var(--fg);
  margin-bottom: var(--s-3); font-size: var(--t-sm);
}
.veh-opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); margin-bottom: var(--s-6); }
.veh {
  cursor: pointer; text-align: center; padding: var(--s-4) var(--s-2);
  border-radius: var(--r); background: var(--g-3);
  border: 1px solid var(--rule); box-shadow: var(--e-0);
  transition: background var(--t-state) var(--ease-io),
              border-color var(--t-state) var(--ease-io),
              box-shadow var(--t-state) var(--ease-io),
              transform var(--t-spring) var(--ease-spring);
}
@media (hover: hover) { .veh:hover { border-color: var(--rule-strong); } }
/* was opacity:0 — an opacity:0 element paints its focus outline at zero alpha,
   which is why this control had NO visible keyboard focus at all. */
.veh input { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); pointer-events: none; }
.veh em {
  display: block; line-height: 1; font-style: normal; margin-bottom: var(--s-2);
  color: var(--indigo-pale); transition: color var(--t-state) var(--ease-io);
}
.veh em .ik { width: 32px; height: 32px; margin-inline: auto; stroke-width: 1.7; }
.veh span { display: block; font-variation-settings: 'wght' 620; color: var(--fg); font-size: var(--t-sm); }
.veh small { color: var(--fg-3); font-size: var(--t-2xs); }

/* Selection is a ring + fill, not a glow. That releases amber back to CTA duty,
   so focus and selection stop sharing one colour. */
.veh:has(input:checked), .veh.is-on {
  background: var(--g-2); border-color: transparent; box-shadow: var(--ring-sel);
}
.veh:has(input:checked) em, .veh.is-on em { color: var(--fg); }
.veh:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
/* Pre-:has() fallback so keyboard focus is visible in older engines too. */
.veh input:focus-visible ~ em { outline: 2px solid var(--focus); outline-offset: 6px; border-radius: var(--r-sm); }
.veh:active {
  transform: translateY(1px); box-shadow: var(--press);
  transition-duration: var(--t-press); transition-timing-function: var(--ease-press);
}

/* Bike is paused for the pilot: RECESSED material rather than a dimmed parent.
   `opacity:.5` on the label composited over the amber "Coming soon" text and
   dragged it to ~3.5:1; pressing the surface into the page says "deliberately
   off" while leaving the label at 8.3:1. */
.veh.is-soon {
  background: var(--g-0); box-shadow: var(--e-in);
  border-color: transparent; cursor: not-allowed;
}
.veh.is-soon em, .veh.is-soon span { opacity: .5; }
.veh.is-soon small {
  display: inline-block; opacity: 1; color: var(--amber-lit);
  background: rgba(245,158,11,.14); border: 1px solid rgba(245,158,11,.38);
  border-radius: var(--r-pill); padding: .1rem .55rem;
  font-variation-settings: 'wght' 620;
}

.slider-row { margin-bottom: var(--s-6); }
.slider-row label { display: flex; justify-content: space-between; align-items: baseline; font-variation-settings: 'wght' 620; color: var(--fg); margin-bottom: var(--s-3); font-size: var(--t-sm); }
.slider-row output { font-family: var(--display); font-variant-numeric: tabular-nums; color: var(--amber-lit); font-weight: 800; font-size: var(--t-md); letter-spacing: -.02em; }

/* −/+ buttons flank the slider. Not decoration: a precise drag is a real
   barrier for the low-digital-literacy end of the audience, and the range
   input's border box used to be 6px tall — tap-to-jump meant hitting a 6px
   strip, and a drag 8px off-target scrolled the page instead. */
.slider-ctl { display: flex; align-items: center; gap: var(--s-3); }
.step {
  flex: none; width: 44px; height: 44px; border-radius: var(--r-sm);
  background: var(--g-3); border: 1px solid var(--rule); color: var(--fg);
  font-size: var(--t-md); line-height: 1; cursor: pointer;
  transition: background var(--t-quick) var(--ease-out), transform var(--t-spring) var(--ease-spring);
}
@media (hover: hover) { .step:hover { background: var(--g-4); } }
.step:active { transform: translateY(1px) scale(.96); box-shadow: var(--press); transition-duration: var(--t-press); }

input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%;
  height: 44px;                      /* real 44px touch target, was 6px */
  background: transparent; touch-action: none; outline: none;
}
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: var(--r-pill); background: var(--g-4); box-shadow: var(--e-in); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--r-pill); background: var(--g-4); box-shadow: var(--e-in); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; cursor: grab;
  background: #fff; border: 5px solid var(--indigo); box-shadow: 0 2px 8px rgba(0,0,0,.6);
}
input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%; cursor: grab; border: 5px solid var(--indigo);
  background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.6);
}

.toggle-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r); background: var(--g-3); border: 1px solid var(--rule); }
.toggle-row label { color: var(--fg); font-variation-settings: 'wght' 620; font-size: var(--t-sm); cursor: pointer; }
.switch { position: relative; width: 46px; height: 26px; flex: none; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--g-4); box-shadow: var(--e-in); transition: background var(--t-state) var(--ease-io); pointer-events: none; }
.switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform var(--t-spring) var(--ease-spring); }
/* ON is mint, matching what "saving" means everywhere else on this page. */
.switch input:checked + i { background: var(--mint); }
.switch input:checked + i::after { transform: translateX(20px); }
.switch:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-pill); }

.bill { padding: 1.6rem 1.7rem; }
.bill-row { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; font-size: .96rem; }
.bill-row span:last-child { font-variant-numeric: tabular-nums; color: var(--white); font-weight: 600; }
.bill-row.muted span { color: var(--dimmer); }
.bill-row.save span:last-child { color: var(--mint); }
.bill-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin-top: .9rem; padding-top: 1rem; border-top: 1px dashed var(--hair-2);
}
.bill-total strong { color: var(--fg); font-size: var(--t-base); font-variation-settings: 'wght' 620; }
/* The total is the loudest figure on the page — it is the whole promise. */
.bill-total b {
  color: var(--fg); font-family: var(--display); font-size: var(--t-fig);
  font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: -.045em; line-height: var(--lh-tight);
}
/* The rupee sign rides smaller and higher — it is a unit, not a digit. */
.bill-total b .cur { font-size: .52em; vertical-align: .30em; margin-right: .04em; color: var(--fg-2); }
.bill-note { font-size: var(--t-xs); color: var(--fg-3); margin: var(--s-5) 0 0; max-width: var(--measure); }

.split-bar {
  display: flex; height: 8px; border-radius: var(--r-pill); overflow: hidden;
  margin-top: var(--s-5); background: var(--g-4); box-shadow: var(--e-in);
}
/* The copy above promises "watch the bill build itself". This one line is what
   makes that literally true instead of a jump-cut. */
.split-bar i { display: block; height: 100%; transition: width var(--t-enter) var(--ease-out); }
.split-bar i.fare, .split-key u.fare { background: var(--indigo-lit); }
.split-bar i.fee,  .split-key u.fee  { background: var(--amber); }
/* was #6b7280 — 2.73:1, below the 3:1 WCAG wants for a meaningful graphic */
.split-bar i.tax,  .split-key u.tax  { background: var(--fig-neutral); }
.split-key { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-3); font-size: var(--t-xs); color: var(--fg-3); }
.split-key span { display: flex; align-items: center; gap: var(--s-1); }
.split-key u { width: 9px; height: 9px; border-radius: 3px; }

/* Plus saving row. Scoped to #rowSave, NOT .bill-row.save — the Why receipt
   uses that same class for its ₹0 commission line and would vanish with it. */
#rowSave { display: none; opacity: 0; transform: translateY(-6px); }
#rowSave.on { display: flex; opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  #rowSave {
    transition: opacity var(--t-state) var(--ease-out),
                transform var(--t-state) var(--ease-out),
                display var(--t-state) allow-discrete;
  }
  @starting-style { #rowSave.on { opacity: 0; transform: translateY(-6px); } }
}

/* ------------------------------------------------------------- step rail -- */
.rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; counter-reset: st; }
@media (max-width: 900px) { .rail { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rail { grid-template-columns: 1fr; } }
/* Steps read as an ordered document: a big hanging numeral, a rule, then the
   text. No card, no gradient chip — the sequence is carried by the numerals. */
.st { position: relative; padding: var(--s-5) 0 0; border-top: 1px solid var(--rule); }
.st b {
  counter-increment: st; display: block; margin-bottom: var(--s-4);
  font-family: var(--display); font-size: var(--t-lg); font-weight: 800;
  line-height: 1; letter-spacing: -.04em;
  color: var(--indigo-pale); font-variant-numeric: tabular-nums;
}
.st b::after { content: "0" counter(st); }
.st h3 { margin-bottom: .3rem; }
.st p { color: var(--fg-3); font-size: var(--t-sm); margin: 0; }

/* ---------------------------------------------------------------- panels --
   The ONE emissive surface on the page. Everything else is a tonal ground, so
   Zaari Plus reads as special by being the only thing that glows — rather than
   by being louder than five other things that also glow. */
.panel {
  position: relative; overflow: hidden; border-radius: var(--r-lg); padding: clamp(2rem, 4.5vw, 3.6rem);
  background: var(--g-plus);
  border: 1px solid var(--rule-accent);
  box-shadow: var(--e-2);
}
.panel::after {
  content: ""; position: absolute; width: 30rem; height: 30rem; right: -8rem; top: -10rem;
  background: radial-gradient(circle, rgba(245,158,11,.20), transparent 65%);
  pointer-events: none;
}
.panel > * { position: relative; z-index: 1; }
/* Opaque ground means this copy measures a fixed 9.65:1 instead of compositing
   down to ~4.05:1 over whatever sat behind it. */
.panel p { color: var(--fg-2); }

.perks { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1rem; }
.perks li { display: flex; gap: .85rem; align-items: flex-start; color: var(--dim); }
.perks i {
  flex: none; width: 27px; height: 27px; border-radius: 9px; display: grid; place-items: center;
  font-size: .8rem; font-style: normal; font-weight: 800; color: #241a02; background: var(--amber);
}
.perks i .ik { width: 13px; height: 13px; stroke-width: 2.6; }
.perks b { color: var(--white); }

.ticks { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .95rem; }
.ticks li { display: flex; gap: .8rem; align-items: flex-start; }
.ticks i {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: .72rem; font-style: normal; font-weight: 800; margin-top: .18rem;
  color: var(--mint); background: rgba(52,211,153,.14); border: 1px solid rgba(52,211,153,.3);
}
.ticks i .ik { width: 12px; height: 12px; stroke-width: 2.8; }
.ticks b { color: var(--white); }

/* ------------------------------------------------------------------- faq -- */
.faq { max-width: 830px; margin-inline: auto; display: grid; gap: .7rem; }
.qa { border-radius: var(--r); background: var(--glass); border: 1px solid var(--hair); overflow: hidden; transition: border-color .25s, background .25s; }
.qa:hover { border-color: var(--hair-2); }
.qa.open { background: var(--glass-lit); border-color: rgba(109,100,255,.4); }
.qa > button {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1.2rem;
  padding: 1.25rem 1.4rem; background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit; font-size: 1.04rem; font-weight: 700; color: var(--white); letter-spacing: -.015em;
}
.qa .pm { position: relative; flex: none; width: 22px; height: 22px; }
.qa .pm::before, .qa .pm::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 2px; border-radius: 2px;
  background: var(--indigo-lit); transition: transform .3s var(--ease);
}
.qa .pm::after { transform: rotate(90deg); }
.qa.open .pm::after { transform: rotate(0); }
.qa .ans { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease); }
.qa.open .ans { grid-template-rows: 1fr; }
.qa .ans > div { overflow: hidden; }
.qa .ans p { padding: 0 1.4rem 1.35rem; margin: 0; color: var(--dimmer); }

/* ------------------------------------------------------------------ form -- */
.form { padding: clamp(1.6rem, 3vw, 2.4rem); }
.f { margin-bottom: 1.15rem; }
.f label { display: block; font-size: .9rem; font-weight: 600; color: var(--white); margin-bottom: .45rem; }
.f .rq { color: var(--amber); }
.f input, .f select, .f textarea {
  width: 100%; padding: .85rem 1rem; border-radius: var(--r-sm); font: inherit; font-size: var(--t-base);
  color: var(--fg); background: var(--g-3);
  /* A form control's boundary is a meaningful graphic: WCAG 1.4.11 wants 3:1.
     rgba(255,255,255,.16) measured 1.67:1 — the field edge was barely visible,
     which matters most for the low-vision and bright-sunlight cases this
     audience actually hits. --rule-field is 3.39:1. */
  border: 1px solid var(--rule-field);
  transition: border-color var(--t-quick) var(--ease-out), background var(--t-quick) var(--ease-out);
}
/* was #6f739a — 3.26:1, under AA for the placeholder text people read while
   deciding what a field wants */
.f input::placeholder, .f textarea::placeholder { color: var(--fg-3); }
.f select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; }
.f select option { background: var(--ink-2); color: var(--white); }
.f input:focus, .f select:focus, .f textarea:focus { outline: none; border-color: var(--indigo-lit); background: rgba(109,100,255,.09); }
.f .hint { font-size: .82rem; color: var(--dimmer); margin-top: .4rem; }
.f2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }
@media (max-width: 620px) { .f2 { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; }

.alert { border-radius: 12px; padding: .95rem 1.15rem; margin-bottom: 1.35rem; font-size: .95rem; }
.alert-ok  { background: rgba(52,211,153,.12);  border: 1px solid rgba(52,211,153,.36); color: #a7f3d0; }
.alert-bad { background: rgba(248,113,113,.12); border: 1px solid rgba(248,113,113,.36); color: #fecaca; }

.check { display: flex; gap: .7rem; align-items: flex-start; font-weight: 500; color: var(--dim); font-size: .95rem; cursor: pointer; }
.check input { width: auto; margin-top: .3rem; accent-color: var(--indigo); }

/* --------------------------------------------------------------- closing -- */
.close-band { text-align: center; }
.close-band .panel { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.close-band h2 { margin-inline: auto; max-width: 22ch; }
.close-band p { color: var(--dim); max-width: 46ch; margin-inline: auto; }
.close-cta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; }

/* ---------------------------------------------------------------- footer -- */
.foot { border-top: 1px solid var(--hair); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; font-size: .95rem; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.2rem; }
@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.foot img { height: 30px; width: auto; margin-bottom: 1.1rem; }
.foot h4 { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--dimmer); margin-bottom: 1.1rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.foot a { color: var(--dim); }
.foot a:hover { color: var(--white); }
/* Statutory company block — deliberately quiet, but must stay legible. */
.foot-legal {
  margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--hair);
  color: var(--dimmer); font-size: .82rem; line-height: 1.7;
}
.foot-legal strong { color: var(--dim); }
.foot-end {
  margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--hair);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--dimmer); font-size: .88rem;
}

/* ----------------------------------------------------------- legal pages -- */
.doc { padding: clamp(3rem, 7vw, 5rem) 0; }
.doc-wrap { max-width: 780px; margin-inline: auto; padding-inline: 22px; }
.doc h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); margin-bottom: .4rem; }
.doc .when { color: var(--dimmer); font-size: .92rem; margin-bottom: 2.6rem; }
.doc h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); margin-top: 2.8rem; }
.doc h3 { margin-top: 1.9rem; }
.doc ul, .doc ol { padding-left: 1.3rem; }
.doc li { margin-bottom: .55rem; }
.doc .toc { border-radius: var(--r); background: var(--glass); border: 1px solid var(--hair); padding: 1.4rem 1.6rem; margin-bottom: 2.6rem; }
.doc .toc strong { color: var(--white); display: block; margin-bottom: .8rem; }
.doc .toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.doc .flag { border-radius: var(--r); padding: 1.2rem 1.4rem; background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.32); color: #fde68a; }
.doc .flag code { background: rgba(0,0,0,.3); padding: .1rem .35rem; border-radius: 4px; }
.doc table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .94rem; }
.doc th, .doc td { border: 1px solid var(--hair); padding: .75rem .9rem; text-align: left; vertical-align: top; }
.doc th { background: var(--glass-lit); color: var(--white); }
.scroll-x { overflow-x: auto; }

.mt { margin-top: 2rem; }
.mid { text-align: center; }
/* Side-by-side cards whose copy runs to different line counts would otherwise
   leave their buttons at different heights — push the CTA to the bottom so the
   pair lines up regardless of how the text wraps. */
.bento .glass.mid { display: flex; flex-direction: column; }
.bento .glass.mid .mt { margin-top: auto; padding-top: 1.4rem; }

/* --------------------------------------------------- cross-document motion --
   Same-origin navigations (index → privacy → terms → back) cross-fade instead
   of flashing white, and the nav/wordmark stay put across the change so the
   page feels like one application rather than five documents.

   Entirely free: browsers without support navigate exactly as before, and the
   whole feature sits behind a reduced-motion gate. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .nav   { view-transition-name: site-nav; }
  .brand { view-transition-name: site-brand; }
}

/* ------------------------------------------------------------ motion floor --
   One global rule so every interactive surface has press feedback, not just
   the elements that were remembered individually. Touch users get no hover, so
   without this a tap on most of this page produces nothing at all. */
.qa > button:active, .drawer a:active, .menu a:active, .pill:active {
  transform: translateY(1px);
  transition-duration: var(--t-press);
  transition-timing-function: var(--ease-press);
}

/* The floating phone loops forever; park it while it is off-screen. */
.device-stage { content-visibility: auto; contain-intrinsic-size: auto 620px; }
@media (prefers-reduced-motion: reduce) { .device { animation: none; } }