/* Waka Games site r3 (2026-11-03) · one stylesheet for every page. Built by build.py into assets/build/site.<hash>.css.
   SITE-SPEC r3 §A: vault ground, steel type, bone primary, ONE ember per viewport. Archivo VF only. */

@font-face { font-family: Archivo; src: url(../fonts/archivo-vf.woff2?v=243332e37f) format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap }
@font-face { font-family: 'Archivo Fallback'; src: local('Arial'), local('Helvetica'), local('Liberation Sans'); size-adjust: 97%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0% }

:root {
  --vault: #0B0D10; --abyss: #07080A; --gun: #14181E; --seam: #232934;
  --steel: #D7DCE3; --body-c: #B9BFC8; --label: #8F97A3; --tempered: #6E7784; --bone: #F3F2EE; --ember: #E0632B;
  --font: Archivo, 'Archivo Fallback', system-ui, sans-serif;
  --t-press: 120ms; --t-hover: 200ms; --t-ui: 320ms; --t-reveal: 560ms; --t-scene: 900ms;
  --ease-out: cubic-bezier(.2, .7, .1, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --stagger: 60ms; --rise: 16px;
  --m: max(40px, 4vw); --gut: 24px; --max: 84rem; --head: 64px;
  --pad-t: clamp(80px, 7.5vw, 120px); --pad-b: clamp(72px, 6.5vw, 104px);
  --brushed: repeating-linear-gradient(90deg, rgb(255 255 255 / .014) 0 1px, transparent 1px 3px);
  color-scheme: dark;
}
@media (max-width: 1179px) { :root { --m: 32px } }
@media (max-width: 760px) { :root { --m: max(20px, env(safe-area-inset-left, 0px)); --gut: 12px; --rise: 10px; --head: 56px; --pad-t: 64px; --pad-b: 56px } }

*, *::before, *::after { box-sizing: border-box }
[hidden] { display: none !important }
html { background: var(--vault); overflow-x: clip; scroll-padding-top: calc(var(--head) + 12px); -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
body { margin: 0; background: var(--vault); color: var(--steel); font: 400 1rem/1.6 var(--font); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; overflow-x: clip; text-rendering: optimizeLegibility }
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .03; mix-blend-mode: overlay; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='128' height='128' filter='url(%23n)'/%3E%3C/svg%3E") }
a { color: inherit }
img, video, canvas, svg { display: block; max-width: 100% }
img { height: auto }
p, h1, h2, h3, h4, dl, dd, figure, blockquote, ol, ul { margin: 0 }
ol, ul { padding: 0; list-style: none }
button { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px }
.d-only {} .p-only { display: none }
@media (max-width: 760px) { .d-only { display: none !important } .p-only { display: revert } }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.skip { position: fixed; left: 12px; top: 12px; z-index: 120; padding: .7rem 1rem; background: var(--bone); color: var(--vault); font-weight: 600; text-decoration: none; translate: 0 -200% }
.skip:focus { translate: 0 0 }
.noscript-18 { margin: 0; padding: calc(var(--head) + .6rem) var(--m) .6rem; background: var(--gun); border-bottom: 1px solid var(--seam); font-size: .875rem; color: var(--steel) }

/* ---------- type ---------- */
.t-hero { font: 800 clamp(4.5rem, 7.6vw, 8rem)/.86 var(--font); font-stretch: 62%; letter-spacing: -.012em; color: var(--steel); text-wrap: balance }
.t-display { font: 800 clamp(3.2rem, 6vw, 6rem)/.9 var(--font); font-stretch: 62%; letter-spacing: -.005em; color: var(--steel); text-wrap: balance }
.t-figure { font: 800 clamp(3.6rem, 7.5vw, 7.5rem)/.82 var(--font); font-stretch: 62%; font-variant-numeric: tabular-nums lining-nums; color: var(--steel) }
.t-statement { font: 300 clamp(1.9rem, 3.2vw, 3rem)/1.14 var(--font); font-stretch: 100%; color: var(--steel); text-wrap: balance }
.t-title { font: 700 1.75rem/1.1 var(--font); font-stretch: 75%; color: var(--steel) }
.t-lede { font: 400 1.25rem/1.5 var(--font); color: var(--steel); max-width: 40rem; text-wrap: pretty }
.t-body { font: 400 1.0625rem/1.6 var(--font); color: var(--body-c); max-width: 34rem; text-wrap: pretty }
.t-label { font: 600 .75rem/1.3 var(--font); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--label) }
.t-small { font: 450 .8125rem/1.45 var(--font); color: var(--label); font-variant-numeric: tabular-nums }
@media (max-width: 760px) {
  .t-hero { font-size: clamp(3rem, 13.4vw, 3.6rem) }
  .t-display { font-size: clamp(2.4rem, 11vw, 3rem) }
  .t-figure { font-size: 3.4rem }
  .t-statement { font-size: 1.6rem }
  .t-title { font-size: 1.375rem }
  .t-lede { font-size: 1.0625rem }
  .t-body { font-size: 1rem }
  .t-label { font-size: .72rem; letter-spacing: .14em }
  .t-small { font-size: .8rem }
}

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--m)); margin-inline: auto; padding-inline: var(--m) }
.sec { position: relative; padding: var(--pad-t) 0 var(--pad-b) }
.sec + .sec { border-top: 1px solid rgb(35 41 52 / .55) }
.sec.plane-gun { background: var(--gun) }
.g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut) }
@media (max-width: 1179px) { .g12 { grid-template-columns: repeat(8, minmax(0, 1fr)) } }
@media (max-width: 760px) { .g12 { grid-template-columns: repeat(4, minmax(0, 1fr)) } }
.head { display: grid; gap: 28px; margin-bottom: 56px }
.head .t-lede { margin-top: -8px }
@media (min-width: 1180px) {
  .head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gut); align-items: end }
  .head > .eyebrow { grid-column: 1 / -1 }
  .head > .t-display { grid-column: 1 }
  .head > .t-lede { grid-column: 2; margin: 0 0 6px; font-size: 1.125rem; color: var(--body-c) }
  .hb-top .head, .idea .head { grid-template-columns: 1fr } .hb-top .head > .t-lede, .idea .head > .t-lede { grid-column: 1; margin-top: -8px }
}
@media (max-width: 760px) { .head { gap: 22px; margin-bottom: 40px } }
.head-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px var(--gut); align-items: end; margin-bottom: 64px }
.head-split .t-display { grid-column: 1 } .head-split .t-lede { grid-column: 1 }
@media (max-width: 1179px) { .head-split { grid-template-columns: 1fr } }
@media (max-width: 760px) { .head-split { margin-bottom: 40px; gap: 22px } }

/* eyebrow: number + name, a hairline and the 64 px waterline under the active one */
.eyebrow { position: relative; display: flex; gap: .9rem; align-items: baseline; padding-bottom: 14px; font: 600 .75rem/1 var(--font); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--label); max-width: 30rem }
.eyebrow b { color: var(--steel); font-weight: 700 }
.eyebrow::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--seam) }
.eyebrow::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 1px; background: var(--steel); transform-origin: left; transition: background-color var(--t-ui), transform var(--t-reveal) var(--ease-out) }
.eyebrow.wl::after { background: var(--ember) }
@media (max-width: 760px) { .eyebrow { font-size: .72rem } }

