/* ============================================================
   TRUEROLL — design tokens
   Direction: light editorial. One typeface (Tahoma) at every
   size, text in a single ink colour, colour reserved for
   surfaces, bars and controls — never for letters.
   ============================================================ */
:root{
  /* surfaces */
  --bg:            oklch(97.6% 0.003 265);
  --bg-elevated:   oklch(100% 0 0);
  --surface:       oklch(96.2% 0.004 265);
  --surface-2:     oklch(93.4% 0.005 265);
  --surface-3:     oklch(88% 0.007 265);
  --line:          oklch(87.5% 0.006 265);
  --line-soft:     oklch(92.5% 0.005 265);

  /* ink — one colour, three weights of quiet */
  --text:          oklch(24% 0.012 265);
  --text-2:        oklch(40% 0.010 265);
  --text-3:        oklch(53% 0.008 265);
  --text-4:        oklch(62% 0.008 265);

  /* accents — surfaces and bars only */
  --gold:          oklch(83% 0.145 82);
  --gold-deep:     oklch(72% 0.150 70);
  --gold-wash:     oklch(83% 0.145 82 / 0.20);
  --mint:          oklch(72% 0.150 160);
  --mint-wash:     oklch(72% 0.150 160 / 0.18);
  --ice:           oklch(68% 0.130 240);
  --ice-wash:      oklch(68% 0.130 240 / 0.16);
  --rose:          oklch(60% 0.190 22);
  --rose-wash:     oklch(60% 0.190 22 / 0.14);
  --amber:         oklch(78% 0.155 62);

  /* type — a single, even sans at every level */
  --font-display: Tahoma, Verdana, Geneva, 'DejaVu Sans', sans-serif;
  --font-ui: Tahoma, Verdana, Geneva, 'DejaVu Sans', sans-serif;
  --font-mono: ui-monospace, 'DejaVu Sans Mono', Consolas, Menlo, monospace;

  --t-micro:  0.6875rem;
  --t-small:  0.8125rem;
  --t-body:   clamp(0.9375rem, 0.9rem + 0.18vw, 1.0625rem);
  --t-lead:   clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem);
  /* Tahoma runs wide, so the display sizes are pulled back from
     where a condensed face would sit */
  --t-h3:     clamp(1.1875rem, 1.08rem + 0.45vw, 1.4375rem);
  --t-h2:     clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem);
  --t-h1:     clamp(2.25rem, 1.35rem + 3.7vw, 4.25rem);
  --t-numeral: clamp(1.75rem, 1.15rem + 2.2vw, 3rem);

  /* rhythm — deliberately uneven, not one padding everywhere */
  --shell: 1260px;
  --gutter: clamp(1.125rem, 0.6rem + 2.4vw, 3rem);
  --band: clamp(4rem, 2.6rem + 5.5vw, 8.5rem);
  --band-tight: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);

  /* radii — three tiers, used for different weights of object */
  --r-chip: 6px;
  --r-card: 14px;
  --r-slab: 22px;

  /* layered shadow, tuned for a light ground */
  --shadow-card:
    0 1px 1px oklch(30% 0.02 265 / 0.05),
    0 4px 10px oklch(30% 0.02 265 / 0.05),
    0 16px 36px oklch(30% 0.02 265 / 0.06);
  --shadow-lift:
    0 2px 4px oklch(30% 0.02 265 / 0.07),
    0 10px 24px oklch(30% 0.02 265 / 0.08),
    0 28px 60px oklch(30% 0.02 265 / 0.10);

  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 620ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  font-size:var(--t-body);
  line-height:1.62;
  letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* atmosphere: a fixed grain + two very low-chroma light pools.
   Both are painted once, never animated. */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(80ch 60ch at 12% -8%, oklch(83% 0.145 82 / 0.14), transparent 62%),
    radial-gradient(70ch 55ch at 100% 10%, oklch(68% 0.130 240 / 0.07), transparent 64%);
}
body::after{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:0.022;
  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='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, header, footer{ position:relative; z-index:1; }

h1,h2,h3,h4{ margin:0; font-weight:400; letter-spacing:-0.02em; line-height:1.06; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; }
img,svg{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }

::selection{ background:var(--gold); color:oklch(16% 0.02 80); }

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:oklch(16% 0.02 80);
  padding:.75rem 1.25rem; border-radius:0 0 var(--r-chip) 0; font-weight:600;
}
.skip:focus{ left:0; }

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.shell{ width:min(100% - var(--gutter)*2, var(--shell)); margin-inline:auto; }
.shell-wide{ width:min(100% - var(--gutter)*2, 1480px); margin-inline:auto; }

/* ---------- shared type utilities ---------- */
.display{ font-family:var(--font-display); font-weight:400; letter-spacing:-0.025em; }
.display em{ font-style:italic; color:var(--gold); }

.eyebrow{
  display:inline-flex; align-items:center;
  font-size:var(--t-micro); font-weight:600; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--text-3);
}
/* Декоративная чёрточка перед надзаголовком убрана (Андрей 02.09.2026): читалась
   как случайное тире перед заголовком. gap в .eyebrow больше не нужен. */

.lead{ font-size:var(--t-lead); line-height:1.5; color:var(--text-2); letter-spacing:-0.015em; }
.muted{ color:var(--text-3); }
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* section header shared across bands */
.band{ padding-block:var(--band); }
.band-tight{ padding-block:var(--band-tight); }
.band-head{ max-width:62ch; margin-bottom:clamp(2rem,1.4rem + 2vw,3.5rem); }
.band-head h2{ font-family:var(--font-display); font-size:var(--t-h2); margin:.85rem 0 .9rem; }
.band-head p{ color:var(--text-2); font-size:var(--t-lead); line-height:1.5; }

.rule{ height:1px; background:linear-gradient(90deg, var(--line), transparent); border:0; margin:0; }

/* ---------- chips & badges ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.28rem .6rem; border-radius:var(--r-chip);
  font-size:var(--t-micro); font-weight:600; letter-spacing:.02em;
  border:1px solid var(--line); color:var(--text-2); background:var(--surface);
  white-space:nowrap;
}
.chip svg{ width:12px; height:12px; }
/* one chip style, no colour coding — the label carries the meaning */
.chip-gold, .chip-mint, .chip-ice, .chip-rose{
  color:var(--text-2); border-color:var(--line); background:var(--surface);
}
.bento .chip, .review-head .chip, .author-facts .chip{ align-self:flex-start; width:auto; }

/* ---------- buttons ---------- */
.btn{
  --btn-bg:var(--surface-2); --btn-fg:var(--text); --btn-line:var(--line);
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.72rem 1.15rem; border-radius:10px; border:1px solid var(--btn-line);
  background:var(--btn-bg); color:var(--btn-fg);
  font-size:var(--t-small); font-weight:600; letter-spacing:-0.005em;
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) linear,
             border-color var(--dur-fast) linear, box-shadow var(--dur) var(--ease);
}
.btn:hover{ transform:translateY(-1px); border-color:var(--surface-3); }
.btn:active{ transform:translateY(0); }
.btn svg{ width:15px; height:15px; }

.btn-primary{
  --btn-bg:var(--gold); --btn-fg:oklch(19% 0.03 80); --btn-line:transparent;
  box-shadow:0 6px 18px oklch(84% 0.135 85 / 0.16);
}
.btn-primary:hover{ --btn-bg:oklch(88% 0.14 85); box-shadow:0 10px 28px oklch(84% 0.135 85 / 0.26); }
.btn-ghost{ --btn-bg:transparent; --btn-fg:var(--text-2); }
.btn-ghost:hover{ --btn-fg:var(--text); --btn-bg:var(--surface); }
.btn-sm{ padding:.5rem .8rem; font-size:var(--t-micro); border-radius:8px; }
.btn-block{ width:100%; }

/* ============================================================
   HEADER
   ============================================================ */
.progress{
  position:fixed; inset:0 auto auto 0; height:2px; width:100%;
  transform-origin:0 50%; transform:scaleX(0); z-index:90;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold));
}

.alertbar{
  background:var(--bg-elevated);
  border-bottom:1px solid var(--line-soft);
  font-size:var(--t-micro); color:var(--text-3);
}
.alertbar .shell{ display:flex; align-items:center; gap:1rem; justify-content:space-between; min-height:38px; padding-block:.4rem; flex-wrap:wrap; }
.alertbar strong{ color:var(--text-2); font-weight:600; }
.alertbar .sep{ color:var(--line); }

.masthead{
  position:sticky; top:0; z-index:80;
  background:oklch(97.6% 0.003 265 / 0.78);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur) linear, background var(--dur) linear;
}
.masthead[data-stuck="true"]{
  border-bottom-color:var(--line);
  background:oklch(99% 0.002 265 / 0.92);
}
.masthead .shell{ display:flex; align-items:center; gap:1.5rem; min-height:66px; }

.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; flex:none; }
.brand-mark{
  width:27px; height:27px; border-radius:8px; flex:none;
  background:linear-gradient(150deg, var(--gold) 0%, var(--gold-deep) 100%);
  display:grid; place-items:center;
  color:oklch(18% 0.03 80); font-family:var(--font-display); font-size:16px; line-height:1;
  box-shadow:inset 0 1px 0 oklch(96% 0.05 85 / .6), 0 4px 12px oklch(84% 0.135 85 / .22);
}
.brand-name{ font-family:var(--font-display); font-size:1.1rem; letter-spacing:-0.02em; }
.brand-name span{ color:var(--gold); }

.mainnav{ margin-left:auto; display:flex; align-items:center; gap:.35rem; }
.mainnav a{
  padding:.5rem .7rem; border-radius:8px; text-decoration:none;
  font-size:var(--t-small); font-weight:500; color:var(--text-3);
  transition:color var(--dur-fast) linear, background var(--dur-fast) linear;
}
.mainnav a:hover{ color:var(--text); background:var(--surface); }
.masthead .btn{ flex:none; }
/* The full 10-item horizontal nav only fits on wide desktops. Below that the
   burger takes over (see the 1300px block lower down) and the picker takes the
   right-alignment the nav was doing. */
@media (max-width:1340px){
  .langpick{ margin-left:auto; }
}
/* The header CTA duplicates the hero button, every card's button and the sticky
   nav — it only ever cost horizontal room and pushed the row past the viewport.
   Dropped at every width; the rankings are one tap away everywhere else. */
.masthead > .shell > .btn{ display:none; }

/* ---- masthead fit ---------------------------------------------------------
   Eleven nav items plus the country picker outgrew the 1260px shell and pushed
   the picker off the right edge. The row gets the wide container the rest of
   the site already uses, and the brand gives back the difference: the wordmark
   is still the largest thing in the row, it just no longer costs the 40px the
   picker needs more.
   Measured on the live page the row needs 1247px, so the two 1300px
   breakpoints above move to 1340 rather than leaving a band where the nav is
   still desktop and already overflowing. */
.masthead .shell{ width:min(100% - var(--gutter) * 2, 1480px); gap:1rem; }
.brand{ gap:.55rem; }
.brand-mark{ width:23px; height:23px; border-radius:7px; font-size:14px; }
.brand-mark svg{ width:16px; height:16px; }
.brand-name{ font-size:.975rem; }
.navlist{ gap:.05rem; }
.navlist > li > a, .navlist .navbtn{ padding-left:.35rem; padding-right:.35rem; }

@media (max-width:1440px){
  /* half a point off the label buys the 1366 laptop its full nav instead of a
     burger, and that is the width most of this audience is on */
  .navlist > li > a, .navlist .navbtn{ font-size:12.5px; }
}

