/* Шрифт берётся из сборки кабинета: тот же процесс, тот же путь. */
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/geologica-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Geologica';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/fonts/geologica-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  --brand: #4a3aa7;
  --brand-hover: #3e3090;
  --brand-press: #332877;
  --brand-wash: #eeebfa;
  --brand-ring: rgba(74, 58, 167, 0.35);

  --bg-page: #ffffff;
  /* Поверхность карточки. ОТДЕЛЬНЫМ ТОКЕНОМ, А НЕ #fff: вписанный
     руками белый переживёт тёмную тему и останется белым пятном
     на тёмном. Эту ошибку кабинет уже совершал. */
  --bg-surface: #ffffff;
  --bg-sunken: #f5f6f8;
  --line: #e3e6ec;
  --line-strong: #cdd3dd;

  --ink: #0e1116;
  --ink-2: #4a5160;
  --ink-3: #6b7280;
  --ink-on-brand: #ffffff;

  --good: #0ca30c;
  --good-ink: #006300;
  --good-wash: #e8f6ea;
  --warn-ink: #8a5a00;
  --warn-wash: #fdf3dc;
  --bad-ink: #c0281f;
  --bad-wash: #fbe9e9;

  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 999px;

  --shadow-1: 0 1px 2px rgba(14, 17, 22, 0.06);
  --shadow-3: 0 24px 48px -16px rgba(14, 17, 22, 0.18);

  /* ═══════════════════════════════════════════════════════════════════
     ОДНА КОЛОНКА НА ВЕСЬ САЙТ — И НА СТРАНИЦЫ, И НА СТАТЬИ.

     21.08.2026, владелец: «вот я открыл две разные страницы сайта…
     всё отображается иначе, разной ширины… Везде разная ширина,
     а должна быть такая же как на странице возможности и тарифы.
     Но зато блок тарифы отображается везде одинаково. А другие блоки
     в блоге резко уменьшились».

     БЫЛО ДВЕ: 680 у статьи («колонка для чтения, около 70 знаков»)
     и 920 у страницы. Довод про 70 знаков верен для сплошного текста
     и неверен для всего остального: сетка тарифов, плитки доводов
     и карточки в 680 не помещались — и выходили за колонку, ломая
     ту самую полосу, ради которой колонку и сужали. Читатель,
     переходя со страницы в блог, видел другой сайт.

     920 — ширина, которой стоит сетка тарифов на «Тарифах»: её
     владелец и назвал верной («тариф нужной ширины, а другие
     почему-то урезаны»). Теперь по ней равняется всё остальное,
     а не наоборот.

     ЭТО ШИРИНА СОДЕРЖИМОГО, А НЕ ПОЛОСЫ. Поле вынесено отдельным
     именем ниже, чтобы полосу можно было ПОСЧИТАТЬ
     («--col» + два поля), а не подбирать на глаз. Сходимость
     с полотном редактора считает «column.spec.ts».
     ═══════════════════════════════════════════════════════════════════ */
  --col: 920px;
  /* Поле по бокам полосы. На узком экране становится 16 — и вслед
     за ним сдвигается всё, что от него считается. */
  --gut: 24px;
  /* ДВЕ СТУПЕНИ СВЕРХ КОЛОНКИ — и обе только для картинки, которой
     автор НАРОЧНО выбрал «шире колонки» или «во всю ширину».
     Ступени обязаны отличаться и от колонки, и друг от друга:
     иначе выбор в редакторе есть, а на странице от него ничего
     не меняется — та же ложь, что стерегут «size-ladder.spec.ts». */
  --wide: 1120px;
  --full: calc(100vw - var(--gut) * 2);
}

/* ═════════════════════════════════════════════════════════════════════
   ТЁМНАЯ ТЕМА — ПО НАСТРОЙКЕ СИСТЕМЫ, БЕЗ ПЕРЕКЛЮЧАТЕЛЯ.

   В кабинете переключатель есть: там человек сидит часами и выбирает
   осознанно. На сайте он был бы кнопкой, которой нужен скрипт
   и хранилище, — ради страницы, которую открывают на две минуты.
   Настройка системы уже сказала, чего человек хочет; спрашивать
   второй раз незачем.

   ЗНАЧЕНИЯ ВЗЯТЫ ИЗ ТЁМНОЙ ТЕМЫ КАБИНЕТА, чтобы переход по кнопке
   «Войти» не менял цвет под руками.
   ═════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg-page: #0c0e12;
    --bg-surface: #171b21;
    --bg-sunken: #1c212a;
    --line: #272e39;
    --line-strong: #3a4453;

    --ink: #eef1f6;
    --ink-2: #aeb7c6;
    --ink-3: #848e9e;
    --ink-on-brand: #0c0e12;

    --brand: #9d93ee;
    --brand-hover: #b0a8f2;
    --brand-press: #c0baf6;
    --brand-wash: #221f38;
    --brand-ring: rgba(157, 147, 238, 0.45);

    --good: #4ade80;
    --good-ink: #4ade80;
    --good-wash: #10241a;
    --warn-ink: #fab219;
    --warn-wash: #2a2113;
    --bad-ink: #ff7a7a;
    --bad-wash: #2c1618;

    --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.045) inset;
    --shadow-3: 0 24px 48px -16px rgba(0, 0, 0, 0.7);
  }

}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Набор страницы (шрифт, кегль, межстрочный, насыщенность) переехал
   в оформление из эталона — правило body оттуда. Здесь его больше нет
   нарочно: два правила на одно и то же расходятся при первой правке,
   а побеждает то, у кого вес выше, — и это не всегда то, что верно. */

/* ── Шапка ─────────────────────────────────────────────────────────────
   ПО ЭТАЛОНУ: высота 64, липкая, снизу волосок. Человек, пришедший
   с сайта в кабинет, не должен заметить смены места.                   */
.s-head {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 64px;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg-page);
}
.s-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
/* Значок марки — тот же, что в кабинете: квадрат со скруглением
   и буквой. Рисуется буквой, а не картинкой: одним запросом меньше,
   и он не пропадёт при неудачной сборке. */
.s-logo::before {
  content: 'Б';
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--brand);
  color: var(--ink-on-brand);
  font-size: 13px;
  font-weight: 700;
}
.s-nav { margin-left: auto; }
.s-nav ul, .s-foot-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.s-nav > ul > li { position: relative; }
.s-nav a, .s-foot-nav a {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 16px;
  transition: color 120ms cubic-bezier(0.4, 0, 0.2, 1);
}
.s-nav a:hover, .s-foot-nav a:hover { color: var(--brand); }

/* Подпункты: раскрываются наведением и фокусом с клавиатуры. */
.s-nav li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  flex-direction: column;
  gap: 0;
  min-width: 200px;
  padding: 8px 0;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: 0 8px 24px rgba(14, 17, 22, 0.1);
}
.s-nav li:hover ul, .s-nav li:focus-within ul { display: flex; }
.s-nav li ul a { display: block; padding: 6px 16px; }

.s-enter { margin-left: 8px; height: 34px; padding: 0 16px; box-shadow: none; }

/* ═══════════════════════════════════════════════════════════════════
   КНОПКИ: РАЗМЕР И ФОРМА — ИЗ ЭТАЛОНА, ЦВЕТА — УМНОЖЕНИЕМ.

   Здесь стояли свои числа (44, 22, 16), набранные до того, как приехал
   эталон. Совпали бы они случайно, а разошлись бы молча.

   Теперь размер, поле, радиус и кегль берёт частица «кнопкаБлока» —
   она вырезана из кнопки, которую эталон рисует В СТАТЬЕ, то есть
   из той самой, которую владелец ставит блоком. Здесь остаётся только
   то, чего у эталона нет: рамка (у него кнопка без рамки, а контурной
   форме она нужна), переход и указатель.
   ═══════════════════════════════════════════════════════════════════ */
.s-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  background: var(--bg-surface);
  color: var(--ink);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms cubic-bezier(0.4, 0, 0.2, 1), border-color 120ms;
}
.s-cta-btn:hover { background: var(--bg-sunken); }
.s-cta-btn:focus-visible { outline: 3px solid var(--brand-ring); outline-offset: 2px; }
.s-btn-quiet { background: var(--bg-surface); border-color: var(--line-strong); color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════
   ЦВЕТ КНОПКИ — ИМЕНЕМ И ЧЕРЕЗ ПЕРЕМЕННУЮ, А НЕ ВПИСАННЫМ #RRGGBB.

   21.08.2026: «желательно чтобы была возможность выбрать цвет кнопки
   и стили». Соблазн — дать палитру и класть выбранное в разметку.
   Так нельзя: вписанный цвет не знает про тёмную тему и однажды
   окажется чёрным на чёрном, а сотню статей потом не перекрасить.

   Поэтому цвет — это ИМЯ («основной», «тёмная», «зелёная»), а само
   значение живёт здесь, по одному на тему. Форма (заливка, обычная,
   контур) и цвет умножаются друг на друга через --btn, поэтому пар
   классов пятнадцать, а правил — шесть.
   ═══════════════════════════════════════════════════════════════════ */
.s-cta-btn { --btn: var(--brand); --btn-ink: var(--ink-on-brand); }
.s-btn-dark { --btn: var(--ink); --btn-ink: var(--bg-surface); }
.s-btn-good { --btn: var(--good-ink); --btn-ink: var(--bg-surface); }
.s-btn-warn { --btn: var(--warn-ink); --btn-ink: var(--bg-surface); }
.s-btn-bad  { --btn: var(--bad-ink);  --btn-ink: var(--bg-surface); }

.s-btn-main {
  background: var(--btn);
  border-color: var(--btn);
  color: var(--btn-ink);
  box-shadow: var(--shadow-1);
}
/* У основного цвета есть отдельные оттенки наведения и нажатия — они
   выверены в эталоне; у остальных берётся осветление, потому что пару
   оттенков на каждый цвет пришлось бы держать в двух темах вручную */
.s-btn-main:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.s-btn-main:active { background: var(--brand-press); }
.s-btn-dark:hover, .s-btn-good:hover, .s-btn-warn:hover, .s-btn-bad:hover {
  background: var(--btn);
  border-color: var(--btn);
  filter: brightness(1.1);
}
.s-btn-outline { background: transparent; border-color: var(--btn); color: var(--btn); }
.s-btn-outline:hover { background: var(--bg-sunken); }

/* Крупная — там, где кнопка и есть весь экран: посадочная, конец статьи */
.s-btn-lg { height: 52px; padding: 0 30px; font-size: 18px; }

.s-cta { margin: 32px 0; }
.s-cta.s-al-center { text-align: center; }
.s-cta.s-al-right { text-align: right; }

/* ── Текст ─────────────────────────────────────────────────────────── */
/* ШИРИНА СОДЕРЖИМОГО — РОВНО «--col», а не ««--col» минус поля».
   При «box-sizing: border-box» поле съедает колонку, и блок выходит
   уже обещанного: полоса 920 давала 872 содержимого, а сетка тарифов
   рядом стояла на все 920 и торчала из неё на 24 с каждой стороны.
   Поле прибавлено к пределу — и торчать больше нечему. */
.s-main {
  max-width: calc(var(--col) + var(--gut) * 2);
  margin: 0 auto;
  padding: 24px var(--gut) 80px;
}
/* Ширины здесь нет НАРОЧНО: она одна на все виды страниц.
   Разное — только воздух сверху: у страницы нет строки с датой,
   и заголовок без него прилипает к шапке. */
.s-page .s-main { padding-top: 48px; }
.s-main h1 {
  font-size: 42px;
  line-height: 50px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 24px 0 16px;
}
/* ПЕРВЫЙ ЭКРАН ГЛАВНОЙ ПО ЭТАЛОНУ: 44/52, поджатый межбуквенный
   просвет, строка не длиннее 18 знаков — на нём человек за пять
   секунд решает, его это или нет. */
.s-page .s-main > h1:first-child {
  font-size: 44px;
  line-height: 52px;
  letter-spacing: -0.03em;
  max-width: 18ch;
  margin-top: 8px;
  text-wrap: pretty;
}
/* Первый абзац после такого заголовка — вводный, и он крупнее прочих */
.s-page .s-main > h1:first-child + p { font-size: 17px; line-height: 26px; color: var(--ink-2); max-width: 58ch; }
.s-main h2 {
  font-size: 30px;
  line-height: 38px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 48px 0 12px;
}
.s-main h3 {
  font-size: 22px;
  line-height: 30px;
  font-weight: 600;
  margin: 32px 0 8px;
}
/**
 * ЧЕТВЁРТЫЙ УРОВЕНЬ БЫЛ БЕЗ ПРАВИЛА ВОВСЕ.
 *
 * Браузер рисует его по умолчанию — примерно шестнадцатью пикселями,
 * то есть МЕЛЬЧЕ основного текста в восемнадцать. Заголовок, который
 * меньше того, что под ним, читается не как заголовок, а как ошибка
 * вёрстки. В редакторе он при этом предлагается третьим пунктом
 * списка, значит однажды был бы выбран.
 */
.s-main h4 {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  margin: 28px 0 6px;
}
/* ═════════════════════════════════════════════════════════════════════
   ОФОРМЛЕНИЕ ТЕКСТА КАСАЕТСЯ ТОЛЬКО ТОГО, ЧТО НАПИСАЛ АВТОР.

   Отсюда «:not([class])» в каждом правиле ниже, и это не украшение.
   Правило вида «.s-main a» весит больше, чем «.s-btn-main», — то есть
   цвет ссылки перекрашивает надпись на кнопке, а отступ абзаца
   переопределяет разметку карточки тарифа. ОБА СЛУЧАЯ СЛУЧИЛИСЬ,
   и оба поймались снимком экрана, а не тестом: разметка правильная,
   правила существуют, просто не те побеждают.

   У всего, что рисует служба, есть свой класс. У того, что написал
   автор, класса нет. Разделение по этому признаку убирает целый
   разряд поломок разом, вместо того чтобы латать каждую.
   ═════════════════════════════════════════════════════════════════════ */
.s-main p:not([class]) { margin: 0 0 20px; }
.s-main a:not([class]) { color: var(--brand); text-underline-offset: 3px; }
.s-main ul:not([class]), .s-main ol:not([class]) { margin: 0 0 20px; padding-left: 28px; }
.s-main ul:not([class]) > li, .s-main ol:not([class]) > li { margin-bottom: 8px; }
.s-main code {
  background: var(--bg-sunken);
  border-radius: var(--r-sm);
  padding: 2px 6px;
  font-size: 0.9em;
}
.s-byline { color: var(--ink-3); font-size: 15px; margin: -8px 0 32px; }
.s-lead { font-size: 21px; line-height: 32px; color: var(--ink-2); }

/* ── Картинки ──────────────────────────────────────────────────────── */
.s-img { margin: 32px 0; }
.s-img img {
  display: block;
  width: 100%;
  /* ВЫСОТА ВСЕГДА ИЗ ПРОПОРЦИЙ, ХОТЯ В РАЗМЕТКЕ ТЕПЕРЬ ЕСТЬ height.
     Атрибуты нужны браузеру, чтобы заранее занять место и не сдвигать
     текст; растянуть картинку до буквального числа пикселей они
     не должны. */
  height: auto;
  border-radius: var(--r-lg);
}
.s-img figcaption {
  margin-top: 8px;
  color: var(--ink-3);
  font-size: 15px;
  line-height: 22px;
  text-align: center;
}
.s-img-column { width: auto; }
/* Шире колонки — приём Medium: ширина предлагается, только если
   картинка физически такая. Растянутая мелкая картинка портит статью. */
.s-img-wide { width: var(--wide); max-width: var(--full); margin-left: 50%; transform: translateX(-50%); }
.s-img-full { width: var(--full); max-width: var(--full); margin-left: 50%; transform: translateX(-50%); }

/* ── Цитата и врезка ───────────────────────────────────────────────── */
.s-main blockquote {
  margin: 32px 0;
  padding-left: 24px;
  border-left: 3px solid var(--brand);
  font-size: 21px;
  line-height: 32px;
  color: var(--ink-2);
}
.s-main blockquote cite {
  display: block;
  margin-top: 8px;
  font-size: 15px;
  font-style: normal;
  color: var(--ink-3);
}
.s-callout {
  display: block;
  margin: 32px 0;
  padding: 20px 24px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--bg-sunken);
}
.s-callout b { display: block; margin-bottom: 4px; }
.s-callout-note { background: var(--bg-sunken); }
.s-callout-good { background: var(--good-wash); border-color: transparent; color: var(--good-ink); }
.s-callout-warn { background: var(--warn-wash); border-color: transparent; color: var(--warn-ink); }
.s-callout-bad { background: var(--bad-wash); border-color: transparent; color: var(--bad-ink); }

.s-main hr { border: 0; border-top: 1px solid var(--line); margin: 48px 0; }

/* ── Оглавление ────────────────────────────────────────────────────── */
/* Числа списаны с узла «оглавление» эталона статьи. Нумерации нет:
   эталон рисует столбик ссылок, вложенность — отступом.
   Обратные кавычки внутри этих правил ставить нельзя: они лежат
   в шаблонной строке и закрыли бы её. */
.s-toc {
  max-width: var(--read);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--bg-sunken);
  border: var(--hair) solid var(--line);
}
.s-toc a { color: var(--ink-2); text-decoration: none; }
.s-toc a:hover { color: var(--brand); }

/* ── Тарифы ────────────────────────────────────────────────────────── */
/**
 * Оформление абзаца: выравнивание, отступ, размер.
 *
 * ═══════════════════════════════════════════════════════════════════════
 * ОТСТУП ШАГАМИ, А НЕ ПИКСЕЛЯМИ, И НА ТЕЛЕФОНЕ ОН МЕНЬШЕ.
 *
 * Сорок пикселей на экране в 360 точек съедают восьмую часть ширины,
 * и текст с третьим отступом читается колонкой в два слова. Здесь шаг
 * задан переменной и на узком экране уменьшается вдвое — правкой
 * в одном месте, а не в сотне страниц.
 *
 * РАЗМЕР — ТОЛЬКО ТРИ СТУПЕНИ. Ползунок «от 12 до 48» даёт страницы,
 * где каждый абзац своего кегля; три ступени держат текст в рамках
 * набора, оставаясь тем, о чём просило ТЗ.
 */
