/* =============================================================
   safe-online-casinos WordPress theme — main.css
   Faithful port of the approved mockups:
     mockups/2-user-vision/index.html          (homepage)
     mockups/2-user-vision/review-example.html (operator review)
   The two mockups shared roughly 70% of their CSS (tokens, button
   system, topbar, footer, dock nav, zoom overlay, bento base). This
   file merges both into one stylesheet. Where the two files defined
   the SAME class name with DIFFERENT rules (a non-issue in the
   mockups since each was a standalone file), the conflict is called
   out below and resolved — see the "MERGE NOTE" comments.
   ============================================================= */

/* ── SELF-HOSTED FONTS ─────────────────────────
   Source Sans 3 (body): self-hosted, per footprint registry
   `font_delivery: self-hosted-fontsource`. Files fetched from the
   @fontsource/source-sans-3 package (jsdelivr), latin subset only
   (en-GB content), regular/semibold/bold + italics, then vendored
   into this theme — no runtime CDN dependency.
   Oswald (heading font): the original brief called for Archivo
   Expanded, but Fontsource does not ship a separate "Expanded" width
   cut (checked both @fontsource/archivo and @fontsource-variable/archivo
   — the variable build only exposes a weight axis, no width/wdth axis),
   so it was left on 'Arial Narrow'/Impact — neither installed on
   Linux/Android, so every heading silently fell back to the plain
   system sans on most mobile traffic (QA round 1, blocker #3). Only
   font-weight 700 is ever used via --font-head (800 is also declared
   in a few places but the CSS font-matching algorithm falls back to
   the nearest available weight, so one file covers both), latin subset
   only, no italics used for headings. */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/oswald-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin-600-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/source-sans-3-latin-700-italic.woff2') format('woff2');
}

/* ── RESET + TOKENS ─────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --ink: #12181c;
  --ink-2: #161d21;
  --ink-3: #1b2327;
  --ink-4: #212b30;
  --paper: #e9e6df;
  --paper-dim: rgba(233,230,223,0.68);
  --paper-faint: rgba(233,230,223,0.42);
  --line: rgba(233,230,223,0.14);
  --line-2: rgba(233,230,223,0.24);
  --accent: #1f6f5c;
  --accent-2: #2e8f76;
  --accent-3: #7fb9a8;
  --accent-dim: rgba(31,111,92,0.28);
  --platinum: #c9cfc9;
  --focus: #6fbfa4;
  /* PRODUCTION: self-hosted Oswald (file above) replaces the unavailable
     Archivo Expanded — see the font-face comment above. Condensed grotesque,
     same visual role as the mockup's intended headline face. */
  --font-head: 'Oswald', 'Arial Narrow', Impact, system-ui, sans-serif;
  /* PRODUCTION: self-hosted Source Sans 3 (files above), system stack kept
     as the fallback chain for the same graceful-degradation behaviour the
     mockup specified. */
  --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--ink); color: var(--paper);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: hidden;
}
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 200;
  background: var(--accent); color: var(--paper); padding: 0.6rem 1rem;
  border-radius: 6px; transition: top 0.2s;
}
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ── BUTTON SYSTEM ───────────────────────────
   MERGE NOTE: index.html and review-example.html each defined a
   `.btn-sweep` with different sizing/colour/inner-element names (the
   index version is the compact ranking-table CTA pill; the review
   version is the larger hero/bonus-box CTA). Concatenating both as
   literal `.btn-sweep { }` would have the second block silently win
   the cascade and break the table pills. Disambiguated here:
     .btn-sweep     -> compact pill (ranking table CTA cells)
     .btn-sweep-lg  -> larger pill (review hero + bonus-box CTA)
   Behaviour (fill-sweep from cursor entry edge) is identical, only
   the class names and sizing differ, matching main.js. */
.btn-sweep {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.55rem 1.05rem; border-radius: 999px;
  font-weight: 700; font-size: 0.78rem; letter-spacing: 0.02em; white-space: nowrap;
  color: var(--accent-3); background: transparent;
  border: 1.5px solid var(--accent);
  transition: color 0.35s ease, border-color 0.35s ease;
  text-decoration: none;
}
.btn-sweep .btn-fill {
  position: absolute; inset: 0; z-index: 0; background: var(--accent);
  transform: scale(0); pointer-events: none;
  transition: transform 0.4s cubic-bezier(.4,0,.2,1);
}
.btn-sweep.dir-x .btn-fill { transform: scaleX(0); transform-origin: var(--bs-ox, center) center; }
.btn-sweep.dir-y .btn-fill { transform: scaleY(0); transform-origin: center var(--bs-oy, center); }
.btn-sweep.filled.dir-x .btn-fill { transform: scaleX(1); }
.btn-sweep.filled.dir-y .btn-fill { transform: scaleY(1); }
.btn-sweep .btn-lbl { position: relative; z-index: 1; pointer-events: none; }
.btn-sweep.filled { color: var(--paper); border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .btn-sweep .btn-fill { transition: opacity 0.2s ease; transform: none; opacity: 0; }
  .btn-sweep.filled .btn-fill { transform: none; opacity: 1; }
}

.btn-sweep-lg {
  --ox: left; --oy: top;
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.75rem 1.7rem; border-radius: 999px;
  font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em;
  text-decoration: none; color: var(--paper);
  border: 1.5px solid var(--accent-3); background: transparent;
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.btn-sweep-lg .btn-sweep-fill {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  transform: scale(0); pointer-events: none;
  transition: transform 0.4s cubic-bezier(.4,0,.2,1);
}
.btn-sweep-lg.dir-x .btn-sweep-fill { transform: scaleX(0); transform-origin: var(--ox) center; }
.btn-sweep-lg.dir-y .btn-sweep-fill { transform: scaleY(0); transform-origin: center var(--oy); }
.btn-sweep-lg.is-filled.dir-x .btn-sweep-fill { transform: scaleX(1); }
.btn-sweep-lg.is-filled.dir-y .btn-sweep-fill { transform: scaleY(1); }
.btn-sweep-lg.is-filled { border-color: transparent; box-shadow: 0 8px 22px rgba(31,111,92,0.32); }
.btn-sweep-lg .btn-sweep-lbl { position: relative; z-index: 1; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .btn-sweep-lg .btn-sweep-fill { transition: opacity 0.2s ease; transform: none; opacity: 0; }
  .btn-sweep-lg.is-filled .btn-sweep-fill { transform: none; opacity: 1; }
}

/* .btn-gborder base = index.html's plain pill version (hero "See Our Full
   Methodology" + outro "View the Top 10 Rankings"). The review page's
   back-link reuses the same rotating-border technique but with different
   sizing/colour/an icon — rather than a second colliding `.btn-gborder`
   rule, that variant is expressed as a `.back-link.btn-gborder` override
   block below (exactly matching the mockup's own markup, which already
   combines both classes on the same element). */
@property --gb-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.btn-gborder {
  --gb-thick: 1.5px; --gb-speed: 7s;
  position: relative; isolation: isolate; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.6rem 1.3rem; border-radius: 999px;
  font-weight: 700; font-size: 0.78rem; letter-spacing: 0.02em; white-space: nowrap;
  color: var(--paper); border: none; cursor: pointer; font-family: inherit;
}
.btn-gborder::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  padding: var(--gb-thick);
  background: conic-gradient(from var(--gb-angle), var(--accent-3), var(--accent), #c7d0cb, var(--accent-3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: gb-spin var(--gb-speed) linear infinite;
  filter: saturate(1) brightness(1); transition: filter 0.3s ease;
}
.btn-gborder::after {
  content: ""; position: absolute; inset: var(--gb-thick); z-index: -1; border-radius: inherit;
  background: var(--ink-3); transition: box-shadow 0.3s ease;
}
.btn-gborder:hover, .btn-gborder:focus-visible { --gb-speed: 2s; }
.btn-gborder:hover::before, .btn-gborder:focus-visible::before { filter: saturate(1.3) brightness(1.25); }
.btn-gborder:hover::after, .btn-gborder:focus-visible::after { box-shadow: inset 0 0 18px rgba(127,185,168,0.35); }
.btn-gborder:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@keyframes gb-spin { to { --gb-angle: 360deg; } }
@supports not (background: conic-gradient(from var(--gb-angle), red, blue)) {
  .btn-gborder::before {
    background: conic-gradient(var(--accent-3), var(--accent), #c7d0cb, var(--accent-3));
    animation: gb-rotate var(--gb-speed) linear infinite;
  }
}
@keyframes gb-rotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn-gborder::before { animation: none; } }

/* review page's back-link variant of .btn-gborder */
.back-link.btn-gborder {
  gap: 0.45rem; padding: 0.55rem 1.15rem;
  color: var(--paper-dim); font-size: 0.85rem;
  background: transparent; transition: color 0.25s ease;
}
.back-link.btn-gborder::before {
  background: conic-gradient(from var(--gb-angle), var(--accent), var(--platinum), var(--accent-3), var(--accent));
}
.back-link.btn-gborder::after { background: var(--ink-2); }
.back-link.btn-gborder:hover, .back-link.btn-gborder:focus-visible { color: var(--paper); }
.back-link.btn-gborder:hover::after { box-shadow: inset 0 0 18px rgba(31,111,92,0.35); }
.back-link.btn-gborder svg { width: 16px; height: 16px; stroke: var(--accent-3); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .back-link.btn-gborder::before {
    background: conic-gradient(var(--accent), var(--platinum), var(--accent-3), var(--accent));
  }
}

/* ── TOPBAR (shared, identical on every page) ── */
.topbar { position: relative; z-index: 20; padding: 1.1rem 5vw 0; }
.topbar-inner {
  max-width: 1220px; margin: 0 auto;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; flex: none; }
.brand svg { width: 34px; height: 34px; }
.brand .logo-shield { fill: var(--ink-3); stroke: var(--accent-3); stroke-width: 1.4; }
.brand .logo-ring { fill: none; stroke: var(--accent); stroke-width: 1; opacity: 0.6; }
.brand .logo-check { fill: none; stroke: var(--accent-3); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.brand .logo-tick { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-linecap: round; }
.brand .logo-dot { fill: var(--accent-3); }
.brand-word {
  font-family: var(--font-head); font-weight: 700; letter-spacing: 0.01em;
  font-size: 1.18rem; line-height: 1.05; color: var(--paper);
}
.brand-word small {
  display: block; font-family: var(--font-body); font-weight: 400;
  font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--accent-3); margin-top: 0.15rem;
}
.ad-disclosure {
  max-width: 480px; font-size: 0.68rem; line-height: 1.55;
  color: var(--paper-faint); text-align: right; padding-top: 0.3rem;
}
@media (max-width: 760px) {
  .ad-disclosure { text-align: left; max-width: 100%; }
}
.kicker {
  font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--accent-3); font-weight: 600;
}