@media (max-width:420px){
  /* brand, picker and burger share one line here with nothing to spare */
  .brand-name{ font-size:.9rem; }
  .langpick{ max-width:104px; }
}
/* Phones: tighten the masthead so brand + burger + region picker never clip. */
@media (max-width:600px){
  .masthead .shell{ gap:.45rem; }
  .brand-name{ font-size:1.05rem; }
  .langpick{ max-width:104px; padding:.4rem 1.35rem .4rem .45rem; font-size:calc(var(--t-micro) - .5px); }
}
/* The orphaned "/" separators read badly once the alertbar wraps to lines. */
@media (max-width:700px){
  .alertbar .sep{ display:none; }
  .alertbar .shell{ gap:.15rem .9rem; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ position:relative; padding-top:clamp(3rem,2rem + 4vw,6rem); padding-bottom:clamp(2.5rem,1.5rem + 3vw,4rem); }
.hero-grid{
  display:grid; gap:clamp(2rem,1rem + 4vw,4.5rem);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:end;
}
@media (max-width:980px){ .hero-grid{ grid-template-columns:1fr; align-items:start; } }

.hero h1{
  font-family:var(--font-display); font-size:var(--t-h1);
  margin:1.1rem 0 0; text-wrap:balance;
}
.hero h1 .flow{ display:block; color:var(--text-3); }
.hero h1 em{ font-style:italic; color:var(--gold); }
.hero-sub{ margin-top:1.5rem; max-width:52ch; }
.hero-sub strong{ color:var(--text); font-weight:600; }

.hero-actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:2rem; }

/* the "one number" panel — a single claim rendered big, editorial */
.claim{
  border:1px solid var(--line); border-radius:var(--r-slab);
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg-elevated) 100%);
  box-shadow:var(--shadow-card);
  padding:clamp(1.4rem,1rem + 1.4vw,2.1rem);
  position:relative; overflow:hidden;
}
.claim::after{
  content:""; position:absolute; right:-30%; top:-60%; width:80%; aspect-ratio:1;
  background:radial-gradient(circle, oklch(84% 0.135 85 / .12), transparent 62%);
  pointer-events:none;
}
.claim-row{ display:flex; align-items:flex-end; gap:.7rem; }
.claim-num{
  font-family:var(--font-display); font-size:var(--t-numeral); line-height:.9;
  color:var(--gold); letter-spacing:-0.03em;
}
.claim-unit{ font-size:var(--t-small); color:var(--text-3); font-weight:600; letter-spacing:.02em; line-height:1.2; padding-bottom:.2rem; }
.claim p{ margin-top:.9rem; font-size:var(--t-small); color:var(--text-2); line-height:1.55; }
.claim-split{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-soft); margin-top:1.4rem; border-radius:12px; overflow:hidden; }
.claim-split div{ background:var(--bg-elevated); padding:.85rem .95rem; }
.claim-split dt{ font-size:var(--t-micro); color:var(--text-4); text-transform:uppercase; letter-spacing:.12em; font-weight:600; }
.claim-split dd{ margin:.25rem 0 0; font-size:1.0625rem; font-weight:600; }
.claim-split .lo{ color:var(--mint); }
.claim-split .hi{ color:var(--rose); }

/* proof strip */
.proof{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft);
  border-radius:var(--r-card); overflow:hidden; margin-top:clamp(2.5rem,2rem + 2vw,4rem);
}
.proof > div{ background:var(--bg-elevated); padding:1.15rem 1.25rem; }
.proof dt{ font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.13em; color:var(--text-4); font-weight:600; }
.proof dd{ margin:.4rem 0 0; font-family:var(--font-display); font-size:1.875rem; letter-spacing:-0.02em; }
.proof small{ display:block; font-family:var(--font-ui); font-size:var(--t-micro); color:var(--text-3); margin-top:.15rem; letter-spacing:0; }

/* ---- hero plate ------------------------------------------------------------
   The homepage hero sits on a dark photographic backdrop while everything below
   it stays light. Only the type inside .hero flips: .claim and .proof keep their
   white surfaces, and that contrast is the point of the section.
   The plate carries its own empty left third; the gradient underneath is
   insurance for the crops where it does not, since a narrow viewport scales the
   image up and the cards drift left under the headline. */
.hero{
  background-color:oklch(16% 0.020 160);
  background-image:url("hero-bg.jpg");
  background-image:image-set(url("hero-bg.webp") type("image/webp"), url("hero-bg.jpg") type("image/jpeg"));
  background-size:cover; background-position:right center; background-repeat:no-repeat;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(100deg,
    oklch(12% 0.015 160 / 0.94) 0%,
    oklch(12% 0.015 160 / 0.82) 34%,
    oklch(12% 0.015 160 / 0.36) 62%,
    oklch(12% 0.015 160 / 0.14) 100%);
}
.hero > .shell{ position:relative; z-index:1; }

.hero .eyebrow{ color:oklch(76% 0.012 160); }
.hero h1{ color:oklch(99% 0 0); }
.hero h1 .flow{ color:oklch(78% 0.012 160); }
.hero h1 em{ color:var(--gold); }
.hero .hero-sub{ color:oklch(80% 0.010 160); }
.hero .hero-sub strong{ color:oklch(99% 0 0); }
.hero .btn-ghost{ --btn-fg:oklch(97% 0 0); --btn-line:oklch(100% 0 0 / 0.30); }
.hero .btn-ghost:hover{ --btn-bg:oklch(100% 0 0 / 0.10); --btn-fg:oklch(100% 0 0); }

@media (max-width:900px){
  /* cropped hard at this width, so the overlay stops leaning and covers the
     full width instead of only the left side */
  .hero{ background-position:72% center; }
  .hero::before{
    background:linear-gradient(180deg,
      oklch(12% 0.015 160 / 0.90) 0%,
      oklch(12% 0.015 160 / 0.80) 55%,
      oklch(12% 0.015 160 / 0.88) 100%);
  }
}

/* ---- the other end --------------------------------------------------------
   The bottom of the same ranking, listed instead of left to be scrolled to.
   Rose marks a figure read from the terms; the neutral square marks a field we
   have not measured yet, so the two never read as the same kind of statement. */
.hardest{
  list-style:none; margin:0; padding:0; display:grid; gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft);
  border-radius:var(--r-card); overflow:hidden;
}
.hardest-item{
  background:var(--bg-elevated); padding:1.35rem 1.5rem;
  display:flex; align-items:flex-start; gap:1.1rem;
}
/* the mark is what the eye lands on first — a brand is recognised before its
   name is read, and this block is scanned rather than studied */
.hardest-item > .op-logo{
  width:56px; min-width:56px; max-width:56px; height:56px;
  aspect-ratio:1; flex:none; margin:0; padding:7px; align-self:center;
}
.hardest-body{ flex:1; min-width:0; display:grid; gap:.5rem; }
@media (max-width:560px){
  .hardest-item{ gap:.85rem; }
  .hardest-item > .op-logo{ width:44px; min-width:44px; max-width:44px; height:44px; padding:5px; }
}
/* Same source-order tie as .review-head > .op-logo: .op-logo.slot sets its own
   width/max-width below at equal specificity and would win by appearing later
   in the file, so an operator with no uploaded logo would blow out to 200px
   here too. */
.hardest-item > .op-logo.slot{ width:56px; min-width:56px; max-width:56px; height:56px; }
@media (max-width:560px){
  .hardest-item > .op-logo.slot{ width:44px; min-width:44px; max-width:44px; height:44px; }
}
.hardest-head{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.hardest-head h3{ margin:0; font-size:1.125rem; font-weight:600; }
.hardest-head a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--line); }
.hardest-head a:hover{ border-color:var(--text-3); }
.hardest-score{
  flex:none; font-family:var(--font-display); font-size:1.75rem;
  letter-spacing:-0.02em; color:var(--rose);
}
.hardest-score small{ font-size:var(--t-micro); color:var(--text-4); font-weight:600; margin-left:.15rem; }
.hardest-offer{ margin:0; font-size:var(--t-small); color:var(--text-3); }
.hardest-why{ list-style:none; margin:.25rem 0 0; padding:0; display:grid; gap:.4rem; }
.hardest-why li{
  position:relative; padding-left:1.35rem;
  font-size:var(--t-small); color:var(--text-2); line-height:1.55;
}
.hardest-why li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:8px; height:8px; border-radius:2px;
}
.hardest-why li[data-tone="hard"]::before{ background:var(--rose); }
.hardest-why li[data-tone="open"]::before{ background:var(--surface-3); }
/* ---- measurement state ----------------------------------------------------
   Coverage says how much of the scale was read for a brand; the licence line
   says a check is outstanding rather than failed. Both are deliberately quiet:
   they qualify a number, they are not a verdict of their own. */
.score-cov{
  display:block; margin-top:.15rem;
  font-family:var(--font-ui); font-size:var(--t-micro);
  color:var(--text-4); font-weight:600; letter-spacing:0;
}
td .score-cov{ font-weight:500; }
.lic-open{ color:var(--text-4); font-style:italic; }

.hardest-foot{ margin-top:1.1rem; font-size:var(--t-micro); line-height:1.6; max-width:80ch; }

@media (max-width:760px){ .proof{ grid-template-columns:1fr 1fr; } }

/* ============================================================
   METHODOLOGY RAIL
   ============================================================ */
.method{ border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); background:var(--bg-elevated); }
.method-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr); gap:clamp(1.5rem,1rem + 3vw,4rem); align-items:start; }
@media (max-width:900px){ .method-grid{ grid-template-columns:1fr; } }
.steps{ counter-reset:step; display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-card); overflow:hidden; }
.steps li{
  counter-increment:step; background:var(--bg); padding:1.1rem 1.3rem 1.1rem 3.6rem; position:relative;
  transition:background var(--dur-fast) linear;
}
.steps li:hover{ background:var(--surface); }
.steps li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute; left:1.3rem; top:1.15rem;
  font-family:var(--font-mono); font-size:var(--t-micro); color:var(--gold); letter-spacing:.06em;
}
.steps h3{ font-size:1rem; font-weight:600; letter-spacing:-0.012em; margin-bottom:.3rem; font-family:var(--font-ui); }
.steps p{ font-size:var(--t-small); color:var(--text-3); line-height:1.55; }

/* ============================================================
   TOOLBAR — sort / filter
   ============================================================ */
.toolbar{
  position:sticky; top:66px; z-index:60;
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  padding:.7rem .8rem;
  background:oklch(99% 0.002 265 / 0.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line-soft); border-radius:var(--r-card);
  margin-bottom:1.75rem;
}
.toolbar-label{ font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.13em; color:var(--text-4); font-weight:600; padding-inline:.35rem; }
.filters{ display:flex; gap:.4rem; flex-wrap:wrap; }
.filter{
  padding:.42rem .75rem; border-radius:999px; border:1px solid var(--line);
  background:transparent; color:var(--text-3);
  font-size:var(--t-micro); font-weight:600; letter-spacing:.01em; cursor:pointer;
  transition:color var(--dur-fast) linear, border-color var(--dur-fast) linear, background var(--dur-fast) linear;
}
.filter:hover{ color:var(--text); border-color:var(--surface-3); }
.filter[aria-pressed="true"]{ color:oklch(19% 0.03 80); background:var(--gold); border-color:var(--gold); }
.toolbar-right{ margin-left:auto; display:flex; align-items:center; gap:.55rem; }
select.sort{
  appearance:none; padding:.45rem 2rem .45rem .75rem; border-radius:8px;
  border:1px solid var(--line); background:var(--surface); color:var(--text);
  font-size:var(--t-micro); font-weight:600; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23888f9e' stroke-width='1.6'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .6rem center; background-size:12px;
}
.result-count{ font-size:var(--t-micro); color:var(--text-4); font-variant-numeric:tabular-nums; }
@media (max-width:640px){ .toolbar{ top:60px; } .toolbar-right{ width:100%; margin-left:0; } }

/* ============================================================
   OPERATOR CARDS — the core premium block
   ============================================================ */
.toplist{ display:grid; gap:.9rem; }

