/* dalenav.com — one phone, seven scenes, and a contour field drawn as vectors.
   Console tokens mirror src/design/tokens.ts (the app's normative source). */

@font-face{font-family:"Barlow";font-weight:400;font-display:swap;src:url(/fonts/Barlow_400Regular.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:500;font-display:swap;src:url(/fonts/Barlow_500Medium.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:600;font-display:swap;src:url(/fonts/Barlow_600SemiBold.woff2) format("woff2")}
@font-face{font-family:"Barlow";font-weight:700;font-display:swap;src:url(/fonts/Barlow_700Bold.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-display:swap;src:url(/fonts/BarlowCondensed_600SemiBold.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-display:swap;src:url(/fonts/BarlowCondensed_700Bold.woff2) format("woff2")}
@font-face{font-family:"Chivo Mono";font-weight:400;font-display:swap;src:url(/fonts/ChivoMono_400Regular.woff2) format("woff2")}
@font-face{font-family:"Chivo Mono";font-weight:500;font-display:swap;src:url(/fonts/ChivoMono_500Medium.woff2) format("woff2")}
@font-face{font-family:"Chivo Mono";font-weight:700;font-display:swap;src:url(/fonts/ChivoMono_700Bold.woff2) format("woff2")}

:root{
  --ground:#020c3e;--surface:#071349;--raised:#0a1a5c;--overlay:#101f66;
  --line:rgba(255,255,255,.16);--hairline:rgba(255,255,255,.09);
  --ink:#fff;--ink-dim:#aab6e4;--ink-faint:#8b9ad2;
  --on:#fff;--on-dim:#e2e6ff;--on-faint:#c3c8f5;
  --live:#16fae0;--route:#0498fa;--alt:#6b7bb4;--hazard:#fe5a02;--hazard-text:#ff7a33;
  --go:#34d872;--danger:#ff5d5d;--pin:#3b36f7;
  --hazard-wash:rgba(254,90,2,.14);
  --shadow-card:0 6px 14px rgba(1,5,26,.45);--shadow-float:0 3px 8px rgba(1,5,26,.35);
  --r-ctl:12px;--r-md:14px;--r-lg:20px;
  --words:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --caps:"Barlow Condensed","Barlow",system-ui,sans-serif;
  --mono:"Chivo Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --pad:clamp(20px,5vw,64px);--max:1280px;--gut:0px;
  --t1:#0b74bd;--t2:#071a63;--t0:#03103c;--ps:1.16;
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--ground);color-scheme:dark;overflow-x:clip;scroll-behavior:smooth;
  scroll-padding-top:50svh;scrollbar-color:#3a1a7a var(--ground);-webkit-text-size-adjust:100%}
/* No snapping: scrolling is ordinary and free. Sections are laid out a
   screen tall so they still read one at a time, but nothing catches the
   scroll or decides where it should stop. */
body{margin:0;font:400 17px/1.5 var(--words);color:var(--on-dim);letter-spacing:.004em;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:rgba(22,250,224,.35);color:#fff}
:focus-visible{outline:2px solid var(--live);outline-offset:3px;border-radius:6px}
a{color:var(--ink)}
/* bisect switches, see landing.js */
html.off-topo .ground{display:none}
html.off-rail .gutter{display:none}
html.off-tint body{transition:none}
html.off-tint .tint::after{display:none}
html.off-scenes .scene *{animation:none!important}
img{max-width:100%;height:auto}
h1,h2,p,dd,dl{margin:0}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:-9999px;top:0;z-index:60;padding:12px 18px;background:var(--route);color:var(--ground);font-weight:600;border-radius:0 0 var(--r-ctl) 0}
.skip:focus{left:0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad) 0 calc(var(--pad) + var(--gut))}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.micro{font:600 11px/1.3 var(--words);letter-spacing:.11em;text-transform:uppercase;color:#fff}
.display{font:700 clamp(34px,4.2vw,54px)/1 var(--caps);text-transform:uppercase;letter-spacing:.01em;color:var(--on);text-wrap:balance}
.lede{font-size:clamp(17px,1.3vw,20px);line-height:1.5}
.ic{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
.bang{fill:var(--live);stroke:none}

/* ——— the ground: deep navy with the brand's colour blooming from two
       corners along the icon's diagonal, and the contour field drawn over
       it as vectors. Registering the three colours makes the scene change a
       real cross-fade — a plain custom property would snap. */
@property --t0{syntax:"<color>";inherits:true;initial-value:#03103c}
@property --t1{syntax:"<color>";inherits:true;initial-value:#0b74bd}
@property --t2{syntax:"<color>";inherits:true;initial-value:#071a63}
body{transition:--t0 .65s cubic-bezier(.4,0,.2,1),--t1 .65s cubic-bezier(.4,0,.2,1),--t2 .65s cubic-bezier(.4,0,.2,1)}
.tint{position:fixed;inset:0;z-index:-2;background:
  radial-gradient(135% 115% at 92% -10%, var(--t1) 0%, transparent 72%),
  radial-gradient(125% 112% at 2% 106%, var(--t2) 0%, transparent 70%),
  var(--t0)}
.tint::after{content:"";position:absolute;inset:0;background:
  radial-gradient(56% 40% at 50% 50%, rgba(2,7,34,.30), transparent 74%)}
/* three nested layers, each moved by one thing only: scroll (ground),
   pointer (ground-p), and a slow breath (the svg itself). All transforms,
   so the lines are painted once and composited after. */
.ground{position:fixed;inset:0;z-index:-1;pointer-events:none}
.ground canvas{display:block;width:100%;height:100%}

body[data-scene="hero"]    {--t1:#0d86d8;--t2:#061c6e;--t0:#03103f}
body[data-scene="zones"]   {--t1:#0a6fd2;--t2:#101a8a;--t0:#04113f}
body[data-scene="detour"]  {--t1:#1355ce;--t2:#1c18a4;--t0:#050f45}
body[data-scene="voice"]   {--t1:#2440d0;--t2:#3614b4;--t0:#070c4a}
body[data-scene="fuel"]    {--t1:#3c2cd4;--t2:#5510c0;--t0:#0a0950}
body[data-scene="places"]  {--t1:#5620da;--t2:#780ecb;--t0:#0d0757}
body[data-scene="style"]   {--t1:#7216e4;--t2:#9c0cd4;--t0:#10055e}
body[data-scene="close"]   {--t1:#9109ee;--t2:#bb0ada;--t0:#140368}

/* ——— the route rail: the page's scroll, read as a drive down a road.
       JS draws the road path and drops each stop on it (see landing.js);
       everything here is how those pieces look and how they light up. */
.gutter{position:fixed;left:0;top:0;bottom:0;width:var(--gut);z-index:35;pointer-events:none;display:none}
.gutter .road{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gutter .road path{fill:none;stroke-linecap:round;stroke-linejoin:round}
/* The road is grey, and turns cyan behind the puck as it passes — the rail
   reads as progress rather than as a route preview. */
.rd-case{stroke:#030712;stroke-width:11}
.rd-bed{stroke:rgba(255,255,255,.17);stroke-width:6.5}
.rd-done{stroke:var(--live);stroke-width:6.5}

/* A stop on the road: a plain glyph standing beside the line, with a small
   marker left on the line itself. No chip around it — the container was
   fighting the artwork and shrinking it. */
.wp{position:absolute;left:0;top:0;display:flex;align-items:center;gap:12px;padding:0;text-decoration:none;
  color:rgba(255,255,255,.92);transform:translateY(-50%);margin-left:22px;pointer-events:auto;
  --av:rgba(255,255,255,.34)}
/* the mark left on the road, back where the row was anchored */
.wp::before{content:"";position:absolute;left:-22px;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:50%;background:var(--av);box-shadow:0 0 0 2.5px #030712;
  transition:transform .3s cubic-bezier(.16,1,.3,1),background-color .3s ease}
.wp .av{display:block;flex:none;transform:scale(.92);opacity:.66;
  filter:drop-shadow(0 2px 7px rgba(3,7,18,.85));
  transition:transform .32s cubic-bezier(.16,1,.3,1),opacity .3s ease}
.wp .av img{width:42px;height:42px;display:block}
/* The detour glyph is the "point down" hand; a quarter turn anticlockwise
   aims the fingertip along the road instead of at the floor. */
.wp[data-step="detour"] .av img{transform:rotate(-90deg)}
.wp .av svg{width:38px;height:38px;fill:none;stroke:var(--av);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.wp span{font:700 12px/1 var(--caps);text-transform:uppercase;letter-spacing:.12em;white-space:nowrap;
  opacity:0;transform:translateX(-6px);transition:opacity .28s ease,transform .28s ease;text-shadow:0 1px 8px rgba(1,5,26,.95)}
.wp:hover .av,.wp:focus-visible .av{transform:scale(1.04);opacity:1}
.wp:hover span{opacity:1;transform:none}

/* Stops the puck has reached light up with the road behind it. */
.wp.is-done{--av:var(--live)}
.wp.is-done .av{opacity:.9;transform:scale(.92)}
.wp.is-here{--av:var(--live)}
.wp.is-here .av{opacity:1;transform:scale(1.16)}
.wp.is-here::before{transform:scale(1.35)}
.wp.is-here span{opacity:1;transform:none;color:#fff}

/* the start marker is only a dot on the line */
.wp-start .av{display:none}

/* The finish: two flags crossed behind the dot, one mirrored, so they splay
   out either side of the line rather than sitting beside it like a stop. */
.wp-end{--av:#fff;margin-left:0;transform:translate(-50%,-50%)}
.wp-end::before{left:50%;z-index:2}
.wp-end .av{position:relative;display:block;width:72px;height:48px;opacity:1;transform:none;filter:none}
.wp-end .fl{position:absolute;top:50%;left:50%;width:38px;height:38px;z-index:1;opacity:0;
  filter:drop-shadow(0 2px 7px rgba(3,7,18,.85));
  transition:opacity .38s ease,transform .55s cubic-bezier(.16,1,.3,1)}
/* Furled behind the dot until the drive is actually finished. */
.wp-end .fl-r{transform:translate(-50%,-56%) scale(.35) rotate(0deg)}
.wp-end .fl-l{transform:translate(-50%,-56%) scaleX(-1) scale(.35) rotate(0deg)}
/* Same rotation on both; the mirror on the left one is what makes it lean the
   other way, so the pair is symmetric about the line. */
.wp-end.is-finish .fl{opacity:1}
.wp-end.is-finish .fl-r{transform:translate(-4%,-62%) rotate(24deg)}
.wp-end.is-finish .fl-l{transform:translate(-96%,-62%) scaleX(-1) rotate(24deg)}

/* the navigation puck, riding the road: offset-path is set from JS with the
   same `d` the road is drawn from, so it can never drift off the line */
.navpuck{position:absolute;left:0;top:0;width:28px;height:28px;z-index:3;
  display:grid;place-items:center;border-radius:50%;background:var(--live);
  box-shadow:0 2px 10px rgba(3,7,18,.7),0 0 0 2px rgba(3,7,18,.55);
  offset-rotate:auto 90deg;offset-distance:0%;will-change:offset-distance}
.navpuck svg{width:17px;height:17px;fill:var(--ground);stroke:none}
/* Scrolling back up turns the arrow around, the way the app's puck faces the
   direction you are actually travelling. */
.navpuck svg{transition:transform .34s cubic-bezier(.2,.8,.2,1)}
.navpuck.is-back svg{transform:rotate(180deg)}

@media (min-width:1000px){.gutter{display:block}:root{--gut:76px}}
@media (min-width:1360px){:root{--gut:196px}.wp span{opacity:.8;transform:none}}


/* ——— controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;border-radius:var(--r-ctl);font:600 15px/1 var(--words);letter-spacing:.02em;text-decoration:none;border:1px solid transparent;white-space:nowrap;transition:transform .09s ease,filter .15s ease,background-color .15s ease}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:scale(.97)}
/* Go-green, the app's own start-driving colour (tokens.ts `go`), so the one
   action on the page reads the way the Start button does in the product. */
.btn-primary{background:var(--go);color:#04220f;box-shadow:0 2px 14px rgba(52,216,114,.3),var(--shadow-float)}
.btn-primary:hover{background:#46e881}
.btn-ghost{background:rgba(255,255,255,.08);color:var(--on);border-color:var(--line);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:rgba(255,255,255,.15)}
.btn-sm{min-height:40px;padding:8px 15px;font-size:14px}
.btn-lg{min-height:56px;padding:14px 28px;font-size:17px}


/* language: a globe that opens, not a three-way switch */
.lang{position:relative}
.lang summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;height:32px;padding:0 10px;
  border-radius:var(--r-ctl);color:var(--on-dim);border:1px solid rgba(255,255,255,.14);font-size:14px}
.lang summary::-webkit-details-marker{display:none}
.lang summary:hover{background:rgba(255,255,255,.1);color:#fff}
.lang[open] summary{background:rgba(255,255,255,.12);border-color:var(--line);color:#fff}
.lang summary .ic{width:16px;height:16px}
.lang summary b{font-size:11px;letter-spacing:.08em}
/* Opens UPWARD: it lives at the very bottom of the page now, so a menu
   dropping down has nowhere to go and is clipped by the edge. */
.lang-menu{position:absolute;left:0;bottom:calc(100% + 8px);top:auto;min-width:168px;padding:6px;background:rgba(7,15,58,.96);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:0 18px 40px rgba(1,3,20,.5);display:grid;gap:2px}
.lang-menu a{display:block;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--on-dim);font-size:15px;font-weight:500}
.lang-menu a:hover{background:rgba(255,255,255,.09);color:#fff}
.lang-menu a.sel{color:var(--live);font-weight:600}

/* ——— THE REEL: the phone holds still, the copy moves past it */
.reel{position:relative;padding-top:0}
.reel-in{max-width:var(--max);margin:0 auto;padding:0 var(--pad) 0 calc(var(--pad) + var(--gut));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:clamp(24px,4vw,64px);align-items:start}
.reel-copy{min-width:0}
/* Each step is a runway; its content sticks centred inside it and is carried
   away by the next step arriving — pure CSS sticky, no scroll listener.
   `top` is the middle of the area under the masthead (half a viewport plus
   half the masthead), and the transform lifts the box by half its own height,
   which `top` cannot express on its own. */
/* The runway is one viewport PLUS a margin. The extra is what stops the next
   step's copy peeking over the fold: the copy is drawn half its own height
   above its runway's top (the -50% transform below), so without the extra the
   following step is always partly on screen; the margin has to clear half the
   tallest copy. Adding it here rather than as an offset on the copy matters —
   an offset is subtracted from the sticky travel, which is the hold itself,
   and that is what made every step stop holding. */
.step{min-height:calc(100svh + 170px);padding:0;position:relative}
/* The hero is a landing state, not a step you scroll through: it holds no
   turn, hands over to nothing, and so gets neither the sticky hold nor the
   dissolve. It is simply centred, like the comparison and closing sections.
   The margin replaces the runway length it no longer needs, so the step after
   it still begins exactly where it did. */
.step[data-scene="hero"]{min-height:100svh;margin-bottom:236px;
  display:flex;flex-direction:column;justify-content:center}
.step[data-scene="hero"] .step-in{position:static;transform:none;top:auto;
  opacity:1;filter:none;visibility:visible}
.step-in{position:sticky;top:50svh;transform:translateY(-50%);
  display:flex;flex-direction:column;will-change:transform;
  /* `top` parks the box's top edge on the middle of the area under the
     masthead; the transform then lifts it half its own height, which is the
     only way CSS can centre a box of unknown height. Do NOT add a margin to
     move its resting place: a margin is subtracted from the sticky travel,
     and the travel IS the hold. */
  /* Breathing room above and below, so a step being pushed out never crowds
     the one arriving. It sits on the box rather than between the blocks
     because the box is what the two consecutive steps close in on. */
  padding:clamp(26px,6vh,72px) 0}
/* On a short window the copy plus its breathing room is taller than the space
   under the masthead, and centring then tucks its first line behind the bar.
   The padding is the part that can give. */
@media (max-height:780px){.step-in{padding:clamp(12px,2.5vh,26px) 0}}
.step .lockup{width:min(100%,360px);height:auto;display:block}
h1{font:700 clamp(46px,5.6vw,86px)/.9 var(--caps);text-transform:uppercase;letter-spacing:.004em;color:var(--ink);margin:18px 0}
h1 span{display:block}
html[lang="fr"] h1{font-size:clamp(40px,5vw,76px)}
.step .lede{color:#fff;max-width:30ch}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.step h2{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;font:700 clamp(42px,5.4vw,80px)/.92 var(--caps);text-transform:uppercase;letter-spacing:.012em;color:var(--ink);margin-bottom:16px}
.step h2 b{font:500 clamp(14px,1.35vw,18px)/1 var(--mono);letter-spacing:.02em;color:var(--live);border:1px solid rgba(22,250,224,.45);background:rgba(22,250,224,.1);border-radius:999px;padding:6px 12px 5px}
.step p{font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:#fff;max-width:34ch}
.step .note{margin-top:10px;font-size:15.5px;color:var(--on-faint)}
/* Each step shows a real piece of the product rather than a row of pills:
   the actual hours a zone can hold, the sentence you would say, the fuel
   grades the app really carries, the saved-place avatars, and the six map
   themes in their own colours (taken from MAP_PRESETS in the app). */
.spec{margin-top:18px}

/* zones: a day, with the hours the zone is armed lit up */
.hours{display:flex;gap:2px;align-items:flex-end;height:24px;max-width:300px}
.hours i{flex:1;height:9px;border-radius:2px;background:rgba(255,255,255,.16)}
.hours i.on{height:24px;background:var(--hazard);box-shadow:0 0 12px rgba(254,90,2,.5)}
/* Hour marks, so the strip reads as a day rather than as abstract bars. */
.hours-axis{display:flex;justify-content:space-between;max-width:300px;margin-top:5px;
  font:500 10.5px/1 var(--mono);color:var(--on-faint);letter-spacing:.06em}
.spec-cap{margin-top:9px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--on-faint)}
.spec-cap b{color:var(--hazard-text);font-weight:700}

/* voice: the sentence itself, as you would say it */
.say{display:flex;align-items:flex-start;gap:9px;max-width:34ch;padding:11px 13px;
  border-radius:var(--r-md);background:rgba(22,250,224,.07);border:1px solid rgba(22,250,224,.28)}
.say .bang{width:15px;height:15px;margin-top:2px}
.say span{font:500 15px/1.35 var(--words);color:var(--ink)}
.say span::before{content:"«"}
.say span::after{content:"»"}

/* places: places sharing an icon are filed into one group (groupByIcon in
   SavedLocationBar), while the rest stand on their own. The grouped chip
   carries the count and its list opens and closes on a loop, which explains
   the behaviour without needing a caption. */
.pgroup{position:relative;height:168px}
.prow{display:flex;align-items:flex-start;gap:12px}
.pstack{position:relative;line-height:0}
.pchip{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:50px;height:50px;padding:5px;border-radius:50%;background:var(--surface);
  border:2px solid var(--c,var(--route));box-shadow:var(--shadow-float)}
.pchip img{display:block;width:100%;height:100%}
.pchip b{position:absolute;right:-5px;top:-5px;min-width:21px;height:21px;padding:0 5px;
  border-radius:11px;background:var(--c,var(--route));color:var(--ground);
  font:700 12px/21px var(--mono);text-align:center;box-shadow:0 2px 6px rgba(3,7,18,.6)}
.pdrop{position:absolute;left:0;top:62px;width:196px;padding:7px;border-radius:var(--r-md);
  background:rgba(7,15,58,.96);border:1px solid var(--line);box-shadow:0 16px 34px rgba(1,3,20,.5);
  transform-origin:0 0;animation:pdrop 6.5s cubic-bezier(.16,1,.3,1) infinite}
.pdrop i{display:flex;align-items:center;gap:10px;padding:7px}
.pdrop img{width:24px;height:24px;display:block;flex:none}
.pdrop em{font:500 14px/1 var(--words);font-style:normal;color:var(--on-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes pdrop{
  0%,6%   {opacity:0;transform:translateY(-8px) scaleY(.62)}
  16%,54% {opacity:1;transform:none}
  66%,100%{opacity:0;transform:translateY(-8px) scaleY(.62)}}

/* the bang, set inline in a sentence */
.bang.inline{width:.72em;height:.72em;vertical-align:-.02em;margin:0 .1em}

/* style: the six themes, in their own colours */
.themes-key{display:flex;flex-wrap:wrap;gap:7px;max-width:460px}
.themes-key span{display:flex;align-items:center;gap:0;padding:4px 9px 4px 4px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13)}
.themes-key i{width:13px;height:13px;border-radius:50%;margin-right:-5px;
  box-shadow:0 0 0 1.5px rgba(3,7,18,.55)}
.themes-key i:nth-child(3){margin-right:8px}
.themes-key b{font:600 11px/1 var(--words);letter-spacing:.08em;text-transform:uppercase;color:var(--on-dim)}
/* the six built-ins are not the whole set */
.themes-key .more{padding:5px 12px;background:none;border-style:dashed;border-color:rgba(255,255,255,.22)}
.themes-key .more b{color:var(--on-faint);text-transform:none;letter-spacing:.02em;font-style:italic}

.reel-stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}

/* ——— the hero's garage: the car stands where the phone will, and the two
       trade places when the reel leaves the hero. */
.garage{position:absolute;inset:0 -14% 0 -26%;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;z-index:2}
.garage[hidden]{display:none}
.carcv{width:100%;height:min(74vh,560px);display:block;pointer-events:none;
  filter:drop-shadow(0 30px 46px rgba(1,3,20,.55));
  transition:opacity .3s ease,transform .5s cubic-bezier(.16,1,.3,1)}
/* the trade: one car sinks away, the next rises into the same turntable */
.garage.is-swapping .carcv{opacity:0;transform:translateY(20px) scale(.93)}
.gar-load{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;transition:opacity .4s ease}
.gar-load i{width:34px;height:34px;border-radius:50%;border:2.5px solid rgba(22,250,224,.25);border-top-color:var(--live);
  animation:gspin .8s linear infinite}
@keyframes gspin{to{transform:rotate(360deg)}}
.garage.is-ready .gar-load{opacity:0}

/* the trade: hero shows the car, every later step shows the phone */
.phone{transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1)}
body[data-scene="hero"] .phone{opacity:0;transform:translateY(34px) scale(.93);pointer-events:none}
body:not([data-scene="hero"]) .garage{opacity:0;transform:scale(.96);pointer-events:none;
  transition:opacity .45s ease,transform .5s ease}

/* ——— the phone */
.phone{width:320px;height:640px;background:#01051a;border-radius:44px;border:1px solid var(--line);padding:10px;position:relative;zoom:var(--ps);
  box-shadow:0 40px 80px rgba(1,3,20,.55),0 0 0 1px rgba(255,255,255,.05) inset}
.screen{position:relative;width:300px;height:620px;border-radius:34px;overflow:hidden;background:#04123f}
.screen::before{content:"";position:absolute;top:10px;left:50%;width:84px;height:22px;margin-left:-42px;background:#01051a;border-radius:12px;z-index:9}
.scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s ease}
.scene.is-on{opacity:1;visibility:visible}
.map{position:absolute;inset:0;width:100%;height:100%;display:block}

/* map marks */
.route{fill:none;stroke:var(--route);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.here{fill:var(--live);stroke:#fff;stroke-width:2.5}
.zone .zf{fill:var(--hazard);opacity:.18}
.zone .zh{fill:url(#hatch)}
.zone .zs{fill:none;stroke:var(--hazard);stroke-width:2.5;stroke-linejoin:round}
.verts circle{fill:var(--hazard);stroke:#fff;stroke-width:1.8;opacity:0}
.via circle{fill:var(--ground);stroke:var(--hazard);stroke-width:2.5}
.via .pip{fill:var(--hazard);stroke:none}
.traffic path{fill:none;stroke-width:7;stroke-linecap:round;opacity:0}
.flag{position:absolute;left:240px;top:140px;width:34px;height:34px;transform:translate(-50%,-78%);filter:drop-shadow(0 1px 2px rgba(1,5,26,.7))}
.zone-tag{position:absolute;left:160px;top:238px;transform:translate(-50%,-50%) rotate(-6deg);font:700 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--hazard);border:1.4px solid var(--hazard);border-radius:4px;padding:3px 6px;background:rgba(2,12,62,.4);opacity:0}
/* The touch indicator sits above every panel in the phone — a finger that
   disappears behind the search bar or the fuel key reads as a glitch. It
   stays under the notch (z-index 9), which is bezel rather than screen. */
.finger{position:absolute;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;background:rgba(255,255,255,.32);border:1.6px solid rgba(255,255,255,.82);opacity:0;pointer-events:none;z-index:8;will-change:transform,opacity}

/* phone chrome, shared across scenes */
.p-console{position:absolute;left:12px;right:12px;top:44px;height:46px;z-index:6;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-card);display:flex;align-items:center;gap:9px;padding:0 12px;color:var(--ink-faint)}
.p-where,.p-typed{flex:1;font:500 14.5px var(--words);white-space:nowrap;overflow:hidden}
.p-where{color:var(--ink-faint)}
.p-typed{color:var(--ink);display:none}
.p-typed span{opacity:0}
.p-console .bang{width:17px;height:17px}
.p-avatars{position:absolute;left:12px;top:98px;z-index:6;display:flex;gap:8px;opacity:0;transition:opacity .3s ease}
.p-avatars span{width:34px;height:34px;padding:5px;border-radius:50%;background:var(--surface);border:2px solid var(--av);box-shadow:var(--shadow-float)}
.p-avatars img{display:block;width:100%;height:100%}
.p-card{position:absolute;left:12px;right:12px;bottom:14px;z-index:6;background:var(--ground);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-card);padding:13px;opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s ease}
.p-dest{display:flex;gap:8px;align-items:center;font:600 15.5px/1.3 var(--words);color:var(--ink)}
.p-flag{width:19px;height:19px;display:block}
.p-sub{font:500 12.5px/1.3 var(--words);color:var(--ink-dim);margin-top:3px}
.p-go{margin-top:11px;height:44px;border-radius:12px;background:var(--go);color:var(--ground);display:flex;align-items:center;justify-content:center;gap:8px;font:600 15px var(--words)}
.p-min{font:500 14px var(--mono)}

body[data-scene="voice"]  .p-where{display:none}
body[data-scene="voice"]  .p-typed{display:block}
body[data-scene="places"] .p-avatars{opacity:1}
body[data-scene="zones"]  .p-card,
body[data-scene="detour"] .p-card,
body[data-scene="fuel"]   .p-card{opacity:1;transform:none}
body[data-scene="style"]  .p-console{opacity:0}

/* ——— scene: zones (10 s) */
.p-notice{position:absolute;left:12px;right:12px;bottom:138px;z-index:7;display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;background:linear-gradient(var(--hazard-wash),var(--hazard-wash)) var(--ground);border:1px solid var(--hazard);color:var(--ink);font:500 12.5px/1.3 var(--words);opacity:0;transform:translateY(10px)}
.p-notice .ic{width:16px;height:16px;color:var(--hazard-text)}
.p-notice b{margin-left:auto;font:500 13.5px var(--mono);color:var(--hazard-text)}
.scene *{animation-play-state:paused}
.scene.is-on *{animation-play-state:running}
[data-for~="zones"] .r-a{animation:z-a 10s linear infinite both}
[data-for~="zones"] .r-b{animation:z-b 10s linear infinite both}
[data-for~="zones"] .zone,[data-for~="zones"] .zone-tag{animation:z-zone 10s linear infinite both}
[data-for~="zones"] .v1{animation:zv 10s linear infinite both;animation-delay:1.15s}
[data-for~="zones"] .v2{animation:zv 10s linear infinite both;animation-delay:1.75s}
[data-for~="zones"] .v3{animation:zv 10s linear infinite both;animation-delay:2.35s}
[data-for~="zones"] .v4{animation:zv 10s linear infinite both;animation-delay:2.95s}
[data-for~="zones"] .v5{animation:zv 10s linear infinite both;animation-delay:3.55s}
[data-for~="zones"] .finger{animation:z-finger 10s ease-in-out infinite both}
[data-for~="zones"] .p-notice{animation:z-notice 10s ease-out infinite both}
[data-for~="zones"] .traffic path{animation:z-traffic 10s linear infinite both}
@keyframes z-a{0%{stroke-dashoffset:1;opacity:1;stroke:#0498fa}8%{stroke-dashoffset:0}42%{opacity:1;stroke:#0498fa}47%,92%{opacity:.42;stroke:#6b7bb4;stroke-dashoffset:0}96%,100%{opacity:0}}
@keyframes z-b{0%,44%{stroke-dashoffset:1;opacity:1}54%,92%{stroke-dashoffset:0;opacity:1}96%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes z-zone{0%,38%{opacity:0}42%,92%{opacity:1}96%,100%{opacity:0}}
@keyframes zv{0%{opacity:0}0.5%,92%{opacity:1}96%,100%{opacity:0}}
@keyframes z-traffic{0%,56%{opacity:0}62%,92%{opacity:1}96%,100%{opacity:0}}
@keyframes z-notice{0%,50%{opacity:0;transform:translateY(10px)}56%,92%{opacity:1;transform:none}96%,100%{opacity:0;transform:translateY(10px)}}
@keyframes z-finger{
  0%,9%{opacity:0;transform:translate(150px,470px) scale(1)}
  11%{opacity:.55;transform:translate(100px,190px) scale(1)}
  12%{opacity:.95;transform:translate(100px,190px) scale(.7)}
  13.5%{opacity:.55;transform:translate(100px,190px) scale(1)}
  17%{transform:translate(205px,175px) scale(1)}
  18%{opacity:.95;transform:translate(205px,175px) scale(.7)}
  19.5%{opacity:.55;transform:translate(205px,175px) scale(1)}
  23%{transform:translate(225px,265px) scale(1)}
  24%{opacity:.95;transform:translate(225px,265px) scale(.7)}
  25.5%{opacity:.55;transform:translate(225px,265px) scale(1)}
  29%{transform:translate(150px,300px) scale(1)}
  30%{opacity:.95;transform:translate(150px,300px) scale(.7)}
  31.5%{opacity:.55;transform:translate(150px,300px) scale(1)}
  35%{transform:translate(98px,275px) scale(1)}
  36%{opacity:.95;transform:translate(98px,275px) scale(.7)}
  37.5%{opacity:.55;transform:translate(98px,275px) scale(1)}
  41%,100%{opacity:0;transform:translate(150px,470px) scale(1)}
}

/* ——— scene: detour (8 s) */
.pace{position:absolute;left:12px;top:100px;z-index:7;display:flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:14px;background:rgba(3,10,38,.9);border:1px solid var(--line);box-shadow:var(--shadow-float);opacity:0}
.pace .well{width:40px;height:40px;border-radius:10px;background:var(--raised);border:1px solid var(--hairline);display:grid;place-items:center}
.pace .tulip{width:28px;height:28px;stroke:var(--live);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.pace .tulip circle{fill:var(--live);stroke:none}
.pace b{font:700 18px/1 var(--mono);color:var(--ink)}
[data-for~="detour"] .r-a{animation:d-a 8s linear infinite both}
[data-for~="detour"] .r-b{animation:d-b 8s linear infinite both}
[data-for~="detour"] .via{opacity:0;transform-box:fill-box;transform-origin:center;animation:d-via 8s cubic-bezier(.16,1,.3,1) infinite both}
[data-for~="detour"] .finger{animation:d-finger 8s ease-in-out infinite both}
[data-for~="detour"] .pace{animation:d-pace 8s ease-out infinite both}
@keyframes d-a{0%{stroke-dashoffset:1;opacity:1;stroke:#0498fa}10%{stroke-dashoffset:0}26%{opacity:1;stroke:#0498fa}32%,92%{opacity:.42;stroke:#6b7bb4;stroke-dashoffset:0}96%,100%{opacity:0}}
@keyframes d-b{0%,28%{stroke-dashoffset:1;opacity:1}42%,92%{stroke-dashoffset:0;opacity:1}96%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes d-via{0%,22%{opacity:0;transform:scale(.2)}30%,92%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.2)}}
@keyframes d-pace{0%,40%{opacity:0}48%,92%{opacity:1}96%,100%{opacity:0}}
@keyframes d-finger{
  0%,12%{opacity:0;transform:translate(230px,470px) scale(1)}
  15%{opacity:.55;transform:translate(230px,470px) scale(1)}
  22%{opacity:.55;transform:translate(150px,320px) scale(1)}
  24%{opacity:.95;transform:translate(150px,320px) scale(.7)}
  26%{opacity:.55;transform:translate(150px,320px) scale(1)}
  32%{opacity:.55;transform:translate(230px,470px) scale(1)}
  36%,100%{opacity:0;transform:translate(230px,470px) scale(1)}
}

/* ——— scene: voice (9 s) */
.a-pin{position:absolute;left:240px;top:230px;width:38px;height:38px;margin:-19px 0 0 -19px;padding:6px;border-radius:50%;background:var(--raised);border:2px solid var(--live);box-shadow:var(--shadow-float);opacity:0;z-index:5}
.a-pin img{display:block;width:100%;height:100%}
.a-chip{position:absolute;left:12px;top:100px;z-index:7;display:flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:14px;background:rgba(22,250,224,.14);border:1px solid rgba(22,250,224,.5);font:500 12.5px/1 var(--words);color:var(--live);opacity:0;transform-origin:left center}
.a-chip .bang{width:12px;height:12px}
body[data-scene="voice"] .p-typed span{animation:v-word 9s linear infinite both}
body[data-scene="voice"] .p-console .bang{animation:v-bang 9s ease-in-out infinite both;transform-origin:center}
[data-for~="voice"] .r-b{animation:v-route 9s linear infinite both}
[data-for~="voice"] .a-pin{animation:v-pin 9s cubic-bezier(.16,1,.3,1) infinite both}
[data-for~="voice"] .a-chip{animation:v-chip 9s cubic-bezier(.16,1,.3,1) infinite both}
[data-for~="voice"] .finger{animation:v-finger 9s ease-in-out infinite both}
@keyframes v-word{0%{opacity:0}1%,100%{opacity:1}}
@keyframes v-bang{0%,14%{transform:scale(1)}16%,20%,24%,28%,32%{transform:scale(1)}18%,22%,26%,30%{transform:scale(1.4)}34%,100%{transform:scale(1)}}
@keyframes v-route{0%,40%{stroke-dashoffset:1;opacity:1}56%,92%{stroke-dashoffset:0;opacity:1}96%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes v-pin{0%,44%{opacity:0;transform:scale(.3)}52%,92%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.3)}}
@keyframes v-chip{0%,36%{opacity:0;transform:scale(.5)}44%,92%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.5)}}
@keyframes v-finger{
  0%,4%{opacity:0;transform:translate(200px,420px) scale(1)}
  7%{opacity:.55;transform:translate(200px,420px) scale(1)}
  12%{opacity:.55;transform:translate(268px,67px) scale(1)}
  13.5%{opacity:.95;transform:translate(268px,67px) scale(.7)}
  15%,33%{opacity:.55;transform:translate(268px,67px) scale(1)}
  38%{opacity:.55;transform:translate(200px,420px) scale(1)}
  42%,100%{opacity:0;transform:translate(200px,420px) scale(1)}
}

/* ——— scene: fuel (9 s) */
.station{position:absolute;left:105px;top:410px;width:38px;height:38px;margin:-19px 0 0 -19px;padding:6px;border-radius:50%;background:var(--raised);border:2px solid var(--live);box-shadow:var(--shadow-float);opacity:0;z-index:5}
.station img{display:block;width:100%;height:100%}
.fuel-key{position:absolute;right:12px;bottom:140px;width:46px;height:46px;z-index:7}
.fuel-key .face{position:absolute;inset:0;border-radius:12px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ink);box-shadow:var(--shadow-float)}
.fuel-key .face .ic{width:19px;height:19px}
.fuel-key .face small{font:700 8px/1 var(--mono);letter-spacing:.04em;color:var(--ink-dim);margin-top:1px}
.fuel-key .tile{position:absolute;width:48px;height:48px;border-radius:12px;background:var(--ground);border:1px solid var(--line);display:grid;place-items:center;font:700 13px/1 var(--mono);color:var(--ink);opacity:0;box-shadow:var(--shadow-float)}
.fuel-key .tile.top{left:-1px;top:-58px}
.fuel-key .tile.left{left:-58px;top:-1px}
[data-for~="fuel"] .r-a{animation:f-a 9s linear infinite both}
[data-for~="fuel"] .r-b{animation:f-b 9s linear infinite both}
[data-for~="fuel"] .finger{animation:f-finger 9s ease-in-out infinite both}
[data-for~="fuel"] .tile.top{animation:f-tile 9s cubic-bezier(.16,1,.3,1) infinite both}
[data-for~="fuel"] .tile.left{animation:f-tileL 9s cubic-bezier(.16,1,.3,1) infinite both}
[data-for~="fuel"] .station{animation:f-station 9s cubic-bezier(.16,1,.3,1) infinite both}
@keyframes f-a{0%{stroke-dashoffset:1;opacity:1;stroke:#0498fa}9%{stroke-dashoffset:0}40%{opacity:1;stroke:#0498fa}46%,92%{opacity:.42;stroke:#6b7bb4;stroke-dashoffset:0}96%,100%{opacity:0}}
@keyframes f-b{0%,42%{stroke-dashoffset:1;opacity:1}56%,92%{stroke-dashoffset:0;opacity:1}96%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes f-tile{0%,20%{opacity:0;transform:scale(.4)}24%,38%{opacity:1;transform:scale(1)}42%,100%{opacity:0;transform:scale(.4)}}
@keyframes f-tileL{0%,20%{opacity:0;transform:scale(.4);border-color:var(--line);background:var(--ground)}24%,30%{opacity:1;transform:scale(1);border-color:var(--line);background:var(--ground)}34%,38%{opacity:1;transform:scale(1);border-color:var(--live);background:#0a2a5c}42%,100%{opacity:0;transform:scale(.4)}}
@keyframes f-station{0%,42%{opacity:0;transform:scale(.3)}50%,92%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.3)}}
@keyframes f-finger{
  0%,10%{opacity:0;transform:translate(180px,220px) scale(1)}
  13%{opacity:.55;transform:translate(180px,220px) scale(1)}
  19%{opacity:.55;transform:translate(265px,479px) scale(1)}
  21%{opacity:.95;transform:translate(265px,479px) scale(.7)}
  28%{opacity:.95;transform:translate(265px,479px) scale(.7)}
  33%{opacity:.95;transform:translate(214px,479px) scale(.7)}
  38%{opacity:.95;transform:translate(214px,479px) scale(.7)}
  40%{opacity:.55;transform:translate(214px,479px) scale(1)}
  45%,100%{opacity:0;transform:translate(214px,479px) scale(1)}
}

/* ——— scene: places (9 s) */
.spot{position:absolute;width:38px;height:38px;margin:-19px 0 0 -19px;padding:6px;border-radius:50%;background:var(--surface);border:2.5px solid var(--av);box-shadow:var(--shadow-float);opacity:0;z-index:5}
.spot img{display:block;width:100%;height:100%}
.spot.s1{left:105px;top:185px}
.spot.s2{left:205px;top:285px}
.spot.s3{left:105px;top:455px}
.ring{position:absolute;left:0;top:0;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;border:2px solid var(--live);opacity:0;pointer-events:none;z-index:7}
[data-for~="places"] .finger{animation:p-finger 9s ease-in-out infinite both}
[data-for~="places"] .ring{animation:p-ring 9s ease-out infinite both}
[data-for~="places"] .s1{animation:p-s1 9s cubic-bezier(.16,1,.3,1) infinite both}
[data-for~="places"] .s2{animation:p-s2 9s cubic-bezier(.16,1,.3,1) infinite both}
[data-for~="places"] .s3{animation:p-s3 9s cubic-bezier(.16,1,.3,1) infinite both}
[data-for~="places"] .r-b{animation:p-go 9s linear infinite both}
@keyframes p-s1{0%,12%{opacity:0;transform:scale(.3)}17%,92%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.3)}}
@keyframes p-s2{0%,29%{opacity:0;transform:scale(.3)}34%,92%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.3)}}
@keyframes p-s3{0%,46%{opacity:0;transform:scale(.3)}51%,92%{opacity:1;transform:scale(1)}96%,100%{opacity:0;transform:scale(.3)}}
@keyframes p-go{0%,58%{stroke-dashoffset:1;opacity:1}72%,92%{stroke-dashoffset:0;opacity:1}96%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes p-finger{
  0%,3%{opacity:0;transform:translate(105px,185px) scale(1)}
  5%{opacity:.55;transform:translate(105px,185px) scale(1)}
  7%,14%{opacity:.95;transform:translate(105px,185px) scale(.7)}
  16%{opacity:.55;transform:translate(105px,185px) scale(1)}
  22%{opacity:.55;transform:translate(205px,285px) scale(1)}
  24%,31%{opacity:.95;transform:translate(205px,285px) scale(.7)}
  33%{opacity:.55;transform:translate(205px,285px) scale(1)}
  39%{opacity:.55;transform:translate(105px,455px) scale(1)}
  41%,48%{opacity:.95;transform:translate(105px,455px) scale(.7)}
  50%{opacity:.55;transform:translate(105px,455px) scale(1)}
  54%,100%{opacity:0;transform:translate(105px,455px) scale(1)}
}
@keyframes p-ring{
  0%,6%{opacity:0;transform:translate(105px,185px) scale(.25)}
  7%{opacity:.9;transform:translate(105px,185px) scale(.25)}
  13%{opacity:.9;transform:translate(105px,185px) scale(1)}
  14%,23%{opacity:0;transform:translate(205px,285px) scale(.25)}
  24%{opacity:.9;transform:translate(205px,285px) scale(.25)}
  30%{opacity:.9;transform:translate(205px,285px) scale(1)}
  31%,40%{opacity:0;transform:translate(105px,455px) scale(.25)}
  41%{opacity:.9;transform:translate(105px,455px) scale(.25)}
  47%{opacity:.9;transform:translate(105px,455px) scale(1)}
  48%,100%{opacity:0;transform:translate(105px,455px) scale(.25)}
}

/* ——— scene: style (12 s) */
.th,.th-route,.pk,.pill i{opacity:0}
.th0{--grd:#071142;--blk:#101d55;--rd:#41568e;--csg:#0a1030;--wtr:#0e3b5e;--prk:#0c3550}
.th1{--grd:#f2eee4;--blk:#e2dac6;--rd:#ffffff;--csg:#d5cbb2;--wtr:#a9d7e8;--prk:#bcd9a0}
.th2{--grd:#0a0a16;--blk:#141428;--rd:#232342;--csg:#050510;--wtr:#10102b;--prk:#0e0e22}
.th3{--grd:#351b3f;--blk:#452457;--rd:#7a4a8a;--csg:#241030;--wtr:#2a2a5e;--prk:#30204a}
.th-route{fill:none;stroke-width:7;stroke-linecap:round}
.rt0{stroke:#16fae0}.rt1{stroke:#2f6df0}.rt2{stroke:#d02fd6}.rt3{stroke:#ffb84d}
.puck{position:absolute;left:150px;top:330px;width:30px;height:40px;margin:-20px 0 0 -15px;z-index:5}
.puck::before{content:"";position:absolute;left:-9px;top:-4px;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.14)}
.pk{position:absolute;inset:0;width:100%;height:100%}
.pill{position:absolute;left:12px;bottom:16px;z-index:7;width:104px;height:26px;border-radius:999px;background:rgba(2,12,62,.66);color:#eaf6ff;font:700 10px/26px var(--mono);letter-spacing:.14em;text-align:center}
.pill i{position:absolute;inset:0;font-style:normal}
[data-for~="style"] .th0,[data-for~="style"] .pk0,[data-for~="style"] .pl0,[data-for~="style"] .rt0{animation:t0 12s linear infinite both}
[data-for~="style"] .th1,[data-for~="style"] .pk1,[data-for~="style"] .pl1,[data-for~="style"] .rt1{animation:t1 12s linear infinite both}
[data-for~="style"] .th2,[data-for~="style"] .pk2,[data-for~="style"] .pl2,[data-for~="style"] .rt2{animation:t2 12s linear infinite both}
[data-for~="style"] .th3,[data-for~="style"] .pk3,[data-for~="style"] .pl3,[data-for~="style"] .rt3{animation:t3 12s linear infinite both}
@keyframes t0{0%,22%{opacity:1}26%,96%{opacity:0}100%{opacity:1}}
@keyframes t1{0%,22%{opacity:0}26%,47%{opacity:1}51%,100%{opacity:0}}
@keyframes t2{0%,47%{opacity:0}51%,72%{opacity:1}76%,100%{opacity:0}}
@keyframes t3{0%,72%{opacity:0}76%,96%{opacity:1}100%{opacity:0}}

/* ——— the close */
.close{position:relative;padding:clamp(84px,11vw,150px) var(--pad)}
.close-in{max-width:620px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.close .lockup{width:min(100%,320px);height:auto;margin-bottom:4px}
.close .lede{margin:0 auto;color:var(--on-dim)}
.stores{font-size:14px;color:var(--on-dim)}

/* ——— footer */
.foot{position:relative;background:#140334;border-top:1px solid rgba(255,255,255,.14);padding:30px var(--pad) 44px}
.foot-row{max-width:var(--max);margin:0 auto;display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;align-items:center;font-size:14px}
.foot-right{display:flex;align-items:center;gap:18px}
.foot nav{display:flex;flex-wrap:wrap;gap:20px}
.foot a{color:var(--on-dim);text-decoration:none}
.foot a:hover{color:var(--live)}
.made{color:var(--on-faint)}
.foot-demo{max-width:var(--max);margin:14px auto 0;font-size:12.5px;color:var(--on-faint)}

/* ——— responsive */
@media (max-height:940px){:root{--ps:1.04}}
@media (max-height:870px){:root{--ps:.94}}
@media (max-height:790px){:root{--ps:.84}}
@media (max-height:710px){:root{--ps:.74}}

@media (max-width:999px){
  /* under 1000px the road lies flat under the masthead: same stops, same
     puck, one line across the top */
  .gutter{display:block;left:0;right:0;top:0;bottom:auto;width:auto;height:34px;pointer-events:none}
  .gutter .road{height:100%}
  .rd-case{stroke-width:9}.rd-bed{stroke-width:5}.rd-done{stroke-width:5}
  .wp{transform:translate(-50%,-50%);margin-left:0}
  .wp::before{display:none}
  .wp .av img{width:22px;height:22px}
  .wp .av svg{width:20px;height:20px}
  .wp span{display:none}
  .wp.is-here .av{transform:scale(1.18)}
  .wp-end .av{width:44px;height:30px}
  .wp-end .fl{width:23px;height:23px}
  .navpuck{width:20px;height:20px}
  .navpuck svg{width:12px;height:12px}
  .navpuck::after{display:none}
}
@media (max-width:1000px){
  /* the phone pins to the top and the copy runs beneath it */
  :root{--ps:.62}
  .reel-in{grid-template-columns:1fr;gap:0}
  .reel-stage{order:-1;position:sticky;top:0;height:auto;padding:10px 0 6px;
    justify-content:flex-start;z-index:5}
  .reel-stage::after{content:"";position:absolute;left:-100vw;right:-100vw;top:-70px;bottom:-26px;z-index:-1;
    background:linear-gradient(180deg,var(--t0) 62%,transparent)}
  .carcv{height:min(40vh,280px)}
  .step{min-height:100svh;padding:calc(660px * var(--ps) + 102px) 0 8vh}
  .step-in{position:static;transform:none;top:auto;margin:0}
  .step .lockup{width:min(52%,208px)}
  .step .lede,.step p{max-width:none}
  h1{font-size:clamp(42px,11vw,62px)}
  .step h2{font-size:clamp(38px,11vw,58px)}
}
@media (max-width:760px){
}
@media (max-width:560px){
  :root{--ps:.56}
  html{scroll-padding-top:50svh}
}

/* ——— reduced motion: every scene shows its finished state, nothing moves */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .topo{animation:none}
  .ground,.ground-p{transform:none !important;transition:none}
  .scene *,.p-typed span{animation:none !important}
  body,.tint,.p-card,.p-avatars,.scene{transition:none !important}
  .finger,.ring{opacity:0 !important}
  .route{stroke-dashoffset:0}
  .r-a{opacity:.42;stroke:#6b7bb4}
  .zone,.zone-tag,.verts circle,.traffic path,.p-notice,.pace,.a-pin,.a-chip,.station,.spot,.th0,.pk0,.pl0,.rt0{opacity:1;transform:none}
  .fuel-key .tile{opacity:0}
  .p-typed span{opacity:1}
}