/* =========================================================
   MISSION: MILESTONE — tablet (≤ 1024px) — vertical composition
   Loaded only by media query; desktop never sees this file.
   The scene shows a tall slice of the same world (viewBox set in main.js),
   with copy overlaying the sky above the rocket and controls over the pad.
   Reference device: 10.9" iPad, portrait, 820 × 1180.
   ========================================================= */

:root { --gutter: clamp(24px, 5vw, 56px); }

/* pin height must not follow Safari's toolbar */
#stage { height: 100svh; }

/* chrome: no nav links, no rail, no grain shimmer on scroll; the brand reads M:M */
.links { display: none; }
.long { display: none; }
.short { display: inline; }   /* M:M / Ready for launch */
.hero-copy .btn .ring svg { transform: rotate(90deg); }   /* Ready for launch: the arrow points down = scroll */
.built .eyebrow, .slide .eyebrow { display: none; }   /* no file numbers on the slides */
.rail { display: none; }
.grain { display: none; }
.scroll-hint { bottom: 22px; }

/* ---------- hero: type in the sky above the nose, controls over the pad ---------- */
.hero-copy {
  top: calc(var(--nav-h) + 6vh); left: var(--gutter); right: var(--gutter);
  max-width: none; transform: none;
}
.tminus { margin-bottom: 18px; }
.hero-copy h1 { font-size: clamp(64px, 13.5vw, 150px); line-height: 0.9; }
.tag { margin-top: 22px; font-size: clamp(14px, 1.9vw, 18px); }
.scroll-cue { margin-top: 26px; }

/* ---------- brief / flight plan: same seat as the hero copy ---------- */
.brief { top: calc(var(--nav-h) + 6vh); left: var(--gutter); right: var(--gutter); max-width: none; }
.brief h2 { font-size: clamp(56px, 11.5vw, 124px); }

/* ---------- countdown: copy owns the top ~20%; the digits span gutter to gutter below it ---------- */
.num { font-size: min(73.5vw, 62vh); top: 57%; }   /* two Anton digits ≈ 1.3em wide; centred a little high in the space under the copy */
.stage-copy { top: calc(var(--nav-h) + 4.5vh); left: var(--gutter); right: var(--gutter); max-width: none; }
.stage-copy .label { font-size: clamp(31px, 4vw, 43px); margin-bottom: 14px; white-space: nowrap; }   /* "4. Investigate" stays on one line */
.stage-copy p { font-size: clamp(21px, 2.75vw, 26px); line-height: 1.55; }
.tb { display: inline; }   /* the countdown copy breaks exactly where the markup says */
.stage-copy .dash { margin-top: 18px; }

/* ---------- slides: single column over the upper part; the cloud mass owns the rest (p20: four slots) ---------- */
/* slot 1 (Who it's for): a narrower, taller column so the block sits clear of the bank resting along the bottom */
.built {
  left: var(--gutter); right: 18vw; top: calc(var(--nav-h) + 4.5vh); width: auto;
}
.built h2 { font-size: clamp(48px, 10vw, 104px); }
.built .lede, .slide-dark .lede { margin-top: 16px; font-size: clamp(13px, 1.6vw, 15px); max-width: 52ch; }
.for-list { margin-top: 18px; padding-top: 14px; gap: 12px clamp(18px, 3vw, 32px); }
.for-list span { font-size: clamp(12px, 1.5vw, 14px); }
.tiers { grid-template-columns: 1fr 1fr; gap: 0 clamp(18px, 3vw, 32px); margin-top: 20px; padding-top: 16px; }
.tier b { font-size: clamp(13px, 1.7vw, 16px); margin-bottom: 8px; }
.tier p { font-size: clamp(11.5px, 1.45vw, 13.5px); line-height: 1.7; }

.slide { left: var(--gutter); right: var(--gutter); width: auto; }
.slide h2 { font-size: clamp(48px, 10vw, 104px); }
/* slot 2 (Two ways): the cream mass hangs from the top; copy sits just under it, centred in what's left */
.slide-dark { top: 34%; }
.slide-dark h2 { font-size: clamp(44px, 9vw, 96px); }
/* slot 3 (Former builders): the black bank is low, so the copy sits high */
.slide-light { top: calc(var(--nav-h) + 6vh); }
.builder-copy { grid-template-columns: 1fr; gap: 16px; margin-top: 26px; max-width: 62ch; }
.builder-copy p { font-size: clamp(13px, 1.7vw, 16px); }
/* slot 4 (Cost of waiting): black frame, nothing resting — copy sits in the upper half */
.slide-end { top: 30%; }
.avoid-copy { font-size: clamp(14px, 1.8vw, 17px); max-width: 56ch; }

/* ---------- finale ---------- */
.close { padding: calc(var(--nav-h) + 6vh) var(--gutter) 0; }
.close-inner { max-width: none; }
.close h2 { font-size: clamp(64px, 13.5vw, 150px); }
.close .sub { font-size: clamp(14px, 1.8vw, 17px); }
.footer { grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 8vh; }

/* ---------- touch: no reticle, taps only ---------- */
@media (pointer: coarse) {
  .cursor, .hit, .rico { display: none !important; }
}