/* ── HERO + HEX BACKGROUND (homepage) ─────────── */
.hex-bg { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }
.hero { position: relative; z-index: 1; min-height: 74vh; display: flex; align-items: center; }
.hero-scrim {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 32%, rgba(18,24,28,0.28), rgba(18,24,28,0.82) 78%);
}
.hero-inner {
  position: relative; z-index: 1; max-width: 1080px; margin: 0 auto;
  text-align: center; padding: 3rem 8vw 2.5rem;
}
.hero h1 {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(2rem, 5.4vw, 3.5rem); letter-spacing: 0.005em;
  line-height: 1.12; margin: 0.9rem 0 1.1rem; color: var(--paper);
}
.hero h1 em { font-style: normal; color: var(--accent-3); }
.hero p.lede {
  max-width: 820px; margin: 0 auto; color: var(--paper-dim);
  line-height: 1.75; font-size: 1.02rem;
}
.hero-facts {
  display: flex; gap: 1.6rem; justify-content: center; flex-wrap: wrap;
  margin-top: 1.8rem; font-size: 0.78rem; color: var(--paper-faint);
}
.hero-facts span { display: flex; align-items: center; gap: 0.45rem; }
.hero-facts svg { width: 15px; height: 15px; stroke: var(--accent-3); fill: none; stroke-width: 2; }

/* ── MAIN LAYOUT (homepage) ───────────────────── */
main { position: relative; z-index: 1; }
section { padding: 4.5rem 5vw; }
.section-inner { max-width: 1220px; margin: 0 auto; }
.section-head { max-width: 1000px; margin: 0 auto 2.6rem; text-align: center; }
.section-head .kicker { display: block; margin-bottom: 0.6rem; }
.section-head h2 {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem); letter-spacing: 0.005em;
  margin-bottom: 0.8rem;
}
.section-head p { color: var(--paper-dim); line-height: 1.7; }
.section-byline {
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--accent-3); margin-bottom: 0.9rem;
}

/* ── RANKING TABLE (homepage) ──────────────────
   Rank reads as a drawn hexagon badge, rating is a self-drawing ring
   gauge, rank #1 gets a distinct row treatment plus the "Top Pick"
   ring; sort/FLIP/hover-spotlight logic in main.js is unchanged. */
.tbl-hint { text-align: center; font-size: 0.8rem; color: var(--paper-faint); margin-bottom: 1.2rem; }
.tbl-wrap {
  position: relative; border: 1px solid var(--line); border-radius: 16px;
  background: var(--ink-3); overflow-x: auto;
}
.tbl-table { min-width: 860px; }
.tbl-row {
  display: grid;
  grid-template-columns: 80px 2.15fr 0.95fr 1.3fr 1.3fr 0.95fr;
  align-items: stretch; border-bottom: 1px solid var(--line);
  position: relative; will-change: transform;
}
.tbl-body .tbl-row:last-child { border-bottom: 0; }
.tbl-body .tbl-row { transition: background-color 0.3s; }
.tbl-body .tbl-row:nth-child(even) { background-color: rgba(233,230,223,0.022); }
.tbl-body .tbl-row:hover, .tbl-body .tbl-row:focus-within {
  background-image: radial-gradient(320px 100% at var(--tbl-mx, 50%) 50%,
    var(--accent-dim), rgba(31,111,92,0.05) 55%, transparent 75%);
}
.tbl-row.is-rank1 { background-color: rgba(31,111,92,0.07); }
.tbl-row.is-rank1 .tbl-cell { padding-top: 1.2rem; padding-bottom: 1.2rem; }
.tbl-head {
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(180deg, rgba(46,143,118,0.10), rgba(27,35,39,0.9) 60%);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-2);
}
.tbl-th { padding: 0; display: flex; }
.tbl-th button, .tbl-th .tbl-thlabel {
  flex: 1; display: flex; align-items: center; gap: 0.4rem;
  padding: 1.05rem 1.05rem; background: none; border: 0; color: var(--paper-dim);
  font: inherit; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
}
.tbl-th .tbl-thlabel { cursor: default; }
.tbl-th button:hover { color: var(--paper); }
.tbl-sortmark { font-size: 0.8em; color: var(--accent-3); opacity: 0; transition: opacity 0.25s, transform 0.25s; }
.tbl-th[aria-sort] .tbl-sortmark { opacity: 1; }
.tbl-th[aria-sort="ascending"] .tbl-sortmark { transform: rotate(180deg); }

.tbl-cell {
  padding: 1rem 1.05rem; display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.92rem; color: var(--paper-dim); font-variant-numeric: tabular-nums;
}
.tbl-rank { justify-content: center; position: relative; padding-left: 0.5rem; padding-right: 0.5rem; }
.tbl-move {
  position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
  font-size: 0.6rem; font-weight: 800; display: flex; align-items: center; opacity: 0;
}
.tbl-move.up { color: var(--accent-3); }
.tbl-move.down { color: #c98a5c; }

.tbl-rankbadge { position: relative; width: 42px; height: 42px; flex: none; display: flex; align-items: center; justify-content: center; }
.tbl-rankshape { position: absolute; inset: 0; width: 100%; height: 100%; }
.tbl-rankshape polygon {
  fill: var(--ink-4); stroke: var(--line-2); stroke-width: 1.6;
  transition: fill 0.3s ease, stroke 0.3s ease, stroke-width 0.3s ease;
}
.tbl-ranknum {
  position: relative; z-index: 1; font-family: var(--font-head); font-weight: 800;
  font-size: 1rem; color: var(--paper-faint); line-height: 1;
  transition: color 0.3s ease, font-size 0.3s ease;
}
.tbl-row.is-top3 .tbl-rankshape polygon { stroke: var(--accent-3); stroke-width: 1.8; }
.tbl-row.is-top3 .tbl-ranknum { color: var(--paper); }
.tbl-row.is-rank1 .tbl-rankshape polygon { fill: var(--accent); stroke: var(--accent-3); stroke-width: 2; }
.tbl-row.is-rank1 .tbl-ranknum { color: var(--paper); font-size: 1.22rem; }

.tbl-operator { align-items: center; padding-top: 0.9rem; padding-bottom: 0.9rem; }
.tbl-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; margin-top: 0.35rem; }
.tbl-opinfo { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.tbl-name { font-weight: 700; color: var(--paper); font-size: 1.03rem; letter-spacing: 0.003em; }
.tbl-license {
  display: inline-flex; width: fit-content;
  font-size: 0.66rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--accent-3); letter-spacing: 0.01em;
  background: var(--ink-4); border: 1px solid var(--line-2); border-radius: 4px;
  padding: 0.14rem 0.42rem;
}
.tbl-rationale {
  font-size: 0.8rem; color: var(--paper-faint); line-height: 1.5; max-width: 34ch;
  border-left: 2px solid var(--accent-dim); padding-left: 0.6rem; font-style: italic;
}

