/* Spell Sanctum: one stylesheet for every page.

   The look is the app's own. The ground and accent are the app's pre-game "setup brand"
   (Basalt + Pumpkin, the lobby's embers, Space Grotesk / IBM Plex), and anything that
   stands for the table itself is drawn in the table's default room, Arcane: violet felt,
   rail and room. Tiles, grids and buttons copy the lobby's seat tiles and the side
   panel's button grid rather than inventing a new component set. */

/* ------------------------------------------------------------------ tokens */
:root {
  /* Basalt: true-neutral, so Pumpkin is the only colour on the ground. */
  --abyss: #0a0a0c;
  --deep: #101014;
  --basalt: #18181e;
  --raised: #212129;
  --line: #2e2e39;
  --line-soft: rgba(255, 255, 255, 0.07);

  --pumpkin: #e58033;
  --pumpkin-light: #f4ac6f;
  --pumpkin-deep: #c96716;
  --pumpkin-rgb: 229, 128, 51;
  --on-accent: #1f0c00;

  --ink: #eceef3;
  --muted: #a0a4b2;

  /* Arcane, the app's default room: the table's own colours. */
  --felt: #150e24;
  --felt-glow: rgba(140, 100, 210, 0.26);
  --rail: #291a40;
  --rail-edge: rgba(206, 180, 255, 0.13);
  --room: radial-gradient(circle at 50% 40%, #35205c 0%, #150d26 62%, #070410 100%);
  --violet-rgb: 140, 100, 210;

  --radius: 12px;
  --radius-lg: 18px;
  --wrap: 1180px;
  --gutter: clamp(16px, 4vw, 40px);

  --font-head: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* The table camera's easing (client .world): slow out, no bounce. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  color-scheme: dark;
}

/* -------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--abyss);
  color: var(--ink);
  font: 400 17px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
a { color: var(--pumpkin-light); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pumpkin); }
p { margin: 0 0 1em; }
strong, b { font-weight: 600; color: var(--ink); }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}
p, li { text-wrap: pretty; }

:focus-visible {
  outline: 2px solid var(--pumpkin-light);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: rgba(var(--pumpkin-rgb), 0.35); color: var(--ink); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 14px; border-radius: 10px;
  background: var(--pumpkin); color: var(--on-accent); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Anchored sections and answers land below the sticky header. */
section[id], details[id] { scroll-margin-top: 88px; }
@media (max-width: 720px) { section[id], details[id] { scroll-margin-top: 124px; } }

/* ----------------------------------------------------------------- layout */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: 820px; }
.section { padding-block: clamp(88px, 12vw, 168px); position: relative; }
.section-tight { padding-block: clamp(56px, 8vw, 104px); }
.center { text-align: center; }
.center .lede, .center .section-head p { margin-inline: auto; }

/* ------------------------------------------------------------------- type */
.eyebrow {
  display: inline-block;
  margin: 0 0 18px;
  font: 500 15px/1.25 var(--font-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pumpkin);
}
/* A label with a · breaks at the dot, never inside a phrase. */
.eyebrow .nb { white-space: nowrap; }
.display {
  font-size: clamp(48px, 8.2vw, 108px);
  letter-spacing: -0.035em;
  line-height: 0.98;
}
.display .glow {
  background: linear-gradient(100deg, var(--pumpkin-light) 0%, var(--pumpkin) 55%, var(--pumpkin-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.h2 { font-size: clamp(36px, 5.2vw, 64px); letter-spacing: -0.03em; line-height: 1.02; }
.h3 { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -0.02em; }
.lede {
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.55;
  color: var(--muted);
  max-width: 40ch;
}
.section-head { margin-bottom: clamp(40px, 6vw, 72px); }
.section-head p:not(.eyebrow) { color: var(--muted); max-width: 56ch; font-size: 19px; margin-top: 18px; }
.section-head.center p:not(.eyebrow) { margin-inline: auto; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.mono { font-family: var(--font-mono); }

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px;
  padding: 12px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  font: 600 16px/1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.btn:hover { background: rgba(255, 255, 255, 0.12); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--pumpkin);
  border-color: transparent;
  color: var(--on-accent);
  box-shadow: 0 12px 34px rgba(var(--pumpkin-rgb), 0.28);
}
.btn-primary:hover { background: #ee8d42; color: var(--on-accent); box-shadow: 0 14px 40px rgba(var(--pumpkin-rgb), 0.38); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--pumpkin-light); padding-inline: 10px; }
.btn-ghost:hover { background: rgba(var(--pumpkin-rgb), 0.1); color: var(--pumpkin-light); }
.btn-sm { min-height: 38px; padding: 8px 16px; font-size: 14.5px; border-radius: 10px; }
.btn-lg { min-height: 56px; padding: 15px 28px; font-size: 17px; }
.btn .arrow { transition: transform 200ms var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* A link or asset that isn't live yet: plainly "on its way", never broken. */
.is-soon,
.is-soon:hover {
  background: transparent;
  border: 1px dashed rgba(var(--pumpkin-rgb), 0.45);
  color: var(--pumpkin-light);
  box-shadow: none;
  cursor: default;
  transform: none;
}
.is-soon::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pumpkin);
  box-shadow: 0 0 10px 2px rgba(var(--pumpkin-rgb), 0.55);
  flex: none;
}
.btn-ghost.is-soon { border-color: transparent; }
a.is-soon:not(.btn) { display: inline-flex; align-items: center; gap: 8px; border: 0; text-decoration: none; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.center .btn-row { justify-content: center; }

/* ----------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 10, 12, 0.72);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--line-soft);
}
.header-inner {
  display: flex; align-items: center; gap: 28px;
  min-height: 66px;
}
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  color: var(--ink); text-decoration: none;
  margin-right: auto;
}
.brand:hover { color: var(--ink); }
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-name { font: 700 19px/1 var(--font-head); letter-spacing: -0.02em; }
/* The wordmark is two-tone: "Sanctum" in pumpkin, as on the film's end card. */
.brand-accent { color: var(--pumpkin); }
.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav a {
  position: relative;
  color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500;
  padding-block: 6px;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: -4px;
  width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
  background: var(--pumpkin); box-shadow: 0 0 8px rgba(var(--pumpkin-rgb), 0.8);
}

@media (max-width: 720px) {
  .header-inner { flex-wrap: wrap; row-gap: 0; gap: 12px; padding-block: 10px; }
  .site-nav { order: 3; width: 100%; justify-content: center; gap: 28px; padding-bottom: 2px; }
  .brand-name { font-size: 18px; }
}

/* ------------------------------------------------------------------ footer */
.site-footer {
  border-top: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--abyss), #07070a);
  padding-block: 64px 48px;
  font-size: 14.5px;
  color: var(--muted);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.7fr) minmax(0, 1.6fr);
  gap: 40px;
}
.footer-tag { margin: 14px 0 0; }
.footer-nav { display: flex; flex-direction: column; gap: 10px; }
.footer-nav a { color: var(--muted); text-decoration: none; }
.footer-nav a:hover { color: var(--ink); }
.footer-legal p { margin: 0 0 12px; }
.footer-legal a { color: var(--muted); }
.footer-legal a:hover { color: var(--ink); }
.notice { color: #b9bcc8; }
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-nav { flex-direction: row; flex-wrap: wrap; gap: 10px 24px; }
}

/* ------------------------------------------------------------------ embers
   The lobby's embers (client Embers.tsx), same layout, same keyframes. */
.embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* The home page's embers: one layer fixed to the screen, so they rise the whole way down the
   page. It sits over the section backgrounds and under the content (every .wrap is lifted
   above it), so no ember ever crosses a video, a card or a line of text. */
.embers-page { position: fixed; z-index: 0; }
body:has(.embers-page) .wrap { position: relative; z-index: 1; }
/* The footer stays solid black over the embers: they rise out of its top edge, where the
   final section's glow sits, and never drift through the footer itself. */
body:has(.embers-page) .site-footer { position: relative; z-index: 2; }
.ember {
  position: absolute; bottom: -10px; border-radius: 50%;
  background: radial-gradient(circle, rgba(250, 186, 120, 1) 0%, rgba(235, 140, 55, 0.5) 55%, transparent 75%);
  filter: blur(0.7px);
  animation: ember-rise linear infinite;
}
@keyframes ember-rise {
  0% { transform: translateY(0) translateX(0) scale(0.85); opacity: 0; }
  12% { opacity: 0.97; }
  100% { transform: translateY(-90vh) translateX(var(--drift, 14px)) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ember { animation: none; opacity: 0.35; }
}

/* ------------------------------------------------------- media placeholders
   A slot is where a real recording goes. Until it arrives, the slot shows the empty
   table in its room with a calm label, so it reads as "set, waiting", never broken. */
.slot {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 22px;
  overflow: hidden;
  background: var(--room);
  border: 1px solid rgba(206, 180, 255, 0.12);
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.4);
  isolation: isolate;
}
.slot-wide { aspect-ratio: 16 / 9; }
.slot > video, .slot > img.slot-media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
}
.slot[data-state="media"] .slot-empty { visibility: hidden; }
.slot-play, .slot-toggle {
  position: absolute; z-index: 3;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--ink);
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background 160ms ease, transform 160ms ease;
}
.slot-play {
  left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px;
  border-radius: 50%;
  background: var(--pumpkin); color: var(--on-accent); border-color: transparent;
  box-shadow: 0 14px 40px rgba(var(--pumpkin-rgb), 0.35);
}
.slot-play svg { width: 28px; height: 28px; margin-left: 4px; }
.slot-play:hover { transform: scale(1.05); }
.slot-toggle {
  right: 14px; bottom: 14px; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(10, 10, 12, 0.55);
  opacity: 0.7;
}
.slot-toggle svg { width: 15px; height: 15px; }
.slot:hover .slot-toggle, .slot-toggle:focus-visible { opacity: 1; }
.slot-play[hidden], .slot-toggle[hidden] { display: none; }
.slot-empty { position: absolute; inset: 0; }

