/* Editorial Magazine — Design Tokens
   Inspired by The Economist + Bloomberg Businessweek + Stratechery.
   Warm cream + navy + rust/oxblood + black. No gradient cards. Flat editorial. */

:root {
  /* === Paper / Surfaces === */
  --paper:           #faf6ef;      /* warm cream — primary canvas */
  --paper-warm:      #f5efe2;      /* warmer alt — for cta-hero / cta-card */
  --paper-dark:      #f1ece2;      /* slightly darker for alt sections */
  --paper-tone:      #e9e2d4;      /* muted band */
  --paper-edge:      #d6cdb9;      /* divider */
  --ink-bg:          #16182d;      /* navy/black for dark sections */
  --ink-bg-2:        #0a0b1a;
  --pull-bg:         #2a2316;      /* warm dark for pull quotes */

  /* === Ink (text on paper) === */
  --ink:             #16182d;      /* navy near-black — body & headers */
  --ink-soft:        #2c3144;
  --ink-muted:       #5a5f72;
  --ink-faint:       #8a8d9c;
  --ink-line:        #c8c2b3;      /* hairlines on paper */
  --ink-inverse:     #faf6ef;
  --ink-inverse-2:   rgba(250,246,239,0.72);

  /* === Editorial accents === */
  --rust:            #b34a2e;      /* primary editorial accent */
  --rust-bright:     #d8593a;
  --rust-deep:       #823621;
  --rust-tint:       #f4ddd3;

  --oxblood:         #6b1f1f;
  --mustard:         #c4943c;
  --olive:           #6a6b3a;
  --teal-deep:       #1d4a4e;
  --plum:            #4b2546;

  /* Category swatches — for color-coded section strips */
  --cat-reviews:     #b34a2e;
  --cat-ranking:     #1d4a4e;
  --cat-networks:    #6a6b3a;
  --cat-payments:    #c4943c;
  --cat-wallets:     #4b2546;
  --cat-tokens:      #823621;
  --cat-rewards:     #2a4d27;
  --cat-games:       #6b1f1f;
  --cat-kyc:         #3b4a6b;
  --cat-about:       #16182d;
  --cat-tools:       #5e3a72;
  --cat-glossary:    #8a6a2c;

  /* Score / status (subdued, no rgb neon) */
  --status-strong:   #2a4d27;
  --status-mid:      #c4943c;
  --status-weak:     #6b1f1f;

  /* === Spacing (editorial rhythm) ===
     s1..s5 hold their original inner-padding values (cards, buttons, small
     gaps). s6..s14 used to be section-level outer rhythm at 32px-200px; the
     spec caps inter-block spacing at 15-20px, so the larger tokens are
     clamped to 20-24px. This compresses every block-level margin/padding
     across the site without touching tight inner spacing inside components. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 20px; --s7: 20px; --s8: 20px; --s9: 20px; --s10: 24px;
  --s12: 24px; --s14: 28px;

  /* === Typography — magazine pairing === */
  /* Display: Inter Tight 800-900 — bold sans for hero/headlines */
  /* Body:    Newsreader / Source Serif — long-form reading */
  /* Caption: Inter — sans for meta/captions/UI chrome */
  /* Numeric: JetBrains Mono — tabular data */
  --font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-body:    'Newsreader', 'Source Serif Pro', 'Charter', Georgia, serif;
  --font-caption: 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  /* aliases (legacy class names use --ff-mono) */
  --ff-mono:      'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Consolas, monospace;

  /* Modular scale */
  --fs-3xs:  12px;
  --fs-2xs:  12px;
  --fs-xxs:  12px;
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 17px;       /* body — slightly larger for editorial reading */
  --fs-md:   19px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  84px;
  --fs-6xl:  108px;
  --fs-7xl:  140px;       /* magazine-cover headlines */

  --lh-tight: 0.98;
  --lh-snug:  1.12;
  --lh-base:  1.62;       /* serif body reads tighter than sans */
  --lh-loose: 1.8;

  --fw-r: 400;
  --fw-m: 500;
  --fw-s: 600;
  --fw-b: 700;
  --fw-k: 800;
  --fw-x: 900;

  /* === Radii — editorial uses minimal radius === */
  --r-0:    0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-full: 9999px;

  /* === Hairlines === */
  --hairline: 1px solid var(--ink-line);
  --hairline-ink: 1px solid var(--ink);
  --rule-thick: 4px solid var(--ink);

  /* === Shadows — editorial uses very subtle === */
  --sh-xs: 0 1px 0 var(--ink-line);
  --sh-sm: 0 1px 0 var(--ink-line), 0 2px 8px rgba(22,24,45,0.04);
  --sh-md: 0 2px 0 var(--ink-line), 0 8px 24px rgba(22,24,45,0.06);

  /* === Containers (editorial widths) === */
  --w-reading:  680px;     /* single-column reading width */
  --w-tight:    760px;
  --w-base:     1080px;
  --w-wide:     1240px;
  --w-mega:     1440px;

  /* === Z === */
  --z-base: 1; --z-elev: 10; --z-sticky: 100; --z-overlay: 500; --z-modal: 900;

  /* === Motion === */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 120ms;
  --t-base: 200ms;

  /* === Touch + safe-area (mobile-first) === */
  --touch-target-min: 44px;
  --container-pad-mobile: 16px;
  --container-pad-tablet: 24px;
  --container-pad-desktop: 32px;
}

@media (max-width: 640px) {
  :root {
    --fs-7xl: 64px;
    --fs-6xl: 56px;
    --fs-5xl: 44px;
    --fs-4xl: 36px;
    --fs-3xl: 28px;
    --fs-2xl: 24px;
    --fs-base: 16px;
    --s10: 80px;
    --s12: 100px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* base.css — Editorial reset + typography */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: var(--fw-r);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern', 'liga', 'onum';
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  word-break: normal;
  overflow-wrap: anywhere;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--rust);
  outline-offset: 3px;
}

/* === Touch targets — minimum 44×44 for actionable elements ===
   WCAG 2.5.5 / 2.5.8 — interactive controls must offer 44×44 hit area.
   Inline <a> in body copy keeps its natural text flow (display: inline);
   block-level CTAs (.cta-block, .btn, nav links) set their own min-height.
   Standalone form controls + button-like elements are normalized here. */
button,
[role="button"],
summary,
label,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  min-height: var(--touch-target-min);
}
button,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"] {
  min-width: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Block-level / standalone <a> CTA links — apply min-height when used as
   button-styled controls. Inline anchors inside <p> stay unaffected. */
a.btn,
a.cta-block,
a.cta-sticky,
a.compare__cta,
a.rank-row__cta,
a.site-header__cta {
  min-height: var(--touch-target-min);
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* === Editorial typography === */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: var(--fw-k);
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  margin: 0 0 var(--s4);
  font-feature-settings: 'kern', 'liga', 'ss01';
}
h1 {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-x);
  letter-spacing: -0.035em;
  line-height: 0.96;
  margin-bottom: var(--s5);
}
h2 {
  font-size: var(--fs-3xl);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin-top: var(--s9);
}
h3 {
  font-size: var(--fs-xl);
  letter-spacing: -0.018em;
  line-height: 1.15;
  margin-top: var(--s7);
}
h4 { font-size: var(--fs-lg); margin-top: var(--s6); }
h5 { font-size: var(--fs-md); }
h6 {
  font-family: var(--font-caption);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
}

/* Body paragraphs — editorial serif */
p {
  margin: 0 0 var(--s4);
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

p.lead, .lead {
  font-size: var(--fs-md);
  line-height: 1.45;
  color: var(--ink-soft);
  font-style: italic;
}

p.standfirst {
  font-size: var(--fs-lg);
  line-height: 1.4;
  font-weight: var(--fw-m);
  color: var(--ink-soft);
  margin-bottom: var(--s7);
}

/* Drop cap for first paragraph of long-form articles */
.dropcap::first-letter,
p.dropcap::first-letter {
  font-family: var(--font-display);
  font-weight: var(--fw-x);
  float: left;
  font-size: 5em;
  line-height: 0.86;
  margin: 8px 12px -4px 0;
  color: var(--rust);
  letter-spacing: -0.04em;
}

/* Links */
a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rust);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  a:hover {
    color: var(--rust);
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
  }
}
a:visited { color: var(--ink); }
.site-header__brand,
.site-header__brand:hover,
.site-footer__brand,
.site-footer__brand:hover { text-decoration: none !important; }

ul, ol {
  margin: 0 0 var(--s5);
  padding-left: var(--s6);
  font-family: var(--font-body);
}
li { margin-bottom: var(--s2); }
li::marker { color: var(--rust); }

ol { list-style-type: decimal; }
ol li::marker { color: var(--rust); font-weight: var(--fw-b); font-family: var(--font-mono); }

strong, b { font-weight: var(--fw-b); color: var(--ink); }
em, i { font-style: italic; }

abbr[title] { text-decoration: underline dotted; cursor: help; }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
:not(pre) > code {
  padding: 1px 6px;
  background: var(--paper-tone);
  color: var(--ink);
  border-radius: var(--r-xs);
  font-size: 0.88em;
}
pre {
  margin: var(--s6) 0;
  padding: var(--s5);
  background: var(--ink-bg);
  color: var(--paper);
  border-radius: var(--r-sm);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  border-left: 4px solid var(--rust);
}
pre code { background: transparent; padding: 0; }

/* Editorial pull quote */
blockquote {
  margin: var(--s8) 0;
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-b);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink);
}
blockquote::before {
  content: "\201C";
  display: block;
  font-size: var(--fs-5xl);
  line-height: 0.5;
  color: var(--rust);
  margin-bottom: var(--s3);
  font-family: var(--font-display);
}
blockquote cite {
  display: block;
  margin-top: var(--s4);
  font-family: var(--font-caption);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  font-style: normal;
  font-weight: var(--fw-s);
}

hr {
  margin: var(--s8) 0;
  border: 0;
  height: 1px;
  background: var(--ink-line);
}

::selection { background: var(--rust); color: var(--paper); }

.skip-link {
  position: absolute; top: -48px; left: var(--s4);
  padding: var(--s2) var(--s4);
  background: var(--ink); color: var(--paper);
  font-family: var(--font-caption);
  font-weight: var(--fw-s); z-index: var(--z-modal);
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: var(--s4); text-decoration: none; }

/* === Container ===
   Container must ALWAYS center horizontally within parent.
   !important on margin-inline because many editorial components
   (.dossier, .verdict, .stat-band etc.) use margin shorthand
   `margin: var(--sN) 0;` which zeros out horizontal centering. */
.container {
  width: 100%;
  max-width: var(--w-base);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: max(var(--container-pad-mobile), env(safe-area-inset-left));
  padding-right: max(var(--container-pad-mobile), env(safe-area-inset-right));
  box-sizing: border-box;
}
.container--reading { max-width: var(--w-reading); }
.container--tight   { max-width: var(--w-tight); }
.container--wide    { max-width: var(--w-wide); }
.container--mega    { max-width: var(--w-mega); }

@media (min-width: 640px) {
  .container {
    padding-left: max(var(--container-pad-tablet), env(safe-area-inset-left));
    padding-right: max(var(--container-pad-tablet), env(safe-area-inset-right));
  }
}
@media (min-width: 1024px) {
  .container {
    padding-left: max(var(--container-pad-desktop), env(safe-area-inset-left));
    padding-right: max(var(--container-pad-desktop), env(safe-area-inset-right));
  }
}

/* === Base tables === */
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: var(--s6) 0;
  font-family: var(--font-caption);
  font-size: var(--fs-sm);
}
th, td {
  padding: var(--s3) var(--s4);
  text-align: left;
  border-bottom: 1px solid var(--ink-line);
}
th {
  font-family: var(--font-caption);
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: var(--fw-s);
  border-bottom: 2px solid var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  tbody tr:hover { background: var(--paper-dark); }
}

/* Numeric columns — tabular */
td[data-num], .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* layout.css — Editorial header/footer/nav/breadcrumbs */

/* === HEADER — magazine masthead === */
.site-header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: var(--paper);
  border-bottom: 1px solid var(--ink-line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
  gap: var(--s5);
  position: relative;
}
.site-header::after {
  /* magazine masthead double-rule */
  content: ""; position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 1px;
  background: var(--ink-line);
}
.site-header__brand {
  display: inline-flex; align-items: center;
  gap: var(--s3);
  color: var(--ink);
  flex-shrink: 0;
}
@media (hover: hover) and (pointer: fine) {
  .site-header__brand:hover .site-header__name { color: var(--rust); }
}
.site-header__logo svg { width: 44px; height: 44px; display: block; }
.site-header__brand-text {
  display: inline-flex; flex-direction: column;
  align-items: center;        /* center the GUIDE tag under WEB3 CASINO */
  gap: 2px; line-height: 1;
}
.site-header__name {
  font-family: var(--font-display);
  font-weight: var(--fw-x);
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: none;
  white-space: nowrap;
}
.site-header__tag {
  font-family: var(--font-caption);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.32em;       /* extra tracking — looks like a masthead stamp */
  color: var(--rust);
  font-weight: var(--fw-k);
  text-align: center;
  width: 100%;
  padding-top: 1px;
}
@media (max-width: 540px) {
  .site-header__name { font-size: var(--fs-md); }
  .site-header__tag { font-size: 14px; letter-spacing: 0.28em; }
  .site-header__logo svg { width: 36px; height: 36px; }
}

