/* ============================================================================
   SPEEDRUN v2 (2026-10-28) — the white page. Header from Figma 708-7265 (SMD pill · "for" · the speedrun mark,
   then Offer / How it works / Price / Works and a black Book a slot, all 32 tall, 20 from the edges). Hero: the
   hex on white (lab F, built and timed after thesis.co). Sections set in the site's grammar on white: Tanker for
   heads, General Sans for text, hairlines, no decoration; the only colour is the moving light, behind the price.
   ========================================================================== */
html:has(body.v2){background:#fff;}
.sr.v2{background:#fff;color:#151515;--line2:rgba(0,0,0,.12);--grey:rgba(0,0,0,.6);}
.sr.v2 ::selection{background:#0A84FF;color:#fff;}

/* ---- header (Figma 708-7268) ---- */
.v2-head{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:20px;}
.v2-head__l{display:flex;align-items:center;gap:12px;}
.v2-head__logo{display:block;width:67px;height:32px;}
.v2-head__logo img{display:block;width:67px;height:32px;}
.v2-head__for{font-family:'General Sans','Geist',sans-serif;font-style:italic;font-weight:400;font-size:15px;line-height:15px;letter-spacing:.01em;color:#151515;}
.v2-head__r{display:flex;align-items:center;gap:80px;}
.v2-head__nav{display:flex;align-items:center;gap:4px;}
.v2-chip{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 12px;border-radius:2px;background:rgba(0,0,0,.05);
  font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:15px;line-height:15px;letter-spacing:.01em;color:#151515;text-decoration:none;white-space:nowrap;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background-color .15s ease;}
a.v2-chip:hover,a.v2-chip:focus-visible{background:rgba(0,0,0,.1);}
.v2-chip--logo img{display:block;height:13px;width:auto;filter:invert(1);}
.btn.v2-head__cta{height:32px;padding:0 12px;border-radius:2px;font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:15px;letter-spacing:.01em;}

/* ---- hero: the ring sits where Figma puts it (about 82 % of the frame's width) ---- */
.v2 .sr-hero--hex .rg-stage{--a:min(31vw,460px,50svh);}

/* ---- sections ---- */
.v2-sec{max-width:1440px;margin:0 auto;padding:180px var(--margin) 0;}
.v2-sec--tight{padding-top:80px;}
.v2-eye{margin:0 0 20px;font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:rgba(0,0,0,.5);}
.v2-h2{margin:0 0 56px;font-family:'Tanker','Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(40px,4.4vw,72px);line-height:.95;letter-spacing:.005em;text-wrap:balance;}
.v2-h2--big{font-size:clamp(48px,6.3vw,104px);max-width:13em;}
.v2-lede{max-width:640px;margin:0 0 36px;font-size:clamp(18px,1.5vw,22px);line-height:1.45;color:var(--grey);}
.v2-small{margin:20px 0 0;font-size:14px;line-height:1.45;color:rgba(0,0,0,.5);}

/* what you get: name left, the couple of sentences right, hairlines between */
.v2-rows{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--line2);}
.v2-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:40px;padding:40px 0;border-top:1px solid var(--line2);}
.v2-row__t{margin:0;font-family:'Tanker','Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:clamp(36px,3.4vw,56px);line-height:1;}
.v2-row__d{margin:0;max-width:640px;font-size:clamp(17px,1.35vw,20px);line-height:1.5;color:rgba(0,0,0,.72);}

/* add-ons: two quiet cards */
.v2-adds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.v2-add{padding:32px;border-radius:2px;background:rgba(0,0,0,.04);}
.v2-add__t{margin:0 0 14px;font-family:'Tanker','Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:32px;line-height:1;}
.v2-add p{margin:0;max-width:560px;font-size:17px;line-height:1.5;color:rgba(0,0,0,.72);}

/* how it works: four phase cards in one ruled band (EAT's format) */
.v2-phases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid rgba(0,0,0,.14);}
.v2-phase{padding:32px 28px 40px;border-left:1px solid rgba(0,0,0,.14);}
.v2-phase:first-child{border-left:0;}
.v2-phase__n{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:rgba(0,0,0,.5);}
.v2-phase__t{margin:56px 0 12px;font-family:'Tanker','Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:32px;line-height:1;}
.v2-phase p{margin:0;font-size:16px;line-height:1.5;color:rgba(0,0,0,.6);}

/* price: the one place the light comes back, behind the number */
.v2-price{text-align:center;}
.v2-price__card{position:relative;display:flex;flex-direction:column;align-items:center;padding:40px 0 0;}
.v2-price__glow{position:absolute;left:50%;top:-40px;width:min(900px,90vw);height:420px;transform:translateX(-50%);pointer-events:none;
  filter:blur(70px) saturate(1.2);opacity:.55;}
.v2-price__glow i{position:absolute;inset:0;border-radius:50%;background:linear-gradient(var(--la),var(--lc),var(--ld));
  animation:hx-hue 17.3s linear infinite,hx-band 23s ease-in-out infinite alternate;}
.v2-price__num{position:relative;margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;}
.v2-price__num b{font-family:'Tanker','Anton',sans-serif;font-weight:400;font-size:clamp(96px,15vw,232px);line-height:.85;letter-spacing:.005em;}
.v2-price__num span{font-size:20px;color:#151515;}
.v2-price__num s{margin-left:6px;color:rgba(0,0,0,.4);}
.v2-price__terms{position:relative;margin:20px 0 56px;font-size:18px;color:var(--grey);}
.v2-price__terms i,.v2-proof i{font-style:normal;padding:0 8px;color:rgba(0,0,0,.3);}
.v2-price__incl{position:relative;width:min(760px,100%);margin:0 0 44px;text-align:left;}
.v2-price__h{margin:0 0 8px;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:rgba(0,0,0,.5);}
.v2-price__incl ul{list-style:none;margin:0;padding:0;columns:2;column-gap:40px;}
.v2-price__incl li{break-inside:avoid;padding:14px 0;border-top:1px solid var(--line2);font-size:17px;line-height:1.35;}
.v2-price .v2-small{position:relative;max-width:520px;}

/* work: the contact sheet stands in until the visual is chosen */
.v2-sheet{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;}
.v2-sheet li{aspect-ratio:4/3;overflow:hidden;background:#f2f2f2;}
.v2-sheet img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1);}
.v2-sheet li:hover img{transform:scale(1.04);}
.v2-proof{margin:32px 0 0;font-size:18px;line-height:1.6;color:var(--grey);}
.v2-proof b{font-weight:500;color:#151515;}

/* book a spot */
.v2-book{text-align:center;display:flex;flex-direction:column;align-items:center;}
.v2-book .v2-h2--big{margin-bottom:28px;}

/* faq */
.v2-faq{border-bottom:1px solid var(--line2);}
.v2-q{border-top:1px solid var(--line2);}
.v2-q summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px 0;cursor:pointer;list-style:none;
  font-size:clamp(20px,1.7vw,24px);line-height:1.3;font-weight:500;}
.v2-q summary::-webkit-details-marker{display:none;}
.v2-q summary::after{content:"+";flex:none;font-size:28px;line-height:1;color:rgba(0,0,0,.45);transition:transform .3s cubic-bezier(.16,1,.3,1);}
.v2-q[open] summary::after{transform:rotate(45deg);}
.v2-q p{margin:0 0 28px;max-width:720px;font-size:18px;line-height:1.5;color:var(--grey);}

/* footer */
.v2-foot{max-width:1440px;margin:0 auto;padding:180px var(--margin) 40px;display:flex;align-items:center;justify-content:space-between;}
.v2-foot a{font-size:17px;color:#151515;text-decoration:none;}
.v2-foot a:hover{text-decoration:underline;}

/* ---- phones ---- */
@media (max-width:900px){
  .v2-head__nav{display:none;}
  .v2-head{padding:12px 16px;}
  .v2-row{grid-template-columns:1fr;gap:14px;padding:28px 0;}
  .v2-adds{grid-template-columns:1fr;}
  .v2-phases{grid-template-columns:1fr 1fr;}
  .v2-phase:nth-child(3){border-left:0;}
  .v2-phase:nth-child(n+3){border-top:1px solid rgba(0,0,0,.14);}
  .v2-sheet{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
  .v2-price__incl ul{columns:1;}
  .v2-sec{padding-top:120px;}
  .v2 .sr-hero--hex .rg-stage{--a:min(38vw,190px);}
}
@media (max-width:560px){
  .v2-phases{grid-template-columns:1fr;}
  .v2-phase{border-left:0;border-top:1px solid rgba(0,0,0,.14);}
  .v2-phase:first-child{border-top:0;}
  .v2-phase__t{margin-top:28px;}
  .v2-head__for{display:none;}
}
/* the header keeps a white backing once the page moves under it */
.v2-head{background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);}
/* hero at Figma's size (708-7265): the hexagon about half the frame's width, the wall type filling its wall */
.v2 .sr-hero--hex .rg-stage{--a:min(21.5vw,330px,36svh);}
.v2 .rg--hex,.v2 .sr-hero--hex .rg-stage{--f:calc(var(--w) * .078);}
.v2 .rg--hex .hx-copy:not(.hx-c3) .hx-logo{width:72%;}
@media (max-width:900px){ .v2 .sr-hero--hex .rg-stage{--a:min(36vw,180px);} }
/* the speedrun mark stands on its own, no chip, about the SMD pill's size (Markiian) */
.v2-chip--logo{height:32px;padding:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
.v2-chip--logo img{height:24px;}
@media (max-width:560px){ .v2-chip--logo img{height:18px;} }
/* the ring is built three times its rest size and shown at a third, so when the camera closes in the type is drawn
   at full resolution (scaling a 3D layer up only enlarges its picture). Sizes that live in screen space divide back. */
.v2 .sr-hero--hex .rg-stage{--zk:2;--a:calc(min(21.5vw,330px,36svh) * var(--zk));}
.v2 .rg--hex .hx-light{filter:blur(calc(var(--a) * .1 / var(--zk))) saturate(1.25);}
.v2 .sr-hero--hex .rg-stage{width:min(100vw,1000px);height:min(70svh,640px);}
@media (max-width:900px){ .v2 .sr-hero--hex .rg-stage{--a:calc(min(36vw,180px) * var(--zk));} }
/* the pin: the turn and the close-up, then the page goes on */
.v2 .sr-hero--hex{height:280svh;}

/* ============ the previous version's blocks, on white (Markiian, 2026-10-28: "follow the style we set up") ============
   Same markup and motion as speedrun.html (slabs that tilt in, rows that light as you read, the plane under the price and
   the close, case slabs that land, the numbers, the accordion); only the ground and the inks change. The plane's shader
   draws light on black, so on white its canvas is inverted and turned half round the wheel: black becomes white and
   each colour comes back as its own pale tint. */
.sr.v2{--line:rgba(0,0,0,.12);--mute:rgba(0,0,0,.6);--dim:rgba(0,0,0,.45);}
.v2 .sr-plane{filter:invert(1) hue-rotate(180deg) saturate(1.4);}
.v2 .sr-slab__face{background:#f1f1f1;}
.v2 .sr-slab__face--ink{background:#e9e9e9;}
.v2 .sr-tile__t em{background:rgba(0,0,0,.06);}
.v2 .sr-row__b{color:rgba(0,0,0,.75);}
.v2 .sr-price__num span,.v2 .sr-incl__add{color:rgba(0,0,0,.75);}
.v2 .sr-incl__add b,.v2 .sr-num b{color:#151515;text-shadow:none;}
.v2 .sr-case__media{background:#f1f1f1;}
.v2 .sr-faq summary::after{background:linear-gradient(#151515,#151515) center/100% 1.5px no-repeat,linear-gradient(#151515,#151515) center/1.5px 100% no-repeat;}
.v2 .sr-faq summary:hover{color:#000;}
.v2 .sr-cta-row p{color:rgba(0,0,0,.8);}
.v2 .sr-pill{background:rgba(0,0,0,.05);color:#151515;}
.v2 .btn--light{--btn-bg:#151515;--btn-fg:#fff;}
.v2 .btn--light:hover,.v2 .btn--light:focus-visible{--btn-bg:var(--red);--btn-fg:#fff;}
.v2 .sr-price .btn,.v2 .sr-end .btn{--btn-bg:#151515;--btn-fg:#fff;}
.v2 .sr-price .btn:hover,.v2 .sr-end .btn:hover{--btn-bg:var(--red);}
/* four tiles, two by two; three numbers in a row */
.v2 .sr-get__grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
.v2 .sr-nums__grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
/* add-ons: a head over the two columns */
.v2-adds2{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(32px,4vw,72px);}
.v2-adds2__h{grid-column:1 / -1;margin-bottom:8px;}
@media (max-width:720px){
  .v2 .sr-get__grid--4,.v2-adds2,.v2 .sr-nums__grid--3{grid-template-columns:1fr;}
  .v2 .sr-nums__grid--3 .sr-num+.sr-num{border-left:0;border-top:1px solid var(--line);}
}
/* no coloured square bullets (Markiian's rule): the list is plain lines on hairlines */
.v2 .sr-incl__list li{padding-left:0;}
.v2 .sr-incl__list li::before{content:none;display:none;}
/* phones: the wall type leaves clear space either side, so a copy spends less of the scroll folded across a corner */
@media (max-width:720px){
  .v2 .rg--hex .hx-copy .hx-logo{width:58%;}
}
/* Tanker again (Markiian); the wall type as large as the wall allows, and the camera closes in further (data-close) */
.v2 .rg--hex,.v2 .sr-hero--hex .rg-stage{--f:calc(var(--w) * .097);}   /* the headline fills its wall, side to side */
.v2 .rg--hex .hx-copy .hx-logo{width:84%;}
.v2 .rg--hex .rg-face{padding:0;}

/* ---- tunable (speedrun-tune.js, ?tune): every size the DialKit panel moves is a variable; defaults = Markiian's tuning, 2026-10-29 ---- */
.v2 .sr-hero--hex{height:var(--pin,300svh);}
.v2 .sr-hero--hex .rg-stage{--a:calc(min(21.5vw,330px,36svh) * var(--zk) * var(--ring,1));--h:calc(var(--w) * var(--hr,.4));}
.v2 .rg--hex,.v2 .sr-hero--hex .rg-stage{--f:calc(var(--w) * var(--ft,.099));}
.v2 .rg--hex .hx-copy .hx-logo{width:var(--lw,73%);}
.v2 .rg--hex .hx-light{filter:blur(calc(var(--a) * var(--lb,.1) / var(--zk))) saturate(1.25);}
@media (max-width:900px){ .v2 .sr-hero--hex .rg-stage{--a:calc(min(36vw,180px) * var(--zk) * var(--ring,1));} }
/* the back walls: the far side of each wall carries its type mirrored (as seen through it), muted (Markiian: ~20 %).
   Each wall has two faces now: the front one hidden from behind, the back one a mirror of it at --back opacity. */
.v2 .rg--hex .rg-out{-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.v2 .rg--hex .rg-in{display:flex;transform:rotateY(180deg);-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#fff;}
.v2 .rg--hex .rg-face>.hx-mir{position:absolute;inset:0;transform:scaleX(-1);opacity:var(--back,.2);}   /* (beats the face's `> span` nudge) */
.v2 .rg--hex .hx-mir>.hx-track{transform:translateX(calc(var(--mx,0) * 100%));left:.7%;right:.7%;}
/* the line under the navigation (Figma 708-7266 / 711-7301): Design lab · for Speedrun Founders, General Sans 500 25,
   107 from the top, 20 from the sides; it sits in the hero's pinned screen */
.v2-sub{position:absolute;left:20px;right:20px;top:107px;z-index:2;margin:0;display:flex;justify-content:space-between;align-items:center;
  font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:25px;line-height:normal;color:#000;white-space:nowrap;pointer-events:none;}
@media (max-width:720px){ .v2-sub{top:76px;left:16px;right:16px;font-size:17px;} }
/* the line sits level with the ring's centre, either side of it (Markiian); it steps aside as the ring comes in.
   Phones keep it under the navigation: there the ring fills the width. */
.v2-sub{top:50%;transform:translateY(-50%);opacity:var(--ui,1);}
@media (max-width:720px){ .v2-sub{top:76px;transform:none;} }

/* the light spreads wider (blur .3 of the ring) and stays as you scroll (Markiian) */
/* the side line at 20 % (Markiian), still stepping aside as the ring comes in */
.v2-sub{opacity:calc(var(--ui,1) * .2);}

/* ============ font trial (Markiian, 2026-10-29): IBM Plex Mono for every word, the hexagon's walls too ============
   html.mono switches it (on by default; ?font=classic or the tune panel's Font toggle shows Tanker + General Sans).
   Mono runs wider than Tanker, so the display sizes come down to keep the same lines. */
html.mono .v2,html.mono .v2 *{font-family:'IBM Plex Mono',ui-monospace,monospace !important;}
html.mono .v2 .rg--hex,html.mono .v2 .sr-hero--hex .rg-stage{--f:calc(var(--w) * var(--ftm,.07));}
html.mono .v2 .hx-t{font-weight:600;letter-spacing:-.02em;}
html.mono .v2 .v4-h2{font-size:clamp(30px,3.3vw,56px);font-weight:600;letter-spacing:-.03em;line-height:1.02;}
html.mono .v2 .cd-block>span{font-size:clamp(34px,4.2vw,72px);font-weight:600;letter-spacing:-.04em;}
html.mono .v2 .stz-w{font-size:calc(var(--rise) * .3);font-weight:600;letter-spacing:-.03em;}
html.mono .v2 .v4-price__num{font-size:clamp(64px,9vw,150px);font-weight:600;letter-spacing:-.05em;}
html.mono .v2 .v4-state{font-size:clamp(18px,1.7vw,26px);letter-spacing:-.01em;}
html.mono .v2 .v4-num b{font-size:clamp(48px,5.4vw,96px);font-weight:600;letter-spacing:-.05em;}
html.mono .v2 .v4-case__n,html.mono .v2 .v4-phases h3{font-weight:600;letter-spacing:-.03em;}
html.mono .v2 .v4-case__n{font-size:clamp(22px,2vw,36px);}
html.mono .v2 .cf-cube .bx-f{font-size:calc(var(--cs) * .17);font-weight:600;}
html.mono .v2 .fr-wall{font-size:calc(var(--h) * .34);font-weight:600;}
html.mono .v2 .sr-blur__text{font-size:clamp(22px,2.3vw,38px);letter-spacing:-.02em;}
html.mono .v2-sub{font-size:20px;}
html.mono .v2 .v2-chip,html.mono .v2 .btn{font-size:13.5px;letter-spacing:0;}
html.mono .v2 .v4-faq summary{font-size:clamp(17px,1.4vw,21px);}
/* mono, round 2 (Figma 708-7266 now sets the header in IBM Plex Mono Medium): the walls' headline in its own case,
   not capitals; the chips and the button at 15; the side line at 25; "for" stays General Sans italic */
html.mono .v2 .rg--hex .hx-t{text-transform:none;letter-spacing:-.03em;}
html.mono .v2 .v2-chip,html.mono .v2 .btn.v2-head__cta{font-size:15px;letter-spacing:.01em;font-weight:500;}
html.mono .v2-sub{font-size:25px;font-weight:500;}
html.mono .v2 .v2-head__for{font-family:'General Sans','Geist',sans-serif !important;font-style:italic;}
@media (max-width:720px){ html.mono .v2-sub{font-size:15px;} }

/* ---- the light, after thesis.co's again (frames every 0.6 s, and its light ring alone with the black ring hidden) ----
   Their light walls are fully coloured and bright, blurred only ~6 % of a wall; the colours change every half second
   and the bands slide along the walls, so what shows past the black walls is a narrow bright rim that runs round the
   outline. Ours now: saturated two-colour bands, no dark stops, sliding along each wall (a 200 % gradient moved by
   its own width loops seamlessly), the hue turning faster, each wall a step behind the last so the colour travels
   round the ring; blur ~.1 of the ring (a little wider than theirs, as asked) and full strength. */
.v2 .rg--hex .hx-lw i,.v2 .sr-hero--white .hx-lw i,html.dark .sr-hero--white .hx-lw i{opacity:1;
  background:linear-gradient(90deg,var(--lc) 0%,var(--ld) 50%,var(--lc) 100%);background-size:200% 100%;
  animation:hx-hue 9s linear infinite,hx-run 4.8s linear infinite;animation-delay:calc(var(--i) * -1.5s),calc(var(--i) * -.8s);}
@keyframes hx-run{from{background-position:0 0;}to{background-position:-200% 0;}}
.v2 .rg--hex .hx-light{filter:blur(calc(var(--a) * var(--lb,.1) / var(--zk))) saturate(1.45) brightness(1.15);}
@media (prefers-reduced-motion:reduce){ .v2 .rg--hex .hx-lw i{animation:none;} }

/* ---- the logos running along the bottom of the hero (Markiian) — one colour, so they read as one line:
   black on white, white on black; the strip runs slowly and fades at its ends, and steps aside as you scroll ---- */
.v2-logos{position:absolute;left:0;right:0;bottom:74px;z-index:2;overflow:hidden;opacity:calc(var(--ui,1) * .55);pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);}
.v2-logos__track{display:flex;align-items:center;gap:clamp(48px,5vw,88px);width:max-content;animation:v2-logos 48s linear infinite;}
.v2-logos img{display:block;height:var(--h,20px);width:auto;filter:brightness(0);}
html.dark .v2-logos img{filter:brightness(0) invert(1);}
@keyframes v2-logos{to{transform:translateX(calc(-100% / 3));}}
@media (max-width:720px){ .v2-logos{bottom:64px;} .v2-logos__track{gap:40px;} .v2-logos img{height:calc(var(--h,20px) * .8);} }
@media (prefers-reduced-motion:reduce){ .v2-logos__track{animation:none;} }
/* logos in pure white on the black page (Markiian: "white only"); on the white page they have to be black to show */
html.dark .v2-logos{opacity:var(--ui,1);}
html.dark .v2-logos img{filter:brightness(0) invert(1);}
.v2-logos{bottom:48px;}
/* logos at 20 % (Markiian), both pages */
.v2-logos,html.dark .v2-logos{opacity:calc(var(--ui,1) * .2);}
/* the side line at 50 % (Markiian) */
.v2-sub{opacity:calc(var(--ui,1) * .5);}
/* the side line at full strength (Markiian) */
.v2-sub{opacity:var(--ui,1);}

/* ---- the statement, word by word (replaces speedrun.js's backdrop ramp here, whose blur showed as boxes) ----
   Each word waits dimmed; as the reading edge reaches it, it comes in out of a soft glow in the hero's cycling
   colours, sharpening as it goes, and settles solid. --t (0 → 1) per word, set by speedrun-v2.js. */
.v2 .v2b{--wc:21,21,21;}
html.dark .v2 .v2b{--wc:255,255,255;}
.v2b-w{position:relative;display:inline-block;color:rgba(var(--wc),calc(.13 + .87 * var(--t,0)));
  filter:blur(calc(var(--on,0) * (1 - var(--t,0)) * 9px));}
.v2b-w::after{content:attr(data-w);position:absolute;left:0;top:0;white-space:nowrap;pointer-events:none;
  background:linear-gradient(90deg,var(--lc),var(--ld));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:blur(5px) saturate(1.5) brightness(1.2);opacity:var(--g,0);animation:hx-hue 9s linear infinite;animation-delay:calc(var(--k,0) * -.45s);}

/* the paragraph in the hero's last frame, under the headline: it writes itself in word by word from nothing as you
   keep scrolling after the close-up lands (Markiian); General Sans 25, as the Design lab line */
.v2-after{position:absolute;left:50%;top:calc(50% + clamp(90px,9vw,150px));transform:translateX(-50%);z-index:2;width:min(92vw,860px);margin:0;
  text-align:center;font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:25px;line-height:1.4;text-wrap:balance;pointer-events:none;}
.v2-after .v2b-w{color:rgba(var(--wc),var(--t,0));}
@media (max-width:720px){ .v2-after{font-size:18px;top:calc(50% + 70px);} }
/* the header has no band of its own (Markiian): the logo side sits on the page; only the tabs carry a faint, blurred chip */
.v2-head,html.dark .v2-head{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
.v2-chip:not(.v2-chip--logo){-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);}
/* the line under the headline follows the close-up up by the same lift */
.v2-after{top:calc(50% - var(--lift,50px) + clamp(90px,9vw,150px));}
@media (max-width:720px){ .v2-after{top:calc(50% - var(--lift,50px) + 70px);} }