/* ---- The hero: the original composition, rebranded ----
   The statement inside the picture and the hand holding the coded screen. The statement swaps per
   stage (2026-09-12); the caption, the stage dock and the orbit dial around the phone are gone. */

.vx .hero-pin { min-height: 100svh; }
.vx .hero-stage { width: min(1180px, 100%); justify-content: center; }
.vx .handwrap { height: min(88svh, 900px); margin-bottom: -20svh; }

/* Grounds: the photo owns the screen; a roast scrim shades the foot. */
.vx .hero-ground .g0::after { background: linear-gradient(180deg, rgba(255,248,238,0) 0%, rgba(255,248,238,0) 55%, rgba(46,21,2,.55) 100%); }
.vx .hero-ground .g1::after { background: linear-gradient(180deg, rgba(255,248,238,0) 0%, rgba(255,248,238,0) 55%, rgba(46,21,2,.60) 100%); }
.vx .hero-ground .g2::after { background: linear-gradient(180deg, rgba(46,21,2,.34) 0%, rgba(46,21,2,.12) 40%, var(--roast) 100%); }

/* Centered statement field (versions 1 and 3). */
.hero-c { text-align: center; padding: clamp(44px, 6vw, 72px) 0 clamp(36px, 5vw, 56px); }
.hero-c .wrap { align-items: center; }
.hero-c .hero-type { font-size: clamp(2.4rem, 5.4vw, 4.6rem); }
.hero-c .hero-sub { max-width: 58ch; text-align: center; }
.fact-chips { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: var(--s-xxl); }
.fact-chips li { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: var(--r-full); font-family: var(--sora); font-weight: 700; font-size: 14px; letter-spacing: -0.02em; }
.hero-c.on-cream { background: var(--cream); color: var(--roast); }
.hero-c.on-cream .hero-sub { color: var(--clay); }
.hero-c.on-cream .fact-chips li { background: var(--cream-dim); color: var(--roast); }
.hero-c.on-orange { background: var(--primary); color: var(--roast); }
.hero-c.on-orange .hero-sub { color: var(--roast); }
.hero-c.on-orange .fact-chips li { background: var(--cream); color: var(--roast); }

@media (max-width: 720px) {
  .hero-c .hero-sub { display: none; }
  .fact-chips { margin-top: var(--s-lg); }
  .fact-chips li { height: 36px; padding: 0 14px; font-size: 13px; }
}

/* Version 2 — the statement sits centered INSIDE the picture, above the hand, over a cream veil. */
.vb .over-copy {
  position: absolute; z-index: 4; top: clamp(72px, 9svh, 104px); left: 50%; transform: translateX(-50%);
  width: min(920px, calc(100% - 40px)); text-align: center; color: var(--roast);
  display: flex; flex-direction: column; align-items: center; transition: color .6s ease;
}
.vb .over-copy .hero-type { font-size: clamp(2.3rem, 5vw, 4.4rem); }
.vb .over-copy .hero-sub { margin-top: var(--s-lg); max-width: 56ch; text-align: center; color: var(--roast); }
.vb[data-stage="2"] .over-copy, .vb[data-stage="2"] .over-copy .hero-sub { color: var(--cream); }
/* One headline and one paragraph per stage, stacked in the same cell so the column never changes height;
   the live one fades in while the last fades out (script.js toggles .is-live). */
.stage-swap { display: grid; }
.stage-swap > span { grid-area: 1 / 1; opacity: 0; transition: opacity .5s ease; }
.stage-swap > span.is-live { opacity: 1; }
.hero-sub b { font-family: var(--mono); font-weight: 700; letter-spacing: -0.02em; }
/* Veil (2026-09-11): a radial glow centred behind the statement instead of a flat top band,
   plus a faint top wash so the transparent nav still reads in the corners. */
.vb .hero-ground .g0::after { background:
  radial-gradient(ellipse 58% 46% at 50% 24%, rgba(255,248,238,.86) 0%, rgba(255,248,238,.56) 45%, rgba(255,248,238,0) 100%),
  linear-gradient(180deg, rgba(255,248,238,.66) 0%, rgba(255,248,238,.30) 9%, rgba(255,248,238,0) 20%, rgba(46,21,2,0) 55%, rgba(46,21,2,.55) 100%); }
