/* 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 {
  --paper: #FAF8F3;
  --surface: #FFFFFF;
  --ink: #14161A;
  --ink-70: #4A4F57;
  --ink-40: #8A9099;
  --hairline: #E4E0D6;
  --emerald: #0F7B5A;
  --emerald-d: #0A5B42;
  --emerald-t: #E8F3EF;
  --gold: #C9962C;
  --gold-d: #A87B1E;
  --flag-red: #B3261E;

  --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: Literata, Georgia, "Times New Roman", serif;
  --sans: Onest, -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: 10px;
  --shadow: 0 1px 2px rgba(20, 22, 26, .04), 0 8px 24px rgba(20, 22, 26, .06);
  --maxw: 1120px;
}

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

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;
}

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-2) 0;
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; column-gap: var(--sp-5); row-gap: 0; }
.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(20, 22, 26, .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); }
/* In cards the compliance block gets structure: one row of [18+ | licence
   pill] with aligned tops (the pill wraps internally), then the RG note on
   its own full line — instead of ragged inline flow. */
.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;
}
/* On .wrap the byline must stay a centered block: inline-block shrink-to-fit
   ignores the auto margins and pins it to the viewport edge. */
.wrap.updated {
  display: 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(15, 123, 90, .13), transparent 62%),
    radial-gradient(40% 70% at 92% 4%, rgba(201, 150, 44, .13), transparent 65%),
    radial-gradient(60% 90% at 60% 100%, rgba(15, 123, 90, .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) and (min-width: 701px) {
  .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) {
  /* A balanced grid rather than a wrapping row: flex wrap put one figure on
     the first line and the rest on the second, which reads as a mistake.
     With four stats, 2×2 keeps the block square and every figure aligned. */
  .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; }
}

.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,
.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: ""; }

.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: 4px 10px;
  border-radius: 999px;
  line-height: 1.45;
  background: var(--emerald-t);
  color: var(--emerald-d);
  line-height: 1.4;
}
.badge--nap { background: var(--emerald-t); color: var(--emerald-d); }
.badge--warn { background: #FBE9E7; color: var(--flag-red); }
.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 .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;
  }
}
.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;
  /* The imgs carry small width/height attributes for layout stability; at
     max-* sizing they render at that intrinsic box and float in the tile.
     Fill the padded tile instead — wordmark PNGs are 270-450px wide, so
     scaling up stays crisp. */
  width: 100%;
  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); max-width: 860px; }
.score-bars__row {
  display: grid;
  grid-template-columns: 140px 1fr 44px;
  align-items: center;
  gap: var(--sp-4);
}
.score-bars__row span:first-child { font-weight: 600; color: var(--ink); font-size: var(--f-15); }
.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
   ========================================================================== */

.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);
}

/* Tighter chip padding so the white-variant wordmark fills the dark tile
   instead of floating in it (same move as the sidebar chips). */
.toplist__row .brand__logo { width: 132px; height: 48px; padding: 4px 8px; }

.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); }

/* The homepage row mixes pill badges, trust chips and a prose note; as inline
   text they wrapped mid-block and sat on different baselines. Flex keeps every
   pill aligned and wraps whole items — the note moves down as one piece. */
.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;
    /* 320px brand column: the 132px logo chip plus the longest name
       ("LiveScore Bet Казино") on ONE line — 260px forced two-line names
       while the bonus column sat half empty. */
    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; }
}

/* 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; }

  .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); }
}

/* 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;
  box-shadow: var(--shadow);
}
/* Review pages drop the spec table straight into a wide section; unbounded it
   reads as two floating text columns with a gulf between them. Cap it near
   prose width and pin the label column so label and value sit together. */
.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 #D9D4C7;
}
.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(20, 22, 26, .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); }
}
.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; }
}
/* Desktop: the same element becomes a floating bottom-right widget instead of
   a full-width bar — visible, but it never covers the reading column. The
   hidden state adds the 24px offset so no sliver peeks before is-visible. */
@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(20, 22, 26, .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; }
}

/* ==========================================================================
   Review page column — every block hangs off ONE aligned column instead of a
   wide wrap for tables and a separately centered narrow wrap for prose.
   ========================================================================== */

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; }

/* Homepage: the prose block sits between full-width sections (bonus table,
   calculator), so both the section and its text span the same 1120px column
   as the tables — otherwise the page visibly "steps in" mid-scroll. */
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; }