.op{
  display:grid;
  grid-template-columns:64px minmax(190px,1.05fr) minmax(0,1.5fr) minmax(210px,.85fr);
  gap:0;
  border:1px solid var(--line-soft); border-radius:var(--r-slab);
  background:linear-gradient(180deg, var(--surface) 0%, var(--bg-elevated) 62%);
  overflow:hidden; position:relative;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.op:hover{ border-color:var(--surface-3); box-shadow:var(--shadow-lift); transform:translateY(-2px); }
.op[hidden]{ display:none; }

/* rank rail */
.op-rank{
  background:var(--bg); border-right:1px solid var(--line-soft);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:1.25rem .5rem; gap:.75rem;
}
.op-rank b{
  font-family:var(--font-display); font-size:1.75rem; line-height:1; color:var(--text-3);
  letter-spacing:-0.03em;
}
.op[data-rank="1"] .op-rank b,
.op[data-rank="2"] .op-rank b,
.op[data-rank="3"] .op-rank b{ color:var(--gold); }
.op-rank .vline{ width:1px; flex:1; background:linear-gradient(180deg,var(--line),transparent); }

/* top-3 get a hairline gold edge, not a loud ribbon */
.op[data-rank="1"]{ border-color:oklch(84% 0.135 85 / 0.4); }
.op[data-rank="1"]::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, var(--gold), transparent 70%);
}

/* identity column */
.op-id{ padding:1.1rem 1.15rem; display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:.45rem; border-right:1px solid var(--line-soft); }
.op-id > div:has(> .op-name){ margin-bottom:.1rem; }

/* landscape plate — casino brand marks are wordmarks, so they
   need width, not a square. Fixed height keeps every row aligned
   however wide the individual logo turns out to be. */
/* every logo is baked onto the same 256x256 white tile, so light and dark
   marks read identically. Centred in its column and large enough to be the
   thing the eye lands on first. */
/* the logo fills the column rather than floating in it — it is the first
   thing the eye should land on, and the empty space around a fixed square
   was doing nothing */
.op-logo{
  width:100%; max-width:200px; aspect-ratio:1; height:auto; flex:none;
  margin-inline:auto;
  border:1px solid var(--line); border-radius:16px; padding:0;
  background:#fff;
  display:block; overflow:hidden;
}
.op-name{ font-size:.9375rem; font-weight:700; letter-spacing:-0.012em; line-height:1.2; }
/* the tags describe the offer, so they live with it rather than with the logo */
.op-meta{ display:flex; flex-wrap:wrap; gap:.25rem; margin:-.15rem 0 .1rem; }
.op-meta .chip{ padding:.15rem .38rem; font-size:9.5px; letter-spacing:0; border-radius:4px; }
.op-licence{ font-size:10px; color:var(--text-4); font-family:var(--font-mono); letter-spacing:0; line-height:1.3; }

