:root{
  --bg:#0B0B0D; --surface:#15151A; --text:#F5F3EE; --dim:#9A988F;
  --accent:#C8A86B; --green:#0E7A3A; --hair:#26262C;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:760px;margin:0 auto;padding:0 24px}
header.site{border-bottom:1px solid var(--hair);position:sticky;top:0;background:rgba(11,11,13,.85);backdrop-filter:blur(10px);z-index:10}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.3px;color:var(--text)}
.sign{display:inline-block;background:var(--green);color:#fff;font-weight:800;font-size:12px;
  letter-spacing:.5px;padding:5px 9px;border-radius:7px;border:2px solid rgba(255,255,255,.85)}
nav.site a{color:var(--dim);font-size:14px;margin-left:22px}
nav.site a:hover{color:var(--text);text-decoration:none}
.hero{padding:84px 0 56px;text-align:center;border-bottom:1px solid var(--hair)}
.hero h1{font-size:clamp(36px,7vw,60px);line-height:1.05;margin:0 0 16px;font-weight:800}
.hero .accent{color:var(--team-accent)}
.hero p{color:var(--dim);font-size:19px;max-width:560px;margin:0 auto 28px}
.cta{display:inline-block;background:var(--accent);color:#0B0B0D;font-weight:700;
  padding:13px 22px;border-radius:12px}
.cta:hover{text-decoration:none;filter:brightness(1.05)}
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;padding:56px 0}
.card{background:var(--surface);border:1px solid var(--hair);border-radius:16px;padding:22px}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:var(--dim);font-size:15px}
.legal{padding:48px 0 80px}
.legal h1{font-size:34px;margin:0 0 6px}
.legal .updated{color:var(--dim);font-size:14px;margin-bottom:32px}
.legal h2{font-size:20px;margin:32px 0 10px;border-top:1px solid var(--hair);padding-top:24px}
.legal ul{padding-left:20px}
.legal li{margin:6px 0}
footer.site{border-top:1px solid var(--hair);color:var(--dim);font-size:14px;padding:32px 0}
footer.site .wrap{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;justify-content:space-between}
footer.site a{color:var(--dim)}
.muted{color:var(--dim)}

:root{
  --team-accent: var(--accent);
}

/* ---- live game card ---- */
.game-card{display:flex;align-items:center;gap:12px;background:var(--surface);
  border:1px solid var(--hair);border-left:3px solid var(--team-accent);
  border-radius:10px;padding:12px 16px;margin-bottom:8px}
.game-card__status{font-size:11px;font-weight:800;letter-spacing:.5px;
  color:var(--dim);text-transform:uppercase;min-width:52px}
.game-card--live .game-card__status{color:var(--team-accent)}
.game-card__teams{flex:1;font-weight:600}
.game-card__score{font-variant-numeric:tabular-nums;font-weight:700}
.empty{color:var(--dim);font-size:14px}

/* ---- external coverage headlines ---- */
.headlines{padding:20px 0;border-top:1px solid var(--hair)}
.headlines__label{font-size:12px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--team-accent);font-weight:700;margin:0 0 10px}
.headlines__list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.headlines__list a{color:var(--text);font-weight:600}
.headlines__list a:hover{color:var(--team-accent)}
.headlines__source{color:var(--dim);font-size:13px}

/* ---- pick'em demo ---- */
.pickem{background:var(--surface);border:1px solid var(--hair);border-radius:16px;padding:20px;text-align:center}
.pickem__prompt{margin:0 0 14px;font-weight:700}
.pickem__teams{display:flex;gap:10px;justify-content:center}
.pickem__team{flex:1;max-width:160px;padding:12px;border-radius:10px;border:1px solid var(--hair);
  background:var(--bg);color:var(--text);font-weight:700;cursor:pointer}
.pickem__team:hover:not(:disabled){border-color:var(--team-accent)}
.pickem__team.is-picked{background:var(--team-accent);color:#0B0B0D;border-color:var(--team-accent)}
.pickem__team:disabled{cursor:default;opacity:.85}
.pickem__result{margin:14px 0 0;color:var(--dim);font-size:14px}
.pickem__reset{margin-left:8px;background:none;border:none;color:var(--team-accent);
  text-decoration:underline;cursor:pointer;font-size:14px}

/* ---- fan card flip demo ---- */
.fancard{width:220px;height:140px;margin:0 auto;perspective:800px;cursor:pointer}
.fancard__inner{position:relative;width:100%;height:100%;transition:transform .5s;
  transform-style:preserve-3d}
.fancard.is-flipped .fancard__inner{transform:rotateY(180deg)}
.fancard__face{position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;
  border:1px solid var(--hair);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;background:linear-gradient(135deg,var(--surface),var(--bg))}
.fancard__face--back{transform:rotateY(180deg);border-color:var(--team-accent)}
.fancard__rank{font-weight:800;font-size:18px}
.fancard__hint,.fancard__streak{color:var(--dim);font-size:13px}

/* ---- scroll reveal ---- */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .fancard__inner{transition:none}
}

.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta--secondary{background:transparent;color:var(--text);border:1px solid var(--hair)}
.section-label{font-size:13px;text-transform:uppercase;letter-spacing:.5px;color:var(--team-accent);margin:0 0 14px;font-weight:700}
.screens{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;padding-bottom:56px}
.screens img{width:100%;border-radius:12px;border:1px solid var(--hair)}