.vb .hero-ground .g1::after { background:
  radial-gradient(ellipse 58% 46% at 50% 24%, rgba(255,248,238,.80) 0%, rgba(255,248,238,.50) 45%, rgba(255,248,238,0) 100%),
  linear-gradient(180deg, rgba(255,248,238,.60) 0%, rgba(255,248,238,.26) 9%, rgba(255,248,238,0) 20%, rgba(46,21,2,0) 55%, rgba(46,21,2,.60) 100%); }
.vb .hero-ground .g2::after { background:
  radial-gradient(ellipse 58% 46% at 50% 24%, rgba(46,21,2,.72) 0%, rgba(46,21,2,.42) 45%, rgba(46,21,2,0) 100%),
  linear-gradient(180deg, rgba(46,21,2,.40) 0%, rgba(46,21,2,.08) 30%, rgba(46,21,2,.10) 48%, var(--roast) 100%); }
.vb .handwrap { height: min(78svh, 820px); margin-bottom: -18svh; }
/* Much bigger phone (2026-09-11): the glass runs from just under the statement (40% down) to just
   above the bottom edge (98%). Solved from the screen quad: glass top = 100 + margin - 97.4% of height,
   glass bottom = 100 + margin - 43.9% of height, all in svh. The extra class beats nav-a.css. */
@media (min-width: 721px) {
  .hero-seq.vb .over-copy { top: clamp(96px, 11.5svh, 124px); }
  .hero-seq.vb .over-copy .hero-type { font-size: clamp(2.3rem, min(5vw, 7.4svh), 4.4rem); }
  .hero-seq.vb .handwrap { flex-shrink: 0; height: 109.2svh; margin-bottom: -46.3svh; }
}
/* Short laptop windows: the paragraph goes, as it already does on mobile, and the glass starts at 34%. */
@media (min-width: 721px) and (max-height: 880px) {
  .hero-seq.vb .over-copy .hero-sub { display: none; }
  .hero-seq.vb .handwrap { height: 120.4svh; margin-bottom: -51.3svh; }
}


/* Portrait phones and tablets (polished 2026-09-11, foot band dropped 2026-09-12). Two bands share the
   height: the statement under the nav and the phone, centred over the hand. The phone is sized into
   whatever height the statement leaves and centres its glass in that gap, so short phones get a smaller
   handset instead of a glass that runs into the statement.
   --copy  where the glass may start, px from the top (the statement block plus air)
   --foot  air kept under the glass, px from the bottom
   --gap   extra air above the foot for the scrim's ramp
   Glass maths for a hand box W wide: the glass is 0.79 W tall, its centre 1.0435 W above the box's
   bottom edge. Tablets need the height for it; landscape phones keep the rules above. */
