/* =========================================================================
   FindBets Design Tokens
   Source of truth for the Astro rebuild. Extracted verbatim from the
   OPERATOR-APPROVED homepage POC (findbets-poc.html) and systematised.
   Do not hand-roll ad hoc colours/sizes anywhere in the app — everything
   traces back to this file. Single theme (locked light) — see note at
   bottom on why dark mode is out of scope for this build.
   ========================================================================= */

:root{
  /* ---- Ink / surface (navy-biased neutrals — not a generic mid-grey) ---- */
  --navy:      #0E1B2C;  /* header/footer bg, primary text ink on light */
  --navy-2:    #132840;  /* subnav bg, secondary dark surface */
  --navy-3:    #0A1522;  /* darkest — age bar bg, hero gradient foot, dark badge */
  --ink:       #0E1B2C;  /* body text colour on light surfaces */
  --bg:        #F5F7FA;  /* page background */
  --card:      #FFFFFF;  /* card / row / panel surfaces */
  --line:      #E3E8EF;  /* default border */
  --line-hover:#CBD6E6;  /* border on card hover/focus */
  --tint:      #EEF2F8;  /* logo-tile / placeholder fill */
  --tint-ink:  #54658A;  /* text/icon colour drawn on --tint */

  /* ---- Text on dark navy surfaces (header/footer/hero) ---- */
  --on-navy:        #FFFFFF;  /* headings/emphasis on navy */
  --on-navy-nav:    #C7D3E4;  /* main nav links */
  --on-navy-sub:    #9DB0C9;  /* subnav links */
  --on-navy-muted:  #93A4BC;  /* hero copy, footer body, trust stats */
  --on-navy-body:   #B9C6DA;  /* hero paragraph */

  /* ---- Muted body text (light surfaces) ---- */
  --muted: #657792;

  /* ---- Brand ---- */
  --accent:    #12B76A;  /* primary CTA — "claim" green */
  --accent-d:  #0E9155;  /* CTA hover/active */
  --accent-on: #FFFFFF;  /* text on accent */
  --blue:      #2E6BE6;  /* links, review-score numerals */
  --gold:      #E8B54B;  /* eyebrow, star ratings, focus ring */

  /* ---- Semantic (kept separate from the brand accent) ---- */
  --success:      var(--accent);   /* pros / verified / checks */
  --success-ink:  var(--accent-d);
  --caution:      var(--gold);
  --caution-bg:   #FFF7E8;         /* responsible-gambling callout fill */
  --caution-border:#F0DDB0;
  --caution-ink:  #6B5417;
  --negative:     #C4453B;         /* cons only — never used for form errors or alarm states */
  --negative-bg:  #FBEBEA;
  --negative-ink: #8F3229;
  --star-fill:    var(--gold);
  --star-empty:   var(--line);

  /* ---- Focus (must read on navy AND on white — gold is the one hue that does) ---- */
  --focus-ring: var(--gold);
  --focus-width: 3px;
  --focus-offset: 2px;

  /* ---- Type ---- */
  --font-sans: system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  /* Deliberate choice, not the "safe default": zero webfont weight/latency on a
     commission-funded comparison site where speed IS trust and IS ranking.
     The OS-native stack also reads as neutral/utilitarian like an odds board —
     appropriate for a site whose job is fast, credible number-scanning, not
     editorial personality. */

  --text-2xs: 11px;    /* badges, footer fine print */
  --text-xs:  12px;    /* eyebrow, rank labels, subnav-adjacent copy */
  --text-sm:  12.5px;  /* subnav links, small CTAs, .fine legal */
  --text-base:14px;    /* default card/body text */
  --text-md:  15px;    /* row name/offer, why-card body */
  --text-lg:  17px;    /* hero paragraph, review lede */
  --text-xl:  22px;    /* wordmark */
  --text-2xl: 24px;    /* section h2 */
  --text-3xl: clamp(26px,4vw,38px);  /* page-level H1 (review/category/standard) */
  --text-display: clamp(30px,5vw,50px); /* homepage hero H1 only */

  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --leading-tight: 1.2;
  --leading-base: 1.55;
  --leading-relaxed: 1.7;   /* legal / fine print blocks */

  --tracking-tight: -0.02em;  /* headings, wordmark */
  --tracking-wide: .1em;      /* uppercase micro-labels */
  --tracking-wider: .16em;    /* hero eyebrow */

  /* ---- Spacing scale (organic 2–10px rhythm lifted from the approved POC,
         not a generic 8px grid — preserves the exact approved density) ---- */
  --space-1: 4px;
  --space-2: 6px;
  --space-3: 8px;
  --space-4: 10px;
  --space-5: 12px;
  --space-6: 14px;
  --space-7: 16px;
  --space-8: 18px;
  --space-9: 20px;
  --space-10: 22px;
  --space-12: 26px;
  --space-16: 32px;
  --space-20: 40px;
  --space-24: 44px;
  --space-32: 52px;
  --space-40: 60px;

  /* ---- Radii ---- */
  --radius-sm:  6px;   /* footer badge chips */
  --radius-md:  7px;   /* wordmark mark, dark badge */
  --radius-base:8px;   /* grid-card CTA, logo tile (small) */
  --radius-md-lg:9px;  /* row claim button */
  --radius-lg:  10px;  /* row logo tile */
  --radius-xl:  13px;  /* cards: bk card, why-card, rg callout, at-a-glance box */
  --radius-2xl: 14px;  /* rows container, review hero panel */

  /* ---- Shadows ---- */
  --shadow-card-hover: 0 12px 26px rgba(14,27,44,.10);
  --shadow-sticky-bar: 0 -4px 16px rgba(14,27,44,.14); /* mobile sticky claim bar */
  --shadow-popover: 0 8px 24px rgba(14,27,44,.16);

  /* ---- Layout ---- */
  --container-max: 1160px;
  --container-pad: 22px;
  --container-pad-mobile: 16px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2,.7,.2,1);
  --dur-fast: .15s;

  /* ---- Z-index scale ---- */
  --z-header: 30;
  --z-sticky-cta: 40;
  --z-popover: 50;

  /* ---- Breakpoints (reference only — media queries are literal px) ---- */
  --bp-sm: 560px;   /* Top-10 grid 5→2 col */
  --bp-md: 720px;   /* rows/footer/why collapse */
  --bp-lg: 820px;   /* main nav → hamburger */
  --bp-xl: 900px;   /* Top-10 grid 5→3 col */
}

