/*
 * blocks.css - оформление блоков гида 1xslotscasino.guide (blocks/*.php), 17.09.2026.
 * Подключается layout.php после pages.css по наличию файла. Правила дома (_канон/03):
 * mobile-first, базовый слой = 360, брейкпоинты только min-width 480/768/1024/1280;
 * ни одного literal-цвета - только токены слоя 2 (skins.css, скин onyx-gold); ноль
 * max-width на p и h1-h6; интерактив не ниже 44px; тёмная и светлая тема - теми же
 * токенами, своих цветов у блоков нет.
 *
 * Подпись сайта: герой full-bleed-image-with-overlay (полигональная сетка --hero-bg
 * скина), рисунок главной grid-of-elements (карточки разделов), регистр верхний -
 * только у надзаголовков и кнопок, как в лобби оригинала.
 */

/* ======================= общее: иконки, кнопки, статусы ======================= */
.ico { width: 1.1em; height: 1.1em; flex: 0 0 auto; display: inline-block; vertical-align: -0.15em; }
/* Партнёрская кнопка cta() всегда несёт btn--primary; контурный вариант для
 * второстепенных действий (iOS, мобильная версия) снимает золото. */
.btn--primary.btn--outline { background-color: transparent; background-image: none; color: var(--text); border-color: var(--rule-strong); box-shadow: none; }
.btn--primary.btn--outline:hover { background-color: var(--brand-soft); color: var(--text); border-color: var(--brand); transform: none; }
/* Кнопка копирования кода (app.js data-action="copy"): пилюля, тап 44. */
.copy-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap-min); padding: 0 var(--s-4);
  border: 1px solid var(--rule-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text); font-size: var(--t-small); font-weight: var(--fw-semi);
  transition: background var(--dur-quick) var(--ease), border-color var(--dur-quick) var(--ease);
}
.copy-btn:hover { border-color: var(--brand); background: var(--brand-soft); }
.copy-btn.is-copied { border-color: var(--success); color: var(--success); }
.copy-btn--sm { min-height: var(--tap-sm); padding: 0 var(--s-3); }
.copy-btn--lg { min-height: var(--tap-lg); padding: 0 var(--s-5); font-size: var(--t-body); }
/* Статус платёжки: да / нет / не подтверждено. */
.st { display: inline-flex; align-items: center; gap: var(--s-1); white-space: nowrap; font-weight: var(--fw-medium); }
.st--yes { color: var(--success); }
.st--no { color: var(--danger); }
.st--unk { color: var(--warning); }
/* Мелкие содержательные подписи (источник, «в правилах не указано», надзаголовки 12px) -
 * --text-mute (>= 6.0), не --text-faint: faint в тёмной теме даёт 3.67 на карточке, для
 * кегля ниже 18px это меньше 4.5 (Д6; замер контраст.py, скептик 17.09.2026). */
.na { color: var(--text-mute); }
.data-table td.num .na { font-family: var(--font-body); font-size: var(--t-tiny); white-space: normal; }
.src { color: var(--text-mute); font-size: var(--t-tiny); }
.section__lead { color: var(--text-dim); margin-top: var(--s-2); }
.section__more { margin-top: var(--s-4); }
/* .home-hero__eyebrow и .phero__eyebrow из этого списка сняты 24.09.2026 вместе с самим
 * надзаголовком (`_дизайн/первый-экран-по-типам.md`, общее правило 2; craft-floor держит
 * eyebrow запретом, а не умолчанием). У 19 страниц из 30 он дословно повторял крошку -
 * три названия раздела подряд в самом дорогом месте экрана (находка P2-1 критика).
 * Классы .lcard__eyebrow и .secgrid__cluster живы: это подписи карточек, не героев. */
.eyebrow-gold, .plate__k, .pill__k, .lcard__eyebrow, .secgrid__cluster,
.verdict__k, .promo-card__k, .promo-box__k, .foot-strip__k, .pay-pills__k, .toc__k, .legal__k, .rep__label, .promo-badge__k,
.note__k, .vtop__k, .code-hero__k, .cid__k, .cbar__k, .cbar__status-k {
  font-size: var(--t-tiny); letter-spacing: .12em; text-transform: uppercase; font-weight: var(--fw-semi);
}

/* ============================ шапка на узком экране ============================
 * Wordmark владельца широкий (6.2:1): при штатных 36px он занимает 225px, и на 360-390
 * шапка (лого + тема + CTA + бургер) уезжала за правый край (замер 17.09.2026,
 * scrollWidth 445 при 390). Как у мобильной шапки оригинала: знак компактный, 20px до
 * 480, 28px до 768, штатные 36px с 768.
 *
 * ПРОВЕРКА СКЕПТИКА 17.09.2026: с появлением файлов ru/es (а дальше id) в шапке с 768
 * встал переключатель языка (П7, chrome.css), и полоса перестала помещаться: на 768
 * лого 225 + меню 350 + тема 44 + языки 219 + Register 69 = 907 при 736 доступных;
 * на 1024 с бейджем промокода 180 - 1087; на 1280 с четырьмя эндонимами («Bahasa
 * Indonesia» широкий) и полным бейджем - 1328. Кнопка регистрации и языки уезжали за
 * край (снимки head-768/head-1024 в _дизайн/снимки-скептика/). Лечение ниже, только
 * min-width: с 768 шапка в две строки (инструменты сверху, меню второй строкой,
 * --header-h переопределён, чтобы якоря и scroll-padding считались от настоящей
 * высоты), языки кодами EN · RU · ES · ID (эндонимы остаются в шторке и подвале; текст
 * ссылки в DOM цел, код печатает ::after из hreflang); бейдж промокода - с 1024.
 *
 * 23.09.2026: возврат к ОДНОЙ строке с 1024 отменён - он не помещался ни на одной
 * ширине и резал кнопку регистрации (замер и разбор в блоке 1024 ниже). Две строки
 * держатся до самого широкого экрана, и мегаменю раскрывается под целым рядом меню. */
/* 23.09.2026, замер после починки бургера: бургеру вернули flex: 0 0 auto (chrome.css -
 * его сжимало до 22px при объявленных 44), и полоса честно перестала помещаться на 360:
 * знак 125 + тема 44 + призыв 116 + бургер 44 + три зазора по 8 = 353 при 328
 * доступных. Раньше недостающие 25px браузер отбирал у бургера молча. Отдали их
 * знаком, зазором и отбивкой призыва - все три числа токенами. */
.site-header__bar { gap: var(--s-1); }
.site-header__logo img { height: 18px; }
.site-header__cta { padding-inline: var(--s-2); }
/* Брейкпоинт был 390px (23.09.2026, оболочка) - пятый в наборе, а свод держит ровно
 * четыре: 480 / 768 / 1024 / 1280 (03, «360 - исток»). Сведён к 480px 23.09.2026:
 * между 390 и 479 шапка берёт тесные значения базы, и это единственное следствие. */
@media (min-width: 480px) {
  .site-header__bar { gap: var(--s-2); }
  .site-header__logo img { height: 20px; }
  .site-header__cta { padding-inline: var(--s-3); }
}

