/* ==========================================================================================================
   Edgewise · site.css: design tokens, base, layout, header/nav, footer, components.
   Dark theme only. No web fonts, no external requests. Visual reference: /styleguide.html

   Page skeleton (copy from styleguide.html):
     <a class="skip-link" href="#main">Skip to content</a>
     <header class="site-header" data-site-header> … .brand … button.nav-toggle … nav.site-nav#site-nav </header>
     (the toggle comes before the nav, so Tab from it walks into the open menu)
     <main id="main"> sections </main>
     <footer class="site-footer"> … </footer>
     <script type="module" src="/assets/js/site.js"></script>

   Contents
     1 Tokens            6 Header & nav          11 Pricing            16 Device frame
     2 Reset & base      7 Footer                12 FAQ                17 Legal prose + TOC
     3 Typography        8 Buttons & badges      13 Stats & lists      18 Game mount (loader)
     4 Layout            9 Panels & tiles        14 Tables             19 Motion & reveal
     5 Sections & hero  10 Bento                 15 Media & textures   20 Utilities
   ========================================================================================================== */

/* 1 ─ Tokens ─────────────────────────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  /* Brand (Theme.swift) */
  --bg: #0A0F0D;
  --bg-deep: #060908;
  --surface: #121A17;
  --surface-2: #1A2521;
  --surface-3: #22302B;
  --stroke: rgba(255, 255, 255, .08);
  --stroke-strong: rgba(255, 255, 255, .14);
  --text: #FFFFFF;
  --text-dim: rgba(255, 255, 255, .68);
  --text-faint: rgba(255, 255, 255, .6);
  --text-body: rgba(255, 255, 255, .8);

  --gold: #E9B949;
  --gold-hi: #F6D98A;
  --gold-lo: #C99A2E;
  --gold-ink: #14100A;
  --gold-grad: linear-gradient(180deg, #F3CF6E 0%, #E9B949 52%, #DCA739 100%);
  --gold-soft: rgba(233, 185, 73, .12);

  --good: #34C77B;
  --bad: #FF5D5D;
  --warn: #F5A524;

  --raise: #D8383D;
  --call: #1B7D4C;
  --fold: #33424C;
  --shove: #C13C6A;
  --raise-text: #FF8A8D;

  --felt-top: #1D6A46;
  --felt-bottom: #0C3A27;
  --felt: radial-gradient(ellipse 75% 95% at 50% 42%, var(--felt-top), #155537 45%, var(--felt-bottom));

  /* Type */
  --font-display: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-ui: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* Fluid type scale: 320px → 1440px */
  --step--2: clamp(.75rem, .73rem + .1vw, .8125rem);
  --step--1: clamp(.8125rem, .79rem + .12vw, .9rem);
  --step-0: clamp(1rem, .97rem + .16vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.07rem + .27vw, 1.3125rem);
  --step-2: clamp(1.3125rem, 1.2rem + .55vw, 1.75rem);
  --step-3: clamp(1.5625rem, 1.33rem + 1.15vw, 2.375rem);
  --step-4: clamp(1.875rem, 1.48rem + 1.95vw, 3.25rem);
  --step-5: clamp(2.25rem, 1.6rem + 3.2vw, 4.5rem);
  --step-6: clamp(2.5rem, 1.6rem + 4.6vw, 6.25rem);

  /* Space */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-s: 16px;
  --space-m: 24px;
  --space-l: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 128px;
  --section-y: clamp(80px, 5rem + 6vw, 168px);
  --gutter: clamp(16px, 4.5vw, 48px);

  /* Layout */
  --container: 1200px;
  --container-wide: 1360px;
  --container-narrow: 760px;
  --measure: 68ch;
  --header-h: 64px;

  /* Shape & depth */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px -4px rgba(0, 0, 0, .5);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, .3), 0 18px 40px -16px rgba(0, 0, 0, .7);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .3), 0 40px 90px -30px rgba(0, 0, 0, .85);
  --highlight: inset 0 1px 0 rgba(255, 255, 255, .06);

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.2, 1.3, .4, 1);
  --dur-fast: .18s;
  --dur: .32s;
  --dur-slow: .9s;

  /* Textures (CSS only) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12h10' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 6.5l5.5 5.5-5.5 5.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (min-width: 900px) {
  :root { --header-h: 68px; }
}

@media (prefers-contrast: more) {
  :root {
    --stroke: rgba(255, 255, 255, .25);
    --stroke-strong: rgba(255, 255, 255, .35);
    --text-dim: rgba(255, 255, 255, .85);
    --text-faint: rgba(255, 255, 255, .75);
    --text-body: rgba(255, 255, 255, .92);
  }
}

/* 2 ─ Reset & base ───────────────────────────────────────────────────────────────────────────────────── */

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

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  scrollbar-color: rgba(255, 255, 255, .22) var(--bg);
  background: var(--bg);
  hanging-punctuation: first last;
}

@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }
}

body {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

/* Fine film grain behind everything: the difference between flat and expensive. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--grain);
  opacity: .028;
}

main {
  flex: 1 0 auto;
  display: block;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

:where(ul, ol)[role="list"] {
  list-style: none;
  padding: 0;
}

:where(h1, h2, h3, h4, h5, h6) {
  font-weight: 600;
  line-height: 1.15;
  text-wrap: balance;
  overflow-wrap: break-word;
}

:where(p, li, figcaption, blockquote, dd) {
  text-wrap: pretty;
  overflow-wrap: break-word;
}

::selection {
  background: rgba(233, 185, 73, .32);
  color: #fff;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

[hidden] {
  display: none !important;
}

hr {
  border: 0;
  height: 1px;
  background: var(--stroke);
}

kbd {
  font-family: var(--font-ui);
}

/* 3 ─ Typography ─────────────────────────────────────────────────────────────────────────────────────── */

.display,
.h1,
.h2,
.h3,
.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.022em;
  color: var(--text);
}

