/* Generated by packages/design/emit.ts from tokens.json. Do not edit; run `bun run tokens`. */
:root {
  --room-ground: #0B110E;
  --room-surface1: #141A16;
  --room-surface2: #1D2320;
  --room-surface3: #29302C;
  --room-line: #383F3B;
  --room-line-strong: #535A56;
  --room-text: #EEEFEB;
  --room-text2: #AEB3AD;
  --room-text3: #7D827C;
  --signal-signal: #FAB72A;
  --signal-signal-hi: #FFD060;
  --signal-live: #6DE18B;
  --signal-bust: #FF645F;
  --signal-sync: #78C7FD;
  --felt-light: #1E7546;
  --felt-dark: #0E492A;
  --daylight-ground: #F8F7F2;
  --daylight-surface: #EFEFE9;
  --daylight-line: #D0D2CB;
  --daylight-text: #111814;
  --daylight-text2: #505753;
  --daylight-signal: #A15C00;
  --daylight-live: #007834;
  --daylight-bust: #CC272E;
  --chip-1: #E7E4DD;
  --chip-5: #E23439;
  --chip-10: #366BD3;
  --chip-25: #03A14A;
  --chip-100: #252A27;
  --chip-500: #8B4EC4;
  --chip-1000: #F3821D;
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --hit-min: 44px;
  --hit-dealer: 56px;
}

/* Type roles. Sizes are the system's; pages scale the display roles with clamp(). */
.t-wordmark { font-family: var(--font-display); font-weight: 700; font-stretch: 125%; letter-spacing: 0.08em; }
.t-clock { font-family: var(--font-display); font-weight: 600; font-stretch: 62%; line-height: 0.85; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.t-display { font-family: var(--font-display); font-weight: 600; font-size: 56px; line-height: 1; letter-spacing: -0.02em; }
.t-title { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; }
.t-heading { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.2; }
.t-body { font-family: var(--font-body); font-weight: 400; font-size: 15px; line-height: 1.5; }
.t-label { font-family: var(--font-body); font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.t-data { font-family: var(--font-mono); font-weight: 400; font-size: 14px; line-height: 1.4; font-variant-numeric: tabular-nums slashed-zero; }

/* Self-hosted from Google Fonts (OFL). Latin subset. Regenerate with the script in the commit that added these. */
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url('/fonts/archivo-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/plex-mono-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/plex-mono-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap; src: url('/fonts/plex-sans-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap; src: url('/fonts/plex-sans-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-stretch: 100%; font-display: swap; src: url('/fonts/plex-sans-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* feltpoker.uk — built on the Felt design system: daylight set for the page, room set for
   every product panel, Archivo for voice and numerals, Plex Sans for reading, Plex Mono for
   anything a regulator might quote. Sharp radii, hairlines, no shadows. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--daylight-ground); color: var(--daylight-text);
  font-family: var(--font-body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
p { margin: 0; }
a { color: var(--daylight-signal); text-underline-offset: 0.15em; }
a:hover { color: var(--daylight-text); }
:focus-visible { outline: 2px solid var(--daylight-signal); outline-offset: 3px; }
.room :focus-visible { outline-color: var(--signal-signal-hi); }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0; letter-spacing: -0.02em; line-height: 1.05; text-wrap: balance; }
h1 { font-size: clamp(40px, 6.5vw, 76px); }
h2 { font-size: clamp(30px, 4.2vw, 46px); }
h3 { font-size: 22px; letter-spacing: -0.01em; line-height: 1.15; }
h4 { font-size: 18px; letter-spacing: 0; line-height: 1.2; }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 24px; }
@media (max-width: 640px) { .wrap { padding-inline: 16px; } }
.eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--daylight-signal); }
.room .eyebrow { color: var(--signal-signal); }
.lede { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: var(--daylight-text2); max-width: 60ch; text-wrap: pretty; }
.room .lede { color: var(--room-text2); }
.muted { color: var(--daylight-text2); }
.room .muted { color: var(--room-text2); }
.small { font-size: 15px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums slashed-zero; }
.label { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--daylight-text2); }
.room .label { color: var(--room-text2); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -48px; background: var(--daylight-text); color: var(--daylight-ground); padding: 10px 14px; border-radius: var(--radius-md); z-index: 20; }
.skip:focus { top: 12px; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--daylight-ground) 94%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--daylight-line); }
.site-header > .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand:hover { color: inherit; }
.mark { width: 36px; height: 24px; flex: none; }
.wordmark { font-family: var(--font-display); font-weight: 700; font-stretch: 125%; letter-spacing: 0.08em; font-size: 18px; line-height: 1; padding-left: 0.08em; display: inline-flex; gap: 0.45em; }
.wordmark .light { font-weight: 400; }
.primary-nav { display: flex; align-items: center; gap: 2px; }
.primary-nav a { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: var(--radius-md); font-size: 14px; font-weight: 500; color: var(--daylight-text2); text-decoration: none; }
.primary-nav a:hover { color: var(--daylight-text); background: var(--daylight-surface); }
.primary-nav a[aria-current="page"] { color: var(--daylight-text); background: var(--daylight-surface); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.nav-toggle { display: none; }
@media (max-width: 900px) {
  .site-header > .wrap { flex-wrap: wrap; height: auto; min-height: 64px; padding-block: 12px; }
  .nav-toggle { display: block; order: 2; }
  .nav-toggle summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--daylight-line); border-radius: var(--radius-md); }
  .nav-toggle summary::-webkit-details-marker { display: none; }
  .nav-toggle[open] summary { background: var(--daylight-surface); }
  .primary-nav { order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch; padding-top: 8px; display: none; }
  .nav-toggle[open] ~ .primary-nav { display: flex; }
  .primary-nav a { height: 44px; font-size: 16px; }
  .header-actions { order: 1; margin-left: auto; }
  .header-actions .btn-secondary { display: none; }
}

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--hit-min); padding: 0 20px; border-radius: var(--radius-md); font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; color: inherit; background: transparent; }
.btn-primary { background: var(--daylight-signal); color: var(--daylight-ground); }
.btn-primary:hover { background: color-mix(in srgb, var(--daylight-signal) 86%, black); color: var(--daylight-ground); }
.btn-secondary { border-color: var(--daylight-text2); color: var(--daylight-text); }
.btn-secondary:hover { background: var(--daylight-surface); color: var(--daylight-text); }
.btn-lg { height: var(--hit-dealer); padding: 0 24px; font-size: 17px; border-radius: var(--radius-lg); }
.room .btn-primary { background: var(--signal-signal); color: var(--room-ground); }
.room .btn-primary:hover { background: var(--signal-signal-hi); color: var(--room-ground); }
.room .btn-secondary { border-color: var(--room-line-strong); color: var(--room-text); }
.room .btn-secondary:hover { background: var(--room-surface3); color: var(--room-text); }

