/* ============================================================
   liveride.space — marketing site
   Built on the LiveRide Design System (design-system/ in this repo).
   The DS ships its components as React; this file ports the ones the
   marketing page needs (Panel, Button, Metric, Wordmark, LiveDot,
   MapMarker, SectionHead) to plain CSS so the page stays a static
   document with no React or Babel runtime.
   Token names and values are the DS's own — see ds/tokens/.
   ============================================================ */

/* ── layout ────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--w-content); margin: 0 auto; padding: 0 40px; }
.sec { padding: var(--s-13) 0 0; }
.sec-tight { padding: var(--s-12) 0 0; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
/* display:block kills the inline-baseline descender gap that otherwise pushes
   every glyph a pixel or two off the centre of its tile — the app's .lrg rule. */
svg.lucide { stroke-width: 1.75; display: block; }
.i14 { width: 14px; height: 14px; }
.i18 { width: 18px; height: 18px; }
.i22 { width: 22px; height: 22px; }

/* ── Wordmark ──────────────────────────────────────────────── */
.wm { display: inline-flex; align-items: baseline; gap: .22em; text-decoration: none; border: 0; }
.wm b { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em;
  line-height: 1; white-space: nowrap; color: var(--text-hi); font-weight: var(--fw-regular); }
.wm b .lv { font-weight: var(--fw-light); letter-spacing: .14em; opacity: .8; }
.wm b .rd { font-weight: var(--fw-black);
  text-shadow: 0 0 1px var(--accent), 0 0 12px rgba(255,45,143,.55), 0 0 38px rgba(255,45,143,.28); }
.wm .dom { font-family: var(--font-mono); font-weight: var(--fw-light); letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-faint); font-size: 10px; }

/* ── Button ────────────────────────────────────────────────── */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; height: var(--h-control); padding: 0 22px; border: 1px solid transparent;
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 13.5px;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; text-decoration: none;
  cursor: pointer; overflow: hidden;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: var(--t-control), transform var(--dur-instant) var(--ease-out), filter var(--dur-fast) var(--ease-out); }
.btn:active { transform: translateY(1px); filter: brightness(.9); box-shadow: none; }
.btn-lg { height: var(--h-control-lg); padding: 0 32px; font-size: 15px; letter-spacing: .16em;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.btn-sm { height: var(--h-control-sm); padding: 0 14px; font-size: 11.5px; gap: 6px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }

.btn-primary { background: var(--grad-magenta-fill); color: var(--accent-contrast);
  box-shadow: var(--glow-magenta-sm); }
.btn-primary:hover { box-shadow: var(--glow-magenta); }

.btn-secondary { background: rgba(246,244,250,.03); color: var(--ink-100);
  border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--surface-brand-wash); color: var(--text-hi);
  border-color: var(--line-brand-strong); box-shadow: var(--glow-magenta-sm); }

.btn-cyan { background: var(--grad-cyan-fill); color: var(--accent-2-contrast);
  box-shadow: var(--glow-cyan-sm); }
.btn-cyan:hover { box-shadow: var(--glow-cyan); }

.btn-mint { background: linear-gradient(168deg, var(--acid-mint-300) 0%, var(--acid-mint-500) 100%);
  color: var(--ink-1000); box-shadow: var(--glow-mint); }
.btn-mint:hover { filter: brightness(1.06); }

/* Brushed metal — the "expensive car" cue. Exactly one per page (header). */
.btn-chrome { background: var(--grad-chrome); color: var(--ink-1000);
  border-color: rgba(253,251,255,.5); box-shadow: 0 1px 0 rgba(253,251,255,.55) inset; }
.btn-chrome:hover { box-shadow: 0 0 26px rgba(253,251,255,.30); }

.btn-ghost { background: transparent; color: var(--text-mid); }
.btn-ghost:hover { background: rgba(246,244,250,.055); color: var(--text-hi); }

