/* Clean white theme v2. Loaded last in <head>. Layout: top navigation (side drawer only
   below 1024px), centred column, all-sans type, flat ranked list, dark footer. */
:root{
  --bg:#FFFFFF; --soft:#F5F6F8; --soft-2:#ECEEF2; --line:#E5E7EB; --line-strong:#CDD2DA;
  --ink:#0B1220; --ink-2:#465063; --ink-3:#6B7385;
  --accent:#2B4BE8; --accent-ink:#1C34B5; --accent-soft:#EEF1FE;
  --display:"Inter Tight","Inter",system-ui,sans-serif; --sans:"Inter",system-ui,sans-serif;
}
html body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-feature-settings:"cv11","ss03";}
html body ::selection{background:var(--accent-soft);}

/* ---------- type ---------- */
html body h1,html body h2,html body h3,html body h4,
html body .font-headline-xl,html body .font-headline-lg,html body .font-headline-md{font-family:var(--display);color:var(--ink);}
html body h1,html body h2,html body .font-headline-xl{font-weight:700;letter-spacing:-0.03em;}
html body h1{font-size:clamp(34px,5vw,56px)!important;line-height:1.05!important;letter-spacing:-0.035em;max-width:22ch;margin-bottom:1.25rem!important;}
html body main h2.font-headline-xl{font-size:clamp(26px,3.2vw,36px)!important;line-height:1.12!important;margin-top:.25rem;}
html body main h3{font-weight:650;letter-spacing:-0.015em;}
html body main p,html body main li,html body main dd{line-height:1.7;}
html body main .text-body-md{font-size:15px;}
html body main .text-body-lg{font-size:18px;line-height:1.65;}
html body main section{scroll-margin-top:84px;}
html body main a.underline,html body main p a{text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(43,75,232,.35);}
html body main a.underline:hover,html body main p a:hover{text-decoration-color:currentColor;}

/* numbered section eyebrows */
html body main{counter-reset:sec;}
html body main section > h2.font-headline-xl{counter-increment:sec;}
html body main section > h2.font-headline-xl::before{content:counter(sec,decimal-leading-zero);display:block;margin-bottom:.7rem;
  font:600 12px/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.12em;color:var(--accent);}
html body main section{padding-top:.5rem;}
html body main > div > section + section,html body main section.mb-xl + section{border-top:1px solid var(--line);padding-top:2.75rem;}

/* ---------- chrome: header + top navigation ---------- */
html body header{background:rgba(255,255,255,.92)!important;backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)!important;height:68px!important;}
html body header a[href="/"]{font-family:var(--display);font-weight:800;font-size:22px;line-height:1;letter-spacing:-0.03em;color:var(--ink)!important;white-space:nowrap;}
html body header a[href="/"] .text-secondary{color:var(--accent)!important;}
html body header .rounded-full{background:transparent!important;border:1px solid var(--line-strong);color:var(--ink-3)!important;font-size:11px;letter-spacing:.06em;}
html body header a.bg-primary{white-space:nowrap;font-family:var(--sans);font-size:14px;font-weight:600;line-height:20px;padding:.55rem 1.1rem;border-radius:999px!important;}
html body .topnav{display:none;}
@media (min-width:1024px){
  html body .topnav{display:flex;align-items:center;gap:1.75rem;margin-left:2.75rem;}
  html body .topnav a{font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none;white-space:nowrap;padding:.4rem 0;border-bottom:1.5px solid transparent;transition:color .15s,border-color .15s;}
  html body .topnav a:hover{color:var(--ink);border-bottom-color:var(--ink);}
  html body #side-nav{display:none!important;}
  html body main,html body footer{margin-left:auto!important;}
  html body main{margin-right:auto!important;}
}
@media (min-width:1024px) and (max-width:1180px){html body .topnav{gap:1.2rem;margin-left:1.75rem;} html body header .rounded-full{display:none!important;}}

/* mobile drawer */
html body #side-nav{background:#fff!important;border-right:1px solid var(--line)!important;top:68px!important;height:calc(100vh - 68px)!important;box-shadow:none;}
html body #side-nav:not(.-translate-x-full){box-shadow:12px 0 40px rgba(11,18,32,.08);}
html body #side-nav a{font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-2);border-left-color:transparent!important;}
html body #side-nav a:hover{background:var(--soft)!important;color:var(--ink);}
html body #side-nav .material-symbols-outlined{font-size:20px;color:var(--ink-3);}

