/* ============================================================
   ROAD DAWG website: page elements
   Built on road-dawg.css (tokens) and components.css (buttons, cards, chips, comet, reveal).

   Sections, in page order:
     colours not in the design system yet, sky, page arrival, layout, top bar, hero,
     six features, city wheel, match chip, Meet Max, Ask Max, sign up, props, live times,
     orbit, footer, legal, 404

   Breakpoints (the same boundary is written max N / min N+1):
     420   small phones: props shrink on their shelf
     560   legal sections list in one column
     640   phones (the design system's own): single columns, stacked form
     720   smaller logo and top bar button, smaller hero paragraph
     760   footer stacks
     860   hero and features go single column
     900   city wheel shows 8 cards instead of 6
     1100  legal sections list moves to the left; Meet Max features in 4 columns
     1180  props float at the section edges instead of sitting on a shelf
     1400  hero live times; city wheel shows 10 cards; boarding pass floats
     1600  props move further out
   ============================================================ */

/* ================= COLOURS NOT IN THE DESIGN SYSTEM YET =================
   Sampled or drawn for the website only. Named once here so they can become tokens. */
:root{
  --web-sky-1:#7A3A72;--web-sky-2:#6E3A6E;--web-sky-3:#5C3360;--web-sky-4:#3A2C60;
  --web-sky-5:#2A2247;--web-sky-6:#1C1730;--web-sky-7:#120F20;--web-sky-8:#0B0A14;
  --web-sky-fallback-mid:#31284B;--web-sky-fallback-end:#23192B;
  --web-comet-gap-hero:#82436F;       /* the sky behind the hero button, sampled at 1440 */
  --web-bubble:#1D1929;               /* Max's thinking bubble */
  --web-place-card:#1B1826;           /* place card fill inside its gradient border */
  --web-text-walk:#C4B8DC;            /* walk time and distance on the place card */
  --web-sun:#F0C674;                  /* daytime dot in the live times */
  --web-paper:#FBF8F2;                /* Polaroid paper */
  --web-lost-photo:#C9A6E6;           /* 404 Polaroid before its clip loads */
  --web-like-green:#11986B;           /* start of the Like match chip gradient */
}

/* ================= SKY =================
   A fixed layer behind the page. A tall sunset-to-night gradient whose position is
   driven by scroll, so the sky turns to night as you read. Three soft aurora blobs
   drift on transforms only. Grain is tiled SVG noise. The cursor paw trail lives
   inside it. Fallbacks: no scroll-timeline, static full gradient; reduced motion,
   static everything. The body gradient is the last-resort fallback. */
body{background:linear-gradient(180deg,var(--web-sky-3) 2.4%,var(--web-sky-4) 33.3%,var(--web-sky-fallback-mid) 47.6%,var(--web-sky-fallback-end) 100%);}
.sky{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background:linear-gradient(180deg,var(--web-sky-1) 0%,var(--web-sky-2) 10%,var(--web-sky-3) 22%,var(--web-sky-4) 38%,
    var(--web-sky-5) 54%,var(--web-sky-6) 70%,var(--web-sky-7) 86%,var(--web-sky-8) 100%);
  background-size:100% 100%;background-position:50% 0%;}
@keyframes sky-shift{from{background-position:50% 0%;}to{background-position:50% 100%;}}
@supports (animation-timeline: scroll()){
  .sky{background-size:100% 300%;animation:sky-shift linear both;animation-timeline:scroll(root);}
}
.sky .blob{position:absolute;border-radius:50%;filter:blur(60px);will-change:transform;opacity:1;}
.sky .b1{width:58vw;height:58vw;left:-18vw;top:-22vh;background:rgba(239,69,111,0.34);animation:blob-a 14s ease-in-out infinite;}
@keyframes blob-fade{to{opacity:0;}}
@supports (animation-timeline: scroll()){
  .sky .b1{animation:blob-a 14s ease-in-out infinite, blob-fade linear both;animation-timeline:auto, scroll(root);}
}
.sky .b2{width:62vw;height:62vw;right:-24vw;top:18vh;background:rgba(93,115,169,0.40);animation:blob-b 17s ease-in-out infinite;}
.sky .b3{width:66vw;height:66vw;left:16vw;bottom:-34vh;background:rgba(134,79,173,0.42);animation:blob-c 20s ease-in-out infinite;}
@keyframes blob-a{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(22vw,16vh) scale(1.18);}}
@keyframes blob-b{0%,100%{transform:translate(0,0) scale(1.05);}50%{transform:translate(-20vw,-14vh) scale(0.9);}}
@keyframes blob-c{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(14vw,-20vh) scale(1.2);}}
.sky .grain{position:absolute;inset:-20%;opacity:0.16;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:180px 180px;}
@media (prefers-reduced-motion:reduce){
  .sky{animation:none;background-size:100% 100%;}
  .sky .blob{animation:none;}
}

/* Cursor paw trail: faint prints pressed into the sky, fading */
.sky .paws{position:absolute;inset:0;}
.sky .paw{position:absolute;width:20px;height:20px;margin:-10px 0 0 -10px;
  color:rgba(255,255,255,0.55);mix-blend-mode:soft-light;}
.sky .paw svg{width:100%;height:100%;display:block;fill:currentColor;
  animation:paw-dust 1.7s ease-out forwards;will-change:opacity,transform;}
@keyframes paw-dust{0%{opacity:0;transform:scale(1.2);}12%{opacity:1;transform:scale(1.1);}100%{opacity:0;transform:scale(.82);}}

/* ================= PAGE ARRIVAL =================
   Each page's first elements enter once. Their animations are declared in their own sections;
   this holds them on the first frame until the heading font is in, so the fallback face never
   shows mid-rise. A script in each page's head removes .fonts-wait, after 0.8s at most. */
@keyframes drop-in{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}}
@keyframes fade-in{from{opacity:0;}to{opacity:1;}}
html.fonts-wait .topbar .brand,html.fonts-wait .topbar nav .btn,html.fonts-wait .hero__copy > *,
html.fonts-wait .notfound .section__head > *,html.fonts-wait .legal > h1,html.fonts-wait .legal > .meta,
html.fonts-wait .legal > .toc{animation-play-state:paused;}