/* score ring */
.score{ display:flex; align-items:center; gap:.6rem; margin-top:.15rem; }
.ring{ width:38px; height:38px; flex:none; transform:rotate(-90deg); }
.ring circle{ fill:none; stroke-width:4; stroke-linecap:round; }
.ring .track{ stroke:var(--surface-3); }
.ring .val{ stroke:var(--gold); transition:stroke-dashoffset var(--dur-slow) var(--ease); }
.score-txt b{ font-size:1rem; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
.score-txt small{ display:block; font-size:var(--t-micro); color:var(--text-4); letter-spacing:.06em; text-transform:uppercase; }

/* spec grid */
.op-specs{
  padding:1.25rem 1.35rem;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.9rem 1.4rem; align-content:start;
  border-right:1px solid var(--line-soft);
}
.spec dt{
  font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.12em;
  color:var(--text-4); font-weight:600; display:flex; align-items:center; gap:.35rem;
}
.spec dt svg{ width:12px; height:12px; opacity:.7; }
.spec dd{ margin:.22rem 0 0; font-size:.9375rem; font-weight:600; letter-spacing:-0.01em; }
.spec dd small{ font-weight:400; color:var(--text-3); font-size:var(--t-micro); }
.spec .good{ color:var(--mint); }
.spec .bad{ color:var(--rose); }
.spec .warn{ color:var(--amber); }

/* wagering bar — the differentiator, visualised */
.wager{ grid-column:1 / -1; }
.wager-track{
  position:relative; height:6px; border-radius:999px; background:var(--surface-3);
  margin-top:.5rem; overflow:hidden;
}
.wager-fill{
  position:absolute; inset:0; border-radius:999px;
  background:linear-gradient(90deg, var(--mint), var(--amber) 55%, var(--rose));
  transform-origin:0 50%; transform:scaleX(0);
  transition:transform var(--dur-slow) var(--ease);
}
.wager-scale{ display:flex; justify-content:space-between; font-size:10px; color:var(--text-4); margin-top:.3rem; font-variant-numeric:tabular-nums; }

/* offer column */
.op-offer{ padding:1.25rem 1.35rem; display:flex; flex-direction:column; gap:.75rem; background:var(--bg); }
.offer-label{ font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.13em; color:var(--text-4); font-weight:600; }
.offer-text{ font-family:var(--font-display); font-size:1.375rem; line-height:1.15; letter-spacing:-0.02em; }
.offer-text b{ color:var(--gold); font-weight:400; }
.op-offer .btn{ margin-top:auto; }
.op-links{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.op-links a{ font-size:var(--t-micro); color:var(--text-3); text-decoration:none; border-bottom:1px solid var(--line); padding-bottom:1px; }
.op-links a:hover{ color:var(--gold); border-color:var(--gold); }
.op-terms{ font-size:10px; color:var(--text-4); line-height:1.4; }


@media (max-width:1100px){
  .op{ grid-template-columns:56px minmax(0,1fr) minmax(0,1fr); }
  .op-offer{ grid-column:2 / -1; border-top:1px solid var(--line-soft); }
  .op-specs{ border-right:0; }
}
@media (max-width:720px){
  .op{ grid-template-columns:44px minmax(0,1fr); }
  .op-id{ border-right:0; border-bottom:1px solid var(--line-soft); }
  .op-specs{ grid-column:2 / -1; border-bottom:1px solid var(--line-soft); }
  .op-offer{ grid-column:2 / -1; }
  .op-rank{ padding:1rem .35rem; }
}
@media (max-width:440px){
  /* two spec columns start wrapping their labels at this width */
  .op-specs{ grid-template-columns:1fr; }
}


/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.tablewrap{
  border:1px solid var(--line-soft); border-radius:var(--r-card);
  overflow:auto; background:var(--bg-elevated);
  scrollbar-color:var(--surface-3) transparent; scrollbar-width:thin;
}
.tablewrap::-webkit-scrollbar{ height:10px; }
.tablewrap::-webkit-scrollbar-thumb{ background:var(--surface-3); border-radius:99px; border:3px solid var(--bg-elevated); }
table.grid{ width:100%; border-collapse:separate; border-spacing:0; font-size:var(--t-small); min-width:900px; }
table.grid caption{ text-align:left; padding:1rem 1.15rem; color:var(--text-3); font-size:var(--t-small); border-bottom:1px solid var(--line-soft); }
table.grid th, table.grid td{ padding:.85rem 1rem; text-align:left; border-bottom:1px solid var(--line-soft); vertical-align:top; }
table.grid thead th{
  position:sticky; top:0; z-index:2; background:var(--surface);
  font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.11em; color:var(--text-3);
  font-weight:600; white-space:nowrap;
}
table.grid tbody th{
  position:sticky; left:0; z-index:1; background:var(--bg-elevated);
  font-weight:600; white-space:nowrap; border-right:1px solid var(--line-soft);
}
table.grid tbody tr:hover th, table.grid tbody tr:hover td{ background:var(--surface); }
table.grid tbody tr:last-child th, table.grid tbody tr:last-child td{ border-bottom:0; }
.stars{ display:inline-flex; gap:2px; color:var(--gold); }
.stars svg{ width:12px; height:12px; }
.stars .off{ color:var(--surface-3); }

/* ============================================================
   BENTO — pick by need
   ============================================================ */
.bento{ display:grid; gap:.9rem; grid-template-columns:repeat(6,1fr); }
.bento article{
  grid-column:span 2;
  border:1px solid var(--line-soft); border-radius:var(--r-card);
  background:var(--bg-elevated); padding:1.4rem 1.45rem;
  display:flex; flex-direction:column; gap:.7rem;
  position:relative; overflow:hidden;
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.bento article:hover{ border-color:var(--surface-3); transform:translateY(-2px); }
/* three across, evenly — every card carries the same weight */
.bento h3{ font-family:var(--font-display); font-size:1.375rem; }
.bento p{ font-size:var(--t-small); color:var(--text-3); line-height:1.55; }
.bento .pick{
  margin-top:auto; padding-top:.9rem; border-top:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
}
.bento .pick b{ font-size:.9375rem; }
.bento .pick small{ display:block; font-size:var(--t-micro); color:var(--text-4); font-weight:400; }
.bento .glyph{ position:absolute; right:-14px; top:-14px; width:96px; height:96px; color:var(--gold); opacity:.09; }
@media (max-width:900px){
  .bento{ grid-template-columns:repeat(2,1fr); }
  .bento article, .bento article:nth-child(n){ grid-column:span 1; }
}
@media (max-width:560px){ .bento{ grid-template-columns:1fr; } }

/* ============================================================
   DEEP REVIEWS
   ============================================================ */
.review{
  border:1px solid var(--line-soft); border-radius:var(--r-slab);
  background:var(--bg-elevated); overflow:hidden; margin-bottom:1.1rem;
}
.review-head{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:1.25rem 1.5rem; border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,var(--surface),transparent);
}
/* the mark, then the rank and name, then the multiplier pushed to the far end.
   The heading takes the free space so the chip lands on the right edge however
   long the operator's name turns out to be. */
.review-head > .op-logo{
  width:46px; min-width:46px; max-width:46px; height:46px;
  aspect-ratio:1; flex:none; margin:0; padding:6px;
}
.review-head h3{ flex:1; min-width:0; }
@media (max-width:560px){
  .review-head > .op-logo{ width:38px; min-width:38px; max-width:38px; height:38px; padding:5px; }
}
/* .op-logo.slot (below) sets its own width/max-width at the same specificity
   as the rule above, and wins on source order alone: an operator with no
   uploaded logo got a plate up to 200px instead of the 46px every other
   review-head logo uses, which is what actually made that card look broken
   rather than just missing an image. One level more specific settles it. */
.review-head > .op-logo.slot{ width:46px; min-width:46px; max-width:46px; height:46px; }
@media (max-width:560px){
  .review-head > .op-logo.slot{ width:38px; min-width:38px; max-width:38px; height:38px; }
}
.review-head h3{ font-family:var(--font-display); font-size:var(--t-h3); }
.review-head .chip{ margin-left:auto; }
.review-body{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:0; }
@media (max-width:900px){ .review-body{ grid-template-columns:1fr; } }
.review-copy{ padding:1.5rem; border-right:1px solid var(--line-soft); }
.review-copy p{ font-size:var(--t-small); color:var(--text-2); line-height:1.68; }
.review-copy .pull{
  font-family:var(--font-display); font-size:1.25rem; line-height:1.35; color:var(--text);
  border-left:2px solid var(--gold); padding:.15rem 0 .15rem 1rem; margin:1.15rem 0;
}
.review-side{ padding:1.5rem; display:grid; gap:1.15rem; align-content:start; background:var(--bg); }
.pc h4{
  font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.13em; font-weight:600;
  margin-bottom:.55rem; display:flex; align-items:center; gap:.4rem;
}
.pc.pros h4{ color:var(--mint); }
.pc.cons h4{ color:var(--rose); }
.pc li{ font-size:var(--t-small); color:var(--text-2); padding-left:1.1rem; position:relative; margin-bottom:.35rem; line-height:1.5; }
.pc li::before{ position:absolute; left:0; top:0; font-weight:700; }
.pc.pros li::before{ content:"+"; color:var(--mint); }
.pc.cons li::before{ content:"–"; color:var(--rose); }
.paylist{ display:flex; flex-wrap:wrap; gap:.35rem; }

/* ============================================================
   PAYMENT METHOD TILES
   A logo file if one exists in img/pay/, otherwise the brand
   name set as type. Both fill the same tile, so the grid stays
   even whether or not the artwork has arrived.
   ============================================================ */
.payhead{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.payhead h3{
  font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.13em;
  font-weight:700; color:var(--text-3); font-family:var(--font-ui);
}
.payhead button{
  background:none; border:0; padding:0; cursor:pointer;
  font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.11em; font-weight:700;
  color:var(--text-4); border-bottom:1px solid var(--line);
}
.payhead button:hover{ color:var(--text); border-color:var(--text-3); }

.paygrid{
  display:grid; gap:.6rem;
  grid-template-columns:repeat(auto-fill, minmax(132px, 1fr));
}
.paygrid li{
  display:grid; place-items:stretch; text-align:center;
  min-height:70px;
  border:1px solid var(--line); border-radius:10px; background:var(--bg-elevated);
  transition:border-color var(--dur-fast) linear, transform var(--dur-fast) var(--ease);
}
.paygrid li:hover{ border-color:var(--surface-3); transform:translateY(-1px); }
.paygrid .paytile{
  display:grid; place-items:center; padding:.6rem .55rem;
  color:inherit; text-decoration:none; border-radius:inherit;
  width:100%; height:100%;
}
.paygrid .paytile:focus-visible{ outline:2px solid var(--accent, #4c9eff); outline-offset:2px; }
.paygrid img{ width:34px; height:34px; object-fit:contain; }
.paygrid b{
  font-size:.9375rem; font-weight:700; letter-spacing:-0.015em; line-height:1.2;
  color:var(--text); overflow-wrap:anywhere;
}
.paygrid span{ display:grid; justify-items:center; gap:.35rem; }
.paygrid small{ display:block; font-size:10px; font-weight:400; color:var(--text-4); margin-top:.2rem; letter-spacing:.04em; }
.paygrid li[hidden]{ display:none; }
@media (max-width:520px){
  .paygrid{ grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); }
  .paygrid li{ min-height:60px; }
  .paygrid b{ font-size:.8125rem; }
}

/* ============================================================
   WAGERING CALCULATOR
   ============================================================ */
.calc{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:0;
  border:1px solid var(--line); border-radius:var(--r-slab); overflow:hidden;
  background:var(--bg-elevated); box-shadow:var(--shadow-card);
}
@media (max-width:820px){ .calc{ grid-template-columns:1fr; } }
.calc-inputs{ padding:clamp(1.4rem,1rem + 1.4vw,2rem); display:grid; gap:1.35rem; align-content:start; border-right:1px solid var(--line-soft); }
.field label{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; font-size:var(--t-small); font-weight:600; margin-bottom:.6rem; }
.field label output{ font-family:var(--font-mono); font-size:.9375rem; color:var(--gold); font-variant-numeric:tabular-nums; }
/* the slider itself is 22px tall so it can actually be grabbed;
   the visible track is drawn 6px inside it, and the filled part
   of the track is driven by --pct, set from the calculator. */
input[type=range]{
  -webkit-appearance:none; appearance:none;
  width:100%; height:22px; margin:0;
  background:transparent; cursor:pointer; outline-offset:4px;
  --pct:50%;
}
input[type=range]::-webkit-slider-runnable-track{
  height:6px; border-radius:99px;
  background:linear-gradient(90deg, var(--gold-deep) 0 var(--pct), var(--surface-3) var(--pct) 100%);
}
input[type=range]::-moz-range-track{
  height:6px; border-radius:99px;
  background:linear-gradient(90deg, var(--gold-deep) 0 var(--pct), var(--surface-3) var(--pct) 100%);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; margin-top:-6px;
  width:18px; height:18px; border-radius:50%;
  background:var(--bg-elevated); border:2px solid var(--text);
  box-shadow:var(--shadow-card); cursor:grab;
  transition:transform var(--dur-fast) var(--ease);
}
input[type=range]::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background:var(--bg-elevated); border:2px solid var(--text);
  box-shadow:var(--shadow-card); cursor:grab;
}
input[type=range]:hover::-webkit-slider-thumb{ transform:scale(1.12); }
input[type=range]:active::-webkit-slider-thumb{ cursor:grabbing; transform:scale(1.02); }
.calc-out{ padding:clamp(1.4rem,1rem + 1.4vw,2rem); background:var(--bg); display:grid; gap:1rem; align-content:center; }
.calc-headline{ font-family:var(--font-display); font-size:clamp(1.75rem,1.15rem + 2.2vw,2.75rem); line-height:1.05; letter-spacing:-0.025em; }
.calc-headline span{ color:var(--gold); }
.calc-note{ font-size:var(--t-small); color:var(--text-3); line-height:1.6; }
.verdict{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .8rem; border-radius:10px; font-size:var(--t-small); font-weight:600; width:fit-content; }
/* the sentence says which of the three it is — no colour coding needed */
.verdict[data-tone]{ background:var(--surface-2); color:var(--text); border:1px solid var(--line); }

/* ============================================================
   CHECKLIST / SAFETY
   ============================================================ */
.checks{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-card); overflow:hidden; }
.checks li{ background:var(--bg-elevated); padding:1.25rem 1.35rem; }
.checks h3{ font-size:1rem; font-weight:600; font-family:var(--font-ui); letter-spacing:-0.012em; margin-bottom:.4rem; display:flex; gap:.5rem; align-items:center; }
.checks h3 svg{ width:16px; height:16px; color:var(--mint); flex:none; }
.checks p{ font-size:var(--t-small); color:var(--text-3); line-height:1.6; }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ border:1px solid var(--line-soft); border-radius:var(--r-card); overflow:hidden; background:var(--bg-elevated); }
.faq details{ border-bottom:1px solid var(--line-soft); }
.faq details:last-child{ border-bottom:0; }
.faq summary{
  cursor:pointer; list-style:none; padding:1.05rem 3rem 1.05rem 1.35rem;
  font-size:.9375rem; font-weight:600; letter-spacing:-0.012em; position:relative;
  transition:background var(--dur-fast) linear, color var(--dur-fast) linear;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ background:var(--surface); }
.faq summary::after{
  content:""; position:absolute; right:1.35rem; top:1.35rem;
  width:10px; height:10px; border-right:1.5px solid var(--text-3); border-bottom:1.5px solid var(--text-3);
  transform:rotate(45deg); transition:transform var(--dur) var(--ease), border-color var(--dur-fast) linear;
}
.faq details[open] summary{ color:var(--gold); }
.faq details[open] summary::after{ transform:rotate(-135deg) translate(-2px,-2px); border-color:var(--gold); }
.faq .answer{ padding:0 1.35rem 1.2rem; font-size:var(--t-small); color:var(--text-2); line-height:1.7; max-width:78ch; }

/* ============================================================
   AUTHOR + RESPONSIBLE GAMBLING + FOOTER
   ============================================================ */
.author{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.5rem;
  border:1px solid var(--line-soft); border-radius:var(--r-slab);
  background:linear-gradient(180deg,var(--surface),var(--bg-elevated));
  padding:clamp(1.4rem,1rem + 1.4vw,2.1rem);
}
@media (max-width:640px){ .author{ grid-template-columns:1fr; } }
.avatar{
  width:104px; height:104px; border-radius:50%; flex:none;
  object-fit:cover; background:var(--surface-2);
  border:1px solid var(--line);
  box-shadow:0 8px 24px oklch(30% 0.02 265 / .12);
}
.author h3{ font-family:var(--font-display); font-size:var(--t-h3); margin-bottom:.15rem; }
.author .role{ font-size:var(--t-small); color:var(--gold); font-weight:600; margin-bottom:.85rem; }
.author p{ font-size:var(--t-small); color:var(--text-2); line-height:1.68; max-width:70ch; }
.author-facts{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; }

.rg{
  border:1px solid oklch(71% 0.170 20 / 0.3); border-radius:var(--r-slab);
  background:linear-gradient(180deg, oklch(71% 0.170 20 / 0.07), transparent 70%);
  padding:clamp(1.4rem,1rem + 1.4vw,2.1rem);
}
.rg h2{ font-family:var(--font-display); font-size:var(--t-h3); margin-bottom:.7rem; }
.rg p{ font-size:var(--t-small); color:var(--text-2); line-height:1.68; max-width:80ch; }
.helplines{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.7rem; margin-top:1.35rem; }
.helplines li{ border:1px solid var(--line); border-radius:12px; padding:.85rem 1rem; background:var(--bg); }
.helplines b{ display:block; font-size:.9375rem; }
.helplines small{ font-size:var(--t-micro); color:var(--text-3); }

footer{ border-top:1px solid var(--line-soft); background:var(--bg-elevated); margin-top:var(--band); }
.foot-grid{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:2rem 1.5rem; padding-block:clamp(2.5rem,2rem + 2vw,4rem);
  align-items:start;
}
@media (max-width:1080px){ .foot-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:720px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .foot-grid{ grid-template-columns:1fr; } }
.foot-grid h4{ font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.13em; color:var(--text-4); font-weight:600; margin-bottom:.85rem; }
.foot-grid li{ margin-bottom:.5rem; }
.foot-grid a{ font-size:var(--t-small); color:var(--text-3); text-decoration:none; }
.foot-grid a:hover{ color:var(--gold); }
.foot-note{ font-size:var(--t-small); color:var(--text-3); line-height:1.65; max-width:44ch; }
.foot-util{ display:flex; flex-wrap:wrap; gap:.35rem 1.1rem; }
.foot-util a{ color:var(--text-3); text-decoration:none; }
.foot-util a:hover{ color:var(--text); }
.foot-bar{ border-top:1px solid var(--line-soft); padding-block:1.25rem; display:flex; gap:1rem; flex-wrap:wrap; align-items:center; justify-content:space-between; font-size:var(--t-micro); color:var(--text-4); }
.age{
  width:34px; height:34px; border-radius:50%; border:1.5px solid var(--rose); color:var(--rose);
  display:grid; place-items:center; font-size:.75rem; font-weight:700; flex:none;
}

/* ============================================================
   TOC rail + reveal
   ============================================================ */
.toc{ position:sticky; top:96px; align-self:start; }
.toc h4{ font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.13em; color:var(--text-4); font-weight:600; margin-bottom:.9rem; }
.toc a{
  display:block; padding:.4rem 0 .4rem .9rem; font-size:var(--t-small); color:var(--text-3);
  text-decoration:none; border-left:1px solid var(--line);
  transition:color var(--dur-fast) linear, border-color var(--dur-fast) linear;
}
.toc a:hover{ color:var(--text); }
.toc a[aria-current="true"]{ color:var(--gold); border-left-color:var(--gold); }
@media (max-width:900px){
  /* minmax(0,1fr), not 1fr: the wide comparison tables inside would
     otherwise push the column out to their own min-width */
  .guides-grid{ grid-template-columns:minmax(0,1fr) !important; }
  .toc{ position:static; display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; }
  .toc h4{ width:100%; margin-bottom:.5rem; }
  .toc a{ border-left:0; border:1px solid var(--line); border-radius:999px; padding:.35rem .75rem; }
  .toc a[aria-current="true"]{ border-color:var(--gold); }
}

.reveal{ opacity:0; transform:translateY(18px); transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* dialog */

/* ============================================================
   CONTENT SLOTS
   Anything not yet supplied — a casino logo, a review
   screenshot, a block of copy — renders as a labelled dashed
   box carrying the exact size the asset must be. Drop the file
   into ASSETS and the slot is replaced by the real thing.
   ============================================================ */
.slot{
  display:grid; place-content:center; justify-items:center; gap:.25rem;
  text-align:center; padding:.7rem .55rem;
  border:1px solid var(--line); border-radius:10px;
  background:var(--surface-2);
  color:var(--text-3); line-height:1.25;
}
.slot b{
  font-size:.9375rem; font-weight:700; letter-spacing:-0.01em;
  color:var(--text-2); overflow-wrap:anywhere;
}
.slot small{
  font-size:10px; font-family:var(--font-mono); letter-spacing:0; color:var(--text-4);
}
.slot-shot{ aspect-ratio:16/9; width:100%; }
.slot-square{ aspect-ratio:1; }

/* a value that has not been measured yet */
.tbd{
  display:inline-block; min-width:1.6em; text-align:center;
  color:var(--text-4); background:var(--surface-2);
  border-radius:5px; padding:0 .3em; font-weight:400;
}
body[data-slots="on"] .tbd{ box-shadow:inset 0 -2px 0 var(--line); }
figure.shot{ margin:0 0 1.15rem; }
figure.shot img{ width:100%; height:auto; border-radius:10px; border:1px solid var(--line-soft); }
figure.shot figcaption{ font-size:var(--t-micro); color:var(--text-4); margin-top:.5rem; }

/* op logo becomes the slot when no file is mapped */
/* the img box fills the padded plate exactly and object-fit
   letterboxes the bitmap inside it — so a wide wordmark, a square
   mark or anything between all land centred and uncropped */
.op-logo img{ display:block; width:100%; height:100%; object-fit:contain; object-position:center; }
.op-logo.slot{ width:100%; max-width:200px; aspect-ratio:1; height:auto; margin-inline:auto;
  padding:.6rem .5rem; gap:.2rem; background:#fff; }
.op-logo.slot b{ font-size:.8125rem; line-height:1.2; }
.op-logo.slot small{ display:none; }

/* demo copy: text that ships as filler and must be replaced */
body[data-slots="on"] [data-copy="demo"]{
  box-shadow:inset 2px 0 0 var(--line);
  padding-left:.55rem; margin-left:-.55rem;
}
body[data-slots="off"] .slot{ opacity:.35; }

.tmplbar{
  position:fixed; left:1rem; bottom:1rem; z-index:86;
  display:flex; align-items:center; gap:.5rem;
  padding:.45rem .55rem; border-radius:12px;
  border:1px solid var(--line); background:oklch(99.5% 0.001 265 / .92);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:var(--shadow-card); font-size:var(--t-micro);
}
.tmplbar span{ color:var(--text-4); letter-spacing:.1em; text-transform:uppercase; font-weight:700; font-size:10px; }
@media (max-width:720px){ .tmplbar{ left:.6rem; bottom:.6rem; } }

/* language picker */
.langpick{
  appearance:none; padding:.42rem 1.8rem .42rem .6rem; border-radius:8px;
  /* Ограничение ширины: самый длинный пункт списка не должен выталкивать
     селектор за правый край шапки на узких десктопах и планшетах. */
  max-width:min(160px, 38vw); text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
  border:1px solid var(--line); background:transparent; color:var(--text-2);
  font-size:var(--t-micro); font-weight:600; cursor:pointer; flex:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%238a90a0' stroke-width='1.6'%3E%3Cpath d='M3 5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .55rem center; background-size:11px;
}
.langpick:hover{ color:var(--text); border-color:var(--surface-3); }

/* ============================================================
   ONE INK
   Letters are never tinted. Emphasis comes from weight, size
   and position; colour is carried by surfaces, bars, borders
   and control fills only.
   ============================================================ */
.display em,
.hero h1 em,
.hero h1 .flow,
.brand-name span,
.claim-num,
.claim-split .lo,
.claim-split .hi,
.offer-text b,
.calc-headline span,
.field label output,
.spec .good, .spec .bad, .spec .warn,
.op[data-rank="1"] .op-rank b,
.op[data-rank="2"] .op-rank b,
.op[data-rank="3"] .op-rank b,
.faq details[open] summary,
.toc a[aria-current="true"],
.author .role,
.age{
  color:var(--text);
}
.display em, .hero h1 em{ font-style:normal; }

.pc.pros h4, .pc.cons h4,
.pc.pros li::before, .pc.cons li::before,
.steps li::before,
.checks h3 svg{ color:var(--text-3); }

.chip-gold, .chip-mint, .chip-ice, .chip-rose{ color:var(--text-2); }

.verdict[data-tone]{ color:var(--text); }

.op-links a:hover, .foot-grid a:hover{ color:var(--text); border-color:var(--text-3); }
.mainnav a:hover{ color:var(--text); }

/* the rating stars and the meters stay coloured — they are
   graphics carrying a value, not words */
.stars{ color:var(--gold-deep); }
.age{ border-color:var(--text-3); }

/* ============================================================
   MULTI-PAGE CHROME
   Dropdown navigation, breadcrumbs, page headers, fact boxes
   and the related-page grid used by every generated page.
   ============================================================ */
.navlist{ display:flex; align-items:center; gap:.15rem; }
.navlist > li{ position:relative; }
.navlist a, .navbtn{
  display:inline-flex; align-items:center; gap:.25rem;
  padding:.45rem .5rem; border-radius:8px; border:0; background:none; cursor:pointer; white-space:nowrap;
  font-size:var(--t-small); font-weight:500; color:var(--text-3); text-decoration:none;
  transition:color var(--dur-fast) linear, background var(--dur-fast) linear;
}
.navlist a:hover, .navbtn:hover{ color:var(--text); background:var(--surface); }
.navbtn::after{
  content:""; width:6px; height:6px; margin-left:.15rem;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);
  transition:transform var(--dur) var(--ease);
}
.hasmenu[data-open="true"] .navbtn{ color:var(--text); background:var(--surface); }
.hasmenu[data-open="true"] .navbtn::after{ transform:rotate(-135deg) translate(-2px,-2px); }

.navmenu{
  position:absolute; top:calc(100% + .5rem); left:0; z-index:70;
  min-width:230px; padding:.7rem; border-radius:14px;
  border:1px solid var(--line); background:var(--bg-elevated);
  box-shadow:var(--shadow-lift);
  display:none;   /* a hidden-but-laid-out menu still stretches the document */
}
.hasmenu[data-open="true"] .navmenu{ display:block; animation:menuin var(--dur) var(--ease); }
@keyframes menuin{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.navmenu ul{ display:grid; gap:1px 1.25rem; }
/* never wider than the viewport, and the right-hand menus open leftwards */
.navmenu{ max-width:calc(100vw - 2rem); }
.navmenu[data-cols="2"]{ width:min(400px, calc(100vw - 2rem)); }
.navmenu[data-cols="2"] ul{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.navmenu[data-cols="3"]{ width:min(620px, calc(100vw - 2rem)); }
.navmenu{ left:auto; right:0; }
.navmenu[data-cols="3"] ul{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.navmenu a{ display:block; width:100%; padding:.42rem .55rem; border-radius:7px; }


.burger{ display:none; width:38px; height:38px; border:1px solid var(--line); border-radius:9px; background:none; cursor:pointer; padding:0; }
.burger span{ display:block; width:16px; height:1.5px; background:var(--text); margin:3px auto; transition:transform var(--dur) var(--ease), opacity var(--dur) linear; }
@media (max-width:1340px){
  .burger{ display:block; }
  .mainnav{ display:none; }
  body[data-nav="open"] .mainnav{
    display:block; position:fixed; inset:104px 0 auto 0; z-index:75;
    background:var(--bg-elevated); border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lift); padding:1rem var(--gutter) 1.5rem; max-height:70vh; overflow:auto;
  }
  body[data-nav="open"] .navlist{ flex-direction:column; align-items:stretch; gap:.2rem; }
  body[data-nav="open"] .hasmenu .navmenu{
    position:static; display:block; animation:none;
    box-shadow:none; border:0; padding:.2rem 0 .4rem .8rem; min-width:0;
  }
  body[data-nav="open"] .navmenu[data-cols="3"]{ min-width:0; }
  body[data-nav="open"] .navmenu[data-cols="3"] ul{ grid-template-columns:1fr 1fr; }
}

.crumbs{ padding:1.35rem 0 .35rem; font-size:var(--t-micro); color:var(--text-4); display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; }
.crumbs a{ color:var(--text-3); text-decoration:none; border-bottom:1px solid var(--line); }
.crumbs a:hover{ color:var(--text); border-color:var(--text-3); }

.pagehead{ position:relative; max-width:64ch; padding:1rem 0 2rem; }
/* An associative product shot for the space a 64ch text column leaves beside
   it on a page with no dark band (ct_pagehead_art_html). Positioned off the
   header's own right edge rather than the shell's, so it needs no fixed pixel
   width to match against — it just starts wherever the text column ends.
   Hidden below 900px: at that width the column already fills the shell, so
   there is nothing beside it to hold the image without covering text. */
.pagehead-art{
  position:absolute; left:100%; top:50%; transform:translateY(-50%);
  margin-left:clamp(1rem,3vw,3rem); pointer-events:none;
}
/* The six groups are not all the same shape — a phone standing upright is
   portrait, a fanned stack of cards is landscape — so both axes are capped
   and object-fit picks whichever one actually binds for that image, instead
   of width:auto letting a portrait shot tower over the header. */
.pagehead-art img{ display:block; max-width:min(28vw,420px); max-height:320px; width:auto; height:auto; object-fit:contain; }
@media (max-width:900px){ .pagehead-art{ display:none; } }
.pagehead h1{ font-size:var(--t-h1); margin-bottom:.9rem; text-wrap:balance; }

.pagetoc{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:2rem; }
.pagetoc a{
  padding:.4rem .8rem; border-radius:999px; border:1px solid var(--line);
  font-size:var(--t-micro); font-weight:600; color:var(--text-3); text-decoration:none;
}
.pagetoc a:hover{ color:var(--text); border-color:var(--surface-3); }

.factbox{
  border:1px solid var(--line); border-radius:var(--r-slab);
  background:var(--bg-elevated); padding:clamp(1.2rem, 1rem + 1vw, 1.9rem);
  box-shadow:var(--shadow-card); margin-bottom:1rem;
}
.factbox h2{ font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.13em; color:var(--text-4); font-weight:700; font-family:var(--font-ui); margin-bottom:1rem; }
.factbox dl{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:12px; overflow:hidden; }
.factbox dl > div{ background:var(--bg-elevated); padding:.85rem 1rem; }
.factbox dt{ font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.11em; color:var(--text-4); font-weight:600; }
.factbox dd{ margin:.3rem 0 0; font-size:.9375rem; font-weight:600; }
.factnote{ font-size:var(--t-micro); color:var(--text-4); margin-top:.9rem; line-height:1.55; }

.relgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.7rem; }
.relcard{
  display:block; padding:.9rem 1rem; border:1px solid var(--line-soft); border-radius:12px;
  background:var(--bg-elevated); text-decoration:none;
  transition:border-color var(--dur-fast) linear, transform var(--dur-fast) var(--ease);
}
.relcard:hover{ border-color:var(--surface-3); transform:translateY(-1px); }
.relcard b{ display:block; font-size:.9375rem; font-weight:600; letter-spacing:-0.012em; }
/* the URL used to be printed under each title in a mono face, which reads as
   debug output rather than as a link a person would follow; the card is one
   line now, so the grid stops going ragged on the longer names */
.relcard{ display:flex; align-items:center; gap:.6rem; min-height:0; }
.relcard-ic{
  flex:none; width:30px; height:30px; border-radius:8px;
  display:grid; place-items:center;
  background:var(--gold-wash); color:var(--gold-deep);
  border:1px solid oklch(83% 0.145 82 / 0.32);
}
.relcard-ic svg{ display:block; width:16px; height:16px; }
/* a payment page brings the brand's own mark, which carries its own colour and
   must not be tinted by the gold chip behind it */
.relcard-ic:has(img), .hubtile-ic:has(img){ background:var(--surface); border-color:var(--line); }
.relcard-ic img{ display:block; width:20px; height:20px; object-fit:contain; }
.hubtile-ic img{ display:block; width:44px; height:44px; object-fit:contain; }

main > .shell > section > h2.display{ font-size:var(--t-h2); margin-bottom:1rem; }
main > .shell > section p{ max-width:78ch; color:var(--text-2); }

/* An editorial section's heading (ct_editorial_section_html): a check mark ahead
   of the text, so a run of these sections reads as verified points rather than
   one wall of copy. em-sized against the heading's own clamp(), so it scales
   with the text at every width instead of needing its own breakpoints. */
.ed-sec-h{ display:flex; align-items:center; gap:.5rem; }
.ed-sec-ic{ flex:none; display:grid; place-items:center; color:var(--gold-deep); }
.ed-sec-ic svg{ width:0.7em; height:0.7em; display:block; }

/* screenshot inside an operator row — it belongs to that operator, not the page */
.opshot{ margin:0 0 .7rem; border-radius:8px; overflow:hidden; border:1px solid var(--line-soft); }
.opshot img{ width:100%; height:auto; display:block; }

/* ============================================================
   AGE AND COOKIE CONSENT
   Anchored to the bottom so it never covers the ranking, and
   hidden entirely once a choice has been stored.
   ============================================================ */
.consent{
  position:fixed; inset:auto 0 0 0; z-index:95;
  background:oklch(99.5% 0.001 265 / .97);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 30px oklch(30% 0.02 265 / .10);
}
.consent[hidden]{ display:none; }
.consent-inner{
  width:min(100% - var(--gutter)*2, var(--shell)); margin-inline:auto;
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
  padding:1rem 0;
}
.consent p{
  flex:1; min-width:280px; margin:0;
  font-size:var(--t-small); line-height:1.55; color:var(--text-2); max-width:80ch;
}
.consent p strong{ color:var(--text); }
.consent a{ color:var(--text); text-decoration:underline; text-underline-offset:2px; }
.consent-actions{ display:flex; gap:.5rem; flex-wrap:wrap; }
@media (max-width:640px){
  .consent-inner{ padding:.9rem 0; gap:.8rem; }
  .consent-actions .btn{ flex:1; }
}

/* ============================================================
   Single brand-review pages (/casinos/<slug>/) + the /casinos/ index.
   Added by the brand-review layer. .factbox/.pc were already defined;
   .brand-head, .pros-cons, .chip-list and the index grid are new.
   ============================================================ */
.brand-head{
  display:flex; gap:clamp(1rem,.6rem + 2vw,2rem); align-items:center;
  flex-wrap:wrap; margin-bottom:1.5rem;
}
.brand-head > .op-logo{
  width:112px; height:112px; min-width:112px; max-width:112px; flex:0 0 112px; aspect-ratio:1;
  box-sizing:border-box; padding:10px; display:grid; place-items:center; overflow:hidden;
}
.brand-head > .op-logo img{ width:100%; height:100%; max-width:100%; object-fit:contain; object-position:center; }
/* the text column, NOT the logo (both are divs — the logo must stay square) */
.brand-head > div:not(.op-logo){ flex:1; min-width:min(100%,320px); }
.brand-head h1{ margin:0 0 .5rem; }
.brand-head .lead{ margin:0 0 1rem; }

.pros-cons{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1rem;
}
.pros-cons .pc{
  border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--bg-elevated); padding:1.25rem 1.35rem;
  box-shadow:var(--shadow-card);
}
.pros-cons .pc h3{
  font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.11em;
  font-weight:700; font-family:var(--font-ui); margin:0 0 .8rem;
}
.pros-cons .pc.pros h3{ color:var(--mint); }
.pros-cons .pc.cons h3{ color:var(--rose); }
.pros-cons .pc ul{ list-style:none; margin:0; padding:0; }

/* GPT review prose: intro, per-aspect "take" callout, deposit steps.
   Sizing/colour ride the same tokens as the rest of the review body. */
.review-intro > p:first-child{ margin-top:0; }
.mbc-aspect .section-take{
  margin:0 0 1.2rem; padding:.85rem 1.15rem;
  border-left:3px solid var(--gold); border-radius:0 var(--r-card) var(--r-card) 0;
  background:var(--surface); font-size:.95rem; font-weight:500;
  color:var(--text-2); line-height:1.6; max-width:78ch;
}
.mbc-aspect h3{ font-size:var(--t-h3); margin:1.5rem 0 .6rem; }
ol.deposit-steps{ margin:.6rem 0 0; padding-left:1.3rem; }
ol.deposit-steps li{ margin-bottom:.55rem; color:var(--text-2); line-height:1.6; max-width:76ch; }

.chip-list{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.45rem;
}
.chip-list li{
  display:inline-flex; align-items:center;
  padding:.34rem .7rem; border-radius:999px;
  font-size:var(--t-micro); font-weight:600; letter-spacing:.02em;
  border:1px solid var(--line); color:var(--text-2); background:var(--surface);
}

/* /casinos/ index grid */
.brandgrid{
  list-style:none; margin:1.5rem 0 0; padding:0;
  display:flex; flex-direction:column; gap:.6rem;
}
.brandgrid > li{ width:100%; }
.brandcard{ width:100%; }
.brandcard{
  display:flex; align-items:center; gap:.85rem;
  border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--bg-elevated); padding:.9rem 1rem;
  box-shadow:var(--shadow-card); text-decoration:none; color:inherit;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.brandcard:hover{ border-color:var(--surface-3); transform:translateY(-2px); box-shadow:var(--shadow-lift); }
.brandcard-rank{ font-size:var(--t-micro); color:var(--text-4); font-weight:700; min-width:1.6em; text-align:right; }
.brandcard .op-logo{ width:52px; height:52px; flex:none; }
.brandcard .op-logo img{ width:52px; height:52px; object-fit:contain; }
.brandcard .op-logo.slot{ font-size:9px; padding:.3rem; }
.brandcard-body{ flex:1; min-width:0; display:grid; gap:.2rem; }
.brandcard-name{ font-size:.95rem; font-weight:700; letter-spacing:-0.012em; }
.brandcard-bonus{ font-size:var(--t-small); color:var(--text-2); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.brandcard-meta{ display:flex; gap:1rem; font-size:var(--t-micro); color:var(--text-4); margin-top:.15rem; }

/* ---- index card: the right half was empty ---------------------------------
   The row carried five figures and a "read review" line in its left third and
   nothing at all in the rest of it. The space now holds the number this whole
   site is built on — bonus times multiplier, the turnover the offer actually
   costs — and the operator link, which previously only existed on the review
   page a click further in.

   The card used to be one big anchor, so a second link could not live inside
   it. It is an <article> now: the review link stretches over the whole card
   through its own ::after, and the affiliate button sits above that layer. */
/* ---- slot grid ------------------------------------------------------------
   Covers do the work here: a slot is recognised by its art long before its
   name is read, which is the one place on this site where a picture carries
   more than the figures beside it. Everything else stays quiet so the row of
   thumbnails is the only loud thing on the page. */
.slotfacets{ display:flex; flex-wrap:wrap; gap:.4rem; margin:1.25rem 0 .5rem; }
.slotfacet{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .8rem; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:var(--bg-elevated); color:var(--text-2);
  font-family:var(--font-ui); font-size:var(--t-small); font-weight:600;
  transition:border-color var(--dur-fast) linear, color var(--dur-fast) linear,
             background var(--dur-fast) linear;
}
.slotfacet small{ font-size:var(--t-micro); color:var(--text-4); font-variant-numeric:tabular-nums; }
.slotfacet:hover{ border-color:var(--surface-3); color:var(--text); }
.slotfacet.is-on{ background:var(--gold); border-color:transparent; color:oklch(19% 0.03 80); }
.slotfacet.is-on small{ color:oklch(19% 0.03 80 / .65); }
.slotcount{ font-size:var(--t-micro); margin:.35rem 0 1rem; }

.slotgrid{
  list-style:none; margin:0; padding:0; display:grid; gap:.9rem;
  grid-template-columns:repeat(auto-fill, minmax(178px, 1fr));
}
.slotcard{
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--line); border-radius:var(--r-card);
  background:var(--bg-elevated); box-shadow:var(--shadow-card);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.slotcard:hover{ transform:translateY(-2px); box-shadow:0 10px 26px oklch(30% 0.02 265 / 0.10); }
/* .slotcard declares its own display, which beats the browser's [hidden] rule —
   without this the facets set the attribute and the card stays on screen.
   Same fix already used by .op[hidden] and .paygrid li[hidden] above. */
.slotcard[hidden]{ display:none; }
/* The whole card is the outgoing click, so the link fills it and inherits type. */
.slotcard-go{ display:flex; flex-direction:column; height:100%; color:inherit; text-decoration:none; }
.slotcard-go:focus-visible{ outline:2px solid var(--accent, currentColor); outline-offset:2px; }
.slotcard-art{ display:block; aspect-ratio:3 / 2; background:var(--surface-2); }
.slotcard-art img{ display:block; width:100%; height:100%; object-fit:cover; }
.slotcard-body{ display:grid; gap:.15rem; padding:.7rem .8rem .8rem; }
.slotcard-name{ font-size:var(--t-small); font-weight:700; letter-spacing:-0.01em; line-height:1.25; }
.slotcard-prov{ font-size:var(--t-micro); color:var(--text-4); }
.slotcard-meta{
  display:flex; flex-wrap:wrap; gap:.15rem .7rem; margin-top:.3rem;
  font-size:var(--t-micro); color:var(--text-4);
}
.slotcard-meta b{ color:var(--text-2); font-variant-numeric:tabular-nums; }
.slotcard-tags{ display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.45rem; }
.slotcard-tags i{
  font-style:normal; font-size:var(--t-micro); font-weight:600;
  padding:.16rem .45rem; border-radius:6px;
  background:var(--gold-wash); color:var(--gold-deep);
}
.slotnote{ font-size:var(--t-micro); line-height:1.6; max-width:80ch; margin-top:1.4rem; }

/* ---- section banner -------------------------------------------------------
   A dark belt behind the breadcrumb and the page head of a section, the same
   treatment the homepage hero uses. It runs the full width of the viewport
   rather than the content column, so the negative margin and the matching
   padding are calculated from the shell's own half-width.
   The gradient is not decoration: the plate is cropped differently at every
   width, and without it the headline could land on a lit part of the image. */
.hubband{
  position:relative;
  margin-inline:calc(50% - 50vw);
  margin-bottom:2rem;
  padding-inline:calc(50vw - 50% + var(--gutter));
  padding-bottom:2.4rem;
  background-color:oklch(16% 0.020 160);
  background-image:var(--hub-jpg);
  background-image:image-set(var(--hub-webp) type("image/webp"), var(--hub-jpg) type("image/jpeg"));
  background-size:cover; background-position:right center; background-repeat:no-repeat;
}
.hubband::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(100deg,
    oklch(12% 0.015 160 / 0.94) 0%,
    oklch(12% 0.015 160 / 0.84) 34%,
    oklch(12% 0.015 160 / 0.40) 64%,
    oklch(12% 0.015 160 / 0.16) 100%);
}
.hubband > *{ position:relative; z-index:1; }

.hubband .crumbs{ color:oklch(72% 0.012 160); }
.hubband .crumbs a{ color:oklch(82% 0.012 160); border-bottom-color:oklch(100% 0 0 / 0.22); }
.hubband .crumbs a:hover{ color:oklch(97% 0 0); border-bottom-color:oklch(100% 0 0 / 0.45); }
.hubband .pagehead{ max-width:64ch; }
.hubband .pagehead h1{ color:oklch(99% 0 0); }
.hubband .pagehead .lead{ color:oklch(82% 0.010 160); }

@media (max-width:900px){
  /* the crop is tight here, so the wash stops leaning and covers the full width */
  .hubband{ background-position:72% center; }
  .hubband::before{
    background:linear-gradient(180deg,
      oklch(12% 0.015 160 / 0.90) 0%,
      oklch(12% 0.015 160 / 0.82) 55%,
      oklch(12% 0.015 160 / 0.90) 100%);
  }
}

/* ---- payment marks --------------------------------------------------------
   The files in assets/pay are flat silhouettes in one ink, so the mark is
   painted with a mask: the file gives the shape, the stylesheet gives the
   colour. That is what lets hover hand each brand its own colour without a
   second, coloured copy of every file to keep in step with the first.
   A silhouette holds one colour, so Mastercard warms to its red rather than to
   its two circles — a tint, not a reproduction of a logo we have no kit for. */
.paymark{
  display:block; width:100%; height:100%;
  background-color:var(--ink, oklch(30% 0.012 265));
  -webkit-mask:var(--mark) center / contain no-repeat;
          mask:var(--mark) center / contain no-repeat;
  transition:background-color var(--dur) var(--ease);
}
.paytile:hover .paymark,
.relcard:hover .paymark,
.hubtile:hover .paymark,
.pay-chip:hover .paymark{ background-color:var(--brand, var(--gold-deep)); }

/* The "More in this section" tile is a dedicated payment-method card, not a
   passing mention — the brand colour reads as identification there, not as
   decoration, so it shows at rest rather than waiting for a hover nobody on
   a touch screen will ever trigger. */
.hubtile-ic .paymark{ background-color:var(--brand, var(--gold-deep)); }

/* sizes, since the mark no longer carries intrinsic dimensions of its own */
.paytile .paymark{ width:44px; height:26px; margin-inline:auto; }
.relcard-ic .paymark{ width:20px; height:20px; }
.hubtile-ic .paymark{ width:44px; height:44px; }
.paymark.pay-ico{ width:24px; height:24px; }

@media (prefers-reduced-motion:reduce){ .paymark{ transition:none; } }

/* ---- hub tiles ------------------------------------------------------------
   The section landings were borrowing .paygrid from the payment methods, which
   is why sixty-one links rendered as bare text boxes. Their own grid now: a
   mark, a label, and a left rail that only colours on hover, so a wall of
   tiles has something to scan by other than reading every word.
   Marks repeat across related pages on purpose — see inc/hub-icons.php. */
.hubgrid{
  list-style:none; margin:1.5rem 0 0; padding:0;
  display:grid; gap:.6rem;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
}
.hubtile{
  position:relative; height:100%;
  display:flex; align-items:center; gap:.7rem;
  padding:.85rem .95rem; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:12px; background:var(--bg-elevated);
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.hubtile::before{
  content:""; position:absolute; left:-1px; top:12px; bottom:12px; width:2px;
  border-radius:2px; background:transparent;
  transition:background var(--dur-fast) linear;
}
.hubtile:hover{ border-color:var(--surface-3); transform:translateY(-1px); box-shadow:var(--shadow-card); }
.hubtile:hover::before{ background:var(--gold); }
.hubtile:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:2px; }
.hubtile b{ font-size:var(--t-small); font-weight:600; line-height:1.3; letter-spacing:-0.005em; }
.hubtile-ic{
  flex:none; width:72px; height:72px; border-radius:16px;
  display:grid; place-items:center;
  background:var(--gold-wash); color:var(--gold-deep);
  border:1px solid oklch(83% 0.145 82 / 0.32);
}
.hubtile-ic svg{ display:block; width:38px; height:38px; }

.brandcard{ position:relative; }
.brandcard-side{
  flex:none; display:grid; gap:.5rem; align-content:center; justify-items:end;
  min-width:170px; text-align:right;
}
.brandcard-cost{ display:grid; gap:.1rem; justify-items:end; }
.brandcard-cost small{
  font-family:var(--font-ui); font-size:var(--t-micro); font-weight:600;
  text-transform:uppercase; letter-spacing:.11em; color:var(--text-4);
}
.brandcard-cost b{
  font-size:1.0625rem; font-weight:700; letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums;
}
.brandcard-cost .is-free{ color:var(--mint); }
.brandcard-side .btn{ position:relative; z-index:1; }
.brandcard-read{
  font-size:var(--t-micro); font-weight:600; color:var(--text-3); text-decoration:none;
  transition:color var(--dur-fast) linear;
}
.brandcard-read::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.brandcard:hover .brandcard-read{ color:var(--text); }
.brandcard-read:focus-visible{ outline:2px solid var(--gold-deep); outline-offset:3px; }

@media (max-width:760px){
  /* stacked: the side column becomes a full-width footer to the card */
  .brandcard{ flex-wrap:wrap; }
  .brandcard-side{
    min-width:0; width:100%; justify-items:stretch; text-align:left;
    border-top:1px solid var(--line-soft); padding-top:.7rem; margin-top:.2rem;
  }
  .brandcard-cost{ justify-items:start; }
  .brandcard-side .btn{ width:100%; }
}

/* Human HTML sitemap (/sitemap/) */
.sitemap-cols{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:1.5rem 2rem; margin-top:1.5rem;
}
.sitemap-cols h2{ font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.12em;
  color:var(--text-4); font-weight:700; margin:0 0 .6rem; }
.sitemap-cols ul{ list-style:none; margin:0; padding:0; display:grid; gap:.3rem; }
.sitemap-cols a{ font-size:var(--t-small); color:var(--text-2); text-decoration:none; }
.sitemap-cols a:hover{ color:var(--text); text-decoration:underline; }

/* ============================================================
   RICH CATEGORY EDITORIAL  (Casino.org-grade section blocks)
   Appended block — SVG icons only, no emoji. Reuses the token
   system; text stays single-ink, colour is carried by the
   accent icons (mint = positive, rose = danger, ice = insight,
   gold = numbered badges) and card surfaces only.
   ============================================================ */
.ric{ width:1em; height:1em; flex:none; display:inline-block; vertical-align:middle; }

/* --- breakdown facet cards --- */
.fac-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); }
.fac-card{
  background:var(--bg-elevated); border:1px solid var(--line-soft); border-radius:var(--r-card);
  padding:1.4rem 1.45rem; box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; gap:.85rem; min-width:0;
}
.fac-card h3{ font-family:var(--font-display); font-weight:400; font-size:var(--t-h3); letter-spacing:-0.02em; margin:0; }
.fac-card > p{ font-size:var(--t-small); color:var(--text-2); line-height:1.62; margin:0; }
.fac-pc{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem 1.1rem; }
@media (max-width:520px){ .fac-pc{ grid-template-columns:1fr; } }
.pc-list{ list-style:none; margin:0; padding:0; display:grid; gap:.42rem; align-content:start; }
.pc-list li{ display:flex; gap:.5rem; font-size:var(--t-small); color:var(--text-2); line-height:1.45; }
.pc-list li .ric{ margin-top:.16em; }
.pc-list.pros li .ric{ color:var(--mint); }
.pc-list.cons li .ric{ color:var(--rose); }
.pc-list li span{ min-width:0; }

