/* ==========================================================================
   ReelTeller stylesheet
   Look and feel:
   midnight navy chrome, gold for the house pick and highlights, violet for
   every call to action. Readable white content surface, because the pages
   are long-form and the dark scheme is for the frame, not the reading.
   Change the tokens below to re-skin the whole site.
   ========================================================================== */

:root{
  /* --- brand tokens --- */
  --brand:        #0E1630;   /* header, hero bands, table heads        */
  --brand-2:      #1B2654;   /* gradients, hover on dark               */
  --gold:         #F5B021;   /* fills: pick badge, stars, hero accents */
  --gold-ink:     #8A5A00;   /* gold as text on white (6.9:1)          */
  --gold-soft:    #FFF7E3;
  --cta:          #6D28D9;   /* every "visit" button (white = 7.1:1)   */
  --cta-dark:     #5B21B6;
  --link:         #5B21B6;
  --ok:           #15803D;
  --bad:          #B91C1C;

  /* --- neutrals --- */
  --ink:      #0F172A;
  --ink-2:    #475569;
  --ink-3:    #64748B;
  --page:     #F5F6FA;
  --card:     #FFFFFF;
  --line:     #E2E8F0;
  --line-2:   #CBD5E1;
  --surface-2:#F8FAFC;
  --surface-3:#EEF2F7;

  --shadow:   0 1px 2px rgba(15,23,42,.05), 0 8px 24px -14px rgba(15,23,42,.22);
  --shadow-lg:0 2px 4px rgba(15,23,42,.06), 0 18px 40px -20px rgba(15,23,42,.35);
  --radius:   12px;
  --radius-sm:8px;
  --wrap:     1180px;

  --font:  "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --head:  "Exo 2", "Inter", system-ui, sans-serif;
  --mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* z-index scale */
  --z-nav: 60; --z-menu: 80; --z-bar: 50;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font);font-size:17px;line-height:1.65;color:var(--ink);
  background:var(--page);-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--cta)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{display:inline-block;flex:none;vertical-align:-.15em}

