/* Компоненты и экраны сайта «Три Дерева».
   Перенос design/tridereva/components/*.jsx и ui_kits/website/*.jsx в CSS-классы:
   инлайн-стили JSX стали правилами, React-состояния (hover/press/focus) —
   псевдоклассами. Значения берутся ТОЛЬКО из токенов (assets/tokens.css). */

/* ——— Служебное ——— */
.ic { display: inline-flex; flex: 0 0 auto; }
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
img { max-width: 100%; }

/* Высота липкой шапки. Считается из тех же токенов, из которых она собрана
   (логотип + вертикальные отступы + рамка), и нужна двум местам: якорям секций
   и липкой карточке покупки, чтобы они не уезжали под шапку. */
:root { --site-header-h: calc(var(--space-12) + 2 * var(--space-4) + 1px); }

/* Сколько места занимает снизу плавающая кнопка виджета чата: её высота (56 px)
   плюс отступ от края окна (24 px). Оба числа принадлежат виджету
   (packages/chat-widget: .launcher, --cw-offset) и повторены здесь одной
   переменной — правило, которое отодвигает от неё подвал, живёт в разделе
   SiteFooter. */
:root { --chat-launcher-safe: 80px; }

/* ——— Контейнеры и секции (data.jsx → Section) ——— */
.container { max-width: var(--container-max); margin: 0 auto; padding-left: var(--gutter-desktop); padding-right: var(--gutter-desktop); }
.container--narrow { max-width: var(--container-narrow); }
/* Переход по якорю (#svobodnaya-summa) не должен прятать заголовок под шапкой. */
.section { background: var(--surface-page); scroll-margin-top: calc(var(--site-header-h) + var(--space-4)); }
.section--subtle { background: var(--surface-subtle); }
.section__inner { padding-top: var(--space-20); padding-bottom: var(--space-20); }
.section__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-6); margin-bottom: var(--space-8);
}
.section__title { font-family: var(--font-display); font-size: var(--text-2xl); margin: 0; }
.eyebrow {
  font-family: var(--font-ui); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-faint); margin-bottom: var(--space-2);
}
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); align-items: stretch; }
.page-head { padding-top: var(--space-16); }
.page-head--tight { padding-top: var(--space-12); }
.page-tail { padding-bottom: var(--space-20); }
.page-head__title { font-family: var(--font-display); font-size: var(--text-4xl); margin: 0; }
.page-head__lead {
  font-family: var(--font-ui); font-size: var(--text-md); color: var(--text-muted);
  margin: var(--space-4) 0 0; max-width: 56ch; text-wrap: pretty;
}

/* ——— Button (core/Button.jsx) ——— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; height: 44px; padding: 0 calc(var(--space-5) + var(--space-1));
  font-family: var(--font-ui); font-size: var(--text-base); font-weight: var(--weight-semibold);
  line-height: 1; border-radius: var(--radius-pill); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: var(--transition-control); outline: none;
}
.btn:hover { text-decoration: none; }
.btn--sm { min-height: 36px; height: 36px; padding: 0 calc(var(--space-3) + var(--space-1)); font-size: var(--text-sm); }
.btn--lg { min-height: 56px; height: 56px; padding: 0 calc(var(--space-6) + var(--space-1)); font-size: var(--text-md); }
.btn--block { width: 100%; }
.btn:not(.is-disabled):hover { transform: translateY(-1px); }
.btn:not(.is-disabled):active { transform: translateY(0) scale(var(--press-scale)); }
.btn:focus-visible { box-shadow: var(--ring-focus); }

.btn--primary { background: var(--accent); color: var(--text-inverse); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }
.btn--primary:hover { background: var(--accent-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), var(--shadow-brand); }
.btn--primary:active { background: var(--accent-active); }
.btn--primary:focus-visible { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), var(--ring-focus); }

.btn--secondary { background: var(--white); color: var(--accent-hover); border-color: var(--border-default); }
.btn--secondary:hover { background: var(--green-50); border-color: var(--green-500); }

.btn--ghost { background: transparent; color: var(--accent-hover); }
.btn--ghost:hover { background: var(--green-50); }

.btn--quiet { background: var(--ink-50); color: var(--text-body); }
.btn--quiet:hover { background: var(--ink-100); }

.btn.is-disabled,
.btn:disabled { background: var(--ink-200); color: var(--ink-500); cursor: not-allowed; box-shadow: none; transform: none; }
.btn--secondary.is-disabled { background: var(--ink-100); color: var(--ink-400); border-color: var(--border-subtle); }

.btn--back { margin-left: calc(var(--space-1) * -1); }

/* ——— Card (core/Card.jsx) ——— */
.card {
  display: block; padding: var(--space-6); border-radius: var(--radius-card);
  border: 1px solid var(--border-subtle); background: var(--surface-card);
  text-decoration: none; color: inherit;
  transition: box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard),
    border-color var(--duration-base) var(--ease-standard);
}
.card--subtle { background: var(--surface-subtle); }
.card--brand { background: var(--surface-brand-soft); border-color: var(--green-200); }
.card--interactive:hover {
  box-shadow: var(--shadow-md); transform: translateY(-2px);
  border-color: var(--border-default); text-decoration: none;
}
.card--dashed {
  border-style: dashed; color: var(--text-faint);
  display: grid; gap: var(--space-2); align-content: center;
}
.card--dashed span:first-child { font-family: var(--font-ui); font-size: var(--text-sm); }
.card--dashed span + span { font-family: var(--font-ui); font-size: var(--text-xs); }