/* ---------- sections and grids ---------- */
.section { padding-block: clamp(56px, 8vw, 112px); }
.section + .section:not(.room) { border-top: 1px solid var(--daylight-line); }
.section-head { display: grid; gap: 16px; max-width: 800px; margin-bottom: clamp(32px, 5vw, 56px); }
.room { background: var(--room-ground); color: var(--room-text); }
.room a { color: var(--signal-signal); }
.room a:hover { color: var(--signal-signal-hi); }
.grid-2, .grid-3, .grid-4 { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.split.reverse > :first-child { order: 2; }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) { .grid-2, .grid-3, .split { grid-template-columns: 1fr; } .split.reverse > :first-child { order: 0; } }
@media (max-width: 520px) { .grid-4 { grid-template-columns: 1fr; } }
.card { border: 1px solid var(--daylight-line); border-radius: var(--radius-lg); padding: 24px; background: var(--daylight-ground); display: grid; gap: 12px; align-content: start; }
.room .card { border-color: var(--room-line); background: var(--room-surface1); }
.card p { color: var(--daylight-text2); font-size: 15px; line-height: 1.5; }
.room .card p { color: var(--room-text2); }
.card .eyebrow { margin-bottom: 4px; }
.prose { display: grid; gap: 16px; max-width: 64ch; }
.prose p { color: var(--daylight-text2); }
.room .prose p { color: var(--room-text2); }
.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.feature-list li { position: relative; padding-left: 26px; color: var(--daylight-text2); font-size: 16px; line-height: 1.5; }
.feature-list li strong { color: var(--daylight-text); font-weight: 600; }
.feature-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 10px; height: 10px; border-radius: 50%; background: var(--daylight-signal); }
.room .feature-list li { color: var(--room-text2); }
.room .feature-list li strong { color: var(--room-text); }
.room .feature-list li::before { background: var(--signal-signal); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--font-mono); font-size: 13px; color: var(--daylight-signal); border: 1px solid var(--daylight-line); border-radius: var(--radius-md); height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.room .steps li::before { color: var(--signal-signal); border-color: var(--room-line); }
.steps h4 { margin-bottom: 4px; }
.steps p { color: var(--daylight-text2); font-size: 15px; }
.room .steps p { color: var(--room-text2); }
.formula { font-family: var(--font-mono); font-size: 14px; line-height: 1.7; background: var(--room-surface1); border: 1px solid var(--room-line); border-radius: var(--radius-lg); padding: 20px 24px; overflow: auto; color: var(--room-text); margin: 0; }
.formula .k { color: var(--signal-signal); }
.formula .c { color: var(--room-text2); }
.rule { border: 0; border-top: 1px solid var(--daylight-line); margin: 0; }
.room .rule { border-color: var(--room-line); }
.caption { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--daylight-text2); margin-top: 14px; }
.room .caption { color: var(--room-text2); }

