@import url("fonts.css");

/* aviator-games.com — design system (extracted from block-library) */

/* =====================================================================
   ШРИФТОВАЯ СИСТЕМА
   Три гарнитуры = три регистра речи, а не три украшения:
     Space Grotesk (--disp)  — заголовки. Геометрический гротеск с кривыми
        буквами (a, g, t, ×) — приборный, «авиационный», но не механический.
        Только 500/600/700, кириллицы НЕТ → в стеке за ним Inter, RU-заголовки
        падают на Inter автоматически (unicode-range это разруливает).
     Inter (--font)          — корпус. 400–700, кириллица есть.
     JetBrains Mono (--mono) — данные: множители, RTP, хеши, суммы, даты.
        500/700, кириллица есть.
   Правило, которое держит систему:
     ЗАГЛАВНЫЕ = машина (мелкие моно-лейблы, широкий трекинг).
     Смешанный регистр = человек (крупные заголовки Space Grotesk, тесный трекинг).
     Табличные цифры = данные (моно, tabular-nums, без лигатур).
   Поэтому uppercase снят с h1/h2: капитель + отрицательный трекинг −.035em
   склеивала буквы, убивала форму слова в длинных SEO-заголовках и полностью
   разваливала кириллицу. Каверза перенесена в надзаголовок — крошечные
   моно-капсы с трекингом .2em над огромным тесным заголовком.
   Ни одна из трёх гарнитур не имеет веса выше 700 → font-synthesis-weight:none,
   чтобы браузер не рисовал фальшивый жир поверх настоящего 700.
   ===================================================================== */