/* ============================ герой главной ============================ */
.home-hero {
  position: relative; overflow: hidden;
  padding-block: var(--s-7) var(--s-6);
  background-color: var(--bg);
  background-image: var(--hero-bg, var(--ambient));
  background-size: cover; background-position: center top;
  border-bottom: var(--hairline);
}
.home-hero__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); align-items: center; }
.home-hero__text { min-width: 0; }
.home-hero__h1 { font-size: var(--t-display); margin-bottom: var(--s-4); }
.home-hero__lead { color: var(--text-dim); font-size: var(--t-h4); line-height: var(--lh-base); margin-bottom: var(--s-5); }
.home-hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; }
.home-hero__cta .btn { flex: 1 1 auto; }
.home-hero__aside { min-width: 0; }

/* ============================ герои разделов ============================ */
.phero {
  position: relative; overflow: hidden;
  padding-block: var(--s-6);
  background-color: var(--bg-2);
  background-image: var(--hero-bg, var(--ambient));
  background-size: cover; background-position: center top;
  border-bottom: var(--hairline);
}
/* ТРИ РЕГИСТРА ГЕРОЯ (24.09.2026, `_дизайн/первый-экран-по-типам.md`, общее правило 7).
 * «Витрина» - золотое свечение --hero-bg и золотая кнопка: главная, обзор, бонус,
 * промокод, страна. «Стойка» - ровный фон без свечения и волосяная линия снизу: касса
 * и хаб (.phero--hub ниже). «Страница» - героя нет вовсе: статья и ответственная игра.
 * Разницу видно глазом, не читая, и это половина ответа на «структура однообразная». */
.phero__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); align-items: center; }
.phero__text, .phero__side { min-width: 0; }
.phero h1 { font-size: var(--t-h1); margin-bottom: var(--s-4); }
.phero__lead { color: var(--text-dim); font-size: var(--t-h4); line-height: var(--lh-base); margin-bottom: var(--s-5); }
.phero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: 0; }
.phero__cta .btn { flex: 1 1 auto; }
.phero__note { margin: var(--s-3) 0 0; color: var(--text-mute); font-size: var(--t-small); }
.phero .plates--hero { margin-block: var(--s-5); }

/* Регистр «стойка»: касса и хаб. Ровный фон вместо золотого свечения витрины, линия
 * снизу вместо границы-теста. Тип узнаётся до чтения первой строки. */
.phero--hub { background-image: none; background-color: var(--bg); border-bottom: 1px solid var(--rule); }
/* Поле поиска - ПРЕДМЕТ первого экрана хаба, и между ним и героем не нужны два отступа
 * подряд: у героя свои 32 px снизу, их достаточно. Замер 24.09.2026: сложенные
 * padding-bottom героя и padding-top секции поиска отодвигали поле на 32 px и держали
 * его за отметкой 800 на английском и русском хабах. Правило срабатывает только когда
 * поиск идёт СРАЗУ за героем, то есть ровно в том случае, ради которого заведено.
 * Второй селектор - для хабов, где писатель обернул поиск в <div data-aspect="grid">:
 * метка карты интента обязана обнимать блок, и из-за неё поиск перестаёт быть прямым
 * соседом героя. */
.phero--hub + .section--search,
.phero--hub + * > .section--search:first-child { padding-top: 0; }

/* ============================ удостоверение казино (casino_id) ============================
 * Один факт - девять мест и девять весов (В30, `_дизайн/первый-экран-по-типам.md`,
 * общее правило 6). Своих цветов блок не заводит: только роли скина. */
.cid { min-width: 0; }
.cid--line { margin: var(--s-4) 0 0; color: var(--text-mute); font-size: var(--t-small); line-height: var(--lh-base); overflow-wrap: anywhere; }
.cid--under { margin-top: var(--s-2); font-size: var(--t-tiny); }   /* подпись под крупной цифрой и под кнопкой карточки кода */
.cid--byline { margin: 0; color: var(--text-mute); font-size: inherit; }  /* внутри строки автора - тем же кеглем */
.cid--bar { margin: 0; font-size: var(--t-tiny); }                   /* в подстроке полосы страны */

.cid--card {
  display: grid; gap: var(--s-4); padding: var(--s-5);
  background: var(--surface); border: var(--hairline); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}
.cid__seal { margin: 0; display: grid; gap: 2px; padding-bottom: var(--s-4); border-bottom: var(--hairline); }
.cid__score { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-h3); line-height: var(--lh-tight); color: var(--gold-ink, var(--brand)); }
.cid__score-k { color: var(--text-mute); font-size: var(--t-small); }
.cid__list { margin: 0; display: grid; gap: var(--s-3); }
.cid__row { display: grid; gap: 2px; min-width: 0; }
.cid__k { color: var(--text-mute); }
.cid__v { margin: 0; color: var(--text); font-weight: var(--fw-medium); overflow-wrap: anywhere; }

/* ============================ полоса местной кассы (country_bar) ============================
 * Предмет первого экрана лендинга страны вместо пяти плашек. На 360 ячейки идут
 * столбиком, с 480 встают в ряд: три ячейки - это три коротких значения, и на узком
 * экране ряд из них резал бы «AstroPay» посреди слова. */
.cbar {
  display: grid; gap: var(--s-3); margin-block: var(--s-5); padding: var(--s-4);
  background: var(--surface); border: var(--hairline); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); min-width: 0;
}
/* На 360 полоса складывается в ДВА уровня, а не в три: валюта строкой во всю ширину,
 * метод и срок парой под ней. Замер 24.09.2026: столбик из трёх ячеек поднимал полосу
 * до 261 px и уносил кнопку страны на y 876 при экране 800; в два уровня полоса
 * укладывается в 216 и кнопка поднимается на 831. (Оставшийся перебор снимает лид в
 * два предложения - это правка текста, наряд писателя.) */
.cbar__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.cbar__cell--cur { grid-column: 1 / -1; }
.cbar__cell { display: grid; gap: 2px; min-width: 0; }
.cbar__v { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-h3); line-height: var(--lh-snug); color: var(--text); overflow-wrap: anywhere; }
.cbar__cell--cur .cbar__v { font-size: var(--t-h2); color: var(--gold-ink, var(--brand)); }
.cbar__k { color: var(--text-mute); }
.cbar__legal { display: grid; gap: var(--s-1); padding-top: var(--s-3); border-top: var(--hairline); color: var(--text-mute); font-size: var(--t-small); }
.cbar__status { color: var(--text-dim); }

/* Шапка условий над таблицей пакета: та же полоса плашек, но НЕ в первом экране и не
 * героем. Заведено 24.09.2026 под переезд вызова stat_plates() из первого экрана
 * бонусных страниц (проводка в content/ - отдельным нарядом). */
.plates--terms { margin-block: var(--s-5) 0; }
/* крупная цифра бонусного хаба */
.bighero__num { display: grid; gap: var(--s-2); padding: var(--s-5); border: 1px solid var(--rule-strong); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-card); }
.bighero__v { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-display); line-height: var(--lh-tight); color: var(--gold-ink, var(--brand)); overflow-wrap: anywhere; }
.bighero__k { color: var(--text-mute); font-size: var(--t-small); }

