/* Fonts are linked from <head> with a preconnect, not @import-ed here.
   An @import inside the stylesheet serialises the requests: the browser
   must download and parse this file before it even discovers the font
   CSS, which delays first paint by a whole round trip. */

:root {
  /* Mzansi palette. Flag green and flag gold carry the brand; the ink is a
     green-black rather than a neutral so every dark surface belongs to the
     same family; the paper is a warm sand instead of cold white. Red and
     blue appear only inside the Ndebele band. */
  --paper: #F6F2E8;
  --surface: #FFFFFF;
  --ink: #0C1A13;
  --ink-70: #3E4A43;
  --ink-40: #7D877F;
  --hairline: #E3DCCB;
  --emerald: #007A4D;
  --emerald-d: #005C3A;
  --emerald-t: #E3F1EA;
  --gold: #FFB612;
  --gold-d: #9A6A00;
  --flag-red: #DE3831;
  --flag-blue: #002395;
  --night: #062A1C;

  --f-13: 13px; --f-15: 15px; --f-17: 17px; --f-20: 20px;
  --f-26: 26px; --f-34: 34px; --f-46: 46px; --f-60: 60px;

  --serif: "Bricolage Grotesque", "Arial Black", Arial, sans-serif;
  --sans: Figtree, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  --radius: 12px;
  --shadow: 0 1px 2px rgba(12, 26, 19, .05), 0 10px 28px rgba(12, 26, 19, .07);
  --maxw: 1160px;
}

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

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  max-width: 100vw;
  background: var(--paper);
  color: var(--ink-70);
  font: 400 var(--f-17)/1.65 var(--sans);
  font-feature-settings: "locl" 1;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  margin: 0 0 var(--sp-4);
  font-weight: 700;
  /* Stops a heading dropping its last word alone onto a line of its own. */
  text-wrap: balance;
}
p, li { text-wrap: pretty; }

/* Tracking and leading are a function of size, not one value for everything.
   Optically, letterforms need less space between them as they get larger and
   more as they get smaller — a flat -0.02em was simultaneously too tight on a
   20px h4 and too loose on a 46px h1. Leading moves the opposite way: tight
   at display sizes, opening up as the line gets shorter and denser. */
h1 { font-size: var(--f-46); letter-spacing: -0.032em; line-height: 1.06; }
h2 { font-size: var(--f-34); letter-spacing: -0.022em; line-height: 1.12; }
h3 { font-size: var(--f-26); letter-spacing: -0.014em; line-height: 1.20; }
h4 { font-size: var(--f-20); letter-spacing: -0.006em; line-height: 1.30; }

/* The homepage headline is the one piece of type doing brand work, so it gets
   the top of the scale rather than sharing h1's default. */
.hero__text > h1 {
  font-size: clamp(var(--f-34), 5.2vw, var(--f-60));
  letter-spacing: -0.036em;
  line-height: 1.02;
}

@media (max-width: 700px) {
  h1 { font-size: var(--f-34); letter-spacing: -0.024em; line-height: 1.1; }
  h2 { font-size: var(--f-26); letter-spacing: -0.016em; line-height: 1.18; }
}

a { color: var(--emerald); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--emerald-d); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--sp-4); }

/* Kept as a hook so existing markup stays valid; the notebook grid it used to
   paint has been replaced by the gradient field on .hero::before. */
.paper-grid { background-color: var(--paper); }
.paper-grid > * { position: relative; }

/* ==========================================================================
   Layout shell
   ========================================================================== */

/* ==========================================================================
   Header — sticky, translucent, with dropdown groups

   The old bar held six flat links. The site now has 28 pages worth of
   destinations, which needs grouping rather than a longer row: six top-level
   groups, each opening a panel, plus one standing call to action. It sticks
   and blurs so the nav stays reachable on a 40,000px article.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hairline);
  padding: var(--sp-3) 0;
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); }
.site-header .logo { display: block; height: 36px; width: auto; flex: 0 0 auto; }
.site-header .logo img,
.site-header .logo svg { height: 36px; width: auto; display: block; }

.site-nav { display: flex; align-items: center; gap: var(--sp-4); }
.site-nav__list { list-style: none; display: flex; align-items: center; gap: var(--sp-2); margin: 0; padding: 0; }
.site-nav__group { position: relative; }

/* One rule for the link and the button so a group heading and a plain link
   are visually identical — only one of them opens a panel. */
.site-nav__top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  background: none;
  font: inherit;
  font-size: var(--f-15);
  font-weight: 600;
  color: var(--ink-70);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.site-nav__top:hover,
.site-nav__group:hover .site-nav__top,
.site-nav__top[aria-expanded="true"] { background: var(--emerald-t); color: var(--emerald-d); }

.site-nav__caret {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .22s ease;
}
.site-nav__top[aria-expanded="true"] .site-nav__caret { transform: translateY(1px) rotate(-135deg); }

.site-nav__sub {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 248px;
  list-style: none;
  margin: 0;
  padding: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(12, 26, 19, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
/* Hover opens it on a pointer; the button's aria-expanded opens it from the
   keyboard and on touch, where hover never resolves. */
.site-nav__group:hover .site-nav__sub,
.site-nav__top[aria-expanded="true"] + .site-nav__sub {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.site-nav__sub a {
  display: block;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: var(--f-15);
  color: var(--ink-70);
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.site-nav__sub a:hover { background: var(--emerald-t); color: var(--emerald-d); }

/* Mobile nav toggle — checkbox-driven, no JS. The checkbox is visually
   hidden but stays in the DOM and in the tab order; the label is the
   visible hamburger button. All six nav links stay in the DOM and in the
   tab order at every width — collapsing only changes whether they're
   visible, never whether they exist or are reachable. */
.nav-toggle-check {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.nav-toggle-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ""; position: absolute; left: 0; transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .3s cubic-bezier(.22,.61,.36,1); }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.nav-toggle-check:focus-visible ~ .nav-toggle-btn { outline: 2px solid var(--emerald); outline-offset: 2px; }
.nav-toggle-check:checked ~ .nav-toggle-btn .nav-toggle-bars { background: transparent; }
.nav-toggle-check:checked ~ .nav-toggle-btn .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle-check:checked ~ .nav-toggle-btn .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 899px) {
  .site-header .wrap { flex-wrap: wrap; }
  .nav-toggle-btn { display: flex; }
  .site-nav {
    flex-basis: 100%;
    order: 3;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
    max-height: 0;
    overflow: hidden;
    transition: max-height .38s cubic-bezier(.22,.61,.36,1);
  }
  .nav-toggle-check:checked ~ .site-nav { max-height: 78vh; overflow-y: auto; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; padding-top: var(--sp-3); }
  .site-nav__top {
    width: 100%;
    justify-content: space-between;
    padding: var(--sp-3) 0;
    border-radius: 0;
    border-bottom: 1px solid var(--hairline);
    font-size: var(--f-17);
  }
  /* No hover on a phone: the panel is an accordion the button opens. */
  .site-nav__sub {
    position: static;
    min-width: 0;
    border: 0;
    box-shadow: none;
    background: none;
    padding: 0;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .site-nav__group:hover .site-nav__sub { display: none; }
  .site-nav__top[aria-expanded="true"] + .site-nav__sub { display: block; padding: var(--sp-2) 0 var(--sp-3); }
  .site-nav__sub a { padding: 10px 0 10px var(--sp-4); }
  .btn--nav { width: 100%; }
}

.breadcrumbs {
  font-size: var(--f-13);
  color: var(--ink-40);
  padding: var(--sp-3) 0;
}
.breadcrumbs a { color: var(--ink-40); }
.breadcrumbs a:hover { color: var(--emerald); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; }
/* A page title long enough to wrap left the "/" separator stranded alone on
   the second line. On a phone the trail stays on one line and the current
   page truncates — it is the page you are already on, so the full text adds
   nothing. */
@media (max-width: 700px) {
  .breadcrumbs ol { flex-wrap: nowrap; }
  .breadcrumbs li { min-width: 0; }
  .breadcrumbs li:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.breadcrumbs li + li::before { content: "/"; margin-right: var(--sp-2); color: var(--hairline); }

.site-footer {
  background: var(--ink);
  color: var(--ink-40);
  padding: var(--sp-8) 0 var(--sp-6);
  margin-top: var(--sp-9);
  font-size: var(--f-15);
}
.site-footer a { color: #FFFFFF; }
.site-footer a:hover { color: var(--emerald-t); }
.site-footer h4 { color: #FFFFFF; }
.site-footer .foot-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-6); margin-bottom: var(--sp-6); }

.compliance {
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding-top: var(--sp-5);
  margin-top: var(--sp-5);
  font-size: var(--f-13);
  line-height: 1.7;
}
.compliance strong { color: var(--ink-40); }

.updated {
  display: inline-block;
  font-size: var(--f-13);
  color: var(--ink-40);
  font-style: italic;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  padding: var(--sp-8) 0 var(--sp-7);
  overflow: hidden;
}
/* Gradient field. Two very soft colour pools — emerald from the left, gold
   from the upper right — over the paper, with a hairline closing the band.
   This replaces the graph-paper grid: a ruled sheet reads as a notebook theme
   and dates the page, while a wide low-saturation wash is what current
   editorial and fintech work uses to give a header depth without imagery. */
.hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% 0;
  background:
    radial-gradient(46% 78% at 8% 18%, rgba(0, 122, 77, .13), transparent 62%),
    radial-gradient(40% 70% at 92% 4%, rgba(255, 182, 18, .13), transparent 65%),
    radial-gradient(60% 90% at 60% 100%, rgba(0, 122, 77, .05), transparent 70%);
  pointer-events: none;
  will-change: transform;
}
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(to right, transparent,
                              var(--hairline) 18%, var(--hairline) 82%, transparent);
  pointer-events: none;
}
.hero > * { position: relative; }

/* The field breathes rather than sits still — 28s, transform only, so it costs
   one composited layer and nothing on the main thread. */
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: field 28s ease-in-out infinite alternate; }
}
@keyframes field {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3%, 2%, 0) scale(1.08); }
}
.hero p { max-width: 60ch; font-size: var(--f-20); }

/* Text left, seal right. The seal is the one element allowed outside the
   reading column, so it is a sibling of .hero__text rather than a child. */
.hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-7);
}
.hero__text { flex: 1 1 520px; min-width: 0; }

@media (max-width: 860px) {
  .hero__inner { flex-direction: column; align-items: flex-start; gap: var(--sp-6); }
  .seal { width: 150px; align-self: center; }
}

/* Three figures instead of a decorative drawing. The old hero carried a
   ghosted line sketch behind the headline; a faded picture behind type is the
   single most dated device on the page, and it said nothing. These say what
   the site is. */
