/* produpoint.com home page (s279). Ported by hand from the page the owner approved in s278 (design record:
   docs/design/s276-home/). Night is the only palette and Hanken Grotesk the only face; the four other pages
   keep style.css. Comments say why; the values are TOKENS.md's. */

@font-face{font-family:"Hanken Grotesk";src:url(/fonts/hanken-grotesk-latin-var.woff2) format("woff2");font-weight:100 900;font-display:swap}

/* ---- tokens: every colour on the page is one of these (Night, the owner's pick) ------------------------- */
:root{
  --ground:#14151c; --surface:#192233; --ink:#f5f3f3; --muted:color-mix(in srgb,#f5f3f3 74%,#14151c);
  --band:#192233; --band-ink:#f5f3f3; --win:#1c2230; --mark:#f96a16; --logo:#f96a16;
  --accent:#f96a16; --on-accent:#14151c; --accent-text:#f96a16; --band-accent:#f96a16;
  --rule:color-mix(in srgb,var(--ink) 15%,var(--ground));
  --rule-strong:var(--ink);
  --band-muted:color-mix(in srgb,var(--band-ink) 76%,var(--band));
  --band-rule:color-mix(in srgb,var(--band-ink) 18%,var(--band));
  --header-bg:color-mix(in srgb,var(--ground) 90%,transparent);
  --win-ink:var(--ink);
  --win-muted:color-mix(in srgb,var(--ink) 72%,var(--win));
  --win-edge:color-mix(in srgb,var(--ink) 15%,var(--win));
  --win-bar:color-mix(in srgb,var(--ink) 4%,var(--win));
  --you:color-mix(in srgb,var(--ink) 8%,var(--win));
  --pick:color-mix(in srgb,var(--ink) 5%,var(--win));
  --shadow-c:color-mix(in srgb,black 34%,transparent);
  --focus:var(--ink);
  --env-banner-bg:#B00020; --env-banner-ink:#FFFFFF; --env-banner-h:2.1rem;
  color-scheme:dark;
  /* type: one family, the logotype's face */
  --font-display:"Hanken Grotesk", system-ui, sans-serif;
  --font-text:"Hanken Grotesk", system-ui, sans-serif;
  --w-display:600; --track-display:-.035em;
  /* the type scale: every text on the page uses one of these 7 */
  --t1:.75rem; --t2:.875rem; --t3:1rem; --t4:1.25rem;
  --t5:clamp(1.375rem,1.7vw,1.75rem);
  --t6:clamp(1.625rem,2.6vw,2.5rem);
  --t7:clamp(2.5rem,4.4vw,4.25rem);
  /* spacing scale: 4, 8, 12, 16, 24, 40, 64, and the section padding */
  --sp1:.25rem; --sp2:.5rem; --sp2x:.75rem; --sp3:1rem; --sp4:1.5rem; --sp5:2.5rem; --sp6:4rem; --sp7:clamp(3.5rem,6vw,5.5rem);
  --pad:clamp(1.25rem,4vw,4rem); --hdr:4rem; --bleed:7vw;
  --ease:cubic-bezier(.75,0,.25,1);
}