.display {
  font-size: var(--step-6);
  line-height: .98;
  letter-spacing: -.032em;
}

.h1 {
  font-size: var(--step-5);
  line-height: 1.02;
  letter-spacing: -.028em;
}

.h2,
.section-title {
  font-size: var(--step-4);
  line-height: 1.06;
}

.h3 {
  font-size: var(--step-3);
  line-height: 1.12;
}

.h4 {
  font-family: var(--font-ui);
  font-size: var(--step-1);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.display em,
.h1 em,
.h2 em,
.h3 em,
.section-title em {
  font-style: italic;
  color: var(--gold);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 38em;
}

.small {
  font-size: var(--step--1);
}

.tiny {
  font-size: var(--step--2);
}

.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.gold { color: var(--gold); }
.nums { font-variant-numeric: tabular-nums; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--gold);
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
}

.eyebrow--plain::before {
  display: none;
}

.eyebrow--dim {
  color: var(--text-dim);
}

.text-link {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: rgba(233, 185, 73, .4);
  text-underline-offset: .22em;
  transition: text-decoration-color var(--dur-fast);
}

.text-link:hover {
  text-decoration-color: currentColor;
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
}

.arrow-link::after {
  content: "";
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
  transition: translate var(--dur) var(--ease-out);
}

.arrow-link:hover::after {
  translate: 4px 0;
}

/* 4 ─ Layout ─────────────────────────────────────────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide { max-width: calc(var(--container-wide) + var(--gutter) * 2); }
.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, var(--space-m));
}

.stack--s { --stack-gap: var(--space-xs); }
.stack--l { --stack-gap: var(--space-xl); }

.flow > * + * {
  margin-top: var(--flow-space, 1em);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-s));
}

.grid {
  display: grid;
  gap: var(--grid-gap, clamp(16px, 2vw, 24px));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr));
}

.grid--2 { --grid-min: 22rem; }
.grid--3 { --grid-min: 16rem; }
.grid--4 { --grid-min: 13rem; }

@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Text + media side by side; stacks under 900px. */
.split {
  display: grid;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--reverse > :first-child { order: 2; }
  .split--wide-media { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.center {
  text-align: center;
  margin-inline: auto;
}

.center .lede,
.center.lede {
  margin-inline: auto;
}

/* 5 ─ Sections & hero ────────────────────────────────────────────────────────────────────────────────── */

.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--tight { padding-block: calc(var(--section-y) * .6); }
.section--flush-top { padding-top: 0; }

.section--raised {
  background:
    linear-gradient(180deg, transparent, rgba(255, 255, 255, .018) 18%, rgba(255, 255, 255, .018) 82%, transparent);
}

/* Felt band: a full-bleed green table surface. */
.section--felt {
  isolation: isolate;
  background: var(--felt);
  box-shadow: inset 0 60px 80px -40px var(--bg), inset 0 -60px 80px -40px var(--bg);
}

.section--felt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  opacity: .1;
  mix-blend-mode: overlay;
}

/* Hairline that fades out at both ends, for between sections. */
.rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--stroke-strong) 20%, var(--stroke-strong) 80%, transparent);
}

.section-head {
  display: grid;
  justify-items: center;
  gap: var(--space-s);
  max-width: 46rem;
  margin: 0 auto clamp(40px, 6vw, 80px);
  text-align: center;
}

.section-head--left {
  justify-items: start;
  margin-inline: 0;
  text-align: start;
}

.section-head .lede {
  margin-top: var(--space-2xs);
}

.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(56px, 9vw, 128px) var(--section-y);
  overflow-x: clip;
}

/* Spotlight: warm light falling on a dark card room. Extends under the translucent header. */
.hero::before {
  content: "";
  position: absolute;
  inset: calc(var(--header-h) * -1) 0 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(48% 38% at 50% 0%, rgba(233, 185, 73, .16), transparent 70%),
    radial-gradient(70% 55% at 50% 8%, rgba(29, 106, 70, .34), transparent 72%),
    radial-gradient(40% 40% at 85% 60%, rgba(29, 106, 70, .12), transparent 70%);
}

.hero__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-m);
  text-align: center;
}

.hero__title {
  max-width: 14ch;
}

.hero__lede {
  max-width: 34em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-s);
  margin-top: var(--space-xs);
}

.hero__note {
  font-size: var(--step--2);
  color: var(--text-faint);
}

.hero__media {
  position: relative;
  margin-top: clamp(48px, 7vw, 96px);
}

/* Smaller hero for inner pages (Play, Support, legal). */
.page-hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(48px, 7vw, 104px) clamp(32px, 5vw, 64px);
  overflow-x: clip;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: calc(var(--header-h) * -1) 0 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(42% 60% at 50% 0%, rgba(233, 185, 73, .1), transparent 70%),
    radial-gradient(70% 70% at 50% 0%, rgba(29, 106, 70, .22), transparent 72%);
}

