/* Big Kid Nation. Brand from the game: Inter Black, cyan on navy.
   Plain, large, high-contrast type on purpose (Brian runs screen zoom). */
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url(/fonts/Inter-SemiBold.ttf) format("truetype")}
@font-face{font-family:"Inter";font-weight:700;font-display:swap;src:url(/fonts/Inter-Bold.ttf) format("truetype")}
@font-face{font-family:"Inter";font-weight:900;font-display:swap;src:url(/fonts/Inter-Black.ttf) format("truetype")}

:root{
  --bg:#0f121e;
  --bg2:#161b2c;
  --ink:#f4f6fb;
  --soft:#b9c2d9;
  --cyan:#48d0ff;
  --cyan-d:#1fb4ec;
  --line:#2a3250;
  --ok:#7ee787;
  --bad:#ff8a8a;
  --gutter:20px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:600 18px/1.6 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--cyan)}
a:hover{color:#fff}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0}
[hidden]{display:none!important}

h1,h2{font-weight:900;line-height:1.08;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2.3rem,6vw,4rem)}
h2{font-size:clamp(1.9rem,4vw,2.8rem)}
.eyebrow{margin:0 0 .8em;font-weight:900;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.lead{font-size:clamp(1.1rem,2vw,1.3rem);color:var(--soft);max-width:36em;margin:0 0 1.4em}
.wrap{max-width:1100px;margin:0 auto;padding:0 var(--gutter)}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:1100px;margin:0 auto;padding:18px var(--gutter)}
.wordmark{font-weight:900;font-size:1.35rem;letter-spacing:.02em;text-transform:uppercase;color:var(--cyan);text-decoration:none;text-shadow:0 2px 0 #000}
.top nav{display:flex;align-items:center;gap:22px;font-weight:700}
.top nav a{color:var(--ink);text-decoration:none}
.top nav a:hover{color:var(--cyan)}
.top nav .nav-cta{color:var(--bg);background:var(--cyan);padding:9px 16px;border-radius:999px;font-weight:900}
.top nav .nav-cta:hover{background:#fff;color:var(--bg)}

/* hero */
.hero{max-width:1100px;margin:0 auto;padding:36px var(--gutter) 64px;display:grid;gap:40px;grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.hero{grid-template-columns:1.05fr 1fr;padding-top:56px}}
.hero-shot{margin:0}
.hero-shot a{position:relative;display:block;border-radius:14px;overflow:hidden;border:2px solid var(--line);box-shadow:0 20px 60px rgba(72,208,255,.12)}
.hero-shot img{width:100%}
.play{position:absolute;left:50%;top:50%;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;background:rgba(15,18,30,.78);border:3px solid var(--cyan)}
.play::after{content:"";position:absolute;left:31px;top:23px;border-left:26px solid var(--cyan);border-top:16px solid transparent;border-bottom:16px solid transparent}
.play-label{position:absolute;left:14px;bottom:12px;background:rgba(15,18,30,.85);padding:4px 12px;border-radius:999px;font-weight:900;font-size:.9rem}
.hero-shot a:hover .play{background:var(--cyan)}
.hero-shot a:hover .play::after{border-left-color:var(--bg)}

/* signup */
.signup{max-width:34em}
.signup-row{display:flex;gap:10px;flex-wrap:wrap}
.signup input[type=email]{flex:1 1 240px;min-width:0;font:inherit;font-weight:700;color:var(--ink);background:#0a0d17;border:2px solid var(--line);border-radius:12px;padding:15px 16px}
.signup input[type=email]::placeholder{color:#7d88a8}
.signup input[type=email]:focus{border-color:var(--cyan);outline:none;box-shadow:0 0 0 3px rgba(72,208,255,.3)}
button,.button{font:inherit;font-weight:900;cursor:pointer;color:var(--bg);background:var(--cyan);border:0;border-radius:12px;padding:15px 24px;text-decoration:none;display:inline-block;transition:background .15s}
button:hover,.button:hover{background:#fff;color:var(--bg)}
button:disabled{opacity:.6;cursor:wait}
.fine{font-size:.88rem;color:var(--soft);margin:.9em 0 0}
.signup-msg{min-height:1.5em;margin:.7em 0 0;font-weight:700}
.signup-msg.ok{color:var(--ok)}
.signup-msg.err{color:var(--bad)}

/* bands */
.band{background:var(--bg2);border-block:1px solid var(--line);padding:72px 0}
.status{display:inline-flex;align-items:center;gap:10px;font-weight:700;background:#0a0d17;border:1px solid var(--line);border-radius:999px;padding:8px 16px;margin:0 0 32px}
.dot{width:10px;height:10px;border-radius:50%;background:#ffc94a;box-shadow:0 0 0 4px rgba(255,201,74,.22)}
.shots{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:760px){.shots{grid-template-columns:repeat(3,1fr)}}
.shots img{border-radius:12px;border:2px solid var(--line);aspect-ratio:16/10;object-fit:cover;width:100%}

.about{padding-top:72px;padding-bottom:72px;max-width:760px}
.about p{color:var(--soft)}
.final{padding:80px 0}

footer{padding:40px 0 56px;color:var(--soft);font-size:.9rem}
.brandline{font-weight:900;color:var(--ink);margin:0 0 .6em}
.disclaimer{max-width:46em;margin:0 0 1em}

/* long text pages */
.doc{max-width:760px;margin:0 auto;padding:24px var(--gutter) 72px}
.doc h1{font-size:clamp(2rem,5vw,3rem)}
.doc h2{font-size:1.4rem;margin-top:1.8em}
.doc p,.doc li{color:var(--soft)}
.doc li{margin-bottom:.4em}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}