/* ——— Badge (core/Badge.jsx) ——— */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 3px 10px; border-radius: var(--radius-pill);
  font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: var(--weight-medium);
  line-height: 1.5; white-space: nowrap;
  background: var(--ink-100); color: var(--ink-700);
}
.badge--brand { background: var(--green-50); color: var(--green-700); }
.badge--yellow { background: color-mix(in oklch, var(--brand-yellow) 28%, white); color: #6b4e00; }
.badge--blue { background: var(--info-soft); color: #0a6f8c; }
.badge--warning { background: var(--warning-soft); color: #8a5200; }
.badge--danger { background: var(--danger-soft); color: var(--danger); }

/* ——— Tag (core/Tag.jsx) ——— */
.tag {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-4);
  border-radius: var(--radius-pill); border: 1px solid var(--border-default);
  background: var(--white); color: var(--text-body);
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-medium);
  text-decoration: none; transition: var(--transition-control);
}
a.tag:hover { background: var(--ink-50); text-decoration: none; }
.tag.is-active { border: 2px solid var(--green-500); background: var(--green-50); color: var(--green-800); }

/* ——— Amount (core/Amount.jsx) ——— */
.amount {
  display: inline-flex; align-items: baseline; gap: var(--space-2);
  font-family: var(--type-amount-font); font-size: var(--text-3xl);
  font-weight: var(--weight-semibold); color: var(--text-heading);
  letter-spacing: var(--tracking-tight);
}
/* В ките размер sm у Amount не задан и наследуется — повторяем это поведение. */
.amount--sm { font-size: var(--text-base); }
.amount--md { font-size: var(--text-xl); }
.amount--lg { font-size: var(--text-3xl); }
.amount--xl { font-size: var(--text-4xl); }
.amount--muted { color: var(--text-muted); }
.amount__period { font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--text-muted); }

/* ——— Divider (core/Divider.jsx) ——— */
.divider { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-6) 0; }
.divider--loose { margin: var(--space-10) 0; }

/* ——— Alert (feedback/Alert.jsx) ——— */
.alert {
  display: flex; gap: var(--space-3); padding: var(--space-4);
  border-radius: var(--radius-md); border: 1px solid;
  font-family: var(--font-ui); font-size: var(--text-sm); line-height: var(--leading-normal);
  background: var(--info-soft); border-color: #8ed6ef; color: #0a5f78;
}
.alert--success { background: var(--success-soft); border-color: var(--green-200); color: var(--green-800); }
.alert--warning { background: var(--warning-soft); border-color: #f6cf8e; color: #8a5200; }
.alert--danger { background: var(--danger-soft); border-color: #f0b7ab; color: var(--danger); }
.alert .ic { margin-top: 1px; }
.alert__title { font-weight: var(--weight-semibold); margin-bottom: 2px; }

/* ——— StatusPill (feedback/StatusPill.jsx) ——— */
.pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 6px 14px 6px 10px; border-radius: var(--radius-pill);
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-medium);
  line-height: 1.4; background: var(--ink-100); color: var(--ink-700);
}
.pill--paid { background: var(--success-soft); color: var(--green-800); }
.pill--cancelled { background: var(--danger-soft); color: var(--danger); }
.pill--expired { background: var(--warning-soft); color: #8a5200; }

/* ——— Формы (forms/Input.jsx, Textarea.jsx, Checkbox.jsx) ——— */
.field { display: block; font-family: var(--font-ui); }
.field__label {
  display: block; font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--text-body); margin-bottom: var(--space-2);
}
.field__box {
  display: flex; align-items: center; gap: var(--space-2); min-height: 44px;
  padding: 0 var(--space-4); background: var(--white);
  border: 1px solid var(--border-default); border-radius: var(--radius-input);
  transition: var(--transition-control);
}
/* Фокус поля рисует ОДНА рамка — обёртка .field__box: её граница зеленеет и
   вокруг неё ложится кольцо --ring-focus, оба по радиусу --radius-input.

   Гашение внутреннего кольца обязательно. tokens/base.css дизайн-системы задаёт
   :focus-visible { box-shadow: var(--ring-focus) } для ЛЮБОГО контрола, а поле
   ввода у нас вложено в рамку: браузер рисовал кольцо и вокруг обёртки, и
   вокруг самого <input>. Прямоугольник у input'а свой — он уже обёртки на её
   горизонтальные отступы, — и радиус свой, --radius-xs. Отсюда две зелёные
   обводки, не совпадающие ни размером, ни скруглением.

   Гасим именно внутреннее кольцо, а не глобальное правило: для кнопок, ссылок
   и чекбоксов оно остаётся единственным источником видимого фокуса. */
.field__box:focus-within { border-color: var(--green-500); box-shadow: var(--ring-focus); }
.field__box input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font: inherit; font-size: var(--text-base); color: var(--text-body); padding: 10px 0;
}
.field__box input:focus-visible { box-shadow: none; }
.field textarea {
  display: block; width: 100%; padding: var(--space-3) var(--space-4); resize: vertical;
  font-family: var(--font-ui); font-size: var(--text-base); line-height: var(--leading-normal);
  color: var(--text-body); background: var(--white);
  border: 1px solid var(--border-default); border-radius: var(--radius-input);
  outline: none; transition: var(--transition-control);
}
/* Комментарий — сам себе рамка, вложенного контрола у него нет, поэтому кольцо
   одно и без правки. Радиус повторён явно: иначе фокус-состояние зависело бы от
   того, чей селектор специфичнее — наш или глобальный :focus-visible, который
   ставит --radius-xs. */