.page-hero__inner {
  display: grid;
  gap: var(--space-s);
  justify-items: center;
  text-align: center;
}

.page-hero__inner--left {
  justify-items: start;
  text-align: start;
}

/* 6 ─ Header & nav ───────────────────────────────────────────────────────────────────────────────────── */

.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--gold-ink);
  font-weight: 700;
  text-decoration: none;
  translate: 0 -200%;
  transition: translate var(--dur) var(--ease-out);
}

.skip-link:focus-visible {
  translate: 0 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
}

/* The glass lives on a pseudo-element: a backdrop-filter on the header itself would make it the backdrop
   root for the mobile menu panel, which then shows the page through it (Chromium). */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(10, 15, 13, .76);
  -webkit-backdrop-filter: saturate(170%) blur(20px);
  backdrop-filter: saturate(170%) blur(20px);
  box-shadow: 0 1px 0 var(--stroke);
  opacity: 1;
  transition: opacity var(--dur) ease;
}

/* At the very top the header floats on the hero's light; the glass fades in once the page scrolls. */
.js .site-header:not([data-scrolled="true"], [data-open="true"])::before {
  opacity: 0;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  height: 100%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  color: var(--text);
  text-decoration: none;
  border-radius: 10px;
}

.brand__icon {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 10px -4px rgba(0, 0, 0, .8);
}

.brand__name {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-m);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--text-dim);
  font-size: .9375rem;
  font-weight: 550;
  text-decoration: none;
  transition: color var(--dur-fast), background-color var(--dur-fast);
}

.site-nav__link:hover {
  color: var(--text);
  background: rgba(255, 255, 255, .05);
}

.site-nav__link[aria-current="page"] {
  color: var(--text);
}

.site-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--gold);
}

.nav-toggle {
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 20px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: translate var(--dur) var(--ease-out), rotate var(--dur) var(--ease-out), opacity var(--dur-fast);
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__bars::before { translate: 0 -6px; }
.nav-toggle__bars::after { translate: 0 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { translate: 0 0; rotate: 45deg; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { translate: 0 0; rotate: -45deg; }

@media (max-width: 819.98px) {
  .nav-toggle {
    display: grid;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-m);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    padding: var(--space-s) var(--gutter) var(--space-l);
    background: rgba(10, 15, 13, .97);
    -webkit-backdrop-filter: saturate(170%) blur(20px);
    backdrop-filter: saturate(170%) blur(20px);
    box-shadow: 0 1px 0 var(--stroke), 0 30px 60px -20px rgba(0, 0, 0, .8);
    visibility: hidden;
    opacity: 0;
    translate: 0 -8px;
    transition: opacity var(--dur) var(--ease-out), translate var(--dur) var(--ease-out), visibility 0s linear var(--dur);
  }

  .site-header[data-open="true"] .site-nav {
    visibility: visible;
    opacity: 1;
    translate: 0 0;
    transition: opacity var(--dur) var(--ease-out), translate var(--dur) var(--ease-out), visibility 0s;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav__list > li + li {
    border-top: 1px solid var(--stroke);
  }

  .site-nav__link {
    width: 100%; /* full row, so the current-page dot sits at the far right, clear of the label */
    min-height: 56px;
    padding: 0 4px;
    border-radius: 0;
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 500;
    color: var(--text);
  }

  .site-nav__link:hover {
    background: none;
    color: var(--gold);
  }

  .site-nav__link[aria-current="page"]::after {
    left: auto;
    right: 6px;
    bottom: 50%;
    margin: 0 0 -3px;
    width: 6px;
    height: 6px;
  }

  .site-nav .site-nav__cta {
    width: 100%;
    --btn-h: 52px;
    font-size: 1rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .12);
  }
}

/* 7 ─ Footer ─────────────────────────────────────────────────────────────────────────────────────────── */

.site-footer {
  position: relative;
  margin-top: auto;
  padding-block: clamp(56px, 7vw, 96px) var(--space-l);
  background: linear-gradient(180deg, transparent, var(--bg-deep) 70%);
  font-size: var(--step--1);
  color: var(--text-dim);
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: min(1200px, 100% - var(--gutter) * 2);
  height: 1px;
  translate: -50% 0;
  background: linear-gradient(90deg, transparent, var(--stroke-strong) 20%, var(--stroke-strong) 80%, transparent);
}

.site-footer__top {
  display: grid;
  gap: var(--space-xl);
  justify-items: start;
}

@media (min-width: 820px) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    align-items: start;
  }
}

.site-footer__brand {
  display: grid;
  gap: var(--space-s);
  justify-items: start;
}

.site-footer__tagline {
  max-width: 24em;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.35;
  color: var(--text);
}

.site-footer__nav ul {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 12px 48px;
  padding: 0;
  list-style: none;
}

.site-footer__nav a {
  color: var(--text-dim);
  font-size: var(--step-0);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur-fast);
}

.site-footer__nav a:hover {
  color: var(--text);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-l);
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: var(--space-m);
  border-top: 1px solid var(--stroke);
  font-size: var(--step--2);
  color: var(--text-faint);
}

.site-footer__legal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-dim);
}

.age-badge {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 22px;
  padding: 0 6px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--stroke-strong);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text);
}

/* 8 ─ Buttons & badges ───────────────────────────────────────────────────────────────────────────────── */

.btn {
  --btn-h: 50px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  min-height: var(--btn-h);
  padding: 0 1.5em;
  border: 0;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -.005em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    translate var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast),
    box-shadow var(--dur) var(--ease-out),
    color var(--dur-fast),
    filter var(--dur-fast);
}

