/* ==========================================================================
   Sorcan.ca — design system (Civic-Commons-style layout, sorcan magenta brand)
   Accent: magenta #bc1aaf (CTAs + key accents only). New charcoal→magenta hero.
   ========================================================================== */
:root{
  --ink:#23282e; --bg:#ffffff; --soft:#f7f8f9; --line:#dfe3e7; --muted:#6b7280;
  --accent:#bc1aaf; --accent-dark:#9c1592; --good:#1f9d63; --bad:#dc2626;
  --wrap:1120px;
  --sans:"Familjen Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);
  font:400 16px/1.62 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent-dark);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--sans);line-height:1.16;margin:0 0 14px;letter-spacing:-.014em;font-weight:800}
h2{font-size:clamp(1.34rem,3vw,1.92rem);margin-top:8px;padding-top:6px}
h3{font-size:clamp(1.08rem,2.2vw,1.34rem)}
h4{font-size:1rem;margin:0 0 8px}
p{margin:0 0 15px}
ul,ol{margin:0 0 16px;padding-left:20px}
li{margin:0 0 7px}
.wrap,.container{max-width:var(--wrap);margin:0 auto;padding-left:18px;padding-right:18px}
.container{padding-top:8px;padding-bottom:40px}
main.container{display:block}

/* ---- topbar + disclosure (affiliate disclosure REMOVED; RG only) ---------- */
.topbar{background:var(--ink);color:#e7ecf2}
.disclosure{max-width:var(--wrap);margin:0 auto;padding:6px 18px;font-size:.74rem;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;line-height:1.4}
.disclosure .age{background:var(--accent);color:#fff;font-weight:800;border-radius:5px;
  padding:1px 7px;font-size:.72rem;letter-spacing:.02em}
.disclosure a{color:#f0d7ec}
.disc-full{color:#c4ccd6}
.disc-short{display:none;color:#c4ccd6}

/* ---- header + nav -------------------------------------------------------- */
.hdr{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:8px;padding-bottom:8px}
.logo{font-family:var(--sans);font-weight:800;font-size:1.32rem;letter-spacing:-.03em;color:var(--ink)}
.logo:hover{text-decoration:none}
.logo b{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-item{position:relative}
.nav-row{display:flex;align-items:center}
.nav-top{padding:9px 11px;font-weight:700;font-size:.9rem;color:var(--ink);white-space:nowrap}
.nav-top:hover{color:var(--accent);text-decoration:none}
.caret{display:none;background:none;border:0;color:var(--ink);font-size:.9rem;cursor:pointer;padding:9px 8px}
.submenu{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 16px 40px rgba(15,23,42,.16);padding:14px;min-width:240px;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.14s;z-index:60}
.submenu--wide{min-width:520px}
.nav-item:hover .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu-cols{display:flex;gap:26px}
.submenu-h{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);font-weight:800;margin:0 0 7px}
.submenu a{display:block;padding:6px 8px;border-radius:7px;font-size:.9rem;font-weight:600;color:var(--ink)}
.submenu a:hover{background:var(--soft);color:var(--accent);text-decoration:none}
.state-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 8px}
.join-btn{background:var(--accent);color:#fff;font-weight:800;font-size:.86rem;
  padding:10px 18px;border-radius:9px;margin-left:6px;white-space:nowrap}
.join-btn:hover{background:var(--accent-dark);text-decoration:none}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:9px;
  width:44px;height:44px;font-size:1.3rem;cursor:pointer;color:var(--ink)}

/* ---- HERO (new: charcoal→magenta gradient, oversized uppercase, thin rule) */
.hero{background:linear-gradient(118deg,#1c2024 0%,#2c1e33 46%,#7a1273 88%,#bc1aaf 130%);
  color:#fff;padding:34px 0 30px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 86% 12%,rgba(255,255,255,.10) 0,transparent 44%)}
.hero .container{position:relative;z-index:1;padding-bottom:0;padding-top:0}
.hero .breadcrumb,.breadcrumb{font-size:.78rem;color:rgba(255,255,255,.66);margin:0 0 14px;font-weight:600}
.breadcrumb a{color:rgba(255,255,255,.9)}
.hero h1{color:#fff;text-transform:uppercase;font-size:clamp(1.9rem,4.7vw,3.5rem);
  line-height:1.03;letter-spacing:-.03em;margin:0 0 12px;max-width:20ch}
.hero h1::after{content:"";display:block;width:74px;height:4px;background:var(--accent);
  margin:16px 0 0;border-radius:2px}
.hero-meta{font-size:.82rem;color:rgba(255,255,255,.74);margin:0 0 12px;font-weight:500}
.hero-meta a{color:#fff;font-weight:700}
.lead{font-size:1.06rem;color:rgba(255,255,255,.9);max-width:64ch;margin:0}
/* inner (non-home) pages keep the same hero; home can go taller via home.css */

/* ---- operator comparison table ------------------------------------------ */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 20px;
  border:1px solid var(--line);border-radius:12px}
.op-table{border-collapse:collapse;width:100%;min-width:820px;font-size:.9rem}
.op-table th{background:var(--ink);color:#fff;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.05em;font-weight:800;padding:11px 10px;text-align:left;white-space:nowrap}
.op-table td{border-bottom:1px solid var(--line);padding:11px 10px;vertical-align:middle}
.op-table tbody tr:nth-child(even) td{background:var(--soft)}
.op-table tbody tr:hover td{background:#fbeffb}
.rank-badge{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  background:var(--ink);color:#fff;border-radius:50%;font-weight:800;font-size:.82rem}
.op-table tbody tr:first-child .rank-badge{background:var(--accent)}
.op-logo{max-height:40px;width:auto;max-width:104px;object-fit:contain}
/* every comparison-table logo sits in an identical fixed-size white box (desktop) */
.op-table .op-logo{background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px;
  width:112px;height:46px;object-fit:contain;box-sizing:border-box}
.op-bonus{font-weight:800;color:#5a3d00}
/* highlight the whole Welcome-Bonus column so the offer is impossible to miss */
.op-table td:nth-child(4){background:#fff2c4;color:#5a3d00;font-weight:800}
.op-table tbody tr:nth-child(even) td:nth-child(4){background:#ffedb0}
.op-table tbody tr:hover td:nth-child(4){background:#ffe595}
.check{color:var(--good);font-weight:800;text-align:center}
.rating{display:inline-block;background:var(--soft);border:1px solid var(--line);border-radius:7px;
  padding:2px 8px;font-weight:800;font-family:var(--mono);font-size:.82rem}
.btn{display:inline-block;background:var(--accent);color:#fff;font-weight:800;font-size:.82rem;
  text-align:center;padding:10px 14px;border-radius:8px;white-space:nowrap}
.btn:hover{background:var(--accent-dark);text-decoration:none}

.analysis-note{color:var(--muted);font-size:1rem;margin:0 0 14px;max-width:70ch}
/* ---- TOC ----------------------------------------------------------------- */
.toc{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin:22px 0}
.toc strong{display:block;margin-bottom:8px;font-family:var(--sans)}
.toc ol{columns:2;column-gap:28px;margin:0;font-size:.9rem}
@media(max-width:560px){.toc ol{columns:1}}

/* ---- data tables --------------------------------------------------------- */
.data{border-collapse:collapse;width:100%;font-size:.9rem;margin:0 0 20px;
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.data th{background:var(--soft);text-align:left;font-weight:800;font-size:.8rem;padding:10px}
.data td{border-top:1px solid var(--line);padding:10px;vertical-align:top}

/* ---- operator review cards ---------------------------------------------- */
.op-card{display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:12px;padding:16px 18px;margin:0 0 14px;background:#fff}
.op-card .op-logo{max-height:52px;flex:0 0 auto}
.op-card .op-body{flex:1;min-width:0}
.op-card h3{margin:0 0 6px}
.op-card .op-bonus{display:inline-block;background:linear-gradient(95deg,#ffd84d,#f5a623);
  color:#3f2c00;font-weight:800;font-size:.94rem;padding:5px 11px;border-radius:8px;margin:2px 0 6px}
.op-card .op-meta{font-size:.82rem;color:var(--muted)}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:14px 0 24px}
.proscons h4{margin:0 0 6px;font-size:.82rem;text-transform:uppercase;letter-spacing:.05em}
.pros h4{color:var(--good)} .cons h4{color:var(--bad)}
.proscons ul{margin:0;padding-left:18px;font-size:.9rem}

/* ---- grids + cards + callouts ------------------------------------------- */
.grid{display:grid;gap:14px;margin:0 0 22px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:1fr 1fr 1fr}
.card{background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:16px}
.card h4{margin:0 0 6px}
.card a{font-weight:700}
.callout{border:1px solid var(--line);border-left:4px solid var(--accent);background:var(--soft);
  border-radius:10px;padding:16px 18px;margin:0 0 22px;font-size:.95rem}
.callout.warn{border-left-color:#e0a13a;background:#fdf7ec}
.callout.tax{border-left-color:#2c74d6;background:#eef4fd}
.rg-block{border:1px solid var(--line);border-radius:12px;background:var(--soft);padding:18px 20px;margin:26px 0}
.rg-block h3{margin:0 0 8px}
.author-avatar{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid var(--ink);background:#fff;flex:0 0 auto}

/* ---- FAQ ----------------------------------------------------------------- */
.faq details{border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:0 0 8px;background:#fff}
.faq summary{font-weight:700;cursor:pointer;font-size:.98rem;font-family:var(--sans)}
.faq summary::-webkit-details-marker{color:var(--accent)}
.faq details[open]{border-color:var(--accent)}

/* ---- footer -------------------------------------------------------------- */
.foot{background:var(--ink);color:#e7ecf2;margin-top:40px;padding:36px 0 26px}
.foot a{color:#e6c9e2}
.mega{font-family:var(--sans);font-weight:800;letter-spacing:-.04em;color:#31363d;line-height:.9;
  margin:0 0 22px;overflow:hidden}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:26px}
.foot-grid h4{color:#fff;font-size:.86rem}
.foot-grid a{display:block;font-size:.86rem;margin:0 0 5px;color:#cfd6de}
.foot-grid a:hover{color:#fff}
.foot-grid p{font-size:.84rem;color:#aeb7c0}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.badges span{font-size:.66rem;font-weight:700;color:#c4ccd6;border:1px solid #3a4048;border-radius:6px;padding:3px 8px}
.foot-legal{border-top:1px solid #363c44;margin-top:24px;padding-top:18px}
.foot-legal p{font-size:.76rem;color:#9aa3ad;margin:0 0 8px}
.foot-legal a{color:#e6c9e2}

/* ---- responsive ---------------------------------------------------------- */
@media(max-width:960px){
  .nav-links{position:fixed;top:0;right:0;height:100vh;width:min(88vw,360px);background:#fff;
    flex-direction:column;align-items:stretch;gap:0;padding:70px 18px 24px;overflow-y:auto;
    box-shadow:-14px 0 40px rgba(15,23,42,.18);transform:translateX(100%);transition:.2s;z-index:55}
  .nav-links.open{transform:translateX(0)}
  .burger{display:block}
  .nav-item{border-bottom:1px solid var(--line)}
  .nav-row{justify-content:space-between}
  .caret{display:block}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;
    padding:0 0 10px 10px;min-width:0;display:none}
  .submenu--wide{min-width:0}
  .nav-item.open .submenu{display:block}
  .nav-item:hover .submenu{opacity:1}
  .submenu-cols{flex-direction:column;gap:10px}
  .state-grid{grid-template-columns:1fr 1fr}
  .join-btn{margin:10px 0 0;text-align:center}
}
@media(max-width:768px){
  /* Mobile above-the-fold: keep the H1, the author + "updated" byline, the toplist
     H2, and the top of the affiliate comparison table visible without scrolling.
     The hero is compressed and the breadcrumb + lead intro are hidden to free the fold. */
  .hero{padding:16px 0 12px}
  .home .hero{padding:18px 0 14px}
  .hero .breadcrumb{display:none}
  .hero h1{font-size:1.42rem;line-height:1.16;margin-bottom:8px}
  .home .hero h1{font-size:1.5rem}
  .hero h1::after{margin-top:9px;height:3px;width:54px}
  .hero-meta{font-size:.78rem;margin-bottom:6px}          /* author + updated stays visible */
  .hero .lead,.home .hero .lead{display:none}             /* free the fold for the table */
  main.container{padding-top:6px}
  main.container>h2:first-of-type{margin-top:2px;padding-top:0;font-size:1.16rem}
  main.container>h2:first-of-type+p{margin-bottom:12px;font-size:.9rem}

  /* ---- affiliate table → stacked operator CARDS on mobile ---------------- */
  .tbl-scroll{overflow:visible;border:0;border-radius:0;margin-bottom:18px}
  .op-table{min-width:0;width:100%;border:0;font-size:1rem}
  .op-table thead{display:none}
  .op-table tbody,.op-table tr,.op-table td{display:block;width:auto}
  .op-table tr{position:relative;border:2px solid var(--accent);border-radius:16px;background:#fff;
    padding:20px 16px 16px;margin:0 0 16px;text-align:center;box-shadow:0 6px 20px rgba(15,23,42,.07)}
  .op-table tbody tr:nth-child(even) td,.op-table tbody tr:hover td{background:transparent}
  .op-table td{border:0;padding:3px 0;color:var(--muted);font-size:.92rem}
  /* #1 highlight badge */
  .op-table tbody tr:first-child::before{content:"★ Top pick";position:absolute;top:-11px;left:50%;
    transform:translateX(-50%);background:var(--accent);color:#fff;font-size:.64rem;font-weight:800;
    letter-spacing:.08em;text-transform:uppercase;padding:3px 12px;border-radius:99px}
  /* rank — clean bold magenta numeral in the top-left corner (no circle) */
  .op-table td:first-child{position:absolute;top:10px;left:16px;padding:0;z-index:2}
  .op-table tr .rank-badge,
  .op-table tbody tr:first-child .rank-badge{display:block;width:auto;height:auto;min-width:0;
    background:none;border:0;border-radius:0;box-shadow:none;color:var(--accent);
    font-family:var(--sans);font-size:1.7rem;font-weight:800;line-height:1}
  /* logo — centered plate */
  .op-table td:nth-child(2){display:flex;justify-content:center;margin:8px 0 12px}
  .op-table .op-logo{width:190px;height:76px;object-fit:contain;border:1px solid var(--line);
    border-radius:12px;padding:12px;background:#fff;box-sizing:border-box}
  /* name — large */
  .op-table td:nth-child(3){font-size:1.5rem;font-weight:800;font-family:var(--sans);
    letter-spacing:-.02em;color:var(--ink);margin:0 0 8px}
  /* meta cells (wager, min-dep, payout, interac, licence, rating…) — one muted line */
  .op-table td:nth-child(n+5):not(:last-child){display:inline;font-size:.82rem;color:var(--muted)}
  .op-table td:nth-child(n+6):not(:last-child)::before{content:"·";margin:0 5px;color:var(--line)}
  .op-table .check{color:var(--good)}
  .op-table .rating{display:inline;margin:0;padding:1px 7px;font-size:.78rem}
  /* bonus (always column 4) — big in-your-face pill (beats zebra + hover) */
  .op-table td:nth-child(4),
  .op-table tbody tr:nth-child(even) td:nth-child(4),
  .op-table tbody tr:hover td:nth-child(4){background:linear-gradient(95deg,#ffd23f,#f59e0b);
    color:#3f2c00;font-weight:800;font-size:1.06rem;line-height:1.3;border-radius:12px;
    padding:14px 16px;margin:12px 0;box-shadow:0 4px 14px rgba(245,158,11,.45);border:1px solid #f0a93a}
  /* CTA (last column) — full-width button */
  .op-table td:last-child{margin-top:8px;padding:0}
  .op-table td:last-child .btn{display:block;width:100%;padding:15px;font-size:1.06rem;border-radius:12px}
}
@media(max-width:720px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr}
  .proscons{grid-template-columns:1fr}
  .disc-full{display:none}.disc-short{display:inline}
  /* keep the top responsible-gambling bar on ONE line */
  .disclosure{flex-wrap:nowrap;white-space:nowrap;gap:6px;font-size:.62rem;line-height:1.5;
    overflow-x:auto;-webkit-overflow-scrolling:touch}
  .disclosure .age{flex:0 0 auto;font-size:.6rem;padding:1px 6px}
  .disc-short{white-space:nowrap}
}
@media(max-width:520px){
  .foot-grid{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
}