:root {
  --ink:#16231C; --chalk:#F6F7F1; --court:#1B4332; --ball:#D7E64B;
  --card:#FFFFFF; --muted:#6B7A70; --border:#E1E4DC; --error:#B3261E;
}
* { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:'Manrope', sans-serif; background:var(--chalk); color:var(--ink);
  line-height:1.5; -webkit-font-smoothing:antialiased;
}
.display { font-family:'Anton', sans-serif; text-transform:uppercase; letter-spacing:0.01em; }
a { color:inherit; }
img, svg { display:block; max-width:100%; }

.wrap { max-width:1100px; margin:0 auto; padding:0 24px; }

/* ===== Header ===== */
header { padding:28px 0; }
.header-row { display:flex; justify-content:space-between; align-items:center; }
.wordmark { font-family:'Anton', sans-serif; font-size:22px; letter-spacing:0.02em; }
.badge { font-size:13px; font-weight:600; background:var(--ball); color:var(--ink);
  padding:6px 14px; border-radius:20px; }

/* ===== Hero ===== */
.hero { padding:40px 0 80px; }
.hero-grid { display:grid; grid-template-columns:1fr; gap:48px; align-items:center; }
.hero-copy { animation:rise 0.7s ease-out; }
@keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
.hero h1 { font-size:clamp(40px, 8vw, 68px); line-height:1.02; margin-bottom:20px; }
.hero p.lede { font-size:18px; color:var(--muted); max-width:38ch; margin-bottom:32px; }
.signup-row { display:flex; gap:10px; flex-wrap:wrap; max-width:420px; }
.signup-row input { flex:1; min-width:180px; padding:14px 16px; border-radius:10px;
  border:1.5px solid var(--border); font-family:inherit; font-size:15px; background:var(--card); }
.signup-row input:focus { outline:none; border-color:var(--court); }
.signup-row input.invalid { border-color:var(--error); }
.btn-primary { background:var(--court); color:#fff; border:none; padding:14px 22px; border-radius:10px;
  font-family:inherit; font-weight:700; font-size:15px; cursor:pointer; white-space:nowrap; }
.btn-primary:hover { background:#123526; }
.btn-primary:disabled { opacity:0.6; cursor:not-allowed; }
.fine-print { font-size:13px; color:var(--muted); margin-top:10px; }
.fine-print.is-error { color:var(--error); }
.fine-print.is-success { color:var(--court); font-weight:600; }

/* Hero game card graphic */
.hero-visual { display:flex; justify-content:center; }
.game-card { background:var(--card); border-radius:16px; padding:20px 22px; width:280px;
  box-shadow:0 24px 48px rgba(22,35,28,0.16); transform:rotate(3deg); border:1px solid var(--border); }
.gc-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.gc-title { font-weight:700; font-size:16px; }
.gc-status { font-size:11.5px; font-weight:700; background:var(--ball); padding:3px 9px; border-radius:20px; }
.gc-avatars { display:flex; margin-bottom:12px; }
.gc-avatar { width:34px; height:34px; border-radius:50%; background:#DCE3D6; border:2.5px solid var(--card);
  margin-right:-10px; position:relative; }
.gc-dot { position:absolute; bottom:-3px; right:-4px; width:15px; height:15px; border-radius:50%;
  border:2px solid var(--card); }
.gc-dot.b { background:#2563eb; } .gc-dot.i { background:#d97706; } .gc-dot.a { background:#7c3aed; }
.gc-avatar.empty { background:transparent; border:2px dashed var(--muted); }
.gc-meta { font-size:13px; color:var(--muted); margin-bottom:4px; }
.gc-meta strong { color:var(--ink); font-weight:700; }

/* ===== Sports row ===== */
.sports { padding:20px 0 64px; border-top:1px solid var(--border); }
.sports-row { display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; padding-top:36px; }
.sport-item { display:flex; align-items:center; gap:10px; }
.sport-icon { width:40px; height:40px; border-radius:50%; background:var(--chalk); border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:19px; }
.sport-name { font-weight:700; font-size:15px; }

/* ===== Features ===== */
.features { padding:16px 0 88px; }
.section-head { max-width:46ch; margin-bottom:40px; }
.section-head h2 { font-size:clamp(28px, 4vw, 38px); line-height:1.08; margin-bottom:12px; }
.section-head p { color:var(--muted); font-size:16px; }

.feature-grid { display:grid; grid-template-columns:1fr; gap:16px; }
.feature-card { border-radius:16px; padding:28px; }
.feature-card h3 { font-size:19px; margin-bottom:8px; }
.feature-card p { color:var(--muted); font-size:15px; max-width:36ch; }
.feature-featured { background:var(--court); color:#fff; grid-column:1/-1; }
.feature-featured p { color:#CBDCC9; }
.feature-featured h3 { font-size:24px; }
.tint-a { background:#EAEEE3; }
.tint-b { background:var(--card); border:1px solid var(--border); }
.small-grid { display:grid; grid-template-columns:1fr; gap:16px; }

/* ===== CTA band ===== */
.cta-band { background:var(--court); color:#fff; padding:72px 0; }
.cta-band h2 { font-size:clamp(30px, 5vw, 46px); line-height:1.05; margin-bottom:16px; max-width:16ch; }
.cta-band p { color:#CBDCC9; font-size:16px; margin-bottom:32px; max-width:40ch; }
.cta-band .fine-print { color:#9DBDA9; }

/* ===== Footer ===== */
footer { padding:32px 0; }
.footer-row { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-row .wordmark { font-size:16px; }
.footer-meta { font-size:13px; color:var(--muted); }

@media (min-width:760px) {
  .hero-grid { grid-template-columns:1.1fr 0.9fr; }
  .feature-grid { grid-template-columns:1fr 1fr; }
  .feature-featured { grid-column:1/-1; display:flex; gap:40px; align-items:center; justify-content:space-between; }
  .feature-featured .fc-body { max-width:60%; }
  .small-grid { grid-template-columns:1fr 1fr; grid-column:1/-1; }
}