.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-7);
  margin: var(--sp-6) 0 0;
  padding-top: var(--sp-5);
}
.hero__stats > div { display: flex; flex-direction: column-reverse; gap: var(--sp-1); }
.hero__stats dt {
  font-size: var(--f-13);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.hero__stats dd {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--f-46);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  /* Three columns rather than a wrapping row: flex wrap put one figure on the
     first line and two on the second, which reads as a mistake. */
  .hero__stats {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: var(--sp-4);
  }
  .hero__stats dd { font-size: var(--f-26); }
  .hero__stats dt { font-size: 11px; letter-spacing: .06em; }
}

.verdict {
  display: flex;
  gap: var(--sp-6);
  align-items: center;
  flex-wrap: wrap;
}
.verdict__score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
}
.verdict__score-label {
  font-size: var(--f-13);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-40);
}

@media (max-width: 700px) {
  /* Logo and score share the first line; the title, offer and button follow.
     Stacked in DOM order the score landed ~840px down, below three screens
     of heading — and the score is the whole point of a review page. */
  .verdict {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "logo  score"
      "body  body";
    align-items: center;
    gap: var(--sp-4);
  }
  .verdict > .brand__logo { grid-area: logo; width: 120px; height: 62px; }
  .verdict__score { grid-area: score; margin-left: 0; align-items: center; }
  .verdict__body { grid-area: body; }
  .verdict .rating-dial--lg { --dial-size: 72px; font-size: var(--f-20); }
}
.verdict /* Fallback when an operator has no logo file: a wordmark on the same ink tile,
   so a missing asset never leaves an empty black rectangle. */
/* Shown when an operator has supplied no logo file. Two of fifteen currently
   have none, and next to thirteen real marks a bare line of text reads as a
   broken image — so it is set as a deliberate lockup instead: tight caps with
   a gold rule under it, filling the tile the way a logo would. Drop a file
   into assets/img/brands/ and set `logo` in casinos.json and it is replaced
   automatically; the build prints which operators are still missing one. */
.brand__wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  height: 100%;
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--f-15);
  letter-spacing: .01em;
  line-height: 1.05;
  color: #FFFFFF;
  text-align: center;
  padding: 0 var(--sp-2);
  overflow-wrap: anywhere;
}
.brand__wordmark::after {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: var(--gold);
  flex: 0 0 auto;
}
.verdict .brand__wordmark { font-size: var(--f-20); }
.verdict .brand__wordmark::after { width: 30px; }
.marquee__item .brand__wordmark { font-size: var(--f-15); }

.spec-payments a { display: inline-block; margin: 0 var(--sp-2) var(--sp-1) 0; }
.spec-payments a::after { content: " ·"; color: var(--ink-40); }
.spec-payments a:last-child::after { content: ""; }

.card--casino .brand__name { font-family: var(--serif); font-size: var(--f-20); color: var(--ink); text-decoration: none; }
.card--casino .brand__name:hover { color: var(--emerald); text-decoration: underline; }
.card__review { margin: var(--sp-3) 0 var(--sp-2); font-size: var(--f-15); }

.brand__logo { width: 160px; height: 88px; }
.verdict__body { flex: 1 1 320px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.verdict__body h1 { margin-bottom: 0; }
.verdict__bonus { margin: 0; font-size: var(--f-20); color: var(--ink); font-family: var(--serif); }

/* ==========================================================================
   Buttons + badges
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  border-radius: var(--radius);
  padding: 12px 20px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--f-15);
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn--cta {
  background: var(--emerald);
  color: #FFFFFF;
  transition: transform .28s cubic-bezier(.22,.61,.36,1), background .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s cubic-bezier(.22,.61,.36,1);
}
.btn--cta:hover { background: var(--emerald-d); transform: translateY(-1px); color: #FFFFFF; }
.btn--cta:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline);
  transition: border-color .28s cubic-bezier(.22,.61,.36,1), color .28s cubic-bezier(.22,.61,.36,1);
}
.btn--ghost:hover { border-color: var(--emerald); color: var(--emerald-d); background: var(--emerald-t); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--f-13);
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--emerald-t);
  color: var(--emerald-d);
  line-height: 1.4;
}
.badge--nap { background: var(--emerald-t); color: var(--emerald-d); }
.badge--age { background: var(--ink); color: #FFFFFF; }
.badge--gold { background: var(--gold); color: var(--ink); }

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--sp-5);
}

.card--casino {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.card--casino .brand { display: flex; align-items: center; gap: var(--sp-3); }
.card--casino .brand__logo { width: 96px; height: 56px; }
.card--casino .brand strong { font-family: var(--serif); font-size: var(--f-20); color: var(--ink); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-5);
}

/* ==========================================================================
   Brand logo tile — operator PNGs are white-variant, dark-background only
   ========================================================================== */

.brand__logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  border-radius: 8px;
  padding: var(--sp-2);
}
.brand__logo img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* A mark drawn in black on a transparent background needs the opposite tile.
   The hairline keeps it from dissolving into the white card behind it. */
.brand__logo--light {
  background: #FFFFFF;
  border: 1px solid var(--hairline);
}

/* ==========================================================================
   Rating dial + score bar
   ========================================================================== */

.rating-dial {
  --dial-size: 64px;
  width: var(--dial-size);
  height: var(--dial-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--f-20);
  color: var(--ink);
  /* --dial-fill is what the ring actually draws. It defaults to the score the
     template stamped on the element, so the correct ring is painted on the
     first frame with no JS at all; the sweep below only re-points it. */
  --dial-fill: var(--score-final, 90);
  background:
    radial-gradient(closest-side, var(--surface) 72%, transparent 73% 100%),
    conic-gradient(var(--emerald) calc(var(--dial-fill) * 1%), var(--hairline) 0);
}
.rating-dial--lg { --dial-size: 88px; font-size: var(--f-26); }

.score-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--hairline);
  overflow: hidden;
}
/* The fill rides the same variable the dial does, so one release in JS drives
   both and there is only ever one code path that can leave a bar at zero.
   --dial-fill is registered with inherits:false, so it has to live on the
   element that draws — the fill itself, not the track around it. */
.score-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--emerald);
  --dial-fill: var(--score-final, 0);
  width: calc(var(--dial-fill) * 1%);
}

.score-bars { display: flex; flex-direction: column; gap: var(--sp-4); }
.score-bars__row {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: var(--sp-4);
}
.score-bars__row span:first-child { font-weight: 600; color: var(--ink); font-size: var(--f-15); }

/* ==========================================================================
   Toplist
   ========================================================================== */

.toplist { display: flex; flex-direction: column; gap: var(--sp-4); }

.toplist__row {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  align-items: center;
  padding: var(--sp-4);
}

.rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--hairline);
  font-family: var(--serif);
  font-weight: 700;
  font-size: var(--f-20);
  color: var(--ink-70);
}
.rank--first {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

.toplist__row .brand__logo { width: 120px; height: 44px; }

.brand__unit {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}
.brand__name {
  min-width: 0;
  overflow-wrap: break-word;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

/* .compliance was styled for the dark site footer — 20px inside the review
   hero, on top of the footer's 24px margin and rule. Every in-page instance
   of it is a footnote, so they share one compact treatment and the footer
   keeps its own below. */
.toplist__row .compliance,
.card--casino .compliance,
.verdict .compliance {
  margin: 0;
  padding: var(--sp-3) 0 0;
  border-top: 1px dashed var(--hairline);
  font-size: var(--f-13);
  line-height: 1.6;
  color: var(--ink-40);
}
.card--casino .compliance { margin-top: var(--sp-2); }

@media (min-width: 900px) {
  .toplist__row {
    display: grid;
    grid-template-columns: 56px 260px 1fr 140px 160px;
    gap: var(--sp-4);
  }
  .toplist__row .compliance { grid-column: 1 / -1; }
}

/* Below the table breakpoint a ranking row becomes a card, not a stack of
   label/value strips. The old rule set display:flex and space-between on
   *every* child, which included the two circular badges — with one child,
   space-between parks it at flex-start, so the rank number and the score sat
   against the left edge of their own rings. It also made every operator fill
   most of a phone screen, so fifteen of them were an endless scroll.

   The card puts identity on one line (rank, logo, name, score), then the
   offer, then the action. The uppercase "КАЗИНО / БОНУС / ВХОД" labels are
   gone with it: in a table a column needs a header, but in a card the button
   says what it is. */
@media (max-width: 899px) {
  .toplist__row {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    grid-template-areas:
      "rank  brand  dial"
      "bonus bonus  bonus"
      "cta   cta    cta"
      "comp  comp   comp";
    gap: var(--sp-3);
    align-items: center;
  }
  .toplist__row .rank { grid-area: rank; width: 36px; height: 36px; font-size: var(--f-17); }
  .toplist__row .brand { grid-area: brand; min-width: 0; }
  .toplist__row .rating-dial { grid-area: dial; --dial-size: 54px; font-size: var(--f-17); }
  .toplist__row .toplist__bonus {
    grid-area: bonus;
    padding-top: var(--sp-3);
    border-top: 1px dashed var(--hairline);
    font-family: var(--serif);
    font-size: var(--f-17);
    color: var(--ink);
  }
  .toplist__row .toplist__cta { grid-area: cta; }
  .toplist__row .compliance { grid-area: comp; display: block; }

  .toplist__row .brand__unit { gap: var(--sp-3); }
  .toplist__row .brand__logo { width: 84px; height: 34px; padding: 6px; }
  .toplist__row .brand__name { font-size: var(--f-15); }
}

/* Under ~420px the logo tile and the name cannot share a line without the
   name breaking mid-word, so the tile steps down to the line below. */
@media (max-width: 420px) {
  .toplist__row .brand__unit { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll > table { border-radius: var(--radius); }

/* A five-column table inside a scroll box is technically not overflowing the
   page, but on a phone it is still five columns: every cell wraps to three
   lines and the two columns that matter are off-screen with nothing to say
   so. Below the breakpoint each row becomes its own labelled block, which is
   what a table row is for anyway once it cannot be a row. */
@media (max-width: 720px) {
  .bonus-table,
  .calc-table { border: 0; background: none; }
  .bonus-table thead,
  .calc-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  .bonus-table tr,
  .calc-table tr {
    display: block;
    margin-bottom: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: var(--sp-2) var(--sp-4);
  }
  .bonus-table td,
  .calc-table td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-3) 0;
    border: 0;
    border-bottom: 1px dashed var(--hairline);
    text-align: right;
  }
  .bonus-table tr td:last-child,
  .calc-table tr td:last-child { border-bottom: 0; }
  .bonus-table td::before,
  .calc-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: var(--f-13);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-40);
    text-align: left;
  }
  .bonus-table td:first-child,
  .calc-table td:first-child {
    font-family: var(--serif);
    font-size: var(--f-20);
  }
  /* "€100" was wrapping to "€1 / 00" in a 60px-wide column. */
  .calc-table td[data-out-bonus],
  .calc-table td[data-out-total],
  .calc-table td[data-out-turnover] { white-space: nowrap; }
}