/* ---------- footer: dark ink ---------- */
html body footer{background:var(--ink)!important;border-top:0!important;color:#98A1B3;margin-top:3rem!important;padding-top:3.5rem!important;}
html body footer *{border-color:rgba(255,255,255,.1)!important;}
html body footer .text-on-surface-variant,html body footer a,html body footer p,html body footer li{color:#98A1B3!important;}
html body footer a:hover{color:#fff!important;}
html body footer .text-on-surface,html body footer .font-headline-md,html body footer .text-primary,html body footer strong{color:#fff!important;}
html body footer .font-headline-md{font-family:var(--display);letter-spacing:-0.02em;}
html body footer .text-secondary{color:#8FA3FF!important;}
html body footer [class*="bg-surface"]{background:rgba(255,255,255,.05)!important;}

/* ---------- buttons ---------- */
html body main a.bg-primary,html body a.bg-primary{background:var(--ink)!important;color:#fff!important;border-radius:999px!important;font-family:var(--sans);font-weight:600;}
html body main a.bg-primary:hover,html body a.bg-primary:hover{background:var(--accent)!important;}
html body main a.border.bg-surface-container{background:#fff!important;border:1px solid var(--line-strong)!important;border-radius:999px!important;font-family:var(--sans);font-weight:600;}
html body main a.border.bg-surface-container:hover{border-color:var(--ink)!important;}
html body main a.bg-primary .material-symbols-outlined,html body main a.border.bg-surface-container .material-symbols-outlined{font-size:20px;}

/* ---------- panels: soft fills, no boxes-in-boxes ---------- */
html body main .bg-surface-container,html body main .bg-surface-container-high,html body main .bg-surface-container-low{background:var(--soft)!important;border-color:transparent!important;}
html body main .bg-surface-container-lowest{background:#fff!important;}
html body main .rounded-lg,html body main .rounded-xl{border-radius:16px;}
html body .shadow-md,html body .shadow-lg,html body .hover\:shadow-lg:hover{box-shadow:none!important;}
html body .bg-odds{background:var(--soft)!important;}
html body .hover\:bg-odds-hover:hover{background:var(--soft-2)!important;}
html body main .border-outline-variant{border-color:var(--line)!important;}
html body main .bg-surface-container.border-outline-variant{border-color:transparent!important;}
html body main .bg-primary.rounded-full{background:var(--ink)!important;font-family:var(--display)!important;}

/* status pills */
html body main .rounded-full.bg-error-container{background:#FDECEC!important;color:#9F1D1D!important;}
html body main .rounded-full.bg-secondary-container{background:var(--accent-soft)!important;color:var(--accent-ink)!important;}

/* "jump to" tiles -> one row of pills */
html body main .grid.lg\:grid-cols-6{display:flex;flex-wrap:wrap;gap:.5rem;}
html body main .grid.lg\:grid-cols-6 > a{flex-direction:row;gap:.45rem;padding:.5rem 1rem .5rem .8rem;border-radius:999px;background:#fff!important;border:1px solid var(--line-strong)!important;}
html body main .grid.lg\:grid-cols-6 > a:hover{border-color:var(--ink)!important;}
html body main .grid.lg\:grid-cols-6 > a .material-symbols-outlined{font-size:18px;color:var(--accent);}
html body main .grid.lg\:grid-cols-6 > a span:last-child{font-size:14px;font-weight:500;}

/* ---------- ranked list: flat rows, big numerals ---------- */
html body .tl{gap:0;border-top:1px solid var(--ink);margin-top:1.5rem;}
html body .tl-row{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;padding:1.35rem .5rem;
  grid-template-columns:52px 116px minmax(0,1.8fr) minmax(0,1.6fr) 60px 140px;transition:background .15s;}
html body .tl-row:hover{background:var(--soft);}
html body .tl-rank1{background:var(--accent-soft);border-bottom-color:transparent;border-radius:16px;box-shadow:none;margin:.5rem 0;}
html body .tl-rank1:hover{background:var(--accent-soft);}
html body .tl-rank{font-family:var(--display);font-weight:300;font-size:2.4rem;line-height:1;letter-spacing:-0.04em;color:var(--line-strong);font-variant-numeric:tabular-nums;}
html body .tl-rank1 .tl-rank{color:var(--accent);font-weight:600;}
html body .tl-logo{border:1px solid var(--line);border-radius:12px;background:#fff;}
html body .tl-brand{font-family:var(--display);color:var(--ink);font-weight:700;font-size:1.15rem;letter-spacing:-0.02em;}
html body .tl-specs li{line-height:1.35;font-size:.8rem;}
html body .tl-specs .k{color:var(--ink-3);}
html body .tl-specs .v{color:var(--ink);font-weight:550;}
html body .tl-bonus{background:linear-gradient(180deg,#FFF8E1 0%,#FFF1C7 100%);border:1px solid #F2D27A;border-radius:14px;color:#3A2600;padding:.8rem 1rem .85rem;line-height:1.3;position:relative;}
html body .tl-bonus .k{display:inline-block;background:#F5B700;color:#3A2600;font-weight:800;letter-spacing:.08em;font-size:.62rem;border-radius:999px;padding:.18rem .55rem;margin-bottom:.4rem;opacity:1;}
html body .tl-bonus .v{display:block;color:#2A1B00;font-family:var(--display);font-weight:800;font-size:1.12rem;line-height:1.25;letter-spacing:-0.01em;}
html body .tl-rank1 .tl-bonus{box-shadow:0 6px 18px rgba(245,183,0,.22);}
html body .tl-score{background:transparent;border:0;color:var(--ink);font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-0.02em;width:auto;padding:0;}
html body .tl-review{color:var(--ink-2);font-weight:500;}
@media (max-width:768px){
  html body .tl{border-top:0;}
  html body .tl-row{grid-template-columns:1fr;padding:1.4rem .25rem 1.5rem;}
  html body .tl-rank1{padding:1.4rem 1rem 1.5rem;}
  html body .tl-rank{font-size:1.6rem;border-bottom:0;padding-bottom:0;}
  html body .tl-bonus{padding:.8rem .9rem .9rem;}
  html body .tl-bonus .v{font-size:1.15rem;}
}

/* CTA: vivid green, the one warm-to-go signal on the page */
html body .cta-play,html body main a[rel~="sponsored"].bg-primary{background:linear-gradient(180deg,#1BA24C 0%,#15843E 100%)!important;color:#fff!important;border-radius:999px!important;font-weight:700!important;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 16px rgba(22,163,74,.32)!important;text-shadow:0 1px 0 rgba(0,0,0,.12);transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;}
html body .cta-play:hover,html body main a[rel~="sponsored"].bg-primary:hover{background:linear-gradient(180deg,#15843E 0%,#106B31 100%)!important;transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 10px 22px rgba(22,163,74,.38)!important;filter:none!important;}
html body .tl-cta .cta-play{font-size:1.02rem;padding:.75rem 1rem;}
html body .cta-play .cta-arrow{transition:transform .12s ease;} html body .cta-play:hover .cta-arrow{transform:translateX(3px);}

/* ---------- tables ---------- */
html body main table{border-collapse:collapse;}
html body main table thead th,html body main thead tr{background:#fff!important;color:var(--ink-3)!important;}
html body main table thead th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:600;border-bottom:1px solid var(--ink)!important;}
html body main table tbody tr{border-color:var(--line)!important;background:transparent!important;}
html body main table tbody tr:hover{background:var(--soft)!important;}
@media (max-width:768px){
  html body main table:not(.toplist-aff) tbody td:first-child{color:var(--accent)!important;}
  html body main table:not(.toplist-aff) tbody td:nth-child(2){color:var(--ink)!important;}
}

/* mobile sticky CTA */
@media (max-width:768px){
  html body #sticky-cta{background:rgba(255,255,255,.97)!important;border-top:1px solid var(--line)!important;box-shadow:0 -8px 24px rgba(11,18,32,.06)!important;}
  html body #sticky-cta .scb-rank{color:var(--accent)!important;}
  html body #sticky-cta .scb-txt strong{color:var(--ink)!important;}
  html body #sticky-cta .scb-txt span{color:var(--ink-3)!important;}
  html body #sticky-cta .scb-logo{border:1px solid var(--line);}
}

/* small screens: header fit */
@media (max-width:768px){
  html body header{padding-left:16px!important;padding-right:16px!important;height:60px!important;}
  html body #side-nav{top:60px!important;height:calc(100vh - 60px)!important;}
  html body header .gap-md{gap:10px;}
  html body header a[href="/"]{font-size:20px;}
  html body header a.bg-primary{font-size:13px;padding:.45rem .85rem;}
  html body main section > h2.font-headline-xl::before{margin-bottom:.5rem;}
}