/* viva-media.ca — identity v2 components: brutalist table, cards, callouts, footer. */
main.container{padding-top:26px;padding-bottom:44px}
main.container>h2,main.container>h3,main.container>p,main.container>.toc,main.container>.grid,main.container>.proscons,main.container>.op-card,main.container>table,main.container>.callout,main.container>.rg-block,main.container>.faq,main.container>.author,main.container>.section{max-width:850px;margin-left:auto;margin-right:auto}
main.container>.tbl-scroll{max-width:1160px}
main.container>.section>*{max-width:none}
h2{font-size:clamp(24px,3.1vw,33px);margin:1.7em auto .5em;scroll-margin-top:130px;position:relative}
h2:after{content:"";display:block;width:70px;height:6px;background:var(--cta);margin-top:12px;box-shadow:3px 3px 0 var(--ink)}
h3{font-size:clamp(19px,2.3vw,23px);margin:1.4em 0 .4em;scroll-margin-top:130px}
p{margin:0 0 1.05em}
ul,ol{margin:0 0 1.1em;padding-left:1.3em;max-width:850px;margin-left:auto;margin-right:auto}
li{margin:.35em 0}
li::marker{color:var(--violet-d);font-weight:700}
.section{padding:0}
main.container>.section{max-width:850px}
.section.wrap.narrow{max-width:850px;padding:0;margin-left:auto;margin-right:auto}
strong{color:var(--ink)}

