/* HERO */
.hero{position:relative;padding-top:78px;min-height:100svh;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);align-items:stretch}
.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:56px clamp(20px,3vw,48px) 56px max(var(--gut),calc((100vw - var(--max))/2 + var(--gut)))}
.hero h1{font-size:clamp(48px,5.5vw,100px);margin:26px 0 28px}
.hero h1 .ln{display:block;overflow:hidden;padding:.03em 0 .08em}
.hero h1 .ln>span{display:inline-block;animation:rise 1.25s var(--ease-out) both}
.hero h1 .ln:nth-child(2)>span{animation-delay:.08s}.hero h1 .ln:nth-child(3)>span{animation-delay:.16s}
@keyframes rise{from{transform:translateY(112%)}to{transform:none}}
/* H1 = one text node (GTranslate translates each text node on its own, so no inner spans); pink full stop as the accent */
.hero h1.h1-one{font-size:clamp(44px,4.7vw,88px);text-wrap:balance;animation:h1in 1.1s var(--ease-out) both}
.hero h1.h1-one::after{content:".";color:var(--magenta)}
@keyframes h1in{from{transform:translateY(.28em);clip-path:inset(0 0 100% 0)}to{transform:none;clip-path:inset(-.2em -.2em -.3em -.2em)}}
@keyframes soft{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero .lede{max-width:470px;font-size:clamp(17px,1.3vw,19px);color:var(--ink-2);animation:soft 1.1s .4s var(--ease-out) both}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px;animation:soft 1.1s .5s var(--ease-out) both}
.hero .top{animation:soft 1s .2s var(--ease-out) both}
.hero-facts{display:flex;margin-top:52px;padding-top:22px;border-top:1px solid var(--rule);max-width:540px;animation:soft 1.1s .62s var(--ease-out) both}
.hero-facts>div{flex:0 1 auto;padding-right:28px;margin-right:28px;border-right:1px solid var(--rule)}
.hero-facts>div:last-child{border:0;margin:0;padding:0}
.hero-facts dt{display:flex;align-items:center;gap:8px;color:var(--ink-3);font-size:10.5px}
.hero-facts dt::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.hero-facts dd{font:600 clamp(16px,1.25vw,18px)/1.25 var(--display);letter-spacing:-.012em;margin-top:9px;color:var(--ink)}
.live{display:inline-flex;align-items:center;gap:10px}
.live i{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(58,170,53,.6)}70%{box-shadow:0 0 0 10px rgba(58,170,53,0)}100%{box-shadow:0 0 0 0 rgba(58,170,53,0)}}
.stage{position:relative;margin:14px 14px 14px 0;border-radius:28px;overflow:hidden;background:var(--ink);animation:stageIn 1.4s .1s var(--ease-out) both;min-height:560px}
@keyframes stageIn{from{clip-path:inset(0 0 0 100% round 28px)}to{clip-path:inset(0 0 0 0 round 28px)}}
#pix{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.stage-top{position:absolute;left:28px;right:28px;top:24px;display:flex;justify-content:space-between;color:rgba(255,255,255,.75);z-index:3}
.stage-top b{color:#fff;font-weight:500}
.stage-title{position:absolute;left:28px;bottom:84px;z-index:3;color:#fff;max-width:75%}
.stage-title .d{font-size:clamp(32px,3.4vw,58px);display:block;overflow:hidden;padding-bottom:.06em}
.stage-title .d span{display:inline-block}
.stage-veil{position:absolute;inset:auto 0 0 0;height:45%;background:linear-gradient(180deg,rgba(11,16,32,0),rgba(11,16,32,.75));z-index:2;pointer-events:none}
.stage-veil.t{inset:0 0 auto 0;height:20%;background:linear-gradient(0deg,rgba(11,16,32,0),rgba(11,16,32,.5))}
.chapters{position:absolute;left:28px;right:28px;bottom:24px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;z-index:3}
.chap{background:none;border:0;text-align:left;cursor:pointer;color:#fff}
.chap .bar{height:2px;background:rgba(255,255,255,.25);overflow:hidden;border-radius:2px}
.chap .bar i{display:block;height:100%;background:#fff;transform:scaleX(var(--p,0));transform-origin:left}
.chap .mono{display:block;margin-top:10px;color:rgba(255,255,255,.55);transition:color .3s}
.chap.on .mono{color:#fff}
.chap .mono b{font-weight:500;color:inherit}

@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .hero-copy{padding:40px var(--gut) 24px}
  /* explicit width + align-self:start: Safari/WebKit otherwise sizes the stage from the leftover
     grid row (hero min-height:100svh) and derives a tiny width from aspect-ratio (the "orphan thumbnail") */
  .stage{margin:0 12px 12px;min-height:0;aspect-ratio:4/5;width:calc(100% - 24px);height:auto;align-self:start;justify-self:start}
  .stage-title{bottom:76px}
  .chapters{gap:8px}
  .chapters .mono{font-size:9.5px;letter-spacing:.08em;white-space:nowrap}
  .hero-facts{margin-top:40px;max-width:none}
}
@media (max-width:480px){
  .hero-copy{padding-top:28px}
  .hero h1{margin:20px 0 20px}
  .hero .lede{font-size:16px}
  .hero .ctas{margin-top:26px;gap:10px;flex-wrap:nowrap}
  .hero .ctas .btn{height:50px;padding:0 20px;font-size:15px;white-space:nowrap}
  .hero .ctas{flex-wrap:wrap}   /* longer 'Get notified for 2027' label: wrap the 2nd button instead of breaking lines */
  .hero-facts{margin-top:30px;padding-top:16px}
  .hero-facts>div{padding-right:14px;margin-right:14px}
  .hero-facts dt{font-size:9.5px;letter-spacing:.1em;white-space:nowrap}
  .hero-facts dd{font-size:15px;margin-top:7px}
}
@media (max-width:560px){
  #figMeta{display:none}
  .chap .mono b{display:none}
}