/* ============================ HEADER ============================ */
.site-header{
  background:rgba(14,22,48,.97);position:sticky;top:0;z-index:var(--z-nav);
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:saturate(140%) blur(8px);
}
.hdr{display:flex;align-items:center;gap:18px;height:66px}
.logo{
  flex:none;display:flex;align-items:center;gap:9px;
  font:800 24px/1 var(--head);letter-spacing:-.01em;color:#fff;text-decoration:none;white-space:nowrap;
}
.logo:hover{color:#fff;opacity:.92}
.logo .mark{width:54px;height:38px;flex:none;display:block;object-fit:contain}
.logo b{color:var(--gold);font-weight:800}
.nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
.nav a{
  color:#E2E8F0;font-size:14.5px;font-weight:500;padding:8px 11px;border-radius:8px;
  white-space:nowrap;text-decoration:none;transition:background .15s,color .15s;
}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav a.on{color:#fff;box-shadow:inset 0 -2px 0 var(--gold)}
.burger{display:none;margin-left:auto;background:none;border:0;color:#fff;cursor:pointer;
  width:44px;height:44px;border-radius:8px}
.burger:hover{background:rgba(255,255,255,.08)}
.navtoggle{display:none}

/* ============================ HERO BANDS ============================ */
/* Dark band with a faint ledger grid: reads "crypto" without stock art. */
.hero,.post-hero{
  position:relative;color:#fff;overflow:hidden;
  background:
    radial-gradient(1100px 380px at 85% -40%,rgba(109,40,217,.38),transparent 60%),
    radial-gradient(700px 300px at -10% 120%,rgba(245,176,33,.16),transparent 60%),
    linear-gradient(180deg,var(--brand) 0%,#121C3E 100%);
}
.hero::before,.post-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(180deg,#000 30%,transparent 100%);
}
.hero .wrap,.post-hero .wrap{position:relative}
.hero{padding:40px 0 36px}
.hero .wrap{display:grid;gap:28px;grid-template-columns:minmax(0,1fr)}
@media(min-width:960px){ .hero .wrap{grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:center} }
.hero-pick{
  background:rgba(255,255,255,.06);border:1px solid rgba(245,176,33,.45);border-radius:var(--radius);
  padding:18px;display:flex;flex-direction:column;gap:8px;text-align:center;
  box-shadow:0 20px 50px -24px rgba(0,0,0,.6);backdrop-filter:blur(6px);
}
.hp-kicker{display:inline-flex;align-items:center;justify-content:center;gap:6px;color:var(--gold);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.hp-logo{height:64px;border-radius:var(--radius-sm);display:grid;place-items:center;padding:8px}
.hp-logo img{max-height:42px;width:auto}
.hp-offer{font:800 20px/1.25 var(--head);color:#fff}
.hp-note{font-size:13.5px;color:#CBD5E1;line-height:1.45}
.hero-pick small{font-size:11.5px;color:#94A3B8}
.hero-pick small a{color:#CBD5E1}
@media(max-width:959px){
  .hero-pick{flex-direction:row;flex-wrap:wrap;align-items:center;text-align:left;gap:6px 12px;padding:14px}
  .hp-kicker{width:100%;justify-content:flex-start}
  .hp-logo{width:96px;height:48px;padding:6px}
  .hp-logo img{max-height:30px}
  .hp-offer{flex:1;min-width:150px;font-size:16.5px}
  .hp-note{display:none}
  .hero-pick .btn{width:100%}
}
.hero h1{
  font:800 clamp(2rem,4.4vw,3.15rem)/1.12 var(--head);letter-spacing:-.015em;
  max-width:20ch;margin-bottom:14px;text-wrap:balance;
}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .lede{color:#CBD5E1;font-size:1.06rem;max-width:62ch;margin-bottom:18px}
@media(max-width:620px){ .hero .lede{font-size:.98rem} .chips li:nth-child(n+3){display:none} }
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.chips li{
  display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:#E2E8F0;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:999px;padding:6px 12px;
}
.chips .ico{color:var(--gold)}

.post-hero{padding:40px 0 30px}
.post-hero h1{font:800 clamp(1.7rem,3.4vw,2.55rem)/1.15 var(--head);max-width:26ch;margin-bottom:12px;text-wrap:balance}
.crumbs{font-size:14px;color:#94A3B8}
.crumbs a{color:#CBD5E1;text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs .sep{margin:0 7px;opacity:.55}

/* ============================ PAGE SHELL ============================ */
.main{background:#fff;margin:0 auto;max-width:var(--wrap);padding:34px 20px 60px}
@media(min-width:1220px){ .main{border-radius:0 0 var(--radius) var(--radius)} }

h1{font:800 clamp(1.75rem,3.6vw,2.6rem)/1.18 var(--head);letter-spacing:-.015em;margin-bottom:16px;text-wrap:balance}
h2{
  font:800 clamp(1.35rem,2.4vw,1.9rem)/1.25 var(--head);letter-spacing:-.01em;
  margin:46px 0 16px;text-wrap:balance;scroll-margin-top:84px;
}
h3{font:700 1.18rem/1.35 var(--head);margin:30px 0 10px}
p{margin-bottom:15px}
.main ul,.main ol{margin:0 0 18px 24px}
.main li{margin-bottom:7px}
.main li::marker{color:var(--ink-3)}

/* ---- byline ---- */
.byline{display:flex;align-items:center;gap:13px;margin-bottom:6px}
.byline .av{
  width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--brand-2),var(--brand));color:var(--gold);
  font:800 15px var(--head);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line-2);
}
.byline .who{font-size:14px;line-height:1.4}
.byline .who small{color:var(--ink-3);display:block;font-size:12.5px}
.byline .who b{font-size:15.5px}
.byline-compact{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--ink-3);margin-bottom:12px;line-height:1.45}
.byline-compact .av{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--brand-2),var(--brand));color:var(--gold);font:800 11px var(--head)}
.byline-compact a{color:var(--ink-2);font-weight:600}
.main > .disclosure{margin-bottom:6px}
.main > h2#toplist{margin-top:22px}
.updated{color:var(--ink-3);font-size:14px;margin-bottom:20px;display:flex;flex-wrap:wrap;gap:4px 14px}
.updated b{color:var(--ink-2);font-weight:600}

/* ---- disclosure: one line, always above the first list ---- */
.disclosure{
  font-size:13.5px;line-height:1.55;color:var(--ink-2);background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 14px;margin:0 0 22px;
  display:flex;gap:10px;align-items:flex-start;
}
.disclosure .ico{color:var(--ink-3);margin-top:2px}

/* ---- verdict / answer box ---- */
.verdict{
  border:1px solid #E9DFFB;border-left:4px solid var(--cta);background:#F7F3FE;
  padding:16px 18px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:22px 0 28px;
}
.verdict .lbl{
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cta);display:block;margin-bottom:6px;
}
.verdict p{margin:0;font-size:17px}

/* ============================ CASINO CARDS ============================ */
.toplist{display:flex;flex-direction:column;gap:14px;margin:22px 0 30px;counter-reset:op}
.op{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);
  display:grid;align-items:center;gap:18px;padding:20px 22px 20px 64px;
  grid-template-columns:120px minmax(0,1.45fr) minmax(0,1fr) 196px;
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.op:hover{box-shadow:var(--shadow-lg);border-color:var(--line-2)}
/* rank as a left strip, not a floating chip */
.rank{
  position:absolute;left:0;top:0;bottom:0;width:46px;
  display:grid;place-items:center;border-radius:var(--radius) 0 0 var(--radius);
  background:var(--surface-3);color:var(--ink-2);font:800 18px var(--head);
  border-right:1px solid var(--line);
}
.op.pick{
  border:2px solid var(--gold);
  box-shadow:0 0 0 5px rgba(245,176,33,.13),var(--shadow-lg);
  background:linear-gradient(180deg,#FFFDF6 0,#fff 60%);
}
.op.pick .rank{background:var(--gold);color:var(--brand);border-right-color:transparent}
.pick-badge{
  position:absolute;top:-13px;left:62px;display:inline-flex;align-items:center;gap:6px;
  background:var(--brand);color:var(--gold);font-size:12px;font-weight:700;letter-spacing:.04em;
  padding:5px 11px;border-radius:999px;box-shadow:0 4px 12px -6px rgba(14,22,48,.6);
}

.op-logo{
  height:76px;border-radius:var(--radius-sm);display:grid;place-items:center;padding:10px;
}
.op-logo img{width:100%;height:auto;max-height:44px;object-fit:contain;display:block}

.op-offer{min-width:0}
.op-offer .pre{font-size:12px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.op-offer .amt{font:800 21px/1.2 var(--head);margin-bottom:9px;color:var(--ink)}
.main ul.feats,.feats{list-style:none;margin:0;padding:0;font-size:13.5px;color:var(--ink-2);line-height:1.6}
.main ul.feats li,.feats li{margin:0 0 2px;padding:0;display:flex;gap:7px;align-items:flex-start}
.feats .ico{color:var(--ok);margin-top:3px}

.op-score{min-width:0;display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.stars{display:inline-flex;align-items:center;gap:8px}
.stars .s{color:var(--gold);font-size:15px;letter-spacing:1px}
.stars .n{font:800 17px var(--head)}
.stars .of{font-size:12.5px;color:var(--ink-3)}
.coins{display:flex;flex-wrap:wrap;gap:5px}
.coin{
  font:700 11.5px var(--mono);letter-spacing:.02em;color:var(--ink-2);
  background:var(--surface-3);border:1px solid var(--line);border-radius:6px;padding:2px 6px;
}
.op-meta{font-size:12.5px;color:var(--ink-3);line-height:1.45}

.op-cta{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;
  background:var(--cta);color:#fff;font-weight:700;font-size:15.5px;text-decoration:none;
  padding:11px 18px;border-radius:10px;text-align:center;border:0;cursor:pointer;
  box-shadow:0 6px 16px -8px rgba(109,40,217,.7);
  transition:background .15s ease,transform .15s ease,box-shadow .15s ease;
}
.btn:hover{background:var(--cta-dark);color:#fff;transform:translateY(-1px)}
.op.pick .btn{background:linear-gradient(180deg,#7C3AED,var(--cta))}
.btn-ghost{
  color:var(--ink-2);font-size:14px;text-align:center;font-weight:600;text-decoration:none;
  min-height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;
}
.btn-ghost:hover{color:var(--cta);background:var(--surface-2)}
.op-terms{font-size:11px;color:var(--ink-3);text-align:center;line-height:1.4}

@media(max-width:980px){
  .op{grid-template-columns:100px minmax(0,1fr) 176px;padding:20px 18px 18px 60px}
  .op-score{grid-column:2 / -1;order:4;border-top:1px solid var(--line);padding-top:12px;
    flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 16px}
}
@media(max-width:620px){
  .op{grid-template-columns:1fr;padding:30px 16px 18px;text-align:center;justify-items:center}
  .rank{width:auto;height:30px;right:auto;bottom:auto;left:14px;top:14px;padding:0 10px;
    border-radius:8px;border:0;font-size:15px}
  .pick-badge{left:50%;transform:translateX(-50%);white-space:nowrap}
  .op-logo{width:150px}
  .op-score{grid-column:auto;justify-content:center;align-items:center}
  .main ul.feats li,.feats li{justify-content:center;text-align:left}
  .coins{justify-content:center}
  .op-cta{width:100%;max-width:300px}
}

/* ============================ STICKY PICK BAR (mobile) ============================ */
.pickbar{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bar);
  background:rgba(14,22,48,.97);color:#fff;backdrop-filter:blur(8px);
  border-top:1px solid rgba(245,176,33,.35);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
  display:none;align-items:center;gap:12px;
}
.pickbar .pb-logo{width:74px;height:34px;flex:none;border-radius:6px;display:grid;place-items:center;padding:4px}
.pickbar .pb-logo img{max-height:26px;width:auto}
.pickbar .pb-txt{flex:1;min-width:0;font-size:13px;line-height:1.3}
.pickbar .pb-txt b{display:block;color:var(--gold);font-size:12px;letter-spacing:.04em}
.pickbar .pb-txt span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#E2E8F0}
.pickbar .btn{min-height:42px;padding:8px 16px;font-size:14.5px;flex:none}
@media(max-width:860px){ .pickbar.show{display:flex} body.has-pickbar{padding-bottom:72px} }

/* ============================ TABLES ============================ */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);margin:20px 0 28px;background:#fff}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:14.5px}
th{
  background:var(--brand);color:#fff;text-align:left;padding:12px 14px;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;white-space:nowrap;
}
td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:nth-child(even){background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
td.brand,td.nowrap{font-weight:700;white-space:nowrap}
td.nowrap{font-weight:400}
tr.is-pick td{background:var(--gold-soft)}
td .tag{
  display:inline-block;background:#EDE7FB;color:var(--cta-dark);
  font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:5px;
}
td .tag.gold{background:var(--gold-soft);color:var(--gold-ink)}

/* ============================ SPEC + VERSION TABLES (game pages) ============================ */
.specgrid{
  display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;margin:22px 0;
  grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
}
.spec{background:#fff;padding:13px 15px;display:flex;flex-direction:column;gap:3px;min-width:0}
.spec span{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.spec b{font:700 16px var(--head)}
.vbar{display:inline-block;height:8px;border-radius:99px;background:var(--surface-3);width:90px;vertical-align:middle;overflow:hidden;margin-right:8px}
.vbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#E07A0B);border-radius:99px}

/* ============================ REVIEW SECTIONS ============================ */
.review{margin:38px 0}
.pc{display:grid;gap:14px;grid-template-columns:1fr;margin:16px 0}
@media(min-width:720px){.pc{grid-template-columns:1fr 1fr}}
.pc > div{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;background:#fff}
.pc h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:9px}
.pc .good h3{color:var(--ok)}
.pc .bad h3{color:var(--gold-ink)}
.main .pc ul,.pc ul{list-style:none;margin:0;padding:0;font-size:14.5px}
.main .pc li,.pc li{margin-bottom:6px;padding-left:22px;position:relative}
.pc li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:12px;border-radius:50%}
.pc .good li::before{background:#DCFCE7;box-shadow:inset 0 0 0 3px var(--ok)}
.pc .bad li::before{background:var(--gold-soft);box-shadow:inset 0 0 0 3px var(--gold)}

/* ============================ METHOD PANEL ============================ */
.method{
  border:1px solid var(--line);background:var(--surface-2);border-radius:var(--radius);
  padding:22px 24px;margin:26px 0;
}
.method h3{margin-top:0}
.criteria{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));margin:14px 0 4px;list-style:none;padding:0}
.main .criteria{margin-left:0}
.criteria li{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;font-size:14.5px;margin:0}
.criteria li b{display:block;font-family:var(--head);font-size:15.5px;margin-bottom:2px}
.method-short{
  border-left:4px solid var(--gold);background:var(--gold-soft);padding:14px 18px;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:22px 0 26px;
}
.method-short p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2)}

/* ============================ FAQ ============================ */
.faq{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;margin:18px 0 28px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{
  padding:15px 18px;font-weight:700;cursor:pointer;list-style:none;min-height:48px;
  display:flex;justify-content:space-between;gap:14px;align-items:center;font-size:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--cta);border-bottom:2px solid var(--cta);
  transform:rotate(45deg) translateY(-3px);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-1px)}
.faq summary:hover{background:var(--surface-2)}
.faq .a{padding:0 18px 16px;color:var(--ink-2);font-size:16px}

/* ============================ CALLOUTS ============================ */
.note{border-left:4px solid var(--link);background:#F5F3FF;padding:15px 18px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:20px 0}
.note.warn{border-left-color:var(--gold);background:var(--gold-soft)}
.note p:last-child{margin-bottom:0}

/* ============================ FOOTER ============================ */
.site-footer{background:var(--brand);color:#94A3B8;padding:42px 0 30px;font-size:14px}
.site-footer a{color:#CBD5E1;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.fcols{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));margin-bottom:26px}
.fcols .fh{color:#fff;font:700 13px var(--head);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.fcols ul{list-style:none;margin:0;padding:0}
.fcols li{margin-bottom:7px}
.rg{border-top:1px solid #26314F;padding-top:20px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.rg .badges{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.rg .badge{border:1px solid #33406A;border-radius:6px;padding:5px 10px;font-size:12px;font-weight:700;color:#CBD5E1}
.rg .age{background:var(--gold);color:var(--brand);border-radius:50%;width:36px;height:36px;display:grid;place-items:center;font-weight:900;font-size:13px}
.copybar{border-top:1px solid #26314F;margin-top:24px;padding-top:18px;font-size:13px}
.copybar .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;padding:0}
.copybar nav{display:flex;gap:22px;flex-wrap:wrap}
@media(max-width:620px){ .copybar .wrap{justify-content:center;text-align:center} }

.rgband{background:#fff;border-top:1px solid var(--line);padding:26px 0}
.rgband .wrap{display:flex;justify-content:center;gap:12px 28px;flex-wrap:wrap;align-items:center;font-size:14.5px;color:var(--ink-2)}
.rgband a{font-weight:700}

/* ============================ UTIL ============================ */
.toc{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin:24px 0}
.toc h4{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.toc ol{margin:0 0 0 20px;columns:2;column-gap:28px}
@media(max-width:640px){.toc ol{columns:1}}
.toc li{margin-bottom:4px;font-size:15px}

@media(max-width:860px){
  .nav{display:none}
  .burger{display:grid;place-items:center}
  .nav.open{
    display:flex;position:absolute;top:66px;left:0;right:0;
    background:var(--brand);padding:10px 16px 16px;border-bottom:1px solid rgba(255,255,255,.08);
    flex-direction:column;gap:2px;max-height:calc(100vh - 66px);overflow-y:auto;
  }
  .nav a{padding:11px 12px}
  .nav a.on{box-shadow:inset 3px 0 0 var(--gold)}
}

/* ============================ TWO-COLUMN SHELL ============================ */
.post-shell{
  background:#fff;max-width:var(--wrap);margin:0 auto;padding:34px 20px 60px;
  display:grid;gap:44px;grid-template-columns:minmax(0,1fr);
}
@media(min-width:1000px){ .post-shell{grid-template-columns:minmax(0,1fr) 320px} }
.post-body{min-width:0}
.post-body h2{font-size:clamp(1.3rem,2.2vw,1.7rem);margin:38px 0 14px}
.post-body h2::before{content:"";display:inline-block;width:8px;height:8px;background:var(--gold);
  border-radius:2px;margin-right:12px;vertical-align:.18em;transform:rotate(45deg)}
.post-shell .main{padding:0;background:none;max-width:none;margin:0}
.post-shell .post-body > h2:first-of-type{margin-top:26px}
.hub-lede{color:var(--ink-2);max-width:70ch;margin-bottom:6px}

/* sidebar */
.sidebar{min-width:0}
@media(min-width:1000px){.sidebar{position:sticky;top:86px;align-self:start}}
.widget{margin-bottom:30px}
.widget .wt{font:800 1.05rem var(--head);margin-bottom:13px;display:flex;align-items:center;gap:10px}
.widget .wt::before{content:"";width:8px;height:8px;background:var(--gold);border-radius:2px;transform:rotate(45deg);flex:none}
.searchbox{display:flex}
.searchbox input{
  flex:1;min-width:0;border:1px solid var(--line-2);border-right:0;border-radius:10px 0 0 10px;
  padding:11px 13px;font:inherit;font-size:15px;
}
.searchbox input:focus{outline:2px solid var(--cta);outline-offset:-2px}
.searchbox button{
  background:var(--brand);color:#fff;border:0;padding:11px 18px;border-radius:0 10px 10px 0;
  font:inherit;font-weight:700;cursor:pointer;min-height:44px;
}
.searchbox button:hover{background:var(--brand-2)}

.widget-cta{
  background:linear-gradient(155deg,var(--brand-2),var(--brand));color:#fff;border-radius:var(--radius);
  padding:22px;text-align:center;border:1px solid rgba(245,176,33,.35);
}
.widget-cta .kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;font-weight:700}
.widget-cta .wlogo{height:56px;border-radius:8px;display:grid;place-items:center;margin:0 auto 10px;max-width:170px;padding:8px}
.widget-cta .wlogo img{max-height:38px;width:auto}
.widget-cta .off{font-size:14.5px;color:#CBD5E1;margin-bottom:14px}
.widget-cta .btn{margin-bottom:8px}
.widget-cta small{color:#94A3B8;font-size:11.5px;display:block;line-height:1.5}

.recent{display:flex;flex-direction:column;gap:14px;list-style:none;margin:0;padding:0}
.recent li{margin:0}
.recent a{color:var(--ink);font-weight:700;font-size:15px;line-height:1.35;display:block;text-decoration:none}
.recent a:hover{color:var(--cta)}
.recent small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:3px}

.tagcloud{display:flex;flex-wrap:wrap;gap:7px}
.tagcloud a{
  border:1px solid var(--line-2);border-radius:999px;padding:6px 13px;font-size:13.5px;
  color:var(--ink-2);text-decoration:none;
}
.tagcloud a:hover{border-color:var(--cta);color:var(--cta)}

.toollist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.toollist li{display:flex;align-items:center;gap:10px;font-size:14.5px}
.toollist .ti{flex:none;width:30px;height:30px;display:grid;place-items:center;background:#F5F3FF;border-radius:8px;color:var(--cta)}

/* ---- toplist inside an article ---- */
.inline-list{margin:26px 0 30px;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface-2)}
.inline-list > h2{margin-top:0;font-size:1.25rem}

/* ---- cards grid (guides, reviews, tools) ---- */
.post-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));margin:24px 0}
.pcard{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;
  box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease;
}
.pcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.pcard .ph{height:150px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--brand-2),var(--brand));color:var(--gold)}
.pcard .ph img{max-height:60px;width:auto;object-fit:contain}
.pcard .pb{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.pcard .tag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--cta);font-weight:700}
.pcard h3{font-size:1.06rem;margin:0;line-height:1.35}
.pcard h3 a{color:var(--ink);text-decoration:none}
.pcard h3 a:hover{color:var(--cta)}
.pcard p{font-size:14.5px;color:var(--ink-2);margin:0}
.pcard small{font-size:12.5px;color:var(--ink-3);margin-top:auto;padding-top:6px}
.ph.art{padding:14px 10px}
.ph.art .cardart{width:100%;height:100%;max-height:120px;display:block}

/* ---- nav dropdown ---- */
.navgroup{position:relative}
.nav .navtop{display:flex;align-items:center;gap:5px}
.caret{font-size:9px;opacity:.7;line-height:1}
.submenu{
  position:absolute;top:100%;left:0;min-width:220px;
  background:#fff;border:1px solid var(--line);border-radius:10px;
  box-shadow:0 18px 40px -16px rgba(15,23,42,.45);
  padding:6px;display:none;z-index:var(--z-menu);
}
@media(min-width:861px){
  .navgroup:hover .submenu,.navgroup:focus-within .submenu{display:block}
}
.nav .submenu a{display:block;color:var(--ink);font-size:14.5px;font-weight:500;padding:9px 11px;border-radius:7px}
.nav .submenu a:hover{background:var(--surface-2);color:var(--cta)}
@media(max-width:860px){
  .navgroup{width:100%;display:flex;flex-wrap:wrap;align-items:center}
  .navgroup > .navtop{flex:1}
  .navtoggle{
    display:grid;place-items:center;flex:none;background:none;border:0;color:#fff;cursor:pointer;
    width:44px;height:44px;border-radius:8px;transition:transform .18s ease;
  }
  .navtoggle:hover{background:rgba(255,255,255,.08)}
  .navgroup.open > .navtoggle{transform:rotate(180deg)}
  .submenu{flex-basis:100%;position:static;display:none;border:0;box-shadow:none;background:none;padding:2px 0 8px 14px}
  .navgroup.open .submenu{display:block}
  .nav .submenu a{color:#E2E8F0;font-size:14px;padding:9px 10px}
  .nav .submenu a:hover{background:rgba(255,255,255,.08);color:#fff}
  .caret{display:none}
}

/* ============================ REVIEW PAGES ============================ */
.revsub{font-size:14px;color:var(--ink-3);letter-spacing:.02em;margin-bottom:18px}
.hook{font-size:1.08rem;color:var(--ink-2);max-width:70ch}
.factgrid{
  display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;margin:22px 0;
  grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));
}
.fact{background:#fff;padding:13px 15px;display:flex;flex-direction:column;gap:3px;min-width:0}
.fact span{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.fact b{font-size:15px;font-weight:700}
.revcta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:22px 0 6px}
.revcta .btn{display:inline-flex;padding:12px 26px;font-size:16px}
.revcta small{color:var(--ink-3);font-size:12px}
.revcta-end{
  flex-direction:column;align-items:stretch;gap:10px;text-align:center;
  background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px 18px;margin:22px 0 28px;
}
.revcta-end .btn{align-self:center;min-width:min(300px,100%)}
.bars{display:flex;flex-direction:column;gap:10px;margin:18px 0 26px}
.bar{display:grid;grid-template-columns:minmax(96px,170px) minmax(0,1fr) 40px;gap:12px;align-items:center}
.bl{font-size:14.5px;color:var(--ink-2)}
.bt{height:10px;background:var(--surface-3);border-radius:99px;overflow:hidden}
.bt i{display:block;height:100%;background:linear-gradient(90deg,var(--cta),var(--gold));border-radius:99px;transform-origin:left center}
.bv{font:700 14px var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.related{font-size:15px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:16px;margin-top:26px}

/* ============================ CALCULATORS ============================ */
.calc{
  border:1px solid var(--line-2);border-radius:var(--radius);background:#fff;
  padding:18px 18px 14px;margin:22px 0 28px;box-shadow:var(--shadow);
}
.calc-warn{
  margin:0 0 14px;font-size:13.5px;line-height:1.5;color:var(--gold-ink);
  background:var(--gold-soft);border-left:3px solid var(--gold);padding:9px 12px;border-radius:0 6px 6px 0;
}
.calc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.cf{display:flex;flex-direction:column;gap:5px;min-width:0}
.cf>span{font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-2)}
.cf input,.cf select,.cf textarea{
  font:500 16px/1.25 var(--font);color:var(--ink);background:#fff;
  border:1px solid var(--line-2);border-radius:8px;padding:10px 11px;width:100%;min-height:44px;
  -webkit-appearance:none;appearance:none;
}
.cf select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.cf input:focus,.cf select:focus,.cf textarea:focus{outline:2px solid var(--cta);outline-offset:1px;border-color:var(--cta)}
.cf em{font-style:normal;font-size:11.5px;color:var(--ink-3)}
.calc-hero{
  margin:18px 0 0;padding:16px 18px;border-radius:var(--radius);
  background:linear-gradient(150deg,var(--brand-2),var(--brand));color:#fff;text-align:center;
}
.calc-hero .lbl{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#94A3B8}
.calc-hero strong{display:block;font:800 clamp(32px,7vw,50px)/1.1 var(--head);margin:4px 0 2px;color:var(--gold)}
.calc-hero .sub{display:block;font-size:13.5px;color:#CBD5E1}
.calc-hero.bad strong{color:#FCA5A5}
.calc-out .tablewrap{margin:16px 0 0}
.calc-table td:first-child{font-weight:500;color:var(--ink-2)}
.calc-table td:first-child.brand{font-weight:700;color:var(--ink)}
.calc-note{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin:12px 0 0}
.calc-note.calc-flag{border-left:3px solid var(--gold);background:var(--gold-soft);padding:10px 13px;border-radius:0 6px 6px 0;color:var(--gold-ink)}
.calc-fallback p{font-size:15px}
.calc-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:13.5px}
.calc-link{font:700 13.5px var(--font);color:var(--link);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px;min-height:32px}
.calc-link:hover{color:var(--cta)}
.calc-cap{font-size:13px;color:var(--ink-3);margin:16px 0 8px;line-height:1.5}
.histo{margin:18px 0 0}
.histo .bars{display:flex;flex-direction:row;align-items:flex-end;gap:2px;height:180px;padding:10px 12px 0;margin:0;
  background:linear-gradient(150deg,var(--brand-2),var(--brand));border-radius:var(--radius)}
.histo .hb{flex:1;min-width:0;background:#64748B;border-radius:2px 2px 0 0;transition:background .15s}
.histo .hb.up{background:var(--gold)}
.histo .hb:hover{background:#A78BFA}
.histo .axis{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:7px;font-size:12px;color:var(--ink-3)}
.histo .axis .mark{font-weight:700;color:var(--ink-2)}
@media(max-width:720px){ .calc-grid{grid-template-columns:repeat(2,1fr)} .calc{padding:14px 13px 12px} }
@media(max-width:560px){ .histo .bars{height:140px;gap:1px} }
@media(max-width:420px){ .calc-grid{grid-template-columns:1fr} }

/* ---- provably fair checker ---- */
.pf .calc-grid{grid-template-columns:1fr 1fr}
.pf .cf.wide{grid-column:1 / -1}
.pf-out{margin-top:16px;display:grid;gap:10px}
.pf-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px;align-items:start;font-size:14px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.pf-row > span{color:var(--ink-3);font-size:12px;text-transform:uppercase;letter-spacing:.06em;padding-top:2px}
.pf-row code{font:500 13px/1.45 var(--mono);word-break:break-all;color:var(--ink)}
.pf-badge{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;border-radius:999px;padding:4px 11px}
.pf-badge.ok{background:#DCFCE7;color:#14532D}
.pf-badge.no{background:#FEE2E2;color:#7F1D1D}
.pf-badge.idle{background:var(--surface-3);color:var(--ink-2)}
@media(max-width:560px){ .pf .calc-grid{grid-template-columns:1fr} .pf-row{grid-template-columns:1fr} }

/* ---- calculator band on the homepage ---- */
.toolstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0 24px}
.tcard{
  display:flex;flex-direction:column;gap:9px;padding:22px 22px 24px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
  text-decoration:none;transition:border-color .15s,transform .15s;
}
.tcard:hover{border-color:var(--cta);transform:translateY(-2px)}
.tcard .ti{width:46px;height:46px;display:grid;place-items:center;background:#F5F3FF;border-radius:12px;color:var(--cta)}
.tcard .tn{font:700 17px/1.3 var(--head);color:var(--ink)}
.tcard:hover .tn{color:var(--cta)}
.tcard .tx{font-size:14px;line-height:1.55;color:var(--ink-3)}
@media(max-width:860px){.toolstrip{grid-template-columns:1fr}}

/* ---- search ---- */
.searchbox-lg{display:flex;gap:8px;margin:6px 0 26px}
.searchbox-lg input{flex:1;min-width:0;font:400 16px var(--font);padding:12px 14px;border:1px solid var(--line-2);border-radius:10px;background:#fff;color:var(--ink)}
.searchbox-lg input:focus{outline:2px solid var(--cta);outline-offset:1px;border-color:var(--cta)}
.searchbox-lg button{font:700 15px var(--font);padding:12px 22px;border:0;border-radius:10px;background:var(--cta);color:#fff;cursor:pointer;min-height:46px}
.searchbox-lg button:hover{background:var(--cta-dark)}
.search-count{font-size:14px;color:var(--ink-3);margin:0 0 14px}
.search-empty{font-size:16px;color:var(--ink-2);margin:0 0 14px}
.search-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:20px}
.search-list li{border-top:1px solid var(--line);padding-top:16px}
.search-list li:first-child{border-top:0;padding-top:0}
.search-list a{font-weight:700;font-size:17px;color:var(--link);line-height:1.35;display:block}
.search-list .u{display:block;font-size:12.5px;color:var(--ok);margin:3px 0 6px}
.search-list p{font-size:14.5px;color:var(--ink-2);margin:0;line-height:1.55}
.notfound-links{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.notfound-links a{font-weight:700;font-size:16px}

/* ============================ MOTION ============================ */
/* Content is only hidden once motion.js has confirmed it will run and the
   reader has not asked for reduced motion. With JS off, or reduced motion
   on, everything renders in place. */
.anim [data-reveal]{opacity:0;transform:translateY(14px)}
@media(prefers-reduced-motion:reduce){ .anim [data-reveal]{opacity:1;transform:none} }

/* ---- UK access line on operator cards ---- */
.uk-access{margin-top:10px;padding-top:9px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px;line-height:1.3}
.uk-access .q{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.uk-access .a{font-size:13.5px;font-weight:700}
.uk-access.ok .a{color:var(--ok)}
.uk-access.vpn .a{color:var(--gold-ink)}
.uk-access.no .a{color:var(--bad)}
.uk-access.unknown .a{color:var(--ink-3);font-weight:500;font-style:italic}
.uk-access .warn{display:block;margin-top:4px;font-size:11.5px;line-height:1.45;color:var(--ink-3);font-weight:400}

/* ---- editor portrait ---- */
.byline img.av,.byline-compact img.av{display:block;object-fit:cover;background:var(--brand);padding:0}
.byline.author-card img.av{width:96px;height:96px}

/* ---- legibility and tap targets (audit 2026-10-20) ---- */
.op-terms{font-size:12px}
.uk-access .warn{font-size:12px}
.uk-access .warn a{display:inline-block;padding:4px 0}
.fcols li{margin-bottom:2px}
.fcols li a{display:inline-block;padding:4px 0}
.copybar nav a{display:inline-block;padding:6px 0}
.rgband a{display:inline-block;padding:4px 0}
/* headings re-levelled for a clean outline; keep their old look */
.sidebar .widget .wt{margin:0 0 13px;font:800 1.05rem var(--head);line-height:1.3}
.post-body .pc h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 9px;line-height:1.3}
.post-body .pc h3::before{content:none}

/* ---- Learning Hub banners ---- */
.pcard .ph.pic{height:auto;aspect-ratio:16/9;padding:0;background:var(--brand);overflow:hidden}
.pcard .ph.pic img{max-height:none;width:100%;height:100%;object-fit:cover;display:block}
.posthero{margin:4px 0 22px;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;background:var(--brand)}
.posthero img{width:100%;height:100%;object-fit:cover;display:block}

/* Facts as wrapping flex items: the last row stretches to fill, so an odd
   count never leaves an empty grey cell. */
.factgrid{display:flex;flex-wrap:wrap}
.fact{flex:1 1 170px}