/* ==================================================================
   PADEL FUN LANDING
   The one stylesheet for "/" (public/landing/index.html) and the demo
   player page at "/demo" (public/landing/demo.html).

   :root owns the brand tokens. The app copies them by hand
   (src/app/login/login.module.css, src/app/global-error.tsx), so a token
   changed here is changed there too.

   Breakpoints: phone below 700px, tablet 700-1099px, computer from 1100px.
   ================================================================== */

/* ============ TOKENS ============ */
:root{
  --navy:#0C2E63; --navy-2:#143C7A; --navy-deep:#061A3D; --navy-band:#0A2857;
  --brand:#1B7BE4; --brand-deep:#0D4C96; --brand-soft:#E4F0FD;
  /* Filled buttons: white on --action is 5.6:1, on --brand only 4.2:1. */
  --action:#1565C8; --action-hover:#0F57AF;
  --ball:#D9F23C;
  /* muted is small text's grey, the owner's pick: 7.1:1 on white */
  --ink:#173D68; --muted:#3C5B7B; --faint:#8AA3BD;
  --ice:#F8FBFE; --ice-2:#EEF4FB; --surface:#FFFFFF; --surface-2:#F2F7FC;
  --line:#DCE8F5; --line-2:#C9DAEC; --line-soft:#EAF2FB;
  --live:#15803D; --danger:#B42318;
  --on-navy:#C9D8EA;
  --r-md:14px; --r-lg:20px;
  --maxw:1104px;
  --gutter:20px;
  --head-h:72px;
  --section-y:clamp(60px, 7.5vw, 104px);
  --fs-h1:clamp(2.375rem, 1.6rem + 3.2vw, 3.625rem);
  --fs-h2:clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --fs-lede:clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
@media (min-width:700px){ :root{ --gutter:32px; } }
@media (min-width:1100px){ :root{ --gutter:48px; --head-h:76px; } }

/* ============ BASE ============ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--ice); color:var(--ink); font:400 1rem/1.6 Manrope, system-ui, -apple-system, "Segoe UI", sans-serif; overflow-x:clip; }
img,svg{ display:block; max-width:100%; }
h1,h2,h3,h4{ margin:0; font-family:Outfit, Manrope, sans-serif; color:var(--navy); }
p{ margin:0; }
a{ color:inherit; }
button{ font:inherit; }
:focus-visible{ outline:3px solid var(--brand); outline-offset:3px; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link{ position:absolute; left:12px; top:-80px; z-index:100; padding:12px 18px; border-radius:12px; background:var(--navy); color:#fff; font-weight:700; text-decoration:none; }
.skip-link:focus{ top:12px; }
.wrap{ width:min(var(--maxw), 100% - 2 * var(--gutter)); margin-inline:auto; }
main section[id]{ scroll-margin-top:calc(var(--head-h) + 8px); }
.section{ padding-block:var(--section-y); }
.bg-white{ background:var(--surface); }
.bg-ice{ background:var(--ice-2); }

.eyebrow{ display:block; margin-bottom:12px; font-size:.8125rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-deep); }
.h2{ font-size:var(--fs-h2); font-weight:800; line-height:1.1; letter-spacing:-.025em; }
.lede{ margin-top:16px; max-width:40rem; font-size:var(--fs-lede); color:var(--muted); }

/* the Padel Fun wordmark (#pf-word); its two text colours follow these */
.word{ --word-ink:#071C67; --word-fun:#168EE0; }

/* ============ BUTTONS ============ */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 26px; border:0; border-radius:999px; font:700 1rem/1 Manrope, sans-serif; text-decoration:none; cursor:pointer; transition:transform .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease); }
.btn svg{ width:18px; height:18px; flex:none; }
.btn-primary{ background:var(--action); color:#fff; box-shadow:0 10px 24px rgba(21,101,200,.28); }
.btn-primary:hover{ background:var(--action-hover); }
.btn-ghost{ background:#fff; color:var(--navy); border:1px solid var(--line-2); }
.btn-ghost:hover{ border-color:var(--brand); }
.btn-sm{ min-height:44px; padding:0 20px; font-size:.9375rem; }
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ opacity:.7; cursor:progress; }
@media (hover:hover){ .btn:hover{ transform:translateY(-1px); } }

/* ============ HEADER ============ */
.site-head{ position:sticky; top:0; z-index:50; background:rgba(248,251,254,.92); -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line); }
.head-in{ position:relative; height:var(--head-h); display:flex; align-items:center; gap:24px; }
.brand{ display:flex; align-items:center; min-height:44px; text-decoration:none; flex:none; }
.brand svg{ width:140px; height:33px; }
.nav{ display:none; gap:2px; }
.nav a{ display:flex; align-items:center; min-height:44px; padding:0 12px; border-radius:10px; font-weight:600; font-size:.9375rem; color:var(--ink); text-decoration:none; }
.nav a:hover{ color:var(--brand-deep); background:var(--brand-soft); }
.head-right{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.nav-login{ display:none; align-items:center; min-height:44px; padding:0 10px; font-weight:700; font-size:.9375rem; color:var(--ink); text-decoration:none; }
.nav-login:hover{ color:var(--brand-deep); }
.head-cta{ display:none; }
.burger{ width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--navy); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.burger svg{ width:22px; height:22px; }
.burger .ic-close,.burger[aria-expanded="true"] .ic-open{ display:none; }
.burger[aria-expanded="true"] .ic-close{ display:block; }
.mobile-nav{ position:absolute; left:0; right:0; top:100%; display:grid; padding:6px var(--gutter) 22px; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 24px 40px rgba(12,46,99,.12); }
.mobile-nav[hidden]{ display:none; }
.mobile-nav a:not(.btn){ display:flex; align-items:center; min-height:52px; border-bottom:1px solid var(--line-soft); font-weight:700; font-size:1.0625rem; color:var(--navy); text-decoration:none; }
.mobile-nav .btn{ margin-top:16px; }
@media (min-width:700px){ .head-cta{ display:inline-flex; } }
@media (min-width:1100px){
  .nav,.nav-login{ display:flex; }
  .burger,.mobile-nav{ display:none; }
}

/* ============ HERO ============ */
.hero{ position:relative; overflow:clip; background:var(--ice-2) url(../images/v2/bg-hero-mobile.webp) center / cover no-repeat; }
.hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(248,251,254,.97) 0%, rgba(248,251,254,.92) 55%, rgba(248,251,254,.6) 100%); }
.hero-grid{ position:relative; display:grid; gap:36px; padding-block:32px 56px; }
.hero h1{ font-size:var(--fs-h1); font-weight:800; line-height:1.04; letter-spacing:-.03em; }
.hero h1 span{ color:var(--action); }
.hero .lede{ margin-top:20px; max-width:33rem; color:var(--ink); }
.hero-cta{ display:flex; flex-direction:column; gap:12px; margin-top:30px; }
.hero-stats{ margin-top:26px; font-size:.875rem; font-weight:600; color:var(--muted); }
.hero-stats b{ color:var(--navy); }
.hero-vis{ position:relative; margin:0; padding-bottom:196px; --bleed:0px; }
.hero-vis .tv{ width:calc(100% + var(--bleed)); }
.hero-phone{ position:absolute; bottom:0; right:6px; width:132px; filter:drop-shadow(0 24px 30px rgba(12,46,99,.3)); }
.hero-qr{ display:none; }
@media (min-width:700px){
  .hero{ background-image:url(../images/v2/bg-hero.webp); }
  .hero::before{ background:linear-gradient(180deg, rgba(248,251,254,.96) 0%, rgba(248,251,254,.9) 45%, rgba(248,251,254,.55) 100%); }
  .hero-grid{ gap:48px; padding-block:48px 72px; }
  .hero-cta{ flex-direction:row; flex-wrap:wrap; }
  .hero-vis{ padding-bottom:170px; }
  .hero-phone{ width:150px; right:20px; }
  .hero-qr{ position:absolute; left:24px; bottom:30px; display:flex; align-items:center; gap:14px; padding:12px 18px 12px 12px; border-radius:16px; background:#fff; box-shadow:0 18px 40px rgba(12,46,99,.18); text-decoration:none; }
  .hero-qr svg{ width:68px; height:68px; flex:none; }
  .hero-qr b{ display:block; font-family:Outfit, sans-serif; font-weight:800; font-size:1rem; line-height:1.25; color:var(--navy); }
  .hero-qr > span > span{ display:block; margin-top:2px; font-size:.8125rem; line-height:1.4; color:var(--muted); }
  .hero-qr:hover b{ color:var(--action); }
}
@media (min-width:1100px){
  .hero::before{ background:linear-gradient(90deg, rgba(248,251,254,.97) 0%, rgba(248,251,254,.9) 42%, rgba(248,251,254,.45) 100%); }
  .hero-grid{ grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr); align-items:center; padding-block:64px 96px; }
  .hero h1{ font-size:clamp(3.25rem, 1.2rem + 3vw, 3.625rem); }
  /* The TV reaches past its column into the right margin, never past the window. */
  .hero-vis{ padding-bottom:150px; --bleed:clamp(0px, calc((100vw - var(--maxw)) / 2 - 24px), 112px); }
  .hero-phone{ width:clamp(136px, 29%, 165px); right:calc(25px - var(--bleed)); }
  .hero-qr{ left:20px; bottom:18px; }
}