/* ── Panel ─────────────────────────────────────────────────── */
.panel { --cut: 14px; position: relative; padding: 1px; background: var(--grad-panel);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.panel > .pin { position: relative; height: 100%; background: var(--surface-1); overflow: hidden;
  clip-path: polygon(calc(var(--cut) - 1px) 0, 100% 0, 100% calc(100% - var(--cut) + 1px), calc(100% - var(--cut) + 1px) 100%, 0 100%, 0 calc(var(--cut) - 1px)); }
.panel.mirror { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.panel.mirror > .pin { clip-path: polygon(0 0, calc(100% - var(--cut) + 1px) 0, 100% calc(var(--cut) - 1px), 100% 100%, calc(var(--cut) - 1px) 100%, 0 calc(100% - var(--cut) + 1px)); }
.cut-sm { --cut: 10px; } .cut-lg { --cut: 22px; } .cut-xl { --cut: 34px; }

.panel.t-brand  { background: linear-gradient(158deg, rgba(255,45,143,.55), rgba(255,45,143,.10) 55%, rgba(255,45,143,.34)); }
.panel.t-cyan   { background: linear-gradient(158deg, rgba(35,229,224,.5), rgba(35,229,224,.08) 55%, rgba(35,229,224,.30)); }
.panel.t-live   { background: linear-gradient(158deg, rgba(43,229,139,.5), rgba(43,229,139,.08) 55%, rgba(43,229,139,.28)); }
.panel.t-warn   { background: linear-gradient(158deg, rgba(255,180,61,.5), rgba(255,180,61,.08) 55%, rgba(255,180,61,.28)); }
.panel.t-neutral{ background: linear-gradient(158deg, rgba(246,244,250,.14), rgba(246,244,250,.04)); }

.fill-2 > .pin { background-color: var(--surface-2); }
.fill-3 > .pin { background-color: var(--surface-3); }
.fill-void > .pin { background-color: var(--bg-void); }
/* soft-light is how the DS lays scanlines down; as a plain overlay the 3.5%
   white reads as hard stripes instead of screen texture. */
.tex > .pin { background-image: var(--tex-scanline); background-blend-mode: soft-light; }
.glow-magenta { box-shadow: var(--glow-magenta-sm); }
.glow-cyan { box-shadow: var(--glow-cyan-sm); }

/* corner brackets, in the two corners the chamfer did not cut */
.bk > .pin::before, .bk > .pin::after { content: ""; position: absolute; width: 11px; height: 11px;
  pointer-events: none; border: 0 solid var(--line-strong); }
.bk > .pin::before { top: 7px; right: 7px; border-top-width: 1px; border-right-width: 1px; }
.bk > .pin::after { bottom: 7px; left: 7px; border-bottom-width: 1px; border-left-width: 1px; }
.bk.t-brand > .pin::before, .bk.t-brand > .pin::after { border-color: var(--line-brand-strong); }
.bk.t-cyan  > .pin::before, .bk.t-cyan  > .pin::after { border-color: var(--accent-2); }
.bk.t-live  > .pin::before, .bk.t-live  > .pin::after { border-color: var(--live); }
.bk.t-warn  > .pin::before, .bk.t-warn  > .pin::after { border-color: var(--warn); }

.pad { padding: var(--pad-panel); }
.pad-lg { padding: 26px 24px 28px; }
.pad-xl { padding: 40px 36px 44px; }

/* panel header strip */
.phead { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid var(--line-hairline); background: rgba(246,244,250,.02); }
.phead .l { font: var(--type-label); font-size: var(--fs-label-sm);
  letter-spacing: var(--ls-label-wide); text-transform: uppercase; color: var(--text-low); }
.phead .m { font: var(--type-mono); font-size: 11px; color: var(--text-faint); }

/* ── micro type ────────────────────────────────────────────── */
.label { font: var(--type-label); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-low); }
.label-wide { font: var(--type-label); font-size: var(--fs-label-sm);
  letter-spacing: var(--ls-label-wide); text-transform: uppercase; color: var(--text-faint); }

/* eyebrow: a short rule then a wide-tracked micro label */
.eyebrow { display: flex; align-items: center; gap: 12px; }
.eyebrow i { display: block; width: 34px; height: 1px; background: var(--accent-2); font-style: normal; }
.eyebrow span { font: var(--type-label); font-size: 10px; letter-spacing: var(--ls-label-wide);
  text-transform: uppercase; color: var(--text-cyan); }
.eyebrow.brand i { background: var(--accent); box-shadow: var(--glow-magenta-sm); width: 46px; }
.eyebrow.brand span { color: var(--text-brand); }

.sechead { display: flex; flex-direction: column; gap: 16px; max-width: 620px; }
.sechead h2 { font: var(--type-display-3); color: var(--text-hi); }
.sechead p { font: var(--type-body-lg); font-size: 17px; color: var(--text-mid); }

/* ── Metric ────────────────────────────────────────────────── */
.metric { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.metric .ml { display: inline-flex; align-items: center; gap: 5px; font: var(--type-label);
  font-size: 10px; letter-spacing: var(--ls-label-wide); text-transform: uppercase; color: var(--text-faint); }
.metric .mv { display: inline-flex; align-items: baseline; gap: 6px; }
.metric .mv b { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium); font-size: var(--fs-metric); line-height: 1;
  letter-spacing: -.01em; color: var(--text-hi); }
.metric .mv u { font-family: var(--font-ui); font-size: 11.5px; font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-low);
  text-decoration: none; }