/* ==========================================================================
   CTA panel (blog pages carry the same .post-cta inline; this copy serves the
   review pages — keep the two visually in sync)
   ========================================================================== */

.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); }

/* ==========================================================================
   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%; height: auto; 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(20, 22, 26, .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(232,243,239,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(20, 22, 26, .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-2) var(--sp-3);
  background: var(--ink);
  border-radius: 10px;
}
/* The imgs carry small width/height attributes (104x28) for layout stability;
   without an explicit size here they render at that tiny intrinsic box and
   float in the tile. Fill the padded tile instead — the PNGs are 270-450px
   wide, so scaling up stays crisp. */
.marquee__item img { width: 100%; height: 100%; object-fit: contain; }
/* Items are now the same actions as each casino's "Вземи бонуса": partners
   link to /go/, the rest open the licensed-alternative dialog. The strip is
   aria-hidden (a decorative duplicate of the toplist), so items stay out of
   the tab order via tabindex="-1". */
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; }

/* 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(20, 22, 26, .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(15, 123, 90, .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; }
}

/* ==========================================================================
   Blog architecture — categories, article sidebar, recommended-brands box

   The blog is organised into six SEO categories. Every article and category
   page runs a two-column grid: content on the left, a standing top-5 operator
   box on the right. Below 980px the grid collapses and the box drops in
   after the article body but before the related posts, so a phone reader
   still meets it while the article is fresh rather than at the very bottom.
   ========================================================================== */

.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); }

/* Two-column article shell. minmax(0, 1fr) rather than 1fr: a grid track
   defaults to min-content floor, and one long code-free Bulgarian word or a
   wide table would otherwise push the sidebar off the page instead of
   scrolling inside its own column. */
.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 {
  /* Pinning is opt-in, granted by the height media query further down. */
  position: static;
}

@media (max-width: 980px) {
  .post-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  /* Stacked in the flow there is no viewport to overflow, so the cap and its
     nested scroll come back off. */
  .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);
}

/* The category chip on an article page is a real link to its category, so it
   needs the underline suppressed and its own hover — the card version is a
   span inside a larger link and inherits neither. */
a.post-card__cat { text-decoration: none; }
a.post-card__cat:hover { background: var(--emerald); color: #FFFFFF; }

/* ---- Recommended brands box ---- */

.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; }

/* Named areas rather than source order: the rank sits in a full-height first
   column beside a three-row stack, which no auto-placement gets right. */
/* Compact, aligned row: logo + score on top, bonus below, and ONE CTA button
   that spans both rows (vertically centred, always flush right) so every item
   reads identically regardless of how long the bonus line is. */
/* Compact two-line row that fits a laptop viewport (so the box can stay sticky
   without cutting off #5). Top line: logo (left) + score (right). Bottom line:
   bonus (left) + CTA (right). Score sits directly above the CTA and both are
   right-aligned, so they form one clean vertical line down the rail; logo and
   bonus form the left column. */
/* Compact 2-row: logo + gold rating on top (row never overflows — just those two);
   bonus (one line) + a compact button on the bottom row. */
.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;   /* tight chip → the wordmark fills it, minimal black */
  justify-self: start;
  transition: opacity .28s cubic-bezier(.22,.61,.36,1);
}
.brandbox__logo:hover { opacity: .82; }
/* Rating: gold star + gold number — warm, on-brand, distinct from the green CTA. */
.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);
}

/* ==========================================================================
   Named byline and the article trust block

   The brand book treats a team/editorial byline as a critical failure: every
   article carries a named author, publication and revision dates, an About
   slot, the verbatim responsible-gambling line and the affiliate disclosure.
   These are the styles for that block.
   ========================================================================== */

.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);
}

/* The 18+ line is a compliance string, quoted verbatim. It sits apart from
   the prose so it reads as a standing notice rather than a closing sentence. */
.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); }


/* A breadcrumb trail ending in a long article title was pushing past the right
   edge on a phone: the flex row wraps between items, but one item longer than
   the viewport still overflows. Let the current-page crumb break and cap it. */
/* This bites on any page whose title is long, not just the blog: /faq/ and
   /bonus-category/ were overflowing by 30-43px before this. */
.breadcrumbs ol { max-width: 100%; }
.breadcrumbs li { max-width: 100%; }