/* ── comparison table (bordered, offset shadow, violet header) ── */
.tbl-scroll{overflow-x:auto;border:var(--bd);border-radius:var(--radius);box-shadow:var(--sh);margin:22px auto 12px;background:var(--card)}
.op-table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:860px;background:var(--card)}
.op-table thead th{background:var(--violet);color:#fff;font-weight:800;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;padding:12px 12px;text-align:left;white-space:nowrap;border-bottom:2px solid var(--ink)}
.op-table tbody td{padding:14px 12px;border-bottom:2px solid var(--soft);vertical-align:middle}
.op-table tbody tr:last-child td{border-bottom:0}
.op-table tbody tr:nth-child(even) td{background:var(--violet-soft)}
.op-table tbody tr:hover td{background:#fff7ee}
.rank-badge{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:2px solid var(--ink);border-radius:8px;background:var(--card);font-weight:800;color:var(--ink);font-size:.9rem}
.rank-badge.top{background:var(--cta);color:#fff}
.op-logo{width:210px;height:74px;object-fit:contain;background:#fff;border:2px solid var(--ink);border-radius:8px;padding:8px}
.op-wordmark{display:inline-flex;align-items:center;justify-content:center;width:210px;height:74px;background:var(--ink);color:var(--gold);border-radius:8px;font-weight:800;font-size:1rem;text-align:center;padding:6px}
.op-table thead th:nth-child(2){min-width:210px}
.op-bonus{font-weight:700;color:var(--ink)}
.code-tag{display:inline-block;margin-top:4px;font-size:.7rem;background:var(--gold);color:var(--ink);border:1.5px solid var(--ink);border-radius:5px;padding:1px 7px;font-weight:800}
.check{color:var(--green);font-weight:800;text-align:center}
.rating{display:inline-block;background:var(--gold);color:var(--ink);font-weight:800;border:2px solid var(--ink);border-radius:7px;padding:3px 9px;font-size:.82rem;font-variant-numeric:tabular-nums}
.btn{display:inline-block;background:var(--cta);color:#fff;font-weight:800;padding:10px 16px;border:2px solid var(--ink);border-radius:9px;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;text-align:center;box-shadow:var(--sh-sm);transition:transform .08s,box-shadow .08s,background .15s}
.btn:hover{background:var(--cta-d);color:#fff;text-decoration:none;transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.offshore-note{font-size:.78rem;color:var(--muted);max-width:1160px;margin:10px auto 0}

/* ── operator cards (mobile view of the affiliate table) ── */
.op-cards{display:none}
.op-c{position:relative;background:var(--card);border:2px solid var(--violet);border-radius:18px;padding:26px 18px 18px;box-shadow:var(--sh);text-align:center}
.op-c-rank{position:absolute;top:14px;left:16px;font-size:1.9rem;font-weight:800;color:var(--violet);line-height:1}
.op-c-badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--violet);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:6px 16px;border-radius:999px;white-space:nowrap;box-shadow:3px 3px 0 var(--ink)}
.op-c-logo{margin:12px auto 12px;width:186px;height:104px;border:1.5px solid var(--soft);border-radius:14px;display:flex;align-items:center;justify-content:center;padding:14px;background:#fff}
.op-c-logoimg{max-width:100%;max-height:100%;object-fit:contain}
.op-c-wordmark{font-weight:800;color:var(--ink);font-size:1rem}
.op-c-name{font-size:1.55rem;font-weight:800;color:var(--ink);margin:2px 0 15px}
.op-c-bonus{background:linear-gradient(180deg,#f7c34f 0%,#e59a1d 100%);color:#3a2a06;font-weight:800;font-size:1.08rem;line-height:1.32;border-radius:14px;padding:17px 16px;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.op-c-meta{color:var(--muted);font-size:.88rem;line-height:1.55;margin:15px 6px}
.op-c-btn{display:block;background:var(--violet);color:#fff;font-weight:800;font-size:1.12rem;padding:15px;border-radius:14px;box-shadow:0 4px 12px rgba(109,40,217,.28)}
.op-c-btn:hover{background:var(--violet-d);color:#fff;text-decoration:none}
.op-c-btn:active{transform:translateY(1px)}

/* ── table of contents ── */
.toc{background:var(--violet-soft);border:var(--bd);border-radius:var(--radius);box-shadow:var(--sh-sm);padding:16px 20px;margin:22px auto}
.toc strong{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--violet-d);margin-bottom:8px}
.toc ol{columns:2;column-gap:28px;margin:0;padding-left:1.2em;font-size:.9rem;max-width:none}
@media(max-width:640px){.toc ol{columns:1}}

/* ── data tables ── */
table.data{width:100%;border-collapse:collapse;margin:16px auto;font-size:.9rem;border:var(--bd);box-shadow:var(--sh-sm);background:var(--card)}
table.data th,table.data td{border-bottom:2px solid var(--soft);padding:10px 12px;text-align:left}
table.data th{background:var(--violet);color:#fff;font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em}
table.data tr:nth-child(even) td{background:var(--violet-soft)}
table.data tr:last-child td{border-bottom:0}

/* ── operator review cards ── */
.op-card{display:flex;align-items:center;gap:16px;border:var(--bd);border-radius:var(--radius);padding:15px 17px;margin:18px auto;background:var(--card);box-shadow:var(--sh)}
.op-card .op-logo{flex-shrink:0}
.op-card .op-body{flex:1}
.op-card h3{margin:.1em 0 .35em}
.op-card .op-bonus{font-size:.95rem;color:var(--cta-d);font-weight:700}
.op-card .op-meta{font-size:.82rem;color:var(--muted)}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px auto;max-width:850px}
.proscons h4{margin:0 0 6px}
.pros,.cons{border:var(--bd);border-radius:var(--radius);padding:13px 16px;box-shadow:var(--sh-sm)}
.pros{background:#effaf1}.cons{background:#fdf0ec}
.proscons ul{margin:0;padding-left:1.1em;max-width:none}
@media(max-width:640px){.proscons{grid-template-columns:1fr}}

/* ── grids / cards ── */
.grid{display:grid;gap:16px;margin:18px auto;max-width:850px}
.grid-2{grid-template-columns:1fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:var(--bd);border-radius:var(--radius);padding:15px 17px;box-shadow:var(--sh-sm)}
.card h4{margin:0 0 6px}
.card p{margin:0;font-size:.9rem;color:var(--body)}
@media(max-width:720px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.grid-2,.grid-3{grid-template-columns:1fr}}

/* ── callouts ── */
.callout{border:var(--bd);background:#fffbe9;border-radius:var(--radius);box-shadow:var(--sh-sm);padding:16px 18px;margin:20px auto;max-width:850px;border-left:8px solid var(--gold)}
.callout.info{background:var(--violet-soft);border-left-color:var(--violet)}
.callout.warn{background:#fdece7;border-left-color:var(--cta)}
.callout.tax{background:#e9f8ee;border-left-color:var(--green)}
.callout p:last-child{margin:0}
.factbox{background:var(--card);border:var(--bd);border-radius:var(--radius);box-shadow:var(--sh-sm);padding:6px 20px;margin:20px auto;max-width:850px}
.factbox dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:14px 0}
.factbox dt{font-weight:800;color:var(--violet-d);font-size:.86rem}
.factbox dd{margin:0;font-size:.9rem}

/* ── responsible gambling block ── */
.rg-block{background:var(--ink);color:#e9e2d2;border:var(--bd);border-radius:var(--radius);box-shadow:var(--sh);padding:20px 22px;margin:26px auto;max-width:850px}
.rg-block h3{color:var(--gold);margin:0 0 6px}
.rg-block a{color:var(--gold);font-weight:700}
.rg-block p{margin:0}

/* ── author box ── */
.author{display:flex;gap:14px;align-items:center;background:var(--violet-soft);border:var(--bd);border-radius:var(--radius);box-shadow:var(--sh-sm);padding:14px 16px;margin:26px auto;max-width:850px}
.author img{width:52px;height:52px;border:2px solid var(--ink);border-radius:10px;flex-shrink:0;background:var(--ink);object-fit:cover}
.author .n{font-weight:800;color:var(--ink)}
.author .b{font-size:.82rem;color:var(--body)}

/* ── FAQ ── */
.faq details{border:var(--bd);border-radius:var(--radius);margin:12px auto;background:var(--card);max-width:850px;box-shadow:var(--sh-sm)}
.faq summary{cursor:pointer;font-weight:800;color:var(--ink);padding:14px 16px;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:"+";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;background:var(--cta);color:#fff;border-radius:5px;font-weight:800;margin-right:10px;font-size:.9rem}
.faq details[open] summary:before{content:"–";background:var(--violet)}
.faq details>p{padding:0 16px 14px;margin:0;color:var(--body);max-width:none}

/* ── footer ── */
.foot{background:var(--ink);color:#c9c2b2;margin-top:44px;overflow:hidden;border-top:6px solid var(--violet)}
.foot .wrap{padding:34px 22px 26px}
.foot .mega{font-weight:800;letter-spacing:-.04em;color:rgba(232,181,58,.08);line-height:.85;margin:0 0 -4px;user-select:none;text-transform:uppercase}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:30px;padding:16px 0 22px;border-top:2px solid rgba(255,255,255,.12);border-bottom:2px solid rgba(255,255,255,.12)}
.foot-grid h4{color:var(--gold);font-size:.76rem;text-transform:uppercase;letter-spacing:.09em;margin:0 0 10px}
.foot-grid a{display:block;color:#c9c2b2;font-size:.85rem;margin-bottom:7px}
.foot-grid a:hover{color:#fff}
.foot-grid p{font-size:.84rem;color:#9d968a;line-height:1.6}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.badges span{background:transparent;border:1.5px solid rgba(232,181,58,.4);color:var(--gold);border-radius:6px;padding:4px 9px;font-size:.72rem;font-weight:700}
.foot-legal{padding-top:16px}
.foot-legal p{font-size:.76rem;color:#8f887c;margin:0 0 8px;max-width:none}
.foot-legal strong{color:#c9c2b2}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.foot-grid{grid-template-columns:1fr}}

/* ── mobile: pull the ranked table up to the fold ── */
@media(max-width:640px){
  main.container{padding-top:12px}
  main.container>h2:first-child,#ranked{margin-top:.2em;font-size:22px}
  #ranked:after{margin-top:8px;width:56px;height:5px}
  .tbl-intro{display:none}
  .tbl-scroll{display:none}                 /* hide the table on mobile … */
  .op-cards{display:grid;gap:22px;margin:16px auto 14px;max-width:430px}  /* … show cards instead */
  .offshore-note{display:none}
}

/* ── mini-review cards ── */
.rev-card{background:var(--card);border:var(--bd);border-radius:var(--radius);box-shadow:var(--sh);padding:24px 26px 20px;margin:28px auto}
.rev-card h3{margin:.1em 0 .9em;font-size:clamp(20px,2.4vw,24px);line-height:1.25}
.rev-card h3:after{content:"";display:block;width:52px;height:4px;background:var(--cta);margin-top:10px}
.rev-card .rev-logo{width:210px;height:74px;object-fit:contain;background:#fff;border:2px solid var(--ink);border-radius:10px;padding:8px;display:block;margin-bottom:14px}
.rev-card h4{font-size:.76rem;text-transform:uppercase;letter-spacing:.09em;color:var(--violet-d);margin:1.6em 0 .55em;padding-bottom:6px;border-bottom:2px solid var(--soft)}
.rev-card .proscons{margin:10px auto 6px}
.rev-card .proscons h4{border-bottom:0;margin:0 0 6px;padding-bottom:0}
.rev-card .pros h4{color:var(--green)}
.rev-card .cons h4{color:var(--cta-d)}
.rev-card ul{max-width:none}
.rev-card li{margin:.3em 0}
.rev-card .btn{margin-top:8px}
.rev-card p:has(.btn){margin:14px 0 0}
.rev-card small{color:var(--muted)}
@media(max-width:640px){.rev-card{padding:18px 16px 14px;margin:20px auto}.rev-card .rev-logo{width:180px;height:64px}}

/* ════ identity v3 — "luxury minimal" reskin (token swap + overrides) ════
   Warm-white canvas, near-black ink, hairline borders, square corners,
   soft depth, Playfair Display for headings, oxblood reserved for CTAs. */
@font-face{font-family:'Playfair Display';src:url('/fonts/playfair-latin.woff2') format('woff2');font-weight:500 700;font-display:swap}
:root{
  --ink:#141414; --body:#2e2c29; --muted:#8a857c; --soft:#e6e2da; --bg:#faf9f6; --card:#ffffff;
  --violet:#141414; --violet-d:#141414; --violet-soft:#f4f1ea;
  --cta:#8a1e2d; --cta-d:#6e1824; --gold:#b89a5a; --green:#2e6b4f;
  --bd:1px solid var(--soft); --sh:0 12px 34px rgba(20,20,20,.07); --sh-sm:0 4px 16px rgba(20,20,20,.05);
  --radius:0px;
}
h1,h2,h3,.hero-pick-name,.op-c-name{font-family:'Playfair Display','Space Grotesk',serif;font-weight:600;letter-spacing:0}
h4{letter-spacing:.02em}
h2:after{width:38px;height:2px;background:var(--cta);box-shadow:none;margin-top:14px}
.rev-card h3:after{width:38px;height:2px}
/* buttons: square, quiet, letter-spaced */
.btn,.join-btn,.hero-pick-btn,.op-c-btn{border-radius:0;box-shadow:none;letter-spacing:.14em;font-weight:600}
.btn{border:1px solid var(--cta)}
.btn:hover{transform:none;box-shadow:none}
.btn:active{transform:none;box-shadow:none}
.hero-pick-btn:hover{transform:none;box-shadow:none}
.join-btn{border:1px solid rgba(255,255,255,.5)}
/* hero: solid ink editorial, no aurora/dots/stripe */
.hero{background:var(--ink);border-bottom:1px solid #2a2a2a}
.hero:before{display:none}
.hero:after{height:2px;background:var(--cta)}
.hero h1{text-shadow:none;font-weight:600}
.hero-meta{background:transparent;border:1px solid rgba(255,255,255,.35);box-shadow:none;font-weight:500}
.hero-btn{border:1px solid #fff;box-shadow:none}
.hero-btn:hover{box-shadow:none}
.lead{font-weight:400;color:rgba(255,255,255,.86)}
.hero-pick{transform:none;border-radius:0;box-shadow:var(--sh);padding-top:38px}
.hero-pick-badge{border-radius:0;box-shadow:none;border:0;letter-spacing:.16em;font-weight:600}
.hero-pick-logo{border-radius:0}
.hero-pick-bonus{background:#f3ebdb;border:1px solid var(--soft);border-radius:0;color:#3a2f16;font-weight:700}
.hero-marquee{border-top:1px solid #2a2a2a}
.hero-marquee-track span{color:var(--gold);font-weight:500;letter-spacing:.22em}
/* header */
.hdr{border-bottom:1px solid #2a2a2a}
.nav-top{letter-spacing:.1em;font-weight:500}
.nav-top:hover{background:transparent;color:var(--gold);text-decoration:none}
/* tables: ink headers, hairlines, calm zebra */
.op-table thead th{border-bottom:1px solid var(--ink);letter-spacing:.12em;font-weight:600}
.op-table tbody td{border-bottom:1px solid var(--soft)}
.op-table tbody tr:hover td{background:#f7f4ed}
table.data th{letter-spacing:.1em;font-weight:600}
table.data th,table.data td{border-bottom:1px solid var(--soft)}
.rank-badge{border:1px solid var(--ink);border-radius:0}
.rank-badge.top{background:var(--ink);color:var(--gold)}
.op-logo,.rev-logo,.rev-card .rev-logo{border:1px solid var(--soft);border-radius:0}
.rating{background:transparent;border:1px solid var(--gold);color:#7c6730;border-radius:0;font-weight:700}
.code-tag{border-radius:0;border:1px solid var(--ink)}
/* cards & blocks */
.op-c{border:1px solid var(--soft);border-radius:0}
.op-c-rank{color:var(--muted)}
.op-c-badge{background:var(--ink);color:var(--gold);box-shadow:none;border-radius:0;letter-spacing:.16em}
.op-c-logo{border-radius:0}
.op-c-bonus{background:#f3ebdb;color:#3a2f16;border-radius:0;box-shadow:none;border:1px solid var(--soft)}
.op-c-btn{background:var(--cta);border-radius:0;box-shadow:none}
.op-c-btn:hover{background:var(--cta-d)}
.pros{background:#f5f7f3}.cons{background:#f9f1ef}
.callout{border-left:2px solid var(--gold)}
.callout.info{border-left-color:var(--ink)}
.callout.warn{border-left-color:var(--cta)}
.faq summary:before{border-radius:0}
.author img{border:1px solid var(--soft);border-radius:0}
/* footer */
.foot{border-top:1px solid #2a2a2a}
.foot .mega{color:rgba(184,154,90,.1)}

/* ── v3.1 — navy & cream hero with deco line ornament ── */
.hero{color:#f6f0e1;border-bottom:1px solid rgba(243,236,221,.18);
  background:
    radial-gradient(90% 150% at 82% 8%, rgba(49,66,128,.85), transparent 62%),
    radial-gradient(70% 120% at 8% 110%, rgba(18,26,61,.9), transparent 65%),
    linear-gradient(160deg,#16204a 0%,#1f2b5e 55%,#263569 100%)}
.hero:before{display:block;-webkit-mask-image:none;mask-image:none;opacity:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='760' viewBox='0 0 760 760'%3E%3Cg fill='none' stroke='%23f3ecdd' stroke-opacity='.11'%3E%3Ccircle cx='380' cy='380' r='110'/%3E%3Ccircle cx='380' cy='380' r='170'/%3E%3Ccircle cx='380' cy='380' r='230'/%3E%3Ccircle cx='380' cy='380' r='290'/%3E%3Ccircle cx='380' cy='380' r='350'/%3E%3Cpath d='M380 10v740M10 380h740M118 118l524 524M642 118L118 642' stroke-opacity='.06'/%3E%3C/g%3E%3Ccircle cx='380' cy='380' r='200' fill='none' stroke='%23b89a5a' stroke-opacity='.25'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:760px 760px;background-position:calc(100% + 200px) center}
.hero:after{background:var(--gold)}
.hero .breadcrumb,.hero .breadcrumb a{color:rgba(246,240,225,.58)}
.hero .breadcrumb a:hover{color:#f8f3e6}
.hero h1{color:#f8f3e6}
.hero .lead{color:rgba(246,240,225,.88)}
.hero-meta{border-color:rgba(246,240,225,.4);color:#f6f0e1;background:transparent}
.hero-meta a{color:var(--gold)}
.hero-age{color:rgba(246,240,225,.7)}
.hero-btn{background:#f3ecdd;color:#1f2b5e;border:1px solid #f3ecdd}
.hero-btn:hover{background:#fff;color:#16204a}
.hero-marquee{background:#121a3d;border-top:1px solid rgba(243,236,221,.14)}
/* cream pick card on the navy field */
.hero-pick{background:#faf5ea;border:1px solid rgba(31,43,94,.18);box-shadow:0 24px 60px rgba(10,15,40,.45)}
.hero-pick-badge{background:#1f2b5e;color:#f3ecdd}
.hero-pick-name{color:#1f2b5e}
.hero-pick-logo{border-color:#e7dfcc;background:#fff}
.hero-pick-bonus{background:#fff;border:1px solid #e3d9bf;color:#4a3b14}
.hero-pick-meta{color:#7d7663}
/* integrate the bands above and below so navy reads as the brand field */
.disclosure{background:#121a3d}
.hdr{background:#16204a;border-bottom:1px solid rgba(243,236,221,.14)}
.foot{background:#16204a;border-top:1px solid rgba(243,236,221,.14)}
.foot .mega{color:rgba(243,236,221,.07)}
@media(max-width:640px){.hero:before{display:none}}

/* ── v3.2 — hero pick card as a luxury bonus ticket ── */
.hero-pick{padding:40px 26px 26px;overflow:visible}
.hero-pick::after{content:"";position:absolute;inset:9px;border:1px solid rgba(184,154,90,.5);pointer-events:none}
.hero-pick-badge{top:-13px;padding:8px 20px;font-size:.68rem;letter-spacing:.22em;z-index:1}
.hero-pick-logo{width:100%;max-width:230px;height:84px;margin:2px auto 14px;border:0;background:#fff;box-shadow:0 6px 20px rgba(31,43,94,.1);padding:12px}
.hero-pick-name{display:flex;align-items:center;gap:14px;margin:0 2px 6px;font-size:1.5rem}
.hero-pick-name::before,.hero-pick-name::after{content:"";height:1px;background:#d9cfb4;flex:1}
.hero-pick-name span{white-space:nowrap}
.hero-pick-stars{color:var(--gold);font-size:.95rem;letter-spacing:.3em;margin:0 0 16px}
.hero-pick-stars b{color:#1f2b5e;font-size:.8rem;letter-spacing:0;margin-left:10px;vertical-align:1px}
.hero-pick-bonus{position:relative;margin:0 2px;padding:20px 14px 15px;font-size:1.02rem}
.hp-label{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:#faf5ea;color:#1f2b5e;font-size:.62rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;padding:0 12px;white-space:nowrap}
.hero-pick-meta{font-size:.8rem;letter-spacing:.04em;margin:13px 4px 0}
.hero-pick-meta i{font-style:normal;color:var(--gold);font-size:.7rem;padding:0 4px}
.hero-pick-perf{position:relative;height:0;border-top:2px dashed #d9cfb4;margin:18px -26px 18px}
.hero-pick-perf::before,.hero-pick-perf::after{content:"";position:absolute;top:-9px;width:18px;height:18px;border-radius:50%;background:#1d2a5c;box-shadow:inset 0 2px 4px rgba(10,15,40,.5)}
.hero-pick-perf::before{left:-10px}
.hero-pick-perf::after{right:-10px}
.hero-pick-btn{box-shadow:0 12px 28px rgba(138,30,45,.35);padding:15px;font-size:.92rem}
.hero-pick-btn:hover{box-shadow:0 12px 28px rgba(138,30,45,.45)}
.hp-age{display:block;margin-top:12px;color:#9a937f;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}

/* ── v3.3 — bonuses loud: gold-lit, biggest thing in every row ── */
.op-table tbody tr td.op-bonus{background:linear-gradient(180deg,#fdf6e3,#f5e8c8);border-left:3px solid var(--gold);border-right:1px solid #eadfc2;font-size:1.02rem;font-weight:800;color:#4a3a0c;line-height:1.35;min-width:230px}
.op-table tbody tr:nth-child(even) td.op-bonus,.op-table tbody tr:hover td.op-bonus{background:linear-gradient(180deg,#fdf6e3,#f3e4bf)}
table.data td.qb-bonus{background:#faf2dc;font-weight:800;color:#4a3a0c;border-left:2px solid var(--gold)}
table.data tr:nth-child(even) td.qb-bonus{background:#f7edd2}
.op-c-bonus{background:linear-gradient(180deg,#fdf4dd,#f2e1b6);border:1px solid var(--gold);color:#3f3108;font-size:1.22rem;font-weight:800;box-shadow:0 8px 24px rgba(184,154,90,.3)}
.hero-pick-bonus{background:linear-gradient(180deg,#fff9e8,#f6ead0);border:1px solid var(--gold);color:#3f3108;font-size:1.18rem;font-weight:800;line-height:1.35;box-shadow:0 10px 30px rgba(184,154,90,.28)}
.hero-pick-bonus .hp-label{background:#faf5ea;color:#8a1e2d}
.rev-card .bonus-hl{list-style:none;background:linear-gradient(180deg,#fdf6e3,#f6ebcd);border:1px solid #e6d7ac;border-left:3px solid var(--gold);padding:14px 16px;margin:.8em 0 .9em -1.3em;font-size:1.02rem;line-height:1.55}
.rev-card .bonus-hl b{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.2em;color:#8a6d1f;margin-bottom:4px}

/* ── v3.4 — mobile operator cards: navy header, chips, dashed bonus ticket ── */
.op-m{position:relative;background:var(--card);border:1px solid var(--soft);box-shadow:var(--sh-sm);text-align:center}
.op-m.top{border-color:var(--gold);margin-top:12px}
.op-m-choice{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:#faf5ea;border:1px solid var(--gold);color:#8a1e2d;font-size:.64rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;padding:5px 16px;z-index:1;white-space:nowrap}
.op-m-head{display:flex;align-items:center;gap:10px;background:#1f2b5e;color:#f6f0e1;padding:13px 14px}
.op-m-rank{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#f6f0e1;color:#1f2b5e;font-weight:800;font-size:.88rem;flex-shrink:0}
.op-m-name{font-family:'Playfair Display','Space Grotesk',serif;font-size:1.3rem;font-weight:600;flex:1;text-align:left;line-height:1.1}
.op-m-rate{border:1px solid var(--gold);color:var(--gold);font-weight:700;font-size:.8rem;padding:4px 9px;white-space:nowrap}
.op-m-body{padding:18px 14px;display:flex;flex-direction:column;gap:13px;align-items:center}
.op-m-logo{width:200px;height:84px;background:#fff;border:1px solid var(--soft);display:flex;align-items:center;justify-content:center;padding:10px}
.op-m-logo img{max-width:100%;max-height:100%;object-fit:contain;width:auto;height:auto}
.op-m-feature{background:#f4f1ea;color:#1f2b5e;font-weight:600;font-size:.82rem;line-height:1.35;padding:7px 14px;border:1px solid var(--soft);max-width:100%}
.op-m-chips{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.op-m-chips span{background:#f4f1ea;border:1px solid var(--soft);color:#5c564a;font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:5px 10px}
.op-m-bonus{position:relative;width:100%;border:2px dashed var(--gold);background:#fffaf0;padding:20px 12px 15px;font-size:1.18rem;font-weight:800;color:#8a1e2d;line-height:1.3;margin-top:4px}
.op-m-bonus .lbl{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:#fff;color:#8a6d1f;font-size:.62rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;padding:0 10px;white-space:nowrap}
.op-m-btn{display:block;width:100%;background:var(--cta);color:#fff;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.95rem;padding:15px;box-shadow:0 10px 26px rgba(138,30,45,.3)}
.op-m-btn:hover{background:var(--cta-d);color:#fff;text-decoration:none}
.op-m-age{color:var(--muted);font-size:.66rem;letter-spacing:.07em;text-transform:uppercase}
.op-m-review{color:var(--body);text-decoration:underline;font-size:.86rem;text-underline-offset:3px}

/* ── v3.5 — desktop affiliate table as separated card rows ── */
.tbl-scroll{border:0;box-shadow:none;background:transparent;border-radius:0}
.op-table{border-collapse:separate;border-spacing:0 14px;background:transparent;min-width:880px;font-size:.92rem}
.op-table thead th{background:#1f2b5e;color:#f6f0e1;border-bottom:0;padding:13px 14px;letter-spacing:.14em;font-weight:600}
.op-table thead th.th-note{background:var(--gold);color:#1f2b5e}
.op-table tbody td,.op-table tbody tr:nth-child(even) td,.op-table tbody tr:hover td{background:#fff}
.op-table tbody td{border-top:1px solid var(--soft);border-bottom:1px solid var(--soft);padding:18px 14px;vertical-align:middle}
.op-table tbody td:first-child{border-left:1px solid var(--soft)}
.op-table tbody td:last-child{border-right:1px solid var(--soft)}
.op-table tbody tr:hover td{background:#fcfaf4}
.op-table tbody tr:last-child td{border-bottom:1px solid var(--soft)}
.t-rank{font-weight:800;color:#8a1e2d;font-size:1.05rem;text-align:center;width:44px}
.t-casino{white-space:nowrap}
.t-logo{width:150px;height:56px;object-fit:contain;border:1px solid var(--soft);background:#fff;padding:6px;vertical-align:middle;margin-right:14px}
.t-casino b{font-size:1.04rem;color:var(--ink);vertical-align:middle}
.t-bonuscell{min-width:280px}
.t-bonus{position:relative;border:2px dashed var(--gold);background:#fffaf0;padding:16px 14px 11px;font-weight:800;color:#8a1e2d;font-size:.97rem;line-height:1.4;text-align:left}
.t-bonus .lbl{position:absolute;top:-8px;left:12px;background:#fff;color:#8a6d1f;font-size:.6rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;padding:0 8px;white-space:nowrap}
.t-wager{text-align:center;font-weight:600;color:var(--body);min-width:74px}
.t-rating{text-align:center;font-weight:800;color:#8a1e2d;font-size:1.08rem;min-width:64px}
.t-cta{text-align:center}
.t-cta .btn{padding:12px 20px}

/* ── v3.5.1 fix — casino cell: logo stacked over name, no overlap with bonus box ── */
.t-casino{white-space:normal;min-width:190px;max-width:220px}
.t-logo{display:block;margin:0 0 8px}
.t-casino b{display:block;white-space:normal;line-height:1.25}
.t-bonuscell{min-width:300px;width:38%}
.t-wager{white-space:nowrap}

/* ── v3.5.2 — bigger type across the affiliate table ── */
.op-table{font-size:1.05rem}
.op-table thead th{font-size:.82rem;padding:16px 16px}
.op-table tbody td{padding:22px 16px}
.t-rank{font-size:1.5rem}
.t-casino b{font-size:1.25rem}
.t-bonus{font-size:1.18rem;line-height:1.4;padding:20px 16px 14px}
.t-bonus .lbl{font-size:.68rem}
.t-wager{font-size:1.05rem}
.t-rating{font-size:1.45rem}
.t-cta .btn{font-size:.95rem;padding:15px 24px}

/* ── v3.6 — operator homepage screenshots in review cards ── */
.rev-shot{margin:14px 0 6px;border:1px solid var(--soft);box-shadow:var(--sh-sm);background:#fff;padding:6px}
.rev-shot img{display:block;width:100%;height:auto}
.rev-shot figcaption{font-size:.72rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;padding:8px 4px 2px;text-align:center}

/* ── v3.6.1 — breathing room in the mini reviews ── */
.rev-card{padding:36px 40px 32px;margin:40px auto}
.rev-card h3{margin:0 0 1.1em}
.rev-card .rev-logo{margin:6px 0 24px}
.rev-card p{line-height:1.72;margin:0 0 1.35em}
.rev-card h4{margin:2.3em 0 1.05em;padding-bottom:10px}
.rev-card h3 + p + h4,.rev-card .rev-logo + p + h4{margin-top:1.8em}
.rev-card ul{margin:0 0 1.5em}
.rev-card li{margin:.6em 0;line-height:1.68}
.rev-card .bonus-hl{margin:1.2em 0 1.35em -1.3em;padding:17px 20px}
.rev-card .proscons{margin:18px auto 12px;gap:20px}
.rev-card .pros,.rev-card .cons{padding:18px 20px}
.rev-card .btn{margin-top:16px}
.rev-card .rev-shot{margin:20px 0 26px}
@media(max-width:640px){.rev-card{padding:24px 18px 22px;margin:26px auto}}

/* ── v3.6.2 — specificity fix: .section.wrap.narrow{padding:0} was beating .rev-card ── */
.section.wrap.narrow.rev-card{padding:36px 40px 32px}
@media(max-width:640px){.section.wrap.narrow.rev-card{padding:24px 18px 22px}}