@font-face {
  font-family: Manrope;
  src: url("/fonts/manrope-400.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("/fonts/manrope-700.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("/fonts/manrope-800.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}

:root {
  --ink: #071421;
  --ink-raised: #0d2232;
  --ink-soft: #122c3d;
  --ink-line: #315165;
  --paper: #f7f3e8;
  --paper-line: #c5c9ba;
  --paper-muted: #526765;
  --muted: #a9b9bf;
  --mint: #6ce0d1;
  --copper: #ef9a69;
  --max: 1220px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: Manrope, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--mint); text-underline-offset: .18em; }
a:hover { color: var(--paper); }
a:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
.container { width: min(calc(100% - 56px), var(--max)); margin-inline: auto; }

.skip-link {
  position: fixed;
  z-index: 100;
  left: 16px;
  top: -60px;
  padding: 10px 14px;
  background: var(--mint);
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}
.skip-link:focus { top: 16px; }

.site-header {
  position: sticky;
  z-index: 20;
  top: 0;
  border-bottom: 1px solid var(--ink-line);
  background: var(--ink);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  gap: 28px;
}
.brand { display: block; width: 164px; flex-shrink: 0; }
.brand img { width: 100%; }
nav, .footer-links { display: flex; align-items: center; gap: clamp(16px, 2.8vw, 34px); }
nav a, .footer-links a {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
nav a:hover, .footer-links a:hover { color: var(--mint); }
.nav-store-link { color: var(--ink) !important; background: var(--mint); padding: 7px 11px; }
.nav-store-link:hover { background: var(--paper); }

h1, h2, h3, p, dl, ol, ul, figure { margin-top: 0; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -.04em; }
h1 { max-width: 660px; margin-bottom: 22px; font-size: clamp(48px, 6.5vw, 84px); font-weight: 800; }
h2 { margin-bottom: 20px; font-size: clamp(34px, 4.3vw, 58px); font-weight: 800; }
h3 { margin-bottom: 9px; font-size: 23px; font-weight: 700; }
.eyebrow {
  margin-bottom: 16px;
  color: var(--mint);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.hero {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr);
  gap: clamp(38px, 7vw, 102px);
  padding-block: 72px 92px;
}
.hero-copy { padding-block: 12px; }
.hero-lede { max-width: 535px; margin-bottom: 28px; color: var(--muted); font-size: 19px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 48px; }
.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 11px 19px;
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.button-primary { background: var(--mint); color: var(--ink); }
.button-primary:hover { background: var(--paper); color: var(--ink); }
.button-quiet { border-color: var(--ink-line); color: var(--muted); }
.button-quiet:hover { border-color: var(--paper); background: var(--paper); color: var(--ink); }
.hero-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 570px;
  margin-bottom: 0;
  border-top: 1px solid var(--ink-line);
}
.hero-facts div { padding: 14px 16px 0 0; border-right: 1px solid var(--ink-line); }
.hero-facts div + div { padding-left: 16px; }
.hero-facts div:last-child { border-right: 0; }
.hero-facts dt { margin-bottom: 3px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.hero-facts dd { margin: 0; color: var(--paper); font-size: 14px; font-weight: 700; line-height: 1.35; }
.hero-art { margin: 0; }
.hero-art-frame { position: relative; overflow: hidden; border: 1px solid var(--ink-line); background: var(--ink-raised); }
.hero-art-frame::after { position: absolute; inset: 0; border: 1px solid rgba(108, 224, 209, .22); content: ""; pointer-events: none; }
.hero-art img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; animation: court-drift 22s ease-in-out infinite alternate; }
.hero-art-mark { position: absolute; right: 14px; bottom: 10px; color: var(--mint); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
figcaption { display: flex; justify-content: space-between; gap: 20px; padding-top: 11px; color: var(--muted); font-size: 12px; }
figcaption span:last-child { color: var(--copper); }

.play-section { padding-block: 82px 94px; background: var(--paper); color: var(--ink); }
.play-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(42px, 9vw, 138px); }
.section-heading { max-width: 420px; }
.section-heading .eyebrow, .worlds-intro .eyebrow, .store-section .eyebrow, .support-section .eyebrow, .privacy-section .eyebrow { color: #267e76; }
.section-heading > p:last-child { color: var(--paper-muted); }
.play-list { border-top: 1px solid var(--paper-line); }
.play-row { display: grid; grid-template-columns: 54px 1fr; gap: 20px; padding: 25px 0 27px; border-bottom: 1px solid var(--paper-line); }
.play-row-featured { padding-left: 17px; border-left: 4px solid var(--copper); background: #ece9dc; }
.play-row p { max-width: 630px; margin-bottom: 0; color: var(--paper-muted); }
.play-row-featured p { color: #3e5c5a; }
.play-row a { color: #176e67; }
.row-number, .step-number { color: #267e76; font-size: 12px; font-weight: 800; letter-spacing: .1em; }

.round-section { padding-block: 92px 105px; background: var(--ink-raised); }
.section-heading-wide { max-width: 710px; }
.section-heading-wide > p:last-child { max-width: 560px; color: var(--muted); }
.round-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 54px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink-line); }
.round-steps li { min-height: 230px; padding: 19px 22px 20px 0; border-right: 1px solid var(--ink-line); }
.round-steps li + li { padding-left: 22px; }
.round-steps li:last-child { border-right: 0; }
.round-steps h3 { margin-top: 49px; color: var(--paper); }
.round-steps p { max-width: 240px; margin-bottom: 0; color: var(--muted); font-size: 14px; }
.round-note { max-width: 720px; margin: 43px 0 0; padding-top: 18px; border-top: 1px solid var(--ink-line); color: var(--muted); font-size: 14px; }
.round-note strong { color: var(--paper); }

.worlds-section { padding-block: 92px 100px; background: var(--paper); color: var(--ink); }
.worlds-layout { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(42px, 9vw, 138px); }
.worlds-intro { max-width: 410px; }
.worlds-intro > p:not(.eyebrow) { color: var(--paper-muted); }
.text-link { display: inline-block; margin-top: 14px; color: #176e67; font-size: 14px; font-weight: 800; }
.world-feature-list { border-top: 1px solid var(--paper-line); }
.world-feature { display: grid; grid-template-columns: 170px 1fr; gap: 24px; padding: 21px 0; border-bottom: 1px solid var(--paper-line); }
.world-feature p { margin-bottom: 0; color: var(--paper-muted); }
.world-feature .world-kicker { color: var(--ink); font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.world-index-wrap { margin-top: 62px; padding-top: 19px; border-top: 1px solid var(--paper-line); }
.world-index-label { margin-bottom: 20px; color: #267e76; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.world-index { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 18px; margin: 0; padding: 0; list-style: none; }
.world-index li { color: #405b5a; font-size: 14px; }

.store-section { padding-block: 65px; background: var(--copper); color: var(--ink); }
.store-layout { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: clamp(40px, 9vw, 140px); }
.store-section .eyebrow { color: var(--ink); }
.store-section h2 { max-width: 560px; margin-bottom: 0; }
.store-section p:not(.eyebrow) { max-width: 520px; margin-bottom: 22px; color: #3d2a24; }
.store-section .button-primary { background: var(--ink); color: var(--paper); }
.store-section .button-primary:hover { background: var(--paper); color: var(--ink); }

.support-section { padding-block: 76px; background: #0a1a29; }
.support-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(42px, 9vw, 138px); }
.support-copy { max-width: 680px; color: var(--muted); }
.support-copy .small { margin: 26px 0 0; color: var(--paper); font-size: 13px; }

.privacy-section { padding-block: 90px 110px; background: var(--paper); color: var(--ink); }
.privacy-layout { display: grid; grid-template-columns: .63fr 1.37fr; gap: clamp(42px, 9vw, 138px); }
.privacy-heading { position: sticky; top: 110px; align-self: start; }
.privacy-heading .effective { margin-top: 22px; color: var(--paper-muted); font-size: 13px; }
.privacy-copy { max-width: 750px; color: #405b5a; font-size: 15px; }
.privacy-copy h3 { margin: 34px 0 10px; color: var(--ink); font-size: 21px; }
.privacy-copy p { margin-bottom: 16px; }
.privacy-copy a { color: #176e67; }
.privacy-copy a:hover { color: var(--ink); }

.site-footer { padding-block: 30px; border-top: 1px solid var(--ink-line); background: var(--ink); }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.footer-brand { width: 138px; }
.footer-brand img { width: 100%; }
.footer-inner p { margin: 0; color: var(--muted); font-size: 13px; }

@keyframes court-drift {
  from { transform: scale(1.01) translate3d(0, 0, 0); }
  to { transform: scale(1.05) translate3d(-1.2%, -0.7%, 0); }
}

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding-block: 58px 78px; }
  .hero-copy { max-width: 700px; }
  .hero-art { max-width: 840px; }
  .play-layout, .worlds-layout, .store-layout, .support-layout, .privacy-layout { grid-template-columns: 1fr; gap: 42px; }
  .section-heading, .worlds-intro { max-width: 650px; }
  .round-steps { grid-template-columns: repeat(2, 1fr); }
  .round-steps li:nth-child(2) { border-right: 0; }
  .round-steps li:nth-child(3), .round-steps li:nth-child(4) { border-top: 1px solid var(--ink-line); }
  .round-steps li:nth-child(3) { padding-left: 0; }
  .privacy-heading { position: static; }
  .privacy-copy { max-width: none; }
}

@media (max-width: 680px) {
  html { scroll-padding-top: 24px; }
  .container { width: min(calc(100% - 34px), var(--max)); }
  .site-header { position: relative; }
  .header-inner { min-height: 66px; flex-wrap: wrap; gap: 10px 20px; padding-block: 12px; }
  .brand { width: 142px; }
  nav { flex-wrap: wrap; gap: 8px 14px; }
  nav a:nth-child(2), nav a:nth-child(3) { display: none; }
  nav a { font-size: 12px; }
  .nav-store-link { padding: 6px 8px; }
  h1 { font-size: clamp(42px, 13vw, 62px); }
  h2 { font-size: clamp(34px, 10vw, 48px); }
  .hero { padding-block: 42px 62px; }
  .hero-lede { font-size: 17px; }
  .hero-actions { margin-bottom: 38px; }
  .hero-actions .button { width: 100%; }
  .hero-facts { grid-template-columns: 1fr; }
  .hero-facts div, .hero-facts div + div { padding: 12px 0; border-right: 0; border-bottom: 1px solid var(--ink-line); }
  .hero-facts div:last-child { border-bottom: 0; }
  .play-section, .round-section, .worlds-section, .privacy-section { padding-block: 62px 72px; }
  .store-section { padding-block: 54px 60px; }
  .play-row { grid-template-columns: 34px 1fr; gap: 12px; }
  .play-row-featured { padding-left: 12px; }
  .round-steps { grid-template-columns: 1fr; margin-top: 38px; }
  .round-steps li, .round-steps li + li, .round-steps li:nth-child(3), .round-steps li:nth-child(4) { min-height: 0; padding: 18px 0 22px; border-right: 0; border-top: 0; border-bottom: 1px solid var(--ink-line); }
  .round-steps li:last-child { border-bottom: 0; }
  .round-steps h3 { margin-top: 20px; }
  .world-feature { grid-template-columns: 1fr; gap: 5px; }
  .world-index { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { align-items: flex-start; flex-direction: column; }
  .footer-links { flex-wrap: wrap; }
}

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