/* A crumb wraps as a unit or not at all. Letting the text break inside a crumb
   interleaved the halves of "Казино Игри и Доставчици" with the separators and
   the neighbouring crumbs, which was unreadable on a phone. The row itself
   still wraps between crumbs. */
.breadcrumbs li > a { white-space: nowrap; }

/* Only the trailing current-page crumb may be squeezed and broken. Allowing
   every crumb to shrink collapsed the short link crumbs to ~21px wide and
   wrapped them one letter per line. */
.breadcrumbs li:last-child { min-width: 0; }
.breadcrumbs li > span {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  /* On a phone the current-page crumb is the H1 repeated a centimetre above
     itself, and it is the longest string in the trail. Drop it from the view
     only: all four levels stay in the BreadcrumbList schema. */
  .breadcrumbs li:last-child { display: none; }
}

/* The recommendations box is pinned only when the viewport can actually hold
   it. Below that it scrolls with the article: the reader still meets every
   operator on the way past, and nothing is stranded below the fold with no
   way to reach it. This is why the box needs no inner scrollbar. */
@media (min-width: 981px) and (min-height: 800px) {
  /* --offerbar-h is published by initOfferbar while the offer bar is open,
     so the box ducks below it instead of having its title covered. */
  .post-aside {
    position: sticky;
    top: calc(85px + var(--offerbar-h, 0px));
    align-self: start;
    transition: top .35s cubic-bezier(.22,.61,.36,1);
  }
}

/* ==========================================================================
   Homepage CRO — hero CTA, featured #1 pick, sticky mobile bar, bonus emphasis
   ========================================================================== */
.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: #55606b; 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: #55606b; 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; }
}

/* The bonus is the hook — make it read louder in the ranked table (desktop). */
.toplist__bonus { font-family: var(--serif); font-weight: 700; font-size: var(--f-17); color: var(--ink); }

/* Sticky mobile offer bar content */
.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; }

/* CRO: trim hero height so the featured pick peeks above the fold */
.hero { padding: var(--sp-7) 0 var(--sp-6); }
/* CRO: trust/recency note above the ranked table */
.toplist__note { margin: 0 0 var(--sp-4); font-size: var(--f-13); color: #55606b; }

/* ---- Sidebar brandbox: decoration only (title accent, #1 highlight, hover) ---- */
.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: #F5F6F8; }
.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;
}

/* Sidebar: never overflow its column (fixes mobile right-edge clipping). */
.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; }
}

/* ==========================================================================
   CRO: toplist card extras — review link, editorial flags, trust chips,
   clickable rating dial. (Homepage ranked table.)
   ========================================================================== */

/* Dual CTA: the affiliate button stays primary; the review link below it
   catches the hesitant reader instead of losing them. Compare stays last. */
.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;
}

/* Editorial flags: honest scarcity in the site's own voice — a small stamp
   on the card frame, same treatment as the featured badge. Rotated monthly
   by the publisher. */
.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; }

/* Trust chips: quiet, data-backed facts next to the licence badge — outlined
   on paper, not another green pill, so the licence keeps its weight. Payment
   methods use the same face: named chips beat a bare count, because EasyPay/
   Cashterminal support is a real selection criterion in the BG market. */
.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); }
/* Payment wordmark tiles: brand recognition scans faster than reading —
   the tile carries the method's own colors on a white card. */
.pay-tile { display: block; width: 76px; height: 29px; border-radius: 6px; }
/* All methods, on their own full-width line: the licence badge's length
   varies per card, so chips that followed it started ragged — a second line
   starts every card's payment row at the same x. The compare toggle rides
   its right edge, which also slims the CTA column (less dead space under
   the logo). */
.compliance__pay {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.compliance__pay .compare-toggle { margin-left: auto; }

/* The dial is now a link to the methodology; it must not pick up link blue
   or an underline — same face as before, plus an affordance on hover. */
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); }

/* ==========================================================================
   Brand: spade-and-check mark + typeset wordmark in the header. The mark is
   the reviewed-casino idea in one glyph — spade for the game, gold check for
   the verification — in the site's own emerald/gold.
   ========================================================================== */
.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; }

/* ==========================================================================
   CRO: blog offer bar — the top pick docked under the sticky header on
   article pages. Slides in once the reader is past the lead; the hanging
   gold tab collapses it without killing the offer entirely.
   ========================================================================== */
.offerbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 45;               /* under the header (50), over the content */
  /* A floating dropdown panel, not an edge-to-edge strip: about half the
     page on desktop, centered, rounded all round — the same face as the
     homepage "Избор на редактора" box so the top pick reads as one unit. */
  width: min(780px, calc(100% - 24px));
  margin-inline: auto;
  background: linear-gradient(180deg, #FFFFFF, var(--emerald-t));
  border: 1px solid var(--emerald);
  /* Flush under the header, like a drawer sliding out of it — squared top,
     rounded bottom, no top border against the header's own hairline. */
  border-top: 0;
  border-radius: 0 0 16px 16px;
  box-shadow: var(--shadow);
  /* The gold tab overhangs the bottom edge by 22px, so -100% (or -120% of a
     short bar) still leaves it peeking under the header. Overshoot by the
     overhang plus shadow, and drop visibility once the slide finishes so
     nothing — not even a shadow — bleeds below the header while hidden. */
  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;
}
/* Collapsed: the bar slides away but the tab, which overhangs the bottom
   edge, stays reachable to bring it back. The panel's paint must go with it:
   the sticky header is translucent, so a panel merely parked behind it
   ghosts through the blur — fade the box and hide the row, keep the tab. */
.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;
}

/* padding-block only — shorthand `padding` would wipe the .wrap gutters and
   pin the chip and CTA to the screen edges. */
.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); }

/* The middle column stacks the name (+pick pill) over the bonus line, which
   is what lets the whole offer fit a half-page floating panel. */
.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) {
  /* Between the full panel and the phone layout the pill is the first to go —
     name, bonus and CTA carry the message. */
  .offerbar__pick { display: none; }
}
@media (max-width: 700px) {
  /* The chip already carries the wordmark — dropping the text column is what
     lets the CTA stay on-screen at 390px. */
  .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); }
}

/* Homepage — Последни анализи */
.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; }
}

/* Бонус Рулетка entry points */
.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); }

/* Бонус Рулетка nav icon — mini roulette; wheel and ball counter-rotate */
.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; }
}

/* Compact sidebar: teaser + Топ казина must fit an ~800px-tall viewport so
   the aside can stay sticky without cutting off its tail. */
.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); }

/* The sticky rail must never outgrow its window: cap it to the viewport
   minus header and (live) offerbar. The scrollbar appears only when space
   actually runs out — on roomy screens nothing changes. */
@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);
  }
}

/* Breathing room inside the #1 highlight box — content shouldn't kiss the border. */
.post-aside .brandbox__item:first-child { padding: 8px 12px; }

/* ==========================================================================
   Mobile header polish — the hamburger control is 40px tall but the brand
   mark was only 36px, so the logo read as the shorter element next to the
   burger. Grow the mark (and nudge the wordmark) to match the 40px control
   on the breakpoints where the burger is shown.
   ========================================================================== */
@media (max-width: 899px) {
  .site-header .logo__mark { height: 40px; width: auto; }
  .site-header .logo__word { font-size: 16px; }
}

/* ==========================================================================
   CRO: mobile sticky Бонус Рулетка bar — JS-injected on phones/tablets only
   (assets/js/app.js → initMobileRuletkaBar). The gold header button is buried
   in the hamburger on mobile; this keeps the wheel in thumb reach. Pinned to
   the BOTTOM edge — the blog offerbar docks to the top, so the two never
   collide. Slides in once the reader is past the lead and stays dismissed for
   the rest of the visit. Desktop keeps the header button, so it is gated to
   the burger breakpoint.
   ========================================================================== */