.btn:active {
  translate: 0 1px;
}

.btn svg {
  flex: none;
  width: 1.15em;
  height: 1.15em;
}

.btn--sm { --btn-h: 40px; padding: 0 1.15em; font-size: .9375rem; }
.btn--sm.btn--primary,
.btn--sm.btn--primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 6px 16px -8px rgba(233, 185, 73, .5);
}
.btn--lg { --btn-h: 58px; padding: 0 1.8em; font-size: 1.0625rem; }
.btn--block { width: 100%; }

.btn--primary {
  background: var(--gold-grad);
  color: var(--gold-ink);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    inset 0 -1px 0 rgba(0, 0, 0, .12),
    0 1px 2px rgba(0, 0, 0, .3),
    0 10px 28px -10px rgba(233, 185, 73, .55);
}

.btn--primary:hover {
  filter: brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -1px 0 rgba(0, 0, 0, .12),
    0 1px 2px rgba(0, 0, 0, .3),
    0 14px 36px -10px rgba(233, 185, 73, .7);
}

.btn--secondary {
  background: rgba(255, 255, 255, .06);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--stroke-strong), var(--highlight);
}

.btn--secondary:hover {
  background: rgba(255, 255, 255, .1);
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  padding-inline: .6em;
}

.btn--ghost:hover {
  color: var(--gold);
}

.btn--ghost::after {
  content: "";
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: var(--icon-arrow) center / contain no-repeat;
  mask: var(--icon-arrow) center / contain no-repeat;
  transition: translate var(--dur) var(--ease-out);
}

.btn--ghost:hover::after {
  translate: 3px 0;
}

.btn--ghost.btn--no-arrow::after {
  display: none;
}

/* Download on the App Store */
.appstore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 22px 0 18px;
  border-radius: 14px;
  background: #000;
  color: #fff;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32), 0 10px 30px -12px rgba(0, 0, 0, .9);
  transition: box-shadow var(--dur) var(--ease-out), translate var(--dur-fast) var(--ease-out);
}

.appstore:hover {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 14px 36px -12px rgba(0, 0, 0, .9);
}

.appstore:active {
  translate: 0 1px;
}

.appstore__logo {
  width: 24px;
  height: 28px;
  flex: none;
  margin-top: -3px;
}

.appstore__text {
  display: grid;
  line-height: 1;
  text-align: start;
}

.appstore__small {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .01em;
}

.appstore__big {
  margin-top: 3px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -.02em;
}

.appstore--sm {
  min-height: 46px;
  padding: 0 16px 0 13px;
  border-radius: 11px;
}

.appstore--sm .appstore__logo { width: 19px; height: 22px; }
.appstore--sm .appstore__big { font-size: 1.125rem; }
.appstore--sm .appstore__small { font-size: .625rem; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px var(--stroke);
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .01em;
  color: var(--text-dim);
  white-space: nowrap;
}

.badge--gold {
  background: var(--gold-soft);
  box-shadow: inset 0 0 0 1px rgba(233, 185, 73, .35);
  color: var(--gold);
}

.badge--pro {
  min-height: 20px;
  padding: 0 7px;
  background: var(--gold);
  box-shadow: none;
  color: var(--gold-ink);
  font-size: .625rem;
  font-weight: 800;
  letter-spacing: .06em;
}

.badge--dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 3px rgba(52, 199, 123, .2);
}

/* Chip nav (Play page game index): horizontally scrollable on small screens. */
.chip-nav {
  display: flex;
  gap: 8px;
  padding: 4px var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  list-style: none;
}

.chip-nav::-webkit-scrollbar { display: none; }

@media (min-width: 900px) {
  .chip-nav {
    flex-wrap: wrap;
    justify-content: center;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px var(--stroke);
  color: var(--text-dim);
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-fast);
}

.chip:hover {
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--stroke-strong);
}

.chip[aria-current="true"],
.chip[aria-current="page"],
.chip.is-active {
  background: var(--text);
  box-shadow: none;
  color: var(--bg);
}

/* 9 ─ Panels & tiles ─────────────────────────────────────────────────────────────────────────────────── */

.panel {
  position: relative;
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01)), var(--surface);
  box-shadow: inset 0 0 0 1px var(--stroke), var(--highlight), var(--shadow-md);
}

.panel--flat {
  box-shadow: inset 0 0 0 1px var(--stroke);
}

/* Glass: for content floating over imagery or the felt. */
.glass {
  position: relative;
  padding: clamp(18px, 2.6vw, 28px);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .12),
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 30px 60px -24px rgba(0, 0, 0, .7);
}

/* Feature tile. Add data-spotlight for a soft light that follows the pointer (site.js). */
.tile {
  --mx: 50%;
  --my: 0%;
  --spot: 0;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .008) 60%), var(--surface);
  box-shadow: inset 0 0 0 1px var(--stroke), var(--highlight);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease-out), translate var(--dur) var(--ease-out);
}

.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: var(--spot);
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(233, 185, 73, .09), transparent 45%);
  transition: opacity .4s ease;
}

.tile:hover {
  box-shadow: inset 0 0 0 1px var(--stroke-strong), var(--highlight), var(--shadow-md);
}

