/* ============================================================
   Секции главной страницы.
   Все размеры сняты с живого buh-360.ru (обмер 11.09.2026):
   контейнер 1160, ритм «запись = 120px снизу», шапка секции 60px.
   Токены наследуются из main.css.
   ============================================================ */

/* --- HERO ----------------------------------------------------- */
/* Эталон: запись 80…912, карточка 1163×639 при x=139, текст поверх слева.
   Ритм текста снят по строкам: пилюля +82 от верха карточки, h1 +136,
   описание +296, кнопки +456, сноска +514; низ карточки — пустые 106. */
.hero { padding: 61px 0 var(--hero-pad-b, 132px); }
/* Карточка шире сетки: на эталоне она ровно 1163 (замер 13.09 при 1440 —
   1163×639 при x=139), а контейнер секций — 1160. 1211 = 1163 + 2×24 (padding). */
.hero .container { max-width: 1211px; }

.hero__card {
  position: relative;
  aspect-ratio: 1163 / var(--hero-card-h, 639);
  min-height: 460px;
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  padding: 0 62px;
  background: #C9C7C3;
  /* Тень фото — с эталона (проверено на живом buh-360.ru 01.10 браузером):
     у Тильды её несёт артборд карточки, геометрия та же 1163×639 при x=139,
     скругление 20px. В теме её не было вовсе. Смещение 2px 2px — тень вниз
     вправо; на раскладку не влияет (тень не занимает места), поэтому полосы
     и высоты страниц остаются прежними. Тот же цвет, но со смещением 0 2px,
     у эталона стоит на карточках отраслей — там он свой, не отсюда.

     Тень — у ФОТО, поэтому здесь она стоит только потому, что на десктопе
     карточка и есть прямоугольник снимка: замер 01.10 по всем 9 страницам с
     hero — при 1440 и 1024 коробки `.hero__card` и `.hero__bg` совпадают
     посимвольно (напр. главная 1163×639 при x=139/141 у обеих). На <=980 это
     уже не так: там карточка — прозрачная сетка над снимком И текстом
     (главная 767: карточка 735×685, фото 735×423), и тень на ней читалась
     ореолом вокруг всего блока и дублировала тень снимка — снимаем её в
     блоке <=980 ниже, там единственный носитель тени — сам снимок. */
  box-shadow: rgba(115, 115, 115, .25) 2px 2px 4px 0;
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Тот же отступ 82 от верха карточки, что и на эталоне: там текст стоит по
   фиксированному верху, а не по центру. Центрирование (было здесь) совпадало
   с эталоном только у главной, где h1 в две строки: у отраслевых h1 в три
   строки, и блок уезжал вверх ровно на половину прироста (замер 13.09:
   пилюля 125.2 против 143 у эталона). */
/* Ширина колонки текста — это поле H1 эталона: у главной и «Стройки» 554,
   у остальных отраслей шире (759/749/771 — от поля зависит перенос строк). */
.hero__text { position: relative; z-index: 2; width: 100%; max-width: var(--hero-text-w, 554px); padding-top: 82px; }

/* Пилюля hero — «Официальный партнер 1С:БО».
   Эталон (замер 12.09): 318×36.8; контент pad 4px 20px + рамка 2px = 6px 22px от края;
   зазор значок→текст 10; значок-печать 20×20; 16/600 lh 24.8; нутро прозрачное.
   Рамка у Тильды — золотой градиент (313.56deg #FFE128→#FFB900), не сплошной цвет. */
.hero__pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 20px;
  border: 2px solid var(--gold-a);   /* фолбэк, если маска не поддержана */
  border-radius: 30px;
  /* Involve 600 — как у эталона (и как у пилюль в шапках секций, main.css).
     С Geologica плашка выходила на 4px уже: замер 14.09 — «Связаться с нами»
     187px при тексте 143, у нас 181/137. */
  font-family: 'Involve', 'Geologica', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24.8px;
  color: rgba(57,57,57,.8);
}
/* Кольцо-градиент: рисуем на ::before и вырезаем середину маской,
   чтобы нутро осталось прозрачным (как на эталоне: pad 6px 22px без рамки
   даёт ту же геометрию, что 4px 20px + border 2px). */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .hero__pill { border: 0; padding: 6px 22px; }
  .hero__pill::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: linear-gradient(313.56deg, #FFE128 0%, #FFB900 100%);
    -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    -webkit-mask-clip: content-box, border-box;
    -webkit-mask-composite: xor;
    mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    mask-clip: content-box, border-box;
    mask-composite: exclude;
    pointer-events: none;
  }
}
/* Две плашки в строку — только `/why`: у эталона «Почему мы» (131×37, без
   значка) и «Официальный партнер 1С:БО» (318×37) стоят на одной высоте с
   зазором 4px (замер 14.09: конец первой 331, начало второй 335). Обёртка
   появляется лишь при заполненном поле `pill2`, поэтому остальные страницы
   не затронуты. `align-items: flex-start` — чтобы flex не растягивал плашки
   по высоте строки. */
.hero__pills {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.hero__pill-icon {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  flex-shrink: 0;
}
.hero__pill-icon svg { width: 20px; height: 20px; }

.hero__text h1 { margin: 17px 0 0; }
.hero__lead {
  margin: 44px 0 0;
  /* Поле лида на эталоне 554 на всех четырёх отраслях и на главной — уже
     колонки текста, поэтому задано числом, а не переменной. */
  max-width: 554px;
  font-size: 20px;
  font-weight: 300;
  line-height: 24px;
  color: var(--graphite);
}
.hero__text .btn-row { margin-top: 40px; gap: 16px; }
/* Кнопки hero: эталон 230×41 и 181×41, pad 6px 16px, br 8, рамка у ghost 2px. */
.hero__text .btn {
  height: 41px;
  padding: 0 16px;
  border-radius: var(--r-sm);
  font-size: 16px;
  font-weight: 500;
  line-height: 24.8px;
}
.hero__text .btn--primary { border: 0; }
.hero__text .btn--ghost { border: 2px solid var(--graphite); }
.hero__note { margin: 17px 0 0; font-size: 16px; font-weight: 300; line-height: 19px; color: var(--graphite); }
/* Две сноски со значками — только у «Контактов». Обмер эталона (14.09):
   первая строка y=+443 от верха записи (тот же отступ 17 от кнопок, что у
   одиночной сноски выше), вторая — +480, то есть зазор между строками 18;
   значок 16×16 стоит на 5px левее текста и выровнен по его середине. */
.hero__notes { margin: 17px 0 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.hero__notes .hero__note { margin: 0; display: flex; align-items: center; gap: 5px; }
.hero__note-icon { display: grid; place-items: center; width: 16px; height: 16px; flex-shrink: 0; }
.hero__note-icon svg { width: 16px; height: 16px; }

/* --- ПРЕИМУЩЕСТВА --------------------------------------------- */
/* Скопировано дословно из вставленного HTML-блока эталона
   (#tilda-advantages-block-003). Схема: grid → два row → карточки
   calc(24%/28%/37.5% - Npx), содержимое прижато вниз через margin-top: auto.
   Ряд 1: градиентная 312.8 + три обычных 266.4. Ряд 2: две по 427. */
.advantages-block {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  font-family: var(--font);
}
.advantages-block *,
.advantages-block *::before,
.advantages-block *::after { box-sizing: border-box; }
.advantages-block .advantages-grid {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1160px;
  gap: 16px;
  align-items: stretch;
}
.advantages-block .advantages-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  gap: 16px;
  align-items: stretch;
}
.advantages-block .advantage-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex: 0 0 calc(25% - 12px);
  min-height: 260px;
  padding: 24px;
  border-radius: 20px;
  background-color: #F9F9F9;
  box-shadow: 0 2px 4px rgba(115,115,115,.25);
  transition: transform .3s ease, box-shadow .3s ease;
  cursor: default;
}
.advantages-block .advantage-card:hover { transform: translateY(-4px); box-shadow: 0 6px 12px rgba(115,115,115,.3); }
.advantages-block .advantage-card.gradient-bg {
  background: var(--grad);
  flex: 0 0 calc(28% - 12px);
}
.advantages-block .advantage-card.gradient-bg:hover { box-shadow: 0 6px 12px rgba(115,115,115,.3); }
.advantages-block .advantages-row:first-child .advantage-card:not(.gradient-bg) { flex: 0 0 calc(24% - 12px); }
.advantages-block .advantages-row:nth-child(2) .advantage-card { flex: 0 0 calc(37.5% - 8px); }

.advantages-block .card-top-element {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  flex-shrink: 0;
}
/* Номер — градиентный текст (приём эталона: background-clip: text). */
.advantages-block .advantage-number {
  font-family: var(--font);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  text-align: left;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.advantages-block .learn-more {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  line-height: normal;      /* как у эталона: высота строки 20, а не 24 */
  color: var(--white);
  text-decoration: none;
  transition: opacity .3s ease;
}
.advantages-block .learn-more:hover { opacity: .8; }
.advantages-block .learn-more-icon { width: auto; height: 12px; object-fit: contain; filter: brightness(0) invert(1); transform: rotate(45deg); }
.advantages-block .card-content-area {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  margin-top: auto;
  flex-shrink: 0;
  text-align: left;
}
.advantages-block .advantage-title {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 8px;
  max-width: 100%;
  word-break: break-word;
  text-align: left;
}
.advantages-block .advantage-card:not(.gradient-bg) .advantage-title { color: var(--graphite); }
.advantages-block .gradient-bg .advantage-title { color: var(--white); }
.advantages-block .advantage-description {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
  max-width: 100%;
  text-align: left;
}
.advantages-block .advantage-card:not(.gradient-bg) .advantage-description { color: var(--graphite); opacity: .8; }
.advantages-block .gradient-bg .advantage-description { color: var(--white); opacity: .9; }

/* Внешние отступы блока берёт на себя .container — здесь padding не нужен,
   иначе внутренняя сетка сжимается на 40px и карточки не попадают в 1160. */
@media (max-width: 960px) {
  .advantages-block .advantage-card,
  .advantages-block .advantages-row:nth-child(2) .advantage-card,
  .advantages-block .advantage-card.gradient-bg,
  .advantages-block .advantages-row:first-child .advantage-card:not(.gradient-bg) { flex: 0 0 calc(50% - 8px) !important; min-height: 240px; }
}
@media (max-width: 640px) {
  .advantages-block .advantage-card,
  .advantages-block .advantages-row:nth-child(2) .advantage-card,
  .advantages-block .advantage-card.gradient-bg,
  .advantages-block .advantages-row:first-child .advantage-card:not(.gradient-bg) { flex: 0 0 100% !important; min-height: 220px; }
}
@media (max-width: 480px) {
  .advantages-block .advantage-card { padding: 18px; min-height: 200px; }
  .advantages-block .advantage-number { font-size: 18px; }
  .advantages-block .learn-more { font-size: 14px; }
  .advantages-block .advantage-title { font-size: 16px; }
  .advantages-block .advantage-description { font-size: 14px; }
}
@media (max-width: 320px) {
  .advantages-block .advantage-card { padding: 14px; min-height: 180px; border-radius: 16px; }
  .advantages-block .advantage-number { font-size: 16px; }
  .advantages-block .advantage-title { font-size: 14px; }
  .advantages-block .advantage-description { font-size: 12px; }
}

/* --- ОТЗЫВЫ --------------------------------------------------- */
/* Карусель t1186: строка-шапка со стрелками НАД карточками, карточки 560×341.
   Стрелки 40×40 br30 bg #393939, gap 5, прижаты вправо к краю контейнера (x=1300). */
.reviews { position: relative; margin-top: 2px; }
.reviews__nav {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  margin-bottom: 20px;
}
.reviews__track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Запас под тень карточек (11.10.2026, rp-1011-wp-reviews-shadow).
     Трек — скролл-контейнер, а он обрезает содержимое по своей padding-box:
     с нулевым padding `box-shadow` карточек не был виден НИ сверху, ни снизу,
     ни по внешнему левому краю (пиксельный замер: тёмность у кромки = фону),
     видна была только в зазорах между карточками — карточки выглядели
     подрезанными. Даём треку 12px запаса по вертикали и слева и компенсируем
     отрицательным margin, чтобы раскладка не поехала (высота трека и место
     первой карточки остаются прежними, тень рисуется в освобождённой полосе).
     Справа padding нет намеренно: там трек режет «загляд» по правому краю
     контейнера (решение B), и правый край карточки обрезан по замыслу.
     `scroll-padding-left` возвращает краю прилипания прежнее место: без него
     `scroll-snap` тянет карточку к padding-box трека и лента уезжает на 12px. */
  padding-block: 16px;
  padding-left: 12px;
  margin-block: -16px;
  margin-left: -12px;
  scroll-padding-left: 12px;
}
.reviews__track::-webkit-scrollbar { display: none; }
/* «Загляд» следующей карточки — ВНУТРИ контейнера (11.10.2026,
   rp-1011-wp-carousel-contain). Решение Павла 11.10 00:24 (вариант B): карточки
   обеих каруселей главной не выходят за контейнер сайта. До этого трек
   выпускался до кромки вьюпорта (`margin-right: calc(50% - 50cqw)` + контейнер-
   объём на секции) — карточки уезжали за ширину сайта; Павлу это не понравилось.
   Выпуск снят целиком: трек снова равен контейнеру, «загляд» обрезается по его
   правому краю.

   Почему снят и `container-type`: `cqw` был нужен ТОЛЬКО ради выпуска. Без него
   containment на секции не нужен — он давал секции отдельный формат-контекст, то
   есть лишнюю сущность в раскладке. `50vw` не возвращать: это ширина ОКНА, а не
   области раскладки, и на браузере с классической полосой прокрутки трек уезжал
   за кромку на sbw/2 (разбор 09.10.2026 — задача rp-0810-wp-theme-consistency,
   история в git-снимке темы).

   «Загляд» теперь задаётся шириной карточки: полоса карточек (n × карточка +
   зазоры) обязана НЕ занимать контейнер целиком и оставлять видимую часть
   следующей. Ширины считаются от ширины трека (100 % = контейнер), не в
   пикселях, поэтому одна формула работает на всех ширинах контейнера:
     981+ (в т.ч. десктоп 1160): `calc((100% - 92px) / 2)` = 2 зазора по 16 +
       видимые 60 → 2 карточки + загляд 60 (на 1160 карточка выходит 534);
     ≤980: `calc((100% - 80px) / 2)` → 2 карточки + загляд 48;
     ≤640: `calc(100% - 50px)` → 1 карточка + загляд 34 (зазор 16).
   Отдельного правила на полосу 981–1200 нет намеренно: формула сама даёт на ней
   те же «2 карточки + 60», что и на десктопе. */
