/* generated by apps/site/src/build.ts: tokens from packages/ui/src/tokens.css, the hero mark's animation, site styles */
/*
 * PriorityField design tokens (DESIGN-SYSTEM §2). The ONLY file allowed to contain raw colour values.
 * Themes are selected by the data-theme attribute on <html>; the app sets it from the user's setting
 * or the system preference. tools/contrast-check.mjs verifies every text/UI pair in both themes.
 */

/* ---- theme-independent ---- */
:root {
  /* type */
  --font-ui: "Inter", system-ui, "Segoe UI", sans-serif;
  --type-12: 0.75rem;
  --type-12-line: 1rem;
  --type-14: 0.875rem;
  --type-14-line: 1.25rem;
  --type-16: 1rem;
  --type-16-line: 1.5rem;
  --type-20: 1.25rem;
  --type-20-line: 1.75rem;
  --type-24: 1.5rem;
  --type-24-line: 2rem;
  --type-32: 2rem;
  --type-32-line: 2.5rem;
  --type-48: 3rem;
  --type-48-line: 3.5rem;

  /* space 4/8/12/16/24/32/48/64 */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* radius */
  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;
  --radius-full: 9999px;

  /* layers */
  --z-base: 0;
  --z-tile-chrome: 10;
  --z-sticky: 20;
  --z-popover: 30;
  --z-sheet: 40;
  --z-dialog: 50;
  --z-toast: 60;
  --z-focus-trap: 70;

  /* hit targets */
  --hit-touch: 44px;
  --hit-fine: 32px;

  /* motion */
  --motion-micro: 120ms;
  --motion-standard: 180ms;
  --motion-surface: 240ms;
  --motion-hold: 1500ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);

  /* focus */
  --focus-width: 2px;
  --focus-offset: 2px;

  /* brand orbs (logo and colour-identity pips only — never status or seats) */
  --orb-w: #fff8e6;
  --orb-w-glow: #f4d58a;
  --orb-u: #3d8fe0;
  --orb-u-glow: #8fd0ff;
  --orb-b: #3a2f4a;
  --orb-b-glow: #9c86c9;
  --orb-r: #e5482c;
  --orb-r-glow: #ffaa5c;
  --orb-g: #2fa25e;
  --orb-g-glow: #9be08f;
}

/* ---- dark (table default) ---- */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --bg-canvas: #0e1114;
  --bg-surface: #161a1f;
  --bg-raised: #1e242b;
  --bg-inset: #0a0c0f;
  --border-subtle: #2a3139;
  --border-strong: #66717e;
  --text-primary: #f1ebdd;
  --text-secondary: #b9b2a3;
  --text-muted: #948e82;

  --accent-fill: #d9a441;
  --accent-on: #1a1408;
  --accent-text: #e8b95a;
  --focus-ring: #8ec5ff;
  --danger-text: #ff7a6b;
  --danger-fill: #c0392b;
  --danger-on: #ffffff;
  --success-text: #5fd08a;
  --warning-text: #f2c14e;

  --seat-1: #2bb3a3;
  --seat-2: #a98bf5;
  --seat-3: #f08a6c;
  --seat-4: #5ab0f0;
  --seat-5: #9bcb4f;
  --seat-6: #ef7fb0;
  --seat-7: #a7b4c2;
  --seat-8: #6fe0b8;

  --elev-0: none;
  --elev-1: 0 1px 2px rgb(0 0 0 / 0.3);
  --elev-2: 0 8px 24px rgb(0 0 0 / 0.4);
  --scrim: rgb(0 0 0 / 0.55);
}