.mrb { display: none; }
@media (max-width: 899px) {
  .mrb {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;                /* above the sticky header (50), below any modal */
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--hairline);
    box-shadow: 0 -6px 20px rgba(20, 22, 26, .10);
    transform: translateY(120%); /* parked below the fold until engaged */
    transition: transform .38s cubic-bezier(.22,.61,.36,1);
  }
  .mrb.is-visible { transform: translateY(0); }
  .mrb__cta {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;           /* comfortable tap target */
    background: var(--gold);
    color: var(--ink);
    font-weight: 700;
    border-radius: 999px;
    padding: 11px 18px;
    text-decoration: none;
  }
  .mrb__cta:hover, .mrb__cta:active { background: var(--gold-d); color: var(--ink); }
  .mrb__wheel { display: inline-flex; flex: 0 0 auto; }
  .mrb__wheel .rlw { width: 26px; height: 26px; margin: 0; vertical-align: 0; }
  .mrb__txt { flex: 1 1 auto; }
  .mrb__go { flex: 0 0 auto; font-size: 18px; line-height: 1; }
  .mrb__close {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    background: var(--surface);
    color: var(--ink-70);
    font-size: 22px; line-height: 1;
    cursor: pointer;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mrb { transition: none; }
}
/* cyrillic-ext */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url('/assets/fonts/literata-italic-cyrillic_ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url('/assets/fonts/literata-italic-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url('/assets/fonts/literata-italic-latin_ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url('/assets/fonts/literata-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/assets/fonts/literata-cyrillic_ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/assets/fonts/literata-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/assets/fonts/literata-latin_ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/assets/fonts/literata-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('/assets/fonts/literata-cyrillic_ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('/assets/fonts/literata-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('/assets/fonts/literata-latin_ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('/assets/fonts/literata-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('/assets/fonts/literata-cyrillic_ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('/assets/fonts/literata-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('/assets/fonts/literata-latin_ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('/assets/fonts/literata-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/assets/fonts/onest-cyrillic_ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/assets/fonts/onest-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/assets/fonts/onest-latin_ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/assets/fonts/onest-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url('/assets/fonts/onest-cyrillic_ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url('/assets/fonts/onest-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url('/assets/fonts/onest-latin_ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url('/assets/fonts/onest-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('/assets/fonts/onest-cyrillic_ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('/assets/fonts/onest-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('/assets/fonts/onest-latin_ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('/assets/fonts/onest-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* cyrillic-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('/assets/fonts/onest-cyrillic_ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* cyrillic */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('/assets/fonts/onest-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* latin-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('/assets/fonts/onest-latin_ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('/assets/fonts/onest-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.cta-disclosure{font-size:var(--f-13);color:var(--ink-40);margin:.5rem 0 0;max-width:60ch}

/* ── Offer-summary callout (Task C5) ─────────────────────────────────────── */
.offer-summary {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5);
  border: 2px solid var(--emerald);
  border-radius: var(--radius);
  background: var(--emerald-t);
  margin: var(--sp-5) 0;
}
.offer-summary__label {
  font-size: var(--f-13);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--emerald-d);
  margin: 0;
}
.offer-summary__deal {
  font-size: var(--f-20);
  color: var(--ink);
  margin: 0;
}
.offer-summary__terms {
  font-size: var(--f-15);
  color: var(--ink-70);
  margin: 0;
}
.offer-summary__terms-link {
  font-size: var(--f-13);
  color: var(--emerald);
}

/* ── compare-table (sravni-kazina static SSR table) ── */
.compare-table-wrap {
  margin: var(--sp-7) 0;
}
.compare-table-wrap > h2 {
  margin-bottom: var(--sp-4);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--f-15);
  background: var(--surface);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.compare-table thead th {
  background: var(--emerald);
  color: #fff;
  padding: var(--sp-3) var(--sp-4);
  text-align: center;
  font-weight: 700;
  white-space: nowrap;
}
.compare-table thead th:first-child {
  background: var(--emerald-d);
  text-align: left;
}
.compare-table thead th a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}
.compare-table thead th a:hover {
  text-decoration: underline;
}
.compare-table tbody tr:nth-child(even) {
  background: var(--paper);
}
.compare-table tbody tr:nth-child(odd) {
  background: var(--surface);
}
.compare-table tbody th,
.compare-table tbody td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--hairline);
  vertical-align: middle;
}
.compare-table tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  background: var(--emerald-t);
}
.compare-table tbody td {
  text-align: center;
  color: var(--ink-70);
}
.compare-table__cta-row td {
  padding: var(--sp-4);
  border-bottom: none;
}
.compare-table__note {
  font-size: var(--f-13);
  color: var(--ink-40);
  margin-top: var(--sp-3);
}
@media (max-width: 700px) {
  .compare-table-wrap .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .compare-table {
    min-width: 560px;
  }
}

/* Mobile: stack hero CTAs full-width for easier tapping. */
@media (max-width: 700px) {
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta > .btn { width: 100%; }
}