.reviews__track > * { flex: 0 0 calc((100% - 92px) / 2); scroll-snap-align: start; }

/* Карточка карусели: 40 pad + 100 head + 35 mt + 126 текст + 40 pad = 341.
   ВАЖНО (13.09): базовое правило скоупим на `.reviews`. Класс `review-card`
   носят и карточки-цитаты в блоке «Кейсы» (эталонный блок
   tilda-cases-reviews-block-013 → `.cases-block .review-card`). Без скоупа
   наш `height: 341px` утекал в них: объявленная высота делала кросс-размер
   определённым, и `align-items: stretch` строки `.cr-row` больше не
   растягивал карточку до 350px (341 вместо 350). */
.reviews .review-card {
  display: flex;
  flex-direction: column;
  width: 560px;
  height: 341px;
  padding: 40px;
  margin: 0;                 /* сброс дефолтного margin <blockquote> */
  background: var(--surface);
  border-radius: var(--r);
}
/* Тень и обрезка — из настроек блока карусели эталона
   (.t1186__card{box-shadow:0 2px 4px rgba(115,115,115,.25)}); к акцентным
   карточкам «Кейсов» не применяются.
   Подъём + тень при наведении — как в блоке «Преимуществ» (эталон
   `.advantages-block .advantage-card`): 11.10.2026, задача «волна отзывов».
   `transition` добавлен здесь (раньше его не было) — базовая тень та же. */
.reviews .review-card:not(.review-card--accent) {
  box-shadow: 0 2px 4px rgba(115,115,115,.25);
  transition: transform .3s ease, box-shadow .3s ease;
  overflow: hidden;
}
.reviews .review-card:not(.review-card--accent):hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(115,115,115,.3);
}
/* Типовым в карусели место под пометку «частый запрос клиентов» берём из нижнего
   отступа: карточка фиксирована 341px (5 строк текста + head + паддинг занимают
   её целиком), а под текстом снизу раньше был пустой отступ 40px — уменьшаем его
   до 16px, чтобы подтекст влезал без обрезки (overflow:hidden). Раскладка
   (высота карточки 341 и место текста) не меняется. */
.reviews .review-card:not(.review-card--real) { padding-bottom: 16px; }
.review-card__head { display: flex; align-items: flex-start; gap: 18px; height: 100px; }
.review-card__avatar {
  width: 100px; height: 100px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--red-mist);
}
.review-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.review-card__avatar--ph { background: #fff; }
.review-card__profile { display: block; min-width: 0; }
.review-card__name { display: block; font-size: 18px; font-weight: 600; line-height: 1.31; color: var(--graphite); }
.review-card__role { display: block; margin-top: 10px; font-size: 16px; font-weight: 300; line-height: 1.3; color: #616161; }
/* Дата отзыва реальной карточки — мелким приглушённым кеглем под именем.
   Финальный вид (решение Павла 11.10.2026): строку-роль и источник из шапки
   убрали, вместо них ровно чистая дата (напр. `10.03.2026`), элемент
   `.review-card__role` в реальных не выводится (см. template-parts/review-card.php).
   Кегль/цвет согласованы по превью — 13px / #9a9a9a. */
.review-card__date { display: block; margin-top: 10px; font-size: 13px; font-weight: 400; line-height: 1.3; color: #9a9a9a; }

/* Мелкая приглушённая пометка «частый запрос клиентов» — под текстом типового
   отзыва (перенесена из подписи; решение Павла 11.10.2026). */
.review-card__note {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.25;
  color: #8A8A8A;
}

.review-card__text {
  margin: 35px 0 0;
  font-size: 18px;
  font-weight: 300;
  line-height: 25.2px;
  color: #616161;
}

/* Вариант «Кейсы»: 397×350, pad 24, градиент, кавычка сверху, автор прижат к низу. */
.review-card--accent {
  width: 397px;
  height: 350px;
  padding: 24px;
  background: var(--grad);
  color: var(--white);
}
.review-card--accent .review-card__text {
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 24px;
  color: var(--white);
}
.review-card--accent .review-card__author { display: block; margin-top: auto; }
.review-card--accent .review-card__name { color: var(--white); font-size: 18px; line-height: 23.4px; }
.review-card--accent .review-card__role { margin-top: 0; color: var(--white); font-size: 18px; font-weight: 300; line-height: 23.4px; }

/* Кавычка-маркер — только в акцентных карточках */
.review-card__mark {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 48px;
  line-height: .7;
  color: rgba(255,255,255,.45);
}

/* --- Карточка РЕАЛЬНОГО отзыва, вариант В -----------------------------
   Решение Павла 10.10.2026: реальный отзыв с площадки показываем фирменной
   аватар-заглушкой + плотным скрином отзыва + ссылкой на источник. В карусели
   карточка сохраняет габарит 560×341 (скрин занимает остаток высоты и не
   режется: object-fit contain на белом фоне — кропы площадок белые). */
.review-card__shot {
  display: block;
  margin-top: 18px;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  min-width: 0;
}
.review-card__shot img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; object-position: top center; }
.review-card__src {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 16px;
  color: var(--red);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}
.review-card__src:hover { color: var(--red-light); }
/* В карусели .review-card — фиксированные 341: скрин забирает остаток высоты. */
.reviews .review-card--real .review-card__shot { flex: 1 1 auto; min-height: 0; }
.reviews .review-card--real .review-card__shot img { height: 100%; }

/* --- Страница «Все отзывы» (/otzyvy/) -------------------------------- */
/* Заголовок страницы — H1; в шапке секции он ведёт себя как H2 (поле, лид справа). */
.section__head__grid h1 { max-width: var(--h2-w, 725px); }
.reviews-page {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
  margin-top: 36px;
}
/* На странице карточка не в карусели, поэтому общий габарит задаётся здесь. */
.reviews-page .review-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 32px;
  background: var(--surface);
  border-radius: var(--r);
  box-shadow: 0 2px 4px rgba(115,115,115,.25);
  transition: transform .3s ease, box-shadow .3s ease;
}
.reviews-page .review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 12px rgba(115,115,115,.3);
}
.reviews-page .review-card__head { height: auto; }
/* Скрины на странице — во всю ширину карточки, без обрезки. */
.reviews-page .review-card__shot img { height: auto; }

/* Плашки источников с рейтингом (шапки карточек площадок; не завышены). */
.reviews-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.reviews-sources a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid #E4E4E4;
  border-radius: 30px;
  color: var(--graphite);
  font-size: 16px;
  line-height: 1.3;
}
.reviews-sources a:hover { border-color: var(--red); color: var(--red); }
.reviews-sources b { font-weight: 600; }
.reviews-sources .reviews-sources__rating { color: var(--red); font-weight: 600; }

.reviews__arrow {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  padding: 0;                 /* сброс браузерного button{padding:1px 6px} —
                                 иначе он съедает контентную ширину под svg */
  border: 0;                  /* у эталона border-width: 0 */
  border-radius: 30px;
  background: var(--graphite);
  color: var(--white);
  cursor: pointer;
  transition: background var(--ease);
}
/* max-width: none — сброс темы img,svg{max-width:100%}, из-за которого
   svg сжимался до контентной ширины кнопки. */
.reviews__arrow svg { width: 40px; height: 40px; max-width: none; display: block; }
/* Правая стрелка — тот же path, развёрнутый на 180° (приём Тильды:
   .t1186__control_right{transform:rotate(.5turn)}). */
.reviews__arrow--next { transform: rotate(.5turn); }
/* Наведение — из настроек блока эталона: кнопка светлеет, шеврон становится графитовым. */
.reviews__arrow:hover { background: var(--surface); }
.reviews__arrow:hover svg path { stroke: var(--graphite); }

/* --- CTA + ФОРМА ---------------------------------------------- */
/* Снято с эталона (координаты — от верха h2 «Обсудим вашу задачу?»):
   фото 519×593 x=140 y=134; колонка контента x=700 ровно 544 шириной
   (не «на всю 1fr»); её содержимое начинается на y=214, то есть на 80
   ниже верха фото — отсюда padding-top. */
.cta { display: grid; grid-template-columns: 519px 1fr; gap: 41px; align-items: start; }
/* Фото эталона стоит на 2px ниже начала колонки (y=134 против 132 у формы,
   хотя правая колонка сходится у нас с точностью до пикселя). Это смещение
   самого атома Тильды — но оно у большого блока, поэтому воспроизводим.

   ДОПИСАНО НАМИ, не из эталона (решение Павла 01.10): микрозум фото формы при
   наведении — тот же приём и те же параметры, что у фото основателя
   (`.founder-block .founder-photo-wrapper:hover .founder-photo`, blocks.css):
   `scale(1.04)`, `transition: transform .4s ease`, `object-fit: cover` и
   скругление 20px (`--r`). Блок общий (`section-form.php`), поэтому зум
   работает на всех страницах с формой — главная и 8 внутренних.
   Скругление продублировано на обёртке: у картинки своё, но при зуме оно
   «уезжает» вместе с ней, а обёртка обрезает кадр по коробке — ровно как у
   основателя, где `overflow: hidden` стоит на `-wrapper`. Габариты не меняют-
   ся: обёртка по-прежнему sized по картинке. */
.cta__media { margin-top: 2px; overflow: hidden; border-radius: var(--r); }
.cta__media img { width: 100%; aspect-ratio: 1040 / 1188; object-fit: cover; border-radius: var(--r); transition: transform .4s ease; }
.cta__media:hover img { transform: scale(1.04); }
.cta__body { max-width: 544px; padding-top: 80px; }