.tbl-ring-wrap { position: relative; width: 54px; height: 54px; flex: none; }
.tbl-ring { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.tbl-ring .ring-track { fill: none; stroke: var(--ink-4); stroke-width: 9; }
.tbl-ring .ring-fill {
  fill: none; stroke: var(--accent-3); stroke-width: 9; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: var(--ring-target, 2);
}
.tbl-row.is-rank1 .tbl-ring .ring-fill { stroke: var(--accent-2); }
.tbl-body .tbl-row:hover .tbl-ring .ring-fill,
.tbl-body .tbl-row:focus-within .tbl-ring .ring-fill { filter: drop-shadow(0 0 5px rgba(46,143,118,0.55)); }
.tbl-ring-label {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; pointer-events: none;
}
.tbl-ring-label .num { font-family: var(--font-head); font-weight: 800; font-size: 0.95rem; color: var(--paper); line-height: 1; }
.tbl-ring-label .out { font-size: 0.48rem; color: var(--accent-3); letter-spacing: 0.03em; margin-top: 0.1rem; }

.tbl-ctacell { justify-content: center; flex-direction: column; gap: 0.5rem; }
.tbl-cta.btn-sweep { box-shadow: 0 6px 18px rgba(31,111,92,0.16); }
.tbl-body .tbl-row:hover .tbl-cta.btn-sweep,
.tbl-body .tbl-row:focus-within .tbl-cta.btn-sweep { box-shadow: 0 6px 18px rgba(31,111,92,0.3); }
/* Real link, not the decorative "Visit Here" span — needs its own
   z-index above .tbl-rowlink's full-row overlay (z-index:6) or the
   overlay would silently swallow every click meant for this button. */
.tbl-cta-review {
  position: relative; z-index: 7; display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.72rem; font-weight: 600; color: var(--accent-3); text-decoration: none;
  border-bottom: 1px solid transparent; transition: border-color 0.15s ease, color 0.15s ease;
}
.tbl-cta-review svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tbl-cta-review:hover, .tbl-cta-review:focus-visible { color: var(--paper); border-bottom-color: currentColor; }

.tbl-logo {
  position: relative; flex: none; width: 108px; height: 50px; border-radius: 10px;
  background: var(--paper); display: flex; align-items: center; justify-content: center;
  padding: 7px 10px; border: 1px solid var(--line-2);
  box-shadow: 0 8px 20px -14px rgba(0,0,0,0.6);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.tbl-stamp {
  position: absolute; top: -11px; left: -11px; z-index: 7; pointer-events: none;
  width: 50px; height: 50px;
  transform: rotate(-13deg) scale(0.55); opacity: 0;
  transition: opacity 0.45s cubic-bezier(.22,.9,.32,1), transform 0.55s cubic-bezier(.3,1.5,.4,1);
  filter: url(#tblStampInk);
}
.tbl-stamp.is-visible { opacity: 0.94; transform: rotate(-13deg) scale(1); }
.tbl-stamp svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tbl-stamp .stamp-ring { fill: none; stroke: var(--accent-3); stroke-width: 2.2; }
.tbl-stamp .stamp-ring-inner { fill: none; stroke: var(--accent-3); stroke-width: 1; opacity: 0.65; }
.tbl-stamp .stamp-check { fill: none; stroke: var(--accent-3); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.tbl-stamp text { font-family: var(--font-head); font-weight: 700; font-size: 6px; letter-spacing: 2.6px; fill: var(--accent-3); }
@media (prefers-reduced-motion: reduce) {
  .tbl-stamp { transition: none; opacity: 0.94; transform: rotate(-13deg) scale(1); }
}
@media (max-width: 720px) {
  .tbl-stamp { width: 38px; height: 38px; top: -7px; left: -7px; }
}
.tbl-body .tbl-row:hover .tbl-logo, .tbl-body .tbl-row:focus-within .tbl-logo {
  border-color: var(--accent-3); box-shadow: 0 10px 24px -12px rgba(31,111,92,0.5);
}
.tbl-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tbl-logo.tbl-logo-text {
  background: var(--ink-4); border: 1px solid var(--line-2);
  font-family: var(--font-head); font-weight: 700; font-size: 0.62rem;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-3);
  text-align: center; line-height: 1.25; padding: 7px 6px; font-size: 0.72rem;
}
.tbl-textcell { flex-direction: column; align-items: flex-start; gap: 0.22rem; justify-content: center; }
.tbl-textmain { font-size: 0.85rem; color: var(--paper); line-height: 1.4; }
.tbl-textsub { font-size: 0.72rem; color: var(--paper-faint); line-height: 1.4; }

.tbl-rowlink { position: absolute; inset: 0; z-index: 6; text-decoration: none; }

@property --tbl-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.tbl-feature {
  position: absolute; inset: 3px; z-index: 3; pointer-events: none; border-radius: 12px; padding: 2px;
  background: conic-gradient(from var(--tbl-ang), var(--accent-3), var(--accent), transparent 65%, var(--accent-3));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: tbl-rotate 7s linear infinite;
}
@keyframes tbl-rotate { to { --tbl-ang: 360deg; } }
.tbl-featurelabel {
  /* Row 1 sits directly under the sticky header (z-index:5) with no
     gap — top:3px + translateY(-50%) used to poke the label's top half
     above the row boundary, straight into the header's stacking
     context, so it got visually sliced by the header's own background.
     Lower and re-stacked so the whole pill clears the header. */
  position: absolute; top: 16px; left: 6.3rem; z-index: 6; pointer-events: none; transform: translate(-50%, -50%);
  font-size: 0.56rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink); background: var(--accent-3); padding: 0.2rem 0.55rem; border-radius: 999px;
  white-space: nowrap;
}

.tbl-note { margin-top: 1.1rem; text-align: center; font-size: 0.76rem; color: var(--paper-faint); line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  .tbl-body .tbl-row:hover { background-image: none; background-color: var(--accent-dim); }
  .tbl-feature { animation: none; }
}
@media (max-width: 720px) { .tbl-rationale { display: none; } }

/* ── HOW WE RATE: STICKY SPLIT-SCREEN SCROLLYTELLING (homepage) ── */
.csx-wrap {
  display: grid; grid-template-columns: 1fr 56px minmax(0, 1fr); gap: 0 1.4rem;
  max-width: 1220px; margin: 0 auto;
}
.csx-mediaCol { position: relative; }
.csx-media {
  position: sticky; top: 0; height: 100vh;
  display: flex; align-items: center; justify-content: center; padding: 2.4rem 0;
}
.csx-frame {
  position: relative; width: 100%; height: 78%; max-height: 460px;
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line-2); background: var(--ink-3);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.6);
}
.csx-layer {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(130% 100% at 50% 6%, rgba(46,143,118,0.14), transparent 62%), var(--ink-3);
  will-change: clip-path;
  clip-path: inset(0 0 100% 0);
}
.csx-layer svg { width: min(78%, 370px); height: auto; overflow: visible; stroke-linecap: round; stroke-linejoin: round; }
.csx-chip {
  position: absolute; left: 1.1rem; bottom: 1rem; z-index: 2;
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper-dim); background: rgba(18,24,28,0.72);
  padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid var(--line-2);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
}
.csx-railCol { position: relative; }
.csx-rail {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem;
}
.csx-track {
  position: absolute; top: 16%; bottom: 16%; left: 50%; width: 2px; margin-left: -1px;
  background: var(--line-2); border-radius: 2px;
}
.csx-fill {
  position: absolute; inset: 0; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent-3), var(--accent));
  transform: scaleY(0); transform-origin: top center;
}
.csx-dot {
  position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--ink-3); color: var(--paper-faint);
  font: 700 0.7rem var(--font-body); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.3s, border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.csx-dot:hover, .csx-dot:focus-visible { color: var(--paper); border-color: var(--accent-3); outline: none; }
.csx-dot.on {
  color: var(--paper); border-color: var(--accent); transform: scale(1.1);
  box-shadow: 0 0 0 4px var(--accent-dim), 0 0 16px rgba(31,111,92,0.5);
}
.csx-steps { min-width: 0; }
.csx-step { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 3rem 0; max-width: 480px; }
.csx-num { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-3); margin-bottom: 0.7rem; font-weight: 700; }
.csx-step h3 { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: 0.9rem; }
.csx-step p { color: var(--paper-dim); line-height: 1.75; font-size: 0.96rem; }
.csx-outro { text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .csx-media, .csx-rail { position: static; height: auto; }
}
@media (max-width: 860px) {
  /* ROOT-CAUSE FIX for "steps text doesn't fit on mobile": the sticky
     media panel was 42vh + the sticky rail (~46px), permanently eating
     ~330px of a 667px phone viewport. The reading window left below
     (~340px) was SMALLER than every step's paragraph (430-510px tall at
     these widths), so mid-read the heading and first half of the text
     slid under the opaque media card and lines were sliced in half at
     the rail's bottom edge — the text could never fit, dock or no dock.
     The media is now clamped to roughly a third of the viewport (and
     never taller than 300px), and the rail offset is coupled to the
     same custom property so they can't drift apart. svh (small viewport
     height, i.e. with the mobile URL bar visible) is used where
     supported so real devices don't get an oversized panel when the
     browser chrome is showing; vh is the fallback. */
  .csx-wrap { --csx-top: clamp(170px, 32vh, 300px); display: block; }
  @supports (height: 1svh) {
    .csx-wrap { --csx-top: clamp(170px, 32svh, 300px); }
  }
  .csx-mediaCol, .csx-railCol { display: contents; }
  .csx-media { position: sticky; top: 0; height: var(--csx-top); z-index: 5; padding: 0.8rem; background: var(--ink-2); }
  .csx-frame { height: 100%; max-height: none; border-radius: 14px; }
  .csx-rail {
    position: sticky; top: var(--csx-top); height: auto; z-index: 6;
    flex-direction: row; gap: 0.9rem; padding: 0.6rem 1.2rem;
    background: rgba(18,24,28,0.9); border-bottom: 1px solid var(--line);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .csx-track { top: 50%; bottom: auto; left: 10%; right: 10%; width: auto; height: 2px; margin: -1px 0 0; }
  .csx-fill { background: linear-gradient(90deg, var(--accent-3), var(--accent)); transform: scaleX(0); transform-origin: left center; }
  .csx-dot { width: 26px; height: 26px; font-size: 0.62rem; }
  /* scroll-margin-top makes dot-click navigation (scrollIntoView with
     block:'start' on mobile, see main.js) land each step's heading just
     below the sticky media+rail instead of centring the step under it. */
  .csx-step { min-height: 60vh; max-width: none; padding: 2rem 5vw; scroll-margin-top: calc(var(--csx-top) + 56px); }
  .csx-layer svg { width: min(72%, 240px); max-height: 100%; }
}

/* ── FAQ ACCORDION (shared canonical version) ──
   MERGE NOTE: index.html used a CSS-only `summary::after { content:'+' }`
   plus/rotate glyph; review-example.html used a real inline `<svg
   class="faq-icon">` plus/cross glyph (more robust — a real element
   rather than generated content, still no framework). Both pages'
   markup here uses the svg-icon version so there is one canonical
   implementation; the visual difference is a 2px border-radius delta,
   not a design change. Native <details>/<summary>, every question a
   real h3 (structural rule), WAAPI height animation in main.js. */
.faq-list { display: flex; flex-direction: column; gap: 0.7rem; }
.faq-list.faq-list-narrow { max-width: 1080px; margin: 0 auto; }
.faq-item { background: var(--ink-3); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem; cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-size: 0.98rem; font-weight: 700; color: var(--paper); margin: 0; flex: 1; line-height: 1.4; }
.faq-icon {
  flex: none; width: 20px; height: 20px; stroke: var(--accent-3); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.25s ease;
}
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-item summary:hover h3, .faq-item summary:focus-visible h3 { color: var(--accent-3); }
.faq-answer { padding: 0 1.3rem 1.1rem; color: var(--paper-dim); font-size: 0.92rem; line-height: 1.7; overflow: hidden; }
.faq-answer p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .faq-icon { transition: none; } }