@media (max-width: 720px), (max-width: 959px) and (min-height: 700px) {
  .hero-seq.vb { --copy: 244px; --foot: 24px; --gap: 48px; }
  .hero-seq.vb .handwrap {
    --w: min(133vw, 520px, calc((100svh - var(--copy) - var(--foot) - var(--gap)) / .79));
    flex-shrink: 0; height: auto; width: var(--w);
    margin-bottom: calc(50svh - (var(--copy) - var(--foot) - var(--gap)) / 2 - 1.0435 * var(--w));
  }
}
@media (max-width: 720px) {
  .hero-seq.vb .over-copy { top: 100px; width: calc(100% - 40px); }
  .hero-seq.vb .over-copy .hero-type { font-size: clamp(1.75rem, 9vw, 2.4rem); }
  /* The paragraph's first sentence says what Bumpr is; the rest stays for screen readers only. */
  .hero-seq.vb .over-copy .hero-sub { display: grid; margin-top: 8px; font-size: clamp(13.5px, 3.9vw, 15px); line-height: 1.45; text-wrap: balance; }
  .hero-seq.vb .hero-sub .sub-rest { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Short phones: the sentence goes, and the glass may start right under the statement. */
@media (max-width: 720px) and (max-height: 700px) {
  .hero-seq.vb { --copy: 208px; --gap: 52px; }
  .hero-seq.vb .over-copy .hero-sub { display: none; }
}
/* Tablets: the full paragraph stays, so the glass starts lower. */
@media (min-width: 721px) and (max-width: 959px) and (min-height: 700px) {
  .hero-seq.vb { --copy: 320px; }
}
@media (min-width: 721px) and (max-width: 959px) and (min-height: 700px) and (max-height: 880px) {
  .hero-seq.vb { --copy: 240px; }
}

/* Store badges under the paragraph (2026-09-11). The badge anatomy the stores use (glyph, small line,
   store name) in Bumpr's materials: orange ground, roast ink, control radius, Inter + Sora. They are the
   one orange object in the text column; orange on roast holds on the night stage too.
   --row  what the badges add to the statement block (badge height + air above); the centred layouts
          start the glass that much lower. */
.hero-seq.vb { --row: 68px; }
.hero-stores { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
.store-badge {
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 17px 0 13px;
  background: var(--primary); color: var(--roast); border-radius: var(--r-control);
  text-decoration: none; white-space: nowrap; transition: background .15s;
}
.store-badge:hover, .store-badge:active { background: var(--primary-deep); }
.store-badge svg { display: block; flex: none; fill: currentColor; }
.store-badge .sb-apple { width: 21px; height: 21px; margin-top: -2px; }
.store-badge .sb-play { width: 19px; height: 19px; }
.store-badge span { display: flex; flex-direction: column; line-height: 1; text-align: left; }
.store-badge small { font-size: 10px; font-weight: 500; color: var(--roast-soft); }
.store-badge b { font-family: var(--sora); font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px; }
.vb[data-stage="2"] .store-badge:focus-visible { outline-color: var(--cream); }

/* Centred landscape layout (721–1179 that isn't a portrait tablet): the glass started at 40% (34% on
   short windows) and ran to 98%. It now starts --row lower and still ends at 98%, so the phone shrinks.
   H = glass height / .5347; margin = 2svh - .439 H (the glass maths above). */
@media (min-width: 960px) and (max-width: 1179px), (min-width: 721px) and (max-width: 959px) and (max-height: 699.98px) {
  .hero-seq.vb .handwrap { --H: calc((58svh - var(--row)) / .5347); height: var(--H); margin-bottom: calc(2svh - .439 * var(--H)); }
}
@media (min-width: 960px) and (max-width: 1179px) and (max-height: 880px), (min-width: 721px) and (max-width: 959px) and (max-height: 699.98px) {
  .hero-seq.vb .handwrap { --H: calc((64svh - var(--row)) / .5347); }
}
/* Portrait phones and tablets: the statement band (--copy) grows by the row. */
@media (max-width: 720px), (max-width: 959px) and (min-height: 700px) {
  .hero-seq.vb { --copy: calc(244px + var(--row)); }
}
@media (max-width: 720px) {
  .hero-seq.vb { --row: 54px; }
  .hero-stores { margin-top: 14px; gap: 8px; }
  .store-badge { height: 40px; padding: 0 14px 0 11px; gap: 8px; }
  .store-badge .sb-apple { width: 19px; height: 19px; }
  .store-badge .sb-play { width: 17px; height: 17px; }
  .store-badge small { font-size: 9px; }
  .store-badge b { font-size: 15px; }
}
@media (max-width: 720px) and (max-height: 700px) {
  .hero-seq.vb { --copy: calc(208px + var(--row)); }
}
@media (min-width: 721px) and (max-width: 959px) and (min-height: 700px) {
  .hero-seq.vb { --copy: calc(320px + var(--row)); }
}
@media (min-width: 721px) and (max-width: 959px) and (min-height: 700px) and (max-height: 880px) {
  .hero-seq.vb { --copy: calc(240px + var(--row)); }
}