/* hero.css — the landing page's convoy replay. INDEX ONLY.
   ────────────────────────────────────────────────────────────────────────
   Every rule here styles something that exists on `/` and nowhere else: the
   hero surface and its wash/scrims, the route line, the car pins, the
   read-outs, the legend, and the simulation chip. Verified against the
   markup of all four pages — privacy, terms and finish-sign-in render none
   of these classes, yet privacy and terms were carrying a stale copy of the
   hero tokens anyway.

   Linked ONLY from index.html. If a second page ever grows a hero, link it
   here rather than pasting — the paste is what caused the drift this split
   exists to undo.

   Same warning as base.css: nothing here may move into header.css or
   footer.css, which are synced into the web planner.
*/

:root{--hero-bg:var(--background,#0a0a0c);--hero-hairline:rgba(255,255,255,.12);--hero-img-opacity:.45;--hero-wash:rgba(0,0,0,.45);--hero-scrim-b:linear-gradient(to top,var(--hero-bg),color-mix(in srgb,var(--hero-bg) 30%,transparent),transparent);--hero-scrim-l:linear-gradient(to right,color-mix(in srgb,var(--hero-bg) 70%,transparent),transparent,transparent);--hero-text:#fff;--hero-muted:rgba(255,255,255,.6);--hero-cap:rgba(255,255,255,.7);--hero-dim:rgba(255,255,255,.4);--hero-outline:#fff}
html[data-theme="light"]{--hero-bg:var(--background,#fff);--hero-hairline:rgba(10,10,12,.18);--hero-img-opacity:.85;--hero-wash:rgba(255,255,255,.6);--hero-scrim-b:linear-gradient(to top,color-mix(in srgb,var(--hero-bg) 55%,transparent),color-mix(in srgb,var(--hero-bg) 14%,transparent) 38%,transparent);--hero-scrim-l:linear-gradient(to right,color-mix(in srgb,var(--hero-bg) 72%,transparent),color-mix(in srgb,var(--hero-bg) 8%,transparent) 42%,transparent);--hero-text:#0a0a0c;--hero-muted:rgba(10,10,12,.7);--hero-cap:rgba(10,10,12,.6);--hero-dim:rgba(10,10,12,.4);--hero-outline:#0a0a0c}
.hero{background:var(--hero-bg)}
.hero-img{opacity:var(--hero-img-opacity)}
/* A flat wash over the replay, UNDER the copy. The route and the car pins
   run straight through the sub-headline — in portrait the AF/BD avatars land
   on "live positions, and a" — and the two existing scrims are directional
   gradients that fade out exactly where the line crosses the text (James,
   device, 2026-08-17). 60% white in light, 45% black in dark.
   Sits below the read-outs, the legend and the sim chip, which are z-12 and
   stay crisp; it only mutes the drawing. */
.hero-wash{background:var(--hero-wash)}
.hero-scrim-b{background:var(--hero-scrim-b)}
.hero-scrim-l{background:var(--hero-scrim-l)}
.ld-route-base{stroke:rgba(255,255,255,.18)}
[data-theme="light"] .ld-route-base{stroke:rgba(10,10,12,.42)}
/* Per-car identity as a token, so the pin ring, its initials and the legend
   dot can never drift apart. The dark values are the product's peer colours;
   the light ones are the same hues re-stepped for a WHITE ground - #38BDF8 and
   #86EFAC are chosen to glow on near-black and all but vanish on paper. */
.ld-car-0{--c:#FE8D2A}
.ld-car-1{--c:#38BDF8}
.ld-car-2{--c:#86EFAC}
[data-theme="light"] .ld-car-0{--c:#C25A00}
[data-theme="light"] .ld-car-1{--c:#0369A1}
[data-theme="light"] .ld-car-2{--c:#15803D}
.ld-g0{stop-color:#FE8D2A}
.ld-g1{stop-color:#F73B41}
[data-theme="light"] .ld-g0{stop-color:#E06A00}
[data-theme="light"] .ld-g1{stop-color:#C81C24}
@media(min-width:700px){.ld-stats{grid-template-columns:repeat(4,1fr)!important}}
.ld-hud{position:absolute;top:62px;left:24px;z-index:12;display:flex;gap:8px;font-family:Inter,-apple-system,sans-serif}
.ld-hud .c{padding:6px 11px;border-radius:10px;background:color-mix(in srgb,var(--hero-bg) 72%,transparent);box-shadow:inset 0 0 0 1px var(--hero-hairline);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.ld-hud .k{display:block;font-size:11px;font-weight:700;letter-spacing:-0.01em;color:var(--hero-muted)}
.ld-hud .v{display:block;font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--foreground)}
.ld-hud .v.w{color:#F0E2CC}
[data-theme="light"] .ld-hud .v.w{color:#8A6D3B}
.ld-legend{position:absolute;right:24px;bottom:30px;z-index:12;display:grid;gap:6px;justify-items:end;padding:8px 11px;border-radius:10px;background:color-mix(in srgb,var(--hero-bg) 72%,transparent);box-shadow:inset 0 0 0 1px var(--hero-hairline);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-family:Inter,-apple-system,sans-serif}
.ld-legend .r{display:grid;grid-template-columns:9px 26px 54px;align-items:center;gap:8px;font-size:11.5px;color:var(--hero-muted)}
.ld-legend .r i{width:9px;height:9px;border-radius:999px;display:block}
.ld-legend .r b{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:11px;font-weight:500;text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:760px){.ld-hud,.ld-legend{display:none}}
/* Short viewports - phone landscape, and any desktop window dragged flat.
   The hero's content is taller than `min(100svh,720px)` there, so the section
   grows past its own min-height and the copy starts at y=0, UNDER the fixed
   header. The replay's furniture then lands on top of the headline as well:
   the read-outs and the sim chip are positioned from the hero's top edge,
   which at this height is the same band the headline occupies.
   So below this height the hero stops being a full-bleed stage. It clears the
   header, and the furniture stands down rather than being layered over the
   words. The route itself keeps drawing - `MINBOX` in the replay script
   widens its safe box once the cards it measured against are gone. */
@media (max-height:560px){
 .hero{padding-top:64px}
 .ld-hud,.ld-legend,#ld-hero-sim,.hero-chevron{display:none !important}
}
/* ── The notch / Dynamic Island, in landscape ─────────────────────────────
   The viewport meta carries `viewport-fit=cover`, which is what allows the
   page to paint under the camera housing and the home indicator — and it
   obliges the page to pay that back with `env(safe-area-inset-*)`. Nothing
   here did, so rotating a phone put the Island straight through the nav and
   the headline (James, device, 2026-08-17).

   LEFT and RIGHT are the landscape axis: the Island moves to whichever edge
   the camera ends up on, and iOS reports it on that side, so both are set.

   `max()` keeps the existing 24px gutter as the floor, which means this rule
   changes NOTHING on desktop and in portrait, where the insets are 0. That
   is also why it cannot be eyeballed in a desktop browser — it needs a real
   handset held sideways.

   These three classes are every horizontal gutter on the page: the header
   inner, the footer inner, and the content column each section shares. The
   hero replay needs no rule of its own — `layout()` measures the column's
   own `paddingLeft`/`paddingRight`, so the route's safe box follows this
   automatically, as do the read-outs and legend it positions from there. */
@supports (padding: max(0px)) {
 /* Positioned off the VIEWPORT edge rather than the shared content column, so
    the gutter rule in base.css does not reach it. */
 #ld-hero-sim{right:max(24px,env(safe-area-inset-right))}
}
.hero-eyebrow,.hero-sub{color:var(--hero-muted)}
.hero-caption{color:var(--hero-cap)}
.hero-chevron{color:var(--hero-dim)}
.hero-outline-btn{color:var(--hero-outline)}