:root { --s-indent: 32px; }

.s-al-center { text-align: center; }
.s-al-right  { text-align: right; }

.s-in-1 { margin-left: var(--s-indent); }
.s-in-2 { margin-left: calc(var(--s-indent) * 2); }
.s-in-3 { margin-left: calc(var(--s-indent) * 3); }

/* ЛЕСТНИЦА КЕГЛЕЙ. Числа обязаны совпадать с SIZE_PX в site/look.ts —
   там их видит автор в подписи, здесь их получает читатель. Сверяется
   расчётом в look.spec.ts: подпись, которая врёт, хуже отсутствующей. */
.s-sz-xs    { font-size: 13px; line-height: 20px; }
.s-sz-small { font-size: 15px; line-height: 24px; }
.s-sz-large { font-size: 21px; line-height: 32px; }
.s-sz-xl    { font-size: 25px; line-height: 36px; }
.s-sz-xxl   { font-size: 30px; line-height: 40px; }
.s-sz-xxxl  { font-size: 36px; line-height: 46px; letter-spacing: -0.01em; }

/* Список с отступом уже имеет свой — складываем, а не заменяем */
ul.s-in-1, ol.s-in-1 { padding-left: 20px; }

/**
 * Переключатель «Селлерам / Агентствам» над сеткой тарифов.
 *
 * ═══════════════════════════════════════════════════════════════════════
 * НИ ОДНОЙ СТРОКИ СКРИПТА: ДВА РАДИО И ПРАВИЛО «:checked ~».
 *
 * Сайт отдаётся готовым HTML нарочно, и вся его подвижность сделана
 * браузерными средствами. Обе сетки лежат в разметке сразу — поисковик
 * видит и те тарифы, и другие.
 *
 * САМИ ПЕРЕКЛЮЧАТЕЛИ СПРЯТАНЫ ПРОЗРАЧНОСТЬЮ, А НЕ «display: none».
 * Спрятанное вторым способом выпадает из обхода клавишей Tab, и полку
 * нельзя выбрать без мыши. Обводка при этом переносится на надпись —
 * иначе фокус виден только тому, кто знает, где он.
 */
.s-aud { display: block; }
.s-aud-r {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* ═══════════════════════════════════════════════════════════════════
   ЗДЕСЬ БЫЛИ СВОИ ЧИСЛА — И ОНИ ПЕРЕБИВАЛИ ЭТАЛОН.

   «.s-aud-tabs» задавал рамку, радиус 999 и поле 40 сверху; замер
   показывал разницу по девяти свойствам разом: у эталона рамки нет,
   радиус --r-md, поля нет вовсе. Правила снесены целиком —
   оформление полки приходит частицей «a-переключатель-полок»,
   вырезанной из эталона, а показ выбранного — правилом ниже,
   собранным tools/gen-site-css.mjs из эталонных объявлений.

   Осталось только то, чего в эталоне нет и быть не может: пустая
   полка. В эталоне полки всегда с тарифами, у нас — не всегда.
   ═══════════════════════════════════════════════════════════════════ */
.s-aud-empty { color: var(--ink-3); text-align: center; }

/* ═══════════════════════════════════════════════════════════════════
   РЯД СРОКОВ: ПРОБНЫЙ · МЕСЯЦ · 3 МЕСЯЦА · 6 МЕСЯЦЕВ · 1 ГОД.

   21.08.2026 владелец перечеркнул на снимке столбик из пяти цен
   и нарисовал над ним ряд кнопок. Столбик заставляет покупателя
   сравнивать пять чисел разной размерности; кнопка убирает сравнение
   вовсе — и позволяет наконец сравнить ТАРИФЫ между собой, потому
   что они встают рядом с одинаковым сроком.

   БЕЗ СКРИПТА, как и всё на сайте: спрятанные переключатели
   и правило «:checked ~». Все цены лежат в разметке сразу — поиск
   видит их все, а не только цену за месяц.

   ПРАВИЛ РОВНО СТОЛЬКО, СКОЛЬКО СРОКОВ ВМЕЩАЕТ РЯД (MAX_PERIODS
   в site/html.ts). Оформление — статический файл, число сроков ему
   заранее не известно, поэтому предел объявлен с обеих сторон
   и сверяется расчётом в site.css.spec.ts.
   ═══════════════════════════════════════════════════════════════════ */
.s-per { display: block; }
.s-per-r {
  /* Спрятан прозрачностью, а не «display: none»: спрятанный вторым
     способом выпадает из обхода клавишей Tab, и выбрать срок
     с клавиатуры становится нечем */
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* И здесь тоже: рамка, радиус 999, поля 24/32 и кегль 34 у цены —
   всё это было своё. Ушло туда же: ряд сроков одевает частица
   «a-ряд-сроков», цену — «a-число-цены», показ выбранного собирает
   tools/gen-site-css.mjs. Остались две строки, которых в эталоне
   нет: у него срок есть у каждого тарифа, у нас — не у каждого. */
.s-plan-none { color: var(--ink-3); font-size: var(--fs-body); }

/* ВЫХОДА ИЗ КОЛОНКИ ЗДЕСЬ БОЛЬШЕ НЕТ, И СЕТКА БОЛЬШЕ НЕ САМОДЕЛЬНАЯ.

   Ширину теперь решает ВИД СТРАНИЦЫ: у страницы полотном разделы
   стоят во всю полосу 1112, у обычной — в рамке чтения 920.
   Раскладку сетки задаёт частица «a-сетка-тарифов» из эталона:
   там колонки по числу карточек, а не auto-fit по 260. */
.s-plan-terms { list-style: none; margin: 0 0 20px; padding: 0; }
.s-plan-terms li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.s-plan-terms li:last-child { border-bottom: 0; }
.s-plan-terms b { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; margin-left: auto; }
.s-plan-term { color: var(--ink-3); font-size: 15px; }
.s-plan-intro {
  flex-basis: 100%;
  padding: 2px 10px;
  border-radius: var(--r-full);
  background: var(--good-wash);
  color: var(--good-ink);
  font-size: 14px;
  font-weight: 500;
}
/* ЗДЕСЬ БЫЛИ ПОТОЛКИ СТРОКОЙ И РАЗДЕЛЫ ГАЛОЧКОЙ ИЗ РАМОК.

   Потолки в эталоне — надпись и капсулы; разделы — список с двумя
   знаками, галкой и крестом, и невключённый раздел показан, а не
   спрятан. Галочка, собранная из двух рамок и поворота, была
   изобретением: у эталона это путь линией, тот же, что в других
   местах. Всё уехало в частицы, вырезанные из эталона. */

/* ── Плитки с числом (эталон, полоса «три довода») ─────────────────── */
.s-points {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 48px 0;
  padding: 40px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.s-point { display: flex; flex-direction: column; gap: 8px; }
.s-point-n {
  font-size: 30px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--brand);
}
.s-point-t { font-size: 18px; }
.s-point-p { font-size: 15px; line-height: 22px; color: var(--ink-2); text-wrap: pretty; }

/* ── Карточки (эталон, «чего сервис не делает») ────────────────────── */
.s-cards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 32px 0;
}
.s-card-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.s-card-t { font-size: 16px; }
.s-card-p { font-size: 15px; line-height: 22px; color: var(--ink-3); text-wrap: pretty; }

/* ── Вопросы и ответы ──────────────────────────────────────────────── */
.s-faq { margin: 32px 0; }
.s-qa {
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}
.s-qa summary {
  cursor: pointer;
  padding: 12px 32px 12px 0;
  font-weight: 500;
  list-style: none;
  position: relative;
}
/* Свою стрелку рисуем сами: браузерный треугольник выглядит по-разному
   в каждом браузере и не поворачивается плавно */
.s-qa summary::-webkit-details-marker { display: none; }
.s-qa summary::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform 120ms cubic-bezier(0.4, 0, 0.2, 1);
}
.s-qa[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.s-qa summary:hover { color: var(--brand); }
.s-qa-body { padding: 0 32px 16px 0; color: var(--ink-2); }

/* ═════════════════════════════════════════════════════════════════════
   РАЗДЕЛЫ И МЕТКИ — ОДНА И ТА ЖЕ ФИШКА, «s-chip».

   Выглядят одинаково нарочно: и то и другое — «нажми и увидишь другие
   статьи про это». Разными их сделали бы, если бы нажатие давало
   разное; оно даёт одно и то же.

   РАЗНИЦА В МЕСТЕ, А НЕ В ВИДЕ: разделы полосой НАД лентой (это
   оглавление, его читают до), метки ПОД статьёй (это «что ещё
   почитать», вопрос дочитавшего).
   ═════════════════════════════════════════════════════════════════ */
.s-chip {
  display: inline-block;
  padding: 6px 14px;
  margin: 0 8px 8px 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 15px;
  line-height: 20px;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}
.s-chip:hover { border-color: var(--brand); color: var(--brand); }

/* ТЕКУЩИЙ ПУНКТ — НЕ ССЫЛКА, И ВИДНО ЭТО БЕЗ НАВЕДЕНИЯ. Полоса,
   на которой не понять, где стоишь, — это полоса, которой не
   пользуются: проще нажать наугад и вернуться назад. */
.s-chip-here {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--bg);
  cursor: default;
}

.s-sections { margin: -8px 0 32px; }
.s-tags { margin: 48px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }

/* Раздел в подписи — не фишка, а обычная ссылка: подпись это одна
   строка мелким шрифтом, и кружок в ней выглядел бы кнопкой */
.s-section { color: var(--ink-3); text-decoration: none; border-bottom: 1px solid var(--line); }
.s-section:hover { color: var(--brand); border-bottom-color: var(--brand); }

/* ── Лента блога ───────────────────────────────────────────────────── */
.s-feed { margin: 0; padding: 0; }
.s-card { display: block; padding: 28px 0; border-bottom: 1px solid var(--line); }
.s-card:first-child { padding-top: 8px; }
.s-card > a { color: var(--ink); text-decoration: none; }
.s-card h2 { font-size: 26px; line-height: 34px; margin: 0 0 8px; }
.s-card > a:hover h2 { color: var(--brand); }
.s-card p { color: var(--ink-2); margin: 0 0 8px; font-size: 17px; line-height: 27px; }
/* ═════════════════════════════════════════════════════════════════════
   КАРТОЧКИ ЛЕНТЫ ОБРЕЗАЮТСЯ ДО ОДНОГО РОСТА, И ЭТО ЕДИНСТВЕННОЕ МЕСТО,
   ГДЕ НА САЙТЕ ЧТО-ТО ОБРЕЗАЕТСЯ.

   В статье обрезать нельзя: автор выбрал картинку целиком и подписал
   её. В ленте — наоборот: шесть карточек с картинками разных пропорций
   выстраиваются лесенкой, и глазу не за что зацепиться.

   Здесь же начинает работать точка фокуса из медиатеки: до появления
   обрезки она не влияла ни на что.
   ═════════════════════════════════════════════════════════════════ */
.s-feed-img {
  display: block;
  width: 100%;
  /* ═══════════════════════════════════════════════════════════════════
     height: auto ЗДЕСЬ ОБЯЗАТЕЛЕН, И ЭТО НЕ ОСТАТОК СТАРОГО ПРАВИЛА.

     В разметке у картинки есть атрибуты width и height — они нужны
     браузеру, чтобы заранее занять место. Но атрибут height задаёт
     высоту как представленческую подсказку, а aspect-ratio считает
     недостающую сторону только тогда, когда она auto. Без этой
     строки карточка вырастает в натуральную высоту картинки, обрезки
     не происходит вовсе, и лента снова идёт лесенкой.

     Поймано снимком экрана и замером: вычисленные стили при этом
     показывают и aspect-ratio: 16/9, и object-fit: cover —
     они применены и не работают.
     ═══════════════════════════════════════════════════════════════ */
  /* ═══════════════════════════════════════════════════════════════════
     ═══ ЭТО ПРАВИЛО ГОД НЕ ПРИМЕНЯЛОСЬ НИ К ЧЕМУ ═══

     Оно называлось «.s-card-img», а разметка с приходом частиц эталона
     стала печатать «s-feed-img». Имя разошлось, правило осталось
     висеть, и обложки в ленте рисовались в натуральную величину:
     ни обрезки, ни общего роста, ни точки фокуса — та самая лесенка,
     против которой оно и было написано.

     Пункт 10 круга 3 («обрезка по центру») выглядел сделанным: правило
     в файле лежало, слова про обрезку в нём стояли. Найдено поиском
     класса, а не глазами.
     ═══════════════════════════════════════════════════════════════════

     ВЫСОТА И ПРОПОРЦИЯ — У КОРОБКИ, А НЕ У КАРТИНКИ. Пропорцию задаёт
     частица эталона («a-картинка-статьи», «--ratio-card»), и вторая
     пропорция здесь спорила бы с ней. Картинка просто заполняет
     коробку целиком и обрезается по центру. */
  height: 100%;
  object-fit: cover;
  /* Точка по умолчанию — середина; сдвинутую подставляет разметка */
  object-position: 50% 50%;
  background: var(--bg-sunken);
  /* Скругление берётся у коробки: у главной карточки оно есть,
     у остальных нет — и картинка обязана повторять её, а не спорить */
  border-radius: inherit;
}
.s-card-date { color: var(--ink-3); font-size: 15px; }
.s-empty { color: var(--ink-3); }

/* Полоса черновика уехала в частицы: её числа теперь вырезаны
   из эталона, а не набраны здесь (см. «полосаЧерновика» в atoms.ts).
   Обратные кавычки здесь ставить нельзя — файл сам шаблонная строка. */

/* ── Подвал ────────────────────────────────────────────────────────── */
.s-foot {
  border-top: 1px solid var(--line);
  padding: 32px var(--gut) 48px;
}
/* Подвал равняется по той же колонке, что и текст над ним.
   Стоял «--wide», и после того как «--wide» стал ступенью картинок,
   подвал уехал бы на 1120 — а до того молча стоял на 920 против
   872 содержимого, то есть шире текста на 48. */
.s-foot-nav, .s-copy { max-width: var(--col); margin: 0 auto; }
.s-foot-nav a { font-size: 15px; }
.s-copy { color: var(--ink-3); font-size: 15px; margin-top: 16px; }

