/* PocketGP. The game's showroom at night: the stage floor (#0b0b0d) is the page, and the game sits on it.
   Display type: Archivo (OFL, fonts/), the radio line in Archivo italic as in the game. Text: the system UI face.
   Static by default: every word and picture in a calm layout. html.anim (no reduced-motion request) lets the videos play
   and the radio line type; html.motion lets the boxes rise in as they arrive. js/motion.js writes no layout while
   scrolling. */
@font-face{font-family:'Archivo';src:url('../fonts/Archivo-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Archivo';src:url('../fonts/Archivo-Italic-var.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap;}

:root{
  --ground:#0b0b0d;
  --ink:#f4f2ed;
  --ink2:rgba(244,242,237,.62);
  --ink3:rgba(244,242,237,.54);
  --hair:rgba(244,242,237,.12);
  --box:#121215;
  --go:#5fd08a;          /* the radio's green (the old dot, now the wave's bars) */
  --wave-rgb:95,208,138; /* the wave's colour (js/motion.js reads it): the same green */
  --amber:#e9b65a;
  --err:#ff8f7d;
  --g:16px;
  --nav:48px;
  --max:1200px;
  --e:cubic-bezier(.2,.72,.2,1);
  --display:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --text:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
@media (min-width:734px){ :root{ --g:40px; --nav:52px; } }
@media (min-width:1068px){ :root{ --g:56px; } }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{background:var(--ground);color-scheme:dark;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;}
html.anim{scroll-behavior:smooth;}
body{background:var(--ground);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.47;letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-wrap:break-word;}
img{display:block;max-width:100%;}
a{color:inherit;}
button{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px;}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
p,h1,h2,h3{text-wrap:balance;}
figure{margin:0;}
[hidden]{display:none!important;}
i{font-style:normal;}

/* ---------- type ---------- */
.display{font-family:var(--display);font-weight:760;letter-spacing:-.034em;line-height:.98;color:var(--ink);}
.display,.h2,.lede,.box h3{overflow-wrap:normal;hyphens:manual;}
.h2{font-family:var(--display);font-weight:760;letter-spacing:-.036em;line-height:1;font-size:clamp(42px,7vw,104px);color:var(--ink);}
.h2-md{font-size:clamp(36px,5.4vw,80px);}
.lede{display:block;font-weight:600;font-size:clamp(21px,2.2vw,30px);line-height:1.2;letter-spacing:-.016em;color:var(--ink2);}
.lede span{display:inline-block;}
.silver{background:linear-gradient(180deg,#f4f2ed 8%,#a29e95 96%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;}
.wrap{max-width:calc(var(--max) + 2 * var(--g));margin:0 auto;
  padding-left:max(var(--g),env(safe-area-inset-left));padding-right:max(var(--g),env(safe-area-inset-right));}
.sec-head{text-align:center;}
.sec-head .lede{margin-top:14px;}

/* ---------- the local nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:calc(var(--nav) + env(safe-area-inset-top,0px));
  padding-top:env(safe-area-inset-top,0px);
  background:rgba(11,11,13,.7);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);
  border-bottom:1px solid rgba(244,242,237,.07);}
.nav .wrap{height:var(--nav);display:flex;align-items:center;justify-content:space-between;}
.nav-logo{display:block;line-height:0;}
.nav-logo img{height:20px;width:auto;}
.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;text-decoration:none;border:0;cursor:pointer;
  font-family:var(--text);font-weight:600;letter-spacing:-.01em;white-space:nowrap;
  background:var(--ink);color:var(--ground);transition:opacity .2s ease,transform .2s ease;}
.pill:hover{opacity:.86;}
.pill:active{transform:scale(.97);}
.pill-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(244,242,237,.32);height:46px;padding:0 22px;font-size:16px;white-space:normal;text-align:center;}
.pill-ghost:hover{opacity:1;background:rgba(244,242,237,.08);}
.nav .pill{font-size:13px;height:30px;padding:0 15px;transition:opacity .3s ease,transform .3s ease;}
/* while a sign-up form is on screen the nav's button steps back (beta.js), so one screen never repeats it */
.nav .pill.away{opacity:0;transform:scale(.92);pointer-events:none;}
@media (min-width:734px){ .nav-logo img{height:22px;} .nav .pill{font-size:14px;height:32px;padding:0 17px;} }

main{display:block;}
section{position:relative;}

/* ---------- the beta form (used twice) ---------- */
.beta{width:100%;max-width:460px;margin:0 auto;text-align:center;}
.beta-row{display:flex;gap:8px;visibility:hidden;}       /* shown only once beta.js has taken the form (html.beta-on) */
.beta-on .beta-row{visibility:visible;}
.field{position:relative;flex:1;min-width:0;}
.field input{display:block;width:100%;height:52px;padding:21px 15px 5px;border-radius:14px;
  border:1px solid rgba(244,242,237,.34);background:rgba(244,242,237,.06);color:var(--ink);
  font-family:var(--text);font-size:17px;line-height:1.2;letter-spacing:-.01em;
  -webkit-appearance:none;appearance:none;transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease;}
.field input:hover{border-color:rgba(244,242,237,.44);}
.field input:focus{outline:none;border-color:rgba(244,242,237,.7);background:rgba(244,242,237,.09);box-shadow:0 0 0 3px rgba(244,242,237,.14);}
.field label{position:absolute;left:16px;top:15px;font-size:17px;line-height:22px;color:var(--ink3);pointer-events:none;
  transform-origin:0 0;transition:transform .2s var(--e),color .2s ease;white-space:nowrap;}
.field input:focus + label,.field input:not(:placeholder-shown) + label{transform:translateY(-9px) scale(.7);color:var(--ink2);}
.beta-go{flex:none;height:52px;padding:0 20px;font-size:17px;}
.beta-go[disabled]{opacity:.55;cursor:default;transform:none;}
/* always rendered, empty and without height until it speaks, so screen readers know the live region from the start */
.beta-msg{display:block;margin-top:0;font-size:15px;line-height:1.4;color:var(--ink);text-wrap:balance;}
.beta-msg:not(:empty){margin-top:12px;}
.beta-msg:empty::before{display:none;}
.beta-msg::before{content:'';display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--ink3);vertical-align:1px;}
.beta-msg a{color:var(--ink);text-underline-offset:3px;}
.beta[data-state="error"] .beta-msg{color:var(--err);}
.beta[data-state="error"] .beta-msg::before{background:var(--err);}
.beta[data-state="error"] .field input{border-color:var(--err);}
.beta[data-state="soon"] .beta-msg::before{background:var(--amber);box-shadow:0 0 6px rgba(233,182,90,.7);}
.beta[data-state="ok"] .beta-msg::before{background:var(--go);box-shadow:0 0 6px rgba(95,208,138,.8);}
.beta.is-done .beta-row{display:none;}
.beta.is-done .beta-msg{margin-top:0;font-size:19px;font-weight:600;letter-spacing:-.014em;}
.beta-note{margin-top:12px;font-size:12px;line-height:1.5;color:var(--ink3);letter-spacing:0;}
.beta-note a{color:var(--ink2);text-underline-offset:2px;}
.beta-note a:hover{color:var(--ink);}
.beta-fail{display:none;font-size:15px;line-height:1.4;color:var(--ink2);}
/* no script at all, or beta.js did not load: no field to type into and no button, only a line that says so */
html:not(.js) .beta-row,.beta-off .beta-row{display:none;}
.beta-off .beta-fail{display:block;}
@media (max-width:349px){ .beta-row{flex-direction:column;} .beta-go{width:100%;} }

/* ---------- the pause / play button for moving pictures ---------- */
.vid-ctl{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;cursor:pointer;
  background:rgba(38,38,42,.62);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid rgba(244,242,237,.16);color:var(--ink);transition:background-color .2s ease,transform .2s ease;}
.vid-ctl:hover{background:rgba(58,58,64,.75);}
.vid-ctl:active{transform:scale(.94);}
.vid-ctl svg{width:13px;height:13px;fill:currentColor;}
.vid-ctl .i-play{display:none;}
.vid-ctl[data-state="paused"] .i-play{display:block;}
.vid-ctl[data-state="paused"] .i-pause{display:none;}
/* the area a finger can hit reaches past the drawn circle to 44 px (36 + 2 x 4; the 30 and 26 px ones below) */
.vid-ctl::before{content:'';position:absolute;inset:-4px;border-radius:50%;}

/* ==========================================================================================================
   1. HERO: the words, the sign-up, then one phone on its side standing on a surface, the helmet at its corner.
   The scene is drawn in units (--u, px per unit): the phone is 205.5 x 100 (its screen 2.162:1, the video's own shape,
   so nothing is cut), with --sl / --sr units of room to its left and right, --st above and --sb below for the floor,
   shadows and reflections. --u is the smallest of: the phone at --share of the content width, the scene at the screen's
   width, the height the words leave, and --umax.
   ========================================================================================================== */
.hero{display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-height:100svh;
  padding-top:calc(var(--nav) + env(safe-area-inset-top,0px));padding-bottom:clamp(10px,3vh,40px);overflow:clip;}
.hero-copy{position:relative;z-index:3;text-align:center;padding:clamp(14px,2.6vh,32px) var(--g) 0;}
.hero-title{font-size:clamp(32px,10.9vw,46px);}
.hero-title span{display:block;}
.hero-sub{margin:12px auto 0;max-width:24em;font-size:17px;line-height:1.35;font-weight:500;color:var(--ink2);letter-spacing:-.012em;}
.hero-sub span{display:inline-block;}
.hero .beta{margin-top:18px;}
@media (min-width:734px){
  .hero-title{font-size:clamp(46px,min(6.4vw,7.4vh),84px);}
  .hero-sub{margin-top:clamp(10px,1.6vh,16px);max-width:none;font-size:clamp(19px,min(1.7vw,2.5vh),24px);}
  .hero .beta{margin-top:clamp(16px,2.6vh,28px);}
}
/* a computer: the headline on one line, so the phone gets the height */
@media (min-width:1068px) and (min-aspect-ratio:5/4){
  .hero-title{font-size:clamp(46px,min(4.5vw,7.4vh),88px);}
  .hero-title span{display:inline;}
}

.stage{--sl:30;--sr:30;--st:3;--sb:30;--ho:24;--share:.66;--umax:4.4px;
  --sw:calc(var(--sl) + 205.5 + var(--sr));--sh:calc(var(--st) + 100 + var(--sb));
  --uw:min(calc(min(var(--max), 100vw - 2 * var(--g)) * var(--share) / 205.5),calc((100vw - 8px) / var(--sw)),var(--umax));
  position:relative;z-index:1;flex:1 1 0;min-height:150px;max-height:calc(var(--sh) * var(--uw));margin-top:clamp(10px,2.6vh,34px);}
/* a phone: the scene spans the screen; the phone's right edge and the pause button end on the gutter, flush with the
   form above, and the helmet hangs a little past the phone's left edge */
@media (max-width:733px){ .stage{--sl:21;--sr:7;--ho:18;--share:1;} }
@media (min-width:734px) and (max-width:1067px){ .stage{--share:.8;} }
@media (min-width:1800px) and (min-height:1100px){ .stage{--umax:5.2px;} }
.stage-box{position:absolute;inset:0;container-type:size;--u:min(var(--uw),calc(100cqh / var(--sh)));}
.stage-in{position:absolute;left:50%;top:50%;width:calc(var(--sw) * var(--u));height:calc(var(--sh) * var(--u));transform:translate(-50%,-50%);}
.stage .phone{left:calc(var(--sl) * var(--u));top:calc(var(--st) * var(--u));z-index:2;}
/* the pause control: small and quiet, on the floor just under the phone's right-hand corner */
.stage .vid-ctl{position:absolute;z-index:4;right:calc(var(--sr) * var(--u));top:calc((var(--st) + 100) * var(--u) + 12px);
  width:30px;height:30px;background:rgba(38,38,42,.42);border-color:rgba(244,242,237,.12);color:rgba(244,242,237,.78);}
.stage .vid-ctl svg{width:11px;height:11px;}
.stage .vid-ctl::before{inset:-7px;}

/* the surface, centred on the phone: a faint glow on the backdrop rising from the floor, a soft pool of light on the
   floor fading towards the viewer, and the floor line under the phone */
.stage .floor{position:absolute;z-index:0;pointer-events:none;left:calc(var(--sl) * var(--u));width:calc(205.5 * var(--u));top:0;
  height:calc((var(--st) + 100) * var(--u));}
.floor i{position:absolute;display:block;}
.stage .floor .wall{left:-45%;right:-45%;bottom:0;height:150%;
  background:radial-gradient(ellipse 48% 62% at 50% 100%,rgba(244,242,237,.08),rgba(244,242,237,.03) 52%,transparent 78%);}
.stage .floor .ground{left:-40%;right:-40%;top:100%;height:calc(64 * var(--u));
  background:radial-gradient(ellipse 52% 74% at 50% 0,rgba(244,242,237,.15),rgba(244,242,237,.065) 38%,rgba(244,242,237,.018) 70%,transparent 92%);}
.stage .floor .line{left:-34%;right:-34%;top:100%;height:1px;margin-top:-.5px;
  background:linear-gradient(90deg,transparent,rgba(244,242,237,.12) 18%,rgba(244,242,237,.26) 50%,rgba(244,242,237,.12) 82%,transparent);}

/* a drawn phone: generic, a clean slab with an even bezel and rounded corners (a satin metal frame, a black glass front,
   a faint sheen). No camera cut-out, no buttons: nothing that belongs to one maker's phone. */
.phone{position:absolute;}
.phone-side{width:calc(205.5 * var(--u));height:calc(100 * var(--u));}
.phone-up{width:calc(100 * var(--u));height:calc(205.5 * var(--u));}
.phone-body{position:absolute;inset:0;border-radius:calc(15.5 * var(--u));
  background:linear-gradient(150deg,#6b6b72 0%,#34343a 18%,#1b1b1f 42%,#26262b 62%,#4c4c53 86%,#76767d 100%);
  box-shadow:0 0 0 calc(.35 * var(--u)) rgba(0,0,0,.7),inset 0 0 0 calc(.3 * var(--u)) rgba(255,255,255,.22),
    0 calc(10 * var(--u)) calc(24 * var(--u)) rgba(0,0,0,.45);}
.phone-body::before{content:'';position:absolute;inset:calc(1.15 * var(--u));border-radius:calc(14.35 * var(--u));background:#040405;
  box-shadow:inset 0 0 0 calc(.25 * var(--u)) rgba(255,255,255,.05);}
.phone-screen{position:absolute;inset:calc(4.6 * var(--u));border-radius:calc(11 * var(--u));overflow:hidden;background:#152016;}
.phone-screen picture,.phone-screen img,.phone-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.phone-screen video{opacity:0;transition:opacity .5s ease;}
.phone-screen video.on{opacity:1;}
.phone-screen::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(118deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.02) 34%,transparent 35%);}
/* standing on the surface: a tight dark contact line and a wider soft shadow along the foot */
.phone-shadow{position:absolute;left:3%;right:3%;bottom:calc(-6 * var(--u));height:calc(12 * var(--u));pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,0,0,.9),rgba(0,0,0,.5) 40%,rgba(0,0,0,.14) 72%,transparent);}
.phone-shadow::after{content:'';position:absolute;left:9%;right:9%;top:50%;height:calc(1.8 * var(--u));margin-top:calc(-.9 * var(--u));
  border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.95),rgba(0,0,0,.6) 60%,transparent);}
/* the faint reflection: the phone mirrored at its foot, fading within a quarter of its height */
.phone-refl{position:absolute;left:0;right:0;top:100%;height:100%;transform:scaleY(-1);opacity:.13;pointer-events:none;
  -webkit-mask-image:linear-gradient(to top,#000 0,rgba(0,0,0,.4) 10%,transparent 26%);mask-image:linear-gradient(to top,#000 0,rgba(0,0,0,.4) 10%,transparent 26%);}
.phone-refl .phone-body{box-shadow:none;}

/* the helmet: the game's own render, visor towards the phone, sitting on the floor a little in front of it and covering
   its bottom-left corner (58 units tall, its foot 5 units nearer the viewer than the phone's). It casts a soft shade to
   the right onto the screen beside the chin and visor, so it stands in front of the phone, and sits a touch darker than
   the studio render so it belongs to the dark showroom. */
.helmet{position:absolute;z-index:3;--hh:52;--hd:5;
  /* helmet-flat (2026-10-15, his ask: 'the entire helmet sitting on the surface'): rendered level with the floor, so its
     chin and back rest on one line; that contact line is 97.75% down the picture (1.1994 wide per 1 tall) */
  left:calc((var(--sl) - var(--ho)) * var(--u));top:calc((var(--st) + 100 + var(--hd) - var(--hh) * .9775) * var(--u));
  width:calc(var(--hh) * 1.1994 * var(--u));height:calc(var(--hh) * var(--u));}
.helmet picture,.helmet img{display:block;width:100%;height:100%;}
.helmet-img{position:relative;z-index:1;}
.helmet-img img{filter:brightness(.9) drop-shadow(calc(2.4 * var(--u)) calc(-.4 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.55))
  drop-shadow(calc(.6 * var(--u)) calc(1.4 * var(--u)) calc(2.2 * var(--u)) rgba(0,0,0,.5));}
.helmet-shadow{position:absolute;left:5%;right:-1%;bottom:calc(-3.6 * var(--u));height:calc(9.5 * var(--u));
  background:radial-gradient(closest-side,rgba(0,0,0,.95),rgba(0,0,0,.62) 42%,rgba(0,0,0,.16) 76%,transparent);}
.helmet-refl{position:absolute;left:0;right:0;top:95.5%;height:100%;transform:scaleY(-1);opacity:.1;
  -webkit-mask-image:linear-gradient(to top,#000 0,transparent 24%);mask-image:linear-gradient(to top,#000 0,transparent 24%);}

/* the hero's entrance (html.anim): the words rise, then the scene rises a few px out of the dark */
.anim .hero-title span{opacity:0;transform:translate3d(0,26px,0);animation:rise 1.1s var(--e) .05s forwards;}
.anim .hero-title span + span{animation-delay:.18s;}
.anim .hero-sub,.anim .hero .beta{opacity:0;animation:fade .9s ease .4s forwards;}
.anim .hero .beta{animation-delay:.5s;}
.anim .stage-in{opacity:0;animation:stage-in 1.4s var(--e) .35s forwards;}
@keyframes rise{to{opacity:1;transform:none;}}
@keyframes fade{to{opacity:1;}}
@keyframes stage-in{from{opacity:0;transform:translate(-50%,calc(-50% + 12px));}to{opacity:1;transform:translate(-50%,-50%);}}

/* ==========================================================================================================
   2. CASUAL BY DESIGN: the bento, seven boxes in sizes that vary at every width.
   A phone and a tablet: two columns, crafted and key moments wide, tracks beside perspective, simple beside two ways,
   then race anywhere wide (its words beside the phone from a tablet up).
   A computer, 12 columns: crafted (8 x 2 rows) | tracks over perspective, then key moments over a short simple strip
   (8) | two ways, tall (4 x 2 rows), then race anywhere across the whole width.
   ========================================================================================================== */
.casual{padding:clamp(96px,12vw,170px) 0 clamp(90px,11vw,160px);}
.casual .wrap{container-type:inline-size;}
.bento{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:clamp(40px,5vw,72px);}
.b-craft,.b-moments,.b-offline{grid-column:1 / -1;}
.box{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:28px;background:var(--box);
  box-shadow:inset 0 0 0 1px rgba(244,242,237,.07);isolation:isolate;}
.box-txt{position:relative;z-index:2;padding:28px 26px 0;}
.box h3{font-family:var(--display);font-weight:760;font-size:clamp(26px,7.2vw,30px);line-height:1.04;letter-spacing:-.03em;color:var(--ink);}
.box-txt p{margin-top:8px;font-size:17px;line-height:1.36;font-weight:500;letter-spacing:-.012em;color:var(--ink2);}
.box-media{position:relative;}
.box .vid-ctl{position:absolute;right:16px;bottom:16px;z-index:3;}
/* a small honest line inside a box */
.box-note{position:relative;z-index:2;font-size:12px;line-height:1.4;letter-spacing:0;color:var(--ink3);}
/* the half-width boxes on a phone: tighter words */
@media (max-width:733px){
  .bento{gap:10px;}
  .b-tracks,.b-view,.b-simple,.b-ways{border-radius:24px;}
  .b-tracks .box-txt,.b-view .box-txt,.b-simple .box-txt,.b-ways .box-txt{padding:20px 15px 0;}
  .b-tracks h3,.b-view h3,.b-simple h3,.b-ways h3{font-size:clamp(19px,5.8vw,23px);}
  .b-tracks .box-txt p,.b-view .box-txt p,.b-simple .box-txt p,.b-ways .box-txt p{font-size:14px;line-height:1.36;margin-top:6px;}
}

/* 1. crafted: the turning scene; its stage light fades into the box on every side */
.box-media.craft{margin-top:6px;aspect-ratio:5/4;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 22%,#000 74%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%),linear-gradient(180deg,transparent 0,#000 22%,#000 74%,transparent 100%);
  mask-composite:intersect;}
.box-media.craft picture,.box-media.craft img,.box-media.craft video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%;}
.box-media.craft video{opacity:0;transition:opacity .5s ease;}
/* his note (Oct 27): the car was too big in this box on phones and tablets: the turning scene is drawn smaller, its own
   edges fading into the card so no seam shows (desktop's two-column card already frames it right) */
@media (max-width:1067px){
  .box-media.craft picture,.box-media.craft img,.box-media.craft video{transform:scale(.8);
    -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%);}
}
.box-media.craft video.on{opacity:1;}
.b-craft .box-note{position:absolute;left:26px;bottom:24px;right:70px;}

/* 2 and 3: the world pictures come up out of the dark under their words */
.pic-box .box-media{flex:1;min-height:150px;margin-top:14px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 26%);mask-image:linear-gradient(180deg,transparent 0,#000 26%);}
.pic-box .box-media picture,.pic-box .box-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.b-tracks .box-media img{object-position:30% 60%;}
.b-view .box-media img{object-position:50% 55%;}

/* 4. key moments: the whole-car pit picture as a card, the radio line overlapping its corner */
.box-media.moments{--cs:1.62px;margin-top:auto;padding:calc(22 * var(--cs) + 18px) 16px 16px;}
.pit-pic{position:relative;overflow:hidden;border-radius:16px;aspect-ratio:1420/568;background:#1d211c;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 18px 40px rgba(0,0,0,.45);}
.pit-pic picture,.pit-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.moments .box-note{margin-top:12px;padding-left:2px;}

/* the radio line in the game's chip, new look: a glass box, a row of thin glowing bars above the words, then the
   words. Every number is the game's own chip times --cs. */
.radio{position:absolute;z-index:2;left:6px;top:18px;display:inline-flex;align-items:baseline;justify-content:center;
  width:max-content;min-width:calc(77 * var(--cs));max-width:calc(100% - 12px);
  padding:calc(21 * var(--cs)) calc(10 * var(--cs)) calc(5 * var(--cs)) calc(9 * var(--cs));border-radius:calc(10 * var(--cs));
  background:rgba(12,12,14,.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 10px rgba(0,0,0,.35),0 calc(10 * var(--cs)) calc(26 * var(--cs)) rgba(0,0,0,.35);
  font-family:'Archivo',var(--text);font-style:italic;font-weight:400;font-size:calc(10.5 * var(--cs));line-height:1.4;
  letter-spacing:.005em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);text-align:left;white-space:nowrap;}
.radio .rw{position:absolute;left:calc(9 * var(--cs));top:calc(4 * var(--cs));width:calc(100% - 19 * var(--cs));height:calc(14 * var(--cs));pointer-events:none;}
.radio .rest{color:transparent;text-shadow:none;}
.radio.typing .typed::after{content:'';display:inline-block;width:2px;height:1em;margin-left:2px;margin-right:-4px;vertical-align:-2px;
  background:currentColor;opacity:.75;animation:radioCaret 1s steps(1) infinite;}
@keyframes radioCaret{50%{opacity:0;}}

/* 5. casual means simple: the drawn gem */
.box-media.gem{flex:1;display:grid;place-items:center;padding:18px 0 26px;}
.box-media.gem picture{display:block;width:clamp(96px,62%,190px);}
.box-media.gem img{width:100%;height:auto;}

/* 6. two ways: the upright phone standing on the box's floor, sized by the box's width */
.box-media.ways{flex:1;display:flex;flex-direction:column;justify-content:flex-end;container-type:inline-size;}
.ways-stage{position:relative;--u:calc(100cqw * .62 / 100);height:calc(217.5 * var(--u) + 20px);}
.ways-stage .phone{left:50%;bottom:calc(12 * var(--u));transform:translateX(-50%);}
.ways-stage .floor{position:absolute;left:0;right:0;bottom:0;height:calc(12 * var(--u));pointer-events:none;}
.ways-stage .floor .ground{left:0;right:0;top:0;height:100%;
  background:radial-gradient(ellipse 50% 100% at 50% 0,rgba(244,242,237,.1),rgba(244,242,237,.035) 50%,transparent 88%);}
.ways-stage .vid-ctl{right:auto;left:calc(50% + 50 * var(--u) + 12px);bottom:calc(12 * var(--u));width:30px;height:30px;
  background:rgba(38,38,42,.42);border-color:rgba(244,242,237,.12);color:rgba(244,242,237,.78);}
.ways-stage .vid-ctl svg{width:11px;height:11px;}
.ways-stage .vid-ctl::before{inset:-7px;}
/* a phone: a larger phone, standing a little higher so its pause button sits on the floor under its right-hand corner
   (as in the first screen), clear of the box's rounded corner, its 44 px hit area inside the box */
@media (max-width:733px){
  .ways-stage{--u:calc(100cqw * .64 / 100);height:calc(217.5 * var(--u) + 52px);}
  .ways-stage .phone{bottom:calc(12 * var(--u) + 36px);}
  .ways-stage .floor{bottom:36px;}
  .ways-stage .vid-ctl{left:auto;right:calc(50% - 50 * var(--u));bottom:10px;width:26px;height:26px;}
  .ways-stage .vid-ctl svg{width:10px;height:10px;}
  .ways-stage .vid-ctl::before{inset:-9px;}
  /* the crafted box's honest line sits under the turning scene on a phone, clear of the car */
  .b-craft .box-note{position:static;padding:0 64px 24px 26px;margin-top:-4px;}
}

/* 7. race anywhere: the same race on a phone on its side, still running, and an airplane mode switch drawn for this page
   on its top-left corner (a glass chip like the radio's): the signal bars fade out, our own airplane glyph lights in the
   radio's green, the knob slides across. On by default (no script, reduced motion); js/motion.js sets data-state="off"
   and turns it on once the chip is well into view. The phone is sized by the box's width (--u, px per unit). */
.box-media.offline{flex:1;display:flex;flex-direction:column;justify-content:flex-end;container-type:inline-size;}
.air-stage{position:relative;--u:calc(min(100cqw * .8, 460px) / 205.5);--top:40px;--k:1;
  height:calc(var(--top) + 100 * var(--u) + 48px);margin-top:12px;}
.air-stage .phone{left:50%;top:var(--top);transform:translateX(-50%);}
.air-stage .floor{position:absolute;left:0;right:0;top:calc(var(--top) + 100 * var(--u));height:calc(16 * var(--u));pointer-events:none;}
.air-stage .floor .ground{left:0;right:0;top:0;height:100%;
  background:radial-gradient(ellipse 50% 100% at 50% 0,rgba(244,242,237,.1),rgba(244,242,237,.035) 50%,transparent 88%);}
/* the pause control: on the floor just under the phone's right-hand corner, as on the first screen */
.air-stage .vid-ctl{right:calc(50% - 102.75 * var(--u));bottom:auto;top:calc(var(--top) + 100 * var(--u) + 11px);width:30px;height:30px;
  background:rgba(38,38,42,.42);border-color:rgba(244,242,237,.12);color:rgba(244,242,237,.78);}
.air-stage .vid-ctl svg{width:11px;height:11px;}
.air-stage .vid-ctl::before{inset:-7px;}
/* the chip: above the phone's top-left corner, resting on its frame and hanging a little past its left edge */
.air{position:absolute;z-index:3;left:calc(50% - 102.75 * var(--u) - 10px);top:calc(var(--top) - 42px * var(--k) + 8px);
  display:flex;align-items:center;gap:calc(11px * var(--k));height:calc(42px * var(--k));padding:0 calc(10px * var(--k)) 0 calc(12px * var(--k));
  border-radius:calc(13px * var(--k));background:rgba(12,12,14,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 2px 10px rgba(0,0,0,.35),0 12px 30px rgba(0,0,0,.35);}
.air-sig{position:relative;flex:none;width:calc(20px * var(--k));height:calc(20px * var(--k));}
.air-sig svg{position:absolute;display:block;}
.air-bars{left:calc(1.5px * var(--k));top:calc(3.5px * var(--k));width:calc(17px * var(--k));height:calc(13px * var(--k));fill:var(--ink);}
.air-bars rect{transform-box:fill-box;transform-origin:50% 100%;opacity:0;transform:scaleY(.25);transition:opacity .3s ease,transform .36s var(--e);}
.air-bars rect:nth-child(4){transition-delay:.12s;}
.air-bars rect:nth-child(3){transition-delay:.2s;}
.air-bars rect:nth-child(2){transition-delay:.28s;}
.air-bars rect:nth-child(1){transition-delay:.36s;}
.air-plane{inset:0;width:100%;height:100%;fill:var(--go);filter:drop-shadow(0 0 calc(3px * var(--k)) rgba(95,208,138,.7));
  transition:opacity .5s ease .42s,transform .8s var(--e) .42s;}
.air-sw{position:relative;flex:none;width:calc(38px * var(--k));height:calc(22px * var(--k));border-radius:999px;
  border:1px solid rgba(95,208,138,.55);background:rgba(95,208,138,.16);transition:border-color .4s ease .18s,background-color .4s ease .18s;}
.air-sw i{position:absolute;top:50%;left:calc(2px * var(--k));width:calc(16px * var(--k));height:calc(16px * var(--k));margin-top:calc(-8px * var(--k));
  border-radius:50%;background:var(--go);box-shadow:0 0 calc(8px * var(--k)) rgba(95,208,138,.8);transform:translateX(calc(16px * var(--k)));
  transition:transform .6s var(--e),background-color .3s ease .2s,box-shadow .5s ease .28s;}
/* off: four bars, no airplane, the knob home and grey (set by js/motion.js until the chip arrives) */
.air[data-state="off"] .air-bars rect{opacity:1;transform:none;transition-delay:0s;}
.air[data-state="off"] .air-plane{opacity:0;transform:translate(-18%,18%) scale(.7);transition-delay:0s;}
.air[data-state="off"] .air-sw{border-color:rgba(244,242,237,.26);background:rgba(244,242,237,.05);transition-delay:0s;}
.air[data-state="off"] .air-sw i{transform:none;background:rgba(244,242,237,.62);box-shadow:0 0 0 rgba(95,208,138,0);transition-delay:0s;}
.b-offline .box-note{padding:4px 26px 24px;}

@media (min-width:734px){
  .bento{gap:16px;}
  .box-txt{padding:34px 34px 0;}
  .box h3{font-size:clamp(28px,3.4vw,34px);}
  .box-txt p{font-size:18px;}
  .b-craft .box-media.craft{aspect-ratio:16/9;}
  .b-craft .box-note{left:34px;bottom:28px;}
  .pic-box .box-media{min-height:200px;}
  .box-media.moments{--cs:2px;padding:calc(22 * var(--cs) + 22px) 26px 26px;}
  .radio{left:12px;top:22px;}
  /* race anywhere, a tablet and up: the words on the left, the phone on the right */
  .b-offline{flex-direction:row;}
  .b-offline .box-txt{flex:0 0 40%;align-self:center;padding-bottom:64px;}
  .b-offline .box-media.offline{padding:20px 26px 8px 0;}
  .air-stage{--k:1.12;--top:46px;margin-top:0;}
  .b-offline .box-note{position:absolute;left:34px;bottom:28px;width:calc(40% - 40px);padding:0;}
}
@media (min-width:1068px){
  .bento{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:27cqw 27cqw auto 17cqw auto;gap:20px;}
  .b-craft{grid-column:1 / 9;grid-row:1 / 3;}
  .b-tracks{grid-column:9 / 13;grid-row:1;}
  .b-view{grid-column:9 / 13;grid-row:2;}
  .b-moments{grid-column:1 / 9;grid-row:3;}
  .b-simple{grid-column:1 / 9;grid-row:4;flex-direction:row;align-items:center;}
  .b-ways{grid-column:9 / 13;grid-row:3 / 5;}
  .b-offline{grid-column:1 / 13;grid-row:5;}
  .b-offline .box-note{left:clamp(30px,3cqw,40px);bottom:clamp(26px,2.6cqw,34px);}
  .box-txt{padding:clamp(30px,3cqw,40px) clamp(30px,3cqw,40px) 0;}
  .box h3{font-size:clamp(28px,2.6cqw,32px);}
  .b-craft h3{font-size:clamp(36px,3.6cqw,44px);}
  .box-txt p{font-size:clamp(17px,1.55cqw,19px);}
  .b-craft .box-media.craft{flex:1;aspect-ratio:auto;margin-top:0;}
  .b-craft .box-note{left:clamp(30px,3cqw,40px);bottom:clamp(26px,2.6cqw,34px);}
  .pic-box .box-media{min-height:0;}
  .box-media.moments{--cs:2.2px;padding:calc(22 * var(--cs) + 16px) 32px 30px;}
  .radio{left:14px;top:16px;}
  .b-simple .box-txt{flex:1;padding-bottom:clamp(30px,3cqw,40px);}
  .b-simple .box-media.gem{flex:none;width:34%;align-self:stretch;padding:14px 0;}
  .b-simple .box-media.gem picture{width:min(150px,80%);}
  .ways-stage{--u:calc(100cqw * .68 / 100);}   /* the tall box: the phone fills it under the words */
}

/* ==========================================================================================================
   3. THE NOTE, 4. JOIN THE BETA, 5. FOLLOW THE PROGRESS
   ========================================================================================================== */
.note{padding:clamp(110px,14vw,200px) 0 clamp(80px,10vw,140px);border-top:1px solid var(--hair);}
.letter{max-width:33em;margin:0 auto;}
.note .eyebrow{font-size:15px;font-weight:600;color:var(--ink3);letter-spacing:-.005em;}
.letter p{margin-top:1.05em;font-size:clamp(19px,1.8vw,22px);line-height:1.62;letter-spacing:-.012em;color:rgba(244,242,237,.82);text-wrap:pretty;}
.letter p:first-of-type{margin-top:26px;font-size:clamp(24px,2.5vw,32px);line-height:1.36;color:var(--ink);letter-spacing:-.022em;font-weight:600;}
.letter .sig{margin-top:40px;font-size:20px;font-weight:500;line-height:1;letter-spacing:.06em;color:var(--ink2);}
.letter .sig::before{content:'';display:block;width:32px;height:1px;background:var(--ink3);margin-bottom:18px;}

.join{padding:clamp(40px,6vw,90px) 0 clamp(110px,13vw,180px);text-align:center;scroll-margin-top:var(--nav);}
.join-title{font-size:clamp(44px,7.6vw,116px);}
.join .beta{margin-top:clamp(26px,3.4vw,40px);}

.progress{padding:clamp(96px,12vw,170px) 0 clamp(90px,11vw,150px);border-top:1px solid var(--hair);scroll-margin-top:var(--nav);}
.posts{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:clamp(36px,4.6vw,64px);}
.post-card{display:flex;flex-direction:column;overflow:hidden;border-radius:22px;background:var(--box);text-decoration:none;
  box-shadow:inset 0 0 0 1px rgba(244,242,237,.07);transition:background-color .25s ease;}
.post-card:hover{background:#18181c;}
.post-card .thumb{position:relative;aspect-ratio:16/9;overflow:hidden;}
.post-card picture,.post-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--e);}
.post-card:hover img{transform:scale(1.03);}
.post-card .txt{padding:20px 22px 24px;}
.post-card h3{font-family:var(--display);font-weight:720;font-size:22px;line-height:1.1;letter-spacing:-.024em;color:var(--ink);}
.post-card p{margin-top:8px;font-size:15px;line-height:1.42;color:var(--ink2);}
/* the post's date, small and muted like the page's other labels; it sits on the card's last line so the dates line up
   across a row */
.post-card .txt{flex:1 0 auto;display:flex;flex-direction:column;}
.post-card .post-date{margin-top:auto;padding-top:12px;font-size:13px;font-weight:600;line-height:1.3;letter-spacing:0;color:var(--ink3);}
.follow{margin-top:clamp(32px,4vw,52px);text-align:center;}
/* two columns from 734px up, so four notes sit two by two; an odd last note takes the full row */
@media (min-width:734px){
  .posts{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
  .post-card:last-child:nth-child(odd){grid-column:1 / -1;}
}
@media (min-width:1068px){
  .posts{gap:20px;}
}

/* foot */
.foot{border-top:1px solid var(--hair);padding:22px 0 calc(36px + env(safe-area-inset-bottom,0px));font-size:12px;line-height:1.5;color:var(--ink3);}
.foot nav{display:flex;flex-wrap:wrap;gap:0 22px;}
.foot nav a{display:inline-block;padding:9px 0;font-size:13px;color:var(--ink2);text-decoration:none;}
.foot nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
.foot p{margin-top:8px;max-width:760px;letter-spacing:0;}

/* reveals (html.motion): each box and line rises in once as it arrives */
.motion [data-reveal]{opacity:0;transform:translate3d(0,32px,0);transition:opacity 1s var(--e),transform 1.2s var(--e);transition-delay:var(--d,0s);}
.motion [data-reveal].in{opacity:1;transform:none;}

/* big screens (a 27 inch display): the same page, a size up */
@media (min-width:1800px){
  :root{--max:1440px;--g:72px;}
  .h2{font-size:clamp(104px,5.4vw,132px);}
  .h2-md{font-size:clamp(80px,4.2vw,104px);}
  .lede{font-size:clamp(30px,1.5vw,38px);}
  .letter{max-width:36em;}
  .letter p{font-size:25px;}
  .letter p:first-of-type{font-size:36px;}
  .join-title{font-size:clamp(116px,6vw,150px);}
  .beta{max-width:520px;}
  .foot{font-size:13px;}
}

/* a phone held on its side: short screens */
@media (max-height:520px) and (orientation:landscape){
  .hero{justify-content:flex-start;}
  .hero-title{font-size:clamp(30px,5.4vw,52px);}
  .hero-title span{display:inline;}
  .hero-sub{font-size:17px;margin-top:8px;}
  .hero .beta{margin-top:14px;}
  .stage{flex:none;height:min(80vh,calc(var(--sh) * var(--uw)));max-height:none;}
  .h2{font-size:clamp(32px,5.4vw,56px);}
  .lede{font-size:19px;}
}

/* very narrow (a phone with the page zoomed in): the big words step down so no word is wider than the screen */
@media (max-width:340px){
  .h2{font-size:min(42px,12.5vw);}
  .h2-md{font-size:min(36px,11vw);}
  .join-title{font-size:12.5vw;}
  .box h3{font-size:min(26px,8.4vw);}
}
@media (max-width:300px){ .nav-logo img{height:15px;} .nav .pill{font-size:12px;height:28px;padding:0 11px;} }