/* ---- light ---- */
[data-theme="light"] {
  color-scheme: light;
  --bg-canvas: #f6f2e9;
  --bg-surface: #ffffff;
  --bg-raised: #fbf8f2;
  --bg-inset: #eee8dc;
  --border-subtle: #ddd5c6;
  --border-strong: #8f8676;
  --text-primary: #1b1a17;
  --text-secondary: #4a463e;
  --text-muted: #6b665c;

  --accent-fill: #d9a441;
  --accent-on: #1a1408;
  --accent-text: #8a5e0e;
  --focus-ring: #1f6fd1;
  --danger-text: #b3261e;
  --danger-fill: #a3261c;
  --danger-on: #ffffff;
  --success-text: #1e7a46;
  --warning-text: #8a5a00;

  --seat-1: #0f7f73;
  --seat-2: #6b4fd1;
  --seat-3: #b4482c;
  --seat-4: #1c6fb0;
  --seat-5: #4e7a12;
  --seat-6: #b03a72;
  --seat-7: #55606c;
  --seat-8: #1f7a5c;

  --elev-0: none;
  --elev-1: 0 1px 2px rgb(0 0 0 / 0.15);
  --elev-2: 0 8px 24px rgb(0 0 0 / 0.2);
  --scrim: rgb(0 0 0 / 0.4);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-micro: 0ms;
    --motion-standard: 0ms;
    --motion-surface: 0ms;
  }
}

/* ---- Settings → Appearance (BUILD-PLAN 10.1): set on <html> by the web app's settings store ---- */
/* reduce motion: "on" stops motion whatever the system says; "full" keeps it even when the system asks to reduce */
:root[data-motion="reduce"] {
  --motion-micro: 0ms;
  --motion-standard: 0ms;
  --motion-surface: 0ms;
}
@media (prefers-reduced-motion: reduce) {
  :root[data-motion="full"] {
    --motion-micro: 120ms;
    --motion-standard: 180ms;
    --motion-surface: 240ms;
  }
}

/* high contrast: secondary and muted text close to primary, boundaries as strong as the strong border */
[data-theme="dark"][data-contrast="high"] {
  --text-secondary: #e6dfd0;
  --text-muted: #d2cabb;
  --border-subtle: #8a95a2;
  --border-strong: #b4bdc7;
  --bg-canvas: #000000;
}
[data-theme="light"][data-contrast="high"] {
  --text-secondary: #24221e;
  --text-muted: #34312b;
  --border-subtle: #6b6457;
  --border-strong: #3d382f;
  --bg-canvas: #ffffff;
}

/* compact density: tighter spacing steps (text size is a separate setting) */
:root[data-density="compact"] {
  --space-3: 0.5rem;
  --space-4: 0.75rem;
  --space-5: 1rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
}