/* Контакты: строка «почта + телефон», ниже — адрес с геометкой.
   mail y=214, addr y=258 (две строки по 22 = 44) → gap 22;
   от низа адреса до лейбла «Имя» (y=316) — 14. Это замер ГЛАВНОЙ.
   Нижний зазор у эталона задан артбордом каждой страницы: на «Тарифах» и
   «Контактах» он 24. Поэтому он приходит переменной (аргумент `cta_gap` в
   section-form.php), а не правится здесь: иначе главная поедет на 10px. */
.cta__contacts { display: grid; gap: 22px; margin-bottom: var(--cta-gap, 14px); }
.cta__contact-row { display: flex; flex-wrap: wrap; align-items: center; gap: 27px; }
.cta__contact {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 300;
  line-height: 22px;
  color: var(--graphite);
}
/* Эталон печатает контакты графитом, но с opacity .8 у текстового атома
   (эффективно ≈ #616161). Иконки лежат отдельными атомами и НЕ бледнеют —
   по пикселям их минимум совпадает с нашим (159 по красному), поэтому
   прозрачность вешаем на ссылку, а не на всю строку. */
.cta__contact a { color: inherit; opacity: .8; }
.cta__contact a:hover { color: var(--red); opacity: 1; }

/* Иконки — оригинальные SVG с эталона, у каждой свой фирменный градиент,
   поэтому никакого color: red: красить их нельзя. */
.cta__contact--mail { gap: 16px; }
.cta__contact--phone { gap: 10px; }
.cta__contact--pin { gap: 17px; align-items: center; }
.cta__contact--mail .icon svg { width: 28px; height: 22px; }
.cta__contact--phone .icon svg { width: 24px; height: 24px; }
/* Строка MAX в блоке формы убрана решением Павла 15.10.2026
   (rp-1510-wp-formmapwhy) — правила `.cta__contact--max` удалены вместе с
   разметкой. У иконки шапки и плавающего блока контактов своя разметка. */

/* Геометка: сам пин 20×25, «дырка» в нём — отдельный элемент 10×10,
   смещённый внутрь на (5, 6). */
.cta__pin-icon { position: relative; display: inline-flex; width: 20px; height: 25px; flex-shrink: 0; }
.cta__pin-icon .icon:first-child svg { width: 20px; height: 25px; }
.cta__pin-icon .icon:last-child { position: absolute; left: 5px; top: 6px; }
.cta__pin-icon .icon:last-child svg { width: 10px; height: 10px; }

/* Адрес переносится на две строки — ссылка зажата в 416px (эталон). */
.cta__contact--pin a { max-width: 416px; }

.cta__form { display: flex; flex-direction: column; gap: 30px; }
.field { display: flex; flex-direction: column; }