/* ============================ стат-плашки ============================
 *
 * ХВОСТ СЕТКИ ЗАНИМАЕТ РЯД ЦЕЛИКОМ (24.09.2026, находка P2-3 критика дизайна).
 *
 * ЗАМЕР ДО: полоса из пяти плашек при четырёх колонках ложилась 4+1, и справа от
 * одинокой пятой оставалось 897px пустоты прямо над кнопкой - на четырёх лендингах
 * стран (es_argentina, es_chile, es_colombia, es_venezuela) при 1280, 716px при 1024,
 * 539px при 768 и 170px при 360. 03 «Сетки» прямо запрещает последний ряд из одного
 * блока, когда в предыдущем их три и больше.
 *
 * ПОЧЕМУ НЕ «ПРИ ПЯТИ ПЛАШКАХ ДЕЛАТЬ ТРИ КОЛОНКИ». Такая правка чинит число, а не
 * сетку: завтра плашек станет шесть или семь, и дыра вернётся молча. Здесь чинится
 * механизм - сколько бы детей ни пришло, последний ряд заполняется без остатка.
 *
 * КАК ЭТО РАБОТАЕТ. Дорожек объявляется ВДВОЕ-ВТРОЕ больше, чем колонок, а ширину
 * блока задаёт span. Ряд из 4 колонок - это 12 дорожек по span 3; хвост из трёх
 * получает span 4, хвост из двух - span 6, хвост из одного - весь ряд. Арифметика
 * точная, а не на глаз: при равных gap блок из 3 дорожек в 12-дорожечной сетке
 * шириной ровно (W - 3g)/4, то есть в точности колонка repeat(4) - зазоры между
 * блоками остаются теми же 12px.
 *
 * Кто хвост - считают :nth-child(4n+1) (первый в своём ряду) вместе с
 * :nth-last-child(N) (N-й с конца). Числа 4n+1 и 2n+1 здесь - это ЧИСЛО КОЛОНОК, а
 * не число плашек: при смене раскладки меняется только оно.
 */
.plates { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-3); margin-block: var(--s-4); }
.plates > * { grid-column: span 6; }                             /* 360: две в ряд */
.plates > :nth-child(2n+1):last-child { grid-column: 1 / -1; }   /* нечётный хвост - во всю ширину */
.plate { display: grid; gap: var(--s-1); padding: var(--s-4); background: var(--surface); border: var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-card); min-width: 0; }
.plate__v { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-h3); line-height: var(--lh-snug); color: var(--text); overflow-wrap: anywhere; }
.plate__k { color: var(--text-mute); }
.plate__src { color: var(--text-mute); font-size: var(--t-tiny); }

/* ============================ пилюли фактов ============================ */
.pills { list-style: none; margin: 0; padding: var(--s-5) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.pill { display: flex; flex-direction: column; gap: 2px; padding: var(--s-3) var(--s-4); border: 1px solid var(--rule-strong); border-radius: var(--r-lg); background: var(--surface-2); min-width: 0; }
.pill__v { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--gold-ink, var(--brand)); font-size: var(--t-h4); overflow-wrap: anywhere; }
.pill__k { color: var(--text-mute); }

/* ============================ карточки-ссылки ============================ */
.lcard {
  position: relative; display: flex; flex-direction: column; gap: var(--s-2); min-width: 0;
  padding: var(--s-5) var(--s-7) var(--s-5) var(--s-5);
  background: var(--surface); border: var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-card);
  color: var(--text); text-decoration: none;
  transition: border-color var(--dur-quick) var(--ease), transform var(--dur-quick) var(--ease);
}
a.lcard:hover { border-color: var(--brand); text-decoration: none; transform: translateY(-2px); }
.lcard__eyebrow { color: var(--text-mute); }
.lcard__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-h4); line-height: var(--lh-snug); color: var(--text); text-decoration: none; }
.lcard__desc { color: var(--text-dim); font-size: var(--t-small); line-height: var(--lh-base); }
.lcard__arrow { position: absolute; right: var(--s-4); top: var(--s-5); color: var(--brand); }
/* Заголовок карточки хаба - ссылка: стрелка справа, как у карточек-страниц, иначе на
 * снимке 17.09.2026 «Bonuses» / «Help» читались подписью, а не переходом (скептик). */
.lcard--hub { padding-right: var(--s-5); }
.lcard--hub .lcard__title { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: var(--tap-floor); }
.lcard--hub .lcard__title .lcard__arrow { position: static; }
.lcard--hub .lcard__title:hover { color: var(--brand); }
.lcard__list { list-style: none; margin: var(--s-2) 0 0; padding: var(--s-3) 0 0; border-top: var(--hairline); display: grid; gap: 0; }
.lcard__list a { display: block; min-height: var(--tap-min); line-height: var(--tap-min); color: var(--text-dim); text-decoration: none; }
.lcard__list a:hover { color: var(--brand); }
/* СТРОКА С ОТЛИЧИЕМ (24.09.2026, находка оценщика: дети хабов стояли голыми
 * названиями). Название и отличие идут В ДВЕ СТРОКИ, а не через тире в одну: на 360
 * строка списка держит около 30 знаков, и «Промокод - что даёт код и куда его вводить»
 * всё равно переносилась бы, но уже неуправляемо, разрывая название.
 *
 * Высота платится осознанно. Без отличия строка стоит 44 px (цель касания, она же вся
 * высота). С отличием название переходит на плотный интерлиньяж, а 44-й пиксель
 * добирает само отличие: ряд выходит 56-60 px вместо 44, а не 44+38=82, как вышло бы
 * при сохранении line-height 44 у названия. Цель касания при этом не теряется - ссылка
 * остаётся выше пола В9, и сниппет 03 строчную ссылку внутри <li> из счёта целей
 * исключает.
 *
 * Отличия ещё не написаны ни на одном языке: до них правило не печатается вовсе, и
 * список выглядит как прежде. */
.lcard__list .lcard__row--desc { display: grid; gap: 2px; padding-block: var(--s-2); }
.lcard__list .lcard__row--desc a { min-height: 0; line-height: var(--lh-snug); color: var(--text); font-weight: var(--fw-medium); }
.lcard__sub { color: var(--text-mute); font-size: var(--t-small); line-height: var(--lh-base); }
.secgrids { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); margin-top: var(--s-5); }
.secgrid { min-width: 0; display: flex; flex-direction: column; }
.secgrid__cluster { color: var(--text-mute); margin: 0 0 var(--s-3); font-family: var(--font-body); }
.secgrid__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); align-content: start; }
/* Перечни страниц раздела - <ul> с <li> вокруг каждой карточки (24.09.2026, отказ
 * приёмки на /es/latam/: аспект «закрыт заголовком без текста», потому что под
 * заголовком стояла россыпь ссылок в <div>, а проверка покрытия ищет абзац, ячейку или
 * ПУНКТ СПИСКА). Список тут и по смыслу верен: читалка объявляет «список из пяти».
 * CSS снимает маркеры и отступы, а карточку внутри <li> растягивает на высоту ячейки -
 * без этого в ряду карточки разной длины разъезжались бы по нижнему краю. */