/* The hero's "watch the full video" flame button: shows over the still-playing loop when
   it's clicked, fades after a few seconds. Solid, never blurred: Scryfall forbids blurring cards.
   The full film itself waits hidden behind the loop
   and only appears in the device's fullscreen player. */
.slot[data-full] > video { cursor: pointer; }
.slot-full {
  position: absolute; z-index: 4; left: 50%; top: 50%;
  display: flex; align-items: center; gap: 14px;
  padding: 20px 34px 20px 26px;
  border: 0; border-radius: 999px; overflow: hidden;
  background: linear-gradient(100deg, var(--pumpkin-light) 0%, var(--pumpkin) 55%, var(--pumpkin-deep) 100%);
  color: var(--on-accent);
  font: 700 24px/1 var(--font-head); letter-spacing: -0.01em; white-space: nowrap;
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%) scale(0.94);
  transition: opacity 220ms ease, transform 220ms ease;
  animation: full-breathe 2.6s ease-in-out infinite;
}
.slot.is-offering .slot-full { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }
.slot.is-offering .slot-full:hover { transform: translate(-50%, -50%) scale(1.04); }
.slot-full:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.slot-full svg { width: 26px; height: 26px; flex: none; }
.slot-full-arrow { font-size: 26px; margin-left: 2px; transition: transform 160ms ease; }
.slot-full:hover .slot-full-arrow { transform: translateX(4px); }
/* A streak of light sweeps across now and then. */
.slot-full::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  animation: full-sweep 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes full-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(var(--pumpkin-rgb), 0.6), 0 0 40px rgba(var(--pumpkin-rgb), 0.55), 0 0 90px rgba(var(--pumpkin-rgb), 0.3); }
  50% { box-shadow: 0 0 0 1px rgba(var(--pumpkin-rgb), 0.9), 0 0 60px rgba(var(--pumpkin-rgb), 0.8), 0 0 130px rgba(var(--pumpkin-rgb), 0.45); }
}
@keyframes full-sweep {
  0% { transform: translateX(-120%) skewX(-20deg); }
  60%, 100% { transform: translateX(380%) skewX(-20deg); }
}
@media (prefers-reduced-motion: reduce) {
  .slot-full { animation: none; box-shadow: 0 0 50px rgba(var(--pumpkin-rgb), 0.6); }
  .slot-full::after { display: none; }
}
@media (max-width: 640px) {
  .slot-full { gap: 10px; padding: 13px 22px 13px 18px; font-size: 17px; }
  .slot-full svg { width: 19px; height: 19px; }
  .slot-full-arrow { font-size: 19px; }
}
.slot-film {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; opacity: 0; pointer-events: none;
}
.slot-film:fullscreen { opacity: 1; pointer-events: auto; background: #000; object-fit: contain; }
.slot-film:-webkit-full-screen { opacity: 1; pointer-events: auto; background: #000; object-fit: contain; }

/* The app's own table surface (client .table-surface), scaled down. */
.felt {
  position: absolute;
  inset: 20% 17%;
  border-radius: 34px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 40%),
    radial-gradient(ellipse at 50% 34%, var(--felt-glow), rgba(7, 4, 16, 0.86) 70%),
    var(--felt);
  border: var(--rail-w, 10px) solid transparent;
  background-clip: padding-box;
  box-shadow:
    0 0 0 var(--rail-w, 10px) var(--rail),
    0 0 0 calc(var(--rail-w, 10px) + 1px) var(--rail-edge),
    inset 0 0 90px rgba(0, 0, 0, 0.65),
    0 34px 90px rgba(0, 0, 0, 0.55);
}
.felt::after {
  content: ""; position: absolute; inset: 7%;
  border-radius: 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.4);
}
.slot-label {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center; width: max-content; max-width: 86%;
}
.slot-label .tag {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(10, 10, 12, 0.66);
  border: 1px solid rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 500 12px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink);
}
.slot-label .tag::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--pumpkin); box-shadow: 0 0 10px 2px rgba(var(--pumpkin-rgb), 0.6);
}
.slot-label .note { font-size: 14px; color: rgba(236, 238, 243, 0.72); }

/* ------------------------------------------------------------ scroll reveal */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------- page head */
.page-head {
  position: relative;
  padding-block: clamp(72px, 10vw, 136px) clamp(40px, 6vw, 72px);
  overflow: hidden;
}
.page-head::before {
  content: ""; position: absolute; inset: -40% -10% auto; height: 120%;
  background: radial-gradient(ellipse at 50% 30%, rgba(var(--pumpkin-rgb), 0.12), transparent 60%);
  pointer-events: none;
}
.page-head .wrap { position: relative; }
.page-head .display { font-size: clamp(44px, 7vw, 88px); }
.page-head .lede { margin-top: 22px; }

/* =================================================================== HOME */