:root{
  --bg:#0A0D14; --surface:#121826; --elev:#1A2233; --elev2:#222C41;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.14);
  --ink:#EAF0FB; --ink2:#95A2B9; --ink3:#5E6C86;
  /* Корпусный текст жил на --ink2 — это служебный, «подписной» тон.
     Целые экраны основного чтения им набирать нельзя: страница выглядит
     выцветшей. --ink-body — отдельная ступень между --ink и --ink2,
     только под длинный текст. --ink2 остаётся у мета и подписей. */
  --ink-body:#C7D3E7;
  --crash:#FF3B4E; --heat:#FF7A3D; --cashout:#2FE0A8; --amber:#FFC24B; --sky:#FFAE6A; --violet:#8B7BFF;
  --av-purple:#8B5CF6; --av-purple2:#C4A9FF; --av-green:#5FC24A; --av-green2:#7BD968; --av-blue:#2E9BE0; --av-pink:#FF3B78;
  --grad:linear-gradient(135deg,#FF7A3D 0%,#FF3B4E 100%);
  --grad-cash:linear-gradient(135deg,#2FE0A8 0%,#1FB5D8 100%);
  --r:14px;

  /* --- гарнитуры --- */
  --font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --disp:"Space Grotesk","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;

  /* --- шкала: h1 76 / h2 48 / h3 28 / h4 20 —— шаги 1.58 / 1.71 / 1.40.
     Интерполяция линейная между 375px и 1440px вьюпорта.
     Разрыв h2→h3 намеренно самый большой: там система переключается
     с дисплейного регистра на текстовый, и ступень должна быть слышна.
     h1 поднят с 68 до 76: на всю ширину 68px не читались как «главное»,
     а в сплит-герое h1 вообще выходил МЕЛЬЧЕ h2 (замерено: 40px против
     44px) — иерархия была вывернута наизнанку. --- */
  --fs-1:clamp(2.375rem,1.54rem + 3.57vw,4.75rem);    /* 38 → 76 */
  --fs-2:clamp(1.8125rem,1.394rem + 1.78vw,3rem);     /* 29 → 48 */
  --fs-3:clamp(1.3125rem,1.159rem + 0.66vw,1.75rem);  /* 21 → 28 */
  --fs-4:clamp(1.09375rem,1.039rem + 0.23vw,1.25rem); /* 17.5 → 20 */
  --fs-lede:clamp(1.09375rem,1.017rem + 0.33vw,1.3125rem); /* 17.5 → 21 */
  /* Отдельная ступень для заголовка в ПОЛОВИННОЙ колонке (сплит-герой,
     герой в рамке). Полные 76px в колонке 600px дают 8 знаков в строке,
     поэтому ступень ниже h1 — но обязательно ВЫШЕ h2 (48px), иначе
     главный заголовок страницы проигрывает подзаголовку секции. */
  --fs-hero:clamp(2.125rem,1.55rem + 2.4vw,3.5rem);   /* 34 → 56 */
  --fs-body:clamp(1rem,0.978rem + 0.09vw,1.0625rem);  /* 16 → 17 */

  /* --- интерлиньяж и трекинг: чем крупнее кегль, тем плотнее оба.
     На 76px интерлиньяж уходит под единицу — строки дисплейного
     заголовка должны стоять плотным блоком, это и есть «уверенно». --- */
  --lh-1:0.95; --lh-2:1.04; --lh-3:1.2; --lh-4:1.34;
  --ls-1:-0.034em; --ls-2:-0.028em; --ls-3:-0.018em; --ls-4:-0.008em;
  --lh-prose:1.65;  --lh-ui:1.5;
  --ls-caps:.18em;  /* трекинг мелких капсов — единственное место, где он положительный */

  /* --- веса. Гарнитуры переменные (ось wght), поэтому доступны
     промежуточные значения, а не только 500/600/700. h3 идёт на 600:
     дисплейный голос сохраняется, но ступенью тише h1/h2. --- */
  --w-disp:700; --w-sub:600; --w-body:400; --w-strong:600;

  /* --- мера строки: замерено в браузере, Inter 17px → 66ch ≈ 78 знаков,
     это выше верхней границы. 58ch даёт ~68 знаков — внутри 65–75. --- */
  --measure:58ch; --measure-narrow:48ch;

  /* --- вертикальный ритм секций --- */
  --sec-y:clamp(52px,6vw,92px);
  --stack:clamp(18px,2.1vw,28px);
  /* Базовая единица ритма = высота одной строки корпуса. Все вертикальные
     отступы текстового потока кратны ей, поэтому ритм не разъезжается
     при смене кегля заголовка. */
  --rhythm:calc(var(--fs-body) * var(--lh-prose));
}
.sunburst{background:repeating-conic-gradient(from 0deg at 50% 118%, rgba(255,255,255,.05) 0deg 5deg, transparent 5deg 11deg)!important}
.betpanel{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bp{background:var(--elev);border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:10px}
.bp-tabs{display:inline-flex;background:var(--elev2);border-radius:8px;padding:3px;width:max-content;font-size:12px}
.bp-tabs span{padding:4px 12px;border-radius:6px;color:var(--ink3)} .bp-tabs .on{background:var(--surface);color:var(--ink)}
.bp-amt{color:var(--ink2);font-size:13px}
.btn.play{background:linear-gradient(180deg,var(--av-green2),var(--av-green));color:#04230f;justify-content:center;font-weight:700;box-shadow:0 8px 22px -10px rgba(95,194,74,.7)}
.hp{font-family:var(--mono);font-size:12px;font-weight:700;padding:3px 8px;border-radius:6px}
.hp.b{color:#8FD3FF;background:rgba(46,155,224,.16)} .hp.p{color:#C4A9FF;background:rgba(139,92,246,.18)} .hp.big{color:#FF9AD5;background:rgba(255,59,120,.18)}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.fx{display:flex;gap:11px;align-items:center;background:var(--elev);border:1px solid var(--line);border-radius:12px;padding:13px}
.fx .i{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;font-size:16px}
.fx b,.fx strong{display:block;font-size:14px}.fx span{color:var(--ink3);font-size:12px}
.pf-badge{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink2);background:rgba(47,224,168,.08);border:1px solid rgba(47,224,168,.25);border-radius:999px;padding:8px 16px}
.pf-badge b,.pf-badge strong{color:var(--cashout)}
.geo{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:var(--elev);border:1px solid var(--line);border-radius:12px;padding:16px}
.geo-yes{color:var(--av-green);font-size:13px;font-weight:600;background:rgba(95,194,74,.12);border:1px solid rgba(95,194,74,.3);border-radius:9px;padding:8px 12px}
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.tm{background:var(--elev);border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center}
.tm .pfp{width:56px;height:56px;border-radius:14px;background:var(--elev2);margin:0 auto 10px;display:grid;place-items:center;font-size:22px;border:1px solid var(--line2)}
.tm b,.tm strong{display:block}.tm .role{color:var(--heat);font-size:11px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
.tm .flag{font-size:12px;margin-top:6px;color:var(--ink3)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:var(--fs-body);line-height:var(--lh-ui);
  font-kerning:normal;
  font-variant-ligatures:common-ligatures contextual;
  /* Все три гарнитуры — переменные ТОЛЬКО по оси wght: оси opsz нет ни у
     одной (проверено), поэтому font-optical-sizing здесь был мёртвой
     строкой и убран. Оптическую компенсацию делаем руками — трекингом и
     интерлиньяжем по ступеням шкалы. Синтез веса выключен: настоящий
     диапазон 300–700/100–900 браузер обязан брать с оси, а не рисовать
     фальшивый жир поверх. */
  font-synthesis-weight:none;font-synthesis-small-caps:none;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{background:
  radial-gradient(1200px 600px at 80% -10%, rgba(255,122,61,.06), transparent 60%),
  radial-gradient(1000px 500px at 0% 0%, rgba(84,198,255,.05), transparent 55%),
  var(--bg);
  background-attachment:fixed;}
a{color:var(--sky);text-decoration:none}

/* ---- заголовки: базовая шкала ----------------------------------
   margin:0 сохранён — на нём держатся flex/grid-шапки компонентов.
   Отступы вокруг заголовков живут в .prose и в контейнерах. */
h1,h2,h3,h4,h5,h6{margin:0;text-wrap:balance;
  font-kerning:normal;font-variant-ligatures:common-ligatures}
/* Дисплейная гарнитура держит ТРИ верхние ступени, а не две.
   На двух был провал: h2 48px в Space Grotesk и h3 в Inter стояли рядом
   как куски разных сайтов. h3 отдан той же гарнитуре, но весом 600 —
   голос тот же, громкость ступенью ниже. h4 остаётся текстовым:
   это уже подзаголовок внутри абзацного потока. */
h1,h2{font-family:var(--disp);font-weight:var(--w-disp)}
h1{font-size:var(--fs-1);line-height:var(--lh-1);letter-spacing:var(--ls-1)}
h2{font-size:var(--fs-2);line-height:var(--lh-2);letter-spacing:var(--ls-2)}
h3{font-family:var(--disp);font-weight:var(--w-sub);
  font-size:var(--fs-3);line-height:var(--lh-3);letter-spacing:var(--ls-3)}
h4{font-size:var(--fs-4);line-height:var(--lh-4);letter-spacing:var(--ls-4);font-weight:600}
h5,h6{font-size:1rem;line-height:1.4;letter-spacing:0;font-weight:600}

/* ---- данные: всё, что число, — моно с табличными цифрами --------
   Лигатуры JetBrains Mono («->», «==», «!=») в вебе только вредят:
   в «1.51×» или «x2» они дают неожиданные глифы. Гасим явно. */
.mono,.num,.hp,.tag,.promo,.cite,
.history b,.tl .rank,.score .big,.bonus .amt,.sim .mult,
.op-rt b,.op-est,.op-bonus .b-n,.ks-v,.stat-tile .n,.stat-tile .d,
.bf-tiles .t b,.sh-chip b,.quote-block .qnum,.tml-date,
.ev .stat .n,.verify .out .r,.verify .fld,.sim .ctl .field,.changelog b,.history strong,.op-rt strong,.bf-tiles .t strong,.sh-chip strong,.changelog strong{
  font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-variant-ligatures:none}
/* цифры внутри обычного текста тоже не должны «прыгать» в таблицах */
table,.matrix,.compare-table,.dist,.statgrid,.stat-row{font-variant-numeric:tabular-nums}

/* ---- мелкие капсы: единственное место с положительным трекингом ----
   Здесь стояло font-feature-settings:"case" 1,"tnum" 1. Проверено
   fontTools по всем трём файлам: фичи "case" нет НИ В ОДНОМ, а "tnum"
   отсутствует у JetBrains Mono (он моноширинный — цифры и так равны).
   То есть правило не делало ничего заявленного, но при этом ЗАТИРАЛО
   унаследованный от body font-feature-settings (это не аддитивное
   свойство, а полная замена) и вместе с ним — кернинг на всех капсовых
   лейблах. Оставлены только реально работающие font-variant-*. */
.eyebrow,.kicker,.lib-head .kicker,.tag,th,.grp>h2,.keyspec-h,.op-ribbon,
.rel .t,.changelog .t,.tm .role,.author .role,.verify label,.sim .st,
.debunk .stamp,.tml-date,.compare-table thead th .u{
  font-kerning:normal;font-variant-numeric:tabular-nums;font-variant-ligatures:none}

.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* ---- page head ---- */
.lib-head{padding:64px 0 30px;border-bottom:1px solid var(--line)}
.lib-head .kicker{font-family:var(--mono);font-size:12px;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--heat)}
.lib-head h1{font-family:var(--disp);font-weight:700;font-size:var(--fs-1);
  line-height:var(--lh-1);letter-spacing:var(--ls-1);margin-top:16px}
.lib-head h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lib-head p{color:var(--ink2);max-width:var(--measure);margin-top:16px;
  font-size:var(--fs-lede);line-height:var(--lh-prose)}
.legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid var(--line2);color:var(--ink2)}
.tag.reuse{color:var(--sky);border-color:rgba(84,198,255,.4)}
.tag.new{color:var(--cashout);border-color:rgba(47,224,168,.4)}
.tag.sig{color:var(--crash);border-color:rgba(255,59,78,.45)}

/* ---- section framing ---- */
.grp{padding:52px 0 8px}
.grp>h2{font-weight:700;font-size:12px;line-height:1.4;letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--ink3);
  font-family:var(--mono);display:flex;align-items:center;gap:14px}
.grp>h2::after{content:"";flex:1;height:1px;background:var(--line)}
.spec{margin-top:24px}
.spec__label{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.spec__label .name{font-weight:700;font-size:15px}
.spec__label .note{color:var(--ink3);font-size:13px}
.spec__demo{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px;overflow-x:auto}
.spec__demo.plain{background:transparent;border:none;padding:0}

/* ---- generic UI atoms reused inside demos ---- */
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;padding:6px 12px;border-radius:999px;border:1px solid var(--line2);color:var(--ink2)}
.pill.hot{background:rgba(255,59,78,.12);border-color:transparent;color:#FFC9CE}
.pill.cash{background:rgba(47,224,168,.12);border-color:transparent;color:#9CF3D8}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;padding:11px 18px;border-radius:11px;border:1px solid transparent;cursor:pointer}
.btn.primary{background:var(--grad);color:#fff;box-shadow:0 8px 24px -8px rgba(255,59,78,.6)}
.btn.ghost{background:transparent;border-color:var(--line2);color:var(--ink)}
.btn.cash{background:var(--grad-cash);color:#04231b}
.btn.sm{padding:8px 13px;font-size:13px}
.chev{opacity:.6}
.eyebrow{font-family:var(--mono);font-weight:700;font-size:11px;line-height:1.4;
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--heat)}
.card{background:var(--elev);border:1px solid var(--line);border-radius:var(--r)}
.hr{height:1px;background:var(--line);border:0;margin:16px 0}
.stars{color:var(--amber);letter-spacing:2px}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line)}
th{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);font-weight:500}
td .mono{color:var(--ink)}
.logo-chip{width:44px;height:44px;border-radius:10px;background:#fff;display:grid;place-items:center;font-weight:700;color:#0A0D14;font-size:13px;flex:none}
.logo-chip.dk{background:#0A0D14;color:#fff;border:1px solid var(--line2)}

/* ---- nav ---- */
.nav{display:flex;align-items:center;gap:18px;padding:12px 16px;background:rgba(10,13,20,.8);border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:-.02em}
.brand .mk{width:30px;height:30px;border-radius:9px;background:var(--grad);display:grid;place-items:center;font-size:16px}
.nav .links{display:flex;gap:16px;color:var(--ink2);font-size:14px;font-weight:600;flex:1}
.nav .links span{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.nav .links span:hover{color:var(--ink)}
.locale{margin-left:auto;color:var(--ink2);font-size:13px;border:1px solid var(--line2);padding:6px 10px;border-radius:9px}

/* ---- hero ---- */
.hero{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(700px 300px at 85% 0%, rgba(255,59,78,.18), transparent 60%),var(--surface);padding:30px}
.hero .grid-bg{position:absolute;inset:0;opacity:.35;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:38px 38px;mask:radial-gradient(600px 260px at 80% 0%,#000,transparent 70%)}
.hero>*{position:relative}
.hero h1{font-family:var(--disp);font-weight:var(--w-disp);letter-spacing:var(--ls-1);
  font-size:var(--fs-hero);line-height:var(--lh-hero,1.02);margin:14px 0}
.byline{display:flex;align-items:center;gap:10px;color:var(--ink2);font-size:13px;margin-top:6px}
.avs{display:flex}
.avs i{width:26px;height:26px;border-radius:50%;background:var(--elev2);border:2px solid var(--surface);margin-left:-8px;display:grid;place-items:center;font-size:11px;font-style:normal}
.avs i:first-child{margin-left:0}

/* ---- scorecard ---- */
.score{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.score .big{font-family:var(--mono);font-weight:700;font-size:52px;line-height:1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.score .rows{flex:1;min-width:240px;display:grid;gap:9px}
.srow{display:grid;grid-template-columns:130px 1fr 38px;gap:10px;align-items:center;font-size:13px;color:var(--ink2)}
.bar{height:7px;border-radius:4px;background:var(--elev2);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--grad-cash)}

/* ---- bonus box ---- */
.bonus{display:flex;gap:18px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:linear-gradient(120deg,rgba(255,122,61,.14),rgba(255,59,78,.1));border:1px solid rgba(255,122,61,.3);border-radius:14px;padding:20px}
.bonus .amt{font-family:var(--mono);font-weight:700;font-size:34px}
.bonus .amt small{font-family:var(--font);font-size:14px;color:var(--ink2);font-weight:600}
.promo{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);border:1px dashed var(--line2);border-radius:9px;padding:8px 12px;color:var(--ink)}
.promo b,.promo strong{color:var(--cashout);letter-spacing:.05em}

/* ---- toplist card ---- */
.tl{display:flex;gap:16px;align-items:center;padding:16px;flex-wrap:wrap}
.tl .info{flex:1;min-width:200px}
.tl .usps{list-style:none;padding:0;margin:8px 0 0;display:flex;gap:14px;flex-wrap:wrap;color:var(--ink2);font-size:13px}
.tl .usps li::before{content:"▲";color:var(--cashout);margin-right:6px;font-size:9px}
.tl .rank{font-family:var(--mono);font-weight:700;font-size:22px;color:var(--ink3);width:34px}

/* ---- callout ---- */
.callout{display:flex;gap:14px;padding:18px;border-radius:12px;background:rgba(84,198,255,.07);border:1px solid rgba(84,198,255,.22)}
.callout .ic{width:34px;height:34px;flex:none;border-radius:9px;background:rgba(84,198,255,.15);display:grid;place-items:center;color:var(--sky)}
/* SEM-01: где вложенность выноски требует h2/h3 вместо декоративного h4,
   заголовок остаётся текстовым — тем же по виду, что и h4, меняется только тег */
.callout h2,.callout h3{font-family:inherit;font-weight:600}
.callout h2,.callout h3,.callout h4{font-size:14px;line-height:var(--lh-4);margin-bottom:4px}
.callout p{margin:0;color:var(--ink2);font-size:14px}
/* ⚠ Ребёнок флексбокса не сжимается уже своего min-content, а немецкие и
   скандинавские составные слова («Behandlungseinrichtung», «Selbstsperre»,
   «Spelpaus.se») делают его шире экрана. Из-за этого на 390px обрезался блок
   помощи при зависимости — ровно там, где напечатаны телефоны доверия и режим
   их работы. Английская версия дефект не показывает: там таких слов нет. */
.callout>*{min-width:0}
.callout li,.callout p,.callout h2,.callout h3,.callout h4{overflow-wrap:break-word}
/* Часть выносок — это не «иконка + текст», а абзац РЯДОМ со списком служб помощи.
   На 390px флексбокс ставил их в две колонки по 102 и 184 пикселя, и телефон
   доверия читался по три слова в строку. Иконка (`.ic`, flex:none) остаётся на
   месте, а текстовые дети занимают всю строку и переносятся друг под друга. */
@media(max-width:700px){
  .callout{flex-wrap:wrap}
  .callout>p,.callout>ul,.callout>ol{flex:1 1 100%}
}
.callout.warn{background:rgba(255,59,78,.07);border-color:rgba(255,59,78,.25)}
.callout.warn .ic{background:rgba(255,59,78,.15);color:var(--crash)}

/* ---- chips ---- */
.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.chip{background:var(--elev);border:1px solid var(--line);border-radius:11px;padding:13px}
.chip .k{font-size:11px;color:var(--ink3);font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.chip .v{font-weight:700;margin-top:4px}

/* ---- pros/cons ---- */
.pc{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pc .col{border:1px solid var(--line);border-radius:12px;padding:16px}
.pc ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px;font-size:14px;color:var(--ink2)}
.pc .pro li::before{content:"＋";color:var(--cashout);margin-right:8px;font-weight:700}
.pc .con li::before{content:"−";color:var(--crash);margin-right:8px;font-weight:700}

/* ---- faq ---- */
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .p{color:var(--heat);font-family:var(--mono)}
.faq p{color:var(--ink2);font-size:14px;margin:10px 0 0}

/* ---- related ---- */
.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.rel a{display:block;background:var(--elev);border:1px solid var(--line);border-radius:12px;padding:16px}
.rel a:hover{border-color:var(--line2)}
.rel .t{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--heat)}
.rel .h{font-weight:700;color:var(--ink);margin:6px 0}
.rel p{margin:0;color:var(--ink3);font-size:13px}

/* ---- trust: changelog ---- */
.changelog{background:var(--elev);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.changelog .t{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);display:block;margin-bottom:10px}
.changelog ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.changelog li{font-size:13.5px;color:var(--ink2);display:flex;gap:12px;min-width:0}
/* ⚠ Строка журнала — флексбокс с датой и текстом. Ребёнок флексбокса не сжимается
   уже своего min-content, поэтому финская строка «Elokuu 2026 — sivu kirjoitettiin
   uudelleen…» растягивала пункт до 727 пикселей при экране в 390: на канонической
   версии `body{overflow-x:clip}` его просто срезал, и половина записи пропадала
   с экрана молча. */
.changelog li>*{min-width:0}
.changelog li>span,.changelog li>p{overflow-wrap:break-word}
/* ⚠ Дата — якорь строки и уже помечена nowrap. `min-width:0` выше позволил сжать
   и её: «Sierpień 2026» ужималось до 13 пикселей из 105 и наезжало на текст.
   Сжимается пояснение, дата стоит в своей ширине. */
.changelog b,.changelog strong{flex:none}
.changelog b,.changelog strong{font-family:var(--mono);color:var(--cashout);white-space:nowrap;font-weight:600}

/* ---- trust: badges ---- */
.badges{display:flex;gap:12px;flex-wrap:wrap}
.badge{display:flex;gap:11px;align-items:center;background:var(--elev);border:1px solid var(--line);border-radius:12px;padding:12px 15px;font-size:13px}
.badge .ic{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex:none}
.badge .ic.v{background:rgba(47,224,168,.14);color:var(--cashout)}
.badge .ic.m{background:rgba(139,123,255,.14);color:var(--violet)}
.badge b,.badge strong{display:block;color:var(--ink)}
.badge span{color:var(--ink3)}
.disclose{font-size:12.5px;color:var(--ink3);border-left:2px solid var(--heat);padding:6px 0 6px 12px}
.cite{font-size:12px;color:var(--ink3);font-family:var(--mono)}
.cite a{color:var(--sky)}

/* author card */
.author{display:flex;gap:16px;align-items:flex-start}
.author .pfp{width:64px;height:64px;border-radius:14px;background:var(--elev2);flex:none;display:grid;place-items:center;font-size:24px;border:1px solid var(--line2)}
.author .meta :is(h2,h3,h4){font-family:inherit;font-size:16px;font-weight:600;line-height:var(--lh-4)}
.author .role{color:var(--heat);font-size:12px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em}
.author p{color:var(--ink2);font-size:14px;margin:8px 0}
.author .links{display:flex;gap:12px;font-size:13px}

/* ---- interactive: simulator ---- */
.sim{position:relative;background:repeating-conic-gradient(from 0deg at 50% 120%, rgba(255,255,255,.035) 0deg 5deg, transparent 5deg 11deg),linear-gradient(180deg,#0C1220,#0A0D14);border:1px solid var(--line2);border-radius:14px;overflow:hidden}
.sim canvas{display:block;width:100%;height:220px}
.sim .mult{position:absolute;top:16px;left:20px;font-family:var(--mono);font-weight:700;font-size:40px;color:var(--crash);text-shadow:0 0 30px rgba(255,59,78,.5)}
.sim .st{position:absolute;top:20px;right:20px;font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink3)}
.sim .ctl{position:absolute;bottom:14px;left:20px;right:20px;display:flex;gap:10px;align-items:center}
.sim .ctl .field{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:9px;padding:8px 12px;font-family:var(--mono);font-size:13px;color:var(--ink2)}

/* verifier */
.verify{display:grid;gap:12px}
.verify .in{display:grid;gap:8px}
.verify label{font-size:12px;color:var(--ink3);font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em}
.verify .fld{background:#0C1220;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font-family:var(--mono);font-size:13px;color:var(--ink)}
.verify .out{display:flex;align-items:center;gap:12px;min-width:0;background:rgba(47,224,168,.08);border:1px solid rgba(47,224,168,.25);border-radius:10px;padding:14px}
.verify .out .r{font-family:var(--mono);font-weight:700;font-size:22px;color:var(--cashout)}
.verify .out .chk{margin-left:auto;color:var(--cashout);font-weight:700;font-size:13px}

/* EV calc */
.ev{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center}
.ev .slider{height:8px;border-radius:4px;background:linear-gradient(90deg,var(--cashout),var(--amber),var(--crash));position:relative;margin:22px 0}
.ev .slider .knob{position:absolute;top:50%;left:38%;transform:translate(-50%,-50%);width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.5)}
.ev .ev-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:8px;border-radius:4px;border:0;background:linear-gradient(90deg,var(--cashout),var(--amber),var(--crash));margin:22px 0;outline:none;cursor:pointer}
.ev .ev-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border:0;border-radius:50%;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.5);cursor:pointer}
.ev .ev-range::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.5);cursor:pointer}
.ev .ev-range:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.28)}
.ev .readout{display:grid;gap:10px}
.ev .stat{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:8px}
.ev .stat .n{font-family:var(--mono);font-weight:700;font-size:20px}
.ev .stat .n.g{color:var(--cashout)} .ev .stat .n.r{color:var(--crash)}

/* predictor debunk */
.debunk{background:repeating-linear-gradient(45deg,rgba(255,59,78,.04),rgba(255,59,78,.04) 12px,transparent 12px,transparent 24px);border:1px solid rgba(255,59,78,.3);border-radius:14px;padding:20px;text-align:center}
.debunk .stamp{display:inline-block;font-family:var(--mono);font-weight:700;letter-spacing:.1em;color:var(--crash);border:2px solid var(--crash);border-radius:8px;padding:6px 14px;transform:rotate(-3deg);text-transform:uppercase;font-size:13px}
.debunk h3,.debunk h2{margin:14px 0 6px;font-weight:700;font-size:20px;line-height:1.3}
.debunk p{color:var(--ink2);font-size:14px;max-width:52ch;margin:0 auto}
/* один абзац центрируем — это плакат. Два и больше — уже проза, её центрировать нельзя:
   тираж кладёт в дебанк по два-три абзаца, и по центру они нечитаемы */
.debunk:has(p+p){text-align:left}
.debunk:has(p+p) p{max-width:none;margin:0 0 10px}
.debunk:has(p+p) p:last-child{margin-bottom:0}

/* round history */
.history{display:flex;gap:7px;flex-wrap:wrap}
.history b,.history strong{font-family:var(--mono);font-size:13px;font-weight:700;padding:5px 9px;border-radius:7px;background:var(--elev)}
.history b.lo,.history strong.lo{color:#8FD3FF;background:rgba(46,155,224,.16)}
.history b.mid,.history strong.mid{color:#C4A9FF;background:rgba(139,92,246,.18)}
.history b.hi,.history strong.hi{color:#FF9AD5;background:rgba(255,59,120,.18)}

/* crash grid */
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.cgrid .g{background:var(--elev);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cgrid .g .top{height:80px;background:radial-gradient(circle at 70% 20%,rgba(255,122,61,.3),transparent 60%),var(--elev2);display:grid;place-items:center;font-weight:700;letter-spacing:-.02em;font-size:18px}
.cgrid .g .b{padding:12px}
.cgrid .g .b .row{display:flex;justify-content:space-between;font-size:12px;color:var(--ink2);margin-top:5px}
.cgrid .g .b .row .mono{color:var(--ink)}

/* blog + social */
.blog{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.blog a{background:var(--elev);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:block}
.blog .ph{height:110px;background:linear-gradient(120deg,var(--elev2),#0C1220)}
.blog .bd{padding:14px}
.blog .cat{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--heat)}
.blog h4{margin:6px 0;font-size:15px}
.blog .m{color:var(--ink3);font-size:12px}
.social{display:flex;gap:12px;flex-wrap:wrap}
.soc{display:flex;gap:11px;align-items:center;background:var(--elev);border:1px solid var(--line);border-radius:12px;padding:13px 16px}
.soc .i{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-weight:700;flex:none}
.soc .tg{background:#229ED9;color:#fff}.soc .x{background:#0A0D14;color:#fff;border:1px solid var(--line2)}.soc .yt{background:#FF0033;color:#fff}
.soc b,.soc strong{display:block;font-size:14px}.soc span{color:var(--ink3);font-size:12px}

/* image library */
.lib-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.lib-gallery .im{aspect-ratio:1;border-radius:10px;border:1px solid var(--line);background:linear-gradient(135deg,var(--elev2),#0C1220);position:relative;overflow:hidden}
.lib-gallery .im span{position:absolute;bottom:6px;left:6px;font-family:var(--mono);font-size:9px;color:var(--ink3);background:rgba(0,0,0,.5);padding:2px 5px;border-radius:4px}

/* footer */
.foot{border-top:1px solid var(--line);padding:26px;color:var(--ink3);font-size:13px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:20px}
.foot .rg{display:flex;gap:10px;align-items:center}
.foot .rg .n{width:34px;height:34px;border-radius:8px;background:var(--elev2);display:grid;place-items:center;font-weight:700;color:var(--crash)}

.crumbs{font-size:13px;color:var(--ink3)}
.crumbs a{color:var(--ink2)} .crumbs .sep{margin:0 8px;opacity:.5}

@media(max-width:640px){.pc,.ev{grid-template-columns:1fr}.nav .links{display:none}}
@media(prefers-reduced-motion:reduce){.sim canvas{opacity:.9}}
.note-foot{color:var(--ink3);font-size:13px;padding:30px 0 60px;text-align:center;font-family:var(--mono)}

/* ---- page-level layout (shared by all page types) ---- */
.site-head{position:sticky;top:0;z-index:40;padding:14px 0;background:linear-gradient(180deg,var(--bg),rgba(10,13,20,.6) 70%,transparent)}
.sec{padding:var(--sec-y) 0;border-top:1px solid var(--line)}
.sec:first-of-type{border-top:0}
.sec-title{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  margin-bottom:var(--stack);flex-wrap:wrap}
.sec-title h2{font-family:var(--disp);font-weight:700;font-size:var(--fs-2);
  line-height:var(--lh-2);letter-spacing:var(--ls-2);max-width:22ch}
.sec-title .eyebrow{display:block;margin-bottom:9px}
.hero-logo{max-width:300px;width:56%;display:block;margin-bottom:6px}
.mock{background:rgba(255,194,75,.1);border:1px solid rgba(255,194,75,.3);color:var(--amber);font-size:12px;font-family:var(--mono);text-align:center;padding:7px;border-radius:9px;margin:10px auto 0;max-width:1080px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* ---- ритм текстового потока ----------------------------------------
   Отступы заголовков считались в em ОТ САМОГО ЗАГОЛОВКА: 1.9em у h2 —
   это 1.9 × 48px = 91px, а вовсе не «две строки текста», как было
   заявлено. Из-за этого шаг ритма ехал вместе с кеглем заголовка и на
   разных ступенях был разный. Единица ритма теперь одна на весь поток —
   строка корпуса (--rhythm ≈ 28px), и все отступы кратны ей.
   Отступ сверху всегда заметно больше нижнего: заголовок физически
   ближе к своему тексту, чем к предыдущему блоку, — группировка
   читается без единой линейки. */
.prose{font-size:var(--fs-body);line-height:var(--lh-prose);color:var(--ink-body)}
.prose p{color:var(--ink-body);max-width:var(--measure);
  margin:0 0 calc(var(--rhythm) * .9);
  line-height:var(--lh-prose);text-wrap:pretty;overflow-wrap:break-word}
/* Базовый перенос для текста ВНЕ `.prose` — абзацы внутри <details>, карточек,
   таблиц. Срабатывает только тогда, когда слово иначе вылезло бы за край, поэтому
   на раскладку помещающегося текста не влияет вовсе. Поймано на корейской странице:
   цепочка «Google·Telegram·VK·Odnoklassniki» не даёт точек переноса и вылезала
   за подложку. Такие цепочки есть на всех локалях — это названия сервисов. */
p,li,dd,figcaption,td,th,.stat-tile span,.mcard-b span{overflow-wrap:break-word}
.prose>:first-child{margin-top:0}
.prose>:last-child{margin-bottom:0}
.prose h2{margin:calc(var(--rhythm) * 2.2) 0 calc(var(--rhythm) * .6)}
.prose h3{margin:calc(var(--rhythm) * 1.7) 0 calc(var(--rhythm) * .5);max-width:var(--measure-narrow)}
.prose h4{margin:calc(var(--rhythm) * 1.2) 0 calc(var(--rhythm) * .35);color:var(--ink)}
.prose ul,.prose ol{max-width:var(--measure);margin:0 0 calc(var(--rhythm) * .9);padding-left:1.35em;color:var(--ink-body)}
.prose li{margin:0 0 calc(var(--rhythm) * .32);line-height:var(--lh-prose)}
.prose li::marker{color:var(--heat)}
.prose b,.prose strong{color:var(--ink);font-weight:700}
.prose a{text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--sky) 40%,transparent);
  text-underline-offset:.18em;text-decoration-thickness:1px}
.prose a:hover{text-decoration-color:var(--sky)}
@media(max-width:720px){.two,.three{grid-template-columns:1fr}}

/* ---- icon system (inline SVG sprite: icons.svg) ---- */
.icn{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.18em}
.mk .icn{stroke:#fff;width:15px;height:15px}
.btn .icn{width:15px;height:15px}
.nav .links span .icn,.locale .icn{width:14px;height:14px}
.callout .ic .icn,.badge .ic .icn,.fx .i .icn,.soc .i .icn{width:18px;height:18px;stroke:currentColor}
.pill .icn{width:13px;height:13px}
.usps li .icn,.check-list .ck .icn,.pc ul li .icn{width:13px;height:13px}

/* ===== Mega-menu header ===== */
.hdr{position:sticky;top:0;z-index:50;background:rgba(10,13,20,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr-inner{display:flex;align-items:center;gap:16px;height:66px;position:relative}
.hdr .brand{font-weight:700;letter-spacing:-.02em;color:var(--ink);display:flex;align-items:center;gap:9px;font-size:19px}
.mainnav{display:flex;align-items:center;gap:2px;margin-left:6px}
.nav-item{position:relative}
.nav-item>button{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--ink2);font:inherit;font-weight:600;font-size:14px;padding:10px 12px;border-radius:9px;cursor:pointer}
.nav-item>button:hover,.nav-link:hover{color:var(--ink);background:var(--elev)}
.nav-item>button .chev{width:13px;height:13px;opacity:.7;transition:transform .15s}
.nav-item:hover>button .chev{transform:rotate(180deg)}
.nav-link{display:inline-flex;align-items:center;color:var(--ink2);font-weight:600;font-size:14px;padding:10px 12px;border-radius:9px}
.mega{position:absolute;top:calc(100% + 10px);left:0;min-width:440px;background:var(--surface);border:1px solid var(--line2);border-radius:14px;padding:16px;box-shadow:0 24px 60px -22px rgba(0,0,0,.75);opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s}
.nav-item:hover .mega{opacity:1;visibility:visible;transform:none}
.mega::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.mega-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mega-col{min-width:0}
.mega-h{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:6px}
.mega-link{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:var(--ink2);font-size:14px;font-weight:500}
.mega-link:hover{background:var(--elev);color:var(--ink)}
.mega-link .icn{color:var(--heat);width:16px;height:16px}
.hdr-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.locale-switch{position:relative}
/* Кнопка «Играть на деньги» в шапке, рядом с «Открыть демо». Демо — виртуальный
   баланс, и переход «на свои» должен быть виден с первого экрана. Ниже 760px в
   шапке места нет: там обе кнопки живут в первом экране героя. */
.hdr-play{font-size:13.5px;padding:8px 14px;margin-left:8px}
@media(max-width:760px){.hdr-play{display:none}}
@media(min-width:560px) and (max-width:760px){.hdr-play{display:inline-flex}}
/* ⚠ На AMP эта кнопка помещается свободно: там вместо мега-меню бургер. На обычном
   сайте меню занимает 630 пикселей, и на 1280 вторая кнопка выталкивала шапку за
   экран — на португальском сразу на 48 пикселей («Jogar com dinheiro real» шире
   русского на 34). Ниже 1400px уплотняем всю строку шапки: так помещаются обе
   кнопки на всех 23 языках, включая самый длинный шведский. */
@media(max-width:1400px){
  .hdr-inner{gap:8px}
  .mainnav .nav-btn{padding-left:7px;padding-right:7px;font-size:13.5px}
  .hdr-play{font-size:12.5px;padding:6px 10px;margin-left:2px}
}

.locale-switch>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;color:var(--ink2);font-size:13px;border:1px solid var(--line2);padding:7px 11px;border-radius:9px}
.locale-switch>summary::-webkit-details-marker{display:none}
.locale-switch[open]>summary{color:var(--ink);border-color:var(--heat)}
.locale-menu{position:absolute;
  /* ⚠ Было физическое `right:0`. В RTL это прижимает панель правым краем к самому
     переключателю, а он в арабской шапке стоит слева, — список из 23 языков уезжал
     за левый край экрана на 158 пикселей. Логическое свойство разворачивается
     вместе с направлением письма. */
  inset-inline-end:0;top:calc(100% + 8px);background:var(--surface);border:1px solid var(--line2);border-radius:12px;padding:6px;min-width:190px;box-shadow:0 20px 50px -20px rgba(0,0,0,.7);z-index:5}
.locale-menu a{display:block;padding:8px 10px;border-radius:8px;color:var(--ink2);font-size:14px}
.locale-menu a:hover{background:var(--elev);color:var(--ink)}
.hamburger{display:none;place-items:center;width:40px;height:40px;border-radius:9px;border:1px solid var(--line2);color:var(--ink);cursor:pointer}
@media(max-width:980px){
  .mainnav{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;background:var(--surface);border-bottom:1px solid var(--line2);padding:12px;max-height:82vh;overflow:auto;box-shadow:0 24px 60px -20px rgba(0,0,0,.7)}
  .navtoggle-cb:checked ~ .mainnav{display:flex}
  .nav-item>button{width:100%;justify-content:space-between}
  .nav-item:hover>button .chev{transform:none}
  .mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;min-width:0;border:0;padding:2px 0 8px 14px;background:transparent}
  .hamburger{display:grid}
  .hdr-cta{display:none}
}
/* ===== Footer ===== */
.ftr{border-top:1px solid var(--line);margin-top:20px;background:linear-gradient(180deg,transparent,rgba(139,92,246,.03))}
.ftr-top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:28px;padding:48px 0 30px}
.ftr-brand .brand{font-weight:700;font-size:20px;color:var(--ink);display:flex;align-items:center;gap:9px;margin-bottom:12px}
.ftr-brand p{color:var(--ink3);font-size:13.5px;max-width:36ch;margin:0 0 16px}
.ftr-social{display:flex;gap:10px}
.ftr-social a{width:38px;height:38px;border-radius:10px;border:1px solid var(--line2);display:grid;place-items:center;color:var(--ink2)}
.ftr-social a:hover{color:var(--ink);border-color:var(--heat)}
.ftr-col h5{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin:0 0 12px}
.ftr-col a{display:block;color:var(--ink2);font-size:14px;padding:5px 0}
.ftr-col a:hover{color:var(--heat)}
.ftr-bottom{border-top:1px solid var(--line);padding:20px 0;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.ftr-bottom .rgline{display:flex;align-items:center;gap:10px;color:var(--ink3);font-size:12.5px;max-width:70ch}
.ftr-bottom .rgline .n{width:34px;height:34px;border-radius:8px;background:var(--elev2);display:grid;place-items:center;font-weight:700;color:var(--crash);font-size:12px;flex:none}
.ftr-copy{color:var(--ink3);font-size:12px}
.ftr-legal{color:var(--ink3);font-size:11.5px;max-width:78ch;line-height:1.6;padding:0 0 44px}
@media(max-width:820px){.ftr-top{grid-template-columns:1fr 1fr;gap:22px}}
@media(max-width:520px){.ftr-top{grid-template-columns:1fr}}

.hdr-logo{height:40px;width:auto;display:block}
@media(max-width:520px){.hdr-logo{height:32px}.hdr .brand>span{display:none}}

/* full-width header/footer (body stays contained) */
.hdr .hdr-inner{max-width:none;padding-left:32px;padding-right:32px}
.ftr>.wrap{max-width:none;padding-left:40px;padding-right:40px}

/* ---- live crash simulator (sim.js) ---- */
.sim canvas{height:280px}
.sim .mult{transition:color .18s}
.sim .mult.out{color:var(--crash)}
.sim-top{position:absolute;top:18px;right:20px;display:flex;flex-direction:column;align-items:flex-end;gap:6px;z-index:2}
.sim-top .st{position:static;color:var(--ink2)}
.sim-bal{font-family:var(--mono);font-size:12px;color:var(--ink3)}
.sim-bal b,.sim-bal strong{color:var(--cashout)}
.sim .ctl{bottom:16px;gap:8px;flex-wrap:wrap}
.sim .ctl label{display:flex;align-items:center;gap:8px;flex:1;min-width:150px;background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:9px;padding:7px 12px;font-family:var(--mono);font-size:12px;color:var(--ink3)}
.sim .ctl input{width:100%;background:transparent;border:0;outline:0;color:var(--ink);font-family:var(--mono);font-size:14px;font-weight:700}
.btn.sim-btn{min-width:190px;justify-content:center;font-weight:700}
.btn.sim-btn:disabled{opacity:.45;cursor:default;box-shadow:none}
.sim-toast{position:absolute;left:20px;right:20px;bottom:72px;background:rgba(10,13,20,.94);border:1px solid var(--line2);
  border-radius:10px;padding:10px 14px;font-size:13px;color:var(--ink2);opacity:0;transform:translateY(6px);
  transition:.22s;pointer-events:none}
.sim-toast.show{opacity:1;transform:none}
.sim-toast.good{border-color:rgba(47,224,168,.5);color:#9CF3D8}
.sim-toast.bad{border-color:rgba(255,59,78,.5);color:#FFB3BA}
.fair{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.fair .f{background:var(--elev);border:1px solid var(--line);border-radius:12px;padding:13px 15px;min-width:0}
.fair .f h5,.fair .f .f-lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-family:var(--mono);font-weight:700;margin:0}
.fair code{display:block;margin-top:7px;font-family:var(--mono);font-size:12px;color:var(--ink);word-break:break-all;line-height:1.5}
.fair code.muted{color:var(--ink3)}
.fair .f input{margin-top:7px;width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:8px;
  padding:6px 10px;color:var(--ink);font-family:var(--mono);font-size:12px;outline:0}
.fair-proof{grid-column:1/-1;background:rgba(47,224,168,.06);border-color:rgba(47,224,168,.24)}
.fair-proof code{color:var(--ink2)}
.fair-proof .ok{color:var(--cashout)}
.sim-note{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center;margin-top:12px}
.sim-note button{background:none;border:1px solid var(--line2);color:var(--ink3);border-radius:8px;padding:5px 11px;
  font-family:var(--mono);font-size:11px;cursor:pointer}
.sim-note button:hover{color:var(--ink);border-color:var(--heat)}
@media(max-width:720px){.fair{grid-template-columns:1fr}.sim canvas{height:220px}.sim .ctl{position:static;padding:0 16px 16px}
  .sim .mult{position:static;padding:14px 20px 0}.sim-top{position:static;align-items:flex-start;padding:6px 20px 0}}

/* ---- real screenshots ---- */
.shot{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.shot img{display:block;width:100%;height:auto;border-bottom:1px solid var(--line)}
.shot figcaption{padding:13px 16px;color:var(--ink2);font-size:13.5px;line-height:1.62}
.shot figcaption code{font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.sim .ctl label{white-space:nowrap}
.sim .ctl label input{min-width:0}
section[id],.author[id]{scroll-margin-top:96px}

/* feature cards: icon column + stacked title/body (was: three flex siblings squeezing each other) */
.feat{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.fx{display:grid;grid-template-columns:34px 1fr;column-gap:12px;align-items:start;padding:14px 15px}
.fx .i{grid-row:1/3;align-self:center}
.fx b,.fx strong{grid-column:2;font-size:14.5px;margin-bottom:3px}
.fx span{grid-column:2;font-size:12.5px;line-height:1.55;color:var(--ink2)}

/* ---- split hero with a real game screenshot ---- */
.hero-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:30px;align-items:center}
.hero-split .grid-bg{grid-column:1/-1}
.hero-copy{position:relative;min-width:0}
.hero-shot{position:relative;margin:0;min-width:0}
.hero-shot img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line2);
  box-shadow:0 28px 60px -24px rgba(0,0,0,.85),0 0 0 6px rgba(255,255,255,.02)}
.hero-shot figcaption{margin-top:12px;color:var(--ink3);font-size:12.5px;line-height:1.55}
.hs-badge{display:flex;align-items:center;gap:8px;margin-bottom:7px;color:var(--cashout);font-size:12.5px}
.hs-badge b,.hs-badge strong{color:var(--cashout);font-family:var(--mono)}
@media(max-width:900px){.hero-split{grid-template-columns:1fr;gap:22px}}
@media(max-width:720px){.sim .ctl{flex-direction:column;align-items:stretch}
  .sim .ctl label{min-width:0}.btn.sim-btn{width:100%}}

/* =====================================================================
   AVIATOR-GAMES — DESIGN SYSTEM v2 · только добавления, ничего не переопределяет
   ---------------------------------------------------------------------
   Направление. Интерфейс самой игры — это HUD: моноширинный множитель,
   лента прошедших раундов, кнопка, которую надо успеть нажать. Отсюда два
   правила системы, а не украшения:
     1. Любое число на странице — моноширинное с tabular-nums. Коэффициент,
        RTP, срок вывода, оценка. Текст — гротеск, данные — моно.
     2. «Срез» (--cut): волосок 2px, который разгоняется от --heat к --crash
        и обрывается на 60%, не досветив до края. Это форма краш-раунда.
        Он и есть подпись системы: панели, инструменты и методика несут его,
        всё остальное держится тихо.
   Палитра сведена к четырём ролям: --grad = действие и бренд,
   --cashout = подтверждено, --amber = рейтинг, --ink3 = служебное.
   --av-* остаются только внутри иллюстраций логотипа и арта.
   Обе темы обязательны: все подложки, тени и заливки идут через токены.
   ===================================================================== */

:root{
  /* шкала радиусов: чип → карточка → панель. Иерархия радиусов сама даёт «дороже» */
  --r-s:10px; --r-l:20px; --r-xl:26px;
  /* тени */
  --sh-sm:0 6px 16px -10px rgba(0,0,0,.7);
  --sh:0 18px 40px -22px rgba(0,0,0,.75);
  --sh-hot:0 26px 52px -24px rgba(255,59,78,.4);
  /* служебные подложки, чтобы hover и зебра работали в обеих темах */
  --zebra:rgba(255,255,255,.022);
  --hover:rgba(255,255,255,.04);
  --glass:rgba(255,255,255,.14);
  --plate:#FFFFFF;
  /* подпись системы */
  --cut:linear-gradient(90deg,transparent,var(--heat) 18%,var(--crash) 52%,transparent 60%);
  /* дисплейный гротеск: вебфонт подключён, стек живёт в --disp.
     Алиас оставлен, чтобы старые правила (.tt-*, .cta-banner) не переписывать. */
  --font-disp:var(--disp);
  --sticky-top:66px;
}

/* ---------------------------------------------------------------
   Типографическая шкала (новые классы, старые не трогаем)
   h1 и h2 на старой шкале слипались, h3 проваливался в текст.
   uppercase-display только на h1/h2 и заголовках панелей;
   всё карточное — mixed case 700.
   --------------------------------------------------------------- */
.tt-1{font-family:var(--disp);font-weight:var(--w-disp);font-size:var(--fs-1);
  line-height:var(--lh-1);letter-spacing:var(--ls-1);text-wrap:balance}
.tt-2{font-family:var(--disp);font-weight:var(--w-disp);font-size:var(--fs-2);
  line-height:var(--lh-2);letter-spacing:var(--ls-2);text-wrap:balance}
/* .tt-3 держим синхронно с h3 — иначе одна и та же ступень шкалы
   набиралась бы двумя разными гарнитурами в зависимости от разметки. */
.tt-3{font-family:var(--disp);font-weight:var(--w-sub);font-size:var(--fs-3);
  line-height:var(--lh-3);letter-spacing:var(--ls-3)}
.tt-4{font-family:var(--font);font-size:var(--fs-4);font-weight:600;
  line-height:var(--lh-4);letter-spacing:var(--ls-4)}
.tt-1 em,.tt-2 em{font-style:normal;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* Одна печатная строка «капсы + линейка» над заголовком. Каверза системы
   собрана здесь: чем крупнее и теснее заголовок, тем мельче и шире надпись. */
.lede{font-size:var(--fs-lede);line-height:var(--lh-prose);color:var(--ink2);
  max-width:var(--measure);margin:var(--stack) 0 0;text-wrap:pretty}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  font-variant-ligatures:none;font-weight:700;letter-spacing:-.02em}
.num.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.num.cash{color:var(--cashout)}
.num.hot{color:var(--crash)}

/* ---------------------------------------------------------------
   Ритм страницы: контейнер шире, воздух по весу секции, чередование грунтов
   --------------------------------------------------------------- */
.wrap.wide{max-width:1180px}
.sec.lg{padding-top:clamp(60px,8vw,96px);padding-bottom:clamp(60px,8vw,96px)}
.sec.sm{padding-top:clamp(34px,4vw,52px);padding-bottom:clamp(34px,4vw,52px)}
.sec.seam{border-top:0}
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band>.sec,.band .sec:first-of-type{border-top:0}
.band-elev{background:var(--elev)}
.band-deep{background:linear-gradient(180deg,#080B12,var(--bg))}
/* «срез» — подпись системы, ставится на тяжёлые панели */
.cut-top{position:relative}
.cut-top::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--cut)}

/* ---------------------------------------------------------------
   1. ВИТРИНА ОПЕРАТОРОВ — .opshelf / .opgrid / .opcard
   Главный недостающий блок: ранг, лого, рейтинг, бонус, буллеты, две CTA.
   --------------------------------------------------------------- */
.opshelf{display:grid;gap:16px}
.opshelf+.opshelf{margin-top:34px}
.shelf-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.shelf-ic{width:34px;height:34px;border-radius:var(--r-s);display:grid;place-items:center;
  background:var(--elev2);color:var(--heat);flex:none}
.shelf-head h3{font-size:18px;font-weight:700;letter-spacing:-.012em}
.shelf-note{color:var(--ink3);font-size:13px}
.shelf-all{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:13px;
  font-weight:600;color:var(--ink2);transition:gap .18s,color .18s}
.shelf-all:hover{color:var(--heat);gap:11px}

.opgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:16px}
.opcard{position:relative;display:flex;flex-direction:column;gap:13px;background:var(--elev);
  border:1px solid var(--line);border-radius:var(--r);padding:18px;
  transition:transform .18s ease,box-shadow .25s ease,border-color .2s ease}
.opcard:hover{transform:translateY(-4px);border-color:rgba(255,122,61,.45);box-shadow:var(--sh-hot)}
.opcard.top{border-color:rgba(255,122,61,.5);box-shadow:inset 0 0 0 1px rgba(255,122,61,.18)}
.op-ribbon{position:absolute;top:14px;right:-1px;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:6px 0 0 6px;
  background:var(--grad);color:#fff}
.op-ribbon.quiet{background:var(--elev2);color:var(--ink3)}
.op-ribbon.sponsored{background:var(--elev2);color:var(--amber)}
.op-top{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:center}
.op-logo{width:48px;height:48px;border-radius:var(--r-s);background:#6b7686;display:grid;
  place-items:center;overflow:hidden;flex:none;border:1px solid var(--line)}
.op-logo img{width:100%;height:100%;object-fit:contain;padding:5px}
/* Заглушка до появления логотипов: не «двухбуквенная плашка», а плита в цвете бренда.
   Меняется на <img> без правки разметки вокруг. */
.op-plate{width:48px;height:48px;border-radius:var(--r-s);display:grid;place-items:center;flex:none;
  font-family:var(--mono);font-weight:700;font-size:13px;font-style:normal;letter-spacing:.02em;
  color:var(--brand,var(--ink));
  background:color-mix(in srgb,var(--brand,#7C8AA5) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--brand,#7C8AA5) 42%,transparent)}
.op-nm{display:block;font-weight:700;font-size:15.5px;color:var(--ink);line-height:1.25}
.op-est{font-family:var(--mono);font-size:11.5px;color:var(--ink3)}
.op-rt{display:flex;align-items:center;gap:8px;margin-top:4px}
.op-rt b,.op-rt strong{font-family:var(--mono);font-size:13px;color:var(--amber);font-variant-numeric:tabular-nums}
.op-bonus{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0}
.op-bonus .b-n{font-family:var(--mono);font-weight:700;font-size:19px;letter-spacing:-.02em;
  color:var(--ink);font-variant-numeric:tabular-nums}
.op-bonus .b-l{display:block;font-size:11.5px;color:var(--ink3);margin-top:3px}
.op-usps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:7px;font-size:13px;line-height:1.5;color:var(--ink2)}
.opcard{min-width:0}
.op-top>div{min-width:0}
/* Cards without a logo keep the heading across the full grid. */
.op-top>div:only-child{grid-column:1 / -1}
.op-usps li{display:grid;grid-template-columns:15px minmax(0,1fr);gap:8px;align-items:start}
/* Пункт без иконки: анонимный текст иначе попадает в 15px-колонку иконки,
   переносится по слову и вытягивает всю строку карточек. */
.op-usps li:not(:has(>.icn)),.tl-usps li:not(:has(>.icn)){display:block}
.op-usps .icn{color:var(--cashout);margin-top:3px}
.op-usps li.no{color:var(--ink3)}
.op-usps li.no .icn{color:var(--crash)}
.op-tags{display:flex;gap:6px;flex-wrap:wrap}
.op-cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:auto}
.op-terms{font-size:11px;color:var(--ink3);line-height:1.45}

/* ---------------------------------------------------------------
   2. РАНГОВАЯ КАРТОЧКА ТОПЛИСТА — .tl-item / .tl-card / details.moreinfo
   --------------------------------------------------------------- */
.tl-list{display:grid;gap:14px}
.tl-item{background:var(--elev);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .2s,box-shadow .25s}
.tl-item:hover{border-color:var(--line2);box-shadow:var(--sh)}
.tl-item.top{border-color:var(--heat);box-shadow:inset 0 0 0 1px rgba(255,122,61,.3)}
/* ⚠ Первая колонка была ровно 44px — под русское «Топ». Подпись места в лицензии
   на других языках длиннее («GGL-LIZENZIERT», «CONCESSIONE VERIFICATA») и вылезала
   поверх логотипа оператора. minmax даёт колонке вырасти под подпись, забирая
   место у гибкой колонки текста, а не наезжая на соседа. */
.tl-card{display:grid;grid-template-columns:minmax(44px,max-content) 84px minmax(0,1fr) 120px auto;gap:18px;
  align-items:center;padding:20px 22px}
.tl-item>.tl-card{background:transparent;border:0}
.tl-rank{text-align:center}
.tl-rank .n{font-family:var(--mono);font-weight:700;font-size:30px;line-height:1;color:var(--ink3);
  font-variant-numeric:tabular-nums}
.tl-item.top .tl-rank .n{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.tl-rank .lbl{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink3);margin-top:4px;
  /* На узком экране колонке места не хватает и minmax сжимает её до минимума —
     тогда длинная подпись обязана переноситься, иначе ложится на логотип. */
  overflow-wrap:break-word}
.tl-logo{width:56px;height:56px;border-radius:var(--r-s);background:var(--plate);display:grid;
  place-items:center;overflow:hidden;border:1px solid var(--line)}
.tl-logo img{width:100%;height:100%;object-fit:contain;padding:6px}
.tl-logo .op-plate{width:56px;height:56px;font-size:14px}
.tl-info{min-width:0}
.tl-est{font-family:var(--mono);font-size:11.5px;color:var(--ink3)}
.tl-name{font-weight:700;font-size:16px;color:var(--ink);display:block;line-height:1.25}
.tl-bonus{font-size:20px;font-weight:700;color:var(--ink);margin:3px 0 5px;line-height:1.2}
.tl-bonus b,.tl-bonus strong{font-family:var(--mono);color:var(--heat);font-variant-numeric:tabular-nums}
.rating-line{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink3);flex-wrap:wrap}
.rating-line b,.rating-line strong{font-family:var(--mono);color:var(--ink);font-variant-numeric:tabular-nums}
.rating-line .lbl{color:var(--cashout);font-weight:600}
.tl-usps{list-style:none;margin:10px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:5px 18px;font-size:13px;color:var(--ink2)}
.tl-usps li{display:grid;grid-template-columns:15px minmax(0,1fr);gap:8px;align-items:start}
.tl-usps .icn{color:var(--cashout);margin-top:3px}
.tl-usps li.no{color:var(--ink3)}
.tl-usps li.no .icn{color:var(--crash)}
.tl-score{text-align:center}
.tl-score .n{font-family:var(--mono);font-weight:700;font-size:30px;line-height:1;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums}
.verdict-w{display:block;font-size:11px;color:var(--ink3);margin-top:5px;line-height:1.3}
.tl-cta{display:grid;gap:8px;min-width:176px}
.terms{font-size:11px;color:var(--ink3);text-align:center;line-height:1.4}
/* раскрывашка на 6 секций — сюда ложатся факты из _facts/ */
.moreinfo{border-top:1px solid var(--line)}
.moreinfo>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  gap:8px;padding:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink3)}
.moreinfo>summary::-webkit-details-marker{display:none}
.moreinfo>summary:hover{color:var(--ink)}
.moreinfo>summary .chev{transition:transform .18s}
.moreinfo[open]>summary .chev{transform:rotate(180deg)}
.mi-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 30px;padding:2px 22px 22px}
.mi-sec h5,.mi-sec h3{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-family:var(--mono);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);font-weight:700}
.mi-sec h5 .icn,.mi-sec h3 .icn{color:var(--heat);width:14px;height:14px}
.mi-sec p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink2)}

/* ---------------------------------------------------------------
   3. ДРОБНЫЙ РЕЙТИНГ — .stars.frac (ASCII ★★★★☆ округляет 4.7 до пяти глифов)
   Разметка: <span class="stars frac" style="--fill:94%"><span class="b">5 svg</span>
             <span class="f">5 svg</span></span>
   --------------------------------------------------------------- */
.stars.frac{position:relative;display:inline-flex;white-space:nowrap;vertical-align:-3px;
  letter-spacing:0;line-height:1}
.stars.frac .b,.stars.frac .f{display:inline-flex;gap:2px}
.stars.frac .b{color:color-mix(in srgb,var(--ink3) 40%,transparent)}
.stars.frac .f{position:absolute;inset:0;width:var(--fill,100%);overflow:hidden;color:var(--amber)}
.stars.frac svg{width:15px;height:15px;fill:currentColor;stroke:none;flex:none}
.stars.frac.sm svg{width:12px;height:12px}
.stars.frac.lg svg{width:18px;height:18px}

/* ---------------------------------------------------------------
   4. ТАБЛИЦЫ: общая обвязка + три типа
   Зебра, залипающая шапка на десктопе, горизонтальный скролл с намёком на мобильном.
   --------------------------------------------------------------- */
.tscroll{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.tscroll>table{margin:0}
.tzebra tbody tr:nth-child(even){background:var(--zebra)}
.thover tbody tr{transition:background .15s}
.thover tbody tr:hover{background:var(--hover)}
@media(min-width:901px){
  .tsticky thead th{position:sticky;top:var(--sticky-top);z-index:2}
}
@media(max-width:900px){
  .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 93%,transparent);
    mask-image:linear-gradient(90deg,#000 93%,transparent)}
  .tscroll>table{min-width:640px}
  /* Модификатор .tnarrow — для таблиц в 2–3 колонки, которые помещаются в 390px.
     Без него базовый min-width:640px гнал их в горизонтальный скролл, и правая
     колонка (значение!) уезжала под маску-градиент — то есть числа не было видно
     вообще. Базовый класс не трогаем: он нужен широким таблицам кассы. */
  .tscroll.tnarrow{-webkit-mask-image:none;mask-image:none}
  .tscroll.tnarrow>table{min-width:0}
  .tscroll.tnarrow th,.tscroll.tnarrow td{padding-left:12px;padding-right:12px}
  /* .cmp thead th стоит nowrap — на узкой таблице длинная шапка из-за него
     вылезала за контейнер, хотя данные помещались. Только внутри .tnarrow. */
  .tscroll.tnarrow thead th{white-space:normal}
}
.table-note{font-size:12.5px;color:var(--ink3);margin:10px 2px 0;line-height:1.5}

/* 4a. Компактная витрина-таблица .cmp — логотип, оценка, кнопка в каждой строке */
.cmp{width:100%;font-size:14px}
.cmp thead th{background:var(--elev2);font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink3);font-weight:600;padding:12px 14px;white-space:nowrap}
.cmp td{padding:13px 14px;vertical-align:middle;border-bottom:1px solid var(--line)}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp-brand{display:flex;align-items:center;gap:11px;min-width:152px}
.cmp-brand .op-plate,.cmp-brand .casino-logo{width:30px;height:30px;border-radius:8px;font-size:10px}
.cmp-brand .casino-logo{background:var(--plate);border:1px solid var(--line);object-fit:contain;padding:3px}
.cmp-brand a{color:var(--ink);font-weight:700}
.cmp-brand a:hover{color:var(--heat)}
.cmp-rate{white-space:nowrap}
.cmp-rate b,.cmp-rate strong{font-family:var(--mono);font-size:17px;color:var(--cashout);font-variant-numeric:tabular-nums}
.cmp-rate small{display:block;color:var(--ink3);font-size:11px}
.cmp .yes,.matrix .yes{color:var(--cashout);font-weight:700}
.cmp .no,.matrix .no{color:var(--crash);font-weight:700}
.cmp-note{font-size:12.5px;color:var(--ink3);margin:10px 2px 0;line-height:1.5}

/* 4b. Матрица фактов .matrix — центрированные ячейки, подсветка лучшего значения */
.matrix{width:100%;font-size:14px}
.matrix thead th{background:var(--elev2);color:var(--ink);font-family:var(--font);font-weight:700;
  font-size:12.5px;letter-spacing:0;text-transform:none;text-align:center;padding:13px 16px;white-space:nowrap}
.matrix td,.matrix tbody th{padding:14px 16px;text-align:center;border-bottom:1px solid var(--line)}
.matrix tbody th{text-align:left;font-family:var(--font);font-size:14px;font-weight:700;
  letter-spacing:0;text-transform:none;color:var(--ink);background:var(--surface)}
.matrix tbody tr:nth-child(even){background:var(--zebra)}
.matrix tbody tr:nth-child(even) th{background:var(--surface)}
.matrix tbody tr:hover{background:var(--hover)}
.matrix .best{color:var(--cashout);font-weight:700}
.matrix .best::after{content:" ★";color:var(--amber);font-size:11px}
.matrix .na{color:var(--ink3)}
.matrix .mono{font-variant-numeric:tabular-nums}
@media(max-width:900px){
  .matrix tbody th{position:sticky;left:0;z-index:1;box-shadow:1px 0 0 var(--line)}
}

/* 4c. Фактшит .factsheet + .fact-table — label 44% / value bold */
.factsheet{background:var(--elev);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.factsheet>h3{display:flex;align-items:center;gap:9px;font-size:16px;font-weight:700;padding:18px 18px 10px}
.factsheet>h3 .icn{color:var(--heat)}
.fact-table{width:100%;font-size:14px}
.fact-table td{padding:12px 18px;border-bottom:1px solid var(--line)}
.fact-table td:first-child{width:44%;color:var(--ink3);font-weight:600}
.fact-table td:last-child{color:var(--ink);font-weight:700}
.fact-table tr:nth-child(even){background:var(--zebra)}
.fact-table tr:last-child td{border-bottom:0}
.fact-table .mono{font-variant-numeric:tabular-nums}
.fact-table .src{display:block;font-family:var(--mono);font-size:11px;color:var(--ink3);font-weight:400;margin-top:3px}
/* .src жил только внутри .fact-table. В table.cmp тот же span оставался инлайновым,
   и подпись источника слипалась со значением («1–3 рабочих дняпо обзору 2026»).
   Правило добавочное: вне .fact-table/.cmp у .src стилей нет и не появляется. */
.cmp .src{display:block;font-family:var(--mono);font-size:11px;line-height:1.45;
  color:var(--ink3);font-weight:400;margin-top:3px}

/* ---------------------------------------------------------------
   5. КРУПНЫЕ ЧИСЛА: стат-плитки и «ключевые параметры»
   --------------------------------------------------------------- */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.stat-tile{position:relative;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;
  background:linear-gradient(180deg,var(--elev),transparent);overflow:hidden}
.stat-tile .n{display:block;font-family:var(--mono);font-weight:700;font-size:clamp(26px,3.4vw,34px);
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-tile .l{display:block;font-size:12.5px;color:var(--ink3);margin-top:8px;line-height:1.4}
.stat-tile .d{display:block;font-family:var(--mono);font-size:11px;color:var(--ink3);margin-top:6px}
.stat-tile.cash .n{background:var(--grad-cash);-webkit-background-clip:text;background-clip:text}
.stat-tile.plain .n{background:none;color:var(--ink);-webkit-text-fill-color:var(--ink)}

.keyspec{border:1px solid var(--line);border-radius:var(--r);background:var(--elev);overflow:hidden}
.keyspec-h{display:flex;align-items:center;gap:9px;padding:14px 18px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.keyspec-h .icn{color:var(--heat);width:15px;height:15px}
.ks-row{display:grid;
  /* ⚠ Было `minmax(0,1fr) auto`: колонка значения брала max-content и в узком
     контейнере съедала всё, а ключ схлопывался до двух пикселей — на планшетной
     ширине немецкое «Andere geprüfte Anbieter mit PromptPay» просто исчезало.
     Ключу даём пол в 9 символов, значению разрешаем сжиматься. На широком экране
     раскладка та же: `max-content` при наличии места ведёт себя как `auto`. */
  grid-template-columns:minmax(9ch,1fr) minmax(0,max-content);gap:14px;align-items:baseline;
  padding:11px 18px;border-bottom:1px solid var(--line);transition:background .15s}
.ks-row:last-child{border-bottom:0}
.ks-row:hover{background:var(--hover)}
.ks-k{font-size:13.5px;color:var(--ink3)}
.ks-v{font-family:var(--mono);font-weight:700;font-size:14.5px;color:var(--ink);text-align:right;
  font-variant-numeric:tabular-nums}
.ks-v.good{color:var(--cashout)}
.ks-v.bad{color:var(--crash)}

/* ---------------------------------------------------------------
   6. ФИЧЕР-ПАНЕЛЬ — .band-feature + .bf-tiles
   --------------------------------------------------------------- */
.band-feature{position:relative;overflow:hidden;border:1px solid var(--line2);border-radius:var(--r-xl);
  padding:clamp(28px,4vw,46px);display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center;
  background:radial-gradient(700px 320px at 15% 0,rgba(255,122,61,.22),transparent 62%),var(--elev)}
.bf-copy p{color:var(--ink2);margin:14px 0 0;max-width:52ch}
.bf-copy .btn{margin-top:20px}
.bf-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bf-tiles .t{border:1px solid var(--line2);border-radius:var(--r-s);padding:15px 12px;text-align:center;
  background:linear-gradient(180deg,var(--hover),transparent)}
.bf-tiles .t b,.bf-tiles .t strong{display:block;font-family:var(--mono);font-weight:700;font-size:18px;color:var(--ink);
  font-variant-numeric:tabular-nums}
.bf-tiles .t span{display:block;font-size:11px;color:var(--ink3);margin-top:5px;line-height:1.3}
@media(max-width:900px){.band-feature{grid-template-columns:1fr;gap:26px}}
@media(max-width:420px){.bf-tiles{grid-template-columns:repeat(2,1fr)}}

/* ---------------------------------------------------------------
   7. МЕТОДИКА И ДОВЕРИЕ — .method / .reviewed / .verdict / .redflags / .mvf / .sources
   Нумерация здесь честная: это последовательность проверки, а не украшение.
   --------------------------------------------------------------- */
.method{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.method .m{position:relative;overflow:hidden;padding:22px 20px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--elev)}
.method .m .n{font-family:var(--mono);font-weight:700;font-size:28px;line-height:1;color:var(--heat)}
.method .m h4{font-size:15px;margin:10px 0 5px}
.method .m p{margin:0;font-size:13px;line-height:1.55;color:var(--ink2)}
.method .m::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--cut);
  opacity:0;transition:opacity .2s}
.method .m:hover::after{opacity:1}
.reviewed{display:flex;align-items:center;gap:11px;flex-wrap:wrap;font-size:13px;color:var(--ink3);
  border:1px dashed var(--line2);border-radius:var(--r-s);padding:11px 15px}
.reviewed .icn{color:var(--cashout);width:15px;height:15px}
.reviewed img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.reviewed b,.reviewed strong{color:var(--ink2);font-weight:600}
.reviewed a{color:var(--ink2);text-decoration:underline;text-underline-offset:2px}

.verdict{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center;
  border:1px solid var(--line2);border-radius:var(--r);background:var(--elev);padding:22px}
.scorebox{width:112px;text-align:center;border-right:1px solid var(--line);padding-right:22px}
.scorebox .n{font-family:var(--mono);font-weight:700;font-size:44px;line-height:1;
  font-variant-numeric:tabular-nums;background:var(--grad);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.scorebox .l{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink3);margin-top:7px}
.vd h3{font-size:18px;margin-bottom:7px}
.vd p{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink2)}
@media(max-width:640px){.verdict{grid-template-columns:1fr}
  .scorebox{width:auto;border-right:0;border-bottom:1px solid var(--line);padding:0 0 16px}}

.redflags{border:1px solid rgba(255,59,78,.3);background:rgba(255,59,78,.06);
  border-radius:var(--r);padding:18px 20px}
.redflags h4{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--crash)}
.redflags ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:9px}
.redflags li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:9px;font-size:13.5px;color:var(--ink2)}
.redflags .icn{color:var(--crash);margin-top:3px;width:14px;height:14px}

.mvf{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mvf .myth,.mvf .fact{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.mvf .myth{border-color:rgba(255,59,78,.28);background:rgba(255,59,78,.05)}
.mvf .fact{border-color:rgba(47,224,168,.28);background:rgba(47,224,168,.05)}
.mvf .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.mvf .myth .lbl{color:var(--crash)}
.mvf .fact .lbl{color:var(--cashout)}
.mvf p{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--ink2)}
@media(max-width:640px){.mvf{grid-template-columns:1fr}}

.sources{border-top:1px solid var(--line);padding-top:14px;font-size:12.5px;color:var(--ink3)}
.sources .sh{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.sources ol{margin:10px 0 0;padding-left:20px;display:grid;gap:7px;line-height:1.5}
.sources a{color:var(--sky);word-break:break-word}

/* исправление битого класса: раскладка была объявлена только в правиле размера иконок */
.check-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.check-list li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start;
  font-size:14px;color:var(--ink2)}
.check-list .ck{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:rgba(47,224,168,.14);color:var(--cashout);margin-top:1px}
.check-list li.no .ck{background:rgba(255,59,78,.14);color:var(--crash)}
.check-list li.wait .ck{background:rgba(255,194,75,.14);color:var(--amber)}

/* ---------------------------------------------------------------
   8. КАРТОЧКИ ИГР КАТАЛОГА — .ggrid / .gcard
   --------------------------------------------------------------- */
.ggrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:16px}
.gcard{position:relative;display:block;background:var(--elev);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;
  transition:transform .2s ease,box-shadow .25s ease,border-color .2s ease}
.gcard:hover{transform:translateY(-6px);box-shadow:var(--sh-hot);border-color:rgba(255,122,61,.4)}
.g-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--elev2)}
.g-media img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.gcard:hover .g-media img{transform:scale(1.08)}
.g-badge,.g-mult{position:absolute;top:10px;font-family:var(--mono);font-size:11px;font-weight:700;
  padding:4px 8px;border-radius:7px;background:rgba(10,13,20,.74);backdrop-filter:blur(6px);
  font-variant-numeric:tabular-nums}
.g-badge{left:10px;color:var(--cashout)}
.g-mult{right:10px;color:var(--amber)}
.g-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;gap:8px;padding:14px;opacity:0;
  background:linear-gradient(0deg,rgba(10,13,20,.94),transparent 62%);transition:opacity .2s}