.field textarea:focus {
  border-color: var(--green-500); box-shadow: var(--ring-focus); border-radius: var(--radius-input);
}
.field__hint { display: block; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.check {
  display: inline-flex; align-items: flex-start; gap: var(--space-3); cursor: pointer;
  font-family: var(--font-ui); font-size: var(--text-sm);
  line-height: var(--leading-normal); color: var(--text-body);
}
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  display: flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  flex: 0 0 auto; margin-top: 1px; border-radius: var(--radius-sm); color: var(--white);
  background: var(--white); border: 1px solid var(--border-default);
  transition: var(--transition-control);
}
.check__box .ic { opacity: 0; }
.check input:checked + .check__box { background: var(--accent); border: 2px solid var(--accent); }
.check input:checked + .check__box .ic { opacity: 1; }
.check input:focus-visible + .check__box { box-shadow: var(--ring-focus); }

/* Радиокнопка (forms/Radio.jsx). Состояние «выбрано» рисует CSS по :checked —
   скриптов на сайте нет вовсе (CSP script-src 'none'). */
.radio {
  display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer;
  font-family: var(--font-ui);
}
.radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio__box {
  display: flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  flex: 0 0 auto; margin-top: 1px; border-radius: 50%; background: var(--white);
  border: 1px solid var(--border-default); transition: var(--transition-control);
}
.radio__box::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); opacity: 0; transition: var(--transition-control);
}
.radio input:checked + .radio__box { border: 2px solid var(--accent); }
.radio input:checked + .radio__box::after { opacity: 1; }
.radio input:focus-visible + .radio__box { box-shadow: var(--ring-focus); }
.radio__label { display: block; font-size: var(--text-sm); color: var(--text-body); }
.radio__hint { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }

/* Чип-переключатель: вид core/Tag.jsx, поведение радиокнопки. */
.chip-choice { display: inline-flex; cursor: pointer; }
.chip-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip-choice input:checked + .tag {
  border: 2px solid var(--green-500); background: var(--green-50); color: var(--green-800);
}
.chip-choice input:focus-visible + .tag { box-shadow: var(--ring-focus); }

/* Группа полей: legend в роли подписи поля, без рамки браузера по умолчанию. */
.field-group { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.field-group > legend { padding: 0; }
.field__prefix { color: var(--text-faint); font-size: var(--text-base); font-family: var(--font-ui); }
.field__box--invalid { border-color: var(--danger); }

/* ——— SiteHeader (navigation/SiteHeader.jsx) ———
   Шапка прилипает к верху на обоих брейкпоинтах (правки №2). Фон непрозрачный,
   поэтому контент под ней не просвечивает и подложка с блюром не нужна.
   z-index: шкалы слоёв в дизайн-системе нет, а перекрывающихся элементов на
   сайте ровно два — шапка и липкая карточка покупки; шапка выше. */
.site-header {
  position: sticky; top: 0; z-index: 10;
  border-bottom: 1px solid var(--border-subtle); background: var(--surface-page);
}
.site-header__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6);
  padding-top: var(--space-4); padding-bottom: var(--space-4);
}
/* flex: 0 0 auto — иначе на узком экране колонка логотипа сжимается, а картинка
   вслед за ней (img { max-width: 100% }) вытягивается в «спичку». */
.site-header__logo { display: inline-flex; flex: 0 0 auto; }
.site-header__logo img { height: var(--space-12); width: auto; display: block; }
/* Заголовок по центру и бургер — только мобильная раскладка (см. медиазапрос). */
.site-header__title { display: none; }
.site-header__toggle { display: none; }
.site-header__burger { display: none; }
.site-nav { display: flex; align-items: center; gap: var(--space-6); }
.navlink {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-1);
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--text-body); text-decoration: none; transition: var(--transition-control);
}
.navlink:hover { color: var(--accent-hover); text-decoration: none; }
.navlink.is-active { font-weight: var(--weight-semibold); color: var(--green-800); box-shadow: inset 0 -2px 0 var(--green-500); }

/* ——— SiteFooter (navigation/SiteFooter.jsx) ——— */
.site-footer { margin-top: var(--space-16); }
.site-footer__band { background: var(--surface-subtle); border-top: 1px solid var(--border-subtle); }
.site-footer__cols {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-10);
  align-items: start; padding-top: var(--space-12); padding-bottom: var(--space-10);
}
.site-footer__brand { display: grid; gap: var(--space-4); justify-items: start; }
/* Логотип подвала — вдвое крупнее шапки: 80 px (--space-20) против 48 px. */
.site-footer__brand img { height: var(--space-20); width: auto; display: block; }
.site-footer__tagline {
  font-family: var(--font-display); font-size: var(--text-md); line-height: var(--leading-snug);
  color: var(--text-body); margin: 0; max-width: 24ch; text-wrap: balance;
}
.col-title {
  font-family: var(--font-ui); font-size: var(--text-2xs); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--text-faint); font-weight: var(--weight-semibold);
  margin-bottom: var(--space-3);
}
.col-list { display: grid; gap: var(--space-2); font-family: var(--font-ui); font-size: var(--text-sm); }
.col-list a { color: var(--text-muted); }
.site-footer__legal {
  font-family: var(--font-ui); font-size: var(--text-xs);
  line-height: var(--leading-relaxed); color: var(--text-muted);
}
.site-footer__bar { border-top: 1px solid var(--border-subtle); }
.site-footer__bar-inner {
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; align-items: center;
  padding-top: var(--space-4); padding-bottom: var(--space-4);
  font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint);
}
.site-footer__secure { display: inline-flex; align-items: center; gap: var(--space-2); }

