/* Better Tuju homepage (design direction C, "Ikut jalan": follow the road). The page is the app: a drawn map you
   drive by scrolling, with the app's own sheets, guidance card and buttons on top.
   Source mockup: .design/marketing/C/ (styles.css). */

/* Bricolage Grotesque and Figtree, SIL Open Font License 1.1. Latin subsets built by site/scripts/build_assets.py. */
@font-face { font-family: "Bricolage Grotesque"; src: url(/assets/fonts/bricolage-grotesque-latin.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(/assets/fonts/figtree-latin.woff2) format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
:root {
  /* TujuStyle (ios/BetterTuju/DesignSystem.swift) */
  --blue: #175EEA; --guidance: #144CCE; --deep: #0D3BA7; --ink: #17283E; --muted: #64748A;
  --surface: #F2F5F9; --line: #E4E9EF; --muted-strong: #56667B; --green: #174E39; --danger: #A12E2E;
  --handle: #D7DEE7;
  /* drawn map (quiet style) */
  --land: #EDF1F6;
  --display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --text: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gx: 0.625rem;              /* page gutter on phones */
  --sheet-w: 100%;
  --shadow: 0 1px 2px rgba(23, 40, 62, .06), 0 10px 30px rgba(23, 40, 62, .10);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Lenis's recommended CSS (vendor/lenis/lenis.css, MIT), inlined here so it isn't a separate render-blocking request. */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch], .lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }

* { box-sizing: border-box; }
/* Phones draw a dark box over anything tapped. Every control here already shows its own change (switches slide,
   buttons press), so the box only reads as a flicker. Keyboard focus keeps its :focus-visible ring. */
html { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Without Lenis (script blocked or failed) anchors still glide; with reduced motion they jump. */
@media (prefers-reduced-motion: no-preference) { html:not(.lenis) { scroll-behavior: smooth; } }
body { margin: 0; background: var(--land); color: var(--ink); font: 400 1.0625rem/1.55 var(--text); -webkit-font-smoothing: antialiased; }
img, svg { display: block; }
a { color: var(--blue); }
h1, h2, h3 { margin: 0; color: var(--ink); }
h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 1.55rem + 2.9vw, 4rem); line-height: 1.02; font-variation-settings: "opsz" 96; }
h2 { font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem); line-height: 1.08; font-variation-settings: "opsz" 60; }
h3 { font: 700 1.0625rem/1.3 var(--text); }
p { margin: 0; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; z-index: 50; background: #fff; color: var(--ink); font-weight: 700; padding: .75rem 1rem; border-radius: 12px; box-shadow: var(--shadow); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.btn-primary:focus-visible { outline-color: var(--ink); }

/* ---------- buttons: the app's TujuPrimaryButton (14 px radius, 54 pt tall, bold) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3.375rem; padding: .5rem 1.5rem; border-radius: 14px; font: 700 1.0625rem/1.2 var(--text); text-decoration: none; text-align: center; border: 0; cursor: pointer; transition: background-color .15s, transform .15s var(--ease); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--guidance); }
.btn-primary:active { transform: scale(.98); }
.btn-sm { min-height: 2.625rem; padding: .375rem 1rem; border-radius: 12px; font-size: .9375rem; }
.textlink { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.textlink:hover { text-decoration-color: var(--blue); }

/* ---------- stage: fixed drawn map + car ---------- */
.stage { position: fixed; inset: 0; overflow: hidden; z-index: 0; background: var(--land); }
.map { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.map svg { width: 3000px; height: 6400px; }
.map-top { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.map .land { fill: var(--land); }
.map .hill path { fill: #E1ECE3; }
.map .landuse rect { fill: #E4E9EF; }
.map .park path { fill: #D6E8D9; }
.map .waterfill path { fill: #C6DCF2; }
.map .water { fill: none; stroke: #C6DCF2; stroke-linecap: round; stroke-linejoin: round; }
.map .border { fill: none; stroke: #C5CDD8; stroke-width: 2.5; stroke-dasharray: 12 8; }
.map .minorC { fill: none; stroke: #DCE2EA; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.map .minor { fill: none; stroke: #FFFFFF; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.map .majorC { fill: none; stroke: #D2D9E3; stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.map .major { fill: none; stroke: #FFFFFF; stroke-width: 9.5; stroke-linecap: round; stroke-linejoin: round; }
.map .rail { fill: none; stroke: #A9B3C0; stroke-width: 3; stroke-dasharray: 10 7; }
.map .hwC { fill: none; stroke: #8FA4C2; stroke-width: 17; stroke-linecap: round; stroke-linejoin: round; }
.map .hw { fill: none; stroke: #B7C6DB; stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; }
.map text, .map-top text { font-family: var(--text); }
.map .lt { font-size: 15px; font-weight: 700; letter-spacing: 2.5px; fill: #7D8898; paint-order: stroke; stroke: var(--land); stroke-width: 4px; }
.map .lt.big { font-size: 22px; letter-spacing: 4px; fill: #6E7A8B; }
/* under 360 px the logo chip sits right over "KUALA LUMPUR"; the Suria KLCC label still marks the start */
@media (max-width: 22.49em) { .map .lt.kl { display: none; } }
.map .lr { font-size: 13px; font-weight: 600; fill: #6F7B8B; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.map .lp { font-size: 14px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.map .lw { font-size: 14px; font-style: italic; font-weight: 600; fill: #6E9AC9; }
.map .ls { font-size: 26px; font-weight: 700; letter-spacing: 9px; fill: #C3CBD6; }
.map .lpoi { font-size: 12px; font-weight: 600; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.map .stn circle { fill: #fff; stroke: #7F8C9D; stroke-width: 2; }
.map .stn path { fill: none; stroke: #5D6B7D; stroke-width: 1.6; stroke-linecap: round; }
.map .shield rect { fill: #F3D46A; stroke: #B79A2E; stroke-width: 1; }
.map .shield text { font-size: 11px; font-weight: 800; fill: #3C3418; }
.map-top .route-casing { fill: none; stroke: #2551C4; stroke-width: 15; stroke-linecap: round; stroke-linejoin: round; }
.map-top .route { fill: none; stroke: #4A7FF2; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.map .clutter { opacity: 0; transition: opacity .45s var(--ease); }
.map .clutter.on { opacity: 1; }
.map #clutter-traffic path { fill: none; stroke-width: 4.5; stroke-linecap: round; }
.map-top .stop { opacity: 0; transition: opacity .35s var(--ease); }
.map-top .stop.on { opacity: 1; }
.map-top .detour { fill: none; stroke: #4A7FF2; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 1.5px #2551C4); }
.map-top .waypoint circle { fill: #fff; stroke: var(--blue); stroke-width: 4; }
.map-top .waypoint .in { fill: var(--blue); stroke: none; }
.map-top .lwp { font-size: 14px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.map-top .origin circle { fill: #fff; stroke: #4B5563; stroke-width: 3.5; }
.map-top .dest path { fill: var(--blue); stroke: #fff; stroke-width: 2.5; }
.map-top .dest .in { fill: #fff; }

.car { position: absolute; left: 0; top: 0; width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem; will-change: transform; filter: drop-shadow(0 3px 6px rgba(23, 40, 62, .25)); }
.car svg { width: 100%; height: 100%; }
.car-disc { fill: #fff; }
.car-arrow { fill: var(--blue); stroke: #fff; stroke-width: 1.5; stroke-linejoin: round; }

/* ---------- header: a floating white bar, like the app's search field ---------- */
.bar { position: fixed; z-index: 10; top: var(--gx); left: var(--gx); right: var(--gx); display: flex; align-items: center; justify-content: space-between; gap: .75rem; pointer-events: none; transition: transform .3s var(--ease); }
.brand { pointer-events: auto; display: flex; align-items: center; min-height: 3rem; padding: .5rem .875rem .5rem .5rem; background: #fff; border-radius: 14px; box-shadow: var(--shadow); }
.brand .lockup { height: 2rem; width: auto; }
.brand .mark { display: none; height: 2rem; width: 2rem; }
#bar-cta { pointer-events: auto; min-height: 3rem; box-shadow: var(--shadow); white-space: nowrap; }
/* One primary action per view: with scripts on, the header button starts fully hidden and only fades in (solid) once
   the hero's button has left the screen (app.js adds .is-shown), so it is never seen half-faded on load. Without
   scripts it simply stays visible. */
#bar-cta { transition: opacity .18s var(--ease), visibility 0s linear .18s, background-color .15s; }
.js #bar-cta:not(.is-shown) { opacity: 0; visibility: hidden; }
#bar-cta.is-shown { transition: opacity .18s var(--ease), visibility 0s, background-color .15s; }

/* ---------- guidance card (HUD) ---------- */
.hud { position: fixed; z-index: 6; left: var(--gx); right: var(--gx); top: calc(var(--gx) + 3.5rem); margin: 0 auto; max-width: 30rem; color: #fff; background: var(--guidance); border-radius: 18px; overflow: hidden; box-shadow: 0 10px 28px rgba(13, 59, 167, .28); transition: opacity .3s var(--ease), visibility .3s, transform .3s var(--ease); }
.hud [data-part] { position: relative; }
.g-main { display: flex; align-items: center; gap: .875rem; padding: .875rem 1rem; }
.g-icon { flex: none; width: 2.75rem; height: 2.75rem; }
.g-icon path, .g-then-icon path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.g-copy { min-width: 0; }
.g-dist { font: 800 1.875rem/1.05 var(--text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.g-text { font: 600 1.0625rem/1.25 var(--text); margin-top: .125rem; }
.g-lanes { display: flex; justify-content: center; align-items: center; padding: .5rem 1rem; background: rgba(13, 59, 167, .55); border-top: 1px solid rgba(255, 255, 255, .08); }
.g-lanes .lane { width: 2.25rem; height: 2.25rem; padding: 0 .25rem; }
.g-lanes .lane path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: .32; }
.g-lanes .lane.rec path { opacity: 1; stroke-width: 3; }
.g-lanes .sep { width: 1.5px; height: 1.75rem; background: rgba(255, 255, 255, .35); }
.g-then { display: flex; align-items: center; gap: .625rem; padding: .625rem 1rem .75rem; background: var(--deep); font: 600 .9375rem/1.3 var(--text); }
.g-then-icon { flex: none; width: 1.375rem; height: 1.375rem; }
.g-then-text { flex: 1; min-width: 0; }
.g-then-after { flex: none; font-weight: 500; opacity: .8; font-size: .875rem; }
[hidden] { display: none !important; }
.hud.swap .g-main { animation: swap .32s var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.hud [data-part].hl::after { content: ""; position: absolute; inset: 3px; border: 2px solid rgba(255, 255, 255, .9); border-radius: 12px; pointer-events: none; }
.hud.uturn { background: var(--ink); }
.hud.uturn .g-lanes, .hud.uturn .g-then { display: none; }
/* phones: the card folds to one band outside the hero and guidance sections */
.hud.compact .g-lanes, .hud.compact .g-then { display: none; }
.hud.compact .g-main { padding: .625rem .875rem; }
.hud.compact .g-icon { width: 2.125rem; height: 2.125rem; }
.hud.compact .g-dist { font-size: 1.375rem; }
.hud.compact .g-text { font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- trip bar (the app's bottom strip) ---------- */
.trip { position: fixed; z-index: 6; left: var(--gx); right: var(--gx); bottom: var(--gx); margin: 0 auto; max-width: 30rem; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: .75rem; padding: .625rem 1rem; background: #fff; border-radius: 16px; box-shadow: var(--shadow); transition: opacity .3s var(--ease), visibility .3s; }
.trip-time { font: 800 1.375rem/1.1 var(--text); color: var(--green); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.trip-meta { font-size: .875rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trip-delta { position: absolute; right: .875rem; top: 50%; transform: translateY(-50%); font: 700 .875rem/1 var(--text); color: var(--blue); opacity: 0; transition: opacity .3s; }
.trip-delta.show { opacity: 1; }
body.parked .hud, body.parked .trip { opacity: 0; visibility: hidden; }

/* ---------- sections and sheets ---------- */
main { position: relative; z-index: 2; }
.leg { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 46vh var(--gx) 0; }
.leg-hero { min-height: 100vh; min-height: 100svh; padding-top: 18rem; padding-bottom: var(--gx); }
.leg-beta { padding-bottom: 40vh; }
.sheet { position: relative; width: 100%; max-width: 36rem; margin: 0 auto; padding: 1.75rem 1.25rem 1.5rem; background: #fff; border-radius: 24px; box-shadow: var(--shadow); }
.sheet::before { content: ""; position: absolute; top: .5rem; left: 50%; width: 34px; height: 4px; margin-left: -17px; border-radius: 2px; background: var(--handle); }
.sheet > * + * { margin-top: 1rem; }
.sheet > p { color: #2E3E54; }
.lede { font-size: 1.1875rem; line-height: 1.5; color: #2E3E54; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; padding-top: .5rem; }
.meta { font-size: .9375rem; color: var(--muted); }
.hint { display: flex; align-items: flex-start; gap: .5rem; font-size: .875rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 1rem; }
.hint svg { flex: none; width: 1.125rem; height: 1.125rem; margin-top: .125rem; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hint-still { display: none; }
.fine { font-size: .875rem; line-height: 1.5; color: var(--muted) !important; }
.fine a { color: var(--ink); font-weight: 600; }

/* guidance legend */
.parts { list-style: none; margin: 1.25rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.parts li { display: grid; grid-template-columns: 9.5rem 1fr; gap: .25rem 1rem; padding: .875rem 0; border-bottom: 1px solid var(--line); font-size: .9375rem; color: #2E3E54; }
.part-key { font-weight: 700; color: var(--ink); }
.hud-slot:empty { display: none; }
.hud-slot .hud { position: static; margin: 1.25rem 0 0; max-width: none; box-shadow: none; }

/* switches (iOS style) */
.switch { position: relative; flex: none; width: 3.1875rem; height: 1.9375rem; border-radius: 1rem; background: #E3E8EF; transition: background-color .2s var(--ease); }
.switch .thumb { position: absolute; top: 2px; left: 2px; width: calc(1.9375rem - 4px); height: calc(1.9375rem - 4px); border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(23, 40, 62, .2); transition: transform .22s var(--ease); }
[aria-checked="true"] .switch { background: var(--blue); }
[aria-checked="true"] .switch .thumb { transform: translateX(1.25rem); }
.switch-row { display: flex; align-items: center; gap: .875rem; width: 100%; margin-top: 1.25rem !important; padding: .875rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; font: 600 1rem/1.3 var(--text); color: var(--ink); text-align: left; cursor: pointer; }
.switch-row + .fine { margin-top: .625rem; }

/* panels: replicas of app sheets */
.panel { margin-top: 1.25rem !important; border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; }

/* plan a stop */
.plan { background: var(--surface); padding: 1rem 1rem 0; }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.plan-title { font-weight: 800; font-size: 1.125rem; color: var(--ink); letter-spacing: -0.01em; }
.plan-cat { display: inline-flex; align-items: center; gap: .375rem; font-weight: 600; font-size: .9375rem; color: var(--muted); }
.plan-cat svg { width: 1.125rem; height: 1.125rem; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.plan-caution { display: flex; gap: .5rem; margin-top: .875rem; font-size: .875rem; line-height: 1.4; color: #3B4B60; }
.plan-caution svg { flex: none; width: 1.125rem; height: 1.125rem; margin-top: .0625rem; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rail { list-style: none; margin: 1rem 0 0; padding: 0 0 0 1.75rem; position: relative; }
.rail::before { content: ""; position: absolute; left: .5625rem; top: .75rem; bottom: .75rem; width: 3px; border-radius: 2px; background: #BCD0F6; }
.rail li { position: relative; }
.rail-dot { position: absolute; left: -1.75rem; top: .3125rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; border: 3px solid var(--blue); background: #fff; }
.rail-stop .rail-dot { top: 2.3rem; }
.rail-dest .rail-dot { background: var(--blue); }
.rail-name { font-weight: 700; font-size: .9375rem; }
.rail-end { padding: .125rem 0; }
.rail-stop { padding-top: .875rem; }
.rail-from { display: block; font-size: .8125rem; font-weight: 600; color: var(--muted); margin-bottom: .375rem; }
.rail-dest { padding-top: 1rem; }
.stop-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .75rem .875rem 0; transition: border-color .25s, box-shadow .25s; }
.stop-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.stop-name { font-weight: 700; line-height: 1.3; min-width: 0; overflow-wrap: break-word; }
.stop-extra { flex: none; text-align: right; font-weight: 800; font-size: 1.125rem; line-height: 1.1; }
.stop-extra small { display: block; font-size: .75rem; font-weight: 500; color: var(--muted); }
.stop-where { display: block; font-size: .875rem; color: var(--muted); margin-top: .125rem; }
.stop-add { display: flex; align-items: center; gap: .5rem; width: 100%; margin-top: .625rem; padding: .625rem 0 .75rem; border: 0; border-top: 1px solid var(--line); background: none; font: 700 .9375rem/1.2 var(--text); color: var(--blue); cursor: pointer; text-align: left; }
.stop-add svg { width: 1.25rem; height: 1.25rem; flex: none; }
.stop-add svg path, .stop-add svg circle { fill: none; stroke: var(--blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.stop-add .i-check { display: none; }
.stop-add .add-hint { display: none; font-weight: 500; color: var(--muted); margin-left: auto; }
.stop-add[aria-pressed="true"] .i-plus { display: none; }
.stop-add[aria-pressed="true"] .i-check { display: block; }
.stop-add[aria-pressed="true"] .i-check circle { fill: var(--blue); }
.stop-add[aria-pressed="true"] .i-check path { stroke: #fff; }
.stop-add[aria-pressed="true"] .add-hint { display: inline; }
.rail-stop.chosen .stop-card { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.stop-add.pressing { animation: press .3s var(--ease); }
@keyframes press { 40% { transform: scale(.97); opacity: .7; } }
.plan-foot { margin: 1rem -1rem 0; padding: .75rem 1rem .875rem; font-size: .8125rem; color: var(--muted); border-top: 1px solid var(--line); background: #fff; }

/* traffic cameras row (one drawn still) */
.cam-thumb { flex: none; width: 5.25rem; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #CCD6E2; }
.cam-thumb svg { width: 100%; height: 100%; }

/* home sheet */
.home { padding: 1rem; }
.home-head { display: flex; align-items: baseline; justify-content: space-between; }
.home-title { font: 800 1.375rem/1.2 var(--text); letter-spacing: -0.02em; }
.home-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; margin-top: .875rem; }
.home-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; font: 700 1rem/1.2 var(--text); color: var(--ink); cursor: pointer; transition: background-color .15s, transform .15s var(--ease); }
.home-btn:hover { background: #E9EEF5; }
.home-btn:active { transform: scale(.98); }
.home-cams { display: flex; align-items: center; gap: .875rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.home-cams-name { display: block; font-weight: 700; }
.home-cams-sub { display: block; font-size: .875rem; line-height: 1.4; color: var(--muted); }
.home-btn svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.opts { margin-top: 1rem; border-top: 1px solid var(--line); }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: .75rem 0; border: 0; border-bottom: 1px solid var(--line); background: none; font: 600 1rem/1.3 var(--text); color: var(--ink); text-align: left; cursor: pointer; }
.opts-summary { margin-top: .75rem; font-size: .875rem; color: var(--muted); }

/* beta sign-up form (the car arrives here) */
#beta-sheet { scroll-margin-top: 6rem; }
.signup { display: grid; gap: 1.125rem; margin-top: 1.5rem !important; }
.seg-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.field-label { display: block; margin: 0 0 .4375rem; padding: 0; font: 700 .9375rem/1.3 var(--text); color: var(--ink); }
.opt-tag { font-weight: 500; color: var(--muted); }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; }
.seg label { position: relative; display: block; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .25rem .5rem; border-radius: 10px; font: 700 1rem/1.2 var(--text); color: var(--muted); transition: background-color .15s, color .15s, box-shadow .15s; }
.seg input:checked + span { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(23, 40, 62, .10), 0 2px 6px rgba(23, 40, 62, .08); }
.seg input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 1px; }
.seg-note { margin-top: .5rem; font-size: .875rem; color: var(--muted); }
.field input { display: block; width: 100%; min-height: 3.25rem; padding: .625rem 1rem; border: 1px solid #CBD4DF; border-radius: 12px; background: #fff; font: 500 1.0625rem/1.3 var(--text); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.field input:hover { border-color: #AEB9C7; }
.field input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(23, 94, 234, .2); }
.field input[aria-invalid="true"] { border-color: var(--danger); }
.field-err { margin-top: .4375rem; font-size: .875rem; font-weight: 600; color: var(--danger); }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
#beta-cta { width: 100%; }
#beta-cta[aria-busy="true"] { background: var(--guidance); cursor: progress; }
#beta-cta[aria-disabled="true"]:active { transform: none; }
.form-msg { padding: .75rem 1rem; border-radius: 12px; background: #FBEEEE; color: var(--danger); font-size: .9375rem; font-weight: 600; line-height: 1.4; }
.notice { font-size: .875rem; line-height: 1.5; color: var(--muted); }
.notice a, .textlink-quiet { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
.signup-done { display: flex; gap: .875rem; align-items: flex-start; margin-top: 1.5rem !important; padding: 1.125rem 1.125rem 1.25rem; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.signup-done:focus { outline: none; }
.signup-done svg { flex: none; width: 2rem; height: 2rem; }
.signup-done svg circle { fill: var(--blue); }
.signup-done svg path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.signup-done h3 { font-size: 1.125rem; }
.signup-done p { margin-top: .25rem; color: #2E3E54; overflow-wrap: anywhere; }
.linkbtn { margin-top: .625rem; padding: 0; border: 0; background: none; font: 600 .9375rem/1.4 var(--text); cursor: pointer; }

/* privacy 2x2 with hairlines */
.grid2 { display: grid; grid-template-columns: 1fr; margin-top: 1.25rem !important; border-top: 1px solid var(--line); }
.grid2 > div { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.grid2 p { margin-top: .25rem; font-size: .9375rem; color: #2E3E54; }

/* ---------- the parked sheet: real screenshots, Google vs us, FAQ, footer ---------- */
.end { position: relative; background: #fff; border-radius: 28px 28px 0 0; box-shadow: 0 -10px 30px rgba(23, 40, 62, .08); }
.end::before { content: ""; position: absolute; top: .625rem; left: 50%; width: 34px; height: 4px; margin-left: -17px; border-radius: 2px; background: var(--handle); }
.end-inner { max-width: 70rem; margin: 0 auto; padding: 3.5rem 1.25rem 2rem; }
.end-inner > * + * { margin-top: 4.5rem; }
.real-sub { margin-top: .75rem; max-width: 40rem; color: #2E3E54; }
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-top: 2rem; }
.shots figure { margin: 0; }
/* Lenis leaves sideways swipes on the phone carousel to the browser (data-lenis-prevent-horizontal) but still smooths
   vertical scrolling over it. Its CSS contains overscroll on both axes; only sideways should stop at the strip
   (no back-swipe), so a vertical swipe that starts on a screenshot still scrolls the page. */
.lenis .shots { overscroll-behavior-x: contain; overscroll-behavior-y: auto; }
.shots img { width: 100%; height: auto; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
.shots figcaption { margin-top: .625rem; font-size: .875rem; color: var(--muted); }
.split-cols { display: grid; grid-template-columns: 1fr; margin-top: 1.5rem; border-top: 1px solid var(--line); }
.split-cols > div { padding: 1.25rem 0; }
.split-cols > div + div { border-top: 1px solid var(--line); }
.split-cols h3 { color: var(--blue); font-size: .9375rem; }
.split-cols ul { list-style: none; margin: .5rem 0 0; padding: 0; }
.split-cols li { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.split-cols li:last-child { border-bottom: 0; }
.faq-list { margin-top: 1.5rem; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.125rem 0; font-weight: 700; font-size: 1.0625rem; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: .625rem; height: .625rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-3px) rotate(45deg); transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq details p { padding: 0 0 1.25rem; max-width: 44rem; color: #2E3E54; }
.foot { padding-top: 2.5rem; border-top: 1px solid var(--line); }
.foot-top { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.foot-top img { height: 2.5rem; width: auto; }
.foot-tuju { color: var(--muted); font-size: .9375rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-left: auto; }
.foot-links a { color: var(--ink); font-weight: 600; text-decoration: none; }
.foot-links a:hover { color: var(--blue); }
.foot-legal { margin-top: 1.25rem; font-size: .8125rem; color: var(--muted); max-width: 52rem; }
.foot-legal + .foot-legal { margin-top: .5rem; }

/* ---------- reveal ---------- */
/* Only hidden when scripts run (html.js), so the page still reads without JavaScript. */
.js .rise { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: var(--d, 0ms); }
.js .rise.in { opacity: 1; transform: none; }
.no-js .rise { opacity: 1; transform: none; }

/* ---------- tablet ---------- */
@media (min-width: 40em) {
  :root { --gx: 1rem; }
  .sheet { padding: 2rem 2rem 1.75rem; }
  .grid2 { grid-template-columns: 1fr 1fr; }
  .grid2 > div:nth-child(odd) { padding-right: 1.25rem; border-right: 1px solid var(--line); }
  .grid2 > div:nth-child(even) { padding-left: 1.25rem; }
  .split-cols { grid-template-columns: 1fr 1fr; }
  .split-cols > div + div { border-top: 0; border-left: 1px solid var(--line); padding-left: 1.5rem; }
  .end-inner { padding: 4.5rem 2rem 2.5rem; }
  .shots { gap: 1.25rem; }
}

/* ---------- desktop: sheets on the left, the map and car on the right ---------- */
@media (min-width: 64em) {
  :root { --sheet-w: min(33rem, 41vw); --col: calc(2rem + var(--sheet-w)); }
  .leg { padding: 30vh 0 0 2rem; align-items: flex-start; }
  .leg-hero { justify-content: center; padding-top: 6rem; padding-bottom: 4rem; }
  .leg-beta { padding-bottom: 45vh; }
  .sheet { width: var(--sheet-w); max-width: none; margin: 0; padding: 2.25rem 2.25rem 2rem; }
  .hud, .trip { left: calc(var(--col) + (100vw - var(--col) - 27rem) / 2); right: auto; width: 27rem; max-width: none; margin: 0; }
  .hud { top: 5.25rem; }
  .trip { bottom: 1.25rem; }
  .end-inner > .split, .end-inner > .faq { display: grid; grid-template-columns: 22rem 1fr; gap: 2rem; }
  .end-inner > .split .split-cols, .faq-list { margin-top: 0; }
}
@media (min-width: 64em) {
  .brand { transition: padding .25s var(--ease), background-color .25s, box-shadow .25s; }
  body.past-hero .brand { padding: 0; min-height: 0; background: none; box-shadow: none; }
  body.past-hero .brand .lockup { display: none; }
  body.past-hero .brand .mark { display: block; width: 2.5rem; height: 2.5rem; border-radius: 10px; box-shadow: var(--shadow); }
}
@media (min-width: 90em) {
  .leg { padding-left: 3rem; }
  :root { --col: calc(3rem + var(--sheet-w)); }
}

/* phones and tablets: the header slides away while you read, the card moves up into its place */
@media (max-width: 63.99em) {
  body.bar-away .bar { transform: translateY(calc(-100% - 1.5rem)); }
  body.bar-away .hud { transform: translateY(-3.5rem); }
  body.in-hero .trip { opacity: 0; visibility: hidden; }
  body.in-hero:not(.big-text) .hud .g-then { display: none; }
}

/* phones: real screenshots become a swipeable row with the next one peeking */
@media (max-width: 39.99em) {
  .trip { opacity: 0; visibility: hidden; }
  body.in-stops:not(.in-hero) .trip { opacity: 1; visibility: visible; }
  .leg:not(.leg-hero):not(.leg-beta) { padding-bottom: 5rem; }
  .shots { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 68%; overflow-x: auto; scroll-snap-type: x mandatory; margin-left: -1.25rem; margin-right: -1.25rem; padding: 0 1.25rem .5rem; scroll-padding: 0 1.25rem; }
  .shots figure { scroll-snap-align: start; }
  .foot-links { margin-left: 0; }
}

/* very small phones */
@media (max-width: 22em) {
  .parts li { grid-template-columns: 1fr; }
  .brand .lockup { display: none; }
  .brand .mark { display: block; }
}

/* large text (browser text size 150%+): the card and trip strip stop floating */
body.big-text .trip { display: none; }
body.big-text .bar { position: absolute; }
body.big-text .home-cams { flex-wrap: wrap; }
body.big-text .home-cams .cam-thumb { width: 100%; }
body.big-text .brand .lockup { display: none; }
body.big-text .brand .mark { display: block; }
body.big-text .parts li { grid-template-columns: 1fr; }
body.big-text .leg { padding-top: 30vh; }
body.big-text .leg-hero { padding-top: 6rem; }
body.big-text .hud { transform: none !important; }
body.big-text .g-main { flex-direction: column; align-items: flex-start; gap: .5rem; }
body.big-text .g-then { flex-wrap: wrap; }
body.big-text .g-then-text { flex-basis: calc(100% - 2.5rem); }
body.big-text .g-then-after { margin-left: 2rem; }
body.big-text .sheet { padding-left: 1rem; padding-right: 1rem; }
body.big-text .plan { padding: .75rem 0 0; border: 0; background: #fff; }
body.big-text .plan .rail-stop .stop-card { margin-right: 0; }
body.big-text .plan-head { flex-direction: column; align-items: flex-start; }
body.big-text .plan-foot { margin: 1rem 0 0; padding-left: 0; padding-right: 0; }
body.big-text .rail { padding-left: 1.25rem; }
body.big-text .rail::before { left: .3rem; }
body.big-text .rail-dot { left: -1.25rem; width: .875rem; height: .875rem; border-width: 2px; }
body.big-text .stop-card { padding: .625rem .625rem 0; }
body.big-text .stop-top { flex-direction: column; gap: .25rem; }
body.big-text .stop-extra { text-align: left; }
body.big-text .stop-name, body.big-text .g-text, body.big-text h1, body.big-text h2 { overflow-wrap: anywhere; hyphens: auto; }
body.big-text .switch-row { flex-direction: column; align-items: flex-start; }
body.big-text .home-btns { grid-template-columns: 1fr; }
body.big-text .opt { flex-wrap: wrap; }
body.big-text .shots { grid-auto-columns: 85%; }

@media (prefers-reduced-motion: reduce) {
  .js .rise { opacity: 1; transform: none; transition: none; }
  .hud.swap .g-main { animation: none; }
  .map .clutter, .map-top .stop, .switch, .switch .thumb { transition: none; }
  .hint-motion { display: none; }
  .hint-still { display: inline; }
  #bar-cta, #bar-cta.is-shown { transition: background-color .15s; }
}
/* large text: the header button won't fit beside the logo; the hero and form buttons carry the action */
body.big-text #bar-cta { display: none; }

/* ---------- production additions ---------- */
/* Grey text that sits on the light grey surfaces (plan-a-stop panel, segmented control) is a shade darker so it
   keeps 4.5:1 contrast. */
.seg span, .plan .rail-from, .plan-cat, .stop-where, .stop-extra small, .seg-note { color: var(--muted-strong); }
.plan-cat svg { stroke: var(--muted-strong); }
/* Focus and find-in-page never land under the floating header, guidance card or trip strip. */
[id], a, button, input, summary { scroll-margin-top: 8.5rem; scroll-margin-bottom: 5rem; }
@media (min-width: 64em) { [id], a, button, input, summary { scroll-margin-top: 6rem; } }
main:focus, h2[tabindex]:focus, .sheet[tabindex]:focus { outline: none; }
/* Turnstile (only rendered when a site key is configured) */
.ts { min-height: 65px; }
.ts:empty { display: none; }
.form-status { font-size: .9375rem; color: var(--muted); }
.form-status:empty { display: none; }
/* Shown until the sign-up script is running (no JavaScript, or it failed to load), so nobody is stuck. */
.signup-fallback { padding: .75rem 1rem; border-radius: 12px; background: var(--surface); color: var(--ink); font-size: .9375rem; }
html.signup-ready .signup-fallback { display: none; }
.form-msg a { color: inherit; }
/* after signing up, the ask above the panel would repeat the thank-you text */
#beta-sheet.is-done .beta-ask { display: none; }
.shots picture { display: block; }
.foot-links a { padding: .25rem 0; }