.metric.brand .mv b { color: var(--neon-magenta-400); }
.metric.cyan  .mv b { color: var(--neon-cyan-400); }
.metric.live  .mv b { color: var(--acid-mint-300); }
.metric.warn  .mv b { color: var(--sun-amber-500); }
.metric.lg .mv b { font-size: var(--fs-metric-lg); }

/* ── LiveDot ───────────────────────────────────────────────── */
.livedot { display: inline-flex; align-items: center; gap: 8px; font: var(--type-label);
  font-size: 10.5px; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-mid); }
.livedot i { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--live);
  box-shadow: var(--glow-mint); }
/* Every number is mono and tabular — a headcount and a clock that rewrite
   themselves every five seconds most of all. The words around the figure stay
   in the UI face; only the figure changes voice. */
.livedot .num, .label-wide .num { font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
  font-weight: var(--fw-medium); letter-spacing: var(--ls-mono); color: var(--text-hi); }
.label-wide .num { color: var(--text-low); }

/* ── Tag ───────────────────────────────────────────────────── */
.tag { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px;
  background: rgba(246,244,250,.04); border: 1px solid var(--line-hairline); color: var(--text-mid);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.tag b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12.5px;
  font-weight: var(--fw-medium); color: var(--text-hi); }
/* 10px is the DS's hard label floor (readme 4.3) — below it --text-faint is
   not allowed either, so a smaller tag would have cost two rules, not one. */
.tag u { font: var(--type-label); font-size: var(--fs-label-sm); letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--text-faint); text-decoration: none; }
.tag.live { border-color: var(--line-mint); color: var(--text-live); }
.tag.warn { border-color: rgba(255,180,61,.42); color: var(--text-warn); }