/* ── FOOTER (shared, identical on every page — real UK compliance copy,
   ported verbatim, do not edit wording) ──────── */
.site-footer { padding: 3.4rem 5vw 9rem; background: var(--ink-2); border-top: 1px solid var(--line); }
.footer-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.rg-line { font-weight: 700; color: var(--paper); font-size: 0.95rem; margin-bottom: 0.9rem; }
.rg-full { color: var(--paper-dim); font-size: 0.85rem; line-height: 1.7; max-width: 640px; margin: 0 auto; }
.rg-full a { color: var(--accent-3); text-decoration: underline; text-underline-offset: 2px; }
.footer-badges { display: flex; justify-content: center; gap: 0.9rem; margin: 1.6rem 0; flex-wrap: wrap; }
.badge {
  display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.85rem;
  border: 1px solid var(--line-2); border-radius: 10px; background: var(--ink-3);
  font-size: 0.72rem; font-weight: 600; color: var(--paper-dim); text-decoration: none;
}
.badge svg { width: 18px; height: 18px; stroke: var(--accent-3); fill: none; stroke-width: 1.6; }
a.badge:hover { color: var(--paper); border-color: var(--accent-3); }
.affiliate-disclosure { color: var(--paper-faint); font-size: 0.76rem; line-height: 1.75; max-width: 680px; margin: 0 auto; }
.footer-legal-nav {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem 1.4rem;
  margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.footer-legal-nav a { color: var(--paper-faint); font-size: 0.76rem; text-decoration: none; }
.footer-legal-nav a:hover { color: var(--accent-3); text-decoration: underline; text-underline-offset: 2px; }
.footer-copy { margin-top: 1.6rem; color: var(--paper-faint); font-size: 0.72rem; }

/* ── DOCK NAV (shared) ─────────────────────────── */
.dck-dock {
  position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%);
  z-index: 50; display: flex; align-items: flex-end; padding: 0.6rem 0.85rem;
  background: rgba(27,35,39,0.66); border: 1px solid var(--line-2); border-radius: 22px;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45); max-width: calc(100vw - 1.6rem);
  transition: transform 0.28s cubic-bezier(.4,0,.2,1), opacity 0.28s ease;
}
.dck-dock.is-dockhidden {
  transform: translateX(-50%) translateY(calc(100% + 1.8rem));
  opacity: 0; pointer-events: none;
}
@media (max-width: 860px) {
  /* Moved from bottom-fixed to top-fixed on mobile — not a tweak, a
     different mechanism. A bottom-fixed dock sits exactly where a reader's
     eyes are (new content entering at the bottom of the viewport), so any
     JS/CSS mitigation that can fail (timing, observer support, some device
     quirk) still shows it sitting on top of the line being read — confirmed
     still happening on a real device even with hide/suppress + opaque
     background in place. A top-fixed bar only ever overlaps content that
     has already scrolled UP AND OUT of the reading area above the fold, so
     there is no failure mode left where it can land on the text a reader is
     currently looking at — it can't, independent of any JS running at all.
     `fixed` (not `sticky`) deliberately — sticky only engages once the
     element's natural DOM position (end of footer.php, nearly the bottom
     of a long page) is about to scroll past the top, so for most of the
     page it would just sit off-screen, invisible and useless. `fixed` is
     always viewport-relative regardless of where its HTML lives. */
  .dck-dock {
    position: fixed; top: 0; left: 0; right: 0; bottom: auto;
    transform: none; width: 100%; max-width: 100%; margin: 0;
    border-radius: 0; border-width: 0 0 1px; justify-content: center;
    background: rgb(20,26,30); backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .dck-dock.is-dockhidden { transform: translateY(-100%); }
  /* The dock now permanently occupies the top ~70px of the viewport instead
     of floating over the bottom — push the whole page down by that much so
     the topbar/hero isn't rendered partly underneath it on first load. */
  body { padding-top: 70px; }
}
.dck-btn {
  --s: 1; position: relative; width: 50px; height: 50px; flex: none;
  margin: 0 calc((var(--s) - 1) * 15px);
  display: block; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.dck-icon {
  position: absolute; inset: 3px; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: linear-gradient(160deg, var(--ink-4), var(--ink-3));
  border: 1px solid var(--line-2); transform-origin: 50% 100%;
  transform: scale(var(--s)) translateY(calc((1 - var(--s)) * 6px));
  will-change: transform; transition: border-color 0.25s;
}
.dck-btn:hover .dck-icon { border-color: var(--accent-3); }
.dck-icon svg { width: 21px; height: 21px; stroke: var(--paper-dim); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dck-btn.is-active .dck-icon svg { stroke: var(--accent-3); }
.dck-btn.is-active .dck-icon { border-color: var(--accent); }
.dck-btn::after {
  content: ''; position: absolute; left: 50%; bottom: -6px; width: 4px; height: 4px;
  border-radius: 50%; transform: translateX(-50%); background: var(--accent-3);
  opacity: 0; transition: opacity 0.3s;
}
.dck-btn.is-active::after { opacity: 1; }
.dck-tip {
  position: absolute; left: 50%; bottom: calc(100% + 12px);
  transform: translateX(-50%) translateY(calc((1 - var(--s)) * 40px));
  padding: 0.35rem 0.7rem; border-radius: 7px; background: var(--ink-4); border: 1px solid var(--line-2);
  font-size: 0.7rem; letter-spacing: 0.05em; white-space: nowrap; color: var(--paper);
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.dck-btn:hover .dck-tip, .dck-btn:focus-visible .dck-tip { opacity: 1; }
.dck-touch .dck-btn { margin: 0 2px; }
.dck-touch .dck-btn .dck-icon { transform: none; }
.dck-touch .dck-btn:active .dck-icon { border-color: var(--accent); background: var(--ink-3); }

/* ── ZOOM TRANSITION OVERLAY (shared) ──────────── */
.zoom-overlay {
  position: fixed; inset: 0; z-index: 9999; background: rgba(18,24,28,0);
  transition: background-color 0.5s ease; pointer-events: none;
}
.zoom-overlay.is-active { background: rgba(18,24,28,0.9); }
.zoom-clone {
  position: fixed; z-index: 10000; background: var(--ink-3);
  border: 1px solid var(--accent); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
}
.zoom-clone-inner { text-align: center; padding: 1rem; }
.zoom-clone-inner svg { width: 34px; height: 34px; margin: 0 auto 0.6rem; stroke: var(--accent-3); fill: none; stroke-width: 1.5; }
.zoom-clone-label {
  display: block; font-family: var(--font-head); font-size: 0.8rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-dim);
}
@media (prefers-reduced-motion: reduce) {
  .zoom-overlay, .zoom-clone { display: none !important; }
}

/* =============================================================
   REVIEW PAGE ONLY (single-operator.php) — from review-example.html
   ============================================================= */

.review-hero { position: relative; z-index: 1; padding: 2rem 5vw 3rem; }
.review-hero-scrim {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 65% at 50% 20%, rgba(18,24,28,0.25), rgba(18,24,28,0.86) 75%);
}
.review-hero-inner {
  position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; gap: 2.5rem; flex-wrap: wrap;
}
.review-id { flex: 1 1 340px; }
.review-hero h1 {
  font-family: var(--font-head); font-weight: 700; font-size: clamp(1.9rem, 4.6vw, 3rem);
  letter-spacing: 0.005em; line-height: 1.1; margin: 0.7rem 0 0.9rem;
}
.review-hero .lede { color: var(--paper-dim); line-height: 1.75; max-width: 66ch; }
.review-byline { margin-top: 0.9rem; font-size: 0.78rem; color: var(--paper-faint); }
.review-byline strong { color: var(--paper-dim); font-weight: 600; }
.review-byline a { color: var(--accent-3); text-decoration: underline; text-underline-offset: 2px; }
.review-byline a:hover { color: var(--accent-2); }

.review-hero-facts { display: flex; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.1rem; font-size: 0.78rem; color: var(--paper-faint); }
.review-hero-facts span { display: flex; align-items: center; gap: 0.45rem; }
.review-hero-facts svg { width: 15px; height: 15px; stroke: var(--accent-3); fill: none; stroke-width: 2; flex: none; }

.review-cta-block { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.7rem; }
.review-score-badge {
  width: 108px; height: 108px; border-radius: 50%; border: 2px solid var(--accent);
  background: radial-gradient(circle at 40% 30%, var(--ink-4), var(--ink-3));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.review-score-badge .num { font-family: var(--font-head); font-size: 1.9rem; font-weight: 700; color: var(--paper); line-height: 1; }
.review-score-badge .out { font-size: 0.66rem; color: var(--accent-3); letter-spacing: 0.08em; margin-top: 0.15rem; }
.review-rg-note { font-size: 0.72rem; color: var(--paper-faint); text-align: center; }
.review-logo-plate {
  display: flex; align-items: center; justify-content: center; padding: 0.9rem 1.1rem;
  background: var(--paper); border-radius: 12px; margin-bottom: 0.3rem;
}
.review-logo-plate img { width: 128px; height: auto; }

/* back link + breadcrumb */
.back-row { max-width: 1220px; margin: 0 auto; padding: 1.4rem 5vw 0; position: relative; z-index: 1; }
.back-link { display: inline-flex; align-items: center; gap: 0.45rem; text-decoration: none; color: var(--paper-dim); font-size: 0.85rem; cursor: pointer; font-family: inherit; }
.back-link:hover { color: var(--paper); }
.breadcrumb-row { max-width: 1220px; margin: 0 auto; padding: 0.6rem 5vw 0; position: relative; z-index: 1; }
.breadcrumb-list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.76rem; color: var(--paper-faint); }
.breadcrumb-list li { display: flex; align-items: center; gap: 0.4rem; }
.breadcrumb-list li + li::before { content: '/'; color: var(--line-2); }
.breadcrumb-list a { color: var(--paper-dim); text-decoration: none; }
.breadcrumb-list a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 2px; }
.breadcrumb-list [aria-current="page"] { color: var(--accent-3); font-weight: 600; }

/* Bento spotlight grid (Zone A) */
.bnt-section { padding: 1rem 5vw 4.5rem; position: relative; z-index: 1; }
.bnt-wrap { max-width: 1100px; margin: 0 auto; }
.bnt-heading { font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent-3); font-weight: 600; margin: 0 0 0.9rem; }
.bnt-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 168px; grid-auto-flow: dense; }
@media (max-width: 860px) {
  .bnt-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .bnt-card { grid-column: auto / span 2 !important; grid-row: auto / span 1 !important; }
  .bnt-card.tall { grid-row: auto / span 2 !important; }
}
.bnt-card {
  position: relative; border-radius: 14px; background: var(--ink-3); padding: 1.3rem 1.4rem;
  overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.4rem;
  --bnt-x: 50%; --bnt-y: 50%; --bnt-b: 0; isolation: isolate;
  opacity: 0; transform: translateY(28px) scale(0.97);
  transition: opacity 0.6s cubic-bezier(.22,.9,.32,1), transform 0.6s cubic-bezier(.22,.9,.32,1), box-shadow 0.3s ease;
  transition-delay: calc(var(--i, 0) * 90ms);
}
.bnt-card.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.bnt-card:hover, .bnt-card:focus-within { box-shadow: 0 14px 34px rgba(0,0,0,0.35); }
.bnt-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  pointer-events: none; z-index: 3;
  background:
    radial-gradient(300px circle at var(--bnt-x) var(--bnt-y),
      rgba(127,185,168, calc(0.95 * var(--bnt-b))),
      rgba(31,111,92,  calc(0.45 * var(--bnt-b))) 45%,
      transparent 75%),
    linear-gradient(var(--line-2), var(--line-2));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