.tile__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-2xs);
  border-radius: 13px;
  color: var(--gold);
  background: linear-gradient(180deg, rgba(233, 185, 73, .16), rgba(233, 185, 73, .05));
  box-shadow: inset 0 0 0 1px rgba(233, 185, 73, .25);
}

.tile__icon svg {
  width: 22px;
  height: 22px;
}

.tile__title {
  font-family: var(--font-ui);
  font-size: var(--step-1);
  font-weight: 650;
  letter-spacing: -.012em;
  line-height: 1.25;
  color: var(--text);
  text-wrap: balance;
}

.tile__text {
  color: var(--text-dim);
  font-size: var(--step--1);
  line-height: 1.6;
}

.tile__media {
  margin-top: auto;
  padding-top: var(--space-m);
}

.tile--feature {
  padding: clamp(28px, 3.4vw, 44px);
}

.tile--feature .tile__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 500;
  letter-spacing: -.02em;
}

.tile--feature .tile__text {
  font-size: var(--step-0);
  max-width: 34em;
}

.tile--gold {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(233, 185, 73, .12), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, .008) 60%),
    var(--surface);
}

.tile--felt {
  background: var(--felt);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), var(--highlight);
}

.tile--felt .tile__text { color: rgba(255, 255, 255, .86); }

a.tile {
  color: inherit;
  text-decoration: none;
}

a.tile:hover {
  translate: 0 -2px;
}

/* 10 ─ Bento ─────────────────────────────────────────────────────────────────────────────────────────── */

.bento {
  display: grid;
  gap: clamp(14px, 1.6vw, 20px);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 720px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__item--wide,
  .bento__item--full { grid-column: span 2; }
}

@media (min-width: 1040px) {
  .bento { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bento > * { grid-column: span 2; }
  .bento__item--half { grid-column: span 3; }
  .bento__item--wide { grid-column: span 4; }
  .bento__item--full { grid-column: span 6; }
  .bento__item--tall { grid-row: span 2; }
}

/* 11 ─ Pricing ───────────────────────────────────────────────────────────────────────────────────────── */

.pricing {
  display: grid;
  gap: clamp(14px, 1.8vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  align-items: stretch;
}

@media (min-width: 960px) {
  .pricing { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: clamp(24px, 2.8vw, 36px);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .008)), var(--surface);
  box-shadow: inset 0 0 0 1px var(--stroke), var(--highlight);
}

.price-card--featured {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, #17221E, #111916) padding-box,
    linear-gradient(160deg, rgba(246, 217, 138, .9), rgba(233, 185, 73, .35) 35%, rgba(233, 185, 73, .08) 70%, rgba(233, 185, 73, .3)) border-box;
  box-shadow: 0 30px 80px -30px rgba(233, 185, 73, .28), var(--shadow-lg);
}

@media (min-width: 960px) {
  .price-card--featured {
    translate: 0 -12px;
  }
}

.price-card__badge {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% -50%;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--gold-grad);
  color: var(--gold-ink);
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 18px -6px rgba(233, 185, 73, .6);
}

.price-card__name {
  font-family: var(--font-ui);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text);
}

.price-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  line-height: 1;
}

.price-card__amount {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 2.1rem + 1.4vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -.03em;
  font-variant-numeric: lining-nums tabular-nums;
}

.price-card__period {
  color: var(--text-dim);
  font-size: var(--step--1);
  font-weight: 500;
}

.price-card__note {
  min-height: 1.6em;
  color: var(--text-dim);
  font-size: var(--step--1);
}

.price-card__note strong {
  color: var(--gold);
  font-weight: 650;
}

.price-card .checklist {
  flex: 1;
  padding-top: var(--space-s);
  border-top: 1px solid var(--stroke);
}

.price-card__cta {
  margin-top: var(--space-xs);
}

.pricing-footnote {
  margin-top: var(--space-l);
  text-align: center;
  color: var(--text-faint);
  font-size: var(--step--2);
}

/* 12 ─ FAQ (details/summary) ─────────────────────────────────────────────────────────────────────────── */

.faq {
  max-width: var(--container-narrow);
  margin-inline: auto;
  border-top: 1px solid var(--stroke);
}

.faq__item {
  border-bottom: 1px solid var(--stroke);
  interpolate-size: allow-keywords;
}

.faq__item::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size var(--dur) var(--ease-out), content-visibility var(--dur) allow-discrete;
}

.faq__item[open]::details-content {
  block-size: auto;
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: 72px;
  padding: var(--space-s) 4px;
  list-style: none;
  cursor: pointer;
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.35;
  color: var(--text);
  text-wrap: balance;
  border-radius: 8px;
  transition: color var(--dur-fast);
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q::after {
  content: "";
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background:
    linear-gradient(var(--text-dim), var(--text-dim)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--text-dim), var(--text-dim)) center / 1.5px 12px no-repeat;
  box-shadow: inset 0 0 0 1px var(--stroke-strong);
  transition: rotate var(--dur) var(--ease-out), background-color var(--dur-fast);
}

.faq__q:hover {
  color: var(--gold);
}

.faq__item[open] > .faq__q::after {
  rotate: 45deg;
  background-color: rgba(255, 255, 255, .06);
}

.faq__a {
  padding: 0 4px var(--space-m);
  max-width: 62ch;
  color: var(--text-dim);
}

.faq__a > * + * {
  margin-top: .8em;
}

.faq__a a {
  color: var(--gold);
}

/* 13 ─ Stats & lists ─────────────────────────────────────────────────────────────────────────────────── */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--space-l) var(--space-m);
}