/* ── Badge ─────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px;
  font: var(--type-label); font-size: var(--fs-label-sm); letter-spacing: var(--ls-label-wide);
  text-transform: uppercase;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
.badge.brand { background: var(--surface-brand-wash); border: 1px solid var(--line-brand); color: var(--text-brand); }
.badge.cyan  { background: var(--surface-cyan-wash);  border: 1px solid var(--line-cyan);  color: var(--text-cyan); }
.badge.warn  { background: rgba(255,180,61,.09); border: 1px solid rgba(255,180,61,.42); color: var(--text-warn); }

/* chamfered glyph tile — feature icons, install headers */
.gtile { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border: 1px solid var(--line-strong); background: rgba(246,244,250,.04); color: var(--text-mid);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.gtile.brand { border-color: var(--line-brand); background: var(--surface-brand-wash); color: var(--text-brand); }
.gtile.cyan  { border-color: var(--line-cyan);  background: var(--surface-cyan-wash);  color: var(--text-cyan); }
.gtile.live  { border-color: var(--line-mint);  background: rgba(43,229,139,.09);      color: var(--text-live); }
.gtile.warn  { border-color: rgba(255,180,61,.42); background: rgba(255,180,61,.09);   color: var(--text-warn); }

/* ── beta strip ────────────────────────────────────────────── */
.betastrip { position: relative; display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 9px 20px; text-align: center;
  background: rgba(255,180,61,.07); border-bottom: 1px solid rgba(255,180,61,.30); }
.betastrip .t { font: var(--type-body-sm); font-size: 12.5px; color: var(--text-mid); }
.betastrip .t b { font-family: var(--font-display); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-warn); }

/* ── header ────────────────────────────────────────────────── */
header.site { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 40px;
  height: 74px; padding: 0 40px; background: transparent; border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
header.site.solid { background: var(--surface-glass); backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass); border-bottom-color: var(--line-hairline); }
header.site nav { display: flex; gap: 28px; flex: 1; }
header.site nav a { position: relative; padding-bottom: 4px; border: 0; text-decoration: none;
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 13px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--text-low);
  transition: color var(--dur-fast) var(--ease-out); }
header.site nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--accent); box-shadow: var(--glow-magenta-sm); opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out); }
header.site nav a:hover { color: var(--text-hi); }
header.site nav a:hover::after { opacity: .5; }

/* ── hero ──────────────────────────────────────────────────── */
/* isolation:isolate is load-bearing — Leaflet gives its own panes z-index 400.
   Without a stacking context here they escape into the root layer and paint
   over the hero copy and the sticky header. */
.hero { position: relative; isolation: isolate; display: flex; align-items: flex-end;
  min-height: 720px; margin-top: -74px; padding-top: 74px; overflow: hidden; }
.hero .mapbox { position: absolute; top: 0; bottom: 0; right: 0; left: 42%; z-index: 0; }
.hero .scrim-l { position: absolute; top: 0; bottom: 0; left: 42%; width: 220px; z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, var(--bg-page) 0%, rgba(8,6,13,.82) 45%, rgba(8,6,13,0) 100%); }
.hero .scrim-a { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, var(--bg-page) 0%, rgba(5,4,9,.94) 34%, rgba(5,4,9,.30) 62%, rgba(5,4,9,.55) 100%); }
.hero .scrim-b { position: absolute; left: 0; right: 0; bottom: 0; height: 180px; z-index: 1;
  pointer-events: none; background: var(--grad-fade-up); }
.hero .inner { position: relative; z-index: 2; width: 100%; max-width: var(--w-content);
  margin: 0 auto; padding: 0 40px 88px; }
.hero h1 { font: var(--type-display-1); font-size: clamp(52px, 7.2vw, 112px); color: var(--text-hi);
  max-width: 900px; letter-spacing: -.02em; margin-top: 26px; }
.hero h1 .hl { color: var(--neon-magenta-400); text-shadow: var(--text-glow-magenta); }
.hero .lede { font: var(--type-body-lg); color: var(--text-mid); max-width: 540px; margin-top: 26px; }
.hero .ctas { display: flex; gap: 12px; margin-top: 34px; align-items: center; flex-wrap: wrap; }
.hero .stats { display: flex; margin-top: 56px; max-width: 780px; }
.hero .stats > div { flex: 1; padding-right: 26px; }
.hero .stats > div + div { padding-left: 26px; border-left: 1px solid var(--line-hairline); }