/* ---------- hero ---------- */
.hero { padding-block: clamp(48px, 7vw, 96px) clamp(32px, 4vw, 56px); }
.hero-copy { display: grid; gap: 24px; max-width: 900px; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.hero-screen { padding-bottom: clamp(48px, 7vw, 96px); }

/* ---------- lockups ---------- */
.lockup { display: flex; align-items: center; gap: 12px; }
.lockup .mark { width: 36px; height: 24px; }
.lockup .wordmark { font-size: 20px; }
.tile { border: 1px solid var(--daylight-line); border-radius: var(--radius-lg); background: var(--room-ground); color: var(--room-text); padding: 20px; min-height: 168px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; text-decoration: none; }
.tile:hover { border-color: var(--room-line-strong); color: var(--room-text); }
.tile p { color: var(--room-text2); font-size: 14px; line-height: 1.45; }

/* ---------- pricing ---------- */
.plan { display: grid; gap: 16px; align-content: start; }
.plan .price { font-family: var(--font-display); font-weight: 600; font-size: 34px; letter-spacing: -0.02em; line-height: 1; }
.plan .price small { font-family: var(--font-body); font-weight: 400; font-size: 15px; color: var(--daylight-text2); letter-spacing: 0; }
.plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; color: var(--daylight-text2); }
.plan ul li { padding-left: 22px; position: relative; }
.plan ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--daylight-signal); }
.plan ul li.no { color: var(--daylight-text2); }
.plan ul li.no::before { background: transparent; border: 1px solid var(--daylight-line); }
.plan.featured { border-color: var(--daylight-signal); }

/* ---------- forms ---------- */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--daylight-text2); }
.room .field label { color: var(--room-text2); }
.field input, .field select { height: var(--hit-min); padding: 0 14px; border: 1px solid var(--daylight-line); border-radius: var(--radius-md); background: var(--daylight-ground); color: var(--daylight-text); font-family: var(--font-body); font-size: 16px; width: 100%; }
.room .field input, .room .field select { border-color: var(--room-line); background: var(--room-surface2); color: var(--room-text); }
.field input:focus, .field select:focus { outline: 2px solid var(--daylight-signal); outline-offset: 0; border-color: transparent; }
.room .field input:focus, .room .field select:focus { outline-color: var(--signal-signal-hi); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 13px; color: var(--daylight-text2); line-height: 1.5; }
.room .form-note { color: var(--room-text2); }
.form-status { min-height: 24px; font-size: 15px; font-weight: 500; }
.form-status.ok { color: var(--daylight-live); }
.form-status.err { color: var(--daylight-bust); }
.room .form-status.ok { color: var(--signal-live); }
.room .form-status.err { color: var(--signal-bust); }
.waitlist-band .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (max-width: 800px) { .waitlist-band .wrap { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--daylight-line); padding-block: 48px 40px; font-size: 14px; color: var(--daylight-text2); }
.site-footer .wrap { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 800px) { .site-footer .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site-footer h4 { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--daylight-text2); font-family: var(--font-body); font-weight: 500; margin-bottom: 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--daylight-text); text-decoration: none; }
.site-footer a:hover { color: var(--daylight-signal); }
.site-footer .legal { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--daylight-line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; }

/* ---------- room components (the product, drawn with the system's own parts) ---------- */
.rm { font-family: var(--font-body); color: var(--room-text); }
.rm-panel { background: var(--room-surface1); border: 1px solid var(--room-line); border-radius: var(--radius-lg); overflow: hidden; }
.rm-label { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--room-text2); }
.rm-label.signal { color: var(--signal-signal); }
.rm-clock { font-family: var(--font-display); font-weight: 600; font-stretch: 62%; line-height: 0.9; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.rm-num { font-family: var(--font-display); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1; }
.rm-progress { height: 4px; background: var(--room-surface3); }
.rm-progress > span { display: block; height: 100%; width: calc(var(--progress, 0.27) * 100%); background: var(--signal-signal); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.chip-live { background: var(--signal-live); color: var(--room-ground); }
.chip-paused { background: var(--room-surface3); color: var(--room-text); }
.chip-break { background: var(--signal-signal); color: var(--room-ground); }
.chip-bust { background: var(--signal-bust); color: var(--room-ground); }
.chip-offline { border: 1px solid var(--signal-signal); color: var(--signal-signal); }
.chip-pending { border: 1px solid var(--signal-sync); color: var(--signal-sync); }
.chip-quiet { border: 1px solid var(--room-line); color: var(--room-text2); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal-live); display: inline-block; }
.rm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: var(--radius-md); font-family: var(--font-display); font-weight: 600; font-size: 15px; border: 1px solid transparent; background: transparent; color: var(--room-text); }
.rm-btn.primary { background: var(--signal-signal); color: var(--room-ground); }
.rm-btn.outline { border-color: var(--room-line-strong); }
.rm-btn.bust { background: var(--signal-bust); color: var(--room-ground); font-weight: 700; }
.rm-btn.big { height: 56px; border-radius: var(--radius-lg); font-size: 17px; }
.rm-btn.ghost { color: var(--room-text2); }