/* ── Узкий экран ───────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .s-head { flex-wrap: wrap; gap: 12px; padding: 16px; }
  .s-nav { margin-left: 0; order: 3; width: 100%; }
  .s-nav ul { gap: 16px; }
  .s-enter { margin-left: auto; }
  /* Поле меняется ОДНИМ ИМЕНЕМ — и полоса, и подвал, и предел
     картинок пересчитываются сами.
     Отступ списка на телефоне вдвое меньше: иначе текст читается
     колонкой в два слова. */
  :root { --gut: 16px; --s-indent: 16px; }
  .s-main { padding-top: 16px; padding-bottom: 56px; }
  .s-main h1 { font-size: 32px; line-height: 40px; }
  .s-page .s-main > h1:first-child { font-size: 34px; line-height: 42px; }
  .s-main h2 { font-size: 24px; line-height: 32px; margin-top: 36px; }
  .s-img-wide, .s-img-full {
    width: auto;
    max-width: none;
    margin-left: 0;
    transform: none;
  }
  .s-plans { margin: 32px 0; }
  /* Выпадающее меню наведением на телефоне не работает — показываем всё */
  .s-nav li ul { display: flex; position: static; border: 0; box-shadow: none; padding: 4px 0 4px 16px; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Сайт bidra.ru — правила из шапки эталона Bidra-Sait.dc.html. Переносить дословно. */

/* Шрифт — два своих файла, раскомментировано из эталона */
@font-face{font-family:'Geologica';src:url('/fonts/geologica-cyrillic-wght-normal.woff2') format('woff2-variations');font-weight:100 900;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Geologica';src:url('/fonts/geologica-latin-wght-normal.woff2') format('woff2-variations');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2030,U+2039-203A,U+2044,U+20BD,U+2212}
html,body{margin:0;padding:0}
/* Подложка стенда заменена на страницу: у продукта тело окна — сама страница */
body{background:var(--bg-page);color:var(--ink);font-family:var(--font);font-size:var(--fs-read);line-height:var(--lh-read);-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
[data-rk]{
--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-14:64px;--sp-16:80px;--sp-20:120px;
--r-xs:4px;--r-sm:6px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-full:999px;--hair:1px;
--font:'Geologica',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
--font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
--fs-display:30px;--lh-display:36px;--fs-h1:20px;--lh-h1:28px;--fs-h2:16px;--lh-h2:22px;
--fs-body:14px;--lh-body:20px;--fs-sm:13px;--lh-sm:18px;--fs-xs:11px;--lh-xs:14px;
--fs-d1:44px;--lh-d1:52px;--fs-d2:32px;--lh-d2:40px;--fs-s2:24px;--lh-s2:32px;--fs-s3:18px;--lh-s3:26px;
--fs-lead:18px;--lh-lead:28px;--fs-read:16px;--lh-read:26px;
--band:1160px;--band-narrow:920px;--bleed:140px;--band-pad:24px;
--fs-d0:56px;--lh-d0:62px;--fs-num:34px;--lh-num:40px;--fs-price:44px;--lh-price:48px;
--dark:#0f1218;--dark-2:#181d26;--dark-3:#212834;--dark-line:#2c3441;--dark-line-2:#3b4553;
--on-dark:#f4f6fa;--on-dark-2:#aab3c2;--on-dark-3:#7d8797;--dark-glow:rgba(74,58,167,.55);
--hero-pad:72px;--card-pad:28px;--shot-h:420px;--mark-h:26px;--grid-cell:34px;--rail:3px;
--chip-h-md:30px;--ico:40px;--ico-sm:34px;--quote-w:44px;--seal:56px;--tick:18px;--band-tight:1040px;--hair-3:3px;--fs-quote:52px;--sec-gap:var(--sp-16);--blk-gap:var(--sp-6);
--tracking-caps:.06em;--t-fast:120ms;--t-slow:180ms;--ease:cubic-bezier(.4,0,.2,1);
--ctl-h-xs:28px;--ctl-h-sm:34px;--ctl-h-md:44px;--ctl-h-lg:52px;--touch:44px;--step-n:32px;--box:18px;--plan-one:440px;--hdr-h:72px;--hdr-h-sm:60px;
--logo:30px;--logo-sm:28px;--logo-xs:26px;--chip-h:22px;--tag-h:20px;--dot:6px;--dot-top:10px;
--hair-2:2px;--pad-hair:3px;--step-btn:36px;--ring-w:2px;--ring-gap:3px;--stripe:10px;--price-h:64px;
--read:720px;--sub-w:260px;--foot-brand:280px;--foot-col:140px;--panel-min:320px;--note-w:400px;
--band-phone:358px;--menu-demo:200px;--ratio-wide:16/9;--ratio-card:16/10;
--track-tight:-.01em;--track-tighter:-.02em;
--viz-box:46px;--viz-gap:3px;--viz-bar:5px;--viz-cell:7px;
--viz-h1:11px;--viz-h2:18px;--viz-h3:26px;--viz-h4:34px;
--viz-w1:18px;--viz-w2:26px;--viz-w3:32px;--viz-w4:40px;
--fs-stat:64px;--lh-stat:66px;--ico-in:20px;--ico-in-sm:17px;--ico-box:44px;--ico-box-sm:36px;--rule-w:40px;--num-ghost:52px;
color-scheme:light;
--bg-page:#f5f6f8;--bg-surface:#fff;--bg-sunken:#eef0f4;--bg-hover:#f2f4f7;--bg-active:#e8ebf1;
--line:#e3e6ec;--line-strong:#cdd3dd;
--ink:#0e1116;--ink-2:#4a5160;--ink-3:#6b7280;--ink-on-brand:#fff;
--brand:#4a3aa7;--brand-hover:#3e3090;--brand-press:#332877;--brand-wash:#eeebfa;--brand-ring:rgba(74,58,167,.35);--brand-line:#d8d2f3;
--visited:#6b4fa0;
--good:#0ca30c;--warn:#fab219;--serious:#ec835a;--bad:#d03b3b;
--good-ink:#006300;--warn-ink:#8a5a00;--serious-ink:#b4531f;--bad-ink:#c0281f;
--good-wash:#e8f6ea;--warn-wash:#fdf3dc;--serious-wash:#fceee6;--bad-wash:#fbeceb;
--shadow-1:0 1px 2px rgba(14,17,22,.06),0 1px 1px rgba(14,17,22,.04);
--shadow-2:0 4px 12px -2px rgba(14,17,22,.10),0 2px 4px -2px rgba(14,17,22,.06);
--shadow-3:0 16px 40px -12px rgba(14,17,22,.22),0 4px 12px -4px rgba(14,17,22,.10);
--scrim:rgba(14,17,22,.42);
--seq-100:#cde2fb;--seq-200:#9ec5f4;--seq-300:#6da7ec;--seq-400:#3987e5;--seq-500:#256abf;--seq-600:#184f95;--seq-700:#0d366b;
--grid:#e8eaef;--axis:#cdd3dd;
}
[data-rk][data-theme=dark]{
color-scheme:dark;
--dark:#12161e;--dark-2:#1a1f29;--dark-3:#232a36;--dark-line:#2c3441;--dark-line-2:#3b4553;
--on-dark:#f4f6fa;--on-dark-2:#aab3c2;--on-dark-3:#7d8797;--dark-glow:rgba(157,147,238,.45);
--bg-page:#0c0e12;--bg-surface:#171b21;--bg-sunken:#1c212a;--bg-hover:#222834;--bg-active:#2a323f;
--line:#272e39;--line-strong:#3a4453;
--ink:#eef1f6;--ink-2:#aeb7c6;--ink-3:#848e9e;--ink-on-brand:#0c0e12;
--brand:#9d93ee;--brand-hover:#b0a8f2;--brand-press:#c0baf6;--brand-wash:#221f38;--brand-ring:rgba(157,147,238,.45);--brand-line:#332e53;
--visited:#b9a7ea;
--good:#0ca30c;--warn:#fab219;--serious:#ec835a;--bad:#e66767;
--good-ink:#4ade80;--warn-ink:#fab219;--serious-ink:#f0996b;--bad-ink:#ff7a7a;
--good-wash:#10241a;--warn-wash:#2a2113;--serious-wash:#2b1d16;--bad-wash:#2c1618;
--shadow-1:0 1px 0 rgba(255,255,255,.045) inset;
--shadow-2:0 1px 0 rgba(255,255,255,.045) inset,0 4px 16px -4px rgba(0,0,0,.55);
--shadow-3:0 1px 0 rgba(255,255,255,.06) inset,0 24px 48px -16px rgba(0,0,0,.7);
--scrim:rgba(6,8,11,.66);
--seq-100:#0d366b;--seq-200:#184f95;--seq-300:#256abf;--seq-400:#3987e5;--seq-500:#6da7ec;--seq-600:#9ec5f4;--seq-700:#cde2fb;
--grid:#232a34;--axis:#3a4453;
}
/* На сайте тему выбирает система: переключателя нет и быть не должно */
@media (prefers-color-scheme: dark){[data-rk]:not([data-theme=light]){
color-scheme:dark;
--dark:#12161e;--dark-2:#1a1f29;--dark-3:#232a36;--dark-line:#2c3441;--dark-line-2:#3b4553;
--on-dark:#f4f6fa;--on-dark-2:#aab3c2;--on-dark-3:#7d8797;--dark-glow:rgba(157,147,238,.45);
--bg-page:#0c0e12;--bg-surface:#171b21;--bg-sunken:#1c212a;--bg-hover:#222834;--bg-active:#2a323f;
--line:#272e39;--line-strong:#3a4453;
--ink:#eef1f6;--ink-2:#aeb7c6;--ink-3:#848e9e;--ink-on-brand:#0c0e12;
--brand:#9d93ee;--brand-hover:#b0a8f2;--brand-press:#c0baf6;--brand-wash:#221f38;--brand-ring:rgba(157,147,238,.45);--brand-line:#332e53;
--visited:#b9a7ea;
--good:#0ca30c;--warn:#fab219;--serious:#ec835a;--bad:#e66767;
--good-ink:#4ade80;--warn-ink:#fab219;--serious-ink:#f0996b;--bad-ink:#ff7a7a;
--good-wash:#10241a;--warn-wash:#2a2113;--serious-wash:#2b1d16;--bad-wash:#2c1618;
--shadow-1:0 1px 0 rgba(255,255,255,.045) inset;
--shadow-2:0 1px 0 rgba(255,255,255,.045) inset,0 4px 16px -4px rgba(0,0,0,.55);
--shadow-3:0 1px 0 rgba(255,255,255,.06) inset,0 24px 48px -16px rgba(0,0,0,.7);
--scrim:rgba(6,8,11,.66);
--seq-100:#0d366b;--seq-200:#184f95;--seq-300:#256abf;--seq-400:#3987e5;--seq-500:#6da7ec;--seq-600:#9ec5f4;--seq-700:#cde2fb;
--grid:#232a34;--axis:#3a4453;
}}@media (max-width: 1439px){
/* Телефон 390: тот же набор переменных, другие значения. Ни одного числа мимо токена. */
[data-rk]{--bleed:60px;--fs-d0:48px;--lh-d0:54px;--hero-pad:56px;--shot-h:360px;}}@media (max-width: 767px){
[data-rk]{
--bleed:0px;--fs-d0:32px;--lh-d0:38px;--hero-pad:32px;--card-pad:20px;--shot-h:220px;--fs-num:26px;--lh-num:32px;--fs-price:34px;--lh-price:38px;--grid-cell:26px;
--fs-d1:30px;--lh-d1:38px;--fs-d2:24px;--lh-d2:32px;--fs-s2:20px;--lh-s2:28px;--fs-s3:17px;--lh-s3:24px;
--fs-lead:16px;--lh-lead:24px;--fs-read:15px;--lh-read:24px;
--band-pad:16px;--sec-gap:var(--sp-12);--blk-gap:var(--sp-5);--read:100%;
}}
[data-rk] button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease)}
[data-rk] input{font:inherit}
[data-rk] :focus-visible{outline:var(--ring-w) solid var(--brand);outline-offset:2px;border-radius:var(--r-xs)}
[data-rk] p,[data-rk] h1,[data-rk] h2,[data-rk] h3,[data-rk] h4,[data-rk] ul,[data-rk] ol,[data-rk] figure,[data-rk] blockquote{margin:0}
[data-rk] a{color:var(--brand);text-decoration:underline;text-decoration-color:color-mix(in oklab,var(--brand) 35%,transparent);text-underline-offset:2px;transition:color var(--t-fast) var(--ease)}
/* Состояния ссылки НЕ ПЕРЕБИВАЮТ ЧАСТИЦУ: \`:where()\` обнуляет вес
   скобок, и правило весит (0,1,1) — ровно столько же, сколько
   базовое \`[data-rk] a\`, и меньше любой частицы (0,2,0).
   Почему это важно — в пояснении к преобразованию в сборщике. */
:where([data-rk]) a:where(:not(.s-btn)):hover{color:var(--brand-hover);text-decoration-color:currentColor}
:where([data-rk]) a:where(:not(.s-btn)):visited{color:var(--visited)}
:where([data-rk]) a:where(:not(.s-btn)):active{color:var(--brand-press)}
/* ── Разрешённый приём 1: вкладки спрятанным радио ─────────────────── */
[data-rk] .s-r{position:absolute;width:var(--hair);height:var(--hair);opacity:0;margin:0;pointer-events:none}
[data-rk] .s-shelves>[data-shelf],[data-rk] .s-prices>[data-term],[data-rk] .s-note>[data-term]{display:none}
[data-rk] #shelf-s:checked~.s-shelves>[data-shelf=s],[data-rk] #shelf-a:checked~.s-shelves>[data-shelf=a]{display:flex}
[data-rk] #tm-s1:checked~.s-plans [data-term=s1],[data-rk] #tm-s2:checked~.s-plans [data-term=s2],[data-rk] #tm-s3:checked~.s-plans [data-term=s3],[data-rk] #tm-s4:checked~.s-plans [data-term=s4],[data-rk] #tm-s5:checked~.s-plans [data-term=s5],[data-rk] #tm-a1:checked~.s-plans [data-term=a1],[data-rk] #tm-a2:checked~.s-plans [data-term=a2],[data-rk] #tm-a3:checked~.s-plans [data-term=a3],[data-rk] #tm-a4:checked~.s-plans [data-term=a4],[data-rk] #tm-a5:checked~.s-plans [data-term=a5],[data-rk] #tm-a6:checked~.s-plans [data-term=a6],[data-rk] #tm-a7:checked~.s-plans [data-term=a7],[data-rk] #tm-a8:checked~.s-plans [data-term=a8]{display:flex}
[data-rk] .s-tab{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;white-space:nowrap;color:var(--ink-2);transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
[data-rk] .s-tab:hover{background:var(--bg-hover);color:var(--ink)}
[data-rk] #shelf-s:checked~.s-shelfbar label[for=shelf-s],[data-rk] #shelf-a:checked~.s-shelfbar label[for=shelf-a]{background:var(--bg-surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow-1)}
[data-rk] #tm-s1:checked~.s-terms label[for=tm-s1],[data-rk] #tm-s2:checked~.s-terms label[for=tm-s2],[data-rk] #tm-s3:checked~.s-terms label[for=tm-s3],[data-rk] #tm-s4:checked~.s-terms label[for=tm-s4],[data-rk] #tm-s5:checked~.s-terms label[for=tm-s5],[data-rk] #tm-a1:checked~.s-terms label[for=tm-a1],[data-rk] #tm-a2:checked~.s-terms label[for=tm-a2],[data-rk] #tm-a3:checked~.s-terms label[for=tm-a3],[data-rk] #tm-a4:checked~.s-terms label[for=tm-a4],[data-rk] #tm-a5:checked~.s-terms label[for=tm-a5],[data-rk] #tm-a6:checked~.s-terms label[for=tm-a6],[data-rk] #tm-a7:checked~.s-terms label[for=tm-a7],[data-rk] #tm-a8:checked~.s-terms label[for=tm-a8]{background:var(--ink);color:var(--bg-surface);border-color:var(--ink);font-weight:600}
[data-rk] .s-r:focus-visible+label{outline:var(--ring-w) solid var(--brand);outline-offset:2px}
/* ── Ступени тарифа (кабинеты × кампании): те же спрятанные радио, но внутри карточки.
   Радио идут первыми детьми .s-plan: сначала кабинеты (.cb1…), потом кампании (.cp1…).
   Показывается одна клетка сетки цен на выбранное сочетание — до 6 кабинетов × 12 кампаний. ── */
[data-rk] .s-prices [data-cb]{display:none}
[data-rk] .s-prices [data-cb="0"]{display:flex}
[data-rk] .s-price{font-size:var(--fs-price);line-height:var(--lh-price);font-weight:600;letter-spacing:var(--track-tighter);color:var(--ink);font-variant-numeric:tabular-nums}
[data-rk] .s-price-big{font-size:var(--fs-d2);line-height:var(--lh-d2)}
[data-rk] .s-per{font-size:var(--fs-body);color:var(--ink-3)}
[data-rk] .s-disc{display:inline-flex;align-items:center;width:max-content;max-width:100%;border-radius:var(--r-full);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-3)}
[data-rk] .s-disc-warm{height:var(--chip-h-md);padding:0 var(--sp-3);background:var(--brand-wash);color:var(--brand)}
[data-rk] .s-plan-dark .s-price{color:var(--on-dark)}
[data-rk] .s-plan-dark .s-per{color:var(--on-dark-2)}
[data-rk] .s-plan-dark .s-disc{color:var(--on-dark-3)}
[data-rk] .s-plan-dark .s-disc-warm{background:var(--dark-3);color:var(--on-dark)}
[data-rk] .s-plan>.cb1:checked~.cp1:checked~.s-prices [data-cb="1"][data-cp="1"],
[data-rk] .s-plan>.cb1:checked~.cp2:checked~.s-prices [data-cb="1"][data-cp="2"],
[data-rk] .s-plan>.cb1:checked~.cp3:checked~.s-prices [data-cb="1"][data-cp="3"],
[data-rk] .s-plan>.cb1:checked~.cp4:checked~.s-prices [data-cb="1"][data-cp="4"],
[data-rk] .s-plan>.cb1:checked~.cp5:checked~.s-prices [data-cb="1"][data-cp="5"],
[data-rk] .s-plan>.cb1:checked~.cp6:checked~.s-prices [data-cb="1"][data-cp="6"],
[data-rk] .s-plan>.cb1:checked~.cp7:checked~.s-prices [data-cb="1"][data-cp="7"],
[data-rk] .s-plan>.cb1:checked~.cp8:checked~.s-prices [data-cb="1"][data-cp="8"],
[data-rk] .s-plan>.cb1:checked~.cp9:checked~.s-prices [data-cb="1"][data-cp="9"],
[data-rk] .s-plan>.cb1:checked~.cp10:checked~.s-prices [data-cb="1"][data-cp="10"],
[data-rk] .s-plan>.cb1:checked~.cp11:checked~.s-prices [data-cb="1"][data-cp="11"],
[data-rk] .s-plan>.cb1:checked~.cp12:checked~.s-prices [data-cb="1"][data-cp="12"],
[data-rk] .s-plan>.cb2:checked~.cp1:checked~.s-prices [data-cb="2"][data-cp="1"],
[data-rk] .s-plan>.cb2:checked~.cp2:checked~.s-prices [data-cb="2"][data-cp="2"],
[data-rk] .s-plan>.cb2:checked~.cp3:checked~.s-prices [data-cb="2"][data-cp="3"],
[data-rk] .s-plan>.cb2:checked~.cp4:checked~.s-prices [data-cb="2"][data-cp="4"],
[data-rk] .s-plan>.cb2:checked~.cp5:checked~.s-prices [data-cb="2"][data-cp="5"],
[data-rk] .s-plan>.cb2:checked~.cp6:checked~.s-prices [data-cb="2"][data-cp="6"],
[data-rk] .s-plan>.cb2:checked~.cp7:checked~.s-prices [data-cb="2"][data-cp="7"],
[data-rk] .s-plan>.cb2:checked~.cp8:checked~.s-prices [data-cb="2"][data-cp="8"],
[data-rk] .s-plan>.cb2:checked~.cp9:checked~.s-prices [data-cb="2"][data-cp="9"],
[data-rk] .s-plan>.cb2:checked~.cp10:checked~.s-prices [data-cb="2"][data-cp="10"],
[data-rk] .s-plan>.cb2:checked~.cp11:checked~.s-prices [data-cb="2"][data-cp="11"],
[data-rk] .s-plan>.cb2:checked~.cp12:checked~.s-prices [data-cb="2"][data-cp="12"],
[data-rk] .s-plan>.cb3:checked~.cp1:checked~.s-prices [data-cb="3"][data-cp="1"],
[data-rk] .s-plan>.cb3:checked~.cp2:checked~.s-prices [data-cb="3"][data-cp="2"],
[data-rk] .s-plan>.cb3:checked~.cp3:checked~.s-prices [data-cb="3"][data-cp="3"],
[data-rk] .s-plan>.cb3:checked~.cp4:checked~.s-prices [data-cb="3"][data-cp="4"],
[data-rk] .s-plan>.cb3:checked~.cp5:checked~.s-prices [data-cb="3"][data-cp="5"],
[data-rk] .s-plan>.cb3:checked~.cp6:checked~.s-prices [data-cb="3"][data-cp="6"],
[data-rk] .s-plan>.cb3:checked~.cp7:checked~.s-prices [data-cb="3"][data-cp="7"],
[data-rk] .s-plan>.cb3:checked~.cp8:checked~.s-prices [data-cb="3"][data-cp="8"],
[data-rk] .s-plan>.cb3:checked~.cp9:checked~.s-prices [data-cb="3"][data-cp="9"],
[data-rk] .s-plan>.cb3:checked~.cp10:checked~.s-prices [data-cb="3"][data-cp="10"],
[data-rk] .s-plan>.cb3:checked~.cp11:checked~.s-prices [data-cb="3"][data-cp="11"],
[data-rk] .s-plan>.cb3:checked~.cp12:checked~.s-prices [data-cb="3"][data-cp="12"],
[data-rk] .s-plan>.cb4:checked~.cp1:checked~.s-prices [data-cb="4"][data-cp="1"],
[data-rk] .s-plan>.cb4:checked~.cp2:checked~.s-prices [data-cb="4"][data-cp="2"],
[data-rk] .s-plan>.cb4:checked~.cp3:checked~.s-prices [data-cb="4"][data-cp="3"],
[data-rk] .s-plan>.cb4:checked~.cp4:checked~.s-prices [data-cb="4"][data-cp="4"],
[data-rk] .s-plan>.cb4:checked~.cp5:checked~.s-prices [data-cb="4"][data-cp="5"],
[data-rk] .s-plan>.cb4:checked~.cp6:checked~.s-prices [data-cb="4"][data-cp="6"],
[data-rk] .s-plan>.cb4:checked~.cp7:checked~.s-prices [data-cb="4"][data-cp="7"],
[data-rk] .s-plan>.cb4:checked~.cp8:checked~.s-prices [data-cb="4"][data-cp="8"],
[data-rk] .s-plan>.cb4:checked~.cp9:checked~.s-prices [data-cb="4"][data-cp="9"],
[data-rk] .s-plan>.cb4:checked~.cp10:checked~.s-prices [data-cb="4"][data-cp="10"],
[data-rk] .s-plan>.cb4:checked~.cp11:checked~.s-prices [data-cb="4"][data-cp="11"],
[data-rk] .s-plan>.cb4:checked~.cp12:checked~.s-prices [data-cb="4"][data-cp="12"],
[data-rk] .s-plan>.cb5:checked~.cp1:checked~.s-prices [data-cb="5"][data-cp="1"],
[data-rk] .s-plan>.cb5:checked~.cp2:checked~.s-prices [data-cb="5"][data-cp="2"],
[data-rk] .s-plan>.cb5:checked~.cp3:checked~.s-prices [data-cb="5"][data-cp="3"],
[data-rk] .s-plan>.cb5:checked~.cp4:checked~.s-prices [data-cb="5"][data-cp="4"],
[data-rk] .s-plan>.cb5:checked~.cp5:checked~.s-prices [data-cb="5"][data-cp="5"],
[data-rk] .s-plan>.cb5:checked~.cp6:checked~.s-prices [data-cb="5"][data-cp="6"],
[data-rk] .s-plan>.cb5:checked~.cp7:checked~.s-prices [data-cb="5"][data-cp="7"],
[data-rk] .s-plan>.cb5:checked~.cp8:checked~.s-prices [data-cb="5"][data-cp="8"],
[data-rk] .s-plan>.cb5:checked~.cp9:checked~.s-prices [data-cb="5"][data-cp="9"],
[data-rk] .s-plan>.cb5:checked~.cp10:checked~.s-prices [data-cb="5"][data-cp="10"],
[data-rk] .s-plan>.cb5:checked~.cp11:checked~.s-prices [data-cb="5"][data-cp="11"],
[data-rk] .s-plan>.cb5:checked~.cp12:checked~.s-prices [data-cb="5"][data-cp="12"],
[data-rk] .s-plan>.cb6:checked~.cp1:checked~.s-prices [data-cb="6"][data-cp="1"],
[data-rk] .s-plan>.cb6:checked~.cp2:checked~.s-prices [data-cb="6"][data-cp="2"],
[data-rk] .s-plan>.cb6:checked~.cp3:checked~.s-prices [data-cb="6"][data-cp="3"],
[data-rk] .s-plan>.cb6:checked~.cp4:checked~.s-prices [data-cb="6"][data-cp="4"],
[data-rk] .s-plan>.cb6:checked~.cp5:checked~.s-prices [data-cb="6"][data-cp="5"],
[data-rk] .s-plan>.cb6:checked~.cp6:checked~.s-prices [data-cb="6"][data-cp="6"],
[data-rk] .s-plan>.cb6:checked~.cp7:checked~.s-prices [data-cb="6"][data-cp="7"],
[data-rk] .s-plan>.cb6:checked~.cp8:checked~.s-prices [data-cb="6"][data-cp="8"],
[data-rk] .s-plan>.cb6:checked~.cp9:checked~.s-prices [data-cb="6"][data-cp="9"],
[data-rk] .s-plan>.cb6:checked~.cp10:checked~.s-prices [data-cb="6"][data-cp="10"],
[data-rk] .s-plan>.cb6:checked~.cp11:checked~.s-prices [data-cb="6"][data-cp="11"],
[data-rk] .s-plan>.cb6:checked~.cp12:checked~.s-prices [data-cb="6"][data-cp="12"]{display:flex}
/* Счётчик ступеней на спрятанных радио: по строке на ступень, видна одна —
   выбранная. «−» и «+» — ярлыки соседних радио; на краях лестницы ярлык ведёт
   на своё же радио и гаснет. Так выбор растёт до любого числа ступеней. */
[data-rk] .s-stepper>.s-step{display:none}
[data-rk] .s-stepper label:hover{background:var(--bg-hover)}
[data-rk] .s-stepper>.s-step:first-child>.s-dec,[data-rk] .s-stepper>.s-step:last-child>.s-inc{opacity:.35;cursor:default;pointer-events:none}
[data-rk] .s-plan-dark .s-stepper label:hover{background:var(--dark-line)}
[data-rk] .s-plan>.cb1:checked~.s-conf .s-stepper-cb>.s-step:nth-child(1),
[data-rk] .s-plan>.cp1:checked~.s-conf .s-stepper-cp>.s-step:nth-child(1),
[data-rk] .s-plan>.cb2:checked~.s-conf .s-stepper-cb>.s-step:nth-child(2),
[data-rk] .s-plan>.cp2:checked~.s-conf .s-stepper-cp>.s-step:nth-child(2),
[data-rk] .s-plan>.cb3:checked~.s-conf .s-stepper-cb>.s-step:nth-child(3),
[data-rk] .s-plan>.cp3:checked~.s-conf .s-stepper-cp>.s-step:nth-child(3),
[data-rk] .s-plan>.cb4:checked~.s-conf .s-stepper-cb>.s-step:nth-child(4),
[data-rk] .s-plan>.cp4:checked~.s-conf .s-stepper-cp>.s-step:nth-child(4),
[data-rk] .s-plan>.cb5:checked~.s-conf .s-stepper-cb>.s-step:nth-child(5),
[data-rk] .s-plan>.cp5:checked~.s-conf .s-stepper-cp>.s-step:nth-child(5),
[data-rk] .s-plan>.cb6:checked~.s-conf .s-stepper-cb>.s-step:nth-child(6),
[data-rk] .s-plan>.cp6:checked~.s-conf .s-stepper-cp>.s-step:nth-child(6),
[data-rk] .s-plan>.cp7:checked~.s-conf .s-stepper-cp>.s-step:nth-child(7),
[data-rk] .s-plan>.cp8:checked~.s-conf .s-stepper-cp>.s-step:nth-child(8),
[data-rk] .s-plan>.cp9:checked~.s-conf .s-stepper-cp>.s-step:nth-child(9),
[data-rk] .s-plan>.cp10:checked~.s-conf .s-stepper-cp>.s-step:nth-child(10),
[data-rk] .s-plan>.cp11:checked~.s-conf .s-stepper-cp>.s-step:nth-child(11),
[data-rk] .s-plan>.cp12:checked~.s-conf .s-stepper-cp>.s-step:nth-child(12){display:flex}

/* ── Разрешённый приём 2: раскрытие тегом details ──────────────────── */
[data-rk] summary{list-style:none;cursor:pointer}
[data-rk] summary::-webkit-details-marker{display:none}
[data-rk] summary::marker{content:''}
[data-rk] details[open] .s-chev{transform:rotate(180deg)}
[data-rk] .s-chev{transition:transform var(--t-fast) var(--ease)}
[data-rk] details[open] summary .s-plus{opacity:0}
/* ── Вложенное меню: наведение и фокус с клавиатуры, без скрипта ───── */
[data-rk] .s-sub{display:none}
[data-rk] .s-navitem:hover>.s-sub,[data-rk] .s-navitem:focus-within>.s-sub{display:block}
[data-rk] .s-navitem:hover>a,[data-rk] .s-navitem:focus-within>a{color:var(--ink)}
[data-rk] .s-open>.s-sub{display:block}
[data-rk] .s-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);text-decoration:none;white-space:nowrap;transition:background-color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
[data-rk] .s-card-lift{transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
[data-rk] .s-card-lift:hover{border-color:var(--line-strong);box-shadow:var(--shadow-2);transform:translateY(-1px)}
[data-rk] .s-bleed{margin-left:calc(-1 * (var(--bleed) + var(--band-pad)));margin-right:calc(-1 * (var(--bleed) + var(--band-pad)));padding-left:calc(var(--bleed) + var(--band-pad));padding-right:calc(var(--bleed) + var(--band-pad))}
[data-rk] .s-glass{backdrop-filter:blur(10px)}
[data-rk] .s-cols>*+*{border-left:var(--hair) solid var(--line);padding-left:var(--sp-8)}
[data-rk] .s-cols-2>*:nth-child(even){border-left:var(--hair) solid var(--line);padding-left:var(--sp-6)}
[data-rk] .s-cols-2>*:nth-child(n+3){padding-top:var(--sp-6);border-top:var(--hair) solid var(--line)}@media (max-width: 767px){
[data-rk] .s-cols>*+*,[data-rk] .s-cols-2>*:nth-child(even){border-left:0;padding-left:0;border-top:var(--hair) solid var(--line);padding-top:var(--sp-5)}}
[data-rk] .s-cell{transition:background-color var(--t-fast) var(--ease)}
[data-rk] .s-cell:hover{background:var(--bg-hover)}
[data-rk] .s-plan{transition:transform var(--t-fast) var(--ease),box-shadow var(--t-slow) var(--ease)}
[data-rk] .s-plan:hover{transform:translateY(-2px);box-shadow:var(--shadow-3)}
[data-rk] .s-lift-dark{transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease),transform var(--t-slow) var(--ease)}
[data-rk] .s-lift-dark:hover{border-color:var(--dark-line-2);background-color:var(--dark-3);transform:translateY(-1px)}
[data-rk] [data-scroll]{scrollbar-width:none}
[data-rk] [data-scroll]::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}}

