/* Checkup relaunch: the shell (layout + content). Owner: shell agent.
   Brand values come from tokens.css; [data-glass] material comes from glass.css.
   Rules: the shell never sets backgrounds, borders or backdrop-filter on a [data-glass] surface,
   never fades, filters, masks or clips an ancestor of one, and never 3D-tilts one. */

@font-face {
  font-family: "Instrument Sans Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 101%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}
@font-face {
  font-family: "Martian Mono Fallback";
  src: local("Menlo"), local("Courier New");
  size-adjust: 108%;
}
/* only glass.js reads it, from inline style: registering it stops a full style recalc per tweened frame */
@property --glass-o { syntax: "<number>"; inherits: false; initial-value: 1; }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --reveal { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }
@property --beam { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --text-inset: 18px;            /* text set directly on panel glass clears the refracting bevel band */
  --inner-rim: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(13, 13, 13, .04), 0 1px 2px rgba(0, 0, 0, .04);
  --inner-edge: inset 0 0 0 1px rgba(13, 13, 13, .06);
  --tile-shadow: 0 1px 2px rgba(13, 13, 13, .08), 0 16px 34px -18px rgba(13, 13, 13, .42);
  --lav-glow: 0 0 0 5px rgba(180, 160, 255, .22), 0 14px 34px -10px rgba(132, 96, 255, .55);
  --bar-h: 64px;
  --sans: "Instrument Sans", "Instrument Sans Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Martian Mono", "Martian Mono Fallback", ui-monospace, "SF Mono", Menlo, monospace;
  /* panels read as white glass against a neutral wall (brand review: gutter-to-panel gap of 15+) */
  --glass-tint: rgba(255, 255, 255, .66);
  --shadow-panel: 0 1px 2px rgba(0, 0, 0, .08), 0 24px 48px -20px rgba(0, 0, 0, .30);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { :root { --glass-tint: var(--panel); } }

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 76px; }
body { font-family: var(--sans); min-height: 100vh; min-height: 100dvh; overflow-x: hidden; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img, svg, canvas { display: block; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.nowrap { white-space: nowrap; }
.money { font-family: var(--font-mono); font-stretch: 100%; font-variant-numeric: tabular-nums; letter-spacing: -.01em; font-size: .92em; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.apill:focus-visible, .sig-pill:focus-visible, .hpill[aria-pressed="true"]:focus-visible, .lineup-tile:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--canvas), var(--shadow-pill);
}

.skip-link {
  position: fixed; z-index: 60; left: 16px; top: 12px; transform: translateY(-160%);
  height: 40px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 999px;
  background: var(--accent-fill); color: var(--accent-ink); font-weight: 500; text-decoration: none;
  box-shadow: var(--shadow-pill); transition: transform .3s var(--ease-glide);
}
.skip-link:focus { transform: none; }

/* ------------------------------------------------------------------ icons + glyphs */
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ico-toggle .ico-v { transform-box: fill-box; transform-origin: 50% 50%; transition: transform var(--dur-snap) var(--ease-snap); }
[aria-pressed="true"] .ico-toggle .ico-v,
[aria-expanded="true"] .ico-toggle .ico-v { transform: rotate(90deg) scaleY(0); }
.glyph { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

.mark { width: 100%; height: 100%; display: block; overflow: visible; }
.mark--20 { width: 20px; height: 20px; }
.mark--16 { width: 16px; height: 16px; }
.ico-chk path, .ico-done path { stroke-dasharray: 1; stroke-dashoffset: 0; }

/* ------------------------------------------------------------------ chips (mono, dashed = open, solid = locked) */
.chip {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 22px; padding: 0 10px; border: 1px dashed var(--dash); border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: var(--fs-chip); line-height: 1; font-weight: 400; font-stretch: 87.5%;
  letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; color: var(--ink); background: transparent;
  font-variant-numeric: tabular-nums; text-decoration: none; flex: none; max-width: 100%;
}
.chip .ico { width: 14px; height: 14px; stroke-width: 1.75; }
.chip--solid { background: var(--ink); color: var(--canvas); border: 1px solid var(--ink); }
.chip--plate { background: var(--plate); }
.chip--on-accent { border-color: rgba(13, 13, 13, .45); color: var(--accent-ink); }
.chip--btn { cursor: pointer; height: 28px; background: var(--fill); transition: background .2s, color .2s; }
.chip--btn:hover { background: var(--fill-hover); }
.chip--btn[aria-pressed="true"] { background: var(--ink); color: var(--canvas); border: 1px solid var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip__live { display: inline-block; }
.strip {
  font: 400 12px/18px var(--sans); color: var(--ink-3); background: var(--fill);
  border-radius: var(--radius-inner); padding: 8px 12px; box-shadow: var(--inner-rim);
}
.strip a { color: var(--ink); text-underline-offset: 2px; }
.note { font: 400 13px/20px var(--sans); color: var(--ink-3); background: var(--fill); border-radius: var(--radius-inner); padding: 8px 12px; }

/* ------------------------------------------------------------------ pills */
.pill {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 6px 8px 6px 12px; border: 0; border-radius: var(--radius-pill);
  font: 400 var(--fs-pill)/20px var(--sans); color: var(--ink); background: transparent;
  white-space: nowrap; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s var(--ease-glide), color .25s var(--ease-glide);
}
.pill--fill { background: var(--fill); box-shadow: var(--inner-rim), var(--inner-edge); }
.pill--fill:hover { background: var(--fill-hover); }
.pill--plate { background: var(--plate); box-shadow: var(--inner-rim), var(--inner-edge); }
.label { display: inline-grid; }
.label::after { content: attr(data-text); visibility: hidden; grid-area: 1 / 1; white-space: nowrap; }
.label__live { grid-area: 1 / 1; white-space: nowrap; }
.pill-blob, .filter-blob {
  position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
}
.pill-blob, .filter-blob { background: var(--accent-fill); box-shadow: var(--shadow-pill); }   /* active toggles: lavender, black text (§3.1) */

/* the lavender action pill (directive 10: lavender with black text) */
.apill {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 44px; padding: 0 12px 0 18px; border: 0; border-radius: var(--radius-pill);
  background: var(--accent-fill); color: var(--accent-ink); font: 500 16px/20px var(--sans);
  box-shadow: var(--shadow-pill); white-space: nowrap; text-decoration: none;
  transition: background-color .2s var(--ease-glide), box-shadow .35s var(--ease-glide);
}
.apill:hover { background: var(--accent-bright); box-shadow: var(--lav-glow); }
.apill:active { background: var(--accent-press); }
.apill--block { width: 100%; height: 52px; font-size: 17px; }
.apill[disabled] { cursor: progress; }

/* ------------------------------------------------------------------ shell */
.shell { position: relative; z-index: 1; }
.panel { position: relative; }

@media (min-width: 768px) and (min-height: 561px), (min-width: 768px) and (pointer: fine), (min-width: 768px) and (pointer: none) {
  body { overflow: hidden; height: 100vh; height: 100dvh; }
  .shell {
    position: fixed; inset: 0; padding: var(--margin);
    display: grid; grid-template-columns: var(--col-left) minmax(0, 1fr); gap: var(--gutter);
    height: 100vh; height: 100dvh;
  }
  .col-left {
    min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: var(--gutter);
    scrollbar-width: none; border-radius: var(--radius-panel);
  }
  .col-left::-webkit-scrollbar { display: none; }
  .col-left > .panel { flex: none; }
  .col-right { min-height: 0; position: relative; }
  .arcade { height: 100%; overflow: hidden; }
  .arcade-scroll {
    position: absolute; inset: var(--bar-h) 0 0 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
    padding: 0 20px 24px; scrollbar-width: none; border-radius: 0 0 var(--radius-panel) var(--radius-panel);
    -webkit-mask-image: linear-gradient(transparent, #000 12px, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(transparent, #000 12px, #000 calc(100% - 24px), transparent);
  }
  .arcade-scroll::-webkit-scrollbar { display: none; }
}
@media (min-width: 768px) and (max-width: 1099px) and (min-height: 561px), (min-width: 768px) and (max-width: 1099px) and (pointer: fine), (min-width: 768px) and (max-width: 1099px) and (pointer: none) {
  :root { --col-left: 360px; --fs-h1: 40px; --fs-pill: 15px; }
}
.arcade-scroll { container: arcade / inline-size; }
.arcade-content { position: relative; transition: opacity .45s var(--ease-glide); }
.arcade.is-sheet .arcade-content { opacity: .4; pointer-events: none; }

/* ------------------------------------------------------------------ 5.1 header */
.header { display: flex; align-items: center; gap: 10px; height: 56px; padding: 10px 10px 10px var(--text-inset); }
.lockup { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); text-decoration: none; border-radius: 8px; }
.lockup__tile { width: 25px; height: 25px; flex: none; display: block; transform-origin: 50% 100%; }
/* the drawn wordmark (BRAND §2.3): x-height 10px; its box is centred on the x-height, so flex centring lines it up with the tile */
.wordmark { display: block; width: 74.7px; height: 19.2px; fill: currentColor; flex: none; overflow: visible; }
.chip-relaunch { display: none; margin-left: 4px; min-width: 92px; }
@media (min-width: 1280px) { .chip-relaunch { display: inline-flex; } }
.hpills { margin-left: auto; display: flex; gap: 6px; }
.hpill { background: var(--fill); box-shadow: var(--inner-rim), var(--inner-edge); }
.hpill:hover { background: var(--fill-hover); }
.hpill[aria-pressed="true"] { background: transparent; box-shadow: none; color: var(--accent-ink); }
.hpill--m { display: none; }
.mark__c { transform-box: fill-box; transform-origin: 50% 50%; }

/* ------------------------------------------------------------------ 5.2 info */
.info { display: flex; flex-direction: column; gap: 22px; padding: var(--text-inset); min-height: 440px; outline: none; }
.info__top { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: start; }
.lineup-tile {
  width: 148px; height: 148px; border-radius: 12px; padding: 12px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: var(--accent-fill); color: var(--accent-ink); box-shadow: var(--shadow-pill);
}
.lineup-tile .chip { align-self: flex-start; }
.lineup-tile__list { display: flex; flex-direction: column; }
.lt-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font: 400 11px/16px var(--font-mono); font-stretch: 100%; font-variant-numeric: tabular-nums;
  padding: 3px 0 2px; border-top: 1px solid rgba(13, 13, 13, .2);
}
.lt-row dd { font-weight: 500; }
.motion-toggle {
  justify-self: start; border: 0; background: none; padding: 2px 0; margin-top: -1px;
  font: 400 14px/20px var(--sans); color: var(--ink); border-radius: 6px;
}
.mt { text-decoration: none; transition: opacity .2s; opacity: .72; }
html[data-motion="on"] .mt--on, html[data-motion="off"] .mt--off { text-decoration: underline 1px; text-underline-offset: 3px; opacity: 1; }
.clock-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.clock { font: 400 15px/18px var(--font-mono); font-stretch: 112.5%; font-variant-numeric: tabular-nums; letter-spacing: .01em; cursor: default; }
.clock__face { display: inline-flex; }
.info__stack { margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.intro { font: 400 var(--fs-intro)/28px var(--sans); letter-spacing: -.012em; max-width: 40ch; color: var(--ink); }
.sig-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sig-pill {
  position: relative; isolation: isolate; overflow: hidden; height: 52px; padding: 0 14px 0 36px;
  display: inline-flex; align-items: center; gap: 10px; border: 0; border-radius: var(--radius-pill);
  background: var(--accent-fill); color: var(--accent-ink); font: 500 18px/20px var(--sans);
  box-shadow: var(--shadow-pill); touch-action: manipulation; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; transition: box-shadow .4s var(--ease-glide), background-color .2s;
}
.sig-pill:hover { background: var(--accent-bright); box-shadow: var(--lav-glow); }
.sig-pill__power {
  position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--accent-press) 72%, var(--accent-deep));
  clip-path: inset(0 calc(100% - var(--p, 0) * 100%) 0 0 round 999px);
}
.sig-pill__ball {
  position: absolute; left: 14px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 35%, #f1eeff 60%, #d9d2f5 100%);
  box-shadow: 0 1px 2px rgba(13, 13, 13, .28);
}
.sig-pill__ico { width: 20px; height: 20px; }

/* ------------------------------------------------------------------ 5.5 join + forms */
.join { padding: var(--text-inset); display: flex; flex-direction: column; gap: 18px; }
.join__view { display: flex; flex-direction: column; gap: 18px; }
.join__view--done { gap: 12px; }
.join__head { display: flex; flex-direction: column; gap: 6px; }
.join__title { font: 500 var(--fs-h2)/1.08 var(--sans); font-stretch: 96%; letter-spacing: -.02em; outline: none; }
.join__lede { font: 400 16px/24px var(--sans); }
.join-form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > label, .field > legend { font: 400 12px/16px var(--sans); color: var(--ink); padding: 0; }
.field > legend { margin-bottom: 6px; float: left; width: 100%; }
.chipset__row { clear: both; display: flex; flex-wrap: wrap; gap: 6px; }
.chipset__line { font: 400 12px/16px var(--sans); color: var(--ink); margin-top: 2px; }
.input {
  width: 100%; height: 48px; padding: 0 14px; border: 0; border-radius: var(--radius-row);
  background: var(--fill); box-shadow: var(--inner-rim), inset 0 0 0 1px rgba(13, 13, 13, .09);
  font: 400 16px/20px var(--sans); color: var(--ink); appearance: none; -webkit-appearance: none;
  transition: background-color .2s, box-shadow .2s;
}
.input::placeholder { color: var(--ink-3); opacity: 1; }
.input:hover { background: var(--fill-hover); }
.input:focus { background: #fff; }
.input[aria-invalid="true"] { box-shadow: var(--inner-rim), inset 0 0 0 1.5px var(--ink); }
.select-wrap { position: relative; }
.select-wrap::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); pointer-events: none;
}
select.input { padding-right: 40px; cursor: pointer; }
.note-inline { font: 400 13px/19px var(--sans); color: var(--ink-3); background: var(--fill); border-radius: var(--radius-inner); padding: 8px 12px; }
.chip-radio { position: relative; display: inline-flex; cursor: pointer; }
.chip-radio input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip-radio .chip { height: 32px; padding: 0 12px; background: var(--fill); transition: background .2s, color .2s; }
.chip-radio:hover .chip { background: var(--fill-hover); }
.chip-radio input:checked + .chip { background: var(--ink); color: var(--canvas); border: 1px solid var(--ink); }
.chip-radio input:focus-visible + .chip { outline: 2px solid var(--focus); outline-offset: 2px; }
.check { display: flex; gap: 10px; align-items: flex-start; font: 400 14px/20px var(--sans); cursor: pointer; position: relative; }
.check input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; }
.check__box {
  width: 22px; height: 22px; flex: none; border-radius: 7px; background: var(--fill);
  box-shadow: var(--inner-rim), inset 0 0 0 1.5px rgba(13, 13, 13, .35); display: grid; place-items: center;
  transition: background .2s;
}
.check__box svg { width: 16px; height: 16px; fill: none; stroke: var(--canvas); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.check input:checked + .check__box { background: var(--ink); box-shadow: none; }
.check input:checked + .check__box svg { opacity: 1; }
.check input:focus-visible + .check__box { outline: 2px solid var(--focus); outline-offset: 2px; }
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.consent { font: 400 12px/18px var(--sans); color: var(--ink); }
.consent a { text-underline-offset: 2px; }
.err {
  align-self: flex-start; height: auto; min-height: 24px; padding: 4px 10px; white-space: normal; line-height: 1.35;
  border: 1px solid var(--ink); background: var(--plate); text-align: left;
  text-transform: none; font-family: var(--sans); font-size: 13px; font-stretch: 100%; letter-spacing: 0;
}
.submit { position: relative; }
.submit__ico { position: relative; width: 20px; height: 20px; display: grid; place-items: center; }
.submit__ico > * { grid-area: 1 / 1; }
.loader-ball { width: 12px; height: 12px; border-radius: 50%; background: var(--accent-deep); opacity: 0; }
.ico-done { opacity: 0; }
.ico-done path { stroke-width: 2; }
.is-sending .ico-send, .is-done .ico-send { opacity: 0; }
.is-sending .loader-ball { opacity: 1; animation: ball-bounce 1s infinite; }
.is-done .ico-done { opacity: 1; }
@keyframes ball-bounce {
  0% { transform: translateY(-3px); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  38% { transform: translateY(3px) scale(1.1, .88); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
  100% { transform: translateY(-3px); }
}
.share { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 14px; border-radius: var(--radius-row); background: var(--fill); box-shadow: var(--inner-rim); }
.share__title { font: 500 16px/22px var(--sans); }

/* ------------------------------------------------------------------ 5.3 marquee */
.marquee { height: 64px; display: flex; align-items: center; }
.marquee__viewport {
  width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; border-radius: inherit;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  touch-action: pan-y; cursor: grab;
}
.marquee__viewport:active { cursor: grabbing; }
.marquee__track { display: flex; width: max-content; }
.marquee__set { display: flex; align-items: center; gap: 16px; padding-right: 16px; flex: none; }
.mq-item { display: inline-flex; align-items: center; gap: 8px; font: 400 17px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; }
.mq-item .glyph { width: 22px; height: 22px; }
.mq-ball { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); flex: none; }
.marquee__pause {
  position: absolute; right: 12px; top: 50%; translate: 0 -50%; height: 28px; background: var(--panel);
  box-shadow: -20px 0 14px -6px var(--panel), var(--inner-rim);
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease-glide);
}
.marquee:hover .marquee__pause, .marquee:focus-within .marquee__pause { opacity: 1; pointer-events: auto; }
html[data-motion="off"] .marquee__viewport, .marquee.is-static .marquee__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: auto; }
html[data-motion="off"] .marquee__viewport::-webkit-scrollbar { display: none; }
html[data-motion="off"] .mq-item, html[data-motion="off"] .marquee .chip { scroll-snap-align: start; }
html[data-motion="off"] .marquee__pause { display: none; }