/* === NAV — editorial sections === */
.site-nav { align-self: stretch; display: flex; align-items: stretch; flex: 1 1 auto; justify-content: center; min-width: 0; }
.site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 0; height: 100%; }
.site-nav__item { display: flex; align-items: center; position: static; }
.site-nav__top {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0;
  color: var(--ink);
  font-family: var(--font-caption);
  font-size: var(--fs-xs);
  font-weight: var(--fw-s);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 10px var(--s4);
  min-height: 44px;
  cursor: pointer;
  text-decoration: none; white-space: nowrap;
  position: relative;
  transition: color var(--t-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .site-nav__top:hover { color: var(--rust); }
}
.site-nav__top::after {
  content: ""; position: absolute;
  bottom: 0; left: var(--s4); right: var(--s4);
  height: 2px; background: var(--rust);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-fast) var(--ease);
}
.site-nav__item.is-open > .site-nav__top::after,
.site-nav__item.is-active > .site-nav__top::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .site-nav__top:hover::after { transform: scaleX(1); }
}
.site-nav__chev { font-size: 14px; line-height: 1; color: var(--ink-muted); transition: transform var(--t-fast); }
.site-nav__item.is-open > .site-nav__top .site-nav__chev { transform: rotate(180deg); }

.site-nav__panel {
  position: absolute; top: 100%; left: 0; right: 0;
  padding-top: 1px; z-index: var(--z-elev);
  opacity: 0; pointer-events: none; transform: translateY(-4px);
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.site-nav__panel[inert] { visibility: hidden; }
.site-nav__item.is-open > .site-nav__panel {
  opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible;
}
.site-nav__panel-inner {
  background: var(--paper);
  border-top: 1px solid var(--ink-line);
  border-bottom: 4px solid var(--ink);
  padding: var(--s6);
  display: grid;
  grid-template-columns: repeat(var(--panel-cols, 3), minmax(0, 1fr));
  gap: var(--s5) var(--s7);
  width: 100%;
  box-shadow: 0 8px 20px rgba(22,24,45,0.08);
}
.site-nav__col--span-2 { grid-column: span 2; }
.site-nav__col--span-3 { grid-column: span 3; }
/* The base .site-nav__col-list is display:flex below — that breaks multi-col
   layout. For the cols-N variants we switch back to block so CSS multicolumn
   (column-count) actually creates N visual columns. */
.site-nav__col-list.site-nav__col-list--cols-2 { display: block; column-count: 2; column-gap: var(--s5); }
.site-nav__col-list.site-nav__col-list--cols-3 { display: block; column-count: 3; column-gap: var(--s5); }
.site-nav__col-list--cols-2 > li,
.site-nav__col-list--cols-3 > li {
  break-inside: avoid;
}
.site-nav__col + .site-nav__col { position: relative; }
.site-nav__col + .site-nav__col::before {
  content: ""; position: absolute;
  left: calc(var(--s7) * -0.5); top: 0; bottom: 0;
  width: 1px; background: var(--ink-line);
}
.site-nav__col-head {
  font-family: var(--font-caption);
  font-size: 14px; font-weight: var(--fw-k);
  letter-spacing: 0.18em; text-transform: uppercase;
  margin: 0 0 var(--s3); color: var(--rust);
}
.site-nav__col-head a { color: var(--rust); text-decoration: none; }
.site-nav__col-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.site-nav__col-list a {
  display: flex; align-items: center;
  padding: 10px 0;
  min-height: var(--touch-target-min);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  text-decoration: none;
  border-left: 0;
  transition: color var(--t-fast);
}
@media (hover: hover) and (pointer: fine) {
  .site-nav__col-list a:hover { color: var(--rust); }
}
.site-nav__col-list a.is-active,
.site-nav__col-list a[aria-current="page"] { color: var(--rust); font-weight: var(--fw-s); }

.site-header__cta,
.site-header__cta:link,
.site-header__cta:visited {
  display: inline-flex; align-items: center;
  padding: 10px var(--s5);
  min-height: var(--touch-target-min);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-caption);
  font-weight: var(--fw-s);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: 0;
  text-decoration: none; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
@media (hover: hover) and (pointer: fine) {
  .site-header__cta:hover,
  .site-header__cta:visited:hover { background: var(--rust); color: var(--paper); text-decoration: none; }
}

.site-header__toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
  width: 44px; height: 44px;
  cursor: pointer; position: relative; padding: 0;
}
.site-header__toggle .burger-bar {
  display: block; position: absolute;
  left: 10px; right: 10px; height: 2px;
  background: var(--ink);
  transition: transform var(--t-fast), opacity var(--t-fast), top var(--t-fast);
}
.site-header__toggle .burger-bar:nth-child(1) { top: 13px; }
.site-header__toggle .burger-bar:nth-child(2) { top: 21px; }
.site-header__toggle .burger-bar:nth-child(3) { top: 29px; }
.site-header[data-open="true"] .site-header__toggle .burger-bar:nth-child(1) { top: 21px; transform: rotate(45deg); }
.site-header[data-open="true"] .site-header__toggle .burger-bar:nth-child(2) { opacity: 0; }
.site-header[data-open="true"] .site-header__toggle .burger-bar:nth-child(3) { top: 21px; transform: rotate(-45deg); }

@media (max-width: 960px) {
  /* === Mobile: hide desktop nav + show burger toggle ===
     Includes :link/:visited to match the (0,2,0) specificity of the desktop
     .site-header__cta:link/:visited rule — otherwise visited CTA stays visible. */
  .site-nav,
  .site-header__cta,
  .site-header__cta:link,
  .site-header__cta:visited { display: none; }
  .site-header__toggle { display: inline-flex; align-items: center; justify-content: center; }

  /* === Drawer surface — full-width sheet anchored under masthead.
     IMPORTANT: only .site-nav becomes the drawer. The header CTA stays hidden
     on mobile — keeping it as a sibling with `position: fixed; top: 76px` makes
     it overlap the drawer and obscure the first nav item. Users can still reach
     /reviews/ via the Casinos → Brand reviews link inside the drawer.
     CRITICAL: justify-content: flex-start overrides desktop's `center`. With
     center, when an opened panel makes content taller than the drawer, the
     vertical overflow is split between top and bottom, scrolling the first
     items above the visible drawer area. === */
  .site-header[data-open="true"] .site-nav {
    display: flex;
    position: fixed;
    top: 76px; left: 0; right: 0;
    background: var(--paper);
    border-top: 1px solid var(--ink-line);
    border-bottom: 4px solid var(--ink);
    padding: var(--s4);
    align-items: stretch;
    justify-content: flex-start;
    box-shadow: 0 12px 28px rgba(22,24,45,0.14);
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    z-index: var(--z-sticky);
  }

  /* === Mobile nav list === */
  .site-header[data-open="true"] .site-nav__list {
    flex-direction: column; gap: 0; width: 100%;
    /* Desktop rule sets height: 100% which, inside the drawer's column flex,
       gives the list a fixed 100%-of-drawer height. When the panel expands
       and content overflows, Chrome lays the list children out aligned to
       the bottom (looking like negative offsetTop). Reset to auto on mobile
       so the list shrinks/grows naturally. */
    height: auto;
    align-items: stretch;
  }
  /* CRITICAL: item must be flex-column so panel stacks BELOW trigger, not next to it.
     Desktop default is flex-row + align-items: center, which squeezed the panel into a
     106px-wide flex sibling rendered to the right of the button (the broken state user
     screenshotted). */
  .site-header[data-open="true"] .site-nav__item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
  }

  /* === Top-level trigger — large hit area, full row === */
  .site-header[data-open="true"] .site-nav__top {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--s4) var(--s2);
    min-height: 56px;
    border-bottom: 1px solid var(--ink-line);
    font-size: var(--fs-md);
    font-weight: var(--fw-b);
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .site-header[data-open="true"] .site-nav__top::after { display: none; }

  /* Chevron flips clearly on mobile */
  .site-header[data-open="true"] .site-nav__chev {
    font-size: 18px;
    color: var(--rust);
    transition: transform var(--t-fast) var(--ease);
  }
  .site-header[data-open="true"] .site-nav__item.is-open > .site-nav__top .site-nav__chev {
    transform: rotate(180deg);
  }

  /* === Mobile accordion panel — max-height transition (bulletproof, no grid trick) === */
  .site-header[data-open="true"] .site-nav__panel {
    position: static;
    transform: none;
    opacity: 1; visibility: visible; pointer-events: none;
    padding: 0; z-index: auto;
    background: transparent; box-shadow: none; border: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--t-base) var(--ease);
  }
  .site-header[data-open="true"] .site-nav__item.is-open > .site-nav__panel {
    max-height: 2400px;     /* large enough for the largest panel; only sets ceiling */
    pointer-events: auto;
  }

  /* === Panel content — single-column stack, no dividers, no grid === */
  .site-header[data-open="true"] .site-nav__panel-inner {
    background: var(--paper-dark);
    display: flex; flex-direction: column; gap: var(--s4);
    grid-template-columns: none;
    padding: var(--s4) var(--s2);
    margin: 0;
    border: 0; box-shadow: none;
    width: 100%;
  }
  .site-header[data-open="true"] .site-nav__col {
    width: 100%; min-width: 0;
    grid-column: auto !important;     /* defeat desktop span rules */
  }
  .site-header[data-open="true"] .site-nav__col + .site-nav__col::before { display: none; }
  .site-header[data-open="true"] .site-nav__col-head {
    font-size: 14px;
    margin: 0 0 var(--s2);
    padding-bottom: var(--s2);
    border-bottom: 1px solid var(--ink-line);
  }
  .site-header[data-open="true"] .site-nav__col-list,
  .site-header[data-open="true"] .site-nav__col-list.site-nav__col-list--cols-2,
  .site-header[data-open="true"] .site-nav__col-list.site-nav__col-list--cols-3 {
    display: flex; flex-direction: column;
    column-count: auto;
    gap: 0;
  }
  .site-header[data-open="true"] .site-nav__col-list a {
    padding: 12px 0;
    min-height: 44px;
    border-bottom: 1px solid var(--ink-line-soft, rgba(22,24,45,0.06));
    font-size: var(--fs-sm);
  }
  .site-header[data-open="true"] .site-nav__col-list li:last-child a {
    border-bottom: 0;
  }

}
html.has-open-menu, body.has-open-menu { overflow: hidden; }

/* === RG STRIP — editorial slim warning rail === */
.rg-strip {
  background: var(--ink-bg);
  color: var(--paper);
  font-family: var(--font-caption);
  font-size: var(--fs-xs);
}
.rg-strip__inner {
  display: flex; flex-wrap: wrap;
  align-items: center;       /* vertical-centre badge + links + text */
  justify-content: flex-start; /* pack from the left; warning text fills, links chain after */
  gap: var(--s2) var(--s3);
  padding: var(--s2) 0;
  color: var(--ink-inverse-2);
  line-height: 1.4;
}
/* Override the global head.php critical rule "a { min-height: 44px }" for
   anchors inside the slim rg-strip so they sit on the same baseline as the
   warning text instead of being forced to 44px tall. */
.rg-strip__inner a {
  min-height: 0;
  display: inline;
  line-height: 1.4;
}
.rg-strip__inner span {
  line-height: 1.4;
}
.rg-strip__badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rust); color: var(--paper);
  font-family: var(--font-caption);
  font-weight: var(--fw-k);
  min-width: 28px; padding: 2px 8px;
  font-size: 14px; letter-spacing: 0.08em;
}
.rg-strip a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--rust); text-decoration-thickness: 1px; }
@media (hover: hover) and (pointer: fine) {
  .rg-strip a:hover { color: var(--rust-bright); text-decoration: none; }
}