/* ================= LAYOUT ================= */
section{background:transparent;}
.wrap{max-width:1480px;padding:0 clamp(16px,3vw,40px);}   /* wider than the design system default, fluid gutters */
.section{padding:var(--space-7) 0;}
.section__head{max-width:640px;margin:0 auto var(--space-6);text-align:center;}
.section__head h2{margin-bottom:var(--space-4);text-wrap:balance;}
.lede,.card p{font-weight:500;}   /* subtitles read medium, not light */
.reveal:focus-within{opacity:1;transform:none;transition-delay:0s;}   /* reached by keyboard before its reveal: show it at once */

/* Skip link: the first thing a keyboard or screen reader meets, hidden until focused */
.skip-link{position:fixed;left:12px;top:-100px;z-index:100;padding:10px 18px;border-radius:var(--r-round);
  background:var(--btn-bg);color:var(--btn-text);
  font:600 var(--fs-body-md)/1 var(--font-body);text-decoration:none;transition:top .18s var(--easing-out);}
.skip-link:focus{top:12px;}
main:focus{outline:none;}

/* ================= TOP BAR ================= */
.topbar{position:sticky;top:0;z-index:20;background:transparent;}
.topbar .wrap{display:flex;align-items:center;gap:var(--space-5);min-height:56px;padding-top:18px;padding-bottom:12px;}
.brand{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;text-decoration:none;color:var(--text-headings);
  font-family:var(--font-heading);font-weight:500;font-size:var(--fs-h6);}
.brand img{width:auto;height:64px;display:block;}
.topbar nav{margin-left:auto;display:flex;align-items:center;gap:var(--space-5);}
.topbar .btn{padding:10px 22px;white-space:nowrap;}
/* the home page has no menu: its top bar button fades in once the hero has scrolled away */
.topbar--home .topbar__cta{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);
  transition:opacity .35s var(--easing-out),transform .35s var(--easing-out),visibility 0s linear .35s;}   /* hidden also leaves the tab order */
.topbar--home.is-past-hero .topbar__cta{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s;}
/* arrival: the logo drops in; on the other pages the button follows */
.topbar .brand{animation:drop-in .6s var(--easing-out) both;}
.topbar:not(.topbar--home) nav .btn{animation:drop-in .6s var(--easing-out) .08s both;}
@media (max-width:720px){
  .brand img{height:52px;}
  .topbar .btn{padding:9px 16px;font-size:var(--fs-body-sm);}
}
@media (prefers-reduced-motion:reduce){
  .topbar--home .topbar__cta{transition:none;}
  .topbar .brand,.topbar nav .btn{animation:none;}
}

/* ================= HERO ================= */
.hero{position:relative;overflow-x:clip;padding:var(--space-4) 0 var(--space-6);}   /* clip sideways only: the glow behind the phone fades out below instead of ending in a hard line */
.hero > .wrap{position:relative;z-index:1;}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,0.88fr);gap:var(--space-6);align-items:center;}
.hero h1{font-size:clamp(34px,3.8vw,54px);line-height:1.08;margin:var(--space-3) 0;text-wrap:balance;}
.hero .lede{color:var(--lavender-100);max-width:520px;}
.hero .comet{--comet-gap:var(--web-comet-gap-hero);}
.hero__cta{margin:var(--space-5) 0 0;animation:rise-in .7s var(--easing-out) .36s both;}
.hero__art{position:relative;display:flex;justify-content:center;align-items:flex-end;gap:clamp(24px,4vw,72px);
  padding:0 0 var(--space-5);}   /* the phone sits high in the hero, nothing above it */
/* entrance cascade: headline, paragraph, button (the button's delay is on .hero__cta) */
.hero__copy > h1,.hero__copy > .lede{animation:rise-in .7s var(--easing-out) both;}
.hero__copy > h1{animation-delay:.12s}
.hero__copy > .lede{animation-delay:.24s}
/* the phone scene is invisible until its images are in, then fades; the script owns its transform */
.p3-scene{opacity:0;}
.p3-scene.is-ready{animation:fade-in .9s var(--easing-out) .1s both;}
.p3-scene.is-shown{animation:none;opacity:1;}
/* background: a soft halo behind the phone */
.hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.hero__halo{position:absolute;right:6%;top:50%;width:min(52vw,720px);aspect-ratio:1;transform:translateY(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(215,153,248,.22),rgba(110,133,222,.10) 55%,transparent 72%);filter:blur(10px);}
@media (min-width:861px) and (max-width:1399px){
  .hero .wrap{grid-template-columns:minmax(0,1.25fr) minmax(0,0.75fr);}
  .hero__art{padding-right:clamp(0px,9vw,150px);}
}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;text-align:center;}
  .hero .lede{margin-left:auto;margin-right:auto;}
  .hero__art{order:1;margin-top:var(--space-5);}
  .hero__halo{right:auto;left:50%;top:auto;bottom:0;transform:translate(-50%,20%);width:90vw;}
}
@media (max-width:720px){.hero .lede{font-size:var(--fs-body-md);}}
@media (max-width:640px){.hero h1 br{display:none;}}
@media (prefers-reduced-motion:reduce){
  .hero__copy > *,.p3-scene{animation:none!important;}
  .p3-scene.is-ready{opacity:1;}
}

/* ================= SIX FEATURES AROUND THE PHONE =================
   The section is taller than the screen and its content pins, so the six cards stay put for a
   while after the phone lands and there is time to read them. The features come out from the
   phone once it has docked: left column slides out to the left, right column to the right, row
   by row, with a small settle. They only play once the phone is at rest. */
.showit{min-height:190vh;padding-top:var(--space-6);}
.showit__pin{position:sticky;top:72px;}
.showit__grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:var(--space-7);align-items:center;
  padding-bottom:var(--space-6);}
.showit__col{display:grid;gap:14px;}
.showit .section__head{max-width:900px;margin-bottom:var(--space-7);
  opacity:0;transform:translateY(-10px);transition:opacity .55s var(--easing-out),transform .55s var(--easing-out);}
.showit .card{opacity:0;transform:translateX(var(--from,0)) scale(.96);
  transition:opacity .45s var(--easing-out),transform .75s cubic-bezier(.2,.8,.2,1);}