/* ------------------------------------------------------------------ 5.4 lobby board */
.lobby-board { padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.lb__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; row-gap: 6px; flex-wrap: wrap; padding: 6px 8px 0 6px; }
.label-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 8px; border-radius: var(--radius-pill);
  background: var(--fill); box-shadow: var(--inner-rim), var(--inner-edge); font: 400 15px/1 var(--sans); white-space: nowrap;
}
.label-pill .glyph { width: 20px; height: 20px; }
.lb__note, .lb__foot { margin: 0 6px; }
.lb__foot { margin-bottom: 6px; }
.lb__rows { display: flex; flex-direction: column; gap: 6px; }
.lb-row {
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 10px; border-radius: var(--radius-row); background: var(--fill); box-shadow: var(--inner-rim);
}
.lb-thumb { position: relative; width: 64px; height: 64px; border-radius: 12px; background: var(--stage); display: grid; place-items: center; overflow: hidden; color: var(--ink); }
.lb-thumb .glyph { width: 28px; height: 28px; }
.lb-ball {
  position: absolute; left: 50%; top: 8px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 35% 30%, #c79bff 0 18%, #8400ff 60%, #5b00b3 100%);
}
.lb-text { display: flex; flex-direction: column; min-width: 0; }
.lb-title { font: 500 16px/22px var(--sans); }
.lb-title .money { font-size: 14px; }
.lb-desc { font: 400 14px/20px var(--sans); color: var(--muted); }
.lb-rule { position: absolute; left: 10px; right: 10px; bottom: -4px; height: 1px; background: var(--line); transform: scaleX(0); transform-origin: left; }
.seat { min-width: 92px; }
.seat--solid { background: var(--ink); color: var(--canvas); border: 1px solid var(--ink); }
.seat .ico-chk { width: 13px; height: 13px; stroke-width: 2; }
/* marching border on open seats (an SVG stroke-dashoffset loop, injected by app.js) */
.march { border-color: transparent; position: relative; }
.march__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.march__svg rect { fill: none; stroke: var(--dash); stroke-width: 1; stroke-dasharray: 4 3; width: calc(100% - 1px); height: calc(100% - 1px); animation: march 1.2s linear infinite; }
@keyframes march { to { stroke-dashoffset: -7; } }