/* Лейбл: 18/500, lh 28, отступ снизу нулевой — инпут идёт сразу за ним. */
.field__label { font-size: 18px; font-weight: 500; line-height: 28px; color: #616161; }

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field textarea {
  height: 50px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 0 20px;
  font-size: 16px;
  font-weight: 400;
  color: var(--graphite);
  background: var(--surface);
  transition: border-color var(--ease), background var(--ease);
  resize: vertical;
}
/* Плейсхолдер эталона — графит с opacity .5 (эффективно ≈ #9C9C9C),
   а не серая краска: в вордпресс-форме это заметно. */
.field input::placeholder, .field textarea::placeholder { color: var(--graphite); opacity: .5; }
.field textarea { height: auto; padding: 14px 20px; }
.field input:focus, .field textarea:focus { border-color: var(--red); background: var(--white); outline: none; }

/* Телефонное поле — как виджет Тильды: слева выбор страны с флагом,
   затем код, затем сам инпут. Флага нет в теме — берём спрайт Тильды. */
.phone-field {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 20px;
  border-radius: var(--r-md);
  background: var(--surface);
  transition: background var(--ease);
}
.phone-field__select { display: flex; align-items: center; height: 50px; margin-right: 5px; }
.phone-field__flag {
  width: 18px;
  height: 13px;
  flex-shrink: 0;
  background: url(../img/flags7.png) -285px -281px no-repeat;
}
.phone-field__caret {
  width: 0;
  height: 0;
  margin-left: 6px;
  border-top: 5px solid #9A9A9A;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
.phone-field__code { margin-left: 10px; font-size: 16px; font-weight: 400; line-height: 21px; color: var(--graphite); }
.phone-field input[type="tel"] {
  flex: 1;
  min-width: 0;
  height: 50px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 16px;
  font-weight: 400;
  color: var(--graphite);
}
.phone-field input[type="tel"]:focus { outline: none; background: transparent; }

.cta__form .btn { align-self: flex-start; width: 200px; height: 50px; padding: 0; border-radius: var(--r-sm); font-size: 16px; font-weight: 600; }

/* Чекбоксы согласия — явная галочка, а не «нажимая кнопку» (152-ФЗ).
   Бокс 20×20 рисуем сами (нативный 13×13 у эталона лежит поверх):
   рамка 2px #666, в отмеченном — чёрная рамка и своя галочка. */
.field--check { flex-direction: row; align-items: flex-start; gap: 10px; padding: 4px 0 0; }
.field--check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: 2px solid #666666;
  border-radius: 0;
  background: var(--white) no-repeat center;
  cursor: pointer;
}
.field--check input[type="checkbox"]:checked {
  border-color: #000000;
  background-image: url(../img/check-tick.svg);
  background-size: 12px 10px;
}
.field__note { font-size: 10px; font-weight: 400; line-height: 12px; color: #616161; margin: 0; }
.field--check a { color: #FF8562; text-decoration: none; }

/* Сообщение о результате отправки */
.form-note {
  margin: 0 0 18px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 400;
}
.form-note--ok { background: #EFF7F1; color: #284D3C; }
.form-note--error { background: #FBEFEF; color: var(--red); }

/* --- БЛОГ ----------------------------------------------------- */
/* 3×360×572, фото 360×250 (br 20 20 0 0), тело pad 20px 30px 27px. */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }

/* Постраничная навигация архива `/blog`. У эталона такой страницы нет —
   разметку даёт `the_posts_pagination()`, оформление наше и собрано из
   токенов бренда, чтобы пейджер читался как часть темы. */
.blog-pager { margin-top: 60px; }
.blog-pager .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.blog-pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: var(--graphite);
  text-decoration: none;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.blog-pager a.page-numbers:hover { background: var(--surface); border-color: var(--graphite); }
.blog-pager .page-numbers.current { background: var(--graphite); border-color: var(--graphite); color: var(--white); }
.blog-pager .page-numbers.dots { border-color: transparent; }

.blog-empty { font-size: 16px; font-weight: 300; line-height: 1.5; color: var(--graphite); margin: 0; }

/* --- СТРАНИЦА СТАТЬИ (`single.php`) ----------------------------
   У эталона страницы статьи нет (статья открывается попапом ленты), поэтому
   это осознанное отклонение, а не перенос: блок собран из того, что в теме
   уже есть. Колонка чтения — 760px: ровно столько занимает текст в попапе
   эталона (`t-col_8` внутри `t-container` 1200, замер 17.09). У документа
   политики своя мера (`.bp-policy` в `policy.css`) — она шире. */
.entry-wrap { max-width: var(--entry-w, 760px); margin: 0 auto; }
.entry-head { padding-bottom: 40px; }
/* Заголовок статьи — единственный `h1` сайта, живущий в узкой колонке чтения:
   на 320px это 288px при кегле 30px. Глобальное правило `h1` в main.css
   оставляет `overflow-wrap: normal`, поэтому длинное слово не переносилось и
   удлиняло страницу вбок: «оптимизировать» 353px давало +48 к ширине окна,
   «Управленческий» 331px — +27, «маркетплейсах» 308px — +3 (задача
   rp-0510-wp-blog-overflow, 05.10.2026). `break-word` рвёт слово только тогда,
   когда иначе оно не влезает, — на широких широтах переносы не меняются.
   Сам `h1` не трогаем: его меряет hero-гейт с порогом запаса 12px. */
.entry-title { margin: 19px 0 0; overflow-wrap: break-word; }
.entry-lead { font-size: 18px; font-weight: 300; line-height: 1.45; color: #777777; margin: 20px 0 0; max-width: 620px; }
.entry__thumb { margin: 0 0 40px; }
.entry__thumb img { display: block; width: 100%; height: auto; border-radius: var(--r); }

/* Тело статьи приходит из конвейера (`the_content`): у шести перенесённых
   материалов внутри только `p`, `h2` и `strong`, но живая статья показала и
   `h3`, `hr`, `table`, `ol` — набор закрыт по ней, а не по перенесённым
   текстам (проверено на опубликованной статье 17.09). Таблицы повторяют
   вид документа политики (`.bp-policy table`): тот же тон линий и шапки. */
.entry { font-size: 16px; font-weight: 300; line-height: 1.6; color: var(--graphite); }
.entry > * { margin: 0; }
.entry > * + * { margin-top: 20px; }
.entry h2 { font-size: 28px; font-weight: 600; line-height: 1.25; color: var(--black); }
.entry h3 { font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--black); }
.entry > h2 + *, .entry > h3 + * { margin-top: 16px; }
.entry strong, .entry b { font-weight: 600; }
.entry a { color: var(--red); }
.entry ul, .entry ol { padding-left: 22px; }
.entry li + li { margin-top: 8px; }
.entry blockquote { padding-left: 24px; border-left: 3px solid var(--red); font-size: 18px; }
.entry hr { height: 1px; border: 0; background: var(--line); margin: 40px 0; }
/* Узкая таблица внутри широкого текста: блок со скроллом, сама таблица
   остаётся таблицей (анонимный табличный бокс внутри). */
.entry table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 15px; }
.entry th { background: var(--surface); font-weight: 600; text-align: left; }
.entry th, .entry td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }

.entry__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.entry__meta { margin: 0; font-size: 14px; font-weight: 300; color: #888888; }
.entry__meta a { color: #888888; text-decoration: none; }
.entry__meta a:hover { color: var(--red); }
.entry__all { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--graphite); }
.entry__all svg { width: 24px; height: 24px; fill: currentColor; }

/* Ссылка «Все статьи →» / «Все кейсы →» — справа под шапкой секции.
   Эталон: строка высотой 55, верх = низ h2-поля + 58; содержимое 20/600 lh31,
   иконка 32×32, gap 10; до контента секции — 28. */
.section__head--actions { padding-bottom: 28px; }
.section__head__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 55px;
  margin-top: 58px;
}
.section__head__actions a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 600;
  line-height: 31px;
  color: var(--graphite);
}
.section__head__actions a:hover { color: var(--red); }
.section__head__actions svg { width: 32px; height: 32px; }
.post-card {
  display: flex;
  flex-direction: column;
  height: 572px;
  background: #F7F7F7;
  border-radius: var(--r);
  overflow: hidden;
  color: inherit;
  transition: transform var(--ease), box-shadow var(--ease);
  /* Тень — из системы сайта (та же, что у карточек преимуществ/услуг: 2px/4px,
     на наведении 6px/12px). Запрос Павла 14.10.2026: карточки лент и блоков
     главной были без тени. */
  box-shadow: 0px 2px 4px rgba(115, 115, 115, 0.25);
}
.post-card:hover { color: inherit; transform: translateY(-4px); box-shadow: 0px 6px 12px rgba(115, 115, 115, 0.3); }
.post-card__thumb { position: relative; display: block; height: 200px; margin-bottom: 20px; overflow: hidden; flex-shrink: 0; border-radius: var(--r) var(--r) 0 0; }
/* Метка рубрики поверх фото — с эталона: прямоугольник 82×32, радиус 3px (не пилюля),
   полупрозрачный чёрный 50%, текст 14px/fw300 белый, в 15px от верха и левого края. */
.post-card__tag {
  position: absolute;
  top: 15px; left: 15px;
  z-index: 2;
  font-size: 14px;
  font-weight: 300;
  line-height: normal;
  letter-spacing: 1px;
  color: var(--white);
  background: rgba(0,0,0,.5);
  border-radius: 3px;
  padding: 7px 8px;
}
.post-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.post-card:hover .post-card__thumb img { transform: scale(1.04); }
/* padding-top 5px — не описка: у эталона текстовая обёртка `.t-feed__col-grid__wrapper`
   держит `5px 30px 27px`, из-за чего заголовок встаёт на 225px (200 фото + 20 отступ + 5). */
.post-card__body { display: flex; flex-direction: column; flex: 1; padding: 5px 30px 27px; }
/* lh 1.35 = 24.3px — как у `.t-feed__link`; отступ снизу 20px — это padding обёртки заголовка. */
.post-card__title { font-family: var(--font); font-size: 18px; font-weight: 600; line-height: 1.35; margin: 0 0 20px; }
/* Анонс: 16px / 24.8px / fw300 / #888 — три свойства перебивают общий `.card__text`
   из main.css (14px / 1.5 / графит), поэтому объявлены явно. */
.post-card .card__text {
  font-size: 16px;
  line-height: 24.8px;
  font-weight: 300;
  color: #888888;
  margin: 8px 0 0;
  /* Обрезаем анонс по строкам: у разбора «Ситуация» бывает 12–15 строк, и кнопка
     «Читать разбор» уезжала под обрез карточки фиксированной высоты (жалоба Павла
     14.10.2026). Шесть строк — потолок анонсов статей блога, поэтому блог правило
     не меняет; разборы — выравнивает. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}
/* Стрелка после текста — иконка Тильды `shortarw_right_bold.svg`; в теме лежит
   байт-в-байт как `arrow-right-sm.svg`. Гап 5.5px и размеры сняты с эталона
   (`.t-btntext__icon` 24×24, margin-left 5.5px). Выравнивание — `baseline`,
   как у эталонного класса: значок стоит нижним краем на базовой линии текста.
   С `middle` строка выходила на 4.8px ниже эталонной (26 против 30.8), и
   карточки кейсов были короче на 4.5 и 5.5 — проверено обмером 14.09.2026. */
/* Центровка подписи «Читать статью» со стрелкой — задача 09.10.2026 (Павел:
   в карточке статьи строка со стрелкой не была центрована). Прежде это была
   обычная блочная строка: текст и значок стояли по левому краю (обмер 1440:
   центр пары x=242 при центре карточки 320 — сдвиг 78px влево), а значок
   24×24 с `vertical-align: baseline` шёл на 6px выше центра текста. Флекс-строка
   центрирует пару «текст + значок» как единый блок по горизонтали, а
   `align-items: center` ставит значок по центру текстовой строки. Меняется
   только сама строка: `margin-top: auto` по-прежнему прижимает её к низу
   карточки. `margin-left` у значка — из общего правила ниже, в флексе он
   работает зазором, поэтому `gap` не добавляем и дубля нет. */
.post-card__more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: auto;
  font-size: 16px;
  line-height: 24.8px;
  font-weight: 600;
  color: var(--red);
}
.post-card__more-icon,
.case-card__more-icon { display: inline-block; width: 24px; height: 24px; margin-left: 5.5px; vertical-align: baseline; }
.post-card__more-icon svg,
.case-card__more-icon svg { display: block; width: 100%; height: 100%; fill: currentColor; }

/* Цвет фигур у монохромных значков эталона.
   В файлах эталона заливка задана атрибутом `fill="black"` на самом `path`, а
   презентационный атрибут — это авторский стиль на элементе: наследование от
   `svg` его не перебивает, поэтому `fill: currentColor` на обёртке не работала
   и стрелки рисовались чёрными. На эталоне значок окрашен в цвет ссылки —
   у «Читать кейс полностью» красный `#9F0208`, у «Все кейсы →» графит
   `#393939`. Проверено пробой пикселей 14.09.2026: у клона в обоих местах
   были чистые (0,0,0), у эталона — ни одного чёрного пикселя. */
.post-card__more-icon svg path,
.case-card__more-icon svg path,
.section__head__actions svg path { fill: currentColor; }

/* --- Лента кейсов (/cases) ------------------------------------------
   Единственный блок страницы «Кейсы» и второй экземпляр нативного блока
   Тильды `t915` на сайте (первый — блог главной). Геометрия снята с записи
   `rec2408953221` обмером 14.09.2026: подпись 16/300/24 `#888` с отступом 15,
   ряд чипов-отраслей (высота 36, шаг 10 вниз), зазор 40 до сетки, сетка
   3×360 с зазорами 40, карточки `#F7F7F7` с радиусом 20 и тенью `0 0 3px`.
   Отличие от карточек блога: у кейсов нет фото, внутри только заголовок
   18/600/24.3 и ссылка «читать» сразу под ним, поэтому высоту строки задаёт
   текст: у эталона первая строка 146, вторая 195. */
/* `margin: 0` обязателен: у абзацев в сбросе `margin: 0 0 1em`, а у эталона
   отступ подписи задан только её же `padding-bottom: 15px`. */
.case-feed__descr { margin: 0; padding-bottom: 15px; font-size: 16px; font-weight: 300; line-height: 24px; color: #888888; }
/* Чипы: рамка 1px графитовая, у активного заливка и рамка красные. Внутри
   рамки у ссылки свои поля 5px по бокам — так у эталона, из-за них ширина
   чипа «Все» 75 при тексте 27. */
.case-feed__chips { display: flex; flex-wrap: wrap; margin: 0 0 40px; padding: 0; list-style: none; }
.case-feed__chip {
  margin: 0 5px 10px;
  border: 1px solid var(--graphite);
  border-radius: 40px;
  /* Та же кривая и тот же набор свойств, что у карточек и кнопок сайта
     (`--ease`), — чип наводится в одном языке движения со всей лентой. */
  transition: background var(--ease), border-color var(--ease),
              transform var(--ease), box-shadow var(--ease);
}
.case-feed__chip a {
  display: inline-block;
  margin: 0 5px;
  padding: 6px 18px;
  border-radius: 40px;
  font-size: 16px;
  font-weight: 300;
  line-height: 21.6px;
  color: var(--graphite);
  transition: color var(--ease);
}
/* Наведение — мягкая заливка (mist) + лёгкий подъём. У карточек ленты подъём
   4px; у чипа — 2px: элемент мельче. Активный чип не поднимается и не мигает. */
.case-feed__chip:not(.case-feed__chip--active):hover {
  background: var(--red-mist);
  border-color: var(--red);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .08);
}
.case-feed__chip:not(.case-feed__chip--active):hover a { color: var(--red); }
.case-feed__chip--active { background: var(--red); border-color: var(--red); }
.case-feed__chip--active a { color: var(--white); }
/* Клавиатура: фокус ведёт себя как наведение (доступность). */
.case-feed__chip:focus-within {
  background: var(--red-mist);
  border-color: var(--red);
}
.case-feed__chip:focus-within a { color: var(--red); }
@media (prefers-reduced-motion: reduce) {
  .case-feed__chip:not(.case-feed__chip--active):hover {
    transform: none;
    box-shadow: none;
  }
}
.case-feed__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
/* Карточку прячет фильтр чипов (`hidden` из PHP и из `main.js`). Правило нужно
   явно: `display: flex` ниже перебивает браузерное `[hidden] { display: none }`,
   и скрытая карточка осталась бы на месте. Относится к обоим видам карточек
   ленты: у статьи `.post-card` — свой `display: flex` (см. блок «БЛОГ»). */
.case-card[hidden],
.post-card[hidden] { display: none; }
.case-card {
  display: flex;
  flex-direction: column;
  padding: 5px 30px 27px;
  background: #F7F7F7;
  border-radius: var(--r);
  box-shadow: rgba(0, 0, 0, .2) 0 0 3px;
  color: var(--graphite);
}
/* lh 24.3 — как у `.t-feed__link`; отступ снизу 20 — padding обёртки заголовка.
   Цвет задан явно: когда у кейса появится ссылка, заголовок станет `<a>`, а у
   ссылок в сбросе красный — здесь он должен остаться графитовым, как на эталоне. */
.case-card__title { padding-bottom: 20px; font-family: var(--font); font-size: 18px; font-weight: 600; line-height: 24.3px; color: var(--graphite); }
/* Ссылка прижата к низу карточки (`margin-top: auto`), а 15px — это нижняя
   граница зазора от заголовка: у эталона карточка — флекс-колонка, где ссылка
   стоит последней и уходит вниз, когда строка сетки выше её содержимого.
   Замер 14.09.2026, вторая строка ленты: у карточки с трёхстрочным заголовком
   ссылка стоит на 24.3px ниже, чем если бы шла сразу за заголовком (у эталона
   y 455.8 против 423.5), — то есть по низу, а не в потоке. Высота блока
   «15 + строка» = 45.8 совпадает с блоком ссылки у эталона. */
.case-card__more { margin-top: auto; padding-top: 15px; font-size: 16px; line-height: 24.8px; font-weight: 600; color: var(--red); }

/* --- «Больше, чем просто цифры» (/why) --------------------------------
   Единственная секция /why, у которой нет refblock: на эталоне это артборд
   T396 (машинная разметка), а не самописный HTML-блок, поэтому блок собран
   по обмеру — как первый экран и шапки разделов. Цифры (замер 14.09.2026,
   1440, запись `rec2369405241`, верх записи y=1563):

     левая колонка x136: H2 [550x92] 38/46 на +1 (2 строки),
                         лид [336x48] 20/24 на +125 (низ H2 93 + 32)
     правая колонка x800, ширина 501: три пункта с шагом 130 —
                         H3 20/600 lh24 на +9/+139/+269,
                         описание 18/300 lh22 на +41/+171/+301 (3 строки, 66)

   Контент кончается на 367, артборд записи — 376 (9px авторского запаса,
   тот же случай, что `min-height` карточки героя 639 и поле H2 138 у
   «Тарифов»): запас держит `min-height` контейнера, иначе секция укоротилась
   бы ровно на эти 9px. Итого запись 376 + 120 = 496, как у эталона.

   Плашки у секции нет — как у «Ниш» (см. `--nopill` в main.css); здесь шапка
   своя, а не общая: лид стоит ПОД заголовком, а не справа от него. */
.principles-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 376px;
  padding-top: 1px;
}
.principles-head { flex: 0 0 550px; max-width: 550px; }
.principles-head h2 { max-width: 550px; }
.principles-head .lead { width: 336px; margin-top: 32px; }
.principles-list { flex: 0 0 501px; max-width: 501px; padding-top: 8px; }
.principle-item + .principle-item { margin-top: 32px; }
.principle-item h3 {
  font-family: var(--font);
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: var(--graphite);
}
.principle-item p {
  margin: 8px 0 0;
  font-weight: 300;
  font-size: 18px;
  line-height: 22px;
  color: var(--graphite);
}

/* --- «Гарантии» (/why): строчный значок полиса ------------------------
   Единственное место на странице, где расхождение с эталоном приходит от
   НАШЕГО общего правила `img, svg, video { display: block }` (main.css:75),
   а не от блока эталона. У эталона картинка строчная, и её строка выше самой
   картинки: `<a>` там 64×68 при картинке 64×64 (замер 15.09), а у нас выходило
   ровно 64 — и блок «Гарантий» был короче эталона на 4px (479 против 483).
   Возвращаем строчность только этому значку; CSS самого блока (blocks.css)
   остаётся снятым с эталона дословно. */
.trust-block .trust-bottom-icon { display: inline; }

/* --- Адаптив -------------------------------------------------- */
@media (max-width: 1200px) {
  .hero__card { padding: 0 40px; min-height: 420px; }
  .hero__text h1 { font-size: 38px; }
  .cta { grid-template-columns: 420px 1fr; gap: 32px; }
  .post-card { height: auto; min-height: 480px; }
}