/* ============ TV FRAME + SCALED PICTURES ============ */
.tv{ padding:6px; border-radius:16px; background:#0E1626; box-shadow:0 30px 60px rgba(12,46,99,.25); }
.tv-fit{ container-type:inline-size; overflow:hidden; border-radius:6px; }
.tv-stand{ width:22%; height:12px; margin:0 auto; border-radius:0 0 8px 8px; background:#C3D2E3; }
@media (min-width:700px){ .tv{ padding:10px; } }
@media (min-width:1100px){ .tv{ padding:8px; } }
.pp-fit,.sd-fit{ container-type:inline-size; }
.sd-fit{ width:min(280px, 100%); margin-inline:auto; }

/* The board (960x540), the phone (300x620) and the score devices (280x200)
   are drawn at one size and scale with their frame: --u is one drawing
   pixel, so every length below inside the scaled block is a multiple of it. */
.tvb{ --u:calc(100cqw / 960); }
.pp{ --u:calc(100cqw / 300); }
.sd{ --u:calc(100cqw / 280); }
@supports not (width:1cqw){
  .tvb{ --u:.6px; } .pp{ --u:.5px; } .sd{ --u:1px; }
}

/* @scaled-start: from here to @scaled-end every length is calc(var(--u) * n), n being drawing pixels */
/* ---- TV board ---- */
.tvb{ position:relative; width:calc(var(--u)*960); height:calc(var(--u)*540); padding:calc(var(--u)*14) calc(var(--u)*16) calc(var(--u)*16); display:flex; flex-direction:column; gap:calc(var(--u)*10); overflow:hidden; font-family:Outfit, Manrope, sans-serif; color:var(--b-ink); background:var(--b-bg);
  --b-ink:#14305C; --b-band:#14305C; --b-dot:#14305C; --b-accent:#1565C8; --b-live:#15803D; --b-num:#E6EEF6; --b-row:#FFFFFF;
  --b-bg:linear-gradient(160deg, #EAF1F8 0%, #D3DFEC 55%, #BFCFE0 100%);
  --b-head:Outfit, sans-serif; --b-head-w:800; --b-head-track:.08em; --b-head-case:uppercase; }
.tvb.is-pink{ --b-ink:#3D0C26; --b-band:linear-gradient(90deg, #D81B60, #AD1457); --b-dot:#AD1457; --b-accent:#AD1457; --b-live:#0F766E; --b-num:#FBE4EE; --b-row:#FFF8FB;
  --b-bg:linear-gradient(160deg, #FFF4F8 0%, #F9D9E7 55%, #F1C0D5 100%);
  --b-head:"Playfair Display", Georgia, serif; --b-head-w:700; --b-head-track:0; --b-head-case:none; }
.tvb-head{ height:calc(var(--u)*62); flex:none; display:flex; align-items:center; gap:calc(var(--u)*12); padding:0 calc(var(--u)*14); border-radius:calc(var(--u)*12); background:rgba(255,255,255,.95); box-shadow:0 calc(var(--u)*4) calc(var(--u)*14) rgba(12,46,99,.08); }
.tvb-club{ width:calc(var(--u)*38); height:calc(var(--u)*38); flex:none; display:flex; align-items:center; justify-content:center; border-radius:calc(var(--u)*10); background:var(--b-band); color:#fff; text-align:center; font-weight:800; font-size:calc(var(--u)*8.5); line-height:1.1; letter-spacing:.04em; }
.tvb-word{ width:calc(var(--u)*100); height:calc(var(--u)*24); flex:none; }
.tvb-sep{ width:calc(var(--u)*1); height:calc(var(--u)*34); flex:none; background:rgba(20,48,92,.14); }
.tvb-qr{ display:flex; align-items:center; gap:calc(var(--u)*8); }
.tvb-qr-code{ width:calc(var(--u)*42); height:calc(var(--u)*42); flex:none; padding:calc(var(--u)*3); border:calc(var(--u)*1) solid #DCE8F5; border-radius:calc(var(--u)*6); background:#fff; }
.tvb-qr-code svg{ width:100%; height:100%; }
.tvb-qr-t{ line-height:1.15; }
.tvb-k{ display:block; font-family:Manrope, sans-serif; font-weight:700; font-size:calc(var(--u)*7.5); letter-spacing:.14em; color:#3C5B7B; }
.tvb-qr-t b{ display:block; font-weight:800; font-size:calc(var(--u)*12.5); letter-spacing:.02em; }
.tvb-qr-t small{ display:block; font-family:Manrope, sans-serif; font-weight:700; font-size:calc(var(--u)*8); color:var(--b-accent); }
.tvb-round{ margin-inline:auto; text-align:center; }
.tvb-round-t{ display:block; font-family:var(--b-head); font-weight:var(--b-head-w); font-size:calc(var(--u)*24); line-height:1; letter-spacing:var(--b-head-track); text-transform:var(--b-head-case); }
.tvb-dots{ display:flex; justify-content:center; align-items:center; gap:calc(var(--u)*5); margin-top:calc(var(--u)*7); height:calc(var(--u)*14); }
.tvb-dots i{ width:calc(var(--u)*9); height:calc(var(--u)*9); border-radius:50%; border:calc(var(--u)*1.5) solid rgba(20,48,92,.3); }
.tvb-dots i.done{ width:calc(var(--u)*10); height:calc(var(--u)*10); border:0; background:var(--b-live); }
.tvb-dots i.now{ width:calc(var(--u)*14); height:calc(var(--u)*14); border:0; background:var(--b-dot); }
.tvb-clock{ display:flex; align-items:center; gap:calc(var(--u)*8); padding:calc(var(--u)*6) calc(var(--u)*12); border:calc(var(--u)*1) solid #DCE8F5; border-radius:calc(var(--u)*10); background:#fff; }
.tvb-clock svg{ width:calc(var(--u)*16); height:calc(var(--u)*16); color:var(--b-accent); }
.tvb-clock b{ display:block; font-weight:800; font-size:calc(var(--u)*24); line-height:1; font-variant-numeric:tabular-nums; }
.tvb-clock .tvb-k{ margin-top:calc(var(--u)*3); font-size:calc(var(--u)*6.5); color:var(--b-accent); }
.tvb-live{ margin-left:calc(var(--u)*6); text-align:right; line-height:1.25; }
.tvb-live b{ display:flex; align-items:center; justify-content:flex-end; gap:calc(var(--u)*5); font-weight:800; font-size:calc(var(--u)*11); letter-spacing:.06em; color:var(--b-live); }
.tvb-live b::before{ content:""; width:calc(var(--u)*6); height:calc(var(--u)*6); border-radius:50%; background:currentColor; }
.tvb-live span{ display:block; font-family:Manrope, sans-serif; font-weight:500; font-size:calc(var(--u)*8); color:#3C5B7B; }
.tvb-body{ flex:1; min-height:0; display:flex; gap:calc(var(--u)*12); }
.tvb-card{ display:flex; flex-direction:column; overflow:hidden; border-radius:calc(var(--u)*12); background:#fff; box-shadow:0 calc(var(--u)*4) calc(var(--u)*14) rgba(12,46,99,.08); }
.tvb-table{ width:calc(var(--u)*352); flex:none; }
.tvb-band{ height:calc(var(--u)*36); flex:none; display:flex; align-items:center; gap:calc(var(--u)*8); padding:0 calc(var(--u)*14); background:var(--b-band); color:#fff; font-family:var(--b-head); font-weight:var(--b-head-w); font-size:calc(var(--u)*15); letter-spacing:var(--b-head-track); text-transform:var(--b-head-case); }
.tvb-band i{ width:calc(var(--u)*20); height:calc(var(--u)*20); display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.2); }
.tvb-band i svg{ width:calc(var(--u)*12); height:calc(var(--u)*12); }
.tvb-cols,.tvb-row{ display:grid; grid-template-columns:calc(var(--u)*38) minmax(0, 1fr) calc(var(--u)*40) calc(var(--u)*44); align-items:center; padding:0 calc(var(--u)*12); }
.tvb-cols{ height:calc(var(--u)*22); flex:none; border-bottom:calc(var(--u)*1) solid #E3EBF3; font-family:Manrope, sans-serif; font-weight:700; font-size:calc(var(--u)*7.5); letter-spacing:.12em; color:#3C5B7B; }
.tvb-cols span:nth-child(3){ text-align:center; }
.tvb-cols span:nth-child(4){ text-align:right; }
.tvb-row{ height:calc(var(--u)*46); flex:none; background:var(--b-row); border-bottom:calc(var(--u)*1) solid rgba(20,48,92,.06); }
.tvb-row.m1{ background:#F7EEDB; } .tvb-row.m2{ background:#EAF0F6; } .tvb-row.m3{ background:#F6E3D4; }
.tvb-rank{ font-weight:800; font-size:calc(var(--u)*14); color:#3C5B7B; }
.m1 .tvb-rank{ color:#8A6A1F; } .m2 .tvb-rank{ color:#3C5B7B; } .m3 .tvb-rank{ color:#94511F; }
.tvb-name{ display:flex; align-items:center; gap:calc(var(--u)*8); min-width:0; font-weight:600; font-size:calc(var(--u)*15); white-space:nowrap; }
.tvb-flag{ width:calc(var(--u)*18); height:calc(var(--u)*12); flex:none; border-radius:calc(var(--u)*2); box-shadow:0 0 0 calc(var(--u)*1) rgba(0,0,0,.08); }
.tvb-move{ text-align:center; font-family:Manrope, sans-serif; font-weight:800; font-size:calc(var(--u)*9); color:#8AA3BD; }
.tvb-move.up{ color:#15803D; } .tvb-move.down{ color:#B42318; }
.tvb-pts{ text-align:right; font-weight:800; font-size:calc(var(--u)*18); font-variant-numeric:tabular-nums; }
.tvb-right{ flex:1; min-width:0; display:flex; flex-direction:column; gap:calc(var(--u)*8); }
.tvb-title{ height:calc(var(--u)*20); flex:none; display:flex; align-items:center; justify-content:center; gap:calc(var(--u)*10); font-family:var(--b-head); font-weight:var(--b-head-w); font-size:calc(var(--u)*15); letter-spacing:var(--b-head-track); text-transform:var(--b-head-case); }
.tvb-title::before,.tvb-title::after{ content:""; width:calc(var(--u)*40); height:calc(var(--u)*1); background:rgba(20,48,92,.25); }
.tvb-courts{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:calc(var(--u)*8); }
.tvb-court{ height:calc(var(--u)*138); border-radius:calc(var(--u)*10); box-shadow:0 calc(var(--u)*2) calc(var(--u)*8) rgba(12,46,99,.08); }
.tvb-court-h{ height:calc(var(--u)*28); flex:none; display:flex; align-items:center; justify-content:space-between; padding:0 calc(var(--u)*10); background:var(--b-band); color:#fff; }
.tvb-court-h b{ font-weight:800; font-size:calc(var(--u)*10); letter-spacing:.16em; }
.tvb-court-h b span{ font-size:calc(var(--u)*14); letter-spacing:0; }
.tvb-pill{ display:inline-flex; align-items:center; gap:calc(var(--u)*4); padding:calc(var(--u)*2) calc(var(--u)*7); border-radius:calc(var(--u)*999); background:#fff; color:var(--b-live); font-family:Manrope, sans-serif; font-weight:800; font-size:calc(var(--u)*7.5); letter-spacing:.1em; }
.tvb-pill::before{ content:""; width:calc(var(--u)*5); height:calc(var(--u)*5); border-radius:50%; background:currentColor; }
.tvb-pill.is-final{ color:#3C5B7B; }
.tvb-court-b{ flex:1; display:flex; flex-direction:column; justify-content:center; gap:calc(var(--u)*2); padding:calc(var(--u)*6) calc(var(--u)*10); }
.tvb-side{ display:flex; align-items:center; justify-content:space-between; gap:calc(var(--u)*8); }
.tvb-pair{ display:grid; gap:calc(var(--u)*1); min-width:0; }
.tvb-p{ display:flex; align-items:center; gap:calc(var(--u)*6); font-weight:600; font-size:calc(var(--u)*12.5); line-height:calc(var(--u)*17); white-space:nowrap; }
.tvb-p .tvb-flag{ width:calc(var(--u)*16); height:calc(var(--u)*11); }
.tvb-score{ width:calc(var(--u)*40); height:calc(var(--u)*30); flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:calc(var(--u)*6); background:var(--b-num); font-weight:800; font-size:calc(var(--u)*19); font-variant-numeric:tabular-nums; }
.tvb-score.is-win{ background:var(--b-band); color:#fff; }
.tvb-score.is-bump{ animation:tvb-bump .7s var(--ease); }
@keyframes tvb-bump{ 0%{ transform:scale(1.22); box-shadow:0 0 0 calc(var(--u)*3) #D9F23C; } 100%{ transform:none; box-shadow:0 0 0 0 rgba(217,242,60,0); } }
.tvb-vs{ display:flex; align-items:center; gap:calc(var(--u)*6); padding-right:calc(var(--u)*48); font-family:Manrope, sans-serif; font-weight:700; font-size:calc(var(--u)*7); letter-spacing:.14em; color:#8AA3BD; }
.tvb-vs::before,.tvb-vs::after{ content:""; flex:1; height:calc(var(--u)*1); background:#E3EBF3; }
.tvb-next{ flex:1; min-height:0; border-radius:calc(var(--u)*10); }
.tvb-next-h{ height:calc(var(--u)*26); flex:none; display:flex; align-items:center; gap:calc(var(--u)*8); padding:0 calc(var(--u)*10); background:var(--b-band); color:#fff; }
.tvb-next-h b{ font-family:var(--b-head); font-weight:var(--b-head-w); font-size:calc(var(--u)*12); letter-spacing:var(--b-head-track); text-transform:var(--b-head-case); }
.tvb-chip{ padding:calc(var(--u)*1) calc(var(--u)*8); border-radius:calc(var(--u)*999); background:rgba(255,255,255,.2); font-family:Manrope, sans-serif; font-weight:800; font-size:calc(var(--u)*7.5); letter-spacing:.1em; }
.tvb-next-h em{ margin-left:auto; font-family:Manrope, sans-serif; font-style:italic; font-weight:600; font-size:calc(var(--u)*8); }
.tvb-next-b{ flex:1; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); align-content:center; gap:0 calc(var(--u)*14); padding:calc(var(--u)*6) calc(var(--u)*10); }
.tvb-nx{ display:flex; align-items:center; gap:calc(var(--u)*7); height:calc(var(--u)*30); border-bottom:calc(var(--u)*1) solid #EEF3F8; white-space:nowrap; font-weight:600; font-size:calc(var(--u)*10.5); }
.tvb-nx i{ width:calc(var(--u)*20); height:calc(var(--u)*20); flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:calc(var(--u)*5); background:var(--b-band); color:#fff; font-style:normal; font-weight:800; font-size:calc(var(--u)*11); }
.tvb-nx small{ font-family:Manrope, sans-serif; font-weight:700; font-size:calc(var(--u)*7); color:#8AA3BD; }
.tvb-next-empty{ grid-column:1 / -1; text-align:center; font-weight:700; font-size:calc(var(--u)*13); color:#3C5B7B; }
/* sponsors and club slides take the body's place; the header stays */
.tvb-sp,.tvb-slide{ display:none; }
.tvb.is-sponsors .tvb-body,.tvb.is-slide .tvb-body{ display:none; }
.tvb.is-sponsors .tvb-sp{ display:flex; }
.tvb.is-slide .tvb-slide{ display:grid; }
.tvb-sp{ flex:1; min-height:0; flex-direction:column; align-items:center; justify-content:center; gap:calc(var(--u)*24); padding:calc(var(--u)*20); border-radius:calc(var(--u)*14); background:rgba(255,255,255,.9); box-shadow:0 calc(var(--u)*4) calc(var(--u)*14) rgba(12,46,99,.08); }
.tvb-sp h4{ font-weight:800; font-size:calc(var(--u)*16); letter-spacing:.3em; color:#3C5B7B; }
.tvb-sp ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, calc(var(--u)*300)); gap:calc(var(--u)*16); }
.tvb-sp li{ height:calc(var(--u)*130); display:flex; align-items:center; justify-content:center; gap:calc(var(--u)*12); border-radius:calc(var(--u)*12); background:#fff; box-shadow:0 calc(var(--u)*6) calc(var(--u)*18) rgba(12,46,99,.1); font-family:Manrope, sans-serif; font-weight:800; font-size:calc(var(--u)*23); letter-spacing:-.01em; color:#0E1B2E; }
.tvb-sp li i{ width:calc(var(--u)*38); height:calc(var(--u)*38); flex:none; }
.tvb-sp li:nth-child(1) i{ border-radius:calc(var(--u)*10); background:#1565C8; }
.tvb-sp li:nth-child(2) i{ border-radius:50%; background:#B45309; }
.tvb-sp li:nth-child(3) i{ border-radius:calc(var(--u)*4) calc(var(--u)*18); background:#0F766E; }
.tvb-sp li:nth-child(4) i{ border-radius:50% 50% calc(var(--u)*8) calc(var(--u)*8); background:#7C3AED; }
.tvb-slide{ flex:1; min-height:0; grid-template-columns:minmax(0, 3fr) minmax(0, 2fr); overflow:hidden; border-radius:calc(var(--u)*14); background:#fff; box-shadow:0 calc(var(--u)*4) calc(var(--u)*14) rgba(12,46,99,.08); }
.tvb-slide img{ width:100%; height:100%; object-fit:cover; }
.tvb-slide-t{ display:flex; flex-direction:column; justify-content:center; gap:calc(var(--u)*12); padding:calc(var(--u)*28); }
.tvb-slide-t .tvb-k{ font-size:calc(var(--u)*10); color:var(--b-accent); }
.tvb-slide-t h4{ font-weight:800; font-size:calc(var(--u)*34); line-height:1.08; letter-spacing:-.02em; color:var(--b-ink); }
.tvb-slide-t p{ font-family:Manrope, sans-serif; font-weight:600; font-size:calc(var(--u)*15); line-height:1.45; color:#3C5B7B; }
.tvb-slide-t strong{ align-self:flex-start; padding:calc(var(--u)*6) calc(var(--u)*14); border-radius:calc(var(--u)*999); background:var(--b-accent); color:#fff; font-weight:800; font-size:calc(var(--u)*13); }

/* ---- the player view on a phone ---- */
.pp{ width:calc(var(--u)*300); height:calc(var(--u)*620); padding:calc(var(--u)*9); border-radius:calc(var(--u)*46); background:#0D1526; font-family:Manrope, sans-serif; color:#14305C; }
.pp-screen{ width:100%; height:100%; display:flex; flex-direction:column; overflow:hidden; border-radius:calc(var(--u)*38); background:#F3F7FB; }
.pp-top{ flex:none; padding:calc(var(--u)*26) calc(var(--u)*16) calc(var(--u)*12); background:#fff; }
.pp-top-row{ display:flex; align-items:center; justify-content:space-between; }
.pp-word{ width:calc(var(--u)*84); height:calc(var(--u)*20); }
.pp-live{ display:inline-flex; align-items:center; gap:calc(var(--u)*5); padding:calc(var(--u)*3) calc(var(--u)*9); border-radius:calc(var(--u)*999); background:#E7F5EC; color:#15803D; font-weight:800; font-size:calc(var(--u)*10); letter-spacing:.08em; }
.pp-live::before{ content:""; width:calc(var(--u)*6); height:calc(var(--u)*6); border-radius:50%; background:currentColor; }
.pp-title{ margin-top:calc(var(--u)*12); font-family:Outfit, sans-serif; font-weight:800; font-size:calc(var(--u)*21); line-height:1.15; color:#0C2E63; }
.pp-sub{ margin-top:calc(var(--u)*2); font-weight:600; font-size:calc(var(--u)*12); color:#3C5B7B; }
.pp-bar{ height:calc(var(--u)*40); flex:none; display:flex; align-items:center; justify-content:space-between; padding:0 calc(var(--u)*14); background:#14305C; color:#fff; }
.pp-bar b{ font-family:Outfit, sans-serif; font-weight:800; font-size:calc(var(--u)*14); }
.pp-clock{ padding:calc(var(--u)*3) calc(var(--u)*10); border-radius:calc(var(--u)*999); background:#D9F23C; color:#0C2E63; font-family:Outfit, sans-serif; font-weight:800; font-size:calc(var(--u)*13); font-variant-numeric:tabular-nums; }
.pp-tabs{ flex:none; margin:calc(var(--u)*10) calc(var(--u)*12) 0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:calc(var(--u)*3); padding:calc(var(--u)*3); border-radius:calc(var(--u)*10); background:#E1EAF4; }
.pp-tabs span{ height:calc(var(--u)*30); display:flex; align-items:center; justify-content:center; border-radius:calc(var(--u)*8); font-weight:700; font-size:calc(var(--u)*12.5); color:#3C5B7B; }
.pp-tabs span.on{ background:#fff; box-shadow:0 calc(var(--u)*1) calc(var(--u)*3) rgba(12,46,99,.12); font-weight:800; color:#0C2E63; }
.pp-you{ flex:none; margin:calc(var(--u)*10) calc(var(--u)*12) 0; display:flex; align-items:center; justify-content:space-between; gap:calc(var(--u)*10); padding:calc(var(--u)*11) calc(var(--u)*14); border-radius:calc(var(--u)*14); background:#1565C8; color:#fff; }
.pp-you-k{ font-weight:800; font-size:calc(var(--u)*10); letter-spacing:.12em; }
.pp-you-rank{ display:flex; align-items:baseline; gap:calc(var(--u)*6); margin-top:calc(var(--u)*2); }
.pp-you-rank b{ font-family:Outfit, sans-serif; font-weight:800; font-size:calc(var(--u)*28); line-height:1; }
.pp-you-rank span{ font-weight:700; font-size:calc(var(--u)*13); }
.pp-you-next{ text-align:right; line-height:1.3; font-weight:600; font-size:calc(var(--u)*10.5); }
.pp-you-next b{ display:block; font-family:Outfit, sans-serif; font-weight:800; font-size:calc(var(--u)*16); }
.pp-list{ flex:1; min-height:0; margin:calc(var(--u)*10) calc(var(--u)*12) 0; overflow:hidden; border-radius:calc(var(--u)*14); background:#fff; }
.pp-row{ height:calc(var(--u)*37); display:flex; align-items:center; gap:calc(var(--u)*9); padding:0 calc(var(--u)*12); border-bottom:calc(var(--u)*1) solid #EEF3F8; }
.pp-row.m1{ background:#F7EEDB; } .pp-row.m2{ background:#EAF0F6; } .pp-row.m3{ background:#F6E3D4; } .pp-row.me{ background:#E4F0FD; }
.pp-rank{ width:calc(var(--u)*18); font-family:Outfit, sans-serif; font-weight:800; font-size:calc(var(--u)*13); color:#3C5B7B; }
.m1 .pp-rank{ color:#8A6A1F; } .m3 .pp-rank{ color:#94511F; }
.pp-flag{ width:calc(var(--u)*17); height:calc(var(--u)*11); flex:none; border-radius:calc(var(--u)*2); box-shadow:0 0 0 calc(var(--u)*1) rgba(0,0,0,.08); }
.pp-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:Outfit, sans-serif; font-weight:600; font-size:calc(var(--u)*14); }
.pp-me{ padding:calc(var(--u)*1) calc(var(--u)*7); border-radius:calc(var(--u)*999); background:#1565C8; color:#fff; font-weight:800; font-size:calc(var(--u)*9.5); }
.pp-pts{ font-family:Outfit, sans-serif; font-weight:800; font-size:calc(var(--u)*15); font-variant-numeric:tabular-nums; }
.pp-foot{ height:calc(var(--u)*44); flex:none; display:flex; align-items:center; justify-content:center; gap:calc(var(--u)*6); font-weight:700; font-size:calc(var(--u)*11.5); color:#0D4C96; }
.pp-foot svg{ width:calc(var(--u)*14); height:calc(var(--u)*14); }

/* ---- score sheets on a laptop, a tablet and a phone ---- */
.sd{ position:relative; width:calc(var(--u)*280); height:calc(var(--u)*200); font-family:Manrope, sans-serif; color:#14305C; }
.sd-in{ width:100%; height:100%; display:flex; flex-direction:column; overflow:hidden; background:#fff; }
.sd-lap{ position:absolute; left:calc(var(--u)*20); top:calc(var(--u)*20); width:calc(var(--u)*240); height:calc(var(--u)*150); padding:calc(var(--u)*6); border-radius:calc(var(--u)*10) calc(var(--u)*10) calc(var(--u)*4) calc(var(--u)*4); background:#1B2638; }
.sd-lap .sd-in{ border-radius:calc(var(--u)*4); }
.sd-lap-base{ position:absolute; left:calc(var(--u)*4); top:calc(var(--u)*170); width:calc(var(--u)*272); height:calc(var(--u)*10); border-radius:0 0 calc(var(--u)*10) calc(var(--u)*10); background:#C9D3DF; }
.sd-lap-base::after{ content:""; position:absolute; left:calc(var(--u)*116); top:0; width:calc(var(--u)*40); height:calc(var(--u)*4); border-radius:0 0 calc(var(--u)*4) calc(var(--u)*4); background:#AEB9C7; }
.sd-bar{ height:calc(var(--u)*20); flex:none; display:flex; align-items:center; justify-content:space-between; padding:0 calc(var(--u)*8); background:#14305C; color:#fff; font-weight:700; font-size:calc(var(--u)*8); }
.sd-saved{ display:inline-flex; align-items:center; gap:calc(var(--u)*3); font-weight:800; font-size:calc(var(--u)*7); color:#BBF7D0; }
.sd-saved::before{ content:""; width:calc(var(--u)*5); height:calc(var(--u)*5); border-radius:50%; background:#4ADE80; }
.sd-row{ flex:1; display:flex; align-items:center; gap:calc(var(--u)*7); padding:0 calc(var(--u)*8); border-bottom:calc(var(--u)*1) solid #EEF3F8; }
.sd-court{ width:calc(var(--u)*16); height:calc(var(--u)*16); flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:calc(var(--u)*4); background:#14305C; color:#fff; font-family:Outfit, sans-serif; font-weight:800; font-size:calc(var(--u)*9); }
.sd-names{ flex:1; font-family:Outfit, sans-serif; font-weight:600; font-size:calc(var(--u)*8.5); line-height:1.35; }
.sd-box{ width:calc(var(--u)*22); height:calc(var(--u)*18); flex:none; display:inline-flex; align-items:center; justify-content:center; border:calc(var(--u)*1) solid #C9DAEC; border-radius:calc(var(--u)*4); font-family:Outfit, sans-serif; font-weight:800; font-size:calc(var(--u)*10); }
.sd-box.is-focus{ border:calc(var(--u)*2) solid #1565C8; }
.sd-tab{ position:absolute; left:calc(var(--u)*22); top:calc(var(--u)*17); width:calc(var(--u)*236); height:calc(var(--u)*166); padding:calc(var(--u)*8); border-radius:calc(var(--u)*16); background:#1B2638; }
.sd-tab .sd-in{ border-radius:calc(var(--u)*8); }
.sd-tab-h{ height:calc(var(--u)*22); flex:none; display:flex; align-items:center; justify-content:space-between; padding:0 calc(var(--u)*10); border-bottom:calc(var(--u)*1) solid #EEF3F8; font-family:Outfit, sans-serif; font-weight:800; font-size:calc(var(--u)*10); letter-spacing:.1em; }
.sd-live{ display:inline-flex; align-items:center; gap:calc(var(--u)*3); padding:calc(var(--u)*1) calc(var(--u)*6); border-radius:calc(var(--u)*999); background:#E7F5EC; color:#15803D; font-family:Manrope, sans-serif; font-weight:800; font-size:calc(var(--u)*6.5); letter-spacing:.08em; }
.sd-live::before{ content:""; width:calc(var(--u)*4); height:calc(var(--u)*4); border-radius:50%; background:currentColor; }
.sd-tab-b{ flex:1; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); align-items:center; }
.sd-team{ display:flex; flex-direction:column; align-items:center; gap:calc(var(--u)*5); }
.sd-team-n{ font-family:Outfit, sans-serif; font-weight:600; font-size:calc(var(--u)*8.5); line-height:1.3; text-align:center; }
.sd-big{ width:calc(var(--u)*52); height:calc(var(--u)*40); display:inline-flex; align-items:center; justify-content:center; border-radius:calc(var(--u)*8); background:#E6EEF6; font-family:Outfit, sans-serif; font-weight:800; font-size:calc(var(--u)*26); }
.sd-pm{ display:flex; gap:calc(var(--u)*8); }
.sd-pm span{ width:calc(var(--u)*20); height:calc(var(--u)*20); display:inline-flex; align-items:center; justify-content:center; border-radius:50%; font-weight:800; font-size:calc(var(--u)*13); }
.sd-minus{ background:#FDE7E7; color:#B42318; }
.sd-plus{ background:#1565C8; color:#fff; }
.sd-tab-f{ height:calc(var(--u)*18); flex:none; display:flex; align-items:center; justify-content:space-between; padding:0 calc(var(--u)*10); background:#F2F7FC; font-weight:700; font-size:calc(var(--u)*7); color:#3C5B7B; }
.sd-tab-f b{ color:#0D4C96; }
.sd-ph{ position:absolute; left:calc(var(--u)*86); top:calc(var(--u)*2); width:calc(var(--u)*108); height:calc(var(--u)*196); padding:calc(var(--u)*5); border-radius:calc(var(--u)*20); background:#1B2638; }
.sd-ph .sd-in{ gap:calc(var(--u)*6); padding:calc(var(--u)*12) calc(var(--u)*7) calc(var(--u)*7); border-radius:calc(var(--u)*15); }
.sd-ph-h{ text-align:center; font-family:Outfit, sans-serif; font-weight:800; font-size:calc(var(--u)*7.5); letter-spacing:.1em; }
.sd-tiles{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:calc(var(--u)*4); }
.sd-tile{ height:calc(var(--u)*30); display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:calc(var(--u)*6); background:#E6EEF6; font-family:Outfit, sans-serif; font-weight:800; font-size:calc(var(--u)*15); line-height:1; }
.sd-tile small{ margin-top:calc(var(--u)*2); font-weight:600; font-size:calc(var(--u)*5.5); }
.sd-tile.is-focus{ border:calc(var(--u)*1.5) solid #1565C8; background:#fff; }
.sd-keys{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:calc(var(--u)*3); }
.sd-keys span{ height:calc(var(--u)*17); display:inline-flex; align-items:center; justify-content:center; border-radius:calc(var(--u)*4); background:#EEF3F8; font-family:Outfit, sans-serif; font-weight:700; font-size:calc(var(--u)*7); }
.sd-keys span.on{ background:#1565C8; color:#fff; }
.sd-undo{ align-self:center; margin-top:auto; padding:calc(var(--u)*2) calc(var(--u)*10); border-radius:calc(var(--u)*999); background:#F2F7FC; font-weight:800; font-size:calc(var(--u)*6.5); color:#0D4C96; }
/* @scaled-end */

/* ============ SECTIONS ============ */
/* rows that turn into a sideways strip on a phone */
.rail{ display:grid; gap:16px; margin-top:40px; }
@media (max-width:699px){
  .rail{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter); overscroll-behavior-x:contain; margin-inline:calc(-1 * var(--gutter)); padding:4px var(--gutter) 14px; scrollbar-width:none; }
  .rail::-webkit-scrollbar{ display:none; }
  .rail > *{ flex:0 0 min(300px, 84%); scroll-snap-align:start; }
}

/* scoring */
@media (min-width:700px){ .devices{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; } }
@media (min-width:1100px){ .devices{ gap:28px; } }
.dev{ padding:20px 12px 22px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface-2); }
.dev h3{ margin:20px 4px 6px; font-size:1.1875rem; font-weight:700; }
.dev p{ margin-inline:4px; font-size:.9375rem; color:var(--muted); }
@media (min-width:700px){ .dev{ padding:20px 18px 24px; } }
@media (min-width:1100px){ .dev{ padding:28px 24px; } .dev h3{ font-size:1.25rem; } }
.live-note{ display:flex; align-items:center; gap:12px; margin-top:28px; font-weight:700; font-size:.9375rem; color:var(--navy); }
.live-dot{ width:10px; height:10px; flex:none; border-radius:50%; background:var(--live); box-shadow:0 0 0 5px rgba(21,128,61,.15); }

/* the live board */
.board-grid{ display:grid; gap:32px; margin-top:36px; align-items:start; }
.board-fig{ margin:0; min-width:0; }
.feats{ display:grid; gap:22px; }
.feat{ display:flex; gap:14px; }
.feat h3{ margin-bottom:4px; font-size:1.125rem; font-weight:700; }
.feat p{ font-size:.9375rem; color:var(--muted); }
.ic-box{ width:44px; height:44px; flex:none; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:12px; background:#fff; color:var(--action); }
.ic-box svg,.ic-soft svg{ width:22px; height:22px; }
@media (min-width:700px) and (max-width:1099px){ .feats{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width:1100px){ .board-grid{ grid-template-columns:minmax(0, 7fr) minmax(0, 4fr); gap:48px; } }

/* between rounds: club news, sponsors and the Ladies look */
.between-grid{ display:grid; gap:36px; align-items:center; }
.between-vis{ position:relative; margin:0; padding-bottom:62px; }
.between-mini{ position:absolute; right:0; bottom:0; width:46%; padding:4px; border-radius:10px; box-shadow:0 18px 36px rgba(12,46,99,.28); }
.between-mini .tv-fit{ border-radius:4px; }
.seg{ display:flex; gap:4px; width:max-content; max-width:100%; margin:0 0 14px; padding:4px; border:1px solid var(--line); border-radius:999px; background:#fff; }
.seg button{ min-height:44px; padding:0 18px; border:0; border-radius:999px; background:transparent; color:var(--ink); font-weight:700; font-size:.9375rem; white-space:nowrap; cursor:pointer; }
.seg button:hover{ color:var(--brand-deep); }
.seg button[aria-pressed="true"]{ background:var(--navy); color:#fff; }
@media (min-width:700px){ .between-vis{ padding-bottom:120px; } .between-mini{ width:36%; padding:5px; } }
@media (min-width:1100px){ .between-grid{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:64px; } .between-vis{ padding-bottom:100px; } .between-mini{ right:-24px; width:38%; } }

/* formats */
@media (min-width:700px){ .formats{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; } }
@media (min-width:1100px){ .formats{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px; } }
@media (max-width:699px){ .formats > *{ flex-basis:min(280px, 80%); } }
.fmt{ padding:26px; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; }
.fmt-ic{ width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; border-radius:14px; background:var(--action); color:#fff; }
.fmt-ic svg{ width:24px; height:24px; }
.fmt h3{ margin:18px 0 6px; font-size:1.25rem; font-weight:700; }
.fmt p{ font-size:.9375rem; color:var(--muted); }

/* for players */
.players-grid{ display:grid; gap:36px; align-items:center; }
.players-phone{ order:2; margin:0; display:flex; justify-content:center; }
.players-phone .pp-fit{ width:270px; filter:drop-shadow(0 24px 34px rgba(12,46,99,.22)); }
.ticks{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:16px; }
.ticks li{ display:flex; align-items:flex-start; gap:12px; }
.ticks b{ color:var(--navy); }
.tick{ width:28px; height:28px; flex:none; display:inline-flex; align-items:center; justify-content:center; margin-top:1px; border-radius:50%; background:var(--live); color:#fff; }
.tick svg{ width:16px; height:16px; }
.link-chip{ display:inline-flex; align-items:center; gap:10px; min-height:44px; margin-top:28px; padding:0 18px; border:1px solid var(--line); border-radius:999px; background:#fff; font-weight:700; font-size:.9375rem; color:var(--brand-deep); text-decoration:none; }
.link-chip svg{ width:18px; height:18px; }
.link-chip:hover{ border-color:var(--brand); }
@media (min-width:700px){
  .players-grid{ grid-template-columns:auto minmax(0, 1fr); gap:40px; }
  .players-phone{ order:0; }
  .players-phone .pp-fit{ width:300px; }
}
@media (min-width:1100px){ .players-grid{ gap:80px; } }

/* after the final, getting started */
.trio{ display:grid; gap:24px; margin-top:36px; }
.trio-item{ display:flex; align-items:flex-start; gap:14px; }
.trio-item h3{ margin-bottom:4px; font-size:1.125rem; font-weight:700; }
.trio-item p{ font-size:.9375rem; color:var(--muted); }
.ic-soft{ width:44px; height:44px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:12px; background:var(--brand-soft); color:var(--brand-deep); }
.steps{ list-style:none; display:grid; gap:16px; margin:36px 0 0; padding:0; }
.step{ padding:26px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface-2); }
.step-n{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--navy); color:#fff; font-family:Outfit, sans-serif; font-weight:800; font-size:1.0625rem; }
.step h3{ margin:16px 0 6px; font-size:1.1875rem; font-weight:700; }
.step p{ font-size:.9375rem; color:var(--muted); }
@media (min-width:700px){
  .trio,.steps{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; }
}
@media (min-width:1100px){ .trio,.steps{ gap:28px; } }

/* questions */
.faq-grid{ display:grid; gap:28px; align-items:start; }
.faq-intro p{ margin-top:16px; color:var(--muted); }
.faq-list{ display:grid; gap:10px; }
.faq{ padding:0 20px; border:1px solid var(--line); border-radius:16px; background:#fff; }
.faq summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:60px; padding-block:10px; list-style:none; cursor:pointer; font-family:Outfit, sans-serif; font-weight:700; font-size:1.125rem; line-height:1.3; color:var(--navy); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary svg{ width:20px; height:20px; flex:none; color:var(--action); transition:transform .25s var(--ease); }
.faq[open] summary svg{ transform:rotate(45deg); }
.faq p{ padding-bottom:18px; color:var(--muted); }
@media (min-width:1100px){ .faq-grid{ grid-template-columns:minmax(0, 4fr) minmax(0, 7fr); gap:64px; } }

/* book a demo */
.cta{ background:var(--navy); color:#fff; }
.cta .eyebrow{ color:var(--ball); }
.cta .h2{ color:#fff; }
.cta .lede{ color:var(--on-navy); }
.cta-grid{ display:grid; gap:28px; align-items:center; }
.form-card{ padding:22px; border-radius:22px; background:#fff; color:var(--navy); box-shadow:0 30px 60px rgba(0,0,0,.25); }
.form{ display:grid; gap:16px; }
.form[hidden]{ display:none; }
.form .two{ display:grid; gap:16px; }
.field{ display:grid; gap:6px; align-content:start; }
.field label{ font-size:.875rem; font-weight:700; color:var(--navy); }
.field input,.field select{ width:100%; height:48px; padding:0 14px; border:1px solid var(--line-2); border-radius:12px; background:var(--ice); color:var(--navy); font:500 1rem Manrope, sans-serif; }
.field select{ padding-right:40px; appearance:none; -webkit-appearance:none; background:var(--ice) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230C2E63' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; }
.field input:focus,.field select:focus{ outline:3px solid rgba(27,123,228,.35); outline-offset:1px; border-color:var(--brand); }
.field .err{ display:none; font-size:.8125rem; font-weight:700; color:var(--danger); }
.field.bad input{ border-color:var(--danger); }
.field.bad .err{ display:block; }
.form .btn{ width:100%; margin-top:4px; }
.form-note{ text-align:center; font-size:.8125rem; color:var(--muted); }
.form-note a{ color:var(--brand-deep); font-weight:700; }
.form-err{ text-align:center; font-size:.875rem; font-weight:700; color:var(--danger); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-ok{ display:none; padding:28px 8px; text-align:center; }
.form-ok.show{ display:block; }
.form-ok .tick{ width:52px; height:52px; margin:0 auto 14px; }
.form-ok .tick svg{ width:26px; height:26px; }
.form-ok h3{ font-size:1.375rem; font-weight:800; }
.form-ok p{ margin-top:6px; color:var(--muted); }
@media (min-width:700px){
  .form-card{ padding:32px; }
  .form .two{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (min-width:1100px){ .cta-grid{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:64px; } }

/* footer */
.foot{ padding-block:40px; background:var(--navy-deep); color:var(--on-navy); }
.foot-in{ display:flex; flex-direction:column; gap:20px; }
.foot .word{ --word-ink:#FFFFFF; --word-fun:#54C8F5; }
.foot .brand svg{ width:128px; height:30px; }
.foot-note{ margin-top:6px; font-size:.875rem; }
.foot-nav{ display:flex; flex-wrap:wrap; gap:0 8px; margin-inline:-8px; }
.foot-nav a{ display:flex; align-items:center; min-height:44px; padding:0 8px; font-weight:600; font-size:.9375rem; color:var(--on-navy); text-decoration:none; }
.foot-nav a:hover{ color:#fff; }
@media (min-width:700px){ .foot-in{ flex-direction:row; align-items:center; justify-content:space-between; } }

/* ============ PRIVACY POLICY (/privacy) ============ */
.legal{ max-width:44rem; }
.legal-date{ margin-top:10px; font-size:.875rem; font-weight:600; color:var(--muted); }
.legal > p,.legal ul{ margin-top:16px; color:var(--ink); }
.legal h2{ margin-top:40px; font-size:1.375rem; font-weight:800; }
.legal ul{ padding-left:1.25rem; display:grid; gap:10px; }
.legal b{ color:var(--navy); }

/* ============ DEMO PLAYER PAGE (/demo) ============ */
.dm{ min-height:100vh; background:#F3F7FB; }
.dm-wrap{ max-width:560px; margin:0 auto; padding-bottom:40px; }
.dm-top{ padding:16px 16px 14px; background:#fff; border-bottom:1px solid var(--line); }
.dm-top-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dm-top-row .brand svg{ width:116px; height:28px; }
.dm-badge{ padding:4px 10px; border-radius:999px; background:var(--ball); color:var(--navy-deep); font-weight:800; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; }
.dm-title{ margin-top:12px; font-size:1.625rem; font-weight:800; line-height:1.15; }
.dm-sub{ margin-top:4px; font-weight:600; font-size:.875rem; color:var(--muted); }
.dm-bar{ position:sticky; top:0; z-index:5; min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 16px; background:#14305C; color:#fff; }
.dm-bar b{ font-family:Outfit, sans-serif; font-weight:800; font-size:1rem; }
.dm-clock{ padding:4px 12px; border-radius:999px; background:var(--ball); color:var(--navy); font-family:Outfit, sans-serif; font-weight:800; font-size:.9375rem; font-variant-numeric:tabular-nums; }
.dm-tabs{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:4px; margin:14px 16px 0; padding:4px; border-radius:12px; background:#E1EAF4; }
.dm-tabs button{ min-height:44px; border:0; border-radius:9px; background:transparent; color:var(--muted); font-weight:700; font-size:.9375rem; cursor:pointer; }
.dm-tabs button[aria-selected="true"]{ background:#fff; color:var(--navy); box-shadow:0 1px 3px rgba(12,46,99,.12); }
.dm-panel{ margin:14px 16px 0; }
.dm-panel[hidden]{ display:none; }
.dm-you{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border-radius:16px; background:var(--action); color:#fff; }
.dm-you-k{ font-weight:800; font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; }
.dm-you-rank{ display:flex; align-items:baseline; gap:8px; margin-top:2px; }
.dm-you-rank b{ font-family:Outfit, sans-serif; font-weight:800; font-size:2rem; line-height:1; }
.dm-you-next{ text-align:right; font-weight:600; font-size:.8125rem; line-height:1.35; }
.dm-you-next b{ display:block; font-family:Outfit, sans-serif; font-weight:800; font-size:1.125rem; }
.dm-hint{ margin:8px 2px 0; font-size:.8125rem; color:var(--muted); }
.dm-list{ margin-top:12px; overflow:hidden; border-radius:16px; background:#fff; }
.dm-row{ min-height:48px; display:flex; align-items:center; gap:10px; padding:0 14px; border-bottom:1px solid #EEF3F8; }
.dm-row:last-child{ border-bottom:0; }
.dm-row.m1{ background:#F7EEDB; } .dm-row.m2{ background:#EAF0F6; } .dm-row.m3{ background:#F6E3D4; } .dm-row.me{ background:var(--brand-soft); }
.dm-rank{ width:22px; font-family:Outfit, sans-serif; font-weight:800; color:var(--muted); }
.m1 .dm-rank{ color:#8A6A1F; } .m3 .dm-rank{ color:#94511F; }
.dm-flag{ width:20px; height:13px; flex:none; border-radius:2px; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.dm-name{ flex:1; min-width:0; font-family:Outfit, sans-serif; font-weight:600; font-size:1.0625rem; color:#14305C; }
.dm-move{ width:28px; text-align:center; font-weight:800; font-size:.75rem; color:var(--faint); }
.dm-move.up{ color:var(--live); } .dm-move.down{ color:var(--danger); }
.dm-pts{ min-width:28px; text-align:right; font-family:Outfit, sans-serif; font-weight:800; font-size:1.125rem; color:#14305C; font-variant-numeric:tabular-nums; }
.dm-me{ padding:1px 8px; border-radius:999px; background:var(--action); color:#fff; font-weight:800; font-size:.6875rem; }
.dm-h{ margin:20px 2px 10px; font-size:1.0625rem; font-weight:800; }
.dm-courts{ display:grid; gap:12px; }
.dm-court{ overflow:hidden; border-radius:16px; background:#fff; }
.dm-court-h{ display:flex; align-items:center; justify-content:space-between; min-height:40px; padding:0 14px; background:#14305C; color:#fff; font-family:Outfit, sans-serif; font-weight:800; letter-spacing:.06em; }
.dm-pill{ display:inline-flex; align-items:center; gap:5px; padding:2px 9px; border-radius:999px; background:#fff; color:var(--live); font-family:Manrope, sans-serif; font-weight:800; font-size:.6875rem; letter-spacing:.08em; }
.dm-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.dm-pill.is-final{ color:var(--muted); }
.dm-team{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:0 14px; border-bottom:1px solid #EEF3F8; }
.dm-team:last-child{ border-bottom:0; }
.dm-team span{ display:flex; align-items:center; gap:8px; font-family:Outfit, sans-serif; font-weight:600; color:#14305C; }
.dm-score{ min-width:44px; height:36px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; background:#E6EEF6; font-family:Outfit, sans-serif; font-weight:800; font-size:1.25rem; color:#14305C; font-variant-numeric:tabular-nums; }
.dm-score.is-win{ background:#14305C; color:#fff; }
.dm-next{ overflow:hidden; border-radius:16px; background:#fff; }
.dm-next li{ display:flex; align-items:center; gap:10px; min-height:48px; padding:0 14px; border-bottom:1px solid #EEF3F8; font-family:Outfit, sans-serif; font-weight:600; color:#14305C; }
.dm-next ol,.dm-rounds,.dm-res-list{ list-style:none; margin:0; padding:0; }
.dm-court-n{ width:26px; height:26px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:7px; background:#14305C; color:#fff; font-weight:800; font-size:.875rem; }
.dm-vs{ font-family:Manrope, sans-serif; font-weight:700; font-size:.75rem; color:var(--muted); }
.dm-rounds{ display:grid; gap:12px; }
.dm-round{ overflow:hidden; border-radius:16px; background:#fff; }
.dm-round-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:0 14px; border-bottom:1px solid #EEF3F8; font-family:Outfit, sans-serif; font-weight:800; color:var(--navy); }
.dm-round-h span{ font-family:Manrope, sans-serif; font-weight:700; font-size:.8125rem; color:var(--muted); }
.dm-round-h span.is-live{ color:var(--live); }
.dm-res{ display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:center; gap:10px; min-height:44px; padding:0 14px; border-bottom:1px solid #F1F5FA; font-size:.875rem; font-weight:600; color:#14305C; }
.dm-res:last-child{ border-bottom:0; }
.dm-res b{ font-family:Outfit, sans-serif; font-weight:800; font-variant-numeric:tabular-nums; }
.dm-res span:last-child{ text-align:right; }
.dm-foot{ margin:28px 16px 0; padding:22px; border-radius:20px; background:var(--navy); color:var(--on-navy); text-align:center; }
.dm-foot h2{ color:#fff; font-size:1.25rem; font-weight:800; }
.dm-foot p{ margin-top:6px; font-size:.9375rem; }
.dm-foot .btn{ margin-top:16px; }
.dm-legal{ margin-top:12px; text-align:center; }
.dm-legal a{ display:inline-flex; align-items:center; min-height:44px; padding:0 8px; font-size:.875rem; font-weight:700; color:var(--brand-deep); }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}