/* ---- site: follow the OS theme (no script on the site) ---- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
  --bg-canvas: #f6f2e9;
  --bg-surface: #ffffff;
  --bg-raised: #fbf8f2;
  --bg-inset: #eee8dc;
  --border-subtle: #ddd5c6;
  --border-strong: #8f8676;
  --text-primary: #1b1a17;
  --text-secondary: #4a463e;
  --text-muted: #6b665c;

  --accent-fill: #d9a441;
  --accent-on: #1a1408;
  --accent-text: #8a5e0e;
  --focus-ring: #1f6fd1;
  --danger-text: #b3261e;
  --danger-fill: #a3261c;
  --danger-on: #ffffff;
  --success-text: #1e7a46;
  --warning-text: #8a5a00;

  --seat-1: #0f7f73;
  --seat-2: #6b4fd1;
  --seat-3: #b4482c;
  --seat-4: #1c6fb0;
  --seat-5: #4e7a12;
  --seat-6: #b03a72;
  --seat-7: #55606c;
  --seat-8: #1f7a5c;

  --elev-0: none;
  --elev-1: 0 1px 2px rgb(0 0 0 / 0.15);
  --elev-2: 0 8px 24px rgb(0 0 0 / 0.2);
  --scrim: rgb(0 0 0 / 0.4);
  }
}


.pf-wordmark{fill:var(--pf-wordmark,#F1EBDD);font:700 44px Inter,"Segoe UI",system-ui,sans-serif;letter-spacing:-.5px}
.pf-wordmark .pf-f{fill:var(--pf-wordmark-accent,#E8B95A)}
@media (prefers-color-scheme: light){.pf-wordmark{fill:var(--pf-wordmark,#1B1A17)}.pf-wordmark .pf-f{fill:var(--pf-wordmark-accent,#8A5E0E)}}
.pf-anim .pf-x{transform-box:fill-box;transform-origin:center}
.pf-anim .pf-w .pf-sun-rays{transform-box:view-box;animation:pf-spin 24s linear infinite}
.pf-anim .pf-w .pf-halo{animation:pf-pulse 3.6s ease-in-out infinite}
.pf-anim .pf-u .pf-ring{animation:pf-ripple 3s ease-out infinite}
.pf-anim .pf-u .pf-ring.pf-late{animation-delay:1.5s}
.pf-anim .pf-u .pf-glyph{animation:pf-bob 3s ease-in-out infinite}
.pf-anim .pf-b .pf-murk{animation:pf-murk 9s ease-in-out infinite}
.pf-anim .pf-b .pf-skull-eye{animation:pf-eyes 9s ease-in-out infinite}
.pf-anim .pf-r .pf-flame{transform-box:fill-box;transform-origin:50% 90%;animation:pf-flick 1.8s steps(1,end) infinite}
.pf-anim .pf-r .pf-ember{animation:pf-ember 2.6s ease-out infinite}
.pf-anim .pf-r .pf-ember.pf-late{animation-delay:1.3s}
.pf-anim .pf-g .pf-canopy{transform-box:fill-box;transform-origin:50% 100%;animation:pf-sway 5s ease-in-out infinite}
.pf-anim .pf-g .pf-halo{animation:pf-breathe 5s ease-in-out infinite}
.pf-anim .pf-link{animation:pf-charge 4s ease-in-out infinite}
.pf-anim .pf-arc{animation:pf-crackle 2.2s steps(1,end) infinite}
.pf-anim .pf-arc.pf-alt{animation-name:pf-crackle-alt}
.pf-anim .pf-flow{stroke-dasharray:6 10;animation:pf-flow 1.6s linear infinite}
.pf-anim .pf-fieldline{stroke-dasharray:3 9;animation:pf-flow 4s linear infinite}
.pf-anim .pf-orbit{animation:pf-spin 60s linear infinite}
.pf-anim .pf-orbit .pf-upright{animation:pf-spin 60s linear infinite reverse}
.pf-anim .pf-spark{animation:pf-travel 6s cubic-bezier(.55,0,.35,1) infinite}
.pf-anim .pf-core{animation:pf-pulse 2.4s ease-in-out infinite}
@keyframes pf-spin{to{transform:rotate(360deg)}}
@keyframes pf-pulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.85;transform:scale(1.18)}}
@keyframes pf-breathe{0%,100%{opacity:.3;transform:scale(.94)}50%{opacity:.7;transform:scale(1.1)}}
@keyframes pf-ripple{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
@keyframes pf-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.2px)}}
@keyframes pf-murk{0%,100%{opacity:.75;transform:translate(0,0) scale(1)}35%{opacity:.45;transform:translate(1.6px,-1.2px) scale(1.12)}70%{opacity:.85;transform:translate(-1.4px,1px) scale(.95)}}
@keyframes pf-eyes{0%,80%,100%{fill-opacity:1}86%{fill-opacity:.35}90%{fill-opacity:1}}
@keyframes pf-flick{0%{transform:scale(1,1)}17%{transform:scale(.97,1.06)}34%{transform:scale(1.02,.96)}51%{transform:scale(.98,1.08)}68%{transform:scale(1.03,.97)}85%{transform:scale(.99,1.04)}}
@keyframes pf-ember{0%{opacity:0;transform:translateY(0)}20%{opacity:.9}100%{opacity:0;transform:translateY(-9px)}}
@keyframes pf-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes pf-crackle{0%{opacity:.95}9%{opacity:.25}14%{opacity:1}31%{opacity:.4}38%{opacity:.9}60%{opacity:.15}66%{opacity:.85}83%{opacity:.35}}
@keyframes pf-crackle-alt{0%{opacity:.15}9%{opacity:.8}14%{opacity:.1}31%{opacity:.7}38%{opacity:.2}60%{opacity:.9}66%{opacity:.2}83%{opacity:.75}}
@keyframes pf-charge{0%,70%,100%{stroke-opacity:.7}82%{stroke-opacity:1;stroke-width:1.7}}
@keyframes pf-flow{to{stroke-dashoffset:-32}}
@keyframes pf-travel{0%{offset-distance:0%;opacity:0}6%{opacity:1}94%{opacity:1}100%{offset-distance:100%;opacity:0}}
@media (prefers-reduced-motion: reduce){.pf-anim *{animation:none!important}}
.pf-still *{animation:none!important}

.pf-anim .pf-d0{animation-delay:-3.19s!important}
.pf-anim .pf-d1{animation-delay:-3.49s!important}
.pf-anim .pf-d2{animation-delay:-0.98s!important}
.pf-anim .pf-d3{animation-delay:-2.22s!important}
.pf-anim .pf-d4{animation-delay:-3.78s!important}
.pf-anim .pf-d5{animation-delay:-1.49s!important}
.pf-anim .pf-d6{animation-delay:-0.36s!important}
.pf-anim .pf-d7{animation-delay:-2.08s!important}
.pf-anim .pf-d8{animation-delay:-0.07s!important}
.pf-anim .pf-d9{animation-delay:-2.37s!important}
.pf-anim .pf-d10{animation-delay:-2.84s!important}
.pf-anim .pf-d11{animation-delay:-2.68s!important}
.pf-anim .pf-d12{animation-delay:-3.62s!important}
.pf-anim .pf-d13{animation-delay:-1.78s!important}
.pf-anim .pf-d14{animation-delay:-0.67s!important}
.pf-anim .pf-d15{animation-delay:-1.14s!important}
.pf-anim .pf-d16{animation-delay:-3.92s!important}
.pf-anim .pf-d17{animation-delay:-1.93s!important}
.pf-anim .pf-d18{animation-delay:-0.86s!important}
.pf-anim .pf-d19{animation-delay:-1.63s!important}
.pf-anim .pf-d20{animation-delay:-0.22s!important}
.pf-anim .pf-d21{animation-delay:-3.3s!important}
.pf-anim .pf-d22{animation-delay:-0.52s!important}
.pf-anim .pf-d23{animation-delay:-2.54s!important}
.pf-anim .pf-d24{animation-delay:-3.1s!important}
.pf-anim .pf-d25{animation-delay:-1.31s!important}
.pf-anim .pf-d26{animation-delay:-2.96s!important}
.pf-anim .pf-d27{animation-delay:-3.45s!important}
.pf-anim .pf-d28{animation-delay:-1s!important}
.pf-anim .pf-d29{animation-delay:-2.24s!important}
.pf-anim .pf-d30{animation-delay:-3.76s!important}
.pf-anim .pf-d31{animation-delay:-1.46s!important}
.pf-anim .pf-d32{animation-delay:-0.38s!important}
.pf-anim .pf-d33{animation-delay:-2.4s!important}
.pf-anim .pf-d34{animation-delay:-2.76s!important}
.pf-anim .pf-d35{animation-delay:-0.75s!important}
.pf-anim .pf-d36{animation-delay:-3.59s!important}
.pf-anim .pf-d37{animation-delay:-3.21s!important}
.pf-anim .pf-d38{animation-delay:-1.77s!important}
.pf-anim .pf-d39{animation-delay:-1.21s!important}
.pf-anim .pf-d40{animation-delay:-2.6s!important}
.pf-anim .pf-d41{animation-delay:-0.58s!important}
.pf-anim .pf-d42{animation-delay:-1.59s!important}
.pf-anim .pf-d43{animation-delay:-3.91s!important}
.pf-anim .pf-d44{animation-delay:-1.92s!important}
.pf-anim .pf-d45{animation-delay:-0.24s!important}
.pf-anim .pf-d46{animation-delay:-3.38s!important}
.pf-anim .pf-d47{animation-delay:-2.9s!important}
.pf-anim .pf-d48{animation-delay:-3.06s!important}
.pf-anim .pf-d49{animation-delay:-0.89s!important}
.pf-anim .pf-d50{animation-delay:-1.06s!important}
.pf-anim .pf-d51{animation-delay:-1.38s!important}
.pf-anim .pf-d52{animation-delay:-2.26s!important}
.pf-anim .pf-d53{animation-delay:-3.73s!important}
.pf-anim .pf-d54{animation-delay:-0.44s!important}
.pf-anim .pf-d55{animation-delay:-2.46s!important}
.pf-anim .pf-d56{animation-delay:-2.09s!important}
.pf-anim .pf-d57{animation-delay:-0.08s!important}
.pf-anim .pf-d58{animation-delay:-3.53s!important}
.pf-anim .pf-d59{animation-delay:-2.71s!important}
.pf-anim .pf-d60{animation-delay:-0.69s!important}
.pf-anim .pf-d61{animation-delay:-1.73s!important}
.pf-anim .pf-d62{animation-delay:-3.25s!important}
.pf-anim .pf-d63{animation-delay:-1.52s!important}
.pf-anim .pf-d64{animation-delay:-0.28s!important}
.pf-anim .pf-d65{animation-delay:-1.24s!important}
.pf-anim .pf-d66{animation-delay:-3.9s!important}
.pf-anim .pf-d67{animation-delay:-1.91s!important}
.pf-anim .pf-d68{animation-delay:-2.88s!important}
.pf-anim .pf-d69{animation-delay:-3.08s!important}
.pf-anim .pf-d70{animation-delay:-0.53s!important}
.pf-anim .pf-d71{animation-delay:-2.32s!important}
.pf-anim .pf-d72{animation-delay:-2.56s!important}
.pf-anim .pf-d73{animation-delay:-3.68s!important}
.pf-anim .pf-d74{animation-delay:-3.41s!important}
.pf-anim .pf-d75{animation-delay:-2.11s!important}
.pf-anim .pf-d76{animation-delay:-0.1s!important}
.pf-anim .pf-d77{animation-delay:-1.4s!important}
.pf-anim .pf-d78{animation-delay:-1.66s!important}
.pf-anim .pf-d79{animation-delay:-2.73s!important}
.pf-anim .pf-d80{animation-delay:-3.87s!important}
.pf-anim .pf-d81{animation-delay:-1.89s!important}
.pf-anim .pf-d82{animation-delay:-3.22s!important}
.pf-anim .pf-d83{animation-delay:-2.42s!important}
.pf-anim .pf-d84{animation-delay:-1.19s!important}
.pf-anim .pf-d85{animation-delay:-3.58s!important}
.pf-anim .pf-d86{animation-delay:-2.97s!important}
.pf-anim .pf-d87{animation-delay:-0.93s!important}
.pf-anim .pf-d88{animation-delay:-2.16s!important}
.pf-anim .pf-d89{animation-delay:-0.14s!important}
.pf-anim .pf-d90{animation-delay:-1.53s!important}
.pf-anim .pf-d91{animation-delay:-0.51s!important}
.pf-anim .pf-d92{animation-delay:-2.63s!important}
.pf-anim .pf-d93{animation-delay:-3.37s!important}
.pf-anim .pf-d94{animation-delay:-3.81s!important}
.pf-anim .pf-d95{animation-delay:-1.83s!important}
.pf-anim .pf-d96{animation-delay:-1.25s!important}
.pf-anim .pf-d97{animation-delay:-3s!important}
.pf-anim .pf-d98{animation-delay:-0.82s!important}
.pf-anim .pf-d99{animation-delay:-0.23s!important}
.pf-anim .pf-d100{animation-delay:-3.61s!important}
.pf-anim .pf-d101{animation-delay:-0.71s!important}
.pf-anim .pf-d102{animation-delay:-0.00s!important}
.pf-anim .pf-d103{animation-delay:-1.86s!important}
.pf-anim .pf-d104{animation-delay:-0.62s!important}
.pf-anim .pf-d105{animation-delay:-0.31s!important}

/*
 * priorityfield.com. Tokens only (packages/ui/src/tokens.css, prepended at build); no raw colours here (stylelint).
 * Layout: one content column ≤ 1200px (75rem), 16px gutters, works from 360px. Type: 48/32 headings on wide screens,
 * 32/24 on phones, 20 for sub-heads, 16 body, 14/12 for notes and chips. No script; the hero mark is the only motion.
 */