/* ---------- actions ---------- */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 48px; padding: 0 1.5rem; border-radius: 999px; background: var(--bone); color: var(--vault); font: 650 .9375rem/1 var(--font); text-decoration: none; border: 0; cursor: pointer; transition: background-color var(--t-hover), transform var(--t-press) }
.pill .ar { transition: translate var(--t-hover) var(--ease-out) }
.ghost { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 48px; padding: 0 1.35rem; border-radius: 999px; background: transparent; color: var(--steel); border: 1px solid rgb(215 220 227 / .4); font: 600 .9375rem/1 var(--font); text-decoration: none; cursor: pointer; transition: border-color var(--t-hover), background-color var(--t-hover), transform var(--t-press) }
.ember-btn { display: inline-flex; align-items: center; gap: .8rem; min-height: 56px; padding: 0 1.6rem; border-radius: 999px; border: 1.5px solid var(--ember); color: var(--bone); background: transparent; font: 650 1rem/1 var(--font); text-decoration: none; cursor: pointer; transition: background-color var(--t-hover), transform var(--t-press) }
.ember-btn small, .pill small, .ghost small { font-weight: 450; font-size: .8125rem; opacity: .75 }
.ember-btn.solid { background: var(--ember); color: var(--vault); border-color: var(--ember) }
@media (hover: hover) {
  .pill:hover { background: #fff } .pill:hover .ar { translate: 3px 0 }
  .ghost:hover { border-color: var(--steel); background: rgb(215 220 227 / .05) }
  .ember-btn:hover { background: rgb(224 99 43 / .12) } .ember-btn.solid:hover { background: #ea733d }
}
.pill:active, .ghost:active, .ember-btn:active { transform: scale(.98) }
@media (max-width: 760px) { .pill, .ghost { min-height: 52px } }
.tlink { position: relative; display: inline-flex; align-items: center; gap: .4rem; color: var(--steel); text-decoration: none; font-weight: 550; padding-block: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat, linear-gradient(rgb(215 220 227 / .3), rgb(215 220 227 / .3)) 0 100% / 100% 1px no-repeat; transition: background-size var(--t-hover) var(--ease-out) }
.tlink::after { content: ""; position: absolute; inset: -12px -6px }
@media (hover: hover) { .tlink:hover { background-size: 100% 1px, 100% 1px } }
.dl { width: 12px; height: 14px; flex: none; position: relative; display: inline-block }
.dl::before { content: ""; position: absolute; left: 5.5px; top: 0; width: 1.5px; height: 9px; background: currentColor }
.dl::after { content: ""; position: absolute; left: 2px; top: 3.5px; width: 6.5px; height: 6.5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg }
.dl i { position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor }
.btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px }

/* ---------- plate (spec plate), slate, band ---------- */
.plate { position: relative; background: var(--brushed), linear-gradient(180deg, #171b22, #12161b); border: 1px solid var(--seam); border-radius: 2px }
.plate.rivets::before { content: ""; position: absolute; inset: 9px; pointer-events: none; background:
  radial-gradient(circle at 3px 3px, rgb(215 220 227 / .3) 2.4px, transparent 3px) 0 0 / 100% 100% no-repeat,
  radial-gradient(circle at calc(100% - 3px) 3px, rgb(215 220 227 / .3) 2.4px, transparent 3px) 0 0 / 100% 100% no-repeat,
  radial-gradient(circle at 3px calc(100% - 3px), rgb(215 220 227 / .3) 2.4px, transparent 3px) 0 0 / 100% 100% no-repeat,
  radial-gradient(circle at calc(100% - 3px) calc(100% - 3px), rgb(215 220 227 / .3) 2.4px, transparent 3px) 0 0 / 100% 100% no-repeat }
.slate { display: inline-flex; align-items: center; gap: 10px; font: 600 .72rem/1.3 var(--font); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--label) }
.slate::before { content: ""; width: 6px; height: 1px; background: var(--steel); flex: none }
.band { position: relative; width: 100%; overflow: hidden; background: var(--abyss) }
.band.fall { -webkit-mask-image: linear-gradient(transparent, #000 160px, #000 calc(100% - 160px), transparent); mask-image: linear-gradient(transparent, #000 160px, #000 calc(100% - 160px), transparent) }
@media (max-width: 760px) { .band.fall { -webkit-mask-image: linear-gradient(transparent, #000 120px, #000 calc(100% - 120px), transparent); mask-image: linear-gradient(transparent, #000 120px, #000 calc(100% - 120px), transparent) } }
.media { display: block; position: relative; overflow: hidden; background: var(--abyss) }
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease-out) }
@media (hover: hover) { a:hover .media img, .media.hz:hover img { transform: scale(1.025) } }
.slot { position: relative; width: 100%; height: 100%; display: grid; place-items: center; background: repeating-linear-gradient(135deg, rgb(215 220 227 / .025) 0 10px, transparent 10px 20px), var(--gun); outline: 1px dashed #3a4250; outline-offset: -1px; color: var(--label) }
.slot span { font: 600 .72rem/1.4 var(--font); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; text-align: center; padding: 1rem }

/* rows of label / value */
.rows { display: grid }
.rows > div { display: grid; grid-template-columns: minmax(8rem, 2fr) minmax(0, 5fr); gap: 4px 20px; padding: 13px 0; border-bottom: 1px solid var(--seam); align-items: baseline }
.rows > div:last-child { border-bottom: 0 }
.rows dt { font: 600 .72rem/1.4 var(--font); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--label) }
.rows dd { color: var(--steel); font-size: .98rem; line-height: 1.5 }
.rows dd a { color: var(--steel) }
@media (max-width: 760px) { .rows > div { grid-template-columns: 1fr; gap: 4px } }

/* figure cells (hero plate, H01 plate, spec plate) */
.figs { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)) }
.figs > div { padding: 22px 24px 22px; border-left: 1px solid var(--seam); display: grid; gap: 10px; align-content: start; min-width: 0 }
.figs > div:first-child { border-left: 0 }
.figs > div > dt + dd { order: -1 }
.figs b { font: 800 clamp(2.4rem, 3.6vw, 3.6rem)/.86 var(--font); font-stretch: 62%; color: var(--steel); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums }
.figs span { font: 600 .72rem/1.3 var(--font); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--label) }
.figs b span { font: inherit; letter-spacing: inherit; text-transform: none; color: inherit }
.figs small { font-size: .875rem; color: var(--body-c); line-height: 1.35 }

/* rails (phone scroll-snap rows) */
.rail-count { display: none; margin-top: 14px; font: 600 .72rem/1 var(--font); font-stretch: 125%; letter-spacing: .14em; color: var(--label) }
@media (max-width: 760px) {
  .rail { display: grid !important; grid-auto-flow: column; grid-auto-columns: 82vw; grid-template-columns: none !important; gap: 12px !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--m); padding-inline: var(--m); margin-inline: calc(-1 * var(--m)); scrollbar-width: none; overscroll-behavior-x: contain }
  .rail::-webkit-scrollbar { display: none }
  .rail > * { scroll-snap-align: start; min-width: 0 }
  .rail-count { display: block }
}

/* reveal (content visible by default; JS pre-hides below-fold groups once) */
.js .pre [data-r], .js .pre[data-r1] { opacity: 0; translate: 0 var(--rise) }
.js .in [data-r], .js .in[data-r1] { opacity: 1; translate: 0 0; transition: opacity var(--t-reveal) var(--ease-out) calc(var(--i, 0) * var(--stagger)), translate var(--t-reveal) var(--ease-out) calc(var(--i, 0) * var(--stagger)) }

/* ---------- sprites (clips from the game) ---------- */
.spr { position: absolute; inset: 0; background-repeat: no-repeat; background-position: 0 0 }
.cell { position: absolute; left: 50%; bottom: 3%; width: calc(var(--k, 1) * var(--zoom, 1.2) * 100%); aspect-ratio: 1; translate: -50% 0 }
.cell .spr { left: calc(var(--tx) * 100%); top: calc(var(--ty) * 100%); width: calc(var(--tw) * 100%); height: calc(var(--th) * 100%); inset: auto }
.cell .spr { left: calc(var(--tx) * 100%); top: calc(var(--ty) * 100%) }
.symf { position: absolute; inset: 8%; background-repeat: no-repeat; background-size: 800% 100% }
.hotcell { position: absolute; inset: 14% }
.hotcell img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 10% }
.mx { position: absolute; right: -6%; top: -6%; min-width: 38%; padding: .34em .55em; font: 800 .85rem/1 var(--font); font-stretch: 62%; color: #2b1a08; text-align: center; background: url(../hb/mx-chip.webp?v=24f1d2d497) 50% 50% / 136% auto no-repeat; filter: drop-shadow(0 2px 4px rgb(0 0 0 / .5)) }

/* ---------- 18+ gate ---------- */
.gate { display: none }
.js:not(.age-ok) .gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--vault); padding: max(24px, env(safe-area-inset-top, 0px)) var(--m) max(24px, env(safe-area-inset-bottom, 0px)); transition: opacity var(--t-ui) var(--ease-out) }
.js:not(.age-ok) body { overflow: hidden }
.gate.out { opacity: 0; pointer-events: none }
.gate-bg { position: absolute; inset: 0; overflow: hidden }
.gate-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; filter: brightness(.3) blur(2px); transform: scale(1.02) }
.gate-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 70% at 30% 55%, rgb(11 13 16 / .86), rgb(11 13 16 / .35) 70%) }
.gate-box { position: relative; width: 100%; max-width: 34rem; display: grid; gap: 22px; justify-items: start }
.gate-box svg { width: 64px; height: 64px }
.gate-box h2 { font: 800 clamp(2.8rem, 6vw, 4.4rem)/.9 var(--font); font-stretch: 62%; color: var(--steel) }
.gate-box p { color: var(--body-c); font-size: 1.0625rem; max-width: 30rem }
.gate-act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px }
@media (max-width: 760px) { .gate-act { width: 100%; flex-direction: column } .gate-act > * { width: 100%; justify-content: center } }

/* ---------- header ---------- */
.top { position: fixed; inset: 0 0 auto; z-index: 60; padding-top: env(safe-area-inset-top, 0px); transition: background-color var(--t-ui), backdrop-filter var(--t-ui), border-color var(--t-ui); border-bottom: 1px solid transparent }
.top.scrolled { background: rgb(11 13 16 / .82); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: rgb(35 41 52 / .7) }
.top .wrap { height: var(--head); display: flex; align-items: center; justify-content: space-between; gap: 24px }
.logo { display: block; padding: 10px 0; text-decoration: none }
.logo svg { height: 22px; width: auto }
.top nav { display: flex; align-items: center; gap: 34px }
.top nav a { position: relative; font: 600 .75rem/1 var(--font); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--label); text-decoration: none; padding: 12px 0; transition: color var(--t-hover) }
.top nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px; background: var(--steel); transform: scaleX(0); transform-origin: left; transition: transform var(--t-ui) var(--ease-out) }
.top nav a:hover, .top nav a.on { color: var(--steel) }
.top nav a.on::after { transform: scaleX(1) }
.top nav .pill { min-height: 40px; padding: 0 1.15rem; color: var(--vault); font: 650 .8125rem/1 var(--font); letter-spacing: 0; text-transform: none; margin-left: 4px }
.top nav .pill::after { display: none }
.menu-btn { display: none; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgb(215 220 227 / .35); background: rgb(11 13 16 / .4); font: 600 .75rem/1 var(--font); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; cursor: pointer }
@media (max-width: 1023px) { .top nav { display: none } .menu-btn { display: inline-flex } }
/* phone bottom sheet */
.scrim { position: fixed; inset: 0; z-index: 70; background: rgb(4 5 6 / .6); opacity: 0; pointer-events: none; transition: opacity var(--t-ui) }
.msheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; max-height: 92svh; overflow-y: auto; background: #101318; border-top: 1px solid var(--seam); border-radius: 20px 20px 0 0; padding: 10px var(--m) max(20px, env(safe-area-inset-bottom, 0px)); translate: 0 104%; transition: translate var(--t-ui) var(--ease-out); visibility: hidden }
.msheet.open { translate: 0 0; visibility: visible }
.scrim.open { opacity: 1; pointer-events: auto }
.grab { display: block; width: 44px; height: 5px; border-radius: 3px; background: #3a4250; margin: 2px auto 14px; border: 0; padding: 0 }
.msheet ol a { display: flex; align-items: baseline; gap: 16px; min-height: 52px; padding: 12px 0; border-bottom: 1px solid var(--seam); text-decoration: none; font: 700 1.375rem/1.1 var(--font); font-stretch: 75%; color: var(--steel) }
.msheet ol a small { font: 600 .72rem/1 var(--font); font-stretch: 125%; letter-spacing: .14em; color: var(--label); min-width: 1.8rem }
.msheet ol a em { font-style: normal; font: 600 .72rem/1 var(--font); letter-spacing: .12em; color: var(--label); margin-left: auto }
.msheet .pill { width: 100%; margin: 20px 0 16px }
.msheet .foot18 { display: flex; align-items: center; gap: 12px; font-size: .875rem; color: var(--body-c) }
.msheet .foot18 a { color: var(--steel) }
.sheet-close { position: absolute; right: var(--m); top: 10px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--seam); background: transparent; font: 600 .72rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; cursor: pointer }
.locked { overflow: hidden }

/* ---------- 18+ badge ---------- */
.eighteen { flex: none; display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid var(--body-c); border-radius: 50%; font: 700 .85rem/1 var(--font); color: var(--steel) }

/* ---------- footer ---------- */
.foot { position: relative; background: var(--abyss); border-top: 1px solid var(--seam); overflow: hidden }
.foot .wrap { padding-top: clamp(64px, 6vw, 96px); padding-bottom: max(28px, calc(16px + env(safe-area-inset-bottom, 0px))) }
.foot-mark { position: relative; width: 120px; height: 120px; margin-bottom: 36px }
.foot-mark::before { content: ""; position: absolute; left: -90px; right: -90px; top: -60px; bottom: -110px; background: radial-gradient(ellipse 50% 40% at 50% 46%, rgb(215 220 227 / .08), transparent 70%); pointer-events: none }
.foot-mark svg { position: relative; width: 120px; height: 120px }
.foot-mark .refl { position: absolute; left: 0; top: 122px; width: 120px; height: 120px; transform: scaleY(-1); opacity: .07; -webkit-mask-image: linear-gradient(to top, #000, transparent 55%); mask-image: linear-gradient(to top, #000, transparent 55%) }
.foot-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 40px var(--gut); align-items: end }
.foot .t-statement { margin-bottom: 26px }
.foot-id { display: grid; gap: 8px; color: var(--body-c); font-size: .95rem }
.foot-id b { color: var(--steel); font-weight: 650 }
.foot-id a { color: var(--steel); text-decoration: none; border-bottom: 1px solid rgb(215 220 227 / .3) }
.foot-file { display: inline-flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin-top: 18px; padding: 12px 16px; border: 1px solid var(--seam); border-radius: 2px; text-decoration: none; font-size: .9rem; color: var(--body-c); transition: border-color var(--t-hover) }
.foot-file b { color: var(--steel) }
@media (hover: hover) { .foot-file:hover { border-color: var(--tempered) } }
.foot-index { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 26px }
.foot-index a { display: inline-flex; align-items: center; min-height: 44px; font: 600 .72rem/1 var(--font); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--label); text-decoration: none; transition: color var(--t-hover) }
.foot-index a:hover { color: var(--steel) }
.foot-rg { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--seam); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; color: var(--body-c); font-size: .92rem }
.foot-rg > div { display: flex; align-items: center; gap: 14px; max-width: 44rem }
.foot-rg a { color: var(--steel) }
.foot-end { display: flex; gap: 24px; align-items: center; color: var(--label); font-size: .82rem }
@media (max-width: 760px) {
  .foot-mark, .foot-mark svg, .foot-mark .refl { width: 96px; height: 96px } .foot-mark .refl { top: 98px }
  .foot-grid { grid-template-columns: 1fr }
  .foot-index { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; justify-content: stretch }
  .foot-index a { border-bottom: 1px solid var(--seam); min-height: 48px }
  .foot-end { width: 100%; justify-content: space-between }
}

