/* Self-hosted display + body type (Anton 400, Archivo variable 400-900).
   Tracker-free: no Google Fonts CDN request. Subset woff2 shared with the 38-0 site. */
@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');
}

/* Football Club Sim 26 — marketing site.
   Layout language ported from the 38-0 redesign (Anton display headlines, bold
   colour-block grounds, real app screens in bezels, floating pills) but reskinned
   to FC Sim's own "Floodlit stadium at night" brand: midnight-navy surfaces, cyan
   accent + gold prestige, pitch-green reserved for the field and actions.
   Tokens mirror the app's src/theme.ts (via marketing/fcsim-brand.js).

   v2 (this round): built out for BOTH desktop and mobile. A dedicated
   mobile-optimised layer (single-phone hero, horizontal swipe carousels, sticky
   download dock, JS-capped phone widths) is ported from the 38-0 mobile update,
   so ~95% of traffic gets a proper phone-first page instead of a squeezed desktop. */

:root{
  --bg:#0A0E14; --bg-alt:#0E141C; --card:#141B26; --card-alt:#1B2433;
  --elevated:#202C3D; --border:#26303F; --border-strong:#37445A;
  --fg:#F4F7FB; --muted:#9AA7B8; --faint:#5E6B7E;
  --pitch:#0FA958; --pitch-dark:#0B6E37; --pitch-bright:#2EE07E; --pitch-line:#E8F1EC;
  --gold:#F2C14E; --gold-dark:#C8973A; --cyan:#38BDF8;
  --ink:#04150B;                 /* dark ink used on vibrant light grounds */
  --primary-fg:#04150B;

  --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:hidden;
}
a{color:var(--cyan); text-decoration:none;}
a:hover{color:#7fd5fb;}
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 ─────────────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--sans); font-weight:800; text-transform:uppercase;
  letter-spacing:.22em; font-size:12.5px; color:var(--cyan);
  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-ink{color:var(--ink);}
.on-ink .eyebrow{color:var(--ink); opacity:.72;}
.on-ink .lead{color:rgba(4,21,11,.72);}

.accent-cyan{color:var(--cyan);}
.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;}

/* Hero — vibrant pitch (the field). Dark ink text. */
.g-green{background:linear-gradient(155deg,#17c06e 0%,#0FA958 46%,#0a7a44 100%);}
.g-green::before{inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 92px,rgba(0,0,0,.04) 92px 184px);}
.g-green::after{top:-30%;left:50%;transform:translateX(-50%);width:120%;height:92%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.30),transparent 62%);}