.banner { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: var(--room-surface1); border: 1px solid var(--room-line); border-radius: var(--radius-md); }
.banner svg { flex: none; color: var(--signal-signal); }
.banner strong { display: block; font-size: 14px; font-weight: 600; }
.banner span { display: block; font-size: 13px; color: var(--room-text2); line-height: 1.4; }
.banner .rm-btn { height: 36px; padding: 0 12px; font-size: 13px; color: var(--signal-signal); margin-left: auto; }

.log { font-family: var(--font-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.log-row { display: grid; grid-template-columns: 52px 68px minmax(0, 1fr) 72px; gap: 12px; align-items: center; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--room-line); }
.log-row:last-child { border-bottom: 0; }
.log-row .n, .log-row .t { color: var(--room-text2); }
.log-row .h { color: var(--room-text3); text-align: right; }
.log .bust { color: var(--signal-bust); } .log .move { color: var(--signal-sync); } .log .level { color: var(--signal-signal); } .log .re { color: var(--signal-live); } .log .undo { color: var(--room-text2); }
@media (max-width: 480px) { .log-row { grid-template-columns: 48px minmax(0, 1fr); } .log-row .t, .log-row .h { display: none; } }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stat { padding: 14px 16px; background: var(--room-surface1); border: 1px solid var(--room-line); border-radius: var(--radius-md); display: grid; gap: 4px; }
.stat .rm-num { font-size: 28px; }
.stat .rm-num small { font-size: 16px; color: var(--room-text2); font-weight: 600; }

.seats { display: grid; }
.seat { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 12px 0 14px; border-bottom: 1px solid var(--room-line); font-size: 15px; font-weight: 500; }
.seat:last-child { border-bottom: 0; }
.seat.selected { background: var(--room-surface3); }
.seat .no { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--room-line-strong); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; color: var(--room-text2); flex: none; }
.seat.selected .no { background: var(--signal-signal); color: var(--room-ground); border-color: var(--signal-signal); font-weight: 500; }
.seat.open .no { border-style: dashed; color: var(--room-text3); }
.seat.open .name { color: var(--room-text3); font-weight: 400; }
.seat.pending .no { border-color: var(--signal-sync); color: var(--signal-sync); }
.seat.pending .name { color: var(--room-text2); text-decoration: line-through; }
.seat .name { flex: 1; display: flex; align-items: center; gap: 8px; }
.seat .stack { font-family: var(--font-mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.seat .button-d { width: 18px; height: 18px; border-radius: 50%; background: var(--signal-signal); color: var(--room-ground); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 10px; }
.seat .pend { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--signal-sync); }
.seat .rm-btn { height: 36px; padding: 0 12px; font-size: 13px; border: 1px solid var(--signal-bust); color: var(--signal-bust); border-radius: var(--radius-sm); }

.integrity { list-style: none; margin: 0; padding: 0; display: grid; }
.integrity li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--room-line); font-size: 14px; }
.integrity li:last-child { border-bottom: 0; }
.integrity li .ok { color: var(--signal-live); }
.integrity li .warn { color: var(--signal-signal); }
.integrity li .val { font-family: var(--font-mono); font-size: 12.5px; color: var(--room-text2); font-variant-numeric: tabular-nums; }
.integrity li .fix { font-family: var(--font-mono); font-size: 12px; color: var(--signal-signal); }

/* ---------- scaled mock-ups: 1 unit = 1 design px, scaled to the container ---------- */
.mock { container-type: inline-size; width: 100%; }
.mock .screen { position: relative; overflow: hidden; background: var(--room-ground); color: var(--room-text); font-family: var(--font-body); border: 1px solid var(--room-line); }