.gcard:hover .g-overlay,.gcard:focus-within .g-overlay{opacity:1}
.g-body{padding:14px 15px}
.gt{display:block;font-weight:700;font-size:15px;color:var(--ink)}
.gp{display:block;font-size:12px;color:var(--ink3);margin-top:3px}
.g-row{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--ink3);margin-top:9px}
.g-row b,.g-row strong{font-family:var(--mono);color:var(--ink);font-variant-numeric:tabular-nums;font-weight:700}
@media(hover:none){
  .g-overlay{position:static;opacity:1;background:none;padding:0 15px 14px}
}

/* ---------------------------------------------------------------
   9. ТИЗЕРЫ-ПЕРЕХОДЫ — .teaser-grid / .teaser
   Ставить трижды по длинной странице: «начать отсюда», «глубже», «читать дальше».
   --------------------------------------------------------------- */
.teaser-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.teaser{display:block;background:var(--elev);border:1px solid var(--line);border-radius:var(--r);
  padding:17px 18px;transition:transform .18s ease,box-shadow .25s ease,border-color .2s ease}
.teaser:hover{transform:translateY(-3px);border-color:rgba(255,122,61,.4);box-shadow:var(--sh)}
.t-tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--heat)}
.t-h{display:block;font-weight:700;font-size:15.5px;line-height:1.25;color:var(--ink);margin:8px 0 6px}
.t-d{margin:0;font-size:13px;line-height:1.5;color:var(--ink3)}
.t-arr{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:13px;font-weight:600;
  color:var(--ink2);transition:gap .18s,color .18s}
.teaser:hover .t-arr{gap:11px;color:var(--heat)}

/* ---------------------------------------------------------------
   10. БЛОК ИНСТРУМЕНТОВ — .toolbox (список) и .tool (корпус прибора)
   .tool — оболочка для симулятора, верификатора хеша и калькулятора EV:
   шапка со светодиодом состояния, тело с полями, строка результата, подвал с исходником.
   --------------------------------------------------------------- */
.toolbox{border:1px solid var(--line);border-radius:var(--r);background:var(--elev);padding:2px 18px}
.tool-row{display:grid;grid-template-columns:38px minmax(0,1fr) 18px;gap:13px;align-items:center;
  padding:14px 2px;border-top:1px solid var(--line);color:var(--ink)}
.tool-row:first-child{border-top:0}
.tr-ic{width:36px;height:36px;border-radius:var(--r-s);background:var(--elev2);display:grid;
  place-items:center;color:var(--heat);transition:background .2s,color .2s}
.tr-tx .ht{display:block;font-weight:700;font-size:14.5px;color:var(--ink)}
.tr-tx .hd{display:block;font-size:12.5px;color:var(--ink3);margin-top:3px;line-height:1.45}
.tr-ar{color:var(--ink3);transition:transform .18s,color .18s}
.tool-row:hover .tr-ar{transform:translateX(4px);color:var(--heat)}
.tool-row:hover .tr-ic{background:var(--grad);color:#fff}

.tool{position:relative;border:1px solid var(--line2);border-radius:var(--r-l);background:var(--surface);
  overflow:hidden;box-shadow:var(--sh)}
.tool-head{display:flex;align-items:center;gap:11px;padding:14px 18px;border-bottom:1px solid var(--line);
  background:var(--elev)}
.tool-led{width:9px;height:9px;border-radius:50%;flex:none;background:var(--cashout);
  box-shadow:0 0 0 4px rgba(47,224,168,.16)}
.tool-led.idle{background:var(--ink3);box-shadow:0 0 0 4px rgba(94,108,134,.16)}
.tool-led.bad{background:var(--crash);box-shadow:0 0 0 4px rgba(255,59,78,.16)}
.tool-title{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.tool-badge{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--ink3)}
.tool-body{padding:18px}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.tool-field{display:grid;gap:6px;min-width:0}
.tool-field label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.tool-field input,.tool-field select,.tool-field textarea{width:100%;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px;color:var(--ink);
  font-family:var(--mono);font-size:14px;outline:0}
.tool-field input:focus-visible,.tool-field select:focus-visible,.tool-field textarea:focus-visible{border-color:var(--heat)}
.tool-out{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px;padding:14px 16px;
  border:1px solid rgba(47,224,168,.25);background:rgba(47,224,168,.08);border-radius:var(--r-s)}
.tool-out .r{font-family:var(--mono);font-weight:700;font-size:24px;color:var(--cashout);
  font-variant-numeric:tabular-nums;line-height:1}
.tool-out .rl{font-size:13px;color:var(--ink2)}
.tool-out .chk{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:13px;
  font-weight:700;color:var(--cashout)}
.tool-out.bad{border-color:rgba(255,59,78,.3);background:rgba(255,59,78,.08)}
.tool-out.bad .r,.tool-out.bad .chk{color:var(--crash)}
.tool-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 18px;border-top:1px solid var(--line);background:var(--elev);font-size:12px;color:var(--ink3)}
.tool-foot code{font-family:var(--mono);color:var(--ink2);word-break:break-all}

/* ---------------------------------------------------------------
   11. ОГЛАВЛЕНИЕ — .toc (обязательно при >2000 слов)
   --------------------------------------------------------------- */
