/* Wonderphase AI — home / Explore page. Tokens come from ui.css; literals appear only on footage (always-dark overlays).
   Palette 3 ("Ember and Ivory"): ember is kept for the one primary button; tags, flags and wayfinding are ivory / ink. */
.hm{--pad:clamp(16px,3.4vw,48px);--hm-bar:var(--top);overflow-x:clip}
.hm a:focus-visible,.hm button:focus-visible,.hm-rail:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.hm-sec{max-width:1400px;margin:0 auto;padding:clamp(34px,5vw,64px) var(--pad) 0}
.hm-h2{font-family:var(--disp);font-weight:800;font-size:clamp(19px,2.3vw,30px);letter-spacing:-.02em;line-height:1.12;text-transform:uppercase;margin:0;text-wrap:balance}
.hm-h2:focus{outline:0}
.hm-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;margin-bottom:18px}
.hm-head .u-kicker{margin-bottom:12px}
.hm-head p{color:var(--mu);font-size:15px;line-height:1.55;max-width:74ch;margin-top:8px}
.hm-head .u-btn svg{width:16px;height:16px}
.hm-head-act{display:flex;align-items:center;gap:10px;flex:none}
.hm-head .u-btn:hover{border-color:var(--tx)}
.hm-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hm-out{display:inline-block;margin-left:4px;font-size:.85em;opacity:.7}

/* ───────── 0 · the top bar over the hero ─────────
   On this page the clip runs from the very top of the window, behind the top bar (owner, 6 Oct). While the top 64 px of the page
   are on screen home.js puts body.hm-clear on: the bar turns see-through, with white text and glass pills; after that short scroll
   it fades back to the normal solid bar of the theme. Every rule needs body[data-page="explore"], so no other page changes.
   The re-scoped tokens stop at #hud, so the menus that drop from the bar keep their solid theme surfaces.
   body.hm-snap (two frames, on entering or leaving the page) switches the bar without a fade. */
