/* pagorapido-casino.com — макет «dossier de plazos».
   ⛔ Своя сетка и палитра: шаблон соседнего проекта не переиспользуется (анти-футпринт).
   Ритм страницы: одна колонка, широкие таблицы данных, врезки-хронометры, без сайдбара.
   Картинок на сайте нет — плотность держат блоки, шкалы и таблицы. */

:root {
  --ink: #101724;
  --ink-2: #38445c;
  --ink-3: #6b7891;
  --line: #dbe1ec;
  --line-2: #eef1f7;
  --bg: #f6f8fc;
  --card: #ffffff;
  --brand: #0d2f24;          /* тёмная зелёная база — шапка и подвал */
  --brand-2: #12684a;
  --hot: #17b26a;            /* сочный зелёный — кнопки и акценты */
  --hot-2: #0f9256;
  --hot-3: #d8f3e5;          /* светлая зелёная подложка */
  --alert: #e8590c;          /* оранжевый остаётся сигналом задержки, не украшением */
  --ok: #12684a;
  --warn: #b8860b;
  --bad: #b02a2a;
  --r: 10px;
  --r-lg: 16px;
  --s: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 40px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: "Segoe UI", Roboto, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.65 var(--sans);
  /* ⛔ overflow-x:hidden здесь НЕ ставим. Он не лечит распирание, а прячет его: scrollWidth
     становится равен вьюпорту, и визуальный гейт даёт ложный PASS. Ровно так был пропущен
     сломанный DOM с лишними </div> (ревью 05-08-26). Ширину держат min-width:0 и .table-wrap. */
}
img { max-width: 100%; height: auto; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--s-2); }