.toc{border:1px solid var(--line);border-radius:var(--r);background:var(--elev);padding:16px 22px}
.toc-h{display:flex;align-items:center;gap:9px;margin-bottom:8px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.toc-h .icn{color:var(--heat);width:15px;height:15px}
.toc ol{list-style:none;margin:0;padding:0;columns:2;column-gap:34px}
.toc li{break-inside:avoid}
.toc li a{display:flex;gap:11px;align-items:baseline;padding:6px 0;color:var(--ink2);font-size:14px}
.toc li a:hover{color:var(--ink)}
.toc li a .n{flex:none;width:24px;font-family:var(--mono);font-size:12px;color:var(--heat);
  font-variant-numeric:tabular-nums}
.toc.one ol{columns:1}
@media(max-width:720px){.toc ol{columns:1}}
@media(min-width:1100px){.toc.sticky{position:sticky;top:calc(var(--sticky-top) + 22px)}}

/* ---------------------------------------------------------------
   12. ВРЕЗКА АВТОРА — .expert-note (2–3 раза по длинной странице)
   --------------------------------------------------------------- */
.expert-note{display:flex;gap:15px;background:var(--elev);border:1px solid var(--line);
  border-left:3px solid var(--heat);border-radius:var(--r);padding:18px 20px}
.en-av{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;border:1px solid var(--line2)}
.en-head{display:block;font-size:13px;font-weight:700;color:var(--ink)}
.en-role{display:block;font-family:var(--mono);font-size:11.5px;color:var(--ink3);margin-top:2px}
.expert-note p{margin:9px 0 0;font-size:14.5px;line-height:1.58;color:var(--ink2)}

/* ---------------------------------------------------------------
   13. ФИНАЛЬНЫЙ БАННЕР — .cta-banner (страница должна заканчиваться, а не обрываться)
   --------------------------------------------------------------- */
.cta-banner{position:relative;overflow:hidden;border:1px solid var(--line2);border-radius:var(--r-l);
  padding:clamp(34px,5vw,50px) 40px;text-align:center;
  background:radial-gradient(520px 280px at 50% -12%,rgba(255,59,78,.42),transparent 62%),var(--elev)}
.cta-banner h2{font-family:var(--disp);font-weight:700;font-size:var(--fs-2);
  line-height:var(--lh-2);letter-spacing:var(--ls-2);max-width:18ch;margin-inline:auto}
.cb-sub{max-width:52ch;margin:16px auto 0;color:var(--ink2);line-height:var(--lh-prose)}
.cb-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.cb-terms{margin:16px 0 0;font-size:11.5px;color:var(--ink3)}

/* ---------------------------------------------------------------
   14. РАСПРЕДЕЛЕНИЕ ВЕРОЯТНОСТЕЙ — .dist (вместо голой таблицы)
   --------------------------------------------------------------- */
.dist{border:1px solid var(--line);border-radius:var(--r);background:var(--elev);padding:18px}
.dist .bars{display:flex;align-items:flex-end;gap:5px;height:160px}
.dist .col{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}
.dist .bar{border-radius:6px 6px 0 0;background:var(--grad);min-height:3px}
.dist .col.dim .bar{background:var(--elev2)}
.dist .p{font-family:var(--mono);font-size:10px;color:var(--ink3);text-align:center;
  font-variant-numeric:tabular-nums}
.dist .x{display:flex;gap:5px;margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
.dist .x span{flex:1;min-width:0;text-align:center;font-family:var(--mono);font-size:10px;color:var(--ink3)}
.axis-note{margin:11px 0 0;font-size:12px;color:var(--ink3);line-height:1.5}

/* ---------------------------------------------------------------
   15. ГАЛЕРЕЯ СКРИНОВ — .gallery (в _assets/img 100+ реальных интерфейсов по гео)
   --------------------------------------------------------------- */
.gallery{display:grid;grid-template-columns:2fr 1fr;gap:12px}
.thumbs{display:grid;grid-template-rows:1fr 1fr;gap:12px;min-height:0}
.gshot{position:relative;margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--elev2)}
.gshot img{display:block;width:100%;height:100%;object-fit:cover}
.gshot figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;font-size:12px;
  line-height:1.4;color:#EAF0FB;background:linear-gradient(0deg,rgba(10,13,20,.92),transparent)}
@media(max-width:720px){
  .gallery{grid-template-columns:1fr}
  .thumbs{grid-template-columns:1fr 1fr;grid-template-rows:none}
}

/* ---------------------------------------------------------------
   16. ВАРИАНТЫ АТОМОВ (кнопки, чипсы) — расширение существующих
   --------------------------------------------------------------- */
.btn.glass{background:var(--glass);backdrop-filter:blur(6px);color:#fff;border-color:rgba(255,255,255,.22)}
.btn.amber{background:var(--amber);color:#231703}
.btn.dark{background:var(--bg);color:var(--ink);border-color:var(--line2)}
.btn.lg{padding:14px 24px;font-size:15.5px;border-radius:12px}
.btn.block{width:100%;justify-content:center}
.pill.sm{font-size:11px;padding:4px 9px}
.pill.amber{background:rgba(255,194,75,.13);border-color:transparent;color:#FFD98A}
.pill.sky{background:rgba(84,198,255,.13);border-color:transparent;color:#BFE6FF}
.pill.violet{background:rgba(139,123,255,.15);border-color:transparent;color:#CFC8FF}
.pill.dark{background:var(--bg);border-color:var(--line2);color:var(--ink2)}

/* ---------------------------------------------------------------
   17. МЕГАМЕНЮ: 48 адресов оригинала + страницы контракта
   Без JS: десктоп — :hover и :focus-within, мобильный — чекбокс .navcb как аккордеон.
   --------------------------------------------------------------- */
.brand-accent{color:var(--heat)}
.navcb{position:absolute;width:1px;height:1px;margin:0;opacity:0}
.nav-btn{display:inline-flex;align-items:center;gap:6px;padding:10px 12px;border-radius:9px;
  color:var(--ink2);font-weight:600;font-size:14px;white-space:nowrap;cursor:pointer;user-select:none}
.nav-btn .chev{width:13px;height:13px;opacity:.7;transition:transform .16s}
.nav-item:hover>.nav-btn,.nav-item:focus-within>.nav-btn{color:var(--ink);background:var(--elev)}
.nav-item:hover>.nav-btn .chev,.nav-item:focus-within>.nav-btn .chev{transform:rotate(180deg)}
.nav-item:focus-within>.mega{opacity:1;visibility:visible;transform:none}
.navcb:focus-visible+.nav-btn{outline:2px solid var(--heat);outline-offset:2px}

.mega{padding:18px;max-width:calc(100vw - 40px)}
.mega.right{left:auto;right:0}
.mega:has(.cols-3){min-width:720px}
.mega:has(.cols-2){min-width:520px}
.mega.pay:has(.cols-3){min-width:770px}
.mega-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.mega-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.mega-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
/* широкая панель на все 25 обзоров: во всю ширину контейнера, а не колонкой у кнопки */
.mega.wide{position:fixed;top:74px;left:50%;right:auto;min-width:0;
  width:min(1180px,calc(100vw - 40px));transform:translate(-50%,6px)}
.nav-item:hover>.mega.wide,.nav-item:focus-within>.mega.wide{transform:translate(-50%,0)}
.mega-h{display:flex;align-items:center;gap:7px}
.mega-h .icn{width:13px;height:13px;color:var(--heat)}
.mega-link{align-items:flex-start}
.mega-link>span{display:block;line-height:1.3;min-width:0}
.mega-link>span i{display:block;margin-top:3px;font-family:var(--mono);font-style:normal;
  font-size:11px;color:var(--ink3);line-height:1.35}
.mega-link>.icn{margin-top:2px}
.mega-link.tight{padding:6px 10px}
.mega-op{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:9px;
  color:var(--ink2);font-size:13.5px;font-weight:600}
.mega-op:hover{background:var(--elev);color:var(--ink)}
.mega-op .op-plate{width:30px;height:30px;border-radius:8px;font-size:10px}
.mega-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:15px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink3)}
.mega-foot a{display:inline-flex;align-items:center;gap:7px;color:var(--ink2);font-weight:600;
  transition:gap .18s,color .18s}
.mega-foot a:hover{color:var(--heat);gap:11px}
.locale-menu.cols{display:grid;grid-template-columns:1fr 1fr;gap:2px;min-width:340px;
  max-height:62vh;overflow:auto}
.locale-menu a.on{background:var(--elev);color:var(--ink)}
.hamburger .i-close{display:none}
.navtoggle-cb:checked~.hdr-actions .hamburger .i-open{display:none}
.navtoggle-cb:checked~.hdr-actions .hamburger .i-close{display:block}
.nav-mobile-cta{display:none}

@media(max-width:980px){
  .mega,.mega.wide{position:static;display:none;width:auto;min-width:0;max-width:none;transform:none;
    padding:2px 0 10px 12px;border:0;background:transparent;box-shadow:none}
  .navcb:checked~.mega{display:block}
  .nav-btn{width:100%;justify-content:space-between}
  .nav-item:hover>.nav-btn .chev,.nav-item:focus-within>.nav-btn .chev{transform:none}
  .navcb:checked~.nav-btn .chev{transform:rotate(180deg)}
  .mega-grid,.mega-grid.cols-2,.mega-grid.cols-3,.mega-grid.cols-4{grid-template-columns:1fr;gap:6px}
  .mega-col+.mega-col{margin-top:10px}
  .mega-foot{margin-top:10px}
  .nav-mobile-cta{display:block;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
}

/* ---------------------------------------------------------------
   18. ПОДВАЛ: пятая колонка, RG-блок, маркеры, строка проверки
   --------------------------------------------------------------- */
.ftr-top:has(.ftr-col:nth-child(5)){grid-template-columns:1.6fr repeat(4,minmax(0,1fr))}
.ftr-reviewed{display:flex;align-items:center;gap:8px;margin:18px 0 0;font-size:12.5px;color:var(--ink3)}
.ftr-reviewed .icn{width:15px;height:15px;color:var(--cashout)}
.ftr-reviewed a{color:var(--ink2);text-decoration:underline;text-underline-offset:2px}
.ftr-rg{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;
  margin:6px 0 26px;padding:22px 24px;border:1px solid var(--line2);border-radius:var(--r-l);
  background:linear-gradient(180deg,var(--elev),transparent)}
.rg-mark{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-family:var(--mono);font-weight:700;font-size:17px;color:var(--crash);border:2px solid var(--crash)}
.rg-body h4{font-size:16px;margin-bottom:8px}
.rg-body p{margin:0;max-width:76ch;font-size:13.5px;line-height:1.6;color:var(--ink2)}
.rg-tools{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}
.rg-tools a{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line2);font-size:12.5px;color:var(--ink2)}
.rg-tools a:hover{color:var(--ink);border-color:var(--heat)}
.rg-tools .icn{width:14px;height:14px;color:var(--heat)}
.ftr-marks{display:flex;gap:8px;flex-wrap:wrap}
.fmark{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink3);
  border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.ftr-copy a{color:var(--ink3)}
.ftr-copy a:hover{color:var(--heat)}
.ftr-legal a{color:var(--ink2);text-decoration:underline;text-underline-offset:2px}
@media(max-width:1080px){.ftr-top:has(.ftr-col:nth-child(5)){grid-template-columns:1fr 1fr 1fr}}
@media(max-width:820px){.ftr-top:has(.ftr-col:nth-child(5)){grid-template-columns:1fr 1fr}}
@media(max-width:640px){.ftr-rg{grid-template-columns:1fr}}
@media(max-width:520px){.ftr-top:has(.ftr-col:nth-child(5)){grid-template-columns:1fr}}

/* ---------------------------------------------------------------
   19. Адаптив новых компонентов
   --------------------------------------------------------------- */
@media(max-width:1080px){
  .tl-card{grid-template-columns:minmax(44px,max-content) 52px minmax(0,1fr) auto;gap:16px}
  .tl-score{grid-column:2/-1;display:flex;align-items:center;gap:12px;text-align:left}
  .tl-score .n{font-size:26px}
  .verdict-w{margin-top:0}
}
@media(max-width:820px){
  .mi-grid{grid-template-columns:1fr}
}
@media(max-width:720px){
  .tl-card{grid-template-columns:44px minmax(0,1fr);gap:14px;padding:18px}
  .tl-logo{grid-row:1;grid-column:2;width:48px;height:48px}
  .tl-info,.tl-score,.tl-cta{grid-column:1/-1}
  .tl-cta{min-width:0}
  .op-cta{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------
   20. Планка качества: фокус, движение, картинки
   --------------------------------------------------------------- */
a:focus-visible,button:focus-visible,summary:focus-visible,label:focus-visible,
.btn:focus-visible,.teaser:focus-visible,.gcard:focus-visible,.tool-row:focus-visible{
  outline:2px solid var(--heat);outline-offset:2px;border-radius:6px}
img{max-width:100%}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .opcard:hover,.gcard:hover,.teaser:hover,.tl-item:hover{transform:none}
  .gcard:hover .g-media img{transform:none}
}

/* ---------------------------------------------------------------
   21. Правки после рендер-проверки
   --------------------------------------------------------------- */
/* лого не должно наезжать на первый пункт меню: брендблок не сжимается */
.hdr .brand{flex:none;white-space:nowrap}
.btn{white-space:nowrap}
/* столбики распределения — flex-элементы, без flex:none их сжимало почти в ноль */
.dist .bar,.dist .p{flex:none}
.matrix .best{white-space:nowrap}
/* колонки должны тянуться на всю высоту графика, иначе процентная высота столбика
   считается от auto и схлопывается в min-height */
.dist .bars{align-items:stretch}
.dist .col{height:100%}
/* строка проверки в подвале: ссылка внутри flex становилась вторым столбцом */
.ftr-reviewed{display:block;line-height:1.5}
.ftr-reviewed .icn{vertical-align:-.2em;margin-right:6px}
/* мобильный: :has() задаёт min-width с большей специфичностью, чем общий сброс в медиазапросе,
   из-за этого мегапанель на 720px растягивала документ и появлялся горизонтальный скролл */
@media(max-width:980px){
  .mega:has(.cols-2),.mega:has(.cols-3),.mega.pay:has(.cols-3){min-width:0}
  .locale-menu.cols{min-width:0;width:min(340px,calc(100vw - 32px))}
}

/* Панели на три колонки ведут себя как широкая: абсолютная панель шириной 720–770px
   на ноутбуке 1000–1180px вылезала за правый край и давала горизонтальный скролл. */
.mega:has(.cols-3){position:fixed;top:74px;left:50%;right:auto;min-width:0;
  width:min(1180px,calc(100vw - 40px));transform:translate(-50%,6px)}
.nav-item:hover>.mega:has(.cols-3),.nav-item:focus-within>.mega:has(.cols-3){transform:translate(-50%,0)}
@media(max-width:980px){
  .mega:has(.cols-2),.mega:has(.cols-3),.mega.pay:has(.cols-3),.mega.wide{
    position:static;display:none;width:auto;min-width:0;max-width:none;transform:none;
    padding:2px 0 10px 12px;border:0;background:transparent;box-shadow:none}
  .navcb:checked~.mega{display:block}
}

/* Шапка: шесть разделов + бренд + действия требуют ~1230px. Между 980 и 1230
   строка не помещалась и растягивала документ. Гамбургер поднят до 1080,
   кнопка-CTA в шапке снимается раньше — на узком ноутбуке её работу делает меню. */
@media(max-width:1320px){.hdr-cta{display:none}}
@media(max-width:1080px){
  .mainnav{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:2px;background:var(--surface);border-bottom:1px solid var(--line2);
    padding:12px;max-height:82vh;overflow:auto;box-shadow:0 24px 60px -20px rgba(0,0,0,.7)}
  .navtoggle-cb:checked ~ .mainnav{display:flex}
  .hamburger{display:grid}
  .nav-btn{width:100%;justify-content:space-between}
  .nav-item:hover>.nav-btn .chev,.nav-item:focus-within>.nav-btn .chev{transform:none}
  .navcb:checked~.nav-btn .chev{transform:rotate(180deg)}
  .mega,.mega.wide,.mega.right,.mega:has(.cols-2),.mega:has(.cols-3),.mega.pay:has(.cols-3){
    position:static;display:none;width:auto;min-width:0;max-width:none;transform:none;
    padding:2px 0 10px 12px;border:0;background:transparent;box-shadow:none;opacity:1;visibility:visible}
  .navcb:checked~.mega{display:block}
  .mega-grid,.mega-grid.cols-2,.mega-grid.cols-3,.mega-grid.cols-4{grid-template-columns:1fr;gap:6px}
  .mega-col+.mega-col{margin-top:10px}
  .nav-mobile-cta{display:block;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
  .locale-menu.cols{min-width:0;width:min(340px,calc(100vw - 32px))}
}
/* .sec задаёт padding сокращённой записью и обнуляет боковые отступы .wrap,
   если оба класса стоят на одном элементе. Сочетание должно быть безопасным. */
.sec.wrap{padding-left:24px;padding-right:24px}

/* =====================================================================
   22. МЕДИА-ПАТТЕРНЫ — как изображение живёт внутри текста
   ---------------------------------------------------------------------
   Задача блока: картинка перестаёт быть «вставленной подряд» и получает
   роль в вёрстке. Шесть раскладок изображения (сбоку / во всю ширину /
   с вылетом / коллажем / врезкой в текст / колонкой с подписью) и восемь
   богатых компонентов, которые несут изображение как часть смысла.

   Правила системы, общие для всего блока:
     · один радиус (--media-r), одна тень (--sh), один бордер (--line2);
     · любое изображение получает aspect-ratio через --ar, чтобы вёрстка
       не прыгала до загрузки: hero 1584×672 → --ar:1584/672,
       схемы 1376×768 → 16/9 (значение по умолчанию);
     · подпись — самостоятельный объект (.mcap): что на картинке жирным,
       откуда и когда — моноширинной строкой .msrc;
     · обе темы идут через токены; тёмный арт в светлой теме
       приглушается, а не остаётся дырой;
     · в HTML у каждой картинки обязательны loading="lazy" decoding="async"
       и width/height (кроме первого экрана — там loading="eager").
   ===================================================================== */

:root{
  --media-r:var(--r);
  --media-gap:clamp(20px,3.2vw,40px);
}
/* <picture> с webp + jpg-фолбэком не должен становиться grid/flex-элементом */
picture{display:contents}
/* вылет за края (.media-bleed) считает ширину от вьюпорта; clip не создаёт
   скролл-контейнер, поэтому sticky-шапка и залипающие шапки таблиц живы */
body{overflow-x:clip}

/* ---- база рамки: одна на все паттерны изображения ---- */
.media-fig,.media-wide,.media-bleed,.media-inset,.figure-stack{position:relative;margin:0;min-width:0}
:is(.media-fig,.media-wide,.media-bleed,.media-inset,.figure-stack) img{
  display:block;width:100%;height:auto;aspect-ratio:var(--ar,16/9);object-fit:cover;
  border-radius:var(--media-r);border:1px solid var(--line2);background:var(--elev2);
  box-shadow:var(--sh)}
/* .contain — для схем и листов иконок с альфой: не кадрировать, а вписать */
:is(.media-fig,.media-wide,.figure-stack).contain img{object-fit:contain;background:var(--elev);padding:10px}
:is(.media-fig,.media-wide,.figure-stack).flat img{box-shadow:none}
:is(.media-fig,.media-wide,.figure-stack).bare img{border:0;box-shadow:none;background:none;border-radius:0}
/* «срез» — подпись системы; на изображении читается как приборная шкала */
.media-fig.cut::after,.media-wide.cut::after{content:"";position:absolute;left:14px;right:14px;top:0;
  height:2px;border-radius:2px;background:var(--cut);pointer-events:none}

/* ---- подпись: что на картинке + откуда и когда ---- */
.mcap{margin-top:11px;padding-inline-start:12px;border-inline-start:2px solid var(--line2);
  font-size:13px;line-height:1.5;color:var(--ink3)}
.mcap b,.mcap strong{display:block;color:var(--ink2);font-weight:600;margin-bottom:3px}
.msrc{display:block;margin-top:5px;font-family:var(--mono);font-size:11px;color:var(--ink3);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.msrc a{color:var(--sky)}
/* строка провенанса под числом: где это число взято */
.provenance{display:inline-block;margin-top:7px;padding:2px 7px;border-radius:var(--r-s);
  background:var(--zebra);border:1px solid var(--line);font-family:var(--mono);font-size:10.5px;
  color:var(--ink3);line-height:1.5}

/* ---------------------------------------------------------------
   22.1 .media-left / .media-right — изображение сбоку от текста
   На мобильном текст поднимается наверх: заголовок должен идти первым.
   --------------------------------------------------------------- */
.media-left,.media-right{display:grid;gap:var(--media-gap);align-items:center}
.media-left{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr)}
.media-right{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr)}
.media-left>.media-fig{order:1}.media-left>.media-body{order:2}
.media-right>.media-fig{order:2}.media-right>.media-body{order:1}
.media-left.top,.media-right.top{align-items:start}
.media-left.narrow{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
.media-right.narrow{grid-template-columns:minmax(0,1.28fr) minmax(0,.72fr)}
.media-body{min-width:0}
.media-body>:first-child{margin-top:0}
.media-body h3,.media-body .tt-3{margin:0 0 10px}
.media-body p{color:var(--ink2);line-height:1.62;margin:0 0 12px;max-width:58ch}
.media-body p:last-child{margin-bottom:0}
.media-body .eyebrow{display:block;margin-bottom:7px}
@media(min-width:1101px){
  .media-left.stick>.media-fig,.media-right.stick>.media-fig{position:sticky;top:calc(var(--sticky-top) + 22px)}
}
@media(max-width:860px){
  /* ⚠ `.narrow` задаёт свои колонки селектором из ДВУХ классов, то есть
     специфичнее этого правила, — и на мобильном блок оставался в две колонки,
     отдавая тексту 116 пикселей. Перечисляем модификатор явно, иначе абзац
     режется по три слова в строку на всех языках с длинными словами. */
  .media-left,.media-right,.media-left.narrow,.media-right.narrow{
    grid-template-columns:1fr;gap:20px}
  .media-left>.media-fig,.media-right>.media-fig{order:2;position:static}
  .media-left>.media-body,.media-right>.media-body{order:1}
}

/* ---------------------------------------------------------------
   22.2 .media-wide — во всю ширину колонки, с подписью
   --------------------------------------------------------------- */
.media-wide{display:block}
.media-wide>.mcap{max-width:78ch}
.media-wide.center>.mcap{max-width:70ch;margin-inline:auto;border-inline-start:0;
  padding-inline:0;text-align:center}

/* ---------------------------------------------------------------
   22.3 .media-bleed — вылет за границы контейнера
   --------------------------------------------------------------- */
.media-bleed{width:100vw;margin-inline:calc(50% - 50vw)}
.media-bleed img{border-radius:0;border-inline:0;box-shadow:none;
  aspect-ratio:var(--ar,1584/672);max-height:min(64vh,560px)}
.media-bleed>.mcap{max-width:1180px;margin:12px auto 0;padding-inline:24px;border-inline-start:0}
/* текст поверх вылета — для секции-заставки */
.media-bleed.overlay{display:grid}
.media-bleed.overlay>:is(img,picture){grid-area:1/1}
.media-bleed.overlay>.bleed-copy{grid-area:1/1;align-self:center;width:min(1180px,100%);
  margin-inline:auto;padding:clamp(22px,4vw,52px) 24px;position:relative}
.media-bleed.overlay::after{content:"";grid-area:1/1;pointer-events:none;
  background:linear-gradient(96deg,var(--bg) 3%,color-mix(in srgb,var(--bg) 78%,transparent) 44%,
    color-mix(in srgb,var(--bg) 22%,transparent) 82%)}
@media(max-width:720px){.media-bleed img{max-height:min(48vh,360px)}}

/* ---------------------------------------------------------------
   22.4 .media-collage — 2–3 изображения со смещением и глубиной
   Одна grid-строка, разные отступы сверху и микроповорот дают слои.
   --------------------------------------------------------------- */
.media-collage{--tilt:1.5deg;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  align-items:start;padding-block:6px}
.media-collage>figure{grid-row:1;margin:0;position:relative;border-radius:var(--media-r);
  overflow:hidden;border:1px solid var(--line2);background:var(--elev2);box-shadow:var(--sh);
  transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s}
.media-collage figure img{display:block;width:100%;height:auto;
  aspect-ratio:var(--ar,16/9);object-fit:cover}
.media-collage>figure:nth-child(1){grid-column:1/8;z-index:1;transform:rotate(calc(var(--tilt) * -1))}
.media-collage>figure:nth-child(2){grid-column:6/13;z-index:2;margin-top:12%;transform:rotate(var(--tilt))}
.media-collage>figure:nth-child(3){grid-column:3/10;z-index:3;margin-top:26%;
  transform:rotate(calc(var(--tilt) * -.5))}
.media-collage>figure:hover,.media-collage>figure:focus-within{transform:rotate(0) translateY(-5px);
  z-index:4;box-shadow:var(--sh-hot)}
/* ярлык поверх кадра: подпись коллажа не выносится вниз, иначе слои разъезжаются */
.media-collage figcaption,.mc-lbl{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 9px;
  font-family:var(--mono);font-size:11px;color:#EAF0FB;letter-spacing:.02em;
  background:linear-gradient(0deg,rgba(10,13,20,.92),transparent)}
.media-collage.duo>figure:nth-child(1){grid-column:1/9}
.media-collage.duo>figure:nth-child(2){grid-column:7/13;margin-top:16%}
@media(max-width:720px){
  .media-collage{grid-template-columns:1fr;gap:12px}
  .media-collage>figure,.media-collage.duo>figure{grid-column:1/-1;grid-row:auto;margin-top:0;transform:none}
}

/* ---------------------------------------------------------------
   22.5 .media-inset — врезка в текст с обтеканием
   Обтекание живёт только на десктопе: на узком экране колонка в 42%
   ломает и картинку, и текст, поэтому выключатель обязателен.
   --------------------------------------------------------------- */
.media-inset{float:inline-end;inline-size:min(330px,42%);margin:5px 0 18px 26px;shape-margin:14px}
.media-inset.start{float:inline-start;margin:5px 26px 18px 0}
.media-inset img{aspect-ratio:var(--ar,4/3)}
.media-inset>.mcap{font-size:12px;margin-top:9px}
@media(max-width:720px){
  .media-inset,.media-inset.start{float:none;inline-size:100%;margin:16px 0 18px}
}

/* ---------------------------------------------------------------
   22.6 .figure-stack — картинка + подпись + источник аккуратной колонкой
   --------------------------------------------------------------- */
.figure-stack{display:grid;gap:0;max-width:var(--fs-w,520px)}
.figure-stack.center{margin-inline:auto}
.figure-stack.full{max-width:none}
.figure-stack>figcaption,.figure-stack>.mcap{margin-top:12px;padding-inline-start:12px;
  border-inline-start:2px solid var(--line2);font-size:13px;line-height:1.5;color:var(--ink3)}
.figure-stack>figcaption b,.figure-stack>figcaption strong{display:block;color:var(--ink2);font-weight:600;margin-bottom:3px}
.figure-stack.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;max-width:none}
.figure-stack.grid>figure{margin:0}

/* ---------------------------------------------------------------
   22.7 .section-bg — секция с фоновым артом и градиентной маской
   Маска идёт от --bg, поэтому в обеих темах текст остаётся читаемым.
   --------------------------------------------------------------- */
.section-bg{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-l);
  padding:clamp(26px,4vw,50px) clamp(20px,3vw,42px)}
.section-bg>*{position:relative;z-index:1}
.section-bg>.sec-art{position:absolute;inset:0;z-index:-2;margin:0;pointer-events:none}
.section-bg>.sec-art img{display:block;width:100%;height:100%;object-fit:cover}
.section-bg::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(98deg,var(--bg) 2%,color-mix(in srgb,var(--bg) 80%,transparent) 44%,
      color-mix(in srgb,var(--bg) 26%,transparent) 86%),
    linear-gradient(0deg,var(--bg) 1%,transparent 58%)}
.section-bg.center::after{background:radial-gradient(130% 105% at 50% 45%,
  color-mix(in srgb,var(--bg) 52%,transparent) 8%,var(--bg) 82%)}
.section-bg.right::after{background:linear-gradient(262deg,var(--bg) 2%,
  color-mix(in srgb,var(--bg) 80%,transparent) 44%,color-mix(in srgb,var(--bg) 26%,transparent) 86%),
  linear-gradient(0deg,var(--bg) 1%,transparent 58%)}
.section-bg .sb-copy{max-width:min(58ch,64%)}
@media(max-width:760px){.section-bg .sb-copy{max-width:none}
  .section-bg::after{background:linear-gradient(0deg,var(--bg) 12%,
    color-mix(in srgb,var(--bg) 72%,transparent) 72%)}}

/* ---------------------------------------------------------------
   22.8 .card-media — карточка с изображением сверху
   Ложится в существующие сетки .ggrid / .teaser-grid без обёрток.
   Ранговый уголок скруглён только внутрь — типографский приём,
   а не «медалька».
   --------------------------------------------------------------- */
.card-media{position:relative;display:flex;flex-direction:column;background:var(--elev);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;color:inherit;
  transition:transform .2s ease,box-shadow .25s ease,border-color .2s ease}
a.card-media:hover,a.card-media:focus-visible{transform:translateY(-5px);
  border-color:rgba(255,122,61,.42);box-shadow:var(--sh-hot)}
.cm-media{position:relative;aspect-ratio:var(--ar,16/10);overflow:hidden;background:var(--elev2)}
.cm-media img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.cm-media.contain img{object-fit:contain;padding:12px}
a.card-media:hover .cm-media img{transform:scale(1.06)}
.cm-rank{position:absolute;top:0;inset-inline-start:0;min-width:32px;padding:6px 11px;
  border-end-end-radius:var(--r-s);background:var(--grad);color:#fff;font-family:var(--mono);
  font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;line-height:1.15;text-align:center}
.cm-tag{position:absolute;top:10px;inset-inline-end:10px;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border-radius:6px;
  background:rgba(10,13,20,.74);backdrop-filter:blur(6px);color:var(--amber)}
.cm-ribbon{padding:7px 12px;text-align:center;text-transform:uppercase;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.12em;color:var(--heat);background:var(--elev2);
  border-bottom:1px solid var(--line)}
.cm-b{padding:14px 15px;display:grid;gap:6px;flex:1}
.cm-t{display:block;font-weight:700;font-size:15.5px;line-height:1.25;color:var(--ink)}
.cm-d{margin:0;font-size:13px;line-height:1.5;color:var(--ink3)}
.cm-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 15px;
  border-top:1px solid var(--line);background:var(--zebra);font-size:12px;color:var(--ink3)}
.cm-row b,.cm-row strong{font-family:var(--mono);color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------
   22.9 .split-hero — слева текст, справа арт или инструмент
   Плитки-чипы на арте на узком экране становятся обычной строкой,
   а не исчезают: в них цифры, а не украшение.
   --------------------------------------------------------------- */
.split-hero{position:relative;overflow:hidden;display:grid;gap:clamp(22px,3.4vw,44px);
  grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:center;
  border:1px solid var(--line2);border-radius:var(--r-xl);padding:clamp(24px,3.6vw,46px);
  background:radial-gradient(760px 340px at 10% -14%,rgba(255,122,61,.2),transparent 62%),var(--elev)}
.split-hero.cool{background:radial-gradient(760px 340px at 10% -14%,rgba(47,224,168,.16),transparent 62%),var(--elev)}
.split-hero.reverse>.sh-copy{order:2}
.split-hero.reverse>.sh-art{order:1}
.sh-copy{min-width:0}
.sh-copy>:first-child{margin-top:0}
.sh-copy .eyebrow{display:block;margin-bottom:10px}
.sh-copy h1,.sh-copy h2{margin:0}
.sh-actions{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px}
.sh-art{position:relative;margin:0;min-width:0}
.sh-art img{display:block;width:100%;height:auto;aspect-ratio:var(--ar,1584/672);object-fit:cover;
  border-radius:var(--r-l);border:1px solid var(--line2);box-shadow:var(--sh)}
.sh-chip{position:absolute;display:grid;gap:3px;padding:11px 15px;border-radius:var(--r-s);
  background:rgba(10,13,20,.84);backdrop-filter:blur(9px);border:1px solid var(--line2);
  box-shadow:var(--sh-sm)}
.sh-chip b,.sh-chip strong{font-family:var(--mono);font-weight:700;font-size:19px;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sh-chip b.cash,.sh-chip strong.cash{color:var(--cashout)}
.sh-chip b.hot,.sh-chip strong.hot{color:var(--crash)}
.sh-chip span{font-size:11px;color:var(--ink3);line-height:1.35}
.sh-chip.a{inset-inline-start:-14px;bottom:22px}
.sh-chip.b{inset-inline-end:-10px;top:-16px}
@media(max-width:860px){
  .split-hero{grid-template-columns:1fr}
  .split-hero.reverse>.sh-copy,.split-hero.reverse>.sh-art{order:0}
  .sh-art{display:flex;flex-wrap:wrap;gap:10px}
  .sh-art>:is(img,picture){flex:1 0 100%}
  .sh-chip{position:static;flex:1 1 150px;background:var(--elev2);backdrop-filter:none}
}

/* ---------------------------------------------------------------
   22.10 .stat-row — лента чисел (расширение существующей .stat-tile)
   Зазор в 1px по фону контейнера рисует разделители при любом числе плиток.
   --------------------------------------------------------------- */
.stat-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.stat-row>.stat-tile{border:0;border-radius:0;background:var(--elev);padding:18px 22px}
.stat-row.on-art{border-color:var(--line2);background:var(--line2)}
.stat-row.on-art>.stat-tile{background:rgba(10,13,20,.74);backdrop-filter:blur(10px)}
.stat-row.quiet>.stat-tile .n{background:none;-webkit-text-fill-color:var(--ink);color:var(--ink)}
@media(max-width:760px){.stat-row{grid-auto-flow:row;grid-template-columns:1fr 1fr}}
@media(max-width:420px){.stat-row{grid-template-columns:1fr}}

/* ---------------------------------------------------------------
   22.11 .quote-block — врезка с цитатой или фактом
   --------------------------------------------------------------- */
.quote-block{position:relative;margin:0;padding:22px 26px 22px 60px;border:1px solid var(--line);
  border-inline-start:3px solid var(--heat);border-radius:var(--media-r);background:var(--elev)}
.quote-block::before{content:"”";position:absolute;inset-inline-start:18px;top:2px;
  font-family:var(--font-disp);font-weight:700;font-size:60px;line-height:1;color:var(--heat);opacity:.5}
.quote-block p{margin:0;font-size:17px;line-height:1.55;color:var(--ink);max-width:56ch}
.quote-block p+p{margin-top:10px}
.quote-block .qsrc,.quote-block cite{display:block;margin-top:13px;font-family:var(--mono);
  font-style:normal;font-size:11.5px;color:var(--ink3);letter-spacing:.02em}
.quote-block .qsrc a{color:var(--sky)}
.quote-block.fact{border-inline-start-color:var(--cashout)}
.quote-block.fact::before{content:"§";color:var(--cashout);font-size:44px;top:16px}
.quote-block.warn{border-inline-start-color:var(--crash);background:rgba(255,59,78,.05)}
.quote-block.warn::before{content:"!";color:var(--crash);font-size:46px;top:14px;inset-inline-start:24px}
.quote-block.num-lead{padding-inline-start:26px}
.quote-block.num-lead::before{content:none}
.quote-block .qnum{display:block;font-family:var(--mono);font-weight:700;font-size:clamp(30px,4.6vw,44px);
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-bottom:10px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:520px){.quote-block{padding:20px 18px 20px 46px}
  .quote-block::before{inset-inline-start:12px;font-size:46px}}

/* ---------------------------------------------------------------
   22.12 .compare-table — сравнительная таблица с выделением лучшего
   Лучшее выделяется планкой и подписью, а не заливкой: заливка
   конфликтует с зеброй. Обёртка — существующий .tscroll.
   --------------------------------------------------------------- */
.compare-table{width:100%;border-collapse:collapse;font-size:14px}
.compare-table th,.compare-table td{padding:14px 16px;vertical-align:top;text-align:start;
  border-bottom:1px solid var(--line);min-width:128px;line-height:1.5}
.compare-table thead th{background:var(--elev2);color:var(--ink);font-weight:700;font-size:12.5px;
  letter-spacing:0;text-transform:none;vertical-align:bottom}
.compare-table thead th .u{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink3);font-weight:600;margin-bottom:4px}
.compare-table tbody tr:nth-child(even){background:var(--zebra)}
.compare-table tbody tr:hover{background:var(--hover)}
.compare-table tbody tr:last-child td,.compare-table tbody tr:last-child th{border-bottom:0}
.compare-table .vh{width:22%;min-width:152px;font-weight:700;color:var(--ink);hyphens:none;
  background:var(--surface);border-inline-end:1px solid var(--line)}
.compare-table tbody tr:nth-child(even) .vh{background:var(--surface)}
.compare-table .mono,.compare-table .num,.compare-table [data-num]{font-variant-numeric:tabular-nums}
.compare-table .sub{display:block;margin-top:4px;font-size:11.5px;line-height:1.4;color:var(--ink3)}
.compare-table .yes{color:var(--cashout);font-weight:700}
.compare-table .no{color:var(--crash);font-weight:700}
.compare-table .na{color:var(--ink3)}
.compare-table .tlogo{display:flex;align-items:center;gap:10px}
.compare-table .tlogo img{width:30px;height:30px;border-radius:8px;object-fit:contain;
  background:var(--plate);border:1px solid var(--line);padding:3px;flex:none}
.compare-table tr.is-best>:first-child{box-shadow:inset 3px 0 0 var(--cashout)}
.compare-table .vh[data-best]::after{content:attr(data-best);display:block;margin-top:6px;
  font-family:var(--mono);font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cashout)}
@media(min-width:901px){.compare-table.sticky-h thead th{position:sticky;top:var(--sticky-top);z-index:2}}
@media(max-width:900px){
  .compare-table .vh{position:sticky;inset-inline-start:0;z-index:1;box-shadow:1px 0 0 var(--line)}
  .compare-table tr.is-best>:first-child{box-shadow:inset 3px 0 0 var(--cashout),1px 0 0 var(--line)}
}

/* ---------------------------------------------------------------
   22.13 .timeline — вертикальная лента
   Нумерация здесь не декоративная: у ленты есть направление времени,
   поэтому рельс уходит из горячего цвета в служебный.
   --------------------------------------------------------------- */
.timeline{position:relative;list-style:none;margin:0;padding:2px 0 2px 32px;display:grid;gap:24px}
.timeline::before{content:"";position:absolute;inset-inline-start:9px;top:8px;bottom:8px;width:2px;
  border-radius:2px;background:linear-gradient(180deg,var(--heat),var(--crash) 34%,var(--line) 94%)}
.timeline>li{position:relative;min-width:0}
.timeline>li::before{content:"";position:absolute;inset-inline-start:-29px;top:4px;width:12px;height:12px;
  border-radius:50%;background:var(--bg);border:2px solid var(--heat);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--heat) 16%,transparent)}