.hub-grid, .country-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); list-style: none; margin: 0; padding: 0; }
.hub-grid > li, .country-grid > li { display: grid; min-width: 0; }
.lcard--country .lcard__title { color: var(--gold-ink, var(--brand)); }

/* ============================ карточка промокода ============================ */
.promo-card {
  display: grid; gap: var(--s-4); padding: var(--s-5);
  background: var(--surface); border: 1px solid var(--gold); border-radius: var(--r-xl); box-shadow: var(--shadow-pop);
  min-width: 0;
}
.promo-card__k { margin: 0; color: var(--gold-ink, var(--brand)); }
.promo-card__code, .promo-box__code { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.promo-card__val, .promo-box__val, .foot-strip__code, .promo-badge__code {
  font-family: var(--font-mono); font-weight: var(--fw-bold); letter-spacing: .08em;
  padding: var(--s-2) var(--s-4); border-radius: var(--r-md);
  background: var(--field, var(--surface-3)); color: var(--gold-ink, var(--brand)); border: 1px dashed var(--gold);
}
.promo-card__val { font-size: var(--t-h2); flex: 1 1 auto; text-align: center; }
.promo-card__rows { margin: 0; display: grid; gap: var(--s-2); }
.promo-card__row { display: flex; justify-content: space-between; gap: var(--s-3); padding-bottom: var(--s-2); border-bottom: var(--hairline); font-size: var(--t-small); }
.promo-card__row dt { color: var(--text-mute); }
.promo-card__row dd { margin: 0; color: var(--text); font-weight: var(--fw-medium); text-align: right; }
.promo-card__cta { margin: 0; }
.promo-card__where { margin: 0; color: var(--text-mute); font-size: var(--t-small); }
.promo-card__where-k { color: var(--text); font-weight: var(--fw-semi); }

/* ============================ промо-бокс страницы промокода ============================ */
.promo-box-wrap { padding-block: var(--s-6) var(--s-4); }
.promo-box__h2 { margin-bottom: var(--s-4); }
.promo-box { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); padding: var(--s-5); background: var(--surface); border: 1px solid var(--gold); border-radius: var(--r-xl); box-shadow: var(--shadow-pop); }
.promo-box__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); min-width: 0; }
.promo-box__k { margin: 0; color: var(--gold-ink, var(--brand)); }
.promo-box__val { font-size: var(--t-h1); flex: 1 1 auto; text-align: center; }
.promo-box__gives { margin: 0; color: var(--text); font-weight: var(--fw-medium); }
.promo-box__cta { margin: 0; }
.promo-box__facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); align-content: start; }
.promo-box__facts > div { padding: var(--s-3) var(--s-4); background: var(--surface-2); border-radius: var(--r-md); border: var(--hairline); min-width: 0; }
.promo-box__facts dt { color: var(--text-mute); font-size: var(--t-tiny); letter-spacing: .08em; text-transform: uppercase; }
.promo-box__facts dd { margin: var(--s-1) 0 0; font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--text); overflow-wrap: anywhere; }
.promo-box__where { margin: var(--s-4) 0 0; color: var(--text-dim); }

/* ============================ таблицы ============================ */
.data-table caption { caption-side: top; text-align: left; padding: var(--s-3) var(--s-4); color: var(--text-mute); font-size: var(--t-small); background: var(--surface-2); border-bottom: var(--hairline); }
.data-table table { min-width: 560px; }
.data-table th[scope="row"] { text-align: left; padding: var(--s-3) var(--s-4); color: var(--text); font-weight: var(--fw-semi); border-top: 1px solid var(--rule); white-space: nowrap; }
/* ЧЕРЕДОВАНИЕ СТРОК - НА --bg-3, А НЕ НА --surface-2 (24.09.2026, находка P2-4
 * критика, второй круг). Нечётный ряд у таблицы своего фона не имеет и показывает --bg
 * секции, и пара --bg / --surface-2 в СВЕТЛОЙ теме давала 1.044 против 1.174 в тёмной:
 * полосатость была практически мертва, а 03 требует, чтобы заявленное чередование было
 * настоящим. Замер пар против --bg светлой: surface-2 1.044, bg-2 1.092, surface-3
 * 1.141, bg-3 1.195. Взят --bg-3: в светлой он даёт 1.195, в тёмной 1.174 - то же, что
 * было, то есть тёмная тема не меняется ни на сотую. Новой роли не заведено. */
.data-table tbody tr:nth-child(even) th[scope="row"] { background: var(--bg-3); }
.data-table td.src { min-width: 160px; }
.table-scroll--passport table, .table-scroll--terms table { min-width: 0; }
.passport th[scope="row"], .terms th[scope="row"] { width: 40%; white-space: normal; vertical-align: top; }
.passport td, .terms td { color: var(--text); }
.passport td a { display: inline-flex; align-items: center; min-height: var(--tap-floor); } /* почта поддержки: пол цели В9, была 17px по замеру скептика */
.breadcrumbs__item a { display: inline-flex; align-items: center; min-height: var(--tap-floor); } /* крошки заготовки 22px - ниже пола В9 */
.pkg .row--vip th, .pkg .row--vip td { border-top: 2px solid var(--gold); }
.pay th[scope="row"] { min-width: 140px; white-space: normal; }
.vip .lvl { color: var(--gold-ink, var(--brand)); }

/* ============================ вердикт и репутация ============================ */
.verdict { padding: var(--s-5); border-left: 4px solid var(--gold); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.verdict__k { margin: 0 0 var(--s-2); color: var(--gold-ink, var(--brand)); }
.verdict__text { margin: 0 0 var(--s-3); font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--t-h3); line-height: var(--lh-snug); }
.verdict__list { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s-2); color: var(--text-dim); }
.rep-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.rep { display: grid; gap: var(--s-2); padding: var(--s-5); background: var(--surface); border: var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-card); min-width: 0; }
.rep__name { margin: 0; font-weight: var(--fw-semi); color: var(--text); }
.rep__score { margin: 0; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-h2); color: var(--gold-ink, var(--brand)); line-height: var(--lh-tight); }
.rep__label { margin: 0; color: var(--text-mute); }
.rep__lines { margin: var(--s-2) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-1); color: var(--text-dim); font-size: var(--t-small); }
.rep__lines li { padding-left: var(--s-4); position: relative; }
.rep__lines li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.rep__link { display: inline-flex; align-items: center; min-height: var(--tap-min); font-size: var(--t-small); }
.pc h3 .ico { width: 1.2em; height: 1.2em; }

/* ============================ шаги ============================ */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); counter-reset: step; }
.steps__item { position: relative; padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 52px); background: var(--surface); border: var(--hairline); border-radius: var(--r-lg); min-height: 68px; counter-increment: step; }
.steps__item::before {
  content: counter(step); position: absolute; left: var(--s-4); top: var(--s-4);
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background-image: var(--grad-brand); background-color: var(--brand); color: var(--on-brand);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-small);
}
.steps__t { display: block; font-weight: var(--fw-semi); color: var(--text); }
.steps__d { display: block; margin-top: var(--s-1); color: var(--text-dim); font-size: var(--t-small); line-height: var(--lh-base); }