/* ---------- action bar (phone) ---------- */
.abar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none; gap: 10px; padding: 8px var(--m) max(8px, env(safe-area-inset-bottom, 0px)); background: rgb(11 13 16 / .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--seam); translate: 0 110%; transition: translate var(--t-ui) var(--ease-out) }
.abar > * { flex: 1; min-height: 48px; padding: 0 .9rem; font-size: .875rem; white-space: nowrap }
.abar > .pill { flex: 1.5 }
.abar.on { translate: 0 0 }
@media (max-width: 760px) { .abar { display: flex } }

/* ===================================================================== HOME */
/* H00 hero: the crew at the vault door */
.hero { position: relative; height: 100svh; min-height: 680px; max-height: 1080px; overflow: hidden; background: var(--abyss); isolation: isolate }
.stage { position: absolute; right: 0; bottom: 0; width: max(100%, calc(var(--hh, 100svh) * 16 / 9)); aspect-ratio: 16 / 9; z-index: 0 }
.hero { --hh: clamp(680px, 100svh, 1080px) }
.stage .hall { position: absolute; inset: 0; background-size: cover; background-position: 50% 50%; opacity: 0; transition: opacity var(--t-scene) var(--ease-out) }
.stage .pool { position: absolute; inset: 0; background: radial-gradient(ellipse 34% 46% at 66% 58%, rgb(215 220 227 / .07), transparent 70%) }
.stage picture, .stage .poster { position: absolute; inset: 0; width: 100%; height: 100% }
.stage .poster { object-fit: cover }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity var(--t-scene) var(--ease-out); touch-action: pan-y }
.stage.live canvas, .stage.live .hall { opacity: 1 }
.stage.live picture { opacity: 0; transition: opacity var(--t-scene) var(--ease-out) 150ms }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgb(7 8 10 / .92) 0%, rgb(7 8 10 / .7) 30%, rgb(7 8 10 / 0) 52%), linear-gradient(0deg, rgb(7 8 10 / .95) 0, rgb(7 8 10 / 0) 34%) }
.hero-in { position: absolute; inset: 0; z-index: 2; display: grid; grid-template-rows: 1fr auto; pointer-events: none }
.hero-in a, .hero-in button { pointer-events: auto }
.hero-copy { align-self: end; padding-bottom: 44px }
.hero-copy .inner { max-width: 44rem }
.hero h1 { display: grid; gap: 26px }
.hero h1 .eb { font: 600 .75rem/1.3 var(--font); font-stretch: 125%; letter-spacing: .16em; text-transform: uppercase; color: var(--label); white-space: nowrap }
.hero h1 .eb b { color: var(--steel); font-weight: 700 }
.hero h1 .ln { display: block }
.hero .t-lede { margin-top: 24px; max-width: 34rem; font-size: 1.125rem; color: var(--body-c) }
.hero .btns { margin-top: 32px }
.hero-plate { position: relative; border-top: 1px solid var(--seam); background: var(--brushed), rgb(11 13 16 / .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px) }
.hero-plate .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center }
.hero-plate .figs { --n: 4 }
.hero-plate .figs > div { padding: 18px 24px 18px; grid-template-columns: auto; gap: 7px }
.hero-plate .figs > div:first-child { padding-left: 0 }
.hero-plate .figs b { font-size: clamp(1.9rem, 2.6vw, 2.6rem) }
.hero-plate .pfoot { font: 600 .72rem/1 var(--font); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--label); padding-left: 24px; border-left: 1px solid var(--seam); align-self: stretch; display: flex; align-items: center }
.hero-meta { position: absolute; z-index: 3; right: var(--m); bottom: calc(var(--plate-h, 92px) + 22px); display: flex; align-items: center; gap: 14px }
.hero-meta .slate { color: var(--label) }
.pause { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(215 220 227 / .35); background: rgb(11 13 16 / .5); display: grid; place-items: center; cursor: pointer; transition: border-color var(--t-hover) }
.pause:hover { border-color: var(--steel) }
.pause i { width: 10px; height: 12px; border-left: 3px solid var(--steel); border-right: 3px solid var(--steel) }
.pause[aria-pressed="true"] i { width: 0; height: 0; border: 0; border-left: 11px solid var(--steel); border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px }
.nametag { position: absolute; z-index: 3; left: var(--tx, 66%); top: var(--ty, 30%); translate: -50% 0; padding: 8px 12px; background: rgb(11 13 16 / .8); border: 1px solid var(--seam); border-radius: 2px; font: 600 .8rem/1.2 var(--font); color: var(--steel); white-space: nowrap; opacity: 0; transition: opacity var(--t-ui); pointer-events: none }
.nametag span { color: var(--label); font-weight: 450 }
.nametag.on { opacity: 1 }
.cue { position: absolute; z-index: 3; left: 50%; bottom: calc(var(--plate-h, 92px) + 18px); width: 1px; height: 32px; background: linear-gradient(var(--steel), transparent); transform-origin: top; animation: cue 2.4s var(--ease-in-out) infinite }
@keyframes cue { 0% { transform: scaleY(0) } 50% { transform: scaleY(1) } 100% { transform: scaleY(1); opacity: 0 } }
.hero-scroll { }
@media (max-width: 1179px) { .hero-plate .pfoot { display: none } .hero-plate .wrap { grid-template-columns: 1fr } }
@media (max-width: 760px) {
  .hero { height: auto; min-height: 100svh; max-height: none; --hh: 100svh }
  .stage { left: 0; right: 0; top: 0; bottom: auto; width: 100%; aspect-ratio: 9 / 16 }
  .stage .pool { background: radial-gradient(ellipse 60% 30% at 50% 30%, rgb(215 220 227 / .08), transparent 70%) }
  .hero::after { background: linear-gradient(0deg, rgb(7 8 10) 0, rgb(7 8 10) 34%, rgb(7 8 10 / .85) 46%, rgb(7 8 10 / 0) 64%) }
  .hero-in { position: relative; min-height: 100svh; grid-template-rows: 1fr auto auto }
  .hero-copy { padding: 0 0 18px; grid-row: 2 }
  .hero h1 { gap: 16px }
  .hero h1 .eb { white-space: normal; font-size: .72rem }
  .hero .btns { margin-top: 20px } .hero .btns .pill { width: 100% }
  .hero .t-lede, .hero .btns .tlink { display: none }
  .hero-plate { grid-row: 3; -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--brushed), var(--abyss) }
  .hero-plate .wrap { padding-inline: 0 }
  .hero-plate .figs > div { padding: 14px 10px 16px; gap: 6px }
  .hero-plate .figs > div:first-child { padding-left: var(--m) }
  .hero-plate .figs b { font-size: 1.5rem }
  .hero-plate .figs span { font-size: .75rem; letter-spacing: 0; text-transform: none; font-stretch: 100% }
  .hero-meta { top: calc(var(--head) + 40svh); bottom: auto; right: var(--m) }
  .hero-meta .slate { display: none }
  .cue { display: none }
  .hero-after { padding: 28px 0 0; display: grid; gap: 18px }
}
@media (min-width: 761px) { .hero-after { display: none } }