.bnt-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: radial-gradient(380px circle at var(--bnt-x) var(--bnt-y),
    rgba(31,111,92,0.22), rgba(127,185,168,0.08) 45%, transparent 70%);
  opacity: 0; transition: opacity 0.25s ease;
}
.bnt-card:hover::after, .bnt-card:focus-within::after { opacity: 1; }
.bnt-card > * { position: relative; z-index: 1; }
.bnt-cardlink { position: absolute; inset: 0; z-index: 4; text-decoration: none; }
.bnt-card h3 { font-size: 1rem; font-weight: 700; letter-spacing: -0.005em; }
.bnt-card p { font-size: 0.83rem; color: var(--paper-dim); line-height: 1.55; }
.bnt-card .bnt-tag { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-3); font-weight: 700; }
.bnt-art { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }

.bnt-big { font-family: var(--font-head); font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 700; color: var(--paper); }
.bnt-license-num { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem; color: var(--accent-3); }

.bnt-list { list-style: none; display: flex; flex-direction: column; gap: 0.35rem; width: 100%; font-size: 0.85rem; color: var(--paper-dim); }
.bnt-list li { display: flex; align-items: center; gap: 0.5rem; }
.bnt-list svg { width: 15px; height: 15px; stroke: var(--accent-3); fill: none; stroke-width: 2; flex: none; }
.bnt-list.lg { font-size: 0.98rem; gap: 0.6rem; }
.bnt-list.lg svg { width: 19px; height: 19px; }

/* Payout speed scale */
.speed-scale { width: 100%; }
.speed-scale-track { position: relative; height: 6px; border-radius: 3px; background: var(--ink-4); margin: 0 2px; }
.speed-scale-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent-3), var(--accent)); }
.speed-scale-pin { position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 2px solid var(--accent-3); transform: translate(-50%, -50%); }
.speed-scale-ticks { display: flex; justify-content: space-between; margin-top: 0.5rem; }
.speed-scale-ticks span { font-size: 0.6rem; color: var(--paper-faint); letter-spacing: 0.01em; }
.speed-scale-caption { margin-top: 0.55rem; font-size: 0.72rem; color: var(--paper-dim); line-height: 1.35; }
.speed-scale-caption strong { color: var(--paper); }

/* RG tools grid */
.rg-tools-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; width: 100%; }
.rg-tool { display: flex; align-items: center; gap: 0.4rem; }
.rg-tool-icon { flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--ink-4); display: flex; align-items: center; justify-content: center; }
.rg-tool-icon svg { width: 15px; height: 15px; stroke: var(--accent-3); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rg-tool-label { font-size: 0.66rem; color: var(--paper-dim); line-height: 1.2; }
/* In the narrow Zone A bento card, a stretched 2-col grid is fine (each
   cell is already tool-sized). Widened to 1100px via .pg-wide on the
   pillar pages, those same 2 equal-width columns leave each compact
   icon+label pair bunched at the left of a ~550px-wide cell with dead
   space trailing it — reads as "stuck on the left" rather than centered.
   Switch to a single auto-sized row, centered as a group, same treatment
   as .pg-fact-strip.pg-wide. */
.rg-tools-grid.pg-wide { grid-template-columns: repeat(4, auto); justify-content: center; gap: 1.6rem; }
@media (max-width: 720px) {
  .rg-tools-grid.pg-wide { grid-template-columns: repeat(2, auto); }
}
.rg-tools-grid.pg-wide .rg-tool { gap: 0.6rem; }
.rg-tools-grid.pg-wide .rg-tool-icon { width: 42px; height: 42px; border-radius: 11px; }
.rg-tools-grid.pg-wide .rg-tool-icon svg { width: 22px; height: 22px; }
.rg-tools-grid.pg-wide .rg-tool-label { font-size: 0.85rem; }

/* self-drawing rating ring (bento cell, 64px) */
.rating-ring-wrap { position: relative; width: 64px; height: 64px; margin: 0 auto; }
.rating-ring-wrap .rating-ring-label .num { font-size: 1.15rem; }
.rating-ring-wrap .rating-ring-label .out { font-size: 0.5rem; }
.rating-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.rating-ring .ring-track { fill: none; stroke: var(--line-2); stroke-width: 8; }
.rating-ring .ring-fill {
  fill: none; stroke: var(--accent-3); stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.15s cubic-bezier(.22,.9,.32,1) 0.15s;
}
.bnt-card.is-visible .ring-fill { stroke-dashoffset: var(--ring-target, 2); }
.rating-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.rating-ring-label .num { font-family: var(--font-head); font-size: 1.55rem; font-weight: 700; color: var(--paper); line-height: 1; }
.rating-ring-label .out { font-size: 0.58rem; color: var(--accent-3); letter-spacing: 0.06em; margin-top: 0.15rem; }
@media (prefers-reduced-motion: reduce) {
  .rating-ring .ring-fill { transition: none; stroke-dashoffset: var(--ring-target, 2); }
}

/* Security cell: ink-stamp "APPROVED" seal, same visual grammar as the
   homepage table's .tbl-stamp (ring + inner ring + checkmark + curved
   text along #tblStampArc, ink-turbulence filter via #tblStampInk from
   header.php) — scaled up and given its own class since this is the
   card's whole centerpiece, not a small corner badge. */
.security-stamp-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; }
/* Rectangular ink-chop: double-ruled border, corner stars, bold
   "APPROVED" headline, rule line, "SECURITY & DATA" subtitle. This card
   has no visible tag/heading of its own — the stamp is the entire card. */
.security-stamp { width: 196px; height: 110px; transform: rotate(-7deg); }
.security-stamp svg { width: 100%; height: 100%; display: block; overflow: visible; }
.security-stamp .stamp-frame rect { fill: none; stroke: var(--accent-3); }
.security-stamp .stamp-frame rect:first-of-type { stroke-width: 3; }
.security-stamp .stamp-frame-inner { stroke-width: 1.2; opacity: 0.7; }
.security-stamp .stamp-star { fill: var(--accent-3); stroke: none; }
.security-stamp .stamp-word { font-family: var(--font-head); font-weight: 800; font-size: 19px; letter-spacing: 2px; fill: var(--accent-3); }
.security-stamp .stamp-rule { stroke: var(--accent-3); stroke-width: 1.4; opacity: 0.7; }
.security-stamp .stamp-sub { font-family: var(--font-head); font-weight: 700; font-size: 9px; letter-spacing: 2.5px; fill: var(--accent-3); }

@media (prefers-reduced-motion: reduce) {
  .bnt-card { opacity: 1; transform: none; transition: none; }
  .bnt-card::after { transition: none; }
}

/* Zone B long-form detail sections */
.detail-section { padding: 0 5vw 3.4rem; position: relative; z-index: 1; }
.detail-wrap { max-width: 1080px; margin: 0 auto; }
.detail-section h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.7rem); margin-bottom: 0.9rem; color: var(--paper); }
.detail-section p { color: var(--paper-dim); line-height: 1.8; margin-bottom: 1rem; font-size: 0.98rem; }
.detail-section p:last-child { margin-bottom: 0; }
.detail-lede-gap { padding-top: 0.6rem; }