/* ── Наведение и нажатие: из эталона, имена переведены ──────────── */
.s-h-out:hover{background: var(--bg-hover) !important; border-color: var(--ink-3) !important;}
.s-h-main:hover{background: var(--brand-hover) !important;}
.s-h-main:active{background: var(--brand-press) !important;}
.s-h-lift-3:hover{background-color: var(--dark-3) !important;}
.s-h-light:hover{background: var(--on-dark-2) !important;}
.s-h-quiet:hover{background: var(--brand-wash) !important; border-color: var(--brand) !important; color: var(--brand) !important;}
.s-h-row:hover{background: var(--bg-hover) !important;}
.s-h-mute:hover{color: var(--ink) !important;}
/* ── Выбранная полка и выбранный срок ───────────────────────────
   Объявления из эталона дословно; селекторы свои, потому что имена
   переключателей в продукте раздаются по номеру блока. */
[data-rk] .s-aud-r-seller:checked ~ .s-aud-tabs .s-aud-l-seller,
[data-rk] .s-aud-r-agency:checked ~ .s-aud-tabs .s-aud-l-agency{background:var(--bg-surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow-1)}
[data-rk] .s-per-r-0:checked ~ .s-per-tabs .s-per-l-0,
[data-rk] .s-per-r-1:checked ~ .s-per-tabs .s-per-l-1,
[data-rk] .s-per-r-2:checked ~ .s-per-tabs .s-per-l-2,
[data-rk] .s-per-r-3:checked ~ .s-per-tabs .s-per-l-3,
[data-rk] .s-per-r-4:checked ~ .s-per-tabs .s-per-l-4,
[data-rk] .s-per-r-5:checked ~ .s-per-tabs .s-per-l-5,
[data-rk] .s-per-r-6:checked ~ .s-per-tabs .s-per-l-6,
[data-rk] .s-per-r-7:checked ~ .s-per-tabs .s-per-l-7{background:var(--ink);color:var(--bg-surface);border-color:var(--ink);font-weight:600}
[data-rk] .s-aud-pane,
[data-rk] .s-per-p{display:none}
[data-rk] .s-aud-r-seller:checked ~ .s-aud-pane-seller,
[data-rk] .s-aud-r-agency:checked ~ .s-aud-pane-agency{display:flex}
[data-rk] .s-per-r-0:checked ~ .s-plans .s-per-p-0,
[data-rk] .s-per-r-1:checked ~ .s-plans .s-per-p-1,
[data-rk] .s-per-r-2:checked ~ .s-plans .s-per-p-2,
[data-rk] .s-per-r-3:checked ~ .s-plans .s-per-p-3,
[data-rk] .s-per-r-4:checked ~ .s-plans .s-per-p-4,
[data-rk] .s-per-r-5:checked ~ .s-plans .s-per-p-5,
[data-rk] .s-per-r-6:checked ~ .s-plans .s-per-p-6,
[data-rk] .s-per-r-7:checked ~ .s-plans .s-per-p-7{display:flex}
[data-rk] .s-aud-r-seller:focus-visible ~ .s-aud-tabs .s-aud-l-seller,
[data-rk] .s-aud-r-agency:focus-visible ~ .s-aud-tabs .s-aud-l-agency,
[data-rk] .s-per-r-0:focus-visible ~ .s-per-tabs .s-per-l-0,
[data-rk] .s-per-r-1:focus-visible ~ .s-per-tabs .s-per-l-1,
[data-rk] .s-per-r-2:focus-visible ~ .s-per-tabs .s-per-l-2,
[data-rk] .s-per-r-3:focus-visible ~ .s-per-tabs .s-per-l-3,
[data-rk] .s-per-r-4:focus-visible ~ .s-per-tabs .s-per-l-4,
[data-rk] .s-per-r-5:focus-visible ~ .s-per-tabs .s-per-l-5,
[data-rk] .s-per-r-6:focus-visible ~ .s-per-tabs .s-per-l-6,
[data-rk] .s-per-r-7:focus-visible ~ .s-per-tabs .s-per-l-7{outline:var(--ring-w) solid var(--brand);outline-offset:2px}