/* ============================ снимки интерфейса ============================ */
.screens { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.screen { margin: 0; background: var(--surface); border: var(--hairline); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); }
/* Кадр первого экрана главной: та же рамка, но тень витрины - он лежит на золотом
 * свечении --hero-bg и с обычной тенью от него не отделялся (24.09.2026). */
.screen--hero { box-shadow: var(--shadow-pop); }
.screen img { width: 100%; height: auto; }
.screen figcaption { padding: var(--s-3) var(--s-4); color: var(--text-mute); font-size: var(--t-small); border-top: var(--hairline); }

/* ============================ карточки приложения ============================ */
.app-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.app-card { display: grid; gap: var(--s-3); padding: var(--s-5); background: var(--surface); border: var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-card); min-width: 0; align-content: start; }
.app-card--android { border-color: var(--gold); }
.app-card__title { margin: 0; display: flex; align-items: center; gap: var(--s-2); font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-h4); color: var(--text); }
.app-card__title .ico { width: 1.4em; height: 1.4em; color: var(--gold-ink, var(--brand)); }
.app-card__text { margin: 0; color: var(--text-dim); }
.app-card__specs { margin: 0; display: grid; gap: var(--s-2); }
.app-card__specs > div { display: flex; justify-content: space-between; gap: var(--s-3); padding-bottom: var(--s-2); border-bottom: var(--hairline); font-size: var(--t-small); }
.app-card__specs dt { color: var(--text-mute); }
.app-card__specs dd { margin: 0; color: var(--text); font-weight: var(--fw-medium); text-align: right; }
.app-card__cta { margin: auto 0 0; }

/* ============================ бонусные карточки ============================ */
.bcards { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
.bcard { display: grid; gap: var(--s-2); padding: var(--s-5); background: var(--surface); border: var(--hairline); border-left: 4px solid var(--gold); border-radius: var(--r-lg); min-width: 0; }
.bcard__name { margin: 0; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-h4); color: var(--text); }
.bcard__terms { margin: 0; color: var(--text-dim); }
.bcard__src { margin: 0; color: var(--text-mute); font-size: var(--t-tiny); }

/* ============================ платёжки: пилюли ============================ */
.pay-pills { padding-block: 0 var(--s-6); }
.pay-pills__k { margin: 0 0 var(--s-3); color: var(--text-mute); }
/* ДВА ПРИМЕНЕНИЯ ОДНОЙ ФОРМЫ, РАЗВЕДЁННЫЕ 24.09.2026 (находка писателя русской ветки).
 * .chip заведён под пилюли платёжек - это ПОДПИСЬ: <li> со словом «Visa», кликать
 * нечего. На хабах той же формой встали ЧИПЫ-ССЫЛКИ в первом экране, и они выглядели
 * подписью: ни наведения, ни фокуса, ни высоты цели. Место, где читатель решает
 * остаться, не имеет права выглядеть неинтерактивным. Поэтому база осталась формой, а
 * поведение ссылки живёт в .chip--link (и у любого <a class="chip">, чтобы уже
 * написанная разметка не осталась без фокуса). */
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-3); border: 1px solid var(--rule-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--text-dim); font-size: var(--t-small); }
a.chip, .chip--link {
  min-height: var(--tap-min);            /* 44: цель тапа, а не подпись (03 «Касание и текст») */
  padding-inline: var(--s-4);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--dur-quick) var(--ease), background-color var(--dur-quick) var(--ease), color var(--dur-quick) var(--ease);
}
a.chip:hover, .chip--link:hover { border-color: var(--brand); background: var(--surface-2); color: var(--text); text-decoration: none; }
a.chip:focus-visible, .chip--link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
a.chip:active, .chip--link:active { background: var(--surface-3); }
/* Ряд чипов под полем поиска хаба: до заголовка списка - тот же воздух, что у формы. */
.chips--search { margin-block: 0 var(--s-5); }

/* ============================ страна: легальность ============================ */
.legal { padding: var(--s-5); background: var(--surface); border: var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.legal__status { margin: 0 0 var(--s-2); font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--t-h4); }
.legal__k { display: block; color: var(--text-mute); margin-bottom: var(--s-1); }
.legal__reg { margin: 0 0 var(--s-4); color: var(--text-dim); }
.legal__text p:last-child { margin-bottom: 0; }

/* ============================ хаб: поиск по вопросам ============================ */
.qsearch { margin-bottom: var(--s-5); }
.qsearch__label { display: block; margin-bottom: var(--s-2); color: var(--text-mute); font-size: var(--t-small); }
.qsearch__row { display: flex; align-items: center; gap: var(--s-3); min-height: 52px; padding: 0 var(--s-4); background: var(--field, var(--surface)); border: 1px solid var(--rule-strong); border-radius: var(--r-pill); color: var(--text-mute); }
.qsearch__row:focus-within { border-color: var(--brand); color: var(--text); }
.qsearch__input { flex: 1 1 auto; min-width: 0; min-height: 50px; border: 0; background: transparent; color: var(--text); font-size: var(--t-body); outline: none; }
.qsearch__input::placeholder { color: var(--text-faint); }
.qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.qlist__item { display: grid; gap: var(--s-1); padding: var(--s-4) var(--s-5); background: var(--surface); border: var(--hairline); border-radius: var(--r-lg); min-width: 0; }
.qlist__q { font-weight: var(--fw-semi); color: var(--text); font-size: var(--t-body); display: inline-flex; align-items: center; min-height: var(--tap-floor); }
a.qlist__q:hover { color: var(--brand); }
.qlist__a { color: var(--text-mute); font-size: var(--t-small); }
.filter-empty { padding: var(--s-4); color: var(--text-mute); }

/* ============================ статья: оглавление, байлайн ============================ */
.toc { margin-block: var(--s-4) var(--s-6); padding: var(--s-4) var(--s-5); background: var(--surface-2); border: var(--hairline); border-radius: var(--r-lg); }
.toc__k { margin: 0 0 var(--s-2); color: var(--text-mute); }
.toc__list { margin: 0; padding-left: 1.3em; display: grid; gap: var(--s-1); }
/* 28px ЛИТЕРАЛОМ, а не --tap-min (24.09.2026, К2 второго осмотра): оглавление статьи -
 * плотный список из семи-двенадцати строк, и при 44 на строку оно занимало бы пол-экрана
 * телефона перед самим текстом. Пол В9 (24) держит; сниппет 03 строчную ссылку внутри
 * <li> из счёта целей исключает - это навигация по тексту, а не кнопка. */
/* display: block, а НЕ inline-block (24.09.2026, находка P1-2 критика, второй круг).
 * У inline-block базовая линия - базовая линия его ПОСЛЕДНЕЙ строки, и маркер <li>
 * съезжал к ней, как только пункт переносился: на 360 шесть пунктов из семи двухстрочные,
 * и номера стояли против вторых строк - «1.» напротив «and which just burn days».
 * Читалось как список с чужими номерами. На 1280 дефекта не было: там пункты в одну
 * строку, и последняя строка она же первая - потому правило и прожило незамеченным.
 * Цель касания при этом не теряется: её держит min-height, а не тип отображения. */