/* customer support channel list */
.support-channels { list-style: none; margin: 1.2rem 0 1.4rem; display: flex; flex-direction: column; gap: 0.85rem; }
.support-channel { display: flex; align-items: flex-start; gap: 0.8rem; }
.support-channel-icon { flex: none; width: 34px; height: 34px; border-radius: 9px; background: var(--ink-3); border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; }
.support-channel-icon svg { width: 17px; height: 17px; stroke: var(--accent-3); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.support-channel-name { font-weight: 700; color: var(--paper); font-size: 0.92rem; }
.support-channel-detail { font-size: 0.84rem; color: var(--paper-dim); line-height: 1.5; }
.support-channel-detail em { font-style: normal; color: var(--paper-faint); }

/* Bonus box (welcome-offer-detail) */
@property --bonus-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.bonus-box {
  position: relative; isolation: isolate; margin: 1.3rem 0; padding: 1.5rem 1.6rem; border-radius: 18px;
  background: linear-gradient(160deg, var(--ink-4), var(--ink-3));
}
.bonus-box::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--bonus-ang), var(--accent-3), var(--accent), transparent 60%, var(--accent-3));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: bonus-ring-spin 9s linear infinite;
}
@keyframes bonus-ring-spin { to { --bonus-ang: 360deg; } }
@media (prefers-reduced-motion: reduce) { .bonus-box::before { animation: none; } }

.bonus-box-eyebrow {
  display: flex; align-items: center; gap: 0.45rem; margin-bottom: 1rem;
  font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--accent-3);
}
.bonus-box-eyebrow svg { width: 15px; height: 15px; stroke: var(--accent-3); fill: none; stroke-width: 2; flex: none; }

.bonus-box-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.bonus-box-offer { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.bonus-box-logo {
  flex: none; width: 96px; height: 44px; border-radius: 8px;
  background: var(--paper); display: flex; align-items: center; justify-content: center;
  padding: 6px 9px; border: 1px solid var(--line-2);
  box-shadow: 0 8px 18px -14px rgba(0,0,0,0.6);
}
.bonus-box-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.bonus-box-logo-text { font-family: var(--font-head); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.02em; color: var(--ink); text-align: center; line-height: 1.15; }
.bonus-box-headline { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--paper); line-height: 1.1; }
.bonus-box-headline small { display: block; font-family: var(--font-body); font-weight: 400; font-size: 0.82rem; color: var(--accent-3); margin-top: 0.35rem; }

.bonus-box-terms { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem 1.4rem; margin-bottom: 1.3rem; }
.bonus-term { display: flex; align-items: flex-start; gap: 0.65rem; }
.bonus-term-icon { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--ink-2); border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; margin-top: 0.1rem; }
.bonus-term-icon svg { width: 15px; height: 15px; stroke: var(--accent-3); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.bonus-term-name { font-size: 0.63rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--paper-faint); font-weight: 700; margin-bottom: 0.2rem; }
.bonus-term-value { font-size: 0.87rem; color: var(--paper-dim); line-height: 1.4; }
.bonus-term-value em { font-style: normal; color: var(--paper-faint); }
.bonus-term-badge {
  display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.03em; color: var(--ink); background: var(--accent-3); padding: 0.18rem 0.55rem;
  border-radius: 999px;
}

.bonus-box-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.15rem; border-top: 1px solid var(--line); }
.bonus-box-legal { font-size: 0.72rem; color: var(--paper-faint); line-height: 1.5; max-width: 46ch; }
.bonus-box-legal a { color: var(--accent-3); text-decoration: underline; text-underline-offset: 2px; }
.bonus-box-rg { font-size: 0.7rem; font-weight: 700; color: var(--paper-dim); margin-top: 0.35rem; }

/* Pros/cons */
.proscons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 700px) { .proscons-grid { grid-template-columns: 1fr; } }
.proscons-card { background: var(--ink-3); border: 1px solid var(--line); border-radius: 14px; padding: 1.3rem 1.4rem; }
.proscons-card h3 { font-size: 1rem; margin-bottom: 0.85rem; }
.proscons-card.pros h3 { color: var(--accent-3); }
.proscons-card.cons h3 { color: var(--paper-faint); }
.proscons-card ul { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.proscons-card li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; color: var(--paper-dim); line-height: 1.55; padding: 0.15rem 0; }
.proscons-card svg { width: 16px; height: 16px; flex: none; stroke-width: 2; fill: none; }
.proscons-card.pros svg { stroke: var(--accent-3); }
.proscons-card.cons svg { stroke: var(--paper-faint); }
.pc-icon-chip { flex: none; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.proscons-card.pros .pc-icon-chip { background: rgba(31,111,92,0.18); border: 1px solid var(--accent-dim); }
.proscons-card.cons .pc-icon-chip { background: rgba(233,230,223,0.06); border: 1px solid var(--line-2); }
.pc-icon-chip svg { width: 16px; height: 16px; margin-top: 0; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.proscons-card.pros .pc-icon-chip svg { stroke: var(--accent-3); }
.proscons-card.cons .pc-icon-chip svg { stroke: var(--paper-faint); }

.pc-balance { margin: 0 0 1.5rem; }
.pc-balance-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--line); border: 1px solid var(--line-2); }
.pc-balance-seg.pros-seg { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.pc-balance-seg.cons-seg { background: var(--line-2); }
.pc-balance-labels { display: flex; justify-content: space-between; font-size: 0.74rem; color: var(--paper-dim); margin-top: 0.5rem; font-weight: 600; }
.pc-balance-note { font-size: 0.72rem; color: var(--paper-faint); margin-top: 0.35rem; }

/* payment method icon chips (Zone A compact + Zone B fuller grid) */
.pay-chip { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; }
.pay-chip-icon { width: 42px; height: 42px; border-radius: 11px; flex: none; background: var(--ink-4); border: 1px solid var(--line-2); display: flex; align-items: center; justify-content: center; }
.pay-chip-icon svg { width: 22px; height: 22px; stroke: var(--accent-3); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pay-chip-label { font-size: 0.64rem; letter-spacing: 0.02em; color: var(--paper-dim); line-height: 1.25; }
.pay-chips-row { list-style: none; display: flex; align-items: flex-start; justify-content: space-around; gap: 0.5rem; width: 100%; }
.pay-chips-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 1.1rem; margin-top: 1.3rem; }
.pay-chips-grid .pay-chip-icon { width: 54px; height: 54px; border-radius: 13px; }
.pay-chips-grid .pay-chip-icon svg { width: 27px; height: 27px; }
.pay-chips-grid .pay-chip-label { font-size: 0.72rem; }

/* Real payment-provider logos, Zone B "payment methods in detail" */
.pay-logos-grid { list-style: none; display: grid; grid-template-columns: repeat(var(--cols, auto-fit), minmax(120px, 1fr)); gap: 1rem; margin-top: 1.4rem; }
@media (max-width: 640px) { .pay-logos-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important; } }
.pay-logo-tile {
  border-radius: 10px; overflow: hidden; aspect-ratio: 5 / 3; background: #fff;
  box-shadow: 0 8px 20px -14px rgba(0,0,0,0.6); border: 1px solid var(--line-2);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* These are raw inline <svg> children (not <img>), each with only a
   viewBox and no explicit width/height — per spec that defaults every
   one of them to a 300x150 intrinsic box regardless of viewBox. Combined
   with this tile's overflow:hidden, a wide/short logo like PayPal's
   (viewBox 124x33, ~3.8:1) renders oversized then gets clipped down to
   whatever middle slice happens to fit — the "broken", cropped-looking
   logo. Sizing the svg to the tile itself lets its own viewBox scale
   correctly (preserveAspectRatio's default already letterboxes cleanly). */
.pay-logo-tile svg { display: block; width: 100%; height: 100%; }
.pay-logo-tile:hover { transform: translateY(-2px); box-shadow: 0 12px 26px -12px rgba(31,111,92,0.4); }
.pay-logo-tile svg { width: 100%; height: 100%; display: block; }
.pay-logos-note { margin-top: 0.8rem; font-size: 0.7rem; color: var(--paper-faint); line-height: 1.5; }

/* Zone A "Payment Methods" bento cell — top 3 methods */
.pay-popular-row { display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; }
.pay-popular-tile { width: 58px; height: 35px; border-radius: 7px; overflow: hidden; flex: none; background: #fff; box-shadow: 0 6px 14px -10px rgba(0,0,0,0.6); border: 1px solid var(--line-2); }
.pay-popular-tile svg { width: 100%; height: 100%; display: block; }
.pay-popular-caption { text-align: center; font-size: 0.62rem; letter-spacing: 0.03em; color: var(--paper-faint); margin-top: 0.5rem; }

/* 10 popular games: tilt + glare card rail */
.popgames-wrap { max-width: 1100px; margin: 0 auto; }
.popgames-caption { font-size: 0.82rem; color: var(--paper-faint); margin: -0.4rem 0 1.3rem; }

/* ── Software Providers — derived from the real per-operator games list,
   sits under the popular-games rail within the same games-detail section. ── */
.providers-block { margin-top: 1.8rem; }
.providers-block h3 { font-family: var(--font-head); font-weight: 700; font-size: 1rem; color: var(--paper); margin-bottom: 0.9rem; }
.providers-grid {
  list-style: none; display: grid; grid-template-columns: repeat(var(--cols, auto-fit), minmax(120px, 1fr)); gap: 0.9rem; padding: 0;
}
@media (max-width: 640px) { .providers-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important; } }
.provider-tile {
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 12px;
  padding: 1rem 1.2rem; display: flex; align-items: center; justify-content: center;
  height: 68px; box-shadow: 0 6px 14px -10px rgba(0,0,0,0.6);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.provider-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(31,111,92,0.4); }
.provider-tile img { height: 100%; width: auto; max-width: 190px; object-fit: contain; display: block; }
.popgames-rail { overflow-x: auto; overflow-y: hidden; padding: 0.4rem 0.2rem 1rem; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.popgames-track { display: flex; gap: 1.1rem; width: max-content; }
.game-tilt-wrap { perspective: 900px; flex: none; width: 188px; scroll-snap-align: start; }
.game-card {
  position: relative; width: 100%; border-radius: 14px; background: var(--ink-3); border: 1px solid var(--line);
  display: flex; flex-direction: column; transform-style: preserve-3d; will-change: transform;
}
.game-art { position: relative; height: 108px; border-radius: 14px 14px 0 0; overflow: hidden; transform: translateZ(18px); }
.game-art .ga-shape { position: absolute; border-radius: 50%; }
/* Real matched game-art photo, when one exists (see soc_operator_games_data()) — replaces
   the tone gradient + themed icon fallback entirely for that card. */
.game-art-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.game-card:hover .game-art-photo, .game-card:focus-within .game-art-photo { transform: scale(1.04); }
.game-art-photo { transition: transform 0.4s ease; }
/* Themed "thumbnail" icon (no licensed per-game art exists, so this is
   an honest stand-in — a symbol matched to the title, not real box art)
   layered above the tone gradient/shape. */
.game-art-icon { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; }
.game-art-icon svg {
  width: 42px; height: 42px; stroke: var(--paper); fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; opacity: 0.92;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.4));
}
.game-info { padding: 0.85rem 0.9rem 1rem; transform: translateZ(32px); display: flex; flex-direction: column; gap: 0.3rem; }
.game-tag {
  align-self: flex-start; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  color: var(--accent-3); background: rgba(31,111,92,0.18); border: 1px solid var(--accent-dim);
  padding: 0.2rem 0.55rem; border-radius: 999px;
}
.game-name { font-size: 0.9rem; font-weight: 700; color: var(--paper); margin-top: 0.4rem; line-height: 1.3; }
.game-provider { font-size: 0.72rem; color: var(--paper-faint); }
.game-glare {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit; transform: translateZ(55px);
  background: radial-gradient(160px circle at var(--gg-x, 50%) var(--gg-y, 50%),
    rgba(233,230,223,0.32), rgba(233,230,223,0.08) 40%, transparent 65%);
  opacity: 0; transition: opacity 0.35s ease;
}
.game-card.is-live .game-glare { opacity: 1; }
.game-tone-1 .game-art { background: radial-gradient(120% 100% at 20% 15%, var(--accent-2), var(--ink-4) 65%); }
.game-tone-1 .ga-shape { width: 90px; height: 90px; right: -30px; bottom: -30px; background: var(--accent); opacity: 0.35; }
.game-tone-2 .game-art { background: linear-gradient(135deg, var(--ink-4) 35%, var(--accent) 140%); }
.game-tone-2 .ga-shape { width: 60px; height: 60px; left: 14px; top: 14px; background: var(--platinum); opacity: 0.22; }
.game-tone-3 .game-art { background: conic-gradient(from 200deg at 60% 40%, var(--ink-4), var(--accent-3), var(--ink-3)); }
.game-tone-3 .ga-shape { width: 130px; height: 130px; right: -50px; top: -60px; background: var(--ink-2); opacity: 0.55; }
.game-tone-4 .game-art { background: radial-gradient(90% 130% at 80% 100%, var(--accent), var(--ink-4) 70%); }
.game-tone-4 .ga-shape { width: 44px; height: 44px; left: 22px; bottom: 18px; background: var(--accent-3); opacity: 0.4; }
.game-tone-5 .game-art { background: linear-gradient(200deg, var(--accent-3) -10%, var(--ink-4) 55%); }
.game-tone-5 .ga-shape { width: 100px; height: 100px; left: -30px; bottom: -40px; background: var(--ink-2); opacity: 0.5; }
.game-tone-6 .game-art { background: conic-gradient(from 40deg at 30% 70%, var(--ink-3), var(--accent), var(--ink-4)); }
.game-tone-6 .ga-shape { width: 70px; height: 70px; right: 10px; top: -20px; background: var(--platinum); opacity: 0.2; }
.game-tone-7 .game-art { background: radial-gradient(110% 90% at 15% 90%, var(--accent-2), var(--ink-3) 60%); }
.game-tone-7 .ga-shape { width: 54px; height: 54px; right: 18px; bottom: -18px; background: var(--accent-3); opacity: 0.3; }
.game-tone-8 .game-art { background: linear-gradient(115deg, var(--ink-4) 10%, var(--accent-3) 90%); }
.game-tone-8 .ga-shape { width: 84px; height: 84px; left: 30%; top: -40px; background: var(--ink-2); opacity: 0.45; }
.game-tone-9 .game-art { background: conic-gradient(from 160deg at 70% 30%, var(--ink-2), var(--accent), var(--ink-4)); }
.game-tone-9 .ga-shape { width: 46px; height: 46px; left: -10px; top: 20px; background: var(--accent-3); opacity: 0.35; }
.game-tone-10 .game-art { background: radial-gradient(100% 100% at 50% 120%, var(--accent-2), var(--ink-3) 65%); }
.game-tone-10 .ga-shape { width: 120px; height: 120px; right: -40px; top: -50px; background: var(--ink-2); opacity: 0.5; }
@media (prefers-reduced-motion: reduce) {
  .game-card, .game-art, .game-info, .game-glare { transform: none !important; }
  .game-glare { display: none; }
  .popgames-rail { scroll-snap-type: none; }
}

/* verdict block */
.verdict-block { background: linear-gradient(160deg, var(--ink-4), var(--ink-3)); border: 1px solid var(--line-2); border-radius: 16px; padding: 1.7rem 1.9rem; }
.verdict-block .kicker { display: block; margin-bottom: 0.6rem; }
.verdict-block p { margin-bottom: 0; }
.verdict-block .verdict-rg { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line-2); font-size: 0.82rem; font-weight: 700; color: var(--paper-faint); text-align: center; }