/* ── Частицы оформления: базовое правило с ширины 1440 ──────────── */
[data-rk] .a-шапка{position: sticky; top: 0px; z-index: 50; background: var(--bg-surface); border-bottom: var(--hair) solid var(--line)}
[data-rk] .a-шапка-полоса{max-width: var(--band); margin: 0px auto; padding: 0 var(--band-pad); height: var(--hdr-h); display: flex; align-items: center; gap: var(--sp-6)}
[data-rk] .a-логотип{display: flex; align-items: center; gap: var(--sp-2); text-decoration: none; color: var(--ink); flex: 0 0 auto}
[data-rk] .a-логотип-знак{width: var(--logo); height: var(--logo); border-radius: var(--r-md); background: var(--brand); color: var(--ink-on-brand); display: flex; align-items: center; justify-content: center; font-size: var(--fs-h2); font-weight: 700}
[data-rk] .a-логотип-слово{font-size: var(--fs-h1); font-weight: 600; letter-spacing: var(--track-tight)}
[data-rk] .a-меню{display: flex; align-items: center; gap: var(--sp-1); margin-left: var(--sp-4)}
[data-rk] .a-пункт-меню{display: inline-flex; align-items: center; height: var(--ctl-h-sm); padding: 0 var(--sp-3); border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none; font-size: var(--fs-read)}
[data-rk] .a-пункт-меню-со-списком{display: inline-flex; align-items: center; gap: var(--sp-1); height: var(--ctl-h-sm); padding: 0 var(--sp-3); border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none; font-size: var(--fs-read)}
[data-rk] .a-вложенное-меню{position: absolute; top: calc(100% + var(--sp-1)); left: 0px; min-width: var(--sub-w); padding: var(--sp-2); border-radius: var(--r-lg); background: var(--bg-surface); border: var(--hair) solid var(--line); box-shadow: var(--shadow-3); z-index: 60}
[data-rk] .a-вложенный-пункт{display: flex; flex-direction: column; gap: var(--hair-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); text-decoration: none; color: var(--ink)}
[data-rk] .a-вложенный-заголовок{font-size: var(--fs-body); font-weight: 500}
[data-rk] .a-вложенное-пояснение{font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-3)}
[data-rk] .a-правый-угол-шапки{margin-left: auto; display: flex; align-items: center; gap: var(--sp-2)}
[data-rk] .a-кнопка-войти{height: var(--ctl-h-sm); padding: 0 var(--sp-4); border-radius: var(--r-sm); border: var(--hair) solid var(--line-strong); color: var(--ink); font-size: var(--fs-body); font-weight: 500}
[data-rk] .a-кнопка-регистрация{height: var(--ctl-h-sm); padding: 0 var(--sp-4); border-radius: var(--r-sm); background: var(--brand); color: var(--ink-on-brand); font-size: var(--fs-body); font-weight: 500; box-shadow: var(--shadow-1)}
[data-rk] .a-полоса{flex: 1 1 0%; width: 100%; max-width: var(--band); margin: 0px auto; padding: 0 var(--band-pad)}
[data-rk] .a-статья{max-width: var(--band-narrow); margin: 0px auto; padding: var(--sp-10) 0 var(--sp-16); display: flex; flex-direction: column; gap: var(--blk-gap)}
[data-rk] .a-хлебные-крошки{display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-body); color: var(--ink-3)}
[data-rk] .a-шапка-статьи{display: flex; flex-direction: column; gap: var(--sp-4); max-width: var(--read)}
[data-rk] .a-заголовок-статьи{font-size: var(--fs-d2); line-height: var(--lh-d2); font-weight: 600; letter-spacing: var(--track-tighter); text-wrap: pretty}
[data-rk] .a-строка-автора{display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); font-size: var(--fs-body); color: var(--ink-3)}
[data-rk] .a-подвал{border-top: var(--hair) solid var(--line); background: var(--bg-surface); margin-top: auto}
[data-rk] .a-подвал-полоса{max-width: var(--band); margin: 0px auto; padding: var(--sp-10) var(--band-pad); display: flex; flex-wrap: wrap; gap: var(--sp-8); justify-content: space-between}
[data-rk] .a-подвал-марка{display: flex; flex-direction: column; gap: var(--sp-2); max-width: var(--foot-brand)}
[data-rk] .a-подвал-знак{width: var(--logo-xs); height: var(--logo-xs); border-radius: var(--r-md); background: var(--brand); color: var(--ink-on-brand); display: flex; align-items: center; justify-content: center; font-size: var(--fs-body); font-weight: 700}
[data-rk] .a-подвал-слово{font-size: var(--fs-h2); font-weight: 600}
[data-rk] .a-подвал-марка-строка{display: flex; align-items: center; gap: var(--sp-2); color: var(--ink)}
[data-rk] .a-подвал-описание{font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-3)}
[data-rk] .a-подвал-столбцы{display: flex; flex-wrap: wrap; gap: var(--sp-10)}
[data-rk] .a-подвал-столбец{display: flex; flex-direction: column; gap: var(--sp-2); min-width: var(--foot-col)}
[data-rk] .a-подвал-надпись{font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); font-weight: 500}
[data-rk] .a-подвал-ссылка{font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); text-decoration: none}
[data-rk] .a-подвал-низ{border-top: var(--hair) solid var(--line)}
[data-rk] .a-строка-прав{max-width: var(--band); margin: 0px auto; padding: var(--sp-4) var(--band-pad); display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: space-between; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-3)}
[data-rk] .a-строка-прав-ссылки{display: flex; gap: var(--sp-4); flex-wrap: wrap}
[data-rk] .a-строка-прав-ссылка{color: var(--ink-3); text-decoration: none}
[data-rk] .a-колонка-чтения{display: flex; flex-direction: column; gap: var(--blk-gap); max-width: var(--read)}
[data-rk] .a-блок-текст{font-size: var(--fs-read); line-height: var(--lh-read); text-wrap: pretty}
[data-rk] .a-блок-заголовок2{font-size: var(--fs-s2); line-height: var(--lh-s2); font-weight: 600; letter-spacing: var(--track-tight); padding-top: var(--sp-4)}
[data-rk] .a-блок-заголовок3{font-size: var(--fs-s3); line-height: var(--lh-s3); font-weight: 600; letter-spacing: var(--track-tight); padding-top: var(--sp-3)}
[data-rk] .a-блок-заголовок4{font-size: var(--fs-read); line-height: var(--lh-read); font-weight: 600; padding-top: var(--sp-2)}
[data-rk] .a-блок-список{list-style: none; padding: 0px; display: flex; flex-direction: column; gap: var(--sp-2)}
[data-rk] .a-пункт-списка{display: flex; gap: var(--sp-3); font-size: var(--fs-read); line-height: var(--lh-read)}
[data-rk] .a-точка-списка{flex: 0 0 auto; width: var(--dot); height: var(--dot); border-radius: var(--r-full); background: var(--brand); margin-top: var(--dot-top)}
[data-rk] .a-блок-цитата{display: flex; gap: var(--sp-5); align-items: flex-start}
[data-rk] .a-кавычка{flex: 0 0 auto; font-size: var(--fs-quote); line-height: 0.8; color: var(--brand); font-weight: 700}
[data-rk] .a-тело-цитаты{display: flex; flex-direction: column; gap: var(--sp-3)}
[data-rk] .a-текст-цитаты{font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 300; text-wrap: pretty}
[data-rk] .a-подпись-цитаты{font-size: var(--fs-body); color: var(--ink-3)}
[data-rk] .a-врезка-зелёная{display: flex; gap: var(--sp-4); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--good-wash); border: var(--hair) solid color-mix(in oklab,var(--good) 25%,transparent)}
[data-rk] .a-врезка-значок{flex: 0 0 auto; margin-top: var(--pad-hair)}
[data-rk] .a-врезка-тело{display: flex; flex-direction: column; gap: var(--sp-1)}
[data-rk] .a-врезка-заголовок{font-size: var(--fs-s3); line-height: var(--lh-s3); font-weight: 600; color: var(--good-ink)}
[data-rk] .a-врезка-текст{font-size: var(--fs-read); line-height: var(--lh-read)}
[data-rk] .a-блок-разделитель{border-top: var(--hair) solid var(--line); border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: initial; margin: var(--sp-4) 0}
[data-rk] .a-блок-кнопка{display: flex; justify-content: flex-start; padding: var(--sp-2) 0}
[data-rk] .a-кнопка-блока{height: var(--ctl-h-md); padding: 0 var(--sp-5); border-radius: var(--r-sm); background: var(--brand); color: var(--ink-on-brand); font-size: var(--fs-read); font-weight: 500}
[data-rk] .a-кнопка-главная{height: var(--ctl-h-md); padding: 0 var(--sp-5); border-radius: var(--r-sm); background: var(--brand); color: var(--ink-on-brand); font-size: var(--fs-read); font-weight: 500}
[data-rk] .a-блок-плитки{display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--blk-gap)}
[data-rk] .a-плитка{display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--bg-surface); border: var(--hair) solid var(--line)}
[data-rk] .a-плитка-число{font-size: var(--fs-s2); line-height: var(--lh-s2); font-weight: 600; letter-spacing: var(--track-tighter); font-variant-numeric: tabular-nums}
[data-rk] .a-плитка-заголовок{font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500}
[data-rk] .a-плитка-текст{font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-3)}
[data-rk] .a-блок-карточки{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--blk-gap)}
[data-rk] .a-карточка{display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--bg-surface); border: var(--hair) solid var(--line)}
[data-rk] .a-карточка-заголовок{font-size: var(--fs-s3); line-height: var(--lh-s3); font-weight: 600}
[data-rk] .a-карточка-текст{font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2)}
[data-rk] .a-блок-вопросы{max-width: var(--read); display: flex; flex-direction: column; border-top: var(--hair) solid var(--line)}
[data-rk] .a-вопрос{border-bottom: var(--hair) solid var(--line)}
[data-rk] .a-вопрос-шапка{display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4) 0; font-size: var(--fs-read); line-height: var(--lh-read); font-weight: 500; min-height: var(--touch)}
[data-rk] .a-вопрос-слова{flex: 1 1 0%}
[data-rk] .a-вопрос-значок{flex: 0 0 auto}
[data-rk] .a-вопрос-ответ{padding: 0 var(--sp-8) var(--sp-4) 0; font-size: var(--fs-read); line-height: var(--lh-read); color: var(--ink-2)}
[data-rk] .a-блок-цифры{display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3)}
[data-rk] .a-цифра{display: flex; flex-direction: column; gap: var(--hair-2); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); background: var(--bg-sunken)}
[data-rk] .a-цифра-число{font-size: var(--fs-d2); line-height: var(--lh-d2); font-weight: 600; letter-spacing: var(--track-tighter); color: var(--ink); font-variant-numeric: tabular-nums}
[data-rk] .a-цифра-подпись{font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2)}
[data-rk] .a-выделение-маркером{background: linear-gradient(180deg,transparent 58%,var(--brand-wash) 58%); padding: 0 var(--hair-2); border-radius: var(--r-xs); font-weight: 500}
[data-rk] .a-блок-мысль{padding: var(--sp-5) var(--sp-6); border-radius: var(--r-lg); background: var(--brand-wash); border-left: var(--rail) solid var(--brand)}
[data-rk] .a-мысль-текст{font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 500; text-wrap: pretty}
[data-rk] .a-блок-картинка{display: flex; flex-direction: column; gap: var(--sp-2)}
[data-rk] .a-картинка-тело{display: block; aspect-ratio: var(--ratio-card); border-radius: var(--r-md); border: var(--hair) solid var(--line); background-color: var(--bg-sunken); background-image: repeating-linear-gradient(135deg,var(--line) 0 var(--hair),transparent var(--hair) var(--stripe))}
[data-rk] .a-подпись-картинки{font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-3)}
[data-rk] .a-блокHtml{max-width: var(--read); display: flex; flex-direction: column; gap: var(--sp-2)}
[data-rk] .a-меню-телефона-шапка{padding: 0 var(--band-pad); height: var(--hdr-h-sm); display: flex; align-items: center; gap: var(--sp-3)}
[data-rk] .a-меню-телефона-марка{display: flex; align-items: center; gap: var(--sp-2); color: var(--ink)}
[data-rk] .a-меню-телефона-знак{width: var(--logo-sm); height: var(--logo-sm); border-radius: var(--r-md); background: var(--brand); color: var(--ink-on-brand); display: flex; align-items: center; justify-content: center; font-size: var(--fs-body); font-weight: 700}
[data-rk] .a-меню-телефона-слово{font-size: var(--fs-h1); font-weight: 600; letter-spacing: var(--track-tight)}
[data-rk] .a-меню-телефона-кнопка{margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--touch); padding: 0 var(--sp-3); border-radius: var(--r-sm); border: var(--hair) solid var(--line-strong); font-size: var(--fs-body); color: var(--ink)}
[data-rk] .a-меню-телефона-список{padding: var(--sp-2) var(--band-pad) var(--sp-4); display: flex; flex-direction: column; gap: var(--hair-2); border-top: var(--hair) solid var(--line)}
[data-rk] .a-меню-телефона-пункт{display: flex; align-items: center; min-height: var(--touch); padding: 0 var(--sp-2); border-radius: var(--r-sm); text-decoration: none; color: var(--ink); font-size: var(--fs-read); font-weight: 500}
[data-rk] .a-меню-телефона-подпункт{display: flex; align-items: center; min-height: var(--touch); padding: 0 var(--sp-2) 0 var(--sp-5); border-left: var(--hair-2) solid var(--line); margin-left: var(--sp-2); text-decoration: none; color: var(--ink-2); font-size: var(--fs-body)}
[data-rk] .a-меню-телефона-регистрация{margin-top: var(--sp-2); height: var(--ctl-h-md); border-radius: var(--r-sm); background: var(--brand); color: var(--ink-on-brand); font-size: var(--fs-read); font-weight: 500}
[data-rk] .a-меню-телефона-войти{height: var(--ctl-h-md); border-radius: var(--r-sm); border: var(--hair) solid var(--line-strong); color: var(--ink); font-size: var(--fs-read); font-weight: 500}
[data-rk] .a-шапка-страницы{max-width: var(--band-narrow); margin: 0px auto; padding: var(--sp-12) 0 var(--sp-16); display: flex; flex-direction: column; gap: var(--blk-gap)}
[data-rk] .a-страница{max-width: var(--band-narrow); margin: 0px auto; padding: var(--sp-12) 0 var(--sp-16); display: flex; flex-direction: column; gap: var(--blk-gap)}
[data-rk] .a-заголовок-страницы{font-size: var(--fs-d1); line-height: var(--lh-d1); font-weight: 600; letter-spacing: var(--track-tighter); max-width: var(--read); text-wrap: pretty}
[data-rk] .a-лид{font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-2); max-width: var(--read); text-wrap: pretty}
[data-rk] .a-врезка-нейтральная{display: flex; gap: var(--sp-4); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--bg-sunken); border: var(--hair) solid var(--line); max-width: var(--read)}
[data-rk] .a-врезка-один-текст{font-size: var(--fs-read); line-height: var(--lh-read); color: var(--ink)}
[data-rk] .a-врезка-значок-один{flex: 0 0 auto; margin-top: var(--pad-hair)}
[data-rk] .a-полоса-блога{position: relative; overflow: hidden; background-color: var(--dark); background-image: linear-gradient(var(--dark-2) var(--hair),transparent var(--hair)),linear-gradient(90deg,var(--dark-2) var(--hair),transparent var(--hair)); background-size: var(--grid-cell) var(--grid-cell); padding: var(--sp-14) 0}
[data-rk] .a-свечение-блога{position: absolute; inset: 0px; background: radial-gradient(60% 90% at 12% 0%,var(--dark-glow),transparent 64%); pointer-events: none}
[data-rk] .a-полоса-блога-внутри{position: relative; max-width: var(--band); margin: 0px auto; padding: 0 var(--band-pad); display: flex; flex-direction: column; gap: var(--sp-4)}
[data-rk] .a-надзаголовок-блога{font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--on-dark-3); font-weight: 600}
[data-rk] .a-заголовок-блога{font-size: var(--fs-d1); line-height: var(--lh-d1); font-weight: 600; letter-spacing: var(--track-tighter); color: var(--on-dark)}
[data-rk] .a-лид-блога{font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--on-dark-2); max-width: var(--read); text-wrap: pretty}
[data-rk] .a-отбор-блога{display: flex; flex-direction: column; gap: var(--sp-5)}
[data-rk] .a-разделы-блога{display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--hair-2)}
[data-rk] .a-раздел-блога-тут{display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--ctl-h-md); padding: 0 var(--sp-4); border-radius: var(--r-full); background: var(--ink); border: var(--hair) solid var(--ink); color: var(--bg-surface); font-size: var(--fs-body); font-weight: 600; text-decoration: none; white-space: nowrap}
[data-rk] .a-раздел-блога{display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--ctl-h-md); padding: 0 var(--sp-4); border-radius: var(--r-full); background: var(--bg-surface); border: var(--hair) solid var(--line); color: var(--ink-2); font-size: var(--fs-body); font-weight: 400; text-decoration: none; white-space: nowrap}
[data-rk] .a-счёт-раздела{font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums}
[data-rk] .a-метки-блога{display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2)}
[data-rk] .a-метка-блога{display: inline-flex; align-items: center; height: var(--chip-h-md); padding: 0 var(--sp-3); border-radius: var(--r-sm); background: var(--bg-sunken); border: var(--hair) solid var(--line); color: var(--ink-2); font-size: var(--fs-body); text-decoration: none}
[data-rk] .a-главная-статья{display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.15fr); gap: var(--sp-8); align-items: center; padding: var(--card-pad); border-radius: var(--r-xl); background: var(--bg-surface); border: var(--hair) solid var(--line); box-shadow: var(--shadow-2); text-decoration: none; color: var(--ink)}
[data-rk] .a-картинка-главной{display: block; aspect-ratio: var(--ratio-card); border-radius: var(--r-lg); background-color: var(--bg-sunken); background-image: repeating-linear-gradient(135deg,var(--line) 0 var(--hair),transparent var(--hair) var(--stripe))}
[data-rk] .a-тело-главной{display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0px}
[data-rk] .a-ряд-главной{display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2)}
[data-rk] .a-плашка-главной{display: inline-flex; align-items: center; height: var(--tag-h); padding: 0 var(--sp-2); border-radius: var(--r-xs); background: var(--brand); color: rgb(255, 255, 255); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase}
[data-rk] .a-раздел-главной{font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--brand); font-weight: 600}
[data-rk] .a-заголовок-главной{font-size: var(--fs-d2); line-height: var(--lh-d2); font-weight: 600; letter-spacing: var(--track-tighter); text-wrap: pretty}
[data-rk] .a-описание-главной{font-size: var(--fs-read); line-height: var(--lh-read); color: var(--ink-2); text-wrap: pretty}
[data-rk] .a-строка-главной{display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-body); color: var(--ink-3)}
[data-rk] .a-точка-между{width: var(--dot); height: var(--dot); border-radius: var(--r-full); background: var(--line-strong)}
[data-rk] .a-лента-статей{display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--blk-gap)}
[data-rk] .a-карточка-статьи{display: flex; flex-direction: column; border-radius: var(--r-lg); background: var(--bg-surface); border: var(--hair) solid var(--line); text-decoration: none; color: var(--ink); overflow: hidden}
[data-rk] .a-картинка-статьи{display: block; aspect-ratio: var(--ratio-card); background-color: var(--bg-sunken); background-image: repeating-linear-gradient(135deg,var(--line) 0 var(--hair),transparent var(--hair) var(--stripe))}
[data-rk] .a-картинки-нет{display: flex; align-items: center; justify-content: center; aspect-ratio: var(--ratio-card); background-color: var(--dark); background-image: linear-gradient(var(--dark-2) var(--hair),transparent var(--hair)),linear-gradient(90deg,var(--dark-2) var(--hair),transparent var(--hair)); background-size: var(--grid-cell) var(--grid-cell)}
[data-rk] .a-буква-без-обложки{font-size: var(--fs-d2); font-weight: 700; color: var(--on-dark); letter-spacing: var(--track-tighter)}
[data-rk] .a-тело-карточки{display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5); flex: 1 1 0%}
[data-rk] .a-раздел-статьи{font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--brand); font-weight: 600}
[data-rk] .a-заголовок-карточки{font-size: var(--fs-s3); line-height: var(--lh-s3); font-weight: 600; text-wrap: pretty}
[data-rk] .a-строка-карточки{display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-3); margin-top: auto; padding-top: var(--sp-2)}
[data-rk] .a-метки-карточки{display: flex; flex-wrap: wrap; gap: var(--sp-1)}
[data-rk] .a-метка-карточки{display: inline-flex; align-items: center; height: var(--tag-h); padding: 0 var(--sp-2); border-radius: var(--r-xs); background: var(--bg-sunken); color: var(--ink-3); font-size: var(--fs-xs)}
[data-rk] .a-лента-пустая{grid-column: span 2; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--card-pad); border-radius: var(--r-lg); border: var(--hair) dashed var(--line-strong)}
[data-rk] .a-пусто-заголовок{font-size: var(--fs-s3); line-height: var(--lh-s3); font-weight: 600}
[data-rk] .a-пусто-текст{font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-3); max-width: var(--note-w); text-wrap: pretty}
[data-rk] .a-пусто-кнопка{margin-top: var(--sp-2); height: var(--ctl-h-md); padding: 0 var(--sp-5); border-radius: var(--r-md); border: var(--hair) solid var(--line-strong); color: var(--ink); font-size: var(--fs-body); font-weight: 500}
[data-rk] .a-полотно-ленты{display: flex; flex-direction: column}
[data-rk] .a-разделы-ленты{display: flex; flex-direction: column; gap: var(--sec-gap); padding: var(--sp-12) 0 var(--sp-16)}
[data-rk] .a-полоса-тарифов{position: relative; overflow: hidden; background-color: var(--dark); background-image: linear-gradient(var(--dark-2) var(--hair),transparent var(--hair)),linear-gradient(90deg,var(--dark-2) var(--hair),transparent var(--hair)); background-size: var(--grid-cell) var(--grid-cell); padding: var(--sp-16) 0}
[data-rk] .a-свечение-тарифов{position: absolute; inset: 0px; background: radial-gradient(60% 90% at 15% 0%,var(--dark-glow),transparent 66%); pointer-events: none}
[data-rk] .a-полоса-тарифов-внутри{position: relative; max-width: var(--band); margin: 0px auto; padding: 0 var(--band-pad); display: flex; flex-direction: column; gap: var(--sp-5)}
[data-rk] .a-заголовок-тарифов{font-size: var(--fs-d1); line-height: var(--lh-d1); font-weight: 600; letter-spacing: var(--track-tighter); color: var(--on-dark); max-width: var(--read); text-wrap: pretty}
[data-rk] .a-лид-тарифов{font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--on-dark-2); max-width: var(--read); text-wrap: pretty}
[data-rk] .a-ряд-признаков{display: flex; flex-wrap: wrap; gap: var(--sp-2)}
[data-rk] .a-признак{display: inline-flex; align-items: center; gap: var(--sp-2); height: var(--chip-h-md); padding: 0 var(--sp-4); border-radius: var(--r-full); background-color: var(--dark-3); border: var(--hair) solid var(--dark-line); color: var(--on-dark-2); font-size: var(--fs-body); white-space: nowrap}
[data-rk] .a-полотно-страницы{display: flex; flex-direction: column}
[data-rk] .a-разделы-тарифов{display: flex; flex-direction: column; gap: var(--sec-gap); padding: var(--sp-16) 0}
[data-rk] .a-блок-тарифы{display: flex; flex-direction: column; gap: var(--sp-6)}
[data-rk] .a-переключатель-полок{align-self: center; display: flex; gap: var(--hair-2); padding: var(--pad-hair); border-radius: var(--r-md); background: var(--bg-sunken)}
[data-rk] .a-полка-кнопка{height: var(--ctl-h-sm); padding: 0 var(--sp-5); border-radius: var(--r-sm); font-size: var(--fs-body)}
[data-rk] .a-полка-содержимое{flex-direction: column; gap: var(--sp-6)}
[data-rk] .a-ряд-сроков{display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); padding: var(--hair-2)}
[data-rk] .a-срок-кнопка{height: var(--ctl-h-sm); padding: 0 var(--sp-4); border-radius: var(--r-full); border: var(--hair) solid var(--line-strong); font-size: var(--fs-body)}
[data-rk] .a-сетка-тарифов{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--blk-gap)}
[data-rk] .a-карточка-тарифа{display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--card-pad); border-radius: var(--r-xl); background: var(--bg-surface); border: var(--hair) solid var(--line); box-shadow: var(--shadow-1)}
[data-rk] .a-шапка-тарифа{display: flex; flex-direction: column; gap: var(--sp-2)}
[data-rk] .a-ряд-названия{display: flex; align-items: flex-start; gap: var(--sp-2)}
[data-rk] .a-название-тарифа{font-size: var(--fs-s3); line-height: var(--lh-s3); font-weight: 600; color: var(--ink); text-wrap: pretty; flex: 1 1 0%; min-width: 0px}
[data-rk] .a-пояснения-тарифа{font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-3); text-wrap: pretty}
[data-rk] .a-цена-тарифа{min-height: var(--price-h)}
[data-rk] .a-цена-одного-срока{flex-direction: column; gap: var(--hair-2)}
[data-rk] .a-ряд-цены{display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap}
[data-rk] .a-число-цены{font-size: var(--fs-price); line-height: var(--lh-price); font-weight: 600; letter-spacing: var(--track-tighter); color: var(--ink); font-variant-numeric: tabular-nums}
[data-rk] .a-срок-цены{font-size: var(--fs-body); color: var(--ink-3)}
[data-rk] .a-строка-скидки{display: inline-flex; align-items: center; width: max-content; max-width: 100%; padding: 0px; border-radius: var(--r-full); background: transparent; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-3)}
[data-rk] .a-метка-тарифа{flex: 0 0 auto; display: inline-flex; align-items: center; height: var(--chip-h); padding: 0 var(--sp-3); border-radius: var(--r-full); background: var(--brand); color: rgb(255, 255, 255); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; white-space: nowrap}
[data-rk] .a-потолки-тарифа{display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-4); border-top: var(--hair) solid var(--line)}
[data-rk] .a-надпись-потолков{font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); font-weight: 600}
[data-rk] .a-ряд-потолков{display: flex; flex-wrap: wrap; gap: var(--sp-2)}
[data-rk] .a-капсула-потолка{display: inline-flex; align-items: center; height: var(--chip-h-md); padding: 0 var(--sp-3); border-radius: var(--r-full); background: var(--bg-sunken); border: var(--hair) solid var(--line); font-size: var(--fs-body); color: var(--ink-2); white-space: nowrap}
[data-rk] .a-список-входит{list-style: none; margin: 0px; padding: var(--sp-4) 0 0; border-top: var(--hair) solid var(--line); display: flex; flex-direction: column; gap: var(--sp-3)}
[data-rk] .a-пункт-входит{display: flex; gap: var(--sp-2); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2)}
[data-rk] .a-пункт-не-входит{display: flex; gap: var(--sp-2); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-3)}
[data-rk] .a-кнопка-тарифа{margin-top: auto; height: var(--ctl-h-lg); border-radius: var(--r-md); background: transparent; color: var(--ink); border: var(--hair) solid var(--line-strong); font-size: var(--fs-read); font-weight: 500}
[data-rk] .a-кнопка-тарифа-главная{margin-top: auto; height: var(--ctl-h-lg); border-radius: var(--r-md); background: var(--brand); color: rgb(255, 255, 255); border: var(--hair) solid var(--brand); font-size: var(--fs-read); font-weight: 500}
[data-rk] .a-сетка-на-линиях{display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hair); background: var(--line); border: var(--hair) solid var(--line); border-radius: var(--r-lg); overflow: hidden}
[data-rk] .a-ячейка-на-линиях{display: flex; gap: var(--sp-4); padding: var(--card-pad); background: var(--bg-surface)}
[data-rk] .a-значок-ячейки{flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: var(--ico-in-sm); height: var(--ico-in-sm)}
[data-rk] .a-тело-ячейки{display: flex; flex-direction: column; gap: var(--hair-2); min-width: 0px}
[data-rk] .a-заголовок-ячейки{font-size: var(--fs-read); line-height: var(--lh-read); font-weight: 600}
[data-rk] .a-текст-ячейки{font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-3); text-wrap: pretty}
[data-rk] .a-блок-обложка{position: relative; overflow: hidden; background-color: var(--dark); background-image: linear-gradient(var(--dark-2) var(--hair),transparent var(--hair)),linear-gradient(90deg,var(--dark-2) var(--hair),transparent var(--hair)); background-size: var(--grid-cell) var(--grid-cell); padding: var(--hero-pad) 0}
[data-rk] .a-свечение-обложки{position: absolute; inset: 0px; background: radial-gradient(70% 80% at 18% 0%,var(--dark-glow),transparent 68%); pointer-events: none}
[data-rk] .a-сетка-обложки{position: relative; max-width: var(--band); margin: 0px auto; padding: 0 var(--band-pad); display: grid; grid-template-columns: minmax(0px, 1.05fr) minmax(0px, 0.95fr); gap: var(--sp-12); align-items: center}
[data-rk] .a-лево-обложки{display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0px}
[data-rk] .a-плашка-доверия{display: inline-flex; align-items: center; gap: var(--sp-2); width: max-content; max-width: 100%; height: var(--chip-h-md); padding: 0 var(--sp-4); white-space: nowrap; border-radius: var(--r-full); background-color: var(--dark-3); border: var(--hair) solid var(--dark-line); color: var(--on-dark-2); font-size: var(--fs-body)}
[data-rk] .a-точка-доверия{width: var(--dot); height: var(--dot); border-radius: var(--r-full); background: var(--good)}
[data-rk] .a-слово-доверия{color: var(--on-dark); font-weight: 500}
[data-rk] .a-разделитель-доверия{color: var(--dark-line-2)}
[data-rk] .a-заголовок-обложки{font-size: var(--fs-d0); line-height: var(--lh-d0); font-weight: 600; letter-spacing: var(--track-tighter); color: var(--on-dark); text-wrap: pretty}
[data-rk] .a-подзаголовок-обложки{font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--on-dark-2); max-width: var(--read); text-wrap: pretty}
[data-rk] .a-ряд-кнопок-обложки{display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; padding-top: var(--sp-2)}
[data-rk] .a-кнопка-обложки-главная{height: var(--ctl-h-lg); padding: 0 var(--sp-6); border-radius: var(--r-md); background: var(--brand); color: rgb(255, 255, 255); font-size: var(--fs-read); font-weight: 500; box-shadow: var(--shadow-2)}
[data-rk] .a-кнопка-обложки-тихая{height: var(--ctl-h-lg); padding: 0 var(--sp-5); border-radius: var(--r-md); border: var(--hair) solid var(--dark-line-2); color: var(--on-dark); font-size: var(--fs-read); font-weight: 500}
[data-rk] .a-строка-условий{display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--on-dark-3)}
[data-rk] .a-условие{display: inline-flex; align-items: center; gap: var(--sp-2)}
[data-rk] .a-снимок-кабинета{position: relative; min-width: 0px; display: flex; flex-direction: column; gap: var(--sp-3)}
[data-rk] .a-рама-снимка{border-radius: var(--r-xl); border: var(--hair) solid var(--dark-line); background-color: var(--dark-2); box-shadow: var(--shadow-3); overflow: hidden}
[data-rk] .a-шапка-рамы{display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-bottom: var(--hair) solid var(--dark-line); background-color: var(--dark-3)}
[data-rk] .a-точка-рамы{width: var(--dot); height: var(--dot); border-radius: var(--r-full); background: var(--dark-line-2)}
[data-rk] .a-адрес-рамы{margin-left: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--on-dark-3)}
[data-rk] .a-полотно-снимка{height: var(--shot-h); background-color: var(--dark-2); background-image: repeating-linear-gradient(135deg,var(--dark-3) 0 var(--hair),transparent var(--hair) var(--stripe)); display: flex; align-items: center; justify-content: center; padding: var(--band-pad)}
[data-rk] .a-надпись-снимка{font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--on-dark-3); text-align: center}
[data-rk] .a-плашка-показателей{display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--hair); border-radius: var(--r-lg); border: var(--hair) solid var(--dark-line); background: var(--dark-line); overflow: hidden; box-shadow: var(--shadow-2)}
[data-rk] .a-показатель{display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; gap: var(--hair-2); padding: var(--sp-3) var(--sp-4); background-color: var(--dark-2)}
[data-rk] .a-надпись-показателя{font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--on-dark-3); white-space: nowrap}
[data-rk] .a-ряд-показателя{display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2)}
[data-rk] .a-число-показателя{font-size: var(--fs-s3); line-height: var(--lh-s3); font-weight: 600; color: var(--on-dark); font-variant-numeric: tabular-nums; white-space: nowrap}
[data-rk] .a-сдвиг-показателя{font-size: var(--fs-sm); color: var(--good-ink); font-weight: 500; white-space: nowrap}
[data-rk] .a-подпись-показателя{font-size: var(--fs-sm); color: var(--on-dark-3); font-weight: 500; white-space: nowrap}
[data-rk] .a-полоса-цифр{background-color: var(--dark-2); border-top: var(--hair) solid var(--dark-line); padding: var(--sp-8) 0}
[data-rk] .a-сетка-полосы-цифр{max-width: var(--band); margin: 0px auto; padding: 0 var(--band-pad); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-6)}
[data-rk] .a-цифра-полосы{display: flex; flex-direction: column; gap: var(--hair-2); padding-left: var(--sp-4); border-left: var(--rail) solid var(--dark-line)}
[data-rk] .a-число-полосы{font-size: var(--fs-num); line-height: var(--lh-num); font-weight: 600; letter-spacing: var(--track-tight); color: var(--on-dark); font-variant-numeric: tabular-nums}
[data-rk] .a-подпись-полосы{font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--on-dark-3); text-wrap: pretty}
[data-rk] .a-блок-шаги{display: flex; flex-direction: column; gap: var(--blk-gap)}
[data-rk] .a-шапка-раздела{display: flex; flex-direction: column; gap: var(--sp-2); max-width: var(--read)}
[data-rk] .a-надзаголовок-раздела{font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--brand); font-weight: 600}
[data-rk] .a-заголовок-раздела{font-size: var(--fs-d2); line-height: var(--lh-d2); font-weight: 600; letter-spacing: var(--track-tighter)}
[data-rk] .a-сетка-шагов{display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--blk-gap)}
[data-rk] .a-шаг{display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-4); border-top: var(--hair-2) solid var(--ink)}
[data-rk] .a-ряд-шага{display: flex; align-items: center; gap: var(--sp-3)}
[data-rk] .a-номер-шага{width: var(--ico-sm); height: var(--ico-sm); border-radius: var(--r-full); background: var(--ink); color: var(--bg-surface); display: flex; align-items: center; justify-content: center; font-size: var(--fs-body); font-weight: 600}
[data-rk] .a-название-шага{font-size: var(--fs-s3); line-height: var(--lh-s3); font-weight: 600}
[data-rk] .a-текст-шага{font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); text-wrap: pretty}
[data-rk] .a-блок-отзывы{display: flex; flex-direction: column; gap: var(--blk-gap)}
[data-rk] .a-шапка-отзывов{display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3)}
[data-rk] .a-заголовок-отзывов{font-size: var(--fs-d2); line-height: var(--lh-d2); font-weight: 600; letter-spacing: var(--track-tighter)}
[data-rk] .a-примечание-отзывов{font-size: var(--fs-body); color: var(--ink-3)}
[data-rk] .a-сетка-отзывов{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--blk-gap)}
[data-rk] .a-отзыв{display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--card-pad); border-radius: var(--r-lg); background: var(--bg-surface); border: var(--hair) solid var(--line); box-shadow: var(--shadow-1)}
[data-rk] .a-кавычка-отзыва{font-size: var(--fs-quote); line-height: 0.7; color: var(--brand); font-weight: 700; height: var(--sp-6)}
[data-rk] .a-тело-отзыва{font-size: var(--fs-read); line-height: var(--lh-read); text-wrap: pretty}
[data-rk] .a-подпись-отзыва{display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: auto; padding-top: var(--sp-4); border-top: var(--hair) solid var(--line)}
[data-rk] .a-кто-отзыв{display: flex; flex-direction: column; min-width: 0px}
[data-rk] .a-имя-отзыва{font-size: var(--fs-body); font-weight: 600}
[data-rk] .a-дело-отзыва{font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-3)}
[data-rk] .a-результат-отзыва{margin-left: auto; display: inline-flex; align-items: center; height: var(--chip-h-md); padding: 0 var(--sp-3); border-radius: var(--r-full); background: var(--good-wash); color: var(--good-ink); font-size: var(--fs-body); font-weight: 600}
[data-rk] .a-блок-призыв{position: relative; overflow: hidden; background-color: var(--dark); padding: var(--sp-16) 0}
[data-rk] .a-свечение-призыва{position: absolute; inset: 0px; background: radial-gradient(60% 90% at 78% 30%,var(--dark-glow),transparent 66%); pointer-events: none}
[data-rk] .a-нутро-призыва{position: relative; max-width: var(--band-tight); margin: 0px auto; display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); text-align: center}
[data-rk] .a-заголовок-призыва{font-size: var(--fs-d1); line-height: var(--lh-d1); font-weight: 600; letter-spacing: var(--track-tighter); color: var(--on-dark); max-width: var(--read); text-wrap: pretty}
[data-rk] .a-лид-призыва{font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--on-dark-2); max-width: var(--read); text-wrap: pretty}
[data-rk] .a-ряд-кнопок-призыва{display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); padding-top: var(--sp-2)}
[data-rk] .a-кнопка-призыва-светлая{height: var(--ctl-h-lg); padding: 0 var(--sp-6); border-radius: var(--r-md); background: var(--bg-surface); color: var(--dark); font-size: var(--fs-read); font-weight: 600}
[data-rk] .a-кнопка-призыва-тихая{height: var(--ctl-h-lg); padding: 0 var(--sp-5); border-radius: var(--r-md); border: var(--hair) solid var(--dark-line-2); color: var(--on-dark); font-size: var(--fs-read); font-weight: 500}
[data-rk] .a-сноска-призыва{font-size: var(--fs-body); color: var(--on-dark-3)}
[data-rk] .a-блок-возможности{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--hair); background: var(--line); border: var(--hair) solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-1)}
[data-rk] .a-карточка-возможности{position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-8); background: var(--bg-surface)}
[data-rk] .a-призрак-номера{position: absolute; top: var(--sp-4); right: var(--sp-5); font-size: var(--num-ghost); line-height: 1; font-weight: 600; color: var(--line); font-variant-numeric: tabular-nums; letter-spacing: var(--track-tighter); pointer-events: none}
[data-rk] .a-низ-карточки-возможности{display: flex; flex-direction: column; gap: var(--sp-2)}
[data-rk] .a-название-возможности{font-size: var(--fs-s2); line-height: var(--lh-s2); font-weight: 600; letter-spacing: var(--track-tight)}
[data-rk] .a-текст-возможности{font-size: var(--fs-read); line-height: var(--lh-read); color: var(--ink-2); text-wrap: pretty}
[data-rk] .a-схема-столбики{position: relative; display: flex; flex-flow: row; align-items: flex-end; align-content: flex-end; gap: var(--viz-gap); width: var(--viz-box); height: var(--viz-box)}
[data-rk] .a-схема-лежачие{position: relative; display: flex; flex-flow: column; align-items: flex-start; align-content: flex-end; gap: var(--viz-gap); width: var(--viz-box); height: var(--viz-box)}
[data-rk] .a-схема-клетки{position: relative; display: flex; flex-flow: wrap; align-items: flex-start; align-content: flex-end; gap: var(--viz-gap); width: var(--viz-box); height: var(--viz-box)}
[data-rk] .a-схема-весы{position: relative; display: flex; flex-flow: column; align-items: flex-end; align-content: flex-end; gap: var(--viz-gap); width: var(--viz-box); height: var(--viz-box)}
[data-rk] .a-столбик1{width: var(--viz-bar); height: var(--viz-h1); border-radius: var(--r-xs); background: var(--brand-line)}
[data-rk] .a-столбик3{width: var(--viz-bar); height: var(--viz-h3); border-radius: var(--r-xs); background: var(--brand-line)}
[data-rk] .a-столбик4-яркий{width: var(--viz-bar); height: var(--viz-h4); border-radius: var(--r-xs); background: var(--brand)}
[data-rk] .a-столбик2{width: var(--viz-bar); height: var(--viz-h2); border-radius: var(--r-xs); background: var(--brand-line)}
[data-rk] .a-лежачая4-яркая{width: var(--viz-w4); height: var(--viz-bar); border-radius: var(--r-xs); background: var(--brand)}
[data-rk] .a-лежачая2{width: var(--viz-w2); height: var(--viz-bar); border-radius: var(--r-xs); background: var(--brand-line)}
[data-rk] .a-лежачая3{width: var(--viz-w3); height: var(--viz-bar); border-radius: var(--r-xs); background: var(--brand-line)}
[data-rk] .a-лежачая1{width: var(--viz-w1); height: var(--viz-bar); border-radius: var(--r-xs); background: var(--brand-line)}
[data-rk] .a-лежачая4-пустая{width: var(--viz-w4); height: var(--viz-bar); border-radius: var(--r-xs); background: var(--line)}
[data-rk] .a-лежачая2-яркая{width: var(--viz-w2); height: var(--viz-bar); border-radius: var(--r-xs); background: var(--brand)}
[data-rk] .a-лежачая1-пустая{width: var(--viz-w1); height: var(--viz-bar); border-radius: var(--r-xs); background: var(--line)}
[data-rk] .a-клетка-тусклая{width: var(--viz-cell); height: var(--viz-cell); border-radius: var(--r-xs); background: var(--brand-line)}
[data-rk] .a-клетка-яркая{width: var(--viz-cell); height: var(--viz-cell); border-radius: var(--r-xs); background: var(--brand)}
[data-rk] .a-клетка-пустая{width: var(--viz-cell); height: var(--viz-cell); border-radius: var(--r-xs); background: var(--line)}
[data-rk] .a-врезка-гарантий{display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 0.85fr); gap: var(--sp-8); align-items: start; padding: var(--sp-10) var(--sp-8); border-radius: var(--r-xl); background: var(--bg-surface); border: var(--hair) solid var(--line); box-shadow: var(--shadow-1)}
[data-rk] .a-лево-гарантий{display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0px}
[data-rk] .a-метка-ключа{display: inline-flex; align-items: center; gap: var(--sp-2); width: max-content; height: var(--chip-h-md); padding: 0 var(--sp-3); border-radius: var(--r-full); background: var(--good-wash); color: var(--good-ink); font-size: var(--fs-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: 600}
[data-rk] .a-заголовок-гарантий{font-size: var(--fs-d2); line-height: var(--lh-d2); font-weight: 600; letter-spacing: var(--track-tighter); text-wrap: pretty}
[data-rk] .a-текст-гарантий{font-size: var(--fs-read); line-height: var(--lh-read); color: var(--ink-2); text-wrap: pretty}
[data-rk] .a-ряд-гарантий{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); min-width: 0px}
[data-rk] .a-гарантия{display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0px; padding: var(--sp-5); border-radius: var(--r-lg); background: var(--bg-sunken)}
[data-rk] .a-знак-гарантии{display: flex; align-items: center; justify-content: center; width: var(--ico-in-sm); height: var(--ico-in-sm)}
[data-rk] .a-название-гарантии{font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600}
[data-rk] .a-подпись-гарантии{font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-3); text-wrap: pretty}
[data-rk] .a-блок-почему{display: grid; grid-template-columns: minmax(0px, 1.1fr) minmax(0px, 0.9fr); gap: var(--sec-gap); align-items: start}
[data-rk] .a-лево-почему{display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0px}
[data-rk] .a-заголовок-почему{font-size: var(--fs-d2); line-height: var(--lh-d2); font-weight: 600; letter-spacing: var(--track-tighter); text-wrap: pretty}
[data-rk] .a-абзац-почему{font-size: var(--fs-read); line-height: var(--lh-read); color: var(--ink-2); text-wrap: pretty}
[data-rk] .a-сравнение{display: flex; flex-direction: column; gap: var(--hair); border-radius: var(--r-xl); border: var(--hair) solid var(--line); background: var(--line); overflow: hidden; box-shadow: var(--shadow-2)}
[data-rk] .a-шапка-сравнения{display: grid; grid-template-columns: minmax(0px, 1fr) auto auto; gap: var(--sp-3); align-items: center; padding: var(--sp-4); background: var(--bg-sunken)}
[data-rk] .a-графа-что{font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); font-weight: 600}
[data-rk] .a-графа-было{font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); text-align: right; font-weight: 600}
[data-rk] .a-графа-стало{font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink); text-align: right; font-weight: 600}
[data-rk] .a-строка-сравнения{display: grid; grid-template-columns: minmax(0px, 1fr) auto auto; gap: var(--sp-3); align-items: baseline; padding: var(--sp-4); background: var(--bg-surface)}
[data-rk] .a-ключ-сравнения{font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2)}
[data-rk] .a-было-сравнения{font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-3); text-align: right; text-decoration: line-through; font-variant-numeric: tabular-nums}
[data-rk] .a-стало-сравнения{font-size: var(--fs-read); line-height: var(--lh-read); font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; letter-spacing: var(--track-tight)}
[data-rk] .a-стало-хорошее{font-size: var(--fs-read); line-height: var(--lh-read); font-weight: 600; color: var(--good-ink); text-align: right; font-variant-numeric: tabular-nums; letter-spacing: var(--track-tight)}
[data-rk] .a-сноска-сравнения{padding: var(--sp-3) var(--sp-4); background: var(--bg-surface); font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-3); text-wrap: pretty}
[data-rk] .a-блок-не-делает{display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-8)}
[data-rk] .a-карточка-не-делает{display: flex; flex-direction: column; gap: var(--sp-4); padding-top: var(--sp-5); border-top: var(--hair-2) solid var(--line-strong); min-width: 0px}
[data-rk] .a-метка-не-делает{display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); font-weight: 600}
[data-rk] .a-низ-карточки-не-делает{display: flex; flex-direction: column; gap: var(--sp-2)}
[data-rk] .a-название-не-делает{font-size: var(--fs-s2); line-height: var(--lh-s2); font-weight: 600; letter-spacing: var(--track-tight); text-wrap: pretty}
[data-rk] .a-текст-не-делает{font-size: var(--fs-read); line-height: var(--lh-read); color: var(--ink-2); text-wrap: pretty}
[data-rk] .a-блок-тарифы-коротко{display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--blk-gap); align-items: start}
[data-rk] .a-карточка-кратко{display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--card-pad); border-radius: var(--r-lg); background: var(--bg-surface); border: var(--hair) solid var(--line); box-shadow: var(--shadow-1)}
[data-rk] .a-ряд-имени-кратко{display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2)}
[data-rk] .a-имена-кратко{font-size: var(--fs-s3); line-height: var(--lh-s3); font-weight: 600; color: var(--ink)}
[data-rk] .a-подпись-кратко{font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-3); text-wrap: pretty}
[data-rk] .a-ряд-цены-кратко{display: flex; align-items: baseline; gap: var(--sp-2)}
[data-rk] .a-цена-кратко{font-size: var(--fs-price); line-height: var(--lh-price); font-weight: 600; letter-spacing: var(--track-tighter); color: var(--ink); font-variant-numeric: tabular-nums}
[data-rk] .a-срок-кратко{font-size: var(--fs-body); color: var(--ink-3)}
[data-rk] .a-потолки-кратко{font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-3); padding-bottom: var(--sp-1)}
[data-rk] .a-кнопка-кратко{height: var(--ctl-h-md); border-radius: var(--r-md); background: transparent; color: var(--ink); border: var(--hair) solid var(--line-strong); font-size: var(--fs-body); font-weight: 500; margin-top: auto}
[data-rk] .a-плашка-выбирают{display: inline-flex; align-items: center; height: var(--tag-h); padding: 0 var(--sp-2); border-radius: var(--r-xs); background: var(--brand); color: rgb(255, 255, 255); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase}
[data-rk] .a-окно-тёмное{margin: 0px; display: flex; flex-direction: column; border-radius: var(--r-lg); border: var(--hair) solid var(--dark-line); background-color: var(--dark-2); box-shadow: var(--shadow-2); overflow: hidden}
[data-rk] .a-полоса-окна-тёмная{display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-bottom: var(--hair) solid var(--dark-line); background-color: var(--dark-3)}
[data-rk] .a-точка-окна-тёмная{width: var(--dot); height: var(--dot); border-radius: var(--r-full); background: var(--dark-line-2)}
[data-rk] .a-адрес-окна-тёмный{margin-left: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--on-dark-3)}
[data-rk] .a-полотно-окна-тёмное{display: flex; align-items: center; justify-content: center; aspect-ratio: var(--ratio-card); background-color: var(--dark-2); background-image: repeating-linear-gradient(135deg,var(--dark-3) 0 var(--hair),transparent var(--hair) var(--stripe)); font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--on-dark-3)}
[data-rk] .a-окно-светлое{margin: 0px; display: flex; flex-direction: column; border-radius: var(--r-lg); border: var(--hair) solid var(--line); background-color: var(--bg-surface); box-shadow: var(--shadow-2); overflow: hidden}
[data-rk] .a-полоса-окна-светлая{display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-bottom: var(--hair) solid var(--line); background-color: var(--bg-sunken)}
[data-rk] .a-точка-окна-светлая{width: var(--dot); height: var(--dot); border-radius: var(--r-full); background: var(--line-strong)}
[data-rk] .a-адрес-окна-светлый{margin-left: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--ink-3)}
[data-rk] .a-полотно-окна-светлое{display: flex; align-items: center; justify-content: center; aspect-ratio: var(--ratio-card); background-color: var(--bg-sunken); background-image: repeating-linear-gradient(135deg,var(--line) 0 var(--hair),transparent var(--hair) var(--stripe)); font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-3)}
[data-rk] .a-маркер-жёлтый{background: linear-gradient(180deg,transparent 58%,var(--warn-wash) 58%); padding: 0 var(--hair-2); border-radius: var(--r-xs); font-weight: 500}
[data-rk] .a-мысль-подложка{padding: var(--sp-5) var(--sp-6); border-radius: var(--r-lg); background: var(--brand-wash); border-left: var(--rail) solid var(--brand)}
[data-rk] .a-мысль-черта{padding-left: var(--sp-5); border-left: var(--rail) solid var(--brand)}
[data-rk] .a-мысль-кегль-обычный{font-size: var(--fs-lead); line-height: var(--lh-lead); font-weight: 500; text-wrap: pretty}
[data-rk] .a-мысль-кегль-крупный{font-size: var(--fs-s2); line-height: var(--lh-s2); font-weight: 300; text-wrap: pretty}
[data-rk] .a-страница404{display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-20) 0; max-width: var(--read)}
[data-rk] .a-код404{font-family: var(--font-mono); font-size: var(--fs-body); color: var(--ink-3)}
[data-rk] .a-заголовок404{font-size: var(--fs-d2); line-height: var(--lh-d2); font-weight: 600; letter-spacing: var(--track-tighter)}
[data-rk] .a-текст404{font-size: var(--fs-read); line-height: var(--lh-read); color: var(--ink-2)}
[data-rk] .a-ряд-кнопок404{display: flex; flex-wrap: wrap; gap: var(--sp-3); padding-top: var(--sp-2)}
[data-rk] .a-кнопка404-главная{height: var(--ctl-h-md); padding: 0 var(--sp-5); border-radius: var(--r-sm); background: var(--brand); color: var(--ink-on-brand); font-size: var(--fs-read); font-weight: 500}
[data-rk] .a-кнопка404-тихая{height: var(--ctl-h-md); padding: 0 var(--sp-5); border-radius: var(--r-sm); border: var(--hair) solid var(--line-strong); color: var(--ink); font-size: var(--fs-read); font-weight: 500}
[data-rk] .a-полоса-черновика{display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--band-pad); background: var(--warn-wash); color: var(--warn-ink); font-size: var(--fs-sm); line-height: var(--lh-sm); border-bottom: var(--hair) solid var(--line)}
[data-rk] .a-текст-черновика{flex: 1 1 0%; min-width: 0px}
@media (max-width: 767px){
[data-rk] .a-кнопка-войти{height: var(--ctl-h-md); font-size: var(--fs-read); padding: initial}
[data-rk] .a-кнопка-регистрация{margin-top: var(--sp-2); height: var(--ctl-h-md); font-size: var(--fs-read); padding: initial; box-shadow: initial}
[data-rk] .a-блок-плитки{grid-template-columns: 1fr}
[data-rk] .a-блок-карточки{grid-template-columns: 1fr}
[data-rk] .a-блок-цифры{grid-template-columns: 1fr}
[data-rk] .a-главная-статья{grid-template-columns: 1fr}
[data-rk] .a-лента-статей{grid-template-columns: 1fr}
[data-rk] .a-лента-пустая{grid-column: auto}
[data-rk] .a-сетка-тарифов{grid-template-columns: 1fr}
[data-rk] .a-сетка-на-линиях{grid-template-columns: 1fr}
[data-rk] .a-сетка-обложки{grid-template-columns: 1fr}
[data-rk] .a-плашка-показателей{grid-template-columns: 1fr}
[data-rk] .a-показатель{flex-direction: row; align-items: baseline}
[data-rk] .a-сетка-полосы-цифр{grid-template-columns: repeat(2, 1fr)}
[data-rk] .a-сетка-шагов{grid-template-columns: 1fr}
[data-rk] .a-сетка-отзывов{grid-template-columns: 1fr}
[data-rk] .a-блок-возможности{grid-template-columns: 1fr}
[data-rk] .a-врезка-гарантий{grid-template-columns: 1fr}
[data-rk] .a-ряд-гарантий{grid-template-columns: 1fr}
[data-rk] .a-блок-почему{grid-template-columns: 1fr}
[data-rk] .a-блок-не-делает{grid-template-columns: 1fr}
[data-rk] .a-блок-тарифы-коротко{grid-template-columns: 1fr}
}