.stat {
  display: grid;
  gap: 6px;
  align-content: start;
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--text);
}

.stat__value small {
  font-size: .5em;
  letter-spacing: 0;
  color: var(--gold);
}

.stat__label {
  max-width: 16em;
  color: var(--text-dim);
  font-size: var(--step--1);
  line-height: 1.45;
}

.stats--divided .stat {
  padding-left: var(--space-m);
  border-left: 1px solid var(--stroke-strong);
}

.checklist {
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
  font-size: var(--step--1);
  color: var(--text-body);
}

.checklist li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  line-height: 1.5;
}

.checklist li::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background:
    var(--gold) center / 14px 14px no-repeat;
  -webkit-mask: var(--icon-check) center / 14px 14px no-repeat;
  mask: var(--icon-check) center / 14px 14px no-repeat;
}

.checklist--muted li::before {
  background-color: var(--text-faint);
}

/* 14 ─ Tables ────────────────────────────────────────────────────────────────────────────────────────── */

.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--stroke);
  background: var(--surface);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}

.table caption {
  padding: var(--space-s);
  text-align: start;
  color: var(--text-dim);
}

.table th,
.table td {
  padding: 14px 18px;
  text-align: start;
  vertical-align: middle;
  border-bottom: 1px solid var(--stroke);
}

.table thead th {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: rgba(255, 255, 255, .02);
}

.table tbody th {
  font-weight: 550;
  color: var(--text);
}

.table td {
  color: var(--text-dim);
}

.table tr:last-child > * {
  border-bottom: 0;
}

.table .col-pro {
  background: rgba(233, 185, 73, .045);
}

.table thead .col-pro {
  color: var(--gold);
}

.yes,
.no {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
  background: var(--gold);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}

.no {
  background: var(--text-faint);
  -webkit-mask-image: var(--icon-dash);
  mask-image: var(--icon-dash);
}

/* 15 ─ Media & textures ──────────────────────────────────────────────────────────────────────────────── */

.texture-grain {
  position: relative;
  isolation: isolate;
}

.texture-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background-image: var(--grain);
  opacity: .06;
  mix-blend-mode: overlay;
}

.felt {
  background: var(--felt);
  color: #fff;
}

/* Soft decorative light; place inside a positioned section. */
.glow {
  position: absolute;
  z-index: -1;
  width: var(--glow-size, 640px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, var(--glow-color, rgba(233, 185, 73, .14)), transparent);
  filter: blur(10px);
}

.glow--green {
  --glow-color: rgba(29, 106, 70, .4);
}

.media-frame {
  overflow: hidden;
  border-radius: var(--radius-xl);
  box-shadow: inset 0 0 0 1px var(--stroke), var(--shadow-lg);
}

.icon-mark {
  width: 88px;
  height: 88px;
  border-radius: 22%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 20px 50px -16px rgba(0, 0, 0, .9), 0 0 80px -10px rgba(29, 106, 70, .55);
}

/* 16 ─ Device frame ──────────────────────────────────────────────────────────────────────────────────── */
/* <figure class="device"><div class="device__frame"><img class="device__screen" …></div></figure>          */

.device {
  --device-w: clamp(230px, 24vw, 320px);
  position: relative;
  width: var(--device-w);
  max-width: 100%;
  margin: 0;
  flex: none;
}

.device--sm { --device-w: clamp(190px, 18vw, 250px); }
.device--lg { --device-w: clamp(260px, 30vw, 380px); }

.device__frame {
  position: relative;
  padding: calc(var(--device-w) * .03);
  border-radius: calc(var(--device-w) * .165);
  background:
    linear-gradient(150deg, #5a5f5c 0%, #2a2e2c 12%, #121514 30%, #0d0f0e 70%, #2a2e2c 92%, #4c514e 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .18),
    inset 0 0 0 calc(var(--device-w) * .012) #070808,
    0 0 0 1px rgba(0, 0, 0, .7),
    0 2px 4px rgba(0, 0, 0, .4),
    0 calc(var(--device-w) * .16) calc(var(--device-w) * .3) calc(var(--device-w) * -.08) rgba(0, 0, 0, .75);
}

.device__screen {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1320 / 2868;
  object-fit: cover;
  border-radius: calc(var(--device-w) * .135);
  background: #000;
}

/* Dynamic Island */
.device__frame::after {
  content: "";
  position: absolute;
  top: calc(var(--device-w) * .053);
  left: 50%;
  width: calc(var(--device-w) * .27);
  height: calc(var(--device-w) * .078);
  translate: -50% 0;
  border-radius: 999px;
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04);
}

/* Glass sheen */
.device__frame::before {
  content: "";
  position: absolute;
  inset: calc(var(--device-w) * .03);
  z-index: 1;
  border-radius: calc(var(--device-w) * .135);
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 28%, transparent 42%);
}