/* ── page.php generic fallback template ── */
/* ── Generic page hero — upgraded from a bare centered H1 to match the
   richer hero treatment already used on the homepage/reviews (scrim over
   the hex-pulse background for legibility, kicker eyebrow, brand mark). ── */
.generic-page-hero { position: relative; z-index: 1; padding: 3.4rem 5vw 2.2rem; text-align: center; }
.generic-page-hero-scrim {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 65% at 50% 25%, rgba(18,24,28,0.25), rgba(18,24,28,0.86) 78%);
}
.generic-page-hero-inner { position: relative; z-index: 1; max-width: 780px; margin: 0 auto; }
.generic-page-hero-icon {
  width: 52px; height: 52px; margin: 0 auto 1.1rem; display: flex; align-items: center; justify-content: center;
  border-radius: 14px; background: var(--ink-3); border: 1px solid var(--line-2);
}
.generic-page-hero-icon svg { width: 26px; height: 26px; stroke: var(--accent-3); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* Real hero image: a single iconic badge (distinct from, not a repeat of,
   the fuller illustration reused later in a .pg-feature section), with a
   soft glow behind it so the hero doesn't open on bare centered text. */
.generic-page-hero-image { position: relative; width: 168px; height: 168px; margin: 0 auto 1.4rem; }
.generic-page-hero-image::before {
  content: ''; position: absolute; inset: -30%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(31,111,92,0.28), transparent 70%);
}
.generic-page-hero-image svg { position: relative; z-index: 1; width: 100%; height: 100%; overflow: visible; }
.generic-page-hero .kicker { display: block; margin-bottom: 0.7rem; }
.generic-page-hero h1 { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.15; margin-bottom: 0.9rem; }
.generic-page-hero .hero-dek { color: var(--paper-dim); line-height: 1.7; max-width: 620px; margin: 0 auto; font-size: 1rem; }

/* Prose column stays narrow for readability; full-width visual components
   (icon grids, galleries, criterion illustrations) can break out via
   .generic-page-break inside the content. */
.generic-page-content { max-width: 1080px; margin: 0 auto; padding: 0 5vw 4.5rem; position: relative; z-index: 1; color: var(--paper-dim); line-height: 1.8; }
.pg-hero-photo {
  display: block; width: 100%; max-width: 1080px; height: auto; aspect-ratio: 16/7;
  object-fit: cover; border-radius: 18px; border: 1px solid var(--line-2);
  margin: 0.6rem 0 2rem;
}
/* The pillar pages reuse .detail-section/.detail-wrap for each criterion's
   markup (same classes review Zone B uses, kept as-is there). Left alone,
   two things compound to leave every criterion section narrower than the
   un-wrapped intro paragraphs, staggering the left edge as you scroll:
   1) .detail-wrap's own 760px cap silently overriding the 880px above.
   2) .detail-section's 5vw horizontal padding stacking on top of
      .generic-page-content's own 5vw padding (fine when .detail-section
      is a direct child of <main> on review pages; doubled here since it's
      nested one level deeper). Both scoped so review pages are unaffected. */
.generic-page-content .detail-wrap { max-width: none; }
.generic-page-content .detail-section { padding-left: 0; padding-right: 0; }
.generic-page-content h2 { font-family: var(--font-head); font-weight: 700; color: var(--paper); margin: 2.2rem 0 0.9rem; font-size: clamp(1.3rem, 2.6vw, 1.7rem); }
.generic-page-content h2:first-child { margin-top: 0; }
.generic-page-content p { margin-bottom: 1rem; }
.generic-page-break { max-width: 1100px; margin-left: auto; margin-right: auto; }
/* Margin percentages resolve against the CONTAINING BLOCK's width (this
   element's parent, .generic-page-content — capped at 760px), never the
   viewport, so calc(50% - 550px) alone cannot break out past that 760px
   parent no matter what fixed px is subtracted. The left/transform pair
   below re-centers on the viewport directly, which is unaffected by the
   parent's own width. */
@media (min-width: 900px) {
  .generic-page-break { position: relative; left: 50%; transform: translateX(-50%); width: 90vw; }
}

/* ── Pillar-page visual toolkit (how-we-rate / payment-methods / rg) ── */