/* Один в ряду — не «сетка из одного», а колонка: две пустые трети
   рядом с единственной карточкой читаются как недогруженная страница */
[data-rk] .a-в-ряду-1 { grid-template-columns: 1fr; }
[data-rk] .a-в-ряду-2 { grid-template-columns: repeat(2, 1fr); }
[data-rk] .a-в-ряду-3 { grid-template-columns: repeat(3, 1fr); }
[data-rk] .a-в-ряду-4 { grid-template-columns: repeat(4, 1fr); }
[data-rk] .a-одна-плитка { max-width: var(--read); }
@media (max-width: 1023px) {
  [data-rk] .a-в-ряду-3,
  [data-rk] .a-в-ряду-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  [data-rk] .a-в-ряду-2,
  [data-rk] .a-в-ряду-3,
  [data-rk] .a-в-ряду-4 { grid-template-columns: 1fr; }
}


[data-rk] h1, [data-rk] h2, [data-rk] h3, [data-rk] h4,
[data-rk] p, [data-rk] li, [data-rk] span, [data-rk] a,
[data-rk] figcaption, [data-rk] summary, [data-rk] blockquote {
  overflow-wrap: break-word;
}

[data-rk] .a-колонка-чтения > *,
[data-rk] .a-разделы-тарифов > *,
[data-rk] .a-блок-плитки > *,
[data-rk] .a-блок-карточки > *,
[data-rk] .a-сетка-на-линиях > *,
[data-rk] .a-блок-тарифы > *,
[data-rk] .a-полка-содержимое > *,
[data-rk] .a-сетка-тарифов > *,
[data-rk] .a-карточка-тарифа > * {
  min-width: 0;
}