.toc__list a { display: block; min-height: 28px; line-height: 28px; color: var(--text-dim); }
.toc__list a:hover { color: var(--brand); }
.byline { margin: 0 0 var(--s-5); color: var(--text-mute); font-size: var(--t-small); } /* без отрицательного отступа: байлайн прилипал к H1 (снимок verification-1280) */

/* ============================ автор ============================ */
.author { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding: var(--s-5); background: var(--surface); border: var(--hairline); border-radius: var(--r-xl); box-shadow: var(--shadow-card); }
.author__photo { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold); }
.author__body { min-width: 0; }
.author__name { margin: 0; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-h3); }
.author__role { margin: 0 0 var(--s-3); color: var(--gold-ink, var(--brand)); font-size: var(--t-small); }
.author__bio { color: var(--text-dim); }
.author__links { margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.author__links a { display: inline-flex; align-items: center; min-height: var(--tap-min); }

/* ============================ шапка: бейдж промокода ============================ */
.promo-badge { display: none; align-items: center; gap: var(--s-2); min-height: var(--tap-min); padding: 0 var(--s-3); color: var(--text-mute); text-decoration: none; border: 1px solid var(--rule-strong); border-radius: var(--r-pill); }
.promo-badge:hover { border-color: var(--brand); color: var(--text); text-decoration: none; }
.promo-badge__code { padding: 2px var(--s-2); font-size: var(--t-small); border-style: solid; }
/* Ссылка внутри ячейки таблицы - цель тапа не ниже 24px (23.09.2026, 03 «цели касания»).
 * На /es/latam/ пять ссылок в колонке «Página» были высотой 17px: строчный <a> в <td>
 * берёт высоту строки, а исключение сниппета 03 распространяется на <p> и <li>, не на
 * ячейку. Ширину и перенос правило не трогает. */
.data-table td a, .data-table th a { display: inline-flex; align-items: center; min-height: var(--tap-floor); }

/* ============================ подвал: полоса промокода и платёжек ============================ */
.foot-strip { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) 0 var(--s-5); margin-bottom: var(--s-5); border-bottom: var(--hairline); }
.foot-strip__promo, .foot-strip__pay, .foot-strip__apps { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); min-width: 0; }
.foot-strip__k { color: var(--text-mute); }
.foot-strip__code { font-size: var(--t-body); }
.foot-strip__more { display: inline-flex; align-items: center; min-height: var(--tap-min); color: var(--text-mute); font-size: var(--t-small); }
.foot-strip__cta { min-height: var(--tap-min); }
.foot-strip__app { display: inline-flex; align-items: center; justify-content: center; width: var(--tap-min); height: var(--tap-min); border: 1px solid var(--rule-strong); border-radius: var(--r-md); color: var(--text-mute); }
a.foot-strip__app:hover { color: var(--text); border-color: var(--brand); }
.foot-strip__app .ico { width: 22px; height: 22px; }

