/* site.css — the marketing site at brb.golf (unit landing-page, D-217). The handoff's styles
   (units/landing-page/handoff/brb.Golf Site v3.dc.html, v3:L14–L294) moved from inline style attributes into classes;
   every value is the handoff's (SPEC §3.2–§3.4). What is not the handoff's is marked where it stands: the page's
   globals sit on body (so the nav sticks, §3.5), the reveal's hidden start waits for the script's mark (§3.25), the
   reduced-motion block (§3.24), the FAQ on <details> (§3.17), the Coming soon pill (§3.22) and the legal pages (§3.20). */

/* ---------------- globals (v3:L15–L24, v3:L34) ---------------- */
html, body { margin: 0; padding: 0; background: #121513; }
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }
a { color: #2e7a23; text-decoration: none; }
a:hover { color: #1f5c17; }
::selection { background: #6dbe5b; color: #121513; }
/* v3:L34's wrapper div, on body: overflow-x:hidden on a wrapper makes it the nav's scroll container and the sticky nav
   scrolls away with it; on body it propagates to the viewport and the nav sticks, as README:L30 draws it. */
body {
  color: #f2f0e8; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* the scroll reveal (v3:L23–L24): hidden only once site.js has marked the document, so with JavaScript off every
   section shows (§3.25). The transition rides on the "in" state, so the mark hides at once and only the reveal moves. */
.js [data-reveal] { opacity: 0; transform: translateY(24px); }
.js [data-reveal="in"] {
  opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}

@keyframes brbRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes brbMsgA { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes brbMsgB { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes brbPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(109,190,91,.55); } 50% { box-shadow: 0 0 0 7px rgba(109,190,91,0); } }
@keyframes brbFade { from { opacity: 0; } to { opacity: 1; } }

/* a picture still on the wire waits hidden; site.js drops the class on load and its fade plays (§3.6, §3.12, §3.15) */
img.is-loading { opacity: 0; animation: none; }

/* shared patterns (README:L20–L25) */
.wrap { max-width: 1200px; margin: 0 auto; }
.eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: #7fcd6e;
}
.eyebrow-light {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: #2e7a23;
}
.stack22 { display: flex; flex-direction: column; gap: 22px; }
.h2 {
  margin: 0; font-family: 'Unbounded', sans-serif; font-size: clamp(28px,3.6vw,52px); font-weight: 600;
  line-height: 1.08; letter-spacing: -.02em; color: #151815; text-wrap: balance;
}
.body18 { margin: 0; font-size: 18px; line-height: 1.55; color: #4a504a; max-width: 50ch; text-wrap: pretty; }

/* ---------------- nav (v3:L36–L43) ---------------- */
.nav {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(16px,4vw,40px); background: rgba(18,21,19,.9); -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-home { display: flex; align-items: center; gap: 12px; }
.nav-logo { height: 22px; width: auto; display: block; }
.nav-right { display: flex; align-items: center; gap: 10px; }
.chip {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: #a4a99f;
}
.chip-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #6dbe5b; animation: brbPulse 2.2s ease-in-out infinite;
}
.nav-play {
  padding: 10px 16px; border-radius: 999px; border: 0; background: #6dbe5b; color: #121513;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; transition: background .15s ease;
}
.nav-play:hover { background: #86d276; color: #121513; }

/* ---------------- hero #top (v3:L45–L99) ---------------- */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(56px,8vw,110px) clamp(20px,5vw,72px) clamp(56px,7vw,100px);
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-bg-img {
  position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; filter: blur(3px) saturate(.8);
  animation: brbFade 1.4s ease both;
}
.hero-bg-shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,rgba(18,21,19,.78),rgba(18,21,19,.86) 60%,#121513);
}
.hero-bg-glow {
  position: absolute; left: 50%; top: -10%; width: min(140vw,1600px); aspect-ratio: 2/1; transform: translateX(-50%);
  background: radial-gradient(ellipse at center,rgba(109,190,91,.14),rgba(109,190,91,0) 60%);
}
.hero-grid {
  position: relative; max-width: 1200px; margin: 0 auto; display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,440px),1fr)); gap: clamp(40px,5vw,72px); align-items: center;
}
.hero-copy { display: flex; flex-direction: column; gap: 26px; }
.hero-eyebrow { animation: brbRise .9s cubic-bezier(.2,.7,.2,1) both .05s; }
.hero-h1 {
  margin: 0; font-family: 'Unbounded', sans-serif; font-size: clamp(34px,4.8vw,72px); font-weight: 800; line-height: 1.02;
  letter-spacing: -.025em; color: #f2f0e8; text-wrap: balance; animation: brbRise 1s cubic-bezier(.2,.7,.2,1) both .15s;
}
.hero-lede {
  margin: 0; font-size: clamp(17px,1.4vw,21px); line-height: 1.5; color: #b8bcb3; max-width: 46ch; text-wrap: pretty;
  animation: brbRise 1s cubic-bezier(.2,.7,.2,1) both .28s;
}
.hero-act { display: flex; flex-direction: column; gap: 12px; animation: brbRise 1s cubic-bezier(.2,.7,.2,1) both .4s; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; max-width: 520px; }
.hero-play {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: 999px;
  border: 0; background: #6dbe5b; color: #121513; font-family: 'JetBrains Mono', monospace; font-size: 12px;
  font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 10px 36px rgba(109,190,91,.25); transition: background .15s ease,transform .15s ease;
}
.hero-play:hover { background: #86d276; color: #121513; transform: translateY(-1px); }
.hero-sub {
  display: flex; gap: 18px; flex-wrap: wrap; font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: #8f948d;
}
.hero-sub a { color: #a4a99f; text-decoration: underline; text-underline-offset: 3px; }
.hero-sub a:hover { color: #7fcd6e; }

/* the room mock (v3:L65–L97) */
.room {
  display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.14); border-radius: 14px;
  background: #1a1e1b; overflow: hidden; box-shadow: 0 40px 120px rgba(0,0,0,.5); max-width: 540px; width: 100%;
  justify-self: center; animation: brbRise 1s cubic-bezier(.2,.7,.2,1) both .35s;
}
.room-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 16px;
  border-bottom: 1px solid rgba(255,255,255,.1); background: #161917;
}
.room-code {
  display: flex; align-items: center; gap: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: #a4a99f;
}
.room-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #6dbe5b; animation: brbPulse 2.2s ease-in-out infinite;
}
.room-hole {
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: #7fcd6e;
}
.room-players {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(118px,1fr)); gap: 6px; padding: 10px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.player {
  display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 9px; border-radius: 8px;
  background: rgba(255,255,255,.04); min-width: 0;
}
.player-top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.player-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.player-name {
  font-size: 13px; font-weight: 500; color: #f2f0e8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.player-city, .player-wait {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .04em; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.player-city { color: #8f948d; }
.player-wait { color: #7fcd6e; }
.chat {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 16px; height: 272px;
  overflow: hidden;
}
.chat-sys {
  align-self: center; padding: 5px 10px; border-radius: 4px; background: rgba(109,190,91,.1);
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .08em; color: #7fcd6e; text-align: center;
}
.chat-msg { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; align-items: start; }
.chat-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; }
.chat-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.chat-who { display: flex; gap: 8px; align-items: baseline; }
.chat-name { font-size: 13px; font-weight: 500; color: #f2f0e8; }
.chat-city { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .06em; color: #6f746e; }
.chat-text { font-size: 14.5px; line-height: 1.4; color: #d8dbd3; text-wrap: pretty; }
/* the newest line only, by chatN's parity (v3:L530), so the animation restarts every step */
.brbMsgA { animation: brbMsgA .5s cubic-bezier(.2,.7,.2,1) both; }
.brbMsgB { animation: brbMsgB .5s cubic-bezier(.2,.7,.2,1) both; }
.composer {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px 14px; border-top: 1px solid rgba(255,255,255,.08);
}
.composer-field {
  flex: 1; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); font-size: 13.5px;
  color: #6f746e;
}
.composer-send {
  padding: 10px 14px; border-radius: 999px; background: #6dbe5b; color: #121513;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------------- "Right now" clocks (v3:L101–L114) ---------------- */
.now { border-top: 1px solid rgba(255,255,255,.08); padding: clamp(40px,5vw,64px) clamp(20px,5vw,72px); }
.now-inner { display: flex; flex-direction: column; gap: 22px; }
.now-head {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #7fcd6e;
}
.now-local { color: #8f948d; }
.cities { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,104px),1fr)); gap: 8px; }
.city {
  display: flex; flex-direction: column; gap: 7px; padding: 12px 10px 11px; border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; min-width: 0;
}
.city-top { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #c9cdc4; min-width: 0; }
.city-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: #6dbe5b; }
.city-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.city-time {
  font-family: 'Unbounded', sans-serif; font-size: clamp(18px,1.5vw,22px); font-weight: 400; letter-spacing: -.02em;
  color: #f2f0e8;
}
.city-label {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  color: #8f948d; text-wrap: pretty;
}
/* h ≥ 23 || h < 7 (v3:L540) */
.city.is-asleep .city-dot { background: rgba(255,255,255,.18); }
.city.is-asleep .city-label { color: #6f746e; }

/* ---------------- light sections (v3:L116, L145, L187, L253) ---------------- */
.sec { color: #151815; padding: clamp(80px,10vw,150px) clamp(20px,5vw,72px); }
.sec-light { background: #f4f2ec; }
.sec-sand { background: #e9e6dc; }
.sec-rule { border-top: 1px solid rgba(21,24,21,.08); }
.two-col {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,420px),1fr)); gap: clamp(32px,5vw,80px);
  align-items: center;
}

/* 01 / Rooms #how (v3:L116–L143) */
.tags { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 4px; }
.tag {
  padding: 7px 12px; border: 1px solid rgba(21,24,21,.18); border-radius: 999px; font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #3b413b;
}
.rcards { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: 12px; }
.rcard {
  display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid rgba(21,24,21,.14);
  border-radius: 12px; background: #fbfaf6;
}
.rcard-top {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #5b615a;
}
.rcard-open { color: #2e7a23; }
.rcard-name { font-family: 'Unbounded', sans-serif; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: #151815; }
.seats { display: flex; gap: 5px; }
.seat { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(21,24,21,.15); }
.seat-empty { background: transparent; border-color: rgba(21,24,21,.3); }
.rcard-who {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 1.6; letter-spacing: .04em; color: #5b615a;
  text-wrap: pretty;
}

/* 02 / The game #game (v3:L145–L185) */
.game-inner { display: flex; flex-direction: column; gap: clamp(48px,6vw,80px); }
.shots { display: grid; grid-template-columns: 1fr; gap: 14px; }
.shot { display: flex; flex-direction: column; gap: 10px; }
.shot-frame {
  position: relative; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden;
  background: repeating-linear-gradient(135deg,#dcd9cf 0 10px,#e6e3d9 10px 20px);
}
.shot-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  animation: brbFade .5s ease both;
}
.shot-cap {
  display: flex; justify-content: space-between; gap: 12px; font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: #5b615a;
}
.stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: clamp(24px,3vw,40px); }
.stat { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid rgba(21,24,21,.16); }
.stat-big {
  font-family: 'Unbounded', sans-serif; font-size: clamp(22px,2.2vw,30px); font-weight: 600; letter-spacing: -.01em;
  color: #151815;
}
.stat-text { font-size: 15px; line-height: 1.5; color: #5b615a; }
.builder .stat-text { text-wrap: pretty; }

/* 03 / Course builder #builder (v3:L187–L251) */
.builder-inner { display: flex; flex-direction: column; gap: clamp(40px,5vw,64px); }
.builder-row {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,330px),1fr)); gap: clamp(28px,3vw,56px);
  align-items: center;
}
.builder .body18 { max-width: 52ch; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
/* §3.22: `Coming soon` in the slot of `Open the builder →` — its dark pill, not a link: no arrow, no hover */
.soon {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; background: #151815;
  color: #f2f0e8; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; cursor: default;
}
.bcard {
  display: flex; flex-direction: column; border: 1px solid rgba(21,24,21,.14); border-radius: 14px; overflow: hidden;
  background: #151815; color: #f2f0e8; box-shadow: 0 30px 80px rgba(21,24,21,.18);
}
.bcard-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,.1); font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: #a4a99f;
}
.bcard-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcard-body { display: grid; grid-template-columns: auto minmax(0,1fr); }
.rail {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; border-right: 1px solid rgba(255,255,255,.08);
  border-bottom: 0; overflow-x: auto; scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.tool {
  flex: none; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 9px 12px; border-radius: 8px;
  border: 0; background: transparent; color: #a4a99f; font-family: 'JetBrains Mono', monospace; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; text-align: left; cursor: pointer; transition: background .15s ease;
}
.tool-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.2); flex: none; }
.tool.is-done { color: #c9cdc4; }
.tool.is-on { background: rgba(109,190,91,.14); color: #f2f0e8; }
.tool.is-done .tool-dot, .tool.is-on .tool-dot { background: #6dbe5b; }
.tool:hover { background: rgba(255,255,255,.08); }
.preview { display: flex; flex-direction: column; gap: 10px; padding: 12px; min-width: 0; }
.still {
  position: relative; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden;
  background: repeating-linear-gradient(135deg,#1c211d 0 10px,#232925 10px 20px);
}
.still-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  animation: brbFade .35s ease both;
}
.still-hint {
  position: absolute; inset: 0; display: grid; place-items: center; font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #8f948d;
}
.cap { display: flex; flex-direction: column; gap: 3px; min-height: 52px; }
.cap-name {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: #7fcd6e;
}
.cap-text { font-size: 13px; line-height: 1.4; color: #e4e6df; text-wrap: pretty; }
.steps-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.steps-left { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; }
.bars { display: flex; gap: 4px; }
.bar { width: 18px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.14); }
.bar.is-on { background: #6dbe5b; }
.step-n {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: #8f948d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.next {
  flex: none; min-height: 40px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14);
  background: transparent; color: #c9cdc4; font-family: 'JetBrains Mono', monospace; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: border-color .15s ease;
}
.next:hover { border-color: #6dbe5b; color: #7fcd6e; }
/* below 640 px: one column, the rail a scrolling row above the image (v3:L545, `narrow` = innerWidth < 640) */
@media (max-width: 639.98px) {
  .bcard-body { grid-template-columns: minmax(0,1fr); }
  .rail { flex-direction: row; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); }
}

/* 04 / Questions #faq (v3:L253–L272) — <details name="faq">, so one opens at a time with JavaScript off (§3.17) */
.faq-inner { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(32px,4vw,56px); }
.faq .h2 { text-wrap: wrap; }
.faq-list { display: flex; flex-direction: column; border-top: 1px solid rgba(21,24,21,.16); }
.faq-item { border-bottom: 1px solid rgba(21,24,21,.16); }
.faq-q {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0;
  border: 0; background: none; color: #151815; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(17px,1.6vw,21px); font-weight: 500; text-align: left; cursor: pointer; transition: color .15s ease;
  list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: #2e7a23; }
.faq-sign {
  font-family: 'JetBrains Mono', monospace; font-size: 18px; color: #2e7a23; flex: none; width: 20px; text-align: center;
}
.faq-sign::before { content: '+'; }
.faq-item[open] .faq-sign::before { content: '\2212'; }
.faq-a { padding: 0 0 24px; font-size: 16px; line-height: 1.55; color: #4a504a; max-width: 60ch; text-wrap: pretty; }
.faq-item[open] .faq-a { animation: brbFade .3s ease both; }

/* ---------------- final CTA #play (v3:L274–L286) ---------------- */
.cta {
  position: relative; overflow: hidden; background: #121513; padding: clamp(96px,12vw,180px) clamp(20px,5vw,72px);
}
.cta-glow {
  position: absolute; left: 50%; top: 50%; width: min(120vw,1400px); aspect-ratio: 2/1; transform: translate(-50%,-50%);
  background: radial-gradient(ellipse at center,rgba(109,190,91,.14),rgba(109,190,91,0) 60%); pointer-events: none;
}
.cta-inner {
  position: relative; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 28px;
}
.cta-logo { height: clamp(32px,4vw,48px); width: auto; display: block; }
.cta-h2 {
  margin: 0; font-family: 'Unbounded', sans-serif; font-size: clamp(30px,4.6vw,68px); font-weight: 800; line-height: 1.02;
  letter-spacing: -.025em; color: #f2f0e8; text-wrap: balance;
}
.cta-body { margin: 0; font-size: 18px; line-height: 1.55; color: #b8bcb3; max-width: 46ch; text-wrap: pretty; }
.cta-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; max-width: 560px; }
.cta-play {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: 999px;
  border: 0; background: #6dbe5b; color: #121513; font-family: 'JetBrains Mono', monospace; font-size: 12px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 10px 36px rgba(109,190,91,.25); transition: background .15s ease;
}
.cta-play:hover { background: #86d276; color: #121513; }
.cta-sub {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: #8f948d;
}

/* ---------------- footer (v3:L288–L294) ---------------- */
.foot { border-top: 1px solid rgba(255,255,255,.08); padding: 28px clamp(20px,5vw,72px); }
.foot-inner {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .08em; color: #8f948d;
}
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-legal { display: flex; gap: 22px; }
.foot a { color: #a4a99f; }
.foot a:hover { color: #7fcd6e; }

/* ---------------- the legal pages (§3.20: no design source; the page's nav, footer and tokens) ---------------- */
.legal { padding: clamp(56px,8vw,110px) clamp(20px,5vw,72px) clamp(56px,7vw,100px); }
.legal-inner { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.legal-h1 {
  margin: 0; font-family: 'Unbounded', sans-serif; font-size: clamp(28px,3.6vw,52px); font-weight: 600; line-height: 1.08;
  letter-spacing: -.02em; color: #f2f0e8;
}
.legal-secs { display: flex; flex-direction: column; gap: 28px; padding-top: 18px; }
.legal-sec h2 { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: #f2f0e8; }
.legal-sec p { margin: 0; font-size: 16px; line-height: 1.55; color: #b8bcb3; max-width: 60ch; }

/* ---------------- reduced motion (§3.24, README:L131): nothing rises, reveals, fades, pulses or slides in ---------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}