body[data-page="explore"] .top{transition:background-color .2s ease,border-color .2s ease,-webkit-backdrop-filter .2s ease,backdrop-filter .2s ease}
body[data-page="explore"] .top :is(.brand,.core,.trg,.mode,.tagx){transition:color .2s ease,background-color .2s ease,border-color .2s ease}
body[data-page="explore"].hm-clear .top{background-color:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
body[data-page="explore"].hm-clear .top>:not(#hud){
  --tx:#faf7f2;--mu:#ece7e0;--dim:#c9c3bb;--line:rgba(255,255,255,.3);--line2:rgba(255,255,255,.42);
  --p1:rgba(12,10,9,.34);--p2:rgba(255,255,255,.14);--p3:rgba(255,255,255,.22);--p4:rgba(255,255,255,.3);--bg:#0b0b0b;
  --red:#ff4b2b;--hot:#ff4b2b;--hot-tx:#ff7a5c;--inv-bg:#f7f5f1;--inv-tx:#0b0b0b;--ok:#3df5a6;--mint:#3df5a6;--mint-tx:#62f7b6;--gold:#f7f5f1;--gold-tx:#f7f5f1;
  color:var(--tx);text-shadow:0 1px 10px rgba(0,0,0,.45)}
body[data-page="explore"].hm-clear .top :is(.trg,.mode){-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2)}
body[data-page="explore"].hm-clear .top .mode{background:var(--p1)}
body[data-page="explore"].hm-clear .top .tagx{text-shadow:none}
body[data-page="explore"].hm-clear .top .trg .dot{box-shadow:0 0 0 2px rgba(12,10,9,.7)}
body[data-page="explore"].hm-clear .top :is(.brand,.core,.top-right button):focus-visible{outline:2px solid #faf7f2;outline-offset:2px}
body[data-page="explore"].hm-clear .top .nav a:focus-visible{outline:2px solid #faf7f2;outline-offset:-2px}
body.hm-snap .top,body.hm-snap .top *{transition:none!important}
.hm-sentry{position:absolute;top:0;left:0;width:1px;height:64px;visibility:hidden;pointer-events:none}

/* ───────── 1 · hero ─────────
   One flow layout at every width: the copy and the clip bar stack from the bottom, so they can never overlap.
   The headline box always reserves two lines and grows upward, so the promise and buttons never move between slides.
   The hero reaches up under the top bar by the bar's height (--hm-bar, measured by home.js) and adds that height back as padding,
   so the copy and the clip bar sit exactly where they did; only the clip and its shade continue behind the bar. */
.hm-hero{position:relative;display:flex;flex-direction:column;justify-content:flex-end;margin-top:calc(-1*var(--hm-bar));min-height:calc(clamp(460px,calc(100svh - var(--top) - var(--rib,0px) - 300px),800px) + var(--hm-bar));padding:calc(72px + var(--hm-bar)) var(--pad) 20px;overflow:hidden;background:#050404;isolation:isolate}
.hm-stage,.hm-layer,.hm-scrim{position:absolute;inset:0}
.hm-layer{opacity:0;transition:opacity 1s ease}
.hm-layer.on{opacity:1}
.hm-layer img,.hm-layer video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hm-layer img:not([src]){visibility:hidden}
.hm-layer video{opacity:0;transition:opacity .5s}
.hm-layer video.on{opacity:1}
/* the stops are measured from the bar's bottom edge, so below the bar the shade is the same as before; the strip behind the bar gets a little more */
.hm-scrim{z-index:1;background:linear-gradient(90deg,rgba(6,5,4,.84) 0%,rgba(6,5,4,.55) 34%,rgba(6,5,4,0) 68%),
  linear-gradient(0deg,rgba(6,5,4,.95) 0%,rgba(6,5,4,.45) calc((100% - var(--hm-bar))*.3),rgba(6,5,4,0) calc((100% - var(--hm-bar))*.58)),
  linear-gradient(180deg,rgba(6,5,4,.62) 0,rgba(6,5,4,.5) var(--hm-bar),rgba(6,5,4,0) calc(var(--hm-bar) + (100% - var(--hm-bar))*.2))}
.hm-copy{position:relative;z-index:2;max-width:820px;color:#faf7f2}
.hm-kick{margin:0;font-weight:400;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#ffd9cf;background:rgba(12,10,9,.5);border:1px solid rgba(255,138,110,.55);padding:6px 12px;border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hm-kick i{width:6px;height:6px;border-radius:50%;background:#ff5a3c;box-shadow:0 0 10px #ff5a3c}
.hm-hook{display:flex;align-items:flex-end;min-height:2em;font-family:var(--disp);font-weight:800;font-size:clamp(30px,4.9vw,66px);line-height:1;letter-spacing:-.03em;text-transform:uppercase;margin:14px 0 14px;text-shadow:0 2px 30px rgba(0,0,0,.55)}
.hm-hook span{display:block;text-wrap:balance}
.hm-promise{font-size:clamp(15px,1.3vw,18px);line-height:1.5;color:#efe9e1;max-width:62ch;text-shadow:0 1px 14px rgba(0,0,0,.7)}
.hm-promise .hm-ps{display:none}
.hm-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px}
.hm-cta .u-btn svg{width:17px;height:17px}
.hm-glass{background:rgba(14,11,10,.56);border-color:rgba(255,255,255,.34);color:#faf7f2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hm-glass:hover{background:rgba(14,11,10,.74);border-color:#ff8a6e}
.hm-other{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 8px;border:0;background:none;color:#e4ddd4;font-size:14px;font-weight:500;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px;text-shadow:0 1px 10px rgba(0,0,0,.8)}
.hm-other:hover{color:#fff;text-decoration-color:#fff}
.hm-other svg{width:15px;height:15px}
.hm-hero .u-btn:focus-visible,.hm-hero button:focus-visible{outline-color:#fff}
.hm-copy.in .hm-hook span{animation:hm-rise .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes hm-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hm-bar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px 24px;margin-top:clamp(18px,3.2vh,34px)}
.hm-now{display:flex;align-items:center;gap:12px;flex:1 1 auto;min-width:0;color:#e4ddd4;font-size:13.5px}
.hm-now .tg{flex:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;background:rgba(12,10,9,.6);border:1px solid rgba(255,244,235,.28);border-radius:999px;padding:5px 10px;color:#faf7f2;white-space:nowrap}
.hm-now .sb{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 10px rgba(0,0,0,.8)}
.hm-ctl{display:flex;align-items:center;gap:6px;flex:none}
.hm-idx{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:#e4ddd4;margin:0 6px 0 2px;min-width:52px;text-align:center}
.hm-rnd{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(14,11,10,.5);color:#faf7f2;cursor:pointer;transition:background .15s,border-color .15s}
.hm-rnd:hover{background:rgba(14,11,10,.8);border-color:#fff}
.hm-rnd svg{width:16px;height:16px}
.hm-pills{display:flex;align-items:center;gap:5px;margin:0 4px}
.hm-pill{width:24px;height:28px;padding:12px 0;border:0;background:none;cursor:pointer;transition:width .3s}
.hm-pill i{display:block;height:4px;border-radius:4px;background:rgba(255,255,255,.38);overflow:hidden}
.hm-pill:hover i{background:rgba(255,255,255,.7)}
.hm-pill.on{width:48px}
.hm-pill.on i::after{content:"";display:block;height:100%;border-radius:4px;background:#fff}
.hm-hero.run .hm-pill.on i::after{transform-origin:left;animation:hm-fill var(--dur,8000ms) linear both}
@keyframes hm-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ───────── 2 · studio doors ───────── */
.hm-doors-sec{padding-top:26px}
.hm-doors-head{display:flex;align-items:baseline;gap:6px 22px;flex-wrap:wrap;margin-bottom:16px}
.hm-doors-head p{color:var(--mu);font-size:14.5px}
.hm-doors-sec .hm-h2{scroll-margin-top:calc(var(--hm-bar) + 18px)} /* "or pick another studio" lands below the sticky bar, not under it */
.hm-doors{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.hm-door{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;background:var(--p1);overflow:hidden;box-shadow:var(--edge),var(--lift);transition:transform .18s,border-color .18s,box-shadow .18s}
.hm-door:hover,.hm-door:focus-visible{transform:translateY(-4px);border-color:var(--tx);box-shadow:var(--edge),var(--pop-shadow)}
.hm-door .dm{position:relative;display:block;aspect-ratio:16/9;background:#000;overflow:hidden}
.hm-door .dm img,.hm-door .dm video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.hm-door .dm video{opacity:0;transition:opacity .3s}.hm-door.playing .dm video{opacity:1}
.hm-door .dm img.alt{opacity:0;transition:opacity .45s}.hm-door .dm img.alt.on{opacity:1}.hm-door .dm img.alt:not([src]){display:none}
/* NEW / BETA sit on footage: the same glass label as the media cards, in both themes */
.hm-door .dt{position:absolute;top:9px;right:9px;z-index:2;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);color:#faf7f2;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hm-door .db{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 10px;padding:13px 14px 15px}
.hm-door .di{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;background:var(--p3);color:var(--tx);border:1px solid var(--line2);transition:background .18s,color .18s}
.hm-door:hover .di,.hm-door:focus-visible .di{background:var(--inv-bg);color:var(--inv-tx);border-color:transparent}
.hm-door .di svg{width:20px;height:20px}
.hm-door .db b{font-size:18px;font-weight:700;letter-spacing:.005em;color:var(--tx);white-space:nowrap}
.hm-door .da{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--tx);transition:transform .18s,background .18s}
.hm-door .da svg{width:17px;height:17px}
.hm-door:hover .da{transform:translateX(3px);background:var(--p3)}
.hm-door .dl{grid-column:1/-1;color:var(--mu);font-size:13.5px;line-height:1.4;margin-top:4px}

/* ───────── 3 · the wall ───────── */
.hm-wall{container-type:inline-size}
.hm-chips{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px}
.hm-chips::-webkit-scrollbar{display:none}
.hm-chip{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:38px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:var(--p1);color:var(--mu);font-size:13.5px;font-weight:600;white-space:nowrap;cursor:pointer;transition:.15s}
.hm-chip span{font-family:var(--mono);font-size:10px;font-weight:700;padding:2px 6px;border-radius:999px;background:var(--p3);color:var(--mu)}
.hm-chip:hover{color:var(--tx);border-color:var(--tx)}
/* selected = raised surface + strong outline; the count stays a tinted bubble, never a solid ink pill */
.hm-chip.on{background:var(--p3);border-color:var(--tx);color:var(--tx);box-shadow:inset 0 0 0 1px var(--tx)}
.hm-chip.on span{background:var(--p4);color:var(--tx)}
.hm-grid{--n:4;--g:10px;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:var(--g);grid-auto-rows:190px;grid-auto-rows:calc((100cqw - (var(--n) - 1)*var(--g))/var(--n)*.5625)}
.hm-grid .u-thumb{aspect-ratio:auto;width:100%;height:100%;border-radius:14px}
.hm-grid .u-thumb.tall{grid-row:span 3}
.hm-grid .u-thumb.big{grid-column:span 2;grid-row:span 2;border-radius:18px}
.hm-grid .u-thumb .cap{padding:30px 46px 10px 12px}
.hm-grid .u-thumb .cap b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-grid .u-thumb .cap span,.hm-grid .u-thumb:hover .cap span{display:block;font-size:11px;color:#d3ccc4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-grid .u-thumb .cap i{font-style:normal}
.hm-grid .u-thumb .cap .ps{display:none}
.hm-grid .u-thumb.big .cap{padding:40px 170px 14px 16px}
.hm-grid .u-thumb.big .cap b{font-size:19px}
.hm-grid .u-thumb.big .cap span{font-size:12px}
/* the "this does something" cue on every tile: an arrow; the big tile spells it out */
.hm-go{position:absolute;right:9px;bottom:9px;z-index:3;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:30px;min-width:30px;padding:0 8px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);color:#faf7f2;font-size:12.5px;font-weight:600;transition:background .15s,border-color .15s}
.hm-go em{display:none;font-style:normal}
.hm-go svg{width:15px;height:15px;flex:none}
.hm-grid .u-thumb.big .hm-go{right:14px;bottom:14px;height:36px;padding:0 14px}
.hm-grid .u-thumb.big .hm-go em{display:inline}
.hm-grid .u-thumb:hover .hm-go,.hm-grid .u-thumb:focus-visible .hm-go{background:rgba(250,247,242,.94);border-color:transparent;color:#0b0b0b}
.hm-more{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:18px;color:var(--dim);font-size:13px}
.hm .u-thumb:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ───────── 4 · how it works ───────── */
.hm-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;counter-reset:hs}
.hm-steps li{counter-increment:hs;position:relative;display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-radius:18px;background:var(--p1);padding:18px;box-shadow:var(--edge)}
.hm-steps li::before{content:counter(hs);flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;font-family:var(--disp);font-weight:800;font-size:18px;color:var(--tx);background:var(--p3);border:1px solid var(--line2)}
.hm-steps b{display:block;font-size:17px;font-weight:700;color:var(--tx);margin-bottom:2px}
.hm-steps span{color:var(--mu);font-size:14px;line-height:1.45}

/* ───────── 5 · one idea, six models ───────── */
.hm-quote{margin:0 0 14px;padding:14px 18px;border:1px solid var(--line);border-left:3px solid var(--line2);border-radius:14px;background:var(--p1);color:var(--mu);font-size:15px;line-height:1.55;max-width:104ch}
.hm-quote span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.hm .u-thumb .lab.hm-soon{left:auto;right:9px;background:rgba(12,10,9,.78);border-color:rgba(255,244,235,.45)}
.hm-cmp{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.hm-cmp .u-thumb{aspect-ratio:4/3;border-radius:14px;width:100%}
.hm-cmp .u-thumb .cap{padding-right:44px}
.hm-cmp .u-thumb .cap span,.hm-cmp .u-thumb:hover .cap span{display:block;font-size:11px;color:#d3ccc4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hm-cmp .u-thumb:hover .hm-go,.hm-cmp .u-thumb:focus-visible .hm-go{background:rgba(250,247,242,.94);border-color:transparent;color:#0b0b0b}

/* ───────── 6 · more to make ───────── */
.hm-rows-h{margin-bottom:6px}
.hm-row{margin-top:30px;min-width:0}
.hm-row .hm-h2{font-family:var(--ui);font-weight:700;font-size:clamp(18px,1.9vw,23px);letter-spacing:.005em;margin-top:10px}
.hm-row .hm-head{margin-bottom:14px}
.hm-row .hm-head p{font-size:14.5px;max-width:68ch;margin-top:6px}
/* the row label carries the same icon as that studio's door, so the two read as one place */
.hm-lbl{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mu)}
.hm-lbl-i{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--p3);border:1px solid var(--line2);color:var(--tx)}
.hm-lbl-i svg{width:16px;height:16px}
.hm-cta-after{display:none}
.hm-rail{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--pad);margin:0 calc(var(--pad)*-1);padding:3px var(--pad) 10px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.hm-arw{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:var(--p2);color:var(--tx);cursor:pointer;transition:background .15s,border-color .15s}
.hm-arw:hover:not(:disabled){background:var(--p3);border-color:var(--tx)}.hm-arw:disabled{opacity:.35;cursor:default}.hm-arw svg{width:17px;height:17px}
.hm-railnav{display:flex;gap:6px}.hm-railnav[hidden]{display:none}
@media (hover:none){.hm-railnav{display:none}}
.hm-rail .u-thumb{flex:none;width:clamp(150px,15vw,190px);scroll-snap-align:start;border-radius:14px}
.hm-rail .u-thumb .cap b{font-size:13px;line-height:1.25}
.hm-imgs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.hm-imgs .u-thumb{width:100%;border-radius:14px}
.hm-soon-card{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;aspect-ratio:1/1;padding:16px;border:1px dashed var(--line2);border-radius:14px;background:var(--p1);color:var(--mu);font-size:12.5px;line-height:1.45;transition:border-color .15s}
.hm-soon-card b{color:var(--tx);font-size:14px}
.hm-soon-card:hover{border-color:var(--tx)}
.hm-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px clamp(20px,3vw,44px)}
.hm-duo .hm-head{flex-wrap:nowrap}.hm-duo .hm-row{display:flex;flex-direction:column}.hm-duo .hm-voice{flex:1}
.hm-games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hm-games .u-thumb{width:100%;border-radius:14px}
.hm-voice{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:10px;align-items:stretch}
.hm-voice .u-thumb{aspect-ratio:auto;min-height:200px;height:100%;border-radius:14px}
.hm-lines{display:flex;flex-direction:column;gap:10px}
.hm-line{flex:1;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:center;text-align:left;border:1px solid var(--line);border-radius:14px;background:var(--p1);padding:12px 14px;color:var(--tx);cursor:pointer;transition:border-color .15s,transform .15s}
.hm-line:hover{border-color:var(--tx);transform:translateY(-2px)}
/* a quote mark, not a waveform: the line loads in the Audio studio, it does not play here */
.hm-line .qi{grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--p3);color:var(--mu)}
.hm-line .qi svg{width:15px;height:15px}
.hm-line .lt{font-size:14.5px;line-height:1.4}
.hm-line em{font-style:normal;font-size:12px;font-weight:600;color:var(--mu)}
.hm-line:hover em{color:var(--tx)}

/* ───────── 7 · credits teaser ───────── */
.hm-price{position:relative;display:flex;align-items:center;justify-content:space-between;gap:22px 40px;flex-wrap:wrap;border-radius:22px;padding:clamp(20px,3vw,36px);background:var(--p1);border:1px solid var(--line2);box-shadow:var(--edge),var(--lift)}
.hm-price-t{flex:1 1 460px;min-width:0}
/* the offer is the design system's deal flag (skewed, inverted), so money reads differently from the section labels */
.hm-price .u-deal.hm-offer{font-size:11.5px;padding:5px 11px;white-space:normal;line-height:1.35}
.hm-price .hm-h2{margin:16px 0 8px}
.hm-price p{color:var(--mu);font-size:15.5px;line-height:1.55;max-width:70ch}
.hm-price p+p{margin-top:8px}
.hm-price p b{color:var(--tx);font-weight:600}
.hm-price .u-note{margin-top:10px;font-size:13px}
.hm-price-b{display:flex;flex-direction:column;align-items:center;gap:12px}
.hm-price-b .u-btn svg{width:16px;height:16px}
.hm-plans{border-width:1.5px;border-color:var(--tx)}
.hm-plans:hover{background:var(--inv-bg);color:var(--inv-tx);border-color:var(--inv-bg)}
.hm-packs{font-size:14px;color:var(--mu);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line2)}
.hm-packs:hover{color:var(--tx)}

/* ───────── 8 · footer ───────── */
.hm-foot{margin-top:clamp(44px,6vw,80px);border-top:1px solid var(--line);padding:36px var(--pad) 46px;background:var(--p1)}
.hm-foot-grid{max-width:calc(1400px - 2*var(--pad));margin:0 auto;display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:26px 30px}
.hm-foot .word{font-size:25px;color:var(--tx);margin-bottom:12px}
.hm-foot-brand p{color:var(--mu);font-size:14px;max-width:40ch;line-height:1.5}
.hm-foot nav{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.hm-foot h3{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}
.hm-foot nav a{color:var(--mu);font-size:14.5px;padding:5px 0;transition:color .15s}
.hm-foot nav a:hover{color:var(--tx);text-decoration:underline;text-underline-offset:3px}
.hm-legal{max-width:calc(1400px - 2*var(--pad));margin:28px auto 0;padding-top:18px;border-top:1px solid var(--line);color:var(--dim);font-size:12.5px;line-height:1.7}
.hm-legal a{color:var(--mu);text-decoration:underline;text-underline-offset:3px}
.hm-legal a:hover{color:var(--tx)}

/* ───────── responsive ───────── */
@media (max-width:1180px){
  .hm-doors{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hm-door .dm{aspect-ratio:16/8}
  .hm-cmp{grid-template-columns:repeat(3,minmax(0,1fr))}.hm-cmp .u-thumb{aspect-ratio:16/10}
  .hm-duo{grid-template-columns:1fr}
  .hm-imgs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1099px){.hm-grid{--n:3}}
/* up to 1100 px the clip bar stacks (caption, then controls) so it can never crowd the buttons */
@media (max-width:1100px){
  .hm-bar{flex-direction:column;align-items:stretch;gap:8px}
  .hm-now{flex-wrap:wrap;gap:6px 10px;font-size:13px}.hm-now .sb{flex-basis:100%;order:-1;white-space:normal;line-height:1.35}
  .hm-ctl{width:100%}.hm-rnd{width:40px;height:40px}
  .hm-pills{flex:1;margin:0 4px;gap:4px}
  .hm-pill{flex:1;width:auto;min-width:0}.hm-pill.on{flex:2.2;width:auto}
  .hm-idx{min-width:0;margin:0 4px}
}
/* phones and portrait tablets: the clip plays in a band at the top, uncovered; the words sit below it on the dark */
@media (max-width:760px),(max-width:1100px) and (max-aspect-ratio:1/1){
  .hm-hero{--band:min(60vw,560px);min-height:0;padding:calc(var(--band) - 60px + var(--hm-bar)) var(--pad) 14px}
  .hm-stage,.hm-scrim{bottom:auto;height:calc(var(--band) + var(--hm-bar))}
  .hm-scrim{background:linear-gradient(180deg,rgba(5,4,4,.62) 0,rgba(5,4,4,.4) var(--hm-bar),rgba(5,4,4,0) calc(var(--hm-bar) + var(--band)*.2),rgba(5,4,4,0) calc(var(--hm-bar) + var(--band)*.56),rgba(5,4,4,.82) calc(var(--hm-bar) + var(--band)*.86),#050404 calc(var(--hm-bar) + var(--band)))}
  .hm-copy{max-width:640px}
}
@media (max-width:760px){
  .hm-hero{--band:76vw}
  .hm-doors-sec{padding-top:20px}.hm-doors-head p{display:none}.hm-doors-head{margin-bottom:12px}
  .hm-kick{font-size:9.5px;letter-spacing:.14em;padding:5px 10px}
  .hm-promise .hm-pf{display:none}.hm-promise .hm-ps{display:inline}
  .hm-hook{margin:12px 0 10px}
  .hm-promise{font-size:15px}
  .hm-cta{margin-top:16px;gap:8px}
  .hm-cta .u-btn{flex:1 1 auto;min-height:48px;padding:0 14px;font-size:14.5px}
  .hm-other{width:100%;justify-content:center;min-height:40px}
  .hm-bar{margin-top:10px}
  .hm-doors{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .hm-door .dm{aspect-ratio:16/9}
  .hm-door .db{grid-template-columns:auto minmax(0,1fr);padding:11px 12px 13px;gap:4px 9px}
  .hm-door .da{display:none}
  .hm-door .di{width:32px;height:32px;border-radius:10px}
  .hm-door .db b{font-size:16.5px}
  .hm-door .dl{font-size:13px}
  .hm-steps{grid-template-columns:1fr}.hm-duo .hm-head{flex-wrap:wrap}
  .hm-steps{gap:8px}.hm-steps li{padding:12px 14px;gap:12px;box-shadow:none}
  .hm-steps li::before{width:34px;height:34px;border-radius:11px;font-size:15px}
  .hm-steps b{font-size:15.5px}.hm-steps span{font-size:13.5px}
  /* rows: one swipeable rail each, no per-card sub-line, and the studio button after the rail */
  .hm-cta-top{display:none}
  .hm-cta-after{display:flex;margin-top:12px;min-height:46px}
  .hm-row{margin-top:34px}
  .hm-row .hm-head{margin-bottom:12px}
  .hm-imgs,.hm-games{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--pad);margin:0 calc(var(--pad)*-1);padding:3px var(--pad) 8px;scrollbar-width:none}
  .hm-imgs::-webkit-scrollbar,.hm-games::-webkit-scrollbar{display:none}
  .hm-imgs .u-thumb,.hm-soon-card{flex:none;width:44vw;aspect-ratio:1/1;scroll-snap-align:start}
  .hm-games .u-thumb{flex:none;width:62vw;scroll-snap-align:start}
  .hm-imgs .u-thumb .cap span,.hm-games .u-thumb .cap span{display:none}
  .hm-imgs .u-thumb .cap b::after,.hm-games .u-thumb .cap b::after{content:" →"}
  .hm-games .u-thumb .cap{padding:24px 10px 8px}.hm-games .u-thumb .cap b{font-size:13.5px}
  .hm-voice{grid-template-columns:1fr}.hm-voice>.u-thumb{display:none}
  .hm-line{padding:11px 12px}
  .hm-foot{padding:28px var(--pad) 34px}
  .hm-foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}.hm-foot-brand{grid-column:1/-1}.hm-foot-brand p{font-size:13.5px}
  .hm-foot nav a{padding:4px 0;font-size:14px}
  .hm-foot nav[aria-label="The studio website"]{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}
  .hm-foot nav[aria-label="The studio website"] h3{grid-column:1/-1}
  .hm-price p{font-size:14.5px}
  .hm-price-b{width:100%}.hm-price-b .u-btn{width:100%}
  .hm-head .u-btn{min-height:44px}
  .hm-head-act:not(:has(.hm-railnav:not([hidden]))){display:none}
}
@media (max-width:699px){
  .hm-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--pad)*-1) 12px;padding:3px var(--pad)}
  .hm-grid{--n:2;--g:8px}
  .hm-grid .u-thumb .cap .pl{display:none}.hm-grid .u-thumb .cap .ps{display:inline}
  .hm-grid .u-thumb:not(.big):not(.tall) .cap{padding:20px 36px 6px 8px}
  .hm-grid .u-thumb:not(.big):not(.tall) .cap b{font-size:12.5px}
  .hm-grid .u-thumb:not(.big):not(.tall) .cap span{font-size:10px}
  .hm-grid .u-thumb.big .cap{padding:30px 46px 10px 12px}
  .hm-grid .u-thumb.big .hm-go{right:8px;bottom:8px;height:30px;padding:0 8px}
  .hm-grid .u-thumb.big .hm-go em{display:none}
  .hm-go{right:6px;bottom:6px;height:26px;min-width:26px;padding:0 6px}.hm-go svg{width:13px;height:13px}
  .hm-cmp{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:var(--pad);margin:0 calc(var(--pad)*-1);padding:3px var(--pad) 8px;scrollbar-width:none}
  .hm-cmp::-webkit-scrollbar{display:none}
  .hm-cmp .u-thumb{flex:none;width:62vw;scroll-snap-align:start}
  .hm-cmp .u-thumb .cap{padding:24px 40px 8px 10px}
}
@media (prefers-reduced-motion:reduce){
  body[data-page="explore"] .top,body[data-page="explore"] .top *{transition:none!important}
  .hm-layer,.hm-layer video,.hm-door,.hm-door .da,.hm-line,.hm-pill{transition:none}
  .hm-copy.in .hm-hook span,.hm-hero.run .hm-pill.on i::after{animation:none}
}
/* phone footer (22 Oct): one column; each group is a row of small link tiles instead of two cramped columns */
@media (max-width:640px){
  .hm-foot{padding:26px 16px 30px}
  .hm-foot-grid{display:flex;flex-direction:column;gap:18px;max-width:none;align-items:center;text-align:center}
  .hm-foot .word{font-size:22px;margin-bottom:6px}
  .hm-foot-brand{grid-column:auto}.hm-foot-brand p{font-size:13px;max-width:34ch;margin:0 auto;line-height:1.45}
  .hm-foot nav{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center}
  .hm-foot nav h3{width:100%;margin:0 0 2px;font-size:9.5px;text-align:center}
  .hm-foot nav a{display:inline-flex;align-items:center;gap:4px;padding:8px 11px;border:1px solid var(--line);border-radius:8px;background:var(--p2);font-size:13px;line-height:1;color:var(--tx)}
  .hm-foot nav a:hover{text-decoration:none;border-color:var(--line2)}
  .hm-foot nav a svg{width:11px;height:11px;opacity:.6}
  .hm-foot nav[aria-label="The studio website"]{display:flex;grid-template-columns:none;column-gap:6px}
  .hm-foot nav[aria-label="The studio website"] h3{grid-column:auto}
  .hm-legal{max-width:none;margin-top:20px;padding-top:14px;font-size:11.5px;line-height:1.6;text-align:center}
}