/* ------------------------------------------------------------------- hero */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(72px, 10vw, 128px) clamp(72px, 9vw, 120px);
  background:
    radial-gradient(ellipse 60% 45% at 50% 0%, rgba(var(--pumpkin-rgb), 0.13), transparent 70%),
    radial-gradient(circle at 50% 38%, #18181e 0%, #101014 55%, var(--abyss) 100%);
}
.hero-copy { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
.hero .lede { margin: 28px auto 38px; max-width: 36ch; }
.hero .btn-row { justify-content: center; }
.hero-note { margin: 20px 0 0; font-size: 14.5px; color: var(--muted); }
.play { width: 15px; height: 15px; }
.is-soon .play { display: none; }

.stage-wrap { position: relative; z-index: 1; margin-top: clamp(64px, 8vw, 104px); perspective: 1800px; }
.stage {
  position: relative;
  transform-origin: 50% 0%;
  transform: rotateX(var(--tilt, 0deg)) scale(var(--lift, 1));
  will-change: transform;
}
/* The room's violet light spilling out from under the table. */
.stage::before {
  content: ""; position: absolute; inset: 6% -6% -12%; z-index: -1;
  background: radial-gradient(ellipse at 50% 55%, rgba(var(--violet-rgb), 0.42), transparent 68%);
  filter: blur(40px);
}
.slot-wide .felt { inset: 17% 22%; }
/* The hero's empty table: the real four-seat layout, nobody sat down yet. */
.slot .mini-table-bare {
  position: absolute; inset: 5% 6%;
  margin: 0; aspect-ratio: auto;
  background: none; border: 0; border-radius: 0; overflow: visible;
}
.slot .mini-table-bare .mt-felt { box-shadow: 0 0 0 9px var(--rail), 0 0 0 10px var(--rail-edge), inset 0 0 80px rgba(0, 0, 0, 0.6), 0 30px 80px rgba(0, 0, 0, 0.55); }
.slot .mini-table-bare .mt-board { border-color: rgba(255, 255, 255, 0.1); }
.slot .mini-table-bare .mt-board.me { border-color: rgba(255, 255, 255, 0.1); }

/* ---------------------------------------------------------------- values */
.values {
  list-style: none; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin: 0 0 clamp(110px, 14vw, 180px);
}
/* Each value is a link down to the part of the page that shows it. */
.values li { display: flex; }
.values a {
  padding: 11px 20px; border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
  font: 500 13px/1.2 var(--font-mono); letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.values a:hover { border-color: rgba(var(--pumpkin-rgb), 0.55); background: rgba(var(--pumpkin-rgb), 0.08); color: var(--pumpkin-light); }
.values li:first-child a { border-color: rgba(var(--pumpkin-rgb), 0.55); color: var(--pumpkin-light); }
/* Where the value links land, clear of the sticky header. The comparison row glows for a moment. */
.split[id] { scroll-margin-top: 110px; }
/* A comparison row lands low enough that the column names above it stay in view. */
tr[id] { scroll-margin-top: 230px; }
@media (max-width: 720px) { .split[id], tr[id] { scroll-margin-top: 140px; } }
tr:target > * { animation: row-flash 2.4s ease-out; }
@keyframes row-flash { 0%, 30% { background: rgba(var(--pumpkin-rgb), 0.16); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { tr:target > * { animation: none; background: rgba(var(--pumpkin-rgb), 0.12); } }

/* ----------------------------------------------------------------- splits */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.split + .split { margin-top: clamp(120px, 15vw, 200px); }
.split-flip .split-copy { order: 2; }
.split .h2 { margin-bottom: 24px; }
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split-flip .split-copy { order: 0; }
}
figure { margin: 0; }

/* The lobby card (client .lobby-card): the panel every demo sits on. */
.card {
  background: rgba(24, 24, 30, 0.94);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  padding: clamp(18px, 2.4vw, 26px);
}
.demo-foot { margin-top: 16px; font-size: 13.5px; color: var(--muted); text-align: center; }

/* The app's own small buttons (client base button / button.primary). */
.app-btn {
  font: 500 14px/1.45 var(--font-body);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 5px 11px;
  cursor: pointer;
  white-space: nowrap;
}
.app-btn:hover { background: rgba(255, 255, 255, 0.14); }
.app-btn.primary { background: var(--pumpkin); color: var(--on-accent); border-color: transparent; font-weight: 600; }
.app-btn.primary:hover { background: #ee8d42; }

/* ------------------------------------------------------ 01: the seat demo */
.demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.demo-label {
  font: 500 12px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
/* client .seat-count-grid */
.seat-count { display: flex; gap: 8px; }
.seat-count button {
  width: 42px; height: 42px; padding: 0;
  font: 700 16px/1 var(--font-body); color: var(--ink);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: background 160ms ease;
}
.seat-count button:hover { background: rgba(255, 255, 255, 0.14); }
.seat-count button[aria-pressed="true"] { background: var(--pumpkin); color: var(--on-accent); border-color: transparent; }
@media (max-width: 420px) { .seat-count button { width: 38px; height: 38px; } }

.mini-table {
  position: relative;
  margin-top: 18px;
  aspect-ratio: 16 / 11;
  border-radius: 14px;
  overflow: hidden;
  background: var(--room);
  border: 1px solid rgba(206, 180, 255, 0.1);
}
.mt-felt, .mt-board {
  position: absolute;
  transition:
    left 1000ms var(--ease), top 1000ms var(--ease),
    width 1000ms var(--ease), height 1000ms var(--ease),
    border-radius 1000ms var(--ease), opacity 600ms ease;
}
.mt-felt {
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 40%),
    radial-gradient(ellipse at 50% 34%, var(--felt-glow), rgba(7, 4, 16, 0.86) 70%),
    var(--felt);
  box-shadow: 0 0 0 4px var(--rail), 0 0 0 5px var(--rail-edge), inset 0 0 30px rgba(0, 0, 0, 0.55), 0 16px 40px rgba(0, 0, 0, 0.5);
}
/* client .board-felt + .board-felt-veil */
.mt-board {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.22)), rgba(12, 8, 22, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 2px 14px rgba(0, 0, 0, 0.45);
  display: grid; place-items: center;
  overflow: hidden;
}
.mt-board.me { border-color: rgba(var(--pumpkin-rgb), 0.7); }
.mt-board.gone { opacity: 0; }
.mt-board.enter { opacity: 0; transition: none; }
.mini-table.no-glide > * { transition: none !important; }
/* The zone strip along each player's own edge. */
.mt-strip { position: absolute; background: rgba(0, 0, 0, 0.35); }
.mt-board[data-side="S"] .mt-strip { left: 0; right: 0; bottom: 0; height: 24%; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.mt-board[data-side="N"] .mt-strip { left: 0; right: 0; top: 0; height: 24%; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.mt-board[data-side="W"] .mt-strip { top: 0; bottom: 0; left: 0; width: 24%; border-right: 1px solid rgba(255, 255, 255, 0.07); }
.mt-board[data-side="E"] .mt-strip { top: 0; bottom: 0; right: 0; width: 24%; border-left: 1px solid rgba(255, 255, 255, 0.07); }
.mt-name {
  position: relative;
  font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(236, 238, 243, 0.8);
  padding: 4px 7px; border-radius: 6px; background: rgba(10, 10, 12, 0.55);
}
.mt-board.me .mt-name { color: var(--pumpkin-light); }
/* A player's life chip in the middle bar, filled with their seat colour like the app's. */
.mt-chip {
  position: absolute;
  display: flex; align-items: center; gap: 0.35em;
  padding: 0 0.6em 0 0.45em;
  box-sizing: border-box;
  color: #fff; font-weight: 700; line-height: 1; white-space: nowrap; overflow: hidden;
  background: linear-gradient(90deg, color-mix(in srgb, var(--seat) 78%, #0c0c12), color-mix(in srgb, var(--seat) 38%, #0a0910));
  border: 1px solid color-mix(in srgb, var(--seat) 75%, #fff 15%);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
  transition:
    left 1000ms var(--ease), top 1000ms var(--ease),
    width 1000ms var(--ease), height 1000ms var(--ease), opacity 600ms ease;
}
.mt-chip.me { border-color: rgba(var(--pumpkin-rgb), 0.95); }
.mt-chip.gone, .mt-chip.enter { opacity: 0; }
.mt-chip.enter { transition: none; }
.mt-chip-dir { font-size: 0.7em; opacity: 0.8; }
.mt-chip[data-side="N"] .mt-chip-dir::before { content: "\25B2"; }
.mt-chip[data-side="S"] .mt-chip-dir::before { content: "\25BC"; }
.mt-chip-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.mt-chip-life { font-family: var(--font-head); font-size: 1.7em; font-variant-numeric: tabular-nums; }
.mt-chip.tiny > * { visibility: hidden; }
.demo-caption {
  margin-top: 18px; text-align: center;
  font: 700 clamp(26px, 3vw, 36px)/1.1 var(--font-head); letter-spacing: -0.02em;
  min-height: 1.1em;
}
.demo-caption span { display: inline-block; transition: opacity 300ms ease, transform 300ms var(--ease); }
.demo-caption span.swap { opacity: 0; transform: translateY(8px); }

/* --------------------------------------------------------- 02: the link */
.link-demo { max-width: 540px; margin-inline: auto; width: 100%; }
.link-head { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #6fd39b; box-shadow: 0 0 0 4px rgba(111, 211, 155, 0.16); }
.link-field {
  margin-top: 14px;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px 12px 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.link-url {
  flex: 1; min-width: 0;
  font: 500 14px/1.3 var(--font-mono); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.copied {
  flex: none;
  font: 600 12.5px/1 var(--font-body); color: var(--on-accent);
  background: var(--pumpkin); border-radius: 6px; padding: 6px 9px;
}
.link-note { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.arrivals { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.arrivals li {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--basalt);
  border: 1px solid var(--line);
  font-size: 15px;
}
.arrivals li b { font-weight: 600; }
.arr-where { margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; }
.avatar {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--raised); border: 1px solid var(--line);
  font: 700 13px/1 var(--font-head);
}
.js .arrivals li { opacity: 0; transform: translateY(10px); transition: opacity 600ms ease, transform 600ms var(--ease); }
.js .in .arrivals li { opacity: 1; transform: none; transition-delay: calc(700ms + var(--i) * 450ms); }
@media (prefers-reduced-motion: reduce) { .js .arrivals li { opacity: 1; transform: none; transition: none; } }
@media (max-width: 440px) { .arr-where { display: none; } }

/* ---------------------------------------------------------- 03: the door */
.door-demo { position: relative; max-width: 560px; margin-inline: auto; width: 100%; padding-top: 34px; }
/* client .door-knock: floats over the lobby, pumpkin-edged. */
.door-knock {
  position: absolute; top: 0; left: 50%; z-index: 2;
  transform: translateX(-50%);
  width: min(480px, 94%);
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--basalt);
  border: 1px solid var(--pumpkin);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  font-size: 15px;
  transition: opacity 350ms ease, transform 450ms var(--ease);
}
.door-knock > span:first-child { flex: 1; min-width: 0; }
.door-knock.away { opacity: 0; transform: translate(-50%, -12px); pointer-events: none; }
.door-knock.knocking { animation: knock 600ms var(--ease) 2; }
@keyframes knock {
  0%, 100% { transform: translateX(-50%); }
  20% { transform: translateX(calc(-50% - 3px)); }
  40% { transform: translateX(calc(-50% + 3px)); }
  60% { transform: translateX(calc(-50% - 2px)); }
}
@media (prefers-reduced-motion: reduce) { .door-knock.knocking { animation: none; } }
/* No internet: the host's Wi-Fi room card (client .join-card), stacked and floating. */
.wifi-demo { margin: 0; width: 100%; max-width: 440px; margin-inline: auto; }
.wifi-card { animation: rd-float 7s ease-in-out infinite; }
.wifi-title { margin: 0 0 14px; font: 700 22px/1.2 var(--font-head); color: var(--ink); }
.wifi-join {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  padding: 20px 16px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.035);
}
.wifi-qr { display: block; width: 156px; height: 156px; border-radius: 8px; margin-bottom: 6px; }
.wifi-room { display: flex; align-items: center; gap: 12px; text-align: left; }
.wifi-badge {
  --room: #9b6cf2;
  display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%;
  color: var(--room);
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--room) 30%, transparent), color-mix(in srgb, var(--room) 12%, transparent) 70%);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--room) 70%, transparent), 0 0 18px color-mix(in srgb, var(--room) 22%, transparent);
}
.wifi-badge svg { width: 56%; height: 56%; }
.wifi-name { display: block; font-size: 16px; line-height: 1.2; color: var(--ink); }
.wifi-words { display: block; font-size: 12.5px; color: var(--muted); }
.wifi-how { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.wifi-address { margin: 0; font: 600 21px/1.2 var(--font-mono); color: var(--ink); overflow-wrap: anywhere; }
.wifi-pin { margin: 6px 0 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wifi-pin span { font-size: 12px; color: var(--muted); }
.wifi-pin b { font: 700 34px/1 var(--font-mono); letter-spacing: 0.18em; text-indent: 0.18em; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .wifi-card { animation: none; } }
/* Never lose a game: the Resume screen, floating. */
.resume-demo { margin: 0; width: 100%; max-width: 600px; margin-inline: auto; }
.resume-demo img {
  display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid rgba(var(--pumpkin-rgb), 0.45);
  background: var(--basalt); box-shadow: 0 24px 56px rgba(0, 0, 0, 0.55);
  animation: rd-float 7s ease-in-out infinite;
}
@keyframes rd-float { 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .resume-demo img { animation: none; } }
.lobby-card { padding-top: 46px; }
/* client .seat-grid / .seat */
.seat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.seat {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px; border-radius: 12px;
  background: var(--pumpkin); color: var(--on-accent);
  border: 1px solid transparent;
  transition: background 400ms ease, color 400ms ease, border-color 400ms ease;
}
.seat-no { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: color-mix(in srgb, var(--on-accent) 80%, transparent); }
.seat-who { font-size: 17px; font-weight: 600; }
.seat-deck { font-size: 12px; min-height: 1.4em; color: color-mix(in srgb, var(--on-accent) 80%, transparent); }
.seat.taken { background: rgba(255, 255, 255, 0.07); color: var(--ink); border-color: var(--line); }
.seat.taken .seat-no, .seat.taken .seat-deck { color: var(--muted); }
.saved-line { margin: 16px 0 0; font-size: 13.5px; color: var(--muted); }
.saved-line .tick { color: #6fd39b; font-weight: 700; margin-right: 8px; }
@media (max-width: 440px) {
  .door-knock { flex-wrap: wrap; }
  .door-knock > span:first-child { flex-basis: 100%; }
  .lobby-card { padding-top: 84px; }
  .door-demo { padding-top: 40px; }
}

/* -------------------------------------------------------------- compare */
.compare-wrap {
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--deep);
  overflow: hidden;
}
.compare { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15.5px; line-height: 1.45; }
.compare th, .compare td { padding: 15px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare thead th { font: 700 18px/1.2 var(--font-head); letter-spacing: -0.01em; padding-block: 22px 18px; background: var(--basalt); border-bottom: 1px solid var(--line); }
.compare th[scope="row"] { font-weight: 600; width: 22%; color: var(--ink); }
.compare td { color: #c9ccd6; width: 26%; }
/* The Spell Sanctum column, edged in pumpkin like the app's saved-table card. */
.compare .us { background: rgba(var(--pumpkin-rgb), 0.07); border-left: 1px solid rgba(var(--pumpkin-rgb), 0.4); border-right: 1px solid rgba(var(--pumpkin-rgb), 0.4); color: var(--ink); }
.compare thead .us { color: var(--pumpkin-light); background: rgba(var(--pumpkin-rgb), 0.12); }
.compare tbody tr:hover > * { background-color: rgba(255, 255, 255, 0.02); }
.compare tbody tr:hover > .us { background-color: rgba(var(--pumpkin-rgb), 0.1); }
.m-yes::before, .m-no::before, .m-soon::before {
  display: inline-block; width: 1.2em; font-weight: 700;
}
.m-yes::before { content: "✓"; color: #6fd39b; }
.m-no::before { content: "–"; color: var(--muted); }
.m-soon { color: var(--pumpkin-light); }
.m-soon::before { content: "◷"; color: var(--pumpkin); }
.m-unk { color: var(--muted); font-style: italic; }
.compare-note { margin: 22px auto 0; max-width: 72ch; text-align: center; font-size: 14.5px; color: var(--muted); }

@media (max-width: 760px) {
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: 100%; }
  .compare tr { padding: 16px 18px; border-bottom: 1px solid var(--line); }
  .compare tbody tr:last-child { border-bottom: 0; }
  .compare th[scope="row"] { padding: 0 0 10px; border: 0; width: 100%; font: 700 18px/1.2 var(--font-head); }
  .compare td { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 12px; padding: 7px 0; border: 0; width: 100%; }
  .compare td::before { content: attr(data-col); font-size: 13px; color: var(--muted); padding-top: 1px; }
  .compare .us { border: 0; background: rgba(var(--pumpkin-rgb), 0.08); border-radius: 8px; padding-inline: 8px; margin-inline: -8px; width: calc(100% + 16px); }
  .compare .us::before { color: var(--pumpkin-light); }
  .compare tbody tr:hover > * { background-color: transparent; }
  .compare tbody tr:hover > .us { background-color: rgba(var(--pumpkin-rgb), 0.08); }
}

/* ------------------------------------------------------------- features */
.feature {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
  padding-block: clamp(56px, 7vw, 96px);
  border-top: 1px solid var(--line-soft);
}
.feature:nth-of-type(even) .feature-copy { order: 2; }
/* The video keeps the wide column on the rows where the copy moves to the right. */
.feature:nth-of-type(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature .h3 { margin-bottom: 8px; }
.feature .felt { --rail-w: 6px; inset: 18% 15%; border-radius: 26px; }
.ticks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 14px; }
.ticks li { position: relative; padding-left: 26px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.ticks li b { color: var(--ink); font-weight: 600; }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: 0.55em;
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--pumpkin);
}
.soon-line { margin: 22px 0 0; font-size: 15px; color: var(--muted); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.soon-pill {
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--pumpkin-light); border: 1px dashed rgba(var(--pumpkin-rgb), 0.5);
  padding: 6px 9px; border-radius: 999px;
}
@media (max-width: 900px) {
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature:nth-of-type(even) { grid-template-columns: minmax(0, 1fr); }
  .feature:nth-of-type(even) .feature-copy { order: 0; }
}

/* A generic phone outline: no brand, no logo, a punch-hole camera.
   Proportioned like a current iPhone: the screen is 393 x 852 points (the body is a touch
   wider than the screen by the bezel), and the corners are concentric with the body. The
   recording is the app's bare screen, so it sits inside the same safe areas a real phone
   gives an app: room for the camera at the top and the home bar at the bottom. It is never
   cropped, so the clip's own 9:19.5 shape shows whole. */
.phone {
  --pw: min(340px, 76vw, calc((100svh - 150px) * 0.478));
  --bezel: 10px;
  --screen-r: calc((var(--pw) - 2 * var(--bezel)) * 0.13);
  position: relative;
  width: var(--pw);
  margin-inline: auto;
  padding: var(--bezel);
  border-radius: calc(var(--screen-r) + var(--bezel));
  background: linear-gradient(160deg, #2b2b34, #15151a);
  box-shadow:
    0 0 0 1px #3b3b48,
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 50px 120px rgba(0, 0, 0, 0.65),
    0 0 90px rgba(var(--violet-rgb), 0.18);
}
.phone::after {
  content: ""; position: absolute; top: calc(var(--bezel) + 14px); left: 50%; z-index: 3;
  width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%;
  background: #050507; box-shadow: 0 0 0 1.5px #22222a;
}
.slot-phone {
  aspect-ratio: 393 / 852; border-radius: var(--screen-r); border: 0; box-shadow: none;
  /* The clip's own edge colours, top to bottom, so the strips beside it read as the app. */
  background: linear-gradient(180deg, #16102b 0, #16102b 7%, #17112c 15.7%, #130d28 24%, #1f133b 41.6%,
    #19112f 58.9%, #110b1c 76%, #0b0718 84.9%, #19132f 90.9%, #19132f 100%);
}
.slot-phone > video, .slot-phone > img.slot-media {
  inset: 7% 0 auto 0; height: 86.5%; object-fit: contain;
}
/* The home bar, and the pause button beside it rather than over the app's tab bar. */
.slot-phone::after {
  content: ""; position: absolute; z-index: 2; left: 50%; bottom: 2.4%;
  width: 34%; height: 4px; margin-left: -17%; border-radius: 2px;
  background: rgba(255, 255, 255, 0.34);
}
.slot-phone .slot-toggle { width: 28px; height: 28px; right: 11px; bottom: 1.4%; }
.slot-phone .slot-toggle svg { width: 12px; height: 12px; }

/* ------------------------------------------------------------ how it works */
.steps {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
}
.step, .tile {
  background: var(--basalt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.6vw, 30px);
}
.step h3, .tile h3 { font-size: 22px; margin: 18px 0 10px; }
.tile h3 { margin-top: 0; }
.step p, .tile p { color: var(--muted); margin: 0; font-size: 16px; }
.tile .btn { margin-top: 20px; }
/* client .seat-count-grid button.on */
.step-no {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--pumpkin); color: var(--on-accent);
  font: 700 18px/1 var(--font-head);
  box-shadow: 0 10px 26px rgba(var(--pumpkin-rgb), 0.25);
}
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 860px) {
  .steps, .tiles { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------ final call */
.final {
  overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(var(--pumpkin-rgb), 0.12), transparent 70%);
}
.final .wrap { position: relative; }
.final .lede { margin: 22px auto 34px; }

/* ------------------------------------------------------------ film dialog */
.film-dialog {
  width: min(1120px, 94vw); max-width: none;
  padding: 0; border: 0; background: transparent; color: var(--ink);
  overflow: visible;
}
.film-dialog::backdrop { background: rgba(6, 6, 8, 0.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.film-frame { border-radius: 18px; overflow: hidden; background: #000; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.8); }
.film-frame video { width: 100%; aspect-ratio: 16 / 9; }
.film-close {
  position: absolute; top: -52px; right: 0;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--basalt); color: var(--ink);
  font-size: 22px; line-height: 1; cursor: pointer;
}
.film-close:hover { background: var(--raised); }

/* ============================================================ SUBPAGES */
.page-head .embers { opacity: 0.8; }
.tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile .ticks { margin-top: 16px; }
.tile .ticks li { font-size: 15.5px; }
@media (max-width: 760px) { .tiles-2 { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------------------- download */
.platforms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.platform { display: flex; flex-direction: column; align-items: flex-start; padding: clamp(24px, 3vw, 34px); }
.platform .eyebrow { margin-bottom: 10px; }
.platform .h3 { font-size: clamp(30px, 3.4vw, 40px); }
.platform .muted { margin: 8px 0 24px; }
.platform .btn { width: 100%; }
.platform-note { margin: 18px 0 0; text-align: center; font-size: 14.5px; color: var(--muted); }
.callout {
  margin-top: 28px;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px 22px;
  border-radius: var(--radius);
  background: rgba(var(--pumpkin-rgb), 0.08);
  border: 1px solid rgba(var(--pumpkin-rgb), 0.35);
}
.callout p { margin: 0; color: var(--ink); }
/* The start-up wait ("30 to 40 seconds") has to be impossible to miss: heavy, bright, underlined. */
.wait {
  font-weight: 800; color: var(--pumpkin-light);
  text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px;
  text-decoration-color: var(--pumpkin);
}
@media (max-width: 700px) { .platforms { grid-template-columns: minmax(0, 1fr); } }

/* The setup guide: numbered like the host's seat-count buttons. */
.guide { list-style: none; padding: 0; margin: 0; counter-reset: guide; display: grid; gap: 16px; }
.guide > li {
  counter-increment: guide;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) minmax(0, 440px);
  gap: 20px 28px;
  align-items: start;
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--basalt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.guide > li::before {
  content: counter(guide);
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 10px;
  background: var(--pumpkin); color: var(--on-accent);
  font: 700 18px/1 var(--font-head);
}
.guide > li:not(:has(.slot)) .guide-text { grid-column: 2 / -1; }
.guide-text h3 { font-size: 21px; margin: 8px 0 8px; }
.guide-text p { margin: 0; color: var(--muted); font-size: 16px; }
.guide-text p + p { margin-top: 10px; }
.guide-text b { color: var(--ink); }
.file { font-family: var(--font-mono); font-size: 0.86em; font-weight: 500; padding: 2px 7px; border-radius: 6px; background: var(--raised); border: 1px solid var(--line); white-space: nowrap; }
.slot-shot { aspect-ratio: 16 / 10; border-radius: 12px; background: var(--deep); border: 1px dashed var(--line); box-shadow: none; }
.slot-shot .slot-label .tag { font-size: 11px; }
@media (max-width: 760px) {
  .guide > li { grid-template-columns: 42px minmax(0, 1fr); }
  .guide > li .slot { grid-column: 1 / -1; }
}

/* "Unknown app" clicks. */
.warn h3 { margin-bottom: 12px; }
.warn-when { color: var(--muted); font-size: 15.5px; margin-bottom: 16px; }
.warn b { color: var(--ink); }
.clicks { margin: 0 0 16px; padding: 0; list-style: none; counter-reset: click; display: grid; gap: 10px; }
.clicks li { counter-increment: click; position: relative; padding-left: 38px; font-size: 16px; line-height: 1.5; }
.clicks li::before {
  content: counter(click);
  position: absolute; left: 0; top: -1px;
  width: 26px; height: 26px; display: grid; place-items: center;
  border-radius: 7px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.07);
  font: 700 13px/1 var(--font-body);
}
.warn-also { font-size: 14.5px; color: var(--muted); margin: 12px 0 0; }
.clicks + .warn-also { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
/* Windows has two moments to warn about: the browser's download, then the first run. */
.tile .warn-when + .warn-when { margin-top: 12px; }

/* ----------------------------------------------------------------- support */
.goal { border-color: rgba(var(--pumpkin-rgb), 0.5); background: linear-gradient(180deg, rgba(var(--pumpkin-rgb), 0.08), rgba(24, 24, 30, 0.94) 60%); }
.goal .h3 { margin-bottom: 12px; }
.goal > p { margin: 0 0 12px; color: var(--muted); font-size: 17px; }
.goal .eyebrow { margin: 0 0 8px; color: var(--pumpkin); }
.goal .btn-row { margin-top: 22px; }

/* Goal bars: drawn from the numbers in config.js (see wireGoals). Empty without JS. */
.goal-meter { margin-top: 22px; }
.goal-bar { height: 10px; border-radius: 6px; background: var(--line); overflow: hidden; }
.goal-bar i {
  display: block; height: 100%; width: var(--fill, 0%);
  background: var(--pumpkin); border-radius: inherit;
  transition: width 700ms var(--ease);
}
.goal-figure { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; font-size: 14.5px; color: var(--muted); }
.goal-badge {
  font: 500 11.5px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-accent); background: var(--pumpkin); border-radius: 6px; padding: 4px 8px;
}
.goal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.goal-card { display: flex; flex-direction: column; box-shadow: none; background: var(--basalt); }
.goal-card h3 { margin: 0 0 8px; font: 700 19px/1.25 var(--font-head); letter-spacing: -0.01em; }
.goal-card p { margin: 0 0 16px; color: var(--muted); font-size: 15.5px; }
.goal-card .goal-bar { margin-top: auto; }
.goal-card.is-funded { border-color: rgba(var(--pumpkin-rgb), 0.55); }
@media (max-width: 860px) { .goal-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .goal-bar i { transition: none; } }

/* The monthly ladder: four steps along one bar. */
.ladder-ticks { position: relative; height: 22px; font-size: 13px; color: var(--muted); }
.ladder-ticks span { position: absolute; top: 0; transform: translateX(-50%); }
.ladder-ticks .end { right: 0; left: auto; transform: none; }
.rungs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.rung { background: var(--basalt); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.rung p { margin: 0; font-size: 14.5px; color: var(--muted); }
.rung h3 { margin: 6px 0 8px; font: 700 17px/1.25 var(--font-head); letter-spacing: -0.01em; }
.rung .rung-at { font: 500 12px/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.rung .rung-state { margin-top: 12px; font-size: 13px; color: var(--muted); }
.rung.is-funded, .rung.is-next { border-color: var(--pumpkin); }
.rung.is-next { box-shadow: 0 0 0 1px var(--pumpkin); }
.rung.is-funded .rung-state, .rung.is-next .rung-state { color: var(--pumpkin-light); }
.ladder .btn-row { justify-content: center; margin-top: 26px; }
@media (max-width: 860px) { .rungs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .rungs { grid-template-columns: minmax(0, 1fr); } }

.seats-strip { text-align: center; border-top: 1px solid var(--line); padding-top: 32px; }
.seats-strip .eyebrow { margin: 0 0 8px; }
.seats-strip .h3 { margin: 0 0 8px; }
.seats-strip p:last-child { margin: 0 auto; color: var(--muted); max-width: 46ch; }
/* overflow-x: clip keeps the blue aura from widening the page on a phone; upward, the flames are free. */
.tiers { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 58px 18px; overflow-x: clip; padding-top: 150px; margin-top: -60px; }
/* Five tiers: the $1 one alone on top, wide and highlighted; then two by two. */
.tiers .tier { grid-column: span 3; }
.tiers .tier-pick { grid-column: 2 / span 4; }
.tier {
  display: flex; flex-direction: column;
  padding: clamp(24px, 2.8vw, 32px);
  background: var(--basalt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.tier-name { margin: 0; font: 500 14px/1.2 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pumpkin); }
.tier-price { margin: 14px 0 4px; color: var(--muted); font-size: 16px; }
.tier-price span { font: 700 44px/1 var(--font-head); letter-spacing: -0.03em; color: var(--ink); margin-right: 4px; }
.tier .ticks { margin-top: 20px; }
.tiers .tier:not(.tier-pick) .ticks { margin-bottom: 22px; }
.tier .ticks li { font-size: 15.5px; color: #c9ccd6; }
/* The $1 tier is the one to click: it burns in the brand's pumpkin orange. The whole card is the link.
   Hovering lights the card's fill up a shade. It never moves: a transform would lift the fire and the
   aura (z-index -1) in front of the card. The two fill colors are registered so the change can fade. */
@property --pick-top { syntax: '<color>'; inherits: false; initial-value: #2b170c; }
@property --pick-bottom { syntax: '<color>'; inherits: false; initial-value: #110c0a; }
/* The border's one color, pulsing slowly through ember hues. */
@property --pick-edge { syntax: '<color>'; inherits: false; initial-value: #e58033; }
.tier-pick {
  /* The button matches Join the beta: pumpkin, a shade lighter on hover. */
  --cta: var(--pumpkin); --cta-hover: #ee8d42;
  --fire-hot: #ffe4c4; --fire: #f29a4e; --fire-rgb: 242, 154, 78; --fire-deep: #c9561a; --fire-deep-rgb: 201, 86, 26;
  position: relative;
  border: 2px solid transparent;
  /* An ember border: the card's own fill inside, one color behind it that slowly brightens and dims. */
  background:
    linear-gradient(168deg, var(--pick-top), var(--pick-bottom) 70%) padding-box,
    linear-gradient(var(--pick-edge), var(--pick-edge)) border-box;
  box-shadow: 0 0 22px rgba(var(--fire-rgb), 0.35), 0 0 60px rgba(var(--fire-deep-rgb), 0.28), inset 0 0 40px rgba(var(--fire-rgb), 0.12);
  animation: ember-edge 9s ease-in-out infinite, fire-glow 4.5s ease-in-out infinite alternate;
  transition: --pick-top 220ms ease, --pick-bottom 220ms ease;
}
.tier-pick:hover { --pick-top: #42200b; --pick-bottom: #1b110b; }
/* The aura: blurred fire behind the card, flickering. */
.tier-pick::before {
  content: ""; position: absolute; inset: -22px; z-index: -1; border-radius: 40px; pointer-events: none;
  background:
    radial-gradient(55% 45% at 18% 100%, rgba(var(--fire-rgb), 0.6), transparent 70%),
    radial-gradient(50% 40% at 82% 100%, rgba(var(--fire-deep-rgb), 0.6), transparent 70%),
    radial-gradient(65% 40% at 50% 0%, rgba(255, 228, 196, 0.4), transparent 72%),
    radial-gradient(40% 60% at 0% 50%, rgba(var(--fire-deep-rgb), 0.35), transparent 70%),
    radial-gradient(40% 60% at 100% 50%, rgba(var(--fire-rgb), 0.35), transparent 70%);
  filter: blur(20px);
  animation: fire-aura 3.1s ease-in-out infinite alternate;
}
/* Under the fire: a low orange glow along the top edge. Without WebGL it's the whole effect. */
.tier-pick::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: calc(100% - 6px); height: 56px; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 100% at 50% 100%, rgba(var(--fire-rgb), 0.7), rgba(var(--fire-deep-rgb), 0.3) 55%, transparent 80%);
  filter: blur(8px);
}
/* The fire itself (site.js burnPick): a WebGL billow with an ember canvas over it, rising off the top edge. */
.tier-fire { position: absolute; left: -30px; right: -30px; bottom: calc(100% - 3px); z-index: -1; pointer-events: none; transition: opacity 380ms ease; }
/* The $1 card's fire fades out when another tier is picked, and back in when it is picked again. */
.tier-fire.out { opacity: 0; }
.tier-fire canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* A picked tier's campfire sits on its top edge (it never overlaps the card: a lit card is
   raised above its neighbors so its flames show in the gap above). */
.tier-fire.small { left: -20px; right: -20px; bottom: 100%; opacity: 0; transition: opacity 380ms ease; }
.tier-fire.small.on { opacity: 1; }

/* The other tiers can be picked: click one and it lights up (site.js pickTiers). */
.tiers .tier:not(.tier-pick) { position: relative; cursor: pointer; transition: border-color 300ms ease, box-shadow 300ms ease, background-color 300ms ease; }
.tiers .tier:not(.tier-pick):hover { border-color: rgba(var(--pumpkin-rgb), 0.45); }
.tiers .tier:not(.tier-pick):focus-visible { outline: 2px solid var(--pumpkin-light); outline-offset: 3px; }
.tier.is-lit {
  --lit-rgb: var(--pumpkin-rgb);
  z-index: 1; background-color: #1e1712;
  /* Fades in from the plain edge, then pulses. */
  animation: lit-in 380ms ease-out, lit-edge 9s ease-in-out 380ms infinite;
  box-shadow: 0 0 18px rgba(var(--lit-rgb), 0.28), 0 0 46px rgba(var(--lit-rgb), 0.16), inset 0 0 30px rgba(var(--lit-rgb), 0.08);
}
.tier.is-lit[data-fire="violet"] { --lit-rgb: 160, 123, 255; background-color: #17122a; animation-name: lit-in-violet, lit-edge-violet; }
/* The tier just put out fades its edge back to plain. */
.tier.is-unlit { animation: lit-out 380ms ease-out; }
.tier.is-unlit[data-fire="violet"] { animation-name: lit-out-violet; }
.tier.is-lit[data-fire="violet"] .tier-name { color: #c9b5ff; }
.tier.is-lit[data-fire="violet"] .ticks li::before { border-color: #a07bff; }
@keyframes lit-in { from { border-color: var(--line); } to { border-color: #b5481a; } }
@keyframes lit-in-violet { from { border-color: var(--line); } to { border-color: #5a24c9; } }
@keyframes lit-out { from { border-color: #d9692a; } to { border-color: var(--line); } }
@keyframes lit-out-violet { from { border-color: #7a46f0; } to { border-color: var(--line); } }
@keyframes lit-edge {
  0%, 100% { border-color: #b5481a; }
  30% { border-color: #e58033; }
  50% { border-color: #f6b277; }
  75% { border-color: #d9692a; }
}
@keyframes lit-edge-violet {
  0%, 100% { border-color: #5a24c9; }
  30% { border-color: #8a5cff; }
  50% { border-color: #cdb8ff; }
  75% { border-color: #7a46f0; }
}
@media (prefers-reduced-motion: reduce) { .tier.is-lit { animation: none; border-color: var(--pumpkin); } .tier.is-lit[data-fire="violet"] { border-color: #8a5cff; } }
/* Each tier's own Patreon button fades in once it is picked. Its room is always kept, so the
   cards never change size as the pick moves. Same look as Join the beta. */
.tier-join {
  display: inline-flex; visibility: hidden; opacity: 0; align-self: flex-start; margin-top: auto;
  padding: 11px 20px; border-radius: 12px;
  background: var(--pumpkin); color: var(--on-accent); font-weight: 600; font-size: 15.5px; text-decoration: none;
  box-shadow: 0 10px 28px rgba(var(--pumpkin-rgb), 0.25);
  transition: opacity 300ms ease, visibility 0s linear 300ms, background-color 200ms ease, box-shadow 200ms ease;
}
.tier-join:hover { background: #ee8d42; color: var(--on-accent); box-shadow: 0 12px 34px rgba(var(--pumpkin-rgb), 0.36); }
.tier.is-lit .tier-join { visibility: visible; opacity: 1; transition: opacity 300ms ease 120ms, visibility 0s, background-color 200ms ease, box-shadow 200ms ease; }
.tier.is-lit[data-fire="violet"] .tier-join { background: #8a5cff; color: #fff; box-shadow: 0 10px 28px rgba(138, 92, 255, 0.3); }
.tier.is-lit[data-fire="violet"] .tier-join:hover { background: #9d76ff; color: #fff; }
.tier-join.is-soon::before { display: none; }
@keyframes ember-edge {
  0%, 100% { --pick-edge: #b5481a; }
  30% { --pick-edge: #e58033; }
  50% { --pick-edge: #f6b277; }
  75% { --pick-edge: #d9692a; }
}
@keyframes fire-glow {
  0% { box-shadow: 0 0 18px rgba(var(--fire-rgb), 0.3), 0 0 50px rgba(var(--fire-deep-rgb), 0.24), inset 0 0 34px rgba(var(--fire-rgb), 0.1); }
  100% { box-shadow: 0 0 30px rgba(var(--fire-rgb), 0.5), 0 0 80px rgba(var(--fire-deep-rgb), 0.38), inset 0 0 48px rgba(var(--fire-rgb), 0.18); }
}
@keyframes fire-aura {
  0% { opacity: 0.38; transform: scale(0.985, 0.97); }
  40% { opacity: 0.55; transform: scale(1.01, 1.035) translateY(-2px); }
  100% { opacity: 0.46; transform: scale(1, 1.05) translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) { .tier-pick, .tier-pick::before, .tier-pick::after, .tier-pick.is-out, .tier-pick.is-out::before { animation: none; } }
.tier-pick .tier-name { color: var(--fire-hot); text-shadow: 0 0 12px rgba(var(--fire-rgb), 0.8); }
.tier-pick .tier-price span { color: #fff; text-shadow: 0 0 18px rgba(var(--fire-rgb), 0.55); }
.tier-pick .ticks li::before { border-color: var(--fire); box-shadow: 0 0 8px rgba(var(--fire-rgb), 0.7); }
/* Another tier was picked (site.js quenchPick): the $1 card goes out and reads as a plain tier, so
   only the picked one is highlighted. Its Subscribe button hides like the others' Join buttons, and
   the whole-card link stops catching clicks: a click on the card lights it again instead. The 1px
   margin keeps the content where it was while the border drops from 2px to the plain 1px. */
.tier-pick.is-out {
  border: 1px solid var(--line); margin: 1px;
  background: var(--basalt);
  box-shadow: none;
  animation: pick-out 380ms ease-out;
  cursor: pointer;
  transition: border-color 300ms ease;
}
.tier-pick.is-out:hover { border-color: rgba(var(--pumpkin-rgb), 0.45); }
.tier-pick.is-out:focus-visible { outline: 2px solid var(--pumpkin-light); outline-offset: 3px; }
.tier-pick.is-out::before { opacity: 0; animation: pick-aura-out 380ms ease-out; }
.tier-pick::after { transition: opacity 380ms ease; }
.tier-pick.is-out::after { opacity: 0; }
.tier-pick.is-out .tier-name { color: var(--pumpkin); text-shadow: none; }
.tier-pick.is-out .tier-price span { color: var(--ink); text-shadow: none; }
.tier-pick.is-out .ticks li::before { border-color: var(--pumpkin); box-shadow: none; }
.tier-pick.is-out .tier-badge { box-shadow: none; }
.tier-pick.is-out .tier-cta { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity 300ms ease, visibility 0s linear 300ms; }
@keyframes pick-out {
  from { box-shadow: 0 0 26px rgba(var(--fire-rgb), 0.42), 0 0 66px rgba(var(--fire-deep-rgb), 0.3), inset 0 0 40px rgba(var(--fire-rgb), 0.14); }
  to { box-shadow: 0 0 0 rgba(var(--fire-rgb), 0), 0 0 0 rgba(var(--fire-deep-rgb), 0), inset 0 0 0 rgba(var(--fire-rgb), 0); }
}
@keyframes pick-aura-out { from { opacity: 0.46; } to { opacity: 0; } }
.tier-badge {
  position: absolute; top: -13px; left: 28px; z-index: 1; margin: 0;
  padding: 6px 12px; border-radius: 999px;
  font: 600 11.5px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase;
  background: linear-gradient(90deg, var(--fire), var(--fire-hot)); color: #2a1204;
  box-shadow: 0 0 16px rgba(var(--fire-rgb), 0.7);
}
.tier-cta {
  align-self: flex-start; margin-top: 26px;
  padding: 13px 22px; border-radius: 12px;
  background: var(--cta);
  color: var(--on-accent); font-weight: 600; font-size: 16px; text-decoration: none;
  box-shadow: 0 12px 34px rgba(var(--pumpkin-rgb), 0.28);
}
/* The link covers the whole card, so a click anywhere on it goes to Patreon. */
.tier-cta::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* The whole card is the button, so hovering anywhere on it lightens the button a shade. */
.tier-cta { transition: background-color 200ms ease, box-shadow 200ms ease, opacity 300ms ease; }
/* Spelled out in full so the site's "coming soon" hover (transparent, orange text) can't win here. */
.tier-pick:hover .tier-cta { background: var(--cta-hover); color: var(--on-accent); border: 0; box-shadow: 0 14px 40px rgba(var(--pumpkin-rgb), 0.38); }
.tier-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* Before the Patreon page exists, it reads as coming soon and goes nowhere. */
.tier-cta.is-soon { cursor: default; }
.tier-cta.is-soon::before { display: none; }
.tier-cta.is-soon::after { cursor: default; }
.support-buttons { justify-content: center; margin-top: 34px; }
/* The tiers come straight after the page heading, so the fire shows on arrival. */
.page-head + #tiers { padding-top: 28px; }
/* Sections that read as one: the tiers and where the money goes; the big goal and the small ones;
   what money never buys and the seats that ship free. */
#tiers + #monthly, #goal + #small-goals, #never + #seats-soon { padding-top: 0; }
/* The sideways clip sits a gutter outside the cards, so a lit card's glow fades out instead of
   stopping at a hard edge. On a phone that gutter is exactly the screen edge: the glow runs off
   the screen, and the page still never scrolls sideways. */
.tiers { padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); }
@media (max-width: 860px) {
  .tiers { grid-template-columns: minmax(0, 1fr); gap: 46px 18px; }
  .tiers .tier, .tiers .tier-pick { grid-column: 1 / -1; }
  /* Smaller boxes on a phone: less padding, price and spacing, so more of the tiers fit on screen. */
  .tier { padding: 20px; }
  .tier-price { margin: 10px 0 2px; }
  .tier-price span { font-size: 38px; }
  .tier .ticks { margin-top: 14px; gap: 11px; }
  .tiers .tier:not(.tier-pick) .ticks { margin-bottom: 18px; }
  .tier .ticks li { font-size: 15px; line-height: 1.5; }
  .tier-cta { margin-top: 20px; padding: 11px 20px; }
  .tier-badge { left: 22px; }
}

/* --------------------------------------------------------------------- faq */
.faq { display: grid; gap: 12px; }
.faq details {
  background: var(--basalt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color 200ms ease;
}
.faq details[open] { border-color: rgba(var(--pumpkin-rgb), 0.45); }
.faq summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px;
  cursor: pointer;
  font: 700 19px/1.3 var(--font-head); letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 8px; border: 1px solid var(--line);
  font: 500 18px/1 var(--font-body); color: var(--pumpkin-light);
}
.faq details[open] summary::after { content: "–"; }
.faq summary:focus-visible { outline-offset: -4px; border-radius: var(--radius-lg); }
.answer { padding: 0 24px 20px; color: var(--muted); }
.answer p { margin: 0 0 12px; }
.answer p:last-child { margin: 0; }
.answer b { color: var(--ink); }

/* --------------------------------------------------------------------- 404 */
.notfound { min-height: calc(100vh - 66px - 300px); display: flex; align-items: center; }
.notfound .wrap { display: flex; flex-direction: column; align-items: center; }
.seat-404 { width: 200px; margin-bottom: 36px; text-align: left; box-shadow: 0 18px 50px rgba(var(--pumpkin-rgb), 0.3); }
.notfound .lede { margin-bottom: 34px; }

/* ----------------------------------------------------------- back to the top
   site.js (backToTop): a round arrow on phones, bottom right, once the visitor has scrolled a screen down. */
.to-top {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 60;
  width: 46px; height: 46px; padding: 0; display: none; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(var(--pumpkin-rgb), 0.55);
  background: rgba(17, 12, 10, 0.88); color: var(--pumpkin-light); cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.55), 0 0 18px rgba(var(--pumpkin-rgb), 0.18);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
}
.to-top svg { width: 20px; height: 20px; }
.to-top.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.to-top:active { background: rgba(var(--pumpkin-rgb), 0.28); }
.to-top:focus-visible { outline: 2px solid var(--pumpkin-light); outline-offset: 3px; }
@media (max-width: 860px) { .to-top { display: flex; } }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; transform: none; } }