/* ── map surface ─────────────────────────────────────────────
   Kept 1:1 with the app's map, driver-app/src/mapHtml.js, which is the
   surface a visitor sees again the moment they install. Every value below
   that has a counterpart there is copied from it; the two places this file
   diverges (no light theme, no heading-up rotation) are marked.

   Brightness is deliberately ABOVE the DS's .82. That value is drawn for a
   hero where the map is a backdrop and the route line is the subject; over
   CARTO dark it makes the street network disappear, which is the same
   complaint the app answered by grading to 1.45. A stranger glancing at this
   page for three seconds has less time to find the roads than a driver does,
   not more. Saturation stays at .35 so the neon pins still own the only
   saturated pixels on screen. */
.lrmap { position: absolute; inset: 0; isolation: isolate; background: var(--bg-void); }
.lrmap .leaflet-tile-pane { filter: saturate(.35) brightness(1.45) contrast(1.05); }
.leaflet-container { background: #08060d; font-family: var(--font-ui); }
.leaflet-control-attribution { background: rgba(5,4,9,.6) !important; color: var(--text-faint) !important;
  font: 500 9px/1.7 var(--font-mono) !important; letter-spacing: .02em;
  padding: 0 6px !important; border: 0 !important; box-shadow: none !important; }
.leaflet-control-attribution a { color: var(--text-low) !important; border: 0; }
/* Zoom control is web-only — the app's map has no on-surface controls. */
.leaflet-control-zoom a { background: var(--surface-overlay) !important; color: var(--text-mid) !important;
  border: 1px solid var(--line-hairline) !important; border-radius: 0 !important; }
.leaflet-control-zoom a:hover { color: var(--text-hi) !important; background: var(--surface-hover) !important; }

/* ── route line ──────────────────────────────────────────────
   Three passes, as MapCanvas draws it: ink casing, the magenta line, then a
   pale flow dash running along it. `color` is what currentColor resolves to
   in the drop-shadow — without it the bloom inherits the page's text colour
   and the route glows white. */
.lr-route { color: var(--map-route); filter: drop-shadow(0 0 6px currentColor); }
.lr-route-flow { animation: lr-dash 3.2s linear infinite; }

/* ── vignette ────────────────────────────────────────────────
   Magenta wash off the bottom, violet off the top (violet is a gradient stop
   and nothing else), plus a dark ambient that grounds the copy over the
   tiles. Pulled back to .78 so pins near the edge stay legible — the app's
   value.

   The ambient frame is 16/3.5 CONTAINER-min, not the app's 16/3.5 vmin. Those
   read as the same number and are not: in the app the map IS the viewport, so
   vmin is the map's own short side — 76px of falloff on a 390px-wide phone,
   about 19% in from each edge. Copied literally onto this page, vmin becomes
   the desktop viewport's short side (900px) while the frame it darkens is only
   520px tall, so the same declaration lays 175px of black in from the top and
   the bottom and closes over two thirds of the map. That, not the tile
   brightness, is what made this surface read as too dark. Measuring against
   the container restores the app's proportion at every frame size. vmin stays
   as the fallback for engines without container query units. */
.mapvig { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 120%, rgba(255,45,143,.16), transparent 55%),
              radial-gradient(90% 70% at 50% -10%, rgba(125,77,255,.14), transparent 60%); }
.hero .mapbox, .mapframe { container-type: size; }
.mapvig2 { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 16vmin 3.5vmin rgba(5,4,9,.78);
  box-shadow: inset 0 0 16cqmin 3.5cqmin rgba(5,4,9,.78); }
.mapframe { isolation: isolate; }
/* The live-map card carries only the wash, so the ambient rides on the frame
   itself and the two maps end up with the same two-layer vignette. */
.mapframe::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 16vmin 3.5vmin rgba(5,4,9,.78);
  box-shadow: inset 0 0 16cqmin 3.5cqmin rgba(5,4,9,.78); }

/* ── marker vocabulary · MapMarker.jsx, via the app ──────────
   A chamfered glyph tile on a 1px stem with a rotated-45 diamond tip, an
   optional mono count chip and a pulsing chamfered ring when live. The kind
   IS the colour code — fixed product-wide, never restyled per pin. */