@media (max-width: 980px) {
  /* HERO: фото карточкой сверху, текст под ним (тот же макет, что на Тильде).
     На планшете текст поверх фото залезал на портрет — состав в столбик это снимает. */
  .hero { padding: 0 0 var(--section-y); }
  .hero__card {
    display: block;
    aspect-ratio: auto;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    overflow: visible;
    background: none;
    /* Тень снимаем: здесь карточка перестаёт быть прямоугольником снимка —
       она прозрачная сетка над снимком И текстом, а тень рисуется по её
       border-box, то есть вокруг всего блока (главная 767: 735×685 против
       фото 735×423). Тень остаётся у снимка — он тут единственный слой,
       который рисует прямоугольник фото (см. `.hero__bg` ниже). */
    box-shadow: none;
  }
  .hero__bg {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1680 / 967;
    border-radius: var(--r);
    box-shadow: 2px 2px 4px 0 rgba(115, 115, 115, .25);
  }
  .hero__text { max-width: none; padding: 24px 0 0; }
  .hero__text h1 { font-size: 38px; }
  .hero__lead { margin-top: 28px; font-size: 18px; line-height: 1.4; }
  .hero__text .btn-row { margin-top: 28px; }
  .hero__note { margin-top: 18px; }
  /* Список сносок: свой отступ у списка, не у строк — иначе он сложился бы
     с зазором между строками. */
  .hero__notes { margin-top: 18px; }
  /* Карта: у эталона на узком экране артборд ужимается вместе с виджетом,
     поля 11/19 при этом не сохраняются — они десктопные. */
  .map-block { padding: 0; }
  .map-embed { height: 320px; }
  /* Процесс: 2 колонки в ряд, линия между кружками только у 1-го и 3-го */
  .steps-block { padding: 0 10px; }
  .steps { flex-wrap: wrap; gap: 24px 0; }
  .step { flex: 0 0 50%; min-width: 50%; }
  .step:nth-child(2) .step__circle-wrap::after { display: none; }
  .step:nth-child(1) .step__circle-wrap::after,
  .step:nth-child(3) .step__circle-wrap::after {
    display: block;
    left: calc(50% + 47px);
    right: calc(-50% + 47px);
  }
  /* 397px — ширина колонки эталона; в одну колонку карточка должна тянуться */
  .review-card--accent { width: auto; }
  .cta { grid-template-columns: 1fr; gap: 28px; }
  .cta__media { max-width: 440px; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .case-feed__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  /* 420px было под выпуск до кромки; с 11.10.2026 (rp-1011-wp-carousel-contain)
     ширина считается от трека — две карточки + загляд 48, см. базовое правило. */
  .reviews__track > * { flex-basis: calc((100% - 80px) / 2); }
  .reviews-page { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}

@media (max-width: 640px) {
  /* HERO: телефон — фото 4:3 сверху, кнопки столбиком во всю ширину */
  .hero__bg { aspect-ratio: 4 / 3; object-position: 60% center; }
  .hero__text { padding-top: 20px; }
  .hero__pill { width: fit-content; max-width: 100%; align-self: flex-start; }
  /* Две плашки (только `/why`) на телефоне не влезают в строку —
     переносим по одной, иначе горизонтальный перелив (см. overflow-pages.cjs). */
  .hero__pills { flex-wrap: wrap; }
  .hero__text h1 { font-size: 30px; }
  .hero__lead { margin-top: 22px; font-size: 15px; line-height: 1.42; }
  .hero__text .btn-row { margin-top: 24px; flex-direction: column; align-items: stretch; gap: 12px; }
  .hero__text .btn-row .btn { width: 100%; }
  .hero__note { margin-top: 16px; }
  .hero__notes { margin-top: 16px; gap: 12px; }
  .map-embed { height: 260px; }
  /* Процесс: 1 колонка, линии убираем совсем */
  .steps-block { padding: 0 10px; }
  .step { flex: 0 0 100%; min-width: 100%; }
  /* .steps в селекторе — иначе базовое правило .step:not(:last-child) …
     ::after специфичнее и линия (left/right: calc(±50% + 47px)) вылезала
     за вьюпорт, давая горизонтальную прокрутку на телефоне */
  .steps .step .step__circle-wrap::after { display: none; }
  .step__title { font-size: 16px; }
  .step__text { font-size: 14px; }
  .blog-grid { grid-template-columns: 1fr; }
  .case-feed__grid { grid-template-columns: 1fr; }
  .post-card { min-height: 0; }
  .reviews .review-card { height: auto; min-height: 300px; padding: 28px 24px; }
  .reviews .review-card__text { font-size: 16px; }
  .reviews .review-card--real .review-card__shot img { height: auto; }
  .reviews__track > * { flex-basis: calc(100% - 50px); }
  .reviews-page { grid-template-columns: 1fr; }
  .reviews-page .review-card { padding: 28px 24px; }
  .reviews-page .review-card__head { height: auto; gap: 14px; }
  .reviews-page .review-card__avatar { width: 64px; height: 64px; }
  .reviews-page .review-card__name,
  .reviews-page .review-card__role { overflow-wrap: break-word; }
  .cta__form .btn { width: 100%; }
  /* Статья: заголовки тела мельче, подвал в столбик — ссылка «Все статьи»
     уезжает под рубрики, а не встаёт с ними в одну строку. */
  .entry h2 { font-size: 22px; }
  .entry h3 { font-size: 18px; }
  .entry table { font-size: 13px; }
  .entry th, .entry td { padding: 8px 10px; }
  .entry__foot { flex-direction: column; align-items: flex-start; }
}

/* --- Калькулятор (/tariffs) ------------------------------------------
   Геометрия снята с эталонной записи `rec2406412651` (13.09.2026):
   две карточки 608 и 501 при контейнере 1160, зазор 52, обе высотой 515.
   Сумма 1161 на пиксель больше контейнера — у эталона так же: блок собран
   не по контейнеру, а по своей сетке 1200, и правый край карточки выходит
   за контейнер на 1px. Оставляем как есть, это видно и на эталоне.
   Левая карточка стоит на 3px ВЫШЕ правой (у эталона карточки разведены по
   верху записи на 7 и 10px) — авторский зазор, воспроизведён явно. */
.calc-block {
  display: flex;
  align-items: flex-start;
  gap: 52px;
  /* 30px между шапкой раздела и сеткой: у эталона шапка и калькулятор —
     две отдельные записи, и артборд калькулятора стоит на 30px ниже начала
     своей записи (замер 13.09: запись `rec2406412651` начинается на 3996,
     артборд — на 4026). Без этого вся секция ниже эталона на 29px. */
  margin-top: 30px;
  /* Базовая типографика Тильды: у эталона наследуется `line-height: normal`,
     у нас в body 1.5 — от этого зависят высоты подписей и всей секции. */
  line-height: normal;
}
.calc-card {
  box-sizing: border-box;
  min-height: 515px;
  padding: 20px;
  border: 1px solid #E5E7EB;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(115, 115, 115, .25);
}
/* `flex: none` — карточки держат свои 608 и 501, даже если вместе с зазором
   (1161) не влезают в контейнер 1160 и правый край выходит на 1px. У эталона
   ровно так: замер 13.09 — левая карточка `140..748` (608), правая
   `800..1301` (501) при контейнере `140..1300`. Дать карточкам ужаться —
   значит разойтись с эталоном на полпикселя в каждой и «поправить» его
   авторскую сетку. На 1200 и ниже блок встаёт в столбик (responsive.css). */
.calc-card--form {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 20px;
  width: 608px;
  margin-top: 7px;
}
.calc-card--result {
  position: relative;
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 24px;
  width: 501px;
  margin-top: 10px;
}

/* Поля слева: подпись 18/300 #616161 с отступом 5px от текста до поля,
   между группами 20px (у эталона подпись и поле — одна группа). */
.calc-field { display: flex; flex-direction: column; }
.calc-field__label {
  display: block;
  padding: 0 10px 5px 0;
  font-size: 18px;
  font-weight: 300;
  color: #616161;
}
.calc-field__wrap { position: relative; }
.calc-select {
  width: 100%;
  height: 50px;
  /* Правый отступ — под стрелку; гарнитура Arial: на эталоне поле списка
     наследует её от формы Тильды, а не от брендовой гарнитуры. */
  padding: 0 45px 0 20px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  background-color: #fff;
  color: #393939;
  font-family: Arial, Arial, sans-serif;
  font-size: 16px;
  font-weight: 300;
  line-height: 21.28px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
/* Стрелка списка: у Тильды это треугольник из рамок на обёртке
   (`.t-select__wrapper:after` — 6/5/5, справа 20, по центру поля).
   Размеры и положение сняты с эталона.
   Селектор — по модификатору списка, а не по общей обёртке: у бегунков обёртка
   та же, и стрелка вылезала рядом с дорожкой (у эталона её там нет — замер и
   скриншот 14.09: у ползунка только плашка значения и дорожка). */
.calc-field__wrap--select::after {
  content: '';
  position: absolute;
  top: 0;
  right: 20px;
  margin-top: 22px;
  width: 0;
  height: 0;
  border: solid transparent;
  border-width: 6px 5px 0;
  border-top-color: #393939;
  pointer-events: none;
}

/* Карточка результата. Первой строкой — плашка «Рекомендуемый тариф». Прежде
   на её месте стоял заголовок 18/28 в поле высотой 34 (у эталона высота поля
   задана автором вручную), и на эти 34px ниже стоит весь остальной столбец.
   Строка плашки держит ту же высоту 34, поэтому низ карточки не сдвигается.
   Задача rp-1510-wp-4fixes (решение Павла 15.10.2026). */
.calc-result__badge-row {
  display: flex;
  align-items: center;
  height: 34px;
}
.calc-result__plan {
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  color: #393939;
}
/* Плашка — та же кнопка Тильды с золотым кольцом, что `.hero__pill`
   (main.css): рамка нарисована градиентом и вырезана маской, чтобы нутро
   осталось прозрачным. Правила продублированы осознанно: общий класс потянул
   бы за собой правку уже принятого первого экрана.
   Теперь стоит В ПОТОКЕ, по левому краю (rp-1510-wp-4fixes): прежде была
   absolute над верхним правым углом строки тарифа.
   Сама плашка выше строки на 1,4px сверху и снизу — выходит в отступ карточки
   (20px) и в зазор (24px), ничего не перекрывая: габарит карточки не меняется. */
.calc-result__badge {
  /* `relative`, а не `static`: кольцо рисует `::before` с `inset: 0`, и он ищет
     ближайшего позиционированного предка. Без этого кольцо растянулось бы на
     `.calc-card--result` (тот же дефект уже ловили на телефоне 02.10). */
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 4px 20px;
  border: 2px solid var(--gold-a);   /* фолбэк, если маска не поддержана */
  border-radius: 30px;
  font-family: 'Involve', 'Geologica', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24.8px;
  color: rgba(57, 57, 57, .8);
  /* Надпись длиннее прежней («Рекомендуем» → «Рекомендуемый тариф») — держим
     её одной строкой, чтобы плашка не стала двухстрочным овалом. В контент
     карточки влезает с запасом (459px на десктопе, ~254px на 320). */
  white-space: nowrap;
}
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .calc-result__badge { border: 0; padding: 6px 22px; }
  .calc-result__badge::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 2px;
    border-radius: inherit;
    background: linear-gradient(313.56deg, #FFE128 0%, #FFB900 100%);
    -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    -webkit-mask-clip: content-box, border-box;
    -webkit-mask-composite: xor;
    mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
    mask-clip: content-box, border-box;
    mask-composite: exclude;
    pointer-events: none;
  }
}
.calc-result__price { display: flex; flex-direction: column; }
.calc-result__amount {
  font-size: 44px;
  font-weight: 600;
  line-height: 68px;
  color: var(--red);
}
/* Число приходит из скрипта в `<strong>` (как у эталона) — оно жирнее
   подписи «в месяц» под ним. */
.calc-result__amount strong { font-weight: 700; }
.calc-result__period {
  font-size: 16px;
  font-weight: 300;
  line-height: 25px;
  color: #393939;
  opacity: .8;
}
.calc-result__feature {
  display: flex;
  align-items: center;
  gap: 8px;
}
.calc-result__feature span {
  font-size: 16px;
  font-weight: 300;
  line-height: 25px;
  color: #393939;
  opacity: .8;
}
.calc-result__check { flex: none; width: 16px; height: 16px; }
.calc-result__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 8px;
  background-image: linear-gradient(133.56deg, #9F0208 0%, #D15A5A 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 24.8px;
  text-decoration: none;
}
.calc-result__button span { padding: 6px 16px; }
.calc-result__note {
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 22px;
  color: #393939;
  opacity: .8;
}

/* --- Карта (/kontakty) ------------------------------------------------
   У эталона карта — артборд 440 с полями 11 сверху и 19 снизу от виджета
   (обмер 14.09): сам виджет 1163×410, скругления и тени у него нет.
   Следующая за картой запись («карточки офиса») идёт без зазора сверху,
   поэтому у секции снят нижний отступ — `section--flush`. */
.section--flush { padding-bottom: 0; }
/* Поля — `padding` обёртки, а не `margin` карты: у секции нет нижнего паддинга,
   и `margin` схлопнулся бы через неё наружу (обмер и разбор — в section-map.php). */
.map-block { padding: 11px 0 19px; }
.map-embed { height: 410px; background: var(--surface); }
/* Карта — снимок живого виджета (решение Павла 15.10.2026, rp-1510-wp-formmapwhy)
   вместо `<iframe>`: снимок снят в 2× под retina, поэтому в коробку 1160×410 он
   укладывается `cover`-ом (пропорция кадра почти совпадает, обрезка ~1px). */
.map-embed__link { display: block; height: 100%; }
.map-embed img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- Попап с формой ---------------------------------------------------
   ДОПИСАНО НАМИ, не из эталона (решение Павла 01.10): ссылки на форму
   (`#forma`, `#*-form`) открывают попап вместо прокрутки к секции; секция
   формы на странице остаётся как есть. Разметка — `footer.php`, скрипт —
   `assets/js/main.js` (блок «Попап с формой»).

   Форма в попап не копируется разметкой, а клонируется из секции, поэтому
   поля, телефонное поле и кнопка сохраняют свои стили (`.cta__form`,
   `.field`, `.phone-field` объявлены без привязки к секции) — здесь задаётся
   только сама рама: подложка, окно, заголовок и крестик.

   `z-index` выше плавающих контактов (1000, раскрытые 10000) и шапки (90),
   иначе попап оказался бы под ними. */
body.form-modal-open { overflow: hidden; }
.form-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
/* Правило нужно явно: `display: flex` выше перебивает браузерное
   `[hidden] { display: none }`, и закрытый попап остался бы на экране
   (та же ловушка, что у карточек ленты кейсов). */
.form-modal[hidden] { display: none; }
.form-modal__backdrop { position: absolute; inset: 0; background: rgba(26, 26, 26, .55); }
.form-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  /* Высокую форму прокручиваем внутри окна, а не страницей: фолбэк `vh`
     оставлен для браузеров без `dvh`. */
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(24px, 5vw, 44px);
  background: var(--white);
  border-radius: var(--r);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}
.form-modal__title {
  margin: 0 0 24px;
  font-size: clamp(20px, 3vw, 28px);
  line-height: 1.2;
  color: var(--graphite);
}
.form-modal__title[hidden] { display: none; }
.form-modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--graphite);
  font-family: inherit;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.form-modal__close:hover { background: var(--surface); }