/* ---- base ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--type-16);
  line-height: var(--type-16-line);
}
img,
svg {
  display: block;
  max-width: 100%;
}
h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}
a {
  color: var(--accent-text);
  text-underline-offset: 0.15em;
}
:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-s);
}
main:focus {
  outline: none;
}
[id] {
  /* clears the sticky top bar, which wraps to two rows on phones */
  scroll-margin-top: 7rem;
}

/* ---- skip link ---- */
.skip {
  position: absolute;
  left: var(--space-4);
  top: var(--space-2);
  z-index: var(--z-focus-trap);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-raised);
  color: var(--text-primary);
  font-weight: 600;
  border-radius: var(--radius-s);
  transform: translateY(-200%);
}
.skip:focus {
  transform: none;
}

/* ---- buttons ---- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  background: var(--bg-raised);
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--type-16);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--motion-micro) var(--ease-out);
}
@media (hover: hover) {
  a.button:hover {
    background: var(--bg-surface);
  }
  a.button-primary:hover {
    background: var(--accent-text);
  }
}
.button-primary {
  border-color: var(--accent-fill);
  background: var(--accent-fill);
  color: var(--accent-on);
}
.button-l {
  min-height: 48px;
  padding: 0 var(--space-5);
}
.button-s {
  min-height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--type-14);
}
@media (pointer: coarse) {
  .button {
    min-height: var(--hit-touch);
  }
}

/* ---- top bar ---- */
.top {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
}
.top-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  max-width: 75rem;
  margin: 0 auto;
  padding: var(--space-2) var(--space-4);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--hit-touch);
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--type-16);
  text-decoration: none;
}
.nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-right: auto;
}
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-touch);
  padding: 0 var(--space-3);
  color: var(--text-secondary);
  font-size: var(--type-14);
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-s);
}
@media (hover: hover) {
  .nav a:hover {
    color: var(--text-primary);
  }
}
.nav a[aria-current="page"] {
  color: var(--text-primary);
  box-shadow: inset 0 -2px 0 var(--accent-fill);
}
/* phones: brand and the invite button on the first row, the links on their own row below */
@media (max-width: 47.99rem) {
  .top-inner {
    padding-bottom: 0;
  }
  .brand {
    margin-right: auto;
  }
  .top-cta {
    min-height: 40px;
    padding: 0 var(--space-3);
    font-size: var(--type-14);
  }
  .nav {
    order: 3;
    width: 100%;
    margin: 0 calc(-1 * var(--space-3));
  }
}