.timeline>li.done::before{border-color:var(--cashout);box-shadow:0 0 0 3px rgba(47,224,168,.16)}
.timeline>li.now::before{border-color:var(--cashout);background:var(--cashout);
  box-shadow:0 0 0 4px rgba(47,224,168,.22)}
.timeline>li.muted::before{border-color:var(--ink3);box-shadow:none}
.tml-date{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--heat);font-variant-numeric:tabular-nums}
.timeline>li.done .tml-date,.timeline>li.now .tml-date{color:var(--cashout)}
.timeline>li.muted .tml-date{color:var(--ink3)}
.tml-h{display:block;font-weight:700;font-size:15.5px;line-height:1.3;color:var(--ink);margin:6px 0 5px}
.tml-b{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink2);max-width:64ch}
.timeline .media-fig,.timeline .figure-stack{margin-top:12px;max-width:440px}
.timeline.compact{gap:16px}
.timeline.compact .tml-h{font-size:14.5px}

/* ---------------------------------------------------------------
   22.14 .callout-media — акцентный блок с иконкой и артом
   --------------------------------------------------------------- */
.callout-media{position:relative;display:grid;gap:clamp(16px,2.4vw,28px);align-items:center;
  grid-template-columns:44px minmax(0,1fr) minmax(0,.58fr);
  border:1px solid var(--line2);border-radius:var(--r-l);padding:clamp(18px,2.4vw,26px);
  background:radial-gradient(560px 240px at 8% -20%,rgba(255,122,61,.16),transparent 64%),var(--elev)}
.callout-media.cash{background:radial-gradient(560px 240px at 8% -20%,rgba(47,224,168,.16),transparent 64%),var(--elev)}
.callout-media.risk{border-color:rgba(255,59,78,.34);
  background:radial-gradient(560px 240px at 8% -20%,rgba(255,59,78,.18),transparent 64%),var(--elev)}
.co-ic{width:44px;height:44px;border-radius:var(--r-s);display:grid;place-items:center;flex:none;
  background:var(--elev2);color:var(--heat);align-self:start}
.co-ic .icn{width:20px;height:20px}
.callout-media.cash .co-ic{color:var(--cashout)}
.callout-media.risk .co-ic{color:var(--crash)}
.co-body{min-width:0}
.co-body>:first-child{margin-top:0}
.co-h{display:block;font-weight:700;font-size:16px;line-height:1.3;color:var(--ink);margin-bottom:7px}
.co-body p{margin:0 0 10px;font-size:14px;line-height:1.6;color:var(--ink2);max-width:62ch}
.co-body p:last-child{margin-bottom:0}
.co-art{margin:0;min-width:0}
.co-art img{display:block;width:100%;height:auto;aspect-ratio:var(--ar,16/9);object-fit:cover;
  border-radius:var(--media-r);border:1px solid var(--line2);box-shadow:var(--sh-sm)}
.co-art.contain img{object-fit:contain;background:var(--elev2);padding:8px}
.co-art>figcaption{margin-top:8px;font-family:var(--mono);font-size:10.5px;color:var(--ink3);line-height:1.45}
@media(max-width:860px){
  .callout-media{grid-template-columns:44px minmax(0,1fr)}
  .co-art{grid-column:1/-1}
}
@media(max-width:520px){
  .callout-media{grid-template-columns:1fr;gap:14px}
  .co-art{grid-column:auto}
}

/* ---- квартал качества: движение по требованию, а не по умолчанию ---- */
@media(prefers-reduced-motion:reduce){
  .media-collage>figure,.card-media,.cm-media img{transition:none}
  .media-collage>figure{transform:none}
  .media-collage>figure:hover,.media-collage>figure:focus-within{transform:none}
  a.card-media:hover{transform:none}
  a.card-media:hover .cm-media img{transform:none}
}

/* =====================================================================
   23. ТИПОГРАФИЧЕСКИЙ РИТМ — сведение шкалы с реальными макетами
   Шкала задана в :root, но заголовок в узкой колонке и заголовок во всю
   ширину — разные задачи. Здесь только те места, где ступень шкалы надо
   опустить, потому что колонка уже, а не потому что заголовок «меньше».
   ===================================================================== */

/* h1 в половинной колонке сплит-героя. Раньше здесь стоял потолок 2.5rem
   = 40px — МЕНЬШЕ, чем h2 (48px). Замерено в браузере на home.html:
   h1 40px против h2 44px, то есть главный заголовок страницы был мельче
   заголовка секции под ним. Теперь ступень общая (--fs-hero, 56px) и
   иерархия h1 > h2 > h3 держится на всех макетах. */
.hero-split .hero-copy h1,
.split-hero .sh-copy h1{font-size:var(--fs-hero);
  line-height:var(--lh-hero,1.02);letter-spacing:var(--ls-1)}
.hero-split .hero-copy>p{max-width:var(--measure);line-height:var(--lh-prose)}
.hero-split .hero-copy .byline{line-height:1.5;margin-top:12px}

/* --- мера строки и «вдовы» на всех текстовых потоках вне .prose --- */
.bf-copy p,.co-body p,.cb-sub,.tml-b,.quote-block p,.callout p,
.rel p,.author p,.debunk p,.shelf-note,.op-terms,.stat-tile .l{text-wrap:pretty}

/* --- ступень внутрикарточных заголовков.
   Карточкам нужен один размер на всех, иначе сетка «дышит» неровно. --- */
.shelf-head h3,.factsheet>h3,.vd h3{letter-spacing:var(--ls-3);line-height:1.25}
.callout h2,.callout h3,.callout h4,.method .m h4,.rg-body h4,.redflags h4,.author .meta h2,.author .meta h3,.author .meta h4,.blog h4,
.co-h,.tml-h,.op-nm{letter-spacing:var(--ls-4)}

/* --- КИРИЛЛИЦА.
   Space Grotesk без кириллицы: RU-заголовки падают на Inter (unicode-range
   делает это сам). У Inter кириллица шире и с большими просветами, тесный
   латинский трекинг её склеивает — ослабляем на ступень. --- */
:is([lang="ru"],[lang^="ru-"]) :is(h1,h2,.tt-1,.tt-2){letter-spacing:-.018em}
:is([lang="ru"],[lang^="ru-"]) :is(h3,h4,.tt-3,.tt-4){letter-spacing:-.006em}
/* мера в знаках у кириллицы длиннее — держим тот же оптический размер строки */
:is([lang="ru"],[lang^="ru-"]){--measure:62ch;--measure-narrow:54ch}

/* ⚠ Диакритика и плотный межстрочный. `--lh-1:0.95` рассчитан на кириллицу и латиницу
   без надстрочных знаков. У немецких Ä Ö Ü, польских Ą Ć Ę Ł, скандинавских Å Æ Ø
   и французских É È Ê знаки стоят выше линии прописных, и в двухстрочном заголовке
   верхняя строка режется о нижнюю. Ниже 1.04 этого не избежать (порог из `localize`).
   Поднимаем только там, где такие буквы реально встречаются: русская, турецкая
   и английская вёрстка остаются как приняты. */
:is([lang="de"],[lang="pl"],[lang="fr"],[lang="es"],[lang="it"],[lang="nl"],
    [lang="sv"],[lang="da"],[lang="nb"],[lang="fi"],[lang="lt"],[lang="az"],
    [lang="pt-BR"],[lang^="pt-"],
    [lang="kk"],[lang="af"],[lang="vi"]){--lh-1:1.06;--lh-2:1.08;--lh-hero:1.08}

/* Огонки `ą ę` у польского и литовского уходят ещё и ВНИЗ, под базовую линию,
   поэтому им нужен запас больше остальных. */
:is([lang="pl"],[lang="lt"]){--lh-1:1.12;--lh-2:1.10;--lh-hero:1.14}

/* --- подбор на узких экранах: заголовок теряет трекинг, текст — мягкий перенос */
@media(max-width:600px){
  :root{--ls-1:-.024em;--ls-2:-.02em}
  .prose p,.prose li,.lede{hyphens:auto;-webkit-hyphens:auto}
  .sec-title h2,.cta-banner h2{max-width:none}
}

/* --- мелочи, которые видно только вместе --- */
::selection{background:rgba(255,122,61,.28);color:var(--ink)}
sup,sub{font-size:.68em;line-height:0}
abbr[title]{text-decoration:underline dotted;text-underline-offset:.2em;cursor:help}
/* × в множителях — это знак умножения, а не буква: моно ставит его по центру
   кегля, но в дисплейном тексте он проваливается. Выравниваем оптически. */
.num .x,.mono .x{opacity:.72;font-weight:500;margin-left:.04em}
/* курсив нигде не подгружен — синтетический наклон выглядит грязно,
   поэтому смысловой акцент несёт цвет и вес, а <em> внутри текста — не наклон */
.prose em{font-style:normal;color:var(--ink);font-weight:600}

/* Длинный текст рядом с одной картинкой оставляет её висеть в пустоте —
   на широких экранах прикрепляем фигуру, чтобы она шла вместе с чтением. */
@media(min-width:900px){
  .media-left>.media-fig,.media-right>.media-fig{position:sticky;top:96px;align-self:start}
}

/* =====================================================================
   24. ПРЕМИУМ-СЛОЙ · GLASS COCKPIT
   ---------------------------------------------------------------------
   Только добавления и переопределения — ни один существующий класс не
   удалён и не переименован, страницы продолжают стоять на прежней разметке.

   Направление одной фразой: авиация здесь живёт не картинками самолётов,
   а ДИСЦИПЛИНОЙ ОТОБРАЖЕНИЯ ДАННЫХ. Приборная разметка вместо линий,
   числа в окнах-показаниях вместо текста, цвет с одним значением,
   поверхности со светом сверху и контактной тенью снизу.

   ЦВЕТОВОЙ КОД (как в кабине — нормирован, а не декоративен):
     --sig-normal   зелёный   в пределах нормы, подтверждено, кэшаут
     --sig-caution  amber     у границы: лимиты, оговорки, рейтинг
     --sig-warn     красный   отказ: краш, предупреждение — ТОЛЬКО это
     --sig-input    cyan      введено пилотом: поля, фокус, ваши сиды, ссылки
     --sig-computed magenta   вычислено системой: EV, шанс, оценка методики
     --sig-ref      серый     разметка, тики, служебные лейблы
   Оранжевый --heat снят с роли «акцент общего назначения» и оставлен
   там, где действительно «внимание»: бренд, главная кнопка, тики шкал.
   ===================================================================== */

:root{
  /* ---- одно движение на весь сайт ---- */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-soft:cubic-bezier(.32,.72,.28,1);
  --dur-s:.14s; --dur:.22s; --dur-l:.4s;

  /* ---- семантические сигналы ---- */
  --sig-normal:#2FE0A8;
  --sig-caution:#FFC24B;
  --sig-warn:#FF3B4E;
  --sig-input:#FF9A4D;
  --sig-computed:#FFC24B;
  --sig-ref:#8296B3;
  /* cyan становится вторым структурным цветом: ссылки = «введено/справка» */
  --sky:#FFAE6A;

  /* ---- материал поверхности ---- */
  --rim:rgba(255,255,255,.075);          /* внутренний блик по верхней кромке */
  --rim-strong:rgba(255,255,255,.14);
  --rim-lo:rgba(0,0,0,.30);              /* тень по нижней кромке */
  --ring:linear-gradient(158deg,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.06) 34%,
      rgba(255,255,255,.02) 58%,
      rgba(95,211,255,.16) 100%);        /* градиентная обводка */
  --ring-hot:linear-gradient(158deg,
      rgba(255,160,110,.42) 0%,
      rgba(255,255,255,.08) 40%,
      rgba(255,59,78,.20) 100%);
  --ring-input:linear-gradient(158deg,
      rgba(95,211,255,.5) 0%,
      rgba(255,255,255,.08) 46%,
      rgba(95,211,255,.22) 100%);
  --plate-deep:rgba(4,8,18,.62);         /* дно числового окна */

  /* ---- тени: контактная + ambient, тонированные в синеву фона ---- */
  --sh-sm:0 1px 2px rgba(4,8,18,.55), 0 4px 10px -6px rgba(4,8,18,.7);
  --sh:0 1px 3px rgba(4,8,18,.5), 0 12px 28px -14px rgba(4,8,18,.8),
       0 32px 64px -32px rgba(4,8,18,.9);
  --sh-lg:0 1px 3px rgba(4,8,18,.55), 0 18px 40px -18px rgba(4,8,18,.85),
       0 52px 96px -44px rgba(4,8,18,.95);
  --sh-hot:0 1px 3px rgba(4,8,18,.5), 0 14px 32px -16px rgba(255,59,78,.34),
       0 40px 72px -38px rgba(4,8,18,.92);
  --sh-cool:0 1px 3px rgba(4,8,18,.5), 0 14px 32px -16px rgba(95,211,255,.24),
       0 40px 72px -38px rgba(4,8,18,.92);

  /* ---- три ступени вертикального ритма вместо одной ---- */
  --sec-tight:clamp(34px,3.6vw,54px);
  --sec-loose:clamp(74px,8.4vw,132px);

  /* ---- приборная разметка ---- */
  --tick:color-mix(in srgb,var(--ink3) 62%,transparent);
  --tick-major:color-mix(in srgb,var(--ink2) 58%,transparent);
  --hairline:linear-gradient(90deg,transparent,var(--line2) 14%,var(--line2) 86%,transparent);
}

/* =====================================================================
   24.1 МАТЕРИАЛ: градиентная обводка + внутренний блик на всех поверхностях
   Техника: псевдоэлемент-кольцо с mask-composite. Не трогает собственный
   фон компонента (у половины из них радиальные градиенты) и работает
   поверх существующего 1px бордера.
   ===================================================================== */
.card,.chip,.callout,.tl-item,.opcard,.rel a,.factsheet,.keyspec,.toolbox,.tool,
.toc,.expert-note,.badge,.fx,.tm,.changelog,.stat-tile,.teaser,.card-media,.gcard,
.dist,.blog a,.soc,.fair .f,.bp,.geo,.tscroll,.split-hero,.band-feature,.cta-banner,
.callout-media,.method .m,.redflags,.verdict,.quote-block,.mvf .myth,.mvf .fact,
.pc .col,.sim,.author-card,.readout,.hero-shot img{
  position:relative;
}
/* .sh-chip СПЕЦИАЛЬНО исключён из списка выше: он объявлен position:absolute
   (строка ~1651) и позиционируется inset-сдвигами поверх иллюстрации. Попав в
   общий список «кольца компонентов», он получал position:relative — правило идёт
   ниже по файлу с той же специфичностью и побеждало, — падал в поток и уезжал
   за край картинки на 10–14px. Кольцо ему рисует .sh-chip::before ниже, для
   absolute-элемента оно работает так же. */
.card::before,.chip::before,.callout::before,.tl-item::before,.opcard::before,
.rel a::before,.factsheet::before,.keyspec::before,.toolbox::before,.tool::before,
.toc::before,.expert-note::before,.badge::before,.fx::before,.tm::before,
.changelog::before,.stat-tile::before,.teaser::before,.card-media::before,
.gcard::before,.dist::before,.blog a::before,.soc::before,.fair .f::before,
.bp::before,.geo::before,.tscroll::before,.split-hero::before,.band-feature::before,
.cta-banner::before,.callout-media::before,.method .m::before,.redflags::before,
.verdict::before,.mvf .myth::before,.mvf .fact::before,.pc .col::before,
.sim::before,.author-card::before,.readout::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--ring);pointer-events:none;z-index:1;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude;
  transition:background var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
/* внутренний блик по верхней кромке — одна строка, самый высокий ROI */
.card,.chip,.callout,.tl-item,.opcard,.rel a,.factsheet,.keyspec,.toolbox,.tool,
.toc,.expert-note,.badge,.fx,.tm,.changelog,.stat-tile,.teaser,.card-media,.gcard,
.dist,.blog a,.soc,.fair .f,.bp,.geo,.tscroll,.mega,.method .m,.pc .col,
.locale-menu,.author-card{
  box-shadow:inset 0 1px 0 var(--rim),var(--sh-sm);
}
.split-hero,.band-feature,.cta-banner,.callout-media,.verdict,.tool,.ftr-rg{
  box-shadow:inset 0 1px 0 var(--rim-strong),var(--sh);
}
/* плитки в ленте .stat-row рисуют разделители зазором — кольцо там лишнее */
.stat-row>.stat-tile::before{display:none}
.stat-row>.stat-tile{box-shadow:inset 0 1px 0 var(--rim)}
/* .tscroll клипует содержимое: кольцо не должно перекрывать залипающую шапку */
.tscroll::before{z-index:3}

/* =====================================================================
   24.2 РАЗДЕЛИТЕЛЬ СЕКЦИИ — приборная шкала вместо волосяной линии
   Тики 1px через 10px, длинный тик через каждые 50px, базовая линия,
   затухание к обоим краям. Тема появляется структурно, а не декоративно.
   ===================================================================== */
.sec{position:relative;border-top:0}
.sec::before{
  content:"";position:absolute;top:0;left:0;right:0;height:10px;pointer-events:none;
  background:
    linear-gradient(90deg,var(--line) 0 100%) 0 0/100% 1px no-repeat,
    repeating-linear-gradient(90deg,var(--tick) 0 1px,transparent 1px 10px) 0 0/100% 4px no-repeat,
    repeating-linear-gradient(90deg,var(--tick-major) 0 1px,transparent 1px 50px) 0 0/100% 9px no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 58%,rgba(0,0,0,.25) 82%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 58%,rgba(0,0,0,.25) 82%,transparent 100%);
  opacity:.85;
}
.sec:first-of-type::before,.sec.seam::before,.band>.sec::before,
.band .sec:first-of-type::before{display:none}
/* три ступени воздуха: данные плотнее, перелом главы просторнее */
.sec.tight,.sec.sm{padding-top:var(--sec-tight);padding-bottom:var(--sec-tight)}
.sec.loose,.sec.lg{padding-top:var(--sec-loose);padding-bottom:var(--sec-loose)}

/* горизонт — разделитель «искусственного горизонта» для крупных переломов.
   Ставится как <hr class="horizon"> или на .sec.horizon. */
.horizon{position:relative;height:16px;border:0;margin:calc(var(--sec-tight) / 1.6) 0;background:none}
.horizon::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;
  background:linear-gradient(90deg,transparent,var(--sig-input) 18%,var(--sig-input) 82%,transparent);
  opacity:.5}
.horizon::after{content:"";position:absolute;left:50%;top:2px;width:12px;height:12px;
  margin-left:-6px;border:2px solid var(--sig-input);border-radius:2px;transform:rotate(45deg);
  background:var(--bg);opacity:.75}

/* =====================================================================
   24.3 ЗАГОЛОВКИ СЕКЦИЙ — эйрбрау на разметке + акцентная линия
   ===================================================================== */
.eyebrow,.lib-head .kicker{color:var(--ink2)}
.eyebrow::before{content:"";display:inline-block;vertical-align:.28em;
  width:22px;height:1px;margin-right:11px;
  background:linear-gradient(90deg,var(--heat),color-mix(in srgb,var(--heat) 12%,transparent))}
.sec-title{position:relative;padding-bottom:15px}
.sec-title::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--line2) 0,var(--line2) 8%,
    color-mix(in srgb,var(--line2) 35%,transparent) 34%,transparent 66%)}
/* cap-height trim: у 76px заголовка с line-height .95 сверху висит ~18px
   внутреннего лидинга, из-за него эйрбрау-пилюля стоит слишком далеко */
.sec-title h2::before,.cta-banner h2::before,.lib-head h1::before,
.hero-split .hero-copy h1::before,.split-hero .sh-copy h1::before{
  content:"";display:table;margin-bottom:-.11em}
.sec-title h2::after,.cta-banner h2::after{content:"";display:table;margin-top:-.06em}
/* градиент по тексту снят: на тёмном фоне даёт грязный переход */
.score .big,.lib-head h1 em,.tt-1 em,.tt-2 em,.tl-item.top .tl-rank .n,
.tl-score .n,.scorebox .n,.stat-tile .n,.quote-block .qnum{
  background:none;-webkit-background-clip:border-box;background-clip:border-box}
.lib-head h1 em,.tt-1 em,.tt-2 em{color:var(--heat);-webkit-text-fill-color:var(--heat)}
.score .big,.tl-score .n,.scorebox .n,.stat-tile .n,.quote-block .qnum,
.tl-item.top .tl-rank .n{color:var(--ink);-webkit-text-fill-color:var(--ink)}
/* HUD-подсветка — только на данных, никогда на прозе */
.score .big,.tl-score .n,.scorebox .n,.stat-tile .n,.quote-block .qnum,
.sim .mult,.tool-out .r,.verify .out .r,.readout .rv,.hud{
  text-shadow:0 0 1px color-mix(in srgb,currentColor 55%,transparent),
              0 0 22px color-mix(in srgb,currentColor 26%,transparent);
  -webkit-text-stroke:.5px color-mix(in srgb,currentColor 8%,transparent)}
.stat-tile .n.cash,.stat-tile.cash .n{color:var(--sig-normal);-webkit-text-fill-color:var(--sig-normal)}
.tl-score .n,.scorebox .n{color:var(--sig-computed);-webkit-text-fill-color:var(--sig-computed)}

/* =====================================================================
   24.4 .readout — ЧИСЛОВОЕ ОКНО PFD
   Число перестаёт быть текстом и становится показанием прибора.
   Разметка: <span class="readout"><span class="rl">RTP</span>
             <span class="rv">97.00</span></span>
   Модификаторы: .input (cyan, введено), .computed (magenta, вычислено),
   .ok / .caution / .warn, .lg / .sm, .wide (растянуть на всю ширину).
   ===================================================================== */
.readout{display:inline-grid;gap:3px;padding:7px 12px 8px;border-radius:9px;
  background:linear-gradient(180deg,var(--plate-deep),color-mix(in srgb,var(--plate-deep) 62%,transparent));
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--rim),inset 0 -10px 20px -14px color-mix(in srgb,var(--sig-input) 55%,transparent);
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-variant-ligatures:none;
  line-height:1.1;vertical-align:middle}
.readout .rl{font-size:9px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink3);white-space:nowrap}
.readout .rv{font-size:16px;font-weight:700;letter-spacing:-.015em;color:var(--ink);white-space:nowrap}
.readout.sm{padding:5px 9px 6px}
.readout.sm .rv{font-size:13.5px}
.readout.sm .rl{font-size:8.5px;letter-spacing:.18em}
.readout.lg{padding:11px 16px 12px}
.readout.lg .rv{font-size:clamp(24px,3vw,32px)}
.readout.wide{display:grid;width:100%}
.readout.row{grid-template-columns:auto minmax(0,1fr);align-items:baseline;gap:10px}
.readout.row .rv{text-align:right}
.readout.input .rv{color:var(--sig-input)}
.readout.computed .rv{color:var(--sig-computed)}
.readout.ok .rv{color:var(--sig-normal)}
.readout.caution .rv{color:var(--sig-caution)}
.readout.warn .rv{color:var(--sig-warn)}
.readout.input{box-shadow:inset 0 1px 0 var(--rim),inset 0 -10px 20px -13px color-mix(in srgb,var(--sig-input) 75%,transparent)}
.readout.computed{box-shadow:inset 0 1px 0 var(--rim),inset 0 -10px 20px -13px color-mix(in srgb,var(--sig-computed) 65%,transparent)}
.readout.warn{box-shadow:inset 0 1px 0 var(--rim),inset 0 -10px 20px -13px color-mix(in srgb,var(--sig-warn) 65%,transparent)}
/* тиковая линейка под показанием — .readout.scale */
.readout.scale::after{content:"";display:block;height:4px;margin-top:5px;
  background:repeating-linear-gradient(90deg,var(--tick) 0 1px,transparent 1px 6px)}

/* существующие числовые поля получают тот же материал */
.ks-v,.fair code,.tool-out .r,.verify .out .r,.op-bonus .b-n,.bf-tiles .t b,
.sh-chip b,.cmp-rate b,.rating-line b,.bf-tiles .t strong,.sh-chip strong,.cmp-rate strong,.rating-line strong{font-variant-numeric:tabular-nums}
.fair code,.verify .fld,.tool-field input,.tool-field select,.tool-field textarea,
.fair .f input,.sim .ctl label{
  background:linear-gradient(180deg,var(--plate-deep),color-mix(in srgb,var(--plate-deep) 55%,transparent));
  box-shadow:inset 0 1px 0 var(--rim),inset 0 -9px 18px -14px color-mix(in srgb,var(--sig-input) 60%,transparent)}