/* prefers-reduced-motion: kill hover-lift/translate + smooth-scroll everywhere */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
     transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* Theme note: the approved POC is a single, deliberately fixed light theme
   (dark navy header/footer bracketing a light body — not a light/dark MODE
   toggle). Tokens above are still semantic (--ink/--bg/--card, not raw hex,
   in every component) so a future dark theme is a token swap, not a rebuild —
   but shipping one is out of scope: the brief is to systematise the approved
   look, not add a mode nobody asked for. */

*{box-sizing:border-box;margin:0}
body{font-family:var(--font-sans,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif);background:#F5F7FA;color:#0E1B2C;line-height:1.55;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}img{max-width:100%;display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 22px}
.age{background:#0A1522;color:#93A4BC;text-align:center;font-size:12px;padding:7px}.age b{color:#fff}
header{background:#0E1B2C;color:#fff;position:sticky;top:0;z-index:30}
.hrow{display:flex;align-items:center;justify-content:space-between;padding:15px 0}
.logo{font-weight:800;font-size:22px;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
.logo .mk{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,#2E6BE6,#12B76A);display:inline-block}
nav.main{display:flex;gap:22px;font-size:14px;font-weight:600}nav.main a{color:#C7D3E4}nav.main a:hover{color:#fff}
@media(max-width:860px){nav.main{display:none}}
.subnav{background:#132840;border-top:1px solid rgba(255,255,255,.06)}
.subnav .wrap{display:flex;gap:20px;overflow-x:auto;padding:11px 22px;font-size:12.5px}
.subnav a{color:#9DB0C9;white-space:nowrap;font-weight:600}.subnav a:hover{color:#fff}
.cta{background:#12B76A;color:#fff;font-weight:700;padding:9px 16px;border-radius:8px;font-size:13px;display:inline-block}
.cta:hover{background:#0E9155}
.hero{background:linear-gradient(180deg,#0E1B2C,#0A1522);color:#fff;padding:48px 0 54px;text-align:center}
.hero .ey{color:#E8B54B;font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:12px}
.hero h1{font-size:clamp(28px,5vw,48px);font-weight:800;letter-spacing:-.02em;margin:12px 0 12px;text-wrap:balance}
.hero p{color:#B9C6DA;max-width:60ch;margin:0 auto;font-size:16px}
.hero .trust{display:flex;gap:24px;justify-content:center;margin-top:22px;flex-wrap:wrap;font-size:13px;color:#93A4BC}.hero .trust b{color:#fff}
.section{padding:40px 0}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:18px;gap:12px}
.sec-h h2{font-size:23px;font-weight:800;letter-spacing:-.01em}.sec-h .rank{font-size:12px;color:#657792;font-weight:600;text-transform:uppercase;letter-spacing:.1em}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}
@media(max-width:900px){.grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:560px){.grid{grid-template-columns:repeat(2,1fr)}}
.bk{background:#fff;border:1px solid #E3E8EF;border-radius:13px;padding:15px 13px;text-align:center;transition:transform .15s,box-shadow .15s,border-color .15s;display:flex;flex-direction:column}
.bk:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(14,27,44,.10);border-color:#CBD6E6}
.bk .lg{height:46px;border-radius:8px;background:#EEF2F8;display:flex;align-items:center;justify-content:center;margin-bottom:10px;overflow:hidden}
.bk .lg img{max-width:90%;max-height:100%;object-fit:contain}
.bk .nm{font-weight:700;font-size:14px}.bk .of{color:#657792;font-size:12px;margin:2px 0 12px;min-height:32px;flex:1}
.bk .go{display:block;background:#12B76A;color:#fff;font-weight:700;font-size:12.5px;padding:9px;border-radius:8px}.bk .go:hover{background:#0E9155}
.bk .rev{display:block;margin-top:7px;font-size:12px;color:#2E6BE6;font-weight:600}
.rows{background:#fff;border:1px solid #E3E8EF;border-radius:14px;overflow:hidden}
.r{display:grid;grid-template-columns:56px 1.5fr 1.1fr auto auto;gap:15px;align-items:center;padding:15px 18px;border-bottom:1px solid #E3E8EF}.r:last-child{border-bottom:0}
.r .lg{width:56px;height:56px;border-radius:10px;background:#EEF2F8;display:flex;align-items:center;justify-content:center;overflow:hidden}.r .lg img{max-width:88%;max-height:88%;object-fit:contain}
.r .nm{font-weight:700;font-size:15px}.r .tc{color:#657792;font-size:11.5px;margin-top:2px}
.r .offer{font-weight:700;font-size:15px}.r .offer span{display:block;font-weight:400;font-size:11.5px;color:#657792}
.r .rev{font-size:13px;color:#2E6BE6;font-weight:600}.r .claim{background:#12B76A;color:#fff;font-weight:700;font-size:13px;padding:10px 18px;border-radius:9px}.r .claim:hover{background:#0E9155}
@media(max-width:720px){.r{grid-template-columns:44px 1fr auto;gap:12px}.r .offer,.r .rev{display:none}.r .lg{width:44px;height:44px}}
.rg{background:#FFF7E8;border:1px solid #F0DDB0;border-radius:13px;padding:16px 18px;display:flex;gap:13px;align-items:flex-start;font-size:13px;color:#6B5417;margin-top:14px}
.rg .b{background:#0A1522;color:#fff;font-weight:800;border-radius:7px;padding:5px 10px;font-size:13px;flex:none}.rg a{color:#0E9155;font-weight:700}
.crumb{font-size:12.5px;color:#657792;padding:16px 0 0}.crumb a{color:#657792}.crumb a:hover{color:#0E1B2C}
.rhero{display:grid;grid-template-columns:180px 1fr;gap:26px;padding:22px 0 30px}@media(max-width:720px){.rhero{grid-template-columns:1fr;gap:16px}}
.rhero .ltile{background:#fff;border:1px solid #E3E8EF;border-radius:14px;height:180px;display:flex;align-items:center;justify-content:center;padding:20px}.rhero .ltile img{max-width:100%;max-height:100%;object-fit:contain}
.chip{display:inline-block;background:#0A1522;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:20px}
.rhero h1{font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-.01em;margin:10px 0 8px}
.rhero .checked{color:#0E9155;font-size:13px;font-weight:600;margin-bottom:8px}
.rhero .big{font-size:22px;font-weight:800;margin:6px 0 16px}
.claimbtn{display:block;background:#12B76A;color:#fff;text-align:center;font-weight:800;font-size:16px;padding:16px;border-radius:11px;max-width:520px}.claimbtn:hover{background:#0E9155}
.microc{font-size:11.5px;color:#657792;margin-top:8px;max-width:520px}.microc a{color:#0E9155;font-weight:700}
.card{background:#fff;border:1px solid #E3E8EF;border-radius:14px;padding:22px;margin:18px 0}
.card h2,.card h3{letter-spacing:-.01em}.card h2{font-size:20px;font-weight:800;margin-bottom:10px}.card h3{font-size:16px;font-weight:700;margin:14px 0 6px}
.body{max-width:72ch}.body h2{font-size:22px;font-weight:800;margin:26px 0 8px;letter-spacing:-.01em}.body h3{font-size:17px;font-weight:700;margin:18px 0 6px}
.body p{margin:10px 0;color:#28374B}.body ul{margin:10px 0 10px 20px}.body li{margin:5px 0;color:#28374B}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}@media(max-width:600px){.pc{grid-template-columns:1fr}}
.pc .c{background:#fff;border:1px solid #E3E8EF;border-radius:13px;padding:18px}.pc .c h3{font-size:15px;font-weight:800;margin-bottom:8px}.pc .c li{list-style:none;font-size:13.5px;color:#28374B;margin:6px 0;padding-left:20px;position:relative}
.pc .c.good li:before{content:'\2713';color:#12B76A;position:absolute;left:0;font-weight:800}.pc .c.bad li:before{content:'\2013';color:#9A6b6b;position:absolute;left:0;font-weight:800}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}@media(max-width:720px){.why{grid-template-columns:1fr}}
.why .c{background:#fff;border:1px solid #E3E8EF;border-radius:13px;padding:20px}.why .c h3{font-size:16px;font-weight:800;margin-bottom:6px}.why .c p{color:#657792;font-size:14px}
.catrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}.catrow a{background:#fff;border:1px solid #E3E8EF;border-radius:10px;padding:11px 18px;font-weight:700;font-size:14px}.catrow a:hover{border-color:#12B76A;color:#0E9155}
footer{background:#0E1B2C;color:#93A4BC;margin-top:36px;padding:38px 0 42px;font-size:13px}
footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:26px;margin-bottom:24px}@media(max-width:720px){footer .cols{grid-template-columns:1fr}}
footer h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}
footer a{display:block;color:#93A4BC;margin:6px 0}footer a:hover{color:#fff}
footer .badge{display:inline-block;background:rgba(255,255,255,.08);border-radius:6px;padding:4px 9px;font-size:11px;margin:3px 6px 0 0}
footer .disc{border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:14px 16px;margin-bottom:20px;font-size:12.5px;color:#B9C6DA;line-height:1.6}
footer .disc strong{color:#fff}
footer .fine{border-top:1px solid rgba(255,255,255,.08);padding-top:18px;font-size:12px;line-height:1.7}
.legal h1{font-size:34px;font-weight:800;margin:14px 0 6px}.legal{max-width:820px}.legal .body h2{font-size:20px}
form.cf{display:grid;gap:14px;max-width:520px;margin-top:8px}form.cf label{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#657792}
form.cf input,form.cf textarea{width:100%;border:1px solid #E3E8EF;padding:12px 14px;border-radius:8px;font-size:15px;font-family:inherit}
form.cf textarea{min-height:130px}form.cf button{background:#0E1B2C;color:#fff;border:0;padding:14px;border-radius:8px;font-weight:700;letter-spacing:.05em;cursor:pointer}