/* ------------------------------------------------------------------ 5.6 footer */
.footer { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.footer__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 4px; }
.email-pill {
  height: 38px; padding: 0 10px 0 14px; display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--accent); border-radius: var(--radius-pill); background: rgba(255, 255, 255, .28);
  font: 400 15px/1 var(--sans); color: var(--ink); box-shadow: 0 0 0 3px rgba(180, 160, 255, .18);
  transition: box-shadow .35s var(--ease-glide), background-color .2s;
}
.email-pill:hover { box-shadow: var(--lav-glow); background: var(--fill); }
.email-pill .ico { width: 18px; height: 18px; }
.socials { display: flex; gap: 6px; }
.social { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.social .ico { width: 16px; height: 16px; }
.footer__legal p { margin-bottom: 8px; }
.footer__links { display: flex; flex-wrap: wrap; gap: 6px; color: var(--ink); }
.footer__links a { color: var(--ink); text-underline-offset: 2px; }

/* ------------------------------------------------------------------ 4.0 arcade bar */
.arcade-bar {
  position: absolute; top: 0; left: 0; right: 0; height: var(--bar-h); z-index: 3;
  display: flex; align-items: center; gap: 10px; padding: 0 12px 0 14px;
}
.label-pill--mark { flex: none; padding-left: 7px; }
.secnav {
  position: relative; flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}
.secnav::-webkit-scrollbar { display: none; }
.secnav__track { display: flex; gap: 6px; padding: 4px 24px; width: max-content; margin-left: auto; }
.secchip { height: 28px; background: var(--fill); transition: background-color .25s, color .25s; }
.secchip:hover { background: var(--fill-hover); }
.secchip.is-active { background: var(--ink); color: var(--canvas); border: 1px solid var(--ink); }

/* ------------------------------------------------------------------ sections */
.sec { position: relative; padding-top: 76px; }
.sec.hero { padding-top: 22px; }
.sec__rule { position: absolute; left: 0; right: 0; top: 38px; height: 1px; background: var(--line); transform-origin: left; }
.sec__head {
  position: sticky; top: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 -12px 14px; padding: 10px 12px; border-radius: var(--radius-row);
  transition: background-color .25s var(--ease-glide), box-shadow .25s var(--ease-glide);
}
/* the plate lands at once (no fade-in while rows pass under it) and fades out only after the head is back in flow */
.sec__head.is-stuck { background: #FCFCFE; box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(13, 13, 13, .05), 0 10px 22px -16px rgba(13, 13, 13, .4); transition-duration: 0s; }
.sec__head h2 { font: 500 var(--fs-h2)/30px var(--sans); font-stretch: 96%; letter-spacing: -.02em; transform-origin: 0 50%; transition: transform .5s var(--ease-glide); }
.sec__head.is-stuck h2 { transform: scale(.8); }
.sec__sub { font: 400 17px/26px var(--sans); max-width: 60ch; margin: -4px 0 20px; }

/* ------------------------------------------------------------------ 4.1 hero */
.hero__grid { display: grid; gap: 20px; }
.hero__copy { display: grid; gap: 14px; }
.hero__side { display: grid; gap: 16px; align-content: end; }
@container arcade (min-width: 860px) {
  /* the reel leads: full width at 21:9, the copy under it in two columns (H1 left, sub + pills right) */
  /* both columns start on one line under the reel: bottom-aligned, the taller right column (sub + two rows of pills)
     started ~73px above the H1 and left a dead gap over the headline (final review) */
  .hero__copy { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; gap: 28px; }
  .hero__copy .hero__side { align-content: start; padding-top: 4px; }
  .hero .hero-reel { aspect-ratio: 21 / 9; }
}
.h1 {
  font-family: var(--sans); font-weight: 600; font-stretch: 90%; letter-spacing: -.03em;
  font-size: clamp(34px, 5.3cqi, 52px); line-height: 1.02; margin: 0; text-wrap: balance;
}
.h1__l2 { color: var(--accent-deep); }
.hero__sub { font: 400 18px/26px var(--sans); letter-spacing: -.01em; max-width: 40ch; }
.hero__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.hero__reel-col { display: flex; flex-direction: column; gap: 10px; }
.hero-reel {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-tile); overflow: hidden;
  background: var(--stage); box-shadow: var(--tile-shadow); isolation: isolate; container: reel / inline-size;
}
@container reel (max-width: 460px) { .hero-reel .reel__status { top: auto; bottom: 10px; } }
.hero-reel__stack { position: absolute; inset: 0; }
.reel-canvas { position: absolute; inset: 0; width: 100%; height: 100%; transform: translateX(-200%); }
.reel-canvas.is-on, .reel-canvas.is-next { transform: none; }
.reel-canvas.is-on { z-index: 2; }
.reel-canvas.is-next { z-index: 1; }
.reel__demo { position: absolute; top: 10px; left: 10px; z-index: 3; }
.reel__status { position: absolute; top: 10px; right: 10px; z-index: 3; }
/* the split-flap board: a plate on the reel's bottom-left; its 14 cells ship in the HTML (no layout shift) */
.flap-board {
  position: absolute; z-index: 3; left: 10px; bottom: 10px; min-height: 44px; align-items: center;
  display: flex; gap: 3px; padding: 6px; border-radius: 12px;
  background: var(--plate); box-shadow: var(--inner-rim), 0 6px 16px -10px rgba(13, 13, 13, .35);
}
.flap {
  position: relative; flex: none; width: 23px; aspect-ratio: .72; border-radius: 4px; perspective: 140px;
  font: 500 16px/1 var(--font-mono); font-stretch: 87.5%; color: var(--ink);
  box-shadow: 0 1px 1px rgba(13, 13, 13, .08), 0 2px 5px -2px rgba(13, 13, 13, .18);
}
.flap__half {
  position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; background: #fff;
  display: flex; justify-content: center; backface-visibility: hidden;
}
.flap__half b { display: block; font-weight: 500; height: 200%; display: flex; align-items: center; }
.flap__half--top { top: 0; border-radius: 4px 4px 0 0; align-items: flex-start; box-shadow: inset 0 -1px 0 rgba(13, 13, 13, .12); transform-origin: 50% 100%; }
.flap__half--top b { margin-top: 0; }
.flap__half--bot { bottom: 0; border-radius: 0 0 4px 4px; align-items: flex-end; background: #f7f6fc; transform-origin: 50% 0; }
.flap__half--bot b { margin-top: -100%; }
.flap__half--ft, .flap__half--fb { z-index: 2; visibility: hidden; }
.flap[data-blank] .flap__half { background: rgba(255, 255, 255, .55); }
/* two plain readouts (no boxes, no chips) and the eligibility line */
.hero__base { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 28px; margin-top: 22px; }
.facts { display: flex; gap: 28px; margin: 0; }
.fact { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fact__n { font: 500 28px/1 var(--font-mono); font-stretch: 112.5%; font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.fact dd { font: 400 10.5px/1.35 var(--font-mono); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .02em; color: var(--ink-3); white-space: normal; }
.hero__base .strip { flex: 1 1 260px; }
/* two columns: the Info card beside the hero already carries the eligibility line, so the hero drops its copy (final
   review: six disclaimers in the first view). Phones keep it: there the hero sits far below the Info card (BRAND §10.1 rule 13). */
@media (min-width: 768px) and (min-height: 561px), (min-width: 768px) and (pointer: fine), (min-width: 768px) and (pointer: none) { .hero__elig { display: none; } }

/* odometers: every cell is exactly one line box tall, so digits sit on the same baseline as the text around them */
.odo, .odo-money, .clock__face, .ring__time { font-variant-numeric: tabular-nums; }
.odo__col, .odo__sep { display: inline-block; vertical-align: top; height: 1.2em; height: 1lh; line-height: inherit; }
.odo__col { overflow: hidden; }
.odo__reel { display: flex; flex-direction: column; }
.odo__reel > span { display: block; height: 1.2em; height: 1lh; text-align: center; }
.odo { display: inline-block; white-space: nowrap; }

/* ------------------------------------------------------------------ 4.2 games grid */
.games__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: -2px 0 14px; }
.strip--inline { font-size: 14px; line-height: 20px; color: var(--muted); padding: 7px 12px; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.fpill { background: var(--fill); box-shadow: var(--inner-rim), var(--inner-edge); }
.fpill:hover { background: var(--fill-hover); }
.fpill[aria-pressed="true"] { background: transparent; box-shadow: none; color: var(--accent-ink); }
.grid {
  --cols: 2;
  --row: calc((100cqi - (var(--cols) - 1) * var(--gutter)) / var(--cols) * .75);
  display: grid; gap: var(--gutter);
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: repeat(7, var(--row)) auto;
  grid-template-areas: "eb eb" "eb eb" "logo spot" "thr thr" "causeway cup" "causeway up" "topple topple" "mf mf";
}
@container arcade (min-width: 860px) {
  .grid {
    --cols: 3; grid-template-rows: repeat(5, var(--row)) auto;
    grid-template-areas: "eb eb logo" "eb eb spot" "causeway topple topple" "causeway thr thr" "cup up up" "mf mf mf";
  }
}
.grid.is-filtered { grid-template-areas: none; grid-template-rows: none; grid-auto-rows: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.is-filtered .tile { grid-area: auto; aspect-ratio: 4 / 3; }
.grid { position: relative; }
.grid .tile.is-out { position: absolute !important; left: 0; top: 0; visibility: hidden; pointer-events: none; grid-area: auto; aspect-ratio: auto; }
.grid .tile.is-out .tile-canvas { transform: translateX(-200%); }
.grid__empty { margin-top: 10px; }
.tile { position: relative; grid-area: var(--area); min-width: 0; min-height: 0; }
.tile[data-tile-host] { cursor: pointer; }
.tile__inner {
  position: absolute; inset: 0; border-radius: var(--radius-tile); overflow: hidden; background: var(--stage);
  box-shadow: var(--tile-shadow); isolation: isolate; transform-origin: 50% 50%;
}
.tile__media { position: absolute; inset: 0; transform-origin: 50% 50%; }
.tile-canvas { display: block; width: 100%; height: 100%; }
.tile__fmt { position: absolute; z-index: 3; top: 12px; left: 12px; }
.tile__status { position: absolute; z-index: 3; top: 12px; right: 12px; }
.tile__plate {
  position: absolute; z-index: 3; left: 12px; bottom: 12px; max-width: min(72%, 420px); padding: 10px 12px 11px;
  border-radius: 12px; background: var(--plate); box-shadow: var(--inner-rim), 0 6px 16px -10px rgba(13, 13, 13, .35);
}
.tile__title { font: 500 22px/26px var(--sans); letter-spacing: -.015em; }
.tile__line { font: 400 14px/20px var(--sans); color: var(--muted); margin-top: 2px; }
.tile[data-span="1x1"] .tile__line, .tile[data-span="1x2"] .tile__line {
  max-height: 0; opacity: 0; clip-path: inset(0 100% 0 0); margin-top: 0;
  transition: max-height .28s var(--ease-glide), opacity .2s, clip-path .28s var(--ease-glide), margin .28s var(--ease-glide);
}
.tile[data-span="1x1"].is-hot .tile__line, .tile[data-span="1x1"]:focus-within .tile__line,
.tile[data-span="1x2"].is-hot .tile__line, .tile[data-span="1x2"]:focus-within .tile__line {
  max-height: 100px; opacity: 1; clip-path: inset(0 0 0 0); margin-top: 2px;
}
.tile__cta { position: absolute; z-index: 3; right: 12px; bottom: 12px; }
.tile[data-span="1x1"] .tile__cta, .tile[data-span="1x2"] .tile__cta { width: 36px; padding: 0; justify-content: center; }
.tile[data-span="1x1"] .tile__cta > span, .tile[data-span="1x2"] .tile__cta > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tile[data-span="1x1"] .tile__plate, .tile[data-span="1x2"] .tile__plate { max-width: calc(100% - 72px); }
/* hover stack: glare, ring glow, recede */
.tile__glare {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .42) 50%, transparent 62%);
  transform: translateX(-120%);
}
.tile.is-hot .tile__glare { transform: translateX(120%); transition: transform .65s var(--ease-glide); }
.tile__inner::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; padding: 1px; opacity: 0;
  background: conic-gradient(from calc(var(--a) - 40deg), transparent 0deg, rgba(255, 255, 255, .95) 40deg, transparent 80deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: opacity .3s, --a .25s linear;
}
.tile.is-hot .tile__inner::before { opacity: 1; }
.tile .tile__inner::after {
  content: ""; position: absolute; inset: 0; z-index: 4; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 1px 0 rgba(255, 255, 255, .8);
}
/* the other tiles recede by their art only: plates, chips and Details keep full ink (a11y review: 4.1:1 under a whole-tile dim) */
.tile__media, .tile__glare { transition: opacity .25s var(--ease-glide), filter .25s var(--ease-glide); }
.grid:has(.tile.is-hot) .tile[data-tile-host]:not(.is-hot) :is(.tile__media, .tile__glare) { opacity: .55; filter: saturate(.6); }
/* logo tile: the Electric field (counts as one fill) */
.tile--logo .tile__inner { background: var(--accent-deep); box-shadow: 0 1px 2px rgba(13, 13, 13, .16), 0 8px 18px -10px rgba(60, 0, 140, .45), 0 18px 36px -18px rgba(60, 0, 140, .5); display: grid; place-items: center; }
.tile--logo .tile__inner { container-type: inline-size; }
/* the lockup, white on Electric: the light tile + the white wordmark (BRAND §2.3), ~220px wide at full size */
.logo-lockup { display: flex; align-items: center; gap: min(12.5px, 4.3cqw); color: #fff; }
.logo-lockup__tile { width: min(52px, 17.9cqw); height: min(52px, 17.9cqw); flex: none; overflow: visible; }
.logo-lockup__word { width: min(155.6px, 53.6cqw); height: auto; aspect-ratio: 747 / 192; fill: currentColor; flex: none; overflow: visible; }
/* manifesto */
.tile--mf { padding: 4px 0 0; }
.tile--mf .tile__inner { position: relative; inset: auto; background: var(--fill); box-shadow: var(--inner-rim); padding: 22px 24px 26px; overflow: visible; }
.tile--mf .tile__inner::after { display: none; }
.manifesto { font: 500 22px/30px var(--sans); letter-spacing: -.015em; max-width: 52ch; }
.manifesto__rule { display: block; width: min(52ch, 100%); height: 1px; margin-top: 14px; background: var(--ink); transform-origin: left; }

/* ------------------------------------------------------------------ cards */
.card { position: relative; border-radius: var(--radius-tile); background: var(--fill); box-shadow: var(--inner-rim); padding: 20px; }
.card__title { font: 500 22px/26px var(--sans); letter-spacing: -.015em; }
.card__body { font: 400 16px/24px var(--sans); }

/* ------------------------------------------------------------------ 4.3 formats */
.formats__grid { display: grid; gap: var(--gutter); }
@container arcade (min-width: 860px) { .formats__grid { grid-template-columns: 1fr 1fr; } }
.fmt { display: flex; flex-direction: column; gap: 14px; }
.fmt__media { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--stage); box-shadow: var(--tile-shadow); }
.fmt__ex { position: absolute; z-index: 2; top: 10px; right: 10px; }
.lane { position: absolute; z-index: 2; left: 10px; }
.lane--you { top: 10px; }
.lane--them { top: calc(60% + 10px); }
.shotclock {
  position: relative; aspect-ratio: 16 / 9; border-radius: 14px; background: var(--stage); box-shadow: var(--tile-shadow);
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; align-items: center; gap: 8px 18px; padding: 16px 18px 14px; overflow: hidden;
}
.shotclock .fmt__ex { top: 10px; right: 10px; }
.ring { position: relative; width: 140px; height: 140px; grid-row: 1 / span 2; }
.ring__svg { width: 140px; height: 140px; overflow: visible; }
.ring__track { fill: none; stroke: rgba(13, 13, 13, .08); stroke-width: 2; }
.ring__arc, .ring__dash { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.ring__dash { stroke-dasharray: .012 .012; opacity: 0; }
.ring.is-late .ring__arc { opacity: 0; }
.ring.is-late .ring__dash { opacity: 1; }
.ring__ball {
  position: absolute; left: 0; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.ring__time { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; white-space: nowrap; font: 500 21px/24px var(--font-mono); font-stretch: 100%; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.clockchips { display: flex; gap: 6px; align-self: end; }
.turns { position: relative; display: flex; align-items: center; justify-content: space-between; align-self: start; padding-top: 6px; max-width: 240px; }
.turn { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.turn__ball { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff 0 20%, #e9e6f5 55%, #c8c3da 100%); box-shadow: 0 2px 4px rgba(13, 13, 13, .18); }
.turn--them .turn__ball { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(13, 13, 13, .5); border: 0; outline: 1.5px dashed rgba(13, 13, 13, .45); outline-offset: -1.5px; }
.turn__traveler {
  position: absolute; left: 6px; top: 10px; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c79bff 0 18%, #8400ff 60%, #5b00b3 100%); box-shadow: 0 2px 3px rgba(60, 0, 140, .35);
}

/* ------------------------------------------------------------------ rails (lobby, fair-play flow, timeline) */
.rail, .flow, .timeline { position: relative; }
.rail__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rail__base { fill: none; stroke: var(--line); stroke-width: 1.5; }
.rail__path { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 1 1; stroke-dashoffset: 0; stroke-linecap: round; }
.rail__next { fill: none; stroke: var(--dash); stroke-width: 1.5; stroke-dasharray: 4 5; }
.rail__ball { position: absolute; left: 0; top: 0; z-index: 3; width: 8px; height: 8px; margin: -4px 0 0 -4px; pointer-events: none; }
.rail__ball > i { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.rail__ball--cue { width: 10px; height: 10px; margin: -5px 0 0 -5px; }
.rail__ball--cue > i { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink), 0 1px 2px rgba(0, 0, 0, .25); }
.rnode__dot { display: block; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); position: relative; z-index: 2; }
.rnode__dot--open { box-shadow: none; outline: 1.5px dashed var(--ink); outline-offset: -1.5px; }
.rnode__dot--mark { width: 18px; height: 18px; box-shadow: none; background: none; }
.rnode__dot--mark .mark { width: 16px; height: 16px; margin: 1px; }
.rail__nodes { display: grid; gap: 14px; padding-left: 26px; }
.rnode { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--radius-row); background: var(--fill); box-shadow: var(--inner-rim); }
.rnode .rnode__dot { position: absolute; left: -26px; top: 18px; }
.rnode__title { font: 500 17px/22px var(--sans); }
.rnode__body { font: 400 14px/20px var(--sans); color: var(--muted); }
@container arcade (min-width: 860px) {
  .rail__nodes { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 26px 0 0; gap: 10px; }
  .rnode .rnode__dot { left: 14px; top: -26px; }
}
.mini { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(13, 13, 13, .06); font: 400 12px/16px var(--font-mono); font-stretch: 100%; }
.mini__t { font: 400 13px/18px var(--sans); }
.mini .chip { align-self: flex-start; }
.rline { display: flex; justify-content: space-between; gap: 6px; font: 400 10px/16px var(--font-mono); font-stretch: 87.5%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rline .money { font-size: inherit; font-stretch: 87.5%; }
.rline--total { align-items: center; font-weight: 500; }
.ledger__rule { display: block; height: 1px; background: var(--ink); transform-origin: left; }
.mini--play { flex-direction: row; align-items: center; flex-wrap: wrap; position: relative; gap: 10px; min-height: 64px; }
.pb { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff 0 20%, #e9e6f5 55%, #c8c3da 100%); box-shadow: 0 2px 3px rgba(13, 13, 13, .2); }
.pb--b { box-shadow: none; background: transparent; outline: 1.5px dashed rgba(13, 13, 13, .45); outline-offset: -1.5px; }
.pb-traveler { position: absolute; left: 14px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c79bff 0 18%, #8400ff 60%, #5b00b3 100%); }
.mini--play .chip { margin-left: auto; }

/* fair-play flow */
.flow { margin: 4px 0 18px; }
.flow__nodes { display: grid; gap: 12px; padding-left: 26px; }
.fnode { position: relative; display: flex; align-items: center; min-height: 34px; }
.fnode .rnode__dot { position: absolute; left: -26px; top: 50%; margin-top: -6px; }
.fnode .chip { min-height: 30px; padding: 0 12px; background: var(--fill); }
@container arcade (min-width: 860px) {
  .flow__nodes { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 26px 0 0; gap: 10px; }
  .fnode { align-items: flex-start; }
  .fnode .rnode__dot { left: 14px; top: -26px; margin-top: 0; }
}
.physview { margin-bottom: 18px; display: flex; flex-direction: column; gap: 10px; }
.physview__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; border-radius: var(--radius-row); background: var(--fill); box-shadow: var(--inner-rim); transition: background-color .25s; }
.row:hover { background: var(--fill-hover); }
.row__n { width: 64px; height: 64px; border-radius: 12px; background: var(--stage); display: grid; place-items: center; font: 500 18px/1 var(--font-mono); font-stretch: 112.5%; }
.row__t { display: flex; flex-direction: column; gap: 2px; }
.row__t b { font: 500 16px/22px var(--sans); }
.row__t span { font: 400 14px/20px var(--sans); color: var(--muted); }
.integrity { margin-bottom: 14px; display: flex; flex-direction: column; gap: 12px; }
.integrity__h { font: 500 17px/22px var(--sans); }
.integrity__list { display: grid; gap: 0; }
.integrity__list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 2px; border-top: 1px solid var(--line); }
.integrity__list li:first-child { border-top: 0; }
.int__name { display: inline-flex; align-items: center; gap: 10px; font: 400 15px/20px var(--sans); }
.int__name .glyph { width: 20px; height: 20px; }
.neverus { display: grid; gap: 16px; }
@container arcade (min-width: 860px) { .neverus { grid-template-columns: 1fr 1fr; align-items: center; } }
.neverus__media { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--stage); box-shadow: var(--tile-shadow); }
.neverus__copy { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

/* ------------------------------------------------------------------ 4.5 prize calculator */
.calc { padding: 24px; display: flex; flex-direction: column; gap: 20px; container-type: inline-size; }
.calc__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.echip { height: 32px; padding: 0 12px; }
.id-suffix { opacity: .62; margin-left: -1px; }
.calc__rail { padding: 6px 0 4px; }
.rail2 { position: relative; height: 96px; touch-action: pan-y; outline: none; border-radius: 12px; }
.rail2:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.rail2__line { position: absolute; left: 26px; right: 26px; top: 44px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--ink) 0 60%, transparent 60%); }
.rail2__line--id { left: auto; background: none; border-top: 2px dashed var(--ink); height: 0; border-radius: 0; }
.rail2__idchip { position: absolute; top: 0; right: 26px; }
.rail2__ticks { position: absolute; left: 26px; right: 26px; top: 38px; height: 14px; }
.rail2__tick { position: absolute; top: 0; width: 2px; height: 14px; margin-left: -1px; background: var(--ink); border-radius: 1px; }
.rail2__labels { position: absolute; left: 26px; right: 26px; top: 58px; height: 18px; pointer-events: none; }
.rail2__lab { position: absolute; top: 0; translate: -50% 0; font: 400 11px/18px var(--font-mono); font-stretch: 87.5%; white-space: nowrap; font-variant-numeric: tabular-nums; }
@container arcade (max-width: 600px) { .rail2 > .rail2__labels .rail2__lab:nth-child(even) { visibility: hidden; } }
/* the puck: an Inner Clear loupe with real mass. Inside it, the scale reads x1.5 */
.puck {
  position: absolute; left: 26px; top: calc(45px - 26px); width: 52px; height: 52px; margin-left: -26px; border-radius: 50%; z-index: 2; cursor: grab;
  background: #FAFAFD;
  box-shadow: inset 0 0 0 1px rgba(13, 13, 13, .14), 0 1px 2px rgba(0, 0, 0, .1), 0 10px 24px -10px rgba(60, 0, 140, .45);
  touch-action: none; transform-origin: 50% 50%;
}
.puck:active { cursor: grabbing; }
.puck__mag { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: #FAFAFD; }
.puck__lip {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 34%), radial-gradient(100% 100% at 50% 50%, rgba(255, 255, 255, 0) 60%, rgba(180, 160, 255, .28) 86%, rgba(255, 255, 255, .7) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85), inset 0 -8px 14px -8px rgba(60, 0, 140, .22);
}
.receipt { display: flex; flex-direction: column; font: 400 13px/22px var(--font-mono); font-stretch: 100%; font-variant-numeric: tabular-nums; }
/* one line per row at every entry: label and figure never wrap, the leader dots give way, and in the calculator the
   receipt's size follows the card (a $10K row is 28 mono characters) */
.rc { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.rc__l { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rc__dots { flex: 1; border-bottom: 1px dotted rgba(13, 13, 13, .35); transform: translateY(-4px); min-width: 8px; }
.rc__v { flex: none; text-align: right; white-space: nowrap; }
.calc .receipt { font-size: clamp(10.5px, 4.3cqi, 13px); }
.rc--total { font-weight: 500; }
.bigfig { position: relative; display: flex; flex-wrap: wrap; row-gap: 4px; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 0 10px; }
.bigfig__l { font: 400 16px/20px var(--sans); }
/* one line at every entry, 360 to 1440: the figure scales with the card (clamp), never wraps, and holds the width of
   the widest prize ($18,000.00, 10 tabular cells) whatever it shows, so the label's place never jumps between
   entries: beside the figure when both fit, above it when they don't. The digits never break. */
.bigfig__v {
  font: 500 clamp(24px, 9cqi, 40px)/1 var(--font-mono); font-stretch: 112.5%; font-variant-numeric: tabular-nums;
  letter-spacing: -.03em; white-space: nowrap; flex: none; min-width: 10ch; margin-left: auto; text-align: right;
}
.bigfig__v .odo__vis { display: inline-flex; white-space: nowrap; }
.bigfig__rule { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform-origin: left; }
/* both notes share one grid cell, so swapping them never moves the CTA and never leaves a hole */
.calc__notes { display: grid; }
.calc__notes > * { grid-area: 1 / 1; align-self: start; }
.calc__note--base { font: 400 13px/20px var(--sans); color: var(--ink-3); background: var(--fill); border-radius: 12px; padding: 8px 12px; box-shadow: var(--inner-rim); justify-self: start; }
.calc__note { white-space: normal; height: auto; padding: 8px 12px; line-height: 1.45; border-radius: 12px; text-align: left; justify-content: flex-start; font-size: 11px; }
.calc__cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.calc__line { font: 400 16px/22px var(--sans); }
.calc__btn { height: 48px; min-width: 176px; }
.odo-money { display: inline-flex; justify-content: flex-end; }

/* ------------------------------------------------------------------ 4.7 money */
.money__rows { display: flex; flex-direction: column; gap: 6px; }
.money-row {
  display: grid; grid-template-columns: minmax(110px, 180px) minmax(0, 1fr); gap: 16px; padding: 14px 16px;
  border-radius: var(--radius-row); background: var(--fill); box-shadow: var(--inner-rim); transition: background-color .25s;
}
.money-row:hover { background: var(--fill-hover); }
.money-row dt { font: 500 16px/22px var(--sans); }
.money-row dd { font: 400 15px/22px var(--sans); color: var(--ink); }

/* ------------------------------------------------------------------ 4.8 since 2019 */
.timeline { padding: 10px 0 6px; }
.tl__nodes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 30px; }
.tnode { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.tnode .rnode__dot { position: absolute; left: 0; top: -30px; }
.tnode .rnode__dot--mark { top: -33px; left: -3px; }
.tnode__y { font: 500 22px/1 var(--font-mono); font-stretch: 112.5%; letter-spacing: -.02em; }
.tnode--next .tnode__y { color: var(--muted); }

/* ------------------------------------------------------------------ 4.9 lab */
.lab__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
@container arcade (min-width: 860px) {
  .lab__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lab__grid .lab-tile { aspect-ratio: auto; min-height: 236px; padding: 12px; }
  .lab__grid .lab-tile .glyph--lab { width: 44px; height: 44px; }
  .lab__grid .lab-tile__stage { min-height: 92px; }
  .lab__grid .vote { font-size: 13.5px; padding: 6px 6px 6px 10px; gap: 6px; }
  .lab__grid .vote .ico { width: 18px; height: 18px; }
}
.lab-tile {
  --mx: 50%; --my: 50%;
  position: relative; aspect-ratio: 1; min-height: 240px; padding: 16px; border-radius: var(--radius-tile); overflow: hidden;
  display: grid; grid-template-rows: 1fr auto 44px auto; justify-items: start; align-items: start; gap: 6px; background: var(--fill); box-shadow: var(--inner-rim);
  isolation: isolate;
}
/* the stage: the game tiles' lit ground in miniature, a solid glyph standing on it with a contact shadow, and the
   status chip in the corner (final review: dashed glyphs on a dot grid read as wireframe placeholders) */
.lab-tile__stage {
  position: relative; align-self: stretch; justify-self: stretch; display: grid; place-items: center; min-height: 104px;
  border-radius: 12px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 50% 18%, #fff 0, rgba(255, 255, 255, 0) 62%), linear-gradient(180deg, var(--stage) 0 70%, #E4DFF4 100%);
  box-shadow: inset 0 0 0 1px rgba(13, 13, 13, .05), inset 0 -10px 18px -14px rgba(60, 0, 140, .18);
}
.lab-tile__shadow { position: absolute; left: 50%; top: calc(50% + 22px); width: 56px; height: 10px; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(13, 13, 13, .22), rgba(13, 13, 13, 0)); z-index: 0; }
.lab-tile .lab-tile__tag { position: absolute; top: 8px; left: 8px; z-index: 1; white-space: nowrap; height: 20px; }
.lab-tile__dots {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease-glide), --reveal .9s var(--ease-glide);
  background: radial-gradient(circle, rgba(132, 0, 255, .42) 1.1px, transparent 1.7px) 0 0 / 8px 8px;
  -webkit-mask: radial-gradient(circle at var(--mx) var(--my), #000 var(--reveal), transparent calc(var(--reveal) + 60px));
  mask: radial-gradient(circle at var(--mx) var(--my), #000 var(--reveal), transparent calc(var(--reveal) + 60px));
 }
.lab-tile.is-hot .lab-tile__dots, .lab-tile:focus-within .lab-tile__dots { --reveal: 160%; opacity: 1; }
.lab-tile .glyph--lab { position: relative; z-index: 1; width: 48px; height: 48px; stroke-width: 1.6; color: var(--ink); filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .9)); }
.lab-tile__name { font: 500 18px/22px var(--sans); letter-spacing: -.01em; }
.lab-tile .chips { gap: 4px; align-self: start; align-content: flex-start; }
.lab-tile .chip { min-height: 20px; padding: 0 8px; font-size: 10px; }
.lab-tile__line {
  position: absolute; left: 12px; right: 12px; top: 12px; z-index: 2; padding: 10px 12px; border-radius: 12px;
  background: var(--plate); box-shadow: var(--inner-rim); font: 400 14px/20px var(--sans); color: var(--muted);
  opacity: 0; translate: 0 -6px; transition: opacity .28s var(--ease-glide), translate .28s var(--ease-glide); pointer-events: none;
}
.lab-tile.is-hot .lab-tile__line, .lab-tile:focus-within .lab-tile__line { opacity: 1; translate: 0 0; }
.vote { height: 34px; font-size: 15px; }
.vote[aria-pressed="true"], .vote[aria-pressed="true"]:hover { background: var(--accent-fill); color: var(--accent-ink); box-shadow: var(--shadow-pill); }

/* ------------------------------------------------------------------ 4.10 FAQ */
.faq__list { display: flex; flex-direction: column; gap: 6px; }
.faq-row { border-radius: var(--radius-row); background: var(--fill); box-shadow: var(--inner-rim); overflow: hidden; transition: background-color .25s; }
.faq-row:hover { background: var(--fill-hover); }
.faq-row h3 { font: inherit; }
.faq-q:focus-visible { outline-offset: -4px; }
.faq-q {
  width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px 12px 16px; border: 0; background: none; text-align: left; font: 500 16px/22px var(--sans); color: var(--ink); border-radius: var(--radius-row);
}
.faq-a { padding: 0 16px 16px; }
.faq-a p { font: 400 15px/23px var(--sans); color: var(--ink); max-width: 64ch; }

/* ------------------------------------------------------------------ 4.11 close */
.close { padding-bottom: 8px; }
.close__card { padding: 28px; border-radius: var(--radius-panel); display: flex; flex-direction: column; gap: 16px; }
.close__h { font: 600 40px/40px var(--sans); font-stretch: 90%; letter-spacing: -.03em; color: var(--ink); }
.close__body { font: 400 18px/26px var(--sans); }
.promises { display: grid; gap: 6px; }
.promises li { display: flex; gap: 14px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); font: 400 16px/22px var(--sans); }
.promise__n { font: 500 13px/22px var(--font-mono); font-stretch: 112.5%; }
.close__cta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.close__btn { height: 52px; font-size: 18px; padding: 0 14px 0 22px; }

/* ------------------------------------------------------------------ 4.2 detail sheet (Inner surface) */
.sheet {
  position: absolute; z-index: 6; top: calc(var(--bar-h) + 6px); left: 16px; right: 16px; bottom: 16px;
  border-radius: var(--radius-tile); background: #FFFFFF;
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(13, 13, 13, .06), 0 24px 60px -24px rgba(13, 13, 13, .5);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; outline: none; display: block;
}
.sheet::-webkit-scrollbar { display: none; }
.sheet__media { position: relative; display: block; aspect-ratio: 16 / 9; max-height: 52%; margin: 12px auto 0; width: calc(100% - 24px); border-radius: 14px; overflow: hidden; background: var(--stage); }
.sheet__media .tile__media { position: absolute; inset: 0; }
.sheet__body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.sheet__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sheet__title { font: 500 32px/34px var(--sans); font-stretch: 96%; letter-spacing: -.02em; outline: none; }
.sheet__sec h3 { font: 400 12px/16px var(--font-mono); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .02em; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.sheet__sec p { font: 400 16px/24px var(--sans); max-width: 62ch; }
.receipt--static { padding: 10px 12px; border-radius: 12px; background: var(--fill); box-shadow: var(--inner-rim); }
.sheet__cta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-top: 4px; }

/* ------------------------------------------------------------------ 2.7 floating card + dock */
.float-card {
  position: fixed; z-index: 20; right: 24px; bottom: 24px; width: 380px; padding: 18px; color: var(--ink);
  display: flex; flex-direction: column; gap: 10px; overflow: hidden; --sheen: -120%;
}
.fc__sheen { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; transform: translateX(var(--sheen)); background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); }
.fc__beam {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--beam), transparent 0 290deg, rgba(255, 255, 255, .9) 340deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: beam 8s linear infinite; animation-play-state: paused; opacity: 0;
}
.float-card.is-beam .fc__beam { animation-play-state: running; opacity: 1; }
@keyframes beam { to { --beam: 360deg; } }
.float-card > :not(.glass-ov):not(.fc__sheen):not(.fc__beam) { position: relative; z-index: 1; }
.fc__top { display: flex; align-items: center; justify-content: space-between; }
.fc__close { width: 32px; height: 32px; margin: -6px -6px 0 0; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; color: var(--ink); }
.fc__close:hover { background: var(--fill); }
.fc__close .ico { width: 22px; height: 22px; }
.fc__title { font: 500 18px/24px var(--sans); letter-spacing: -.01em; }
.fc__body { font: 400 15px/22px var(--sans); margin-top: -4px; }
.fc__form { display: flex; flex-direction: column; gap: 10px; }
.fc__email { position: relative; }
.fc__email .input { height: 48px; border-radius: var(--radius-pill); padding: 0 104px 0 18px; }
.fc__next { position: absolute; right: 4px; top: 4px; height: 40px; padding: 0 10px 0 16px; background: var(--ink); color: #fff; box-shadow: 0 1px 2px rgba(13, 13, 13, .2); }
.fc__next:hover { background: #26262B; box-shadow: 0 1px 2px rgba(13, 13, 13, .2); }
.float-card .submit { background: var(--ink); color: #fff; }
.float-card .submit:hover { background: #26262B; box-shadow: none; }
.fc__step2 { display: flex; flex-direction: column; gap: 10px; }
.fc__step2 .select-wrap .input { border-radius: var(--radius-pill); padding-left: 18px; }
.fc__fine { font-size: 12px; }
.fc__done { font: 500 16px/22px var(--sans); display: flex; align-items: center; gap: 6px; }
.dock-pill {
  position: fixed; z-index: 20; right: 24px; bottom: 24px; height: 48px; padding: 0 12px 0 18px; border: 0; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 10px; font: 500 16px/20px var(--sans); color: var(--ink); background: transparent;
}

/* ------------------------------------------------------------------ overlays */
.lens {
  position: fixed; z-index: 30; left: 0; top: 0; width: 120px; height: 120px; border-radius: 50%; pointer-events: none;
  display: grid; place-items: center; transform: translate3d(-200px, -200px, 0) scale(0); will-change: transform;
  font: 500 12px/1 var(--font-mono); font-stretch: 87.5%; text-transform: uppercase; letter-spacing: .02em; color: var(--ink);
}
.lens .label { display: inline-flex; align-items: center; white-space: nowrap; padding: 5px 9px 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .8); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.lens .label::after { display: none; }
.release-ball {
  position: fixed; z-index: 40; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 34% 30%, #fff 0 35%, #f1eeff 60%, #d9d2f5 100%); box-shadow: 0 1px 2px rgba(13, 13, 13, .3);
}
.release-ball.is-brand { background: radial-gradient(circle at 34% 30%, #d6b8ff 0 14%, #8400ff 58%, #4f009c 100%); box-shadow: 0 2px 6px rgba(60, 0, 140, .45); }
.thumb { position: fixed; z-index: 5; width: 6px; height: 40px; pointer-events: none; display: none; opacity: 0; transition: opacity .4s var(--ease-glide); }
.thumb.is-on { opacity: 1; transition-duration: .15s; }
.thumb::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -.5px; background: rgba(13, 13, 13, .22); }
.thumb__ball { position: absolute; left: 0; top: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); transform-origin: 50% 50%; }
@media (min-width: 768px) and (min-height: 561px), (min-width: 768px) and (pointer: fine), (min-width: 768px) and (pointer: none) { .thumb { display: block; } }
.toast {
  position: fixed; z-index: 50; left: 50%; bottom: 28px; translate: -50% 16px; opacity: 0; pointer-events: none;
  height: 40px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: var(--ink); font: 400 14px/1 var(--sans);
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(13, 13, 13, .08), 0 10px 30px -12px rgba(13, 13, 13, .45);
  transition: opacity .3s var(--ease-glide), translate .45s var(--ease-pop);
}
.toast.is-on { opacity: 1; translate: -50% 0; }

/* ------------------------------------------------------------------ tablet tweaks */
@media (min-width: 768px) and (max-width: 1099px) and (min-height: 561px), (min-width: 768px) and (max-width: 1099px) and (pointer: fine), (min-width: 768px) and (max-width: 1099px) and (pointer: none) {
  .lineup-tile { width: 112px; height: 112px; padding: 10px; }
  .lt-row--server { display: none; }
  .info__top { grid-template-columns: auto 1fr; }
  .clock-wrap { grid-column: 2; grid-row: 1; justify-self: end; }
  .motion-toggle { grid-column: 2; grid-row: 1; align-self: end; }
  .intro { font-size: 18px; line-height: 26px; }
  .sig-pill { font-size: 17px; }
  .float-card { width: 340px; }
  .hpill { font-size: 15px; }
}

/* ------------------------------------------------------------------ mobile (<= 767px): one document scroll */
@media (max-width: 767px), (max-height: 560px) and (pointer: coarse) {
  html { scroll-padding-top: 72px; }
  .shell { position: static; display: flex; flex-direction: column; gap: 8px; padding: 12px; padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: 96px; }
  .col-left, .col-right { display: contents; }
  .header { order: 1; position: sticky; top: 8px; z-index: 6; height: 52px; padding: 8px 8px 8px 16px; }
  .info { order: 2; min-height: 0; gap: 18px; padding: 16px; }
  .marquee { order: 3; height: 56px; }
  .arcade { order: 4; }
  .join { order: 5; padding: 16px; }
  .join[hidden] { display: flex !important; }
  .lobby-board { order: 6; }
  .footer { order: 7; }
  .hpill--m { display: inline-flex; }
  .hpill { height: 36px; padding: 6px 6px 6px 11px; font-size: 15px; gap: 6px; }
  .hpills { gap: 4px; }
  .lockup { gap: 5px; }
  .info__top { grid-template-columns: auto 1fr; gap: 12px; }
  .lineup-tile { width: 96px; height: 96px; padding: 9px; justify-content: space-between; }
  .lineup-tile__list { flex-direction: column-reverse; }
  .lt-row { display: none; }
  .lt-row--games { display: flex; flex-direction: column-reverse; align-items: flex-start; border: 0; padding: 0; gap: 2px; }
  .lt-row--games dt { font-size: 10.5px; line-height: 1; }
  .lt-row--games dd { font: 500 30px/30px var(--font-mono); font-stretch: 112.5%; }
  .clock-wrap { grid-column: 2; grid-row: 1; justify-self: end; }
  .motion-toggle { grid-column: 2; grid-row: 1; align-self: end; justify-self: end; min-height: 44px; display: inline-flex; align-items: flex-end; }
  .intro { font-size: var(--fs-intro); line-height: 25px; }
  .sig-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .sig-row .chip { align-self: flex-start; }
  .sig-pill { width: 100%; height: 56px; justify-content: center; }
  .arcade-bar {
    position: sticky; top: 68px; height: 52px; margin: 6px 6px 0; padding: 0 6px 0 6px; border-radius: 16px;
    background: rgba(252, 252, 254, .97); box-shadow: var(--inner-rim), 0 8px 20px -14px rgba(13, 13, 13, .4);
  }
  .arcade-scroll { position: static; overflow: visible; padding: 0 14px 16px; -webkit-mask-image: none; mask-image: none; }
  .sec__head { position: relative; top: auto; margin: 0 0 14px; padding: 0; }
  .sec__head.is-stuck { background: none; box-shadow: none; }
  .sec { padding-top: 64px; }
  .sec__rule { top: 32px; }
  .h1 { font-size: 34px; line-height: 36px; margin: 16px 0 14px; }
  .hero__sub { font-size: 17px; line-height: 25px; }
  .flap { font-size: 12px; }
  .facts { margin-top: 18px; }
  .fact__n { font-size: 24px; }
  /* games: a horizontal snap rail */
  .games__bar { flex-direction: column; align-items: flex-start; }
  .grid, .grid.is-filtered {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 -14px; padding: 4px 14px 10px; scroll-padding: 0 14px; grid-template-areas: none;
  }
  .grid::-webkit-scrollbar { display: none; }
  .grid .tile, .grid.is-filtered .tile { flex: 0 0 82vw; aspect-ratio: 4 / 5; scroll-snap-align: start; grid-area: auto; }
  .grid .tile--logo, .grid .tile--mf { display: none; }
  .tile[data-span] .tile__line { max-height: none; opacity: 1; clip-path: none; margin-top: 2px; }
  .tile[data-span] .tile__cta { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .tile[data-span] .tile__cta > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tile[data-span] .tile__plate { max-width: calc(100% - 80px); }
  .shotclock { aspect-ratio: auto; grid-template-columns: 1fr; justify-items: center; padding: 40px 14px 16px; }
  .ring { grid-row: auto; }
  .turns { width: 100%; }
  .money-row { grid-template-columns: 1fr; gap: 4px; }
  .tl__nodes { gap: 6px; }
  .tnode .chip { white-space: normal; height: auto; padding: 4px 8px; line-height: 1.3; border-radius: 9px; }
  .lab-tile { aspect-ratio: auto; min-height: 220px; }
  .lab-tile .chip { white-space: normal; height: auto; padding: 3px 7px; line-height: 1.3; }
  .vote { height: 44px; font-size: 13.5px; padding: 6px 6px 6px 10px; gap: 6px; max-width: 100%; }
  .vote__l { white-space: nowrap; }
  .vote .ico { width: 18px; height: 18px; }
  .close__card { padding: 20px; }
  .close__h { font-size: 34px; line-height: 36px; }
  .calc { padding: 16px; }
  .calc__btn { width: 100%; }
  .rail2__lab { font-size: 9.5px; }
  .rail2__line, .rail2__ticks, .rail2__labels { left: 18px; right: 18px; }
  .rail2__idchip { right: 18px; }
  .sheet { position: fixed; z-index: 45; inset: 12px; top: max(12px, env(safe-area-inset-top)); }
  .float-card { display: none !important; }
  .dock-pill { left: 0; right: 0; margin: 0 auto; width: max-content; bottom: max(16px, env(safe-area-inset-bottom)); height: 52px; }
  .email-pill { font-size: 14px; }
  .chip-relaunch { display: none !important; }
  .toast { bottom: 84px; }
  .pill, .chip--btn, .faq-q { min-height: 44px; }
  .hpill, .fpill { min-height: 36px; }
  .echip, .cchip { height: 40px; }
  .apill { min-height: 48px; }
}
@media (max-width: 767px), (max-height: 560px) and (pointer: coarse) {
  .chip { white-space: normal; height: auto; min-height: 22px; line-height: 1.35; padding-top: 4px; padding-bottom: 4px; text-align: left; }
  .sec__head { flex-wrap: wrap; row-gap: 8px; }
  .lab-tile .chip, .tile .chip, .hpills .chip { white-space: nowrap; }
}
@media (max-width: 339px) { .wordmark { display: none; } }

/* ------------------------------------------------------------------ motion off + reduced motion */
html[data-motion="off"] .march__svg rect, html[data-motion="off"] .fc__beam { animation-play-state: paused !important; }
html[data-motion="off"] .fc__beam { opacity: 0; }
html[data-motion="off"] .lens { display: none; }
html[data-motion="off"] .tile__glare { display: none; }
html[data-motion="off"] .is-sending .loader-ball { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .march__svg rect, .fc__beam, .is-sending .loader-ball { animation: none !important; }
  .fc__beam, .fc__sheen, .tile__glare, .lens { display: none !important; }
  .ico-toggle .ico-v, .tile__line, .lab-tile__line, .lab-tile__dots, .toast, .skip-link { transition-duration: .01s !important; }
}

/* ------------------------------------------------------------------ less transparency / more contrast */
@media (prefers-reduced-transparency: reduce) {
  .sheet, .arcade-bar, .toast { background: var(--panel); }
  .sec__head.is-stuck { background: var(--panel); }
}
@media (prefers-contrast: more) {
  .strip, .note, .tile__line, .lb-desc, .row__t span { color: var(--ink); }
  .pill--fill, .fpill, .hpill, .chip--btn, .input, .lb-row, .row, .faq-row, .card, .fact, .money-row { box-shadow: inset 0 0 0 1px var(--ink); }
}

/* ================================================================== round 1 integration (2026-10-09) */
/* no JS: the forms would post nowhere, so they stay hidden behind the noscript line */
html:not(.js) .join-form, html:not(.js) .fc__form { display: none; }

/* the hint shows on hover or focus on desktop; it stays the pill's description for screen readers */
@media (min-width: 768px) and (hover: hover) {
  .sig-hint { opacity: 0; translate: -6px 0; pointer-events: none; transition: opacity .25s var(--ease-glide), translate .35s var(--ease-glide); }
  .sig-row:hover .sig-hint, .sig-pill:focus-visible + .sig-hint { opacity: 1; translate: 0 0; }
}

/* the Arcade bar shows the active chip plus about four; the rest fade under the 24px mask */
@media (min-width: 768px) and (min-height: 561px), (min-width: 768px) and (pointer: fine), (min-width: 768px) and (pointer: none) { .secnav { flex: 0 1 auto; max-width: 400px; margin-left: auto; } }
/* wide desktops have the room: all nine chips show, no fade (final review: at 1440 four sat hidden beside ~400px of empty bar) */
@media (min-width: 1280px) and (min-height: 561px), (min-width: 1280px) and (pointer: fine), (min-width: 1280px) and (pointer: none) { .secnav { max-width: 680px; } }
/* the Lineup tile: its LINEUP chip top-left and the 32px mark tile top-right fill the block above the list (brand review,
   round 2; a mark tile of 32px or less is the logo, not an Electric fill) */
.lineup-tile { justify-content: space-between; }
.lineup-tile__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.lineup-tile__top .chip { align-self: flex-start; }
.lineup-tile__mark { width: 32px; height: 32px; flex: none; display: block; }

/* a filtered tile keeps the full anatomy (line + Details label), like the 2x1 tiles */
.grid.is-filtered .tile .tile__line { max-height: none; opacity: 1; clip-path: none; margin-top: 2px; }
.grid.is-filtered .tile .tile__cta { width: auto; padding: 6px 8px 6px 12px; }
.grid.is-filtered .tile .tile__cta > span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
.grid.is-filtered .tile .tile__plate { max-width: min(72%, 420px); }

/* small tiles drop the extras instead of colliding (tablet, iPad portrait) */
.tile[data-tile-host] { container: tile / size; }
/* short rows keep every honesty status chip; a 1x1 tile drops its format chip and its line instead (copy review, round 2).
   The 2x1 one-liner stays: with the 17px title the plate fits in about 100px */
@container tile (max-height: 230px) {
  .tile[data-span="1x1"] .tile__line { display: none; }
  .tile__title { font-size: 17px; line-height: 22px; }
  .tile__status, .tile__fmt { font-size: 9.5px; padding: 3px 8px; min-height: 0; }
  .tile[data-span="1x1"] .tile__fmt { display: none; }
  .tile__plate { padding: 8px 10px 9px; }
  .tile__line { font-size: 13px; line-height: 18px; }
}
@media (min-width: 768px) and (min-height: 561px), (min-width: 768px) and (pointer: fine), (min-width: 768px) and (pointer: none) {
  @container arcade (max-width: 559px) {
    .grid, .grid.is-filtered {
      display: flex; overflow-x: auto; scroll-snap-type: x mandatory; grid-template-areas: none; gap: 10px;
      margin: 0 -20px; padding: 4px 20px 10px; scroll-padding: 0 20px; scrollbar-width: none;
    }
    .grid::-webkit-scrollbar { display: none; }
    .grid .tile, .grid.is-filtered .tile { flex: 0 0 78%; aspect-ratio: 4 / 5; grid-area: auto; scroll-snap-align: start; }
    .grid .tile--logo, .grid .tile--mf { display: none; }
    .sec__head { flex-wrap: wrap; }
    .sec__head h2 { font-size: 22px; line-height: 26px; }
    /* rail tiles: the Details pill turns into the round button, so it never sits on the plate */
    .tile[data-span] .tile__cta { width: 36px; padding: 0; justify-content: center; }
    .tile[data-span] .tile__cta > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .tile[data-span] .tile__plate { max-width: calc(100% - 72px); }
    /* the shot-clock card stacks, as on phones (its two columns overflowed a narrow Arcade) */
    .shotclock { aspect-ratio: auto; grid-template-columns: 1fr; justify-items: center; padding: 40px 14px 16px; }
    .ring { grid-row: auto; }
    .turns { width: 100%; }
  }
}
.formats__grid > * { min-width: 0; }
/* a narrow Arcade: lab tiles stop forcing a 240px square (aspect-ratio + min-height overflowed the column) */
@container arcade (max-width: 559px) { .lab-tile { aspect-ratio: auto; min-height: 220px; } .lab-tile .chip { white-space: normal; height: auto; padding: 3px 7px; line-height: 1.3; } }
/* a reel narrower than 460px keeps its two chips and drops the flap board */
@container reel (max-width: 460px) { .hero-reel .flap-board { display: none; } }

/* the marquee's Pause: reachable on touch (no hover there) */
@media (hover: none) {
  .marquee__pause { opacity: 1; pointer-events: auto; height: 36px; }
  .marquee__pause::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; translate: 0 -50%; }
}
/* ...and the scrolling names fade out before they reach it (final review: the glyphs ran into the chip on phones) */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .marquee:not(.is-static) .marquee__viewport {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 118px), transparent calc(100% - 92px));
    mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 118px), transparent calc(100% - 92px));
  }
}
/* touch has no hover, so "HOLD OR TAP" would sit under the Join pill as a stray chip: it stays the pill's
   screen-reader description (aria-describedby) and leaves the screen */
@media (hover: none), (pointer: coarse) {
  .sig-hint { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* touch targets: 44px hit areas without changing the look (BRIEF 2.5, 9.1) */
@media (pointer: coarse) {
  .secchip, .chip-radio, .email-pill, .social, .fc__close, .motion-toggle, .footer__links a, .lockup, .echip, .cchip, .fpill { position: relative; }
  .secchip::after, .chip-radio::after, .email-pill::after, .social::after, .fc__close::after, .motion-toggle::after,
  .lockup::after, .echip::after, .cchip::after, .fpill::after {
    content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 44px; translate: 0 -50%;
  }
  .footer__links { gap: 12px 14px; }
  .footer__links a::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 36px; translate: 0 -50%; }
  .check { min-height: 44px; align-items: center; }
}

@media (max-width: 767px), (max-height: 560px) and (pointer: coarse) {
  /* the sticky Arcade bar paints over the section heads, never under them */
  .arcade-bar { z-index: 6; top: 62px; }
  .sec__head { z-index: auto; }
  /* 38px pills sit centred in the 52px bar (7px above and below); touch keeps its 44px pad through .hpill::after */
  .hpill { height: 38px; min-height: 38px; }
  /* the Info card leads with a live game loop: the hero reel moves here (app.js) */
  .info .hero__reel-col { order: -1; margin: -4px -4px 0; }
  .info .hero-reel { aspect-ratio: 16 / 9; border-radius: 14px; }
  .info .hero__reel-col + .info__top { margin-top: -4px; }
  .lineup-tile { width: 78px; height: 64px; padding: 8px; }
  .lt-row--games dd { font-size: 24px; line-height: 24px; }
  .lineup-tile .chip { display: none; }
  .info__stack .intro { order: 1; }
  .info__stack .sig-row { order: 2; }
  .info__stack .info__chips { order: 3; }
  .info__stack .strip { order: 4; }
  /* the open sheet holds the page still */
  html.sheet-open, html.sheet-open body { overflow: hidden; }
  .sheet { overscroll-behavior: contain; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; cursor: auto; }
  .marquee__viewport::-webkit-scrollbar { display: none; }
  .mq-item, .marquee .chip { scroll-snap-align: start; }
  .marquee__pause { display: none; }
}

/* "Something broke on our side." (copy deck 6.2): a persistent strip with a Reload pill */
.broke {
  position: fixed; z-index: 55; left: 50%; bottom: 28px; translate: -50% 0; display: flex; align-items: center; gap: 12px;
  padding: 6px 6px 6px 16px; border-radius: 999px; background: #fff; color: var(--ink); font: 400 14px/1 var(--sans);
  box-shadow: inset 0 0 0 1px rgba(13, 13, 13, .08), 0 10px 30px -12px rgba(13, 13, 13, .45);
}
@media (max-width: 767px), (max-height: 560px) and (pointer: coarse) { .broke { bottom: 84px; width: max-content; max-width: calc(100% - 24px); } }

/* ================================================================== round 2 integration (2026-10-09) */
/* display fallbacks: the H1 family is set at wdth 90, so its fallback is pre-narrowed (Arial cannot condense); the wide
   mono readouts (wdth 112.5) get their own fallback. Both keep the font swap from moving the page (CLS). */
@font-face {
  font-family: "Instrument Sans Display Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 88.5%; ascent-override: 101%; descent-override: 26%; line-gap-override: 0%;
}
@font-face { font-family: "Martian Mono Wide Fallback"; src: local("Menlo"), local("Courier New"); size-adjust: 125%; }
@font-face { font-family: "Martian Mono Mid Fallback"; src: local("Menlo"), local("Courier New"); size-adjust: 116%; }
.h1, .close__h, .sheet__title, .join__title { font-family: "Instrument Sans", "Instrument Sans Display Fallback", "Helvetica Neue", Arial, sans-serif; }
.clock, .fact__n, .bigfig__v, .tnode__y, .ring__time, .row__n { font-family: "Martian Mono", "Martian Mono Wide Fallback", ui-monospace, Menlo, monospace; }
.receipt, .money { font-family: "Martian Mono", "Martian Mono Mid Fallback", ui-monospace, Menlo, monospace; }

/* no JS: sticky heads have no plate to set, so they scroll with their section; dead CTAs stand down; canvases get a ground */
html:not(.js) .sec__head { position: relative; }
html:not(.js) .sig-row .sig-pill, html:not(.js) .close__cta .apill { display: none; }
html:not(.js) .tile__media, html:not(.js) .hero-reel__stack, html:not(.js) .fmt__media, html:not(.js) .neverus__media {
  background: radial-gradient(120% 90% at 30% 20%, #fff, var(--stage));
}

/* games: the demo label is the head's corner chip (BRIEF §4.2, §6.11), so it rides the pinned head over the whole
   grid at every size (non-negotiable 8). DOM order = visual order: H2, chip, then the bar (sub, filters). */
.games__bar { flex-wrap: wrap; }
.games .sec__head { flex-wrap: wrap; row-gap: 8px; }
.games .sec__head .games__demo { background: var(--plate); white-space: nowrap; flex: none; }

/* chips stay one-line pills; the long notes are mono captions without a border (brand review, round 2) */
.close__note { font: 400 12px/1.4 var(--font-mono); font-stretch: 87.5%; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-3); margin: 0; }

/* the close card: a crisp media slot with the two brand balls meeting (the join mood, in focus) */
.close__top { display: grid; gap: 16px; }
.close__intro { display: flex; flex-direction: column; gap: 16px; }
.close__media { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--stage); box-shadow: var(--tile-shadow); width: 100%; }
/* the close's replay end card (brand page §6): composed still by default (Motion off, reduced motion, no JS);
   motion.js plays the ball strike, the win flash and the Grip landing when it scrolls in. Proportions in % of a 16:9 stage. */
.close__end {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 62%),
    radial-gradient(circle, rgba(13, 13, 13, .07) 1px, transparent 1.4px) 0 0 / 14px 14px,
    var(--stage);
}
.close__floor { position: absolute; left: 0; right: 0; top: 84%; bottom: 0; background: linear-gradient(180deg, rgba(13, 13, 13, .07), rgba(13, 13, 13, .02)); box-shadow: inset 0 1px 0 rgba(13, 13, 13, .1); }
.close__mark { position: absolute; left: 33%; top: 23.6%; width: 34%; height: auto; aspect-ratio: 1; transform-origin: 50% 100%; overflow: visible; }
.close__mark .mark__pad { transform-box: fill-box; transform-origin: 50% 100%; }
.close__ball {
  position: absolute; left: 73%; top: 71.6%; width: 7%; aspect-ratio: 1; border-radius: 50%; transform-origin: 50% 100%;
  background: radial-gradient(circle at 35% 30%, #c79bff 0 18%, #8400ff 60%, #5b00b3 100%); box-shadow: inset -2px -3px 6px rgba(40, 0, 90, .35);
}
.close__shadow { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(13, 13, 13, .26), rgba(13, 13, 13, 0)); }
.close__shadow--mark { left: 31%; top: 81%; width: 38%; height: 6%; }
.close__shadow--ball { left: 72%; top: 82.4%; width: 9%; height: 3.6%; }
.close__flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(34% 46% at 76.5% 78%, rgba(132, 0, 255, .5), rgba(180, 160, 255, .22) 48%, rgba(255, 255, 255, 0) 78%); }
@container arcade (min-width: 640px) {
  .close__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; }
  .close__media { max-width: 420px; justify-self: end; }
}