.fair code{padding:8px 10px;border:1px solid var(--line);border-radius:8px}
.fair .f h5,.fair .f .f-lbl,.verify label,.tool-field label{letter-spacing:.2em;color:var(--sig-ref)}

/* =====================================================================
   24.5 КНОПКИ — вес, отклик, тактильность
   Градиент 180° вместо диагонали 135°: свет падает сверху, как на всех
   остальных поверхностях. Появляются :hover и :active, которых не было.
   ===================================================================== */
:root{
  --grad-btn:linear-gradient(180deg,#FF8B4E 0%,#FA4A4C 62%,#F03247 100%);
  --grad-btn-cash:linear-gradient(180deg,#4CEBBC 0%,#22C9A3 60%,#16B3C9 100%);
}
.btn{transition:transform var(--dur-s) var(--ease),box-shadow var(--dur) var(--ease),
  filter var(--dur) var(--ease),border-color var(--dur) var(--ease),
  background-color var(--dur) var(--ease),color var(--dur) var(--ease);
  letter-spacing:-.005em}
.btn.primary{background:var(--grad-btn);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.25),
    0 1px 2px rgba(4,8,18,.5),0 10px 24px -12px rgba(255,59,78,.55)}
.btn.primary:hover:not(:disabled){filter:brightness(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),inset 0 -1px 0 rgba(0,0,0,.25),
    0 2px 4px rgba(4,8,18,.5),0 16px 34px -12px rgba(255,59,78,.6)}
.btn.cash{background:var(--grad-btn-cash);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.22),
    0 1px 2px rgba(4,8,18,.5),0 10px 24px -12px rgba(47,224,168,.45)}
.btn.cash:hover:not(:disabled){filter:brightness(1.06)}
.btn.play{background:linear-gradient(180deg,#7BD968,#4FAE3E);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 -1px 0 rgba(0,0,0,.24),
    0 1px 2px rgba(4,8,18,.5),0 10px 22px -12px rgba(95,194,74,.55)}
.btn.ghost{box-shadow:inset 0 1px 0 var(--rim)}
.btn.ghost:hover:not(:disabled){border-color:color-mix(in srgb,var(--sig-input) 52%,transparent);
  background:color-mix(in srgb,var(--sig-input) 8%,transparent);color:var(--ink);
  box-shadow:inset 0 1px 0 var(--rim),0 0 0 4px color-mix(in srgb,var(--sig-input) 9%,transparent)}
.btn.amber:hover:not(:disabled),.btn.dark:hover:not(:disabled),
.btn.glass:hover:not(:disabled){filter:brightness(1.07)}
.btn:active:not(:disabled){transform:translateY(1px);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.32),0 1px 2px rgba(4,8,18,.4)}
.btn:disabled{filter:none;opacity:.45;cursor:default;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
/* стрелка в кнопке уезжает — единственное движение, которое читается как «дальше» */
.btn .icn{transition:transform var(--dur) var(--ease)}
.btn:hover:not(:disabled) .icn{transform:translateX(2px)}

/* =====================================================================
   24.6 ФОКУС — одно правило, часть визуальной системы
   cyan = «введено пилотом», поэтому клавиатурный фокус того же цвета.
   ===================================================================== */
a:focus-visible,button:focus-visible,summary:focus-visible,label:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,
.btn:focus-visible,.teaser:focus-visible,.gcard:focus-visible,.tool-row:focus-visible,
.card-media:focus-visible,.opcard:focus-visible,details:focus-visible{
  outline:2px solid var(--sig-input);outline-offset:3px;border-radius:7px;
  box-shadow:0 0 0 6px color-mix(in srgb,var(--sig-input) 14%,transparent)}
.tool-field input:focus-visible,.tool-field select:focus-visible,
.tool-field textarea:focus-visible,.fair .f input:focus-visible,
.sim .ctl input:focus-visible{outline-offset:2px;
  border-color:color-mix(in srgb,var(--sig-input) 70%,transparent)}
.navcb:focus-visible+.nav-btn{outline:2px solid var(--sig-input);outline-offset:2px}
.ev .ev-range:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--sig-input) 30%,transparent)}

/* =====================================================================
   24.7 ЦВЕТ: снятие оранжевого с ролей, где он ничего не значит
   Пока --heat означал одновременно «заголовок», «ссылка» и «опасность»,
   он не означал ничего, а красный «краш» тонул рядом с ним.
   ===================================================================== */
.tm .role,.author .role,.en-role{color:var(--sig-ref)}
.rel .t,.blog .cat,.t-tag,.cm-ribbon{color:var(--sig-input)}
.prose li::marker{color:var(--sig-ref)}
.locale-switch[open]>summary{border-color:color-mix(in srgb,var(--sig-input) 60%,transparent);
  color:var(--ink)}
.faq summary .p,.toc li a .n{color:var(--sig-input)}
.disclose{border-left-color:var(--sig-caution)}
.mi-sec h5 .icn,.mi-sec h3 .icn,.keyspec-h .icn,.toc-h .icn,.factsheet>h3 .icn,.shelf-ic,
.mega-h .icn,.mega-link .icn,.rg-tools .icn{color:var(--sig-ref)}
.method .m .n{color:var(--sig-computed)}
/* фиолетовый мусор из подвала: не читался, но замусоривал палитру */
.ftr{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--bg) 60%,#000))}

/* =====================================================================
   24.8 HOVER И ПЕРЕХОДЫ — одна рука на весь сайт
   Отказ от translateY(-4px) как универсального жеста: подъём 1–2px,
   работу делают обводка и свечение.
   ===================================================================== */
.opcard,.gcard,.teaser,.card-media,.tl-item,.rel a,.chip,.badge,.fx,.blog a,.soc,
a.card-media,.stat-tile,.method .m,.tool-row,.mega-link,.mega-op{
  transition:transform var(--dur) var(--ease),box-shadow var(--dur-l) var(--ease),
    border-color var(--dur) var(--ease),background-color var(--dur) var(--ease),
    color var(--dur) var(--ease)}
.opcard:hover,.gcard:hover,a.card-media:hover,a.card-media:focus-visible{
  transform:translateY(-2px);border-color:var(--line2);box-shadow:inset 0 1px 0 var(--rim-strong),var(--sh-cool)}
.teaser:hover,.tl-item:hover{transform:translateY(-1px);border-color:var(--line2);
  box-shadow:inset 0 1px 0 var(--rim-strong),var(--sh)}
.opcard:hover::before,.gcard:hover::before,a.card-media:hover::before,
.teaser:hover::before,.tl-item:hover::before,.rel a:hover::before{background:var(--ring-input)}
.rel a:hover,.blog a:hover,.soc:hover,.chip:hover,.badge:hover,.fx:hover{
  border-color:var(--line2);box-shadow:inset 0 1px 0 var(--rim-strong),var(--sh-sm)}
.opcard.top::before,.tl-item.top::before{background:var(--ring-hot)}
.opcard.top,.tl-item.top{box-shadow:inset 0 1px 0 var(--rim-strong),var(--sh-sm)}
/* hover, которых не было вовсе */
.faq details{transition:background var(--dur) var(--ease)}
.faq summary{transition:color var(--dur) var(--ease);padding:2px 0}
.faq summary:hover{color:var(--sig-input)}
.faq details[open]{background:linear-gradient(90deg,color-mix(in srgb,var(--sig-input) 5%,transparent),transparent 62%)}
tbody tr{transition:background var(--dur-s) var(--ease)}
.tzebra tbody tr:hover,.fact-table tr:hover,.cmp tbody tr:hover{background:var(--hover)}
.prose a{transition:text-decoration-color var(--dur) var(--ease),text-decoration-thickness var(--dur) var(--ease)}
.prose a:hover{text-decoration-color:var(--sig-input);text-decoration-thickness:2px}
.shelf-all,.t-arr,.mega-foot a{transition:gap var(--dur) var(--ease),color var(--dur) var(--ease)}

/* волосяные разделители внутри карточек — с затухающими концами */
.ks-row,.faq details,.ev .stat,.tool-foot,.moreinfo,.cm-row,.op-bonus,.keyspec-h,
.tool-head,.sources,.mega-foot{
  border-image:var(--hairline) 1;border-image-slice:1}
.op-bonus{border-style:solid;border-width:1px 0}
.ks-row,.faq details,.ev .stat,.cm-row{border-style:solid;border-width:0 0 1px}
.tool-foot,.moreinfo,.keyspec-h,.tool-head,.sources,.mega-foot{border-style:solid}
.tool-foot,.moreinfo,.sources,.mega-foot{border-width:1px 0 0}
.keyspec-h,.tool-head{border-width:0 0 1px}
.ks-row:last-child,.faq details:last-child{border-bottom-width:0}

/* =====================================================================
   24.9 ХЕДЕР — стекло с иерархией + лента высоты вместо мёртвой плашки
   ===================================================================== */
.hdr{backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  box-shadow:0 1px 0 var(--line),0 10px 30px -24px rgba(4,8,18,.9)}
.mega,.locale-menu{backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  background:color-mix(in srgb,var(--surface) 92%,transparent);box-shadow:var(--sh-lg)}
/* лента прогресса чтения по нижней кромке шапки: cyan → amber → красный,
   как рост множителя. Чистый CSS, без JS. */
.hdr::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:2px;
  transform:scaleX(0);transform-origin:0 50%;pointer-events:none;
  background:linear-gradient(90deg,var(--sig-input),var(--sig-normal) 42%,
    var(--sig-caution) 76%,var(--sig-warn));
  box-shadow:0 0 12px -2px color-mix(in srgb,var(--sig-input) 60%,transparent)}
@supports (animation-timeline:scroll()){
  .hdr::after{animation:hud-progress linear both;animation-timeline:scroll(root block)}
}
@keyframes hud-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* =====================================================================
   24.10 ЛЕНТА ВЫСОТЫ — единственная смелая вещь на весь сайт
   Фиксированная приборная шкала по левому краю: тики, заполнение снизу
   вверх по мере чтения и bug-указатель текущей позиции. Одновременно
   навигация, тема и подпись сайта. Снимается ниже 1280px, где нет полей.
   ===================================================================== */
@media(min-width:1280px){
  /* статическая тиковая лента */
  html::before{content:"";position:fixed;left:12px;top:96px;bottom:72px;width:20px;
    z-index:30;pointer-events:none;
    background:
      repeating-linear-gradient(180deg,var(--tick) 0 1px,transparent 1px 13px) right 0 top 0/7px 100% no-repeat,
      repeating-linear-gradient(180deg,var(--tick-major) 0 1px,transparent 1px 65px) right 0 top 0/14px 100% no-repeat,
      linear-gradient(180deg,var(--line2) 0 100%) right 0 top 0/1px 100% no-repeat;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);
            mask-image:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);
    opacity:.6}
  /* заполнение снизу вверх: цвет фиксирован на ленте, растёт только высота */
  body::before{content:"";position:fixed;left:30px;bottom:72px;width:2px;height:0;
    z-index:30;pointer-events:none;border-radius:2px;
    background:linear-gradient(0deg,var(--sig-normal),var(--sig-caution) 64%,var(--sig-warn))
      left bottom/2px calc(100vh - 168px) no-repeat;
    box-shadow:0 0 10px -2px color-mix(in srgb,var(--sig-input) 40%,transparent);
    -webkit-mask-image:linear-gradient(0deg,transparent,#000 8%);
            mask-image:linear-gradient(0deg,transparent,#000 8%);
    opacity:.85}
  /* bug-указатель текущей позиции — треугольная метка выбранного значения */
  html::after{content:"";position:fixed;left:20px;bottom:70px;width:0;height:0;z-index:31;
    pointer-events:none;border:5px solid transparent;
    border-left:10px solid var(--sig-input);
    filter:drop-shadow(0 0 6px color-mix(in srgb,var(--sig-input) 70%,transparent))}
  @supports (animation-timeline:scroll()){
    body::before{animation:alt-fill linear both;animation-timeline:scroll(root block)}
    html::after{animation:alt-bug linear both;animation-timeline:scroll(root block)}
  }
}
@keyframes alt-fill{from{height:0}to{height:calc(100vh - 168px)}}
@keyframes alt-bug{from{bottom:70px}to{bottom:calc(100vh - 102px)}}

/* =====================================================================
   24.11 ЗЕРНО — большие тёмные плоскости перестают быть залитой краской
   Правило Шанель: зерно ИЛИ скан-линии. Оставлено зерно.
   ===================================================================== */
body::after{content:"";position:fixed;inset:0;z-index:45;pointer-events:none;
  opacity:.032;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px}
@media(max-width:720px){body::after{display:none}}

/* =====================================================================
   24.12 CALLOUT → АННУНЦИАТОР
   Заливка снята, работу делает левая шина и форма иконки по уровню:
   справка (cyan, скруглённый квадрат) и предупреждение (красный, ромб)
   больше не читаются как два одинаковых серых кирпича.
   ===================================================================== */
.callout{background:linear-gradient(90deg,
    color-mix(in srgb,var(--sig-input) 8%,transparent),transparent 46%),var(--elev);
  border:1px solid var(--line);border-radius:var(--r-s);
  box-shadow:inset 3px 0 0 var(--sig-input),
             inset 10px 0 18px -13px color-mix(in srgb,var(--sig-input) 62%,transparent),
             inset 0 1px 0 var(--rim),var(--sh-sm);
  padding:17px 20px 17px 22px}
.callout .ic{background:color-mix(in srgb,var(--sig-input) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--sig-input) 34%,transparent);
  color:var(--sig-input);border-radius:9px}
.callout.warn{background:linear-gradient(90deg,
    color-mix(in srgb,var(--sig-warn) 9%,transparent),transparent 46%),var(--elev);
  border-color:color-mix(in srgb,var(--sig-warn) 22%,transparent);
  box-shadow:inset 3px 0 0 var(--sig-warn),
             inset 10px 0 18px -13px color-mix(in srgb,var(--sig-warn) 62%,transparent),
             inset 0 1px 0 var(--rim),var(--sh-sm)}
.callout.warn .ic{background:color-mix(in srgb,var(--sig-warn) 12%,transparent);
  border-color:color-mix(in srgb,var(--sig-warn) 40%,transparent);color:var(--sig-warn);
  border-radius:4px;transform:rotate(45deg)}
.callout.warn .ic>*{transform:rotate(-45deg)}
.callout.caution{background:linear-gradient(90deg,
    color-mix(in srgb,var(--sig-caution) 9%,transparent),transparent 46%),var(--elev);
  border-color:color-mix(in srgb,var(--sig-caution) 22%,transparent);
  box-shadow:inset 3px 0 0 var(--sig-caution),
             inset 10px 0 18px -13px color-mix(in srgb,var(--sig-caution) 62%,transparent),
             inset 0 1px 0 var(--rim),var(--sh-sm)}
.callout.caution .ic{background:color-mix(in srgb,var(--sig-caution) 12%,transparent);
  border-color:color-mix(in srgb,var(--sig-caution) 40%,transparent);color:var(--sig-caution);
  border-radius:50% 9px 50% 9px}
.callout.ok{background:linear-gradient(90deg,
    color-mix(in srgb,var(--sig-normal) 9%,transparent),transparent 46%),var(--elev);
  border-color:color-mix(in srgb,var(--sig-normal) 22%,transparent);
  box-shadow:inset 3px 0 0 var(--sig-normal),
             inset 10px 0 18px -13px color-mix(in srgb,var(--sig-normal) 62%,transparent),
             inset 0 1px 0 var(--rim),var(--sh-sm)}
.callout.ok .ic{background:color-mix(in srgb,var(--sig-normal) 12%,transparent);
  border-color:color-mix(in srgb,var(--sig-normal) 40%,transparent);color:var(--sig-normal);
  border-radius:50%}
.callout :is(h2,h3,h4){letter-spacing:var(--ls-4)}
.callout::before{border-radius:var(--r-s)}

/* =====================================================================
   24.13 СИМУЛЯТОР → PFD
   Sunburst снят. Появляются сетка кокпита, лента высоты по правому краю
   с тиками, линия горизонта и локальное свечение под блоком.
   Центральный блок страницы перестаёт выглядеть незагрузившимся виджетом.
   ===================================================================== */
.sim{z-index:0;isolation:isolate;border-radius:var(--r-l);
  background:
    radial-gradient(120% 90% at 50% 118%,color-mix(in srgb,var(--sig-warn) 12%,transparent),transparent 62%),
    linear-gradient(180deg,#0B1120,#080C15);
  border:1px solid var(--line2);
  box-shadow:inset 0 1px 0 var(--rim-strong),var(--sh-lg)}
/* сетка кокпита под канвасом */
.sim::before{content:"";position:absolute;inset:0;z-index:-1;padding:0;background:
    linear-gradient(90deg,color-mix(in srgb,var(--ink3) 16%,transparent) 0 1px,transparent 1px 100%) 0 0/48px 100%,
    linear-gradient(180deg,color-mix(in srgb,var(--ink3) 16%,transparent) 0 1px,transparent 1px 100%) 0 0/100% 40px;
  -webkit-mask:none;mask:none;
  -webkit-mask-image:radial-gradient(120% 100% at 30% 100%,#000,transparent 78%);
          mask-image:radial-gradient(120% 100% at 30% 100%,#000,transparent 78%);
  opacity:.55;border-radius:inherit}
/* лента высоты по правому краю + линия горизонта */
.sim::after{content:"";position:absolute;top:0;right:0;bottom:0;width:34px;z-index:2;
  pointer-events:none;border-radius:0 var(--r-l) var(--r-l) 0;
  background:
    repeating-linear-gradient(180deg,var(--tick) 0 1px,transparent 1px 11px) right 8px top 0/10px 100% no-repeat,
    repeating-linear-gradient(180deg,var(--tick-major) 0 1px,transparent 1px 55px) right 8px top 0/18px 100% no-repeat,
    linear-gradient(180deg,color-mix(in srgb,var(--ink2) 40%,transparent) 0 100%) right 8px top 0/1px 100% no-repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 72%,transparent 96%);
          mask-image:linear-gradient(180deg,transparent,#000 14%,#000 72%,transparent 96%);
  opacity:.9}
.sim .mult{color:var(--sig-warn);letter-spacing:-.03em;
  text-shadow:0 0 2px color-mix(in srgb,var(--sig-warn) 60%,transparent),
              0 0 30px color-mix(in srgb,var(--sig-warn) 45%,transparent)}
.sim .st{color:var(--sig-ref);letter-spacing:.2em}
.sim-bal{color:var(--sig-ref)}
.sim-bal b,.sim-bal strong{color:var(--sig-normal)}
/* поля управления — показания, а не инпуты */
.sim .ctl label{border-radius:9px;border:1px solid var(--line);color:var(--sig-ref);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.sim .ctl input{color:var(--sig-input);font-size:15px;letter-spacing:-.01em;
  text-shadow:0 0 14px color-mix(in srgb,var(--sig-input) 40%,transparent)}
.sim .ctl label:focus-within{border-color:color-mix(in srgb,var(--sig-input) 60%,transparent);
  box-shadow:inset 0 1px 0 var(--rim),0 0 0 3px color-mix(in srgb,var(--sig-input) 14%,transparent)}
.sim-toast{border-radius:10px;box-shadow:var(--sh);backdrop-filter:blur(10px)}
/* локальное свечение под симулятором: блок становится источником света */
.sim-glow{position:relative}
.sim-glow::before{content:"";position:absolute;left:8%;right:8%;top:16%;bottom:-6%;z-index:-1;
  background:radial-gradient(60% 60% at 50% 60%,color-mix(in srgb,var(--sig-warn) 26%,transparent),transparent 70%);
  filter:blur(60px);pointer-events:none}
/* .fair — панель проверки читается как приборный отсек */
.fair .f h5,.fair .f .f-lbl{color:var(--sig-ref)}
.fair-proof{border-color:color-mix(in srgb,var(--sig-normal) 30%,transparent)}
.fair-proof .ok{color:var(--sig-normal)}

/* =====================================================================
   24.14 ТАБЛИЦЫ — премиальная обвязка
   Залипающая шапка, зебра, лидер строки, моно-цифры, сигнальная шина слева.
   ===================================================================== */
.tscroll{background:var(--surface);box-shadow:inset 0 1px 0 var(--rim),var(--sh)}
/* overflow:hidden делает .tscroll скролл-контейнером, и залипающая шапка
   начинает липнуть к НЕМУ, уезжая на 66px вниз и накрывая первую строку.
   overflow:clip клипует так же (радиус жив), но контейнером не становится. */
@media(min-width:901px){.tscroll{overflow:clip}}
th{color:var(--sig-ref);letter-spacing:.14em}
thead th{background:linear-gradient(180deg,var(--elev2),color-mix(in srgb,var(--elev2) 70%,var(--surface)));
  box-shadow:inset 0 1px 0 var(--rim),inset 0 -1px 0 var(--line2)}
tbody td{border-bottom-color:var(--line)}

/* --- .cmp: сравнительная витрина уровня топовых агрегаторов --- */
.cmp{font-size:14px;border-collapse:separate;border-spacing:0}
.cmp thead th{position:sticky;top:var(--sticky-top);z-index:3;
  background:linear-gradient(180deg,var(--elev2),color-mix(in srgb,var(--elev2) 78%,var(--surface)));
  backdrop-filter:blur(12px);color:var(--sig-ref);font-weight:700;letter-spacing:.14em;
  padding:13px 14px;border-bottom:1px solid var(--line2);
  box-shadow:inset 0 1px 0 var(--rim),0 1px 0 var(--line2)}
.cmp tbody{counter-reset:cmprow}
.cmp tbody tr{counter-increment:cmprow;transition:background var(--dur-s) var(--ease)}
.cmp tbody tr:nth-child(even){background:var(--zebra)}
.cmp tbody tr:hover{background:var(--hover)}
.cmp td{padding:15px 14px;vertical-align:middle;border-bottom:1px solid var(--line)}
.cmp tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--sig-input)}
/* ранг строки: порядок в таблице — это факт, а не украшение */
.cmp-brand::before{content:counter(cmprow,decimal-leading-zero);flex:none;
  font-family:var(--mono);font-size:11px;font-weight:700;color:var(--ink3);
  font-variant-numeric:tabular-nums;letter-spacing:.04em;min-width:17px}
.cmp tbody tr:first-child .cmp-brand::before{color:var(--sig-caution)}
.cmp tbody tr:first-child td:first-child{box-shadow:inset 3px 0 0 var(--sig-caution)}
.cmp tbody tr:first-child:hover td:first-child{box-shadow:inset 3px 0 0 var(--sig-caution)}
.cmp-brand a{letter-spacing:-.012em;transition:color var(--dur) var(--ease)}
/* оценка — «вычислено системой», поэтому magenta и окно показания */
.cmp-rate{white-space:nowrap;text-align:right}
.cmp-rate b,.cmp-rate strong{display:inline-block;font-family:var(--mono);font-size:16px;font-weight:700;
  color:var(--sig-computed);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  padding:5px 9px 6px;border-radius:8px;border:1px solid color-mix(in srgb,var(--sig-computed) 26%,transparent);
  background:linear-gradient(180deg,var(--plate-deep),color-mix(in srgb,var(--plate-deep) 55%,transparent));
  box-shadow:inset 0 1px 0 var(--rim),
             inset 0 -9px 18px -13px color-mix(in srgb,var(--sig-computed) 70%,transparent);
  text-shadow:0 0 16px color-mix(in srgb,var(--sig-computed) 34%,transparent)}
.cmp-rate small{display:block;color:var(--ink3);font-size:10px;font-family:var(--mono);
  letter-spacing:.16em;text-transform:uppercase;margin-top:4px}
.cmp .yes{color:var(--sig-normal)}
.cmp .no{color:var(--sig-warn)}
.cmp td .btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(4,8,18,.4),
  0 6px 16px -10px rgba(255,59,78,.5)}
.cmp-note,.table-note{border-left:2px solid var(--line2);padding-left:12px;margin-top:14px}

/* --- .matrix / .compare-table / .fact-table: та же дисциплина --- */
.matrix thead th,.compare-table thead th{
  background:linear-gradient(180deg,var(--elev2),color-mix(in srgb,var(--elev2) 78%,var(--surface)));
  box-shadow:inset 0 1px 0 var(--rim),inset 0 -1px 0 var(--line2)}
.matrix .best{color:var(--sig-normal)}
.matrix .best::after{color:var(--sig-caution)}
.compare-table tr.is-best>:first-child{box-shadow:inset 3px 0 0 var(--sig-normal)}
.compare-table .vh[data-best]::after{color:var(--sig-normal)}
.fact-table td:first-child{color:var(--sig-ref);font-weight:600;font-size:13.5px}
.fact-table td:last-child{font-family:var(--mono);font-weight:700;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
.fact-table .src{font-family:var(--mono);letter-spacing:.02em}
.factsheet>h3 .icn{color:var(--sig-ref)}

/* =====================================================================
   24.15 ВИТРИНА ОПЕРАТОРОВ — глубина, лента, рейтинг-бейдж
   ===================================================================== */
.opcard{border-radius:var(--r-l);padding:19px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--elev2) 46%,var(--elev)),var(--elev))}
.opcard::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;border-radius:inherit;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--sig-input) 55%,transparent) 30%,
    color-mix(in srgb,var(--heat) 55%,transparent) 70%,transparent);
  opacity:0;transition:opacity var(--dur) var(--ease);pointer-events:none;z-index:2}
.opcard:hover::after{opacity:1}
.op-ribbon{background:var(--grad-btn);border-radius:7px 0 0 7px;padding:5px 11px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 6px 16px -10px rgba(255,59,78,.6);
  letter-spacing:.14em;font-weight:700}
.op-ribbon.quiet,.op-ribbon.sponsored{background:var(--elev2);box-shadow:inset 0 1px 0 var(--rim)}
.op-ribbon.sponsored{color:var(--sig-caution)}
/* рейтинг-бейдж: оценка в окне показания */
.op-rt{gap:10px}
.op-rt b,.op-rt strong{display:inline-flex;align-items:center;font-family:var(--mono);font-size:12.5px;
  font-weight:700;color:var(--sig-caution);padding:3px 8px 4px;border-radius:7px;
  border:1px solid color-mix(in srgb,var(--sig-caution) 28%,transparent);
  background:linear-gradient(180deg,var(--plate-deep),color-mix(in srgb,var(--plate-deep) 55%,transparent));
  box-shadow:inset 0 1px 0 var(--rim)}