/* === BREADCRUMBS — editorial slug trail === */
.breadcrumbs {
  padding: var(--s5) 0 var(--s2);
  font-family: var(--font-caption);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
}
.breadcrumbs ol {
  display: flex; flex-wrap: wrap;
  align-items: baseline;     /* align crumbs by text baseline */
  row-gap: var(--s2);
  column-gap: 0;
  padding: 0; margin: 0; list-style: none;
  line-height: 1.4;
}
.breadcrumbs li {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s2);
  line-height: 1.4;
}
.breadcrumbs li + li::before {
  content: "·"; color: var(--ink-muted); margin: 0 var(--s2);
  font-weight: var(--fw-b);
  line-height: 1.4;
}
.breadcrumbs a {
  color: var(--ink-muted); text-decoration: none;
  font-weight: var(--fw-s);
  transition: color var(--t-fast);
  /* Override the global head.php critical rule "a { min-height: 44px }"
     so the link's box doesn't stretch and pull text off baseline. */
  min-height: 0;
  display: inline;
  line-height: 1.4;
}
.breadcrumbs span,
.breadcrumbs li > * {
  line-height: 1.4;
}
@media (hover: hover) and (pointer: fine) {
  .breadcrumbs a:hover { color: var(--rust); text-decoration: underline; }
}
.breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: var(--fw-b); }

/* === Content wrap === */
.content-wrap { padding: 0 0 var(--s10); }
.article-body { color: var(--ink); }
.article-body > *:first-child { margin-top: 0; }

/* === FOOTER — editorial colophon === */
.site-footer {
  background: var(--ink-bg);
  color: var(--ink-inverse-2);
  padding: var(--s9) 0 var(--s5);
  margin-top: var(--s12);
  font-family: var(--font-caption);
  font-size: var(--fs-sm);
  border-top: 6px solid var(--rust);
}
.site-footer a { color: var(--paper); text-decoration: underline; text-decoration-color: rgba(250,246,239,0.35); }
@media (hover: hover) and (pointer: fine) {
  .site-footer a:hover { color: var(--rust-bright); text-decoration-color: currentColor; }
}
.site-footer__brand-row { margin-bottom: var(--s7); padding-bottom: var(--s6); border-bottom: 1px solid rgba(250,246,239,0.18); }
.site-footer__brand { display: inline-flex; align-items: center; gap: var(--s3); color: var(--paper); text-decoration: none; }
.site-footer__logo svg { width: 48px; height: 48px; display: block; }
.site-footer__brand-text { display: inline-flex; flex-direction: column; gap: 2px; line-height: 1.2; }
.site-footer__name {
  font-family: var(--font-display);
  font-weight: var(--fw-x); font-size: var(--fs-lg);
  color: var(--paper); letter-spacing: -0.02em;
}
.site-footer__tag {
  font-family: var(--font-caption);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(250,246,239,0.55);
}
.site-footer__grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--s6); margin-bottom: var(--s7);
}
@media (max-width: 1080px) { .site-footer__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer__col h3 {
  font-family: var(--font-caption);
  font-size: 14px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--rust-bright); margin-bottom: var(--s4);
  font-weight: var(--fw-k);
}
.site-footer__col ul { list-style: none; padding: 0; margin: 0; }
.site-footer__col li { margin: 0 0 var(--s2); }
.site-footer__col a { color: rgba(250,246,239,0.85); text-decoration: none; font-size: var(--fs-sm); }
@media (hover: hover) and (pointer: fine) {
  .site-footer__col a:hover { color: var(--paper); text-decoration: underline; }
}
.site-footer__trust {
  padding: var(--s5) 0 var(--s3);
  border-top: 1px solid rgba(250,246,239,0.18);
  display: flex; flex-wrap: wrap; gap: var(--s4); align-items: center;
  font-size: var(--fs-xs); color: rgba(250,246,239,0.7);
}
.site-footer__trust .age-badge {
  background: var(--rust); color: var(--paper);
  font-weight: var(--fw-k); padding: 3px 10px;
  font-size: 14px; letter-spacing: 0.06em;
}
.site-footer__rg-note {
  padding: var(--s3) 0 var(--s4);
  border-top: 1px solid rgba(250,246,239,0.18);
  font-size: 14px; color: rgba(250,246,239,0.55); line-height: 1.55;
}
.site-footer__bottom {
  padding-top: var(--s4);
  border-top: 1px solid rgba(250,246,239,0.18);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(250,246,239,0.55);
  display: flex; flex-wrap: wrap; gap: var(--s4);
  justify-content: space-between; align-items: center;
}
.site-footer__legal { display: inline-flex; flex-wrap: wrap; gap: var(--s4); }
/* components.css — Editorial Magazine UI
   Flat editorial blocks. No gradient cards. Hairline rules. Serif body. */

/* ====================================================
   COVER — magazine-cover hero for home + flagship hubs
   ==================================================== */
.cover {
  padding: var(--s9) 0 var(--s8);
  border-bottom: 1px solid var(--ink);
  position: relative;
}

/* === Casino-review pages: glue cover into the visit CTA hero so the two
   sit as a single compact block (per task 12 spec). The cover loses its
   bottom rule + padding, and the CTA hero has its top margin zeroed so it
   abuts the cover. */
.cover:has(+ aside.cta-block.cta-hero) {
  padding-bottom: var(--s3);
  border-bottom: 0;
}
.cover + aside.cta-block.cta-hero {
  margin-top: 0;
  border-top: 1px solid var(--ink-line);
}
.cover__masthead-rule {
  height: 4px; background: var(--ink);
  margin: 0 0 var(--s7);
}
.cover__category {
  display: inline-block;
  font-family: var(--font-caption);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: var(--fw-k);
  padding: 4px 12px;
  background: var(--ink);
  color: var(--paper);
  margin-bottom: var(--s3);  /* tighter: 12px, was 20px after token shrink */
}
/* When the eyebrow sits between the masthead-rule and a sibling section
   (e.g. on review pages where the cover precedes the dossier), kill the
   extra rule below the badge to avoid a double divider. */
.cover .cover__category + * { margin-top: var(--s2); }
.cover__category--rust { background: var(--rust); }
.cover__category--teal { background: var(--teal-deep); }
.cover__category--olive { background: var(--olive); }
.cover__category--plum { background: var(--plum); }
.cover__category--oxblood { background: var(--oxblood); }
.cover__category--mustard { background: var(--mustard); color: var(--ink); }
.cover__title {
  font-family: var(--font-display);
  font-weight: var(--fw-x);
  font-size: var(--fs-6xl);
  line-height: 0.92;
  letter-spacing: -0.04em;
  margin: 0 0 var(--s5);
  color: var(--ink);
}
.cover__title--wide,
.cover__title--narrow { /* legacy variants — no width constraint, full container */ }
.cover__sub {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-style: italic;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 var(--s6);
}
.cover__byline {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s5);
  font-family: var(--font-caption);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  padding-top: var(--s4);
  border-top: 1px solid var(--ink-line);
}
.cover__byline a { color: var(--ink); text-decoration: none; font-weight: var(--fw-b); }
.cover__byline strong { color: var(--ink); font-weight: var(--fw-b); }

/* Asymmetric cover with side note */
.cover--asym .container {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--s8);
  align-items: end;
}
.cover--asym .cover__side {
  padding-bottom: var(--s2);
  border-left: 1px solid var(--ink-line);
  padding-left: var(--s5);
  font-family: var(--font-caption);
  font-size: var(--fs-sm);
  color: var(--ink-soft);
  line-height: 1.5;
}
.cover--asym .cover__side strong { color: var(--ink); display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: var(--s2); }
@media (max-width: 900px) { .cover--asym .container { grid-template-columns: 1fr; } .cover--asym .cover__side { border-left: 0; border-top: 1px solid var(--ink-line); padding-left: 0; padding-top: var(--s4); margin-top: var(--s5); } }

@media (max-width: 640px) {
  .cover { padding: var(--s7) 0 var(--s6); }
  .cover__title { font-size: var(--fs-4xl); }
  .cover__sub { font-size: var(--fs-base); }
}

/* ====================================================
   ARTICLE PROPER — single-column long-form reading
   ==================================================== */
.article {
  padding: var(--s7) var(--s5) var(--s9);
  width: 100%;
  max-width: var(--w-base);
  margin-left: auto;
  margin-right: auto;
  font-family: var(--font-body);
  box-sizing: border-box;
}
.article__lead {
  font-size: var(--fs-lg);
  line-height: 1.45;
  color: var(--ink);
  font-weight: var(--fw-m);
  margin-bottom: var(--s7);
  font-style: italic;
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--ink-line);
}
.article h2 {
  font-size: var(--fs-2xl);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: var(--s8);
  margin-bottom: var(--s4);
  position: relative;
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--ink-line);
}
.article h2::before {
  content: "§";
  display: inline-block;
  color: var(--rust);
  margin-right: var(--s2);
  font-weight: var(--fw-r);
}
.article h3 {
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
  margin-top: var(--s7);
}
.article p {
  margin: 0 0 var(--s5);
}
.article p + p { text-indent: 1.5em; }  /* magazine indent for subsequent paragraphs */
.article p.no-indent + p { text-indent: 0; }

/* Sidebar annotation — editorial side note */
.article__side {
  float: right;
  width: 240px;
  margin: 0 calc(-1 * var(--s7)) var(--s5) var(--s7);
  padding: var(--s4) var(--s5);
  background: var(--paper-tone);
  border-left: 3px solid var(--rust);
  font-family: var(--font-caption);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-soft);
}
.article__side h4 {
  font-family: var(--font-caption);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  margin: 0 0 var(--s2);
}
@media (max-width: 900px) {
  .article__side { float: none; width: auto; margin: var(--s5) 0; }
}

/* ====================================================
   STAT BAND — editorial fact bar (replaces metric cards)
   ==================================================== */
.stat-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  margin: var(--s7) 0;
  padding: var(--s5) 0;
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.stat-band__cell {
  padding: 0 var(--s4);
  border-right: 1px solid var(--ink-line);
}
.stat-band__cell:last-child { border-right: 0; }
.stat-band__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-x);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat-band__label {
  display: block;
  margin-top: var(--s2);
  font-family: var(--font-caption);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  font-weight: var(--fw-s);
}
.stat-band__hint {
  display: block;
  margin-top: 4px;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--ink-faint);
  font-style: italic;
}
@media (max-width: 640px) {
  .stat-band { padding: var(--s4) 0; }
  .stat-band__cell { padding: var(--s2) var(--s3); border-right: 0; border-bottom: 1px solid var(--ink-line); }
  .stat-band__cell:last-child { border-bottom: 0; }
  .stat-band__value { font-size: var(--fs-2xl); }
}

/* ====================================================
   BIG NUMBER — Bloomberg Businessweek-style giant stat
   ==================================================== */
.big-number {
  margin: var(--s8) 0;
  padding: var(--s8) 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  /* Stack value + label + caption and keep them axis-centred. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--s2);
}
.big-number__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-7xl);
  font-weight: var(--fw-x);
  line-height: 0.85;
  letter-spacing: -0.05em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.big-number__label {
  display: block;
  margin-top: var(--s4);
  font-family: var(--font-caption);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  font-weight: var(--fw-s);
}
.big-number__caption {
  display: block;
  margin: var(--s3) auto 0;
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-base);
  color: var(--ink-soft);
  line-height: 1.45;
}

/* ====================================================
   BYLINE & AUTHOR
   ==================================================== */
.byline-bar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s4);
  font-family: var(--font-caption);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  padding: var(--s4) 0;
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  margin: 0 0 var(--s5);
}
.byline-bar img {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--ink-line);
}
.byline-bar strong { color: var(--ink); font-weight: var(--fw-b); }
.byline-bar a { color: var(--ink); text-decoration: none; font-weight: var(--fw-b); }
@media (hover: hover) and (pointer: fine) {
  .byline-bar a:hover { color: var(--rust); }
}

/* Author profile feature */
.author-feature {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--s8);
  align-items: start;
  margin: var(--s7) 0;
  padding-bottom: var(--s7);
  border-bottom: 4px solid var(--ink);
}
.author-feature__portrait {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(40%);
}
.author-feature__body h1 {
  font-size: var(--fs-5xl);
  letter-spacing: -0.035em;
  margin: 0 0 var(--s3);
}
.author-feature__role {
  font-family: var(--font-caption);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--rust);
  font-weight: var(--fw-k);
  margin-bottom: var(--s4);
}
.author-feature__bio {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-soft);
}
.author-feature__meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s4);
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--ink-line);
  font-family: var(--font-caption);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.author-feature__meta dt { color: var(--ink-muted); margin-bottom: 4px; }
.author-feature__meta dd { color: var(--ink); margin: 0; font-weight: var(--fw-s); }
.author-feature__meta dd a { color: var(--rust); text-decoration: none; }
@media (max-width: 720px) {
  .author-feature { grid-template-columns: 1fr; }
  .author-feature__portrait { max-width: 200px; }
}

/* ====================================================
   PULL QUOTE — large editorial quote
   ==================================================== */