/* the detail sheet: a close control in view at every height */
.sheet__x { position: absolute; z-index: 3; top: 12px; right: 12px; width: 40px; height: 40px; padding: 0; justify-content: center; }
.sheet__x .ico { width: 22px; height: 22px; }
.sheet__sec h3 .chip { font-size: 10.5px; }

/* the calculator puck prints the value it holds; the scale label under it steps aside */
.rail2 > .rail2__labels .rail2__lab { transition: opacity .15s; }
.rail2 > .rail2__labels .rail2__lab.is-under { opacity: 0; }
.rail2__copy .rail2__labels { display: none; }
.puck__mag::after {
  content: attr(data-v); position: absolute; left: 50%; bottom: 7px; translate: -50% 0; z-index: 1;
  padding: 1px 4px; border-radius: 4px; background: #FAFAFD; color: var(--ink);
  font: 500 11px/1 var(--font-mono); font-stretch: 87.5%; letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums;
}

/* the footer: the copyright is its own line, so a wrap never strands a separator */
.footer__legal .footer__copy { margin: 8px 0 0; }

/* the Lineup tile at tablet: the mark steps down, the Motion toggle sits on row 1 with the clock */
@media (min-width: 768px) and (max-width: 1099px) and (min-height: 561px), (min-width: 768px) and (max-width: 1099px) and (pointer: fine), (min-width: 768px) and (max-width: 1099px) and (pointer: none) {
  .lineup-tile__mark { width: 24px; height: 24px; }
  .motion-toggle { grid-row: 1; align-self: start; justify-self: start; margin-top: 0; }
  .clock-wrap { align-self: start; }
}