/* Side buttons */
.device::before,
.device::after {
  content: "";
  position: absolute;
  width: calc(var(--device-w) * .012);
  border-radius: 2px;
  background: linear-gradient(90deg, #1b1e1d, #3d423f);
}

.device::before {
  right: calc(var(--device-w) * -.008);
  top: 26%;
  height: 11%;
}

.device::after {
  left: calc(var(--device-w) * -.008);
  top: 19%;
  height: 7%;
  box-shadow: 0 calc(var(--device-w) * .2) 0 #2c302e;
}

.device__caption {
  margin-top: var(--space-m);
  text-align: center;
  font-size: var(--step--1);
  color: var(--text-dim);
}

.device--tilt-left .device__frame { rotate: -6deg; }
.device--tilt-right .device__frame { rotate: 6deg; }

/* Composition: two or three overlapping phones. */
.device-stack {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.device-stack > .device {
  z-index: 2;
}

.device-stack > .device:not(:first-child, :last-child) {
  z-index: 3;
}

.device-stack > .device:first-child:not(:only-child) {
  margin-right: calc(var(--device-w) * -.22);
  scale: .86;
  translate: 0 4%;
  z-index: 1;
}

.device-stack > .device:last-child:not(:only-child) {
  margin-left: calc(var(--device-w) * -.22);
  scale: .86;
  translate: 0 4%;
  z-index: 1;
}

.device-stack > .device:first-child:not(:only-child) .device__frame,
.device-stack > .device:last-child:not(:only-child) .device__frame {
  filter: brightness(.82);
}

@media (max-width: 599.98px) {
  .device-stack > .device:not(:first-child, :last-child) {
    --device-w: min(52vw, 260px);
  }

  .device-stack > .device:first-child:not(:only-child),
  .device-stack > .device:last-child:not(:only-child) {
    --device-w: min(32vw, 170px);
  }

  .device-stack > .device:first-child:not(:only-child) { margin-right: calc(var(--device-w) * -.45); }
  .device-stack > .device:last-child:not(:only-child) { margin-left: calc(var(--device-w) * -.45); }

  /* Two phones: centre them as a pair. */
  .device-stack > .device:first-child:nth-last-child(2) { --device-w: min(44vw, 220px); }
  .device-stack > .device:last-child:nth-child(2) { --device-w: min(44vw, 220px); margin-left: calc(var(--device-w) * -.2); }
}

@media (prefers-reduced-motion: no-preference) {
  .device--float {
    animation: float 7s var(--ease-in-out) infinite alternate;
  }
}

@keyframes float {
  from { translate: 0 -6px; }
  to { translate: 0 6px; }
}

/* 17 ─ Legal prose + table of contents ───────────────────────────────────────────────────────────────── */

.prose {
  max-width: var(--measure);
  color: var(--text-body);
  font-size: var(--step-0);
  line-height: 1.75;
}

.prose > * + * {
  margin-top: 1.1em;
}

.prose h2 {
  margin-top: 2.2em;
  padding-top: 1.2em;
  border-top: 1px solid var(--stroke);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 500;
  letter-spacing: -.018em;
  line-height: 1.15;
  color: var(--text);
  scroll-margin-top: 24px; /* html scroll-padding-top already clears the header */
}

.prose > h2:first-child,
.prose > .legal__meta + h2 {
  margin-top: 1.4em;
}

.prose h3 {
  margin-top: 2em;
  font-family: var(--font-ui);
  font-size: var(--step-1);
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--text);
  scroll-margin-top: 24px; /* html scroll-padding-top already clears the header */
}

.prose h4 {
  margin-top: 1.6em;
  font-size: var(--step-0);
  font-weight: 700;
  color: var(--text);
}

.prose :is(h2, h3, h4) + * {
  margin-top: .7em;
}

.prose a {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-color: rgba(233, 185, 73, .45);
  text-underline-offset: .2em;
}

.prose a:hover {
  text-decoration-color: currentColor;
}

.prose strong {
  color: var(--text);
  font-weight: 650;
}

.prose :is(ul, ol) {
  padding-left: 1.3em;
}

.prose li + li {
  margin-top: .45em;
}

.prose li::marker {
  color: var(--gold);
}

.prose ol > li::marker {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.prose blockquote {
  padding-left: 1.2em;
  border-left: 2px solid var(--gold);
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--text);
}

.prose code {
  padding: .1em .35em;
  border-radius: 6px;
  background: rgba(255, 255, 255, .07);
  font-family: var(--font-mono);
  font-size: .88em;
}

.prose hr {
  margin-block: 2.4em;
}

.prose .table-wrap {
  margin-block: 1.6em;
}

.prose dl {
  display: grid;
  gap: .4em 1.2em;
}

.prose dt {
  font-weight: 650;
  color: var(--text);
}

.prose dd {
  margin: 0 0 .6em;
}

.lead-in {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--text);
}

.callout {
  display: grid;
  gap: .5em;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, .035);
  box-shadow: inset 0 0 0 1px var(--stroke);
  font-size: var(--step--1);
  line-height: 1.65;
  color: var(--text-body);
}

.callout--gold {
  background: linear-gradient(180deg, rgba(233, 185, 73, .09), rgba(233, 185, 73, .03));
  box-shadow: inset 0 0 0 1px rgba(233, 185, 73, .28);
}

.callout__title {
  font-weight: 700;
  color: var(--text);
}

.callout--gold .callout__title {
  color: var(--gold);
}

.prose .callout {
  margin-block: 1.6em;
}

.legal {
  display: grid;
  gap: var(--space-xl);
  padding-bottom: var(--section-y);
}

@media (min-width: 1024px) {
  .legal {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: clamp(48px, 6vw, 96px);
    align-items: start;
  }
}

.legal__aside {
  min-width: 0;
}