/* ---- base ---------------------------------------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:calc(var(--hdr) + 1rem)}
body{background:var(--ground);color:var(--ink);font-family:var(--font-text);font-size:var(--t3);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
p,summary,dd,.opt span,.where td,.person span{text-wrap:pretty}
.qs summary{text-wrap:balance}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--font-display);font-weight:var(--w-display);letter-spacing:var(--track-display);text-wrap:balance}
h2{font-size:var(--t6);line-height:1.08;max-width:22ch}
.lead{font-size:var(--t4);line-height:1.45;color:var(--muted);max-width:44ch;margin-top:var(--sp3)}
.mark{width:28px;height:28px;color:var(--mark);flex:none;display:block}
.sprite{position:absolute}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--sp3);top:var(--sp3);z-index:50;background:var(--ground);padding:var(--sp2) var(--sp3)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:var(--sp2x) var(--sp4);border-radius:10px;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:var(--t2);line-height:1.2;text-decoration:none;white-space:nowrap;transition:transform .2s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.textlink{font-weight:700;text-underline-offset:.2em;color:var(--accent-text)}
section{padding:var(--sp7) var(--pad)}

/* ---- header ---------------------------------------------------------------------------------------------- */
header{position:sticky;top:0;z-index:30;height:var(--hdr);background:var(--header-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.nav{height:100%;display:flex;align-items:center;gap:var(--sp5);padding:0 var(--pad)}
.brand{display:flex;align-items:center;gap:var(--sp2);min-height:44px;font-family:var(--font-display);font-weight:700;font-size:var(--t4);letter-spacing:-.01em;text-decoration:none}
.links{display:flex;align-items:center;gap:var(--sp4);margin-left:auto;font-size:var(--t2)}
.links a:not(.btn){text-decoration:none;padding:var(--sp2x) 0}
.links a:not(.btn):hover{text-decoration:underline;text-underline-offset:.25em}
.navmenu{display:none;margin-left:auto;position:relative}
.navmenu summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;padding:0 var(--sp3);border-radius:10px;box-shadow:inset 0 0 0 1.5px var(--ink);font-weight:600;font-size:var(--t2)}
.navmenu summary::-webkit-details-marker{display:none}
.navmenu .drop{position:absolute;right:0;top:calc(100% + var(--sp2));min-width:15rem;background:var(--ground);border:1px solid var(--rule);border-radius:12px;padding:var(--sp2);display:grid;box-shadow:0 30px 60px -30px var(--shadow-c)}
.navmenu .drop a{padding:var(--sp2x) var(--sp3);text-decoration:none;border-radius:8px;font-size:var(--t3)}
.navmenu .drop a:hover{background:var(--you)}
.navmenu[open] .drop{animation:drop .25s var(--ease) both}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---- the app window: the Claude desktop app's Code tab, drawn plainly ---------------------------------- */
/* its inner paddings follow the drawn app, not the page scale (listed in TOKENS.md) */
.win{background:var(--win);color:var(--win-ink);border:1px solid var(--win-edge);border-radius:14px;box-shadow:0 60px 100px -60px var(--shadow-c),0 2px 8px -4px var(--shadow-c);overflow:clip;display:flex;flex-direction:column;font-family:var(--font-text);text-align:left}
.win-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:44px;padding:0 var(--sp3);background:var(--win-bar);border-bottom:1px solid var(--win-edge);font-size:var(--t2);color:var(--win-muted)}
.dots{display:flex;gap:var(--sp2)}.dots i{width:11px;height:11px;border-radius:50%;background:var(--win-edge)}
.tabs{display:flex;gap:2px;padding:3px;border-radius:9px;background:var(--you)}
.tabs span{padding:2px var(--sp2x);border-radius:7px}
.tabs .on{background:var(--win);color:var(--win-ink);font-weight:600}
.proj{justify-self:end}
.convo{display:grid;gap:var(--sp3);padding:var(--sp4) var(--sp5);font-size:var(--t3);line-height:1.55;align-content:start}
.convo p{max-width:33em}
.who{display:flex;align-items:center;gap:var(--sp2);font-weight:700}
.who .mark{width:24px;height:24px;color:var(--logo)}
.where{width:100%;border-collapse:collapse;font-size:var(--t2)}
.where th{text-align:left;font-weight:600;color:var(--win-muted);padding:0 var(--sp3) var(--sp2) 0}
.where td{border-top:1px solid var(--win-edge);padding:var(--sp2) var(--sp3) var(--sp2) 0;vertical-align:top}
.where .st{font-weight:700;white-space:nowrap}
.where .st.now{color:var(--accent-text)}
.where .done{color:var(--win-muted)}
.ask{font-weight:600}
.opts{border:1px solid var(--win-edge);border-radius:10px;overflow:clip;font-size:var(--t2)}
.opt{position:relative;display:flex;gap:var(--sp2x);align-items:center;padding:var(--sp2x) var(--sp3);border-top:1px solid var(--win-edge)}
.opt:first-child{border-top:0}
.opt i{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--win-muted);flex:none;position:relative;z-index:1}
.opt.rec i{border:5px solid var(--accent-text)}
.opt span{position:relative;z-index:1}
.opt small{margin-left:auto;color:var(--accent-text);font-weight:700;font-size:var(--t1);position:relative;z-index:1}
.opt.other{color:var(--win-muted)}
.opt .pick{position:absolute;inset:0;z-index:0;background:var(--pick)}
/* the picked option's radio is marked as selected, the same filled ring as .opt.rec (s280, the owner's ask) */
/* not on .opt.rec, whose own ring is already drawn; a fixed 16px box centred on the radio, as .opt.rec i measures */
.opt:not(.rec) .pick+i::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;box-sizing:border-box;translate:-50% -50%;border-radius:50%;border:5px solid var(--accent-text)}
.youmsg{justify-self:end;background:var(--you);padding:var(--sp2) var(--sp3);border-radius:14px 14px 4px 14px;max-width:80%}
.lab{font-weight:700}
.quiet{color:var(--win-muted)}
.inbox{margin:0 var(--sp3) var(--sp3);border:1px solid var(--win-edge);border-radius:12px;padding:var(--sp2x) var(--sp3);color:var(--win-muted);font-size:var(--t2)}
.cap{font-size:var(--t1);color:var(--muted);margin-top:var(--sp3)}