/* ---- shared section layout ---- */
.section {
  padding: var(--space-8) var(--space-4);
}
.section-alt {
  background: var(--bg-surface);
  border-block: 1px solid var(--border-subtle);
}
.section-inner {
  max-width: 75rem;
  margin: 0 auto;
}
.section h2 {
  font-size: var(--type-32);
  line-height: var(--type-32-line);
  font-weight: 700;
  max-width: 40rem;
}
.section-lede {
  margin-top: var(--space-3);
  max-width: 40rem;
  color: var(--text-secondary);
}
.kicker {
  color: var(--accent-text);
  font-size: var(--type-12);
  line-height: var(--type-12-line);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lede {
  color: var(--text-secondary);
  font-size: var(--type-20);
  line-height: var(--type-20-line);
}

/* ---- hero ---- */
.hero {
  padding: var(--space-8) var(--space-4);
  background: radial-gradient(ellipse 60% 80% at 20% 45%, var(--bg-surface), var(--bg-canvas));
  border-bottom: 1px solid var(--border-subtle);
}
.hero-inner {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  max-width: 75rem;
  margin: 0 auto;
}
.hero-mark {
  justify-self: center;
  width: 10rem;
  aspect-ratio: 1;
}
.hero-mark svg {
  width: 100%;
  height: 100%;
}
.hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.hero h1 {
  font-size: var(--type-32);
  line-height: var(--type-32-line);
  font-weight: 700;
  letter-spacing: -0.01em;
  max-width: 18em;
}
.hero .lede {
  max-width: 36rem;
}
.badge {
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: var(--type-12);
  line-height: var(--type-12-line);
  font-weight: 600;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
@media (min-width: 48rem) {
  .hero {
    padding-block: var(--space-8);
  }
  .hero-inner {
    grid-template-columns: auto 1fr;
    gap: var(--space-7);
  }
  .hero-mark {
    width: 12.5rem;
  }
  .hero h1 {
    font-size: var(--type-48);
    line-height: var(--type-48-line);
  }
}

/* ---- features ---- */
.feature {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  margin-top: var(--space-7);
}
.feature-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 34rem;
}
.feature h3 {
  font-size: var(--type-24);
  line-height: var(--type-24-line);
  font-weight: 600;
}
.feature-text > p:not(.kicker) {
  color: var(--text-secondary);
}
.ticks {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}
.ticks li {
  position: relative;
  padding-left: var(--space-5);
}
.ticks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--success-text);
  font-weight: 700;
}
@media (min-width: 60rem) {
  .feature {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
  }
  .feature:nth-of-type(even) .feature-text {
    order: 2;
  }
}

