/* Shared look for the landing and the checklist pages; the game keeps its own styles */
:root {
  --bg: #ECEFF2;
  --panel: #DDE2E7;
  --ink: #13161B;
  --muted: #4E5663;
  --line: #13161B;
  --accent: #E5482B;
  --accent-text: #B8321A;
  --ok: #1F6B45;
  --field: #FFFFFF;
  --f-display: 'Unbounded', 'Arial Black', Arial, sans-serif;
  --f-body: 'Onest', -apple-system, 'Segoe UI', Arial, sans-serif;
  --f-mono: 'JetBrains Mono', 'Courier New', monospace;
  color-scheme: light;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #13161B; --panel: #1E232B; --ink: #ECEFF2; --muted: #9AA3AF; --line: #3A414D;
  --accent: #E5482B; --accent-text: #FF7A5C; --ok: #5CC08B; --field: #1E232B; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #13161B; --panel: #1E232B; --ink: #ECEFF2; --muted: #9AA3AF; --line: #3A414D;
  --accent: #E5482B; --accent-text: #FF7A5C; --ok: #5CC08B; --field: #1E232B; color-scheme: dark }

* { box-sizing: border-box }
html, body { background: var(--bg) }
body { margin: 0; color: var(--ink); font-family: var(--f-body); font-size: 17px; line-height: 1.5;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 24px 48px }
img { max-width: 100% }
[hidden] { display: none !important }
a { color: var(--ink) }

.wrap { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px }
header { display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; border-bottom: 2px solid var(--line) }
.kicker { font-family: var(--f-mono); font-size: 13px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; margin: 0 }
h1 { font-family: var(--f-display); font-weight: 700; font-size: clamp(28px, 7.5vw, 44px); line-height: 1.05; margin: 0; letter-spacing: -.02em; text-wrap: balance }
h2 { font-family: var(--f-display); font-weight: 600; font-size: clamp(20px, 5vw, 26px); line-height: 1.2; margin: 0; text-wrap: balance }
h3 { font-family: var(--f-display); font-weight: 600; font-size: 18px; line-height: 1.3; margin: 0; text-wrap: balance }
p { margin: 0 }
.lead { color: var(--muted); max-width: 60ch }
.muted { color: var(--muted) }
section { display: flex; flex-direction: column; gap: 16px }

.btn { font: inherit; font-weight: 600; background: var(--ink); color: var(--bg); border: 0; padding: 14px 20px; cursor: pointer; text-decoration: none; display: inline-block }
.btn:disabled { opacity: .6; cursor: progress }
.btn:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px }