@media (min-width: 1024px) {
  .legal__aside {
    position: sticky;
    top: calc(var(--header-h) + 32px);
    max-height: calc(100vh - var(--header-h) - 64px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

.legal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: var(--step--1);
  color: var(--text-faint);
}

.toc {
  padding: 18px 20px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--stroke);
  font-size: var(--step--1);
}

@media (min-width: 1024px) {
  .toc {
    padding: 0;
    background: none;
    box-shadow: none;
  }
}

.toc__title {
  margin-bottom: 10px;
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.toc__list {
  display: grid;
  gap: 2px;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.toc__list a {
  display: grid;
  grid-template-columns: 1.8em 1fr;
  gap: 4px;
  padding: 6px 10px 6px 0;
  border-radius: 8px;
  color: var(--text-dim);
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--dur-fast);
  counter-increment: toc;
}

.toc__list a::before {
  content: counter(toc, decimal-leading-zero);
  font-size: .8em;
  font-variant-numeric: tabular-nums;
  color: var(--text-faint);
  padding-top: .12em;
}

.toc__list a:hover {
  color: var(--text);
}

.toc__list a[aria-current="true"] {
  color: var(--gold);
}

.toc__list a[aria-current="true"]::before {
  color: var(--gold);
}

@media (min-width: 1024px) {
  .toc__list {
    border-left: 1px solid var(--stroke);
  }

  .toc__list a {
    margin-left: -1px;
    padding-left: 14px;
    border-left: 1px solid transparent;
    border-radius: 0;
  }

  .toc__list a[aria-current="true"] {
    border-left-color: var(--gold);
  }

  /* The sticky aside scrolls (overflow-y: auto), which would clip the sides of an outer focus ring. */
  .toc__list a:focus-visible {
    outline-offset: -2px;
  }
}

/* 18 ─ Game mount (lazy loader in site.js) ───────────────────────────────────────────────────────────── */

.game-mount {
  --mount-min: 520px;
  position: relative;
  min-height: var(--mount-min);
}

.game-mount[data-compact="true"] {
  --mount-min: 500px;
}

.game-mount[data-state="ready"] {
  min-height: 0;
}

/* <noscript> message inside a mount: fills the space the game would take. */
.lp-noscript {
  display: grid;
  place-items: center;
  min-height: var(--mount-min, 440px);
  padding: var(--space-l);
  border-radius: 24px;
  background: rgba(7, 13, 10, .6);
  text-align: center;
  color: rgba(255, 255, 255, .86);
}

.game-skeleton {
  display: grid;
  gap: 14px;
  min-height: var(--mount-min);
  padding: clamp(14px, 2.6vw, 26px);
  border-radius: 28px;
  background: linear-gradient(180deg, #131D19, #0E1613);
  box-shadow: inset 0 0 0 1px var(--stroke);
  grid-template-rows: auto 1fr auto;
}

.game-skeleton__bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.game-skeleton__felt {
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: radial-gradient(ellipse 75% 95% at 50% 42%, rgba(29, 106, 70, .55), rgba(12, 58, 39, .55));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}

.game-skeleton__cards {
  display: flex;
  gap: 8px;
}

.game-skeleton__card {
  width: 52px;
  height: 73px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .12);
}

.game-skeleton__actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.sk {
  display: block;
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
}

.sk--btn {
  height: 54px;
  border-radius: 14px;
}

.sk--title { width: 40%; height: 18px; }
.sk--pill { width: 110px; height: 34px; }

@media (prefers-reduced-motion: no-preference) {
  .sk,
  .game-skeleton__card {
    background-image: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .07) 50%, transparent 80%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    animation: shimmer 1.6s linear infinite;
  }
}

@keyframes shimmer {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}

.game-error {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-s);
  min-height: var(--mount-min);
  padding: var(--space-l);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--stroke);
  text-align: center;
}

.game-error__title {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
}

.game-error__text {
  max-width: 30em;
  color: var(--text-dim);
  font-size: var(--step--1);
}

/* 19 ─ Motion & reveal ───────────────────────────────────────────────────────────────────────────────── */
/* site.js adds .js-reveal to <html> only when motion is allowed, so content is never hidden without JS.    */

.js-reveal [data-reveal] {
  opacity: 0;
  translate: 0 28px;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    translate var(--dur-slow) var(--ease-out),
    scale var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-reveal [data-reveal="fade"] { translate: none; }
.js-reveal [data-reveal="scale"] { translate: none; scale: .96; }

.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/* Above-the-fold entrance that starts with the first paint (no JS, no flash). */
@media (prefers-reduced-motion: no-preference) {
  .intro {
    animation: intro 1.1s var(--ease-out) both;
    animation-delay: var(--intro-delay, 0ms);
  }

  .intro--fade {
    animation-name: intro-fade;
  }
}

@keyframes intro {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes intro-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 20 ─ Utilities ─────────────────────────────────────────────────────────────────────────────────────── */

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

.mt-0 { margin-top: 0 !important; }
.mt-s { margin-top: var(--space-s) !important; }
.mt-m { margin-top: var(--space-m) !important; }
.mt-l { margin-top: var(--space-l) !important; }
.mt-xl { margin-top: var(--space-xl) !important; }
.mt-2xl { margin-top: var(--space-2xl) !important; }

.no-wrap { white-space: nowrap; }
.full-bleed { width: 100vw; margin-inline: calc(50% - 50vw); }

@media print {
  body::before,
  .site-header,
  .nav-toggle,
  .site-footer::before {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  .prose,
  .prose h2,
  .prose h3,
  .prose strong {
    color: #000;
  }

  .legal {
    display: block;
  }

  .legal__aside {
    display: none;
  }
}