/* ---- the drawn UI pictures (made-up players, no card art) ---- */
.shot {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 32rem;
  justify-self: center;
}
.shot figcaption {
  color: var(--text-secondary);
  font-size: var(--type-14);
  line-height: var(--type-14-line);
}
.tile,
.pop,
.deck {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-m);
  box-shadow: var(--elev-2);
  font-size: var(--type-14);
  line-height: var(--type-14-line);
}
.tile {
  overflow: hidden;
  border: 2px solid var(--accent-fill);
}
.tile-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: var(--space-2) var(--space-3);
}
.seat {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid var(--seat-2);
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--type-12);
}
.tile-name {
  font-weight: 600;
}
.tile-life {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-left: auto;
}
.life {
  font-size: var(--type-32);
  line-height: var(--type-32-line);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.delta {
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--bg-raised);
  color: var(--danger-text);
  font-weight: 600;
  font-size: var(--type-12);
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  background: var(--bg-raised);
  color: var(--text-primary);
  font-size: var(--type-12);
  line-height: var(--type-12-line);
  font-weight: 600;
  white-space: nowrap;
}
.chip-active {
  border-color: var(--accent-fill);
  color: var(--accent-text);
}
.chip-ok {
  border-color: var(--success-text);
  color: var(--success-text);
}
.tile-video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: radial-gradient(ellipse at 50% 35%, var(--bg-raised), var(--bg-inset));
  overflow: hidden;
}
.felt-card {
  position: absolute;
  top: 28%;
  width: 18%;
  aspect-ratio: 63 / 88;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  background: linear-gradient(var(--bg-surface), var(--bg-raised));
}
.felt-card-a {
  left: 18%;
  transform: rotate(-4deg);
}
.felt-card-b {
  left: 41%;
  top: 24%;
}
.felt-card-c {
  left: 64%;
  transform: rotate(5deg);
}
.outline {
  position: absolute;
  inset: -4px;
  border: 2px solid var(--focus-ring);
  border-radius: var(--radius-s);
}
.name-chip {
  position: absolute;
  left: 41%;
  top: 11%;
  padding: 0 var(--space-2);
  border-radius: var(--radius-s);
  background: var(--bg-raised);
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--type-12);
  line-height: var(--type-12-line);
}
.tile-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-height: 32px;
  padding: var(--space-2) var(--space-3);
}
.pop,
.deck {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}
.pop-kicker,
.pop-meta,
.pop-alt,
.deck-meta {
  color: var(--text-secondary);
}
.pop-name,
.deck-name {
  font-size: var(--type-24);
  line-height: var(--type-24-line);
  font-weight: 600;
}
.pop-name-s {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--type-20);
  line-height: var(--type-20-line);
}
.lock {
  flex: none;
  color: var(--success-text);
}
.pop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: var(--space-2);
}
.code {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  list-style: none;
}
.code li {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-s);
  background: var(--bg-raised);
  font-weight: 500;
}
.code .code-more {
  border-style: dashed;
  color: var(--text-secondary);
}
.deck-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.pip {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-full);
  background: var(--orb-r);
  color: var(--accent-on);
  font-weight: 700;
  font-size: var(--type-12);
}
.deck-check {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-s);
  background: var(--bg-raised);
  color: var(--success-text);
  font-weight: 600;
}
.deck-list {
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style: none;
}
.deck-list li {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--border-subtle);
}
.deck-list span {
  min-width: 2ch;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---- how a game works ---- */
.steps {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4) var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-m);
  background: var(--bg-canvas);
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--accent-fill);
  border-radius: var(--radius-full);
  color: var(--accent-text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.steps h3 {
  font-size: var(--type-20);
  line-height: var(--type-20-line);
  font-weight: 600;
}
.steps p {
  color: var(--text-secondary);
}
@media (min-width: 40rem) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 64rem) {
  .steps {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* ---- call to action ---- */
.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}
.cta > p {
  max-width: 36rem;
  color: var(--text-secondary);
}
.cta .cta-note {
  font-size: var(--type-14);
}

/* ---- text pages (terms, privacy, contact, 404): a ≤ 40rem reading column, as in the app ---- */
.page {
  padding: var(--space-6) var(--space-4) var(--space-8);
}
.article {
  max-width: 40rem;
  margin: 0 auto;
}
.article h1 {
  font-size: var(--type-32);
  line-height: var(--type-32-line);
  font-weight: 600;
}
.article .lede {
  margin: var(--space-3) 0 var(--space-5);
}
.notice {
  margin: 0 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-left: var(--space-1) solid var(--warning-text);
  border-radius: var(--radius-s);
}
.updated {
  margin: var(--space-1) 0 var(--space-5);
  color: var(--text-secondary);
  font-size: var(--type-14);
}
.updated time {
  font-variant-numeric: tabular-nums;
}
.legal-body h2 {
  margin: var(--space-6) 0 var(--space-2);
  font-size: var(--type-20);
  line-height: var(--type-20-line);
  font-weight: 600;
}
.legal-body p,
.legal-body li {
  overflow-wrap: anywhere;
}
.legal-body p {
  margin: 0 0 var(--space-3);
}
.legal-body ul {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
}
.legal-body li + li {
  margin-top: var(--space-2);
}
.contacts {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0;
  list-style: none;
}
.contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-m);
}
.contact h2 {
  font-size: var(--type-20);
  line-height: var(--type-20-line);
  font-weight: 600;
}
.contact p {
  color: var(--text-secondary);
}
.mail {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-touch);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* ---- footer ---- */
.foot {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--type-14);
  line-height: var(--type-14-line);
}
.foot-inner {
  display: grid;
  gap: var(--space-4);
  max-width: 75rem;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}
.foot-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  color: var(--text-secondary);
}
.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}
.foot-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-touch);
  padding: 0 var(--space-2);
  font-weight: 500;
}
.foot-note {
  color: var(--text-muted);
  max-width: 48rem;
}