/* HBX v2, phone layer v1 (14 Oct 2026; restored 15 Oct from vault commit 81b3d5c2e as its own build, screens-phone-v1 -> site-phone-v1,
   plus three non-crop fixes from phone v2: voices play button top-right, session steps fading under the photo, 'Tap to step' hint). Loaded after hbx.css. Everything that changes the page is inside (max-width:767px),
   so the desktop layout is untouched (proved by a 1280 before/after pixel and geometry diff). Designed at 360 to 430 px:
   one thumb, a bottom action bar, story-style hero, fill-width condensed caps, edge-to-edge photos, snap strips with a peek.
   Same tokens as DESIGN.md; no new colours, no new glass, no new shadows. */
@media (min-width:768px){.m-only{display:none!important}}

@media (max-width:767px){
  :root{--W:calc(100vw - 2*var(--gut));--bar:76px;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}

  /* music toggle: right edge, under the story pause button (clear of the bar, the headline, the hint and the ticker) */
  .music{top:calc(80px + var(--safe-t))}

  /* ---------- type: nothing under 14 px, display fills the width ---------- */
  .h1{font-size:clamp(2.75rem,12.6vw,3.5rem);line-height:.9}
  .h2{font-size:clamp(2.125rem,9.4vw,2.75rem)}
  .h3{font-size:clamp(1.375rem,6.2vw,1.75rem)}
  .small{font-size:.9375rem;line-height:1.55}
  .label,.tag{font-size:.875rem}
  .body{font-size:1rem}
  .lead{font-size:1.1875rem;line-height:1.5}

  /* ---------- bottom action bar (the nav, moved under the thumb) ---------- */
  .nav{top:auto;bottom:calc(10px + var(--safe-b));left:12px;right:12px;transform:none;width:auto;max-width:none;gap:6px;padding:6px;
    transition:transform .45s var(--ease-out),background-color .2s,color .2s}
  .nav.away{transform:translateY(calc(100% + 24px))}
  .nav-menu{order:-1;flex:0 0 48px;width:48px;height:48px;border:1px solid rgba(247,249,250,.22)}
  .nav[data-nav=light] .nav-menu{border-color:rgba(11,16,18,.22)}
  .nav-mark{height:48px;padding:0 16px}
  .nav-mark img{height:18px}
  .nav .btn-pill{flex:1 1 auto;justify-content:space-between;gap:10px;min-height:48px;padding:0 6px 0 20px;font-size:.9375rem;font-weight:650}
  .nav .btn-pill::after{content:"";flex:0 0 36px;height:36px;border-radius:50%;background:var(--night) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-6-6l6 6-6 6' fill='none' stroke='%2331B44B' stroke-width='2.4'/%3E%3C/svg%3E") center/16px no-repeat}
  /* menu: links sit low, the close button lands where the menu button was */
  .menu{justify-content:flex-end;padding:96px var(--gut) calc(var(--bar) + 40px + var(--safe-b))}
  .menu nav{gap:4px}
  .menu nav a{font-size:clamp(2.75rem,13vw,3.5rem);padding:4px 0}
  .menu-close{top:auto;right:auto;left:18px;bottom:calc(16px + var(--safe-b));width:48px;height:48px}

  /* ---------- hero: a story. Portrait frames, progress segments, tap left / right ---------- */
  .hero{min-height:560px}
  .slide img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 30%;transform-origin:50% 40%}
  @keyframes m-kb{from{transform:scale(1)}to{transform:scale(1.07)}}
  @keyframes m-settle{from{transform:scale(1.14)}to{transform:scale(1)}}
  .js:not(.rm) .slide.kb img,.js:not(.rm) .slide.kb.alt img{animation:m-kb 7.2s linear both}
  .js:not(.rm) .slide.kb.alt img{transform-origin:50% 70%}
  .js:not(.rm) .slide.first.kb img{animation:m-settle 1.6s var(--ease-out) both}
  /* top: the story header reads on daylight sky; bottom: ramps in under the faces (they end at 52 % of the frame) to .8 behind the words */
  .hero-scrim{background:linear-gradient(to bottom,rgba(11,16,18,.8) 0%,rgba(11,16,18,.52) 10%,rgba(11,16,18,.12) 19%,rgba(11,16,18,0) 25%,rgba(11,16,18,0) 50%,rgba(11,16,18,.55) 58%,rgba(11,16,18,.82) 66%,rgba(11,16,18,.92) 80%,rgba(11,16,18,.94) 100%)}
  .hero-words{padding:0 var(--gut) calc(var(--bar) + 26px + var(--safe-b))}
  .hw{flex-direction:row;flex-wrap:wrap;align-items:flex-end}
  .hw-item:nth-child(1) .mega,.hw-item:nth-child(2) .mega{font-size:calc(var(--W) / 4.74)}
  .hw-item:nth-child(1){margin-right:.2em;font-size:calc(var(--W) / 4.74)}
  .hw-item:nth-child(1) .mega{font-size:1em}
  .hw-item:nth-child(3){flex:0 0 100%}
  .hw-item:nth-child(3) .mega{font-size:calc(var(--W) / 3.04)}
  .hw-capline{margin-top:14px;font-size:.9375rem;font-weight:500;max-width:none}
  /* (ported from phone v2, placed for the v1 overlay hero) a visible 'Tap to step' hint under the caption line, on the darkest
     part of the scrim (.92 to .94), right-aligned toward the 'next' side; decoration only (the whole hero is the tap target) */
  .hero-hint{display:flex;justify-content:flex-end;align-items:center;gap:8px;height:24px;margin-top:8px;color:var(--ash);font-size:.875rem;font-weight:550}
  .hero-hint::before,.hero-hint::after{content:"";width:16px;height:16px;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 6l-6 6 6 6' fill='none' stroke='black' stroke-width='2.4'/%3E%3C/svg%3E") center/16px no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 6l-6 6 6 6' fill='none' stroke='black' stroke-width='2.4'/%3E%3C/svg%3E") center/16px no-repeat}
  .hero-hint::after{transform:scaleX(-1)}
  html:not(.js) .hero-hint{display:none}
  .js:not(.rm) .hero-hint{animation:fadein .7s ease both .9s}
  /* the chip becomes the story header: segments, issue line, counter, pause */
  .chip{top:calc(12px + var(--safe-t));left:var(--gut);right:var(--gut);bottom:auto;flex-wrap:wrap;gap:10px 8px;border-radius:0}
  .chip .chip-txt{display:flex;flex:1 1 auto;align-items:center;gap:10px;font-size:.875rem;font-weight:600;line-height:1.2}
  .chip-n{color:var(--white);opacity:.86;font-variant-numeric:tabular-nums}
  .chip-btn{background:rgba(11,16,18,.42)}
  .chip-segs{flex:0 0 100%;display:flex;gap:4px;height:3px}
  .chip-segs i{flex:1;position:relative;overflow:hidden;border-radius:2px;background:rgba(247,249,250,.38)}
  .chip-segs i::after{content:"";position:absolute;inset:0;background:var(--white);transform:scaleX(0);transform-origin:0 50%}
  .chip-segs i.done::after{transform:none}
  @keyframes m-seg{to{transform:scaleX(1)}}
  .chip-segs i.run::after{animation:m-seg 6s linear forwards}
  .paused .chip-segs i.run::after{animation-play-state:paused}
  .rm .chip-segs{display:none}

  /* ---------- what (haze card) ---------- */
  .card-top{border-radius:24px 24px 0 0}
  .ticker{height:48px}
  .ticker-track span{font-size:1.5rem}
  .what{padding-top:44px;padding-bottom:56px}
  .what .x{font-size:2.75rem;margin-bottom:18px}
  .what-h{max-width:none}
  .what-txt{margin-top:24px;max-width:none;gap:14px}
  .what-txt.small{font-size:1rem;line-height:1.6}
  .what-cards{order:4;margin-top:32px;grid-auto-columns:calc(var(--W) * .86);scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut)}
  .what-cards .rcard{scroll-snap-align:start}
  .what-cards .rcard-img{border-radius:20px}
  .what .mdots{order:5;grid-column:1/-1}
  .what-link{order:6;margin-top:18px;font-size:1rem}

  /* snap-strip dots (built by hbx-m.js) */
  .mdots{display:flex;gap:6px;margin-top:16px;height:6px;align-items:center}
  .mdots i{width:6px;height:6px;border-radius:3px;background:currentColor;opacity:.28;transition:width .3s var(--ease-out),opacity .3s}
  .mdots i.on{width:22px;opacity:1}

  /* ---------- who: an edge-to-edge portrait, a fill-width name, three facts ---------- */
  /* polish 15 Oct: no haze strip between the dark facts panel and the night cloudSec (was a 64 px band of haze) */
  .who{padding-bottom:0}
  .who .head-row{margin-bottom:20px;flex-direction:column;align-items:flex-start;gap:10px}
  .who .head-row .h2{max-width:none}
  .who .head-side{order:-1;margin:0;color:var(--slate)}
  .who-card{margin-inline:calc(-1*var(--gut));border-radius:0}
  .who-media{aspect-ratio:4/5}
  .who-scrim{background:linear-gradient(to bottom,rgba(11,16,18,.2) 0%,rgba(11,16,18,0) 18%,rgba(21,28,31,0) 70%,var(--deck) 100%)}
  .who-x{top:18px;left:var(--gut);font-size:2.75rem}
  .who-name{font-size:calc(var(--W) / 1.9);padding:0 var(--gut);margin:-.42em 0 22px;position:relative;line-height:.84}
  .facts{gap:0;padding:0 var(--gut) 28px}
  .facts li{padding:16px 0 18px;border-top:1px solid rgba(247,249,250,.14);gap:6px}
  .facts .small{font-size:.9375rem;color:var(--white);max-width:none}

  /* ---------- cloudSec ---------- */
  .cloud-h{font-size:clamp(2.75rem,13.4vw,3.75rem);max-width:10ch}
  .cloud-cap{bottom:calc(var(--bar) + 22px + var(--safe-b))}

  /* ---------- voices: reel cards with a peek either side ---------- */
  .voices{padding:72px 0 64px}
  .voices .head-row{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:4px}
  .voices .head-row .h2{max-width:none}
  .voices .head-side{order:-1;margin:0}
  .vstrip{--cw:min(calc(var(--W) * .82),360px);padding:24px calc(50vw - var(--cw)/2) 16px;gap:10px}
  .vcard{transform:scale(.92);opacity:.5;transition:transform .45s var(--ease-out),opacity .45s var(--ease-out),box-shadow .45s var(--ease-out)}
  .vcard.mid{transform:none;opacity:1}
  .vcard::after{background:linear-gradient(to bottom,rgba(11,16,18,.4) 0%,rgba(11,16,18,0) 18%,rgba(11,16,18,0) 46%,rgba(11,16,18,.86) 74%,rgba(11,16,18,.95) 100%)}
  .vcard .tag{top:14px;left:14px}
  .vcard figcaption{left:18px;right:18px;bottom:20px;gap:8px}
  .vcard figcaption .h3{font-size:1.625rem}
  .vcard figcaption .small{font-size:.9375rem;line-height:1.45}
  /* (ported from phone v2) the burned-in subtitles run across the middle of every clip (45 to 60 % of the height): the play button
     sits in the top-right corner, clear of them and of the faces; the whole card stays the tap target */
  .vplay::before,.vcard.started:not(.playing) .vplay::before{top:12px;left:auto;right:12px;width:56px;height:56px;margin:0;background-size:22px}
  .vcard.playing .vplay::before{top:12px;left:auto;right:12px;width:44px;height:44px;margin:0;background-size:18px}
  .vmute{top:18px;right:76px}
  .vcard.playing .vmute{top:12px;right:64px}
  .voices .mdots{justify-content:center;color:var(--white);margin:12px 0 0}
  .note{font-size:.9375rem;margin-top:24px}

  /* ---------- method: full-screen drone band, words slide in from the edges ---------- */
  .band-wrap{min-height:560px}
  .band-shade{background:linear-gradient(to bottom,rgba(11,16,18,.4) 0%,rgba(11,16,18,0) 18%,rgba(11,16,18,0) 48%,rgba(11,16,18,.5) 64%,rgba(11,16,18,.66) 100%)}
  .tag-band{top:calc(16px + var(--safe-t))}
  .band .vplay-loop{top:calc(16px + var(--safe-t))}
  .band-words{bottom:calc(var(--bar) + 30px + var(--safe-b));flex-wrap:wrap;justify-content:flex-start;align-items:flex-end;row-gap:0}
  .band-words .mega{font-size:calc(var(--W) / 3.66)}
  .band-words .mega:nth-child(1){margin-right:.18em}
  .band-words .mega:nth-child(3){flex:0 0 100%;text-align:right}
  .method-intro{text-align:left;padding-top:48px;padding-bottom:40px;font-size:1.25rem;line-height:1.45;text-wrap:pretty}
  /* stacking cards: photo on top, the step number beside the title, the body under it */
  .stack{gap:20px}
  .scard{top:calc(14px + var(--i)*14px + var(--safe-t));padding:0;gap:0;border-radius:24px}
  .scard-img{order:-1;border-radius:0;aspect-ratio:4/3}
  .scard-txt{grid-template-columns:auto 1fr;column-gap:16px;row-gap:12px;align-items:end;padding:18px 20px 26px}
  .snum{font-size:4.25rem;line-height:.8}
  .scard-txt .h3{font-size:1.5rem;align-self:end;padding-bottom:2px}
  .scard-txt .body{grid-column:1/-1;font-size:1rem}

  /* ---------- session ---------- */
  .session{padding-top:64px}
  .session-h{margin-bottom:32px;max-width:none}
  /* the haze outline is a clean edge for the steps to scroll under (no sliced lines peeking above or under the sticky frame) */
  .session-grid{gap:0}
  .session-photo{order:0;top:calc(12px + var(--safe-t));aspect-ratio:4/3;border-radius:20px;outline:14px solid var(--haze);background:#cfd6da}
  /* (ported from phone v2) steps fade out under the sticky photo instead of being sliced: the fade band starts at the photo's own
     bottom edge, under it (z 0 < the photo's 1), so it also fills the rounded outline's corners */
  .session-grid::after{content:"";order:1;position:sticky;z-index:0;top:calc(12px + var(--safe-t) + var(--W) * .75);height:104px;margin-top:-20px;margin-bottom:-52px;
    background:linear-gradient(to bottom,var(--haze) 0%,var(--haze) 50%,rgba(230,235,238,.7) 72%,rgba(230,235,238,0) 100%);pointer-events:none}
  .steps{order:2;padding-top:8px}
  .step{padding:22px 0 26px}
  /* polish 15 Oct: hbx-m.js gives the last step a negative bottom margin (see sessionEnd); start, not stretch, or the grid track
     shrinks and stretch grows the step by the same amount */
  .step:last-child{align-self:start}
  .step .label{font-size:.875rem}
  .step-h{font-size:clamp(1.75rem,8vw,2.25rem)}
  .step .body{font-size:1rem}

  /* ---------- story ---------- */
  .story-in{padding-top:48px;padding-bottom:calc(var(--bar) + 24px + var(--safe-b));gap:22px}
  .story-h{font-size:clamp(2.75rem,13vw,3.75rem);max-width:11ch}
  /* the phone crop of the blurred island has more bright sky behind the words: .45 left the green line at 2.56 */
  .story-shade{background:radial-gradient(ellipse 90% 60% at 50% 45%,rgba(11,16,18,.74),rgba(11,16,18,.56))}
  .story-p{font-size:1rem;max-width:34ch}
  /* polish 15 Oct: the story was a 60vh pin over blur with nothing moving but the word fill (a dead pin), and read as type only.
     On phones it is no longer pinned: one screen, and the HBX boat at anchor sits under the paragraph as a whole 16:9 drone frame
     (wide-pullback poster, 1280 x 720, uncropped). The headline fills as it crosses the screen (hbx.js). */
  .story{height:auto}
  .story .pin{position:relative;height:auto;min-height:100svh}
  .story-in{height:auto;min-height:100svh;padding-top:64px;gap:20px}
  .story-frame{width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;margin-top:6px;background:var(--deck)}
  .story-frame img{width:100%;height:100%;object-fit:cover}
  .story-cap{margin-top:2px;text-wrap:balance}

  /* ---------- community: a magazine grid, big frames edge to edge, pairs two-up ---------- */
  .community{padding:72px 0 64px}
  .com-head{gap:22px;margin-bottom:32px}
  .com-txt{gap:14px;max-width:none}
  .com-txt.small{font-size:1rem;line-height:1.6}
  .bento{gap:6px}
  .bento .tcol{gap:6px}
  .bento .t8{margin-inline:calc(-1*var(--gut))}
  .bento .t8 .tile-m{border-radius:0;aspect-ratio:4/5}
  .bento .t8 figcaption{padding:8px var(--gut) 18px}
  .bento .tcol .tile-m,.bento .tcol .tile-m.r169{aspect-ratio:4/5;border-radius:14px}
  .tile figcaption{font-size:.9375rem}

  /* ---------- free ---------- */
  .free{padding:72px 0 40px} /* polish 15 Oct: bottom 72 -> 40, the moon headline below now sits lower in its pin */
  .free-h{font-size:clamp(2.5rem,11.4vw,3.25rem);margin-bottom:32px}
  .qa button{font-size:1.3125rem;padding:18px 16px 18px 20px;min-height:72px}
  .ans .body{padding:0 20px 22px}

  /* ---------- moon ---------- */
  .moon-h{top:calc(56px + var(--safe-t))}
  /* polish 15 Oct: pin 140vh, not 200vh (join still arrives as the circle reaches full bleed; hbx.js remaps the phone timing), and the
     headline sits 24 px above the circle so the two read as one group in the middle of the screen, not a headline at the top and a
     small circle with night between. Scroll mode only: reduced motion and JS-off keep their stacked layout. */
  .js:not(.rm) .moon{height:240svh}
  .js:not(.rm) .moon-h{top:auto;bottom:calc(48svh + 38vw + 24px)}

  /* ---------- join: fill-width words, a full-width thumb button ---------- */
  .join{padding-top:56px}
  .join-words{flex-direction:row;flex-wrap:wrap;margin-bottom:28px}
  .join-words .mask:nth-child(1) .mega,.join-words .mask:nth-child(2) .mega{font-size:calc(var(--W) / 3.42)}
  .join-words .mask:nth-child(1){margin-right:.22em;font-size:calc(var(--W) / 3.42)}
  .join-words .mask:nth-child(1) .mega{font-size:1em}
  .join-words .mask:nth-child(3){flex:0 0 100%}
  .join-words .mask:nth-child(3) .mega{font-size:calc(var(--W) / 3.56)}
  .join-grid{gap:28px}
  .btn-big{justify-self:stretch;min-height:64px;padding:8px 8px 8px 24px;font-size:1.0625rem}
  .btn-big .arrow{flex-basis:48px;height:48px}
  .join-help.small{font-size:1rem;line-height:1.55}
  .join-card{border-radius:20px}

  /* ---------- footer: clear of the bar ---------- */
  .foot{padding:56px 0 calc(var(--bar) + 40px + var(--safe-b))}
  .foot-social a{font-size:.875rem;min-height:48px}
  .foot .small{font-size:.9375rem}
}

/* L Space group photo, portrait crop (26 Oct 2026): the file is a full-bleed 1:2.165 crop, so a 390x844 frame shows it whole. On a shorter frame
   (browser bars) cover trims top and bottom; 65% trims the ceiling first so the faces stay above the headline */
@media (max-width:767px) and (orientation:portrait){.slide.first img{object-position:50% 65%}}
/* L Space group photo (26 Oct 2026): on a landscape phone the 4:3 frame is cropped by height, so keep the faces row in view */
@media (max-width:767px) and (orientation:landscape){.slide.first img{object-position:var(--op,50% 58%)}}
/* music toggle on a landscape phone: in the story row, left of the pause button (the headline fills the rest of the screen) */
@media (max-width:767px) and (orientation:landscape){.music{top:calc(25px + var(--safe-t));right:calc(var(--gut) + 52px)}}