.showit__col:first-child .card{--from:48px;}
.showit__col:last-child .card{--from:-48px;}
.showit.is-landed .section__head,.showit.is-landed .card{opacity:1;transform:none;}
.showit.is-landed .showit__col:first-child .card:nth-child(1){transition-delay:80ms;}
.showit.is-landed .showit__col:last-child .card:nth-child(1){transition-delay:140ms;}
.showit.is-landed .showit__col:first-child .card:nth-child(2){transition-delay:220ms;}
.showit.is-landed .showit__col:last-child .card:nth-child(2){transition-delay:280ms;}
.showit.is-landed .showit__col:first-child .card:nth-child(3){transition-delay:360ms;}
.showit.is-landed .showit__col:last-child .card:nth-child(3){transition-delay:420ms;}
.showit:not(.is-landed) .card{transition-duration:.25s,.25s;transition-delay:0ms;}   /* leaving is quick and unstaggered */
@media (max-width:860px){
  .showit{min-height:0;}
  .showit__pin{position:static;}
  .showit .card{--from:0;transform:translateY(16px) scale(.98);}
  .showit__grid{grid-template-columns:1fr;gap:14px;}   /* the two columns stack: same distance between all six cards */
  .showit__grid .p3-slot{order:-1;}
}
@media (prefers-reduced-motion:reduce){
  .showit .section__head,.showit .card{opacity:1;transform:none;transition:none;}
}

/* ================= CITY WHEEL =================
   Real loops fanned on an arc, full width, sways once in view. One pivot --r below the cards;
   card i sits at (i - (n-1)/2) * --step. The step is chosen so neighbours overlap by a fixed share
   of a card (about 30 percent on desktop), and later cards stack on earlier ones, so the overlap
   reads as a dealt deck, not a collision. Six cards on phones, eight from 900px, ten from 1400px.
   No shadow: the white hairline separates the cards. Reduced motion: static fan. */
.wheel{position:relative;padding:var(--space-8) 0 0;overflow:visible;overflow-x:clip;
  --n:6;--card:clamp(120px,13vw,300px);--r:clamp(320px,62vw,2000px);--step:14deg;--drop:0.42;}
.wheel__arc{position:relative;list-style:none;margin:0 0 calc(var(--r) * -0.16);padding:0;
  height:calc(var(--r) * var(--drop) + var(--card) * 1.42);transform-origin:50% var(--r);}
.wheel__card{position:absolute;left:calc(50% - var(--card) / 2);top:0;z-index:calc(var(--i) + 1);
  width:var(--card);aspect-ratio:3/4;
  transform-origin:50% var(--r);
  transform:rotate(0deg) scale(0.82);opacity:0;
  transition:transform .9s var(--easing-out) var(--d,0ms),opacity .6s var(--easing-out) var(--d,0ms);}
.wheel.in-view .wheel__card{transform:rotate(calc((var(--i) - (var(--n) - 1) / 2) * var(--step))) scale(1);opacity:1;}
/* the inner wrapper carries the look and the hover motion; the li stays put, so the pointer
   never flips between two cards while one of them grows */
.wheel__inner{position:absolute;inset:0;border-radius:clamp(14px,1.4vw,22px);overflow:hidden;
  background:var(--surface-card-large);border:var(--bw-sm) solid rgba(255,255,255,0.75);
  transition:transform .45s var(--easing-out);}
.wheel__inner::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(24,21,35,0.72) 100%);}
.wheel__card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  background-size:cover;background-position:center;   /* the poster, set by js/site.js, fills the gap before the first frame */
  transition:transform .6s var(--easing-out);}
.wheel.is-settled .wheel__card:hover .wheel__inner{transform:translateY(-5%);}
@media (hover:none){.wheel.is-settled .wheel__card:hover .wheel__inner{transform:none;}}
.wheel__name{position:absolute;left:12px;bottom:10px;z-index:1;font-family:var(--font-heading);font-weight:500;color:#fff;
  font-size:clamp(12px,1.1vw,16px);text-shadow:0 2px 6px rgba(0,0,0,0.5);}
.wheel__card .mc{position:absolute;left:8px;top:8px;z-index:1;transform:scale(0.8);transform-origin:top left;}
/* which cards exist at which width; --i is numbered per breakpoint so the fan stays centred.
   Never set --i inline: the breakpoint rules must win. */
.wheel__card--lg,.wheel__card--xl{display:none;}
.wheel__card:nth-child(1){--i:0}.wheel__card:nth-child(3){--i:1}.wheel__card:nth-child(5){--i:2}
.wheel__card:nth-child(6){--i:3}.wheel__card:nth-child(8){--i:4}.wheel__card:nth-child(10){--i:5}
@media (min-width:900px){
  .wheel{--n:8;--drop:0.34;}
  .wheel__card--lg{display:block;}
  .wheel__card--xl{display:none;}
  .wheel__card:nth-child(1){--i:0}.wheel__card:nth-child(3){--i:1}.wheel__card:nth-child(4){--i:2}.wheel__card:nth-child(5){--i:3}
  .wheel__card:nth-child(6){--i:4}.wheel__card:nth-child(7){--i:5}.wheel__card:nth-child(8){--i:6}.wheel__card:nth-child(10){--i:7}
}
@media (min-width:1400px){
  .wheel{--n:10;--drop:0.42;--step:15deg;}
  .wheel__card--xl{display:block;}
  .wheel__card:nth-child(1){--i:0}.wheel__card:nth-child(2){--i:1}.wheel__card:nth-child(3){--i:2}.wheel__card:nth-child(4){--i:3}
  .wheel__card:nth-child(5){--i:4}.wheel__card:nth-child(6){--i:5}.wheel__card:nth-child(7){--i:6}.wheel__card:nth-child(8){--i:7}
  .wheel__card:nth-child(9){--i:8}.wheel__card:nth-child(10){--i:9}
}
@keyframes wheel-sway{from{transform:rotate(-4deg);}to{transform:rotate(4deg);}}
@keyframes wheel-sway-soft{from{transform:rotate(-2deg);}to{transform:rotate(2deg);}}
.wheel.in-view .wheel__arc{animation:wheel-sway 11s ease-in-out 1s infinite alternate;}
@media (max-width:640px){
  /* phone: six cards, tighter overlap, the whole fan inside the viewport even mid-sway */
  .wheel{--card:clamp(84px,22vw,110px);--r:clamp(180px,55vw,260px);--step:20deg;--drop:0.34;}
  .wheel__card .mc{transform:scale(0.7);}
  .wheel.in-view .wheel__arc{animation-name:wheel-sway-soft;}
}
@media (prefers-reduced-motion:reduce){
  .wheel__card{transition:none;transform:rotate(calc((var(--i) - (var(--n) - 1) / 2) * var(--step)));opacity:1;}
  .wheel.in-view .wheel__arc{animation:none;}
}