.form-modal__close:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
/* Телефон: окно почти во весь экран, внешний отступ меньше, а от верха
   выравниваем — иначе клавиатура уводит верх окна за кадр. */
@media (max-width: 640px) {
  .form-modal { padding: 12px; align-items: flex-start; }
  .form-modal__dialog {
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }
}

/* ============================================================
   АНКЕТА КЛИЕНТА (/anketa) — задача rp-0210-wp-anketa, 02.10.2026
   ------------------------------------------------------------
   Переносится с прототипа `buh-360.ru/anketa` (снят браузером 02.10):
   цветная полоса первого экрана и форма узкой колонкой. Числа сняты
   с прототипа: полоса #FFDE43, отступ полосы 120px (на 390px — 90px),
   колонка формы 560px (на 768 — 600 = контейнер минус 40), поля высотой
   60px с одной нижней линией 1px, подпись раздела 16px/300 по центру,
   подпись варианта 20px/300, кнопка — чёрная «таблетка» радиусом 30px.

   Типографика — темы (Geologica/Unbounded), а не Arial прототипа:
   страница на эталоне набрана системным шрифтом Тильды, а не брендовым,
   и повторять этот случайный шрифт на своей странице незачем.

   Адаптив — здесь же (полосы 390/768 сняты с прототипа), без правки
   responsive.css: блок новый и ни на одной странице больше не встречается.
   ============================================================ */
.anketa-band {
  padding: 120px 0;
  background: #FFDE43;
  text-align: center;
}
.anketa-band__title {
  margin: 0;
  font-family: var(--font-accent);
  font-size: clamp(34px, 3.7vw, 52px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--graphite);
}
.anketa-band__descr {
  margin: 24px 0 0;
  font-size: clamp(20px, 1.9vw, 26px);
  font-weight: 300;
  line-height: 1.35;
  color: var(--graphite);
}

.anketa-section { padding: 80px 0 100px; }
.anketa-form {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.anketa-group { display: flex; flex-direction: column; gap: 28px; }
.anketa-group__title {
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
  text-align: center;
  color: var(--graphite);
}

.anketa-field { display: flex; flex-direction: column; gap: 6px; }
.anketa-field__label {
  padding: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.3;
  color: var(--graphite);
}
.anketa-field input[type="text"],
.anketa-field input[type="tel"],
.anketa-field input[type="email"],
.anketa-field input[type="date"] {
  width: 100%;
  height: 60px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--graphite);
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  color: var(--graphite);
}
.anketa-field input::placeholder { color: var(--graphite); opacity: .45; }
.anketa-field input:focus { outline: none; border-bottom-color: var(--red); }

.anketa-field--radio { margin: 0; padding: 0; border: 0; }
.anketa-radios { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.anketa-radio { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.anketa-radio input[type="radio"] {
  flex: 0 0 auto;
  position: relative;
  width: 20px;
  height: 20px;
  margin: 0;
  appearance: none;
  border: 1px solid var(--graphite);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.anketa-radio input[type="radio"]:checked { border-color: var(--red); }
.anketa-radio input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--red);
}
.anketa-radio__text { font-size: 20px; font-weight: 300; line-height: 1.3; }

/* «Свой вариант»: своё поле показывается только когда выбран этот вариант.
   Если `:has()` браузер не понимает, поле остаётся скрытым, а в заявку
   уходит слово «Свой вариант» (разбор ответов — `buh360_anketa_answers()`). */
.anketa-other { display: none; }
.anketa-radios:has(input[value="Свой вариант"]:checked) .anketa-other { display: block; }
.anketa-other {
  width: 100%;
  height: 44px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--graphite);
  border-radius: 0;
  background: transparent;
  font-family: inherit;
  font-size: 16px;
  color: var(--graphite);
}

.anketa-consent { margin: 0; }

/* Кнопка — как на прототипе: чёрная «таблетка» (не брендовый градиент:
   у прототипа здесь `background:#000; border-radius:30px`). */
.anketa-submit {
  align-self: center;
  padding: 16px 44px;
  border-radius: 30px;
  background: #000000;
  color: var(--white);
  font-size: 16px;
  font-weight: 400;
}
.anketa-submit:hover { background: var(--graphite); }

@media (max-width: 980px) {
  .anketa-band { padding: 90px 0; }
  .anketa-section { padding: 60px 0 80px; }
}
@media (max-width: 640px) {
  .anketa-form { gap: 32px; }
  .anketa-group { gap: 24px; }
  .anketa-radio__text { font-size: 17px; }
  .anketa-submit { width: 100%; }
}

/* ============================================================
   КВИЗЫ (/kviz, /kviz/<слаг>) — каталог и страница квиза.

   Задача rp-0610-wp-kviz-impl (06.10.2026), спека маркетингового слоя
   `.reports/marketing/2026-10-05 -- kviz spec + canon fixes.md`, §A, и
   поправка 11:33 — `/kviz` это КАТАЛОГ (архив типа записи `kviz`), а не
   одна страница: ниже каталог (`kviz-band--hub`, `kviz-hub`, `kviz-card`,
   `kviz-crumbs`) и страница квиза (`kviz-band`, `kviz-section`, `kviz-form`).

   Отдельным блоком, а не правкой responsive.css: общих селекторов у него
   с другими блоками нет (префикс `kviz-`), поэтому адаптив для него лежит
   здесь же, рядом с базой — как у блока анкеты выше. В responsive.css
   уходят только те правила, которым нужен порядок поверх общего слоя
   (см. пометку там).

   Вид собран из токенов темы (--red/--grad/--red-mist/--graphite),
   шрифты — Geologica + Unbounded. Ориентира с эталона нет: страниц
   `/kviz` у Тильды не было, макет проектировался под разметку квиза.

   Иллюстрации — квадраты 800×800 с тёмным фоном и красным акцентом;
   поэтому у карточек вопроса и результата они лежат отдельным блоком
   с общим радиусом `--r`, а не подложкой под текст.

   Сетка каталога рассчитана на рост до 5–10 квизов: карточки одинаковой
   ширины и переноса по строкам, без «первого на всю ширину» — второй и
   третий квиз не потребуют правки раскладки (поправка, п.6).
   ============================================================ */

/* --- Каталог: первый экран, список, крошки --- */

/* Полоса каталога — та же, что у квиза, но без иллюстрации: у каталога
   своей картинки нет, поэтому тело занимает всю ширину. */
.kviz-band--hub .kviz-band__inner { grid-template-columns: minmax(0, 1fr); }
.kviz-band--hub .kviz-band__descr { max-width: 760px; }

.kviz-hub { padding: 64px 0 88px; }
.kviz-hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 32px;
}
.kviz-hub__empty {
  margin: 0;
  font-size: 18px;
  font-weight: 300;
  color: #616161;
}

.kviz-card {
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.kviz-card:hover {
  border-color: var(--red-light);
  box-shadow: 0 12px 32px rgba(57, 57, 57, .08);
}
.kviz-card__link {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  width: 100%;
  color: inherit;
  text-decoration: none;
}
.kviz-card__media img {
  width: 100%;
  border-radius: var(--r);
}
.kviz-card__kicker {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red);
}
.kviz-card__title {
  font-family: var(--font-accent);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--graphite);
}
.kviz-card__text {
  flex: 1 1 auto;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.45;
  color: #616161;
}
.kviz-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 500;
  color: var(--red);
}
.kviz-card__arrow { transition: transform var(--ease); }
.kviz-card__link:hover .kviz-card__arrow { transform: translateX(4px); }

/* Крошки на странице квиза. Не украшение: это входящая ссылка на каталог,
   иначе `/kviz` остался бы сиротой (поправка, п.7). */
.kviz-crumbs {
  padding: 20px 0 0;
  font-size: 14px;
  font-weight: 300;
  color: #616161;
}
.kviz-crumbs .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.kviz-crumbs a { color: #616161; text-decoration: underline; }
.kviz-crumbs a:hover { color: var(--red); }
.kviz-crumbs [aria-current="page"] { color: var(--graphite); }

/* Крошки стоят над полосой квиза, поэтому верхний отступ полосы меньше. */
.kviz-crumbs + .kviz-band { padding-top: 40px; }

.kviz-band {
  padding: 96px 0 88px;
  background: var(--red-mist);
}
.kviz-band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: center;
  column-gap: 64px;
}
.kviz-band__kicker {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red);
}
.kviz-band__title {
  margin: 0;
  font-family: var(--font-accent);
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--graphite);
}
.kviz-band__descr {
  max-width: 620px;
  margin: 20px 0 0;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 300;
  line-height: 1.4;
  color: var(--graphite);
}
.kviz-band__note {
  margin: 16px 0 0;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.45;
  color: #616161;
}
.kviz-band__media img { width: 100%; border-radius: var(--r); }

.kviz-section { padding: 72px 0 88px; }
.kviz { max-width: 760px; margin: 0 auto; }

/* Скрытие слайдов делаем явно: `display: grid` у слайда и `display: flex`
   у экрана перебивают браузерное `[hidden] { display: none }` (тот же
   случай, что у карточек кейсов и попапа формы выше), и закрытый экран
   остался бы на виду — сразу все девять вопросов и четыре результата. */
.kviz__stage[hidden],
.kviz-slide[hidden],
.kviz-result[hidden] { display: none; }

.kviz__progress { margin-bottom: 40px; }
.kviz__progress-label {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 500;
  color: #616161;
}
.kviz__bar {
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--line);
  overflow: hidden;
}
.kviz__bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background-image: var(--grad);
  transition: width var(--ease);
}

.kviz-slide {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  column-gap: 48px;
  row-gap: 32px;
  align-items: start;
}
/* Картинка вопроса занимает первый столбец обеих строк: справа от неё
   сначала группа вариантов, под ней — кнопки «Назад»/«Далее». */