/* Small inline icon badge, placed directly before a heading's text */
.pg-h2-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--ink-3); border: 1px solid var(--line-2); margin-right: 0.6rem; vertical-align: middle; flex: none; }
.pg-h2-icon svg { width: 16px; height: 16px; stroke: var(--accent-3); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.flag-num-badge {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--accent-3); color: var(--ink); font-family: var(--font-head);
  font-weight: 700; font-size: 0.95rem; margin-right: 0.6rem; vertical-align: middle; flex: none;
}
.contact-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.9rem;
  background: var(--ink-3); border: 1px solid var(--line-2); border-radius: 16px; padding: 2.2rem 1.5rem;
  margin: 1.4rem 0;
}
.contact-card-icon { width: 56px; height: 56px; border-radius: 14px; background: var(--ink-2); border: 1px solid var(--accent-3); display: flex; align-items: center; justify-content: center; }
.contact-card-icon svg { width: 28px; height: 28px; stroke: var(--accent-3); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.contact-card-email { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; color: var(--paper); text-decoration: none; }
.contact-card-email:hover { color: var(--accent-3); }
.contact-card-note { font-size: 0.85rem; color: var(--paper-faint); max-width: 380px; }

/* Fact strip: 2-4 short stat chips under an intro paragraph */
.pg-fact-strip { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.3rem 0 1.8rem; padding: 0; list-style: none; }
.pg-fact-chip { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.9rem; background: var(--ink-3); border: 1px solid var(--line-2); border-radius: 999px; font-size: 0.78rem; color: var(--paper-dim); }
.pg-fact-chip svg { width: 15px; height: 15px; stroke: var(--accent-3); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pg-fact-chip strong { color: var(--paper); font-weight: 700; }

/* Horizontal process rail: numbered icon steps connected by a line (How We Rate overview) */
.pg-rail { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.4rem; margin: 0 0 2.4rem; padding: 0; list-style: none; position: relative; }
.pg-rail::before { content: ''; position: absolute; top: 22px; left: 8%; right: 8%; height: 1px; background: var(--line-2); z-index: 0; }
.pg-rail-item { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; }
.pg-rail-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--ink-2); border: 1px solid var(--accent-3); display: flex; align-items: center; justify-content: center; }
.pg-rail-icon svg { width: 21px; height: 21px; stroke: var(--accent-3); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pg-rail-label { font-size: 0.66rem; line-height: 1.25; color: var(--paper-dim); }
.pg-rail a.pg-rail-item { text-decoration: none; cursor: pointer; }
@media (max-width: 720px) {
  .pg-rail { grid-template-columns: repeat(3, 1fr); row-gap: 1.4rem; }
  .pg-rail::before { display: none; }
}

/* Feature badge callout (GAMSTOP / GambleAware style, larger than footer badges) */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 1.6rem 0; }
.badge-grid .pg-feature-badge { margin: 0; height: 100%; }
.game-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin: 1.6rem 0; }
@media (max-width: 760px) { .game-type-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.game-type-card {
  background: var(--ink-3); border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.game-type-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px -16px rgba(31,111,92,0.4); }
.game-type-card-img { aspect-ratio: 16 / 10; overflow: hidden; }
.game-type-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.game-type-card-body { padding: 1.1rem 1.2rem 1.3rem; }
.game-type-card-body h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; color: var(--paper); margin-bottom: 0.5rem; }
.game-type-card-body p { font-size: 0.88rem; color: var(--paper-dim); line-height: 1.6; }
.pg-feature-badge { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; background: var(--ink-3); border: 1px solid var(--line-2); border-radius: 14px; margin: 1.6rem 0; }
.pg-feature-badge-icon { flex: none; width: 50px; height: 50px; border-radius: 12px; background: var(--ink-2); border: 1px solid var(--accent-3); display: flex; align-items: center; justify-content: center; }
.pg-feature-badge-icon svg { width: 26px; height: 26px; stroke: var(--accent-3); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pg-feature-badge-body strong { display: block; color: var(--paper); font-family: var(--font-head); font-size: 1rem; margin-bottom: 0.2rem; }
.pg-feature-badge-body span { font-size: 0.85rem; color: var(--paper-dim); line-height: 1.5; }
.pg-feature-badge-body a { color: var(--accent-3); }

/* Payment method icon row: real logos for Visa/PayPal, line-icon badges for the rest */
.pg-pay-row { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 1.4rem 0 1.8rem; padding: 0; list-style: none; }
.pg-pay-tile { display: flex; align-items: center; gap: 0.6rem; background: var(--paper); border: 1px solid var(--line-2); border-radius: 10px; padding: 0.65rem 1rem; min-height: 44px; box-shadow: 0 6px 14px -10px rgba(0,0,0,0.6); }
.pg-pay-tile img, .pg-pay-tile svg.pg-pay-logo { height: 20px; width: auto; max-width: 64px; }
.pg-pay-tile svg.pg-pay-line { width: 18px; height: 18px; stroke: var(--ink-2); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pg-pay-tile span { font-size: 0.8rem; font-weight: 600; color: var(--ink-2); }

/* Warning-sign icon list (Recognising Problem Gambling) */
.pg-sign-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.8rem; margin: 1.4rem 0 1.8rem; padding: 0; list-style: none; }
/* auto-fit sizes columns purely off available width, so a 5-card list
   wraps unpredictably (however many 220px+ columns fit). Forcing exactly
   3 columns at wide widths gives a deliberate 3-over-2 layout instead. */
@media (min-width: 640px) {
  .pg-sign-list { grid-template-columns: repeat(3, 1fr); }
}
.pg-sign-item { display: flex; gap: 0.7rem; padding: 0.9rem; background: var(--ink-3); border: 1px solid var(--line-2); border-radius: 10px; }
.pg-sign-icon { flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--ink-2); display: flex; align-items: center; justify-content: center; }
.pg-sign-icon svg { width: 17px; height: 17px; stroke: var(--accent-2); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pg-sign-item p { margin: 0; font-size: 0.84rem; line-height: 1.5; color: var(--paper-dim); }
.pg-sign-item p strong { display: block; color: var(--paper); font-size: 0.86rem; margin-bottom: 0.15rem; }

/* Full-width divider between major page sections */
.pg-divider { border: none; border-top: 1px solid var(--line-2); margin: 2.6rem 0; }

/* ── Pillar-page toolkit v2: full-bleed feature sections ──
   The narrow 760px prose column matches the rest of the site (review
   Zone B uses the same width) and stays for readability, but a page of
   nothing but that column reads as empty/dry at 1440px+ — these break
   out to the same 1100px scale as the homepage's bento grid / csx
   illustrations, giving the page real visual rhythm instead of one
   long quiet paragraph column. */
.pg-feature {
  max-width: 1100px; margin: 3rem auto; padding: 2.6rem 3rem;
  background: var(--ink-3); border: 1px solid var(--line-2); border-radius: 22px;
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 2.6rem; align-items: center;
  position: relative; overflow: hidden;
}
/* .generic-page-content itself caps at 760px, so a % margin on a child
   resolves against that 760px, not the viewport — see .generic-page-break's
   comment above for why. left/transform re-centers on the viewport instead. */
@media (min-width: 900px) {
  .pg-feature { left: 50%; transform: translateX(-50%); width: 90vw; }
}
.pg-feature::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 80% at 0% 50%, rgba(31,111,92,0.12), transparent 70%);
}
.pg-feature-media { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; }
.pg-feature-media svg { width: 100%; max-width: 300px; height: auto; overflow: visible; }
.pg-feature-media img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line-2); }
.pg-feature-text { position: relative; z-index: 1; }
.pg-feature-text .kicker { display: block; margin-bottom: 0.6rem; }
.pg-feature-text h3, .pg-feature-text h2 { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.7rem); color: var(--paper); margin-bottom: 0.9rem; line-height: 1.2; }
.pg-feature-text p { color: var(--paper-dim); line-height: 1.75; font-size: 0.96rem; margin-bottom: 0.8rem; }
.pg-feature-text p:last-child { margin-bottom: 0; }
.pg-feature.pg-feature-reverse { grid-template-columns: 1.1fr 0.9fr; }
.pg-feature.pg-feature-reverse .pg-feature-media { order: 2; }
.pg-feature.pg-feature-reverse .pg-feature-text { order: 1; }
@media (max-width: 860px) {
  .pg-feature, .pg-feature.pg-feature-reverse { grid-template-columns: 1fr; text-align: center; padding: 2.2rem 1.6rem; }
  .pg-feature.pg-feature-reverse .pg-feature-media, .pg-feature.pg-feature-reverse .pg-feature-text { order: initial; }
  .pg-feature-media svg { max-width: 220px; }
}

/* Break-out wrapper: widens a component from the 760px prose column to
   the 1100px scale without needing a card background (used for the
   rail / pay-row / sign-list so they get real breathing room). */
.pg-wide { max-width: 1100px; margin-left: auto; margin-right: auto; }
@media (min-width: 900px) {
  .pg-wide { position: relative; left: 50%; transform: translateX(-50%); width: 90vw; }
}
.pg-rail.pg-wide { margin-bottom: 0; }
.pg-fact-strip.pg-wide { justify-content: center; }
/* .pg-rail and .pg-fact-strip both carry the pg-wide CLASS directly (not
   nested inside a separate pg-wide wrapper), so a descendant selector
   like ".pg-wide .pg-fact-strip" never matches — it was silently a no-op,
   which is why these stayed packed to the left inside their new wide
   container instead of centering. Compound selectors (both classes on
   the same rule) are what's actually needed here. */

/* Enlarge the rail icons when placed inside .pg-wide (page overview
   rail deserves more visual weight than an inline H2 badge). */
.pg-wide .pg-rail-icon { width: 56px; height: 56px; border-radius: 15px; }
.pg-wide .pg-rail-icon svg { width: 26px; height: 26px; }
.pg-wide .pg-rail-label { font-size: 0.74rem; }