.nomark { background: none; border: 0; }
.lrm { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; --c: var(--map-meet); --cg: rgba(43,229,139,.45); }
.lrm.k-start, .lrm.k-route  { --c: var(--map-route);      --cg: rgba(255,45,143,.42); }
.lrm.k-check, .lrm.k-finish { --c: var(--map-checkpoint); --cg: rgba(35,229,224,.40); }
.lrm.k-trap { --c: var(--map-trap); --cg: rgba(255,180,61,.45); }
.lrm.k-meet { --c: var(--map-meet); --cg: rgba(43,229,139,.45); }
/* The bloom rides on the parent: a box-shadow on the tile itself is clipped
   away with it, because clip-path is applied after the filter. */
.lrm-head { position: relative; display: flex;
  filter: drop-shadow(0 0 1px rgba(5,4,9,.9)) drop-shadow(0 0 7px var(--cg)); }
.lrm-tile { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  background: var(--surface-overlay); border: 1px solid var(--c); color: var(--c);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px); }
.lrm.sm .lrm-tile { width: 28px; height: 28px;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }
.lrm.sel .lrm-tile { background: var(--c); color: var(--ink-1000); }
.lrm.sel .lrm-head { filter: drop-shadow(0 0 1px rgba(5,4,9,.9)) drop-shadow(0 0 13px var(--cg)); }
/* A trap whose all-time record is held: gold is earned — it is place 1 on
   that point's board — but gold and amber are neighbouring hues, so four
   channels move at once instead of the hue alone. The tile FILLS gold, the
   glyph flips to ink, the tile steps up a size (glyph 18 -> 22) and the bloom
   widens. The camera glyph never changes: the glyph is the object, colour
   and fill are the state. */
.lrm.k-trap.rec { --c: var(--rank-gold); --cg: rgba(255,203,92,.55); }
.lrm.rec .lrm-tile { width: 38px; height: 38px; background: var(--c); color: var(--ink-1000);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.lrm.rec .lrm-head { filter: drop-shadow(0 0 1px rgba(5,4,9,.9)) drop-shadow(0 0 15px var(--cg)); }
.lrm.rec .lrm-ring { inset: -8px; }
.lrm-chip { position: absolute; top: -7px; right: -9px; min-width: 20px; height: 17px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--c); color: var(--ink-1000);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  font: 700 10px/1 var(--font-mono); font-style: normal;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.lrm-ring { position: absolute; inset: -7px; border: 1px solid var(--c); opacity: .45;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  animation: lr-pulse 1.6s var(--ease-in-out) infinite; }
.lrm-stem { width: 1px; height: 12px; background: var(--c); opacity: .8; }
.lrm-tip { width: 5px; height: 5px; background: var(--c); transform: rotate(45deg); }

/* ── driver pins ─────────────────────────────────────────────
   Every driver on this map is somebody else, so they all get the app's
   OTHER-driver treatment: the tile unfilled. The filled white tile with the
   ring and the heading chevron is the app's "you", and there is no you here. */
.lrd { position: relative; width: 100%; height: 100%; display: flex;
  align-items: center; justify-content: center; }
.lrd-head { position: relative; display: flex;
  filter: drop-shadow(0 0 1px rgba(5,4,9,.9)) drop-shadow(0 0 10px rgba(255,45,143,.55)); }
.lrd-tile { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  background: var(--map-driver); color: var(--ink-1000); border: 1px solid var(--map-route);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.lrd.other .lrd-head { filter: drop-shadow(0 0 1px rgba(5,4,9,.9)) drop-shadow(0 0 6px rgba(255,45,143,.30)); }
.lrd.other .lrd-tile { width: 26px; height: 26px; background: var(--surface-overlay);
  color: var(--map-driver); border-color: var(--line-brand);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }

/* ── features ──────────────────────────────────────────────── */
.fgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.fcard { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.fcard h3 { font: var(--type-title-3); font-size: 21px; color: var(--text-hi); }
.fcard p { font: var(--type-body); font-size: 14.5px; color: var(--text-low); }

/* ── live section ──────────────────────────────────────────── */
.mapframe { position: relative; height: 520px; }
.legend { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 18px; }
.legend span { display: inline-flex; align-items: center; gap: 8px; font: var(--type-body-sm);
  color: var(--text-low); }
.legend i.sw { display: block; width: 10px; height: 10px; font-style: normal;
  clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px); }
.note { display: flex; gap: 12px; margin-top: 20px; padding: 14px 18px;
  background: var(--surface-cyan-wash); border-left: 2px solid var(--accent-2); }
.note p { font: var(--type-body-sm); color: var(--text-mid); }
.note b { color: var(--text-hi); font-weight: var(--fw-semibold); }

/* ── install ───────────────────────────────────────────────── */
.igrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; align-items: start; }
.icard { display: flex; flex-direction: column; gap: 18px; }
.icard h3 { font: var(--type-title-3); font-size: 22px; color: var(--text-hi); }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: s; }
.steps li { display: flex; gap: 12px; font: var(--type-body-sm); color: var(--text-low); counter-increment: s; }
.steps li::before { content: counter(s, decimal-leading-zero); flex: none;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11px;
  color: var(--text-faint); padding-top: 1px; }