.spec-table,
.bonus-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.spec-table th, .spec-table td,
.bonus-table th, .bonus-table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--hairline);
}
.spec-table tr:last-child td,
.bonus-table tr:last-child td { border-bottom: none; }
.spec-table th, .bonus-table th {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 700;
  background: var(--paper);
}
.spec-table tbody tr:nth-child(even),
.bonus-table tbody tr:nth-child(even) { background: var(--paper); }

/* ==========================================================================
   Pros / cons
   ========================================================================== */

.proscons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
@media (max-width: 700px) {
  .proscons { grid-template-columns: 1fr; }
}
.pros, .cons {
  border-radius: var(--radius);
  padding: var(--sp-4);
  list-style: none;
  margin: 0;
}
.pros { background: var(--emerald-t); }
.cons { background: var(--paper); border: 1px solid var(--hairline); }
.pros li, .cons li { padding: 4px 0 4px 24px; position: relative; }
.pros li::before {
  content: "+";
  position: absolute;
  left: 0;
  color: var(--emerald-d);
  font-weight: 700;
}
.cons li::before {
  content: "\2212";
  position: absolute;
  left: 0;
  color: var(--flag-red);
  font-weight: 700;
}

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq { border-top: 1px solid var(--hairline); }
.faq__item {
  border-bottom: 1px solid var(--hairline);
  padding: var(--sp-4) 0;
}
.faq__item summary {
  cursor: pointer;
  font-family: var(--serif);
  font-weight: 700;
  color: var(--ink);
  font-size: var(--f-20);
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  float: right;
  color: var(--emerald);
  font-weight: 700;
}
.faq__item[open] summary::after { content: "\2212"; }
.faq__item p { margin-top: var(--sp-3); }

/* ==========================================================================
   Compare drawer, calculator, filters
   ========================================================================== */

.compare-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  box-shadow: var(--shadow);
  padding: var(--sp-4);
  transform: translateY(100%);
  transition: transform .34s cubic-bezier(.22,.61,.36,1), box-shadow .34s cubic-bezier(.22,.61,.36,1);
}
.compare-drawer.is-open { transform: translateY(0); }

/* The drawer grows with the number of rows it shows. On a phone three
   operators made it 944px tall against an 812px screen with overflow
   visible, so the bottom of the comparison — and its close button — simply
   could not be reached. It now stops short of the viewport and scrolls
   inside itself. */
.compare-drawer {
  max-height: 85vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.calc {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--sp-5);
}
.calc label { display: block; font-weight: 600; color: var(--ink); margin-bottom: var(--sp-1); }
.calc input,
.calc select {
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.calc input:focus,
.calc select:focus { outline: 2px solid var(--emerald); outline-offset: 1px; }
.calc table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-top: var(--sp-4);
}
.calc thead th:nth-child(1) { width: 34%; }
.calc thead th:nth-child(2) { width: 20%; }
.calc thead th:nth-child(3) { width: 23%; }
.calc thead th:nth-child(4) { width: 23%; }
.calc th, .calc td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--hairline);
  overflow-wrap: break-word;
}
.calc thead th {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 700;
  background: var(--paper);
}
.calc tbody tr:last-child td { border-bottom: none; }
.calc tbody tr:nth-child(even) { background: var(--paper); }
.calc tbody td:first-child { font-weight: 600; color: var(--ink); }
.calc tbody td:not(:first-child) { color: var(--ink-40); }
.calc .calc__result {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--emerald-t);
  border-radius: var(--radius);
  font-family: var(--serif);
  font-size: var(--f-26);
  color: var(--emerald-d);
}

/* The filter bar is the first control a reader touches, and three unstyled
   native selects were the most dated thing left on the page. It is now a
   single toolbar: labels above their control, one card, one hairline. */
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--sp-4) var(--sp-5);
  margin: var(--sp-6) 0 var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.filters > div { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.filters label {
  font-size: var(--f-13);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.filters select {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: var(--f-15);
  font-weight: 500;
  color: var(--ink);
  padding: 10px 38px 10px 14px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background-color: var(--surface);
  /* Chevron drawn in the stylesheet rather than shipped as a file: one less
     request, and it inherits nothing that can go missing. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238A9099' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
  transition: border-color .28s cubic-bezier(.22,.61,.36,1),
              box-shadow .28s cubic-bezier(.22,.61,.36,1);
}
.filters select:hover { border-color: var(--ink-40); }
.filters select:focus-visible {
  outline: none;
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px var(--emerald-t);
}
.filters [data-filter-count] {
  margin: 0 0 10px auto;
  font-size: var(--f-15);
  color: var(--ink-40);
}

@media (max-width: 700px) {
  .filters { gap: var(--sp-3); }
  .filters > div { flex: 1 1 100%; }
  .filters select { width: 100%; }
  .filters [data-filter-count] { margin: 0; }
}
.filters button {
  font: inherit;
  font-size: var(--f-13);
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink-70);
  cursor: pointer;
  transition: border-color .28s cubic-bezier(.22,.61,.36,1), color .28s cubic-bezier(.22,.61,.36,1), background .28s cubic-bezier(.22,.61,.36,1);
}
.filters button:hover { border-color: var(--emerald); color: var(--emerald-d); }
.filters button.is-active { background: var(--emerald); border-color: var(--emerald); color: #FFFFFF; }

/* ==========================================================================
   Illustrations
   ========================================================================== */


/* ==========================================================================
   Sticky CTA
   ========================================================================== */

.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* Bound to the viewport, not any ancestor's content width: no `width`
     property here on purpose (left:0 + right:0 sizes it against the fixed-
     position containing block, which is the viewport). max-width is a
     defensive cap in case that ever regresses to an explicit width. */
  width: auto;
  max-width: 100vw;
  z-index: 50;
  display: none;
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  box-shadow: 0 -8px 24px rgba(12, 26, 19, .08);
  padding: var(--sp-3) var(--sp-4);
  transform: translateY(100%);
  transition: transform .34s cubic-bezier(.22,.61,.36,1), box-shadow .34s cubic-bezier(.22,.61,.36,1);
}
.sticky-cta.is-visible { transform: translateY(0); }

@media (max-width: 899px) {
  .sticky-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
}

/* ==========================================================================
   Prose
   ========================================================================== */

.prose { max-width: 68ch; }
.prose p { margin: 0 0 var(--sp-4); }
.prose ul, .prose ol { margin: 0 0 var(--sp-4); padding-left: 1.4em; }
.prose blockquote {
  margin: var(--sp-5) 0;
  padding: var(--sp-2) var(--sp-4);
  border-left: 3px solid var(--emerald);
  color: var(--ink-70);
  font-style: italic;
}
.prose h2, .prose h3 { margin-top: var(--sp-7); }

/* Section rhythm. With the margin sketches gone, the article needs a visual
   beat of its own: a short emerald rule above every h2. It costs nothing,
   never goes stale, and reads as structure rather than decoration. */
.prose h2 { position: relative; padding-top: var(--sp-5); }
.prose h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 44px;
  height: 3px;
  border-radius: 2px;
  background: var(--emerald);
}
.prose > h2:first-child { padding-top: 0; margin-top: 0; }
.prose > h2:first-child::before { display: none; }
.prose img { max-width: 100%; border-radius: var(--radius); }

/* ==========================================================================
   Related / child guide navigation
   ========================================================================== */

.related-guides {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
}
.related-guides a {
  display: inline-block;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-70);
  font-weight: 600;
  text-decoration: none;
}
.related-guides a:hover { border-color: var(--emerald); color: var(--emerald-d); }

.picks { margin: var(--sp-8) 0; }

.hub-nav { margin: var(--sp-8) 0; }
.hub-nav ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
}
.hub-nav a {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  height: 100%;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: var(--shadow);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .28s cubic-bezier(.22,.61,.36,1),
              transform .28s cubic-bezier(.22,.61,.36,1);
}
.hub-nav__name {
  font-family: var(--serif);
  font-size: var(--f-20);
  font-weight: 700;
  line-height: 1.25;
}
/* The arrow sits on its own baseline at the foot of the card. Inline after
   the title it wrapped onto a line by itself whenever the title filled the
   card width. */
.hub-nav a::after {
  content: "\2192";
  margin-top: auto;
  padding-top: var(--sp-2);
  color: var(--emerald);
  font-size: var(--f-20);
  line-height: 1;
}
/* The blurb is what turns a list of titles into an index you can choose from. */
.hub-nav__desc { font-size: var(--f-15); line-height: 1.5; color: var(--ink-70); }
.hub-nav a:hover { border-color: var(--emerald); transform: translateY(-2px); }
.hub-nav a:hover .hub-nav__name { color: var(--emerald-d); }

/* ==========================================================================
   Table of contents — long guides only (see buildlib/outline.py)
   ========================================================================== */

.toc {
  margin: 0 0 var(--sp-7);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
}
.toc__label {
  margin: 0 0 var(--sp-3);
  font-size: var(--f-13);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
  columns: 2;
  column-gap: var(--sp-6);
}
.toc li {
  counter-increment: toc;
  break-inside: avoid;
  margin-bottom: var(--sp-2);
  font-size: var(--f-15);
  line-height: 1.45;
}
.toc li::before {
  content: counter(toc) ".";
  margin-right: var(--sp-2);
  color: var(--ink-40);
  font-variant-numeric: tabular-nums;
}
.toc a { color: var(--ink-70); text-decoration: none; }
.toc a:hover { color: var(--emerald-d); text-decoration: underline; }

@media (max-width: 700px) {
  .toc ol { columns: 1; }
}

/* Anchor targets must clear nothing here (no fixed header), but a little
   breathing room above a jumped-to heading reads much better. */
.prose h2[id] { scroll-margin-top: var(--sp-6); }



/* ==========================================================================
   Motion — one orchestrated moment: a section rises into place while its
   margin sketch draws itself. Everything else stays still on purpose.
   ========================================================================== */

html { scroll-behavior: smooth; }

/* Only hide things once JS is confirmed, so a no-JS reader sees everything. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1),
              transform .55s cubic-bezier(.22,.61,.36,1);
}
.js .reveal.is-in { opacity: 1; transform: none; }



/* ==========================================================================
   Alternatives modal — shown when an operator has no affiliate deal yet, and
   on the page of an operator that has left the market. It offers licensed
   alternatives rather than dead-ending the reader.
   ========================================================================== */

.altm { position: fixed; inset: 0; z-index: 60; display: flex;
        align-items: center; justify-content: center; padding: var(--sp-4); }