/* The statement under the wheel overlaps the arc's foot */
.statement{position:relative;z-index:2;padding-top:0;}
.statement .section__head{margin-bottom:0;max-width:560px;}
@media (max-width:899px){.statement{padding-top:var(--space-6);}}

/* ================= MATCH CHIP =================
   From the Figma match chips (node 7801-36686). Love and Like tiers on the site. */
.mc{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:var(--r-round);
  color:var(--text-headings);font:500 var(--fs-body-xsm)/var(--lh-body-xsm) var(--font-body);white-space:nowrap;}
.mc svg{width:16px;height:16px;flex:none;display:block;}
.mc--love{background-image:var(--grad-match);}
.mc--like{background-image:linear-gradient(79deg,var(--web-like-green) 9.73%,var(--sky-600) 55.33%,var(--purple-400) 92.36%);}

/* ================= MEET MAX =================
   Max's face, the demo on top, the four features in a row under it. Fewer boxes: the four
   features are plain columns with an icon, no card around them. */
/* the shadow is its own soft ellipse underneath, not a filter. A filter on an animated
   element gets clipped to the element's box on iOS, which showed as a hard edge under the dog. */
.max-face{position:relative;display:block;width:150px;margin:0 auto var(--space-4);}
.max-face img{position:relative;z-index:1;display:block;width:100%;height:auto;}
.max-face::after{content:"";position:absolute;left:50%;bottom:-26px;width:150%;height:56px;translate:-50% 0;border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,rgba(4,10,30,.55) 0%,rgba(4,10,30,.28) 40%,rgba(4,10,30,0) 70%);pointer-events:none;}
.max-face.in-view img{animation:rd-bob 4s ease-in-out .7s infinite;}
@keyframes rd-bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}

.more{display:flex;flex-direction:column;gap:calc(var(--space-8) + var(--space-4));align-items:stretch;}
#more{padding-bottom:calc(var(--space-8) + var(--space-6));}
.more__demo{display:flex;justify-content:center;}
.more__demo .askmax{width:100%;max-width:640px;flex:0 1 640px;min-height:384px;}   /* the height of the full answer, so the box never jumps between phases */
.more__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.more__grid .card--feature{flex-direction:column;align-items:flex-start;gap:12px;min-height:0;
  background:transparent;border:0;padding:0 var(--space-2);}
.more__grid .card--feature b{margin-top:4px;}
@media (max-width:1100px){.more__grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.more__grid{grid-template-columns:1fr;gap:32px;}}
@media (prefers-reduced-motion:reduce){.max-face img{animation:none;}}

/* ================= ASK MAX DEMO =================
   The app's chat (Figma 8859-42458): a question, Max thinking, the answer, one place card, chips.
   Phases: 0 empty, 1 question, 2 thinking, 3 answer, 4 card and chips. */
.askmax{display:flex;flex-direction:column;gap:12px;padding:20px 18px 20px;border-radius:var(--r-md);
  background:var(--surface-card-large);border:var(--bw-sm) solid rgba(255,255,255,0.12);
  box-shadow:0 30px 70px rgba(4,10,30,0.5);min-height:300px;width:min(100%,640px);}
.askmax__user{text-align:right;}
.askmax .u-bub{display:inline-block;padding:12px;border-radius:16px;background:var(--neutral-900);color:#fff;
  font:500 var(--fs-body-md)/var(--lh-body-md) var(--font-body);}
.askmax .u-bub em{font-style:normal;color:var(--success-300);}
.askmax__row{display:flex;gap:12px;align-items:flex-start;}
.askmax__col{display:flex;flex-direction:column;gap:10px;min-width:0;flex:1;}
.mav{width:44px;height:44px;border-radius:50%;flex:none;overflow:hidden;box-shadow:0 0 0 2px rgba(151,125,222,.24);}
.mav img{width:44px;height:44px;display:block;}
.askmax .m-say{margin:0;padding:0;color:#fff;font:500 var(--fs-body-md)/var(--lh-body-md) var(--font-body);}
/* thinking: the line that names what Max is reading, with three bobbing dots */
.askmax .thinking{display:inline-flex;align-items:center;gap:10px;color:var(--accent-300);
  font:500 var(--fs-body-md)/var(--lh-body-md) var(--font-body);}
.dots{display:inline-flex;gap:5px;align-items:center;padding:14px 12px;background:var(--web-bubble);border-radius:16px;}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--lavender-300);animation:dot-bob 1s ease-in-out infinite;}
.dots i:nth-child(2){animation-delay:.15s}
.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot-bob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-4px);opacity:1}}
/* the onboarding vibes Max matched on, as inline chips */
.vibe{display:inline-flex;align-items:center;gap:5px;vertical-align:baseline;margin:0 1px;padding:1px 9px 1px 6px;
  border-radius:100px;background:rgba(212,151,252,.16);border:1px solid rgba(212,151,252,.45);color:#fff;
  font-family:var(--font-heading);font-weight:500;font-size:13px;line-height:20px;white-space:nowrap;}
.vibe i{font-style:normal;font-size:13px;}
/* place card: a thicker gradient border, pink to sky, with the app's save and directions icons */
.askmax .scard{display:flex;align-items:center;gap:18px;min-width:0;width:100%;margin:10px 0 8px;padding:18px 20px 18px 18px;
  border:2px solid transparent;border-radius:22px;
  background:linear-gradient(var(--web-place-card),var(--web-place-card)) padding-box,
    linear-gradient(120deg,var(--pink-300) 0%,var(--lavender-300) 50%,var(--sky-300) 100%) border-box;}
