:root{--navy:#16224F;--navy-2:#0f1a44;--navy-3:#0a1130;--teal:#00C8C4;--teal-d:#0a8f8c;--gold:#C8A24B;
    --ink:#16224F;--muted:#5b6585;--line:#e7e3d9;--bg:#F4F2EC;--card:#fffdf9;
    --tint:#d4f3f1;--tint-2:#bfecea;--seam:#8ad9d6;
    --font-display:'Anton',Impact,sans-serif;--font-mono:'IBM Plex Mono',ui-monospace,monospace;
    --shadow:0 16px 44px rgba(16,26,69,.10);--shadow-sm:0 5px 16px rgba(16,26,69,.06);}
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
  a{color:var(--teal-d);text-decoration:none}
  .wrap{max-width:1060px;margin:0 auto;padding:0 22px}
  .narrow{max-width:820px}
  /* buttons — squared, confident, no glow */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:13.5px;letter-spacing:.2px;border-radius:7px;padding:13px 22px;border:0;cursor:pointer;transition:.16s}
  .btn-teal{background:var(--teal);color:#062322}
  .btn-teal:hover{background:#15d6d2;transform:translateY(-1px)}
  .btn-navy{background:var(--navy);color:#fff}.btn-navy:hover{background:#1d2e6b;transform:translateY(-1px)}
  /* editorial section headings — no separator (clean Anton headings lead directly) */
  section h2{font-family:var(--font-display);font-size:34px;letter-spacing:.2px;line-height:1.1}
  h3{font-family:var(--font-display);letter-spacing:.3px}

  /* strip + header */
  .strip{background:var(--navy-3);color:#aeb6d6;font-size:12.5px;font-weight:600}
  .strip .wrap{display:flex;justify-content:space-between;align-items:center;height:38px;gap:16px}
  .strip b{color:#fff}.strip .brand-ph{color:#fff}.strip .brand-ph i{color:var(--teal);font-style:normal}
  .strip .right{white-space:nowrap}
  header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .nav{display:flex;align-items:center;gap:18px;height:72px}
  .logo{display:flex;align-items:center;gap:12px;flex:0 0 auto}
  .logo .mark{height:38px}
  .logo .lockup{display:flex;flex-direction:column;gap:4px}
  .logo .tiles{display:flex;gap:5px}
  .logo .t{width:29px;height:29px;border-radius:8px;background:var(--navy);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center}
  .logo .t.teal{background:var(--teal);font-size:11px}
  /* expanded acronym as one italic tagline under the tiles — navy with teal highlighted leading letters */
  .logo .tag{font-size:10.5px;font-style:italic;font-weight:600;letter-spacing:-.2px;line-height:1;white-space:nowrap;color:var(--navy)}
  .logo .tag b{color:var(--teal-d);font-weight:800}
  .nav .market{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:#46527d;white-space:nowrap}
  .nav .market .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px rgba(0,200,196,.18)}
  .nav .vr{width:1px;height:24px;background:var(--line);flex:0 0 1px}
  .nav .cta{white-space:nowrap;padding:10px 18px;flex:0 0 auto}
  .nav .logo{margin-right:auto}
  @media(max-width:560px){.nav .market,.nav .vr{display:none}}
  @media(max-width:430px){
    .nav{gap:10px}.logo .mark{display:none}
    .logo .tiles{gap:4px}.logo .t{width:24px;height:24px;font-size:13px}.logo .t.teal{font-size:9.5px}
    .nav .cta{padding:9px 13px;font-size:12.5px}.navtoggle{width:36px}
  }
  /* desktop-only table-of-contents sidebar (anchored to the left of the centred content) */
  .toc{position:fixed;top:104px;right:calc(50% - 700px);left:auto;width:152px;max-height:calc(100vh - 140px);overflow:auto;display:flex;flex-direction:column;gap:1px;padding-left:15px;border-left:1px solid var(--line);z-index:30;opacity:0;visibility:hidden;transform:translateX(8px);transition:opacity .3s ease,transform .3s ease,visibility .3s}
  .toc.show{opacity:1;visibility:visible;transform:none}
  .toc-h{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);margin-bottom:9px}
  .toc a{font-size:12.5px;color:#5b6585;line-height:1.25;padding:6px 0 6px 15px;margin-left:-15px;border-left:2px solid transparent;transition:color .15s,border-color .15s}
  .toc a:hover{color:var(--navy)}
  .toc a.active{color:var(--teal-d);border-left-color:var(--teal);font-weight:700}
  @media(max-width:1399px){.toc{display:none}}
  section{scroll-margin-top:90px}
  @media(max-width:640px){
    .strip .sfx{display:none}
    .strip .wrap{justify-content:space-between}
    .nav{gap:12px;height:64px}
    .logo .mark{height:34px}
    .logo .t{width:26px;height:26px;font-size:14px}.logo .t.teal{font-size:10px}
    .cta{padding:9px 14px;font-size:13px}
  }

  /* hero */
  .hero{background:var(--navy-2);color:#fff;position:relative;overflow:hidden;border-bottom:3px solid var(--teal);padding:0}
  .hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}
  .hero::before{content:"";position:absolute;right:3%;top:50%;transform:translateY(-50%);width:500px;height:500px;background:url(motif_light.png) no-repeat center/contain;opacity:.045;pointer-events:none}
  .hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) clamp(150px,22vw,312px);gap:clamp(26px,4vw,54px);align-items:center;padding:28px 22px 46px}
  .hero h1{font-family:var(--font-display);font-size:clamp(33px,4.4vw,50px);font-weight:700;letter-spacing:-1px;line-height:1.05;margin:16px 0 16px}
  .hero h1 .hl{color:var(--teal);font-style:italic}
  .hero p{color:#c4cbe6;font-size:16.5px;max-width:482px}
  .hero .hcta{display:flex;align-items:center;gap:20px;margin-top:24px}
  .hero .hcta .txtlink{font-size:13.5px;font-weight:700;color:#fff;border-bottom:1.5px solid var(--teal);padding-bottom:3px}
  .hero .hcta .txtlink:hover{color:var(--teal)}
  /* EEAT byline — editorial credibility strip, bounded by hairline rules */
  /* byline now lives in the hero's left column (where the CTA buttons were) — a tidy 2×2 grid with a hairline cross */
  .byline{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:0;margin-top:26px;border-top:1px solid rgba(255,255,255,.13);border-bottom:1px solid rgba(255,255,255,.13)}
  .byline .who,.byline .meta{padding:14px 0 14px 22px;min-width:0}
  /* index 2x2 grid (4 cells: who|meta / who|meta) — left col flush, vertical divider on right col, horizontal under top row */
  .byline > :nth-child(1){padding-left:0}                                  /* first cell flush (both index + solo) */
  .byline:not(.solo) > :nth-child(3){padding-left:0}                       /* index bottom-left author flush too */
  .byline:not(.solo) > :nth-child(2),.byline:not(.solo) > :nth-child(4){border-left:1px solid rgba(255,255,255,.13)}
  .byline:not(.solo) > :nth-child(1),.byline:not(.solo) > :nth-child(2){border-bottom:1px solid rgba(255,255,255,.13)}
  .byline .who{display:flex;align-items:center;gap:11px}
  .byline .m{display:flex;flex-direction:column}
  .byline .avw{position:relative;flex:0 0 42px;width:42px;height:42px}
  .byline .av{width:42px;height:42px;border-radius:50%;background:linear-gradient(150deg,#2a3f95,#16224F);color:#fff;font-family:var(--font-display);font-weight:700;font-size:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1.5px rgba(200,162,75,.6);object-fit:cover}
  .byline .av.ct{background:linear-gradient(150deg,#0e8f8b,#0a6e6b)}
  .byline .vbadge{position:absolute;right:-3px;bottom:-3px;width:17px;height:17px;border-radius:50%;background:var(--teal);border:2px solid var(--navy-2);display:flex;align-items:center;justify-content:center}
  .byline .vbadge svg{width:8px;height:8px;stroke:#062322;fill:none;stroke-width:3.4}
  .byline .lbl{font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--teal);display:block;margin-bottom:3px}
  .byline .nm{font-family:var(--font-display);font-size:15.5px;font-weight:600;color:#fff;line-height:1.05}
  .byline .rl{font-size:10.5px;color:#9aa3c8;margin-top:3px;letter-spacing:.2px}
  .byline .sep{display:none}
  .byline .meta .lbl{display:flex;align-items:center;gap:6px}
  .byline .meta .lbl svg{width:11px;height:11px;stroke:var(--teal);fill:none;stroke-width:2.2}
  .byline .meta .val{font-family:var(--font-display);font-size:15px;font-weight:600;color:#fff;line-height:1.05}
  .byline .meta .val .rd{font-family:var(--font-mono);font-size:10.5px;font-weight:500;color:#9aa3c8;margin-left:9px;letter-spacing:.5px}
  @media(max-width:899px){ .byline .nm{font-size:14.5px} }
  /* phones: keep the 2×2 grid, just tighten sizing so it fits */
  @media(max-width:600px){
    .byline .who{gap:9px}
    .byline .avw,.byline .av{width:34px;height:34px;flex-basis:34px}
    .byline .av{font-size:12.5px}
    .byline .vbadge{width:14px;height:14px}
    .byline .lbl{font-size:8px;margin-bottom:2px}
    .byline .nm{font-size:12.5px}
    .byline .rl{font-size:9.5px;margin-top:2px}
    .byline .who,.byline .meta{padding:13px 0 13px 14px}
    .byline .meta .val{font-size:13px}
    .byline .meta .val .rd{display:block;margin-left:0;margin-top:3px;font-size:9.5px;white-space:nowrap}
  }
  .hstats{display:flex;gap:22px;margin-top:18px;flex-wrap:wrap}
  .hstats .s b{font-size:19px;font-weight:800;color:#fff}
  .hstats .s span{font-size:12.5px;color:#9fa9cf;display:block;margin-top:-2px}
  .afftext{margin-top:16px;font-size:11.5px;color:#7e88b0;max-width:560px;line-height:1.5}
  /* right-side brand lockup — stacked checklist, integrated (no container) */
  /* signature TSAS verification seal */
  .herobrand{position:relative;display:flex;justify-content:center;align-items:center}
  .seal{width:clamp(150px,22vw,312px);height:auto;aspect-ratio:1/1;max-width:100%;filter:drop-shadow(0 18px 40px rgba(0,0,0,.32))}
  .seal .ringtext{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:3.4px;fill:#cdd4ee;text-transform:uppercase}
  .seal .tsas{font-family:var(--font-display);font-weight:800;font-size:52px;fill:#fff;letter-spacing:1px}
  .seal .ca{font-family:var(--font-display);font-weight:700;font-size:26px;fill:var(--teal)}
  .seal .vlabel{font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:3px;fill:var(--teal)}
  .seal .vrule{stroke:var(--teal);stroke-width:1.4;opacity:.7}
  @media(max-width:920px){.hero::before{opacity:.04}}
  /* phone: drop the decorative seal + go single-column so the toplist rides up to the fold (seal stays beside the H1 down to 600px via the fluid grid above) */
  @media(max-width:600px){
    .hero .wrap{grid-template-columns:1fr;padding:13px 20px 12px;gap:9px}
    .herobrand{display:none}
    .hero h1{font-size:27px;letter-spacing:-.4px;margin:3px 0 6px}
    .hero p{font-size:14px;line-height:1.34;max-width:none}
    /* compact the byline on mobile so the toplist rides up to the fold */
    .byline{margin-top:10px}
    .byline .who,.byline .meta{padding:6px 0 6px 13px}
    .byline .avw,.byline .av{width:28px;height:28px;flex-basis:28px}
    /* tighten the toplist intro + first card so the full Editor's Choice card lands above the fold */
    #toplist.tight{padding:20px 0 28px}
    #toplist .lead{margin-bottom:13px}
    #toplist .lead h2{font-size:22px;line-height:1.13}
    #toplist .sub{display:none}
    .row{gap:7px 13px;padding:12px 15px}
    .row .mid{margin:1px 0;padding:10px 14px 11px}
    .row .mid .bonus{font-size:20px}
  }

  /* sections + prose — tight, clean rhythm */
  section{padding:22px 0}
  section.tight{padding:16px 0}
  /* the toplist sits right under the hero divider — give its heading real breathing room (the first card is well above the fold) */
  #toplist.tight{padding-top:44px}
  h2{font-size:30px;font-weight:800;letter-spacing:-.4px;margin-bottom:7px}
  .sub{color:var(--muted);font-size:16px;margin-bottom:20px;max-width:760px}
  h3{font-size:20px;font-weight:800;margin:20px 0 7px}
  p{margin-bottom:13px}.narrow p,.prose p{font-size:16px}
  .prose ul{margin:0 0 16px 20px}.prose li{margin-bottom:6px}
  .anchorbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:74px;z-index:40}
  .anchorbar .wrap{display:flex;gap:18px;overflow-x:auto;height:52px;align-items:center;font-size:13.5px;font-weight:600}
  .anchorbar a{color:#46527d;white-space:nowrap}.anchorbar a:hover{color:var(--teal-d)}

  /* toplist (reused) */
  .lead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
  .lead .upd{font-size:13px;color:var(--muted)}
  .toplist{display:flex;flex-direction:column;gap:10px}
  /* deep navy→teal left panel (rank + logo + bonus, WHITE text) → bright-teal vertical seam at 59% → white right (TSAS score + CTA, dark text) */
  .row{display:grid;grid-template-columns:26px 122px 1fr 176px 172px;align-items:center;gap:20px;
    background:linear-gradient(90deg,#16224F 0,#0c5f66 calc(59% - 2px),var(--teal) calc(59% - 2px),var(--teal) calc(59% + 0.5px),#fff calc(59% + 0.5px),var(--card) 100%);
    border:1px solid var(--line);border-radius:11px;padding:16px 20px 16px 16px;transition:border-color .18s,box-shadow .18s;position:relative}
  .row > *{position:relative;z-index:1}
  .row:hover{box-shadow:var(--shadow);border-color:rgba(10,143,140,.45)}
  .row.best{border-color:var(--teal);box-shadow:0 14px 40px rgba(0,200,196,.14)}
  /* Editor's Choice — top-RIGHT corner, text stacked so it stays clear of the brand logo */
  .besttag{position:absolute;top:-12px;right:18px;left:auto;background:var(--teal);color:#04201f;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;line-height:1.2;text-align:center;padding:5px 11px;border-radius:6px;box-shadow:0 4px 12px rgba(0,200,196,.35)}
  .besttag i{font-style:normal;letter-spacing:0;margin-right:3px}
  .rk{font-family:var(--font-display);font-size:30px;color:var(--navy);text-align:center;line-height:1}
  .brand{display:flex;align-items:center;min-width:0}
  .clogo{width:100%;height:56px;background:#fff;border:1px solid rgba(16,26,79,.10);border-radius:10px;display:flex;align-items:center;justify-content:center;padding:8px 12px;box-shadow:0 3px 10px rgba(16,26,69,.09)}
  /* podium shield watermark (top 3) — hero shield-orbit motif, tinted gold/silver/bronze, behind content in the blue panel */
  /* podium medal: hero shield-orbit motif framing the rank number, tinted gold/silver/bronze (margins both sides, clear of card edge + logo tile) */
  .row > .podshield{position:absolute;z-index:0;pointer-events:none;left:10px;top:50%;transform:translateY(-50%);width:38px;height:34px;opacity:.62;-webkit-mask:url(motif_light.png) center/contain no-repeat;mask:url(motif_light.png) center/contain no-repeat}
  .pod1{background:linear-gradient(135deg,#fce290,#c8a24b 52%,#f4d579)}
  .pod2{background:linear-gradient(135deg,#f3f6f9,#a9b3c1 52%,#dde4ed)}
  .pod3{background:linear-gradient(135deg,#efb787,#a8632b 52%,#db9354)}
  /* snappy podium bounce (number + shield together, quick pop every 4s) + metallic twinkle glint */
  @keyframes podbob{0%{transform:translateY(0)}8%{transform:translateY(-9px)}18%{transform:translateY(0)}24%{transform:translateY(-3px)}30%{transform:translateY(0)}100%{transform:translateY(0)}}
  @keyframes podbobS{0%{transform:translateY(-50%)}8%{transform:translateY(calc(-50% - 9px))}18%{transform:translateY(-50%)}24%{transform:translateY(calc(-50% - 3px))}30%{transform:translateY(-50%)}100%{transform:translateY(-50%)}}
  @keyframes twinkle{0%,52%{opacity:0;transform:scale(.2) rotate(0deg)}62%{opacity:1;transform:scale(1) rotate(20deg)}70%{opacity:.18;transform:scale(.5) rotate(36deg)}78%{opacity:.95;transform:scale(.92) rotate(52deg)}88%,100%{opacity:0;transform:scale(.2) rotate(66deg)}}
  .podium .rk{animation:podbob 4s ease-in-out infinite}
  .podium > .podshield{animation:podbobS 4s ease-in-out infinite}
  .row > .twinkle{position:absolute;z-index:2;pointer-events:none;width:11px;height:11px;left:33px;top:calc(50% - 12px);background:#fff;clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%);filter:drop-shadow(0 0 3px rgba(255,255,255,.85));opacity:0;animation:twinkle 3s ease-in-out infinite}
  @media(prefers-reduced-motion:reduce){.podium .rk,.podium > .podshield,.row > .twinkle{animation:none}}
  .clogo img{max-width:100%;max-height:100%;object-fit:contain;display:block}
  .nm{font-weight:800;font-size:15.5px;line-height:1.15}
  /* signature TSAS 4-pillar score meter — number left, label+bars stacked right, vertically centred */
  .tscore{margin-top:7px;display:flex;align-items:center;gap:9px}
  .tscore .tnum{font-family:var(--font-display);font-size:29px;line-height:1;color:var(--navy)}
  .row.best .tscore .tnum{color:var(--teal-d)}
  .tscore .pwrap{display:flex;flex-direction:column;gap:4px}
  .tscore .tlbl{font-family:var(--font-mono);font-size:7.5px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:var(--teal-d);line-height:1}
  .pbars{display:flex;gap:4px;align-items:flex-end}
  .pbar{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:help}
  .pbar .trk{width:6px;height:18px;background:rgba(22,34,79,.12);border-radius:3px;display:flex;align-items:flex-end;overflow:hidden}
  .pbar .pf{width:100%;background:linear-gradient(to top,var(--teal-d),var(--teal));border-radius:3px}
  .pbar i{font-family:var(--font-mono);font-size:7.5px;font-weight:600;font-style:normal;color:var(--muted);line-height:1}
  /* verification panel — TSAS score + unique trust metrics (win rate, ease of sign-up) */
  .trust{display:flex;flex-direction:column;gap:10px;min-width:0}
  /* toplist score boxed in a navy tile — matches the review-card treatment */
  .trust .tscore{margin-top:0;align-self:flex-start;background:var(--navy);border-radius:11px;padding:9px 13px 10px;gap:10px}
  .trust .tscore .tnum{color:#fff}
  .row.best .trust .tscore .tnum{color:var(--teal)}
  .trust .tscore .tlbl{color:var(--teal)}
  .trust .tscore .pbar .trk{background:rgba(255,255,255,.16)}
  .trust .tscore .pbar i{color:#aeb8d4}
  .tmetrics{display:flex;flex-direction:column;gap:7px;padding-top:10px;border-top:1px solid var(--line)}
  .tsig .tsig-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:4px}
  .tsig-l{font-family:var(--font-mono);font-size:8.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--teal-d);white-space:nowrap}
  .tsig-v{font-family:var(--font-display);font-weight:400;font-size:13.5px;color:var(--navy);white-space:nowrap}
  .trust .track{height:5px;border-radius:4px;background:rgba(22,34,79,.10);overflow:hidden}
  .trust .fill{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--teal-d),var(--teal))}
  .score{background:var(--navy);color:#fff;font-family:var(--font-mono);font-weight:600;font-size:12px;border-radius:5px;padding:2px 7px}
  .mid{padding-right:36px}/* keep bonus text inside the teal zone, left of the 59% seam */
  .bonuslbl{font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--navy);margin-bottom:3px}
  .bonus{font-weight:800;font-size:22px;color:var(--navy);letter-spacing:-.5px;line-height:1.14}
  .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
  .chip{font-size:11.5px;font-weight:600;background:var(--bg);border:1px solid var(--line);color:#475184;border-radius:20px;padding:3px 9px}
  .ministats{display:flex;gap:16px;margin-top:9px;font-size:12.5px;color:#33406b}.ministats b{color:var(--navy)}
  .code{font-size:11.5px;color:var(--muted);margin-top:6px}
  .code span{font-family:ui-monospace,Menlo,monospace;background:#fff5d6;border:1px dashed var(--gold);color:#8a6d00;border-radius:5px;padding:1px 7px;font-weight:700}
  .act{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:9px;padding-left:22px}
  /* unique CTA — Anton wordmark + brand shield motif, teal with navy accent base */
  .cta-play{position:relative;width:100%;display:flex;align-items:center;justify-content:center;gap:9px;background:var(--teal);color:#062322;font-family:var(--font-display);font-weight:400;font-size:17px;letter-spacing:.7px;text-transform:uppercase;padding:13px 16px 11px;border-radius:9px;border-bottom:3px solid var(--teal-d);box-shadow:0 7px 18px rgba(0,200,196,.30);transition:.16s}
  .cta-play:hover{background:#13d4d0;transform:translateY(-1px);box-shadow:0 10px 22px rgba(0,200,196,.36)}
  .cta-play .cta-mark{width:19px;height:19px;object-fit:contain;filter:saturate(1.1)}
  .cta-play .arr{font-family:var(--font-mono);font-size:14px;font-weight:600;margin-left:-2px}
  .row.best .cta-play{box-shadow:0 9px 22px rgba(0,200,196,.42)}
  .act .review{font-size:12px;font-weight:600;color:var(--muted);text-align:center}.act .review:hover{color:var(--teal-d)}
  .est{cursor:help;border-bottom:1px dotted var(--muted)}
  .divider{display:flex;align-items:center;gap:16px;margin:8px 2px 4px;color:var(--muted);font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
  .divider::before,.divider::after{content:"";height:1px;background:var(--line);flex:1}
  @media(max-width:860px){
    .row{grid-template-columns:40px 1fr 40px;gap:10px 13px;padding:15px 16px;align-items:center;
      background:linear-gradient(180deg,#16224F 0,#0c5f66 70px,var(--teal) 70px,var(--teal) 72px,#fff 72px,var(--card) 100%)}
    .row::after{display:none}
    .row > .podshield{top:38px;left:18px;width:36px;height:32px}
    .row > .twinkle{left:40px;top:23px}
    .rk{font-size:21px;align-self:center;color:#fff}
    .clogo{width:110px;height:44px;margin:0 auto}
    .row .mid,.row .trust,.row .act{grid-column:1/-1}
    /* surface the bonus on mobile — a teal-tinted card so it doesn't get lost among the other details */
    .row .mid{margin:14px 0 2px;padding:13px 15px 14px;padding-right:15px;border-top:0;background:linear-gradient(135deg,rgba(0,200,196,.13),rgba(0,200,196,.03));border:1px solid rgba(0,200,196,.34);border-radius:12px}
    .row .mid .bonuslbl{color:var(--teal-d)}
    .row .mid .bonus{font-size:24px;line-height:1.12}
    .row .mid .ministats{margin-top:8px;gap:8px}
    .row .mid .ministats span{background:#fff;border:1px solid var(--line);border-radius:8px;padding:4px 10px;font-size:12px}
    .row .trust{flex-direction:row;align-items:center;gap:15px}
    .row .trust .tscore{flex:0 0 auto}
    .row .trust .tmetrics{flex:1 1 auto;min-width:0;border-top:0;padding-top:0;border-left:1px solid var(--line);padding-left:16px}
    .act{flex-direction:row;flex-wrap:wrap;align-items:center;gap:7px 13px;padding-left:0}
    .act .cta-play{flex:1 1 auto;min-width:150px;padding:11px 16px 9px;font-size:16px}
    .act .review{flex:0 0 100%;text-align:center;font-size:11.5px}
    .besttag{right:14px;left:auto}
  }
  /* desktop only: light text for the dark left panel (mobile keeps its light top-band + dark text) */
  @media(min-width:861px){
    .rk{color:#fff}
    .bonuslbl{color:#7fe9e6}
    .bonus{color:#fff}
    .ministats{color:#bcdfe1}
    .ministats b{color:#fff}
    .code{color:#bcdfe1}
    .est{border-bottom-color:rgba(255,255,255,.55)}
  }

  /* TSAS standard — 3D flip cards: big logo letter on front, methodology on the back */
  .pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
  .pcard{height:252px;border-radius:16px;cursor:pointer;background:none;border:0;padding:0;perspective:1100px;-webkit-tap-highlight-color:transparent;transition:box-shadow .25s ease}
  .pcard:hover{box-shadow:0 18px 42px rgba(8,16,40,.28)}
  .pflip{position:relative;width:100%;height:100%;transition:transform .68s cubic-bezier(.25,.8,.25,1);transform-style:preserve-3d;will-change:transform}
  .pcard.flipped .pflip{transform:rotateY(180deg)}
  .pcard:focus-visible{outline:none}
  .pcard:focus-visible .pface{outline:2px solid var(--teal);outline-offset:3px}
  .pface{position:absolute;inset:0;border-radius:16px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;flex-direction:column}
  /* front — just the letter, heavy visual */
  .pfront{background:linear-gradient(158deg,#1b2c66,#0c5f66);color:#fff;align-items:center;justify-content:center;text-align:center;border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
  .pfront .pbg{position:absolute;width:154px;height:137px;top:45%;left:50%;transform:translate(-50%,-50%);opacity:.13;background:#fff;-webkit-mask:url(motif_light.png) center/contain no-repeat;mask:url(motif_light.png) center/contain no-repeat}
  .pfront .pbig{position:relative;font-family:var(--font-display);font-size:100px;line-height:.85;color:#fff;text-shadow:0 8px 26px rgba(0,0,0,.35)}
  .pcard:nth-child(4) .pfront .pbig{color:var(--teal)}
  .pfront .pcta{position:absolute;left:0;right:0;bottom:18px;display:flex;align-items:center;justify-content:center;gap:7px;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#9fe9e6;animation:ctapulse 2.6s ease-in-out infinite}
  .pfront .pcta svg{width:13px;height:13px;stroke:var(--teal)}
  .pcard:hover .pfront .pcta{color:#fff;animation:none}
  @keyframes ctapulse{0%,100%{opacity:.62}50%{opacity:1}}
  /* back — meaning, methodology, weighting */
  .pback{background:var(--card);border:1px solid var(--line);transform:rotateY(180deg);padding:20px 18px;text-align:left}
  .pback .lt{width:38px;height:38px;border-radius:10px;background:var(--navy);color:#fff;font-family:var(--font-display);font-size:20px;display:flex;align-items:center;justify-content:center;margin-bottom:11px}
  .pcard:nth-child(4) .pback .lt{background:var(--teal);color:#04201f}
  .pback h4{font-size:17px;margin-bottom:6px}
  .pback p{font-size:12.5px;color:var(--muted);margin:0;line-height:1.5}
  .pback .w{font-size:11px;font-family:var(--font-mono);font-weight:600;letter-spacing:.4px;color:var(--teal-d);margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
  .pback .bk{position:absolute;top:11px;right:13px;font-size:13px;color:var(--muted);opacity:.6;line-height:1}
  @media(max-width:820px){.pillars{grid-template-columns:1fr 1fr}.pcard{height:244px}}
  @media(prefers-reduced-motion:reduce){.pflip{transition:none}.pfront .pcta{animation:none}}

  /* generic cards / callouts / tables */
  .card-w{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 28px}
  .callout{position:relative;display:flex;gap:15px;align-items:flex-start;background:linear-gradient(135deg,rgba(0,200,196,.13),rgba(0,200,196,.02));border:1px solid rgba(0,200,196,.28);border-radius:14px;padding:17px 20px 17px 22px;margin:20px 0;overflow:hidden}
  .callout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--teal),var(--teal-d))}
  .callout .ci{flex:0 0 40px;width:40px;height:40px;border-radius:12px;background:var(--teal);display:flex;align-items:center;justify-content:center;box-shadow:0 5px 14px rgba(0,200,196,.32)}
  .callout .ci svg{width:21px;height:21px;stroke:#04201f;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .callout .ct{flex:1;min-width:0;font-size:14.5px;line-height:1.6;color:var(--ink);font-style:italic}
  .callout .k{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:var(--teal-d);margin-bottom:4px;display:block}
  .callout .ct p{margin:0}
  .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:10px 0 6px;border-radius:14px}
  table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:14.5px;margin:0}
  .tscroll table{min-width:440px}
  th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line)}
  th{background:var(--navy);color:#fff;font-size:12.5px;letter-spacing:.4px;text-transform:uppercase}
  tr:last-child td{border-bottom:0}
  tbody tr:nth-child(even){background:#fafbff}
  td b{color:var(--navy)}
  .pros-cons{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px 22px;margin:14px 0}
  .pros-cons ul{list-style:none;margin:0;display:flex;flex-direction:column;gap:12px}
  /* each item is a contained, tinted card (not bare text) */
  .pros-cons li{font-size:14px;line-height:1.5;display:flex;align-items:flex-start;gap:13px;color:var(--ink);
    background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow-sm)}
  .pros li{background:linear-gradient(135deg,rgba(0,200,196,.08),rgba(0,200,196,.02));border-color:rgba(0,200,196,.30)}
  .cons li{background:linear-gradient(135deg,rgba(224,90,79,.08),rgba(224,90,79,.02));border-color:rgba(224,90,79,.30)}
  .pros-cons li strong{color:var(--navy)}
  /* marker = logo-style rounded cube holding the ✓/✕ */
  .pros-cons li::before{flex:0 0 26px;width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:800;margin-top:0}
  .pros li::before{content:"✓";background:var(--teal);color:#04201f;font-size:14px;box-shadow:0 3px 8px rgba(0,200,196,.3)}
  .cons li::before{content:"✕";background:#e05a4f;color:#fff;font-size:12px;box-shadow:0 3px 8px rgba(224,90,79,.32)}
  @media(max-width:640px){.pros-cons{grid-template-columns:1fr}}

  /* review block */
  .rev{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 26px;margin-bottom:16px}
  .rev .rhd{display:flex;align-items:center;gap:14px;margin-bottom:6px}
  .rev .clogo{width:104px;height:52px;flex:0 0 104px;border:1px solid var(--line);border-radius:10px;background:#fff;padding:7px 11px}
  .rev h3{margin:0;font-size:19px}
  /* score + TSAS bars boxed in a navy tile (echoes the logo acronym tiles), pinned top-right */
  .rev .tscore{margin:0 0 0 auto;flex:0 0 auto;align-self:flex-start;background:var(--navy);border-radius:11px;padding:9px 13px 10px;gap:10px}
  .rev .tscore .tnum{color:#fff}
  .rev .tscore .tlbl{color:var(--teal)}
  .rev .tscore .pbar .trk{background:rgba(255,255,255,.16)}
  .rev .tscore .pbar i{color:#aeb8d4}
  @media(max-width:560px){.rev .rhd{flex-wrap:wrap}.rev .tscore{margin:8px 0 0 0}}
  .rev .b{font-weight:700;color:var(--navy)}
  /* review offer strip — prominent bonus + stat chips + visit CTA */
  .rev-offer{display:flex;align-items:center;gap:16px 22px;flex-wrap:wrap;margin-top:18px;padding:15px 18px;background:linear-gradient(135deg,rgba(0,200,196,.1),rgba(0,200,196,.02));border:1px solid rgba(0,200,196,.28);border-radius:12px}
  .ro-bonus{flex:1 1 230px;min-width:0}
  .ro-bonus .rolbl{display:block;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:1.3px;text-transform:uppercase;color:var(--teal-d);margin-bottom:3px}
  .ro-bonus .roval{font-weight:800;font-size:18.5px;color:var(--navy);line-height:1.2;letter-spacing:-.2px}
  .ro-stats{display:flex;gap:20px;flex:0 0 auto}
  .ro-stats div{display:flex;flex-direction:column;gap:2px}
  .ro-stats i{font-style:normal;font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
  .ro-stats b{font-size:15px;color:var(--navy);font-weight:800}
  .ro-cta{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;background:var(--teal);color:#062322;font-family:var(--font-display);font-weight:400;font-size:15px;letter-spacing:.5px;text-transform:uppercase;padding:12px 18px 10px;border-radius:9px;border-bottom:3px solid var(--teal-d);box-shadow:0 6px 16px rgba(0,200,196,.3);transition:.16s}
  .ro-cta:hover{background:#13d4d0;transform:translateY(-1px)}
  @media(max-width:560px){.ro-cta{flex:1 1 100%;justify-content:center}.ro-stats{gap:24px}}

  /* author / expert */
  .qa{background:#fff;border:1px solid var(--line);border-radius:16px;padding:8px 26px;margin-bottom:14px}
  .qa h3{color:var(--navy)}
  .byq{font-size:13px;color:var(--muted);font-style:italic;margin-bottom:18px}
  .author{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:14px;padding:20px 24px;margin-top:18px}
  .author .av{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#243a8f,#1a2660);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 64px;object-fit:cover;box-shadow:0 0 0 2px rgba(200,162,75,.5)}
  .author .nme{font-weight:800}.author .role{font-size:13px;color:var(--teal-d);font-weight:700}
  .author p{font-size:13.5px;color:var(--muted);margin:6px 0 0}

  /* faq */
  .faq{display:grid;gap:11px}
  details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:0 24px;transition:border-color .2s,box-shadow .2s}
  details:hover{border-color:rgba(10,143,140,.35)}
  details[open]{border-color:rgba(0,200,196,.55);box-shadow:0 10px 30px rgba(16,26,69,.07)}
  summary{list-style:none;cursor:pointer;font-weight:700;font-size:16px;color:var(--navy);padding:18px 0;display:flex;justify-content:space-between;gap:18px;align-items:center;transition:color .2s}
  summary::-webkit-details-marker{display:none}
  summary:hover{color:var(--teal-d)}
  /* clean chevron marker — points down, rotates up on open */
  summary::after{content:"";flex:0 0 auto;width:9px;height:9px;margin:0 4px 4px 0;border-right:2.5px solid var(--teal-d);border-bottom:2.5px solid var(--teal-d);border-radius:1px;transform:rotate(45deg);transition:transform .28s ease}
  details[open] summary{color:var(--teal-d)}
  details[open] summary::after{transform:rotate(-135deg);margin-bottom:-4px}
  details[open] summary{border-bottom:1px solid var(--line)}
  .faq details p{padding:15px 0 20px;color:#4a5578;font-size:14.5px;line-height:1.68;margin:0;max-width:64ch}

  /* calculator */
  .calc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 26px}
  .calc .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
  .calc label{font-size:12px;font-weight:700;color:var(--muted);display:block;margin-bottom:5px}
  .calc input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;font:inherit;font-size:15px}
  .calc .out{font-size:15px}.calc .out b{font-size:26px;color:var(--navy);display:block}
  @media(max-width:640px){.calc .grid{grid-template-columns:1fr}}

  /* footer */
  footer{background:var(--navy-3);color:#9aa4cc;padding:54px 0 26px;margin-top:42px}
  .ftop{display:grid;grid-template-columns:minmax(280px,1fr) 2.4fr;gap:clamp(32px,5vw,64px);padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.1)}
  .flinks{display:grid;grid-template-columns:repeat(5,1fr);gap:30px 24px}
  .fcol h5{color:#fff;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;margin:0 0 14px;font-weight:700}
  .fcol a{display:block;font-size:13.5px;padding:5px 0;color:#aeb6d6;text-decoration:none;transition:color .15s}
  .fcol a:hover{color:var(--teal)}
  .flock{display:flex;align-items:center;gap:11px;margin-bottom:16px}
  .flock .mk{height:38px;flex:0 0 auto}
  .flock .tiles{display:flex;gap:7px}
  .flock .col{display:flex;flex-direction:column;align-items:center;gap:6px}
  .flock .tl{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.1);color:#fff;font-family:var(--font-display);font-weight:400;font-size:18px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.12)}
  .flock .tl.teal{background:var(--teal);color:#04201f;font-size:12px;font-family:var(--font-mono);font-weight:600;border:0}
  .flock .wd{font-size:8.5px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:#7e88b0;line-height:1}
  .flock .wd b{color:var(--teal);font-weight:800}
  .fbrand p{font-size:14px;line-height:1.55;margin:4px 0 16px;max-width:340px;color:#8b95c0}
  .rg{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:12px 16px;font-size:12.5px;line-height:1.45;max-width:360px}
  .rg .ages{font-weight:800;color:#fff;border:2px solid var(--teal);border-radius:50%;width:38px;height:38px;display:flex;align-items:center;justify-content:center;flex:0 0 38px;font-size:13px}
  .fbot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding-top:22px;font-size:12.5px;color:#7e88b0}
  .fbot-links{display:flex;gap:18px;flex-wrap:wrap}
  .fbot a{color:inherit;text-decoration:none}.fbot a:hover{color:var(--teal)}
  @media(max-width:980px){.ftop{grid-template-columns:1fr;gap:34px}.flinks{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:560px){.flinks{grid-template-columns:repeat(2,1fr);gap:24px 18px}.fbot{justify-content:flex-start}}
  /* Anton single-weight (400) normalisation — overrides scattered font-weight on display-font elements */
  .hero h1,h2,section h2,h3,.seal .tsas,.seal .ca,.byline .av,.byline .nm,.byline .meta .val{font-weight:400}
  .hero h1 .hl{font-style:normal}

  /* ---- EEAT / content pages ---- */
  .page-head{padding:46px 0 6px}
  .page-head h1{font-family:var(--font-display);font-size:clamp(33px,5vw,46px);line-height:1.04;color:var(--ink);margin:0 0 12px}
  .page-head .sub{font-size:16.5px;color:var(--muted);max-width:62ch;line-height:1.55}
  .page-body{padding:10px 0 64px}
  .page-body h2{font-family:var(--font-display);font-size:26px;line-height:1.12;margin:34px 0 10px;color:var(--ink)}
  .page-body h3{font-size:17px;margin:22px 0 6px;color:var(--navy)}
  .page-body p{font-size:15.5px;line-height:1.7;color:#414b6e;margin:0 0 14px}
  .page-body ul{margin:0 0 16px;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
  .page-body ul li{font-size:15px;line-height:1.5;color:#414b6e;display:flex;gap:11px;align-items:flex-start}
  .page-body ul li::before{content:"";flex:0 0 9px;width:9px;height:9px;border-radius:3px;background:var(--teal);margin-top:7px}
  .page-body a{color:var(--teal-d);font-weight:600}
  .page-body a:hover{text-decoration:underline}
  .lede{font-size:17px!important;color:var(--ink)!important;font-weight:500}
  .updated{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-top:8px}
  .team-grid{display:flex;flex-direction:column;gap:14px;margin:16px 0 4px}
  .fbot a{color:inherit}.fbot a:hover{color:var(--teal)}

  /* ---- nav menu (EEAT pages) + mobile hamburger ---- */
  nav.menu{display:flex;gap:22px;align-items:center}
  nav.menu a{font-weight:600;font-size:14px;color:#46527d;white-space:nowrap;position:relative;padding:4px 0;border-bottom:2px solid transparent;transition:.15s}
  nav.menu a:hover{color:var(--navy);border-bottom-color:var(--teal)}
  /* the "See Top Casinos" CTA now lives inside the menu — teal button in both the desktop bar and the burger dropdown */
  nav.menu .menucta{color:#062322;background:var(--teal);font-weight:700;font-size:13.5px;padding:10px 18px;border-radius:8px;border-bottom:0;justify-content:center;white-space:nowrap}
  nav.menu .menucta:hover{color:#062322;background:#15d6d2;border-bottom:0;transform:translateY(-1px)}
  .navtoggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:36px;background:none;border:0;cursor:pointer;padding:0}
  .navtoggle span{display:block;width:23px;height:2px;background:var(--navy);border-radius:2px;transition:.22s}
  .navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  @media(max-width:920px){
    .nav .market,.nav .vr{display:none}
    .navtoggle{display:flex}
    nav.menu{display:none;position:absolute;top:calc(100% + 1px);left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;background:#fff;border:1px solid var(--line);border-radius:0 0 14px 14px;padding:8px;box-shadow:0 16px 34px rgba(16,26,69,.12);z-index:60}
    nav.menu.open{display:flex}
    nav.menu a{padding:12px 14px;border-radius:9px;font-size:15px;border-bottom:0}
    nav.menu a:hover{background:var(--bg);border-bottom:0}
    nav.menu .menucta{margin-top:6px;padding:13px 14px;font-size:15px}
    nav.menu .menucta:hover{background:#15d6d2;transform:none}
  }
  /* author links + author-page lead */
  .authlink{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .15s}
  .authlink:hover{border-bottom-color:var(--teal)}
  .authlead{align-items:center;margin:6px 0 4px}
  .authlead .av{width:104px;height:104px;flex:0 0 104px}
  .authlead .lede{margin:0;color:var(--ink);font-weight:500}


  /* breadcrumb — now integrated at the top of the hero (no standalone bar => saves a row) */
  .crumbs{font-size:13px}
  .crumbs a:hover{text-decoration:underline}
  .hero .crumbs{background:none;border:0;font-size:12px;margin:0 0 9px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;line-height:1.2}
  .hero .crumbs a{color:var(--teal);font-weight:600}
  .hero .crumbs .sep{color:rgba(255,255,255,.4)}
  .hero .crumbs span:last-child{color:rgba(255,255,255,.82);font-weight:600}
  /* "Read more" intro toggle — hidden by default (desktop + when intro fits); JS reveals it on mobile when clamped */
  .read-more{display:none}
  .read-more .rm-i{display:inline-flex;align-items:center;justify-content:center;transition:transform .25s}
  .read-more .rm-i svg{width:12px;height:12px;display:block}
  /* missing-logo wordmark fallback */
  .clogo.noimg{display:flex;align-items:center;justify-content:center;padding:4px 8px}
  .clogo.noimg b{font-family:var(--font-display);font-size:13px;color:var(--navy);text-align:center;line-height:1.05;letter-spacing:.3px;font-weight:400}

  /* ── navigational cards (hub → subpages), modeled on projectbritain .guide-card, TSAS palette ── */
  .navgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:18px;margin:18px 0 8px}
  .navcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .16s,box-shadow .16s,border-color .16s}
  .navcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--teal)}
  .nc-media{position:relative;height:122px;background:linear-gradient(135deg,var(--navy) 0,var(--navy-2) 60%,#0c5f66 100%);overflow:hidden}
  .nc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
  .navcard:hover .nc-media img{transform:scale(1.05);transition:transform .3s}
  .nc-media::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(165deg,rgba(15,26,68,.38) 0,rgba(15,26,68,.10) 48%,rgba(12,28,43,.64) 100%)}
  .nc-kicker{position:absolute;left:13px;top:12px;z-index:3;background:var(--gold);color:#1a1430;font-family:var(--font-mono);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.9px;padding:4px 11px;border-radius:30px}
  .nc-body{padding:14px 18px 17px;display:flex;flex-direction:column;gap:7px;flex:1}
  .nc-body h3{margin:0;font-family:var(--font-display);font-weight:400;font-size:19px;letter-spacing:.4px;color:var(--navy);line-height:1.18}
  .nc-body p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.5;flex:1}
  .nc-link{font-size:12.5px;font-weight:700;color:var(--teal-d);margin-top:3px;font-family:var(--font-mono);letter-spacing:.3px}
  .navcard:hover .nc-link{text-decoration:underline}

  /* spoke/hub hero — single column (no empty right slot / negative space) */
  .hero.solo .byline{max-width:660px}
  /* single-author byline — one clean row, no fabricated 2nd author */
  .byline.solo{grid-template-columns:auto 1fr;max-width:560px}
  .byline.solo .who{border-bottom:0;align-items:center;padding-right:22px}  /* right pad => role can't run into the divider */
  .byline.solo .meta{border-left:1px solid rgba(255,255,255,.13);padding-left:22px;
    display:flex;flex-direction:column;justify-content:flex-start}  /* top-align (like .who's text) so name↔date & role↔read line up */
  /* phones: match the two columns' line metrics exactly so the rows align (name↔date, role↔read-time) */
  @media(max-width:600px){
    .byline.solo .who{padding-right:15px}
    .byline.solo .meta{padding-left:15px}
    .byline.solo .meta .val{font-size:12.5px}            /* == .nm so the name & date sit on the same line */
    .byline.solo .meta .val .rd{margin-top:2px}          /* == .rl margin so role & read-time sit on the same line */
  }


  /* nav-card illustrations are already navy/on-brand -> lighten the tint overlay so they read */
  .nc-media::after{background:linear-gradient(165deg,rgba(15,26,68,.20) 0,rgba(15,26,68,0) 45%,rgba(12,28,43,.40) 100%)}

  /* full-bleed hero illustration — IS the hero, fades into the navy under the copy */
  .hero.scene{position:relative}
  .hero.scene .wrap{grid-template-columns:1fr}
  .hero.scene .hero-copy{max-width:600px;position:relative;z-index:2}
  .hero-scene{position:absolute;top:0;right:0;bottom:0;width:60%;z-index:0;background-position:center right;background-size:cover;background-repeat:no-repeat;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.6) 30%,#000 52%);
            mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.6) 30%,#000 52%);
    animation:heroBreathe 9s ease-in-out infinite}
  /* veil unifies the illustration's navy with the hero navy + keeps text legible */
  .hero.scene .hero-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(90deg,var(--navy-2) 0,rgba(15,26,68,.55) 42%,rgba(15,26,68,0) 70%)}
  @keyframes heroBreathe{0%,100%{transform:scale(1.0)}50%{transform:scale(1.045)}}
  @media(prefers-reduced-motion:reduce){.hero-scene{animation:none}}
  /* mobile: ONE cohesive hero — the hero is exactly as tall as the copy (NO extra strip => no dead gap), and the
     illustration is a cover background filling every pixel behind the copy. Short hero => the image reads at near-full
     width (not a zoomed sliver) and its navy parts blend into the hero navy. Veil + text-shadow keep the copy legible. */
  /* desktop: also collapse the intro + show Read more so the toplist rides up (mirrors mobile) */
  @media(min-width:761px){
    .hero.scene .hero-copy .lead{max-height:6.8em;overflow:hidden;transition:max-height .35s ease;
      -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent);mask-image:linear-gradient(180deg,#000 72%,transparent)}
    .hero.scene .hero-copy.expanded .lead{max-height:1400px;-webkit-mask-image:none;mask-image:none}
    .hero.scene .read-more{display:inline-flex;align-items:center;gap:6px;margin:12px 0 0;padding:4px 0;
      background:none;border:0;cursor:pointer;font-family:var(--font-mono);font-size:12px;font-weight:700;
      letter-spacing:.8px;text-transform:uppercase;color:var(--teal)}
    .hero.scene .read-more:hover{color:#fff}
    .hero.scene .hero-copy.expanded .read-more .rm-i{transform:rotate(180deg)}
  }
  @media(max-width:760px){
    .hero.scene{display:block;position:relative}
    .hero.scene > .wrap{position:relative;z-index:2;grid-template-columns:1fr;padding:12px 20px 18px}
    .hero.scene .hero-copy{max-width:none;text-shadow:0 1px 14px rgba(8,14,40,.66),0 1px 3px rgba(8,14,40,.5)}
    /* intro: pure white, slightly heavier, with a TIGHT crisp outline (not a soft glow that greys it out) */
    .hero.scene .hero-copy .lead{color:#fff;font-weight:500;
      text-shadow:0 1px 1px rgba(8,14,40,.98),0 0 5px rgba(8,14,40,.9),0 1px 10px rgba(8,14,40,.55);
      /* collapsed by default on mobile: ~3 lines, fading out at the bottom (Read more expands it) */
      max-height:4.3em;overflow:hidden;transition:max-height .35s ease;
      -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent);mask-image:linear-gradient(180deg,#000 58%,transparent)}
    .hero.scene .hero-copy.expanded .lead{max-height:1200px;-webkit-mask-image:none;mask-image:none}
    .hero.scene .read-more{display:inline-flex;align-items:center;gap:6px;margin:9px 0 2px;padding:5px 0;
      background:none;border:0;cursor:pointer;font-family:var(--font-mono);font-size:11.5px;font-weight:700;
      letter-spacing:.8px;text-transform:uppercase;color:var(--teal);text-shadow:0 1px 4px rgba(8,14,40,.75)}
    .hero.scene .hero-copy.expanded .read-more .rm-i{transform:rotate(180deg)}
    /* wash behind the byline: translucent blurred panel + visible border & shadow so it reads as a panel on EVERY
       background (a plain dark fill vanished over dark-navy parts of an illustration) */
    .hero.scene .byline{background:rgba(9,15,40,.56);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
      border:1px solid rgba(255,255,255,.24);border-radius:12px;padding:0 12px;margin-top:18px;
      box-shadow:0 8px 22px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.10)}
    .hero.scene .hero-scene{position:absolute;inset:0;top:0;right:0;bottom:0;width:100%;height:100%;opacity:1;z-index:0;
      background-position:center;background-size:cover;animation:heroBreathe 9s ease-in-out infinite;
      -webkit-mask-image:none;mask-image:none}
    .hero.scene .hero-veil{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
      background:linear-gradient(180deg,rgba(15,26,68,.8) 0,rgba(15,26,68,.5) 50%,rgba(15,26,68,.44) 100%)}
  }

  /* ── nav dropdowns (Games / Payments / Provinces) ── */
  .navitem{position:relative;display:flex;align-items:center}
  nav.menu .navitem>a{display:inline-flex;align-items:center}
  .navitem .chev{width:13px;height:13px;margin-left:5px;transition:transform .2s}
  .has-sub:hover .chev,.has-sub:focus-within .chev{transform:rotate(180deg)}
  .subnav{position:absolute;top:100%;left:-8px;min-width:194px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 16px 34px rgba(16,26,69,.14);padding:8px;display:none;flex-direction:column;gap:1px;z-index:60}
  .subnav::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
  .has-sub:hover .subnav,.has-sub:focus-within .subnav{display:flex}
  .subnav a{padding:9px 13px;border-radius:8px;font-size:13.5px;font-weight:600;color:#46527d;white-space:nowrap;border-bottom:0}
  .subnav a:hover{background:var(--bg);color:var(--navy);border-bottom:0}
  .subnav .sub-all{display:none}  /* desktop: parent link already opens the hub — no duplicate item */
  @media(max-width:920px){
    /* mobile burger: each dropdown is a stylized accordion (collapsed by default) */
    .navitem{width:100%;display:block;border-bottom:1px solid var(--line)}
    .navitem:last-of-type{border-bottom:0}
    .navitem.has-sub>a{display:flex;align-items:center;justify-content:space-between;width:100%;font-weight:700;color:var(--navy)}
    .navitem .chev{display:inline-block;width:15px;height:15px;margin-left:auto;color:var(--teal-d);transition:transform .25s}
    .navitem.nav-open>a .chev{transform:rotate(180deg)}
    .navitem.nav-open>a{background:var(--bg);color:var(--navy)}
    .subnav{position:static;display:flex;flex-direction:column;box-shadow:none;border:0;border-radius:0;padding:0;min-width:0;background:none;
      max-height:0;overflow:hidden;opacity:.4;transition:max-height .28s ease,opacity .2s ease,padding .28s ease}
    .has-sub:hover .subnav,.has-sub:focus-within .subnav{display:flex}  /* override desktop hover-open on mobile */
    .navitem.nav-open .subnav{max-height:460px;opacity:1;padding:3px 0 8px}
    .subnav a{padding:10px 12px 10px 18px;margin:0 4px;font-size:14px;font-weight:600;color:#566089;border-radius:8px;border-left:2px solid transparent;transition:border-color .15s,background .15s,color .15s}
    .subnav a:hover,.subnav a:active{background:var(--bg);color:var(--navy);border-left-color:var(--teal)}
    .subnav .sub-all{display:block;font-weight:700;color:var(--teal-d);font-family:var(--font-mono);font-size:12px;letter-spacing:.4px;text-transform:uppercase;padding-left:18px}
  }
  /* prose methodology list (replaces the spoke flip-cards) */
  .rate-method ul{list-style:none;margin:6px 0 10px;padding:0;display:flex;flex-direction:column;gap:10px}
  .rate-method li{font-size:14.5px;line-height:1.55;color:var(--ink);padding-left:16px;border-left:3px solid var(--teal);background:linear-gradient(90deg,rgba(0,200,196,.06),transparent 60%);padding:9px 14px;border-radius:0 9px 9px 0}
  .rate-method li strong{color:var(--navy)}
  .rate-method .wt{display:inline-block;font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--teal-d);margin-left:4px}
  .rate-method .rate-link{font-size:13.5px;color:var(--muted);margin-top:4px}

  /* /reviews hub — brand grid */
  .review-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:16px;margin:20px 0 8px}
  .rev-card{display:flex;flex-direction:column;gap:11px;background:var(--card);border:1px solid #d8d1c0;border-radius:14px;padding:12px 13px 13px;text-decoration:none;color:inherit;box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s,border-color .15s}
  .rev-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--teal)}
  .rev-card .clogo{width:100%;height:62px;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:9px 12px;display:flex;align-items:center;justify-content:center}
  .rev-card .clogo img{max-width:100%;max-height:100%;object-fit:contain}
  .rev-card .rc-body{display:flex;align-items:center;justify-content:space-between;gap:8px}
  .rev-card h3{margin:0;font-size:16px;line-height:1.1}
  .rc-score{font-family:var(--font-display);font-weight:400;font-size:23px;color:var(--teal-d);line-height:1}
  .rc-score i{font-size:11px;color:var(--muted);font-style:normal;margin-left:1px}
  .rc-link{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.5px;color:var(--teal-d);text-transform:uppercase;border-top:1px solid var(--line);padding-top:10px;margin-top:1px}
  .rev-card:hover .rc-link{text-decoration:underline}
  /* brand review hero */
  .rev-eyebrow{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--teal);display:block;margin-bottom:9px}
  /* brand review hero — copy + highlighted bonus on the left, logo plate (replaces scene image) on the right */
  .review-hero .wrap{grid-template-columns:minmax(0,1fr) clamp(230px,30vw,360px)}
  .review-hero .hero-copy{max-width:660px}
  .review-hero .rev-lede{font-size:16px;line-height:1.55;color:#cfd6ea;max-width:560px}
  /* gold-framed welcome-bonus callout */
  .hero-bonus{display:flex;flex-direction:column;gap:6px;margin:0;padding:12px 15px;border-radius:12px;
    background:linear-gradient(135deg,rgba(200,162,75,.18),rgba(200,162,75,.05));border:1px solid rgba(200,162,75,.42);border-left:4px solid var(--gold)}
  .hb-label{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:1.7px;text-transform:uppercase;color:var(--gold)}
  .hb-offer{font-family:var(--font-display);font-weight:400;font-size:19px;line-height:1.15;color:#fff;letter-spacing:.3px}
  .hb-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
  .hb-meta span{font-size:11px;color:#cdd5ea;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:30px;padding:3px 10px}
  .hb-meta b{color:#fff;font-weight:700}
  /* right-column summary plate: logo + score + bonus + CTA, all stacked */
  .rev-plate{display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:18px 16px;border-radius:18px;
    background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.16);box-shadow:0 18px 42px rgba(0,0,0,.24)}
  .rev-plate .clogo{width:100%;height:84px;background:#fff;border:0;border-radius:12px;padding:14px 18px;display:flex;align-items:center;justify-content:center}
  .rev-plate .clogo img{max-width:100%;max-height:100%;object-fit:contain}
  .rev-plate .clogo.noimg b{font-size:19px;color:var(--navy)}
  .rev-plate .tscore{margin:0;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:11px 14px}
  .rev-plate .tscore .tnum{color:#fff}
  .rev-plate .tscore .tlbl{color:var(--teal)}
  .rev-plate .tscore .pbar .trk{background:rgba(255,255,255,.18)}
  .rev-plate .tscore .pbar i{color:#aeb8d4}
  .rev-plate .hero-cta{margin:0;width:100%;justify-content:center}
  @media(max-width:920px){
    .review-hero .wrap{grid-template-columns:1fr}
    .review-hero .rev-plate{margin-top:10px}
  }

  /* 404 page — clean centered design */
  .nf{text-align:center;max-width:700px;margin:0 auto;padding:10px 0}
  .nf-code{font-family:var(--font-display);font-weight:400;font-size:clamp(64px,12vw,104px);line-height:.95;letter-spacing:3px;color:var(--teal);display:block}
  .nf h1{margin:4px 0 12px}
  .nf p{color:#c4cbe6;font-size:17px;max-width:540px;margin:0 auto;line-height:1.5}
  .nf-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:24px}
  .btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.32);color:#fff}
  .btn-ghost:hover{border-color:var(--teal);color:var(--teal);background:rgba(0,200,196,.06)}
  .nf-links{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 4px}
  .nf-links a{display:inline-block;padding:9px 17px;border:1px solid var(--line);border-radius:30px;background:var(--card);color:var(--navy);font-weight:600;font-size:14px;text-decoration:none;transition:border-color .15s,color .15s,box-shadow .15s}
  .nf-links a:hover{border-color:var(--teal);color:var(--teal-d);box-shadow:var(--shadow-sm)}