/* ——— Запас под плавающую кнопку виджета чата ———

   Кнопка висит в правом нижнем углу ОКНА (position: fixed): 56 px высоты плюс
   24 px отступа от края — нижние 80 px справа заняты всегда. Пока страница
   длинная, она перекрывает фон; в самом низу под ней оказывается последняя
   строка подвала — копирайт и «Платежи защищены ЮKassa».

   Ширина спасает только на широком экране: содержимое лежит в контейнере
   1120 px, поэтому от 1280 px (1120 + 2×80) кнопка не достаёт до текста вовсе.
   Ниже этого — отодвигаем строку вверх ровно на высоту кнопки. Значение задано
   переменной, а не числом в правиле: оно приходит из виджета
   (packages/chat-widget, .launcher + --cw-offset), и правка в двух местах
   разошлась бы молча. */
@media (max-width: 1279px) {
  .site-footer__bar-inner { padding-bottom: calc(var(--space-4) + var(--chat-launcher-safe)); }
}

/* ——— Hero главной (screens.jsx → HomeScreen) ——— */
.hero { background: linear-gradient(180deg, var(--green-50) 0%, var(--surface-page) 100%); }
.hero__inner {
  padding-top: var(--space-20); padding-bottom: var(--space-16);
  display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-12); align-items: center;
}
.hero__pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-ui); font-size: var(--text-xs); font-weight: var(--weight-medium);
  color: var(--green-700); background: var(--white); border: 1px solid var(--green-200);
  border-radius: var(--radius-pill); padding: var(--space-1) var(--space-3); white-space: nowrap;
}
.hero__title {
  font-family: var(--font-display); font-size: var(--text-5xl); line-height: 1.08;
  letter-spacing: var(--tracking-tight); margin: var(--space-5) 0 0;
  max-width: 18ch; text-wrap: balance;
}
.hero__lead {
  font-family: var(--font-ui); font-size: var(--text-md); line-height: var(--leading-relaxed);
  color: var(--text-muted); margin: var(--space-5) 0 0; max-width: 48ch; text-wrap: pretty;
}
.hero__actions { display: flex; gap: var(--space-3); margin-top: var(--space-8); flex-wrap: wrap; align-items: center; }
.hero__links { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-6); }
.arrow-link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-medium);
}
.hero__photo { justify-self: end; position: relative; }
.hero__photo img {
  width: 100%; max-width: 380px; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center;
  border-radius: var(--radius-xl); display: block; box-shadow: var(--shadow-lg);
}
.hero__plate {
  position: absolute; left: var(--space-4); bottom: var(--space-4); right: var(--space-4);
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px);
  border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
  display: grid; gap: 2px;
}
.hero__plate-name {
  font-family: var(--font-display); font-size: var(--text-base);
  font-weight: var(--weight-semibold); color: var(--text-heading);
}
.hero__plate-role { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); }

/* ——— ProductCard (patterns/ProductCard.jsx) ——— */
.product-card { display: flex; flex-direction: column; gap: var(--space-3); position: relative; }
.product-card--featured { border-color: var(--accent); box-shadow: var(--shadow-brand); }
.product-card__ribbon {
  position: absolute; top: calc(-1 * var(--space-3)); left: var(--space-5);
  font-family: var(--font-ui); font-size: var(--text-2xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-inverse);
  background: var(--accent); border-radius: var(--radius-pill); padding: 4px 10px;
}
.product-card__meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.product-card__logo { width: 18px; height: 18px; border-radius: 4px; object-fit: cover; }
.product-card__service { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); }
.product-card__title {
  font-family: var(--font-display); font-size: var(--text-md);
  font-weight: var(--weight-semibold); color: var(--text-heading); margin: 0;
}
.product-card__title a { color: inherit; text-decoration: none; }
.product-card__desc {
  font-family: var(--font-ui); font-size: var(--text-sm); line-height: var(--leading-relaxed);
  color: var(--text-muted); margin: 0; flex: 1; text-wrap: pretty;
}
.product-card__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-2); flex-wrap: wrap;
}
.product-card__price { display: grid; gap: 2px; }
.product-card__note { font-family: var(--font-ui); font-size: var(--text-2xs); color: var(--text-faint); }
.product-card__actions { display: flex; gap: var(--space-2); align-items: center; }

/* ——— ServiceCard (patterns/ServiceCard.jsx) ——— */
.service-card { display: grid; gap: var(--space-3); }
/* Знак-баннер в верхней части карточки (правки №2). Ширина слота — вся
   внутренняя ширина карточки, высота равна ширине: размер знака задаёт колонка
   витрины, а не подобранное число пикселей, поэтому одно правило работает и на
   трёх колонках десктопа, и на одной колонке мобильного, и на карточках, которых
   ещё нет. Плашка белая с тонкой рамкой — как требует брендбук для чужого знака
   на неоднородном фоне; внутренний отступ 16 px (--space-4).
   Слот одинаков и у сервиса с логотипом, и у сервиса без него — так названия
   карточек в ряду стоят на одной линии. */
.service-card__mark {
  display: flex; align-items: center; justify-content: center;
  width: 100%; aspect-ratio: 1 / 1; padding: var(--space-4);
  margin-bottom: var(--space-1); overflow: hidden;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  background: var(--white);
}
/* contain, а не cover: логотип нельзя обрезать, у него своя пропорция. */
.service-card__logo { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Сервис без логотипа: акцентная полоска бренда по центру слота. Рисовать за
   сервис его знак дизайн-система запрещает, поэтому «крупного знака» здесь нет
   и быть не может — только фирменный цвет. */
.tile__fallback { width: var(--space-20); height: var(--space-3); border-radius: var(--radius-pill); display: block; }
.service-card__name {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: var(--weight-semibold); color: var(--text-heading); margin: 0;
}
.service-card__desc {
  font-family: var(--font-ui); font-size: var(--text-sm); line-height: var(--leading-relaxed);
  color: var(--text-muted); margin: 0; text-wrap: pretty;
}
.service-card__link {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-ui); font-size: var(--text-sm);
  font-weight: var(--weight-medium); color: var(--accent-hover);
}