/* --- expert insight callout --- */
.insight{
  display:flex; gap:.7rem; align-items:flex-start; margin-top:auto;
  background:var(--ice-wash); border:1px solid oklch(68% 0.130 240 / 0.30);
  border-radius:var(--r-chip); padding:.8rem .9rem;
}
.insight .ric{ color:var(--ice); width:1.2em; height:1.2em; margin-top:.05em; }
.insight > div{ min-width:0; }
.insight b{ display:block; font-size:var(--t-micro); text-transform:uppercase; letter-spacing:.12em; color:var(--text-3); margin-bottom:.2rem; }
.insight p{ margin:0; font-size:var(--t-small); color:var(--text-2); line-height:1.5; }

/* --- numbered circle badge (SVG ring, numeral in type) --- */
.num-badge{ position:relative; display:inline-grid; place-items:center; width:2.4rem; height:2.4rem; flex:none; color:var(--gold-deep); }
.num-badge svg{ position:absolute; inset:0; width:100%; height:100%; }
.num-badge b{ font-family:var(--font-display); font-size:1.05rem; font-weight:400; color:var(--text); letter-spacing:-0.02em; }

/* --- how we rate --- */
.rate-list{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--r-card); overflow:hidden; }
.rate-item{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.1rem; background:var(--bg-elevated); padding:1.35rem 1.45rem; }
.rate-body{ min-width:0; }
.rate-body h3{ font-size:1.0625rem; font-weight:600; letter-spacing:-0.012em; margin:.2rem 0 .5rem; font-family:var(--font-ui); }
/* The generic "main > .shell > section p{ max-width:78ch }" is sized for a
   paragraph running the full shell width. Here it lands inside a two-column
   grid whose second column is already narrower than the shell, so the cap
   cut the text a second time and left the rest of the column empty. */
