/* ======================= HERO: the platform, before dawn ================= */
.hero{position:relative}
.hero-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:end;padding-top:clamp(56px,9vh,112px);padding-bottom:var(--s-8)}
.hero h1{font-size:clamp(3.4rem,7.2vw,6rem);line-height:.92}
.hero h1 .quiet{display:block;color:var(--fog)}
.hero-side .lede{font-size:1.1875rem;max-width:40ch}
.hero-acts{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-top:var(--s-6)}
.hero-foot{margin-top:var(--s-5);display:flex;flex-wrap:wrap;gap:6px 20px}

/* ---- tabs: the tour, with a service-clock progress rule ---- */
.tabs{display:flex;gap:0;border-top:1px solid var(--night-line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{position:relative;flex:1 0 auto;padding:18px 18px 16px 0;text-align:left;font-size:.96875rem;font-weight:500;color:var(--fog);transition:color .25s var(--ease)}
.tabs button::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:transparent}
.tabs button::after{content:"";position:absolute;left:0;top:-1px;height:2px;width:100%;transform:scaleX(0);transform-origin:left center;background:var(--green-lit);will-change:transform}
.tabs button:hover{color:#fff}
.tabs button[aria-selected="true"]{color:#fff}
.tabs button[aria-selected="true"]::after{animation:fill var(--dur,5.5s) linear forwards}
.viewer.paused .tabs button[aria-selected="true"]::after{animation-play-state:paused}
.viewer.stopped .tabs button[aria-selected="true"]::after{animation:none;transform:none}
@keyframes fill{to{transform:scaleX(1)}}

/* ---- stage: readout on the left, the real screen bleeding off the right --- */
.stage{position:relative;padding-top:var(--s-6);padding-bottom:var(--s-7)}
.stage-in{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.readout{position:relative;min-height:340px}
.ro h2{color:#fff}
.ro p{color:var(--mist);font-size:var(--t-small);line-height:1.6;margin-top:var(--s-3)}
.ro dl{margin:var(--s-5) 0 0}
.ro dl div{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-top:1px solid var(--night-line)}
.ro dt{font-size:.875rem;color:var(--fog)}
.ro dd{margin:0;font-family:var(--mono);font-size:1.25rem;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ro:not([hidden]){animation:ro-in .55s var(--ease)}
@keyframes ro-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.readout .ex{margin-top:var(--s-5)}

.screen{position:relative;margin-right:calc(-1 * var(--gut));margin-bottom:-208px;border-radius:var(--r-2) 0 0 var(--r-2);aspect-ratio:2/1;z-index:2}
.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top;opacity:0;transition:opacity .5s var(--ease)}
.screen img.on{opacity:1}

/* the morning ground the screen lands on */
.after{position:relative;padding-top:150px;padding-bottom:var(--s-9)}
.after .row{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(28px,4vw,64px)}
.after p{font-size:var(--t-lede);line-height:1.5;color:var(--ink-2);max-width:40ch}
.after p b{color:var(--ink);font-weight:600}
.jump{display:flex;flex-wrap:wrap;gap:0 28px;align-content:start}
.jump a{font-size:1.0625rem;font-weight:500;line-height:2.1;border-bottom:1px solid transparent;transition:border-color .2s}
.jump a:hover{border-color:var(--ink)}

@media (max-width:1100px){
  .hero-top{grid-template-columns:1fr;align-items:start;gap:var(--s-6)}
  .stage-in{grid-template-columns:1fr}
  .readout{order:2;min-height:0}
  .screen{margin-bottom:-120px}
  .after{padding-top:160px}
  .after .row{grid-template-columns:1fr;gap:var(--s-5)}
}
@media (max-width:640px){
  .hero-top{padding-top:var(--s-7);padding-bottom:var(--s-6)}
  .hero-acts .btn{flex:1;justify-content:center}
  .tabs{margin-right:calc(-1 * var(--gut))}
  .tabs button{flex:0 0 auto;padding-right:22px}
  /* on a phone the screen crops to its left, working half so it stays legible */
  .screen{aspect-ratio:4/3;border-radius:var(--r-2) 0 0 var(--r-2);margin-bottom:0}
  .screen img{width:175%;max-width:none;right:auto}
  .readout{padding-bottom:var(--s-6)}
  .after{padding-top:var(--s-8)}
}
@media (prefers-reduced-motion:reduce){.tabs button[aria-selected="true"]::after{animation:none;width:100%}}