/* ——— PostCard (patterns/PostCard.jsx) ——— */
.post-card { display: grid; gap: var(--space-2); }
.post-card time {
  font-family: var(--font-ui); font-size: var(--text-2xs);
  color: var(--text-faint); letter-spacing: var(--tracking-wide);
}
.post-card__title {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: var(--weight-semibold); color: var(--text-heading); margin: 0; text-wrap: balance;
}
.post-card__excerpt {
  font-family: var(--font-ui); font-size: var(--text-sm); line-height: var(--leading-relaxed);
  color: var(--text-muted); margin: 0; text-wrap: pretty;
}

/* ——— FounderBlock (patterns/FounderBlock.jsx) ——— */
.founder { display: flex; flex-direction: row; gap: var(--space-6); align-items: flex-start; }
.founder img {
  width: 128px; height: 128px; border-radius: var(--radius-pill);
  object-fit: cover; object-position: top center; flex: 0 0 auto;
}
.founder__body { display: grid; gap: var(--space-2); }
.founder__name {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: var(--weight-semibold); color: var(--text-heading);
}
.founder__role { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-muted); }
.founder__text {
  font-family: var(--font-ui); font-size: var(--text-base); line-height: var(--leading-relaxed);
  color: var(--text-body); margin: 0; max-width: 60ch; text-wrap: pretty;
}
.founder__links { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-1); }

/* ——— Партнёрская программа (HomeScreen) ——— */
.partner {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-10); align-items: center;
  background: var(--surface-brand-soft); border: 1px solid var(--green-200);
  border-radius: var(--radius-xl); padding: var(--space-10);
}
.partner__title {
  font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--leading-snug);
  margin: 0; max-width: 26ch; text-wrap: balance;
}
.partner__terms {
  font-family: var(--font-ui); font-size: var(--text-sm); line-height: var(--leading-relaxed);
  color: var(--text-muted); margin: var(--space-4) 0 0; max-width: 52ch; text-wrap: pretty;
}
.partner__cta { margin-top: var(--space-6); }
/* Плашки условий (правки №2). В ките их было две и они делили колонку пополам;
   условие осталось одно, и жёсткие «1fr 1fr» держали его в тесной половине —
   цифра выглядела мелко, а подпись переносилась по словам при пустой второй
   половине. auto-fit отдаёт единственной плашке всю ширину колонки и сам
   вернёт две в ряд, если условий снова станет два: 2 × --space-32 = 256 px —
   минимум, ниже которого подпись всё-таки начинает переноситься. */
.partner__stats {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--space-32) * 2)), 1fr));
}
.partner__stat {
  background: var(--white); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl); padding: var(--space-8);
  display: grid; gap: var(--space-3); align-content: center;
}
.partner__num {
  font-family: var(--font-display); font-size: var(--text-6xl);
  font-weight: var(--weight-semibold); color: var(--green-700);
  line-height: 1; letter-spacing: var(--tracking-tight);
}
.partner__cap {
  font-family: var(--font-ui); font-size: var(--text-md); line-height: var(--leading-snug);
  color: var(--text-muted); text-wrap: balance;
}

/* ——— Свободная сумма (FreePayCard) ——— */
.freepay { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: stretch; }
.freepay--compact { grid-template-columns: 1fr; max-width: 640px; gap: var(--space-5); }
.freepay__col { display: grid; gap: var(--space-5); align-content: start; }
.freepay__text {
  font-family: var(--font-ui); font-size: var(--text-sm); line-height: var(--leading-relaxed);
  color: var(--text-muted); margin: 0; text-wrap: pretty;
}
.freepay__chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.freepay__purposes { display: grid; gap: var(--space-3); }
/* Комментарий и кнопка прижаты книзу колонки: в макете кнопка стоит под полем. */
.freepay__aside { display: grid; gap: var(--space-4); align-content: start; }
.freepay__aside .field textarea { min-height: 120px; }
.freepay__back { margin-top: var(--space-6); }

/* ——— Страница сервиса (ServiceScreen) ——— */
.service-head { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-8); }
.service-head img {
  width: 56px; height: 56px; border-radius: var(--radius-md); object-fit: cover;
  border: 1px solid var(--border-subtle); background: var(--white);
}
.service-head__title { font-family: var(--font-display); font-size: var(--text-4xl); margin: 0; }
.service-head__domain { font-family: var(--font-ui); font-size: var(--text-sm); }
.packs { padding-top: var(--space-3); }
/* Сервис с собственной оплатой: вместо витрины — объяснение и переход на сайт. */
.service-own { display: grid; gap: var(--space-5); justify-items: start; max-width: var(--container-narrow); }
.singles-note {
  font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-muted);
  margin: calc(-1 * var(--space-4)) 0 var(--space-5);
}
.singles { display: grid; gap: var(--space-2); }
.single {
  display: flex; align-items: center; gap: var(--space-4);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--white); padding: var(--space-3) var(--space-4);
}
.single__title { flex: 1; font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-body); }