.scard > div{min-width:0;}
.scard img{width:88px;height:88px;border-radius:14px;object-fit:cover;flex:none;}
.sname{margin:0 0 2px;color:#fff;font-size:18px;font-weight:500;font-family:var(--font-heading);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.swalk{margin:0 0 8px;display:flex;align-items:center;gap:10px;color:var(--web-text-walk);font-size:13px;}
.swalk span{display:inline-flex;align-items:center;gap:4px;}
.swalk svg{width:13px;height:13px;}
.scard__actions{display:flex;flex-direction:column;gap:8px;margin-left:auto;flex:none;align-self:center;}
.askmax .ibtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;
  background:var(--neutral-900);}
.askmax .ibtn img{width:20px;height:20px;display:block;}
.askmax .comet{padding:2px;}
/* suggestion chips */
.chat-chips{display:flex;gap:8px;flex-wrap:wrap;padding:4px 0 0 56px;}
.chat-chips span{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:50px;white-space:nowrap;
  background:var(--sky-300);color:var(--neutral-900);font:400 var(--fs-body-md)/var(--lh-body-md) var(--font-body);
  opacity:0;transform:translateY(8px) scale(.92);
  transition:opacity .35s var(--easing-out),transform .45s cubic-bezier(.2,1.4,.4,1);}
.chat-chips img{width:15px;height:15px;}
/* phases */
.askmax > *{opacity:0;transform:translateY(10px);transition:opacity .4s var(--easing-out),transform .5s var(--easing-out);}
.askmax[data-phase="1"] .askmax__user,.askmax[data-phase="2"] .askmax__user,
.askmax[data-phase="3"] .askmax__user,.askmax[data-phase="4"] .askmax__user{opacity:1;transform:none;}
.askmax[data-phase="2"] .askmax__typing{opacity:1;transform:none;}
.askmax[data-phase="3"] .askmax__typing,.askmax[data-phase="4"] .askmax__typing{display:none;}
.askmax[data-phase="3"] .askmax__answer,.askmax[data-phase="4"] .askmax__answer{opacity:1;transform:none;}
.askmax__answer .askmax__card{opacity:0;transform:translateY(10px);transition:opacity .4s var(--easing-out),transform .5s var(--easing-out);}
.askmax[data-phase="4"] .askmax__card{opacity:1;transform:none;}
/* the chips pop in one after another once the card has landed */
.askmax[data-phase="4"] .chat-chips{opacity:1;transform:none;}
.askmax[data-phase="4"] .chat-chips span{opacity:1;transform:none;}
.askmax[data-phase="4"] .chat-chips span:nth-child(1){transition-delay:.45s;}
.askmax[data-phase="4"] .chat-chips span:nth-child(2){transition-delay:.6s;}
.askmax[data-phase="4"] .chat-chips span:nth-child(3){transition-delay:.75s;}
/* phones: the place card takes the full width of the box, photo and text side by side, the actions in a row below */
@media (max-width:640px){
  .askmax .scard{display:grid;grid-template-columns:76px minmax(0,1fr);grid-template-areas:"img text" "actions actions";
    gap:10px 12px;padding:12px;margin-left:-56px;width:calc(100% + 56px);}
  .askmax .scard > img{grid-area:img;width:76px;height:76px;}   /* the photo only, not the icons in the action buttons */
  .askmax .scard > div:not(.scard__actions){grid-area:text;}
  .askmax .scard .sname{white-space:normal;font-size:17px;line-height:1.2;margin-bottom:4px;}
  .askmax .scard .swalk{flex-wrap:wrap;gap:6px 10px;margin-bottom:8px;}
  .askmax .scard .swalk span{white-space:nowrap;}
  .askmax .scard__actions{grid-area:actions;flex-direction:row;justify-content:flex-end;gap:10px;margin:0;padding-top:2px;
    border-top:1px solid rgba(255,255,255,.08);}
  .askmax .chat-chips{margin-left:0;padding-left:0;}   /* the chips line up with the left edge of the result box */
}
@media (prefers-reduced-motion:reduce){
  .askmax > *,.chat-chips span{transition:none;}
  .dots i{animation:none;}
}

/* ================= SIGN UP =================
   Early access, on the sky, no card. The Mailchimp form goes here. */
.signup-section{padding:calc(var(--space-8) + var(--space-6)) 0;}
.signup-section .section__head{margin-bottom:0;max-width:640px;}
.signup-section .comet{--comet-gap:var(--web-sky-5);}
.signup{display:flex;gap:10px;max-width:520px;margin-top:var(--space-6);}
.signup-section .signup{margin:var(--space-6) auto 0;justify-content:center;position:relative;}
.signup input{flex:1;min-width:0;height:52px;padding:0 20px;border-radius:var(--r-round);
  background:rgba(24,21,35,0.55);border:var(--bw-sm) solid var(--border-primary);color:#fff;
  font-family:var(--font-body);font-size:var(--fs-body-md);}
.signup input::placeholder{color:var(--color-text-muted);}
.signup input:focus{border-color:var(--border-active);}   /* the design system focus ring stays */
.signup .btn{white-space:nowrap;}
.signup .comet{flex:none;width:auto;}
.signup-note{margin:var(--space-4) 0 0;font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--color-text-muted);font-weight:500;}
/* the form stacks at the same width where the design system makes the comet button full width */
@media (max-width:640px){
  .signup .comet{width:100%;}
  .signup{flex-direction:column;}
  .signup input{flex:none;width:100%;}   /* in a column, flex:1 would collapse the field to its text height */
  .signup .btn{width:100%;}
}
/* states: invalid, sending, sent. The message line keeps its height, so nothing below jumps */
.signup__msg{min-height:var(--lh-body-sm);max-width:520px;margin:var(--space-3) auto 0;
  font:500 var(--fs-body-sm)/var(--lh-body-sm) var(--font-body);color:var(--text-error);}
.signup input[aria-invalid="true"]{border-color:var(--border-destructive);}
.signup .btn[aria-busy="true"]{pointer-events:none;}
.signup__spinner{display:none;width:16px;height:16px;margin-right:10px;border-radius:50%;
  border:2px solid currentColor;border-right-color:transparent;animation:signup-spin .8s linear infinite;}