.altm[hidden] { display: none; }
.altm__backdrop { position: absolute; inset: 0; background: rgba(12, 26, 19, .55); }
.altm__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--sp-6);
}
.altm__x {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  width: 36px; height: 36px; line-height: 1;
  font-size: var(--f-26); color: var(--ink-40);
  background: none; border: 0; border-radius: 8px; cursor: pointer;
}
.altm__x:hover { color: var(--ink); background: var(--paper); }
.altm__title { font-size: var(--f-26); margin-bottom: var(--sp-2); }
.altm__lead { font-size: var(--f-15); color: var(--ink-70); margin-bottom: var(--sp-5); }
.altm__list { list-style: none; margin: 0 0 var(--sp-5); padding: 0; }
.altm__item {
  display: grid;
  grid-template-columns: 96px 1fr auto auto;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--hairline);
}
.altm__item .brand__logo { width: 96px; height: 34px; }
.altm__body { display: flex; flex-direction: column; min-width: 0; }
.altm__body strong { font-family: var(--serif); color: var(--ink); }
.altm__bonus { font-size: var(--f-13); color: var(--ink-70); }
.altm__score { font-family: var(--serif); font-size: var(--f-20); color: var(--emerald); }
.altm__note { font-size: var(--f-13); color: var(--ink-40); margin: 0; }

@media (max-width: 560px) {
  .altm__item { grid-template-columns: 72px 1fr; row-gap: var(--sp-2); }
  .altm__item .brand__logo { width: 72px; height: 28px; }
  .altm__score { grid-column: 1; }
  .altm__item .btn { grid-column: 2; justify-self: end; }
}


/* ==========================================================================
   Surface — grain, not pictures.

   The previous version scattered small drawings across the background. They
   read as clip art and dated the page. Current work in this register gets its
   richness from texture and depth rather than imagery: a fine film grain over
   a warm tonal wash, so the paper feels like a material while the typography
   does all the talking.

   The grain is one inline SVG turbulence — no image request, a few hundred
   bytes, and it scales to any display density.
   ========================================================================== */

body::before,
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; }

/* warm tonal wash: barely-there depth, lightest at the top where the eye lands */
body::before {
  z-index: -2;
  background:
    radial-gradient(120% 80% at 50% -10%, #FFFFFF 0%, rgba(255,255,255,0) 60%),
    radial-gradient(90% 60% at 100% 0%, var(--emerald-t) 0%, rgba(227, 241, 234,0) 55%);
  opacity: .7;
}

/* film grain */
body::after {
  z-index: -1;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
}

@media (prefers-reduced-motion: no-preference) {
  .card, .toplist__row { transition: transform .34s cubic-bezier(.22,.61,.36,1),
                                     box-shadow .34s cubic-bezier(.22,.61,.36,1); }
  .toplist__row:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
}

/* ==========================================================================
   Article pager — moving between guides without going back to a hub
   ========================================================================== */

.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  margin: var(--sp-8) 0 var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hairline);
}
.pager__link {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color .28s cubic-bezier(.22,.61,.36,1),
              transform .28s cubic-bezier(.22,.61,.36,1);
}
.pager__link:hover { border-color: var(--emerald); transform: translateY(-2px); }
.pager__link--next { text-align: right; }
.pager__dir {
  font-size: var(--f-13);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.pager__name { font-family: var(--serif); font-size: var(--f-20); color: var(--ink); }
.pager__link:hover .pager__name { color: var(--emerald-d); }
.pager__link--only { grid-column: 1 / -1; }

@media (max-width: 600px) {
  .pager { grid-template-columns: 1fr; }
  .pager__link--next { text-align: left; }
}

/* ==========================================================================
   Series strip — the whole section, on every article in it

   The bonus articles used to be reachable only from a hub, so a reader who
   landed on one from search had no way to see that three siblings existed.
   The strip sits directly under the title: every article in the section, in
   reading order, with the current one filled. It doubles as a progress
   indicator ("2 от 4").
   ========================================================================== */

.series {
  margin: var(--sp-5) 0 var(--sp-6);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.series__label {
  margin: 0 0 var(--sp-3);
  font-size: var(--f-13);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.series__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  counter-reset: series;
}
.series__list li { counter-increment: series; display: flex; }
.series__item {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--f-15);
  line-height: 1.3;
  color: var(--ink-70);
  text-decoration: none;
  transition: border-color .28s cubic-bezier(.22,.61,.36,1),
              color .28s cubic-bezier(.22,.61,.36,1),
              transform .28s cubic-bezier(.22,.61,.36,1);
}
.series__item::before {
  content: counter(series);
  font-variant-numeric: tabular-nums;
  font-size: var(--f-13);
  color: var(--ink-40);
}
a.series__item:hover {
  border-color: var(--emerald);
  color: var(--emerald-d);
  transform: translateY(-1px);
}
.series__item.is-current {
  background: var(--ink);
  border-color: var(--ink);
  color: #FFFFFF;
  font-weight: 500;
}
.series__item.is-current::before { color: var(--gold); }


/* ==========================================================================
   The Seal — the signature element

   The brand mark is a stamp of approval, so it behaves like one: a rim, a
   legend turning around the edge, and the live count of licensed operators
   struck in the middle. It is built from type on a path rather than from
   artwork, which is why it can carry a number that changes with the data and
   still stay crisp at any size. It leans back on a real perspective transform
   — the one place on the site that admits a third dimension.
   ========================================================================== */

.seal {
  flex: 0 0 auto;
  width: clamp(180px, 22vw, 260px);
  perspective: 700px;
}
.seal__svg {
  display: block;
  width: 100%;
  height: auto;
  transform: rotateY(-14deg) rotateX(8deg);
  transform-origin: 60% 50%;
  filter: drop-shadow(-8px 14px 22px rgba(12, 26, 19, .13));
  animation: seal-float 9s ease-in-out infinite alternate;
}
.seal__rim { fill: none; stroke: var(--ink); stroke-width: 1.1; opacity: .5; }
.seal__rim--gold { stroke: var(--gold); stroke-width: 2; opacity: 1; }
.seal__disc { fill: var(--surface); stroke: var(--hairline); stroke-width: 1; }
.seal__legend {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  fill: var(--ink-70);
}
.seal__turn {
  transform-origin: 100px 100px;
  animation: seal-turn 44s linear infinite;
}
.seal__count {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 700;
  fill: var(--ink);
  text-anchor: middle;
}
.seal__rule { stroke: var(--gold); stroke-width: 2; }
.seal__label {
  font-family: var(--sans);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  fill: var(--ink-40);
  text-anchor: middle;
}

@keyframes seal-turn { to { transform: rotate(360deg); } }
@keyframes seal-float {
  from { transform: rotateY(-14deg) rotateX(8deg) translateY(-6px); }
  to   { transform: rotateY(-9deg)  rotateX(5deg) translateY(6px); }
}

/* ==========================================================================
   Operator band — the market, moving
   ========================================================================== */

.opband {
  position: relative;
  padding: var(--sp-6) 0 var(--sp-7);
  background: linear-gradient(to bottom, var(--emerald-t), var(--paper));
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}
.opband__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-5);
  margin-bottom: var(--sp-5);
}
.opband__note { margin: 0; font-size: var(--f-15); color: var(--ink-70); }

.eyebrow {
  margin: 0;
  font-size: var(--f-13);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--emerald-d);
}

.marquee {
  position: relative;
  overflow: hidden;
  /* Fade both ends so the loop leaves and enters the band instead of being
     cut off by it. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 148px;
  height: 64px;
  flex: 0 0 auto;
  padding: var(--sp-3);
  background: var(--ink);
  border-radius: 10px;
}
.marquee__item img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* The track holds the full set twice, so shifting it by exactly half puts an
   identical frame where the first one started — the loop has no seam. */
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }

/* ==========================================================================
   Reading progress
   ========================================================================== */

.progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 40;
  pointer-events: none;
}
.progress > span {
  display: block;
  height: 100%;
  width: var(--read, 0%);
  background: linear-gradient(to right, var(--emerald), var(--gold));
  transition: width .12s linear;
}

/* ==========================================================================
   Load choreography — one orchestrated moment, on the hero only

   The page opens once: headline, paragraph, figures, and the seal pressing
   down last. Nothing else on the site animates on load, so this reads as an
   entrance rather than as fidgeting. Pure CSS on purpose — gating it on a
   .js class would hide the hero until a deferred script ran, and any hitch
   there would show as a flash of visible text being snatched away.
   ========================================================================== */

.hero__text > h1,
.hero__text > p,
.hero__stats { animation: rise .7s cubic-bezier(.22,.61,.36,1) both; }
.hero__text > h1 { animation-delay: .05s; }
.hero__text > p  { animation-delay: .16s; }
.hero__stats     { animation-delay: .26s; }
.seal { animation: seal-in .9s cubic-bezier(.22,.61,.36,1) .2s both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
/* The stamp lands: it arrives large and slightly turned, then presses down. */
@keyframes seal-in {
  from { opacity: 0; transform: scale(1.16) rotate(-7deg); }
  to   { opacity: 1; transform: none; }
}

/* Animating a conic-gradient stop needs the browser to know the stop is a
   number, which is what @property declares. Without it the sweep snaps. */
@property --dial-fill {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
/* Only under .js, and only until the ring is released: if the script never
   runs, or the observer never fires, the rule above has already drawn the
   real score. */
.dials [data-dial] {
  --dial-fill: 0;
  transition: --dial-fill 1.1s cubic-bezier(.33,.9,.5,1);
}
.dials [data-dial].is-dialed { --dial-fill: var(--score-final); }

/* ==========================================================================
   Header call to action + secondary button

   A ranking row now offers two things: go to the operator, or read the
   review. Those are not the same weight of decision, so they are not the
   same weight of button — one solid, one outlined.
   ========================================================================== */

.btn--nav {
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-size: var(--f-15);
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(12, 26, 19, .06);
}
.btn--nav:hover { background: var(--gold-d); color: var(--ink); }


/* ==========================================================================
   Ranking row action cell

   The button and the compare tick sat side by side, so the tick landed in a
   different place on every row depending on how wide that operator's button
   was. Stacked, with the button filling the cell, every row's action column
   is identical: one button of one size, one tick under it.
   ========================================================================== */

.toplist__cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-3);
}
.toplist__cta .btn {
  width: 100%;
  white-space: nowrap;
}

.compare-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-size: var(--f-15);
  color: var(--ink-70);
  cursor: pointer;
  user-select: none;
}
.compare-toggle input {
  width: 17px;
  height: 17px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--emerald);
  cursor: pointer;
}
.compare-toggle:hover { color: var(--emerald-d); }

/* ==========================================================================
   Blog

   Articles are the one part of the site with no fixed data behind them, so
   the card leads with what does distinguish them: category and date. The
   whole card is the link — a title-only target is a small tap area on a
   phone, which is where most of this traffic lands.
   ========================================================================== */

.blog-head { padding-top: var(--sp-6); }
.blog-head__lead { max-width: 62ch; font-size: var(--f-20); color: var(--ink-70); }