/* ---- hero -------------------------------------------------------------------------------------------------- */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch;min-height:min(calc(100svh - var(--hdr) - 3.5rem),900px);overflow:clip;padding:0}
.hero-copy{align-self:center;padding:var(--sp6) var(--sp5) var(--sp6) var(--pad)}
.hero h1{font-size:var(--t7);line-height:1.02;max-width:12ch}
.hero h1 .ln{display:block}
.hero h1 .ln>span{display:block}
.hero .lead{max-width:36ch}
.ctas{display:flex;flex-wrap:wrap;gap:var(--sp2) var(--sp3);margin-top:var(--sp5)}
.hero-art{position:relative;display:flex;align-items:center;padding:var(--sp6) 0}
.field{position:absolute;inset:0 0 0 18%;background:var(--surface)}
.hero-win{position:relative;width:calc(100% + var(--bleed));margin-right:calc(-1 * var(--bleed))}
.hero-win .convo{padding-right:calc(var(--bleed) + var(--sp5))}
.hero-win .win-bar{padding-right:calc(var(--bleed) + var(--sp3))}
.hero-win .win{border-top-right-radius:0;border-bottom-right-radius:0}
.hero-art .cap{position:absolute;left:18%;bottom:var(--sp3);padding-left:var(--sp4)}

/* ---- products --------------------------------------------------------------------------------------------- */
.lineup{list-style:none;margin-top:var(--sp5);border-top:2px solid var(--rule-strong)}
.lineup li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,4fr);gap:var(--sp4);padding:var(--sp4) 0;border-bottom:1px solid var(--rule);align-items:baseline}
.lineup .head{font-size:var(--t2);color:var(--muted);padding:var(--sp2) 0;font-weight:600}
.lineup h3{font-size:var(--t5);line-height:1.15}
@media (min-width: 701px){.lineup h3{white-space:nowrap}}
.lineup .for{font-size:var(--t2);color:var(--muted);margin-top:var(--sp1)}
.next{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp1)}
.status{font-weight:700;color:var(--accent-text)}
.status.later{color:var(--muted);font-weight:600}
.next .textlink{display:inline-flex;align-items:center;min-height:44px}