.rate-body p{ font-size:var(--t-small); color:var(--text-2); line-height:1.62; margin:0; }
.mini-insight{ display:flex; gap:.5rem; align-items:flex-start; margin-top:.75rem !important; }
/* "main > .shell > section p{ max-width:78ch }" carries a class (.shell), so
   it is (0,1,3) — one class same as .rate-body p's (0,1,1), decided by the
   type-selector count once the class count ties, and the generic rule wins
   that regardless of source order. max-width:none on .rate-body p alone never
   actually beat it, which is why the empty column stayed after that fix.
   Scoping through .rate-item too makes this (0,2,1): the class count itself
   differs from the generic rule's, so it wins outright before type count is
   ever compared. */
.rate-item .rate-body p,
.rate-item .mini-insight{ max-width:none; }
.mini-insight .ric{ color:var(--ice); margin-top:.16em; }
.mini-insight span{ font-style:italic; color:var(--text-3); max-width:none; }

/* --- how it works / terms --- */
.term-grid{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); margin:0; }
.term-card{ background:var(--bg-elevated); border:1px solid var(--line-soft); border-left:3px solid var(--gold); border-radius:var(--r-card); padding:1.25rem 1.35rem; min-width:0; }
.term-card dt{ font-size:1.0625rem; font-weight:600; letter-spacing:-0.012em; margin-bottom:.5rem; }
.term-card dd{ margin:0; font-size:var(--t-small); color:var(--text-2); line-height:1.62; }
.term-card dd p{ margin:0; }