/* ─────────── шапка ─────────── */
.top { background: var(--brand); color: #fff; }
.top__in {
  display: flex; align-items: center; gap: var(--s-2);
  flex-wrap: nowrap;                        /* ⛔ десктоп строго в одну строку */
  min-height: 64px;
}
.logo { flex: 0 0 auto; display: block; line-height: 0; }
.logo img { height: 34px; width: auto; display: block; }
@media (max-width: 900px) { .logo img { height: 28px; } }
.nav { flex: 1 1 auto; min-width: 0; }      /* ⛔ единственный сжимаемый элемент */
.nav ul {
  list-style: none; display: flex; flex-wrap: nowrap; gap: var(--s-2);
  margin: 0; padding: 0; justify-content: flex-end;
}
.nav a {
  color: #d8e3f3; text-decoration: none; font-size: 14.5px; white-space: nowrap;
  padding: 6px 2px; border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current] { color: #fff; border-bottom-color: var(--hot); }
.top .cta-top { flex: 0 0 auto; }
.burger { display: none; flex: 0 0 auto; background: none; border: 0; color: #fff;
          font-size: 26px; line-height: 1; padding: 6px 10px; cursor: pointer; }

/* ─────────── кнопки ─────────── */
.btn {
  display: inline-block; background: linear-gradient(180deg, #1fd07d, var(--hot)); color: #fff;
  text-decoration: none; font-weight: 700; font-size: 15.5px; padding: 12px 22px;
  border-radius: 12px; box-shadow: 0 3px 0 var(--hot-2), 0 6px 16px rgba(23, 178, 106, .28);
  white-space: nowrap; transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(1px);
  box-shadow: 0 2px 0 var(--hot-2), 0 4px 12px rgba(23, 178, 106, .3); }
.btn--wide { display: block; text-align: center; padding: 14px 18px; font-size: 17px; }
.btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px #3f7a63; }

/* ─────────── типографика ─────────── */
h1 { font-size: clamp(27px, 4.4vw, 40px); line-height: 1.18; margin: 0 0 var(--s-2); letter-spacing: -.5px; }
h2 { font-size: clamp(23px, 3vw, 30px); line-height: 1.22; margin: var(--s-4) 0 var(--s-2);
     letter-spacing: -.4px; padding-left: 14px; border-left: 4px solid var(--hot); }
h3 { font-size: 19.5px; margin: var(--s-3) 0 var(--s); }
p { margin: 0 0 var(--s-2); }
a { color: var(--brand-2); }
.lead { font-size: 20.5px; line-height: 1.55; color: var(--ink-2); }
/* Проза — 66em: при 1088 px строка выходила в 120 знаков при норме 50-75, глаз терял
   возврат каретки. Таблицы, карточки и врезки остаются во всю ширину контейнера. */
main > p, main > h2 + p, main p:not(.card__sub):not(.card__note):not(.byline):not(.lead) {
  max-width: 66em;
}
main .lead { max-width: 62em; }
main strong, main b { color: var(--brand); font-weight: 650; }
main a { text-decoration-color: rgba(18,104,74,.35); text-underline-offset: 3px; }
main > section, main > div { min-width: 0; }

/* ─────────── герой ─────────── */
.hero { padding: var(--s-4) 0 var(--s-3); border-bottom: 1px solid var(--line); margin-bottom: var(--s-3); }
.pill {
  display: inline-block; font-size: 13px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ok); background: var(--hot-3);
  padding: 5px 11px; border-radius: 999px; margin-bottom: var(--s-2);
}
.byline { font-size: 14px; color: var(--ink-3); margin-top: var(--s-2); }

/* ─────────── полоса-хронометр: главный акцент сайта ─────────── */
.clock {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; margin: var(--s-3) 0;
}
.clock > div { background: var(--card); padding: var(--s-2) var(--s-2) 14px; min-width: 0; }
.clock b { display: block; font: 700 26px/1.1 var(--mono); color: var(--brand); letter-spacing: -.5px; }
.clock span { display: block; font-size: 13.5px; color: var(--ink-3); margin-top: 4px; }

/* ─────────── строка-досье оператора ─────────── */
.dossier { display: grid; gap: var(--s-2); margin: var(--s-3) 0; }
.op {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-2) var(--s-3) var(--s-3); min-width: 0;
}
.op__head { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.op__name { font-size: 21px; font-weight: 700; margin: 0; }
.op__note { font: 700 15px/1 var(--mono); color: #fff; background: var(--brand-2);
            padding: 5px 9px; border-radius: 6px; }
.op__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-2); margin-top: var(--s-2);
}
.op__grid > div { min-width: 0; }          /* ⛔ иначе grid-дети распирают контейнер на мобиле */
.op__k { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.op__v { font: 600 16px/1.4 var(--mono); color: var(--ink); }
.op__v--slow { color: var(--bad); }
.op__v--fast { color: var(--ok); }

/* ─────────── шкала «заявлено против документированного» ─────────── */
.bars { margin: var(--s-2) 0 0; }
.bar { display: grid; grid-template-columns: minmax(0, 1fr) 74px; align-items: center; gap: var(--s-2); margin-bottom: 6px; }
.bar__t { height: 10px; border-radius: 999px; background: var(--line-2); overflow: hidden; min-width: 0; }
.bar__t i { display: block; height: 100%; border-radius: 999px; }
.bar--dec i { background: var(--brand-2); }
.bar--doc i { background: var(--hot); }
.bar__n { font: 600 13.5px/1 var(--mono); color: var(--ink-2); text-align: right; }

/* ═════════ КАРТОЧКИ ОПЕРАТОРОВ ═════════
   Логотипы брендов лежат в /img/, панель красится в фон самого логотипа. */
.ranking { display: grid; gap: var(--s-3); margin: var(--s-3) 0 var(--s-4); }
.card {
  position: relative; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-3); min-width: 0;
  box-shadow: 0 1px 2px rgba(16, 23, 36, .04);
  display: grid; grid-template-columns: 140px minmax(0, 1fr) 214px; gap: var(--s-3); align-items: start;
}
.card--top { border-color: #9fe3c2; box-shadow: 0 8px 26px rgba(18, 104, 74, .14); }
.card__rib {
  position: absolute; top: -11px; left: var(--s-3); background: var(--hot); color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.brandbox--light { border-color: var(--line); }
.brandbox {
  width: 128px; height: 96px; border-radius: 14px; display: grid; place-items: center;
  padding: 10px; border: 1px solid var(--line-2);
}
.brandbox img { max-width: 100%; max-height: 74px; }
.card__pos { display: block; text-align: center; font-size: 12.5px; color: var(--ink-3); margin-top: 8px; }
.card__name { font-size: 22px; font-weight: 700; margin: 0; }
.card__sub { font-size: 14px; color: var(--ink-3); margin: 2px 0 var(--s-2); }

/* две шкалы: заявлено против документированного */
.race { display: grid; gap: 8px; margin: var(--s-2) 0; }
.race__row { display: grid; grid-template-columns: 116px minmax(0, 1fr) 178px; gap: 10px; align-items: center; }
.race__lab { font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.race__t { height: 12px; background: var(--line-2); border-radius: 999px; overflow: hidden; min-width: 0; }
.race__t i { display: block; height: 100%; border-radius: 999px; }
.race--dec i { background: linear-gradient(90deg, #3aa87c, var(--brand-2)); }
.race--doc i { background: linear-gradient(90deg, #f6a15a, var(--alert)); }
.race__v { font: 650 13.5px/1.35 var(--sans); color: var(--ink); text-align: right; }
.race--doc .race__v { color: #b4470a; }
.race--doc .race__t i[style*="width:0"] { background: repeating-linear-gradient(
    90deg, var(--line) 0 6px, transparent 6px 12px); width: 100% !important; }

.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
         gap: var(--s-2); margin-top: var(--s-2); }
.facts > div { min-width: 0; }
.facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.facts dd { margin: 2px 0 0; font: 600 15px/1.35 var(--sans); }

.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: var(--s-2); }
.tag { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: #eef2f8; color: var(--ink-2); }
.tag--ok { background: #e7f4ec; color: var(--ok); }
.tag--bad { background: #fdeaea; color: var(--bad); }
.tag--warn { background: #fdf4e3; color: var(--warn); }

.card__act { display: grid; gap: 10px; align-content: start; min-width: 0; }
.score { text-align: center; border: 1px solid var(--line); border-radius: var(--r);
         padding: 10px 8px 12px; background: #fafcff; }
.score b { display: block; font: 800 30px/1 var(--mono); color: var(--brand); letter-spacing: -1px; }
.score span { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
              color: var(--ink-3); margin-top: 5px; }
.score i { font-style: normal; font-size: 15px; color: var(--ink-3); }
.card__note { font-size: 12.5px; color: var(--ink-3); text-align: center; }


/* ─────────── таблицы ─────────── */
.table-wrap { overflow-x: auto; margin: var(--s-2) 0 var(--s-3); border: 1px solid var(--line);
              border-radius: var(--r-lg); background: var(--card); }
table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 15.5px; }
th, td { padding: 14px 16px; text-align: left; vertical-align: top;
          border-bottom: 1px solid var(--line-2); }
thead th { background: var(--brand); color: #fff; font-size: 13px; text-transform: uppercase;
           letter-spacing: .05em; border-bottom: 0; position: sticky; top: 0; }
tbody tr:nth-child(even) { background: #f7faf8; }
tbody tr:hover { background: var(--hot-3); }
tbody tr:last-child td { border-bottom: 0; }
tbody td:first-child { font-weight: 650; color: var(--brand); }
td strong { font-weight: 650; }

/* ─────────── оглавление ─────────── */
.toc { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--hot);
       border-radius: var(--r); padding: var(--s-2) var(--s-3); margin: var(--s-3) 0; }
.toc p { font-weight: 650; margin: 0 0 var(--s); font-size: 15px; text-transform: uppercase;
         letter-spacing: .04em; color: var(--ink-3); }
.toc ol, .toc ul { margin: 0; padding-left: 20px; columns: 2; column-gap: var(--s-3); }
.toc li { margin-bottom: 5px; break-inside: avoid; }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--brand-2); text-decoration: underline; }

/* ─────────── врезки ─────────── */
.note {
  background: #fff8ef; border: 1px solid #f2ddc4; border-radius: var(--r);
  padding: var(--s-2) var(--s-3); margin: var(--s-3) 0; font-size: 16px; color: #6b4a1d;
}
.note strong { color: #573a12; }

/* ─────────── CTA-полоса ─────────── */
.band {
  background: linear-gradient(180deg, #14513c, var(--brand)); color: #fff;
  border-radius: var(--r-lg); padding: var(--s-3); margin: var(--s-4) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); align-items: center;
}
.band > div { min-width: 0; }
.band h3 { margin: 0 0 6px; font-size: 21px; color: #fff; }
.band p { margin: 0; color: #bcded0; font-size: 15.5px; }

/* ─────────── полоса доверия ─────────── */
.trust {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s-2);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-3); margin: var(--s-3) 0;
}
.trust > div { min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
.trust .ic {
  width: 34px; height: 34px; border-radius: 9px; background: #eaf1fa; color: var(--brand-2);
  display: grid; place-items: center; font: 700 15px/1 var(--mono);
}
.trust b { display: block; font-size: 15.5px; }
.trust span { font-size: 14px; color: var(--ink-3); }

/* ─────────── FAQ-аккордеоны ─────────── */
.faq { border-top: 1px solid var(--line); margin-top: var(--s-3); }
.faq details {
  border-bottom: 1px solid var(--line-2); padding: 4px 0;
}
.faq summary {
  list-style: none; cursor: pointer; padding: 14px 34px 14px 0; position: relative;
  font-size: 18.5px; font-weight: 650; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 6px; top: 12px; font: 400 26px/1 var(--sans);
  color: var(--hot); transition: transform .15s ease;
}
.faq details[open] summary::after { content: "–"; }
.faq summary h3 { display: inline; font-size: inherit; margin: 0; font-weight: inherit; }
.faq details > *:not(summary) { margin-left: 0; }
.faq details p { color: var(--ink-2); }

/* ─────────── липкая кнопка на мобиле ─────────── */
.sticky-cta { display: none; }
@media (max-width: 700px) {
  .sticky-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px);
    border-top: 1px solid var(--line); padding: 10px var(--s-2) calc(10px + env(safe-area-inset-bottom));
  }
  .sticky-cta .btn { display: block; text-align: center; }
  body { padding-bottom: 74px; }
}

/* ─────────── подвал ─────────── */
.foot { background: var(--ink); color: #98a3b8; margin-top: var(--s-4); padding: var(--s-4) 0 var(--s-3); font-size: 14.5px; }
.foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s-3); }
.foot__cols > div { min-width: 0; }
.foot h4 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 var(--s); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 6px; }
.foot a { color: #98a3b8; text-decoration: none; }
.foot a:hover { color: #fff; }
.foot__legal { border-top: 1px solid #24304a; margin-top: var(--s-3); padding-top: var(--s-2); font-size: 13.5px; }
.age { display: inline-block; border: 1px solid #4a586f; border-radius: 6px; padding: 2px 7px;
       font-weight: 700; color: #cfd6e2; margin-right: var(--s); }

/* ─────────── хлебные крошки, 404 ─────────── */
.crumbs { font-size: 13.5px; color: var(--ink-3); padding-top: var(--s-2); }
.crumbs a { color: var(--ink-3); }
.page-404 .links { display: grid; gap: var(--s); max-width: 460px; }

/* ─────────── адаптив ─────────── */
@media (max-width: 900px) {
  .burger { display: block; }
  /* ⛔ padding задаём с боковыми значениями: `10px 0` обнуляет отступы, унаследованные от
     .wrap, и логотип с кнопкой прилипают к краю экрана (поймано на визуальном проходе). */
  .top__in { flex-wrap: wrap; min-height: 0; padding: 10px var(--s-2); gap: var(--s); }
  .logo { flex: 1 1 auto; }
  .nav { flex: 1 0 100%; order: 3; display: none; }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a { display: block; padding: 11px 2px; border-bottom: 1px solid #1d4c3b; }
  .top .cta-top { flex: 1 0 100%; order: 2; }
  .top .cta-top .btn { display: block; text-align: center; }
}
@media (max-width: 860px) {
  .card { grid-template-columns: 116px minmax(0, 1fr); }
  .card__act { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; align-items: center; }
  .brandbox--light { border-color: var(--line); }
.brandbox { width: 116px; height: 82px; }
  .race__row { grid-template-columns: 88px minmax(0, 1fr) 84px; }
}
@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .card { padding: var(--s-2); gap: var(--s-2); }
  /* пятая плашка не должна оставлять пустую серую клетку в сетке 2×3 */
  .clock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clock > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .card__act { grid-template-columns: 1fr; }
  .race__row { grid-template-columns: 1fr; gap: 3px; }
  .race__lab { font-size: 12px; }
  .race__v { text-align: left; }
  .band { grid-template-columns: 1fr; }
  .toc ol, .toc ul { columns: 1; }
  .op { padding: var(--s-2); }
  /* мобил-страховка под инлайновые гриды из текста копирайтера */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}


/* ═════════ ОБЪЁМ И АКЦЕНТЫ (переработка 06.08.2026) ═════════ */

/* таблица данных: плотнее, с разделителями колонок и логотипом бренда */
.table-wrap {
  box-shadow: 0 10px 30px rgba(13, 47, 36, .08); border-color: #cfe3d8;
}
table { font-size: 14.5px; }
th, td { padding: 12px 14px; line-height: 1.5; border-right: 1px solid var(--line-2); }
th:last-child, td:last-child { border-right: 0; }
thead th { background: linear-gradient(180deg, #12684a, var(--brand)); font-size: 12.5px;
           letter-spacing: .06em; padding: 14px; }
tbody td:first-child { background: #f4faf7; white-space: nowrap; }

/* бренд в ячейке таблицы */
.cellbrand { display: flex; align-items: center; gap: 9px; font-weight: 700; color: var(--brand); }
.cellbrand { flex-direction: column; align-items: flex-start; gap: 7px; }
.cellbrand__box { display: block; width: 92px; padding: 6px; border-radius: 8px;
                  border: 1px solid transparent; }
.cellbrand__box.lightbg { border-color: var(--line); }
.cellbrand img { display: block; width: 100%; height: 34px; object-fit: contain; }

/* оценка в таблице — плашка */
/* ⛔ Класс называется score-badge, а не nota: `.nota` занят копирайтером под примечание,
   и наше правило красило его абзац в зелёный блок. */
.score-badge {
  display: inline-block; font: 800 15px/1 var(--sans); font-variant-numeric: tabular-nums;
  color: #fff; background: var(--hot-2); padding: 7px 11px; border-radius: 8px;
  box-shadow: 0 2px 0 rgba(0,0,0,.12);
}
.score-badge--mid { background: #b8860b; }
.score-badge--low { background: #b02a2a; }

/* подсветка чисел и сроков в тексте — сканируемость */
/* ⛔ Без плашек и фона: подсветка каждой цифры зелёным прямоугольником делала текст пёстрым.
   Достаточно начертания — цифра выделяется, абзац остаётся спокойным. */
.n { font-weight: 650; color: var(--brand); white-space: nowrap; }

/* врезка с ключевым выводом */
.pull {
  border-left: 5px solid var(--hot); background: linear-gradient(90deg, var(--hot-3), #fff);
  border-radius: 0 var(--r-lg) var(--r-lg) 0; padding: var(--s-2) var(--s-3);
  margin: var(--s-3) 0; font-size: 18px; color: var(--brand);
}
.pull b { color: var(--hot-2); }

/* списки с зелёными маркерами */
main ul:not(.toc):not(.toc ul):not(.nav ul):not(.foot ul):not(.plain) { list-style: none; padding-left: 0; }
main ul:not(.toc):not(.toc ul):not(.nav ul):not(.foot ul):not(.plain) > li {
  position: relative; padding-left: 28px; margin-bottom: 9px;
}
main ul:not(.toc):not(.toc ul):not(.nav ul):not(.foot ul):not(.plain) > li::before {
  content: "✓"; position: absolute; left: 0; top: -1px; width: 20px; height: 20px;
  background: var(--hot-3); color: var(--hot-2); border-radius: 6px;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}

/* объёмные блоки: тень и приподнятость */
.clock { box-shadow: 0 8px 24px rgba(13, 47, 36, .07); border-color: #cfe3d8; }
.clock b { color: var(--hot-2); }
.card { box-shadow: 0 6px 20px rgba(13, 47, 36, .07); }
.toc { box-shadow: 0 6px 18px rgba(13, 47, 36, .06); }
.band { box-shadow: 0 12px 32px rgba(13, 47, 36, .22); }
.trust { box-shadow: 0 6px 18px rgba(13, 47, 36, .06); border-color: #cfe3d8; }
.trust .ic { background: var(--hot-3); color: var(--hot-2); }

/* первый абзац раздела крупнее — задаёт ритм */
h2 + p { font-size: 18.5px; color: var(--ink-2); }


/* ═════════ ПРАВКИ ПО РЕВЬЮ 06.08.2026 ═════════ */

/* карточка на мобиле — одна колонка: раньше логотип держал колонку 116px, и под ним
   оставалось до 634px пустоты, а текст ломался в колонке 177px */
@media (max-width: 640px) {
  .card { grid-template-columns: 1fr; }
  .card__pos { text-align: left; }
  .brandbox { width: 132px; height: 84px; }
}

/* KPI-полоса: на планшете пятая плашка оставляла три пустые ячейки в рамке */
@media (min-width: 641px) and (max-width: 900px) {
  .clock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clock > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* подсказка, что таблица скроллится вбок: на мобиле аффорданса не было вообще */
.table-wrap { position: relative; }
@media (max-width: 700px) {
  .table-wrap::after {
    content: ""; position: absolute; top: 0; right: 0; width: 26px; height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(13,47,36,.10));
    pointer-events: none; border-radius: 0 var(--r-lg) var(--r-lg) 0;
  }
}

/* числа в моно давали провалы вокруг запятой: «9 , 1» */
.clock b, .score b, .race__v { font-family: var(--sans); font-variant-numeric: tabular-nums; }

/* заголовок колонки с оценкой занимал 4 строки ради плашки 40px */
thead th:last-child { width: 92px; }

/* при наведении первая ячейка не подхватывала цвет строки */
tbody tr:hover td:first-child { background: var(--hot-3); }

/* дисклеймер про шкалу — один раз под рейтингом, а не под каждой из пяти кнопок */
.ranking .card__note { display: none; }
.ranking__note { font-size: 13.5px; color: var(--ink-3); margin: -8px 0 var(--s-3); }


/* приветственный бонус в карточке */
.bonus {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  background: var(--hot-3); border: 1px solid #b7e6cf; border-radius: var(--r);
  padding: 10px 14px; margin: 0 0 var(--s-2); font-size: 16px;
}
.bonus__ic {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px;
  background: var(--hot-2); color: #fff; font: 700 12px/1 var(--sans); flex: 0 0 auto;
}
.bonus b { color: var(--brand); }
.bonus__cond { font-size: 13.5px; color: var(--ink-3); }