.op-logo,.tl-logo{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),var(--sh-sm)}
/* плиты-заглушки брендов перестают выглядеть плейсхолдером */
.op-plate{background:
    linear-gradient(180deg,color-mix(in srgb,var(--brand,#7C8AA5) 26%,transparent),
      color-mix(in srgb,var(--brand,#7C8AA5) 10%,transparent));
  border:1px solid color-mix(in srgb,var(--brand,#7C8AA5) 44%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 22%,transparent),var(--sh-sm);
  letter-spacing:.06em;text-transform:uppercase}
.op-bonus .b-n{color:var(--ink);font-size:20px}
.op-bonus .b-l{color:var(--sig-ref);font-family:var(--mono);font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;margin-top:5px}
.op-usps .icn{color:var(--sig-normal)}
.op-usps li.no .icn{color:var(--sig-warn)}
.op-terms{color:var(--ink3);font-family:var(--mono);font-size:10.5px;line-height:1.5}
.shelf-ic{background:linear-gradient(180deg,color-mix(in srgb,var(--elev2) 80%,var(--elev)),var(--elev2));
  box-shadow:inset 0 1px 0 var(--rim),var(--sh-sm)}
/* топ-карточка: горячая обводка + собственное свечение */
.opcard.top{background:
    radial-gradient(120% 70% at 50% -20%,color-mix(in srgb,var(--heat) 14%,transparent),transparent 62%),
    linear-gradient(180deg,color-mix(in srgb,var(--elev2) 50%,var(--elev)),var(--elev))}

/* топлист — тот же материал */
.tl-item{border-radius:var(--r-l);
  background:linear-gradient(180deg,color-mix(in srgb,var(--elev2) 40%,var(--elev)),var(--elev))}
.tl-bonus b,.tl-bonus strong{color:var(--ink)}
.tl-rank .lbl,.verdict-w{color:var(--sig-ref)}
.rating-line .lbl{color:var(--sig-normal)}

/* =====================================================================
   24.16 .author-card — КАРТОЧКА АВТОРА
   Фото, регалии, метод, соцдоказательство. E-E-A-T без пафоса: всё,
   что здесь стоит, должно быть проверяемо.

   Разметка:
   <div class="author-card">
     <div class="ac-side">
       <img class="ac-photo" src="…" alt="…" width="120" height="120">
       <div class="ac-badge"><svg class="icn">…</svg> Проверенный автор</div>
     </div>
     <div class="ac-main">
       <span class="eyebrow">Автор материала</span>
       <h3 class="ac-name">Имя Фамилия</h3>
       <span class="ac-role">Ведущий аналитик по краш-играм</span>
       <p class="ac-bio">…</p>
       <ul class="ac-cred">
         <li><svg class="icn">…</svg> Регалия с пруфом</li>
       </ul>
       <div class="ac-method"><span class="ac-mh">Как он проверяет</span>
         <p>…</p></div>
       <div class="ac-proof">
         <span class="readout sm"><span class="rl">Материалов</span><span class="rv">128</span></span>
         …
       </div>
       <div class="ac-links"><a href="…">…</a></div>
     </div>
   </div>
   Модификатор .compact — врезка в одну строку без метода и пруфов.
   ===================================================================== */
.author-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px,2.6vw,30px);align-items:start;
  border:1px solid var(--line2);border-radius:var(--r-l);padding:clamp(20px,2.6vw,28px);
  background:
    radial-gradient(620px 260px at 6% -30%,color-mix(in srgb,var(--sig-input) 12%,transparent),transparent 64%),
    linear-gradient(180deg,color-mix(in srgb,var(--elev2) 52%,var(--elev)),var(--elev));
  box-shadow:inset 0 1px 0 var(--rim-strong),var(--sh)}
.ac-side{display:grid;gap:11px;justify-items:center;width:clamp(96px,11vw,124px)}
.ac-photo{width:100%;aspect-ratio:1;border-radius:var(--r);object-fit:cover;display:block;
  border:1px solid var(--line2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),var(--sh-sm)}
.ac-side .op-plate,.ac-avatar{width:100%;aspect-ratio:1;height:auto;border-radius:var(--r);
  display:grid;place-items:center;font-family:var(--mono);font-weight:700;
  font-size:clamp(22px,2.6vw,30px);color:var(--ink2);
  background:linear-gradient(180deg,var(--elev2),var(--elev));border:1px solid var(--line2);
  box-shadow:inset 0 1px 0 var(--rim),var(--sh-sm)}
.ac-badge{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
  font-family:var(--mono);font-size:9px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-align:center;
  color:var(--sig-normal);padding:6px 8px;border-radius:9px;line-height:1.3;
  border:1px solid color-mix(in srgb,var(--sig-normal) 34%,transparent);
  background:color-mix(in srgb,var(--sig-normal) 9%,transparent)}
.ac-badge .icn{width:12px;height:12px}
.ac-main{min-width:0;display:grid;gap:9px}
.ac-main>.eyebrow{margin-bottom:1px}
.ac-name{font-family:var(--disp);font-weight:700;font-size:clamp(19px,2.1vw,23px);
  line-height:1.18;letter-spacing:var(--ls-3);color:var(--ink);margin:0}
.ac-role{display:block;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--sig-ref);margin-top:-4px}
.ac-bio{margin:4px 0 0;font-size:14.5px;line-height:1.62;color:var(--ink-body);
  max-width:64ch;text-wrap:pretty}
.ac-cred{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px 22px;
  grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}
/* иконка позиционируется, а не занимает колонку грида: ссылка внутри пункта
   иначе становится ОТДЕЛЬНЫМ grid-элементом и уезжает на следующую строку */
.ac-cred li{position:relative;padding-left:23px;font-size:13px;line-height:1.55;color:var(--ink2);
  min-width:0;overflow-wrap:break-word}
.ac-cred .icn{position:absolute;left:0;top:3px;width:14px;height:14px;color:var(--sig-normal)}
.ac-cred a{color:var(--sig-input);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,var(--sig-input) 42%,transparent)}
.ac-method{margin-top:6px;padding:13px 16px;border-radius:var(--r-s);
  background:linear-gradient(90deg,color-mix(in srgb,var(--sig-input) 7%,transparent),transparent 56%),
    color-mix(in srgb,var(--bg) 55%,transparent);
  box-shadow:inset 3px 0 0 var(--sig-input),
             inset 12px 0 22px -15px color-mix(in srgb,var(--sig-input) 90%,transparent),
             inset 0 1px 0 var(--rim)}
.ac-mh{display:block;font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--sig-input);margin-bottom:6px}
.ac-method p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink2);max-width:70ch}
.ac-proof{display:flex;gap:9px;flex-wrap:wrap;margin-top:8px}
.ac-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.ac-links a{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--line2);font-size:12.5px;font-weight:600;color:var(--ink2);
  box-shadow:inset 0 1px 0 var(--rim);
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease)}
.ac-links a:hover{color:var(--sig-input);
  border-color:color-mix(in srgb,var(--sig-input) 52%,transparent);
  background:color-mix(in srgb,var(--sig-input) 8%,transparent)}
.ac-links .icn{width:14px;height:14px}
.ac-upd{font-family:var(--mono);font-size:11px;color:var(--ink3);letter-spacing:.04em;
  font-variant-numeric:tabular-nums}
.author-card.compact{grid-template-columns:64px minmax(0,1fr);gap:16px;padding:16px 18px;
  align-items:center}
.author-card.compact .ac-side{width:64px}
.author-card.compact .ac-bio{font-size:13.5px}
@media(max-width:640px){
  .author-card{grid-template-columns:1fr;gap:16px}
  .ac-side{width:88px;justify-items:start}
  .ac-cred{grid-template-columns:1fr}
}
/* существующая .author получает тот же материал, разметку не трогаем */
.author{background:linear-gradient(180deg,color-mix(in srgb,var(--elev2) 42%,var(--elev)),var(--elev));
  border:1px solid var(--line);border-radius:var(--r-l);padding:18px 20px;
  box-shadow:inset 0 1px 0 var(--rim),var(--sh-sm)}
.author .pfp{box-shadow:inset 0 1px 0 var(--rim),var(--sh-sm)}
.tm .pfp{box-shadow:inset 0 1px 0 var(--rim),var(--sh-sm)}
.expert-note{border-left-color:var(--sig-input)}
.en-av{box-shadow:0 0 0 3px color-mix(in srgb,var(--sig-input) 14%,transparent),var(--sh-sm)}

/* =====================================================================
   24.17 ПРОЧИЕ ПОВЕРХНОСТИ, доведённые до одного материала
   ===================================================================== */
.split-hero,.band-feature,.cta-banner,.callout-media{border-radius:var(--r-xl)}
.cta-banner{background:
    radial-gradient(560px 300px at 50% -14%,color-mix(in srgb,var(--sig-warn) 34%,transparent),transparent 64%),
    linear-gradient(180deg,color-mix(in srgb,var(--elev2) 55%,var(--elev)),var(--elev))}
.band-feature{background:
    radial-gradient(700px 320px at 15% 0,color-mix(in srgb,var(--heat) 18%,transparent),transparent 62%),
    linear-gradient(180deg,color-mix(in srgb,var(--elev2) 45%,var(--elev)),var(--elev))}
.bf-tiles .t{box-shadow:inset 0 1px 0 var(--rim);border-radius:var(--r-s)}
.bf-tiles .t span{color:var(--sig-ref);font-family:var(--mono);font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;line-height:1.35}
.stat-tile{background:linear-gradient(180deg,color-mix(in srgb,var(--elev2) 55%,var(--elev)),var(--elev))}
.stat-tile .l{color:var(--ink2)}
.stat-tile .d{color:var(--sig-ref);letter-spacing:.06em}
.keyspec-h,.toc-h,.changelog .t,.mega-h{color:var(--sig-ref);letter-spacing:.16em}
.ks-v.good{color:var(--sig-normal)}
.ks-v.bad{color:var(--sig-warn)}
.tool-led{box-shadow:0 0 0 4px color-mix(in srgb,var(--sig-normal) 16%,transparent),
  0 0 14px color-mix(in srgb,var(--sig-normal) 60%,transparent)}
.tool-out .r{color:var(--sig-normal)}
.tool-out.bad .r,.tool-out.bad .chk{color:var(--sig-warn)}
.pf-badge{background:color-mix(in srgb,var(--sig-normal) 8%,transparent);
  border-color:color-mix(in srgb,var(--sig-normal) 28%,transparent);
  box-shadow:inset 0 1px 0 var(--rim)}
.pf-badge b,.geo-yes,.pf-badge strong{color:var(--sig-normal)}
.geo-yes{background:color-mix(in srgb,var(--sig-normal) 10%,transparent);
  border-color:color-mix(in srgb,var(--sig-normal) 30%,transparent);
  box-shadow:inset 0 1px 0 var(--rim)}
.badge .ic.v{background:color-mix(in srgb,var(--sig-normal) 12%,transparent);color:var(--sig-normal);
  border:1px solid color-mix(in srgb,var(--sig-normal) 30%,transparent);border-radius:9px}
.badge .ic.m{background:color-mix(in srgb,var(--sig-input) 12%,transparent);color:var(--sig-input);
  border:1px solid color-mix(in srgb,var(--sig-input) 30%,transparent);border-radius:9px}
.check-list .ck{box-shadow:inset 0 1px 0 var(--rim)}
.changelog b,.changelog strong{color:var(--sig-normal)}
.pill{box-shadow:inset 0 1px 0 var(--rim)}
.promo{border-color:color-mix(in srgb,var(--sig-normal) 34%,transparent)}
.promo b,.promo strong{color:var(--sig-normal)}
.hp.b{color:#9FDCFF;background:color-mix(in srgb,var(--sig-input) 16%,transparent)}
.history b,.history strong{box-shadow:inset 0 1px 0 var(--rim)}
.debunk .stamp{color:var(--sig-warn);border-color:var(--sig-warn);
  box-shadow:0 4px 18px -10px color-mix(in srgb,var(--sig-warn) 80%,transparent)}
.dist .bar{box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.dist .p,.dist .x span{color:var(--sig-ref)}
.timeline>li::before{box-shadow:0 0 0 3px color-mix(in srgb,var(--sig-input) 14%,transparent)}
.timeline>li::before{border-color:var(--sig-input)}
.tml-date{color:var(--sig-input)}
.timeline::before{background:linear-gradient(180deg,var(--sig-input),var(--sig-caution) 44%,var(--line) 96%)}
.quote-block{border-inline-start-color:var(--sig-input)}
.quote-block::before{color:var(--sig-input)}
.quote-block.fact{border-inline-start-color:var(--sig-normal)}
.quote-block.warn{border-inline-start-color:var(--sig-warn)}
.method .m::after{background:linear-gradient(90deg,transparent,var(--sig-input) 22%,var(--heat) 62%,transparent 78%)}
.moreinfo>summary{color:var(--sig-ref);letter-spacing:.16em;
  transition:color var(--dur) var(--ease),background-color var(--dur) var(--ease)}
.moreinfo>summary:hover{color:var(--sig-input);background:var(--hover)}
.mi-sec h5,.mi-sec h3{color:var(--sig-ref);letter-spacing:.16em}
.g-badge{color:var(--sig-normal)}
.g-mult{color:var(--sig-caution)}
.g-badge,.g-mult{box-shadow:inset 0 1px 0 var(--rim);border:1px solid var(--line)}
.cm-rank{background:var(--grad-btn);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.sh-chip{border-radius:var(--r-s)}
.rg-mark{box-shadow:inset 0 1px 0 var(--rim),0 0 20px -10px color-mix(in srgb,var(--sig-warn) 80%,transparent)}
.fmark{box-shadow:inset 0 1px 0 var(--rim)}
.hero-shot img{box-shadow:inset 0 1px 0 var(--rim),var(--sh-lg)}
.hs-badge b,.hs-badge,.hs-badge strong{color:var(--sig-normal)}
.mock{background:color-mix(in srgb,var(--sig-caution) 10%,transparent);
  border-color:color-mix(in srgb,var(--sig-caution) 30%,transparent);color:var(--sig-caution)}
.mega-link:hover,.mega-op:hover,.locale-menu a:hover,.nav-item>button:hover,
.nav-link:hover,.nav-item:hover>.nav-btn,.nav-item:focus-within>.nav-btn{
  background:color-mix(in srgb,var(--sig-input) 9%,transparent);color:var(--ink)}
.locale-menu a.on{background:color-mix(in srgb,var(--sig-input) 12%,transparent)}
/* На узком экране панель шире, чем расстояние от переключателя до края: при ширине
   340px и кнопке у самого края она вылезала даже в обычной, левосторонней вёрстке
   (на русской мобильной — на 16 пикселей). Привязываем не к кнопке, а к экрану. */
@media(max-width:760px){
  .locale-menu{position:fixed;inset-inline:12px;top:calc(var(--hdr-h, 64px) + 8px);
    min-width:0;max-width:none}
}
.mega-link>span i{color:var(--sig-ref)}
::selection{background:color-mix(in srgb,var(--sig-input) 30%,transparent);color:var(--ink)}

/* =====================================================================
   24.18 АДАПТИВ И ДОСТУПНОСТЬ ПРЕМИУМ-СЛОЯ
   ===================================================================== */
@media(max-width:720px){
  .sec::before{height:7px;background:
    linear-gradient(90deg,var(--line) 0 100%) 0 0/100% 1px no-repeat,
    repeating-linear-gradient(90deg,var(--tick) 0 1px,transparent 1px 9px) 0 0/100% 4px no-repeat}
  .sec-title{padding-bottom:12px}
  .sim::after{width:22px}
  .sim{border-radius:var(--r)}
  .callout{padding:15px 16px 15px 18px}
  .readout.lg .rv{font-size:24px}
}
@media(max-width:520px){
  .sim::after{display:none}
  .cmp-brand::before{display:none}
}
@media(prefers-reduced-motion:reduce){
  html::before,html::after,body::before,.hdr::after{animation:none!important}
  .opcard:hover,.gcard:hover,.teaser:hover,.tl-item:hover,a.card-media:hover{transform:none}
  .btn:active:not(:disabled){transform:none}
  .btn:hover:not(:disabled) .icn{transform:none}
}
@media(prefers-contrast:more){
  :root{--line:rgba(255,255,255,.2);--line2:rgba(255,255,255,.32);--rim:rgba(255,255,255,.14)}
  body::after{display:none}
}
/* печать: приборная обвязка и зерно не нужны на бумаге */
@media print{
  html::before,html::after,body::before,body::after,.sec::before,.hdr::after,.sim::after{display:none}
}

/* =====================================================================
   24.19 ДОБОРКА ПОСЛЕ РЕНДЕР-ПРОВЕРКИ
   ===================================================================== */
/* .tm: роль и подпись — инлайновые спаны, из-за чего «…ПО КРАШ-ИГРАМРедакция»
   слипалось в одну строку. Ставим на свои строки. */
.tm b,.tm .role,.tm .flag,.tm strong{display:block}
.tm .role{margin-top:5px;line-height:1.35}
.tm .flag{margin-top:7px;color:var(--ink3)}
.tm .pfp{border-radius:var(--r-s);
  background:linear-gradient(180deg,var(--elev2),var(--elev));font-family:var(--mono);
  font-weight:700;font-size:19px;color:var(--ink2);letter-spacing:-.01em}

/* .op-score — рейтинг-бейдж витрины: оценка как показание, а не как текст.
   Разметка: <span class="op-score"><b>8.4</b><i>/10</i></span>
   Ставится в .op-top рядом с именем или как угол карточки (.op-score.corner). */
.op-score{display:inline-flex;align-items:baseline;gap:3px;padding:5px 9px 6px;border-radius:8px;
  font-family:var(--mono);font-variant-numeric:tabular-nums;line-height:1;
  border:1px solid color-mix(in srgb,var(--sig-computed) 28%,transparent);
  background:linear-gradient(180deg,var(--plate-deep),color-mix(in srgb,var(--plate-deep) 55%,transparent));
  box-shadow:inset 0 1px 0 var(--rim),
             inset 0 -9px 18px -13px color-mix(in srgb,var(--sig-computed) 70%,transparent)}
.op-score b,.op-score strong{font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--sig-computed);
  text-shadow:0 0 16px color-mix(in srgb,var(--sig-computed) 34%,transparent)}
.op-score i{font-style:normal;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.op-score.corner{position:absolute;top:14px;right:14px;z-index:2}
.op-score.ok{border-color:color-mix(in srgb,var(--sig-normal) 30%,transparent)}
.op-score.ok b,.op-score.ok strong{color:var(--sig-normal)}
.op-score.caution{border-color:color-mix(in srgb,var(--sig-caution) 30%,transparent)}
.op-score.caution b,.op-score.caution strong{color:var(--sig-caution)}

/* .tick-rule — приборная линейка как самостоятельный разделитель.
   <hr class="tick-rule"> или <div class="tick-rule"></div> */
.tick-rule{height:10px;border:0;margin:var(--stack) 0;background:
    linear-gradient(90deg,var(--line) 0 100%) 0 0/100% 1px no-repeat,
    repeating-linear-gradient(90deg,var(--tick) 0 1px,transparent 1px 10px) 0 0/100% 4px no-repeat,
    repeating-linear-gradient(90deg,var(--tick-major) 0 1px,transparent 1px 50px) 0 0/100% 9px no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 62%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 62%,transparent)}

/* .flight-tag — лётная метка для служебных чисел: RND 1120749, FL 097, RTP 97.00 */
.flight-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10.5px;
  font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sig-ref);
  font-variant-numeric:tabular-nums;padding:4px 9px;border-radius:6px;
  border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 55%,transparent);
  box-shadow:inset 0 1px 0 var(--rim)}
.flight-tag b,.flight-tag strong{color:var(--ink2);font-weight:700}
.flight-tag.input b,.flight-tag.input strong{color:var(--sig-input)}
.flight-tag.computed b,.flight-tag.computed strong{color:var(--sig-computed)}

/* Коллизия имён: класс .readout уже занят панелью результатов EV-калькулятора
   (.ev .readout). Материал числового окна ей идёт — панель становится
   приборной, — но моно-гарнитуру на ЛЕЙБЛЫ она наследовать не должна:
   цифры внутри и так моноширинные (.ev .stat .n). */
.ev .readout{font-family:var(--font);padding:15px 17px;border-radius:var(--r-s)}
.ev .readout .stat:last-child{border-bottom:0;padding-bottom:0}
.ev .stat .n.g{color:var(--sig-normal)}
.ev .stat .n.r{color:var(--sig-warn)}

/* ============================================================================
   25. ПРИЁМКА · ДЕФЕКТЫ, НАЙДЕННЫЕ НА ЖИВЫХ СТРАНИЦАХ
   Правки после сквозного просмотра ru/home, ru/otzyvy, ru/author,
   ru/proverka-chestnosti на 1440 и 390 в обеих темах. Ничего не переименовано,
   каждый блок отвечает за один увиденный дефект.
   ========================================================================= */

/* 25.1 Приглушённый текст не дотягивал до AA ни в одной теме: --ink3 давал
   3.0:1 на .elev в тёмной и 2.77:1 на фоне в светлой, а на нём сидят подписи
   к схемам, сноски, «/10», хлебные крошки и методические примечания — то есть
   ровно тот слой, которым издание доказывает свою добросовестность.
   Поднято до 4.5+ на bg/surface/elev, иерархия с --ink2 сохранена. */
:root{ --ink3:#808EAB; }

/* 25.2 Разорванные предложения в пошаговом разборе.
   На странице проверки честности собственный <style> объявляет
   `.step b,/* 25.2 Разорванные предложения в пошаговом разборе.
   На странице проверки честности собственный <style> объявляет
   `.step strong{display:block}` — правило било не только по заголовку шага, но и по
   выделению термина внутри абзаца: «…генерирует случайный / серверный сид /
   и сразу пропускает…» ломалось на три строки. Поднимаем специфичность
   и возвращаем термину смысловое выделение цветом, как у .prose em. */
.steps .step p b,.step p b,как у .prose em. */
.steps .step p strong,.step p strong{display:inline;margin:0;color:var(--ink);font-weight:600}

/* 25.3 FAQ без индикатора.
   Маркер «−» лежит в разметке только у первого вопроса (проверено по всем
   ru/*.html), остальные строки не показывали, что они раскрываются: на
   развороте отдела вопросов это выглядит как список заголовков без функции.
   Рисуем маркер сами — приборной клавишей, одинаково на всех строках. */
.faq summary{align-items:center;padding-right:0}
.faq summary .p{display:none}
.faq summary::after{
  content:"+";flex:none;width:24px;height:24px;display:grid;place-items:center;
  font-family:var(--mono);font-size:14px;font-weight:700;line-height:1;
  color:var(--sig-input);border:1px solid var(--line2);border-radius:7px;
  background:color-mix(in srgb,var(--sig-input) 7%,transparent);
  box-shadow:inset 0 1px 0 var(--rim);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease);}
.faq details[open] summary::after{content:"–";border-color:var(--ring-input);
  background:color-mix(in srgb,var(--sig-input) 14%,transparent)}
.faq summary:hover::after{border-color:var(--ring-input);
  background:color-mix(in srgb,var(--sig-input) 16%,transparent)}

/* 25.4 Капслочный H1 на author/about-us.
   Заголовок задан инлайн-стилем (uppercase, 900, clamp до 38px) и потому был
   МЕЛЬЧЕ идущего следом H2 — перевёрнутая иерархия, плюс латиница «AVIATOR»
   в верхнем регистре расходилась по цвету строки с кириллицей. Возвращаем
   заголовок в общую типографическую шкалу; инлайн бьётся только !important. */
h1[style*="uppercase"]{
  text-transform:none!important;font-size:var(--fs-1)!important;
  font-weight:var(--w-disp)!important;line-height:var(--lh-1)!important;
  letter-spacing:-.018em!important;margin:12px 0 0!important}

/* 25.5 «4.9 / 5» переносилось на две строки в каждой строке таблицы вердикта:
   колонка комментария забирает всю свободную ширину, и колонка оценки
   схлопывается до min-content. Запрещаем перенос только в простых моно-ячейках
   (без вложенных элементов — там живут сиды и хеши) и только на широких
   экранах, где ширину есть откуда взять. */
@media(min-width:760px){
  /* Только таблицы сравнения. В .fact-table тем же классом .mono размечены
     списки методов депозита и валют — там nowrap распирал таблицу за карточку
     и заодно схлопывал колонку заголовков в вертикальную ленту по буквам. */
  .cmp td.mono:not(:has(*)),.compare-table td.mono:not(:has(*)){white-space:nowrap}
}

/* 25.6 Переносы на мобильном шли лесенкой: пять строк подряд с дефисом
   («Опозна-ётся», «клиент-скими», «разде-лу», «требова-ниям»). Правило
   hyphens:auto оставляем — без него в кириллице на 390 рвётся мера, —
   но ограничиваем длину огрызков и длину лесенки. */
@media(max-width:600px){
  .prose p,.prose li,.lede{
    hyphenate-limit-chars:7 4 3;
    -webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:3;
    -webkit-hyphenate-limit-lines:2}
}

/* 25.7 Кнопки героя на 390 стояли лесенкой разной ширины (250 и 236 px) —
   ряд читался как случайный. Ставим их в колонку одинаковой ширины. */
@media(max-width:560px){
  .hero-copy>div>.btn{flex:1 1 100%;justify-content:center}
}

/* 25.8 Инициалы в аватарах набирались текстовой гарнитурой и в светлой теме
   почти пропадали на плашке. Это служебная метка, а не имя — ставим её моно
   с трекингом, как остальные приборные подписи. */
.avs i,.tm .pfp,.author .pfp{
  font-family:var(--mono);letter-spacing:.06em;color:var(--ink2);font-weight:700}
.tm .pfp,.author .pfp{font-size:19px}
.avs i{font-size:10px;letter-spacing:.04em}

.formula{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* базового правила у .formula не было вовсе — блок жил на инлайн-стилях, поэтому длинные
   комментарии в коде выталкивали страницу за экран телефона. Скроллим сам блок. */
@media(max-width:560px){.formula{font-size:12px}}

/* Кнопка сброса демо-баланса стояла в хвосте пояснения и уезжала вправо-вверх;
   её место — рядом с самим балансом, мелкой служебной кнопкой. */
.sim-reset{display:inline-flex;align-items:center;gap:6px;margin-top:6px;padding:4px 10px;
  background:none;border:1px solid var(--line2);border-radius:999px;color:var(--ink3);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;transition:color .18s,border-color .18s}
.sim-reset:hover{color:var(--heat);border-color:var(--heat)}
.sim-reset .icn{width:12px;height:12px}

/* Каталог краш-игр: карточки одной высоты с картинкой и таблицей параметров.
   Класс .g из старой вёрстки не был описан в CSS — блоки выглядели недоделанными. */
.gcards{grid-template-columns:repeat(auto-fit,minmax(232px,1fr))}
.gcards .card-media{height:100%}
.gcards .cm-media{--ar:16/10}
.gcards .cm-b{gap:0}
.cm-rows{display:grid;gap:0;margin-top:8px}
.cm-rows .row{display:flex;justify-content:space-between;gap:10px;padding:6px 0;
  border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink3)}
.cm-rows .row:last-child{border-bottom:0}
.cm-rows .row .mono{color:var(--ink2);text-align:right}

/* Витрина в формате агрегатора: скриншот игры у оператора, бейдж оценки, строка условий. */
.opcard .cm-media{margin:-18px -18px 14px;border-radius:var(--r) var(--r) 0 0}
.opcard .op-rt{flex-wrap:wrap}
.op-more{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:12.5px;
  color:var(--ink3);transition:color .18s}
.op-more:hover{color:var(--heat)}

/* Топлист: минусы должны читаться как минусы, а не как галочки. */
.tl-usps li{display:grid;grid-template-columns:16px minmax(0,1fr);gap:9px;align-items:start;
  font-size:13.5px;line-height:1.5;color:var(--ink2)}
.tl-usps .icn{width:15px;height:15px;margin-top:2px;color:var(--cashout)}
.tl-usps li:has(use[href$="#i-alert"]) .icn{color:var(--crash)}
.tl-usps li:has(use[href$="#i-alert"]){color:var(--ink3)}
/* Плашка бренда в топлисте — тёмная, чтобы не выбивалась светлым пятном. */
.tl-logo{background:var(--elev2);border:1px solid var(--line)}
.tl-logo .op-plate{background:color-mix(in srgb,var(--brand,#7C8AA5) 14%,transparent);
  border-color:color-mix(in srgb,var(--brand,#7C8AA5) 40%,transparent);color:var(--brand,var(--ink))}
.tl-rank{font-family:var(--mono);font-size:20px;font-weight:700;color:var(--ink3)}
.tl-item.top .tl-rank{color:var(--heat)}
.tl-rank .lbl{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);margin-top:2px}
.tl-score .n{font-family:var(--mono);font-size:32px;font-weight:700;color:var(--amber);line-height:1}
.tl-score .verdict-w{font-size:11.5px;color:var(--ink3);margin-top:4px;line-height:1.3}
.tl-cta .terms{font-family:var(--mono);font-size:10px;color:var(--ink3);text-align:center}
.moreinfo summary{cursor:pointer;padding:12px 22px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);display:flex;
  align-items:center;justify-content:center;gap:8px;list-style:none}
.moreinfo summary::-webkit-details-marker{display:none}
.moreinfo summary:hover{color:var(--heat)}
.moreinfo[open] summary .chev{transform:rotate(180deg)}
.mi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;
  padding:0 22px 20px}
.mi-sec h5,.mi-sec h3{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);
  font-family:var(--mono);margin:0 0 6px}
.mi-sec p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink2)}

/* Карточки «Что есть в интерфейсе»: иконка в приборной рамке, акцент при наведении. */
.fx{position:relative;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .25s}
.fx::after{content:"";position:absolute;inset:0 auto 0 0;width:2px;
  background:linear-gradient(180deg,var(--heat),transparent);opacity:0;transition:opacity .2s}
.fx:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--heat) 40%,var(--line));
  box-shadow:var(--sh-sm,0 14px 30px -18px rgba(0,0,0,.7))}
.fx:hover::after{opacity:1}
.fx .i{background:color-mix(in srgb,var(--heat) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--heat) 28%,transparent);color:var(--heat)}
.fx b,.fx strong{font-family:var(--disp);letter-spacing:-.01em}

/* Логотип оператора вместо буквенной плашки + строка рейтинга как у топовых агрегаторов. */
.tl-logo{width:84px;height:56px;padding:8px;border-radius:var(--r-s);display:grid;place-items:center;overflow:hidden}
.tl-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.tl-rate{display:flex;align-items:center;gap:9px;margin:4px 0 2px;flex-wrap:wrap}
.tl-rate .stars{color:var(--amber);font-size:14px;letter-spacing:1px}
.tl-rate b,.tl-rate strong{font-family:var(--mono);font-size:13.5px;color:var(--ink)}
.tl-rate .lbl{font-size:12px;color:var(--ink3)}