.pull-quote {
  margin: var(--s8) 0;
  padding: var(--s6) 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-b);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.pull-quote::before { content: "\201C"; color: var(--rust); display: block; line-height: 0.8; }
.pull-quote cite {
  display: block; margin-top: var(--s4);
  font-family: var(--font-caption);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
  font-weight: var(--fw-s);
  font-style: normal;
}

/* ====================================================
   CASINO RANK LEADERBOARD — editorial style
   ==================================================== */
.rank-table {
  margin: var(--s7) 0;
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.rank-row {
  display: grid;
  grid-template-columns: 56px 88px 1fr auto auto;
  gap: var(--s5);
  align-items: center;
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--ink-line);
}
.rank-row:last-child { border-bottom: 0; }
.rank-row__num {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-x);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.rank-row[data-rank="1"] .rank-row__num { color: var(--rust); font-size: var(--fs-4xl); }
.rank-row[data-rank="2"] .rank-row__num { color: var(--rust-deep); font-size: var(--fs-3xl); }
.rank-row[data-rank="3"] .rank-row__num { color: var(--oxblood); font-size: var(--fs-3xl); }
.rank-row__logo {
  width: 80px; height: 80px;
  object-fit: contain;
  padding: 4px;
  background: var(--paper);
  border: 1px solid var(--ink-line);
}
.rank-row__name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-k);
  margin: 0 0 var(--s1);
  color: var(--ink);
  letter-spacing: -0.018em;
}
.rank-row__hook {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
}
.rank-row__chips {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  margin-top: var(--s2);
  font-family: var(--font-caption);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
}
.rank-row__chips span::after { content: "·"; margin-left: var(--s2); color: var(--ink-line); }
.rank-row__chips span:last-child::after { display: none; }
.rank-row__score {
  display: flex; flex-direction: column;
  align-items: center;
  min-width: 80px;
}
.rank-row__score-val {
  font-family: var(--font-mono);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-b);
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.rank-row__score-label {
  font-family: var(--font-caption);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-muted);
  margin-top: var(--s2);
  font-weight: var(--fw-s);
}
.rank-row__cta {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-caption);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: var(--fw-b);
  padding: 10px 18px;
  min-height: var(--touch-target-min);
  background: var(--ink);
  color: var(--paper) !important;
  text-decoration: none !important;
  border: 0;
  white-space: nowrap;
  transition: background var(--t-fast);
}
@media (hover: hover) and (pointer: fine) {
  .rank-row__cta:hover { background: var(--rust); }
}

/* Rank-row CTA + Read-review pairing (added for fake-link + dual link spec) */
.rank-row__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 4px;
  min-width: 140px;
}
/* Force margin:0 on EVERY child to enforce the ≤10px spacing spec.
   Use !important to override the inherited .cta-block margin: var(--s5) auto
   which would push buttons 24px apart. */
.rank-row__actions > *,
.rank-row__actions > .cta-block,
.rank-row__actions > a {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.rank-row__logo-link,
.rank-row__logo-link:link,
.rank-row__logo-link:visited {
  display: inline-flex;
  line-height: 0;
  text-decoration: none;
  border: 0;
  transition: opacity var(--t-fast);
}
@media (hover: hover) and (pointer: fine) {
  .rank-row__logo-link:hover { opacity: 0.85; }
}
.rank-row__name-link,
.rank-row__name-link:link,
.rank-row__name-link:visited {
  color: var(--ink);
  text-decoration: none;
  border: 0;
}
@media (hover: hover) and (pointer: fine) {
  .rank-row__name-link:hover { color: var(--rust); }
}
.rank-row__review,
.rank-row__review:link,
.rank-row__review:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-caption);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: var(--fw-b);
  padding: 8px 14px;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--ink-line);
  background: transparent;
  transition: background var(--t-fast), color var(--t-fast);
  min-height: var(--touch-target-min);
}
@media (hover: hover) and (pointer: fine) {
  .rank-row__review:hover { background: var(--ink); color: var(--paper); }
}

/* Tablet 720-860px: 3-col grid */
@media (max-width: 860px) and (min-width: 641px) {
  .rank-row {
    grid-template-columns: 44px 72px 1fr;
    grid-template-rows: auto auto;
    gap: var(--s4);
    padding: var(--s5) 0;
  }
  .rank-row__score { grid-column: 1 / 4; flex-direction: row; gap: var(--s4); justify-content: flex-start; padding-top: var(--s3); align-items: baseline; }
  .rank-row__actions { grid-column: 1 / 4; flex-direction: row; gap: 12px; min-width: 0; }
  .rank-row__cta { flex: 1; width: auto; min-width: 0; }
  .rank-row__review { flex: 1; }
  .rank-row__num { font-size: var(--fs-2xl); }
  .rank-row__logo { width: 72px; height: 72px; }
  .rank-row__name { font-size: var(--fs-lg); }
}

/* Mobile ≤640px: vertical card layout — full visual hierarchy stack */
@media (max-width: 640px) {
  .rank-row {
    display: grid;
    grid-template-columns: 88px 1fr;
    grid-template-rows: auto auto auto auto;
    gap: var(--s3) var(--s4);
    padding: var(--s5) var(--s4);
    border: 1px solid var(--ink-line);
    border-radius: 4px;
    margin-bottom: var(--s3);
    background: var(--paper);
  }
  .rank-row:last-child { margin-bottom: 0; }
  /* HTML wraps name+hook+chips in an unclassed <div>. Use display:contents
     so its children participate directly in the parent grid. */
  .rank-row > div:not([class]) { display: contents; }
  /* Row 1: logo (left, 88x88) | rank number top-right of content */
  .rank-row__logo, .rank-row__logo-link {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 88px; height: 88px;
    align-self: start;
  }
  .rank-row__num {
    grid-column: 2;
    grid-row: 1;
    font-size: var(--fs-xl);
    text-align: left;
    color: var(--rust);
    font-weight: var(--fw-x);
    margin: 0;
    line-height: 1;
    padding-top: 2px;
  }
  .rank-row[data-rank="1"] .rank-row__num,
  .rank-row[data-rank="2"] .rank-row__num,
  .rank-row[data-rank="3"] .rank-row__num { font-size: var(--fs-xl); }
  /* Row 2: brand name (col 2, under rank) */
  .rank-row__name, .rank-row__name-link {
    grid-column: 2;
    grid-row: 2;
    font-size: var(--fs-xl);
    line-height: 1.1;
    margin: 0;
  }
  /* Row 3: hook (full width) */
  .rank-row__hook {
    grid-column: 1 / 3;
    grid-row: 3;
    font-size: 15px;
    line-height: 1.5;
    margin-top: var(--s2);
  }
  /* Row 4: chips (full width) */
  .rank-row__chips {
    grid-column: 1 / 3;
    grid-row: 4;
    font-size: 12px;
    margin-top: 0;
  }
  /* Row 5: score */
  .rank-row__score {
    grid-column: 1 / 3;
    grid-row: 5;
    flex-direction: row;
    gap: var(--s3);
    align-items: baseline;
    justify-content: flex-start;
    padding-top: var(--s4);
    border-top: 1px solid var(--ink-line);
    margin-top: var(--s3);
  }
  .rank-row__score-val { font-size: var(--fs-2xl); }
  .rank-row__score-label { margin-top: 0; }
  /* Row 6: actions (CTA buttons) */
  .rank-row__actions {
    grid-column: 1 / 3;
    grid-row: 6;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin-top: var(--s2);
    min-width: 0;
  }
  .rank-row__cta {
    width: 100%;
    padding: 14px 18px;
    font-size: 14px;
    text-align: center;
  }
  .rank-row__review {
    text-align: center;
    padding: 10px 14px;
  }
  /* Defensive: any nested callout/aside inside rank-row spans full row on mobile */
  .rank-row .callout,
  .rank-row aside {
    grid-column: 1 / 3;
    margin: var(--s2) 0;
    padding: var(--s3);
    font-size: 14px;
  }
}

/* ====================================================
   BRAND TRIO — 3-card compact grid for topic-relevant picks
   (used on payment subpages: after hero, before main text)
   ==================================================== */
.brand-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s4);
  margin: var(--s6) 0;
}
@media (max-width: 1024px) {
  .brand-trio { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .brand-trio { grid-template-columns: 1fr; }
}
.brand-trio__title {
  grid-column: 1 / -1;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-k);
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 var(--s2);
}
.brand-trio__card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s5);
  border: 1px solid var(--ink-line);
  border-top: 4px solid var(--ink);
  background: var(--paper);
  min-height: 100%;
}
.brand-trio__head {
  display: flex;
  align-items: center;
  gap: var(--s3);
}
.brand-trio__logo-link,
.brand-trio__logo-link:link,
.brand-trio__logo-link:visited {
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
  text-decoration: none;
  border: 0;
  transition: opacity var(--t-fast);
}
@media (hover: hover) and (pointer: fine) {
  .brand-trio__logo-link:hover { opacity: 0.85; }
}
.brand-trio__logo {
  width: 56px; height: 56px;
  object-fit: contain;
  background: var(--paper);
  border: 1px solid var(--ink-line);
  padding: 4px;
  flex-shrink: 0;
  display: block;
}
.brand-trio__name {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-k);
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
  flex-grow: 1;
  line-height: 1.1;
}
.brand-trio__score {
  font-family: var(--font-mono);
  font-size: var(--fs-xl);
  font-weight: var(--fw-b);
  font-variant-numeric: tabular-nums;
  color: var(--rust);
  line-height: 1;
}
.brand-trio__hook {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.brand-trio__chips {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  font-family: var(--font-caption);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  margin-top: auto;
}
.brand-trio__chips span::after { content: "·"; margin-left: var(--s2); color: var(--ink-line); }
.brand-trio__chips span:last-child::after { display: none; }
.brand-trio__actions {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
}
/* Same .cta-block margin override as on rank-row__actions. */
.brand-trio__actions > .cta-block,
.brand-trio__actions > a { margin: 0; }
.brand-trio__name-link,
.brand-trio__name-link:link,
.brand-trio__name-link:visited {
  color: var(--ink);
  text-decoration: none;
  border: 0;
  flex-grow: 1;
  line-height: 1.1;
  min-width: 0;
}
.brand-trio__name-link h3 { margin: 0; }
@media (hover: hover) and (pointer: fine) {
  .brand-trio__name-link:hover { color: var(--rust); }
}
.brand-trio__cta,
.brand-trio__cta:link,
.brand-trio__cta:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  font-family: var(--font-caption);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: var(--fw-b);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  min-height: var(--touch-target-min);
  transition: background var(--t-fast);
}
@media (hover: hover) and (pointer: fine) {
  .brand-trio__cta:hover,
  .brand-trio__cta:visited:hover { background: var(--rust); color: var(--paper); }
}
.brand-trio__review,
.brand-trio__review:link,
.brand-trio__review:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  font-family: var(--font-caption);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: var(--fw-b);
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--ink-line);
  background: transparent;
  transition: background var(--t-fast), color var(--t-fast);
  min-height: var(--touch-target-min);
}
@media (hover: hover) and (pointer: fine) {
  .brand-trio__review:hover { background: var(--ink); color: var(--paper); }
}

/* fake-link cursor — anchors without href default to text cursor; force pointer */
a.fake-link, .fake-link[role="link"] { cursor: pointer; }

/* ====================================================
   BRAND DOSSIER — casino review hero (editorial profile card)
   ==================================================== */
.dossier {
  /* Logo has moved into the .cta-hero card above (task 12). The dossier is
     now a single full-width column carrying eyebrow, headline, sub, and the
     facts list. */
  display: block;
  margin-top: var(--s5);
  margin-bottom: var(--s5);
  padding: var(--s5);
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  box-sizing: border-box;
}
.dossier__logo {
  width: 180px; height: 180px;
  object-fit: contain;
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--ink-line);
}
.dossier__body { min-width: 0; }
.dossier__eyebrow {
  display: inline-block;
  font-family: var(--font-caption);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: var(--fw-k);
  padding: 4px 12px;
  background: var(--rust);
  color: var(--paper);
  margin-bottom: var(--s4);
}
.dossier__title {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-x);
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 0 0 var(--s4);
  color: var(--ink);
}
.dossier__sub {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-style: italic;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0 0 var(--s5);
}
.dossier__facts {
  /* 4 columns on desktop per task 12 follow-up; collapses to 2 on tablet
     and 1 on mobile via the existing breakpoint rules below. */
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s3);
  padding-top: var(--s5);
  border-top: 1px solid var(--ink-line);
  font-family: var(--font-caption);
}
/* Each fact cell gets a light editorial card style so cells don't visually
   bleed into each other on the 4-column grid. */