/* H01 Heist Bots: the game plays on the home page */
.hb-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px var(--gut); align-items: end; margin-bottom: 64px }
.hb-top .head { margin: 0 }
.hb-logo { justify-self: end; width: min(280px, 100%); filter: drop-shadow(0 18px 40px rgb(0 0 0 / .6)) }
.hb-band { margin-top: 0 }
.hb-band .stripx { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; background: var(--abyss) }
.hb-band .stripx figure { position: relative; aspect-ratio: 1344 / 1370; overflow: hidden; background: #120c0a }
.hb-band .stripx img { width: 100%; height: 100%; object-fit: cover }
.hb-band .stripx figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; background: linear-gradient(transparent, rgb(7 8 10 / .92)); display: grid; gap: 4px }
.hb-band .stripx figcaption b { font: 700 1.05rem/1.2 var(--font); font-stretch: 75%; color: var(--steel) }
.hb-band .stripx figcaption span { font-size: .85rem; color: var(--body-c); line-height: 1.4 }
.hb-band .stripx figcaption i { font: 600 .72rem/1 var(--font); font-style: normal; font-stretch: 125%; letter-spacing: .14em; color: var(--label) }
.hb-band video, .hb-band .vposter { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block }
.band-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0 0 }
.vctl { display: inline-flex; align-items: center; gap: 12px }
.vctl .t-small { white-space: nowrap }
.beats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gut); margin-top: 28px }
.beats li { padding-top: 16px; border-top: 1px solid var(--seam); display: grid; gap: 6px; transition: border-color var(--t-ui) }
.beats li.on { border-top-color: var(--steel) }
.beats b { font: 700 1.05rem/1.2 var(--font); font-stretch: 75%; color: var(--steel) }
.beats b i { font-style: normal; color: var(--label); font-weight: 600; margin-right: 8px }
.beats span { font-size: .92rem; color: var(--body-c); line-height: 1.45 }
.hb-plate { margin-top: 48px }
.hb-plate .figs { --n: 5 }
.hb-plate .figs > div { padding: 28px 26px 26px }
.jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); margin-top: 48px }
.job .st { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: radial-gradient(ellipse 50% 40% at 50% 62%, rgb(215 220 227 / .07), transparent 70%), linear-gradient(#0d1014, var(--abyss)) }
.job .st::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 13%; height: 1px; background: linear-gradient(90deg, transparent, rgb(215 220 227 / .25), transparent) }
.job .st .cell { --zoom: .92; bottom: 10% }
.job p { margin-top: 18px; color: var(--body-c); font-size: .98rem; line-height: 1.5 }
.job p b { color: var(--steel); font-weight: 700; font-stretch: 75%; font-size: 1.15rem; display: block; margin-bottom: 4px }
.hb-end { margin-top: 56px }
@media (max-width: 1179px) { .hb-plate .figs { --n: 3 } .hb-plate .figs > div:nth-child(4) { border-left: 0 } .hb-plate .figs > div:nth-child(n+4) { border-top: 1px solid var(--seam) } }
@media (max-width: 760px) {
  .hb-top { grid-template-columns: 1fr; margin-bottom: 36px } .hb-logo { display: none }
  .hb-band .stripx { gap: 10px }
  .hb-band .stripx figure { aspect-ratio: 1170 / 1193 }
  .hb-band video, .hb-band .vposter { aspect-ratio: 4 / 5 }
  .band-bar { padding-inline: var(--m) }
  .beats { grid-template-columns: 1fr; gap: 0; margin-top: 18px } .beats li { padding: 14px 0; border-top: 0; border-bottom: 1px solid var(--seam) }
  .hb-plate { margin-top: 40px }
  .hb-plate .figs { --n: 2 }
  .hb-plate .figs > div { padding: 20px 16px; border-left: 0; border-top: 1px solid var(--seam) }
  .hb-plate .figs > div:nth-child(-n+2) { border-top: 0 }
  .hb-plate .figs > div:nth-child(even) { border-left: 1px solid var(--seam) }
  .hb-plate .figs > div:nth-child(5) { grid-column: 1 / -1 }
  .hb-plate .figs b { font-size: 2.4rem }
  .jobs { margin-top: 40px }
  .hb-end .pill { width: 100% }
}

/* H02 Games */
.games { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gut) 40px }
.gm .media { border-radius: 2px }
.gm-hb .media { aspect-ratio: 1 / 1 }
.gm-hb .media img { object-position: 50% 30% }
.gm-wh .media { aspect-ratio: 16 / 9 }
.gm-cap { margin-top: 22px; display: grid; gap: 12px }
.gm-cap h3 a { text-decoration: none }
.gm-cap .t-body { max-width: 36rem }
.gm-note { font-size: .9rem; color: var(--label); max-width: 36rem; line-height: 1.5 }
.gm-row { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-top: 6px }
.gm-row .st { font-size: .875rem; color: var(--body-c) }
.gm-right { display: grid; gap: 40px; align-content: start }
.f002 { position: relative; padding: 28px 28px 26px; overflow: hidden }
.f002 .tab { position: absolute; right: 22px; top: 0; padding: 6px 12px; background: var(--seam); font: 600 .72rem/1 var(--font); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); border-radius: 0 0 2px 2px }
.f002 h3 { margin: 10px 0 6px }
.f002 p { color: var(--body-c) }
.f002 .red { display: grid; gap: 10px; margin-top: 20px }
.f002 .red div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; gap: 14px }
.f002 .red dt { font: 600 .72rem/1 var(--font); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--label) }
.f002 .red i { display: block; height: 12px; background: #2a313c; border-radius: 1px }
@media (max-width: 760px) { .games { grid-template-columns: none } .gm-right { display: contents } }

/* H03 How we build: the story map + the five steps */
.smap { position: relative }
.smap-s { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gut) }
.smap-s .ph { display: block; padding-bottom: 22px; transition: color var(--t-ui) }
.js-motion .smap-s .ph { color: rgb(215 220 227 / var(--o, 1)) }
.smap-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible }
.smap-lines path { fill: none; stroke: rgb(215 220 227 / .35); stroke-width: 1 }
.smap-lines circle { fill: var(--steel) }
.smap-f { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gut); margin-top: 28px }
.smap-f li { display: grid; gap: 14px; align-content: start }
.smap-f .fr { position: relative; aspect-ratio: 5 / 6; overflow: hidden; background: radial-gradient(ellipse 60% 45% at 50% 60%, rgb(215 220 227 / .07), transparent 70%), linear-gradient(#0e1116, var(--abyss)); -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent) }
.smap-f .fr img { width: 100%; height: 100%; object-fit: cover }
.smap-f .fr .hotcell { inset: 24% 18% }
.smap-f .fr .hotcell .symf { inset: 10% }
.smap-f .fr .mx { font-size: 1.1rem }
.smap-f .cap { font-size: .95rem; color: var(--body-c); line-height: 1.5 }
.smap-f .cap b { display: block; font: 600 .72rem/1.3 var(--font); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); margin-bottom: 6px }
.smap-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 32px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--seam); font-size: .95rem; color: var(--body-c) }
.smap-foot q { color: var(--steel) }
.track-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin: 72px 0 24px }
.track-tabs { display: flex; gap: 6px; flex-wrap: wrap }
.track-tabs button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--seam); background: transparent; font: 600 .75rem/1 var(--font); font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase; color: var(--label); cursor: pointer; transition: color var(--t-hover), border-color var(--t-hover) }
.track-tabs button[aria-selected="true"] { color: var(--steel); border-color: rgb(215 220 227 / .55) }
.track-nav { display: flex; align-items: center; gap: 12px }
.track-nav .t-label b { color: var(--steel) }
.arrowbtn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgb(215 220 227 / .35); background: transparent; cursor: pointer; display: grid; place-items: center; transition: border-color var(--t-hover), opacity var(--t-hover) }
.arrowbtn:hover { border-color: var(--steel) } .arrowbtn:disabled { opacity: .3; cursor: default }
.arrowbtn i { width: 9px; height: 9px; border-top: 1.5px solid var(--steel); border-right: 1.5px solid var(--steel); rotate: 45deg; margin-left: -3px }
.arrowbtn.prev i { rotate: -135deg; margin: 0 -3px 0 0 }
.track-prog { position: relative; height: 1px; background: var(--seam); margin-bottom: 32px }
.track-prog i { position: absolute; left: 0; top: 0; height: 1px; width: 20%; background: var(--ember); transition: transform var(--t-ui) var(--ease-out); transform: translateX(calc(var(--s, 0) * 100%)) }
.track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - var(--gut)) / 2.15); gap: var(--gut); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding-bottom: 4px }
.track::-webkit-scrollbar { display: none }
.step { scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; gap: 22px; min-width: 0 }
.step .art { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; padding: 6%; overflow: hidden }
.step .art .capb { position: absolute; left: 18px; right: 18px; bottom: 14px; display: flex; justify-content: space-between; gap: 12px }
.step .txt { display: grid; gap: 14px; align-content: start }
.step .txt .t-body { max-width: 38rem }
.step .ex { font-size: .95rem; color: var(--body-c); padding-left: 14px; border-left: 1px solid var(--tempered) }
.step .ex b { color: var(--steel) }
.step .out { display: flex; gap: 12px; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--seam); font-size: .95rem; color: var(--steel) }
.more-b { display: none }
.bible { width: 100%; max-width: 30rem; display: grid; gap: 4px }
.bible-h { display: flex; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid rgb(215 220 227 / .35) }
.bible li { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--seam); font-size: .95rem; line-height: 1.4; color: var(--body-c) }
.bible li span { font: 600 .72rem/1.6 var(--font); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--label) }
.bible li.prem { color: var(--steel); font-weight: 550 }
.mtab { width: 100%; max-width: 26rem; border-collapse: collapse; font-size: .95rem }
.mtab td { padding: 10px 0; border-bottom: 1px solid var(--seam); color: var(--body-c) }
.mtab td + td { text-align: right; color: var(--steel); font-weight: 650 }
.mtab tr:last-child td { border-bottom: 0 }
.split img { width: 100%; height: 100%; object-fit: cover }
.film { width: 100%; display: grid; gap: 14px; align-content: center }
.film-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px }
.film .fr { position: relative; aspect-ratio: 673 / 814; background: #0c0f13; border: 1px solid var(--seam); overflow: hidden }
.film .fr .spr { inset: 4% }
.film .t-small { text-align: center; font-size: .72rem; letter-spacing: .1em }
.wave-box { width: 100%; display: grid; gap: 12px }
.wave { width: 100%; height: clamp(90px, 12vw, 150px); fill: #9aa3af }
.wave-axis { display: flex; justify-content: space-between }
.checklist { width: 100%; max-width: 28rem; display: grid; gap: 10px }
.checklist li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 12px; padding: 8px 0; border-bottom: 1px solid var(--seam) }
.checklist li i { grid-row: 1 / span 2; position: relative; width: 16px; height: 16px; border: 1px solid var(--tempered); border-radius: 2px; margin-top: 3px }
.checklist li i::after { content: ""; position: absolute; left: 5px; top: 1px; width: 4px; height: 9px; border-right: 1.5px solid var(--steel); border-bottom: 1.5px solid var(--steel); rotate: 45deg }
.checklist li b { font-weight: 600; font-size: .92rem; color: var(--steel); line-height: 1.3 }
.checklist li span { font-size: .82rem; color: var(--label); line-height: 1.35 }
@media (max-width: 1179px) { .track { grid-auto-columns: 72% } }
@media (max-width: 760px) {
  .smap-s { grid-template-columns: 1fr; gap: 0 } .smap-s .ph { padding: 0 } .smap-lines { display: none }
  .smap-f { grid-auto-columns: 72vw } .smap-f .fr { -webkit-mask-image: none; mask-image: none }
  .track-head { margin: 64px 0 20px; flex-direction: column; align-items: stretch }
  .track-tabs, .track-nav .arrowbtn { display: none }
  .track-prog { margin-bottom: 20px }
  .track { grid-auto-columns: 82vw; gap: 12px; padding-inline: var(--m); margin-inline: calc(-1 * var(--m)); scroll-padding-inline: var(--m) }
  .step { gap: 18px }
  .step .art { aspect-ratio: 1 / 1; padding: 7% }
  .step .t-body.clip { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
  .step .ex { display: none }
  .more-b { display: inline-flex; justify-self: start; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid rgb(215 220 227 / .35); background: transparent; font-weight: 600; font-size: .9rem; cursor: pointer; align-items: center }
  .bible li { font-size: .85rem; padding: 6px 0; grid-template-columns: 3.8rem 1fr }
}
.step-sheet .sh-body { display: grid; gap: 14px; padding-bottom: 12px }
.step-sheet .sh-body .t-body { max-width: none }

/* H04 Studio */
.studio-band { aspect-ratio: 3 / 1; margin-bottom: 0 }
.studio-band img { width: 100%; height: 100%; object-fit: cover }
.studio-band + .band-bar { padding-top: 14px }
.principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gut); margin-top: 56px }
.principles li { display: grid; gap: 14px; align-content: start }
.principles .n { font: 800 clamp(3rem, 5vw, 5rem)/.8 var(--font); font-stretch: 62%; color: rgb(215 220 227 / .5) }
.principles h3 { font: 700 1.35rem/1.15 var(--font); font-stretch: 75%; color: var(--steel) }
.principles p { color: var(--body-c); font-size: .98rem; line-height: 1.55 }
.studio-plates { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gut); margin-top: 56px }
.rg { padding: 36px 36px 34px; display: grid; gap: 16px; align-content: start }
.rg .hd { display: flex; align-items: center; gap: 16px }
.rg h3 { font: 700 1.75rem/1.1 var(--font); font-stretch: 75%; color: var(--steel) }
.rg p { color: var(--body-c); max-width: 36rem }
.wwu { padding: 30px 32px 22px }
.wwu h3 { margin-bottom: 10px }
.wwu .rows > div { grid-template-columns: minmax(7.5rem, 2fr) minmax(0, 4fr); padding: 11px 0 }
.studio-end { margin-top: 40px }
@media (max-width: 1179px) { .principles { grid-template-columns: 1fr 1fr; gap: 40px var(--gut) } .studio-plates { grid-template-columns: 1fr } }
@media (max-width: 760px) {
  .studio-band { aspect-ratio: 4 / 3 }
  .principles { gap: 32px 16px; margin-top: 48px } .principles .n { font-size: 2.6rem } .principles h3 { font-size: 1.15rem } .principles p { font-size: .9rem }
  .studio-plates { margin-top: 48px } .rg, .wwu { padding: 24px 20px }
}