/* ——— Страница товара (ProductScreen) ——— */
.product { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-12); align-items: start; margin-top: var(--space-8); }
.product__meta { display: flex; align-items: center; gap: var(--space-2); }
.product__service { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); }
.product__title { font-family: var(--font-display); font-size: var(--text-3xl); margin: var(--space-4) 0 0; text-wrap: balance; }
.product__lead {
  font-family: var(--font-ui); font-size: var(--text-md); line-height: var(--leading-relaxed);
  color: var(--text-body); margin: var(--space-5) 0 0; max-width: 58ch; text-wrap: pretty;
}
.product__list { margin: var(--space-6) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
.product__list li {
  display: flex; gap: var(--space-3); align-items: flex-start;
  font-family: var(--font-ui); font-size: var(--text-sm);
  line-height: var(--leading-normal); color: var(--text-body);
}
.product__list .ic { color: var(--green-600); flex-shrink: 0; margin-top: 1px; }
/* Карточка покупки липнет ниже шапки, а не под неё (шапка стала sticky). */
.product__buy { display: grid; gap: var(--space-4); position: sticky; top: calc(var(--site-header-h) + var(--space-6)); }
.product__buy-note { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); margin-top: calc(-1 * var(--space-3)); }
.product__buy-legal { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); text-align: center; }

/* ——— Блог и пост (BlogScreen, PostScreen) ——— */
.post-list { display: grid; gap: var(--space-4); }
.post { padding-top: var(--space-12); padding-bottom: var(--space-16); }
.post__date { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-faint); margin-top: var(--space-6); }
.post__title { font-family: var(--font-display); font-size: var(--text-3xl); margin: var(--space-2) 0 var(--space-6); text-wrap: balance; }
.prose {
  font-family: var(--font-ui); font-size: var(--text-base); line-height: var(--leading-relaxed);
  color: var(--text-body); display: grid; gap: var(--space-4);
}
.prose > p { margin: 0; text-wrap: pretty; }
.prose > h2 { font-family: var(--font-display); font-size: var(--text-xl); margin: var(--space-2) 0 0; }
.prose > h3 { font-family: var(--font-display); font-size: var(--text-lg); margin: var(--space-2) 0 0; }
.prose > ul,
.prose > ol { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-2); }
.prose > blockquote {
  margin: var(--space-2) 0; padding: 0 0 0 var(--space-4);
  border-left: 2px solid var(--green-500); font-family: var(--font-display); font-size: var(--text-lg);
}
.prose > blockquote > p { margin: 0; }
.prose > pre {
  margin: 0; padding: var(--space-4); background: var(--ink-50);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  font-family: var(--font-mono); font-size: var(--text-xs); overflow-x: auto;
}
.prose code { font-family: var(--font-mono); font-size: .92em; }
/* Дата редакции документа: подпись под текстом, отбита сверху. */
.prose__revision {
  margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle); font-size: var(--text-sm); color: var(--text-muted);
}

/* ——— Контакты (ContactsScreen) ———
   Две колонки нормальной ширины в полном контейнере: слева форма обращения
   (она большая — семь полей и два согласия), справа справочный столбец. Прежние
   равные половины узкого контейнера давали ~340 px на колонку, и форма
   вытягивалась лентой на несколько экранов. Пропорция 1.6 : 1 — это ~630 px
   формы и ~390 px справки: обе колонки читаются, ни одна не растянута. */
.contacts {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--space-8); align-items: start;
}
/* Раздел плотнее прочих: на десктопе главное (форма и справка) должно
   помещаться в один экран, а не начинаться под сгибом. */
.section--contacts .section__inner { padding-top: var(--space-10); padding-bottom: var(--space-12); }
.contacts__form { display: grid; gap: var(--space-4); }
.contacts__side {
  display: grid; gap: var(--space-5); font-family: var(--font-ui); font-size: var(--text-sm);
  line-height: var(--leading-relaxed); color: var(--text-body);
}
.contacts__label { font-weight: var(--weight-semibold); margin-bottom: 4px; }
.contacts__muted { color: var(--text-muted); }
.contacts__secure { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-muted); }

/* ——— Поддержка (страница /podderzhka и форма обращения) ———
   Форма собирается одним шаблоном на двух страницах (поддержка и контакты),
   поэтому её правила не привязаны ни к одной из них. Скриптов нет: раскрытие
   FAQ рисует сам браузер (<details>), состояние галочек — :checked. */
.support__lead { color: var(--text-muted); margin-bottom: var(--space-5); }
.support-card { padding: var(--space-6); }

.support-form { display: grid; gap: var(--space-5); }
.support-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.support-form--compact .support-form__grid { grid-template-columns: 1fr; gap: var(--space-4); }
/* «Компактно» — это про место, которое форме досталось, а не про её вид. На
   контактах колонка формы теперь широкая, и поля в ней снова становятся в два
   ряда: та же форма, вдвое короче по высоте. Ниже 1000 px колонка сужается и
   ряд снова один (см. адаптив). */
.contacts .support-form--compact .support-form__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5);
}
.support-form__col { display: grid; gap: var(--space-4); align-content: start; }
.support-form__foot { display: grid; gap: var(--space-4); justify-items: start; }

/* Выпадающий список темы. Вид тот же, что у поля ввода: он живёт внутри
   .field__box, поэтому рамку и кольцо фокуса рисует контейнер. Своя стрелка —
   фоновой картинкой, потому что нативную браузеры рисуют по-разному, а
   подключить иконку скриптом нельзя. */
.field__box select {
  flex: 1 1 auto; width: 100%; min-width: 0; border: 0; background: transparent;
  outline: none; font: inherit; font-size: var(--text-base); color: var(--text-body);
  padding: 10px var(--space-6) 10px 0; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23767d84' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0 center; background-size: 20px 20px;
}
.field__box select:focus-visible { box-shadow: none; }