.signup .btn[aria-busy="true"] .signup__spinner{display:inline-block;}
@keyframes signup-spin{to{transform:rotate(360deg);}}
.signup-done{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);margin:var(--space-6) auto 0;
  animation:rise-in .5s var(--easing-out) both;}
.signup-done[hidden]{display:none;}
.signup-done:focus{outline:none;}
.signup-done .ico-chip{border-radius:50%;}
.signup-done__title{margin:0;color:var(--text-headings);font:500 var(--fs-h5)/var(--lh-h5) var(--font-heading);}
.signup-done__text{margin:0;color:var(--color-text-soft);font-weight:500;}
.signup-box.is-done .signup,.signup-box.is-done .signup__msg,.signup-box.is-done .signup-note{display:none;}
@media (prefers-reduced-motion:reduce){
  .signup__spinner{animation:none;border-right-color:currentColor;opacity:.6;}
  .signup-done{animation:none;}
}


/* ================= PROPS =================
   A traveller's collected junk at the edges of sections. From 1180px they float at the edges,
   never in the way; below that they sit on a shelf above the content. */
.has-props{position:relative;}
.prop{position:absolute;z-index:1;pointer-events:none;display:none;filter:drop-shadow(0 16px 24px rgba(4,10,30,.35));
  animation:prop-drift 7s ease-in-out infinite;}
.prop.reveal{transform:translateY(18px) rotate(var(--tilt,0deg));}
.prop.reveal.in-view{transform:rotate(var(--tilt,0deg));}
@keyframes prop-drift{0%,100%{translate:0 0;}50%{translate:0 -6px;}}
@media (prefers-reduced-motion:reduce){.prop{animation:none;}}
@media (min-width:1180px){.prop{display:block;}}
.prop--pass{top:72px;right:max(12px,calc(50% - 320px - 372px));--tilt:7deg;animation-duration:8s;}   /* always outside the demo box; below 1400px there is no room, so it is off */
@media (max-width:1399px){.prop--pass{display:none;}}
.prop--case{bottom:0;left:2vw;--tilt:-8deg;animation-duration:9s;animation-delay:-3s;}   /* pinned to the demo box, so it never reaches the cards below */
.prop--polaroid{top:50%;left:5vw;margin-top:-140px;--tilt:-7deg;animation-duration:8.5s;animation-delay:-2s;}
.prop--ticket{bottom:56px;right:6vw;--tilt:-9deg;animation-duration:9.5s;animation-delay:-1s;}
.prop--stamp{top:24px;left:calc(50% + 300px);--tilt:-14deg;color:var(--sky-300);opacity:.55;mix-blend-mode:screen;animation:none;filter:none;}
@media (min-width:1600px){
  .prop--case{left:7vw;}
  .prop--polaroid{left:9vw;}
  .prop--ticket{right:10vw;}
}

/* boarding pass with a real tear line, notched top and bottom */
.pass{--cut:96px;display:flex;width:340px;background:var(--alabaster-100);color:var(--neutral-900);border-radius:12px;font-family:var(--font-body);
  -webkit-mask:radial-gradient(circle at calc(100% - var(--cut)) 0,transparent 9px,#000 9.5px),
    radial-gradient(circle at calc(100% - var(--cut)) 100%,transparent 9px,#000 9.5px);
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle at calc(100% - var(--cut)) 0,transparent 9px,#000 9.5px),
    radial-gradient(circle at calc(100% - var(--cut)) 100%,transparent 9px,#000 9.5px);
  mask-composite:intersect;}
.pass__main{flex:1;min-width:0;padding:12px 14px 12px 16px;border-right:2px dashed rgba(24,21,35,.28);}
.pass__top{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:8px;border-bottom:1px solid rgba(24,21,35,.14);margin-bottom:8px;}
.pass__top b{font-family:var(--font-heading);font-weight:600;font-size:15px;letter-spacing:.02em;color:var(--lavender-800);}
.pass__top span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--lavender-700);}
.pass__row{display:flex;gap:14px;}
.pass__row--bottom{margin-top:8px;padding-top:8px;border-top:1px solid rgba(24,21,35,.14);}
.pass__field{display:flex;flex-direction:column;gap:1px;min-width:0;}
.pass__field small{font-size:9px;line-height:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--neutral-500);}
.pass__field b{font-size:12px;line-height:15px;font-weight:700;color:var(--neutral-900);white-space:nowrap;}
.pass__route{display:flex;align-items:center;gap:12px;margin:8px 0 0;}
.pass__route > div{display:flex;flex-direction:column;}
.pass__route b{font-family:var(--font-heading);font-size:30px;line-height:1;font-weight:600;color:var(--neutral-900);}
.pass__route small{font-size:10px;line-height:12px;font-weight:600;color:var(--neutral-600);margin-top:2px;}
.pass__route svg{color:var(--coral-400);flex:none;}
.pass__stub{width:var(--cut);padding:12px 12px;background:var(--lavender-200);display:flex;flex-direction:column;gap:8px;}
.pass__stub .pass__field b{font-family:var(--font-heading);font-size:20px;line-height:1;font-weight:600;}
.pass__stub .pass__field + .pass__field b{font-family:var(--font-body);font-size:12px;line-height:15px;font-weight:700;}
.pass__code{font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--neutral-600);}
.pass__bars{display:block;width:100%;height:26px;opacity:.85;
  background:repeating-linear-gradient(90deg,var(--neutral-900) 0 2px,transparent 2px 4px,var(--neutral-900) 4px 5px,
    transparent 5px 8px,var(--neutral-900) 8px 11px,transparent 11px 13px);}

/* Polaroid */
.polaroid{width:190px;padding:10px 10px 40px;background:var(--web-paper);border-radius:4px;position:relative;}
.polaroid img{display:block;width:100%;aspect-ratio:1;object-fit:cover;}
.polaroid span{position:absolute;left:0;right:0;bottom:12px;text-align:center;font:500 15px/1 var(--font-body);color:var(--neutral-700);}

/* metro ticket */
.ticket{width:150px;height:92px;background:var(--grad-dawn);border-radius:6px;position:relative;padding:12px 12px 10px;color:var(--neutral-900);
  display:flex;flex-direction:column;justify-content:flex-end;gap:2px;}