/* H05 Your idea */
.idea { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px var(--gut); align-items: start }
.idea .btns { margin-top: 36px }
.idea-foot { margin-top: 18px; font-size: .9rem; color: var(--label) }
.isteps li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: 4px 16px; padding: 20px 0; border-top: 1px solid var(--seam) }
.isteps li:last-child { border-bottom: 1px solid var(--seam) }
.isteps .n { grid-row: 1 / span 2; font: 800 2.4rem/.85 var(--font); font-stretch: 62%; color: rgb(215 220 227 / .5) }
.isteps b { font: 700 1.2rem/1.2 var(--font); font-stretch: 75%; color: var(--steel) }
.isteps span { color: var(--body-c); font-size: .95rem }
.routes { margin-top: 64px; border-top: 1px solid rgb(215 220 227 / .4) }
.routes li { display: grid; grid-template-columns: minmax(8rem, 2fr) minmax(0, 6fr) auto; gap: 8px 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--seam) }
.routes .t-label { color: var(--steel) }
.routes p { color: var(--body-c) }
.copyf { display: inline-flex; align-items: stretch; margin-top: 32px; border: 1px solid var(--seam); border-radius: 999px; overflow: hidden; max-width: 100% }
.copyf code { font: 550 1rem/1 var(--font); color: var(--steel); padding: 0 22px; display: flex; align-items: center; min-height: 52px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.copyf button { border: 0; border-left: 1px solid var(--seam); background: var(--gun); padding: 0 22px; min-height: 52px; font-weight: 600; font-size: .9rem; cursor: pointer; white-space: nowrap; transition: background-color var(--t-hover) }
.copyf button:hover { background: #1b2028 }
@media (max-width: 1179px) { .idea { grid-template-columns: 1fr } }
@media (max-width: 760px) {
  .idea .btns .pill { width: 100% }
  .routes { margin-top: 56px } .routes li { grid-template-columns: 1fr; gap: 6px; padding: 18px 0 } .routes .tlink { min-height: 44px }
  .copyf { display: flex; width: 100% } .copyf code { flex: 1; padding: 0 16px; font-size: .95rem }
}

/* H06 Press room (home block) */
.pblocks { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); gap: var(--gut); align-items: stretch }
.pb { padding: 28px 28px 24px; display: grid; gap: 16px; align-content: start; position: relative }
.pb .k { display: flex; justify-content: space-between; font: 600 .72rem/1 var(--font); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--label) }
.pb .k b { color: var(--steel) }
.pb .line { font: 300 1.4rem/1.3 var(--font); color: var(--steel) }
.pb .rows > div { grid-template-columns: 6.2rem minmax(0, 1fr); padding: 8px 0; gap: 2px 14px }
.pb .rows dd { font-size: .88rem }
.pb .rows dt { font-size: .68rem }
.pb .contents { font-size: .9rem; color: var(--body-c) }
.copyb { justify-self: start; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid rgb(215 220 227 / .35); background: transparent; font-weight: 600; font-size: .85rem; cursor: pointer; transition: border-color var(--t-hover) }
.copyb:hover { border-color: var(--steel) }
.copied { font-size: .82rem; color: var(--label); min-height: 1.2em }
.press-more { margin-top: 32px }
@media (max-width: 1179px) { .pblocks { grid-template-columns: 1fr 1fr } .pblocks .pb:last-child { grid-column: 1 / -1 } }
@media (max-width: 760px) { .pblocks { grid-template-columns: 1fr } .pb { padding: 22px 20px } .pb .ember-btn { width: 100%; justify-content: center } }

/* H07 Questions */
.faqs { max-width: 64rem }
.faqs h3 { margin: 48px 0 8px }
.faqs h3:first-child { margin-top: 0 }
.faqs details { border-bottom: 1px solid var(--seam) }
.faqs summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 64px; padding: 16px 0; cursor: pointer; font: 600 1.15rem/1.3 var(--font); color: var(--steel) }
.faqs summary::-webkit-details-marker { display: none }
.faqs summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 1.5px solid var(--label); border-bottom: 1.5px solid var(--label); rotate: 45deg; translate: 0 -3px; transition: rotate var(--t-ui) var(--ease-out) }
.faqs details[open] summary::after { rotate: 225deg; translate: 0 3px }
.faqs .a { padding: 0 0 24px; color: var(--body-c); max-width: 46rem }
.faqs .a a { color: var(--steel) }
.faq-more { margin-top: 28px }
.notq { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: 56px; padding: 28px 32px; max-width: 64rem }
.notq .t-title { margin-top: 6px }
@media (max-width: 760px) { .faqs summary { min-height: 56px; font-size: 1.05rem } .notq { padding: 22px 20px } .notq .btns { width: 100% } }