/* Поле файла. Нативную кнопку не прячем: без скриптов подменить её нечем, а
   спрятанный input оставил бы человека без единственного способа выбрать файл. */
.field__box--file { padding: var(--space-2) var(--space-3); }
.field__box--file input[type="file"] {
  flex: 1 1 auto; min-width: 0; width: 100%; border: 0; background: transparent;
  font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-body);
}
.field__box--file input[type="file"]::file-selector-button {
  margin-right: var(--space-3); padding: 6px var(--space-3);
  font: inherit; font-size: var(--text-sm); color: var(--text-body);
  background: var(--surface-subtle); border: 1px solid var(--border-default);
  border-radius: var(--radius-control); cursor: pointer;
  transition: var(--transition-control);
}
.field__box--file input[type="file"]::file-selector-button:hover { background: var(--ink-50); }

/* Бейдж режима работы. Цвет несёт смысл, поэтому рядом с точкой всегда стоит
   подпись словами: «на связи» нельзя оставлять одним зелёным кружком. */
.support-status {
  display: flex; align-items: flex-start; gap: var(--space-3);
  margin-top: var(--space-5); padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
  background: var(--surface-subtle); font-family: var(--font-ui);
}
.support-status__dot {
  width: 10px; height: 10px; flex: 0 0 auto; margin-top: 7px; border-radius: 50%;
  background: var(--text-faint);
}
.support-status__label { font-weight: var(--weight-semibold); color: var(--text-heading); }
.support-status__detail { font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; }
.support-status__note { font-size: var(--text-sm); color: var(--text-body); margin-top: var(--space-2); }
.support-status--online { background: var(--success-soft); border-color: var(--border-brand); }
.support-status--online .support-status__dot { background: var(--green-500); }
.support-status--offline .support-status__dot { background: var(--ink-500); }
.support-status--vacation { background: var(--warning-soft); border-color: var(--warning); }
.support-status--vacation .support-status__dot { background: var(--warning); }

/* Каналы связи */
.support-channels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.support-channel { display: flex; align-items: flex-start; gap: var(--space-3); }
.support-channel__title { font-weight: var(--weight-semibold); margin-bottom: 2px; }
.support-channel__hint { font-size: var(--text-sm); color: var(--text-muted); margin-top: 4px; }

/* FAQ — задел под базу знаний слоя 3. Раскрытие нативное: <details> работает
   без единой строки скрипта, и это единственная причина, по которой аккордеон
   на сайте с `script-src 'none'` вообще возможен. */
.faq { display: grid; gap: var(--space-2); }
.faq__note { color: var(--text-muted); margin-bottom: var(--space-3); }
.faq__item {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-card);
  background: var(--white); overflow: hidden;
}
.faq__q {
  padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none;
  font-family: var(--font-ui); font-weight: var(--weight-semibold); color: var(--text-heading);
  min-height: var(--tap-min); display: flex; align-items: center;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: ""; margin-left: auto; width: 10px; height: 10px; flex: 0 0 auto;
  border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint);
  transform: rotate(45deg) translate(-2px, -2px); transition: var(--transition-control);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq__q:hover { background: var(--surface-subtle); }
.faq__q:focus-visible { box-shadow: var(--ring-focus); }
.faq__a {
  padding: 0 var(--space-5) var(--space-5); color: var(--text-body);
  line-height: var(--leading-normal);
}

/* Страница «обращение принято» */
.support-accepted__number {
  display: grid; gap: 4px; padding: var(--space-5); margin-bottom: var(--space-5);
  background: var(--surface-brand-soft); border-radius: var(--radius-card);
}
.support-accepted__label { font-size: var(--text-sm); color: var(--text-muted); }
.support-accepted__number strong {
  font-family: var(--font-mono); font-size: var(--text-2xl); color: var(--text-heading);
}
/* Номер-ссылка на переписку. Подчёркивание оставлено: без него крупный
   моноширинный номер не читается как нажимаемый, а нажать по нему — ровно то,
   ради чего ссылка и появилась. */
.support-accepted__link {
  color: inherit; text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 2px; text-decoration-color: var(--border-brand);
}
.support-accepted__link:hover { color: var(--text-link-hover); }
.support-accepted__hint { font-size: var(--text-sm); color: var(--text-muted); }
.support-accepted__reply { color: var(--text-body); line-height: var(--leading-normal); }

/* ——— Страница обращения по ссылке из письма ———
   Переписка глазами КЛИЕНТА. Своя лента, а не .adm-thread из админки: там
   рядом с репликой стоят статус доставки, внутренние заметки и подпись
   оператора — ровно то, чего здесь быть не должно. Общий на две ленты класс
   означал бы, что правка для оператора однажды доедет до клиента. */
.support-thread__meta {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.support-thread__number {
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted);
  letter-spacing: 0.04em;
}
.support-thread__status {
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: var(--weight-semibold);
  padding: 4px var(--space-3); border-radius: var(--radius-pill);
  background: var(--surface-subtle); color: var(--text-body);
  border: 1px solid var(--border-subtle);
}
/* Цвет — подсказка, а не носитель смысла: подпись словами стоит здесь же. */
.support-thread__status--wait { background: var(--warning-soft); border-color: var(--warning); }
.support-thread__status--you { background: var(--surface-brand-soft); border-color: var(--border-brand); }
.support-thread__status--done { background: var(--success-soft); border-color: var(--border-brand); }