.post-grid {
  list-style: none;
  margin: var(--sp-6) 0 var(--sp-8);
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-5);
}
.post-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  height: 100%;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: border-color .28s cubic-bezier(.22,.61,.36,1),
              transform .28s cubic-bezier(.22,.61,.36,1);
}
.post-card__link:hover { border-color: var(--emerald); transform: translateY(-2px); }

.post-card__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--f-13);
  color: var(--ink-40);
}
.post-card__cat {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--emerald-t);
  color: var(--emerald-d);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.post-card__title {
  font-family: var(--serif);
  font-size: var(--f-20);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}
.post-card__link:hover .post-card__title { color: var(--emerald-d); }
.post-card__desc { font-size: var(--f-15); line-height: 1.55; color: var(--ink-70); }
.post-card__more {
  margin-top: auto;
  font-size: var(--f-15);
  font-weight: 600;
  color: var(--emerald);
}

.post__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
  font-size: var(--f-13);
  color: var(--ink-40);
}
.related-posts { margin-top: var(--sp-8); padding-top: var(--sp-5); border-top: 1px solid var(--hairline); }
.related-posts h2 { font-size: var(--f-26); }
.related-posts .post-grid { margin-bottom: 0; }

/* ==========================================================================
   Interaction and accessibility baseline

   These were audited against the Web Interface Guidelines. Each rule here
   fixes something the audit found missing rather than being decorative.
   ========================================================================== */

/* The header is sticky, so an anchor jump or a keyboard focus would otherwise
   land the target underneath it. scroll-padding reserves the header's height
   on every scroll the browser performs itself. */
html {
  scroll-padding-top: 88px;
  /* Native form controls should render in the page's own scheme. */
  color-scheme: light;
}

/* One visible focus ring for everything interactive. Only two elements had
   one before, which left the nav, the CTAs, the compare boxes and every
   in-page link with no keyboard indicator at all. :focus-visible rather than
   :focus so a mouse click does not leave a ring behind. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Keyboard users need a way past 28 navigation links to reach the article. */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-4);
  z-index: 100;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--ink);
  color: #FFFFFF;
  font-size: var(--f-15);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .2s cubic-bezier(.22,.61,.36,1);
}
.skip-link:focus-visible { transform: none; color: #FFFFFF; }

/* Removes the ~300ms tap delay and the grey flash on tap. */
a, button, label, summary, input, select {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* The header and footer run full-bleed, so on a notched phone their content
   would sit under the rounded corners without this. */
.site-header .wrap,
.site-footer .wrap {
  padding-left: max(var(--sp-4), env(safe-area-inset-left));
  padding-right: max(var(--sp-4), env(safe-area-inset-right));
}
.site-footer { padding-bottom: max(var(--sp-6), env(safe-area-inset-bottom)); }

/* Figures in a column should line up on the decimal, not shuffle with digit
   width. Applies wherever numbers are compared down a column. */
.bonus-table td,
.calc-table td,
.rating-dial,
.spec-table td { font-variant-numeric: tabular-nums; }

/* Tells the reader which section they are in — the rebuilt nav lost this. */
.site-nav a[aria-current="page"] {
  background: var(--emerald-t);
  color: var(--emerald-d);
}

/* ==========================================================================
   Slot category picks

   Four cards, not three. A three-up equal-width row is the most templated
   layout there is; four reads as a set of results rather than a pricing
   table, and it divides cleanly to 2x2 on a tablet and 1-up on a phone.
   ========================================================================== */

.slot-picks { margin: var(--sp-9) auto var(--sp-8); }
.slot-picks__head {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-6);
}
.slot-picks__head .eyebrow { flex-basis: 100%; }
.slot-picks__head h2 { margin: 0; flex: 1 1 auto; }
.slot-picks__head .btn { flex: 0 0 auto; }

.pick-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}
.pick-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  height: 100%;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  text-decoration: none;
  transition: border-color .28s cubic-bezier(.22,.61,.36,1),
              transform .28s cubic-bezier(.22,.61,.36,1),
              box-shadow .28s cubic-bezier(.22,.61,.36,1);
}
.pick-card__link:hover {
  border-color: var(--emerald);
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.pick-card__label {
  font-size: var(--f-13);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--emerald-d);
}
.pick-card__name {
  font-family: var(--serif);
  font-size: var(--f-20);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.pick-card__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--hairline);
  font-size: var(--f-15);
  color: var(--ink-40);
}
.pick-card__rtp { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }

@media (max-width: 900px) { .pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .pick-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Cursor-proximity highlight

   Borrowed as a technique, not as code: a soft light that tracks the pointer
   across a card is what separates a card that reacts from one that merely
   changes colour. Written in the site's own palette and its own vanilla CSS.

   Deliberately restrained. The alternatives on offer — starfields, warp
   tunnels, physics galleries — would read as a casino trying to excite you,
   which is the opposite of what this site sells, and would cost real Core
   Web Vitals on the mid-range Android most of this traffic arrives on.
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
  .spot { position: relative; isolation: isolate; }
  .spot::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity .32s cubic-bezier(.22,.61,.36,1);
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
                                rgba(0, 122, 77, .10), transparent 68%);
  }
  .spot:hover::after { opacity: 1; }
}

/* ==========================================================================
   Reduced motion — must stay last so it wins
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
  .seal__turn, .seal__svg, .marquee__track { animation: none !important; }
  .seal__svg { transform: none !important; }
  /* No sweep, but the ring must still show the real score. */
  .dials [data-dial] { --dial-fill: var(--score-final, 90) !important; transition: none !important; }
  .hero__text > h1, .hero__text > p, .hero__stats, .seal { animation: none !important; }
}


/* ==========================================================================
   Ported from vsichkikazina.bg (latest): offer bar, article sidebar and brand
   box, trust block, blog categories, featured pick, latest posts, roulette
   entry points. Palette literals translated to the Mzansi tokens; the theme
   layer below still has the last word.
   ========================================================================== */