/* reduced motion: the toggle reads off (nothing moves either way) */
@media (prefers-reduced-motion: reduce) {
  html[data-motion] .mt--on { text-decoration: none; opacity: .6; }
  html[data-motion] .mt--off { text-decoration: underline 1px; text-underline-offset: 3px; opacity: 1; }
}

/* narrow two-column Arcade (tablet): money rows stack like on phones */
@container arcade (max-width: 559px) { .money-row { grid-template-columns: 1fr; gap: 4px; } }
/* rail tiles (254px wide at 768): the status chip stacks under the format chip instead of colliding with it */
@container tile (max-width: 270px) { .tile__status { top: 40px; right: auto; left: 12px; } }
/* Uprights in the two-column grid is a 1x1 cell: it takes the 1x1 anatomy (round Details button, narrower plate) */
@container arcade (max-width: 859px) {
  .tile[data-slug="field-goal"] .tile__cta { width: 36px; padding: 0; justify-content: center; }
  .tile[data-slug="field-goal"] .tile__cta > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tile[data-slug="field-goal"] .tile__plate { max-width: calc(100% - 72px); }
}

/* touch: 44px hit areas (BRIEF 2.5, 9.1) */
@media (max-width: 767px), (max-height: 560px) and (pointer: coarse) { .chip.echip, .chip.cchip { height: 40px; } }
@media (pointer: coarse) {
  .secnav__track { padding-top: 10px; padding-bottom: 10px; }
  /* (every .pill is already position: relative, and .tile__cta is absolute: the pads hang off either) */
  .hpill::after, .pill--fill::after, .vote::after, .tile__cta::after {
    content: ""; position: absolute; left: -3px; right: -3px; top: 50%; height: 44px; translate: 0 -50%;
  }
  .footer__links { row-gap: 14px; }
  .footer__links a::after { height: 44px; }
}

