/* =========================================================
   MISSION: MILESTONE — phone (≤ 700px) — the tablet composition one notch down
   Loaded after tablet.css by media query; desktop and tablet never see this file.
   The scene is anchored to the ground (YMax slice in main.js), so Safari's collapsing
   toolbar only ever adds sky at the top. Copy that shares a frame with a bottom mass is
   top-anchored; copy under the top-hanging cream mass (005) is bottom-anchored.
   Reference device: iPhone 16, portrait, 393 × 852 (≈ 393 × 660 with Safari's chrome).
   ========================================================= */

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

/* chrome */
/* p39: the phone gets the tally too, under the menu button (geometry is in styles.css ≤1024) */
.nav-score { font-size: 10.5px; }
.brand { font-size: 10px; letter-spacing: 0.2em; gap: 10px; }
.brand-mark { width: 12px; height: 26px; }
body.cloud-top .brand { color: var(--ink); }   /* the 005 cream mass hangs from the top, behind the brand */
.scroll-hint { bottom: 16px; left: auto; right: var(--gutter); }   /* right side: clear of the footer's first column */
.scroll-hint .track { height: 44px; }

/* ---------- hero: everything above the tower top (~57% of the short frame) ---------- */
.hero-copy { top: calc(var(--nav-h) + 3vh); }
.tminus { font-size: 11px; gap: 12px; margin-bottom: 14px; }
.tminus i { width: 28px; }
.hero-copy h1 { font-size: clamp(44px, 13vw, 58px); }
.tag { margin-top: 16px; font-size: 12px; letter-spacing: 0.22em; line-height: 1.6; }
.scroll-cue { margin-top: 18px; font-size: 10.5px; gap: 10px; }
.syscheck .bits i { width: 9px; height: 9px; }
.btn { gap: 16px; font-size: 11px; }

/* ---------- brief / flight plan ---------- */
.brief { top: calc(var(--nav-h) + 3vh); }
.brief h2 { font-size: clamp(40px, 11.5vw, 52px); }

/* ---------- countdown: copy wraps naturally; digits sit lower and smaller ---------- */
.num { font-size: min(62vw, 36vh); top: 60%; }
.stage-copy { top: calc(var(--nav-h) + 3vh); }
.stage-copy .label { font-size: 24px; letter-spacing: 0.24em; margin-bottom: 12px; white-space: normal; }
.stage-copy p { font-size: 17px; line-height: 1.55; }
/* the tablet's line breaks apply here too: "Goals, context, constraints." and "process, and workflow."
   each sit on their own second line (33 chars max per line at 17px mono ≈ 337px; the column is 353px) */
.stage-copy .dash { margin-top: 14px; }

/* ---------- slot 1 (Who it's for): single block over the upper two-thirds, compact ---------- */
.built { left: var(--gutter); right: var(--gutter); top: calc(var(--nav-h) + 3vh); }
.built h2 { font-size: clamp(38px, 11vw, 46px); }
.built .lede, .slide-dark .lede { margin-top: 12px; font-size: 12.5px; line-height: 1.6; max-width: none; }
.for-list { grid-template-columns: 1fr; gap: 8px; margin-top: 14px; padding-top: 12px; }
.for-list li { grid-template-columns: 1fr; gap: 2px; }
.for-list b { font-size: 9.5px; }
.for-list span { font-size: 11px; line-height: 1.5; }
.tiers { gap: 0 14px; margin-top: 14px; padding-top: 12px; }
.col-head { font-size: 9px; letter-spacing: 0.22em; margin-bottom: 6px; }
.tier b { font-size: 12px; margin-bottom: 6px; }
.tier p { font-size: 11px; line-height: 1.55; }

/* ---------- slot 2 (Two ways): hangs under the cream mass, so anchor to the bottom of the frame ---------- */
.slide h2 { font-size: clamp(38px, 11vw, 46px); }
.slide-dark { top: auto; bottom: 7vh; }
.slide-dark h2 { font-size: clamp(38px, 11vw, 46px); }

/* ---------- slot 3 (Former builders): black bank low; copy high ---------- */
.slide-light { top: calc(var(--nav-h) + 3vh); }
.builder-copy { margin-top: 16px; gap: 12px; max-width: none; }
.builder-copy p { font-size: 12.5px; line-height: 1.7; }

/* ---------- slot 4 (Cost of waiting): black frame, copy high ---------- */
.slide-end { top: calc(var(--nav-h) + 3vh); }
.avoid-copy { margin-top: 16px; font-size: 13px; line-height: 1.7; max-width: none; }

/* ---------- finale: the desktop finale, one notch down — no footer on the phone ---------- */
.close { padding: calc(var(--nav-h) + 4vh) var(--gutter) 10vh; min-height: 100svh; justify-content: flex-start; }
.tzero { font-size: 10px; letter-spacing: 0.22em; gap: 8px 10px; margin-bottom: 20px; white-space: nowrap; }
.tzero i { width: 24px; }
.close h2 { font-size: clamp(46px, 13.5vw, 60px); }
.close .sub-cta { margin: 20px 0 30px; gap: 8px; }
.close .sub-cta b { font-size: 12px; letter-spacing: 0.22em; }
.close .sub-cta span { font-size: 10.5px; letter-spacing: 0.2em; }
.btn-large .ring { width: 72px; height: 72px; }
.btn-large .ring .ic-rocket { width: 16px; height: 38px; }
.cta-row { margin-top: 14vh; }   /* the button and its runway sit lower in the frame */
.click-here { right: calc(50% + 36px + 22px); font-size: 12.5px; letter-spacing: 0.2em; margin-top: -8px; }   /* the ring is 72 px here; p32: +19 % */
.footer { display: none; }
.menu li:last-child { display: none; }   /* Contact opens the briefing overlay, and the menu already has that button — one door on the phone */