/* ===================================================================== /heist-bots/ */
.gp-hero { position: relative; min-height: min(100svh, 1000px); display: grid; grid-template-rows: 1fr auto; background: var(--abyss); overflow: hidden }
.gp-cover { position: absolute; inset: 0 0 auto 0; height: min(calc(100vw * 9 / 21), 74svh); -webkit-mask-image: linear-gradient(#000 58%, transparent 98%); mask-image: linear-gradient(#000 58%, transparent 98%) }
.gp-cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22% }
.gp-in { position: relative; z-index: 2; align-self: end; padding-bottom: 40px }
.gp-chips { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-bottom: 22px }
.status { display: inline-flex; align-items: center; gap: 9px; font-size: .875rem; color: var(--body-c) }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--steel) }
.gp-hero h1 { display: grid; gap: 18px; max-width: 62rem }
.gp-hero h1 .t-hero { font-size: clamp(3.2rem, 5.2vw, 5.6rem) }
.gp-hero .btns { margin-top: 30px }
.gp-hero .slate { position: absolute; right: var(--m); top: calc(var(--head) + 24px); z-index: 2 }
.gp-plate { position: relative; z-index: 2; border-top: 1px solid var(--seam); background: var(--brushed), rgb(11 13 16 / .8) }
.gp-plate .figs > div:first-child { padding-left: 0 }
.gp-plate .figs b { font-size: clamp(1.9rem, 2.6vw, 2.6rem) }
@media (max-width: 760px) {
  .gp-hero { min-height: 0; display: block }
  .gp-cover { position: relative; aspect-ratio: 4 / 5 }
  .gp-cover { height: auto; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent) }
  .gp-in { margin-top: -10vw; padding-bottom: 22px }
  .gp-hero .slate { display: none }
  .gp-hero .btns .pill { width: 100% } .gp-hero .btns .ghost { flex: 1 } .gp-hero .btns .tlink { display: none }
  .gp-plate .wrap { padding-inline: 0 } .gp-plate .figs > div { padding: 14px 10px 16px; gap: 6px } .gp-plate .figs > div:first-child { padding-left: var(--m) }
  .gp-plate .figs b { font-size: 1.5rem } .gp-plate .figs span { font-size: .75rem; letter-spacing: 0; text-transform: none; font-stretch: 100% }
}
/* B03 spec plate + shelf */
.spec { margin-top: 0 }
.spec-h { display: flex; justify-content: space-between; gap: 16px; padding: 22px 30px; border-bottom: 1px solid var(--seam) }
.spec-h b { color: var(--steel) }
.spec .figs { --n: 4; border-bottom: 1px solid var(--seam) }
.spec .figs > div { padding: 28px 30px }
.spec .rows { grid-template-columns: 1fr 1fr; column-gap: 48px; padding: 8px 30px 22px; display: grid }
.spec .rows > div:last-child { border-bottom: 1px solid var(--seam) }
.spec .rows > div:nth-last-child(-n+1) { border-bottom: 0 }
.gp-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px var(--gut); margin-bottom: 64px; align-items: end }
.gp-intro .t-body + .t-body { margin-top: 14px }
.shelf { margin-top: 80px }
.shelf ul { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; padding-bottom: 28px }
.shelf ul::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgb(215 220 227 / .5), transparent); box-shadow: 0 0 24px 2px rgb(215 220 227 / .08) }
.shelf li { display: grid; gap: 10px; text-align: center }
.shelf .sym { position: relative; aspect-ratio: 1 }
.shelf .sym .symf { inset: 4% }
.shelf .sym .spr { inset: 4% }
.shelf .nm { font-size: .8rem; color: var(--body-c); line-height: 1.3 }
.shelf .nm small { display: block; color: var(--label); font-size: .75rem }
.shelf .band-bar { padding-top: 16px }
.moments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); margin-top: 64px }
.moment .st { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: radial-gradient(ellipse 50% 40% at 50% 55%, rgb(215 220 227 / .07), transparent 70%), linear-gradient(#0d1014, var(--abyss)) }
.moment p { margin-top: 14px; font-size: .92rem; color: var(--body-c) }
.moment p b { color: var(--steel); font-weight: 650 }
.win-close .hotcell { inset: auto; left: 50%; top: 50%; width: 44%; aspect-ratio: 1; translate: -50% -50% }
.win-close .spr { inset: auto; left: 50%; top: 50%; width: 38%; height: auto; aspect-ratio: 1; translate: -50% -50% }
.win-close .mx { right: 24%; top: 10%; min-width: 0; font-size: 1.1rem }
.crew-moment .cell { width: 60%; bottom: -8% }
.crew-moment .c-patch { left: 24% } .crew-moment .c-boss { left: 50% } .crew-moment .c-bulk { left: 76% }
.moment .f002 { height: 100%; aspect-ratio: auto }
.gp-how { margin-top: 32px }
@media (max-width: 1179px) { .shelf ul { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 28px } .spec .rows { grid-template-columns: 1fr } .spec .rows > div:nth-last-child(-n+1) { border-bottom: 0 } }
@media (max-width: 760px) {
  .gp-intro { grid-template-columns: 1fr; margin-bottom: 40px }
  .spec-h, .spec .rows { padding-inline: 18px }
  .spec .figs { --n: 2 } .spec .figs > div { padding: 20px 18px } .spec .figs > div:nth-child(3) { border-left: 0 } .spec .figs > div:nth-child(n+3) { border-top: 1px solid var(--seam) }
  .spec .figs b { font-size: 2.4rem }
  .shelf { margin-top: 56px } .shelf ul { gap: 18px 8px }
  .moments { margin-top: 40px }
}
/* B04 How it plays */
.hp { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 56px; align-items: start }
.hp-stick { position: sticky; top: calc(var(--head) + 4vh); }
.hp-stage { position: relative; padding: 4% 6% 8%; background: radial-gradient(ellipse 50% 42% at 50% 46%, rgb(215 220 227 / .08), transparent 72%) }
.hp-stage::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 3%; height: 1px; background: linear-gradient(90deg, transparent, rgb(215 220 227 / .3), transparent) }
.hp-stage .shot { position: relative; aspect-ratio: 1344 / 1370 }
.hp-stage .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity var(--t-ui) var(--ease-out); -webkit-box-reflect: below 6px linear-gradient(transparent 82%, rgb(0 0 0 / .14)) }
.hp-stage .shot img.on { opacity: 1 }
.hp-stage .band-bar { position: absolute; left: 6%; right: 6%; bottom: -36px }
.hp-idx { display: flex; gap: 20px; margin: 0 0 40px }
.hp-idx li { position: relative; font: 800 2.6rem/.85 var(--font); font-stretch: 62%; color: rgb(215 220 227 / .4); padding-bottom: 10px; transition: color var(--t-ui) }
.hp-idx li::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--ember); transform: scaleX(0); transform-origin: left; transition: transform var(--t-ui) var(--ease-out) }
.hp-idx li.on { color: var(--steel) } .hp-idx li.on::after { transform: scaleX(1) }
.hp-steps { display: grid; gap: 0 }
.hp-step { min-height: 62vh; display: grid; gap: 14px; align-content: center; padding: 24px 0; opacity: .35; transition: opacity var(--t-ui) }
.hp-step.on { opacity: 1 }
.hp-step .shotm { display: none }
.hp-step .facts { padding-top: 12px; border-top: 1px solid var(--seam); color: var(--steel); font-size: .92rem }
.doors { margin-top: 96px; padding: 26px 30px 22px }
.doors table { width: 100%; border-collapse: collapse; font-size: 1rem }
.doors th { text-align: left; font: 600 .72rem/1.3 var(--font); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--label); padding: 0 12px 12px 0; border-bottom: 1px solid rgb(215 220 227 / .35) }
.doors td { padding: 13px 12px 13px 0; border-bottom: 1px solid var(--seam); color: var(--body-c) }
.doors td:first-child { color: var(--steel); font-weight: 650 }
.doors .foot-n { margin-top: 14px; font-size: .88rem; color: var(--label) }
@media (max-width: 1079px), (prefers-reduced-motion: reduce) {
  .hp { grid-template-columns: 1fr } .hp-stick, .hp-idx { display: none }
  .hp-step { min-height: 0; opacity: 1; padding: 0 0 48px }
  .hp-step .shotm { display: block; position: relative; aspect-ratio: 1170 / 1193; margin-bottom: 8px; background: #120c0a }
  .hp-step .shotm img { width: 100%; height: 100%; object-fit: cover }
}
.rm .hp { grid-template-columns: 1fr } .rm .hp-stick, .rm .hp-idx { display: none }
.rm .hp-step { min-height: 0; opacity: 1; padding: 0 0 48px } .rm .hp-step .shotm { display: block; position: relative; aspect-ratio: 1170 / 1193; margin-bottom: 8px } .rm .hp-step .shotm img { width: 100%; height: 100%; object-fit: cover }
@media (max-width: 760px) { .doors { padding: 18px 16px; overflow-x: auto } .doors table { font-size: .9rem; min-width: 30rem } }
/* B05 math */
.ledger { padding: 8px 36px }
.ledger > div { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 8px 40px; align-items: end; padding: 30px 0; border-bottom: 1px solid var(--seam) }
.ledger > div:last-child { border-bottom: 0 }
.ledger dt { order: 2; font: 600 .75rem/1.3 var(--font); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--steel) }
.ledger dt small { display: block; margin-top: 8px; font: 400 1rem/1.5 var(--font); letter-spacing: 0; text-transform: none; color: var(--body-c) }
.ledger dd { order: 1 }
.ledger .t-figure small { font-size: .5em; margin-left: .06em }
.js-motion .stamp .t-figure { animation: stamp 520ms var(--ease-out) both; animation-delay: var(--d, 0s) }
@keyframes stamp { 0% { transform: scale(1.06); opacity: .5 } 60% { transform: scale(.985); opacity: 1 } 100% { transform: scale(1) } }
.modes { width: 100%; border-collapse: collapse; margin-top: 72px }
.modes th { text-align: left; font: 600 .72rem/1.3 var(--font); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--label); padding: 0 14px 14px 0; border-bottom: 1px solid rgb(215 220 227 / .4) }
.modes td { padding: 16px 14px 16px 0; border-bottom: 1px solid var(--seam); color: var(--body-c); vertical-align: top }
.modes .m-name { color: var(--steel); font-weight: 650; white-space: nowrap }
.modes .m-cost, .modes .m-max, .modes .m-rtp { color: var(--steel); white-space: nowrap; font-variant-numeric: tabular-nums }
.modes .r { text-align: right }
.m-foot { margin-top: 14px; font-size: .88rem; color: var(--label); max-width: 50rem }
.pay { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gut); margin-top: 72px }
.receipt { padding: 28px 30px }
.receipt ol { margin-top: 18px; border-top: 1px solid rgb(215 220 227 / .35) }
.receipt li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--seam); font-size: .95rem; color: var(--body-c) }
.receipt li .amt { color: var(--steel); font-weight: 650 }
.receipt .total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 16px }
.receipt .total b { font: 800 3rem/.9 var(--font); font-stretch: 62%; color: var(--steel) }
.ladder { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 22px 0 18px }
.ladder li { display: grid; gap: 8px; text-align: center }
.ladder .c { position: relative; aspect-ratio: 1 }
.ladder .c img { width: 100%; height: 100% }
.ladder .x { font: 800 1.2rem/1 var(--font); font-stretch: 62%; color: var(--steel) }
.checks { margin-top: 72px }
.checks .figs { --n: 4; border-top: 1px solid rgb(215 220 227 / .4); margin-top: 22px }
.checks .figs > div { padding: 22px 22px 22px 0; padding-left: 22px }
.checks .figs > div:first-child { padding-left: 0 }
.checks .figs b { font-size: clamp(2.2rem, 3.4vw, 3.2rem) }
.checks .figs span { text-transform: none; letter-spacing: 0; font: 400 .9rem/1.4 var(--font); color: var(--body-c) }
.mrules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut); margin-top: 64px }
.mrules li { padding-top: 18px; border-top: 1px solid var(--seam); display: grid; gap: 10px; align-content: start }
.mrules b { font: 700 1.25rem/1.2 var(--font); font-stretch: 75%; color: var(--steel) }
.mrules p { color: var(--body-c); font-size: .95rem }
.math-end { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 40px; margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--seam) }
.math-end q { font: 300 1.4rem/1.35 var(--font); color: var(--steel); max-width: 44rem }
.math-end q span { display: block; font: 600 .72rem/1 var(--font); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--label); margin-bottom: 10px }
.fold-b { display: none }
@media (max-width: 1179px) { .pay { grid-template-columns: 1fr } .checks .figs { --n: 2 } .checks .figs > div:nth-child(3) { padding-left: 0; border-left: 0 } .checks .figs > div:nth-child(n+3) { border-top: 1px solid var(--seam) } }
@media (max-width: 760px) {
  .ledger { padding: 4px 18px } .ledger > div { grid-template-columns: 1fr; padding: 22px 0 }
  .modes, .modes tbody, .modes tr, .modes td { display: block } .modes thead { display: none } .modes { margin-top: 48px }
  .modes tr { padding: 16px 0; border-bottom: 1px solid var(--seam); display: grid; grid-template-columns: 1fr auto; gap: 4px 12px }
  .modes td { padding: 0; border: 0 } .modes .m-what { grid-column: 1 / -1; font-size: .92rem } .modes .m-rtp::before { content: "RTP " ; color: var(--label) } .modes .m-max::before { content: "Max win "; color: var(--label) } .modes .r { text-align: right }
  .receipt { padding: 22px 18px }
  .fold-b { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; margin-top: 48px; padding: 14px 18px; border: 1px solid var(--seam); border-radius: 2px; background: var(--gun); text-align: left; cursor: pointer; font-weight: 600 }
  .fold-b span { font-weight: 400; font-size: .82rem; color: var(--label) }
  .js .fold:not(.open) { display: none }
  .mrules { grid-template-columns: 1fr; gap: 28px }
}
/* B06 crew */
.crew3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gut) }
.cstage { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: radial-gradient(ellipse 52% 40% at 50% 62%, rgb(215 220 227 / .08), transparent 70%), linear-gradient(#0d1014, var(--abyss)) }
.cstage::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgb(215 220 227 / .28), transparent) }
.cstage .cell { --zoom: 1.28; bottom: 10% }
.cstage .idx { position: absolute; left: 18px; top: 16px }
.cbody { padding-top: 24px; display: grid; gap: 14px }
.cbody h3 { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap }
.cbody blockquote { font: 300 1.25rem/1.4 var(--font); color: var(--steel) }
.cbody .rows > div { grid-template-columns: 4.5rem minmax(0, 1fr); padding: 10px 0 }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px }
.chip { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--seam); background: transparent; font-weight: 600; font-size: .875rem; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: border-color var(--t-hover) }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tempered) }
.chip[aria-pressed="true"] { border-color: rgb(215 220 227 / .55) }
.chip[aria-pressed="true"]::before { background: var(--steel) }
.chip.picked[aria-pressed="true"]::before { background: var(--ember) }
.lineup { margin: 0 auto 64px; max-width: 64rem }
.lineup .media { aspect-ratio: 2540 / 1348; background: transparent }
.lineup .media img { object-fit: contain }
.crew-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 32px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--seam) }
@media (max-width: 760px) {
  .crew3 { grid-auto-columns: 82vw }
  .lineup { margin-inline: calc(-1 * var(--m)); overflow-x: auto; scrollbar-width: none } .lineup::-webkit-scrollbar { display: none } .lineup .media { width: 170vw }
}
/* B08 closing band */
.gp-close { position: relative; overflow: hidden; background: var(--abyss) }
.gp-close .bg { position: absolute; inset: 0 }
.gp-close .bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40% }
.gp-close .bg.fb img { filter: brightness(.4) saturate(.6) }
.gp-close::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(7 8 10 / .92), rgb(7 8 10 / .55) 55%, rgb(7 8 10 / .3)), linear-gradient(0deg, rgb(7 8 10 / .8), transparent 40%) }
.gp-close .wrap { position: relative; z-index: 1; min-height: min(calc(100vw / 3), 600px); display: grid; align-content: center; gap: 22px; padding-block: 96px }
.gp-close .t-body { max-width: 34rem }
.gp-close .rgl { display: flex; align-items: center; gap: 14px; color: var(--body-c); font-size: .92rem; margin-top: 10px }
.gp-close .rgl a { color: var(--steel) }
@media (max-width: 760px) { .gp-close .wrap { min-height: 0; padding-block: 72px } .gp-close .btns .pill { width: 100% } }