.dossier-item {
  padding: var(--s3) var(--s4);
  background: var(--paper);
  border: 1px solid var(--ink-line);
  border-left: 3px solid var(--rust);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  min-width: 0;
}
@media (max-width: 1024px) {
  .dossier__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .dossier__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dossier__facts dt {
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  margin-bottom: 4px;
  font-weight: var(--fw-s);
}
.dossier__facts dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  color: var(--ink);
  font-weight: var(--fw-b);
  font-variant-numeric: tabular-nums;
}
.dossier__score {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-display);
  font-weight: var(--fw-x);
  font-size: var(--fs-4xl);
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  padding: var(--s2) 0;
}
/* The "/ 10" pseudo was breaking into vertical letters in narrow grid cells
   and the dd already reads "X.Y out of 5 weighted ..." — pseudo removed. */
.dossier__score { display: inline; }
@media (max-width: 720px) {
  /* .dossier is now full-width block (logo moved to .cta-hero), so no
     grid-template override needed. Title shrinks; facts stack to 1col. */
  .dossier__title { font-size: var(--fs-3xl); }
  /* Stack dossier facts (each .dossier-item containing dossier__score etc.)
     to full working-zone width on mobile. */
  .dossier__facts { grid-template-columns: 1fr; }
  .dossier-item { width: 100%; }
}

/* ====================================================
   VERDICT BLOCK — editorial conclusion
   ==================================================== */
.verdict,
.verdict-block {
  margin: var(--s8) 0;
  padding: var(--s7);
  background-color: #16182d;
  color: #faf6ef;
  border-left: 8px solid var(--rust);
}
.verdict-block .verdict__eyebrow,
.verdict-block-eyebrow { color: var(--rust-bright); }
.verdict-block h2, .verdict-block h3 { color: #faf6ef; }
.verdict-block p { color: rgba(250, 246, 239, 0.85); }
.verdict-block strong, .verdict-block b { color: var(--rust-bright); font-weight: var(--fw-b); }
.verdict-block a, .verdict-block a:link, .verdict-block a:visited { color: var(--rust-bright); text-decoration: underline; }
.verdict-block a:hover { color: #faf6ef; }
.verdict-block .callout { background: rgba(250, 246, 239, 0.08); border-left: 3px solid var(--rust-bright); padding: var(--s4); color: rgba(250, 246, 239, 0.95); }
.verdict-block .callout strong { color: #faf6ef; }
.verdict-block .callout a { color: var(--rust-bright); }
.verdict__eyebrow {
  font-family: var(--font-caption);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: var(--fw-k);
  color: var(--rust-bright);
  margin-bottom: var(--s3);
}
.verdict h3 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-x);
  color: var(--paper);
  margin: 0 0 var(--s4);
  letter-spacing: -0.022em;
  line-height: 1.1;
}
.verdict p { color: var(--ink-inverse-2); font-family: var(--font-body); margin: 0 0 var(--s3); }
.verdict p:last-child { margin-bottom: 0; }

/* ====================================================
   LEDGER (pros / cons two-column)
   ==================================================== */
.ledger {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: var(--s7) 0;
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.ledger__col {
  padding: var(--s5) var(--s5) var(--s5) 0;
}
.ledger__col + .ledger__col { border-left: 1px solid var(--ink-line); padding-left: var(--s5); padding-right: 0; }
.ledger__head {
  display: flex; align-items: center; gap: var(--s3);
  font-family: var(--font-caption);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: var(--fw-k);
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--ink-line);
}
.ledger__col--pos .ledger__head { color: var(--status-strong); }
.ledger__col--neg .ledger__head { color: var(--status-weak); }
.ledger__head::before {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: var(--fw-x);
}
.ledger__col--pos .ledger__head::before { content: "+"; color: var(--status-strong); }
.ledger__col--neg .ledger__head::before { content: "−"; color: var(--status-weak); }
.ledger__list { list-style: none; padding: 0; margin: 0; }
.ledger__list li {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.5;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--ink-line);
  color: var(--ink);
}
.ledger__list li:last-child { border-bottom: 0; }
@media (max-width: 720px) {
  .ledger { grid-template-columns: 1fr; }
  .ledger__col + .ledger__col { border-left: 0; border-top: 1px solid var(--ink-line); padding-left: 0; padding-top: var(--s5); }
}

/* ====================================================
   FAQ — editorial accordion
   ==================================================== */
.qa {
  margin: var(--s8) 0;
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.qa__head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--ink);
}
.qa__head h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-x);
  margin: 0;
  letter-spacing: -0.025em;
}
.qa__head h2::before { content: ""; }
.qa__count {
  font-family: var(--font-caption);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  font-weight: var(--fw-s);
}
.qa__item {
  border-bottom: 1px solid var(--ink-line);
  counter-increment: qa-num;
}
.qa__item:last-child { border-bottom: 0; }
.qa__item > summary {
  cursor: pointer;
  padding-block: var(--s4);
  padding-inline: 0;
  min-height: var(--touch-target-min);
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: var(--s4);
  align-items: baseline;
  list-style: none;
  transition: color var(--t-fast);
}
.qa__item > summary::-webkit-details-marker { display: none; }
.qa__item > summary::before {
  content: counter(qa-num, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: var(--fw-b);
  color: var(--rust);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.qa__q,
.qa__item > summary {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-b);
  color: var(--ink);
  letter-spacing: -0.014em;
  line-height: 1.3;
}
.qa__item > summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-r);
  color: var(--rust);
  line-height: 1;
  transition: transform var(--t-fast);
}
.qa__item[open] > summary::after { content: "−"; }
@media (hover: hover) and (pointer: fine) {
  .qa__item > summary:hover .qa__q,
  .qa__item > summary:hover { color: var(--rust); }
}
.qa__a {
  padding: 0 var(--s7) var(--s5) calc(48px + var(--s4));
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink-soft);
}
.qa__a p { margin: 0 0 var(--s3); }
.qa__a p:last-child { margin-bottom: 0; }
.qa { counter-reset: qa-num; }
@media (max-width: 640px) {
  .qa__item > summary { grid-template-columns: 36px 1fr auto; gap: var(--s2); }
  .qa__a { padding-left: calc(36px + var(--s2)); padding-right: 0; }
  .qa__q { font-size: var(--fs-base); }
}

/* ====================================================
   SECTION RULE — magazine-style section divider
   ==================================================== */
.rule {
  margin: var(--s9) 0;
  height: 0;
  border: 0;
  border-top: 1px solid var(--ink);
  position: relative;
}
.rule__label {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  background: var(--paper);
  padding: 0 var(--s4);
  font-family: var(--font-caption);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-muted);
  font-weight: var(--fw-s);
}

/* Three-star section break (publishing convention) */
.fleuron {
  text-align: center;
  margin: var(--s8) 0;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  letter-spacing: 1em;
  color: var(--rust);
  font-weight: var(--fw-r);
}
.fleuron::before { content: "* * *"; }

/* ====================================================
   GUIDE-CARD GRID — editorial card-grid for hubs
   ==================================================== */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
  margin: var(--s6) 0;
  border-top: 4px solid var(--ink);
}
.guide-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guide-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.guide-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.guide-card {
  display: flex; flex-direction: column;
  padding: var(--s6) var(--s5);
  border-bottom: 1px solid var(--ink);
  border-right: 1px solid var(--ink-line);
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  transition: background var(--t-fast);
}
.guide-card:last-child { border-right: 0; }
@media (hover: hover) and (pointer: fine) {
  .guide-card:hover { background: var(--paper-dark); text-decoration: none; }
}
.guide-card__category {
  font-family: var(--font-caption);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: var(--fw-k);
  color: var(--rust);
  margin-bottom: var(--s3);
}
.guide-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-b);
  letter-spacing: -0.018em;
  line-height: 1.18;
  margin: 0 0 var(--s3);
  color: var(--ink);
}
.guide-card__excerpt {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  flex-grow: 1;
}
.guide-card__cta {
  margin-top: var(--s4);
  font-family: var(--font-caption);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: var(--fw-s);
  color: var(--rust);
}
@media (max-width: 900px) {
  .guide-grid--3, .guide-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .guide-card:nth-child(2n) { border-right: 0; }
}
@media (max-width: 600px) {
  .guide-grid, .guide-grid--2, .guide-grid--3, .guide-grid--4 { grid-template-columns: 1fr; }
  .guide-card { border-right: 0; }
}

/* ====================================================
   CASINO CONTACT — brand-card alternative (editorial)
   ==================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0;
  margin: var(--s6) 0;
  border-top: 4px solid var(--ink);
}
.contact {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: var(--s4);
  padding: var(--s5);
  border-bottom: 1px solid var(--ink);
  border-right: 1px solid var(--ink-line);
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  transition: background var(--t-fast);
}
@media (hover: hover) and (pointer: fine) {
  .contact:hover { background: var(--paper-dark); text-decoration: none; }
}
.contact__logo {
  width: 56px; height: 56px;
  object-fit: contain;
  padding: 4px;
  background: var(--paper);
  border: 1px solid var(--ink-line);
}
.contact__name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-b);
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.012em;
}
.contact__hook {
  font-family: var(--font-caption);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  margin: 2px 0 0;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.contact__score {
  font-family: var(--font-mono);
  font-size: var(--fs-md);
  font-weight: var(--fw-b);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact { border-right: 0; }
}

/* ====================================================
   DOSSIER COMPARE — versus block (editorial style)
   ==================================================== */
.compare {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  align-items: stretch;
  gap: 0;
  margin: var(--s8) 0;
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.compare__side {
  padding: var(--s6) var(--s5);
  text-align: center;
}
.compare__side + .compare__divider + .compare__side { border-left: 1px solid var(--ink-line); }
.compare__divider {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-x);
  color: var(--rust);
  letter-spacing: 0.08em;
  border-left: 1px solid var(--ink-line);
  border-right: 1px solid var(--ink-line);
}
.compare__logo {
  width: 80px; height: 80px;
  margin: 0 auto var(--s3);
  object-fit: contain;
  padding: 4px;
  background: var(--paper);
  border: 1px solid var(--ink-line);
}
.compare__name {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-k);
  margin: 0 0 var(--s2);
  letter-spacing: -0.018em;
}
.compare__score {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-b);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: var(--s2) 0;
}
.compare__hook {
  font-family: var(--font-body);
  font-style: italic;
  font-size: var(--fs-base);
  color: var(--ink-soft);
  line-height: 1.4;
  margin: var(--s2) auto var(--s4);
}
.compare__cta,
.compare__cta:link,
.compare__cta:visited {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-caption);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: var(--fw-b);
  padding: 12px 20px;
  min-height: var(--touch-target-min);
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  transition: background var(--t-fast);
}
@media (hover: hover) and (pointer: fine) {
  .compare__cta:hover,
  .compare__cta:visited:hover { background: var(--rust); color: var(--paper); text-decoration: none; }
}
@media (max-width: 640px) {
  .compare { grid-template-columns: 1fr; border-bottom: 0; }
  .compare__side + .compare__divider + .compare__side { border-left: 0; border-top: 1px solid var(--ink-line); }
  .compare__divider { display: none; }
}

/* ====================================================
   ROADMAP / TIER LADDER — for KYC pages
   ==================================================== */
.tier-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: var(--s5);
  align-items: center;
  padding: var(--s5) 0;
  border-bottom: 1px solid var(--ink-line);
}
.tier-row:first-child { border-top: 4px solid var(--ink); padding-top: var(--s5); }
.tier-row__num {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-x);
  color: var(--rust);
  line-height: 0.9;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
}
.tier-row__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-b);
  margin: 0 0 var(--s1);
}
.tier-row__desc {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
}
.tier-row__check {
  font-family: var(--font-caption);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: var(--fw-s);
  color: var(--ink-muted);
}
.tier-row--active { background: var(--paper-tone); padding-left: var(--s4); padding-right: var(--s4); }
.tier-row--active .tier-row__num { color: var(--ink); }
.tier-row--active .tier-row__check { color: var(--rust); }
@media (max-width: 640px) {
  .tier-row { grid-template-columns: 56px 1fr; }
  .tier-row__check { grid-column: 1 / 3; text-align: center; }
  .tier-row__num { font-size: var(--fs-3xl); }
}

/* ====================================================
   SPEC LIST — definition list (network / token specs)
   ==================================================== */
