/* 442 Goals Game: marketing site stylesheet.
   Built on the shared house design used by 38 Football and Football Club Sim: Anton display
   headlines, bold colour-block grounds (pitch green / amber), real app screens in bezels,
   floating pills. Palette re-tokened for 442 (navy ink, amber accent, pitch green hero and
   primary buttons). Layout, spacing, type scale and motion are the shared system's.
   Mobile-first responsive: desktop grids collapse + swap to swipe carousels + a sticky
   Play dock below 900px. */

/* Self-hosted fonts (woff2, latin). No Google CDN, keeps the site tracker-free. */
@font-face{
  font-family:'Anton'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/anton-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:400 900; font-display:swap;
  src:url('/assets/fonts/archivo-latin.woff2') format('woff2');
}

:root{
  --bg:#0A0D14; --bg-alt:#0E1320; --card:#121826; --card-alt:#182033;
  --elevated:#1E2740; --border:#232C3D; --border-strong:#34405A;
  --fg:#F3F5F9; --muted:#97A1B5; --faint:#5F6A80;
  --pitch:#1DB954; --pitch-dark:#0F7A38; --pitch-bright:#3BE477; --pitch-line:#E8F1EC;
  --gold:#FFFFFF; --gold-dark:#C9CFDB; /* accent is white; amber survives only as the g-gold CTA ground */
  --ink:#0A0D14;               /* dark ink used on vibrant light grounds */
  --primary-fg:#0A0D14;

  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:26px; --r-pill:999px;
  --maxw:1240px; --maxw-narrow:760px;

  --display:'Anton', Impact, 'Arial Narrow Bold', sans-serif;
  --sans:'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }

body{
  margin:0; font-family:var(--sans); background:var(--bg); color:var(--fg);
  line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip; /* clip (not hidden) so position:fixed nav + dock still work (mobile gotcha) */
}
a{color:var(--pitch-bright); text-decoration:none;}
a:hover{color:var(--pitch);}
img{display:block;max-width:100%;}
h1,h2,h3{margin:0; line-height:1;}

.container{width:100%; max-width:var(--maxw); margin:0 auto; padding:0 40px;}
.container--narrow{max-width:var(--maxw-narrow);}

/* ── Display type ─────────────────────────────────────────────────────── */
.display{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  line-height:.92; letter-spacing:.5px;
}
.eyebrow{
  font-family:var(--sans); font-weight:800; text-transform:uppercase;
  letter-spacing:.22em; font-size:12.5px; color:var(--pitch-bright);
  display:inline-flex; align-items:center; gap:11px; margin:0 0 20px;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:currentColor;}
.lead{font-size:clamp(16px,1.5vw,19px); color:var(--muted); max-width:52ch; margin:0;}

/* Ink themes: on vibrant light grounds we flip to dark ink */
.on-dark{color:var(--fg);}
.on-dark .lead{color:var(--muted);}
.on-ink{color:var(--ink);}
.on-ink .eyebrow{color:var(--ink); opacity:.72;}
.on-ink .lead{color:rgba(10,13,20,.72);}

.accent-green{color:var(--pitch-bright);}
.accent-gold{color:var(--gold);}
.accent-white{color:#fff;}

/* ── Grounds (colour rhythm) ──────────────────────────────────────────── */
.ground{position:relative; overflow:hidden; isolation:isolate;}
.ground > *{position:relative; z-index:2;}
.ground::before, .ground::after{content:""; position:absolute; z-index:0; pointer-events:none;}

.g-green{background:linear-gradient(155deg,#27CD68 0%,#1DB954 46%,#12803A 100%);}
.g-green::before{inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 90px,rgba(0,0,0,.035) 90px 180px);}
.g-green::after{top:-30%;left:50%;transform:translateX(-50%);width:120%;height:90%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.28),transparent 62%);}

.g-pitch{background:linear-gradient(165deg,#12874A 0%,#0B5A31 60%,#073D22 100%);}
.g-pitch::before{inset:0;
  background:repeating-linear-gradient(90deg,rgba(59,228,119,.05) 0 90px,rgba(0,0,0,.05) 90px 180px);}
.g-pitch::after{top:-25%;left:50%;transform:translateX(-50%);width:90%;height:80%;
  background:radial-gradient(ellipse at center,rgba(59,228,119,.34),transparent 64%);}

.g-gold{background:linear-gradient(155deg,#FFC857 0%,#FFB020 52%,#E8931A 100%);}
.g-gold::after{top:-30%;left:50%;transform:translateX(-50%);width:120%;height:90%;
  background:radial-gradient(ellipse at center,rgba(255,248,225,.55),transparent 60%);}

.g-arena{background:radial-gradient(1300px 900px at 50% 0%,#151E33 0%,#0D1220 46%,#080B12 100%);}
.g-arena::before{top:-8%;left:8%;width:30%;height:120%;transform:rotate(16deg);filter:blur(40px);
  background:linear-gradient(rgba(59,228,119,.16),transparent 70%);}
.g-arena::after{top:-8%;right:8%;width:30%;height:120%;transform:rotate(-16deg);filter:blur(40px);
  background:linear-gradient(rgba(59,228,119,.16),transparent 70%);}

.g-dark{background:var(--bg);}
.g-dark-alt{background:var(--bg-alt);}

/* ── Buttons & store badge ─────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-weight:800; font-size:15px; letter-spacing:.2px;
  padding:15px 26px; border-radius:5px; border:1.5px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn--green{background:var(--pitch); color:var(--primary-fg); box-shadow:0 12px 30px -10px rgba(29,185,84,.7);}
.btn--green:hover{transform:translateY(-2px); background:var(--pitch-bright); box-shadow:0 16px 36px -10px rgba(59,228,119,.8);}
.btn--ink{background:var(--ink); color:var(--fg); border-color:rgba(0,0,0,.2);}
.btn--ink:hover{transform:translateY(-2px);}
.btn--ghost{background:transparent; color:var(--fg); border-color:var(--border-strong);}
.btn--ghost:hover{border-color:var(--pitch-bright); color:var(--pitch-bright);}
.on-ink .btn--ghost{color:var(--ink); border-color:rgba(10,13,20,.3);}
.on-ink .btn--ghost:hover{border-color:var(--ink); color:var(--ink);}

.store-badge{display:inline-flex; border-radius:11px; transition:transform .15s ease;}
.store-badge:hover{transform:translateY(-2px);}
.store-badge img{width:196px; height:auto;}
.cta-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap;}

/* ── Nav ──────────────────────────────────────────────────────────────── */
.nav{position:fixed; top:0; left:0; right:0; z-index:100; transition:background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
  border-bottom:1px solid transparent;}
.nav__inner{display:flex; align-items:center; gap:20px; height:72px;}
.nav.scrolled{background:rgba(10,13,20,.8); backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px); border-bottom-color:var(--border);}
.brand{display:inline-flex; align-items:center;}
.nav__links{display:flex; gap:30px; margin-left:auto; margin-right:6px;}
.nav__links a{font-size:14.5px; font-weight:700; color:var(--ink); opacity:.72; transition:opacity .15s ease, color .15s ease;}
.nav__links a:hover{opacity:1; color:var(--ink);}
.nav.scrolled .nav__links a{color:var(--fg); opacity:.7;}
.nav.scrolled .nav__links a:hover{opacity:1; color:var(--pitch-bright);}
.nav__cta{padding:11px 22px; font-size:14px; background:var(--ink); color:#fff; box-shadow:none;}
.nav__cta:hover{background:#141B2B; transform:translateY(-2px);}
.nav.scrolled .nav__cta{background:var(--pitch); color:var(--ink); box-shadow:0 10px 26px -10px rgba(29,185,84,.7);}
.nav.scrolled .nav__cta:hover{background:var(--pitch-bright);}

.nav__toggle{display:none;}
/* Solid, light nav for pages with no vibrant hero behind it (legal / doc pages). */
.nav--solid{background:rgba(10,13,20,.85); backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px); border-bottom-color:var(--border);}
.nav--solid .nav__links a{color:var(--fg); opacity:.7;}
.nav--solid .nav__links a:hover{opacity:1; color:var(--pitch-bright);}
.nav--solid .nav__cta{background:var(--pitch); color:var(--ink); box-shadow:0 10px 26px -10px rgba(29,185,84,.7);}
.nav--solid .nav__cta:hover{background:var(--pitch-bright);}


/* ── Sections ─────────────────────────────────────────────────────────── */
.section{padding:120px 0;}
.section--tight{padding:88px 0;}
.sec-head{max-width:760px; margin:0 0 60px;}
.sec-title{font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(40px,6vw,86px); line-height:.9; letter-spacing:0; margin:0 0 22px;}
.sec-head .lead{font-size:clamp(16px,1.6vw,20px);}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero{padding:150px 0 96px;}
.hero__grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr); gap:28px; align-items:center;}
/* Hero copy is centred within its column (desktop + mobile). */
.hero__copy{display:flex; flex-direction:column; align-items:center; text-align:center;}
.hero .eyebrow, .hero__meta, .cta-row{justify-content:center;}
.hero__lead{margin-left:auto; margin-right:auto;}
.hero__title{font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(44px,5.4vw,86px); line-height:.9; letter-spacing:0; margin:18px 0 26px; color:var(--ink);}
.hero__title .accent-white{color:#fff; text-shadow:0 4px 30px rgba(0,0,0,.25);}
.hero__lead{font-size:clamp(17px,1.6vw,21px); color:rgba(10,13,20,.74); max-width:44ch; font-weight:500; margin:0 0 32px;}
.hero__meta{margin-top:26px; display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(10,13,20,.66);}
.hero__meta .stars{color:#0A0D14; letter-spacing:2px; font-size:15px;}
.hero__meta b{color:var(--ink);}
.hero__meta .divider{width:1px;height:20px;background:rgba(10,13,20,.24);}

/* Phone cluster */
.cluster{position:relative; height:624px;}
.cluster > .ph--front, .cluster > .ph--back-l, .cluster > .ph--back-r{position:absolute;}
.cluster .ph--back-l{left:6%; top:64px; rotate:-7deg; z-index:1; filter:brightness(.84);}
.cluster .ph--back-r{right:2%; top:64px; rotate:7deg; z-index:1; filter:brightness(.84);}
.cluster .ph--front{left:50%; top:0; translate:-50% 0; z-index:3;}

/* Phone mockups are clickable -> the web app (so a tapped in-screen "Play free" CTA goes somewhere) */
.ph-link{display:block; color:inherit; text-decoration:none; cursor:pointer;}

/* Phone bezel */
.ph{position:relative;}
.ph__frame{position:absolute; inset:-9px; z-index:0;
  background:linear-gradient(155deg,#3A4560,#141A28 60%,#0A0D14);
  box-shadow:0 44px 90px -28px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.14);}
.ph__screen{position:absolute; inset:0; overflow:hidden; z-index:1;}
.ph__notch{position:absolute; top:9px; left:50%; transform:translateX(-50%); z-index:2;
  width:34%; height:22px; background:#05080699; border-radius:0 0 14px 14px;}

/* Floating pill */
.fpill{position:absolute; z-index:6; display:inline-flex; align-items:center; gap:11px; white-space:nowrap;
  padding:14px 20px; border-radius:var(--r-pill); font-weight:800;
  box-shadow:0 20px 44px -14px rgba(0,0,0,.55); backdrop-filter:blur(6px);}
.fpill--light{background:#fff; color:#0A0D14; border:1px solid rgba(0,0,0,.06);}
.fpill--gold{background:#0A0D14; color:var(--fg); border:1px solid rgba(255,255,255,.22);}
.fpill--glass{background:rgba(10,13,20,.55); color:var(--fg); border:1px solid rgba(255,255,255,.18);}
.fpill .big{font-size:26px; font-weight:900; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.fpill .sm{font-size:13px; font-weight:700; color:var(--faint);}
.fpill--glass .sm{color:var(--muted);}
.fpill .stars{color:var(--gold); font-size:19px; letter-spacing:1px;}
.live-dot{width:11px;height:11px;border-radius:50%;background:#60A5FA;box-shadow:0 0 12px #60A5FA;}

/* ── Stats band ───────────────────────────────────────────────────────── */
.statband{border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.statband__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; padding:44px 0;}
.stat{display:flex; flex-direction:column; gap:6px; align-items:flex-start; position:relative;}
.stat + .stat::before{content:""; position:absolute; left:-10px; top:6px; bottom:6px; width:1px; background:var(--border);}
.stat__num{font-family:var(--display); font-size:clamp(38px,4.6vw,60px); color:var(--pitch-bright); line-height:.9;}
.stat__label{font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}

/* ── Feature rows ─────────────────────────────────────────────────────── */
.frow{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; margin-bottom:120px;}
.frow:last-child{margin-bottom:0;}
.frow--flip .frow__media{order:-1;}
.frow__num{font-family:var(--display); font-size:22px; color:var(--pitch-bright);
  display:inline-flex; align-items:center; gap:12px; letter-spacing:.06em; margin-bottom:18px;}
.frow__num .rule{width:44px;height:2px;background:var(--pitch-bright);opacity:.5;}
.frow__title{font-family:var(--display); text-transform:uppercase; font-size:clamp(34px,4vw,58px);
  line-height:.92; margin:0 0 18px;}
.frow__body{color:var(--muted); font-size:clamp(15px,1.4vw,18px); max-width:46ch; margin:0 0 24px;}
.frow__tags{display:flex; flex-wrap:wrap; gap:10px;}
.tag{display:inline-flex; align-items:center; gap:7px; padding:9px 15px; border-radius:var(--r-pill);
  background:var(--card); border:1px solid var(--border); color:var(--fg); font-size:13px; font-weight:700;}
.tag .tdot{width:8px;height:8px;border-radius:2px;}
.frow__media{position:relative; display:flex; justify-content:center; min-height:560px; align-items:center;}
.frow__media .glow{position:absolute; inset:8% 12%; z-index:0; border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(59,228,119,.22),transparent 68%); filter:blur(20px);}
.frow__media .ph{z-index:1;}

/* ── Steps (how it plays) ─────────────────────────────────────────────── */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.step{background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:30px 26px;
  transition:transform .18s ease, border-color .18s ease;}
.step:hover{transform:translateY(-4px); border-color:var(--border-strong);}
.step__num{font-family:var(--display); font-size:30px; color:var(--ink);
  width:56px; height:56px; border-radius:var(--r-pill); background:var(--pitch-bright);
  display:grid; place-items:center; margin-bottom:20px;}
.step h3{font-family:var(--sans); font-weight:800; font-size:20px; margin:0 0 9px; letter-spacing:-.01em;}
.step p{color:var(--muted); font-size:15px; margin:0;}

/* ── Three-up showcase (.mpx- namespace) ── */
.mpx-row{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:24px;}
.mpx-card{display:flex; flex-direction:column; align-items:center; text-align:center;}
.mpx-card .ph{margin-bottom:26px;}
.mpx-card__title{font-family:var(--display); text-transform:uppercase; font-size:26px; margin:0 0 8px; color:var(--fg);}
.mpx-card__body{color:rgba(255,255,255,.78); font-size:15px; max-width:30ch; margin:0;}
.mpx-card__tag{font-family:var(--sans); font-weight:800; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--pitch-bright); margin-bottom:14px;}

/* ── Data / leagues ───────────────────────────────────────────────────── */
.leagues{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px;}
.league-chip{display:inline-flex; align-items:center; gap:10px; padding:14px 20px; border-radius:var(--r-md);
  background:var(--card); border:1px solid var(--border); font-weight:700; font-size:15px;}
.league-chip .flag{font-size:20px;}
.league-chip .n{color:var(--muted); font-size:13px; font-weight:700; margin-left:2px;}
.data-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:center;}
.data-facts{display:grid; gap:14px;}
.fact{display:flex; gap:16px; align-items:baseline; padding:18px 0; border-bottom:1px solid var(--border);}
.fact__num{font-family:var(--display); font-size:clamp(36px,4vw,54px); color:var(--pitch-bright); line-height:.9; min-width:150px;}
.fact__txt{color:var(--muted); font-size:15px;}
.fact__txt b{color:var(--fg); font-weight:800; display:block; font-size:16px; margin-bottom:2px;}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq{display:grid; gap:12px; max-width:820px;}
.faq__item{background:var(--card); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden;}
.faq__item summary{cursor:pointer; list-style:none; padding:22px 26px; font-weight:800; font-size:17px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item summary::after{content:"+"; font-weight:400; font-size:26px; color:var(--pitch-bright); transition:transform .2s ease;}
.faq__item[open] summary::after{transform:rotate(45deg);}
.faq__item p{margin:0; padding:0 26px 24px; color:var(--muted); font-size:15.5px;}

/* ── Final CTA ────────────────────────────────────────────────────────── */
.cta{padding:120px 0;}
.cta__grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center;}
.cta__title{font-family:var(--display); text-transform:uppercase; color:var(--ink);
  font-size:clamp(48px,6.6vw,104px); line-height:.9; margin:0 0 22px;}
.cta__title .accent-white{color:#fff;}
.cta__lead{color:rgba(10,13,20,.76); font-size:clamp(17px,1.6vw,21px); font-weight:500; max-width:38ch; margin:0 0 30px;}
.cta__media{display:flex; justify-content:center; position:relative;}
.cta__media .ph{transform:rotate(-4deg);}

/* Skip link (a11y) */
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--pitch); color:var(--ink);
  padding:10px 16px; border-radius:0 0 var(--r-md) 0; font-weight:800;}
.skip:focus{left:0;}

/* ── Footer ───────────────────────────────────────────────────────────── */
.footer{background:var(--bg); padding:72px 0 40px; border-top:1px solid var(--border);}
.footer__heading{font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--faint); margin:0 0 16px; font-weight:800;}
.footer__inner{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:44px;}
.footer__brand p{color:var(--muted); font-size:14px; max-width:42ch; margin:16px 0 0;}
.footer h4{font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--faint); margin:0 0 16px; font-weight:800;}
.footer__col a{display:block; color:var(--muted); font-size:14px; padding:6px 0;}
.footer__col a:hover{color:var(--pitch-bright);}
.footer__bottom{margin-top:52px; padding-top:26px; border-top:1px solid var(--border);
  display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between; align-items:baseline;}
.footer__bottom p{margin:0; font-size:12px; color:var(--faint);}
.footer__disclaimer{max-width:64ch;}

/* ── Legal / long-form doc pages (privacy, terms, cookies) ────────────── */
.legal{padding:132px 0 90px; background:var(--bg);}
.legal .container{max-width:var(--maxw-narrow);}
.legal h1{font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:0;
  font-size:clamp(40px,6vw,68px); line-height:.92; margin:0 0 10px; color:var(--fg);}
.legal .updated{color:var(--faint); font-size:12.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; margin:0 0 44px;}
.legal h2{font-family:var(--sans); font-weight:800; font-size:21px; letter-spacing:-.01em;
  margin:40px 0 12px; color:var(--fg);}
.legal p, .legal li{color:var(--muted); font-size:16px; line-height:1.7;}
.legal p{margin:0 0 16px;}
.legal ul{padding-left:20px; margin:0 0 18px; display:grid; gap:9px;}
.legal a{color:var(--pitch-bright); text-decoration:underline; text-underline-offset:2px;}
.legal a:hover{color:var(--pitch);}
.legal strong{color:var(--fg); font-weight:800;}
@media (max-width:900px){ .legal{padding:104px 0 64px;} }

/* ── Leaderboards (live board) ────────────────────────────────────────── */
.lb-main{position:relative; overflow:hidden; padding:120px 0 0; background:var(--bg);}
.lb-main > .container{position:relative; z-index:1; max-width:var(--maxw-narrow);}
.lb-bg{display:none;} /* plain black bg to match the homepage's dark sections */
.lb-bg::before{content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,rgba(29,185,84,.05) 0 80px,rgba(29,185,84,.09) 80px 160px);
  -webkit-mask:linear-gradient(180deg,#000 0,#000 45%,transparent 100%); mask:linear-gradient(180deg,#000 0,#000 45%,transparent 100%); opacity:.6;}
.lb-bg::after{content:""; position:absolute; top:-240px; left:50%; transform:translateX(-50%);
  width:900px; max-width:140%; height:600px; filter:blur(8px);
  background:radial-gradient(ellipse at center,rgba(59,228,119,.24),transparent 62%);}
.lb-head{text-align:center; margin-bottom:34px;}
.lb-head .eyebrow{justify-content:center; color:var(--pitch-bright);}
.lb-head .eyebrow .rule{width:26px; height:2px; background:currentColor; opacity:.5;}
.lb-live{display:inline-flex; align-items:center; gap:8px;}
.lb-live::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--pitch-bright); animation:lbPulse 2s infinite;}
@keyframes lbPulse{0%{box-shadow:0 0 0 0 rgba(59,228,119,.5);}70%{box-shadow:0 0 0 8px rgba(59,228,119,0);}100%{box-shadow:0 0 0 0 rgba(59,228,119,0);}}
@media (prefers-reduced-motion:reduce){.lb-live::before{animation:none;}}
.lb-title{font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:0;
  font-size:clamp(40px,7vw,72px); line-height:.92; margin:8px 0 14px; color:var(--fg);}
.lb-sub{color:var(--muted); max-width:60ch; margin:0 auto; font-size:clamp(15px,2.2vw,17px);}
.lb-controls{display:flex; flex-direction:column; gap:16px; margin-bottom:24px;}
.lb-tabs{display:inline-flex; gap:6px; padding:5px; align-self:center; background:var(--card); border:1px solid var(--border); border-radius:var(--r-pill);}
.lb-tab{padding:9px 20px; border-radius:var(--r-pill); border:0; background:transparent; color:var(--muted);
  font-family:var(--sans); font-weight:800; font-size:14px; cursor:pointer; transition:color .15s, background .15s;}
.lb-tab[aria-selected="true"]{background:var(--pitch); color:var(--ink);}
.lb-toolbar{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;}
.lb-subtabs{display:inline-flex; gap:6px; flex-wrap:wrap;}
.lb-subtab{padding:7px 13px; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--card-alt);
  color:var(--muted); font-family:var(--sans); font-size:13px; font-weight:700; cursor:pointer; transition:color .15s, border-color .15s;}
.lb-subtab[aria-selected="true"]{color:var(--pitch-bright); border-color:var(--pitch);}
.lb-subtabs[hidden]{display:none;}
.lb-search{position:relative; flex:1 1 200px; max-width:320px; margin-left:auto;}
.lb-search input{width:100%; font-family:var(--sans); font-size:14px; color:var(--fg); background:var(--card-alt);
  border:1px solid var(--border-strong); border-radius:var(--r-pill); padding:11px 18px;}
.lb-search input:focus{outline:none; border-color:var(--pitch-bright); box-shadow:0 0 0 3px rgba(59,228,119,.16);}
.lb-board{display:flex; flex-direction:column; gap:8px; min-height:220px;}
.lb-row{display:flex; align-items:center; gap:14px; width:100%; text-align:left; padding:13px 16px;
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-md); cursor:pointer;
  font-family:var(--sans); color:inherit; transition:border-color .15s, transform .08s;}
.lb-row:hover{border-color:var(--border-strong);}
.lb-row:active{transform:scale(.995);}
.lb-row.is-you{border-color:var(--pitch); background:linear-gradient(180deg,rgba(59,228,119,.08),var(--card));}
.lb-rank{flex:0 0 auto; min-width:34px; font-family:var(--display); font-weight:400; font-size:19px; color:var(--muted); text-align:center;}
.lb-row--top .lb-rank{color:var(--pitch-bright);}
.lb-rank--medal{font-family:var(--sans); font-size:22px; line-height:1;}
.lb-avatar{flex:0 0 auto; width:36px; height:36px; line-height:0;}
.lb-avatar svg{width:36px; height:36px; display:block;}
.lb-bar--avatar{width:36px; height:36px; border-radius:50%;}
.lb-row--top{background:linear-gradient(90deg,rgba(59,228,119,.07),var(--card) 46%);}
.lb-row--r1{background:linear-gradient(90deg,rgba(59,228,119,.12),var(--card) 52%); border-color:var(--border-strong);}
.lb-name{flex:1 1 auto; min-width:0; font-weight:800; font-size:15px; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.lb-meta{flex:0 0 auto; display:flex; align-items:center; gap:16px; color:var(--muted); font-size:13px;}
.lb-rec{font-variant-numeric:tabular-nums; color:var(--muted);}
.lb-stat{display:flex; flex-direction:column; align-items:flex-end; line-height:1.05;}
.lb-stat b{color:var(--fg); font-size:15px; font-weight:800; font-variant-numeric:tabular-nums;}
.lb-stat span{font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint);}
.lb-badge{font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--pitch-bright); white-space:nowrap;}
.lb-flag{font-size:18px;}
.lb-arrow{color:var(--faint); font-size:15px; flex:0 0 auto;}
.lb-skel{pointer-events:none;}
.lb-skel .lb-bar{height:13px; border-radius:6px; background:linear-gradient(90deg,var(--card-alt) 25%,var(--elevated) 37%,var(--card-alt) 63%); background-size:400% 100%; animation:lbShimmer 1.3s ease infinite;}
.lb-skel .lb-bar--rank{width:28px;}
.lb-skel .lb-bar--name{flex:1 1 auto; max-width:200px;}
.lb-skel .lb-bar--stat{width:54px;}
@keyframes lbShimmer{0%{background-position:100% 0;}100%{background-position:-100% 0;}}
@media (prefers-reduced-motion:reduce){.lb-skel .lb-bar{animation:none;}}
.lb-more{display:block; margin:22px auto 0;}
.lb-more[hidden]{display:none;}
.lb-state{text-align:center; color:var(--muted); padding:48px 16px;}
.lb-count{text-align:center; color:var(--faint); font-size:12px; margin-top:12px;}
/* Leaderboards mini-CTA under the board */
.lb-cta{text-align:center; margin-top:56px; padding-top:44px; border-top:1px solid var(--border);}
.lb-cta h2{font-family:var(--display); font-weight:400; text-transform:uppercase; font-size:clamp(30px,5vw,48px); line-height:.94; margin:0 0 10px;}
.lb-cta p{color:var(--muted); margin:0 0 22px;}
.lb-cta .cta-row{justify-content:center;}

/* ── Motion ───────────────────────────────────────────────────────────── */
/* Reveal-on-scroll only HIDES content when JS is confirmed on (html.js, set by an inline
   script in <head>). Without JS - and for any crawler that doesn't execute it - the content
   stays fully visible (no opacity:0 ever applies), so nothing is hidden from indexing. */
.js .reveal{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.js .reveal.in{opacity:1; transform:none;}
.reveal[data-d="1"]{transition-delay:.08s;}
.reveal[data-d="2"]{transition-delay:.16s;}
.reveal[data-d="3"]{transition-delay:.24s;}
@media (prefers-reduced-motion:reduce){ .js .reveal{opacity:1; transform:none; transition:none;} }
/* .float kept as an inert hook (no infinite loop, keeps capture/print stable).
   The cluster's dynamism comes from the fanned rotation + stagger, not motion. */
.float{}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width:1080px){
  .frow{gap:40px;}
  .hero__grid{gap:24px;}
}
@media (max-width:900px){
  .container{padding:0 24px;}
  .nav__links{display:none;}
  .hero{padding:120px 0 72px;}
  .hero__grid{grid-template-columns:1fr; gap:48px;}
  .cluster{height:560px; transform:scale(.92); transform-origin:top center;}
  .frow, .frow--flip .frow__media{grid-template-columns:1fr; order:0;}
  .frow{gap:32px; margin-bottom:88px;}
  .frow__media{order:2; min-height:auto;}
  .steps{grid-template-columns:1fr;}
  .mpx-row{grid-template-columns:1fr; gap:56px;}
  .data-grid{grid-template-columns:1fr; gap:36px;}
  .cta__grid{grid-template-columns:1fr; gap:40px;}
  .cta__media{order:-1;}
  .statband__grid{grid-template-columns:1fr 1fr; gap:32px 20px;}
  .stat:nth-child(3)::before, .stat:nth-child(odd)::before{display:none;}
  .footer__inner{grid-template-columns:1fr 1fr;}
  .section{padding:88px 0;}
}
@media (max-width:560px){
  .statband__grid{grid-template-columns:1fr 1fr;}
  .footer__inner{grid-template-columns:1fr;}
  .cta-row{flex-direction:column; align-items:stretch;}
  .cta-row .btn, .cta-row .store-badge{width:100%; justify-content:center;}
}

/* ── Mobile-optimised layer (single-phone hero, swipe carousels, sticky dock) ── */
.dockbar{display:none;}          /* desktop: no dock */
.caro-hint{display:none;}        /* desktop: no swipe hint (grids, not carousels) */

@media (max-width:900px){
  /* Hero: centred, with a single phone (drop the fanned back phones + pills) */
  .hero{text-align:center;}
  .hero__copy{display:flex; flex-direction:column; align-items:center;}
  .hero__meta, .cta-row{justify-content:center;}
  .hero .eyebrow{display:block; text-align:center;}
  .hero .eyebrow .dot{display:none;} /* the dot detaches when the label wraps; drop it on mobile */
  .hero__lead{margin-left:auto; margin-right:auto;}
  /* Final CTA: centre the title + subtext on mobile */
  .cta{text-align:center;}
  .cta__lead{margin-left:auto; margin-right:auto;}
  .cluster{height:auto; transform:none; display:flex; justify-content:center;}
  .cluster .ph--back-l, .cluster .ph--back-r, .cluster .fpill{display:none;}
  .cluster .ph--front{position:relative; left:auto; top:auto; translate:none;}

  /* Multiplayer + reviews become horizontal swipe carousels (one markup, responsive) */
  .mpx-row{display:flex; grid-template-columns:none; gap:16px;
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    scrollbar-width:none; padding:4px 24px 6px; margin:0 -24px;}
  .mpx-row::-webkit-scrollbar{display:none;}
  .mpx-card{flex:0 0 78%; max-width:330px; scroll-snap-align:center;}
  .caro-hint{display:flex; align-items:center; justify-content:center; gap:7px; margin-top:16px;
    font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--muted);}
  .g-pitch .caro-hint{color:rgba(255,255,255,.6);}

  /* Sticky bottom download dock (mobile is 95%+ of traffic) */
  .dockbar{display:flex; position:fixed; bottom:0; left:0; right:0; z-index:90;
    align-items:center; gap:12px;
    background:rgba(10,13,20,.9); backdrop-filter:saturate(160%) blur(16px);
    -webkit-backdrop-filter:saturate(160%) blur(16px); border-top:1px solid var(--border);
    padding:12px 20px calc(12px + env(safe-area-inset-bottom));}
  .dockbar__txt{flex:1; min-width:0;}
  .dockbar__txt b{display:block; font-size:14px; font-weight:800; color:var(--fg); line-height:1.1;}
  .dockbar__txt span{font-size:12px; color:var(--muted);}
  .dockbar__txt .stars{color:var(--gold); font-size:11px; letter-spacing:1px; margin-right:3px;}
  .dockbar .btn{min-height:46px; padding:12px 20px; font-size:15px; flex:0 0 auto;}
  body{padding-bottom:82px;}      /* clear the fixed dock */
}

/* ── 442 additions ────────────────────────────────────────────────────── */
/* Wordmark: Anton lockup, "442" in amber, the rest flips with the nav state. */
.wm{display:inline-flex; align-items:baseline; gap:8px; line-height:1; font-family:var(--display);
  font-weight:400; text-transform:uppercase; letter-spacing:.02em; font-size:24px; white-space:nowrap;}
.wm-num{color:#fff;}
.nav:not(.scrolled):not(.nav--solid) .wm-num{color:#fff;}
.wm-txt{color:var(--ink); font-size:.78em; letter-spacing:.06em; transition:color .25s ease;}
.nav.scrolled .wm-txt, .nav--solid .wm-txt, .footer .wm-txt{color:var(--fg);}
.footer .wm{font-size:26px;}
@media (max-width:360px){ .nav .wm-txt{display:none;} }

/* Real app screenshots fill the bezel (the sibling sites draw their screens in DOM). */
.ph__screen img{width:100%; height:100%; object-fit:cover; display:block; background:#0A0D14;}

/* App Store badge shown dimmed with a caption until the app is live (home.js wires it). */
.store-wrap{display:inline-flex; flex-direction:column; align-items:center; gap:7px;}
.store-badge[aria-disabled="true"]{opacity:.62; cursor:default;}
.store-badge[aria-disabled="true"]:hover{transform:none;}
.store-soon{font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:rgba(10,13,20,.7);}
.on-dark .store-soon{color:var(--muted);}

/* Four-up step grid (how it works, wildcards). */
.steps--4{grid-template-columns:repeat(4,1fr);}
.step__ico{width:56px; height:56px; border-radius:var(--r-md); display:grid; place-items:center; margin-bottom:20px;
  background:rgba(59,228,119,.12); border:1px solid rgba(59,228,119,.32); color:var(--pitch-bright);}
.step__ico svg{width:26px; height:26px;}
.step__tag{display:block; font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--pitch-bright); margin:0 0 10px;}
.g-pitch .step{background:rgba(10,13,20,.55); border-color:rgba(255,255,255,.12); backdrop-filter:blur(6px);}
.g-pitch .step p{color:rgba(255,255,255,.78);}
.sec-head--center{text-align:center; margin-left:auto; margin-right:auto;}
.sec-head--center .eyebrow{justify-content:center;}
.sec-head--center .lead{margin-left:auto; margin-right:auto;}
.sec-cta{display:flex; justify-content:center; margin-top:48px;}
.sub-head{margin:88px 0 40px;}
.sub-head .sec-title{font-size:clamp(34px,4.2vw,60px);}
.tiers-wrap{margin-top:30px;}
.tiers-wrap .eyebrow{margin-bottom:14px;}
.league-chip .n{min-width:18px; text-align:center;}

/* Leaderboards: read-only rows (no share card), 442 columns. */
.lb-row{cursor:default;}
.lb-row:active{transform:none;}
.lb-you{display:inline-block; margin-left:8px; padding:2px 8px; border-radius:var(--r-pill); font-size:10.5px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink); background:var(--pitch-bright); vertical-align:middle;}
.lb-bull{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--pitch-bright);
  box-shadow:0 0 0 3px rgba(59,228,119,.25); margin-right:6px; vertical-align:middle;}
.lb-stat--exact b{color:var(--pitch-bright);}
.lb-stat--score b{color:var(--pitch-bright); font-size:17px;}
.lb-state .btn{margin-top:16px;}
.lb-state.is-error{color:#F0586A;}
.lb-skel .lb-meta{gap:12px;}
@media (max-width:600px){ .lb-stat--tier{display:none;} .lb-meta{gap:12px;} .lb-stat b{font-size:14px;} }

/* Legal pages: callout + inline code used by the privacy/terms copy. */
.legal .callout{background:var(--card); border:1px solid var(--border); border-left:3px solid var(--pitch-bright);
  border-radius:var(--r-md); padding:18px 22px; margin:0 0 20px;}
.legal .callout p{margin:0;}
.legal code{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.92em; color:var(--fg);
  background:var(--card-alt); padding:1px 6px; border-radius:5px;}
.legal .footnote{margin-top:36px; font-size:13px; color:var(--faint);}

/* 404 */
.nf{text-align:center;}
.legal .nf__num{font-family:var(--display); font-size:clamp(110px,24vw,200px); color:#fff; line-height:.85; margin:0 0 10px;}
.legal.nf .btn{text-decoration:none;}
.legal.nf .btn--green{color:var(--ink);}
.legal.nf .btn--green:hover{color:var(--ink);}
.legal.nf .btn--ghost{color:var(--fg);}
.legal.nf .btn--ghost:hover{color:var(--pitch-bright);}
.nf h1{margin-bottom:14px;}
.nf p{max-width:44ch; margin-left:auto; margin-right:auto;}
.nf .cta-row{justify-content:center; margin-top:28px;}

@media (max-width:900px){
  .steps--4{grid-template-columns:1fr 1fr;}
  .sub-head{margin:64px 0 32px;}
}
@media (max-width:560px){
  .steps--4{grid-template-columns:1fr;}
}