/* phones */
@media (max-width: 767px), (max-height: 560px) and (pointer: coarse) {
  /* the sticky dock pill never covers a focused control */
  html { scroll-padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  /* nothing ghosts through the 8px above the sticky header; its frost is a touch thicker */
  .header { --glass-tint: rgba(255, 255, 255, .86); }
  .header::before { content: ""; position: absolute; left: -12px; right: -12px; top: -8px; height: 8px; background: var(--canvas); pointer-events: none; }
  /* the reel's box is reserved before app.js moves it into the Info card (CLS) */
  .js .info:not(:has(.hero__reel-col))::before { content: ""; order: -1; display: block; aspect-ratio: 16 / 9; margin: -4px -4px 0; border-radius: 14px; background: var(--stage); }
  .js .info:not(:has(.hero__reel-col)) > .info__top { margin-top: -4px; }
  .lineup-tile__top { display: none; }
}
/* 400 and down: the full lockup (tile + wordmark) and all three pills fit inside the bar with room to spare, down to
   340px (responsive review, round 2: the pills ran 5px into the bar's padding at 380-389). Below 340 the tile stands
   alone. Pill hit areas stay 44px tall. */
@media (max-width: 400px) {
  .header { gap: 6px; padding: 8px 12px; }
  .lockup { gap: 5px; }
  .lockup__tile { width: 24px; height: 24px; }
  .header .wordmark { width: 64px; height: 16.45px; }
  .hpills { gap: 4px; }
  .hpill { padding: 6px 6px 6px 10px; font-size: 15px; gap: 4px; }
  .hpill .ico { width: 18px; height: 18px; }
}
@media (max-width: 379px) { .header .wordmark { width: 56px; height: 14.4px; } }
/* 374 and down: the Arcade pill goes icon-only (its sr-only label stays), so the pills keep the lockup's clear space */
@media (max-width: 374px) {
  .hpill--m .label { display: none; }
  .hpill--m { padding: 6px; }
}
/* phones: the timeline's Next chip stays a one-line pill (a wrapped dashed pill reads as a broken box) */
@media (max-width: 767px), (max-height: 560px) and (pointer: coarse) { .tnode .chip { white-space: nowrap; height: 22px; font-size: 9.5px; padding: 0 7px; border-radius: var(--radius-pill); letter-spacing: 0; } }

/* landscape phones (844x390, 932x430, coarse pointer) take the phone layout: one document scroll instead of two nested
   scrolling columns in a 300px-tall window (responsive review, round 2). tokens.css only knows the width breakpoint,
   so its phone tokens are repeated here for that case. */
@media (max-height: 560px) and (pointer: coarse) { :root { --margin: 12px; --fs-h2: 24px; --fs-intro: 17px; --fs-pill: 15px; --col-left: 100%; } }

@media (max-height: 560px) and (pointer: coarse) {
  /* a landscape phone: the reel leads the Info card at a height that leaves the copy in view */
  .info .hero-reel { aspect-ratio: auto; height: 58vh; }
  .js .info:not(:has(.hero__reel-col))::before { aspect-ratio: auto; height: 58vh; }
}

/* ================================================================== round 2 review, remaining findings (2026-10-09) */
/* CLS: the hero sub's measure no longer depends on the face (40ch of the fallback is 76px narrower than 40ch of
   Instrument Sans, so the swap re-wrapped it at 1024), and on phones the reel never takes a box in the hero before
   app.js moves it into the Info card (where ::before already holds its 16:9 place) */
.hero__sub { max-width: min(100%, 26.6em); }
@media (max-width: 767px), (max-height: 560px) and (pointer: coarse) { .js .hero .hero__reel-col { display: none; } }

/* the Since 2019 rail in a narrow Arcade (tablet portrait): the three chips fit their thirds instead of the last one
   running off the panel edge */
@container arcade (max-width: 559px) {
  .tnode .chip { font-size: 9.5px; padding: 0 7px; letter-spacing: 0; white-space: nowrap; }
}

/* touch: every control's own hit area is 44px or more, and neighbouring pads never overlap (BRIEF 2.5, 9.1; responsive
   review, round 2). Visual sizes stay; only small chips grow a few px wide. */
@media (pointer: coarse) {
  .chip.cchip, .chip.echip { min-width: 44px; }
  .chip.secchip { height: 32px; min-height: 32px; padding-top: 0; padding-bottom: 0; }
  .secnav__track { padding-top: 6px; padding-bottom: 6px; }
  .filters { gap: 8px; }
  .chipset__row { row-gap: 12px; }
  .calc__chips { gap: 8px; }
  .clockchips { gap: 8px; }
  .lockup { min-width: 44px; }
  .tile .tile__cta { height: 44px; min-width: 44px; }   /* the round Details buttons (width 36) grow to 44; labelled ones keep their width */
  .vote { height: 44px; }
  .hero__pills .pill, .pill--fill { min-height: 44px; }
  .hero__pills { gap: 8px; }
}

/* the waitlist lines (copy review, round 2: "Know first if cash matches open in your state.") break evenly, never on a
   one-word last line */
.fc__title, .join__lede, .promises li > span:last-child { text-wrap: balance; }

/* filtered tiles (two columns, 4:3): the plate always stops short of the Details pill, and a narrow tile takes the
   round button like the rail does (the full-width plate ran under "Details" at 1024-1440) */
.grid.is-filtered .tile .tile__plate { max-width: min(calc(100% - 136px), 420px); }
@container tile (max-width: 360px) {
  .grid.is-filtered .tile .tile__cta { width: 36px; padding: 0; justify-content: center; }
  .grid.is-filtered .tile .tile__cta > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .grid.is-filtered .tile .tile__plate { max-width: calc(100% - 72px); }
}