/* Шапок две: полоса с меню и раскрывающийся список. Показывается одна.
   Граница та же, что у остальных переопределений ширины, — 767/768. */
@media (max-width: 767px) { [data-rk] .s-hdr-wide { display: none; } }
@media (min-width: 768px) { [data-rk] .s-hdr-narrow { display: none; } }


@media (max-width: 767px) {
  [data-rk] .a-разделитель-доверия,
  [data-rk] .a-разделитель-доверия + span { display: none; }
}


[data-rk] .a-блок-кнопка.s-al-center { justify-content: center; }
[data-rk] .a-блок-кнопка.s-al-right { justify-content: flex-end; }


[data-rk] { overflow-x: clip; }
[data-rk] .s-bleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
}


[data-rk] [data-d="карточка-тарифа"]:has([data-d="плашка-выбирают"]) {
  background: var(--dark);
  border-color: var(--dark-line);
  box-shadow: var(--shadow-3);
}
[data-rk] [data-d="карточка-тарифа"]:has([data-d="плашка-выбирают"]) .a-имена-кратко,
[data-rk] [data-d="карточка-тарифа"]:has([data-d="плашка-выбирают"]) .a-цена-кратко {
  color: var(--on-dark);
}
[data-rk] [data-d="карточка-тарифа"]:has([data-d="плашка-выбирают"]) .a-подпись-кратко,
[data-rk] [data-d="карточка-тарифа"]:has([data-d="плашка-выбирают"]) .a-срок-кратко,
[data-rk] [data-d="карточка-тарифа"]:has([data-d="плашка-выбирают"]) .a-потолки-кратко {
  color: var(--on-dark-2);
}
[data-rk] [data-d="карточка-тарифа"]:has([data-d="плашка-выбирают"]) .a-кнопка-кратко {
  background: var(--brand);
  color: var(--ink-on-brand);
  border-color: var(--brand);
}