/* ---- the session: the one hold on the page ---------------------------------------------------------------- */
.flow{background:var(--surface);padding:0}
.flow-in{padding:var(--sp7) var(--pad);display:flex;flex-direction:column}
.flow-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:var(--sp2) var(--sp5)}
.flow-head .lead{margin-top:0;max-width:38ch;font-size:var(--t3)}
.flow .win{width:min(760px,100%);margin:var(--sp5) auto 0}
.flow{--chrome:16.5rem}
.screen{position:relative}
.measuring .log,.measuring .log *{animation:none !important}
.progress{height:3px;background:var(--accent-text);transform-origin:0 50%}
.log{position:relative;--y0:0px;--y1:0px;--y2:0px;--y3:0px;--y4:0px;--y5:0px;--y6:0px;--y7:0px;--y8:0px;--y9:0px;--y10:0px}
.log .convo{gap:var(--sp3)}
.stack{display:grid;gap:var(--sp2x)}
.flow .cap{text-align:center}

/* ---- proof: the page's one deep field (navy), the report beside the one live product ------------------------ */
.proof{background:var(--band);color:var(--band-ink)}
.proof .lead{color:var(--band-muted)}
.proof-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"head report" "live report";gap:var(--sp5) var(--sp6);align-items:start}
.proof-head{grid-area:head}
.proof-report{grid-area:report}
.proof-live{grid-area:live;align-self:end;display:flex;gap:var(--sp4);align-items:flex-end}
.proof .win{width:100%}
.proof .cap{color:var(--band-muted)}
.report{border-top:1px solid var(--win-edge)}
.rrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--sp3);align-items:baseline;padding:var(--sp2x) 0;border-bottom:1px solid var(--win-edge);font-size:var(--t3)}
.rres{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--sp2)}
.rres b{font-size:var(--t1);font-weight:700;color:var(--win-muted)}
.rres span{font-size:var(--t2)}
.rrow.you-do .rres b,.rrow.you-do .rres span{color:var(--accent-text);font-weight:700}
.phone-shot{flex:none;width:280px;border-radius:28px;overflow:clip;border:1px solid var(--band-rule);box-shadow:0 40px 80px -40px var(--shadow-c)}
.phone-shot img{width:100%;height:auto}
.live-text{max-width:30ch}
.live-text .appicon{width:56px;height:56px;border-radius:13px;margin-bottom:var(--sp3)}
.live-text p{font-size:var(--t3);color:var(--band-muted);max-width:68ch}
.live-text b{color:var(--band-ink)}
.live-text a{color:var(--band-ink);font-weight:700;text-underline-offset:.2em}
.stores{display:flex;flex-wrap:wrap;gap:0 var(--sp4);margin-top:var(--sp2)}
.stores a{display:inline-flex;align-items:center;min-height:44px}

/* ---- cost, about, faq -------------------------------------------------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sp5) var(--sp6);align-items:start}
.cost{background:var(--ground)}
.receipt{border-top:2px solid var(--rule-strong)}
.receipt div{position:relative;display:flex;justify-content:space-between;gap:var(--sp4);padding:var(--sp3) 0;font-size:var(--t4)}
.receipt div::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule);transform-origin:0 50%}
.receipt dt{font-weight:600}
.receipt dd{text-align:right;color:var(--muted)}
.receipt dd b{color:var(--ink);font-weight:700}
.cost .btn{margin-top:var(--sp4)}
.cost .fine{margin-top:var(--sp4);font-size:var(--t2);color:var(--muted);max-width:44ch}
.cost .fine a.textlink{display:inline-flex;align-items:center;min-height:44px}
.about{border-top:1px solid var(--rule)}
.rule-line{font-family:var(--font-display);font-size:var(--t5);font-weight:var(--w-display);letter-spacing:-.02em;line-height:1.2;max-width:28ch;margin-top:var(--sp3)}
.people{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp5)}
.person img{width:160px;height:160px;border-radius:12px;margin-bottom:var(--sp3)}
.person b{display:block;font-size:var(--t4)}
.person span{color:var(--muted);font-size:var(--t3)}
.faq{background:var(--surface)}
.qs{border-top:2px solid var(--rule-strong)}
.qs details{border-bottom:1px solid var(--rule)}
.qs summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--sp4);padding:var(--sp3) 0;font-size:var(--t4);font-weight:600;min-height:44px}
.qs summary::-webkit-details-marker{display:none}
.qs summary i{width:14px;height:14px;flex:none;position:relative}
.qs summary i::before,.qs summary i::after{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:var(--ink);transition:transform .3s var(--ease)}
.qs summary i::after{transform:rotate(90deg)}
.qs details[open] summary i::after{transform:rotate(0deg)}
.qs details p{padding:0 0 var(--sp4);color:var(--muted);max-width:33em}
.qs details[open] p{animation:open .35s var(--ease) both}
@keyframes open{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---- close and footer ------------------------------------------------------------------------------------- */
.close{background:var(--band);color:var(--band-ink);border-bottom:1px solid var(--band-rule)}
.close h2{font-size:var(--t7);line-height:1.02;max-width:none}
.close h2 .ln{display:block}
.close .lead{color:var(--band-muted)}
.close .ctas{align-items:center}
.close .btn{background:var(--band-accent);color:var(--band)}
.close .addr{color:var(--band-muted);font-size:var(--t3)}
/* the address as a read-only field, drawn as the bold text it was: a keyboard visitor with no mail app can focus
   it, select it and copy it (a plain text node cannot take a caret; the old page's s168 fix, kept) */