/* Challenge Mode — floodlit arena at night. Dark, dramatic, green light streaks. */
.g-arena{background:radial-gradient(1300px 900px at 50% -6%,#123522 0%,#0c1a12 44%,#070b09 100%);}
.g-arena::before{top:-10%;left:6%;width:32%;height:130%;transform:rotate(15deg);filter:blur(46px);
  background:linear-gradient(rgba(46,224,126,.20),transparent 68%);}
.g-arena::after{top:-10%;right:6%;width:32%;height:130%;transform:rotate(-15deg);filter:blur(46px);
  background:linear-gradient(rgba(56,189,248,.16),transparent 68%);}

/* Final CTA — gold prestige. Dark ink text. */
.g-gold{background:linear-gradient(155deg,#FAD675 0%,#F2C14E 52%,#D79E2F 100%);}
.g-gold::after{top:-30%;left:50%;transform:translateX(-50%);width:120%;height:92%;
  background:radial-gradient(ellipse at center,rgba(255,248,225,.55),transparent 60%);}

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

/* ── Buttons & badges ─────────────────────────────────────────────────── */
.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:var(--r-pill); 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(15,169,88,.7);}
.btn--green:hover{transform:translateY(-2px); background:var(--pitch-bright); box-shadow:0 16px 36px -10px rgba(46,224,126,.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(--cyan); color:var(--cyan);}
.on-ink .btn--ghost{color:var(--ink); border-color:rgba(4,21,11,.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,14,20,.82); 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(--cyan);}
.nav__cta{padding:11px 22px; font-size:14px; background:var(--ink); color:#fff; box-shadow:none;}
.nav__cta:hover{background:#0a2413; transform:translateY(-2px);}
.nav.scrolled .nav__cta{background:var(--pitch); color:var(--ink); box-shadow:0 10px 26px -10px rgba(15,169,88,.7);}
.nav.scrolled .nav__cta:hover{background:var(--pitch-bright);}
/* wordmark ink flips with nav state */
.nav .wm-dig{color:var(--ink);} .nav.scrolled .wm-dig{color:var(--fg);}
.nav .wm-ball{background:var(--ink);} .nav.scrolled .wm-ball{background:var(--pitch-bright);}
.nav__toggle{display:none;}

/* ── Wordmark ─────────────────────────────────────────────────────────── */
.wm{display:inline-flex; align-items:center; gap:9px; line-height:1;}
.wm-dig{font-family:var(--sans); font-weight:900; letter-spacing:-.02em; font-size:22px; color:var(--fg);}
.wm-ball{width:11px;height:11px;border-radius:50%; 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 90px;}
.hero__grid{display:grid; grid-template-columns:1fr; gap:58px; justify-items:center; text-align:center;}
.hero__copy{max-width:940px;}
.hero__title{font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(44px,5.8vw,88px); 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(4,21,11,.76); max-width:54ch; font-weight:500; margin:0 auto 34px;}
.hero .cta-row{justify-content:center;}
.hero__meta{margin-top:26px; display:flex; justify-content:center; align-items:center; gap:20px; flex-wrap:wrap;
  font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(4,21,11,.66);}
.hero__meta .stars{color:#04150B; letter-spacing:2px; font-size:15px;}
.hero__meta b{color:var(--ink);}
.hero__meta .divider{width:1px;height:20px;background:rgba(4,21,11,.24);}

/* Phone cluster */
.cluster{position:relative; height:624px; width:100%; max-width:720px; margin:0 auto;}
.cluster > .ph--front, .cluster > .ph--back-l, .cluster > .ph--back-r{position:absolute;}
.cluster .ph--back-l{left:4%; top:64px; rotate:-7deg; z-index:1; filter:brightness(.82);}
.cluster .ph--back-r{right:0%; top:64px; rotate:7deg; z-index:1; filter:brightness(.82);}
.cluster .ph--front{left:50%; top:0; translate:-50% 0; z-index:3;}

/* Phone bezel */
.ph{position:relative;}
.ph__frame{position:absolute; inset:-9px; z-index:0;
  background:linear-gradient(155deg,#425468,#141b26 60%,#0a0e14);
  box-shadow:0 44px 90px -28px rgba(0,0,0,.78), inset 0 1px 0 rgba(255,255,255,.14);}
.ph__screen{position:absolute; inset:0; overflow:hidden; z-index:1;}

/* 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,.6); backdrop-filter:blur(6px);}
.fpill--light{background:#fff; color:#0A0E14; border:1px solid rgba(0,0,0,.06);}
.fpill--gold{background:#0A0E14; color:var(--gold); border:1px solid rgba(242,193,78,.42);}
.fpill--glass{background:rgba(10,14,20,.6); 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:var(--cyan);box-shadow:0 0 12px var(--cyan);}

/* ── 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(--cyan); 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(--cyan);
  display:inline-flex; align-items:center; gap:12px; letter-spacing:.06em; margin-bottom:18px;}
.frow__num .rule{width:44px;height:2px;background:var(--cyan);opacity:.55;}
.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(56,189,248,.20),transparent 68%); filter:blur(22px);}
.frow__media .ph{z-index:1;}

/* ── Steps (the season) ───────────────────────────────────────────────── */
.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:28px; color:var(--ink);
  width:56px; height:56px; border-radius:var(--r-pill);
  background:linear-gradient(180deg,#4CC6FB,#1E84B8);
  display:grid; place-items:center; margin-bottom:20px; box-shadow:inset 0 1px 0 rgba(255,255,255,.35);}
.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;}

/* ── Challenge showcase (3 phones on the arena) ───────────────────────── */
.mp-row{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:24px;}
.mp-card{display:flex; flex-direction:column; align-items:center; text-align:center;}
.mp-card .ph{margin-bottom:26px;}
.mp-card__title{font-family:var(--display); text-transform:uppercase; font-size:26px; margin:0 0 8px; color:var(--fg);}
.mp-card__body{color:rgba(255,255,255,.78); font-size:15px; max-width:30ch; margin:0;}
.mp-card__tag{font-family:var(--sans); font-weight:800; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); 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(34px,3.6vw,50px); color:var(--cyan); line-height:.9; min-width:160px;}
.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;}

/* ── Comparison ───────────────────────────────────────────────────────── */
.compare{display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:1000px; margin:0 auto;}
.cmp{border-radius:var(--r-xl); padding:36px 32px; border:1px solid var(--border);}
.cmp--old{background:var(--card);}
.cmp--new{background:linear-gradient(170deg,rgba(15,169,88,.14),var(--card)); border-color:var(--pitch);
  box-shadow:0 30px 70px -30px rgba(15,169,88,.4);}
.cmp__label{font-family:var(--sans); font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:13px; margin:0 0 6px;}
.cmp--old .cmp__label{color:var(--faint);}
.cmp--new .cmp__label{color:var(--pitch-bright);}
.cmp__name{font-family:var(--display); text-transform:uppercase; font-size:26px; margin:0 0 24px;}
.cmp ul{list-style:none; margin:0; padding:0; display:grid; gap:16px;}
.cmp li{display:flex; gap:13px; align-items:flex-start; font-size:15.5px; color:var(--fg);}
.cmp--old li{color:var(--muted);}
.cmp li .ic{flex:0 0 auto; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:14px; font-weight:900; margin-top:1px;}
.cmp--old li .ic{background:rgba(239,68,68,.14); color:#EF4444;}
.cmp--new li .ic{background:rgba(46,224,126,.16); color:var(--pitch-bright);}

/* ── Reviews ──────────────────────────────────────────────────────────── */
.rev-top{display:flex; align-items:center; gap:40px; flex-wrap:wrap; margin-bottom:50px;}
.rev-score{display:flex; flex-direction:column; gap:4px;}
.rev-score .big{font-family:var(--display); font-size:80px; color:var(--gold); line-height:.85;}
.rev-score .stars{color:var(--gold); font-size:24px; letter-spacing:3px;}
.rev-score .sub{color:var(--muted); font-size:14px; font-weight:700;}
.rev-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.rev{background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:26px 24px;
  display:flex; flex-direction:column; gap:14px;}
.rev .stars{color:var(--gold); font-size:16px; letter-spacing:2px;}
.rev p{margin:0; font-size:15.5px; color:var(--fg); line-height:1.55;}
.rev__who{display:flex; align-items:center; gap:12px; margin-top:auto;}
.rev__av{width:38px;height:38px;border-radius:50%; display:grid; place-items:center; font-weight:900; font-size:15px; color:var(--ink);}
.rev__who .nm{font-weight:800; font-size:14px;}
.rev__who .hd{color:var(--faint); font-size:12px;}

/* ── "Why" benefits band (reuses .rev-grid + .rev; no ratings/testimonials) ── */
.why .rev{gap:12px;}
.why__ic{font-size:32px; line-height:1;}
.why__title{font-family:var(--display); text-transform:uppercase; font-size:24px; color:var(--fg); margin:0; line-height:1;}

/* ── Skip link (a11y) ─────────────────────────────────────────────────── */
.skip{position:absolute; left:-9999px; top:0; z-index:200;}
.skip:focus{left:12px; top:12px; background:var(--pitch); color:var(--ink); font-weight:800;
  padding:10px 16px; border-radius:var(--r-pill); box-shadow:0 8px 22px -8px rgba(15,169,88,.7);}

/* ── 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(--cyan); 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,100px); line-height:.9; margin:0 0 22px;}
.cta__lead{color:rgba(4,21,11,.78); font-size:clamp(17px,1.6vw,21px); font-weight:500; max-width:40ch; margin:0 0 30px;}
.cta__media{display:flex; justify-content:center; position:relative;}
.cta__media .ph{transform:rotate(-4deg);}

/* ── Footer ───────────────────────────────────────────────────────────── */
.footer{background:var(--bg); padding:72px 0 40px; border-top:1px solid var(--border);}
.footer__inner{display:grid; grid-template-columns:1.6fr 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(--cyan);}
.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 pages (privacy / terms / cookies) ──────────────────────────── */
.legal{padding:132px 0 90px; background:var(--bg);}
.legal .container{max-width:var(--maxw-narrow);}
.legal .back{display:inline-flex; align-items:center; gap:8px; color:var(--cyan); font-weight:800;
  font-size:14px; margin:0 0 26px;}
.legal h1{font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(40px,7vw,72px); line-height:.92; margin:0 0 12px;}
.legal .updated{color:var(--faint); font-size:12.5px; text-transform:uppercase; letter-spacing:.16em;
  font-weight:800; margin:0 0 34px;}
.legal h2{font-family:var(--sans); font-weight:800; font-size:22px; color:var(--fg);
  margin:38px 0 12px; letter-spacing:-.01em;}
.legal p, .legal li{color:var(--muted); font-size:15.5px; line-height:1.72;}
.legal p{margin:0 0 14px;}
.legal strong{color:var(--fg); font-weight:800;}
.legal ul{margin:0 0 16px; padding-left:20px; display:grid; gap:10px;}
.legal code{background:var(--card); border:1px solid var(--border); border-radius:6px;
  padding:1px 6px; font-size:13.5px; color:var(--fg);}
.legal .disclaimer{margin-top:38px; font-size:13px; color:var(--faint);}
@media (max-width:600px){ .legal{padding:104px 0 64px;} }

/* ── Motion ───────────────────────────────────────────────────────────── */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.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){ .reveal{opacity:1; transform:none; transition:none;} }

/* ── 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;}
  .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;}
  .data-grid{grid-template-columns:1fr; gap:36px;}
  .compare{grid-template-columns:1fr;}
  .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(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;}
  /* Stack the badge + secondary CTA, centred, at their natural sizes (never
     stretch the App Store badge to full width — it blows the icon up). */
  .cta-row{flex-direction:column; align-items:center; gap:14px;}
  .cta-row .store-badge img{width:200px;}
  .cta .cta-row .store-badge img{width:210px;}
}

/* ══ Mobile-optimised layer ═══════════════════════════════════════════════
   ~95% of App Store traffic is on a phone, so the page is built phone-first,
   not just "desktop that reflows": a single hero phone (drop the fanned pair +
   pills), the Challenge + Reviews rows become horizontal swipe carousels, and a
   sticky download dock rides the bottom of the viewport. Ported from the 38-0
   mobile update; carousel/dock markup lives in the HTML and is inert on desktop. */
.dockbar{display:none;}   /* desktop: no dock */
.caro-hint{display:none;} /* desktop: card grids, no swipe hint */

@media (max-width:900px){
  /* Nav: links hidden, so pin the Get-the-App pill hard to the right edge */
  .nav__inner{gap:12px;}
  .nav__cta{margin-left:auto;}

  /* Hero: one upright phone, no fanned back phones or floating pills */
  .hero{padding-bottom:56px;}
  .hero__grid{gap:36px;}
  .cluster{height:auto; transform:none; display:flex; justify-content:center; align-items:flex-start;}
  .cluster .ph--back-l, .cluster .ph--back-r, .cluster .fpill{display:none;}
  .cluster .ph--front{position:relative; left:auto; top:auto; translate:none;}
  .hero .eyebrow{display:inline-flex; text-align:left;}

  /* Final CTA: centre the title, lead and buttons (phone already sits on top) */
  .cta{text-align:center;}
  .cta__lead{margin-left:auto; margin-right:auto;}
  .cta .cta-row{justify-content:center;}
  .cta__media .ph{transform:rotate(-3deg);}

  /* Challenge Mode + Reviews: one markup, swipe carousel on phones */
  .mp-row, .rev-grid{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;}
  .mp-row::-webkit-scrollbar, .rev-grid::-webkit-scrollbar{display:none;}
  .mp-card, .rev{flex:0 0 82%; max-width:340px; scroll-snap-align:center;}
  .rev{min-height:100%;}
  .caro-hint{display:flex; align-items:center; justify-content:center; gap:7px; margin-top:20px;
    font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);}
  .g-arena .caro-hint{color:rgba(255,255,255,.62);}
  .caro-hint .rule{width:22px; height:1.5px; background:currentColor; opacity:.5;}

  /* Sticky bottom download dock */
  .dockbar{display:flex; position:fixed; bottom:0; left:0; right:0; z-index:90;
    align-items:center; gap:12px;
    background:rgba(10,14,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.15;}
  .dockbar__txt span{font-size:12px; color:var(--muted);}
  .dockbar__txt .stars{color:var(--gold); letter-spacing:1px;}
  .dockbar .btn{min-height:46px; padding:12px 22px; font-size:15px; flex:0 0 auto;
    background:var(--pitch); color:var(--ink); box-shadow:0 10px 26px -12px rgba(15,169,88,.8);}
  .dockbar .btn:hover{background:var(--pitch-bright);}
  body{padding-bottom:82px;}  /* clear the fixed dock */
}

@media (max-width:600px){
  .hero__title{font-size:clamp(40px,12vw,60px);}
  .sec-title{font-size:clamp(38px,11vw,64px);}
  .rev-top{gap:20px;}
  .rev-score .big{font-size:64px;}
  .frow{margin-bottom:64px;}
  .section{padding:72px 0;}
  .cta{padding:80px 0;}

  /* Stat band: bigger, bolder numbers on phones */
  .statband__grid{gap:28px 20px;}
  .stat__num{font-size:46px;}

  /* Data facts: stack each fact (big number over full-width copy) instead of the
     desktop two-column layout, which crushed the text into a narrow strip. */
  .fact{flex-direction:column; align-items:flex-start; gap:6px; padding:16px 0;}
  .fact__num{min-width:0; font-size:54px;}
  .fact__txt{font-size:15.5px;}
}