.support-thread { display: flex; flex-direction: column; gap: var(--space-4); }
.support-msg {
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-card);
  border: 1px solid var(--border-subtle); background: var(--white); max-width: 92%;
}
/* Свои реплики справа, ответы поддержки слева — та же раскладка, что в любом
   мессенджере: кто написал, видно до того, как прочитана подпись. */
.support-msg--user { align-self: flex-end; background: var(--surface-brand-soft); border-color: var(--border-brand); }
.support-msg--support { align-self: flex-start; }
.support-msg--system { align-self: flex-start; background: var(--surface-subtle); }
.support-msg__head {
  display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-2); font-family: var(--font-ui); font-size: var(--text-sm);
}
.support-msg__who { font-weight: var(--weight-semibold); color: var(--text-heading); }
.support-msg__at { color: var(--text-muted); }
.support-msg__body { line-height: var(--leading-relaxed); overflow-wrap: anywhere; }

.support-reply { display: grid; gap: var(--space-4); }
.support-reply__foot { display: flex; justify-content: flex-start; }

.contacts__status { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }

/* ——— Служебные экраны ——— */
.empty-state { text-align: center; display: grid; gap: var(--space-4); justify-items: center; }
.notfound { padding-top: var(--space-24); padding-bottom: var(--space-24); }

/* ——— Адаптив: правила из readme §3.4 (3 / 2 / 1 колонки, gap 24 → 16) ——— */
@media (max-width: 1000px) {
  .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-10); }
  .hero__photo { justify-self: start; }
  .partner { grid-template-columns: 1fr; gap: var(--space-8); padding: var(--space-8); }
  .product { grid-template-columns: 1fr; gap: var(--space-8); }
  .product__buy { position: static; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
  .support-channels { grid-template-columns: 1fr 1fr; }
  /* Колонка формы на контактах сузилась — поля снова в один ряд. Сами колонки
     страницы разъезжаются позже, на 720 px. */
  .contacts .support-form--compact .support-form__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}
@media (max-width: 720px) {
  .container { padding-left: var(--gutter-mobile); padding-right: var(--gutter-mobile); }
  .grid3 { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .section__inner { padding-top: var(--section-y-mobile); padding-bottom: var(--section-y-mobile); }
  .section__head { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .hero__inner { padding-top: var(--space-10); padding-bottom: var(--space-10); }
  .hero__title { font-size: var(--text-4xl); }
  .page-head { padding-top: var(--space-10); }
  .page-head__title { font-size: var(--text-3xl); }
  .site-footer__cols { grid-template-columns: 1fr; gap: var(--space-6); }
  .contacts { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .support-form__grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .support-channels { grid-template-columns: 1fr; gap: var(--space-5); }
  .freepay { grid-template-columns: 1fr; gap: var(--space-5); }
  .founder { flex-direction: column; }
  .single { flex-wrap: wrap; }

  /* Плашка условия партнёрской программы: колонка уже, поэтому ступенью ниже —
     но всё равно втрое крупнее прежних 36/13 px. */
  .partner__stat { padding: var(--space-6); }
  .partner__num { font-size: var(--text-5xl); }
  .partner__cap { font-size: var(--text-base); }

  /* ——— Мобильная шапка: логотип · заголовок · бургер ———
     Три элемента в строку, меню раскрывается четвёртым на всю ширину.
     Порядок в разметке: логотип, заголовок, флажок, бургер, меню — так соседние
     селекторы (`:checked + label`, `:checked ~ .site-nav`) выражают состояние
     без единой строки скрипта. */
  :root { --site-header-h: calc(var(--space-10) + 2 * var(--space-4) + 1px); }
  .site-header__inner { gap: var(--space-3); }
  .site-header__logo img { height: var(--space-10); }
  .site-header__title {
    display: block; flex: 1 1 auto; min-width: 0; text-align: center;
    font-family: var(--font-display); font-size: var(--text-md);
    font-weight: var(--weight-semibold); color: var(--text-heading);
    line-height: var(--leading-snug);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Флажок визуально скрыт классом .vh, но остаётся в потоке фокуса: меню
     открывается с клавиатуры пробелом. На десктопе он `display: none` и из
     обхода по Tab выпадает совсем. */
  .site-header__toggle { display: block; }
  .site-header__burger {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: var(--tap-min); height: var(--tap-min); margin-right: calc(-1 * var(--space-2));
    border-radius: var(--radius-control); color: var(--text-body);
    cursor: pointer; transition: var(--transition-control);
  }
  .site-header__burger:hover { background: var(--ink-50); }
  .site-header__burger:active { transform: scale(var(--press-scale)); }
  .site-header__toggle:focus-visible + .site-header__burger { box-shadow: var(--ring-focus); }
  /* Закрыть можно и крестиком на месте бургера, и повторным нажатием — это одна
     и та же цель, у неё просто две иконки. */
  .site-header__burger-close { display: none; }
  .site-header__toggle:checked + .site-header__burger .site-header__burger-open { display: none; }
  .site-header__toggle:checked + .site-header__burger .site-header__burger-close { display: inline-flex; }

  .site-nav {
    display: none; order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch;
    gap: 0; margin-top: var(--space-2); padding-top: var(--space-2);
    border-top: 1px solid var(--border-subtle);
  }
  .site-header__toggle:checked ~ .site-nav { display: flex; }
  .navlink { font-size: var(--text-base); min-height: var(--tap-min); padding: 0 var(--space-2); }
  /* Подчёркивание пункта под строкой меню превращается в метку слева. */
  .navlink.is-active { box-shadow: inset 2px 0 0 var(--green-500); }
}