/* Раскрывающаяся часть карточки: сетка разделов с иконками, как у сильных агрегаторов. */
.moreinfo{background:color-mix(in srgb,var(--elev2) 55%,transparent)}
.mi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(16px,2.2vw,28px) clamp(22px,3vw,44px);padding:4px 22px 22px}
.mi-sec h5,.mi-sec h3{display:flex;align-items:center;gap:8px;margin:0 0 7px;font-family:var(--mono);
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
.mi-sec h5 .icn,.mi-sec h3 .icn{width:15px;height:15px;color:var(--heat)}
.mi-sec p{margin:0;font-size:13.5px;line-height:1.62;color:var(--ink2);max-width:56ch}
.mi-sec:has(use[href$="#i-alert"]) h5 .icn,.mi-sec:has(use[href$="#i-alert"]) h3 .icn{color:var(--crash)}

/* ---- Карточка оператора: приборная подача ---- */
.tl-item{position:relative;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--elev2) 60%,transparent),var(--elev))}
.tl-item::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--heat) 55%,transparent),transparent);
  opacity:0;transition:opacity .25s}
.tl-item:hover{border-color:color-mix(in srgb,var(--heat) 45%,var(--line));
  box-shadow:0 22px 48px -26px rgba(0,0,0,.85)}
.tl-item:hover::before{opacity:1}
.tl-item.top{background:
  radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--heat) 12%,transparent),transparent 55%),
  linear-gradient(180deg,color-mix(in srgb,var(--elev2) 70%,transparent),var(--elev))}
.tl-item.top::before{opacity:1}

/* Ранг — как номер борта на приборной шкале */
.tl-rank{position:relative;font-size:26px}
.tl-rank::after{content:"";display:block;width:18px;height:1px;margin:7px auto 0;
  background:var(--line2)}
.tl-item.top .tl-rank::after{background:var(--heat)}

/* Оценка в приборном окне */
.tl-score{position:relative;padding:12px 10px;border-radius:var(--r-s);
  background:color-mix(in srgb,var(--bg) 55%,transparent);
  border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.tl-score .n{font-size:34px;letter-spacing:-.02em;
  text-shadow:0 0 24px color-mix(in srgb,var(--amber) 35%,transparent)}
.tl-item.top .tl-score{border-color:color-mix(in srgb,var(--heat) 35%,transparent)}

/* Логотип в «иллюминаторе» */
.tl-logo{position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 6px 18px -12px rgba(0,0,0,.9)}
.tl-logo::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 60%);pointer-events:none}

/* Заголовок предложения */
.tl-bonus{font-family:var(--disp);letter-spacing:-.015em}
.tl-item.top .tl-bonus{color:var(--ink)}

/* Подборки: карточка-маршрут с иконкой в приборной рамке. */
.picks{grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.card-media.pick .cm-b{padding:18px 18px 16px;gap:7px}
.pick-ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--heat) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--heat) 28%,transparent);color:var(--heat);margin-bottom:4px}
.pick-ic .icn{width:18px;height:18px}
.card-media.pick .cm-t{font-size:16.5px}
.pick-meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink3);margin-top:6px;display:inline-flex;align-items:center;gap:6px}
.pick-meta::before{content:"";width:14px;height:1px;background:var(--heat)}
.card-media.pick:hover .pick-ic{background:color-mix(in srgb,var(--heat) 20%,transparent)}

/* ---- Карта интерфейса: скриншот с выносками вместо плиток с текстом ---- */
.ui-map{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(20px,3vw,40px);align-items:start}
.ui-shot{position:relative;margin:0}
.ui-shot img{display:block;width:100%;height:auto;border-radius:var(--r);
  border:1px solid var(--line2);box-shadow:0 26px 60px -30px rgba(0,0,0,.9)}
.ui-shot figcaption{margin-top:11px;font-size:12.5px;color:var(--ink3);line-height:1.5}
.ui-pin{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  width:26px;height:26px;border-radius:999px;display:grid;place-items:center;
  font-family:var(--mono);font-size:12px;font-weight:700;color:#0A0D14;
  background:var(--heat);border:2px solid rgba(10,13,20,.85);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--heat) 26%,transparent),0 4px 12px rgba(0,0,0,.6);
  animation:uiPulse 2.8s ease-in-out infinite}
.ui-pin:nth-child(3){animation-delay:.4s} .ui-pin:nth-child(5){animation-delay:.8s}
.ui-pin:nth-child(7){animation-delay:1.2s}
@keyframes uiPulse{0%,100%{box-shadow:0 0 0 3px color-mix(in srgb,var(--heat) 26%,transparent),0 4px 12px rgba(0,0,0,.6)}
  50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--heat) 10%,transparent),0 4px 12px rgba(0,0,0,.6)}}
@media(prefers-reduced-motion:reduce){.ui-pin{animation:none}}
.ui-legend{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:ui}
.ui-legend li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:13px;align-items:start;
  padding:11px 12px;border-radius:var(--r-s);transition:background .18s}
.ui-legend li:hover{background:color-mix(in srgb,var(--elev2) 65%,transparent)}
.ui-legend li+li{border-top:1px solid var(--line)}
.ui-n{width:26px;height:26px;border-radius:999px;display:grid;place-items:center;
  font-family:var(--mono);font-size:12px;font-weight:700;color:var(--heat);
  background:color-mix(in srgb,var(--heat) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--heat) 32%,transparent)}
.ui-legend b,.ui-legend strong{display:block;font-size:14.5px;color:var(--ink);margin-bottom:2px}
.ui-legend p{margin:0;font-size:13px;line-height:1.55;color:var(--ink2)}
@media(max-width:900px){.ui-map{grid-template-columns:1fr}}

/* Выноска стала кнопкой: по наведению и с клавиатуры показывает пояснение. */
.ui-pin{padding:0;cursor:help;z-index:2}
.ui-pin:focus-visible{outline:2px solid var(--heat);outline-offset:3px}
.ui-pin.is-active{background:var(--ink);color:var(--heat);
  box-shadow:0 0 0 8px color-mix(in srgb,var(--heat) 22%,transparent),0 6px 18px rgba(0,0,0,.7);
  animation:none;z-index:5}
.ui-tip{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%) translateY(6px);
  width:max-content;max-width:250px;padding:11px 13px;border-radius:10px;text-align:left;
  background:rgba(10,13,20,.97);border:1px solid var(--line2);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.95);
  font-family:var(--font);font-size:12.5px;font-weight:400;line-height:1.5;color:var(--ink2);
  letter-spacing:0;text-transform:none;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s,transform .18s,visibility .18s;z-index:6}
.ui-tip b,.ui-tip strong{display:block;color:var(--ink);font-size:13px;margin-bottom:3px}
.ui-tip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:var(--line2)}
.ui-pin.is-active .ui-tip,.ui-pin:hover .ui-tip{opacity:1;visibility:visible;transform:translateX(-50%)}
/* у верхних выносок подсказка уходит вниз, иначе её срежет краем кадра */
.ui-pin[data-i="1"] .ui-tip,.ui-pin[data-i="2"] .ui-tip{bottom:auto;top:calc(100% + 12px)}
.ui-pin[data-i="1"] .ui-tip::after,.ui-pin[data-i="2"] .ui-tip::after{top:auto;bottom:100%;
  border-top-color:transparent;border-bottom-color:var(--line2)}
.ui-pin[data-i="2"] .ui-tip{left:auto;right:0;transform:translateY(6px)}
.ui-pin[data-i="2"].is-active .ui-tip,.ui-pin[data-i="2"]:hover .ui-tip{transform:none}
.ui-pin[data-i="2"] .ui-tip::after{left:auto;right:14px;transform:none}
/* ⚠ Подсказка выноски шириной 250px не помещается рядом с выноской у края кадра.
   В RTL она уезжала за НАЧАЛО строки, а `overflow-x:clip` на body режет только
   конец, — арабская морда открывалась сдвинутой на 32px, с обрезанным логотипом.
   На узких экранах подсказку не показываем: наведения там нет, а тот же текст
   развёрнуто стоит в нумерованной легенде под кадром. */
@media(max-width:700px){.ui-tip{display:none}}
/* обратная связь: строка легенды подсвечивается вместе с выноской */
.ui-legend li.is-active{background:color-mix(in srgb,var(--heat) 10%,transparent)}
.ui-legend li.is-active .ui-n{background:var(--heat);color:#0A0D14;border-color:var(--heat)}
.ui-legend li{cursor:default}

/* ---- Полки операторов по категориям ---- */
.shelf{margin-top:clamp(20px,2.6vw,30px)}
.shelf+.shelf{padding-top:clamp(18px,2.4vw,26px);border-top:1px solid var(--line)}
.shelf-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--heat) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--heat) 28%,transparent);color:var(--heat)}
.shelf-ic .icn{width:15px;height:15px}
.shelf-head h3{font-family:var(--disp);font-size:17.5px;font-weight:700;letter-spacing:-.012em;margin:0}
.shelf-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:12px;margin-top:14px}
.mcard{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:13px 14px;border-radius:var(--r-s);background:var(--elev);border:1px solid var(--line);
  transition:border-color .2s,transform .2s,box-shadow .25s}
/* Дети флексбокса «результат проверки»: без min-width:0 длинная немецкая
   формулировка растягивала блок за край экрана. Но само число сжимать нельзя —
   это и есть ответ проверки, «13.80×» ужималось до 22 пикселей из 79. Поэтому
   ему flex:none, а уступает место пояснение рядом. */
.verify .out>*{min-width:0}
.verify .out .r{flex:none}
/* Номер лицензии «Curaçao OGL/2024/1234» — одно длинное слово, в узкой карточке
   его надо переносить, иначе он вылезает за подложку. */
.mcard-note{overflow-wrap:break-word}
/* В строке результата три элемента: число, пояснение и значок «пример расчёта».
   Втроём они требуют больше, чем даёт колонка, — и на 390px, и на 834px, где
   колонка сетки .two равна 385. Перенос без медиазапроса: он срабатывает только
   когда элементы не помещаются, поэтому на широком экране строка как была. */
.verify .out{flex-wrap:wrap}
.mcard:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--heat) 40%,var(--line));
  box-shadow:0 16px 34px -22px rgba(0,0,0,.9)}
.mcard-logo{width:44px;height:34px;border-radius:8px;display:grid;place-items:center;padding:5px;
  overflow:hidden;border:1px solid var(--line)}
.mcard-logo img{max-width:100%;max-height:100%;object-fit:contain}
.mcard-b{min-width:0}
.mcard-b b,.mcard-b strong{display:block;font-size:14.5px;line-height:1.2}
.mcard-note{display:block;font-size:12px;color:var(--ink3);margin-top:2px;line-height:1.4}
.mcard-score{font-family:var(--mono);font-size:17px;font-weight:700;color:var(--amber);
  align-self:center;grid-column:3;grid-row:1}
.mcard-cta{grid-column:1/-1;display:flex;align-items:center;gap:10px;margin-top:4px}
.mcard-cta .btn{flex:1;min-width:0;justify-content:center}
.mcard-rev{font-size:12.5px;color:var(--ink3);white-space:nowrap;transition:color .18s}
.mcard-rev:hover{color:var(--heat)}

/* ---------------------------------------------------------------
   ФИКСЫ ПОСЛЕ РЕНДЕР-ПРОВЕРКИ /ru/1win-aviator (12.08.2026)
   --------------------------------------------------------------- */

/* .tscroll ≤900px остаётся скролл-контейнером (overflow-x:auto), поэтому
   залипающая шапка .cmp липнет к НЕМУ и уезжает на --sticky-top вниз, навсегда
   накрывая первую строку таблицы. Для ≥901px это уже вылечено overflow:clip,
   на мобиле липнуть внутри контейнера не к чему — обнуляем смещение. */
@media(max-width:900px){.tscroll{--sticky-top:0px}}

/* .cmp по умолчанию — витрина-рейтинг: янтарная засечка и янтарный номер у
   первой строки читаются как «наш выбор». Для таблиц, где строки равноправны
   (валюты кассы, способы оплаты), сигнал ранга снимается модификатором. */
.cmp.nolead tbody tr:first-child td:first-child{box-shadow:none}
.cmp.nolead tbody tr:first-child .cmp-brand::before{color:var(--ink3)}

/* td с display:flex перестаёт быть табличной ячейкой: его высота считается по
   содержимому, а не по строке, поэтому в первой колонке граница строки
   рисуется выше остальных (в таблице кассы — на 45px). Возвращаем ячейку в
   поток таблицы, выравнивание логотипа и имени отдаём vertical-align. */
.cmp td.cmp-brand{display:table-cell;vertical-align:middle;white-space:nowrap}
.cmp td.cmp-brand>*{vertical-align:middle}
.cmp td.cmp-brand>.op-plate,.cmp td.cmp-brand>.casino-logo{margin-inline-end:11px}
@media(min-width:521px){.cmp td.cmp-brand::before{display:inline-block;vertical-align:middle;margin-inline-end:11px}}

/* nowrap выше рассчитан на имя бренда («Mostbet»). На страницах платёжек в той же
   первой колонке стоит не бренд, а длинная подпись группы («Криптовалюта (BTC, BCH,
   ETH, LTC, DOGE, USDT, BNB, ADA, TRX)») — nowrap растягивал таблицу до 844px при
   ширине контейнера 340px, и колонки значений уезжали под маску-градиент.
   Модификатор ДОБАВОЧНЫЙ: без него поведение .cmp-brand не меняется ни на одной
   существующей странице. Ставить на .cmp там, где первая колонка — подпись, а не бренд. */
.cmp.brandwrap td.cmp-brand{white-space:normal}

/* Узкие таблицы: .cmp td.cmp-brand объявлен ниже медиа-блока .tnarrow и перебивал его
   своим white-space:nowrap, поэтому длинная подпись в первой колонке распирала таблицу.
   Обрез при этом был НЕВИДИМ — .tnarrow гасит маску-градиент, край просто срезался.
   Специфичности .tscroll.tnarrow .cmp td.cmp-brand хватает, чтобы перекрыть. */
@media(max-width:900px){
  .tscroll.tnarrow .cmp td.cmp-brand{white-space:normal;min-width:0}
  .tscroll.tnarrow .cmp td,.tscroll.tnarrow .cmp th{white-space:normal}
}

/* Узкая таблица всё равно обрезалась на 3–14px из-за паддингов, а хеш в .mono (24 символа
   одним словом) распирал двухколоночную таблицу на 125px. Переносим длинные значения. */
@media(max-width:900px){
  .tscroll.tnarrow th,.tscroll.tnarrow td{padding-left:10px;padding-right:10px;overflow-wrap:anywhere}
  .tscroll.tnarrow .mono{word-break:break-word}
}

/* .approach и .waybox приехали с страниц ядра без единого правила — блоки выглядели
   недоделанными (ровно тот дефект, за который ругаем агентов). Приводим к языку системы:
   та же плашка, что у .callout, с нумерацией как в пошаговых блоках. */
.approach,.waybox{background:var(--elev);border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;margin-top:14px}
.approach+.approach,.waybox+.waybox{margin-top:12px}
.approach .hd{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.approach .hd h3,.waybox h3{font-size:18px;font-weight:700;line-height:1.35;letter-spacing:-.01em}
.approach p,.waybox p{color:var(--ink2);margin-top:9px;line-height:var(--lh-prose)}
.approach ul,.waybox ul{margin-top:10px}
.waybox h3 .num{display:inline-grid;place-items:center;width:26px;height:26px;flex:none;
  margin-inline-end:10px;border-radius:8px;background:var(--grad);color:#fff;
  font-family:var(--mono);font-size:13px;font-weight:700;vertical-align:middle}

/* Флекс-потомок по умолчанию не сжимается ниже min-content, поэтому длинный заголовок
   в .sec-title распирал страницу на узком экране. Та же болезнь у .formula — ей overflow
   не помогал без ограничения ширины. */
.sec-title>*{min-width:0}
.formula{max-width:100%;min-width:0}
/* Таблицы, свёрстанные без обёртки .tscroll, на мобиле уезжали за экран. Даём им
   собственный скролл, не трогая таблицы внутри .tscroll — там скролл уже есть. */
@media(max-width:900px){
  .prose>table,.sec>table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
}

/* Грид- и флекс-элементы по умолчанию имеют min-width:auto и не сжимаются ниже min-content.
   Из-за этого .formula с white-space:nowrap растягивала трек .two до 691px на экране 390. */
.two>*,.cols-2>*,.opgrid>*,.shelf-row>*{min-width:0}

/* Инлайн-гриды «1fr 1fr» расставлены по страницам прямо в разметке и на телефоне не
   схлопывались: вторая колонка уезжала за экран (на terms — на 119px). Инлайн-стиль бьёт
   любой селектор, поэтому здесь !important — единственный способ, не переписывая 40 файлов. */
@media(max-width:640px){
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr!important}
}

/* Строка паспорта .ks-row — грид «minmax(0,1fr) auto»: колонка значения берёт
   max-content, и при длинном значении колонка ключа сжимается до нуля, а текст
   ключа ложится ПОВЕРХ значения (astropay: «Рублёвый / тенговый счёт», dogecoin:
   «1win»). Базовое правило не трогаем — оно на 66 страницах; модификатор
   ДОБАВОЧНЫЙ: .keyspec-stack складывает строку в два уровня там, где значение
   длинное. Без класса поведение .ks-row не меняется нигде. */
.ks-row.ks-stack{grid-template-columns:minmax(0,1fr);gap:3px}
.ks-row.ks-stack .ks-v{text-align:left}
@media(max-width:560px){
  .keyspec.keyspec-stack .ks-row{grid-template-columns:minmax(0,1fr);gap:3px}
  .keyspec.keyspec-stack .ks-v{text-align:left}
}

/* На 390px широкая .cmp показывала ОДНУ колонку из четырёх, а строки распухали до 178px:
   min-width:640px рассчитан на планшет. Уплотняем таблицу на телефоне — видно 2–3 колонки
   вместо одной, строки становятся вдвое ниже. Скролл остаётся, маска о нём намекает. */
@media(max-width:560px){
  .tscroll>table{min-width:520px}
  .cmp th,.cmp td{padding:9px 8px;font-size:12.5px}
  .cmp td.cmp-brand{font-size:13px}
}
/* Три плитки .ac-proof ложились 2+1, и третья растягивалась на всю ширину. */
.ac-proof>*{flex:1 1 150px}
/* Первая колонка (.cmp-brand) забирала 226px из 390: min-width:152px плюс nowrap.
   На телефоне это половина экрана под подпись — разрешаем перенос и сжатие. */
@media(max-width:560px){
  .cmp-brand{min-width:0}
  .cmp td.cmp-brand{white-space:normal}
}

/* Иконки в мегаменю: платёжкам — плашка в цвете бренда (компактнее, чем у казино),
   казино с настоящим логотипом — контейнер того же размера, что буквенная заглушка. */
.mega-link .op-plate{width:26px;height:26px;border-radius:7px;font-size:9px;letter-spacing:0}
.mega-op .op-logo{width:30px;height:30px;border-radius:8px;flex:none;display:grid;
  place-items:center;overflow:hidden;border:1px solid var(--line)}
.mega-op .op-logo img{width:100%;height:100%;object-fit:contain;padding:2px}

/* Мобильное меню: десктопное центрирование широких выпадашек
   (.nav-item:hover>.mega:has(.cols-3){transform:translate(-50%,0)}) имеет специфичность выше
   мобильного сброса, а медиа-запрос её не повышает. На тапе hover эмулируется, правило
   срабатывает — и раздел «Платежи» уезжал на 162px за левый край экрана.
   Перекрываем тем же весом и последним в файле. */
@media(max-width:1080px){
  .nav-item:hover>.mega, .nav-item:focus-within>.mega,
  .nav-item:hover>.mega.wide, .nav-item:focus-within>.mega.wide,
  .nav-item:hover>.mega:has(.cols-2), .nav-item:focus-within>.mega:has(.cols-2),
  .nav-item:hover>.mega:has(.cols-3), .nav-item:focus-within>.mega:has(.cols-3){
    position:static;transform:none;left:auto;right:auto;top:auto;width:auto;max-width:none}
}
/* Логотип в карточке оператора — того же размера, что буквенная заглушка .op-plate */
.op-top .op-logo,.opcard .op-logo{width:48px;height:48px;border-radius:var(--r-s);flex:none;
  display:grid;place-items:center;overflow:hidden;border:1px solid var(--line)}
.op-top .op-logo img,.opcard .op-logo img{width:100%;height:100%;object-fit:contain;padding:4px}

/* =====================================================================
   26. НЕБО — облака, маршрут и самолёт, приклеенный к концу дуги
   Дуга и машина лежат в ОДНОМ svg с общим viewBox, поэтому координаты у них
   единые: линия раскрывается через stroke-dashoffset, самолёт едет по той же
   кривой через offset-path и всегда стоит ровно на её конце. Обе анимации
   идут от одного scroll-timeline, рассинхрону взяться неоткуда.
   ===================================================================== */
.sky{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
  background:url(/img/gen/bg-clouds.webp) center 32%/cover no-repeat;
  opacity:.85}
.sky::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(150% 105% at 50% 38%,transparent 34%,rgba(10,13,20,.80) 88%),
    linear-gradient(180deg,rgba(10,13,20,.55),transparent 26%,transparent 68%,rgba(10,13,20,.85))}

.sky-route{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none;
  overflow:hidden}   /* slice растягивает кадр — без обрезки хвост кривой уходит за экран */
.sky-route .route-line{fill:none;stroke:url(#routeGrad);stroke-width:3;stroke-linecap:round;
  stroke-dasharray:1000;stroke-dashoffset:1000;
  filter:drop-shadow(0 0 9px rgba(255,59,78,.32))}
.sky-route .route-plane{offset-path:path("M 1046 906 C 1286 798 1204 618 1324 452 C 1398 330 1356 158 1412 26");
  offset-rotate:-38deg;offset-distance:0%;opacity:.78}
.sky-route .route-plane image{filter:drop-shadow(0 0 8px rgba(255,59,78,.28))}
/* вспышка на конце маршрута: до финала радиус нулевой и её не видно */
.sky-route .route-burst{offset-path:path("M 1046 906 C 1286 798 1204 618 1324 452 C 1398 330 1356 158 1412 26");
  offset-rotate:0deg;offset-distance:0%;opacity:0}

@keyframes route-draw{from{stroke-dashoffset:1000}to{stroke-dashoffset:60}}
@keyframes route-move{from{offset-distance:0%}to{offset-distance:94%}}
@keyframes route-fade{0%,95%{opacity:.78}97%{opacity:.95}100%{opacity:0}}
@keyframes route-flash{0%,95%{opacity:0;scale:.3}98%{opacity:.9;scale:3.4}100%{opacity:0;scale:7}}

@supports (animation-timeline:scroll()){
  .sky-route .route-line{animation:route-draw linear both;animation-timeline:scroll(root block)}
  .sky-route .route-plane{animation:route-move linear both,route-fade linear both;
    animation-timeline:scroll(root block),scroll(root block)}
  .sky-route .route-burst{animation:route-move linear both,route-flash linear both;
    animation-timeline:scroll(root block),scroll(root block)}
}
@media(max-width:1279px){.sky-route{display:none}}
@media(prefers-reduced-motion:reduce){
  .sky-route .route-line,.sky-route .route-plane,.sky-route .route-burst{animation:none!important}
  .sky-route .route-line{stroke-dashoffset:900}
  .sky-route .route-plane{offset-distance:45%}}

/* ── карточка бонуса, которую раскрывает взрыв ─────────────────────────────
   Появляется один раз: закрыл — больше не показывается (запоминается в браузере).
   Не перекрывает экран и не ловит фокус, пока скрыта. */
.bonus-pop{position:fixed;right:22px;bottom:22px;z-index:60;width:min(360px,calc(100vw - 44px));
  background:var(--surface);border:1px solid rgba(255,122,61,.38);border-radius:16px;
  padding:20px 22px 22px;box-shadow:0 26px 70px -24px rgba(0,0,0,.85);
  opacity:0;visibility:hidden;translate:0 16px;transition:opacity .28s,translate .28s,visibility .28s}
.bonus-pop.is-on{opacity:1;visibility:visible;translate:0 0}
.bonus-pop .bp-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--heat)}
.bonus-pop h4{font-family:var(--disp);font-weight:700;font-size:20px;margin-top:8px;line-height:1.25}
.bonus-pop p{color:var(--ink2);font-size:14.5px;line-height:1.5;margin-top:9px}
.bonus-pop .bp-close{position:absolute;right:10px;top:10px;width:30px;height:30px;border:0;
  border-radius:9px;background:var(--elev);color:var(--ink2);cursor:pointer;font-size:17px;
  line-height:1;display:grid;place-items:center}
.bonus-pop .bp-close:hover{background:var(--elev2);color:var(--ink)}
.bonus-pop .btn{margin-top:14px}
@media(max-width:1279px){.bonus-pop{display:none}}

/* ═══ Письмо справа налево ═══
   `dir="rtl"` на <html> разворачивает текстовый поток, но не всё, что задано физическими
   сторонами. Список ниже собран на живой арабской вёрстке, а не по учебнику.

   ⚠ Что НЕ трогаем сознательно: числа, хеши, формулы и латинские названия остаются
   слева направо — браузер разруливает их сам, а стрелка в записи «хеш → результат»
   показывает направление вычисления, а не направление чтения. Развернуть её значило бы
   исказить смысл. Разворачиваем только навигационные стрелки. */

[dir="rtl"] .icn use[href$="#i-arrow"],
[dir="rtl"] .btn .icn, [dir="rtl"] .more .icn, [dir="rtl"] .mega-foot .icn {
  transform: scaleX(-1);
}

/* Отступы и позиционирование, заданные слева, — на логические стороны */
[dir="rtl"] ul[style*="padding-left"] { padding-left: 0 !important; padding-right: 17px; }
[dir="rtl"] .sticky-h th:first-child,
[dir="rtl"] .sticky-h td:first-child { left: auto; right: 0; }

/* Полосы шкал растут от начала строки, а не от физического левого края */
[dir="rtl"] .axis-fill, [dir="rtl"] .ev .ev-range { direction: rtl; }

/* Лента последних раундов: свежие значения у начала чтения */
[dir="rtl"] .history { flex-direction: row-reverse; }

/* Звёзды рейтинга: заполненные — со стороны начала строки */
[dir="rtl"] .stars { direction: rtl; }

/* =====================================================================
   ГАЛЕРЕЯ КЛЮЧЕВЫХ КАДРОВ — карусель в конце морды
   Секция со старого сайта: 16 кадров игры с подписями-запросами. Подписи
   сохраняются дословно, это ключи, ради которых блок и возвращён.
   Листание — нативным горизонтальным скроллом со снапом: без JS, работает
   пальцем на телефоне, колесом и стрелками с клавиатуры (лента фокусируема).
   ===================================================================== */
.gal-strip{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 2px 14px; margin:0; list-style:none;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
  overscroll-behavior-x:contain; scroll-padding-left:2px;
}
.gal-strip::-webkit-scrollbar{height:8px}
.gal-strip::-webkit-scrollbar-track{background:transparent}
.gal-strip::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px}
.gal-strip:focus-visible{outline:2px solid var(--heat); outline-offset:4px; border-radius:12px}

.gal-item{
  flex:0 0 auto; width:280px; max-width:78vw; scroll-snap-align:start;
  background:var(--elev); border:1px solid var(--line); border-radius:12px;
  overflow:hidden; display:flex; flex-direction:column;
}
.gal-item img{
  display:block; width:100%; height:auto; aspect-ratio:280/186;
  object-fit:contain; background:var(--bg);
}
.gal-cap{
  padding:10px 12px 12px; font-size:13px; line-height:1.35;
  color:var(--ink2); font-weight:600;
}
/* Счётчик кадров рядом с заголовком — читателю видно, что лента длинная */
.gal-count{font-size:13px; color:var(--ink2); white-space:nowrap}

/* Справа налево лента листается в обратную сторону — это направление чтения,
   а не направление вычисления, поэтому разворот здесь правильный. */
[dir="rtl"] .gal-strip{scroll-padding-left:0; scroll-padding-right:2px}

@media (max-width:640px){
  .gal-item{width:240px}
  .gal-strip{gap:10px}
}
/* Кому важнее покой, чем плавность прокрутки */
@media (prefers-reduced-motion:reduce){
  .gal-strip{scroll-behavior:auto}
}