.qr { align-self: flex-start; display: inline-block; padding: 10px; background: var(--ink-50);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.qr img { width: 168px; height: 168px; }
.meta { font: var(--type-mono); font-size: 10.5px; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--text-faint); }

/* ── footer ────────────────────────────────────────────────── */
footer.site { margin-top: var(--s-14); border-top: 1px solid var(--line-hairline); }
footer.site .cols { max-width: var(--w-content); margin: 0 auto;
  padding: 56px 40px 40px; display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
footer.site .col { display: flex; flex-direction: column; gap: 12px; }
footer.site .col a { font: var(--type-body-sm); color: var(--text-low); border: 0; text-decoration: none; }
footer.site .col a:hover { color: var(--text-hi); }
footer.site .base { max-width: var(--w-content); margin: 0 auto; padding: 20px 40px 40px;
  border-top: 1px solid var(--line-hairline); display: flex; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; }
footer.site .base span { font: var(--type-mono); font-size: 10px; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--text-faint); }

/* ── responsive ────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .fgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .wrap, .hero .inner, footer.site .cols, footer.site .base { padding-left: 22px; padding-right: 22px; }
  header.site { gap: 16px; padding: 0 22px; }
  header.site nav { display: none; }
  .hero { min-height: 0; padding-bottom: 8px; }
  .hero .mapbox { left: 0; opacity: .34; }
  .hero .scrim-l { display: none; }
  .hero .scrim-a { background: linear-gradient(180deg, rgba(5,4,9,.90) 0%, rgba(5,4,9,.84) 45%, rgba(5,4,9,.96) 100%); }
  .hero .inner { padding-bottom: 56px; }
  .hero h1 { font-size: 40px; margin-top: 20px; }
  .hero .lede { font-size: 15.5px; margin-top: 20px; }
  .hero .ctas { margin-top: 26px; }
  .hero .stats { margin-top: 40px; }
  .hero .stats { flex-wrap: wrap; gap: 22px 0; }
  .hero .stats > div { flex: 0 0 50%; }
  .hero .stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .igrid { grid-template-columns: 1fr; }
  .mapframe { height: 420px; }
  footer.site .cols { grid-template-columns: 1fr 1fr; }
  .sec { padding-top: var(--s-12); }
}
@media (max-width: 620px) {
  .fgrid { grid-template-columns: 1fr; }
  /* must match the `+ div` selector's specificity to override the divider */
  .hero .stats > div, .hero .stats > div + div { flex: 0 0 100%; padding-left: 0; border-left: 0; }
  footer.site .cols { grid-template-columns: 1fr; }
  .hero .ctas .btn { flex: 1 1 100%; }
}