.spec-list {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
  margin: var(--s6) 0;
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.spec-list dt {
  padding: var(--s3) var(--s4) var(--s3) 0;
  border-bottom: 1px solid var(--ink-line);
  border-right: 1px solid var(--ink-line);
  font-family: var(--font-caption);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  font-weight: var(--fw-s);
}
.spec-list dd {
  padding: var(--s3) 0 var(--s3) var(--s4);
  margin: 0;
  border-bottom: 1px solid var(--ink-line);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--ink);
}
.spec-list dt:last-of-type, .spec-list dd:last-of-type { border-bottom: 0; }
.spec-list dd code { font-family: var(--font-mono); font-size: 0.92em; background: var(--paper-tone); padding: 1px 6px; }
@media (max-width: 600px) {
  .spec-list { grid-template-columns: 1fr; }
  .spec-list dt { border-right: 0; padding: var(--s3) 0 var(--s1); }
  .spec-list dd { padding: 0 0 var(--s3); }
}

/* ====================================================
   CODE BLOCK — for contract addresses
   ==================================================== */
.contract-card {
  margin: var(--s6) 0;
  padding: var(--s5) var(--s6);
  background: var(--ink-bg);
  color: var(--paper);
  border-left: 6px solid var(--rust);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  overflow-x: auto;
}
.contract-card__label {
  display: block;
  font-family: var(--font-caption);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--rust-bright);
  margin-bottom: var(--s2);
  font-weight: var(--fw-k);
}
.contract-card code { background: transparent; color: var(--paper); padding: 0; word-break: break-all; }

/* ====================================================
   AFFILIATE DISCLOSURE BAR
   ==================================================== */
.disclosure {
  margin: 0 0 var(--s6);
  padding: var(--s3) 0;
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  font-family: var(--font-caption);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
}
.disclosure strong { color: var(--ink); font-weight: var(--fw-b); }
.disclosure a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rust); }

/* ====================================================
   GLOSSARY ENTRIES — editorial dictionary
   ==================================================== */
.glossary-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0;
  margin: var(--s7) 0;
  border-top: 4px solid var(--ink);
}
.glossary-entry {
  padding: var(--s5);
  border-bottom: 1px solid var(--ink-line);
  border-right: 1px solid var(--ink-line);
}
.glossary-entry__term {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-b);
  color: var(--ink);
  margin: 0 0 var(--s2);
  letter-spacing: -0.014em;
}
.glossary-entry__term::before {
  content: "§ ";
  color: var(--rust);
  font-family: var(--font-body);
  font-weight: var(--fw-r);
}
.glossary-entry__def {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 720px) { .glossary-list { grid-template-columns: 1fr; } .glossary-entry { border-right: 0; } }

/* ====================================================
   CALC WIDGET — tools
   ==================================================== */
.calc-widget {
  margin: var(--s7) 0;
  padding: var(--s6);
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--paper-dark);
}
.calc-widget__section-title {
  display: block;
  font-family: var(--font-caption);
  font-size: var(--fs-xs);
  font-weight: var(--fw-k);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 var(--s5);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--ink-line);
}
.calc-widget__inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s4);
  margin-bottom: var(--s5);
}
.calc-widget__field { display: flex; flex-direction: column; gap: 4px; }
.calc-widget__field-row { display: flex; gap: var(--s3); align-items: end; }
.calc-widget__label { font-family: var(--font-caption); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.12em; font-weight: var(--fw-s); color: var(--ink); }
.calc-widget__hint { font-family: var(--font-body); font-style: italic; font-size: var(--fs-xs); color: var(--ink-muted); line-height: 1.45; }
.calc-widget__field input, .calc-widget__field select {
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.calc-widget__field input:focus, .calc-widget__field select:focus { outline: 2px solid var(--rust); outline-offset: 1px; }
.calc-widget__radio-group { display: flex; flex-wrap: wrap; gap: var(--s2); }
.calc-widget__radio {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  min-height: var(--touch-target-min);
  border: 1px solid var(--ink);
  background: var(--paper);
  cursor: pointer;
  font-family: var(--font-caption);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
@media (hover: hover) and (pointer: fine) {
  .calc-widget__radio:hover { background: var(--ink); color: var(--paper); }
}
.calc-widget__radio input { margin: 0; accent-color: var(--rust); }
.calc-widget__outputs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--s4);
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--ink-line);
}
.calc-widget__output {
  padding: var(--s4);
  background: var(--paper);
  border: 1px solid var(--ink);
  text-align: center;
}
.calc-widget__output--accent { background: var(--ink); color: var(--paper); }
.calc-widget__output-label {
  display: block;
  font-family: var(--font-caption);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  font-weight: var(--fw-s);
  margin-bottom: var(--s2);
}
.calc-widget__output--accent .calc-widget__output-label { color: rgba(250,246,239,0.7); }
.calc-widget__output-value {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-b);
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}
.calc-widget__output--accent .calc-widget__output-value { color: var(--paper); }
.calc-widget__output-value--big { font-size: var(--fs-3xl); color: var(--rust); }
.calc-widget__verdict {
  margin-top: var(--s5);
  padding: var(--s4) var(--s5);
  background: var(--ink-bg);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  border-left: 4px solid var(--rust);
}
.calc-widget__verdict strong { color: var(--rust-bright); }
.calc-widget__note { margin-top: var(--s3); font-family: var(--font-body); font-style: italic; font-size: var(--fs-sm); color: var(--ink-muted); }

/* ====================================================
   ARTICLE LISTING — Bloomberg / NYTimes article preview cards
   ==================================================== */
.article-listing {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--s7);
  margin: var(--s7) 0;
  padding-top: var(--s7);
  border-top: 4px solid var(--ink);
}
.article-listing__lead {
  border-right: 1px solid var(--ink-line);
  padding-right: var(--s7);
}
.article-listing__lead .listing-category { font-size: var(--fs-xs); }
.article-listing__lead .listing-title { font-size: var(--fs-3xl); line-height: 1; }
.article-listing__lead .listing-excerpt { font-size: var(--fs-base); }
.listing {
  text-decoration: none;
  color: var(--ink);
  display: block;
}
@media (hover: hover) and (pointer: fine) {
  .listing:hover { color: var(--rust); text-decoration: none; }
  .listing:hover .listing-title { text-decoration: underline; text-decoration-thickness: 1px; }
}
.listing-category {
  display: inline-block;
  font-family: var(--font-caption);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: var(--fw-k);
  color: var(--rust);
  margin-bottom: var(--s3);
}
.listing-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-b);
  color: var(--ink);
  line-height: 1.18;
  letter-spacing: -0.018em;
  margin: 0 0 var(--s3);
}
.listing-excerpt {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.listing-meta {
  margin-top: var(--s3);
  font-family: var(--font-caption);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
}
@media (max-width: 900px) {
  .article-listing { grid-template-columns: 1fr 1fr; }
  .article-listing__lead { grid-column: 1 / 3; border-right: 0; padding-right: 0; padding-bottom: var(--s5); border-bottom: 1px solid var(--ink-line); }
}
@media (max-width: 600px) {
  .article-listing { grid-template-columns: 1fr; }
  .article-listing__lead { grid-column: 1; }
}

/* ====================================================
   TWO-COLUMN MAGAZINE — flowing columns
   ==================================================== */
.two-col {
  margin: var(--s7) 0;
  column-count: 2;
  column-gap: var(--s7);
  column-rule: 1px solid var(--ink-line);
  font-family: var(--font-body);
}
.two-col h2 { column-span: all; margin-top: var(--s7); }
.two-col p { max-width: none; }
@media (max-width: 640px) { .two-col { column-count: 1; } }

/* ====================================================
   CTA BUTTONS (editorial)
   ==================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  padding: 12px var(--s5);
  font-family: var(--font-caption);
  font-size: var(--fs-xs);
  font-weight: var(--fw-b);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn--rust { background: var(--rust); color: var(--paper); }
.btn--inverse { background: var(--paper); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { text-decoration: none; }
  .btn--primary:hover { background: var(--rust); color: var(--paper); }
  .btn--ghost:hover { background: var(--ink); color: var(--paper); }
  .btn--rust:hover { background: var(--rust-deep); color: var(--paper); }
  .btn--inverse:hover { background: var(--rust); color: var(--paper); }
}

.cta-sticky {
  /* Hidden by default — site.js adds .is-visible only after the user has
     scrolled past the criteria-rating block and while the footer is still
     out of the viewport. The previous `hidden` HTML attribute was being
     overridden by this class's display: inline-flex. */
  display: none;
  align-items: center; justify-content: center;
  position: fixed;
  bottom: var(--s5);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-overlay);
  padding: 14px var(--s5);
  min-height: var(--touch-target-min);
  background: var(--ink);
  color: var(--paper) !important;
  font-family: var(--font-caption);
  font-weight: var(--fw-b);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none !important;
  box-shadow: 0 4px 16px rgba(22,24,45,0.18);
  transition: background var(--t-fast);
}
.cta-sticky.is-visible { display: inline-flex; }
@media (hover: hover) and (pointer: fine) {
  .cta-sticky:hover { background: var(--rust); }
}

/* ====================================================
   CHIPS / TAGS — editorial micro labels
   ==================================================== */
.chip {
  display: inline-block;
  font-family: var(--font-caption);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: var(--fw-s);
  padding: 2px 8px;
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--ink-line);
}
.chip--rust { color: var(--rust); border-color: var(--rust); }
.chip--solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ====================================================
   PAYMENT TABLE / DATA-DENSE
   ==================================================== */
.data-table-wrap {
  margin: var(--s6) 0;
  overflow-x: auto;
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.data-table { margin: 0; border: 0; }
.data-table thead th {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-caption);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: var(--fw-k);
  padding: var(--s3) var(--s4);
  border-bottom: 2px solid var(--ink);
}
.data-table td {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--ink-line);
  vertical-align: middle;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--ink);
}
@media (hover: hover) and (pointer: fine) {
  .data-table tbody tr:hover { background: var(--paper-dark); }
}
.data-table__brand {
  display: inline-flex; align-items: center;
  gap: var(--s3);
  font-family: var(--font-display);
  font-weight: var(--fw-b);
  color: var(--ink);
}
.data-table__brand img {
  width: 32px; height: 32px;
  object-fit: contain;
  padding: 2px;
  background: var(--paper);
  border: 1px solid var(--ink-line);
}

/* ====================================================
   RELATED BLOCK — footer-style index
   ==================================================== */
.related-block {
  margin: var(--s9) 0 0;
  padding: var(--s7) 0;
  border-top: 4px solid var(--ink);
}
.related-block h2 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-x);
  letter-spacing: -0.022em;
  margin: 0 0 var(--s5);
}
.related-block ul {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s3) var(--s5);
}
.related-block li { margin: 0; }
.related-block a {
  display: flex; align-items: baseline; gap: var(--s2);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--ink-line);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  text-decoration: none;
  transition: color var(--t-fast);
}
.related-block a::before {
  content: "→";
  color: var(--rust);
  font-family: var(--font-caption);
  font-weight: var(--fw-b);
}
@media (hover: hover) and (pointer: fine) {
  .related-block a:hover { color: var(--rust); text-decoration: underline; }
}

/* ====================================================
   RESPONSIBLE GAMBLING FOOTER NOTE
   ==================================================== */
.rg-foot {
  margin: var(--s9) 0 0;
  padding: var(--s6) 0;
  border-top: 1px solid var(--ink-line);
  font-family: var(--font-caption);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  /* Centre the help-org link row both horizontally and on cross-axis when
     the row wraps to two lines on narrow viewports. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s2) var(--s3);
  text-align: center;
  line-height: 1.65;
}
.rg-foot a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rust); }
@media (hover: hover) and (pointer: fine) {
  .rg-foot a:hover { color: var(--rust); }
}

/* ====================================================
   PILLAR-UP-LINK — "↑ Back to hub" navigation row
   ==================================================== */
.pillar-up-link {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-caption);
  font-size: var(--fs-xs);
  margin: var(--s5) auto;
}

/* ====================================================
   CALLOUT — light-bg note block ("strong" intro + body text)
   ==================================================== */
aside.callout,
.callout {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  margin: var(--s4) 0;
  background: var(--paper-warm, var(--paper));
  border-left: 3px solid var(--rust);
  border-radius: 3px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--ink);
  line-height: 1.5;
}
aside.callout strong,
.callout strong {
  font-family: var(--font-caption);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--rust);
  font-weight: var(--fw-k);
  white-space: nowrap;
}

/* ====================================================
   FOLIO STRIP — page indicator (magazine convention)
   ==================================================== */
.folio {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--s2) 0;
  margin-top: var(--s8);
  border-top: 1px solid var(--ink);
  font-family: var(--font-caption);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-muted);
  font-weight: var(--fw-s);
}