.kviz-slide__media { grid-row: span 2; }
.kviz-slide__media img { width: 100%; border-radius: var(--r); }
/* У вопроса может не быть иллюстрации (квиз, заведённый записью до отрисовки
   графики): тогда пустая колонка не должна съедать четверть ширины, а
   оставшийся текст — висеть в правой половине. Схлопываем сетку в одну
   колонку, если картинки в слайде нет вовсе. */
.kviz-slide:not(:has(.kviz-slide__media img)) { grid-template-columns: minmax(0, 1fr); }
.kviz-slide__media:empty { display: none; }

.kviz-q { margin: 0; padding: 0; border: 0; }
.kviz-q__title {
  display: flex;
  gap: 14px;
  padding: 0;
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--graphite);
}
/* Фокус при смене вопроса ставится на сам заголовок (скриптом) — рамку
   ему не рисуем: заголовок не интерактивен, обводка читалась бы как
   «сюда можно нажать». */
.kviz-q__title:focus { outline: none; }
.kviz-q__title:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.kviz-q__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-image: var(--grad);
  color: var(--white);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
}

.kviz-q__opts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}
.kviz-opt {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease);
}
.kviz-opt:hover { border-color: var(--red-light); }
/* Отметка выбранного варианта — по `:has()`: без него подсветки нет,
   но radio остаётся настоящим, и выбор работает (как у «Своего варианта»
   в анкете). */
.kviz-opt:has(input:checked) { border-color: var(--red); background: var(--red-mist); }
.kviz-opt input[type="radio"] {
  flex: 0 0 auto;
  position: relative;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  appearance: none;
  border: 1px solid var(--graphite);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.kviz-opt input[type="radio"]:checked { border-color: var(--red); }
.kviz-opt input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--red);
}
.kviz-opt__text { font-size: 18px; font-weight: 300; line-height: 1.35; }

/* Кнопки вопроса: «Назад» слева, «Далее» справа. Без «Назад» (первый
   вопрос) «Далее» остаётся справа — `margin-right: auto` держит её на
   месте, а не прижимает к левому краю. */
.kviz-nav {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.kviz-nav__back { margin-right: auto; }

.kviz__noscript {
  margin: 0;
  padding: 16px 20px;
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: 15px;
  line-height: 1.45;
  color: var(--graphite);
}

.kviz-result {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.kviz-result__media img {
  width: 220px;
  margin: 0 auto 28px;
  border-radius: var(--r);
}
/* Пустая колонка/блок картинки у результата не должен оставлять зазор. */
.kviz-result__media:empty { display: none; }
.kviz-result__index {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #616161;
}
.kviz-result__name {
  margin: 0;
  font-family: var(--font-accent);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--graphite);
}
.kviz-result__name:focus { outline: none; }
.kviz-result__name:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.kviz-result__score {
  margin: 12px 0 0;
  font-size: 17px;
  font-weight: 400;
  color: #616161;
}
.kviz-result__text {
  margin: 24px 0 0;
  font-size: 19px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--graphite);
}
.kviz-result__todo {
  margin: 32px 0 0;
  font-size: 19px;
  font-weight: 600;
  color: var(--graphite);
}
.kviz-result__recs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  text-align: left;
}
.kviz-result__recs li {
  position: relative;
  padding-left: 26px;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.45;
}
.kviz-result__recs li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red);
}
.kviz-result__lead {
  margin: 32px 0 0;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.45;
  color: #616161;
}
.kviz-result__cta { margin-top: 20px; }
/* Вторая ссылка результата «Порядок» — в калькулятор /tariffs. Подчинена
   кнопке: она не конкурирует с главным действием экрана (Р1: одно
   контрастное действие на экран). */
.kviz-result__calc {
  margin: 14px 0 0;
  font-size: 16px;
  font-weight: 300;
}
.kviz-result__calc a {
  color: var(--graphite);
  text-decoration: underline;
}
.kviz-result__calc a:hover { color: var(--red); }
.kviz-result__phone {
  margin: 20px 0 0;
  font-size: 16px;
  font-weight: 300;
  color: #616161;
}
.kviz-result__again {
  margin: 28px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 15px;
  color: var(--graphite);
  text-decoration: underline;
  cursor: pointer;
}
.kviz-result__again:hover { color: var(--red); }

/* Полоса заявки. Якорь `#kviz` — цель кнопки «Консультация» в шапке и
   адрес возврата после отправки (`?lead=ok#kviz`), поэтому секция стоит
   после теста и форма в ней видна сразу. */
.kviz-form-section { padding: 0 0 100px; }
.kviz-form { max-width: 560px; margin: 0 auto; }
.kviz-form__title {
  margin: 0;
  font-family: var(--font-accent);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--graphite);
}
.kviz-form__phone {
  margin: 16px 0 0;
  font-size: 17px;
  font-weight: 300;
  text-align: center;
  color: #616161;
}
.kviz-form__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 32px;
}
.kviz-form__body .btn { margin-top: 8px; }
.kviz-form__again {
  margin: 20px 0 0;
  font-size: 15px;
  text-align: center;
}

/* --- Каталог квизов (/kviz) и крошки страницы квиза --------------------
   Поправка РП 06.10 11:33: `/kviz` — каталог, квизы живут по адресам
   `/kviz/<слаг>`. Раскладка рассчитана на рост до 5–10 квизов: сетка
   `auto-fill`, карточки одной ширины, без «первого на всю ширину» —
   второй и третий квиз добавляются записью, без правки вёрстки.
   Метрики карточек взяты у карточек блога и кейсов (`.post-card`:
   фон #F7F7F7, радиус `--r`, подъём на 4px при наведении), чтобы лента
   квизов читалась как та же лента, что на сайте.

   Крошки нужны не для украшения: ссылка на статью и реклама ведут сразу
   на квиз (поправка, п.7), и каталог без входящей ссылки остался бы
   сиротой. */

.kviz-crumbs {
  padding: 18px 0 0;
  font-size: 14px;
  font-weight: 300;
  color: #888888;
}
.kviz-crumbs a { color: #888888; }
.kviz-crumbs a:hover { color: var(--red); }
.kviz-crumbs span[aria-hidden] { margin: 0 8px; color: #C4C4C4; }

/* Полоса каталога — без картинки: колонка одна. Селектор из двух классов
   (0,2,0) перебивает полосовое правило `.kviz-band__inner` в responsive.css
   (0,1,0) независимо от порядка подключения, поэтому отдельной полосы
   для каталога в адаптиве не нужно. */
.kviz-band--hub .kviz-band__inner { grid-template-columns: minmax(0, 1fr); }
.kviz-band--hub .kviz-band__descr { max-width: 720px; }

.kviz-hub { padding: 72px 0 88px; }
/* `minmax(320px, 1fr)` — три карточки на контейнере 1160. На широтах ниже
   640px сетка переходит в одну колонку (responsive.css): там трек 320px
   шире контейнера и дал бы горизонтальный перелив. */
.kviz-hub__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 32px;
}
.kviz-hub__empty {
  margin: 0;
  font-size: 17px;
  font-weight: 300;
  color: #616161;
}

.kviz-card {
  display: flex;
  background: #F7F7F7;
  border-radius: var(--r);
  color: inherit;
  transition: transform var(--ease);
}
.kviz-card:hover { color: inherit; transform: translateY(-4px); }
.kviz-card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 28px 28px;
  color: inherit;
}
/* Иллюстрация — квадрат 800×800; показываем его целиком, без кропа:
   композиция картинки на кропе шириной карточки теряет верх и низ.
   `height: auto` при атрибутах width/height держит пропорцию. */
.kviz-card__media { display: block; margin: 0 0 22px; border-radius: var(--r); overflow: hidden; }
.kviz-card__media img { display: block; width: 100%; height: auto; transition: transform .4s ease; }
.kviz-card:hover .kviz-card__media img { transform: scale(1.03); }
.kviz-card__kicker {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red);
}
.kviz-card__title {
  font-family: var(--font-accent);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--graphite);
}
.kviz-card__text {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 24.8px;
  font-weight: 300;
  color: #888888;
}
/* Ссылка прижата к низу карточки: карточки одной строки бывают разной
   высоты (заголовки в две и три строки), и подпись должна стоять на
   одном уровне во всей строке. */
.kviz-card__meta {
  margin-top: auto;
  padding-top: 20px;
  font-size: 16px;
  font-weight: 600;
  color: var(--red);
}
.kviz-card__arrow { display: inline-block; margin-left: 6px; transition: transform var(--ease); }
.kviz-card:hover .kviz-card__arrow { transform: translateX(4px); }

/* --- Разборы ситуаций по нишам (/cases) -------------------------------
   Не с эталона: блок появился 08.10.2026 (задача rp-0810-wp-cases-feed-razbory,
   решение Павла п. 4 свода цен и доказательств). У эталона на `/cases` только
   лента из шести кейсов-заголовков с нерабочей надписью «Читать кейс
   полностью»; разборы ситуаций пришли из маркетинговых пачек волта и стали
   основной единицей ленты.

   Карточка намеренно похожа на `.case-card` (тот же `#F7F7F7`, радиус 20,
   тень `0 0 3px`, заголовок 18/600/24.3, красная надпись со стрелкой 16/600 и
   гапом 5.5) — лента должна читаться как одна страница, а не как два разных
   раздела. Отличие одно: разбор раскрывается на месте (`<details>`), поэтому
   карточка — это `summary`, а не ссылка, и «Читать разбор» открывает тело, а
   не уводит со страницы. Сетка 3×360 с зазорами 40 — как у ленты кейсов.

   Заголовок и лид секции сняты 08.10.2026 (задача rp-0810-wp-cases-h1-reviews,
   п. 5): H1 страницы — «Разборы ситуаций по нишам», свой H2 повторял бы его,
   лид переехал в подзаголовок первого экрана. Секция открывается заголовком
   первой ниши, поэтому у `.razbory__group` первый отступ снят. */
.razbory__group { margin-top: 56px; }
.razbory__group:first-of-type { margin-top: 0; }
.razbory__group-title { margin: 0 0 24px; font-family: var(--font); font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--graphite); }
/* `align-items: start`, а не растяжение строки: карточки — аккордеоны, и при
   раскрытой одной из трёх соседние растянулись бы в пустой столбец (у ссылок
   ленты кейсов обратная задача — там низ выравнивают `margin-top: auto`). */
.razbory__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; align-items: start; }
.razbor-card {
  background: #F7F7F7;
  border-radius: var(--r);
  box-shadow: rgba(0, 0, 0, .2) 0 0 3px;
  color: var(--graphite);
}
.razbor-card__summary {
  display: flex;
  flex-direction: column;
  padding: 26px 30px 27px;
  cursor: pointer;
  /* Свой маркер раскрытия не нужен: состояние показывает стрелка, а системный
     треугольник (`list-style` + `::-webkit-details-marker`) убирается. */
  list-style: none;
}
.razbor-card__summary::-webkit-details-marker { display: none; }
.razbor-card__details[open] .razbor-card__summary { padding-bottom: 16px; }
.razbor-card__title { font-family: var(--font); font-size: 18px; font-weight: 600; line-height: 24.3px; color: var(--graphite); }
.razbor-card__more { padding-top: 15px; font-size: 16px; line-height: 24.8px; font-weight: 600; color: var(--red); }
/* Стрелка эталона (байт-в-байт `shortarw_right_bold.svg`, см. `.case-card__more-icon`).
   `fill` приходится задавать на самом `path`: в файле он несёт `fill="black"`,
   а презентационный атрибут перебивает наследование от `svg` (проверено пробой
   пикселей 14.09.2026 — иначе стрелка рисуется чёрной вместо красной).
   Поворот 90° на раскрытой карточке — единственный признак состояния. */