/* Cinema, 1920 × 1080 */
.tv .screen { --u: calc(100cqw / 1920); aspect-ratio: 16 / 9; border-radius: calc(16 * var(--u)); padding: calc(56 * var(--u)) calc(72 * var(--u)); display: flex; flex-direction: column; }
.tv .top { display: flex; align-items: center; justify-content: space-between; height: calc(56 * var(--u)); }
.tv .top .l { display: flex; align-items: center; gap: calc(24 * var(--u)); }
.tv .top .mark { width: calc(72 * var(--u)); height: calc(48 * var(--u)); }
.tv .title { font-family: var(--font-display); font-stretch: 118%; font-weight: 600; font-size: calc(26 * var(--u)); letter-spacing: 0.1em; text-transform: uppercase; }
.tv .venue { font-size: calc(24 * var(--u)); color: var(--room-text2); }
.tv .top .r { display: flex; align-items: center; gap: calc(24 * var(--u)); }
.tv .time { font-family: var(--font-mono); font-size: calc(20 * var(--u)); color: var(--room-text2); font-variant-numeric: tabular-nums; }
.tv .live { height: calc(40 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: calc(6 * var(--u)); background: var(--signal-live); color: var(--room-ground); font-family: var(--font-display); font-size: calc(18 * var(--u)); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; display: inline-flex; align-items: center; }
.tv .bar { height: calc(8 * var(--u)); background: var(--room-surface3); margin-top: calc(28 * var(--u)); border-radius: calc(2 * var(--u)); overflow: hidden; }
.tv .bar > span { display: block; height: 100%; width: calc(var(--progress, 0.27) * 100%); background: var(--signal-signal); }
.tv .mid { flex: 1; display: grid; grid-template-columns: calc(380 * var(--u)) minmax(0, 1fr) calc(380 * var(--u)); gap: calc(48 * var(--u)); align-items: center; padding-top: calc(24 * var(--u)); }
.tv .col { display: flex; flex-direction: column; gap: calc(36 * var(--u)); }
.tv .col.r { align-items: flex-end; text-align: right; }
.tv .k { font-size: calc(20 * var(--u)); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--room-text2); margin-bottom: calc(6 * var(--u)); }
.tv .v { font-family: var(--font-display); font-weight: 600; font-size: calc(72 * var(--u)); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tv .v small { font-size: calc(40 * var(--u)); color: var(--room-text2); }
.tv .v.md { font-size: calc(56 * var(--u)); }
.tv .v.sm { font-size: calc(40 * var(--u)); line-height: 1.15; }
.tv .sub { font-size: calc(24 * var(--u)); color: var(--room-text2); font-variant-numeric: tabular-nums; margin-top: calc(6 * var(--u)); }
.tv .centre { display: flex; flex-direction: column; align-items: center; gap: calc(12 * var(--u)); }
.tv .level { font-family: var(--font-display); font-stretch: 118%; font-weight: 600; font-size: calc(34 * var(--u)); letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal-signal); }
.tv .clock { font-family: var(--font-display); font-stretch: 62%; font-weight: 600; font-size: calc(470 * var(--u)); line-height: 0.84; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.tv .blinds { display: flex; align-items: baseline; gap: calc(28 * var(--u)); margin-top: calc(8 * var(--u)); }
.tv .blinds b { font-family: var(--font-display); font-weight: 600; font-size: calc(104 * var(--u)); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tv .blinds span { font-family: var(--font-display); font-weight: 500; font-size: calc(44 * var(--u)); color: var(--room-text2); font-variant-numeric: tabular-nums; }
.tv .foot { display: flex; align-items: flex-end; justify-content: space-between; height: calc(96 * var(--u)); }
.tv .foot .l { display: flex; align-items: center; gap: calc(24 * var(--u)); }
.tv .qr { width: calc(96 * var(--u)); height: calc(96 * var(--u)); background: var(--room-text); border-radius: calc(4 * var(--u)); }
.tv .follow b { display: block; font-size: calc(22 * var(--u)); font-weight: 500; }
.tv .follow span { display: block; font-family: var(--font-mono); font-size: calc(22 * var(--u)); color: var(--room-text2); }
.tv .meta { text-align: right; font-family: var(--font-mono); font-size: calc(18 * var(--u)); color: var(--room-text3); line-height: 1.5; font-variant-numeric: tabular-nums; }

/* Director on iPad, 1194 × 834 */
.ipad .screen { --u: calc(100cqw / 1194); aspect-ratio: 1194 / 834; border-radius: calc(18 * var(--u)); display: flex; flex-direction: column; }
.ipad .top { height: calc(60 * var(--u)); padding: 0 calc(20 * var(--u)) 0 calc(16 * var(--u)); border-bottom: 1px solid var(--room-line); display: flex; align-items: center; justify-content: space-between; gap: calc(16 * var(--u)); }
.ipad .top .l { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.ipad .top .mark { width: calc(42 * var(--u)); height: calc(28 * var(--u)); }
.ipad .top b { font-family: var(--font-display); font-weight: 600; font-size: calc(17 * var(--u)); }
.ipad .top span { font-size: calc(14 * var(--u)); color: var(--room-text2); }
.ipad .top .r { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.ipad .chip { height: calc(30 * var(--u)); padding: 0 calc(10 * var(--u)); font-size: calc(12 * var(--u)); border-radius: calc(4 * var(--u)); gap: calc(6 * var(--u)); }
.ipad .chip .dot { width: calc(8 * var(--u)); height: calc(8 * var(--u)); }
.ipad .body { flex: 1; display: grid; grid-template-columns: calc(76 * var(--u)) minmax(0, 1fr) calc(356 * var(--u)); min-height: 0; }
.ipad .rail { border-right: 1px solid var(--room-line); padding: calc(12 * var(--u)) calc(6 * var(--u)); display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
.ipad .rail span { height: calc(60 * var(--u)); border-radius: calc(6 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 500; color: var(--room-text2); }
.ipad .rail span.on { background: var(--room-surface3); color: var(--room-text); }
.ipad .rail svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.ipad .rail span.on svg { color: var(--signal-signal); }
.ipad .main { padding: calc(20 * var(--u)); display: flex; flex-direction: column; gap: calc(16 * var(--u)); min-width: 0; }
.ipad .clockbox { border: 1px solid var(--room-line); border-radius: calc(8 * var(--u)); background: var(--room-surface1); display: grid; grid-template-columns: minmax(0, 1fr) calc(270 * var(--u)); overflow: hidden; }
.ipad .clockbox .l { padding: calc(18 * var(--u)) calc(22 * var(--u)) 0; display: flex; flex-direction: column; gap: calc(2 * var(--u)); }
.ipad .clockbox .heads { display: flex; justify-content: space-between; font-size: calc(12 * var(--u)); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--room-text2); }
.ipad .clockbox .heads b { color: var(--signal-signal); font-weight: 500; }
.ipad .clockbox .row { display: flex; align-items: baseline; gap: calc(24 * var(--u)); }
.ipad .clockbox .rm-clock { font-size: calc(120 * var(--u)); }
.ipad .clockbox .blinds b { display: block; font-family: var(--font-display); font-weight: 600; font-size: calc(30 * var(--u)); line-height: 1; font-variant-numeric: tabular-nums; }
.ipad .clockbox .blinds span { display: block; font-size: calc(15 * var(--u)); color: var(--room-text2); margin-top: calc(2 * var(--u)); }
.ipad .clockbox .rm-progress { height: calc(4 * var(--u)); margin: calc(12 * var(--u)) calc(-22 * var(--u)) 0; }
.ipad .clockbox .r { border-left: 1px solid var(--room-line); padding: calc(16 * var(--u)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, calc(56 * var(--u))); gap: calc(10 * var(--u)); }
.ipad .clockbox .r span { border: 1px solid var(--room-line-strong); border-radius: calc(8 * var(--u)); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: calc(16 * var(--u)); font-variant-numeric: tabular-nums; }
.ipad .clockbox .r span.primary { background: var(--signal-signal); color: var(--room-ground); border-color: transparent; }
.ipad .thead { display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u)); }
.ipad .thead h3 { font-size: calc(18 * var(--u)); }
.ipad .thead .m { font-size: calc(13 * var(--u)); color: var(--room-text2); margin-left: calc(12 * var(--u)); }
.ipad .thead .bal { font-size: calc(13 * var(--u)); color: var(--signal-signal); display: flex; align-items: center; gap: calc(10 * var(--u)); }
.ipad .thead .bal span { height: calc(36 * var(--u)); padding: 0 calc(14 * var(--u)); border: 1px solid var(--signal-signal); border-radius: calc(6 * var(--u)); display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: 600; }
.ipad .tables { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(12 * var(--u)); }
.ipad .table { padding: calc(12 * var(--u)) calc(14 * var(--u)); border: 1px solid var(--room-line); border-radius: calc(8 * var(--u)); background: var(--room-surface1); display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.ipad .table.hot { border-color: var(--signal-signal); }
.ipad .table .h { display: flex; justify-content: space-between; align-items: baseline; }
.ipad .table .h b { font-family: var(--font-display); font-weight: 600; font-size: calc(15 * var(--u)); }
.ipad .table .h span { font-family: var(--font-mono); font-size: calc(12 * var(--u)); color: var(--room-text2); }
.ipad .table.hot .h span { color: var(--signal-signal); }
.ipad .table .dots { display: flex; gap: calc(4 * var(--u)); }
.ipad .table .dots i { width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: var(--room-text); }
.ipad .table .dots i.o { background: transparent; border: 1px solid var(--room-line-strong); }
.ipad .table .dots i.s { background: var(--signal-signal); }
.ipad .table .f { font-size: calc(12 * var(--u)); color: var(--room-text2); }
.ipad .stats { gap: calc(12 * var(--u)); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ipad .stat { padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(6 * var(--u)); gap: calc(4 * var(--u)); }
.ipad .stat .rm-label { font-size: calc(11 * var(--u)); }
.ipad .stat .rm-num { font-size: calc(26 * var(--u)); }
.ipad .stat .rm-num small { font-size: calc(15 * var(--u)); }
.ipad .side { border-left: 1px solid var(--room-line); padding: calc(20 * var(--u)) calc(16 * var(--u)); display: flex; flex-direction: column; gap: calc(14 * var(--u)); min-height: 0; }
.ipad .side .rm-btn.bust { height: calc(56 * var(--u)); font-size: calc(17 * var(--u)); border-radius: calc(8 * var(--u)); }
.ipad .side .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10 * var(--u)); }
.ipad .side .pair span { height: calc(44 * var(--u)); border: 1px solid var(--room-line-strong); border-radius: calc(6 * var(--u)); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: calc(14 * var(--u)); }
.ipad .side .lh { display: flex; justify-content: space-between; align-items: center; margin-top: calc(6 * var(--u)); }
.ipad .side .lh b { font-family: var(--font-display); font-weight: 600; font-size: calc(15 * var(--u)); }
.ipad .side .lh span { font-family: var(--font-mono); font-size: calc(11 * var(--u)); color: var(--room-text2); }
.ipad .ilog { flex: 1; border: 1px solid var(--room-line); border-radius: calc(8 * var(--u)); background: var(--room-surface1); overflow: hidden; font-family: var(--font-mono); font-size: calc(12 * var(--u)); font-variant-numeric: tabular-nums; }
.ipad .ilog div { padding: calc(10 * var(--u)) calc(12 * var(--u)); border-bottom: 1px solid var(--room-line); display: flex; flex-direction: column; gap: calc(3 * var(--u)); }
.ipad .ilog div:last-child { border-bottom: 0; }
.ipad .ilog .m { display: flex; justify-content: space-between; color: var(--room-text2); }
.ipad .ilog .m i { font-style: normal; color: var(--room-text3); }
.ipad .ilog .by { color: var(--room-text2); }

/* Felt Floor in dealer mode, 390 × 844 */
.phone .screen { --u: calc(100cqw / 390); aspect-ratio: 390 / 844; border-radius: calc(40 * var(--u)); padding: calc(58 * var(--u)) calc(16 * var(--u)) calc(34 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.phone .head { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(12 * var(--u)); }
.phone .head .rm-label { font-size: calc(11 * var(--u)); color: var(--signal-signal); font-weight: 600; letter-spacing: 0.1em; }
.phone .head .tname { font-size: calc(32 * var(--u)); line-height: 1; letter-spacing: -0.01em; margin-top: calc(2 * var(--u)); }
.phone .head p { font-size: calc(13 * var(--u)); color: var(--room-text2); margin-top: calc(6 * var(--u)); }
.phone .head .clk { padding: calc(8 * var(--u)) calc(12 * var(--u)); border: 1px solid var(--room-line); border-radius: calc(6 * var(--u)); background: var(--room-surface1); text-align: right; }
.phone .head .clk .rm-clock { font-size: calc(30 * var(--u)); line-height: 1; }
.phone .head .clk span { display: block; font-family: var(--font-mono); font-size: calc(11 * var(--u)); color: var(--room-text2); margin-top: calc(2 * var(--u)); }
.phone .seats { border: 1px solid var(--room-line); border-radius: calc(8 * var(--u)); background: var(--room-surface1); overflow: hidden; }
.phone .seat { height: calc(46 * var(--u)); padding: 0 calc(12 * var(--u)); gap: calc(12 * var(--u)); font-size: calc(15 * var(--u)); }
.phone .seat .no { width: calc(28 * var(--u)); height: calc(28 * var(--u)); font-size: calc(12 * var(--u)); }
.phone .seat .stack { font-size: calc(14 * var(--u)); }
.phone .seat .button-d { width: calc(18 * var(--u)); height: calc(18 * var(--u)); font-size: calc(10 * var(--u)); }
.phone .seat .pend { font-size: calc(11 * var(--u)); }
.phone .banner { padding: calc(10 * var(--u)) calc(12 * var(--u)); gap: calc(12 * var(--u)); border-radius: calc(6 * var(--u)); }
.phone .banner svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); color: var(--signal-sync); }
.phone .banner strong { font-size: calc(13 * var(--u)); }
.phone .banner span { font-family: var(--font-mono); font-size: calc(11 * var(--u)); }
.phone .spacer { flex: 1; }
.phone .rm-btn.bust { height: calc(56 * var(--u)); font-size: calc(17 * var(--u)); border-radius: calc(8 * var(--u)); gap: calc(10 * var(--u)); }
.phone .rm-btn.bust svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.phone .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10 * var(--u)); }
.phone .pair span { height: calc(48 * var(--u)); border: 1px solid var(--room-line-strong); border-radius: calc(6 * var(--u)); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: calc(14 * var(--u)); }

/* Console results table (drawn at natural size, scrolls on small screens) */
.results { font-size: 14px; }
.results .hd, .results .rw { display: grid; grid-template-columns: 48px minmax(0, 1fr) 128px 72px 72px; gap: 14px; align-items: center; padding: 0 16px; border-bottom: 1px solid var(--room-line); }
.results .hd { height: 40px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--room-text2); }
.results .rw { min-height: 44px; }
.results .rw:last-child { border-bottom: 0; }
.results .pos { font-family: var(--font-mono); color: var(--room-text2); }
.results .rw.top .pos { color: var(--signal-signal); }
.results .who { font-weight: 500; }
.results .ref { font-family: var(--font-mono); font-size: 12px; color: var(--room-text2); }
.results .n { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.results .n.q { color: var(--room-text2); }
.results .rw.merge { background: var(--room-surface2); padding-block: 12px; align-items: start; }
.results .rw.merge .who { display: grid; gap: 8px; }
.results .rw.merge .hint { font-size: 12px; color: var(--signal-signal); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.results .rw.merge .hint span { height: 28px; padding: 0 10px; border-radius: var(--radius-sm); border: 1px solid var(--signal-signal); display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: 600; }
.results .rw.merge .hint span.alt { border-color: var(--room-line-strong); color: var(--room-text); }
.results .rw.merge .ref { color: var(--signal-signal); }
.results-foot { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--room-line); font-family: var(--font-mono); font-size: 12px; color: var(--room-text2); flex-wrap: wrap; }
@media (max-width: 640px) { .results .hd, .results .rw { grid-template-columns: 40px minmax(0, 1fr) 64px; } .results .ref, .results .n.q { display: none; } }

.standings { font-size: 14px; }
.standings .rw { display: grid; grid-template-columns: 28px minmax(0, 1fr) 56px 44px; gap: 12px; align-items: center; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--room-line); }
.standings .rw:last-child { border-bottom: 0; }
.standings .pos { font-family: var(--font-mono); color: var(--room-text2); }
.standings .who b { display: block; font-weight: 500; }
.standings .who span { display: block; font-size: 11px; color: var(--room-text2); }
.standings .pts { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.standings .mv { font-family: var(--font-mono); font-size: 12px; text-align: right; }
.standings .up { color: var(--signal-live); } .standings .down { color: var(--signal-bust); } .standings .flat { color: var(--room-text3); }
.standings-note { padding: 12px 16px; border-top: 1px solid var(--room-line); font-size: 12px; line-height: 1.45; color: var(--room-text2); }

/* a table, drawn (felt green is for drawings of tables and the marketing site, never chrome) */
.felt-table { width: 100%; height: auto; }

/* pages */
.page-head { padding-block: clamp(48px, 7vw, 88px) clamp(24px, 3vw, 40px); display: grid; gap: 20px; max-width: 880px; }
.page-head h1 { font-size: clamp(36px, 5.5vw, 64px); }
.legal-prose { max-width: 72ch; display: grid; gap: 20px; }
.legal-prose h2 { font-size: 26px; margin-top: 16px; }
.legal-prose h3 { font-size: 20px; }
.legal-prose p, .legal-prose li { color: var(--daylight-text2); font-size: 16px; }
.legal-prose ul { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.legal-prose dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 20px; font-size: 15px; }
.legal-prose dt { font-weight: 600; color: var(--daylight-text); }
.legal-prose dd { margin: 0; color: var(--daylight-text2); }
@media (max-width: 520px) { .legal-prose dl { grid-template-columns: 1fr; } }
.not-found { min-height: 50vh; display: grid; align-content: center; gap: 20px; padding-block: 64px; }

/* ---------- late additions used by the page mock-ups ---------- */
figure { margin: 0; }
.tv .tt { display: flex; align-items: baseline; gap: calc(20 * var(--u)); flex-wrap: wrap; }
.tv .qr { background: repeating-conic-gradient(var(--room-text) 0 25%, var(--room-ground) 0 50%) 0 0 / calc(14 * var(--u)) calc(14 * var(--u)); border: calc(6 * var(--u)) solid var(--room-text); }
.phone .head .tname { font-family: var(--font-display); font-weight: 600; font-size: calc(32 * var(--u)); line-height: 1; letter-spacing: -0.01em; margin-top: calc(2 * var(--u)); }
.ipad .top .tt b, .ipad .top .tt span { display: inline; }
.ipad .rail svg { color: var(--room-text2); }
.log b { font-weight: 500; }
.integrity svg { width: 18px; height: 18px; }
.mock-note { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tiles { grid-template-columns: 1fr; } }
.stack-lg { display: grid; gap: clamp(32px, 5vw, 56px); }
.two-up { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (max-width: 800px) { .two-up { grid-template-columns: 1fr; } }
.phone-col { max-width: 360px; width: 100%; margin: 0 auto; }
.grant-code { font-family: var(--font-display); font-weight: 600; font-size: 44px; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
.mini-stat { display: grid; gap: 4px; }
.mini-stat b { font-family: var(--font-display); font-weight: 600; font-size: 28px; letter-spacing: -0.02em; line-height: 1; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }