:root {
  --bg: #0B0C0E;
  --surface: #121317;
  --card: #16181E;
  --bezel: #050506;
  --fg: #F3F3F1;
  --fg2: #A6A9B0;
  --fg3: #8B8F98;
  --line: rgba(255,255,255,0.08);
  --line2: rgba(255,255,255,0.13);
  --edge: rgba(255,255,255,0.06);
  --signal: #3DDC84;
  --talk: #2FBF71;
  --route: #5AA9FF;
  --warn: #FF8F7A;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --wrap: 1240px;
  --pad: clamp(20px, 4vw, 48px);
  --nav: 72px;
  --section: clamp(88px, 10vw, 140px);
  --topo: url("assets/img/topo.svg");
  color-scheme: dark;
}

html { background: var(--bg); overflow-x: clip; scroll-padding-top: var(--nav); }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
main:focus, section:focus, h1:focus, .form-done:focus { outline: none; }
::selection { background: var(--fg); color: var(--bg); }
[hidden] { display: none !important; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 12px 18px; border-radius: 12px; background: var(--fg); color: var(--bg); font-weight: 600; transition: top 200ms var(--ease); }
.skip:focus { top: 12px; }
.sr-only { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }

.wrap { box-sizing: border-box; max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }

/* Type */
.eyebrow { margin: 0; display: flex; align-items: center; gap: 12px; font: 500 12px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg3); }
.eyebrow .n { color: var(--signal); }
.eyebrow .rule { width: 24px; height: 1px; background: rgba(255,255,255,0.22); }
.display { margin: 0; font-weight: 500; line-height: 0.98; letter-spacing: -0.045em; }
.h1 { font-size: clamp(52px, 7.2vw, 104px); }
.title { font-size: clamp(44px, 5.4vw, 76px); line-height: 1; }
.h2 { margin: 24px 0 0; font-size: clamp(38px, 4.4vw, 60px); line-height: 1.04; font-weight: 500; letter-spacing: -0.038em; }
.lede { margin: 24px 0 0; font-size: 18px; line-height: 1.6; color: var(--fg2); }
.lede + .lede { margin-top: 16px; }

/* Buttons */
.btn { box-sizing: border-box; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 24px; border: 0; border-radius: 999px; font: 600 15px/1 var(--sans); letter-spacing: -0.005em; white-space: nowrap; cursor: pointer; transition: background-color 160ms, transform 160ms var(--ease), translate 600ms var(--ease); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 300ms var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--fg); color: var(--bg); }
.btn-primary:hover { background: #FFFFFF; }
.btn-ghost { padding: 0; background: none; color: var(--fg); font-weight: 500; }
.btn-ghost:hover svg { transform: translateY(2px); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
@media (pointer: coarse) { .btn-sm { height: 44px; } }
.btn-line { background: none; color: var(--fg); box-shadow: inset 0 0 0 1px var(--line2); }
.btn-line:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4); }
button.btn:disabled { opacity: 0.7; cursor: progress; }

/* Nav: clear over the hero, glass once the page leaves the top, and a route-blue progress line along its foot. */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background-color 240ms, box-shadow 240ms; }
.nav.scrolled { background: rgba(11,12,14,0.74); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); box-shadow: 0 1px 0 var(--line); }
.nav-in { height: var(--nav); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; opacity: 0; transition: opacity 400ms; }
.nav-progress i { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(90,169,255,0), var(--route)); transform-origin: 0 50%; transform: scaleX(var(--progress, 0)); }
.home .nav.scrolled .nav-progress { opacity: 1; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.links { display: flex; gap: 32px; font-size: 15px; }
.links a, .nl { color: var(--fg2); transition: color 160ms; }
.links a:hover, .nl:hover, .nl[aria-current] { color: var(--fg); }
.nav-end { display: flex; align-items: center; gap: 20px; font-size: 15px; }
.menu { display: none; position: relative; }
.menu summary { width: 44px; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; list-style: none; cursor: pointer; border-radius: 999px; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary span { width: 18px; height: 1.5px; background: var(--fg); transition: transform 240ms var(--ease); }
.menu[open] summary span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu[open] summary span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.menu nav { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; padding: 8px; display: flex; flex-direction: column; border-radius: 18px; background: #16171C; box-shadow: 0 0 0 1px var(--line2), 0 24px 60px rgba(0,0,0,0.5); }
.menu nav a { padding: 12px 14px; border-radius: 10px; color: var(--fg2); font-size: 16px; }
.menu nav a:hover { background: rgba(255,255,255,0.05); color: var(--fg); }
.menu-sep { height: 1px; margin: 6px 14px; background: var(--line); }
@media (max-width: 860px) {
  .links, .nav-end .nl { display: none; }
  .menu { display: block; }
  .nav-end { gap: 8px; }
}

/* Hero. The photo and its overlay share one box sized like object-fit: cover, so the driver markers stay
   on their cars at every viewport (--fx is the horizontal focus). --out (0 → 1 as the hero scrolls away) drives the
   parallax. */
.hero { --fx: 70%; position: relative; isolation: isolate; min-height: max(640px, 100svh); display: flex; flex-direction: column; justify-content: flex-start; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: -1; container-type: size; overflow: hidden; transform: translate3d(0, calc(var(--out, 0) * 16%), 0) scale(calc(1 + var(--out, 0) * 0.05)); }
.hero-scene { position: absolute; left: var(--fx); top: 60%; width: max(100cqw, 150cqh); aspect-ratio: 1536 / 1024; translate: calc(var(--fx) * -1) -60%; }
.hero-scene img { width: 100%; height: 100%; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,12,14,0.55) 0%, rgba(11,12,14,0) 14%, rgba(11,12,14,0) 86%, var(--bg) 100%), radial-gradient(120% 90% at 0% 0%, rgba(11,12,14,0.85) 0%, rgba(11,12,14,0.5) 38%, rgba(11,12,14,0) 68%); }
.marker { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translate(-50%, -100%); transform-origin: 50% 100%; filter: drop-shadow(0 3px 8px rgba(0,0,0,0.6)); }
.marker .tag { padding: 2px 9px; border-radius: 9px; background: rgba(22,22,26,0.92); box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.22); font-size: 12px; font-weight: 500; line-height: 16px; white-space: nowrap; }
.marker .pin { position: relative; width: 36px; height: 36px; margin-bottom: 6px; }
.marker .pin::after { content: ""; position: absolute; left: 50%; bottom: -6px; translate: -50% 0; border: 5px solid transparent; border-top: 7px solid #2D2D34; border-bottom: 0; }
.avatar, .av { box-sizing: border-box; display: grid; place-items: center; border-radius: 50%; background: var(--c); color: var(--ink, #111); font: 600 13px/1 var(--sans); }
.marker .avatar { width: 36px; height: 36px; border: 3px solid #2D2D34; box-shadow: 0 0 0 1px rgba(255,255,255,0.28); }
.marker.talk .avatar { border-color: var(--talk); box-shadow: 0 0 0 1px rgba(255,255,255,0.28), 0 0 18px rgba(47,191,113,0.55); }
.marker.talk .pin::after { border-top-color: var(--talk); }
.marker.talk .pin::before, .av.talk::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid rgba(47,191,113,0.7); animation: ping 2.2s ease-out infinite; }
.bubble { position: absolute; left: 53%; top: 23%; display: grid; gap: 6px; padding: 12px 16px 13px; border-radius: 16px 16px 4px 16px; background: rgba(22,24,30,0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 0 1px rgba(255,255,255,0.1), 0 18px 40px rgba(0,0,0,0.5); white-space: nowrap; }
.bubble .who { display: flex; align-items: center; gap: 8px; font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c, #F5B942); }
.bubble .said { font-size: 17px; font-weight: 500; line-height: 1.25; letter-spacing: -0.01em; }
.bars { display: inline-flex; align-items: center; gap: 2px; height: 12px; }
.bars i { width: 3px; height: 100%; border-radius: 2px; background: var(--talk); animation: eq 800ms ease-in-out infinite alternate; }
.bars i:nth-child(2) { animation-duration: 620ms; animation-delay: -200ms; }
.bars i:nth-child(3) { animation-duration: 940ms; animation-delay: -500ms; }
.bars i:nth-child(4) { animation-duration: 700ms; animation-delay: -350ms; }
.bars i:nth-child(5) { animation-duration: 860ms; animation-delay: -120ms; }
.hero .bubble { left: auto; top: auto; right: 67%; bottom: 25%; }
.hero-copy { width: 100%; padding-top: calc(var(--nav) + 96px); padding-bottom: clamp(64px, 8vw, 104px); transform: translate3d(0, calc(var(--out, 0) * -60px), 0); opacity: calc(1 - var(--out, 0) * 1.4); }
.hero-copy > div { max-width: 660px; }
.lines .line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.lines .line > span { display: inline-block; }
.hero-sub { margin: 26px 0 0; max-width: 30em; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: rgba(243,243,241,0.8); }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 38px; }
@media (min-width: 761px) and (max-aspect-ratio: 1/1) { .hero { --fx: 90%; } }
@media (max-width: 760px) {
  .hero { --fx: 34%; }
  .hero-copy { padding-bottom: 40px; }
  .ctas .btn-ghost { display: none; }
  .hero .bubble, .marker.m-hide { display: none; }
  .marker { scale: 0.85; }
}

/* Section index under the hero */
.index { display: flex; flex-wrap: wrap; gap: 0 24px; }
.index a { flex: 1 1 150px; display: flex; flex-direction: column; gap: 6px; padding: 24px 0 8px; border-top: 1px solid var(--line2); transition: border-color 200ms; }
.index a:hover { border-top-color: rgba(255,255,255,0.45); }
.index .n { font: 500 12px/1.3 var(--mono); letter-spacing: 0.08em; color: var(--signal); }
.index .t { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; }
.index .d { font-size: 14px; line-height: 1.5; color: var(--fg3); }

/* The statement lights word by word as it is read. */
.statement { padding: clamp(104px, 13vw, 176px) 0 clamp(88px, 11vw, 144px); }
.statement .big { margin: 0; max-width: 21em; font-size: clamp(30px, 3.7vw, 54px); line-height: 1.16; letter-spacing: -0.032em; color: #8E929B; }
.statement .big strong { font-weight: inherit; color: var(--fg); }

/* Scenes: every panel is a small world, never a bare card. A topographic ground, a light keyed to what it shows,
   and live pieces of the app floating at different depths ([data-depth] parallax). */
.scene { position: relative; isolation: isolate; }
.plinth, .glance-stage, .tile-media { background: var(--surface) var(--topo) 50% 50% / 1400px auto; }
.scene::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(55% 45% at 50% 60%, var(--glow, rgba(90,169,255,0.1)), transparent 72%); }
.scene > .phone { position: relative; z-index: 1; }
.scene-line, .scene-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
.scene-bg { clip-path: inset(0 round 32px); }
.scene-line path { fill: none; stroke: var(--route); stroke-width: 4; stroke-linecap: round; }
.scene-line path.glow { stroke-width: 16; opacity: 0.18; }
.scene .car { fill: var(--c); stroke: var(--bg); stroke-width: 3; }
.float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 16px; background: rgba(24,26,33,0.86); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 0 0 1px rgba(255,255,255,0.1), 0 18px 40px rgba(0,0,0,0.5); white-space: nowrap; }
.float-a { left: -5%; top: 14%; }
.float-b { right: -5%; bottom: 13%; --fd: 520ms; }
/* Around a single phone the floats hang off its edges, overlapping the bezel, never the app's own controls. */
.plinth:not(.pair) .float-a { left: auto; right: calc(50% + var(--ph) - 34px); }
.plinth:not(.pair) .float-b { right: auto; left: calc(50% + var(--ph) - 46px); }
@container (max-width: 560px) {
  .plinth > * { --ph: 120px; }
  .plinth:not(.pair) > .phone { flex-basis: 240px; }
}
.ft { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.ft b { font-size: 14px; font-weight: 500; }
.ft small { font-size: 12px; color: var(--fg3); }
.av { position: relative; flex: none; width: 32px; height: 32px; font-size: 12px; box-shadow: 0 0 0 2px #2D2D34; }
.av.talk { box-shadow: 0 0 0 2px var(--talk), 0 0 14px rgba(47,191,113,0.55); }
.av.dim { opacity: 0.45; filter: saturate(0.5); }
.art { flex: none; width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, #6E56F0, #E2508C); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); }
.float .bars { height: 16px; }
.toast .tick, .sig { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; }
.toast .tick { background: rgba(61,220,132,0.14); color: var(--signal); }
.sig { background: rgba(255,255,255,0.06); color: var(--fg2); }
.tick svg, .sig svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sig .x { stroke: var(--warn); }
.gap { display: flex; flex-direction: column; padding-left: 6px; line-height: 1.2; }
.gap b { font: 500 22px/1.1 var(--mono); letter-spacing: -0.02em; }
.gap small { font-size: 12px; color: var(--fg3); }
.stack { display: flex; }
.stack i { box-sizing: border-box; width: 26px; height: 26px; margin-left: -7px; display: grid; place-items: center; border-radius: 50%; background: var(--c); color: #111; box-shadow: 0 0 0 2px var(--card); font: normal 600 11px/1 var(--sans); }
.stack i:first-child { margin-left: 0; }

.scene-voice { --glow: rgba(47,191,113,0.14); background-position: 18% 30%; }
.rings { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; }
.rings i { position: absolute; left: calc(50% - 190px); top: calc(50% - 190px); width: 380px; height: 380px; border-radius: 50%; border: 1px solid rgba(47,191,113,0.45); opacity: 0; animation: ring 5.4s ease-out infinite; }
.rings i:nth-child(2) { animation-delay: 1.8s; }
.rings i:nth-child(3) { animation-delay: 3.6s; }
.scene-map { --glow: rgba(90,169,255,0.12); background-position: 70% 60%; }
.scene-map .water { fill: #0D1726; }
.scene-map .streets path { fill: none; stroke: rgba(255,255,255,0.05); stroke-width: 9; }
.scene-map .trail { fill: none; stroke: var(--route); stroke-width: 5; stroke-linecap: round; opacity: 0.5; }
.scene-map .lost circle { fill: #F06CB4; opacity: 0.4; }
.scene-map .lost .halo { fill: none; stroke: #F06CB4; stroke-width: 2; opacity: 1; transform-box: fill-box; transform-origin: center; animation: ping 2.6s ease-out infinite; }
.scene-route { --glow: rgba(120,140,255,0.12); background-position: 40% 80%; }
.scene-route .float-a { top: 6%; left: -6%; }
.scene-drives { --glow: rgba(245,185,66,0.1); background-position: 80% 20%; }

/* Phones: real screenshots in a plain bezel. Corner radii are elliptical percentages so they scale with the width. */
.phone { box-sizing: border-box; min-width: 0; padding: 9px; border-radius: 15.4% / 7.1%; background: var(--bezel); box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 30px 80px rgba(0,0,0,0.55); }
.phone img { width: 100%; border-radius: 13.8% / 6.35%; }

.glance { padding-bottom: clamp(96px, 12vw, 160px); }
.glance-stage { --glow: rgba(90,169,255,0.14); box-sizing: border-box; height: clamp(420px, 50vw, 660px); display: flex; justify-content: center; align-items: flex-start; gap: clamp(10px, 3vw, 40px); padding: clamp(36px, 5.5vw, 80px) clamp(12px, 3vw, 40px) 0; border-radius: 32px; border: 1px solid var(--edge); overflow: hidden; }
.glance-stage .phone { flex: 0 1 270px; margin-top: clamp(40px, 6vw, 88px); }
.glance-stage .phone.lead { flex-basis: 320px; margin-top: 0; box-shadow: 0 0 0 1px rgba(255,255,255,0.16), 0 40px 100px rgba(0,0,0,0.6); }
.glance-cap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 48px; margin-top: 28px; }
.glance-cap h2 { margin: 0; font-size: 22px; line-height: 1.3; font-weight: 500; letter-spacing: -0.02em; }
.glance-cap p { margin: 0; max-width: 32em; font-size: 16px; color: var(--fg2); }

/* Feature sections */
.feature { padding: var(--section) 0; border-top: 1px solid rgba(255,255,255,0.07); }
.split { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(48px, 7vw, 104px); }
.copy { flex: 1 1 380px; min-width: 0; max-width: 520px; }
.plinth { --ph: 150px; container-type: inline-size; box-sizing: border-box; flex: 1 1 440px; min-width: 0; display: flex; justify-content: center; align-items: flex-start; gap: clamp(12px, 2vw, 24px); padding: clamp(44px, 6vw, 84px) 20px; border-radius: 32px; border: 1px solid var(--edge); }
.plinth .phone { flex: 0 1 300px; }
.plinth.pair .phone { flex-basis: 250px; padding: 8px; }
.plinth.pair .phone + .phone { margin-top: 64px; }
@media (min-width: 900px) { .flip .plinth { order: -1; } }
@media (max-width: 600px) {
  .float { scale: 0.9; }
  .plinth .float-a, .plinth:not(.pair) .float-a { left: 8px; right: auto; top: 12px; }
  .plinth .float-b, .plinth:not(.pair) .float-b { right: 8px; left: auto; bottom: 12px; }
}

.facts { margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
.facts div { padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.12); }
.facts dt { font: 400 11px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg3); }
.facts dd { margin: 6px 0 0; font-size: clamp(16px, 4.2vw, 19px); font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }

/* CarPlay: the screen tilts up into place as it rises (--p from [data-scrub]). */
.carplay-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 64px; }
.carplay-head > div { flex: 1 1 420px; min-width: 0; max-width: 620px; }
.carplay-head > p { flex: 1 1 340px; min-width: 0; max-width: 30em; margin: 0; font-size: 18px; color: var(--fg2); }
.dash { margin: clamp(48px, 6vw, 72px) 0 0; perspective: 1800px; }
.dash .screen { position: relative; padding: clamp(8px, 1.1vw, 14px); border-radius: clamp(18px, 2.2vw, 30px); background: var(--bezel); box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 40px 120px rgba(0,0,0,0.6); transform-origin: 50% 100%; transform: rotateX(calc((1 - var(--p, 1)) * 26deg)) scale(calc(0.92 + var(--p, 1) * 0.08)); }
.dash .screen::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -60px; height: 90px; z-index: -1; border-radius: 50%; background: rgba(90,169,255,0.16); filter: blur(40px); }
.dash img { width: 100%; border-radius: clamp(10px, 1.2vw, 16px); }
.dash .bubble { left: auto; right: 22%; top: -38px; opacity: var(--p, 1); }
@media (max-width: 600px) { .dash .bubble { display: none; } }
.dash figcaption { margin-top: 18px; font: 12px/1.5 var(--mono); letter-spacing: 0.04em; color: var(--fg3); }
.carplay .facts { margin-top: clamp(48px, 6vw, 64px); gap: 0 clamp(16px, 3vw, 40px); }

/* Drive history cards: each drive drawn with its own road and every car's line. */
.scene-drives { flex-direction: column; align-items: stretch; gap: 14px; padding: clamp(24px, 4vw, 44px); }
.drive { position: relative; z-index: 1; border-radius: 20px; background: var(--card); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 0 1px rgba(255,255,255,0.07), 0 20px 50px rgba(0,0,0,0.45); }
.drive h3 { margin: 0; font-size: 19px; font-weight: 500; line-height: 1.25; letter-spacing: -0.015em; }
.drive p { margin: 2px 0 0; font-size: 14px; color: var(--fg3); }
.drive .draw { fill: none; stroke: var(--c); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.drive .start { fill: var(--bg); stroke: var(--fg); stroke-width: 2.5; }
.drive .end { fill: var(--fg); stroke: var(--bg); stroke-width: 3; }
.drive.big { overflow: hidden; }
.drive-map { position: relative; aspect-ratio: 520 / 240; background: #0F1318 var(--topo) 30% 40% / 900px auto; }
.drive-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.drive-map .water { fill: #0D1A2B; }
.drive-map .river { fill: none; stroke: #0F2236; stroke-width: 3; }
.drive-map .roads path { fill: none; stroke: rgba(255,255,255,0.07); stroke-width: 2; }
.drive .via { fill: var(--bg); stroke: rgba(243,243,241,0.8); stroke-width: 2; }
.drive-map text { font: 500 11px var(--sans); fill: rgba(243,243,241,0.7); }
.drive-tag { position: absolute; left: 14px; top: 12px; padding: 6px 9px; border-radius: 8px; background: rgba(11,12,14,0.6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font: 500 11px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg2); }
.drive-body { padding: 18px 20px 20px; }
.drive-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.drive-stats { margin: 16px 0 0; padding-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-top: 1px solid var(--line); }
.drive-stats dt { font: 400 11px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg3); }
.drive-stats dd { margin: 4px 0 0; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.drive.row { display: flex; align-items: center; gap: 16px; padding: 12px 18px 12px 12px; }
.drive.row:nth-of-type(2) { margin-left: 6%; }
.drive.row:nth-of-type(3) { margin-left: 12%; }
.thumb { flex: none; width: 104px; height: 70px; border-radius: 12px; background: #0F1318 var(--topo) 60% 20% / 600px auto; }
.thumb .draw { stroke-width: 2.5; }
.drive.row h3 { font-size: 16px; }
.drive.row p { font-size: 13px; }
.meta { display: block; margin-top: 6px; font: 12px/1.3 var(--mono); letter-spacing: 0.02em; color: var(--fg2); }

.more .h2 { max-width: 14em; font-size: clamp(34px, 3.6vw, 48px); line-height: 1.08; }
.tiles { margin-top: clamp(40px, 5vw, 56px); display: flex; flex-wrap: wrap; gap: 20px; }
.tile { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; border-radius: 28px; background: var(--surface); border: 1px solid var(--edge); overflow: hidden; }
.tile-media { box-sizing: border-box; height: 360px; display: flex; justify-content: center; align-items: flex-start; padding-top: 36px; overflow: hidden; }
.tile-media.from-bottom { align-items: flex-end; padding-top: 0; }
.tile:nth-child(1) .tile-media { --glow: rgba(245,185,66,0.12); background-position: 10% 70%; }
.tile:nth-child(2) .tile-media { --glow: rgba(240,108,180,0.11); background-position: 55% 15%; }
.tile:nth-child(3) .tile-media { --glow: rgba(59,214,192,0.11); background-position: 90% 45%; }
.tile .phone { flex: 0 0 240px; padding: 7px; box-shadow: 0 0 0 1px rgba(255,255,255,0.13), 0 24px 60px rgba(0,0,0,0.5); }
.tile-float { padding: 8px 14px 8px 10px; }
.edge { position: absolute; z-index: 2; top: 44%; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: rgba(24,26,33,0.9); box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 10px 30px rgba(0,0,0,0.5); font: 500 13px/1 var(--mono); }
.edge .av { width: 26px; height: 26px; font-size: 11px; }
.edge-l { left: -20px; padding-left: 28px; animation: peek 3.6s ease-in-out infinite; }
.edge-r { --peek: -8px; right: -20px; top: 62%; padding-right: 28px; animation: peek 3.6s ease-in-out -1.8s infinite; }
.tile-body { padding: 28px 28px 32px; border-top: 1px solid rgba(255,255,255,0.07); }
.tile h3 { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -0.015em; }
.tile p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--fg2); }

.specs .split { align-items: flex-start; gap: 40px clamp(48px, 7vw, 104px); }
.specs-head { flex: 1 1 280px; min-width: 0; max-width: 380px; }
.specs-head .lede { margin-top: 20px; }
.spec-list { flex: 2 1 560px; min-width: 0; margin: 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.spec-list > div { display: grid; grid-template-columns: minmax(120px, 0.7fr) minmax(0, 1.3fr); gap: 4px 24px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.1); }
.spec-list dt { font-size: 15px; color: var(--fg2); }
.spec-list dd { margin: 0; }
.spec-list b { display: block; font-size: 17px; font-weight: 500; }
.spec-list dd span { display: block; margin-top: 2px; font-size: 15px; color: var(--fg3); }

/* The closing call sits on the dusk ridge: sunset and peaks above, the copy on the dark valley below. */
.cta { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(720px, 64vw, 940px); box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(160px, 18vw, 260px) 0 clamp(96px, 11vw, 144px); text-align: center; }
.cta > .wrap { display: flex; flex-direction: column; align-items: center; text-shadow: 0 2px 30px rgba(0,0,0,0.5); }
.cta-icon { width: 76px; height: 76px; border-radius: 18px; box-shadow: 0 0 0 1px rgba(255,255,255,0.14), 0 20px 60px rgba(0,0,0,0.6); }
.cta .display { margin-top: 32px; font-size: clamp(52px, 6.4vw, 92px); line-height: 1; }
.cta .hero-sub { max-width: 26em; }
.cta .btn { margin-top: 36px; text-shadow: none; }
.fine { margin: 20px 0 0; font: 12px/1.5 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(243,243,241,0.62); }
.horizon { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.horizon img { position: absolute; inset: -10% 0 0; width: 100%; height: 110%; object-fit: cover; object-position: 50% 0; transform: translate3d(0, calc(var(--p, 1) * 8%), 0); }
.horizon::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg) 0%, rgba(11,12,14,0.85) 8%, rgba(11,12,14,0.4) 20%, rgba(11,12,14,0) 34%, rgba(11,12,14,0.3) 50%, rgba(11,12,14,0.78) 76%, var(--bg) 100%); }

/* Footer */
.foot { padding: 56px 0 40px; }
.sub .foot { border-top: 1px solid var(--line); }
.foot-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 48px; }
.foot-brand { flex: 1 1 260px; max-width: 320px; }
.foot-brand .brand img { width: 28px; height: 28px; border-radius: 7px; }
.foot-brand p { margin: 16px 0 0; font-size: 15px; line-height: 1.55; color: var(--fg3); }
.foot-cols { display: flex; flex-wrap: wrap; gap: 40px clamp(40px, 6vw, 96px); }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; font-size: 15px; }
.foot-col a { min-width: 44px; padding: 10px 0; }
.foot-col h2 { margin: 0 0 2px; font: 400 11px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg3); }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--fg3); }

/* Inner pages */
.sub main { padding: calc(var(--nav) + clamp(48px, 7vw, 104px)) 0 clamp(80px, 10vw, 128px); }
.page-head { max-width: 720px; }
.page-head .display { margin-top: 24px; }
.page-head .btn { margin-top: 36px; }

.contact > .wrap { display: flex; flex-wrap: wrap; gap: 48px clamp(48px, 7vw, 112px); }
.contact-intro { flex: 1 1 320px; min-width: 0; max-width: 440px; }
.mail { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.1); }
.mail p { margin: 0; font: 400 11px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg3); }
.mail a { display: inline-block; padding: 7px 0; margin-top: -1px; font-size: 19px; font-weight: 500; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.form, .form-done { box-sizing: border-box; flex: 1.4 1 480px; min-width: 0; padding: clamp(24px, 4vw, 44px); border-radius: 28px; background: var(--surface) var(--topo) 80% 20% / 1400px auto; border: 1px solid var(--edge); }
.form { position: relative; display: flex; flex-direction: column; gap: 28px; }
.field { min-width: 0; margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 10px; }
.field-row { display: flex; flex-wrap: wrap; gap: 28px 20px; }
.field-row .field { flex: 1 1 220px; }
.label { padding: 0; font-size: 15px; font-weight: 500; }
.label em { font-style: normal; font-weight: 400; color: var(--fg3); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.chip { position: relative; display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16); font-size: 15px; color: #D9DADD; cursor: pointer; transition: box-shadow 160ms, background-color 160ms, color 160ms; }
.chip:hover { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.32); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked) { background: var(--fg); color: var(--bg); box-shadow: none; }
.chip:has(input:focus-visible) { outline: 2px solid var(--fg); outline-offset: 3px; }
.input { box-sizing: border-box; width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.12); background: var(--bg); color: var(--fg); font: 16px/1.5 var(--sans); transition: border-color 160ms, box-shadow 160ms; }
.input::placeholder { color: #6F737C; }
.input:focus { outline: none; border-color: rgba(255,255,255,0.45); }
textarea.input { resize: vertical; min-height: 148px; }
.hint { display: none; font-size: 13px; line-height: 1.4; color: var(--warn); }
.tried .input:invalid ~ .hint, .input:user-invalid ~ .hint, .tried .chips:has(:invalid) ~ .hint { display: block; }
.tried .input:invalid, .input:user-invalid { border-color: rgba(255,143,122,0.7); }
.form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.form-err { margin: 0; font-size: 14px; color: var(--warn); }
.trap, .form .cf-turnstile { position: absolute; left: -9999px; }
.form-done { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.form-done .eyebrow { color: var(--signal); }
.form-done h2 { margin: 0; font-size: clamp(32px, 3.4vw, 44px); font-weight: 500; line-height: 1.1; letter-spacing: -0.035em; }

.doc { max-width: calc(720px + 2 * var(--pad)); }
.legal { margin-top: 56px; font-size: 16px; line-height: 1.7; color: var(--fg2); }
.legal h2 { margin: 56px 0 16px; padding-top: 28px; border-top: 1px solid var(--line); font-size: 24px; font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; color: var(--fg); }
.legal h3 { margin: 32px 0 12px; font-size: 18px; font-weight: 500; line-height: 1.3; color: var(--fg); }
.legal p, .legal ul { margin: 0 0 16px; }
.legal ul { padding-left: 22px; }
.legal li { margin-bottom: 10px; }
.legal li::marker { color: var(--fg3); }
.legal strong { font-weight: 500; color: var(--fg); }
.legal a { color: var(--fg); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.3); text-underline-offset: 3px; overflow-wrap: anywhere; }

/* Page transitions: a dark panel wipes across while the next page is fetched and swapped behind it. */
.pt-wipe { position: fixed; top: -10vh; bottom: -10vh; left: -30vw; width: 160vw; z-index: 80; pointer-events: none; background: var(--bg); box-shadow: -1px 0 0 rgba(255,255,255,0.3), -40px 0 80px rgba(0,0,0,0.6); transform: translateX(-110%) skewX(-12deg); }
.pt-wipe span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) skewX(12deg); font-size: clamp(40px, 6vw, 88px); font-weight: 500; line-height: 1; letter-spacing: -0.045em; white-space: nowrap; color: rgba(255,255,255,0.08); }
.pt-bar { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 90; pointer-events: none; background: var(--route); transform-origin: left; transform: scaleX(0); opacity: 0; transition: opacity 0.2s; }
.pt-bar.on { opacity: 1; animation: pt-bar 1.4s var(--ease) both; }

/* Motion. Load: the photo settles, the drivers appear from the last car to the lead, Maya speaks,
   and the headline throttles up line by line. Scroll: headlines throttle up, scenes assemble, routes draw. */
@media (prefers-reduced-motion: no-preference) {
  .hero-scene { animation: settle 2.6s var(--ease) both; }
  .js .marker { opacity: 0; animation: pop 700ms var(--spring) var(--d) forwards; }
  .js .hero .bubble { animation: rise 800ms var(--ease) 2300ms both; }
  .js .lines .line > span { animation: throttle 1300ms var(--ease) both; }
  .js .lines .line:nth-child(2) > span { animation-delay: 110ms; }
  .js .rise { animation: rise 1s var(--ease) both; animation-delay: var(--d, 0ms); }
  .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .kinetic { opacity: 0; transform: translateY(0.3em); font-weight: 250; transition: opacity 700ms var(--ease), transform 1000ms var(--ease), font-weight 1300ms var(--ease); }
  .js .kinetic.in { opacity: 1; transform: none; font-weight: 500; }
  .js .statement .w { opacity: 0.2; transition: opacity 400ms var(--ease); }
  .js .statement .w.on { opacity: 1; }
  .js .scene .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1800ms var(--ease) var(--d, 300ms); }
  .js .scene.in .draw { stroke-dashoffset: 0; }
  .js .scene .float, .js .scene .drive { opacity: 0; transform: translateY(18px) scale(0.97); transition: opacity 800ms var(--ease) var(--fd, 320ms), transform 1000ms var(--ease) var(--fd, 320ms); }
  .js .scene .drive.row { --fd: 520ms; }
  .js .scene .drive.row + .drive.row { --fd: 680ms; }
  .js .scene.in .float, .js .scene.in .drive { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rings, .scene .car, .scene-line .car { display: none; }
  .bars i, .edge, .marker .pin::before, .av.talk::before, .lost .halo { animation: none; }
}
@keyframes settle { from { transform: scale(1.07); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { opacity: 0; transform: translate(-50%, -100%) translateY(10px) scale(0.6); } to { opacity: 1; transform: translate(-50%, -100%); } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes throttle { from { transform: translateY(105%); font-weight: 200; } }
@keyframes ping { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.9); opacity: 0; } }
@keyframes ring { 0% { transform: scale(0.55); opacity: 0; } 15% { opacity: 0.8; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes eq { from { transform: scaleY(0.25); } to { transform: scaleY(1); } }
@keyframes peek { 0%, 100% { translate: 0 0; } 50% { translate: var(--peek, 8px) 0; } }
@keyframes pt-bar { from { transform: scaleX(0); } to { transform: scaleX(0.85); } }