/* --- how to claim in N steps --- */
.claim-steps{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.claim-step{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.1rem; }
.cs-rail{ display:flex; flex-direction:column; align-items:center; }
.cs-arrow{ display:flex; flex:1 1 auto; align-items:center; justify-content:center; color:var(--line); min-height:1.4rem; padding:.3rem 0; }
.cs-arrow .ric{ width:1.35em; height:1.35em; }
.claim-text{ padding:.45rem 0 1.15rem; min-width:0; }
.claim-step:last-child .claim-text{ padding-bottom:0; }
.claim-text p{ margin:0; font-size:var(--t-body); color:var(--text-2); line-height:1.6; }

/* ============================================================
   Casino screenshots gallery (review pages) — attachment ids in
   the `screenshots` meta; rendered by inc/single-render.php.
   ============================================================ */
/* Screenshots span the same width as the At a glance block (the main column):
   each shot is full-container-width, stacked. Matches #at-a-glance width. */
.mbc-shots .shot-grid{
  display:flex; flex-direction:column; gap:1rem; margin-top:1.1rem;
}
.mbc-shots .shot{
  width:100%; margin:0;
  border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface);
}
.mbc-shots .shot-img{ width:100%; height:auto; display:block; }

/* Breathing room before sub-headings inside the review main column and rich
   editorial blocks — the generated prose packs H3s tightly otherwise. */
.review-main h3, .rev-section h3, .mbc-aspect h3, .review-main .checks h3{
  margin-top:1.7em; margin-bottom:.5em;
}
.review-main h3:first-child{ margin-top:.6em; }

/* Payment methods as logo chips on the review page */
.pay-chip{ padding-inline:.7rem .8rem; gap:.4rem; }
.pay-chip a{ display:inline-flex; align-items:center; gap:.4rem; color:inherit; text-decoration:none; }
.pay-chip .pay-ico{ width:22px; height:22px; object-fit:contain; display:block; flex:none; }
.pay-chip a:hover{ color:var(--text); }

/* Tighter vertical rhythm between review sections — the default band spacing
   left thin blocks (Payment methods, Notable features, FAQ) too far apart. */
.review-main .band-tight{ padding-block:clamp(1.1rem,.8rem + 1vw,1.7rem); }

/* ============================================================
   HOMEPAGE ENRICHMENT
   Trust intro, category explorer, safety strip and region
   switcher added to front-page.php. One ink for letters; the
   only colour is carried by the icon tiles (gold on gold-wash),
   exactly like the brand mark. Every internal link is a page
   that resolves (locale-aware via trueroll_localized_url()).
   ============================================================ */

/* shared icon tile — the single spot colour these blocks carry */
.ql-ic, .cat-ic, .safety-ic, .region-ic{
  display:grid; place-items:center; flex:none;
  border-radius:11px; background:var(--gold-wash); color:var(--gold-deep);
  border:1px solid oklch(83% 0.145 82 / 0.32);
}
.ql-ic svg, .cat-ic svg, .safety-ic svg, .region-ic svg{ display:block; }