.ticket__stripe{position:absolute;left:0;right:0;top:12px;height:14px;background:var(--neutral-900);opacity:.85;}
.ticket b{font-family:var(--font-heading);font-size:20px;line-height:1;}
.ticket small{font:500 11px/14px var(--font-body);color:var(--neutral-800);}

/* hard shell suitcase with the stickers it collected */
.case{position:relative;width:168px;padding-top:50px;}
.case__handle{position:absolute;left:50%;top:0;width:66px;height:62px;margin-left:-33px;box-sizing:border-box;
  border:7px solid var(--neutral-700);border-bottom:0;border-radius:12px 12px 0 0;}
.case__handle::before{content:"";position:absolute;left:8px;right:8px;top:-2px;height:9px;border-radius:5px;background:var(--neutral-800);}
.case__body{position:relative;height:206px;border-radius:22px;overflow:hidden;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 9px,transparent 9px 21px),linear-gradient(135deg,var(--lavender-400),var(--lavender-700));
  box-shadow:inset 0 0 0 3px rgba(24,21,35,.18),inset 0 -12px 20px rgba(24,21,35,.18),inset 0 10px 18px rgba(255,255,255,.14);}
.case__zip{position:absolute;left:0;right:0;top:42%;height:0;border-top:3px dashed rgba(255,255,255,.4);}
.case__wheel{position:absolute;bottom:-9px;width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--neutral-500) 0 4px,var(--neutral-900) 5px);}
.case__wheel--l{left:22px;}
.case__wheel--r{right:22px;}
.case__st{position:absolute;display:inline-flex;align-items:center;gap:4px;background:#fff;color:var(--neutral-900);border-radius:8px;
  padding:5px 8px;font:700 12px/1 var(--font-body);box-shadow:0 2px 6px rgba(4,10,30,.25);}
.case__st--rd{left:16px;top:22px;width:50px;height:50px;padding:0;border-radius:50%;justify-content:center;rotate:-10deg;}
.case__st--rd img{width:34px;height:34px;}
.case__st--cdmx{right:14px;top:34px;background:var(--sky-300);rotate:12deg;letter-spacing:.06em;}
.case__st--ny{right:18px;top:104px;rotate:7deg;}
.case__st--ny b{color:var(--coral-300);font-size:13px;}
.case__st--paris{left:18px;bottom:24px;rotate:-6deg;padding:5px 9px 5px 6px;}
.case__st--paris img{height:22px;width:auto;}
.case__st--paris em{font-style:normal;font-family:var(--font-heading);font-weight:500;font-size:12px;}

/* the shelf: below 1180px the props sit in a row above their section's content */
@media (max-width:1179px){
  .more__demo,.signup-section{overflow-x:clip;}   /* a tilted prop on the shelf may poke past the edge; never a sideways scroll */
  .prop{display:block;position:relative;top:auto;left:auto;right:auto;bottom:auto;margin:0;zoom:var(--shelf,.7);}   /* zoom, not scale: the shelf lays out the small size */
  .prop--pass{display:block;--shelf:.62;}
  .more__demo{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;gap:0 12px;}
  .more__demo .prop--case{--shelf:.62;grid-row:1;}
  .more__demo .prop--pass{grid-row:1;}
  .more__demo .askmax{grid-column:1 / -1;margin-top:-10px;}
  .signup-section{display:grid;grid-template-columns:auto auto auto;justify-content:center;align-items:center;gap:0 8px;}
  .signup-section .prop{--shelf:.6;}
  .signup-section .prop--stamp{--shelf:.55;opacity:.6;}
  .signup-section > .wrap{grid-column:1 / -1;margin-top:14px;}
}
@media (max-width:420px){
  .more__demo .prop--pass{--shelf:.5;}
  .more__demo .prop--case{--shelf:.55;}
  .signup-section .prop{--shelf:.48;}
}

/* ================= LIVE TIMES =================
   Beside the phone, typed like a terminal. Four cities, real local time, then the next four. */
.tty{display:none;flex:none;width:270px;margin-bottom:6px;color:#fff;
  font-family:var(--font-body);font-weight:500;font-size:var(--fs-body-md);line-height:26px;font-variant-numeric:tabular-nums;
  animation:rise-in .7s var(--easing-out) .5s both;}
.tty__head{color:var(--lavender-200);margin-bottom:6px;}
.tty__lines{list-style:none;margin:0;padding:0;min-height:88px;}
.tty__lines li{display:flex;align-items:baseline;gap:8px;white-space:pre;}
.tty__lines li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;translate:0 -1px;}
.tty__lines li.is-day::before{background:var(--web-sun);box-shadow:0 0 8px rgba(240,198,116,.8);}
.tty__lines li.is-night::before{background:var(--sky-100);box-shadow:0 0 8px rgba(195,231,246,.7);}
.tty__lines li.is-typing span::after{content:"";display:inline-block;width:7px;height:14px;margin-left:2px;translate:0 2px;
  background:var(--sky-300);animation:tty-blink 1s steps(1) infinite;}
@keyframes tty-blink{50%{opacity:0;}}
@media (min-width:1400px){.tty{display:block;}}
@media (prefers-reduced-motion:reduce){.tty{animation:none;}}

/* ================= ORBIT =================
   A ring of letters turning around the phone. Far half behind the phone and mirrored, near half in front.
   Fades happen on the two halves, never on the wrapper: a wrapper mid fade becomes its own stacking
   context and would drop the front half behind the phone until the fade ends. */
.orbit{display:block;position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;}
.orbit__tilt{position:absolute;left:0;top:0;width:0;height:0;perspective:1100px;transform-style:preserve-3d;
  transition:opacity .6s var(--easing-out) .05s;}
.orbit__tilt:first-child{z-index:4;}
.orbit__tilt:last-child{z-index:6;}
.orbit.is-spinning .orbit__tilt{opacity:0 !important;transition:opacity .18s ease-out;}   /* beats the script's inline fade */
.orbit__ring{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;transform:rotateX(-18deg);
  animation:orbit-spin 30s linear infinite;will-change:transform;}
