/* homepage only: the pinned stage. Everything else comes from base.css. */
.stage{position:relative;height:720vh}
.pin{position:sticky;top:0;height:100svh}
/* wide3 */
.panel{position:relative;height:100%;background:var(--field,#0F0F12);overflow:hidden;color:var(--fink,#ECE8DF);--g:var(--gutter);--gv:clamp(20px,3.4vh,52px)}
#gl{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;display:block}
.behind{position:absolute;inset:0;z-index:1}
.hud{position:absolute;inset:0;z-index:3;pointer-events:none}
.hud a{pointer-events:auto}
.panel h1{position:absolute;inset:0;font-weight:400}
.panel h1 .kick{position:absolute;left:var(--g);top:calc(74px + 2vh);max-width:36ch;opacity:.62}
.panel h1 .big{position:absolute;left:var(--g);bottom:calc(var(--gv) + 26px);font-weight:600;line-height:.86;letter-spacing:-.055em;font-size:clamp(78px,min(12.6vw,26vh),210px);max-width:min(46vw,6ch)}
.panel h1 .big em{color:var(--acc,#FF4B26);font-size:1.06em}
.note{position:absolute;left:var(--g);top:calc(74px + 2vh + 74px);max-width:34ch;color:color-mix(in srgb,currentColor 46%,transparent);line-height:1.9}
.hint{position:absolute;left:50%;bottom:var(--gv);transform:translateX(-50%)}
.step{position:absolute;left:var(--g);bottom:calc(var(--gv) + 26px);max-width:min(520px,82%);opacity:0}
.step.s2{left:auto;right:var(--g)}
.step .cap{color:var(--acc,#FF4B26);display:block;margin-bottom:12px}
.step p{max-width:37ch;font-size:clamp(15px,1.1vw,17px)}
.count{position:absolute;right:var(--g);bottom:calc(var(--gv) + 26px);text-align:right;opacity:0}
.count b{display:block;font-weight:600;letter-spacing:-.05em;font-size:clamp(40px,5vw,84px);line-height:1}
.end{position:absolute;left:var(--g);bottom:calc(var(--gv) + 26px);opacity:0;max-width:min(560px,86%)}
.end strong{display:block;font-weight:600;letter-spacing:-.055em;line-height:.88;font-size:clamp(56px,min(8.4vw,17vh),150px)}
.end strong em{color:var(--acc,#FF4B26)}
.end p{margin:18px 0 22px;max-width:38ch}
.end .btn{background:var(--fink,#121214);color:var(--field,#CBFF3C)}
.bw{position:absolute;font-weight:600;letter-spacing:-.065em;line-height:.8;font-size:clamp(110px,min(25vw,48vh),540px);opacity:0;white-space:nowrap;will-change:opacity,translate}
.bw em{color:var(--acc,#FF4B26);letter-spacing:-.03em}
.bw.w1,.bw.w3{left:var(--g);top:calc(74px + 5vh)}
.bw.w2{right:var(--g);top:calc(74px + 4vh)}
.bw.w4{left:50%;top:46%;transform:translate(-50%,-50%)}
.track{position:absolute;left:50%;bottom:var(--gv);transform:translateX(-50%);display:flex;gap:26px;opacity:0;white-space:nowrap}
.track span{opacity:.34;transition:opacity .25s ease-out}
.track span.on{opacity:1}
@media (max-width:820px){
  .note,.count{display:none}
  .track{top:74px;bottom:auto;gap:16px}
  .bw{font-size:clamp(96px,33vw,220px)}
  .bw.w1,.bw.w2,.bw.w3{top:58svh}
  .step.s2{left:var(--g);right:auto}
  .panel h1 .big{font-size:clamp(66px,21vw,140px)}
  /* the pile fills the top of a phone screen and the h1 sits behind the canvas: the kicker moves down to sit on the headline */
  .panel h1 .kick{top:auto;bottom:calc(var(--g) + 26px + 1.8*clamp(66px,21vw,140px) + 16px);max-width:30ch;opacity:.7}
}
html.rm .bw,html.rm .track,html.rm .hint,html.rm .count{display:none}
html.rm .stage{height:auto}
html.rm .pin{position:relative;height:auto}
/* the panel becomes a plain column: nothing inside it stays absolutely positioned, so nothing can overlap */
html.rm .panel{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(28px,4vh,48px);height:auto;min-height:0;overflow:visible;padding:clamp(96px,14vh,140px) var(--g) clamp(48px,8vh,88px)}
html.rm .panel>*{min-width:0;max-width:100%}
html.rm .panel h1{position:static;inset:auto;min-height:0;display:block}
html.rm .panel h1 .kick,html.rm .panel h1 .big{position:static;inset:auto;display:block;max-width:none}
html.rm .panel h1 .kick{margin-bottom:clamp(18px,3vh,34px)}
html.rm .panel h1 .big{font-size:clamp(56px,11vw,120px);max-width:12ch;line-height:1;margin-top:clamp(10px,2vh,22px)}
html.rm .panel h1{margin-bottom:clamp(20px,3vh,40px)}
html.rm .step,html.rm .end{position:static;left:auto;right:auto;bottom:auto;opacity:1;margin:0;max-width:62ch}
html.rm .hud{position:static;inset:auto;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(28px,4vh,48px);width:100%;min-width:0;pointer-events:auto}
html.rm .note{position:static;left:auto;top:auto;max-width:48ch;margin-top:clamp(48px,9vh,110px)}
/* Reduced motion, 30.9.2026. The layer holding the h1 (.behind) stayed position:absolute, so the
   headline sat at the panel's left edge with no gutter, over the header, the kicker vanished, and
   the steps ran down one narrow column with half the screen empty. Every layer is in the flow now,
   and the static hero is laid out on purpose: kicker, headline, note, the four steps in one row,
   then the audit. On a phone the steps stack. */
html.rm .behind{position:static;inset:auto}
html.rm #gl{display:none}
html.rm .panel{padding-top:clamp(110px,16vh,170px)}
html.rm .panel h1 .kick{opacity:.7;max-width:44ch}
html.rm .panel h1 .big{font-size:clamp(56px,9vw,150px);max-width:none;line-height:.92}
html.rm .panel h1{margin-bottom:0}
html.rm .hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,4vh,48px) clamp(24px,3vw,48px)}
html.rm .note{grid-column:1/-1;margin-top:0;max-width:60ch}
html.rm .step{max-width:none;padding-top:18px;border-top:1px solid color-mix(in srgb,currentColor 22%,transparent)}
html.rm .end{grid-column:1/-1;margin-top:clamp(24px,5vh,64px);max-width:none}
html.rm .end strong{font-size:clamp(44px,5.6vw,96px)}
/* the button takes its colors from the scroll scene, which does not run here: it was dark on dark */
html.rm .end .btn{background:#ECE8DF;color:#121214}
@media (max-width:820px){
  html.rm .hud{grid-template-columns:1fr}
  html.rm .note{display:block}
}