/* ===================================================================== /press/ */
.p-hero { padding-top: calc(var(--head) + clamp(48px, 7vw, 96px)) }
.p-hero .g { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 40px var(--gut); align-items: center }
.p-hero h1 { margin: 26px 0 22px }
.p-hero .ember-btn { margin-top: 30px }
.p-hero .contents { margin-top: 14px; font-size: .9rem; color: var(--body-c) }
.p-hero .addr { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 30px }
.p-hero .addr .copyf { margin-top: 0 }
.p-hero .ainote { margin-top: 22px; font-size: .88rem; color: var(--label); max-width: 36rem }
.p-hero .lu { position: relative; background: radial-gradient(ellipse 50% 42% at 50% 60%, rgb(215 220 227 / .07), transparent 70%) }
.p-hero .lu img { width: 100%; height: auto }
.p-hero .lu .slate { margin-top: 12px }
.qt { display: grid; gap: 0 }
.qt > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr) auto; gap: 12px 28px; align-items: start; padding: 22px 0; border-top: 1px solid var(--seam) }
.qt > div:last-child { border-bottom: 1px solid var(--seam) }
.qt p { color: var(--steel); max-width: 52rem; font-size: 1.02rem }
.qt .lead p { font: 300 1.4rem/1.35 var(--font) }
.seg { display: none }
.p-facts { max-width: 52rem; padding: 26px 32px 22px }
.wall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gut) }
.tile { display: grid; grid-template-rows: auto 1fr; text-decoration: none; border: 1px solid var(--seam); border-radius: 2px; overflow: hidden; background: var(--gun); transition: border-color var(--t-hover) }
.tile:hover { border-color: var(--tempered) }
.tile .pv { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: var(--abyss); overflow: hidden }
.tile .pv img { width: 100%; height: 100%; object-fit: cover }
.tile .pv svg { width: 70%; height: auto }
.tile .pv .slate { position: absolute; left: 10px; bottom: 10px; background: rgb(7 8 10 / .75); padding: 5px 8px }
.tile .tx { display: grid; gap: 8px; padding: 16px 16px 18px; align-content: start }
.tile .tx b { color: var(--steel); font-size: 1rem }
.tile .tx span { font-size: .84rem; color: var(--body-c); line-height: 1.45 }
.tile .fmt { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; font: 600 .72rem/1 var(--font); font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase; color: var(--steel) }
.creators { margin-top: 28px; font-size: .95rem; color: var(--body-c) }
.logouse { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: var(--gut); align-items: stretch }
.cs-diag { position: relative; display: grid; place-items: center; padding: 48px; background: var(--abyss); border: 1px solid var(--seam) }
.cs-diag .zone { position: relative; padding: 28px; outline: 1px dashed rgb(215 220 227 / .35) }
.cs-diag svg { width: 112px; height: 112px }
.cs-diag .dim { position: absolute; right: -2px; top: -26px; font: 600 .72rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--label) }
.lighttile { display: grid; place-items: center; padding: 32px; background: var(--bone); border-radius: 2px }
.lighttile svg { width: 100%; max-width: 220px; height: auto }
.lrules { display: grid; gap: 0; counter-reset: r }
.lrules li { padding: 14px 0 14px 36px; border-bottom: 1px solid var(--seam); color: var(--body-c); position: relative; counter-increment: r }
.lrules li::before { content: "0" counter(r); position: absolute; left: 0; top: 15px; font: 600 .72rem/1.3 var(--font); letter-spacing: .12em; color: var(--label) }
.ask { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 48px var(--gut) }
.ask ul li { border-top: 1px solid var(--seam) }
.ask ul li:last-child { border-bottom: 1px solid var(--seam) }
.ask ul a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: center; padding: 18px 0; min-height: 64px; text-decoration: none }
.ask ul a b { color: var(--steel); font-weight: 650 }
.ask ul a span { grid-column: 1; font-size: .9rem; color: var(--body-c) }
.ask ul a i { grid-row: 1 / span 2; grid-column: 2; width: 9px; height: 9px; border-top: 1.5px solid var(--label); border-right: 1.5px solid var(--label); rotate: 45deg; transition: translate var(--t-hover) }
.ask ul a:hover i { translate: 3px 0 }
@media (max-width: 1179px) { .wall { grid-template-columns: repeat(3, minmax(0, 1fr)) } .logouse { grid-template-columns: 1fr 1fr } .logouse .lrules-w { grid-column: 1 / -1 } }
@media (max-width: 760px) {
  .p-hero { padding-top: calc(var(--head) + 28px) }
  .p-hero .g { grid-template-columns: 1fr } .p-hero .lu { order: 2 }
  .p-hero h1 { margin: 18px 0 14px }
  .p-hero .t-lede { font-size: 1rem }
  .p-hero .ember-btn { width: 100%; justify-content: center; margin-top: 20px }
  .p-hero .addr { margin-top: 18px }
  .seg { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--seam); border-radius: 999px; padding: 3px; margin-bottom: 16px }
  .seg button { min-height: 44px; border: 0; border-radius: 999px; background: transparent; font-weight: 600; font-size: .85rem; color: var(--label); cursor: pointer }
  .seg button[aria-selected="true"] { background: var(--seam); color: var(--steel) }
  .js .qt > div:not(.on) { display: none }
  .qt > div { grid-template-columns: 1fr; padding: 18px 0; min-height: 15rem; align-content: start }
  .js .qt > div { border-bottom: 1px solid var(--seam) }
  .qt .lead p { font-size: 1.2rem }
  .p-facts { padding: 18px }
  .wall { grid-template-columns: 1fr 1fr; gap: 12px } .tile .tx { padding: 12px } .tile .tx span { display: none }
  .logouse { grid-template-columns: 1fr } .cs-diag { padding: 40px 20px }
  .ask { grid-template-columns: 1fr }
}

/* ===================================================================== /privacy/, 404 */
.pv-hero { padding-top: calc(var(--head) + clamp(48px, 7vw, 96px)); padding-bottom: 56px }
.pv-hero .t-statement { margin-top: 22px }
.pv-plate { margin-top: 48px }
.pv-plate .figs { --n: 4 }
.pv-plate .figs > div { padding: 22px 24px }
.pv-plate .figs b { font-size: clamp(1.8rem, 2.6vw, 2.4rem) }
.pv-body { padding-bottom: var(--pad-b) }
.pv-intro { max-width: 46rem; margin-bottom: 48px; color: var(--body-c); font-size: 1.0625rem }
.pv-sec { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 12px var(--gut); padding: 26px 0; border-top: 1px solid var(--seam) }
.pv-sec h2 { font: 700 1.25rem/1.25 var(--font); font-stretch: 75%; color: var(--steel); position: sticky; top: calc(var(--head) + 20px); align-self: start }
.pv-sec p { color: var(--body-c); max-width: 34rem }
.pv-sec code { font: 500 .95em var(--font); color: var(--steel) }
.pv-upd { margin-top: 32px; font-size: .88rem; color: var(--label) }
@media (max-width: 760px) { .pv-plate .figs { --n: 2 } .pv-plate .figs > div:nth-child(3) { border-left: 0 } .pv-plate .figs > div:nth-child(n+3) { border-top: 1px solid var(--seam) } .pv-plate .figs > div { padding: 18px 16px } .pv-sec { grid-template-columns: 1fr } .pv-sec h2 { position: static } }
.nf { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; background: var(--abyss) }
.nf .g { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 40px var(--gut); align-items: center; padding-top: var(--head) }
.nf h1 { margin: 22px 0 18px }
.nf .btns { margin-top: 32px }
.nf figure { position: relative }
.nf figure .media { aspect-ratio: 3 / 2; background: radial-gradient(ellipse 45% 50% at 50% 55%, rgb(215 220 227 / .08), transparent 72%), var(--abyss); -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 55%, transparent 100%) }
.nf figure .media img { object-fit: cover }
.nf figure .media.fb img { object-fit: cover; object-position: 50% 30%; transform: scale(2.4); transform-origin: 49% 40% }
.nf figure .slate { margin-top: 10px }
@media (max-width: 760px) { .nf .g { grid-template-columns: 1fr; padding-block: calc(var(--head) + 20px) 48px } .nf figure { order: -1 } }

/* reduced motion: final state, no animation */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important }
  html { scroll-behavior: auto }
  .cue { display: none }
}

/* poster capture mode (tools/crew3d-site/capture-poster.cjs, ?capture): only the stage paints */
.capture .hero::after, .capture .hero-in, .capture .hero-meta, .capture .top, .capture .cue, .capture .nametag, .capture .gate, .capture body::after, .capture .skip { display: none !important }

@media (max-width: 760px) { .lineup .band-bar { flex-wrap: wrap } .band-bar { flex-wrap: wrap } }
.msheet ol { margin-top: 44px }
.step-sheet .sh-body { padding-top: 40px }
@media (max-width: 760px) { .bible-h span:last-child { display: none } }
.hp-step .shotm { max-width: 36rem }
/* JS off: the lazy copies stay hidden, the <noscript> copies take their place */
html:not(.js) .lz { display: none !important }
html:not(.js) noscript { display: contents }

/* ===================================================================== POLISH r3 (2026-11-03)
   Page length (SITE-SPEC §A.2 caps), layout fixes found in the polish shots, one ember per viewport. Later rules win. */
:root { --pad-t: clamp(72px, 6.2vw, 96px); --pad-b: clamp(64px, 5.4vw, 84px) }
@media (max-width: 760px) { :root { --pad-t: 56px; --pad-b: 48px } }
.head { margin-bottom: 44px }
@media (max-width: 760px) { .head { margin-bottom: 32px; gap: 18px } }

/* H01: tighter band → plate → crew; readable captions over the board captures */
.hb-top { margin-bottom: 40px }
.hb-band .stripx figcaption { padding: 72px 18px 16px; background: linear-gradient(transparent, rgb(7 8 10 / .78) 38%, rgb(7 8 10 / .96)) }
.beats { margin-top: 20px }
.hb-plate { margin-top: 32px }
.hb-plate .figs > div { padding: 22px 24px 20px }
.jobs { margin-top: 28px }
.job .st { aspect-ratio: 16 / 9 }
.job .st .cell { --zoom: .62; bottom: 8% }
.job p { margin-top: 14px }
.hb-end { margin-top: 32px }
@media (max-width: 760px) { .job .st { aspect-ratio: 4 / 3 } .job .st .cell { --zoom: .8 } }

/* H02: poster + story game + a slim File 002 strip */
@media (min-width: 761px) {
  .gm-hb .media { aspect-ratio: 1 / 1 }
  .gm-right { gap: 28px }
  .f002 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 28px; align-items: center; padding: 22px 26px }
  .f002 h3 { margin: 0 } .f002 > p { grid-column: 1 } .f002 .red { grid-column: 2; grid-row: 1 / span 2; margin: 0 }
}
.gm-cap { margin-top: 18px; gap: 10px }

/* H03: frames square; the five steps read as slides (artefact beside its text) on desktop */
.smap-f .fr { aspect-ratio: 1 / 1 }
.track-head { margin: 52px 0 20px }
.track-prog { margin-bottom: 26px }
@media (min-width: 1180px) {
  .js .track { grid-auto-columns: 86% }
  .js .step { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; gap: 36px; align-items: start }
  .js .step .art { aspect-ratio: 16 / 11 }
}
.how-end { margin-top: 28px }
/* reduced motion: a static grid of all five steps, no arrows */
.rm .track { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; row-gap: 48px }
.rm .step { grid-template-columns: none; grid-template-rows: auto 1fr }
.rm .track-nav .arrowbtn, .rm .track-tabs, .rm .track-prog { display: none }
@media (max-width: 760px) { .rm .track { grid-template-columns: 1fr; padding-inline: 0; margin-inline: 0 } }

/* H04: a slightly wider band, tighter plates */
.studio-band { aspect-ratio: 18 / 5 }
.studio-band img { object-position: 50% 58% }
.principles { margin-top: 40px }
.studio-plates { margin-top: 40px }
.wwu .rows > div { padding: 8px 0 }
.studio-end { margin-top: 24px }
@media (max-width: 760px) { .studio-band { aspect-ratio: 4 / 3 } .principles { margin-top: 36px } .studio-plates { margin-top: 36px } }

/* H05: copy field beside the pill; three routes as columns */
.idea .btns { margin-top: 30px; align-items: center }
.idea .btns .copyf { margin-top: 0 }
.routes { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gut); border-top: 0 }
.routes li { grid-template-columns: none; align-content: start; align-items: start; gap: 10px; padding: 20px 0 0; border-top: 1px solid rgb(215 220 227 / .4); border-bottom: 0 }
.routes li .tlink { justify-self: start }
@media (max-width: 1179px) { .routes { grid-template-columns: 1fr } .routes li { padding: 18px 0 } }
@media (max-width: 760px) {
  .idea .btns .copyf { width: 100% }
  .routes { margin-top: 40px } .routes li { gap: 6px; padding: 16px 0 6px; border-top: 1px solid var(--seam) } .routes li:first-child { border-top-color: rgb(215 220 227 / .4) }
}