[data-rk] .a-метка-ячейки {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}


[data-rk] .a-полотно-доводов {
  position: relative;
  overflow: hidden;
  background-color: var(--dark);
  background-image:
    linear-gradient(var(--dark-2) var(--hair), transparent var(--hair)),
    linear-gradient(90deg, var(--dark-2) var(--hair), transparent var(--hair));
  background-size: var(--grid-cell) var(--grid-cell);
  padding: var(--sp-16) 0;
}
[data-rk] .a-свечение-доводов {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 90% at 80% 0%, var(--dark-glow), transparent 66%);
  pointer-events: none;
}
[data-rk] .a-сетка-доводов {
  position: relative;
  max-width: var(--band);
  margin: 0 auto;
  padding: 0 var(--band-pad);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
}
[data-rk] .a-плитка-довода {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
  padding-left: var(--sp-5);
  border-left: var(--hair-2) solid var(--dark-line-2);
}
[data-rk] .a-число-довода {
  font-size: var(--fs-stat);
  line-height: var(--lh-stat);
  font-weight: 600;
  letter-spacing: var(--track-tighter);
  color: var(--on-dark);
  font-variant-numeric: tabular-nums;
}
[data-rk] .a-тело-довода { display: flex; flex-direction: column; gap: var(--hair-2); }
[data-rk] .a-заголовок-довода {
  font-size: var(--fs-read);
  line-height: var(--lh-read);
  font-weight: 600;
  color: var(--on-dark);
}
[data-rk] .a-подпись-довода {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--on-dark-3);
  text-wrap: pretty;
}
@media (max-width: 767px) {
  [data-rk] .a-сетка-доводов { grid-template-columns: 1fr; gap: var(--sp-6); }
}


[data-rk] .a-раздел-оговорок { display: flex; flex-direction: column; gap: var(--blk-gap); }
[data-rk] .a-шапка-карточек {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: var(--read);
}
[data-rk] .a-заголовок-карточек {
  font-size: var(--fs-d2);
  line-height: var(--lh-d2);
  font-weight: 600;
  letter-spacing: var(--track-tighter);
}
[data-rk] .a-подпись-карточек {
  font-size: var(--fs-read);
  line-height: var(--lh-read);
  color: var(--ink-2);
}
[data-rk] .a-сетка-оговорок {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-8);
}
[data-rk] .a-столбец-оговорки {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: var(--hair-2) solid var(--line-strong);
  min-width: 0;
}
[data-rk] .a-тело-оговорки { display: flex; flex-direction: column; gap: var(--sp-2); }
[data-rk] .a-заголовок-оговорки {
  font-size: var(--fs-s2);
  line-height: var(--lh-s2);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  text-wrap: pretty;
}
[data-rk] .a-текст-оговорки {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
  text-wrap: pretty;
}
@media (max-width: 767px) {
  [data-rk] .a-сетка-оговорок { grid-template-columns: 1fr; gap: var(--sp-6); }
}


[data-rk] .a-мелкий-шрифт { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
[data-rk] .a-мелкая-ссылка { color: var(--ink-3); text-decoration: none; }


[data-rk] .a-рег-обёртка {
  max-width: var(--band-narrow);
  margin: 0px auto;
  padding: var(--sp-14) 0 var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sec-gap);
}
[data-rk] .a-рег-сетка {
  display: grid;
  grid-template-columns: minmax(0px, 1.25fr) minmax(0px, 1fr);
  gap: var(--sec-gap);
  align-items: start;
}
[data-rk] .a-рег-колонка,
[data-rk] .a-рег-бок {
  display: flex;
  flex-direction: column;
  gap: var(--blk-gap);
  min-width: 0px;
}
[data-rk] .a-рег-шапка { display: flex; flex-direction: column; gap: var(--sp-3); }
[data-rk] .a-рег-заголовок {
  font-size: var(--fs-d2);
  line-height: var(--lh-d2);
  font-weight: 600;
  letter-spacing: var(--track-tighter);
  text-wrap: pretty;
  margin: 0;
}
[data-rk] .a-рег-подводка {
  font-size: var(--fs-read);
  line-height: var(--lh-read);
  color: var(--ink-2);
  text-wrap: pretty;
  margin: 0;
}
[data-rk] .a-рег-форма {
  display: flex;
  flex-direction: column;
  gap: var(--blk-gap);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  border: var(--hair) solid var(--line);
  box-shadow: var(--shadow-1);
}
[data-rk] .a-рег-поле { display: flex; flex-direction: column; gap: var(--sp-1); }
[data-rk] .a-рег-надпись { font-size: var(--fs-body); color: var(--ink-2); }
[data-rk] .a-рег-ввод {
  height: var(--ctl-h-md);
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--bg-surface);
  border: var(--hair) solid var(--line-strong);
  outline: none;
  color: var(--ink);
  font-size: var(--fs-read);
  font-family: var(--font);
}
[data-rk] .a-рег-пояснение {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-3);
}
[data-rk] .a-рег-согласие {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  cursor: pointer;
}
[data-rk] .a-рег-галочка {
  width: var(--box);
  height: var(--box);
  margin-top: var(--hair-2);
  flex: 0 0 auto;
  accent-color: var(--brand);
}
[data-rk] .a-рег-согласие-текст {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}
[data-rk] .a-рег-кнопка {
  height: var(--ctl-h-lg);
  border-radius: var(--r-md);
  background: var(--brand);
  color: var(--ink-on-brand);
  font-size: var(--fs-read);
  font-weight: 500;
  box-shadow: var(--shadow-1);
  border: 0px;
  font-family: var(--font);
  cursor: pointer;
}
[data-rk] .a-рег-под-кнопкой {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-3);
  text-align: center;
}
[data-rk] .a-рег-дальше {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--bg-sunken);
}
[data-rk] .a-рег-дальше-надпись,
[data-rk] .a-рег-пробный-надпись {
  font-size: var(--fs-body);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}
[data-rk] .a-рег-шаг { display: flex; gap: var(--sp-3); }
[data-rk] .a-рег-номер {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--step-n);
  height: var(--step-n);
  border-radius: var(--r-full);
  background: var(--bg-surface);
  color: var(--brand);
  font-size: var(--fs-body);
  font-weight: 600;
}
[data-rk] .a-рег-тело {
  display: flex;
  flex-direction: column;
  gap: var(--hair-2);
  min-width: 0px;
}
[data-rk] .a-рег-шаг-заголовок { font-size: var(--fs-body); font-weight: 600; }
[data-rk] .a-рег-шаг-текст {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
  text-wrap: pretty;
}
[data-rk] .a-рег-врезка {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--good-wash);
  border: var(--hair) solid color-mix(in oklab,var(--good) 25%,transparent);
}
[data-rk] .a-рег-врезка-тело { display: flex; flex-direction: column; gap: var(--sp-1); }
[data-rk] .a-рег-врезка-заголовок {
  font-size: var(--fs-read);
  line-height: var(--lh-read);
  font-weight: 600;
  color: var(--good-ink);
}
[data-rk] .a-рег-врезка-текст {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
}
[data-rk] .a-рег-пробный {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--bg-surface);
  border: var(--hair) solid var(--line);
}
[data-rk] .a-рег-пробный-число {
  font-size: var(--fs-d2);
  line-height: var(--lh-d2);
  font-weight: 600;
  letter-spacing: var(--track-tighter);
}
[data-rk] .a-рег-пробный-текст {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

/**
 * ОТКАЗ И УСПЕХ — СВОИХ УЗЛОВ В ЭТАЛОНЕ НЕТ.
 *
 * Дизайнер нарисовал форму в покое; что показать, когда почта занята
 * или пароль короткий, не нарисовано. Цвета взяты не с потолка,
 * а из набора эталона: отказ — «bad», успех — «good», те же самые
 * переменные, которыми нарисованы состояния в кабинете.
 * Записано вопросом № 49.
 */
[data-rk] .a-рег-беда {
  margin: 0;
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--bad-wash);
  border: var(--hair) solid color-mix(in oklab,var(--bad) 25%,transparent);
  color: var(--bad-ink);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
[data-rk] .a-рег-ушло {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--good-wash);
  border: var(--hair) solid color-mix(in oklab,var(--good) 25%,transparent);
}
[data-rk] .a-рег-ушло-заголовок {
  font-size: var(--fs-read);
  line-height: var(--lh-read);
  font-weight: 600;
  color: var(--good-ink);
}
[data-rk] .a-рег-ушло-текст {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
}

/* Единственное, что меняет эталон на 390: сетка в один столбец */
@media (max-width: 767px) {
  [data-rk] .a-рег-сетка { grid-template-columns: 1fr; }
}


[data-rk] .s-per { display: flex; flex-direction: column; gap: var(--sp-6); }


/* ПОЛОСА СТРОКОЙ УЖЕ КРУПНОЙ НА ШЕСТНАДЦАТЬ ПИКСЕЛЕЙ СВЕРХУ И СНИЗУ.
   Частица «a-блок-призыв» собрана с крупной полосы главной, где поле
   sp-16. У полосы на «Тарифах» эталон ставит sp-14, и разница ровно
   та, что показал замер: 220 против 188. */
[data-rk] .a-блок-призыв:has(> .a-строка-призыва) { padding: var(--sp-14) 0; }
[data-rk] .a-строка-призыва {
  position: relative;
  max-width: var(--band);
  margin: 0px auto;
  padding: 0 var(--band-pad);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-6);
}
[data-rk] .a-слова-призыва {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0px;
  flex: 1 1 0%;
}
[data-rk] .a-заголовок-строки {
  font-size: var(--fs-s2);
  line-height: var(--lh-s2);
  font-weight: 600;
  letter-spacing: var(--track-tight);
  color: var(--on-dark);
  text-wrap: pretty;
}
[data-rk] .a-лид-строки {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--on-dark-3);
}
[data-rk] .a-кнопка-строки {
  height: var(--ctl-h-lg);
  padding: 0 var(--sp-6);
  border-radius: var(--r-md);
  background: var(--bg-surface);
  color: var(--dark);
  font-size: var(--fs-read);
  font-weight: 600;
}
[data-rk] .a-блок-входит,
[data-rk] .a-раздел-вопросов { display: flex; flex-direction: column; gap: var(--blk-gap); }

/* ВОПРОС В РАЗДЕЛЕ СТРАНИЦЫ ДЫШИТ ШИРЕ, ЧЕМ В СТАТЬЕ.
   Частица «a-вопрос-шапка» собрана со статьи: там поле sp-4.
   На «Тарифах» эталон ставит sp-5, и на пяти вопросах это ровно сорок
   пикселей — та самая разница, что показал замер (360 против 400).
   Правило узкое нарочно: только внутри раздела с заголовком, то есть
   там, где вопросы — самостоятельный раздел страницы, а не список
   в конце статьи. */
[data-rk] .a-раздел-вопросов .a-вопрос-шапка { padding: var(--sp-5) 0; }
[data-rk] .a-раздел-вопросов .a-блок-вопросы { max-width: none; }
[data-rk] .a-сетка-плиток {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--hair);
  background: var(--line);
  border: var(--hair) solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
[data-rk] .a-плитка-оплаты {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-8);
  background: var(--bg-surface);
}
[data-rk] .a-знак-плитки {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: var(--ico-in);
}
[data-rk] .a-заголовок-плитки {
  font-size: var(--fs-s2);
  line-height: var(--lh-s2);
  font-weight: 600;
  letter-spacing: var(--track-tight);
}
[data-rk] .a-текст-плитки {
  font-size: var(--fs-read);
  line-height: var(--lh-read);
  color: var(--ink-2);
  text-wrap: pretty;
}
@media (max-width: 767px) {
  [data-rk] .a-сетка-плиток { grid-template-columns: 1fr; }
}


/* Скидка первой оплаты — капсулой, оговорка — строкой. Объявления
   из эталона: на светлой карточке подложка «brand-wash» и цвет марки. */
[data-rk] .a-скидка-капсулой {
  height: var(--chip-h-md);
  padding: 0 var(--sp-3);
  background: var(--brand-wash);
  color: var(--brand);
}
[data-rk] .a-карточка-тарифа-тёмная {
  background: var(--dark);
  border-color: var(--dark-line);
  box-shadow: var(--shadow-3);
}
[data-rk] .a-карточка-тарифа-тёмная .a-название-тарифа { color: var(--on-dark); }
[data-rk] .a-карточка-тарифа-тёмная .a-пояснения-тарифа { color: var(--on-dark-2); }
[data-rk] .a-карточка-тарифа-тёмная .a-число-цены { color: var(--on-dark); }
[data-rk] .a-карточка-тарифа-тёмная .a-срок-цены { color: var(--on-dark-2); }
[data-rk] .a-карточка-тарифа-тёмная .a-строка-скидки { color: var(--on-dark-3); }
[data-rk] .a-карточка-тарифа-тёмная .a-скидка-капсулой {
  background: var(--dark-3);
  color: var(--on-dark);
}
[data-rk] .a-карточка-тарифа-тёмная .a-потолки-тарифа { border-top-color: var(--dark-line); }
[data-rk] .a-карточка-тарифа-тёмная .a-надпись-потолков { color: var(--on-dark-2); }
[data-rk] .a-карточка-тарифа-тёмная .a-капсула-потолка {
  background: var(--dark-3);
  border-color: var(--dark-line);
  color: var(--on-dark-2);
}
[data-rk] .a-карточка-тарифа-тёмная .a-список-входит { border-top-color: var(--dark-line); }
[data-rk] .a-карточка-тарифа-тёмная .a-пункт-входит,
[data-rk] .a-карточка-тарифа-тёмная .a-пункт-не-входит { color: var(--on-dark-2); }


[data-rk] .a-подпись-меток { font-size: var(--fs-sm); color: var(--ink-3); padding-right: var(--sp-1); }


[data-rk] .a-надпись-оглавления { font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
[data-rk] .a-пункт-оглавления { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); text-decoration: none; padding-left: 0; }
[data-rk] .a-пункт-оглавления-вложенный { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); text-decoration: none; padding-left: var(--sp-4); }


[data-rk] .a-автор-статьи { display: flex; align-items: center; gap: var(--sp-2); }
[data-rk] .a-кружок-автора { width: var(--logo-xs); height: var(--logo-xs); border-radius: var(--r-full); background: var(--brand); color: var(--ink-on-brand); display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: 600; }
[data-rk] .a-имя-автора { color: var(--ink-2); }


[data-rk] .a-кнопка-блока.s-btn-quiet { background: var(--bg-surface); border: var(--hair) solid var(--line-strong); color: var(--ink); }
[data-rk] .a-кнопка-блока.s-btn-outline { background: transparent; border: var(--hair) solid var(--btn, var(--brand)); color: var(--btn, var(--brand)); }
[data-rk] .a-кнопка-блока.s-btn-main { background: var(--btn, var(--brand)); border: var(--hair) solid var(--btn, var(--brand)); color: var(--btn-ink, var(--ink-on-brand)); }


[data-rk] .s-lad { flex: 1 1 200px; display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
[data-rk] .s-lad-t { font-size: var(--fs-xs); line-height: var(--lh-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); font-weight: 600; white-space: nowrap; }
[data-rk] .s-stepper { height: var(--ctl-h-md); padding: var(--pad-hair); border-radius: var(--r-md); background: var(--bg-sunken); }
[data-rk] .s-dec, [data-rk] .s-inc { flex: 0 0 var(--step-btn); height: 100%; display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm); font-size: var(--fs-read); color: var(--ink-2); cursor: pointer; }
[data-rk] .s-val { flex: 1 1 auto; min-width: 0; text-align: center; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ЛЕСТНИЦА ИЗ ОДНОЙ СТУПЕНИ — ПОЛЕ БЕЗ КНОПОК ТОЙ ЖЕ ВЫСОТЫ.
   Пустого счётчика с двумя погашенными кнопками не бывает (ТЗ 6.1). */
[data-rk] .s-one { display: flex; align-items: center; justify-content: center; height: var(--ctl-h-md); padding: 0 var(--sp-3); border-radius: var(--r-md); background: var(--bg-sunken); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Тёмная карточка: обойма и поле темнее, подписи и знаки светлее. */
[data-rk] .s-plan-dark .s-conf { border-top-color: var(--dark-line); }
[data-rk] .s-plan-dark .s-lad-t { color: var(--on-dark-2); }
[data-rk] .s-plan-dark .s-stepper, [data-rk] .s-plan-dark .s-one { background: var(--dark-3); color: var(--on-dark); }
[data-rk] .s-plan-dark .s-val { color: var(--on-dark); }
[data-rk] .s-plan-dark .s-dec, [data-rk] .s-plan-dark .s-inc { color: var(--on-dark-2); }