/* ================================ 480 ================================ */
@media (min-width: 480px) {
  .site-header__bar { gap: var(--s-3); }
  .site-header__logo img { height: 28px; }
  .pills { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hub-grid, .country-grid, .rep-grid, .bcards, .screens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* последний ряд не из одной карточки (В5): одиночка растягивается на всю ширину -
   * семь регулярных акций давали 3+3+1 (снимок bonuses-1280, скептик 17.09.2026) */
  .bcards > .bcard:nth-child(2n+1):last-child { grid-column: 1 / -1; }
  .home-hero__cta .btn, .phero__cta .btn { flex: 0 1 auto; }
  /* Полоса страны встаёт в ряд только с 480: на 360 три коротких значения в ряд
   * резали бы «AstroPay» посреди слова (замер 24.09.2026). Дорожек втрое больше
   * колонок - хвост ряда занимает его целиком, как у .plates (см. врезку там). */
  .cbar__row { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .cbar__row > .cbar__cell { grid-column: span 2; }
  .cbar__row > .cbar__cell:nth-child(3n+1):last-child { grid-column: 1 / -1; }
  .cbar__row > .cbar__cell:nth-child(3n+1):nth-last-child(2),
  .cbar__row > .cbar__cell:nth-child(3n+1):nth-last-child(2) ~ .cbar__cell { grid-column: span 3; }
  .cbar__legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: baseline; }
  .promo-box__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .author { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
}

/* ================================ 768 ================================ */
@media (min-width: 768px) {
  .site-header__logo img { height: 36px; }
  .site-header__cta { padding-inline: var(--s-4); }
  /* шапка в две строки (см. пояснение у базового слоя шапки); :root, а не html -
   * tokens.css объявляет --header-h на :root, и селектор типа его не перебил бы */
  :root { --header-h: 112px; }
  .site-header, .site-header__bar { height: auto; }
  .site-header__bar { flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding-block: var(--s-3) 0; }
  .nav-desktop { flex: 1 1 100%; order: 10; justify-content: center; min-height: var(--tap-min); padding-bottom: var(--s-2); }
  /* языки - кодами из hreflang: четыре эндонима («Bahasa Indonesia») в полосу не входят */
  .site-header__lang { flex: 0 0 auto; }
  /* min-width 40px ЛИТЕРАЛОМ (24.09.2026, К2 второго осмотра). Цель касания у этой
   * ссылки задана ВЫСОТОЙ - chrome.css даёт ей min-height: var(--tap-min). Здесь число
   * про другое: сколько места в полосе занимает код языка из двух букв, когда их
   * четыре. Это ширина макета, а не порог тапа, и связывать её с --tap-min нельзя:
   * поднимут порог - и полоса шапки поедет из-за размера, к касанию не относящегося.
   * Пол В9 (24) 40px держит с запасом. */
  .site-header__lang a { font-size: 0; min-width: 40px; padding-inline: var(--s-1); line-height: 0; }
  .site-header__lang a::after { content: attr(hreflang); font-size: var(--t-small); line-height: 1; text-transform: uppercase; letter-spacing: .04em; }
  .home-hero { padding-block: var(--s-9) var(--s-8); }
  .phero { padding-block: var(--s-8) var(--s-7); }
  .phero__in--split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  /* Четыре в ряд - это span 3 по 12 дорожкам (механизм описан у .plates выше).
   * Порядок строк значим: сначала снимается базовое правило нечётного хвоста для
   * двух колонок, потом объявляются хвосты для четырёх. Специфичность у них равная,
   * решает порядок. */
  .plates > * { grid-column: span 3; }
  .plates > :nth-child(2n+1):last-child { grid-column: span 3; }
  .plates > :nth-child(4n+1):nth-last-child(3),
  .plates > :nth-child(4n+1):nth-last-child(3) ~ * { grid-column: span 4; }  /* хвост из трёх */
  .plates > :nth-child(4n+1):nth-last-child(2),
  .plates > :nth-child(4n+1):nth-last-child(2) ~ * { grid-column: span 6; }  /* хвост из двух */
  .plates > :nth-child(4n+1):last-child { grid-column: 1 / -1; }             /* хвост из одной */
  .secgrids { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-grid, .rep-grid, .app-grid, .bcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hub-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bcards > .bcard:nth-child(2n+1):last-child { grid-column: auto; }
  .bcards > .bcard:nth-child(3n+1):last-child { grid-column: 1 / -1; }
  .secgrids > .secgrid:nth-child(2n+1):last-child { grid-column: 1 / -1; }
  .secgrids > .secgrid:nth-child(2n+1):last-child .secgrid__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .country-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .promo-box { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
  .promo-box__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-strip { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .foot-strip__pay { grid-column: 1 / -1; }
  .author__photo { width: 144px; height: 144px; }
}

/* ================================ 1024 ================================ */
@media (min-width: 1024px) {
  .home-hero__in { grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: var(--s-8); }
  .home-hero__h1 { font-size: clamp(2.4rem, 3.6vw, 3.4rem); }
  /* ШАПКА ОСТАЁТСЯ В ДВЕ СТРОКИ И НА ДЕСКТОПЕ (23.09.2026).
   *
   * Здесь стояло «шапка снова в одну строку»: --header-h 72, flex-wrap: nowrap и
   * .nav-desktop обратно в общий ряд. ЗАМЕР (playwright, /ru/): при этом ряд не
   * помещался НИ НА ОДНОЙ ширине - 1024 требовал 1122px при 942 доступных, 1280
   * требовал 1347 при 1184, и на 1440 столько же, потому что .container заперт на
   * 1280. Кнопка «Регистрация» уезжала за правый край на каждом десктопном экране,
   * а документ получал горизонтальную прокрутку (03, блокирующее: doc.scrollWidth
   * 1395 при clientWidth 1280). Считать нечем было: бейдж промокода, пять пунктов
   * меню, четыре языка, тема и призыв - это 1347px содержимого.
   *
   * Две строки - собственная раскладка сайта с 768 (блок выше), она помещается с
   * запасом на любой ширине и даёт меню целый ряд: мегаменю раскрывается ровно под
   * ним, во всю ширину рабочей зоны. Ничего нового не придумано, отменён только
   * возврат к одной строке. */
  .promo-badge { display: inline-flex; }
  .promo-badge__k { white-space: nowrap; }
  .country-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .foot-strip { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; }
  .foot-strip__pay { grid-column: auto; }
  .promo-box__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================================ 1280 ================================ */
@media (min-width: 1280px) {
  .home-hero { padding-block: var(--s-10) var(--s-9); }
  /* Три в ряд - это span 2 по шести дорожкам; хвост из двух берёт по половине ряда,
   * хвост из одного - весь ряд (механизм описан у .plates). ЗАМЕР ДО (24.09.2026,
   * находка P2-3): пять кластеров главной ложились 3+2, и нижняя правая ячейка
   * оставалась пустой - 403px дыры на главной и на /ru/ при 1280. */
  .secgrids { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .secgrids > .secgrid { grid-column: span 2; }
  .secgrids > .secgrid:nth-child(2n+1):last-child { grid-column: span 2; }
  .secgrids > .secgrid:nth-child(3n+1):nth-last-child(2),
  .secgrids > .secgrid:nth-child(3n+1):nth-last-child(2) ~ .secgrid { grid-column: span 3; }
  .secgrids > .secgrid:nth-child(3n+1):last-child { grid-column: 1 / -1; }
  .secgrids > .secgrid:nth-child(2n+1):last-child .secgrid__cards { grid-template-columns: minmax(0, 1fr); }
  .secgrids > .secgrid:nth-child(3n+1):last-child .secgrid__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hub-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Тот же одинокий хвост, что у плашек: пять карточек хаба (/es/latam/) давали 4+1 и
   * 900px пустоты справа. Правило срабатывает только когда последняя карточка открывает
   * свой ряд, и потому не спорит с :has()-правилами ниже - те меняют ЧИСЛО колонок при
   * двух, трёх и четырёх карточках, а здесь речь о пятой и девятой. */
  .hub-grid > :nth-child(4n+1):last-child { grid-column: 1 / -1; }
  .hub-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hub-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hub-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   БЛОКИ ПОД СКЕЛЕТЫ ТИПОВ (23.09.2026, `_план/скелеты-типов.md`)
   media.php: gallery, screens_strip · steps.php: steps_howto ·
   podacha.php: answer_box, verdict_top, note, code_hero, compare_table, hub_quick

   Базовый слой - раскладка 360 (03, «360 - исток»); добавки только min-width
   480/768/1024/1280. Цвет, кегль, отступ, радиус и тень - роли скина, ни одного
   литерала (греп по assets/css/*.css вне tokens/skins пуст). Рамка-полоска толще
   волоса не ставится намеренно (impeccable, craft-floor: цветной border-left выше
   1px на карточках и врезках - костюм, а не система глубины); разницу между видами
   врезок несут ярлык, иконка и поверхность.
   ========================================================================== */

/* ---------------- лента снимков (gallery): рельса [data-gallery] ---------------- */
.gal { padding-bottom: var(--s-2); }
.gal:focus-visible, .sstrip:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.gal__item { width: min(86vw, 520px); }
.gal__item img, .sstrip__item img { border-radius: 0; } /* рамку и скругление даёт .screen */
/* Кадры в ряду разной высоты (мастера 892 и 950 точек), и подписи вставали на разной
 * высоте - ряд читался кривым. Подпись прижата к низу карточки: кадр не режется, а
 * строки подписей выравниваются по одной линии (замер 1280, 23.09.2026). */
.gal__item, .sstrip__item { display: flex; flex-direction: column; }
.gal__item figcaption, .sstrip__item figcaption { margin-top: auto; }

/* ---------------- полоса снимков (screens_strip): рельса до 768, ряд после ---------------- */
.sstrip { display: flex; gap: var(--s-3); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: var(--s-2); }
.sstrip > * { flex: 0 0 auto; width: min(78vw, 420px); scroll-snap-align: start; }

/* ---------------- шаги HowTo (steps_howto) ----------------
   Номер - настоящий текст из PHP, а не counter: второй <ol start="N"> счётчик
   обнулил бы, и печать разошлась бы с itemprop="position" и с атрибутом start. */
.howto { display: grid; gap: var(--s-4); }
.hsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.hsteps__item {
  display: flex; gap: var(--s-4); align-items: flex-start;
  padding: var(--s-4); background: var(--surface); border: var(--hairline);
  border-radius: var(--r-lg); box-shadow: var(--shadow-card); min-width: 0;
}
.hsteps__n {
  flex: 0 0 auto; width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background-image: var(--grad-brand); background-color: var(--brand); color: var(--on-brand);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--t-small);
}
.hsteps__body { min-width: 0; display: grid; gap: var(--s-1); }
.hsteps__t { font-weight: var(--fw-semi); color: var(--text); }
.hsteps__d { color: var(--text-dim); font-size: var(--t-small); line-height: var(--lh-base); }
.hsteps__d a { text-decoration: underline; text-underline-offset: 2px; }
.hsteps__shot { margin: 0; }

/* ---------------- врезка с ярлыком (note) ---------------- */
.note { display: grid; gap: var(--s-2); margin-block: var(--s-5); padding: var(--s-4) var(--s-5); background: var(--surface-2); border: 1px solid var(--rule-strong); border-radius: var(--r-lg); }
/* Внутри HowTo отбивку держит .howto { gap }, иначе врезка между шагами отъезжала вдвое. */
.howto > .note { margin-block: 0; }
.note__k { margin: 0; color: var(--text-mute); }
.note__body { color: var(--text-dim); }
.note__body > :first-child { margin-top: 0; }
.note__body > :last-child { margin-bottom: 0; }
.note--important { background: var(--danger-soft); border-color: var(--danger); }
.note--important .note__k { color: var(--danger); }
.note--example { background: var(--info-soft); border-color: var(--info); }
.note--example .note__k { color: var(--info); }
.note--editor { background: var(--surface); border-color: var(--gold); }
.note--editor .note__k { color: var(--gold-ink, var(--brand)); }

/* ---------------- короткий ответ статьи (answer_box) ----------------
   Метки «Кратко» нет намеренно (Т18): блок отличается от прозы кеглем, воздухом
   и золотой волосяной рамкой, а не словом-биркой поверх первой строки ответа. */
.answer {
  margin: 0 0 var(--s-6); padding: var(--s-5);
  background: var(--surface); border: 1px solid var(--gold); border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); color: var(--text);
}
.answer, .answer p, .answer li { font-size: var(--t-h3); line-height: var(--lh-base); }
.answer > :first-child { margin-top: 0; }
.answer > :last-child { margin-bottom: 0; }
.answer a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- вердикт обзора до разбора (verdict_top) ---------------- */
.vtop { display: grid; gap: var(--s-4); }
.vtop__cell { padding: var(--s-5); background: var(--surface); border: var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-card); min-width: 0; }
.vtop__k { margin: 0 0 var(--s-3); display: flex; align-items: center; gap: var(--s-2); }
.vtop__k .ico { width: 1.2em; height: 1.2em; flex: 0 0 auto; }
.vtop__cell--yes .vtop__k { color: var(--success); }
.vtop__cell--no .vtop__k { color: var(--danger); }
.vtop__cell--key { border-color: var(--gold); }
.vtop__cell--key .vtop__k { color: var(--gold-ink, var(--brand)); }
.vtop__cell p { margin: 0 0 var(--s-2); color: var(--text-dim); }
.vtop__cell p:last-child { margin-bottom: 0; }
.vtop__list { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s-2); color: var(--text-dim); }
/* Интерлиньяж 24.09.2026: --lh-snug (1.25) -> --lh-base (1.6), находка P2-8 критика.
 * Абзац ОФОРМЛЕН как выносная цитата - дисплейный шрифт, полужирный, золотая рамка, -
 * и интерлиньяж ему достался заголовочный. Но несёт он обычную прозу: замер на 360
 * дал восемь строк подряд при 16.8/21px на пяти страницах (review, ru_review,
 * es_review, id_review, cashback). 03 «Читаемость и воздух» держит для прозы 1.5-1.7,
 * для заголовков 1.3-1.4; восемь строк - проза, а не заголовок, и судить её надо по
 * прозаической строке. Свой литерал не заводится: 1.6 - готовая роль --lh-base. */
.vtop__cell--key p { font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--t-h4); line-height: var(--lh-base); color: var(--text); }

/* ---------------- промокод крупно (code_hero) ---------------- */
.code-hero__h1 { margin: 0 0 var(--s-3); }
.code-hero__lead { margin: 0 0 var(--s-5); color: var(--text-dim); font-size: var(--t-h4); }
.code-hero {
  display: grid; gap: var(--s-4); padding: var(--s-5); min-width: 0;
  background: var(--surface); border: 1px solid var(--gold); border-radius: var(--r-xl); box-shadow: var(--shadow-pop);
}
.code-hero__k { margin: 0; color: var(--gold-ink, var(--brand)); }
.code-hero__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.code-hero__val {
  flex: 1 1 auto; min-width: 0; text-align: center;
  font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: var(--t-h2); letter-spacing: .08em;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-md);
  background: var(--field, var(--surface-3)); color: var(--gold-ink, var(--brand)); border: 1px dashed var(--gold);
  overflow-wrap: anywhere;
}
.code-hero__facts { margin: 0; display: grid; gap: var(--s-2); }
.code-hero__facts > div { display: flex; justify-content: space-between; gap: var(--s-3); padding-bottom: var(--s-2); border-bottom: var(--hairline); font-size: var(--t-small); }
.code-hero__facts dt { color: var(--text-mute); }
.code-hero__facts dd { margin: 0; color: var(--text); font-weight: var(--fw-medium); text-align: right; overflow-wrap: anywhere; }
.code-hero__cta { margin: 0; }
.code-hero__note { margin: 0; color: var(--text-mute); font-size: var(--t-small); }

/* ---------------- таблица сравнения с колонкой мнения (compare_table) ---------------- */
.cmp th[scope="col"] { text-align: left; padding: var(--s-3) var(--s-4); color: var(--text-mute); font-size: var(--t-tiny); letter-spacing: .08em; text-transform: uppercase; font-weight: var(--fw-semi); border-bottom: 1px solid var(--rule-strong); }
.cmp th[scope="col"].view { color: var(--gold-ink, var(--brand)); }
.cmp td { padding: var(--s-3) var(--s-4); color: var(--text); border-top: 1px solid var(--rule); vertical-align: top; }
.cmp th[scope="row"] { vertical-align: top; white-space: normal; }
.cmp .view { background: var(--surface-2); }
.cmp td.view { color: var(--text-dim); font-size: var(--t-small); min-width: 180px; }

/* ---------------- быстрые ответы хаба (hub_quick) ---------------- */
.quick { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.quick__item { display: grid; gap: var(--s-2); padding: var(--s-5); background: var(--surface); border: var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-card); min-width: 0; align-content: start; }
.quick__q { margin: 0; font-family: var(--font-display); font-weight: var(--fw-semi); font-size: var(--t-h4); line-height: var(--lh-snug); color: var(--text); }
.quick__a { margin: 0; color: var(--text-dim); }
.quick__more { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--tap-min); margin-top: auto; color: var(--brand); font-weight: var(--fw-semi); font-size: var(--t-small); }
.quick__more .ico { width: 18px; height: 18px; }

/* ================================ 768 ================================ */
@media (min-width: 768px) {
  /* Код и кнопка встают в один ряд только с 768: на 480 кнопке «Скопировать код»
   * оставалось бы около 200px, и код сжимался бы до переноса посреди слова. */
  .code-hero__row { flex-wrap: nowrap; }
  .gal__item { width: min(44vw, 560px); }
  .sstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); overflow: visible; scroll-snap-type: none; padding-bottom: 0; }
  .sstrip > * { width: auto; }
  .vtop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vtop__cell--key { grid-column: 1 / -1; }
  .hsteps__item { padding: var(--s-5); }
  .code-hero { padding: var(--s-6); }
  .code-hero__val { font-size: var(--t-h1); }
  .note { padding: var(--s-5) var(--s-6); }
}

/* ================================ 1024 ================================ */
@media (min-width: 1024px) {
  .quick { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .answer { padding: var(--s-6); }
}