.close .addr-mail{font:inherit;font-weight:600;color:var(--band-ink);background:none;border:0;padding:0;width:21.5ch;max-width:100%;user-select:all}
@supports (field-sizing:content){.close .addr-mail{field-sizing:content;width:auto}}
.close .wait{margin-top:var(--sp4);color:var(--band-muted);font-size:var(--t3)}
.close .wait a.textlink{color:var(--band-accent);display:inline-flex;align-items:center;min-height:44px}
.proof :focus-visible,.close :focus-visible,footer :focus-visible{outline-color:var(--band-ink)}
footer{background:var(--band);color:var(--band-muted);display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--sp5);padding:var(--sp6) var(--pad) var(--sp5);font-size:var(--t2)}
footer .brand{color:var(--band-ink)}
footer .brand .mark{color:var(--logo)}
footer h3{font-family:var(--font-text);font-size:var(--t2);font-weight:600;letter-spacing:0;color:var(--band-ink);margin-bottom:var(--sp2)}
footer ul{list-style:none;display:grid;gap:var(--sp1)}
footer a{text-decoration:none;display:inline-flex;align-items:center;padding:var(--sp1) 0}
footer a:hover{text-decoration:underline;color:var(--band-ink)}
footer h3.follow{margin-top:var(--sp4)}
footer .copy{margin-top:var(--sp3)}
footer .indep{margin-top:var(--sp2);max-width:44ch;font-size:var(--t1);line-height:1.5}

/* ---- the non-production banner (scripts/build-dev-site.sh adds it to the dev copy only) ------------------- */
.env-banner{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:center;min-height:var(--env-banner-h);padding:0 16px;background:var(--env-banner-bg);color:var(--env-banner-ink);font:500 var(--t2)/1 var(--font-text);text-align:center}
.has-env-banner{scroll-padding-top:calc(var(--hdr) + var(--env-banner-h) + 1rem)}
.has-env-banner header{top:var(--env-banner-h)}

/* ---- motion: the entrance (every engine) ------------------------------------------------------------------ */
/* complete at rest from the first frame: everything is visible at 0 ms and settles into place, short */
@keyframes settle{from{transform:translateY(14px)}to{transform:none}}
@keyframes slide{from{transform:translateX(40px)}to{transform:none}}
@keyframes fieldIn{from{transform:scaleX(.9)}to{transform:none}}
.hero h1 .ln>span{animation:settle .7s var(--ease) both}
.hero h1 .ln:nth-child(2)>span{animation-delay:.05s}
.hero h1 .ln:nth-child(3)>span{animation-delay:.1s}
.hero .lead,.hero .ctas{animation:settle .7s var(--ease) .12s both}
.field{transform-origin:100% 50%;animation:fieldIn .9s var(--ease) both}
.hero-win{animation:slide .9s var(--ease) both}