.orbit__ring--back{z-index:4;}
.orbit__tilt:last-child .orbit__ring{z-index:6;}
.orbit__ring span{position:absolute;left:0;top:0;transform-origin:0 0;display:block;white-space:pre;will-change:transform;
  font-family:var(--font-heading);font-weight:600;font-size:21px;line-height:1;
  letter-spacing:0;   /* spacing comes from the slot, so every glyph sits centred on its own angle */
  color:var(--sky-300);-webkit-text-stroke:1px var(--neutral-900);paint-order:stroke fill;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;margin-top:-11px;}
.orbit__ring--back span{color:var(--lavender-300);opacity:.6;}
@keyframes orbit-spin{from{transform:rotateX(-18deg) rotateY(0deg);}to{transform:rotateX(-18deg) rotateY(-360deg);}}
@media (max-width:860px){
  .orbit__ring span{font-size:15px;margin-top:-8px;-webkit-text-stroke-width:.8px;}
  .p3-slot--a .orbit__tilt:first-child{z-index:4;}
  .p3-slot--a .orbit__tilt:last-child{z-index:6;}
}
@media (prefers-reduced-motion:reduce){.orbit__ring{animation:none;}}

/* ================= FOOTER =================
   Minimal: caps links and the copyright on one line, no rule. */
.footer{padding:32px 0 40px;text-align:left;border-top:0;font-size:var(--fs-body-sm);color:var(--color-text-muted);}
.footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 32px;}
.footer nav{display:flex;flex-wrap:wrap;gap:8px 32px;font-size:12px;line-height:1;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;}
.footer a{color:var(--color-text-muted);text-decoration:none;padding:8px 0;}
.footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px;}
@media (max-width:760px){
  .footer .wrap{flex-direction:column;gap:14px;}
  .footer nav{justify-content:center;gap:8px 24px;}
}

/* ================= LEGAL PAGES =================
   Darker ground, no blobs, body copy at AA+. On large screens the sections list stands on
   the left and follows the reading position. Only the title, date and list enter; the text stays still. */
.legal-page .sky{background:linear-gradient(180deg,var(--web-sky-5) 0%,var(--web-sky-6) 45%,var(--web-sky-7) 100%);background-size:100% 100%;animation:none;}
.legal-page .sky .blob{display:none;}
.legal-page .sky .grain{opacity:.08;}
.legal{max-width:760px;margin:0 auto;padding:var(--space-7) 22px var(--space-8);}
.legal h1{margin-bottom:var(--space-2);}
.legal .meta{color:var(--lavender-200);margin-bottom:var(--space-6);}
.legal h2{font-size:var(--fs-h5);line-height:var(--lh-h5);margin:var(--space-7) 0 var(--space-3);scroll-margin-top:90px;color:#fff;}
.legal p{margin:0 0 var(--space-4);color:var(--neutral-300);font-weight:300;line-height:1.6;}
.legal p strong{color:#fff;font-weight:600;}
.legal ul{margin:0 0 var(--space-4);padding-left:22px;color:var(--neutral-300);font-weight:300;line-height:1.6;}
.legal li{margin-bottom:6px;}
.toc{margin:0 0 var(--space-6);padding:0;list-style:none;columns:2;column-gap:var(--space-5);}
.toc li{break-inside:avoid;margin-bottom:2px;font-size:var(--fs-body-md);line-height:var(--lh-body-md);font-weight:500;}
.toc a{display:inline-block;padding-block:6px;text-decoration:none;color:var(--color-text-muted);}   /* 31px tall tap target on phones */
.toc a:hover{color:#fff;}
.legal > h1{animation:rise-in .7s var(--easing-out) both;}
.legal > .meta{animation:rise-in .7s var(--easing-out) .1s both;}
.legal > .toc{animation:fade-in .8s var(--easing-out) .2s both;}   /* opacity only: the list is sticky on desktop */
@media (max-width:560px){.toc{columns:1;}}
@media (min-width:1100px){
  .legal{max-width:1240px;display:grid;grid-template-columns:300px minmax(0,1fr);gap:0 var(--space-8);align-items:start;}   /* no row gap: every paragraph is a grid row */
  .legal h1,.legal .meta{grid-column:2;}
  .legal .toc{grid-column:1;grid-row:1 / span 200;position:sticky;top:130px;columns:1;margin:var(--space-7) 0 0;padding:0;
    display:flex;flex-direction:column;gap:10px;}
  .legal .toc li{margin:0;}
  .legal .toc a{display:block;padding-block:0;color:var(--color-text-muted);font-size:var(--fs-body-md);line-height:var(--lh-body-md);
    font-weight:500;transition:color .25s var(--easing-out);}
  .legal .toc a:hover,.legal .toc a.is-active{color:#fff;}
  .legal > :not(.toc){grid-column:2;}
}
@media (prefers-reduced-motion:reduce){.legal > h1,.legal > .meta,.legal > .toc{animation:none;}}

/* ================= 404 =================
   A lost tourist in a Polaroid, the 404 written on it like a caption. Enters like the hero. */
.notfound{padding:var(--space-8) 22px calc(var(--space-8) + var(--space-6));text-align:center;}
.notfound h1{font-size:var(--fs-h3);line-height:var(--lh-h3);margin:var(--space-4) 0 var(--space-3);}
.notfound .hero__cta{display:flex;justify-content:center;}
.notfound .comet{--comet-gap:var(--web-sky-5);}
.notfound .section__head > *{animation:rise-in .7s var(--easing-out) both;}
.notfound .section__head > h1{animation-delay:.12s;}
.notfound .section__head > .lede{animation-delay:.24s;}
.notfound .section__head > .hero__cta{animation-delay:.36s;}
.lostshot{display:flex;justify-content:center;margin:0 auto var(--space-5);}
.lostshot__card{width:250px;padding:12px 12px 48px;rotate:-4deg;filter:drop-shadow(0 18px 30px rgba(4,10,30,.45));
  animation:prop-drift 7s ease-in-out infinite;}
.lostshot__card video{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px;
  background:var(--web-lost-photo) url("../assets/loops/404-lost.jpg") center/cover no-repeat;}   /* no blink before the first frame */
.lostshot__card span{bottom:15px;font-size:17px;}
@media (prefers-reduced-motion:reduce){
  .notfound .section__head > *,.lostshot__card{animation:none;}
}