.razbor-card__more-icon { display: inline-block; width: 24px; height: 24px; margin-left: 5.5px; vertical-align: baseline; transition: transform var(--ease); }
.razbor-card__more-icon svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.razbor-card__more-icon svg path { fill: currentColor; }
.razbor-card__details[open] .razbor-card__more-icon { transform: rotate(90deg); }
.razbor-card__body { padding: 0 30px 26px; font-size: 15px; line-height: 1.55; }
.razbor-card__text { margin: 0; }
.razbor-card__text + .razbor-card__label,
.razbor-card__list + .razbor-card__label { margin-top: 18px; }
.razbor-card__label { margin: 0; font-weight: 600; color: var(--graphite); }
.razbor-card__list { margin: 10px 0 0; padding-left: 20px; }
.razbor-card__list li + li { margin-top: 8px; }
.razbor-card__text + .razbor-card__text { margin-top: 18px; }
.razbor-card__note { margin: 18px 0 0; font-size: 13px; font-style: italic; line-height: 1.45; color: #8A8A8A; }

@media (max-width: 980px) {
  .razbory__group { margin-top: 44px; }
  .razbory__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

@media (max-width: 640px) {
  .razbory__group { margin-top: 36px; }
  .razbory__group-title { font-size: 20px; }
  .razbory__grid { grid-template-columns: 1fr; }
  .razbor-card__summary { padding: 22px 22px 24px; }
  .razbor-card__body { padding: 0 22px 24px; }
}

/* --- Якоря разборов: цель ссылки с карточки кейса --------------------------
   Подпись карточки кейса в ленте ниже («Разбор по теме») ведёт якорем на
   карточку разбора этой же страницы. `id` стоит на `<details>` — см.
   `template-parts/section-razbory.php`, правило `razbor-<ниша>-<номер>`.
   Раскрывает цель скрипт (`assets/js/main.js`, блок «Якоря разборов»):
   раскрыть `<details>` из CSS нельзя — `open` это атрибут, а не состояние
   оформления, и `:target` раскрытия не задаёт (без скрипта цель приехала бы
   закрытой).

   Отступ под липкую шапку здесь НЕ задаётся: он уже задан темой глобально —
   `html { scroll-padding-top: 84px }` (`main.css`), и работает он для всех
   якорных переходов сайта, включая `scrollIntoView`. Своё `scroll-margin-top`
   на цели складывалось бы с ним (`scroll-padding` контейнера + `scroll-margin`
   цели), и карточка вставала бы вдвое ниже — 180px вместо 84px: проверено
   пробой 09.10.2026 (`verify-links.cjs`, прогон «до» правки). */
/* Подсветка цели — на самой карточке, а не на `<details>`: скругление и тень
   несёт карточка (`border-radius: var(--r)`), и рамка на внутреннем
   прямоугольнике вылезла бы за её углы. Без поддержки `:has()` подсветки
   просто нет — карточка всё равно видна раскрытой. */
.razbor-card:has(> .razbor-card__details:target) {
  box-shadow: 0 0 0 2px var(--red), rgba(0, 0, 0, .2) 0 0 3px;
}

/* --- Перелинковка «статья ↔ разбор» (10.10.2026, rp-1010-wp-crosslinks) -----
   Связь задана правилом в шаблоне («Разбор по теме» в конце статьи —
   `single.php`; «Статья по теме» в раскрытом разборе — `section-razbory.php`),
   а не расставлена руками, поэтому оформление одно на два места: `.related`.

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

   Кегль не задаётся: блок наследует кегль места — в статье это колонка
   `.entry-wrap` (16px), в теле разбора 15px (`.razbor-card__body`). Ссылки
   красные, как `.entry a` в тексте статьи. */
.related { margin: 36px 0 0; }
.related__label { margin: 0 0 12px; font-weight: 600; color: var(--graphite); }
.related__list { margin: 0; padding: 0; list-style: none; }
.related__list li + li { margin-top: 8px; }
.related__list a { color: var(--red); }
.related--card { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }

/* --- Индекс ниш над разборами (10.10.2026, rp-1010-wp-crosslinks) ----------
   Список отраслей над лентой разборов: ссылки на якоря `#niche-<ниша>` этой же
   страницы (прыжок внутрь страницы, а не переход на другую). Вид снят с чипов
   ленты (`.case-feed__chip`: рамка 1px графитовая, радиус 40, шаг 5/10) —
   на странице остаётся один язык кнопок.

   Своего заголовка у списка нет: подписью служат названия ниш, а видимой
   строки, которой в текстах страницы не было, не сочиняем — для служебных
   программ подпись несёт `aria-label` у `nav`. 40px снизу — зазор до заголовка
   первой ниши (у `.razbory__group:first-of-type` свой верхний отступ снят). */
.razbory__nav { margin: 0 0 40px; }
.razbory__index { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.razbory__index li { margin: 0 5px 10px; border: 1px solid var(--graphite); border-radius: 40px; }
.razbory__index a {
  display: inline-block;
  margin: 0 5px;
  padding: 6px 18px;
  border-radius: 40px;
  font-size: 16px;
  font-weight: 300;
  line-height: 21.6px;
  color: var(--graphite);
}
.razbory__index a:hover { color: var(--red); }
.razbory__index a:hover { color: var(--red); }

/* --- КАРУСЕЛЬ КЕЙСОВ (главная) ---------------------------------------
   Задача rp-1010-wp-cases-carousel, решение Павла 10.10.2026 22:50 (вариант B):
   блок «Кейсы» на главной — карусель шести карточек ленты `/cases` в каноне
   `.post-card--case`; отзывов в блоке нет.

   Блок наш: у Тильды карусели кейсов на главной не было, сверять с эталоном
   нечего. Метрики взяты у родственников, а не выдуманы: карточка и зазоры — у
   сетки ленты `/cases` (3×360, зазор 40; с 11.10.2026 зазор 30 и карточка от
   ширины трека — см. правило ниже), строка со стрелками и сами стрелки —
   у карусели отзывов (`t1186`: 40×40, br30, #393939, разворот правой стрелки
   приёмом rotate(.5turn), строка над карточками, прижата вправо).

   Раскладка карточки и её адаптив (`.post-card { height: 572px }` → `auto /
   min-height 480` на ≤1200 → `min-height: 0` на ≤640) уже есть в файле и здесь
   не дублируется: карточка карусели — та же карточка ленты, отличается только
   шириной, которую задаёт трек. */
.cases-carousel { position: relative; }
.cases-carousel__nav {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  margin-bottom: 20px;
}
/* padding сверху — не отступ: трек со `overflow-x: auto` обрезает и по вертикали
   (вычисленный `overflow-y` становится `auto`), а карточка ленты на наведении
   поднимается на 4px (`.post-card:hover { translateY(-4px) }`) — без запаса
   подъём срезался бы по верхней кромке трека. */
.cases-carousel__track {
  display: flex;
  gap: 30px;
  padding: 6px 0 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cases-carousel__track::-webkit-scrollbar { display: none; }
/* Ширина карточки задана формулой от ширины трека (100 % = контейнер), а не в
   пикселях: «загляд» четвёртой карточки считается от той же ширины, поэтому на
   любой ширине контейнера он один и тот же — 50px. 3 × карточка + 3 × 30 = 100 % − 50;
   на контейнере 1160 карточка выходит ровно 340 (3×340 + 3×30 = 1110, загляд 50).
   Зазор 30 и загляд 50 — намеренно круглые числа; арифметика задания
   (3×340 + 2×40 + 60 = 1160) не сходилась: она пропускала зазор перед четвёртой
   карточкой, при зазоре 40 видимых оставалось бы 20px. */
.cases-carousel__track > * { flex: 0 0 calc((100% - 140px) / 3); scroll-snap-align: start; }
/* Трек фокусируем (`tabindex="0"` в разметке) ради клавиатуры — значит, нужен
   видимый фокус. Кольцо по треку, а не по карточкам: листается трек. */
.cases-carousel__track:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 4px; }
.cases-carousel__arrow {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  padding: 0;                 /* сброс браузерного button{padding:1px 6px} —
                                 иначе он съедает контентную ширину под svg */
  border: 0;
  border-radius: 30px;
  background: var(--graphite);
  color: var(--white);
  cursor: pointer;
  transition: background var(--ease);
}
/* max-width: none — сброс темы img,svg{max-width:100%}, иначе svg сжимается
   до контентной ширины кнопки. */
.cases-carousel__arrow svg { width: 40px; height: 40px; max-width: none; display: block; }
.cases-carousel__arrow--next { transform: rotate(.5turn); }
.cases-carousel__arrow:hover { background: var(--surface); }
.cases-carousel__arrow:hover svg path { stroke: var(--graphite); }
/* Full-bleed снят (11.10.2026, rp-1011-wp-carousel-contain): трек больше не
   выпускается до кромки вьюпорта, «загляд» следующей карточки обрезается правым
   краем контейнера. Приём и разбор причин — в комментарии к `.reviews__track`;
   там же объяснено, почему не возвращаем `50vw` и почему `container-type` на
   секции больше не нужен. */

/* Планшет и десктоп «узкой» полосы (981–1200): две карточки + загляд 60.
   Формула та же, что у отзывов, но со своим зазором: 2 × карточка + 2 × 30 = 100 % − 60. */
@media (max-width: 1200px) {
  .cases-carousel__track > * { flex-basis: calc((100% - 120px) / 2); }
}
/* Планшет: те же две карточки, зазор 24 и загляд 48. Считаем от ширины трека
   (100 %), а не в пикселях: ширина контейнера на полосе плавает (100 % минус
   жёлобы), пиксельная база дала бы то полукарточку, то лишний зазор. */
@media (max-width: 980px) {
  .cases-carousel__track { gap: 24px; }
  .cases-carousel__track > * { flex-basis: calc((100% - 96px) / 2); }
}
/* Телефон: одна карточка почти во всю полосу, край следующей выглядывает и
   показывает, что это карусель. 100 % − 50 = 34px карточки + 16px зазора. */
@media (max-width: 640px) {
  .cases-carousel__track { gap: 16px; }
  .cases-carousel__track > * { flex-basis: calc(100% - 50px); }
}

/* --- Разборы как записи (rp-1410, ветка feat/cases-as-posts) ---------------
   Ссылочная карточка разбора (режим записей): лента не раскрывает полный
   текст — он живёт на странице разбора, а карточка ведёт на неё. Карточки в
   сетке выравниваются по низу (`margin-top: auto` у ссылки), как у ленты
   кейсов, — в отличие от аккордеонов выше. */
.razbor-card--link { display: flex; flex-direction: column; padding: 26px 30px 27px; }
.razbor-card--link .razbor-card__title { margin: 0; }
.razbor-card--link .razbor-card__title a { color: inherit; text-decoration: none; }
.razbor-card--link .razbor-card__title a:hover { text-decoration: underline; }
.razbor-card--link .razbor-card__text { margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: var(--graphite); }
.razbor-card--link .razbor-card__more { margin: auto 0 0; padding-top: 18px; }
.razbor-card--link .razbor-card__more a { color: var(--red); text-decoration: none; }
.razbor-card--link .razbor-card__more a:hover { text-decoration: underline; }

/* Страница одного разбора (single-razbor.php): тот же визуальный ряд, что у
   карточки ленты, но тело всегда раскрыто и ограничено по ширине чтения. */
.razbor-card--single { max-width: 860px; margin: 0 auto; padding: 0; background: transparent; box-shadow: none; }
.razbor-card--single .razbor-card__title--single { margin: 0 0 18px; font-size: 30px; line-height: 1.2; }
.razbor-card--single .razbor-card__label { margin-top: 22px; }
.razbor-card--single .razbor-card__body { padding: 0; font-size: 16px; line-height: 1.6; }

@media (max-width: 900px) {
  .razbor-card--link { padding: 22px 22px 24px; }
  .razbor-card--single .razbor-card__title--single { font-size: 24px; }
}

/* Чипы-фильтр лент (кейсы и блог): после перезагрузки страница встаёт на саму
   ленту, а не наверх к баннеру (жалоба Павла 14.10.2026). Отступ — под
   фиксированную шапку (`.site-header`, sticky, min-height 80px). */
#razbory,
#blog-feed { scroll-margin-top: 92px; }

@media (max-width: 900px) {
  #razbory,
  #blog-feed { scroll-margin-top: 76px; }
}

/* Лента при подмене фильтром (feed-filter.js) — мягкое затемнение, без скачка. */
.blog-grid[aria-busy="true"] { opacity: .5; transition: opacity .15s ease; }