/* ---- motion: on the scroll, only where the engine has scroll timelines and the visitor has not asked for
   less motion; elsewhere the finished state. The hold also needs the page's one script (it sets .hold). ---- */
@media (prefers-reduced-motion: no-preference){
@supports (animation-timeline: view()){
  /* the hero window lifts away as the page starts to move */
  @keyframes lift{to{transform:translateY(-70px)}}
  .hero-art .lifter{animation:lift linear both;animation-timeline:scroll(root);animation-range:0 90vh}
  /* the product line assembles row by row as it comes in, readable throughout */
  @keyframes rowIn{from{opacity:.6;transform:translateX(-72px)}to{opacity:1;transform:none}}
  @media (max-width: 700px){@keyframes rowIn{from{opacity:.6;transform:translateY(48px)}to{opacity:1;transform:none}}}
  .lineup li:not(.head){animation:rowIn linear both;animation-timeline:view();animation-range:entry 0% entry 85%}
  /* the report window and the live app rise as the navy field arrives, whole and readable throughout */
  @keyframes rise{from{transform:translateY(90px)}to{transform:none}}
  .proof .win,.phone-shot{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  /* the session's progress line fills with the hold, done with the last beat */
  @keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .hold .progress{animation:fill linear both;animation-timeline:--flow;animation-range:contain 0% contain 85%}
  /* the receipt's rules draw across as it arrives */
  @keyframes rule{from{transform:scaleX(0)}to{transform:none}}
  .receipt div::after{animation:rule linear both;animation-timeline:view();animation-range:entry 20% entry 100%}

  /* THE HOLD: the session window stays while the scroll plays its reply, ten beats, done at 85%, then rest.
     s280, the owner: "the animation is fast, you can't read anything". The hold was 55vh of scroll for all ten
     beats, so one flick played several. Now 300vh: each beat is a quarter screen, a short arrival (3.5% of the
     hold) and then a longer still rest (5%) with nothing moving, so a line can be read where the scroll stops. */
  .hold .flow{height:calc(100svh - var(--hdr) + 300vh);view-timeline-name:--flow;view-timeline-axis:block;view-timeline-inset:var(--hdr) 0px}
  .hold .flow-in{position:sticky;top:var(--hdr);height:calc(100svh - var(--hdr));padding-top:var(--sp5);padding-bottom:var(--sp4);justify-content:safe center}
  .hold .flow .win{flex:none;margin-top:var(--sp4)}
  .hold .flow .screen{height:clamp(10rem,calc(100svh - var(--hdr) - var(--chrome)),34rem);overflow:clip}
  .hold .flow .cap{margin-top:var(--sp2)}
  @keyframes run{
    0%,5%{transform:translateY(var(--y0))} 8.5%,13.5%{transform:translateY(var(--y1))} 17%,22%{transform:translateY(var(--y2))}
    25.5%,30.5%{transform:translateY(var(--y3))} 34%,39%{transform:translateY(var(--y4))} 42.5%,47.5%{transform:translateY(var(--y5))}
    51%,56%{transform:translateY(var(--y6))} 59.5%,64.5%{transform:translateY(var(--y7))} 68%,73%{transform:translateY(var(--y8))}
    76.5%,81.5%{transform:translateY(var(--y9))} 85%,100%{transform:translateY(var(--y10))}
  }
  .hold .log{animation:run linear both;animation-timeline:--flow;animation-range:contain 0% contain 100%;will-change:transform}
  /* fully opaque by 40% of its travel, so a beat is never faint text for long */
  @keyframes beat{from{opacity:0;transform:translateY(14px)}40%{opacity:1}to{opacity:1;transform:none}}
  .hold [data-beat]{animation:beat linear both;animation-timeline:--flow}
  .hold [data-beat="1"]{animation-range:contain 5% contain 8.5%}
  .hold [data-beat="2"]{animation-range:contain 13.5% contain 17%}
  .hold [data-beat="3"]{animation-range:contain 22% contain 25.5%}
  .hold [data-beat="4"]{animation-range:contain 30.5% contain 34%}
  .hold [data-beat="5"]{animation-range:contain 39% contain 42.5%}
  .hold [data-beat="6"]{animation-range:contain 47.5% contain 51%}
  .hold [data-beat="7"]{animation-range:contain 56% contain 59.5%}
  .hold [data-beat="8"]{animation-range:contain 64.5% contain 68%}
  /* the radio fills as the pick lands: the ring grows in over the second half of beat 8, then holds */
  @keyframes mark{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
  .hold .opt:not(.rec) .pick+i::after{animation:mark linear both;animation-timeline:--flow;animation-range:contain 66% contain 68%}
  .hold [data-beat="9"]{animation-range:contain 73% contain 76.5%}
  .hold [data-beat="10"]{animation-range:contain 81.5% contain 85%}
}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}

/* ---- widths ----------------------------------------------------------------------------------------------- */
@media (max-width: 1100px){
  .links{gap:var(--sp3)}
  .proof-live{flex-direction:column;align-items:flex-start}
}
@media (max-width: 980px){
  .links{display:none}
  .navmenu{display:block}
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-copy{padding:var(--sp6) var(--pad) var(--sp4)}
  .hero-art{padding:0 var(--pad) var(--sp6)}
  .hero .ctas{margin-top:var(--sp4)}
  .hero-win .greet{display:none}
  .hero-win .convo{padding-top:var(--sp3)}
  .field{inset:var(--sp6) 0 0 0}
  .hero-win{width:100%;margin-right:0}
  .hero-win .convo{padding-right:var(--sp5)}
  .hero-win .win-bar{padding-right:var(--sp3)}
  .hero-win .win{border-radius:14px}
  .hero-art .cap{left:var(--pad);bottom:var(--sp2);padding-left:0}
  .split{grid-template-columns:1fr}
  .proof-grid{grid-template-columns:1fr;grid-template-areas:"head" "report" "live"}
  .proof-live{flex-direction:row;align-items:flex-end}
  footer{grid-template-columns:1fr 1fr}
  footer a{min-height:44px;min-width:44px}
  footer ul{gap:0}
  footer h3.follow{margin-top:var(--sp5)}
}
@media (max-width: 700px){
  .lineup .head{display:none}
  .lineup li{grid-template-columns:1fr;gap:var(--sp2)}
  .convo{padding:var(--sp3) var(--sp3) var(--sp4);font-size:var(--t2)}
  .hero-win .convo{padding-right:var(--sp3)}
  .where td,.where th{padding-right:var(--sp2)}
  .proj{display:none}
  .win-bar{grid-template-columns:auto 1fr;gap:var(--sp3)}
  .tabs{justify-self:end}
  .inbox{margin:0 var(--sp2) var(--sp2)}
  .opt small{display:none}
  .receipt div{flex-direction:column;gap:0}
  .receipt dd{text-align:left}
  .flow-head .lead{display:none}
  .rrow{grid-template-columns:1fr;gap:0}
  .hold .flow .win{margin-top:var(--sp3)}
  /* condensed windows on a phone: the hero shows the choice, the report shows three rows */
  .hero-copy{padding:var(--sp4) var(--pad) var(--sp4)}
  .hero .lead{font-size:var(--t3)}
  .ctas{margin-top:var(--sp4)}
  .hero-art{padding:0 var(--pad) var(--sp5)}
  .field{inset:var(--sp5) 0 0 0}
  .hero-win .phone-hide,.rrow.phone-hide{display:none}
  .proof .lead{font-size:var(--t3)}
  .phone-shot{width:140px;border-radius:18px}
  .people{gap:var(--sp4)}
  .person img{width:120px;height:120px}
}
@media (max-width: 400px){
  .hero-win .opt.other{display:none}
}
@media (max-width: 360px){
  .hero-win .opt:not(.rec){display:none}
  .hero-win .inbox,.hero-win .who{display:none}
  .proof .convo>p,.proof .convo>.who{display:none}
  .phone-shot{width:120px}
}