/* Monster Block — a deliberately single-theme site: the product is a dark
   scoreboard, and the page is the product. Every colour is painted, never
   inherited from the host. */
:root{
  --ground:#0A0C10; --surface:#13161D; --raised:#1A1E27;
  --ink:#F4F6F9; --muted:#8892A4; --faint:#5A6375;
  --lime:#C7F042; --blue:#1C4FD9; --violet:#6E2AA0;
  --rule:#1F242E;
  --display:"Archivo Black",system-ui,sans-serif;
  --body:"Public Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);
     font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:var(--lime)}
.wrap{max-width:68rem;margin:0 auto;padding-left:1.5rem;padding-right:1.5rem}
.narrow{max-width:44rem}

/* ---- nav ---- */
nav{border-bottom:1px solid var(--rule)}
nav .wrap{display:flex;align-items:center;gap:1rem;padding-block:1rem}
.mark{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);margin-right:auto}
.mark img{width:30px;height:30px;border-radius:7px}
.mark span{font-family:var(--display);font-size:1rem;letter-spacing:-.01em}
nav a.link{color:var(--muted);text-decoration:none;font-size:.9rem}
nav a.link:hover{color:var(--ink)}

/* ---- hero ---- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule)}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center;
            padding-block:4rem 4.5rem}
.eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
         color:var(--lime);margin:0 0 1.1rem}
h1{font-family:var(--display);font-size:clamp(2.6rem,7vw,4.4rem);line-height:.97;
   letter-spacing:-.03em;margin:0 0 1.1rem;text-wrap:balance}
.claim{font-size:1.2rem;color:var(--muted);margin:0 0 2rem;max-width:34rem}
.claim strong{color:var(--ink);font-weight:600}
.cta{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.btn{display:inline-block;background:var(--lime);color:#0A0C10;text-decoration:none;
     font-family:var(--mono);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
     font-weight:500;padding:.85rem 1.4rem;border-radius:3px}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--rule)}
.btn:focus-visible,a:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.hero video{width:100%;border:1px solid var(--rule);border-radius:4px;background:#000}

/* ---- the board: the app's own signature as a page section ---- */
.board{display:grid;grid-template-columns:1fr 1fr;min-height:24rem}
.board .side{padding:2rem 1.75rem;display:flex;flex-direction:column;justify-content:space-between}
.board .home{background:var(--blue)}
.board .away{background:var(--violet)}
.board .team{font-family:var(--mono);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
             color:rgba(255,255,255,.82);display:flex;align-items:center;gap:.5rem}
.board .dot{width:10px;height:10px;border-radius:50%;background:var(--lime);flex:none}
.board .digit{font-family:var(--display);font-size:clamp(5rem,17vw,11rem);line-height:.82;
              color:#F4F6F9;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.board-note{background:var(--surface);border-top:1px solid var(--rule);
            border-bottom:1px solid var(--rule)}
.board-note .wrap{display:flex;flex-wrap:wrap;gap:1rem 2.5rem;align-items:baseline;padding-block:1rem}
.board-note p{margin:0;color:var(--muted);font-size:.93rem}
.sets{font-family:var(--mono);font-size:.85rem;color:var(--muted);
      font-variant-numeric:tabular-nums;display:flex;gap:1.1rem}
.sets b{color:var(--ink);font-weight:500}

/* ---- features ---- */
section{padding-block:4.5rem}
h2{font-family:var(--display);font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.08;
   letter-spacing:-.025em;margin:0 0 .9rem;text-wrap:balance}
.lede{color:var(--muted);font-size:1.08rem;margin:0 0 2.5rem;max-width:40rem}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:4px;padding:1.5rem}
.card h3{font-family:var(--display);font-size:1.05rem;margin:0 0 .5rem;letter-spacing:-.01em}
.card p{margin:0;color:var(--muted);font-size:.95rem}
.card .num{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:var(--lime);
           display:block;margin-bottom:.9rem}

/* ---- privacy strip ---- */
.strip{background:var(--lime);color:#0A0C10}
.strip .wrap{padding-block:3rem}
.strip h2{color:#0A0C10;margin-bottom:.7rem}
.strip p{color:#1B2410;margin:0 0 .5rem;max-width:44rem;font-size:1.05rem}
.strip a{color:#0A0C10}

/* ---- footer ---- */
footer{border-top:1px solid var(--rule);padding-block:2.5rem 3.5rem;color:var(--faint);font-size:.9rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--ink)}
footer .spacer{margin-left:auto}

/* ---- document pages ---- */
.doc{padding-block:3.5rem 5rem}
.doc h1{font-size:clamp(2rem,5vw,2.9rem);margin-bottom:.4rem}
.doc .sub{color:var(--muted);margin:0 0 2.5rem}
.doc h2{font-family:var(--display);font-size:1.15rem;margin:2.5rem 0 .5rem}
.doc p,.doc li{color:var(--ink)}
.doc .muted{color:var(--muted)}
.doc hr{border:0;border-top:1px solid var(--rule);margin:2.5rem 0}
.callout{border-left:2px solid var(--lime);padding:.5rem 0 .5rem 1.15rem;margin:2rem 0}
.callout p{margin:0}

@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr;gap:2rem;padding-block:3rem}
  .grid{grid-template-columns:1fr}
  .board{min-height:16rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}