/* ============================================================
   T55 monetization blocks — CTA + rating cards
   Added V5.7.47 to expose existing editorial elements as T55-recognizable.
============================================================ */
.cta-block {
  display: block;
  margin: var(--s6) auto;
  padding: var(--s5) var(--s6);
  background: var(--paper);
  border: 1px solid var(--ink-line);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
@media (hover: hover) and (pointer: fine) {
  .cta-block:hover { border-color: var(--rust); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
}

.cta-block.cta-primary,
.cta-block.cta-button.visit-casino,
.cta-block.cta-button.play-now {
  background: var(--rust);
  color: var(--paper);
  border-color: var(--rust);
  font-weight: var(--fw-b);
  text-align: center;
  padding: var(--s4) var(--s7);
  display: inline-block;
  min-height: 44px;
  line-height: 1.3;
}
@media (hover: hover) and (pointer: fine) {
  .cta-block.cta-primary:hover,
  .cta-block.cta-button.visit-casino:hover {
    background: var(--rust-deep);
    border-color: var(--rust-deep);
    color: var(--paper);
  }
}

.cta-block.cta-hero {
  /* Layout: logo | score | pitch text | visit CTA, all in one row.
     The logo column was moved here from the dossier so this card now acts
     as the brand identity + score + pitch + CTA combined header. */
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: var(--s4);
  align-items: center;
  padding: var(--s4) var(--s5);
  background-color: var(--paper-warm);
  background-image: linear-gradient(180deg, var(--paper-warm) 0%, var(--paper) 100%);
  color: var(--ink);
  border: 2px solid var(--rust);
  border-radius: 6px;
  margin: var(--s5) auto;
}
.cta-hero__logo {
  width: 96px; height: 96px;
  object-fit: contain;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--ink-line);
  border-radius: 4px;
  display: block;
}
.cta-hero__rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-right: var(--s4);
  border-right: 1px solid var(--ink-line);
}
@media (max-width: 720px) {
  .cta-block.cta-hero {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "logo rating"
      "pitch pitch"
      "cta cta";
    gap: var(--s3);
  }
  .cta-hero__logo  { grid-area: logo;   width: 72px; height: 72px; }
  .cta-hero__rating { grid-area: rating; padding-right: 0; border-right: 0; align-items: flex-start; }
  .cta-hero__pitch { grid-area: pitch; }
  .cta-hero .cta-block.cta-primary { grid-area: cta; justify-self: stretch; text-align: center; }
}
.cta-hero__score {
  font-family: var(--ff-mono);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-b);
  color: var(--rust);
  line-height: 1;
}
.cta-hero__scale {
  font-family: var(--ff-mono);
  font-size: var(--fs-lg);
  color: var(--ink-muted);
}
.cta-hero__label {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-muted);
  margin-top: var(--s2);
}
.cta-hero .cta-block.cta-primary {
  justify-self: end;
}

.cta-block.cta-card {
  text-align: center;
  padding: var(--s7) var(--s6);
  background: var(--paper-warm);
  border: 1px solid var(--ink-line);
  margin: var(--s8) auto;
}
.cta-block__heading {
  margin: 0 0 var(--s3);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-b);
  color: var(--ink);
}
.cta-block.cta-card p {
  margin: 0 0 var(--s5);
  font-size: var(--fs-lg);
  color: var(--ink-muted);
}

.cta-block.cta-inline {
  background: transparent;
  border: 0;
  border-left: 3px solid var(--rust);
  padding: var(--s3) var(--s5);
  margin: var(--s5) 0;
  /* Vertical-centre the copy block + CTA button on the row. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
}
.cta-block.cta-inline > * { margin: 0; }
.cta-block.cta-inline .cta-block__copy { flex: 1 1 auto; min-width: 0; }
.cta-block__copy {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.6;
}

/* Rating block (when applied to .dossier — already styled, just add T55-recognizable classes) */
.rating-card.score-card { /* inherits .dossier */ }

.rating-table.rating-block {
  margin: var(--s5) 0;
}

@media (max-width: 768px) {
  .cta-block.cta-hero { grid-template-columns: 1fr; padding: var(--s5) var(--s4); }
  .cta-hero__rating { border-right: 0; border-bottom: 1px solid var(--ink-line); padding: 0 0 var(--s4); }
  .cta-hero .cta-block.cta-primary { justify-self: stretch; width: 100%; }
}

/* ============================================================
   MOBILE-FIRST UTILITIES (V5.8.3)
   Reusable wrappers for tables, tile grids, and horizontal scroll.
============================================================ */

/* Horizontal scroll wrapper for wide tables / data on mobile */
.compare-wrapper,
.table-wrap {
  margin: var(--s6) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-line) transparent;
}
.compare-wrapper > table,
.table-wrap > table { margin: 0; min-width: 720px; }
@media (min-width: 1024px) {
  .compare-wrapper > table,
  .table-wrap > table { min-width: 0; }
}

/* Sticky first column for wide compare tables (.compare-table) */
.compare-table { width: 100%; }
.compare-table th:first-child,
.compare-table td:first-child {
  position: sticky;
  left: 0;
  background: var(--paper);
  z-index: 1;
}
.compare-table thead th:first-child { background: var(--paper); }

/* Tile grid — mobile-first responsive grid (1 → 2 → 3 → 4 cols) */
.tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
  margin: var(--s6) 0;
}
@media (min-width: 600px) {
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .tile-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .tile-grid--4 { grid-template-columns: repeat(4, 1fr); }
}
.tile-grid--2 { grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .tile-grid--2 { grid-template-columns: repeat(2, 1fr); }
}
.tile-grid--3 { grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .tile-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .tile-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Generic block stack helper — force vertical layout on mobile */
@media (max-width: 640px) {
  .stack-mobile {
    display: block !important;
    grid-template-columns: 1fr !important;
  }
  .stack-mobile > * + * { margin-top: var(--s4); }
}

/* Mobile-first hardening for major editorial blocks */
@media (max-width: 640px) {
  /* Article — match .container horizontal padding so text never sticks
     to the screen edge; vertical padding kept compact. */
  .article {
    padding-top: var(--s5);
    padding-bottom: var(--s7);
    padding-left: max(var(--container-pad-mobile), env(safe-area-inset-left));
    padding-right: max(var(--container-pad-mobile), env(safe-area-inset-right));
  }

  /* Cover already responsive (line 88+) — reinforce title clamp */
  .cover__title { max-width: 100%; }
  .cover--asym .container { gap: var(--s5); }

  /* Dossier — already 1fr at ≤720, reinforce */
  .dossier { padding: var(--s5) 0; gap: var(--s4); margin: var(--s5) 0; }

  /* Stat band — keep auto-fit but ensure cells stack on tiny viewports */
  .stat-band__value { font-size: var(--fs-xl); }

  /* Verdict, big-number — reduce padding */
  .verdict { padding: var(--s5); margin: var(--s6) 0; }
  .big-number { padding: var(--s6) 0; margin: var(--s6) 0; }
  .big-number__value { font-size: var(--fs-5xl); }

  /* Calc widget — pad less on small screens */
  .calc-widget { padding: var(--s5) var(--s4); }
  .calc-widget__radio-group { gap: var(--s2); }

  /* Pull-quote — smaller on mobile */
  .pull-quote { font-size: var(--fs-2xl); padding: var(--s5) 0; margin: var(--s6) 0; }

  /* Author feature — already 1fr at ≤720, reinforce portrait */
  .author-feature__portrait { max-width: 160px; margin: 0 auto; }
  .author-feature__body h1 { font-size: var(--fs-3xl); }

  /* Tier row — already responsive, reinforce */
  .tier-row__title { font-size: var(--fs-lg); }
  .tier-row__desc { font-size: var(--fs-sm); }

  /* Cta-block variants pad less on mobile */
  .cta-block { padding: var(--s4); margin: var(--s5) auto; }
  .cta-block.cta-card { padding: var(--s5) var(--s4); margin: var(--s6) auto; }
  .cta-block__heading { font-size: var(--fs-xl); }

  /* Sticky CTA — smaller and tucked against safe area, centered horizontally */
  .cta-sticky {
    bottom: max(var(--s3), env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    padding: 10px var(--s4);
    font-size: var(--fs-xxs);
    max-width: calc(100vw - var(--s4) * 2);
  }

  /* Article side note (float fallback at ≤900 already handled) */
  .article__side { padding: var(--s3) var(--s4); }

  /* Two-column flow goes single on mobile (existing rule at 640) */
}

@media (max-width: 480px) {
  /* Extreme tiny — make rank-row CTAs and dossier readable */
  .dossier__title { font-size: var(--fs-2xl); }
  .dossier__sub { font-size: var(--fs-base); }
  .rank-row__name { font-size: var(--fs-md); }
  .rank-row__hook { font-size: var(--fs-sm); }
  .cta-hero__score { font-size: var(--fs-3xl); }
}


/* ====================================================================
   T58 V5.8.3 — required structural blocks (dossier-grid alias + hero
   tagline/chips + criteria-rating block + calc-widget tool interface).
   ==================================================================== */

.dossier-grid {
  /* alias of .dossier — styled via existing rules; keeps T58 happy. */
}

.cta-hero__pitch {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-top: var(--s3);
}
.cta-hero__tagline {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--ink);
  font-style: italic;
}
.cta-hero__chips {
  margin: 0;
  font-family: var(--font-caption);
  font-size: var(--fs-xs);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.cta-hero__chips span { white-space: nowrap; }

.criteria-rating {
  margin: var(--s7) 0;
  padding: var(--s6);
  background-color: var(--paper-tone, #f7f3ec);
  color: var(--ink);
  border-left: 4px solid var(--rust, #b94a3c);
}
.criteria-rating__title {
  margin: 0 0 var(--s4);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-k, 800);
  color: var(--ink);
}
.rating-row.criterion {
  display: grid;
  grid-template-columns: 1fr 2fr auto;
  gap: var(--s4);
  align-items: center;
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--ink-line, rgba(22,24,45,0.12));
}
.rating-row.criterion:last-child { border-bottom: 0; }
.criterion__label {
  font-family: var(--font-caption);
  font-size: var(--fs-sm);
  font-weight: var(--fw-s, 600);
  color: var(--ink);
}
.criterion__bar {
  display: block;
  height: 8px;
  background: rgba(22, 24, 45, 0.08);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.criterion__bar > span {
  display: block;
  height: 100%;
  background: var(--rust, #b94a3c);
}
.criterion__score {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-b, 700);
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .rating-row.criterion {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
  .criterion__bar { grid-column: 1 / -1; }
}

/* Calculator widget — tool_interface required by T58 for tool pages. */
.tool-interface.calc-widget {
  margin: var(--s7) auto;
  padding: var(--s6);
  background-color: var(--paper, #fbf9f4);
  color: var(--ink);
  border: 1px solid var(--ink-line, rgba(22,24,45,0.12));
}
.calc-form {
  display: grid;
  gap: var(--s5);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
@media (max-width: 720px) {
  .calc-form { grid-template-columns: 1fr; }
}
.calc-widget__inputs,
.calc-widget__output {
  border: 0;
  margin: 0;
  padding: 0;
}
.calc-widget__legend,
.calc-widget__output-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-k, 800);
  margin-bottom: var(--s3);
  color: var(--ink);
}
.calc-widget__field {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  margin-bottom: var(--s3);
  font-family: var(--font-caption);
  font-size: var(--fs-sm);
  color: var(--ink);
}
.calc-widget__field input[type="number"],
.calc-widget__field input[type="range"] {
  padding: var(--s2);
  border: 1px solid var(--ink-line, rgba(22,24,45,0.18));
  background: var(--paper, #fff);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  width: 100%;
}
.calc-widget__radios {
  border: 0;
  padding: 0;
  margin: var(--s3) 0;
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
}
.calc-widget__radios legend {
  font-family: var(--font-caption);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  width: 100%;
  margin-bottom: var(--s2);
}
.calc-widget__radios label {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-family: var(--font-caption);
  font-size: var(--fs-sm);
}
.calc-widget__metrics {
  display: grid;
  gap: var(--s2);
  grid-template-columns: 1fr;
}
.calc-widget__metrics > div {
  display: flex;
  justify-content: space-between;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--ink-line, rgba(22,24,45,0.10));
}
.calc-widget__metrics > div:last-child { border-bottom: 0; }
.calc-widget__metrics dt {
  font-family: var(--font-caption);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
}
.calc-widget__metrics dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-base);
  font-weight: var(--fw-b, 700);
  color: var(--ink);
}
.calc-widget__output-value--positive { color: #2f7a3a; }
.calc-widget__output-value--negative { color: #b94a3c; }
.calc-widget__verdict {
  margin: var(--s4) 0 0;
  padding: var(--s3);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  background: rgba(22, 24, 45, 0.04);
  border-left: 3px solid var(--ink-line, rgba(22,24,45,0.18));
}
.calc-widget__verdict--good {
  background: rgba(47, 122, 58, 0.10);
  border-left-color: #2f7a3a;
}
.calc-widget__verdict--neutral {
  background: rgba(180, 130, 0, 0.10);
  border-left-color: #b48200;
}
.calc-widget__verdict--bad {
  background: rgba(185, 74, 60, 0.10);
  border-left-color: #b94a3c;
}

/* ============================================================
   V5.8.3 ETAP 4 — Page-type templates: tile, spec-table, steps,
   compare-grid, featured-leaderboard
   ============================================================ */

/* === FEATURED LEADERBOARD on home === */
.featured-leaderboard {
  margin: var(--s8) auto;
}
.featured-leaderboard__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-k);
  color: var(--ink);
  margin: 0 0 var(--s3);
}
.featured-leaderboard__lead {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--ink-muted);
  margin: 0 0 var(--s5);
}

/* === TILE — child of .tile-grid (cluster navigation) === */
.tile {
  display: block;
  background-color: var(--paper-tone, #f7f2ea);
  border: 1px solid var(--ink-line);
  border-left: 4px solid var(--rust);
  min-height: 120px;
  transition: background-color var(--t-fast) var(--ease);
}
.tile__link {
  display: block;
  padding: 0;            /* padding moved onto the title/sub so the OG image
                            can stretch edge-to-edge at the top of the card */
  color: var(--ink);
  text-decoration: none;
  min-height: inherit;
}
.tile__og {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  background: var(--paper-tone, #f7f2ea);
  margin: 0;
  border-bottom: 1px solid var(--ink-line);
}
.tile__title,
.tile__sub {
  padding-left: var(--s5);
  padding-right: var(--s5);
}
.tile__title {
  padding-top: var(--s5);
}
.tile__sub {
  padding-bottom: var(--s5);
}
/* Backwards compat: when no .tile__og present, restore card-wide padding. */
.tile__link:not(:has(.tile__og)) .tile__title { padding-top: var(--s5); }
.tile__link:not(:has(.tile__og)) .tile__sub { padding-bottom: var(--s5); }
@media (hover: hover) and (pointer: fine) {
  .tile:hover {
    background-color: var(--paper-dark, #efe7da);
    border-left-color: var(--rust-deep, var(--oxblood));
  }
}
.tile__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-k);
  color: var(--ink);
  margin: 0 0 var(--s2);
}
.tile__sub {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  margin: 0;
}

/* === SPEC TABLE — at-a-glance fact band === */
.spec-table {
  background-color: var(--paper-tone, #f7f2ea);
  padding: var(--s6);
  border-left: 4px solid var(--rust);
  margin: var(--s7) auto;
}
.spec-table__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-k);
  color: var(--ink);
  margin: 0 0 var(--s4);
}
.spec-table__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3) var(--s5);
  margin: 0;
}
@media (min-width: 640px) {
  .spec-table__grid { grid-template-columns: 1fr 1fr; }
}
.spec-table__grid > div {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--ink-line);
}
.spec-table__grid dt {
  font-family: var(--font-caption, var(--font-body));
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  font-weight: var(--fw-s, 600);
}
.spec-table__grid dd {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--ink);
  font-weight: var(--fw-m, 500);
  margin: 0;
}