/* H06 */
.pb .rows > div { padding: 7px 0 }
.press-more { margin-top: 24px }

/* H07: two groups side by side on desktop; the closing card sits under the short group */
@media (min-width: 1180px) {
  .faqs { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 56px; align-items: start }
  .faqs .fg h3 { margin-top: 0 }
  .faqs summary { min-height: 58px; padding: 14px 0; font-size: 1.08rem }
  .notq { margin-top: 32px; padding: 24px 26px }
}
.faqs .fg + .fg h3 { margin-top: 40px }
@media (min-width: 1180px) { .faqs .fg + .fg h3 { margin-top: 0 } }
.faq-more { margin-top: 22px }

/* footer: smaller mark, less air */
.foot .wrap { padding-top: clamp(48px, 4.4vw, 68px) }
.foot-mark, .foot-mark svg, .foot-mark .refl { width: 88px; height: 88px } .foot-mark .refl { top: 90px }
.foot-mark { margin-bottom: 28px }
.foot .t-statement { margin-bottom: 20px }
.foot-rg { margin-top: 32px }
@media (max-width: 760px) { .foot-mark, .foot-mark svg, .foot-mark .refl { width: 72px; height: 72px } .foot-mark .refl { top: 74px } }

/* /heist-bots/ hero, phone: cover, H1, pill and plate inside 844 px (the fact sheet sits in the action bar) */
@media (max-width: 760px) {
  .gp-in { margin-top: -18vw; padding-bottom: 14px }
  .gp-chips { margin-bottom: 14px; gap: 6px 16px }
  .gp-hero h1 { gap: 12px }
  .gp-hero .btns { margin-top: 20px }
  .gp-hero .btns .ghost { display: none }
  .gp-plate .figs > div { padding: 12px 10px 13px }
}

/* /press/: two pairs of sections side by side on desktop; key-art slate on one line */
.tile .pv .slate { white-space: nowrap; font-size: .66rem; letter-spacing: .12em; left: 8px; bottom: 8px; padding: 5px 7px }
.duo { border-top: 1px solid rgb(35 41 52 / .55) }
@media (min-width: 1180px) {
  .duo { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 56px; max-width: calc(var(--max) + 2 * var(--m)); margin-inline: auto; padding-inline: var(--m) }
  .duo > .sec { border-top: 0 }
  .duo .wrap { padding-inline: 0; max-width: none }
  .duo .head { grid-template-columns: 1fr; margin-bottom: 32px }
  .duo .t-display { font-size: clamp(2.6rem, 3.6vw, 3.6rem) }
  .duo .p-facts { padding: 22px 26px 20px }
  .duo .p-facts .rows > div { grid-template-columns: 7.2rem minmax(0, 1fr); padding: 9px 0 }
  .duo .qt > div { grid-template-columns: 6.6rem minmax(0, 1fr) auto; gap: 10px 20px; padding: 18px 0 }
  .duo .logouse { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) }
  .duo .logouse .lrules-w { grid-column: 1 / -1 }
  .duo .cs-diag { padding: 36px }
  .duo .ask { grid-template-columns: 1fr; gap: 28px }
  .duo .ask ul a { padding: 14px 0; min-height: 56px }
}
.duo + .sec { border-top: 1px solid rgb(35 41 52 / .55) }
/* polish r3, round 2 */
.hb-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 18px 32px; margin-top: 22px }
.hb-foot .hb-end { margin-top: 0 }
@media (min-width: 1180px) { .smap-s { font-size: clamp(1.9rem, 2.4vw, 2.3rem) } }
.studio-band { aspect-ratio: 4 / 1 }
.studio-band ~ .wrap .band-bar .tlink, .band-bar .tlink { white-space: nowrap }
@media (max-width: 760px) {
  .hb-foot { flex-direction: column; align-items: stretch } .hb-foot .slate { order: 2 }
  .studio-band { aspect-ratio: 16 / 10 }
  .band-bar { flex-wrap: wrap }
  .hb-plate .figs > div { padding: 14px 16px } .hb-plate .figs b { font-size: 2rem }
  .job .st { aspect-ratio: 16 / 10 }
  .step .art { aspect-ratio: 4 / 3; padding: 5% }
  .wwu .rows > div { grid-template-columns: 1fr; gap: 2px; padding: 9px 0 }
  .principles li { gap: 10px } .principles { gap: 28px 16px }
  .isteps li { padding: 16px 0 }
  .notq { gap: 14px } .notq .btns { gap: 12px 18px }
  .faqs h3 { margin: 32px 0 4px }
  .foot-index a { min-height: 44px }
  .foot .t-statement { font-size: 1.4rem }
}
/* /press/ length */
.p-hero { padding-top: calc(var(--head) + clamp(36px, 4vw, 60px)) }
.p-hero h1 { margin: 20px 0 18px } .p-hero .ember-btn { margin-top: 24px } .p-hero .addr { margin-top: 22px } .p-hero .ainote { margin-top: 16px }
.tile .pv { aspect-ratio: 4 / 3 }
.tile .pv svg { width: 62% }
@media (min-width: 1180px) {
  .duo .qt p { font-size: .97rem; line-height: 1.5 } .duo .qt .lead p { font-size: 1.25rem }
  .duo .cs-diag { padding: 22px } .duo .cs-diag svg { width: 84px; height: 84px } .duo .cs-diag .zone { padding: 20px }
  .duo .lighttile { padding: 22px }
  .duo .lrules li { padding: 11px 0 11px 34px } .duo .lrules li::before { top: 12px }
  .duo .ask ul a { padding: 11px 0; min-height: 52px }
}
@media (max-width: 760px) { .tile .pv { aspect-ratio: 1 } .p-hero .lu { margin-top: 8px } }
/* footer, desktop: the mark stands top right in its pool, above the index */
@media (min-width: 1180px) {
  .foot .wrap { position: relative }
  .foot-mark { position: absolute; right: var(--m); top: clamp(48px, 4.4vw, 68px); margin: 0 }
  .foot-grid { min-height: 150px }
}
@media (max-width: 760px) {
  .p-hero .lu { margin-top: 0 }
  .tile .pv { aspect-ratio: 3 / 2 }
  .ask ul a { padding: 12px 0; min-height: 56px }
  .ask { gap: 32px }
}
@media (min-width: 1180px) { .duo .head { margin-bottom: 24px } }
/* polish r3, round 3: length */
:root { --pad-t: clamp(64px, 5.6vw, 88px); --pad-b: clamp(56px, 4.8vw, 72px) }
.head { gap: 22px }
@media (min-width: 1180px) {
  .games { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: var(--gut) 32px; align-items: start }
  .gm-right { display: contents }
  .gm-hb .media { aspect-ratio: 4 / 5 }
  .f002 { display: block; aspect-ratio: auto; padding: 56px 24px 26px; min-height: 100% }
  .f002 h3 { margin: 0 0 8px } .f002 .red { margin-top: 28px; display: grid } .f002 .red div { grid-template-columns: 1fr; gap: 8px }
  .gm-cap .t-body { font-size: 1rem }
  .studio-plates { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) }
  .wwu .rows > div { grid-template-columns: 9rem minmax(0, 1fr); padding: 7px 0 }
  .wwu { padding: 24px 28px 16px } .rg { padding: 28px 30px }
  .job .st { aspect-ratio: 21 / 9 } .job .st .cell { --zoom: .5 }
  .smap-foot { margin-top: 18px; padding-top: 14px }
  .track-head { margin-top: 40px }
}
@media (max-width: 760px) {
  .hb-plate .figs > div { padding: 12px 14px; gap: 4px } .hb-plate .figs b { font-size: 1.75rem } .hb-plate .figs small { font-size: .78rem }
  .wwu .rows > div { grid-template-columns: 6.4rem minmax(0, 1fr); gap: 2px 12px; padding: 8px 0 } .wwu .rows dd { font-size: .9rem }
  .rg { gap: 12px } .rg h3 { font-size: 1.35rem } .rg p { font-size: .95rem }
  .principles .n { font-size: 2.1rem } .principles p { font-size: .88rem; line-height: 1.5 }
  .routes li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline } .routes li p { grid-column: 1 / -1; grid-row: 2; font-size: .95rem } .routes li .tlink { grid-row: 1; grid-column: 2 }
  .pb .line { font-size: 1.15rem } .pb { gap: 12px } .pb .rows dd { font-size: .86rem }
  .smap-foot { font-size: .9rem; margin-top: 18px; padding-top: 14px }
  .notq { padding: 18px 20px }
  .foot-file { margin-top: 12px }
  .foot .wrap { padding-top: 40px }
  .foot-mark { margin-bottom: 18px }
}
/* a lazy image that has not been given its src yet never shows a broken-image box; its frame shows the vault ground */
img.lz:not([src]), .lz img:not([src]) { visibility: hidden }
@media (min-width: 1180px) { .f002 { min-height: 0; aspect-ratio: 4 / 5; display: flex; flex-direction: column; padding: 52px 24px 24px } .f002 .red { margin-top: auto } }
/* polish r3, round 4: length */
:root { --pad-t: clamp(64px, 5vw, 76px); --pad-b: clamp(56px, 4.2vw, 64px) }
.head { margin-bottom: 36px }
@media (min-width: 1180px) {
  .hb-top { grid-template-columns: 1fr auto; align-items: start }
  .hb-top .head { grid-template-columns: 1fr; gap: 18px }
  .hb-top .head .t-display { white-space: nowrap }
  .hb-top .hb-logo { width: 240px; margin-top: 4px }
  .hb-top .head > .t-lede { max-width: 52rem }
  .studio-band { aspect-ratio: 5 / 1 }
  .studio-band img { object-position: 50% 62% }
}
@media (min-width: 1180px) {
  .gm-hb .media { aspect-ratio: 1 / 1 } .f002 { aspect-ratio: 1 / 1 }
  .js .step .art { aspect-ratio: 16 / 9; padding: 4% 6% }
  .bible li { padding: 7px 0 }
}
/* /press/ phone: the four texts share one grid cell (height of the longest, so switching never moves the page);
   the tile keeps its file type + real size; the line-up image is a desktop-only element (phone spec has none) */
@media (max-width: 760px) {
  .js .qt { display: grid }
  .js .qt > div, .js .qt > div:not(.on) { display: grid; grid-area: 1 / 1; min-height: 0; visibility: hidden }
  .js .qt > div.on { visibility: visible }
  .tile .tx .fmt { display: flex; padding-top: 6px }
  .tile .tx { gap: 4px }
  .tile .pv .slate { white-space: normal; max-width: calc(100% - 16px); line-height: 1.35 }
  .p-hero .lu { display: none }
}
.tile .pv .slate { font-size: .72rem; letter-spacing: .1em }
@media (max-width: 760px) {
  .logouse { grid-template-columns: 1fr 1fr; gap: 12px } .logouse .lrules-w { grid-column: 1 / -1 }
  .cs-diag { padding: 30px 12px } .cs-diag svg { width: 64px; height: 64px } .cs-diag .zone { padding: 16px }
  .lighttile { padding: 16px }
  .lrules li { padding: 12px 0 12px 32px } .lrules li::before { top: 13px }
}
.tile .pv .slate { letter-spacing: .06em; max-width: calc(100% - 16px) }