/* ---- value / trust intro : quick links ---- */
.quicklinks{
  display:grid; gap:.85rem;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
}
.quicklinks a{
  display:flex; align-items:center; gap:.85rem;
  padding:1rem 1.1rem; text-decoration:none;
  border:1px solid var(--line-soft); border-radius:var(--r-card); background:var(--bg-elevated);
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.quicklinks a:hover{ border-color:var(--surface-3); transform:translateY(-2px); box-shadow:var(--shadow-card); }
.ql-ic{ width:42px; height:42px; }
.ql-ic svg{ width:21px; height:21px; }
.ql-tx{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.ql-tx b{ font-size:.9375rem; font-weight:700; letter-spacing:-0.012em; line-height:1.2; }
.ql-tx small{ font-size:var(--t-micro); color:var(--text-3); line-height:1.35; }
.ql-arrow{ margin-left:auto; color:var(--text-4); flex:none; transition:transform var(--dur) var(--ease), color var(--dur-fast) linear; }
.ql-arrow svg{ width:16px; height:16px; }
.quicklinks a:hover .ql-arrow{ color:var(--text-2); transform:translateX(3px); }

/* ---- explore by category : tiles ---- */
.cats{
  display:grid; gap:.9rem;
  grid-template-columns:repeat(auto-fill, minmax(232px, 1fr));
}
.cats a{
  display:flex; flex-direction:column; gap:.7rem;
  padding:1.35rem 1.4rem; text-decoration:none;
  border:1px solid var(--line-soft); border-radius:var(--r-card); background:var(--bg-elevated);
  position:relative; overflow:hidden;
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cats a:hover{ border-color:var(--surface-3); transform:translateY(-2px); box-shadow:var(--shadow-card); }
.cat-ic{ width:46px; height:46px; }
.cat-ic svg{ width:23px; height:23px; }
.cat-name{ font-family:var(--font-display); font-size:1.1875rem; letter-spacing:-0.02em; line-height:1.15; margin-top:.15rem; }
.cats p{ font-size:var(--t-small); color:var(--text-3); line-height:1.5; margin:0; }
.cat-go{
  margin-top:auto; padding-top:.7rem; display:inline-flex; align-items:center; gap:.4rem;
  font-size:var(--t-micro); font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-4);
  transition:color var(--dur-fast) linear;
}
.cat-go svg{ width:14px; height:14px; transition:transform var(--dur) var(--ease); }
.cats a:hover .cat-go{ color:var(--text-2); }
.cats a:hover .cat-go svg{ transform:translateX(3px); }

/* ---- safety strip ---- */
.safety{
  display:flex; gap:1.4rem; align-items:flex-start;
  border:1px solid var(--line-soft); border-radius:var(--r-slab);
  background:linear-gradient(180deg, var(--surface), var(--bg-elevated));
  padding:clamp(1.4rem,1rem + 1.4vw,2.1rem);
}
.safety-ic{ width:56px; height:56px; border-radius:14px; }
.safety-ic svg{ width:28px; height:28px; }
.safety-tx{ min-width:0; }
.safety-tx h2{ font-family:var(--font-display); font-size:var(--t-h3); margin:.55rem 0 .6rem; }
.safety-tx p{ font-size:var(--t-small); color:var(--text-2); line-height:1.65; max-width:78ch; margin-bottom:1rem; }
.safety-orgs{ display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.1rem; }
@media (max-width:640px){ .safety{ flex-direction:column; gap:1rem; } }

/* ---- region / language switcher ---- */
.regions{
  display:grid; gap:.7rem;
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
}
.regions a{
  display:flex; align-items:center; gap:.7rem;
  padding:.85rem 1rem; text-decoration:none;
  border:1px solid var(--line); border-radius:12px; background:var(--bg-elevated);
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.regions a:hover{ border-color:var(--surface-3); transform:translateY(-1px); }
/* The flag replaces the gold globe: seven identical globes told the reader
   nothing, and country is the one thing this list is sorted by. Fixed 4:3 box
   with a hairline, so a mostly-white flag still reads as a flag. */
.region-ic{
  width:34px; height:26px; flex:none; border-radius:4px; overflow:hidden;
  /* the shared chip rule above paints a gold wash and a gold border, which
     would tint every flag; a neutral hairline lets the flag be the colour */
  background:var(--surface); border:1px solid var(--line);
}
.region-ic img{ display:block; width:100%; height:100%; object-fit:cover; }
.region-ic svg{ width:18px; height:18px; }
.region-tx{ display:flex; flex-direction:column; gap:.05rem; min-width:0; }
.region-tx b{ font-size:.9375rem; font-weight:700; letter-spacing:-0.012em; line-height:1.2; }
.region-tx small{ font-size:var(--t-micro); color:var(--text-3); font-variant-numeric:tabular-nums; }

/* ============================================================
   AUTHORSHIP — review byline, in-review author box, author page
   (appended; reuses the homepage .author tokens above)
   ============================================================ */

/* byline under the review lede */
.review-byline{ margin:.55rem 0 0; font-size:var(--t-small); color:var(--text-3); }
.review-byline a{ color:var(--text-2); font-weight:600; }
.review-byline a:hover{ color:var(--text); }

/* small uppercase kicker shared by the review box + author page head */
.author-kicker{
  font-family:var(--font-ui); font-size:var(--t-micro); font-weight:700;
  text-transform:uppercase; letter-spacing:.13em; color:var(--text-4); margin:0 0 .25rem;
}

/* the framed author box inside a review body */
.review-main > section.mbc-author, section.mbc-author{ margin-top:1.5rem; }
.author.author-review .avatar{ width:88px; height:88px; }
.author .author-cred{
  font-size:var(--t-micro); color:var(--text-4); margin-top:.7rem; line-height:1.6;
}
.author .author-more{ margin-top:.9rem; font-size:var(--t-small); }
.author .author-more a{ color:var(--gold); font-weight:600; text-decoration:none; }
.author .author-more a:hover{ text-decoration:underline; }

/* dedicated author page */
.author-page-head{ max-width:none; }
.author.author-page{ align-items:start; }
.author.author-page .avatar{ width:160px; height:160px; }
.author.author-page h1.display{ margin-bottom:.15rem; }
@media (max-width:640px){ .author.author-page .avatar{ width:120px; height:120px; } }

.author-reviews{
  list-style:none; margin:1.1rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:.7rem;
}
.author-review-link{
  display:flex; align-items:center; gap:.85rem; min-width:0;
  padding:.8rem .95rem; text-decoration:none;
  border:1px solid var(--line); border-radius:12px; background:var(--bg-elevated);
  transition:border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.author-review-link:hover{ border-color:var(--surface-3); transform:translateY(-1px); }
.author-review-link .op-logo{
  width:46px; min-width:46px; max-width:46px; height:46px; flex:none;
  margin:0; padding:5px; aspect-ratio:1; display:grid; place-items:center;
}
.author-review-text{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.author-review-name{ font-size:.9375rem; font-weight:700; letter-spacing:-0.012em; color:var(--text); line-height:1.25; }
.author-review-bonus{
  font-size:var(--t-micro); color:var(--text-3); line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Карта сайта: вложенность видна сеткой, принадлежность к другому кластеру — чипом. */
.sitemap-sec{ padding:1.2rem 0; border-top:1px solid var(--line); }
.sitemap-sec h2{ display:flex; align-items:baseline; gap:.5rem; }
.sitemap-sec h2 small{ font-size:var(--t-small); font-weight:400; }
.sitemap-kids{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.35rem .9rem; list-style:none; padding:0; margin:.8rem 0 0; }
.sitemap-kids li{ display:flex; align-items:center; gap:.4rem; font-size:var(--t-small); }
.sitemap-kids .chip{ font-size:var(--t-micro); padding:.05rem .35rem; margin:0; opacity:.75; }

/* Карта сайта: переключатель рынков — у каждого своя структура. */
.sitemap-markets{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin:.6rem 0 1rem; font-size:var(--t-small); }
.sitemap-markets .chip{ margin:0; text-decoration:none; }

/* ============================================================
   HEADER v3 (сеть slot*, 16.10.2026): одна строка во всю ширину.
   Слева знак сайта (тот же, что фавикон) и имя, справа меню из
   9–10 пунктов. Кнопка рейтинга в шапке не нужна: она есть в hero.
   Ниже 1360px пункты не помещаются рядом с логотипом — бургер.
   ============================================================ */
.brand-mark.is-fav{ background:none; box-shadow:none; border-radius:0; width:40px; height:40px; }
.brand-mark.is-fav img{ width:100%; height:100%; display:block; filter:drop-shadow(0 4px 10px oklch(0% 0 0 / .28)); }
.brand-name{ font-size:1.3rem; }
@media (min-width:1360px){
  .masthead .shell{ width:min(100% - var(--gutter) * 2, 1680px); gap:1.25rem; min-height:72px; }
  .masthead > .shell > .btn{ display:none; }
  .burger{ display:none; }
  .mainnav{ display:flex; flex:1 1 auto; margin-left:auto; min-width:0; }
  .navlist{ width:100%; justify-content:flex-end; gap:.1rem; }
  .navlist > li > a, .navlist .navbtn{ font-size:12.5px; padding:.6rem .38rem; white-space:nowrap; }
}
@media (min-width:1600px){
  .navlist{ justify-content:space-between; }
  .navlist > li > a, .navlist .navbtn{ font-size:14px; padding:.65rem .6rem; }
}
@media (max-width:1359px){
  .burger{ display:block; margin-left:auto; }
  .mainnav{ display:none; }
  .masthead > .shell > .btn{ display:none; }
}
@media (max-width:420px){
  .brand-mark.is-fav{ width:34px; height:34px; }
  .brand-name{ font-size:1.1rem; }
}
/* Мобильное меню: сразу под шапкой (у шапки backdrop-filter, поэтому fixed
   считался от неё и давал щель), подменю свёрнуты и раскрываются по нажатию,
   подпункты в одну колонку, чтобы ничего не уходило за правый край. */
@media (max-width:1359px){
  body[data-nav="open"] .mainnav{
    display:block; position:absolute; inset:100% 0 auto 0;
    z-index:75; max-height:calc(100vh - 120px); max-height:calc(100dvh - 120px); overflow:auto;
    background:var(--bg-elevated); border-bottom:1px solid var(--line); box-shadow:var(--shadow-lift);
    padding:.6rem var(--gutter) 1.2rem;
  }
  body[data-nav="open"] .navlist{ flex-direction:column; align-items:stretch; gap:0; }
  body[data-nav="open"] .navlist > li{ border-bottom:1px solid var(--line-soft); }
  body[data-nav="open"] .navlist > li > a, body[data-nav="open"] .navlist .navbtn{
    display:flex; width:100%; justify-content:space-between; align-items:center;
    font-size:15px; padding:.85rem .2rem; text-align:left;
  }
  body[data-nav="open"] .hasmenu .navmenu{ display:none; }
  body[data-nav="open"] .hasmenu[data-open="true"] .navmenu{ display:block; padding:0 0 .7rem .6rem; }
  body[data-nav="open"] .navmenu ul,
  body[data-nav="open"] .navmenu[data-cols] ul{ display:block; grid-template-columns:none; columns:auto; }
  body[data-nav="open"] .navmenu li a{ display:block; padding:.5rem .2rem; white-space:normal; font-size:14px; }
}
/* Логотип оператора: тёмная плитка (или в фирменном цвете бренда, когда он задан
   картинкой). Пока картинки нет — имя бренда шрифтом заголовков на той же плитке. */
.op-logo{ background:oklch(16% 0.02 265); border-color:oklch(100% 0 0 / .08); }
.op-logo img{ width:100%; height:100%; object-fit:contain; display:block; }
.op-logo.is-word{
  background:
    radial-gradient(120% 90% at 20% 0%, var(--gold-wash), transparent 60%),
    linear-gradient(160deg, oklch(22% 0.03 265), oklch(12% 0.02 265));
  border:1px solid oklch(100% 0 0 / .10);
}
.op-logo.is-word b{
  color:oklch(97% 0.01 90); font-family:var(--font-display); font-size:1.05rem; font-weight:700;
  line-height:1.15; letter-spacing:.01em; text-align:center; padding:0 .4rem;
  text-shadow:0 2px 10px oklch(0% 0 0 / .45);
}
.op-logo.is-word small{ display:none; }