/* === COMPARE GRID — section wrapper around a compare-table === */
.compare-grid {
  margin: var(--s7) auto;
}
.compare-grid__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-k);
  color: var(--ink);
  margin: 0 0 var(--s4);
}
.compare-grid .compare-wrapper {
  margin-top: 0;
}

/* === STEPS — numbered counter list for setup workflows === */
.steps {
  counter-reset: step-counter;
  list-style: none;
  padding: 0;
  margin: var(--s7) auto;
  display: grid;
  gap: var(--s4);
}
.steps__item {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: var(--s4);
  padding: var(--s4);
  background-color: var(--paper-tone, #f7f2ea);
  border-left: 4px solid var(--rust);
  counter-increment: step-counter;
}
.steps__item::before {
  content: counter(step-counter);
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-x, 800);
  color: var(--rust);
  line-height: 1;
}
.steps__title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-b, 700);
  color: var(--ink);
  margin: 0 0 var(--s2);
}
.steps__desc {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--ink);
  margin: 0;
}

/* === PAGE TOC — in-page nav for KYC/wallet pages === */
.onpage-nav {
  margin: var(--s6) auto;
  padding: var(--s4) var(--s5);
  border-left: 4px solid var(--rust);
  background-color: var(--paper-tone, #f7f2ea);
}
.onpage-nav__title {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-k);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin: 0 0 var(--s2);
}
.onpage-nav__list {
  list-style: decimal inside;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--s1);
}
.onpage-nav__list li {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.onpage-nav__list .toc-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink-line);
  text-underline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .onpage-nav__list .toc-link:hover {
    color: var(--rust);
    text-decoration-color: var(--rust);
  }
}

/* Mobile-first hardening for V5.8.3 templates */
@media (max-width: 640px) {
  .featured-leaderboard { margin: var(--s6) auto; }
  .spec-table { padding: var(--s5); margin: var(--s6) auto; }
  .spec-table__grid { gap: var(--s3); }
  .compare-grid { margin: var(--s6) auto; }
  .steps { margin: var(--s6) auto; gap: var(--s3); }
  .steps__item { grid-template-columns: 44px 1fr; padding: var(--s3); gap: var(--s3); }
  .steps__item::before { font-size: var(--fs-2xl); }
  .tile { min-height: 100px; }
  .tile__link { padding: var(--s4); }
  .onpage-nav { margin: var(--s5) auto; padding: var(--s3) var(--s4); }
}

/* ====================================================
   BACK-TO-TOP — floating button bottom-right
   ==================================================== */
.back-to-top {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  background-color: #16182d;
  color: #faf6ef;
  border: 2px solid #b34a2e;
  border-radius: 50%;
  cursor: pointer;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 4px 12px rgba(22, 24, 45, 0.18);
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
  opacity: 0;
}
.back-to-top[hidden] { display: none; }
.back-to-top.is-visible {
  display: inline-flex;
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .back-to-top:hover {
    background-color: #b34a2e;
    transform: translateY(-2px);
  }
}
.back-to-top:focus-visible {
  outline: 2px solid #b34a2e;
  outline-offset: 4px;
}
.back-to-top svg { display: block; }
@media (max-width: 640px) {
  .back-to-top {
    bottom: max(16px, env(safe-area-inset-bottom));
    right: max(16px, env(safe-area-inset-right));
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

/* ====================================================
   HERO STATS — category-page hero variant
   Used on /casinos/* category pages. Pairs with .hero__kicker
   eyebrow, .hero__lead subhead, .hero__stats grid of facts.
   ==================================================== */
.dossier.hero, .dossier.hero.rating-card {
  padding: var(--s8) 0 var(--s7);
  border-bottom: 1px solid var(--ink);
}
.hero__kicker {
  display: inline-block;
  font-family: var(--font-caption);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--rust);
  font-weight: var(--fw-k);
  margin-bottom: var(--s4);
  padding: 4px 10px;
  border: 1px solid var(--rust);
  border-radius: 3px;
}
.dossier.hero h1 {
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 var(--s5);
  color: var(--ink);
}
.hero__lead {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 var(--s5);
  max-width: 70ch;
}
.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s3);
  padding-top: var(--s5);
  margin: var(--s5) 0 var(--s4);
  border-top: 1px solid var(--ink-line);
  font-family: var(--font-caption);
}
.hero__stats > div {
  padding: var(--s3) var(--s4);
  background: var(--paper);
  border: 1px solid var(--ink-line);
  border-left: 3px solid var(--rust);
  border-radius: 3px;
  min-width: 0;
}
.hero__stats dt {
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  margin-bottom: 4px;
  font-weight: var(--fw-s);
}
.hero__stats dd {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  margin: 0;
  color: var(--ink);
  font-weight: var(--fw-k);
  line-height: 1.05;
}
.hero__byline {
  font-family: var(--font-caption);
  font-size: var(--fs-sm);
  color: var(--ink-muted);
  margin-top: var(--s4);
}
.hero__byline strong { color: var(--ink); font-weight: var(--fw-k); }
@media (max-width: 1024px) {
  .hero__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dossier.hero h1 { font-size: var(--fs-3xl); }
}
@media (max-width: 720px) {
  .hero__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dossier.hero h1 { font-size: var(--fs-2xl); }
}
@media (max-width: 480px) {
  .hero__stats { grid-template-columns: 1fr; }
}

/* ====================================================
   CASINO-TOKENS hero unwide fix
   /casino-tokens/* pages use cover__title--narrow modifier
   which constrains H1 to 415px causing cramped 2-col layout
   with empty right side. Override to allow natural width.
   ==================================================== */
.cover__title.cover__title--narrow {
  max-width: 100%;
  width: 100%;
}

/* ====================================================
   COVER CATEGORY COLOR VARIANTS
   Pages use --rust (existing), --cobalt (deep blue), --saffron (gold-orange)
   modifiers on the eyebrow span. Only --rust was styled in original CSS.
   ==================================================== */
.cover__category--cobalt {
  color: #fff;
  background: #1f3a8a;
  border-color: #1f3a8a;
}
.cover__category--saffron {
  color: #2d1a05;
  background: #f1a83a;
  border-color: #f1a83a;
}

/* ====================================================
   ARTICLE TABLES — editorial-style data tables
   Page-specific table classes (btc-confirmation-bands, kyc-tier0-caps,
   doge-fee-economics, ltc-fee-distribution, comparison-table, etc.)
   render as unstyled by default. Target ANY <table> inside .article
   container with editorial baseline styling.
   ==================================================== */
.article table, .container > table, table.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--s5) 0;
  font-family: var(--font-caption);
  font-size: 14px;
  background: var(--paper);
  border: 1px solid var(--ink-line);
}
.article table thead, table.comparison-table thead {
  background: var(--ink);
  color: var(--paper);
}
.article table thead th, table.comparison-table thead th, table.compare-table thead th {
  padding: 10px 14px;
  text-align: left;
  font-weight: var(--fw-k);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--paper) !important;
  background: var(--ink);
  border-right: 1px solid rgba(255,255,255,0.1);
}
table.compare-table thead th:first-child { background: var(--ink) !important; color: var(--paper) !important; }
.article table thead th:last-child { border-right: none; }
.article table tbody tr, table.comparison-table tbody tr {
  border-top: 1px solid var(--ink-line);
}
.article table tbody tr:nth-child(even),
table.comparison-table tbody tr:nth-child(even) {
  background: rgba(0,0,0,0.02);
}
.article table tbody td, table.comparison-table tbody td {
  padding: 10px 14px;
  vertical-align: top;
  border-right: 1px solid var(--ink-line);
}
.article table tbody td:last-child { border-right: none; }
.article table caption, table.comparison-table caption {
  caption-side: bottom;
  text-align: left;
  padding: 8px 0 16px;
  font-style: italic;
  color: var(--ink-muted);
  font-size: 14px;
}
@media (max-width: 720px) {
  .article table, table.comparison-table {
    font-size: 14px;
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ====================================================
   HUB CARDS — pages/about hub grid
   <article class="hub-card brand-tile"> needs editorial card style
   ==================================================== */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s4);
  margin: var(--s6) 0;
}
.hub-card {
  display: block;
  padding: var(--s5);
  background: var(--paper);
  border: 1px solid var(--ink-line);
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.hub-card:hover {
  border-color: var(--rust);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.hub-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  margin: 0 0 var(--s3);
  color: var(--ink);
}
.hub-card p { margin: 0; color: var(--ink-soft); line-height: 1.55; font-size: 15px; }
.hub-links {
  list-style: none;
  padding: 0;
  margin: var(--s4) 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s2);
}
.hub-links li {
  padding: 8px 12px;
  background: var(--paper);
  border: 1px solid var(--ink-line);
  border-radius: 3px;
  font-size: 14px;
}
.hub-links a {
  color: var(--ink);
  text-decoration: none;
}
.hub-links a:hover { color: var(--rust); text-decoration: underline; }

/* ====================================================
   COLLAPSIBLE CARD (about pages use <details class="card">)
   ==================================================== */
.card, details.card {
  padding: var(--s4) var(--s5);
  background: var(--paper);
  border: 1px solid var(--ink-line);
  border-radius: 4px;
  margin: var(--s3) 0;
}
details.card summary {
  font-family: var(--font-display);
  font-weight: var(--fw-k);
  cursor: pointer;
  font-size: 16px;
  color: var(--ink);
  list-style: none;
  position: relative;
  padding-right: 28px;
}
details.card summary::-webkit-details-marker { display: none; }
details.card summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--rust);
  font-weight: 300;
  transition: transform var(--t-fast);
}
details.card[open] summary::after { content: "−"; }
details.card .qa__a, details.card > *:not(summary) {
  margin-top: var(--s3);
  color: var(--ink-soft);
  line-height: 1.6;
}