html { overflow-x: clip; }
body { margin: 0; overflow-x: clip; max-width: 100vw; background: var(--paper); color: var(--ink-70); font: 400 var(--f-17)/1.65 var(--sans); font-feature-settings: "locl" 1; -webkit-font-smoothing: antialiased; }
.card--casino .compliance { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--sp-2); }
.card--casino .compliance .badge--nap, .card--casino .compliance .badge--warn { flex: 1 1 0; min-width: 0; }
.card--casino .compliance .compliance__note { flex-basis: 100%; margin: 0; }
.updated { display: inline-block; }
.wrap.updated { display: block; font-size: var(--f-13); color: var(--ink-40); font-style: italic; }
@media (max-width: 700px) { .hero__stats { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: var(--sp-4); } .hero__stats dd { font-size: var(--f-26); } .hero__stats dt { font-size: 11px; letter-spacing: .06em; } }
.spec-payments a, .spec-payments span { display: inline-block; margin: 0 var(--sp-2) var(--sp-1) 0; }
.spec-payments a::after, .spec-payments span::after { content: " ·"; color: var(--ink-40); }
.spec-payments a:last-child::after, .spec-payments span:last-child::after { content: ""; }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--f-13); font-weight: 600; padding: 4px 10px; border-radius: 999px; line-height: 1.45; background: var(--emerald-t); color: var(--emerald-d); line-height: 1.4; }
.badge--warn { background: #E3DCCB; color: var(--flag-red); }
.card--casino .pros { flex: 1 1 auto; }
@supports (grid-template-rows: subgrid) { .card-grid .card--casino { display: grid; grid-template-rows: subgrid; grid-row: span 6; align-content: start; } }
.brand__logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.score-bars { display: flex; flex-direction: column; gap: var(--sp-4); max-width: 860px; }
.score-bars__row { display: grid; grid-template-columns: 140px 1fr 44px; align-items: center; gap: var(--sp-4); }
.score-note { margin: var(--sp-4) 0 0; font-size: var(--f-13); color: var(--ink-40); }
.score-note a { color: var(--ink-70); }
.score-bars__val { font-weight: 700; color: var(--ink); font-size: var(--f-15); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 599px) { .score-bars__row { grid-template-columns: 96px 1fr 36px; gap: var(--sp-3); } }
.toplist__row .brand__logo { width: 132px; height: 48px; padding: 4px 8px; }
.toplist__row .compliance { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; column-gap: var(--sp-2); }
@media (min-width: 900px) { .toplist__row { display: grid; grid-template-columns: 56px 320px 1fr 140px 160px; gap: var(--sp-4); } .toplist__row .brand__name { white-space: nowrap; } .toplist__row .compliance { grid-column: 1 / -1; } }
@media (max-width: 899px) { .toplist__row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "rank brand dial" "bonus bonus bonus" "cta cta cta" "comp comp comp"; gap: var(--sp-3); align-items: center; } .toplist__row .rank { grid-area: rank; width: 36px; height: 36px; font-size: var(--f-17); } .toplist__row .brand { grid-area: brand; min-width: 0; } .toplist__row .rating-dial { grid-area: dial; --dial-size: 54px; font-size: var(--f-17); } .toplist__row .toplist__bonus { grid-area: bonus; padding-top: var(--sp-3); border-top: 1px dashed var(--hairline); font-family: var(--serif); font-size: var(--f-17); color: var(--ink); } .toplist__row .toplist__cta { grid-area: cta; } .toplist__row .compliance { grid-area: comp; } .toplist__row .brand__unit { gap: var(--sp-3); } .toplist__row .brand__logo { width: 96px; height: 36px; padding: 3px 6px; } .toplist__row .brand__name { font-size: var(--f-15); } }
.spec-table, .bonus-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.spec-table { max-width: 860px; }
.spec-table th[scope="row"] { width: 260px; }
.spec-table th, .spec-table td, .bonus-table th, .bonus-table td { padding: var(--sp-4) var(--sp-5); text-align: left; vertical-align: top; border-bottom: 1px solid #E3DCCB; }
.sticky-cta__stack { display: flex; flex-direction: column; min-width: 0; }
.sticky-cta__stack strong { font-size: var(--f-15); color: var(--ink); }
.sticky-cta__stack span { font-size: var(--f-13); color: var(--ink-70); }
.sticky-cta .brand__logo { flex: 0 0 auto; width: 96px; height: 34px; }
@media (max-width: 899px) { .sticky-cta .brand__logo { display: none; } }
@media (min-width: 900px) { .sticky-cta { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--sp-3) var(--sp-4); left: auto; right: 20px; bottom: 20px; max-width: 380px; border: 1px solid var(--hairline); border-radius: 14px; box-shadow: 0 12px 32px rgba(12, 26, 19, .16); padding: var(--sp-4); transform: translateY(calc(100% + 24px)); } .sticky-cta.is-visible { transform: translateY(0); } .sticky-cta .btn--cta { grid-column: 1 / -1; text-align: center; } }
main[data-kind="review"] > .wrap, main[data-kind="review"] > section.wrap { max-width: 908px; }
main[data-kind="review"] > section.wrap { margin-bottom: var(--sp-7); }
main[data-kind="review"] .prose { max-width: none; }
main[data-kind="review"] .prose p { max-width: 72ch; }
main[data-kind="home"] .wrap.prose { max-width: var(--maxw); }
main[data-kind="home"] .prose p, main[data-kind="home"] .prose ul, main[data-kind="home"] .prose ol, main[data-kind="home"] .prose blockquote { max-width: none; }
.post-cta { margin: var(--sp-5) 0; padding: var(--sp-5); border-radius: var(--radius); background: rgba(0, 100, 60, .06); text-align: center; }
.post-cta__txt { margin: 0 0 var(--sp-4); font-weight: 700; }
.post-cta--panel { padding: var(--sp-6) var(--sp-5); max-width: 860px; }
.post-cta--panel .post-cta__txt { font-size: var(--f-17); max-width: 62ch; margin-left: auto; margin-right: auto; }
.post-cta__sub { margin: var(--sp-3) 0 0; font-size: var(--f-13); color: var(--ink-70); }
.post-cta__rg { margin: var(--sp-2) 0 0; font-size: var(--f-13); color: var(--ink-40); }
.marquee__item { display: flex; align-items: center; justify-content: center; width: 148px; height: 64px; flex: 0 0 auto; padding: var(--sp-2) var(--sp-3); background: var(--ink); border-radius: 10px; }
.marquee__item img { width: 100%; height: 100%; object-fit: contain; }
a.marquee__item, button.marquee__item { cursor: pointer; border: 0; font: inherit; -webkit-appearance: none; appearance: none; }
a.marquee__item:hover, button.marquee__item:hover { outline: 2px solid var(--emerald); outline-offset: 2px; }
.blog-cats { margin-top: var(--sp-5); }
.blog-cats__list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; }
.blog-cats__link { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--surface); color: var(--ink-70); font-size: var(--f-15); font-weight: 600; text-decoration: none; transition: border-color .28s cubic-bezier(.22,.61,.36,1), color .28s cubic-bezier(.22,.61,.36,1); }
.blog-cats__link:hover { border-color: var(--emerald); color: var(--emerald-d); }
.blog-cats__link[aria-current="page"] { background: var(--emerald); border-color: var(--emerald); color: #FFFFFF; }
.blog-sec { font-size: var(--f-26); margin: var(--sp-7) 0 0; }
.cat-eyebrow { margin: 0 0 var(--sp-2); font-size: var(--f-13); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.cat-eyebrow a { text-decoration: none; }
.cat-empty { margin: var(--sp-6) 0 var(--sp-5); padding: var(--sp-5); background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; color: var(--ink-70); }
.cat-links { margin-bottom: var(--sp-8); }
.cat-links h2 { font-size: var(--f-20); margin-bottom: var(--sp-3); }
.cat-links ul { margin: 0; padding-left: 1.2em; }
.cat-links li { margin-bottom: var(--sp-2); }
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--sp-7); align-items: start; }
.post-layout__main { min-width: 0; }
.post-layout .prose { max-width: 68ch; }
.post-aside { position: static; }
@media (max-width: 980px) { .post-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); } .post-aside { position: static; max-width: 420px; } }
.post__cat-link { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--hairline); font-size: var(--f-15); color: var(--ink-40); }
a.post-card__cat { text-decoration: none; }
a.post-card__cat:hover { background: var(--emerald); color: #FFFFFF; }
.brandbox { background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; box-shadow: var(--shadow); padding: var(--sp-5); }
.brandbox__title { font-size: var(--f-20); margin: 0 0 var(--sp-2); }
.brandbox__list { list-style: none; margin: 0; padding: 0; }
.brandbox__item { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-areas: "rank logo score" "rank bonus cta"; column-gap: var(--sp-2); row-gap: 5px; align-items: center; padding: 9px 0; border-top: 1px solid var(--hairline); }
.brandbox__item:last-child { padding-bottom: 0; }
.brandbox__rank { grid-area: rank; align-self: center; font-family: var(--serif); font-size: var(--f-15); font-weight: 700; color: var(--ink-40); }
.brandbox__item:first-child .brandbox__rank { color: var(--gold-d); }
.brandbox__logo { grid-area: logo; width: 144px; height: 46px; padding: 2px 6px; justify-self: start; transition: opacity .28s cubic-bezier(.22,.61,.36,1); }
.brandbox__logo:hover { opacity: .82; }
.brandbox__score { grid-area: score; justify-self: end; align-self: center; white-space: nowrap; font-family: var(--serif); font-size: var(--f-18, 1.15rem); font-weight: 800; color: var(--gold-d); }
.brandbox__score::before { content: "\2605"; margin-right: 3px; color: var(--gold); font-size: .82em; vertical-align: 1px; }
.brandbox__bonus { grid-area: bonus; align-self: center; font-size: var(--f-13); line-height: 1.3; color: var(--ink-70); }
.brandbox__review { white-space: nowrap; }
.brandbox__cta { grid-area: cta; justify-self: end; align-self: center; padding: 7px 12px; font-size: var(--f-13); white-space: nowrap; }
.brandbox__all { display: inline-block; margin-top: var(--sp-3); font-size: var(--f-15); font-weight: 600; text-decoration: none; }
.brandbox__all:hover { text-decoration: underline; }
.brandbox__note { margin: var(--sp-3) 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-40); }
.post__byline { margin: 0 0 var(--sp-5); font-size: var(--f-15); color: var(--ink-40); }
.post__author { font-family: var(--serif); font-weight: 700; color: var(--ink); }
.post__rg { margin: var(--sp-6) 0 0; padding: var(--sp-4) var(--sp-5); background: var(--emerald-t); border-left: 3px solid var(--emerald); border-radius: 0 var(--radius) var(--radius) 0; font-size: var(--f-15); }
.post-trust { margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--hairline); font-size: var(--f-15); color: var(--ink-70); }
.post-trust p { margin: 0 0 var(--sp-3); line-height: 1.6; }
.post-trust__author { padding: var(--sp-5); background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; }
.post-trust__name { font-family: var(--serif); font-size: var(--f-20); font-weight: 700; color: var(--ink); margin-bottom: var(--sp-2) !important; }
.post-trust__dates { font-size: var(--f-13); color: var(--ink-40); margin-bottom: 0 !important; }
.post-trust__about { margin-top: var(--sp-5); }
.post-trust__rg, .post-trust__aff { font-size: var(--f-13); line-height: 1.55; color: var(--ink-40); }
.breadcrumbs ol { max-width: 100%; }
.breadcrumbs li { max-width: 100%; }
.breadcrumbs li > a { white-space: nowrap; }
.breadcrumbs li:last-child { min-width: 0; }
.breadcrumbs li > span { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 640px) { .breadcrumbs li:last-child { display: none; } }
@media (min-width: 981px) and (min-height: 800px) { .post-aside { position: sticky; top: calc(85px + var(--offerbar-h, 0px)); align-self: start; transition: top .35s cubic-bezier(.22,.61,.36,1); } }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.btn--ghost { background: transparent; color: var(--emerald-d); border-color: var(--emerald); }
.btn--ghost:hover { background: var(--emerald-t); color: var(--emerald-d); }
.featured-wrap { margin-top: var(--sp-6); }
.featured { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-5); background: linear-gradient(180deg, #FFFFFF, var(--emerald-t)); border: 1px solid var(--emerald); border-radius: 16px; padding: var(--sp-6); box-shadow: var(--shadow); }
.featured__badge { position: absolute; top: -14px; left: var(--sp-5); background: var(--gold); color: var(--ink); font-weight: 700; font-size: var(--f-13); padding: 4px 14px; border-radius: 999px; }
.featured__brand { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); min-width: 130px; }
.featured__logo { width: 150px; height: 54px; }
.featured__rating { font-family: var(--serif); font-size: 1.9rem; font-weight: 800; color: var(--emerald-d); line-height: 1; }
.featured__bonus { font-family: var(--serif); font-size: 1.8rem; font-weight: 800; color: var(--ink); line-height: 1.15; margin: 0; }
.featured__why { color: #3E4A43; font-size: var(--f-15); margin: var(--sp-2) 0 0; }
.featured__cta { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 190px; }
.featured__cta .btn--cta { font-size: var(--f-17); padding: 14px 22px; }
.featured__compliance { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; font-size: var(--f-13); color: #3E4A43; margin: 0; padding-top: var(--sp-3); border-top: 1px dashed var(--hairline); }
@media (max-width: 720px) { .featured { grid-template-columns: 1fr; text-align: center; padding: var(--sp-6) var(--sp-4) var(--sp-4); } .featured__brand { flex-direction: row; justify-content: center; } .featured__cta { min-width: 0; } }
.toplist__bonus { font-family: var(--serif); font-weight: 700; font-size: var(--f-17); color: var(--ink); }
.sticky-cta__offer { font-size: var(--f-13); color: var(--ink); line-height: 1.25; }
.sticky-cta__offer strong { display: block; font-size: var(--f-15); color: var(--emerald-d); }
.sticky-cta .btn--cta { white-space: nowrap; flex: 0 0 auto; }
.hero { padding: var(--sp-7) 0 var(--sp-6); }
.toplist__note { margin: 0 0 var(--sp-4); font-size: var(--f-13); color: #3E4A43; }
.brandbox__title { display: inline-block; padding-bottom: var(--sp-2); margin-bottom: var(--sp-3); border-bottom: 3px solid var(--gold); }
.brandbox__item { padding: 10px 8px; border-radius: 10px; transition: background .2s cubic-bezier(.22,.61,.36,1); }
.brandbox__item:hover { background: #F6F2E8; }
.brandbox__item:first-child { border-top: 0; margin-bottom: var(--sp-2); background: var(--emerald-t); border: 1px solid var(--emerald); }
.brandbox__item:first-child .brandbox__rank { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF; background: var(--gold-d); border-radius: 50%; font-family: var(--sans); font-size: var(--f-14, 14px); font-weight: 700; line-height: 1; }
.brandbox, .brandbox__item, .brandbox__bonus { min-width: 0; }
.brandbox__logo { max-width: 100%; }
.brandbox__bonus { overflow-wrap: anywhere; }
@media (max-width: 980px) { .post-aside { width: 100%; max-width: calc(100vw - 2 * var(--sp-4)); margin-left: 0; margin-right: 0; } }
.toplist__cta { display: flex; flex-direction: column; gap: var(--sp-2); }
.btn--review { font-size: var(--f-13); padding: 8px 14px; text-align: center; justify-content: center; }
.toplist__row { position: relative; }
.toplist__flag { position: absolute; top: -11px; left: var(--sp-5); z-index: 1; font-weight: 700; font-size: var(--f-13); line-height: 1.4; padding: 3px 12px; border-radius: 999px; box-shadow: var(--shadow); }
.toplist__flag--month { background: var(--gold); color: var(--ink); }
.toplist__flag--bonus { background: var(--emerald); color: #FFFFFF; }
.badge--trust { background: var(--paper); color: var(--ink-70); border: 1px solid var(--hairline); font-weight: 500; }
a.badge--more { text-decoration: none; color: var(--emerald-d); }
a.badge--more:hover { border-color: var(--emerald); background: var(--emerald-t); }
.pay-tile { display: block; width: 76px; height: 29px; border-radius: 6px; }
.compliance__pay { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.compliance__pay .compare-toggle { margin-left: auto; }
a.rating-dial { text-decoration: none; cursor: pointer; transition: transform .2s cubic-bezier(.22,.61,.36,1); }
a.rating-dial:hover { transform: scale(1.06); }
.site-header .logo { display: flex; align-items: center; gap: 10px; height: auto; text-decoration: none; }
.logo__mark { display: block; width: 30px; height: 36px; }
.logo__word { display: flex; flex-direction: column; font-family: var(--serif); font-weight: 700; font-size: 15px; line-height: 1.1; letter-spacing: .13em; text-transform: uppercase; color: var(--ink); }
.logo__word b { color: var(--emerald-d); font-weight: 700; }
.offerbar { position: fixed; top: 0; left: 0; right: 0; z-index: 45; width: min(780px, calc(100% - 24px)); margin-inline: auto; background: linear-gradient(180deg, #FFFFFF, var(--emerald-t)); border: 1px solid var(--emerald); border-top: 0; border-radius: 0 0 16px 16px; box-shadow: var(--shadow); transform: translateY(calc(-100% - 34px)); visibility: hidden; transition: transform .35s cubic-bezier(.22,.61,.36,1), visibility 0s .35s; }
.offerbar.is-visible { transform: translateY(0); visibility: visible; transition: transform .35s cubic-bezier(.22,.61,.36,1), visibility 0s 0s; }
.offerbar.is-visible.is-collapsed { transform: translateY(-100%); background: transparent; border-color: transparent; box-shadow: none; }
.offerbar.is-visible.is-collapsed .offerbar__inner { visibility: hidden; }
.offerbar.is-visible.is-collapsed .offerbar__tab { visibility: visible; }
.offerbar.is-visible { transition: transform .35s cubic-bezier(.22,.61,.36,1), background .35s cubic-bezier(.22,.61,.36,1), border-color .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s cubic-bezier(.22,.61,.36,1), visibility 0s 0s; }
.offerbar__inner { display: flex; align-items: center; gap: var(--sp-3); padding-block: 6px; }
.offerbar__logo { width: 96px; height: 34px; padding: 3px 6px; }
.offerbar__name { font-family: var(--serif); font-weight: 700; font-size: var(--f-15); color: var(--ink); text-decoration: none; white-space: nowrap; }
.offerbar__name:hover { color: var(--emerald-d); }
.offerbar__bonus { color: var(--ink-70); font-size: var(--f-13); min-width: 0; }
.offerbar__pick { flex: 0 0 auto; background: var(--gold); color: var(--ink); font-weight: 700; font-size: 11px; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.offerbar__score { margin-left: auto; font-family: var(--serif); font-weight: 800; font-size: var(--f-17); color: var(--emerald-d); white-space: nowrap; }
.offerbar__score small { font-weight: 600; font-size: .7em; color: var(--ink-40); }
.offerbar__score::before { content: "\2605"; color: var(--gold); margin-right: 6px; font-size: .85em; }
.offerbar__cta { flex: 0 0 auto; padding: 8px 16px; font-size: var(--f-15); }
.offerbar__tab { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); width: 48px; height: 22px; border: 0; padding: 0; cursor: pointer; border-radius: 0 0 12px 12px; background: var(--gold); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.offerbar__tab::before { content: ""; width: 8px; height: 8px; border-left: 2px solid var(--ink); border-top: 2px solid var(--ink); transform: rotate(45deg) translate(-1px, -1px); transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.offerbar.is-collapsed .offerbar__tab::before { transform: rotate(225deg) translate(-1px, -1px); }
.offerbar__meta { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.offerbar__titleline { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
@media (max-width: 900px) { .offerbar__pick { display: none; } }
@media (max-width: 700px) { .offerbar__meta, .offerbar__age { display: none; } .offerbar__logo { width: 92px; height: 34px; } .offerbar__inner { gap: var(--sp-3); } .offerbar__cta { padding: 9px 14px; font-size: var(--f-13); } }
.latest-posts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.latest-posts li { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4) var(--sp-5); background: var(--surface); border: 1px solid var(--hairline); border-left: 3px solid var(--emerald); border-radius: var(--radius); transition: border-color .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s cubic-bezier(.22,.61,.36,1), transform .28s cubic-bezier(.22,.61,.36,1); }
.latest-posts li:hover { border-color: var(--emerald); transform: translateY(-2px); box-shadow: var(--shadow); }
.latest-posts a { color: var(--ink); text-decoration: none; font-weight: 600; line-height: 1.4; }
.latest-posts li:hover a { color: var(--emerald-d); }
.latest-posts time { color: var(--ink-40); font-size: var(--f-13); }
.latest-posts__intro { color: var(--ink-70); margin: 0 0 var(--sp-4); }
.latest-posts__all { margin: var(--sp-4) 0 0; }
.latest-posts__all a { color: var(--emerald-d); font-weight: 600; text-decoration: none; }
.latest-posts__all a:hover { text-decoration: underline; }
@media (max-width: 720px) { .latest-posts { grid-template-columns: 1fr; } }
.altm__ruletka { margin: var(--sp-3) 0 0; font-size: var(--f-15); }
.altm__ruletka a { color: var(--gold-d); font-weight: 600; }
.post-cta--ruletka { margin: var(--sp-5) 0; padding: var(--sp-5) var(--sp-4); }
.post-cta--ruletka .post-cta__txt { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); flex-wrap: wrap; line-height: 1.45; }
.post-cta__wheel { display: inline-flex; flex: 0 0 auto; }
.post-cta__wheel .rlw { width: 26px; height: 26px; vertical-align: 0; margin-right: 0; }
.btn--gold-cta { background: var(--gold); color: var(--ink); font-weight: 700; border-radius: 999px; padding: 12px 26px; }
.btn--gold-cta:hover { background: var(--gold-d); color: var(--ink); }
.rlw { width: 22px; height: 22px; display: inline-block; vertical-align: -5px; margin-right: 4px; }
.rlw__wheel { transform-box: view-box; transform-origin: 50% 50%; animation: rlw-spin 5s linear infinite; }
.rlw__ball { transform-box: view-box; transform-origin: 50% 50%; animation: rlw-spin 2.2s linear infinite reverse; }
@keyframes rlw-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .rlw__wheel, .rlw__ball { animation: none; } }
.post-aside .post-cta--ruletka { margin: 0 0 var(--sp-3); padding: var(--sp-3); }
.post-aside .post-cta--ruletka .post-cta__txt { font-size: var(--f-15); margin-bottom: var(--sp-3); }
.post-aside .post-cta--ruletka .btn--gold-cta { padding: 8px 18px; font-size: var(--f-15); }
.post-aside .post-cta__wheel .rlw { width: 22px; height: 22px; }
.post-aside .brandbox { padding: 14px var(--sp-4); }
.post-aside .brandbox__logo { width: 116px; height: 34px; }
.post-aside .brandbox__item { padding: 5px 0; row-gap: 3px; }
.post-aside .brandbox__cta { padding: 6px 13px; font-size: var(--f-13); }
.post-aside .brandbox__all { margin-top: var(--sp-2); }
.post-aside .brandbox__note { margin-top: var(--sp-2); }
.post-aside .brandbox__title { font-size: var(--f-17); margin-bottom: 2px; }
.post-aside .post-cta--ruletka .post-cta__txt { margin-bottom: var(--sp-2); }
@media (min-width: 981px) and (min-height: 800px) { .post-aside { max-height: calc(100vh - 97px - var(--offerbar-h, 0px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; transition: top .35s cubic-bezier(.22,.61,.36,1), max-height .35s cubic-bezier(.22,.61,.36,1); } }
.post-aside .brandbox__item:first-child { padding: 8px 12px; }

/* ==========================================================================
   Mzansi theme layer

   Everything above is the shared engine's stylesheet re-tokened. This layer
   is what makes the site read as South African rather than as a re-coloured
   template: a dark flag-green hero, the Ndebele band as the recurring
   signature, and flag-gold calls to action with ink text (gold on white fails
   contrast; ink on gold passes comfortably).
   ========================================================================== */

/* The Ndebele band. Stepped geometric blocks outlined in ink, in the flag
   colours plus white — the painted-wall motif, used as a 12px ribbon rather
   than wallpaper so it signals place without shouting. One SVG tile, repeated. */
.nb-band {
  height: 12px;
  background-color: var(--ink);
  background-image: url("../img/ndebele-band.svg");
  background-size: 96px 12px;
  background-repeat: repeat-x;
}
.nb-band--tall { height: 18px; background-size: 144px 18px; }

h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.02em; }
.hero__text > h1 { letter-spacing: -0.03em; }

/* Header: white, solid enough to read over anything, the band beneath it. */
.site-header {
  background: rgba(255, 255, 255, .94);
  border-bottom: 0;
  padding: var(--sp-3) 0 calc(var(--sp-3) + 12px);
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background-image: url("../img/ndebele-band.svg");
  background-size: 48px 6px;
  background-repeat: repeat-x;
  background-color: var(--ink);
}
.site-header .logo { height: 40px; }
.site-header .logo img,
.site-header .logo svg { height: 40px; }

/* Calls to action: gold with ink text. */
.btn--cta {
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .14);
}
.btn--cta:hover { background: #FFC43D; color: var(--ink); }
.btn--nav { background: var(--emerald); color: #FFFFFF; }
.btn--nav:hover { background: var(--emerald-d); color: #FFFFFF; }

/* Hero: night-green field with a slow gold and green glow, white type. */
.hero {
  background: var(--night);
  color: rgba(255, 255, 255, .82);
  padding: var(--sp-8) 0 calc(var(--sp-7) + 18px);
}
.hero::before {
  background:
    radial-gradient(42% 80% at 6% 20%, rgba(0, 122, 77, .55), transparent 64%),
    radial-gradient(38% 70% at 94% 0%, rgba(255, 182, 18, .22), transparent 66%),
    radial-gradient(70% 90% at 60% 110%, rgba(0, 122, 77, .35), transparent 70%);
}
.hero::after {
  height: 18px;
  background: var(--ink) url("../img/ndebele-band.svg") repeat-x;
  background-size: 144px 18px;
}
.hero h1, .hero .verdict__body h1 { color: #FFFFFF; }
.hero h1 em { font-style: normal; color: var(--gold); }
.hero a:not(.btn) { color: var(--gold); }
.hero .hero__stats dt { color: rgba(255, 255, 255, .6); }
.hero .hero__stats dd { color: #FFFFFF; }
.hero .hero__stats { border-top: 1px solid rgba(255, 255, 255, .14); }
.hero .verdict__bonus { color: #FFFFFF; }
.hero .verdict__score-label { color: rgba(255, 255, 255, .7); }
.hero .compliance { border-top-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .7); }
.hero .compliance__note { color: rgba(255, 255, 255, .7); }
.hero .badge--nap { background: rgba(255, 255, 255, .12); color: #FFFFFF; }
.hero .rating-dial { color: #FFFFFF; }
.hero .breadcrumbs a { color: var(--gold); }

/* The seal on a dark field: disc stays light so the count reads. */
.hero .seal__rim { stroke: #FFFFFF; opacity: .35; }
.hero .seal__legend { fill: rgba(255, 255, 255, .85); }
.hero .seal__disc { fill: #FFFFFF; stroke: var(--gold); stroke-width: 2; }
.hero .seal__svg { filter: drop-shadow(-8px 14px 26px rgba(0, 0, 0, .35)); }

/* Operator band sits on sand, not on a green wash. */
.opband { background: var(--paper); }

/* Footer: the band across the top, ink below. */
.site-footer { position: relative; background: var(--ink); color: rgba(255, 255, 255, .62); }
.site-footer::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 18px;
  background: var(--ink) url("../img/ndebele-band.svg") repeat-x;
  background-size: 144px 18px;
}
.site-footer .compliance { color: rgba(255, 255, 255, .62); }
.site-footer a:hover { color: var(--gold); }
.foot-help {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 182, 18, .14);
  color: var(--gold);
  font-weight: 700;
}

/* The ARB Gambling Appendix wants the responsible-gambling warning to take a
   real share of the home page, not a line of grey small print. This strip is
   that warning: ink on gold, full width, above the footer on every page. */
.rg-strip {
  background: var(--gold);
  color: var(--ink);
  padding: var(--sp-5) 0;
  margin-top: var(--sp-8);
}
.rg-strip .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-6);
}
.rg-strip__age {
  display: inline-grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--gold);
  font: 800 var(--f-26)/1 var(--serif);
  flex: 0 0 auto;
}
.rg-strip__text { flex: 1 1 420px; margin: 0; font-size: var(--f-17); color: var(--ink); }
.rg-strip__text strong { font-family: var(--serif); font-size: var(--f-20); display: block; }
.rg-strip__call {
  font: 800 var(--f-26)/1.1 var(--serif);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.rg-strip__call:hover { color: var(--emerald-d); }
.rg-strip + .site-footer { margin-top: 0; }
.rg-strip--home { padding: var(--sp-7) 0; }
.rg-strip--home .rg-strip__age { width: 88px; height: 88px; font-size: var(--f-34); }
.rg-strip--home .rg-strip__text { font-size: var(--f-20); }

/* First rank gets the gold medal, not a green chip. */
.rank--first { background: var(--gold); color: var(--ink); }

/* Demo slot page */
.demo {
  margin: var(--sp-6) 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--night);
  color: #FFFFFF;
  box-shadow: var(--shadow);
}
.demo__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background:
    radial-gradient(60% 80% at 20% 20%, rgba(0, 122, 77, .6), transparent 70%),
    radial-gradient(50% 70% at 90% 10%, rgba(255, 182, 18, .25), transparent 70%),
    var(--night);
}
.demo__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.demo__launch { display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-5); text-align: center; }
.demo__title { font: 800 var(--f-34)/1.05 var(--serif); color: #FFFFFF; margin: 0; }
.demo__note { font-size: var(--f-13); color: rgba(255, 255, 255, .7); margin: 0; max-width: 46ch; }
.demo__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  background: rgba(255, 255, 255, .06);
  font-size: var(--f-13); color: rgba(255, 255, 255, .75);
}
.slot-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-3);
  margin: var(--sp-5) 0;
  padding: 0;
  list-style: none;
}
.slot-facts li {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
}
.slot-facts span { display: block; font-size: var(--f-13); color: var(--ink-40); text-transform: uppercase; letter-spacing: .08em; }
.slot-facts strong { font: 800 var(--f-26)/1.2 var(--serif); color: var(--ink); }
.slot-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-3); }
.slot-list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius);
  text-decoration: none; color: var(--ink); font-weight: 600;
}
.slot-list a:hover { border-color: var(--emerald); background: var(--emerald-t); }
.slot-list small { color: var(--emerald-d); font-weight: 700; }

/* Feature chips on the toplist rows: what each bookmaker actually offers. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chip {
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 999px;
  background: var(--emerald-t); color: var(--emerald-d);
}

/* Wordmark tiles. There are no operator logo files yet (we do not ship brand
   artwork without permission), so the tile has to carry the brand on type
   alone: bold white name on ink, a gold rule under it. */
.eyebrow--light { color: var(--gold); opacity: .9; }
.brand__wordmark { font-weight: 800; letter-spacing: -0.01em; color: #FFFFFF; }
.brand__wordmark::after {
  content: "";
  display: block;
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--gold);
}
.marquee__item .brand__wordmark { font-size: var(--f-17); }
.marquee__item { background: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 182, 18, .18); }
.card__offer { margin: 0; font-weight: 700; color: var(--ink); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0;
}
.note { font-size: var(--f-13); color: var(--ink-40); }
.more-slots { margin-top: var(--sp-7); }

/* Long brand names ("Hollywoodbets", "World Sports Betting") must fit the
   small ranking tile: smaller type, and the tile grows a little rather than
   clipping the name. */
.toplist__row .brand__logo,
.card--casino .brand__logo,
.altm__item .brand__logo { min-width: 112px; width: auto; }
.toplist__row .brand__wordmark,
.card--casino .brand__wordmark,
.altm__item .brand__wordmark { font-size: 13px; white-space: nowrap; overflow-wrap: normal; padding: 0 6px; }

/* Hero fixes: the dial's face is light, so its number stays ink even on the
   dark field; the verdict tile never breaks a brand name mid-word. */
.hero .rating-dial { color: var(--ink); }
.verdict .brand__logo { width: auto; min-width: 160px; padding: 0 var(--sp-4); }
.verdict .brand__wordmark { font-size: var(--f-20); white-space: nowrap; overflow-wrap: normal; }
@media (max-width: 700px) {
  .verdict .brand__logo { min-width: 0; height: 64px; }
  .verdict .brand__wordmark { font-size: var(--f-17); }
}

/* Header stacking. The Ndebele band is the header's ::after; painted after the
   nav it sat ON TOP of an open dropdown, so the band's stripe cut across the
   menu. The band now sits at the bottom of the header's stack and the open
   panel above everything in it. A transparent bridge spans the 10px gap
   between the button and the panel so moving the pointer down never closes
   the menu mid-way. */
.site-header::after { z-index: 0; pointer-events: none; }
.site-header > .wrap { position: relative; z-index: 2; }
.site-nav__sub { z-index: 70; }
.site-nav__group::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 14px;
}


/* Ported components, Mzansi finish */
.btn--nav-gold { background: var(--gold); color: var(--ink); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.btn--nav-gold:hover { background: #FFC43D; color: var(--ink); }
.btn--nav-gold .rlw { width: 22px; height: 22px; margin: 0; }
.rlw__wheel { transform-origin: 20px 20px; }
@media (prefers-reduced-motion: no-preference) {
  .btn--nav-gold:hover .rlw__wheel,
  .post-cta--ruletka:hover .rlw__wheel { animation: rlw-spin 1.2s cubic-bezier(.22,.61,.36,1); }
}
@keyframes rlw-spin { to { transform: rotate(360deg); } }
.pay-chip {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 5px 8px; border-radius: 6px;
  background: var(--surface); border: 1px solid var(--hairline); color: var(--ink-70);
}
.compliance__pay { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: var(--sp-2) 0 0; border-top: 0; padding-top: 0; }
.brandbox__item:first-child { background: var(--emerald-t); }
.featured { border-color: var(--gold); }
.featured__badge { background: var(--gold); color: var(--ink); }
.offerbar { z-index: 45; }
.offerbar .brand__wordmark { font-size: 13px; white-space: nowrap; }
.offerbar__logo { width: auto; min-width: 96px; background: var(--ink); }
.blog-cats__link small { color: var(--ink-40); font-weight: 600; margin-left: 4px; }
.altm__ruletka a { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.altm__ruletka .rlw { width: 20px; height: 20px; margin: 0; }
.btn--nav-gold { white-space: nowrap; padding: 9px 16px; }
@media (min-width: 1101px) and (max-width: 1240px) { .site-nav__top { padding-inline: 8px; } }

.brandbox__item:first-child .brandbox__rank { background: var(--gold); color: var(--ink); }
.brandbox__logo { width: 132px; height: 40px; }
.brandbox__logo .brand__wordmark { font-size: 14px; white-space: nowrap; gap: 3px; }
.brandbox__logo .brand__wordmark::after { width: 16px; height: 2px; }
/* Payment chips always wrap as a row; a chip never breaks inside its name. */
.toplist__row .compliance__pay {
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
  gap: 6px; grid-column: 1 / -1;
}
.pay-chip { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 700px) {
  .toplist__row .compliance__pay { margin-top: var(--sp-2); }
  .pay-chip { font-size: 11px; padding: 4px 7px; }
}

/* Partner recommendation popup (partials/partner-modal.html) */
.pmod__panel { border-top: 6px solid var(--gold); }
.pmod__head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.pmod__logo { min-width: 120px; height: 40px; }
.pmod__pick { font-size: var(--f-13); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--emerald); }
.pmod__score { margin-left: auto; font-family: var(--serif); font-size: var(--f-26); color: var(--emerald); }
.pmod__score small { font-size: var(--f-13); color: var(--ink-40); }
.pmod__list { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-2); }
.pmod__list li { position: relative; padding-left: 28px; font-size: var(--f-15); color: var(--ink-70); }
.pmod__list li::before { content: "\2713"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); color: var(--ink); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.pmod__cta { display: block; width: 100%; text-align: center; font-size: var(--f-20); padding: 14px 20px; }
.pmod__more { text-align: center; margin: var(--sp-3) 0 var(--sp-4); font-size: var(--f-15); }
@media (max-width: 520px) { .pmod__pick { display: none; } }
.partner-spot { margin: var(--sp-5) 0 var(--sp-6); }
.pmod__skip { text-align: center; margin: var(--sp-3) 0 0; font-size: var(--f-13); }
.pmod__skip a { color: var(--ink-40); }