/* ============================================================
   Бухгалтерия360 — собственный адаптивный слой.

   Зачем отдельным файлом. Раньше адаптив собирался по частям: main.css,
   sections.css и blocks.css несли каждая свои @media, частично дублируя
   и перебивая друг друга. Отсюда три класса дефектов, которые лечились
   только точечными заплатками:
     • «Преимущества» — десктопный `min-height` + `justify-content:
       space-between` в один столбец давали 60–80px пустоты в карточке;
     • подвал — свой `padding: 10px` внутри блока против 16–24px у
       страницы, из-за чего кромки не совпадали, а логотип с
       `margin-left: -20px` вылетал за вьюпорт;
     • «Процесс» и CTA — блоки со своим горизонтальным padding'ом
       съезжали относительно соседних секций.

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

   Подключается последним (functions.php, после float-contacts.css):
   при равной специфичности решает порядок, и этот слой должен
   перекрывать предыдущие.

   Всё содержимое — внутри @media. Десктоп (>=1201px) выверен обмером
   и не должен сдвинуться ни на пиксель: регрессия drift.cjs (10770 /
   10729, -41) обязана остаться прежней.

   Брейкпоинты: 1200 / 980 / 640 / 400.
   Единицы: clamp() вместо ступенек, причём fluid-функции подобраны так,
   чтобы в точке 1200px давать ровно десктопное значение — иначе на стыке
   1200/1201 был бы скачок разметки.
   ============================================================ */

/* ============================================================
   1. Планшет и уже (<=1200)
   ============================================================ */
@media (max-width: 1200px) {
  :root {
    /* Кромка страницы: 24px на десктопе → 16px на телефоне.
       2vw = 24 ровно при 1200, 16px — нижняя граница, до которой
       не хочется ужимать на телефоне. */
    --gutter: clamp(16px, 2vw, 24px);
    /* Ритм: 10vw = 120 при 1200 — стык с десктопом без ступеньки. */
    --section-y: clamp(56px, 10vw, 120px);
    --head-y: clamp(28px, 5vw, 60px);
  }

  /* --- Грид-блоуаут: дорожка не сжимается ниже min-content ---------
     `1fr` — это `minmax(auto, 1fr)`, и «auto» запрещает дорожке стать
     уже min-content самого широкого ребёнка. Двое таких нашлись на
     узком экране: поле телефона в форме CTA (у `<input>` своя
     внутренняя ширина, и она переживает `flex: 1; min-width: 0` на
     самом инпуте) и длинное неразрывное слово в заголовке шапки
     секции — «1С:БухОбслуживание». Дорожка раздувалась шире
     контейнера, и страница ехала вбок: на 320px переливало девять
     страниц из одиннадцати, у /why — уже с 360px.

     `min-width: 0` обнуляет вклад ребёнка в min-content и не трогает
     сами колонки, поэтому там, где блоуаута не было, раскладка не
     меняется: замер высот страниц на 768 и 1024 до и после правки
     совпал. */
  .section__head__grid > *,
  .cta > *,
  .grid--2 > *, .grid--3 > *, .grid--4 > *,
  .blog-grid > *,
  .case-feed__grid > *,
  .steps-block .step-column { min-width: 0; }

  /* Длинное слово в заголовке: по слогам («1С:БухОбслу-живание»)
     переносить некрасиво, поэтому кегль шапки на телефоне опускается
     ниже паритетных 25px (правило в блоке 640/400), а break-word
     остаётся страховкой на случай слова ещё длиннее — лучше перенос,
     чем перелив за кромку. */
  .section__head__grid h2,
  .section__head__grid .lead { overflow-wrap: break-word; }

  /* Тап-таргеты планшета (981–1200). Ниже 980 те же ссылки уже
     подняты до 44px, а в оставшемся диапазоне по ним ходили пальцем
     в строку 20–22px: телефон в шапке и почта с телефоном в CTA —
     главный путь связи. Обе ссылки — флекс-элементы, поэтому
     min-height у них работает и текст центрируется. */
  .site-header__contacts .header-phone,
  .cta__contact a { min-height: 44px; }

  /* Замер 19.09 на 1024: «Читать историю» и «Узнать больше» — 18px
     высотой. Обе высоту берут от строки текста, и поднимали их до сих
     пор только в блоке ≤980 — а 1024px это ландшафтный iPad, то есть
     тот же палец. Обе ссылки уже флекс-контейнеры с align-items:center,
     поэтому min-height коробку растит, а текст остаётся по центру.
     Гейты паритета меряют 1440px и этой правки не касаются. */
  .case-read-more,
  .advantages-block .learn-more { min-height: 44px; }

  /* Политика в подвале — строка 18px. Здесь padding, а не min-height:
     ссылка строчная, и вертикальный padding расширяет область нажатия,
     не сдвигая строку в потоке. */
  .site-footer .footer-policy { padding: 3px 0; }

  /* Контейнер тянется по вьюпорту: жёсткие 940/720px оставляли на
     планшете поля по 100+px. Кромка задаётся только --gutter. */
  .container {
    max-width: 100%;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  /* Hero: фиксированный верх текста (82 от верха карточки) верен, пока
     карточка выше текста. Уже 1200 карточка ужимается по aspect-ratio и
     перестаёт вмещать блок с трёхстрочным h1 — там возвращаем центрирование,
     как было до правки десктопа (десктопная сверка — на 1440). */
  .hero__card { align-items: center; }
  .hero__text { padding: 0 0 24px; }
  .section--tight { padding-bottom: clamp(32px, 5vw, 60px); }
  /* Зазоры между записями, снятые с эталона замером (`--section-pad-b`),
     действуют только на десктопе: это его вёрстка, а на узком экране
     работает общий ритм секций. */
  .section { padding-bottom: var(--section-y); }
  /* Карта — исключение из этого правила: у эталона её запись без нижнего
     отступа на всех ширинах (артборд просто ужимается), а следом сразу идут
     карточки офиса. Поэтому её секция сохраняет свои 0 и на узком экране. */
  .section--flush { padding-bottom: 0; }
  .section__head__grid { gap: 20px; }

  /* --- «Все кейсы →» / «Все статьи →» --------------------------
     У эталона это строка высотой 55 с отступом 58 сверху — на
     узком экране лента пустоты под шапкой и ссылка, прижатая
     вправо через пол-экрана. */
  .section__head__actions {
    justify-content: flex-start;
    height: auto;
    margin-top: clamp(20px, 3vw, 40px);
  }
  .section__head__actions a { font-size: clamp(17px, 1.67vw, 20px); }
  .section__head__actions svg {
    width: clamp(22px, 2.7vw, 32px);
    height: clamp(22px, 2.7vw, 32px);
  }

  /* --- «Преимущества»: убрать пустоты --------------------------
     Причина дефекта: карточка держала десктопную высоту (260px, ниже
     240/220/200/180 по брейкпоинтам) при `justify-content: space-between`
     — номер прижат к верху, текст к низу. В один столбец это давало
     60–80px мёртвой зоны внутри карточки. Фиксированную высоту снимаем,
     содержимое прижимаем к верху: карточка становится по контенту.
     Селекторы перечислены той же группой, что в sections.css, —
     она специфичнее одиночных правил на 480/320 и перекрывает их. */
  .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) {
    min-height: 0;
    justify-content: flex-start;
    gap: clamp(14px, 2vw, 22px);
    padding: clamp(16px, 2vw, 24px);
  }
  /* `margin-top: auto` — тот же приём прижатия к низу, что и space-between. */
  .advantages-block .card-content-area { margin-top: 0; }
  .advantages-block .advantage-number { font-size: clamp(16px, 1.67vw, 20px); }
  .advantages-block .advantage-title { font-size: clamp(16px, 1.5vw, 18px); }
  .advantages-block .advantage-description { font-size: clamp(14px, 1.34vw, 16px); }
  .advantages-block .learn-more { font-size: clamp(14px, 1.34vw, 16px); }

  /* --- «Отрасли»: читаемость текста на фото --------------------
     Скрим был height 65% с градиентом 0.7 → 0.15 на 80%: заголовок
     карточки попадал в зону ~0.2 альфы поверх занятого фото и читался
     хуже 3:1. Поднимаем высоту и плотность — фото остаётся видно,
     текст получает опору. */
  .cards-block .card::after {
    height: 92%;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, .85) 0%,
      rgba(0, 0, 0, .72) 30%,
      rgba(0, 0, 0, .50) 52%,
      rgba(0, 0, 0, .18) 76%,
      transparent 100%
    );
  }

  /* Плашка-надзаголовок бонусов — 12px ниже комфортного минимума. */
  .bonuses-block .bonus-badge { font-size: 13px; }

  /* --- «Процесс»: кромка как у соседних секций -----------------
     У блока свой горизонтальный padding (20px на десктопе, 10px ниже) —
     внутри контейнера с padding 16px шаги стояли на 26px от края, пока
     карточки соседних секций — на 16px. */
  .steps-block { padding-left: 0; padding-right: 0; }

  /* --- Согласие на обработку ПД (152-ФЗ) -----------------------
     Было 10px/12px — на телефоне нечитаемо, а текст согласия должен
     быть доступен для прочтения. Ссылка на политику была #FF8562
     (контраст ≈2.2:1 на белом) — не проходит даже WCAG AA для
     крупного текста; фирменный красный даёт 8.45:1. */
  .field__note { font-size: 13px; line-height: 1.45; }
  .field--check { gap: 12px; }
  .field--check a {
    color: var(--red);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* --- Отзывы --------------------------------------------------
     Кавычка-маркер: 48px при line-height .7 (33.6px) — глиф
     переливался вниз на первую строку текста. Высота строки 1
     возвращает маркеру его габарит. */
  .review-card__mark { line-height: 1; margin-bottom: 10px; }
  /* Фиксированные 341px при контенте короче — пустота внизу карточки
     в один столбец. Высоту берёт контент, растягивание по треку
     (align-items: stretch) выравнивает карточки между собой. */
  .reviews .review-card { height: auto; min-height: 0; }
  .review-card--accent { height: auto; }

  /* --- CTA -----------------------------------------------------
     `padding-top: 80px` выравнивал колонку формы с колонкой фото на
     десктопе; в столбик он превращался в полосу пустоты между фото
     и формой. */
  .cta__body { max-width: none; padding-top: 0; }

  /* --- Подвал: одна кромка со страницей ------------------------
     Внутри блока был свой padding (32px 20px на десктопе,
     32px 10px 0 10px ниже), поэтому подвал жил на 10px левее контента
     страницы, а логотип с `margin-left: -20px` (компенсация
     десктопного padding 20px) вылетал за вьюпорт на те же 10px.
     Компенсация больше не нужна: кромку задаёт --gutter. */
  .site-footer .footer-container {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  .site-footer .footer-logo {
    margin-left: 0;
    height: clamp(40px, 8vw, 64px);   /* 8vw = 64 при 800 */
    max-width: 100%;
  }
  .site-footer .footer-column { min-width: 0; }
  .site-footer .footer-link { padding: 4px 0; }

  /* --- Калькулятор «Тарифов»: две карточки в столбик --------------
     На десктопе это 608 + 52 + 501 = 1161 при контейнере 1160 — блок
     собран по своей сетке, а не по контейнеру, и вместе с ним он в
     кромку не влезает. В столбик карточки идут во всю ширину: высота
     515 у эталона задана полем и на узком экране превратилась бы в
     пустоту внизу короткой карточки — её снимаем и даём контенту
     определить высоту. */
  .calc-block {
    flex-direction: column;
    align-items: stretch;
    gap: clamp(20px, 3vw, 32px);
  }
  .calc-card { min-height: 0; }
  .calc-card--form,
  .calc-card--result {
    width: 100%;
    margin-top: 0;   /* авторский разнос карточек 7/10 — только для двух колонок */
  }
  /* Цена 44/68 — размер под ширину карточки 501. В одну колонку карточка
     шире текста, и цифра того же кегля выглядит наклейкой; ведём её
     пропорционально, но с нижним порогом, чтобы не мельче подписи. */
  .calc-result__amount {
    font-size: clamp(32px, 5vw, 44px);
    line-height: clamp(44px, 6vw, 68px);
  }
}

/* --- Шапка: полоса 981–1068, где строка не помещается ---------------
   Найдено 24.09 замерами по широтам: от 981px до 1011px документ
   переливал вбок (на 981 — 31px, на 1000 — 12px; гасилось
   `body { overflow-x: hidden }`, но резало иконку входа), а от 981 до
   1068px «Почему мы» переносилось в две строки.

   Причина — арифметика строки, а не отдельный элемент. Несжимаемая
   ширина: логотип 200 + nav (отступ 32, три зазора 22 и ссылки 307)
   + контакты 421 (телефон 145, кнопка 156, две иконки по 40 плюс
   зазоры) = 1026px. Контейнер отдаёт 0,96 ширины вьюпорта
   (--gutter = 2vw), поэтому строка сходится только с 1069px: ниже nav
   ужимается флексом и последняя ссылка ломается на две строки, а с
   1019px строка начинает вылезать за контейнер.

   Иконки (MAX и вход в кабинет) — младший элемент строки: ниже 980px
   они и так скрыты (main.css, блок 980). Отдаём их первыми — это 96px
   с зазорами, и строка сходится на всей полосе. В самой узкой её части
   (до 1020px) ужимаем ещё и логотип до 168px — размер уже есть в шкале
   (блок 640): запас до кромки растёт с 11px до 43px, чтобы строку не
   повело, пока шрифт не подменился на Geologica. С 1069px иконки
   возвращаются — там строка помещается целиком.

   Проверено впрыском этих правил на живую страницу: 95 широт
   981–1075 подряд — ни перелива, ни переносов; 1200/1201/1440 —
   без сдвигов.

   13.10.2026 (задача rp-1013-wp-model-keysy): в меню шапки добавлен пятый
   пункт — «Кейсы» («Блог» → «Статьи»). Несжимаемая строка выросла на ширину
   нового пункта (~+90px), и прежняя граница возврата иконок (1069px) стала
   слишком низкой: в полосе 1069–1204 строка снова вылезала за кромку. Иконки
   отдаём на всей этой полосе — до 1210px: только с 1211px несжимаемая строка
   снова помещается целиком (лого 200 + nav 69 + контакты 421, кадр — 1208px),
   а зазор в nav ужат в main.css (<=1200: 22px → 16px). Замер после правки:
   981–1210 подряд и 1211–1440 — ни перелива, ни переносов. */
@media (max-width: 1210px) {
  .site-header__contacts > .header-icon { display: none; }
}
@media (max-width: 1019px) {
  .site-header__logo img { width: 168px; }
}

/* ============================================================
   2. Планшет (<=980) — шапка с бургером, две колонки в сетках
   ============================================================ */
@media (max-width: 980px) {
  /* Якорные переходы: шапка липкая (80/64px), и `#forma` уезжала под неё.
     Правило переехало в main.css — на десктопе дефект был тот же
     (замер 13.09: шапка секции «Контакты» вставала на 2px от верха). */

  .hero { padding-top: clamp(8px, 3vw, 32px); }

  /* Бургер — тап-таргет 46×46 (было 40×40) и крестик в раскрытом
     состоянии: три полосы на открытом меню читались как «ещё меню». */
  .burger { width: 46px; height: 46px; padding: 0 10px; }
  .burger span { transition: transform .25s ease, opacity .25s ease; }
  body.nav-open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .burger span:nth-child(2) { opacity: 0; }
  body.nav-open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Мобильное меню: пункты списком, а не стопкой ссылок в 22px
     высотой — по такому нельзя попасть пальцем. */
  .mobile-nav__inner { gap: 0; padding-top: 8px; padding-bottom: 20px; }
  .mobile-nav__inner > a:not(.btn) {
    display: flex;
    align-items: center;
    min-height: 52px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 17px;
  }
  .mobile-nav__inner > a.btn { margin-top: 16px; height: 48px; }
  .mobile-nav__inner > a.header-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-bottom: 8px;
    font-size: 17px;
  }
  /* Подъём −2px (задача РП rp-0510-wp-hero-gates, 05.10.2026) задан классом
     `.header-phone`, а класс в теме дважды: номер в шапке и номер в этом меню.
     Подниматься должен только шапочный (остальные три элемента — тоже шапка),
     здесь гасим. */
  .mobile-nav .header-phone:hover { transform: none; }
  /* Пока меню раскрыто, страница под ним не прокручивается. */
  body.nav-open { overflow: hidden; }

  /* Отзывы: аватар в 100px занимал треть узкой карточки. */
  .reviews .review-card__head { height: auto; gap: 14px; }
  .reviews .review-card__avatar { width: 64px; height: 64px; }
  .reviews .review-card__text { margin-top: 22px; }

  /* --- Тап-таргеты ----------------------------------------------
     Замер 13.09 на 375: «Читать историю» — 17px высотой, «Все кейсы»
     и «Все статьи» — 31px, кнопки карточек услуг и тарифов — 34–42px.
     Пальцем в строку 17px не попасть (порог WCAG 2.5.8 — 24×24,
     комфортный тап — 44). Поднимаем до 44 всё, у чего высоту задавал
     текст: у кнопок для этого хватает min-height, потому что текст
     внутри уже центрируется флексом либо вертикальными паддингами.

     `.case-read-more` без предка `.cases-block`: на главной лента
     обёрнута в `.cases-block`, а на `/why` той же ленте предка не
     поставили (section-cases-why.php), и правило её не ловило —
     «Читать историю» там оставалась 17px. Класс уникален для этой
     ссылки, поэтому предок в селекторе лишний.

     `.advantages-block .learn-more` не попал в группу 13.09 и до сих
     пор был 18px — «Узнать больше» в карточке преимуществ. */
  .section__head__actions a,
  .btn,
  .case-read-more,
  .advantages-block .learn-more { min-height: 44px; }
  /* Почта и телефон в блоке контактов — 22px на строку: это главный
     путь связи с телефона, а палец в 22px не попадает. Ссылки подвала
     (29–36px) не трогаем: они проходят минимум WCAG 2.5.8 (24×24) и
     разнесены по вертикали. */
  .cta__contact a { min-height: 44px; }
  /* Кнопки в карточках — инлайновые, min-height у них растянул бы
     коробку, но текст остался бы сверху: центрируем флексом. */
  .services-block .service-button,
  .tariffs-block .tariff-button,
  .bonuses-block .bonus-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }

  /* --- Отраслевые: «Проблемы и решения» -------------------------
     Блок есть только на отраслевых. Его планшетная раскладка пришла
     из самописного блока Тильды (blocks.css, @media 960/640) и держит
     шахматный сдвиг в процентах: карточка решения получала 85% ширины
     (замер 13.09: на 375 — 291px при 343 доступных, текст на 19% уже;
     на 768 сдвиг доходил до 110px). Приём «вопрос слева, ответ справа»
     сохраняем — он и различает карточки, — но выражаем его отступом
     в токен, а не в проценты: вопрос во всю ширину, ответ с отступом
     24px. Проценты в blocks.css перекрыты здесь: файл подключён
     последним, специфичность селекторов та же. */
  .problems-block .problem-left { max-width: 100%; }
  .problems-block .problem-right { max-width: calc(100% - 24px); }
}

/* ============================================================
   3. Телефон (<=640)
   ============================================================ */
@media (max-width: 640px) {
  /* --- Кегль шапки секции: нижняя граница клампа -----------------
     `h2 { font-size: clamp(25px, 2.64vw, 38px) }` из main.css упирается
     в нижнюю границу 25px уже при 947px ширины вьюпорта — то есть на
     всём телефоне заголовок рисовался самым крупным кеглем шкалы.
     Для русского заголовка это упирается не в красоту, а в перелив:
     «1С:БухОбслуживание» при 25px занимает 352px и не влезает в
     колонку 288px на 320-м экране (замер 19.09). Опускаем границу до
     20px; 3.9vw подобран так, чтобы на 640px кламп давал ровно 25px —
     стык с планшетным блоком без ступеньки. */
  .section__head__grid h2 { font-size: clamp(20px, 3.9vw, 25px); }
  /* Лид опускаем следом, а не ради красоты: он держит те же 20px и при
     новом кегле заголовка сравнялся бы с ним, потеряв подчинённость
     (на телефоне h2 и лид стали бы одного размера). 17px — нижняя
     граница, ниже уходить некуда: это ещё читаемый текст, а не сноска. */
  .section__head__grid .lead { font-size: clamp(17px, 3.3vw, 20px); }

  /* Логотип в меню — 200px на 375-м экране занимал больше половины строки. */
  .site-header__logo img { width: 168px; }

  /* Внутри раскрытого меню телефон был скрыт вместе с шапочным
     (main.css: `.header-phone { display: none }` без скоупа) —
     в панели он нужен, это самый вероятный способ связи. */
  .mobile-nav .header-phone { display: flex; }

  /* --- «Процесс»: вертикальная лента ---------------------------
     В один столбец горизонтальная линия между кружками исчезала
     (она и не могла работать: считалась от ширины колонки), и шаги
     читались как четыре независимые карточки. Раскладываем шаг в две
     колонки — кружок слева, текст справа — и соединяем кружки
     вертикальной линией. */
  .steps-block .step-column {
    display: grid;
    grid-template-columns: 64px 1fr;
    column-gap: 14px;
    align-items: start;
    text-align: left;
    padding: 0;
  }
  .steps-block .step-circle-wrapper {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-items: flex-start;
    width: 64px;
    margin-bottom: 0;
  }
  .steps-block .step-title { grid-column: 2; grid-row: 1; }
  .steps-block .step-description { grid-column: 2; grid-row: 2; }
  /* Линия — на самой колонке, а не на ::after обёртки кружка: там
     правило ликвидировано через `display: none !important`, чтобы
     горизонтальный отрезок не вылезал за вьюпорт. */
  .steps-block .step-column:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 31px;        /* центр 64px-колонки минус половина толщины */
    top: 72px;         /* кружок 64px + 8px зазора */
    bottom: -14px;     /* до края ряда (row-gap 24px) с воздухом */
    width: 2px;
    background-color: #F6EBEB;
    border-radius: 2px;
  }

  .section__head__actions a { font-size: 17px; }

  /* --- Калькулятор «Тарифов»: кромка карточки ------------------------
     Прежний блок здесь уводил плашку «Рекомендуем» из наложения в поток
     (название тарифа ~175 и плашка 155 в строку не вставали и наезжали
     друг на друга). В задаче rp-1510-wp-4fixes плашка заменена на
     «Рекомендуемый тариф» и стоит в потоке первой строкой карточки сама
     по себе — накладываться нечему, правила сняты вместе с версткой.
     Кегль цены уже уведён клампом на 1200, здесь только кромка карточки. */
  .calc-card { padding: 16px; }
}

/* ============================================================
   4. Малый телефон (<=400)
   ============================================================ */
@media (max-width: 400px) {
  :root {
    --section-y: 48px;
    --head-y: 24px;
  }

  /* h1 в hero: эталонные 30px на 360-м экране давали по 2–3 слова
     в строке и заголовок в четыре этажа. Ниже 24px не опускаем. */
  .hero__text h1 { font-size: clamp(24px, 7vw, 30px); }
  .section__head__actions a { font-size: 16px; }
  .site-footer .footer-logo { height: 40px; }
  .site-footer .footer-column-title { font-size: 15px; }
  .site-footer .footer-link { font-size: 15px; }
}

/* ============================================================
   4б. 320px: возврат читаемого кегля в карточках услуг
   ============================================================ */
/* Тильда на ≤320px ужимает карточки сильнее, чем стоит: описание и
   пункты чек-листа в карточке услуг падают до 12px, кнопка «Заказать» —
   тоже 12px, описание карточки на главной — 12px. Это тело карточки и её
   единственная кнопка, а не подпись-сноска: 12px нечитаемо. Возвращаем
   кегль уровня ≤480 (14px); кегли заголовков карточек (16px) не трогаем —
   они терпимы.
   Значения стоят с `!important` намеренно: в blocks.css тот же кегль
   задан как `12px !important`, а важное объявление перебивает обычное
   независимо от порядка файлов.
   Карточки от этого станут выше — 320px не участвует ни в одном
   паритетном гейте (они меряют 1440px), так что дрейфа это не создаст. */
@media (max-width: 360px) {
  .services-block .service-description,
  .services-block .checklist-item,
  .cards-block .card-description { font-size: 14px !important; }
  .services-block .service-button { font-size: 14px; padding: 8px 20px; }
}

/* ============================================================
   5. Тач-устройства: hover не должен залипать
   ============================================================ */
/* На тач-экране :hover остаётся на элементе после тапа — карточка
   так и стоит приподнятой, пока не тронешь другую. Гасим подъёмы. */
@media (hover: none) {
  .cards-block .card:hover,
  .advantages-block .advantage-card:hover,
  .advantages-block .advantage-card.gradient-bg:hover,
  .reviews .review-card:not(.review-card--accent):hover,
  .reviews-page .review-card:hover,
  .post-card:hover,
  .site-footer .footer-logo:hover,
  .site-footer .footer-partner-badge:hover,
  .site-footer .footer-social-link:hover,
  .steps-block .step-column:hover { transform: none; }

  .cards-block .circle-arrow:hover { transform: none; background: rgba(255, 255, 255, .25); }
  .steps-block .step-column:hover .step-circle { transform: none; box-shadow: none; }

  /* Шапка (задача РП rp-0510-wp-hero-gates, 05.10.2026): подъём −2px у
     телефона, кнопки и обеих иконок залипал после тапа — на тач-экране
     гасим его. Тень иконок снимаем вместе с ним (она подсвечивала подъём);
     у кнопки `box-shadow` — своя hover-логика, её не трогаем. */
  .header-phone:hover,
  .header-icon:hover,
  .header-btn:hover { transform: none; }
  .header-icon:hover { box-shadow: none; }

  /* Подъём карточек отзывов (задача «волна отзывов», 11.10.2026) — тоже залипает
     после тапа на телефоне: гасим сдвиг и возвращаем базовую тень. */
  .reviews .review-card:not(.review-card--accent):hover,
  .reviews-page .review-card:hover { transform: none; box-shadow: 0 2px 4px rgba(115,115,115,.25); }
}

/* ============================================================
   6. Уважение к системной настройке «меньше движения»
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* Подъём в шапке (задача РП rp-0510-wp-header-hover-lift, 05.10.2026) —
     тоже движение: гасим и сдвиг, и подсвечивающую его тень иконок.
     Кнопке тень не снимаем: у неё `box-shadow` — своя hover-логика
     (`--shadow-red` → `--shadow`), а не эффект подъёма. */
  .header-phone,
  .header-icon,
  .header-btn { transition: none; }
  .header-phone:hover,
  .header-icon:hover,
  .header-btn:hover { transform: none; }
  .header-icon:hover { box-shadow: none; }

  /* Подъём карточек отзывов (11.10.2026) — тоже движение: без transform. */
  .reviews .review-card,
  .reviews-page .review-card { transition: none; }
  .reviews .review-card:not(.review-card--accent):hover,
  .reviews-page .review-card:hover { transform: none; }
}

/* ============================================================
   7. Страница «Почему мы» (/why)
   ============================================================ */
/* Блоки страницы, снятые в рефблоки (цифры, ниши, гарантии, сравнение,
   приложение, кейсы), несут свой адаптив — он приехал вместе с CSS эталона
   (blocks.css, @media 960/640/480). Правила ниже — только для того, что
   раскладку задаёт наша тема:
     • «Больше, чем просто цифры» — две колонки фиксированными полями
       эталона (550 и 501): на 1024 блок вылезал вбок на 47px, на 768 —
       на 299, на 375 — на 692 (overflow-pages.cjs, 15.09). Единственный
       блок страницы, который уезжал (правило ниже, на 1200);
     • две плашки первого экрана — на телефоне переносятся по одной
       (правило в sections.css, @media 640).
   Полем эталона `min-height: 376` на узком экране управлять нечем (в
   колонку блок ниже артборда), поэтому здесь он снят. */
/* Колонки меняются уже на 1200, а не на 980: поля эталона 550 + 501 = 1051
   вместе с кромками перестают помещаться в контейнер раньше — на 1024 блок
   вылезал вбок на 47px (замер overflow-pages.cjs). Десктопная сверка идёт
   на 1440, этого правила она не задевает. */
@media (max-width: 1200px) {
  .principles-container { flex-direction: column; min-height: 0; }
  .principles-head,
  .principles-list { flex: 0 0 auto; width: 100%; max-width: 100%; }
  .principles-list { padding-top: 32px; }
}
@media (max-width: 640px) {
  /* Поле лида 336 из эталона на 375-м экране оставляло 7px до кромки —
     читается лучше, когда лид тянется по контейнеру. */
  .principles-head .lead { width: auto; max-width: 100%; }
}

/* ============================================================
   8. Главная: «Основатель» — фото ниже 960
   ============================================================ */
/* ДОПИСАНО НАМИ, не из эталона (осознанное отклонение, решение Павла
   24.09).

   Блок приехал из эталона вместе со своим @media 960 (blocks.css): в
   колонку обёртка фото получает `max-width: 100%`, а высоту ей задаёт
   натуральное соотношение снимка (1000×1123). На 768 это полотно
   736×827, на 960 — 922×1035: портрет во всю ширину контейнера, почти
   вдвое выше десктопной карточки (500×562), и блок «плывёт» — занимает
   больше экрана, чем вся секция на десктопе.

   Эталон ведёт себя так же (проверено живьём 24.09: на 768 у него фото
   748×840 против наших 736×827) — поэтому правка расходится с эталоном
   и помечена здесь. Ограничиваем обёртку десктопной шириной 500px и
   центрируем: снимок остаётся карточкой того же размера, что на
   десктопе (500×562), без обрезки — соотношения совпадают, и
   `object-fit: cover` не режет. Ниже 560px правило не работает вовсе:
   там контейнер уже 500 и обёртка тянется по нему, как раньше.

   Замер 24.09 по широтам (до → после): 961px и выше — без изменений
   (1440/1300/1200/1100/1024/1000/961 совпали до пикселя); 960: блок
   1359 → 885 (−474), 900: 1294 → 885, 768: 1172 → 907, 640: 1009 → 887,
   560: 946 → 914; 480 и ниже — не изменилось. Брейкпоинт 960 взят из
   самого блока: правило должно работать ровно там, где блок
   переключается в колонку. */
@media (max-width: 960px) {
  .founder-block .founder-photo-wrapper {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================
   9. Главная: лид «Кейсов» на узком десктопе (1201–1279)
   ============================================================ */
/* Починка полосы, а не отклонение от вёрстки: сдвиг лида у эталона
   задан полем (`--lead-mr: -52px` у шапки «Кейсов» главной), то есть
   лид уходит на 52px правее кромки контейнера. Пока вьюпорт шире
   1264px, этот выступ помещается в кромку окна, и на 1440 мы совпадаем
   с эталоном до пикселя. Уже 1264 он вылезает за вьюпорт: замер 24.09
   — перелив 1201:28px, 1210:27, 1230:17, 1250:7, 1263:1, с 1264 — 0.
   Гасится `body { overflow-x: hidden }`, но текст лида режется кромкой
   («Истории клиентов, которые доверили нам свою бухгалтерию»). По всем
   11 страницам задевает только главную: шапок «Кейсов» с этим полем
   больше нигде нет.

   В полосе отдаём лиду общий для остальных шапок сдвиг 4px: поле у
   текста фиксированное (366px), перенос не меняется — меняется только
   положение блока, он встаёт по кромке контейнера, как соседние
   разделы. Граница 1279, а не 1264: 15px запаса на классическую полосу
   прокрутки, которой в замере (безголовый браузер) нет, а в живом
   десктопном окне она есть. Десктопный обмер идёт на 1440 — правило
   его не касается. */
@media (min-width: 1201px) and (max-width: 1279px) {
  .section__head--lead366 { --lead-mr: 4px; }
}

/* ============================================================
   10. Главная: первый экран на телефоне — плашка над снимком,
       заголовок на его левой стене (решение Павла 24.09)
   ============================================================ */
/* ДОПИСАНО НАМИ, не из эталона — осознанное отклонение по мобильной вёрстке
   (мобильная вёрстка у эталона своя и эталоном не является; там портрет идёт
   карточкой сверху, а весь текст — под ним).

   Почему только главная (`body.home`). Первый экран — общий блок темы, но
   фотография у каждой группы страниц своя, и стены под текст нет почти
   нигде. Силуэты замерены 24.09 по каждому файлу отдельно (та же методика,
   что в гейте `hero-overlay-check.cjs`): у главной слева свободно 64% ширины
   в верхней трети и 54% ниже середины; у `/it-startapy` и `/ip-ooo` — 76%/67%
   и 76%/60%; у `/why` — 47%/50%; у `/proizvodstvo` — 29%/50%; у `/cases` —
   рукопожатие (замер 24.09 по всему кадру читался как «вплотную во всю
   ширину»; перемерено 05.10 по полосам: стена верхней половины кадра 83%,
   страница поднята — раздел 15); у `/stroyka` — стройплощадка с краном
   от левой кромки. Заголовок поверх таких снимков читается только с подложкой,
   то есть это уже другая правка и другое решение. Здесь — главная.

   Почему плашка остаётся в потоке, а не ложится на снимок. Ей нужно 318px
   (замер 430px), а свободной стены на её высоте ~260px: хвост ложится на
   волосы. Геометрия подсказывает расположение, а не размер, поэтому плашка
   встаёт собственной строкой над снимком — так, как и просил Павел.

   Почему заголовок 22px и колонка до 50% ширины снимка. Силуэт человека
   занимает 54,8–90,5% ширины кадра и сужается кверху: в верхней трети стена
   доходит до 64%, ниже половины высоты — до 54%. Заголовок живёт в верхней
   половине снимка, поэтому колонка кончается на его середине. 22px — самый
   крупный кегль, который оставляет видимый зазор: на 24px запас до человека
   4,7px (430px), на 22px — 67px. Проверка построчная, скриптом
   `gates/hero-overlay-check.cjs` (правый край каждой строки против силуэта
   на её же высоте): 430px — 67px, 390px — 31px, 375px — 22px.

   Почему кегль 22px от 371px и 18px ниже (решение Павла 25.09). Упирается
   не строка, а слово: «отчетность» в Unbounded 700 на 22px занимает 160px
   (замер на живой странице; страница при замере не менялась) и в колонку не
   встаёт — правый край строки 178px при стене 179px, запас 1px. Остальные
   строки при этом имеют 60–154px, то есть узкое место ровно одно — самое
   длинное слово. Запас у этой полосы пилообразный (скачет на переразбивке
   строк), поэтому граница искалась прогоном по КАЖДОМУ пикселю 330–660:
   впадина 1–5,9px на 361–370, ровные 20px и выше с 371px. Вниз от 371px
   22px не влезает ни при какой разбивке — слово физически шире стены
   (157px на 320px), поэтому на 320–370px кегль 18px: запас 19px на 320px и
   до 60px на 370px, кадр остаётся утверждённым. Вариант «19px + сдвиг
   кадра» (object-position 45%) отвергнут 25.09: запас 13px при пороге гейта
   12px, то есть на грани, а текст заголовка редактируем (опция
   `buh360_texts`) и запаса должно хватать на правку. Заголовок лежит на
   снимке на ВСЕХ телефонных широтах — это принцип (на десктопе он тоже на
   фото), а несоответствие ширины решается кеглем. Развилка A/B и её числа:
   заметка «2026-09-25 -- Решение -- Главная, первый экран -- заголовок
   320-370px».

   Плашка «Официальный партнёр 1С:БО» — тот же порядок уступок (решение
   Павла 25.09): остаться на снимке → уменьшить кегль → и только потом уйти
   строкой выше снимка, сдвинув заголовок вниз. Плашка влезает на снимок
   с 492px: при 16px её правый край даёт запас 12,4px лишь с 564px, при
   14px — с 516px, при 13px (нижний порог читаемости проекта) — с 492px;
   ниже 492px запас 10,9px при пороге гейта 12px, поэтому там плашка
   остаётся над снимком (решение 24.09 в силе). Заголовок опускается на
   высоту плашки: 22px (её верхний отступ) + 36,8px (высота) + 12px (зазор)
   = 71px; высота плашки от кегля не зависит (строка задана в px), поэтому
   сдвиг один на все три ступени. Развилка и её числа — заметка
   «2026-09-25 -- Решение -- Главная, первый экран -- плашка 492-640px».

   Как устроено. Карточка становится сеткой в одну колонку, а `.hero__text`
   отдаёт своих детей наверх через `display: contents`: плашка встаёт своей
   строкой над снимком, заголовок — либо в ту же ячейку, что и снимок (тогда
   ложится поверх него), либо следующей строкой под ним. Абсолютного
   позиционирования нет намеренно — ни `top`, ни `left` с магическими
   числами: высоту строки задаёт сама фотография (её `aspect-ratio`),
   заголовок к ней только прижат полями.
   `display: contents` снимает у `.hero__text` его собственную коробку вместе
   с `padding: 0 0 24px` (его задаёт наша же правка ≤980) — нижние 24px под
   последним текстом карточки возвращаем самой карточке, иначе первый экран
   терял бы их на всех телефонах.
   Десктоп не задет: правило живёт внутри `@media` и под `body.home`, обмер
   паритета идёт на 1440px. */

/* 10а. Телефон целиком (<=640): плашка над снимком, заголовок — НА снимке.
   Решения Павла: 24.09 — плашка стоит перед фотографией на всех телефонных
   широтах, включая 320 и 370px; 25.09 — заголовок тоже лежит на снимке на
   всех широтах (кегль см. 10б/10в), а не уходит под него. */
@media (max-width: 640px) {
  body.home .hero__card { display: grid; grid-template-columns: 1fr; padding: 0 0 24px; }
  body.home .hero__text { display: contents; }
  /* Плашка — своя строка над снимком; 12px — тот же зазор, что у эталона
     между плашкой и заголовком на десктопе (4px воздух + строка). */
  body.home .hero__pill { grid-row: 1; grid-column: 1; margin-bottom: 12px; }
  body.home .hero__bg { grid-row: 2; grid-column: 1; }
  /* h1 — в ячейке снимка, 22px от его верха и 18px от левой кромки: те же
     поля, что у текста на десктопе (там 82/62 от карточки), уменьшенные
     пропорционально кадру телефона. Колонка до половины ширины снимка —
     стена силуэта ниже половины высоты сужается до 54%. */
  body.home .hero__text h1 {
    grid-row: 2;
    grid-column: 1;
    z-index: 2;
    align-self: start;
    margin: 22px 50% 0 18px;
    line-height: 1.18;
  }
  body.home .hero__lead { grid-row: 3; }
  body.home .hero__text .btn-row { grid-row: 4; }
  body.home .hero__note { grid-row: 5; }
}

/* 10б. 371-640px: заголовок крупным кеглем — стена снимка это держит
   (минимум запаса 20px на 371px). */
@media (min-width: 371px) and (max-width: 640px) {
  body.home .hero__text h1 { font-size: 22px; }
}

/* 10в. 320-370px: тот же заголовок на той же стене, но мельче. 22px здесь
   не влезает: самое длинное слово «отчетность» шире стены (160px против
   157px на 320px). 18px даёт запас 19-60px, кадр остаётся утверждённым
   (вариант со сдвигом кадра отвергнут — заметка решения 25.09). */
@media (max-width: 370px) {
  body.home .hero__text h1 { font-size: 18px; }
}

/* 10г. С 492px плашка влезает на снимок — ставим её в ячейку фотографии
   (та же ячейка, что у снимка и заголовка), а заголовок опускаем под неё.
   71px = 22px отступ плашки от верха кадра + 36,8px её высота + 12px зазор
   (тот же зазор, что у эталона между плашкой и заголовком на десктопе). */
@media (min-width: 492px) and (max-width: 640px) {
  body.home .hero__pill {
    grid-row: 2;
    grid-column: 1;
    z-index: 3;
    align-self: start;
    justify-self: start;
    margin: 22px 12px 0 18px;
  }
  body.home .hero__text h1 { margin-top: 71px; }
}

/* 10д. Кегль плашки ступенькой — тот же приём, что у заголовка в 10б/10в:
   сначала пытаемся удержать плашку на снимке уменьшением кегля, и только
   когда и 13px не влезает (ниже 492px, см. 10а) — выносим её над снимок.
   Границы — первые ширины, где запас до силуэта >= 12px (замер по каждому
   пикселю 486-570); 13px — нижний порог читаемости по проекту. */
@media (min-width: 492px) and (max-width: 515px) {
  body.home .hero__pill { font-size: 13px; }
}

@media (min-width: 516px) and (max-width: 563px) {
  body.home .hero__pill { font-size: 14px; }
}

@media (min-width: 564px) and (max-width: 640px) {
  body.home .hero__pill { font-size: 16px; }
}

/* 10е. Планшетная полоса 641-980px: и плашка, и заголовок — НА снимке
   (решение Павла 25.09, вариант A). Раскладка ≤980 (sections.css) держит
   снимок отдельной карточкой, а текст — под ним; здесь текст возвращается на
   снимок тем же приёмом, что на телефоне в 10а/10г: карточка — сетка в одну
   колонку, `.hero__text` отдаёт детей наверх через `display: contents`.
   Полоса берётся целиком, 641-980, а не «до 767»: раскладка ≤980 одна и та же,
   и разрез по 767/768 дал бы скачок — на 768 плашка снова ушла бы под снимок.
   Кегль 34px — крупнейший, который влезает на всей полосе: при 38px (кегль
   полосы до этой правки) не проходят три узких окна (668-698, 732-740,
   842-848; минимум -19,8px на 677px), потому что в колонке 50% строки рвутся
   ещё раз. 34px даёт минимум запаса 74,3px на 641px при пороге гейта 12px
   (замер по каждому второму пикселю полосы, 170 ширин).
   Кадр не тронут: 1680/967 — пропорция исходника, снимок показан целиком.
   Варианты с кропом кадра (3/2 и 4/3, как на телефоне) отвергнуты 25.09 —
   34px читается на снимке в три ровные строки, а 38px в кропе даёт четыре
   рваных; кроме того, кроп уводит полосу от эталона и на стыке 980/981
   делает обрыв первого экрана глубже (450px против 285px у этого варианта).
   `display: contents` снимает у `.hero__text` его коробку вместе с `padding:
   0 0 24px` (его задаёт наша же правка ≤980) — нижние 24px под последним
   текстом карточки возвращаем самой карточке, как в 10а.
   Десктоп (>=981) не задет: правило живёт внутри `@media` и под `body.home`,
   внутренние страницы — тоже (у них свои снимки-сцены, текст на них ложится
   на людей: замер 25.09 — `proizvodstvo` -292px, `stroyka` -41px на 767px).
   Развилка A/B/C и её числа: заметка «2026-09-25 -- Решение -- Главная,
   первый экран -- заголовок и плашка 641-980px». */
@media (min-width: 641px) and (max-width: 980px) {
  body.home .hero__card { display: grid; grid-template-columns: 1fr; padding: 0 0 24px; }
  body.home .hero__text { display: contents; }
  body.home .hero__bg { grid-row: 1; grid-column: 1; }
  /* Поля плашки те же, что в 10г: 22px от верха кадра и 18px от левой кромки —
     на границе 640/641 ничего не сдвигается. */
  body.home .hero__pill {
    grid-row: 1;
    grid-column: 1;
    z-index: 3;
    align-self: start;
    justify-self: start;
    margin: 22px 0 0 18px;
    width: fit-content;
    max-width: calc(100% - 36px);
  }
  /* 71px — тот же сдвиг под плашку, что в 10г (22px + 36,8px высота + 12px
     зазор); 50% — та же колонка, что на телефоне: строки переносятся, не
     заходя на силуэт. */
  body.home .hero__text h1 {
    grid-row: 1;
    grid-column: 1;
    z-index: 2;
    align-self: start;
    margin: 71px 50% 0 18px;
    font-size: 34px;
  }
  body.home .hero__lead { grid-row: 2; }
  body.home .hero__text .btn-row { grid-row: 3; }
  body.home .hero__note { grid-row: 4; }
}

/* ============================================================
   11. Плашка: кегль на узких широтах — общая правка для всех
       страниц (решение Павла 29.09)
   ============================================================ */
/* ДОПИСАНО НАМИ, не из эталона — осознанное отклонение по мобильной вёрстке.

   Что чинит. Плашка «Официальный партнер 1С:БО» ломалась в ДВЕ строки на
   узких телефонах: её собственная ширина при 16px — 318px (текст Unbounded
   + значок 20px + поля 22px), а карточка внутри 320px широты — 288px, и
   `max-width: 100%` (sections.css, <=640) режет не переполнением, а
   переносом. Замер 29.09 по 11 страницам: две строки получались на семи
   (главная, /stroyka, /proizvodstvo, /it-startapy, /ip-ooo, /tariffs и
   вторая плашка /why) на 320-349px; /cases (95px), /kontakty (187px) и
   первая плашка /why (131px) влезали. Гейт этого не видел: он сверял у
   плашки кегль, запас и положение, а число строк — нет (проверка добавлена
   в `hero-overlay-check.cjs` в тот же проход).

   Почему ступенькой по кеглю. Тот же порядок уступок, что у заголовка
   (10б/10в) и у плашки на снимке (10д): сперва уменьшаем кегль до нижнего
   порога читаемости проекта (13px), а не меняем место. Границы — первые
   ширины, где плашка влезает в карточку с запасом не меньше 12px (тот же
   порог, что у гейта на снимке): при 13px её ширина 271px (нужно 283px
   карточки — есть от 320px), при 14px — 287-288px (нужно 300px — от 332px),
   при 16px — 318px (нужно 330px — от 362px). Отсюда 13px до 331px, 14px на
   332-361px, дальше базовые 16px. Меняется только кегль: высота плашки от
   него не зависит (строка задана в px, 24,8px), поэтому сдвиг заголовка под
   ней на полосе 492-640px остаётся тем же одним числом 71px, что в 10г.

   Правило общее, без привязки к странице: плашка — общий блок темы
   (`template-parts/hero.php`), текст её редактируем (опция `buh360_texts`),
   и правило должно защищать любую правку текста, а не только сегодняшние
   семь страниц. Страницы, где плашка влезала и так, на 320-331px получают
   13px вместо 16px — это принято вместе с правкой (у эталона на этих
   широтах свои поля, и в две строки он не ломается только поэтому).
   Десктоп (>=641px) не задет: правило живёт внутри `@media`.
   Числа и границы: заметка «2026-09-29 -- Решение -- Плашка, кегль на
   320-361px (все страницы)». */
@media (max-width: 331px) {
  .hero__pill { font-size: 13px; }
}

@media (min-width: 332px) and (max-width: 361px) {
  .hero__pill { font-size: 14px; }
}

/* ============================================================
   12. /it-startapy: первый экран на телефоне (320-640) и на
       планшете (641-980) — плашка и заголовок НА снимке
       (решение Павла 29.09)
   ============================================================ */
/* ДОПИСАНО НАМИ, не из эталона — то же отклонение, что у главной в разделе 10,
   и тем же приёмом: карточка — сетка в одну колонку, `.hero__text` отдаёт
   детей наверх через `display: contents`, плашка и заголовок встают в ячейку
   снимка (`z-index`), высоту строки задаёт его `aspect-ratio`. Абсолютного
   позиционирования нет. `display: contents` снимает у `.hero__text` коробку
   вместе с `padding: 0 0 24px` (правка <=980 в sections.css) — эти 24px
   возвращаем карточке, как в 10а.

   Почему на этой странице можно, а на других пока нет. Заголовок и плашка
   ложатся на снимок только там, где под ними есть свободная стена. У
   `/it-startapy` снимок-сцена (1680x905: рабочий стол, ноутбуки), свободная
   зона искалась геометрией по самому изображению, а не на глаз, и двумя
   признаками сразу — насыщенностью и разбросом яркости в окне 24x50
   (у сцены одного признака мало: стол с ноутбуками и по насыщенности, и по
   яркости неотличим от фона). Замер 29.09: слева свободно 76% ширины кадра
   в верхней трети и 67% ниже половины высоты — поэтому колонка текста здесь
   шире, чем на главной: `margin-right: 38%` (колонка 62%) против 50% в 10а.
   Кадр берётся как есть: 4/3 на телефоне (sections.css, <=640) и 1680/967 на
   планшете (<=980) — пропорция исходника, снимок показывается целиком, кропа
   нет; видимый кусок исходника считается через коэффициент обложки
   `k = высота_кадра / 905`, сдвиг — `object-position: 60%`.

   Кегль заголовка 22px, ниже 371px — 18px: та же ступенька, что в 10б/10в,
   и по той же причине (упирается не строка, а самое длинное слово).
   Плашка на телефоне: до 491px — строкой НАД снимком с зазором 12px (та же
   развилка, что в 10а/10г: на снимке ей не хватает места), с 492px — на
   снимке, поля 22/18, как в 10г, заголовок сдвинут под неё на 71px (22 +
   36,8 + 12). Кегль плашки на 492-529px — 14px, с 530px — 16px: здесь
   границы свои, не как у главной (там 13px держится с 492px, 14px — с 516px),
   потому что стена шире и колонка другая; замер по каждому пикселю полосы.
   Общая ступень 13/14px на 320-361px приходит из раздела 11.

   Планшетная полоса 641-980 целиком (раскладка <=980 одна и та же, разрез по
   767/768 дал бы скачок): плашка 16px на снимке, заголовок 28px в колонке
   55% (`margin-right: 45%`), сдвиг тот же 71px. 28px — решение Павла 29.09 по
   варианту A: у этой страницы стена шире, чем у главной (76% ширины кадра в
   верхней трети и 67% ниже половины высоты против 54%), поэтому и колонка
   шире 50%, а кегль при ней — 28px с запасом 61,1px (минимальная ширина 658px).
   ПОЧЕМУ НЕ 30px, как предлагалось сначала: заголовок в шесть строк доходит
   низом последней строки до полосы, где в кадре начинается стол с ноутбуками
   (исходник строка 650: свободная стена уезжает влево с x=1083 на x=844), и
   при 30px/50% последняя строка заходит на стол на −2,9px (ширины 696-702px,
   семь ширин). Первый макет этого не поймал: он мерил запас по СЕРЕДИНЕ
   строки, а строка живёт 36px и пересекает границу стола. Строго по всему
   вертикальному отрезку строки — как считает гейт — 30px не проходит;
   по высоте кадра он при этом держится (запас 25,5px), то есть упирается
   именно в стену. Сдвинуть текст выше нельзя: под плашкой минимум 66,8px
   (её низ 58,8px), а спасло бы 23px сдвига. Вариант 26px/50% тоже проходит
   (запас 95,8px), но отвергнут Павлом 29.09 — кегль на 2px мельче ради
   запаса внутри того же коридора: оба варианта ломаются на одной и той же
   седьмой строке заголовка. Числа развилки A/B: заметка «2026-09-29 --
   Решение -- it-startapy, первый экран -- заголовок и плашка 320-980px».
   Проверка — гейт `hero-overlay-check.cjs` (своя таблица силуэта этой
   фотографии, полоса 320-980 подряд по пикселю).
   Внутренние страницы полосой не затронуты: правило живёт под
   `body.page-id-23` (у WP на этой странице нет слаг-класса — только
   `page-id-23`, проверено на живой странице 29.09). */
@media (max-width: 640px) {
  body.page-id-23 .hero__card { display: grid; grid-template-columns: 1fr; padding: 0 0 24px; }
  body.page-id-23 .hero__text { display: contents; }
  body.page-id-23 .hero__bg { grid-row: 2; grid-column: 1; }
  body.page-id-23 .hero__lead { grid-row: 3; }
  body.page-id-23 .hero__text .btn-row { grid-row: 4; }
  body.page-id-23 .hero__note,
  body.page-id-23 .hero__notes { grid-row: 5; }
}

/* До 492px плашка не влезает на снимок — она строкой над ним, с зазором 12px
   (тот же зазор, что у эталона между плашкой и заголовком на десктопе). */
@media (max-width: 491px) {
  body.page-id-23 .hero__pill { grid-row: 1; grid-column: 1; margin: 0 0 12px; }
  body.page-id-23 .hero__text h1 {
    grid-row: 2;
    grid-column: 1;
    z-index: 2;
    align-self: start;
    margin: 22px 38% 0 18px;
    font-size: 22px;
  }
}

/* 320-370px: 22px на этой стене не влезает — самое длинное слово шире колонки
   (как на главной в 10в). 18px держит запас на всей полосе. */
@media (max-width: 370px) {
  body.page-id-23 .hero__text h1 { font-size: 18px; }
}

@media (min-width: 492px) and (max-width: 640px) {
  body.page-id-23 .hero__pill {
    grid-row: 2;
    grid-column: 1;
    z-index: 3;
    align-self: start;
    justify-self: start;
    margin: 22px 12px 0 18px;
    width: fit-content;
    max-width: calc(100% - 36px);
    font-size: 16px;
  }
  body.page-id-23 .hero__text h1 {
    grid-row: 2;
    grid-column: 1;
    z-index: 2;
    align-self: start;
    margin: 71px 38% 0 18px;
    font-size: 22px;
  }
}

/* Ступенька кегля плашки на снимке: 14px держит запас до силуэта с 492px,
   16px — с 530px (замер по каждому пикселю полосы). */
@media (min-width: 492px) and (max-width: 529px) {
  body.page-id-23 .hero__pill { font-size: 14px; }
}

/* Планшет 641-980: та же раскладка сеткой, но кадр 1680/967 — снимок шире и
   ниже, поэтому заголовок здесь 28px, а колонка 55% (см. разбор выше). */
@media (min-width: 641px) and (max-width: 980px) {
  body.page-id-23 .hero__card { display: grid; grid-template-columns: 1fr; padding: 0 0 24px; }
  body.page-id-23 .hero__text { display: contents; }
  body.page-id-23 .hero__bg { grid-row: 1; grid-column: 1; }
  body.page-id-23 .hero__pill {
    grid-row: 1;
    grid-column: 1;
    z-index: 3;
    align-self: start;
    justify-self: start;
    margin: 22px 0 0 18px;
    width: fit-content;
    max-width: calc(100% - 36px);
    font-size: 16px;
  }
  body.page-id-23 .hero__text h1 {
    grid-row: 1;
    grid-column: 1;
    z-index: 2;
    align-self: start;
    margin: 71px 45% 0 18px;
    font-size: 28px;
  }
  body.page-id-23 .hero__lead { grid-row: 2; }
  body.page-id-23 .hero__text .btn-row { grid-row: 3; }
  body.page-id-23 .hero__note,
  body.page-id-23 .hero__notes { grid-row: 4; }
}

/* ============================================================
   13. /ip-ooo: первый экран на телефоне (320-640) и на планшете
       (641-980) — плашка и заголовок НА снимке
       (решение Павла 29.09, вариант A)
   ============================================================ */
/* ДОПИСАНО НАМИ, не из эталона — то же отклонение и тем же приёмом, что
   в разделе 12 (/it-startapy): карточка — сетка в одну колонку, `.hero__text`
   отдаёт детей наверх через `display: contents`, плашка и заголовок встают
   в ячейку снимка (`z-index`), высоту строки задаёт его `aspect-ratio`.
   `display: contents` снимает у `.hero__text` коробку вместе с
   `padding: 0 0 24px` — эти 24px возвращаем карточке. Правило живёт под
   `body.page-id-24` (у WP на этой странице слаг-класса нет — только
   `page-id-24`, проверено на живой странице 29.09), поэтому остальные
   страницы и десктоп не затронуты.

   Стена этой фотографии (1680x905 — та же геометрия, что у /it-startapy):
   свободно не меньше 59,7% ширины кадра до исходной строки ~700 (77% высоты),
   ниже ~155 строк начинается стол и стена сужается до ~45%. Искалась
   геометрией по самому изображению и двумя признаками сразу (насыщенность +
   разброс яркости в окне 24x50) — инструмент воспроизводит разметку
   /it-startapy байт-в-байт, поэтому цифрам можно верить.

   ПОЧЕМУ КЕГЛЬ МЕЛЬЧЕ, чем на /it-startapy: заголовок здесь вдвое длиннее —
   57 знаков против 30 («Бухгалтерия для малого бизнеса: от ИП до ООО
   с 20 сотрудниками»), поэтому 20px с 371px и 16px ниже 371px (там 22/18).
   Развилка мерилась перебором 108 ширин полосы 320-640 по каждому пикселю:
   вариант A (кадр как есть, колонка 56%, 16/20px) проходит с минимальным
   запасом 12,1px на 371px — ровно порог гейта 12px; вариант B (18px, но кадр
   сдвинут `object-position` 60% -> 45%) даёт 16,5px, однако сдвиг затягивает
   в кадр размытого человека и белое кресло и ставит их ровно в зону текста.
   Павел выбрал A 29.09: кадр не трогаем (первый шаг порядка уступок —
   остаться на фото, уменьшить кегль), а кегль расходится с B только ниже
   371px. Ступеньки 17px между ними нет: 1,5px не хватает до порога.
   Числа развилки: заметка «2026-09-29 -- Решение -- ip-ooo, первый экран --
   заголовок и плашка 320-980px».

   Плашка: до 491px строкой НАД снимком с зазором 12px (та же развилка, что
   в 10а и 12), с 492px — на снимке, поля 22/18, заголовок сдвинут под неё на
   71px (22 + 36,8 + 12). Кегль плашки на 492-529px 14px, с 530px 16px — тот
   же приём, что в 12; границы проверены замером по каждому пикселю полосы.

   Планшетная полоса 641-980 берётся целиком (раскладка <=980 одна и та же):
   плашка 16px, заголовок 28px в колонке 55% (`margin-right: 45%`), сдвиг тот
   же 71px. Это в точности режим /it-startapy — у обеих страниц снимок
   1680x905 и одна пропорция кадра (1680/967 на планшете), поэтому
   планшетная полоса у них одна и та же. */
@media (max-width: 640px) {
  body.page-id-24 .hero__card { display: grid; grid-template-columns: 1fr; padding: 0 0 24px; }
  body.page-id-24 .hero__text { display: contents; }
  body.page-id-24 .hero__bg { grid-row: 2; grid-column: 1; }
  body.page-id-24 .hero__lead { grid-row: 3; }
  body.page-id-24 .hero__text .btn-row { grid-row: 4; }
  body.page-id-24 .hero__note,
  body.page-id-24 .hero__notes { grid-row: 5; }
}

/* До 492px плашка не влезает на снимок — она строкой над ним, с зазором 12px. */
@media (max-width: 491px) {
  body.page-id-24 .hero__pill { grid-row: 1; grid-column: 1; margin: 0 0 12px; }
  body.page-id-24 .hero__text h1 {
    grid-row: 2;
    grid-column: 1;
    z-index: 2;
    align-self: start;
    margin: 22px 44% 0 18px;
    font-size: 20px;
  }
}

/* 320-370px: 20px на этой стене не влезает (самое длинное слово шире колонки —
   как на главной в 10в). 16px держит запас на всей полосе. */
@media (max-width: 370px) {
  body.page-id-24 .hero__text h1 { font-size: 16px; }
}

@media (min-width: 492px) and (max-width: 640px) {
  body.page-id-24 .hero__pill {
    grid-row: 2;
    grid-column: 1;
    z-index: 3;
    align-self: start;
    justify-self: start;
    margin: 22px 12px 0 18px;
    width: fit-content;
    max-width: calc(100% - 36px);
    font-size: 16px;
  }
  body.page-id-24 .hero__text h1 {
    grid-row: 2;
    grid-column: 1;
    z-index: 2;
    align-self: start;
    margin: 71px 44% 0 18px;
    font-size: 20px;
  }
}

/* Ступенька кегля плашки на снимке: 14px держит запас с 492px, 16px — с 530px
   (замер по каждому пикселю полосы, как в 12). */
@media (min-width: 492px) and (max-width: 529px) {
  body.page-id-24 .hero__pill { font-size: 14px; }
}

/* Планшет 641-980: та же раскладка сеткой, но кадр 1680/967, поэтому заголовок
   28px в колонке 55% — режим /it-startapy без изменений. */
@media (min-width: 641px) and (max-width: 980px) {
  body.page-id-24 .hero__card { display: grid; grid-template-columns: 1fr; padding: 0 0 24px; }
  body.page-id-24 .hero__text { display: contents; }
  body.page-id-24 .hero__bg { grid-row: 1; grid-column: 1; }
  body.page-id-24 .hero__pill {
    grid-row: 1;
    grid-column: 1;
    z-index: 3;
    align-self: start;
    justify-self: start;
    margin: 22px 0 0 18px;
    width: fit-content;
    max-width: calc(100% - 36px);
    font-size: 16px;
  }
  body.page-id-24 .hero__text h1 {
    grid-row: 1;
    grid-column: 1;
    z-index: 2;
    align-self: start;
    margin: 71px 45% 0 18px;
    font-size: 28px;
  }
  body.page-id-24 .hero__lead { grid-row: 2; }
  body.page-id-24 .hero__text .btn-row { grid-row: 3; }
  body.page-id-24 .hero__note,
  body.page-id-24 .hero__notes { grid-row: 4; }
}

/* ============================================================
   14. /stroyka: первый экран на телефоне (320-640) и на планшете
       (641-980) — плашка и заголовок НА снимке
       (решение Павла 30.09, вариант A)
   ============================================================ */
/* ДОПИСАНО НАМИ, не из эталона — то же отклонение и тем же приёмом, что
   в разделах 12 (/it-startapy) и 13 (/ip-ooo): карточка — сетка в одну
   колонку, `.hero__text` отдаёт детей наверх через `display: contents`,
   плашка и заголовок встают в ячейку снимка (`z-index`), высоту строки задаёт
   его `aspect-ratio`. `display: contents` снимает у `.hero__text` коробку
   вместе с `padding: 0 0 24px` — эти 24px возвращаем карточке. Правило живёт
   под `body.page-id-21` (у WP на этой странице слаг-класса нет — только
   `page-id-21`, проверено на живой странице 30.09), поэтому остальные
   страницы и десктоп не затронуты.

   Стена этой фотографии (hero-stroyka.webp, 1680x900): верх кадра свободен
   НА 100% ширины до исходной строки 350 — это самый свободный верх из шести
   оставшихся страниц (у /why 100/100/57/54, у /tariffs 100/46/100/100,
   у /cases 83/84/84/84, у /kontakty 50/50/50/50, у /proizvodstvo 20/12/41/39).
   Искалась геометрией по самому изображению и двумя признаками сразу
   (насыщенность + разброс яркости в окне 24x50) — тот же инструмент, что
   воспроизводит разметку /it-startapy байт-в-байт.
   Полная таблица полос от источника (x, дальше которого в полосе начинается
   «субъект»), по 50 строк: 0-300 — 1680 (свободно всё), 350 — 1288, 400 — 803,
   450 — 799, 500 — 1019, 550 — 1020, 600 — 1024, 650 — 1014, 700 — 1016,
   750 — 808, 800 — 756, 850 — 694.

   ЧЕМ ЭТА СТРАНИЦА ОТЛИЧАЕТСЯ от двух закрытых отраслевых: упор здесь не
   в ширину строки и не в кегль, а в ЧИСЛО СТРОК. Стрела башенного крана режет
   полосы 400-450 на x≈800 источника, то есть узкая колонка (62%, как
   у /it-startapy и /ip-ooo) ломает заголовок «Бухгалтерия для субподрядчиков
   в стройке» (43 знака) в четыре строки — и четвёртая, «в стройке», уходит
   на стрелу: замер построчно, запас -8,4px на 320px и -8,8px на 375px.
   Колонка 78% (`margin-right: 22%`) держит ТРИ строки, все выше крана:
   запас 109px на 320px. Это первый случай в очереди, где колонка ШИРЕ, чем
   у /it-startapy, а не равна ей.

   Развилка мерилась перебором 128 ширин полосы 320-640 по каждому пикселю:
   A — 22px с 371px и 18px ниже (колонка 78%), 0 провалов, мин. запас 109px;
   B — то же, но 20/16px, 0 провалов, мин. запас 125,1px. Павел выбрал A
   30.09: кегль крупнее, запас на порядок выше порога гейта (12px), а кегль
   совпадает с телефонной ступенью /it-startapy. Ступенька 22 -> 18px ниже
   371px обязательна: ровные 22px дают -135px на 320px. Числа развилки:
   заметка «2026-09-30 -- Решение -- stroyka, первый экран -- заголовок
   и плашка 320-980px».

   Плашка: до 491px строкой НАД снимком с зазором 12px (та же развилка, что
   в 10а, 12 и 13), с 492px — на снимке, поля 22/18, заголовок сдвинут под неё
   на 71px (22 + 36,8 + 12). Ступеньки кегля плашки на 492-529px здесь НЕТ,
   в отличие от 12 и 13: у этой фотографии кран начинается ниже плашки, и 16px
   держат запас 197,6px на 492px (порог 12px) — уменьшать кегль не за что.
   Общая ступень 13/14px на 320-361px приходит из раздела 11.

   Планшетная полоса 641-980 берётся целиком (раскладка <=980 одна и та же,
   разрез по 767/768 дал бы скачок): плашка 16px на снимке, заголовок 28px
   в колонке 55% (`margin-right: 45%`), сдвиг тот же 71px. Это в точности
   режим /it-startapy и /ip-ooo — пропорция кадра на планшете у всех трёх
   страниц одна (1680/967), а заголовок этой страницы короче, чем у /ip-ooo
   (43 знака против 57), поэтому стена даёт запас 95,1px на 641px —
   тот же кегль, что у соседей, без ступенек. Проверка — гейт
   `hero-overlay-check.cjs` (своя таблица силуэта этой фотографии — `STR_BANDS`,
   полоса 320-980 подряд по пикселю; репетиция впрыском файла темы — 0 провалов,
   отрицательный контроль `_nc-hero.cjs` красный). */
@media (max-width: 640px) {
  body.page-id-21 .hero__card { display: grid; grid-template-columns: 1fr; padding: 0 0 24px; }
  body.page-id-21 .hero__text { display: contents; }
  body.page-id-21 .hero__bg { grid-row: 2; grid-column: 1; }
  body.page-id-21 .hero__lead { grid-row: 3; }
  body.page-id-21 .hero__text .btn-row { grid-row: 4; }
  body.page-id-21 .hero__note,
  body.page-id-21 .hero__notes { grid-row: 5; }
}

/* До 492px плашка не влезает на снимок — она строкой над ним, с зазором 12px
   (тот же зазор, что у эталона между плашкой и заголовком на десктопе). */
@media (max-width: 491px) {
  body.page-id-21 .hero__pill { grid-row: 1; grid-column: 1; margin: 0 0 12px; }
  body.page-id-21 .hero__text h1 {
    grid-row: 2;
    grid-column: 1;
    z-index: 2;
    align-self: start;
    margin: 22px 22% 0 18px;
    font-size: 22px;
  }
}

/* 320-370px: 22px на этой стене не влезает (самое длинное слово шире колонки —
   как на главной в 10в и у соседей в 12/13; здесь ступенька дороже: ровные
   22px дают -135px). 18px держит запас на всей полосе. */
@media (max-width: 370px) {
  body.page-id-21 .hero__text h1 { font-size: 18px; }
}

@media (min-width: 492px) and (max-width: 640px) {
  body.page-id-21 .hero__pill {
    grid-row: 2;
    grid-column: 1;
    z-index: 3;
    align-self: start;
    justify-self: start;
    margin: 22px 12px 0 18px;
    width: fit-content;
    max-width: calc(100% - 36px);
  }
  body.page-id-21 .hero__text h1 {
    grid-row: 2;
    grid-column: 1;
    z-index: 2;
    align-self: start;
    margin: 71px 22% 0 18px;
    font-size: 22px;
  }
}

/* Планшет 641-980: та же раскладка сеткой, кадр 1680/967 — режим /it-startapy
   и /ip-ooo без изменений (28px в колонке 55%, запас 95,1px на 641px). */
@media (min-width: 641px) and (max-width: 980px) {
  body.page-id-21 .hero__card { display: grid; grid-template-columns: 1fr; padding: 0 0 24px; }
  body.page-id-21 .hero__text { display: contents; }
  body.page-id-21 .hero__bg { grid-row: 1; grid-column: 1; }
  body.page-id-21 .hero__pill {
    grid-row: 1;
    grid-column: 1;
    z-index: 3;
    align-self: start;
    justify-self: start;
    margin: 22px 0 0 18px;
    width: fit-content;
    max-width: calc(100% - 36px);
  }
  body.page-id-21 .hero__text h1 {
    grid-row: 1;
    grid-column: 1;
    z-index: 2;
    align-self: start;
    margin: 71px 45% 0 18px;
    font-size: 28px;
  }
  body.page-id-21 .hero__lead { grid-row: 2; }
  body.page-id-21 .hero__text .btn-row { grid-row: 3; }
  body.page-id-21 .hero__note,
  body.page-id-21 .hero__notes { grid-row: 4; }
}

/* ============================================================
   /proizvodstvo: первый экран на телефоне (320-640) — плашка
   и заголовок НА снимке, кадр сдвинут влево (вариант В-1,
   решение Павла 30.09; отступы и кегли заменены на опорные
   главной 01.10, решение Павла 16:47). Продолжение разделов
   12-14; своего номера у блока нет — указание РП от 30.09
   (раздел 15 не создавать), правила влиты в существующий файл.
   ============================================================ */
/* ДОПИСАНО НАМИ, не из эталона — то же отклонение и тем же приёмом, что
   в разделах 12 (/it-startapy), 13 (/ip-ooo) и 14 (/stroyka): карточка —
   сетка в одну колонку, `.hero__text` отдаёт детей наверх через
   `display: contents`, плашка и заголовок встают в ячейку снимка
   (`z-index`), высоту строки задаёт его `aspect-ratio`. `display: contents`
   снимает у `.hero__text` коробку вместе с `padding: 0 0 24px` — эти 24px
   возвращаем карточке. Правило живёт под `body.page-id-22` (у WP на этой
   странице слаг-класса нет — только `page-id-22`, как у соседей),
   поэтому остальные страницы и десктоп не затронуты.

   ПОЛОСА ТОЛЬКО ТЕЛЕФОННАЯ (320-640). Планшетная (641-980) не тронута:
   решения по ней нет, вопрос вынесен Павлу отдельно (задача РП №10).

   Кадр сдвинут влево (`object-position: 0%`). Это не вкус, а условие
   попадания: у этой фотографии (hero-proizvodstvo.webp, 1680x914) стена
   занята сверху потолочным светильником — полоса 50 занята с колонки 182
   при 1680, тогда как у /stroyka верхние четыре полосы были свободны на
   100%. При родном кадре (50%) стена под заголовком на 375px даёт 190px,
   а строка со словом «себестоимости» (182px при 18px) требует 200px:
   не хватает 10px. Цена принята Павлом: второй человек уходит из кадра,
   кадр страницы перестаёт совпадать с десктопным.

   ОТСТУПЫ (01.10, решение Павла 16:47): опорная лестница главной и /stroyka
   перенесена сюда как есть — плашка до 491px строкой НАД снимком (её верх на
   48,8px выше верха кадра: 36,8px высота + 12px зазор), с 492px — НА снимке
   в 22px от его верха; заголовок +22px от верха кадра до 491px и +71px
   с 492px (22px + 36,8px плашки + 12px зазор); кегль 18px до 370px и 22px
   с 371px. Колонка 66% до 492px и 60% выше. Прежние числа (заголовок 71px,
   отступ плашки 22% ширины карточки, свой кегль 16/18px и своя ступень
   кегля плашки) отменены Павлом 01.10 — лестница теперь одна на все страницы.

   ЭТО НАМЕРЕННОЕ ОТКЛОНЕНИЕ ОТ СТЕНЫ ФОТО, а не ошибка правки: верх кадра
   hero-proizvodstvo.webp занят потолком с трубами (полоса строк 0-50 занята
   с колонки 322, полоса 50-100 — с 182 при 1680), поэтому на этих отступах
   заголовок и плашка ложатся на потолок. Павел 01.10 принял наезд и запретил
   перекадрировать фото. Запас до стены здесь отрицательный ПО ЗАМЫСЛУ
   (примерка 01.10: 320 — −124px, 375 — −148,8px, 640 плашка — −245px);
   полоса 7 гейта `hero-overlay-check.cjs` на этой странице ожидаемо красная
   по «запасу» — не «исправлять» обратно и не перекадрировать кадр. */
@media (max-width: 640px) {
  body.page-id-22 .hero__bg { object-position: 0% 50%; grid-row: 2; grid-column: 1; }
  body.page-id-22 .hero__card { display: grid; grid-template-columns: 1fr; padding: 0 0 24px; }
  body.page-id-22 .hero__text { display: contents; }
  body.page-id-22 .hero__lead { grid-row: 3; }
  body.page-id-22 .hero__text .btn-row { grid-row: 4; }
  body.page-id-22 .hero__note,
  body.page-id-22 .hero__notes { grid-row: 5; }
}

/* До 492px плашка не влезает на снимок — она строкой над ним, с зазором 12px
   (тот же зазор, что у эталона между плашкой и заголовком на десктопе). */
@media (max-width: 491px) {
  body.page-id-22 .hero__pill { grid-row: 1; grid-column: 1; margin: 0 0 12px; }
  body.page-id-22 .hero__text h1 {
    grid-row: 2;
    grid-column: 1;
    z-index: 2;
    align-self: start;
    margin: 22px 34% 0 18px;
    font-size: 18px;
  }
}

/* Кегль 22px — ступенька главной (371px: у 18px на этой стене потолка
   не хватало, у 22px «упирается» слово; наезд принят Павлом 01.10). */
@media (min-width: 371px) and (max-width: 491px) {
  body.page-id-22 .hero__text h1 { font-size: 22px; }
}

@media (min-width: 492px) and (max-width: 640px) {
  body.page-id-22 .hero__pill {
    grid-row: 2;
    grid-column: 1;
    z-index: 3;
    align-self: start;
    justify-self: start;
    margin: 22px 12px 0 18px;
    width: fit-content;
    max-width: calc(100% - 36px);
  }
  body.page-id-22 .hero__text h1 {
    grid-row: 2;
    grid-column: 1;
    z-index: 2;
    align-self: start;
    margin: 71px 40% 0 18px;
    font-size: 22px;
  }
}

/* ============================================================
   /proizvodstvo: первый экран на планшете (641-980) — плашка и
   заголовок НА снимке, родной кадр (вариант В-2, решение Павла
   30.09 вечером; отступы заменены на опорные главной 01.10,
   решение Павла 16:47). Продолжение телефонного блока выше;
   своего номера у блока нет — указание РП от 30.09 (раздел 15
   не создавать), правила влиты в существующий файл.
   ============================================================ */
/* ДОПИСАНО НАМИ, не из эталона — тот же приём, что в телефонной полосе выше
   и в разделах 12 (/it-startapy), 13 (/ip-ooo) и 14 (/stroyka): карточка —
   сетка в одну колонку, `.hero__text` отдаёт детей наверх через
   `display: contents`, плашка и заголовок встают в ячейку снимка
   (`z-index`), высоту строки задаёт его `aspect-ratio`. Правило живёт под
   `body.page-id-22`, поэтому остальные страницы и десктоп не затронуты.

   КАДР РОДНОЙ (не сдвинут). Отличие от телефонной полосы: там кадр уезжает
   влево до 0% и второй человек уходит из кадра, здесь ширина карточки
   позволяет оставить обоих — цена варианта В-2 уплачена кеглем: заголовок
   38 -> 28px (решение Павла 30.09).

   ОТСТУПЫ (01.10, решение Павла 16:47, продолжение телефонной правки):
   опорная лестница главной и /stroyka — плашка 22px от верха кадра, заголовок
   `71px` (22px + 36,8px плашки + 12px зазор), колонка 46% (`margin-right: 54%`:
   стена для текста в строках 250-650 кадра стоит на 51,8% ширины карточки).
   Прежние числа (плашка 16% ширины карточки, верх `calc(16% + 48.8px)`)
   отменены вместе с телефонными.

   ЭТО НАМЕРЕННОЕ ОТКЛОНЕНИЕ ОТ СТЕНЫ ФОТО, а не ошибка правки: верх кадра
   hero-proizvodstvo.webp занят потолком с трубами (полоса строк 0-50 занята
   с колонки 322, полоса 50-100 — с 182 при 1680), поэтому на 22px плашка и
   заголовок ложатся на потолок. Павел 01.10 принял такой же наезд на
   телефонной полосе и запретил перекадрировать фото; здесь он принят тем же
   решением. Полоса 7 гейта `hero-overlay-check.cjs` (планшетная часть) на
   этой странице теперь ожидаемо красная по «запасу», а её ожидания
   `PR_TAB_PILL_PCT = 0.16` / `PR_TAB_*` устарели — не «исправлять» обратно.

   КЕГЛЬ ПЛАШКИ — ступенька 14/16px с границей 690px сохранена (кегль
   заголовка 28px — цена варианта В-2, решение Павла 30.09). */
@media (min-width: 641px) and (max-width: 980px) {
  body.page-id-22 .hero__bg { grid-row: 1; grid-column: 1; }
  body.page-id-22 .hero__card { display: grid; grid-template-columns: 1fr; padding: 0 0 24px; }
  body.page-id-22 .hero__text { display: contents; }
  body.page-id-22 .hero__pill {
    grid-row: 1;
    grid-column: 1;
    z-index: 3;
    align-self: start;
    justify-self: start;
    margin: 22px 0 0 18px;
    width: fit-content;
    max-width: calc(100% - 36px);
    font-size: 14px;
  }
  body.page-id-22 .hero__text h1 {
    grid-row: 1;
    grid-column: 1;
    z-index: 2;
    align-self: start;
    margin: 71px 54% 0 18px;
    font-size: 28px;
  }
  body.page-id-22 .hero__lead { grid-row: 2; }
  body.page-id-22 .hero__text .btn-row { grid-row: 3; }
  body.page-id-22 .hero__note,
  body.page-id-22 .hero__notes { grid-row: 4; }
}

/* Своя ступенька кегля плашки НА снимке (см. выше: 16px шире стены на узком
   краю полосы). Общая ступень раздела 11 сюда не достаёт — она до 640px. */
@media (min-width: 690px) and (max-width: 980px) {
  body.page-id-22 .hero__pill { font-size: 16px; }
}

/* ============================================================
   /why: первый экран — плашки НАД снимком, заголовок НА снимке
   (320-980px, вариант А, решение Павла 01.10 12:00, О17)
   ============================================================ */
/* ДОПИСАНО НАМИ, не из эталона — тот же приём, что в разделах 12
   (/it-startapy), 13 (/ip-ooo), 14 (/stroyka) и в блоках /proizvodstvo:
   карточка — сетка в одну колонку, `.hero__text` отдаёт детей наверх через
   `display: contents`, плашки и заголовок встают в ячейку снимка (`z-index`),
   высоту строки задаёт его `aspect-ratio`. `display: contents` снимает у
   `.hero__text` коробку вместе с `padding: 0 0 24px` — эти 24px возвращаем
   карточке. Правило живёт под `body.page-id-28` (у WP на этой странице
   слаг-класса нет — только `page-id-28`, как у соседей), поэтому остальные
   страницы и десктоп не затронуты. Своего номера у блока нет — правки влиты
   в существующий файл (указание РП от 30.09).

   ОСОБЕННОСТЬ ЭТОЙ СТРАНИЦЫ — ПЛАШЕК ДВЕ: «Почему мы» (131px) и «Официальный
   партнёр 1С:БО» (318px) в общей обёртке `.hero__pills` — единственной на
   сайте (sections.css). Вторая на снимок не встаёт, не задев шлем и лицо
   космонавта, поэтому обе стоят НАД снимком в обеих полосах (запас 63,3px на
   320px, строк не больше двух), и полоса устроена как телефонная полоса
   /proizvodstvo: плашки — строка сетки 1, снимок — строка 2.

   КАДР РОДНОЙ, КЕГЛЬ НЕ УСТУПАЕТ: 22px на телефоне и родные 38px на планшете
   (у /proizvodstvo на планшете платили кеглем 38 -> 28px, здесь уступать не за
   что). 22px совпадает с /it-startapy, /ip-ooo и /stroyka — страницы шаблона
   держат один кегль, и он же мельче не становится: ступеньки кегля на телефоне
   НЕТ, 22px зелены на всех 62 широтах полосы, включая 320px.

   ВЕРХ ЗАГОЛОВКА — ровно 40px, и это не вкус. Колонка 44% даёт шесть строк, и
   запас держит не ширина строки, а СЛОВО «отвечаем» (139,1px при кегле 22px):
   оно шире колонки, и браузер его не переносит — строка вылезает из колонки и
   упирается в стену снимка (полоса строк исходника 200-249 — 886px, самая
   близкая за всю ленту). Сдвиг вниз на 40px уводит эту строку ниже полосы 886;
   сужение колонки не лечит (66% -> 44% при верхe 22px оставляло красные
   357-372px). Отсюда и цена варианта: запас 14,4px на 320px — самый узкий в
   очереди, он держится на нынешнем тексте заголовка и на нынешнем снимке
   (правка текста или замена фотографии — перемерять обязательно).

   Замеры (проба `why-multi.cjs` — впрыск CSS в живую страницу, стенд при этом
   не менялся; критерии гейта — запас 12px, зазор плашки до снимка 12px, плашка
   в одну строку): телефон — зелено 62/62, минимум запаса заголовка 14,4px на
   320px, строк 4-6; планшет — зелено 65/65, минимум 71,8px на 701px, строк 3-5.
   Числа развилки — заметка «2026-10-01 -- Решение -- why, первый экран --
   заголовок и плашка 320-980px» (вариант А).

   Гейт (полоса 8) меряет плотнее пробы и по РАСКАТАННОМУ файлу: телефон — 83
   ширины 320-640, зелено 83/83, минимум запаса заголовка 14,4px на 320px;
   планшет — 96 ширин 641-980, зелено 96/96, минимум 71,8px на 701px; верх
   заголовка 40px на обеих полосах; плашки над снимком в обеих полосах.
   Логи прогонов: `_Инструменты/скрипты-проверки/run-all-20261001-why-band8.log`
   и `hero-overlay-20261001-polosa8-why.log`. */
@media (max-width: 640px) {
  body.page-id-28 .hero__card { display: grid; grid-template-columns: 1fr; padding: 0 0 24px; }
  body.page-id-28 .hero__text { display: contents; }
  body.page-id-28 .hero__pills { grid-row: 1; grid-column: 1; margin: 0 0 12px; }
  body.page-id-28 .hero__bg { grid-row: 2; grid-column: 1; }
  body.page-id-28 .hero__text h1 {
    grid-row: 2;
    grid-column: 1;
    z-index: 2;
    align-self: start;
    margin: 40px 56% 0 18px;
    font-size: 22px;
  }
  body.page-id-28 .hero__lead { grid-row: 3; }
  body.page-id-28 .hero__text .btn-row { grid-row: 4; }
  body.page-id-28 .hero__note,
  body.page-id-28 .hero__notes { grid-row: 5; }
}

/* Планшет 641-980 — одной полосой: кегль родной 38px, колонка та же 44%,
   верх тот же 40px, кадр родной. Развилки здесь нет (плашки на снимке не
   проходят: запас −77,1px на 641px), поэтому полоса совпадает с телефонной
   во всём, кроме кегля. */
@media (min-width: 641px) and (max-width: 980px) {
  body.page-id-28 .hero__card { display: grid; grid-template-columns: 1fr; padding: 0 0 24px; }
  body.page-id-28 .hero__text { display: contents; }
  body.page-id-28 .hero__pills { grid-row: 1; grid-column: 1; margin: 0 0 12px; }
  body.page-id-28 .hero__bg { grid-row: 2; grid-column: 1; }
  body.page-id-28 .hero__text h1 {
    grid-row: 2;
    grid-column: 1;
    z-index: 2;
    align-self: start;
    margin: 40px 56% 0 18px;
    font-size: 38px;
  }
  body.page-id-28 .hero__lead { grid-row: 3; }
  body.page-id-28 .hero__text .btn-row { grid-row: 4; }
  body.page-id-28 .hero__note,
  body.page-id-28 .hero__notes { grid-row: 5; }
}

/* ============================================================
   /kontakty: первый экран — плашка и заголовок НА снимке
   (320-980px, вариант В, решение Павла 01.10 14:36, О24)
   ============================================================ */
/* ДОПИСАНО НАМИ, не из эталона — тот же приём, что в разделах 12
   (/it-startapy), 13 (/ip-ooo), 14 (/stroyka), в блоках /proizvodstvo
   и в блоке /why: карточка — сетка в одну колонку, `.hero__text` отдаёт
   детей наверх через `display: contents`, плашка и заголовок встают в
   ячейку снимка (`z-index`), высоту строки задаёт его `aspect-ratio`.
   `display: contents` снимает у `.hero__text` коробку вместе с
   `padding: 0 0 24px` — эти 24px возвращаем карточке. Правило живёт под
   `body.page-id-8` (у WP на этой странице слаг-класса нет — только
   `page-id-8`, как у соседей по очереди), поэтому остальные страницы и
   десктоп не затронуты. Своего номера у блока нет — правки влиты в
   существующий файл (указание РП от 30.09).

   КАДР ТЕЛЕФОНА С 01.10 — 615x844, сдвиг 86,9% (указание Павла 01.10 15:57,
   задача rp-0110-wp-kontakty3: вернуть человека в кадр). Окно исходника —
   [780, 1395]: левая кромка за тёмным швом (752-768), правой хватает на
   фигуру с запасом (голова x 1160-1370). Плашка и заголовок лежат в строках
   ВЫШЕ головы (верх силуэта — строка ~295 из 844): там, правее шва, стена
   свободна до кромки кадра, поэтому текст и человек в кадре не спорят.
   Запас до силуэта: 18,9px на 320px (при самой осторожной границе строки
   290 — 16,5px), 34,9px на 375px, 148,3px на 640px; перелива нет ни на одной
   ширине. Кегль заголовка и отступы плашки не менялись — clamp держит запас
   не до стены-столбца, а до кромки карточки (слово 220px при 258px карточки
   на 320px). Цена — снимок выше: 395,2px на 320px и 878,2px на 640px против
   288px и 640px у кадра 1:1; первый экран растёт на те же 107,2px и 238,2px.
   Это плата за фигуру в кадре, и она принята указанием Павла.

   ПОЧЕМУ КАДР БЫЛ КВАДРАТНЫЙ (1:1) — кадр варианта В до 01.10, человек в
   него не попадал; оставлено для истории. Стена снимка
   (`kontakty-hero.webp`, 1513x844) — столбец 742 исходника, 49,0% кадра,
   и дальше по строке (755-780) идёт тёмный шов, то есть тянуть вправо
   нельзя. Самое длинное слово заголовка («Бухгалтерия360») требует 11px
   ширины на 1px кегля, а видимая ширина исходника при кадре 4:3 равна
   844*(4/3) = 1125px — стена даёт 130,4px (45,3% карточки), и заголовок
   не влезает на снимок НИ ПРИ КАКОМ читаемом кегле (нужно 188px на 320px,
   кегль вышел бы 9px). Сдвиг кадра влево (object-position 0%) поднимает
   стену до 66% — но заголовок держит только 14px, ниже практического
   порога проекта (16px у отраслевых и /proizvodstvo), а кадр режется по
   корпусу человека. Кадр 1:1 при том же сдвиге показывает ровно 844
   столбца исходника: стена — 87,9% карточки, заголовок держит 20px на
   320px, а кромка кадра попадает в пустую стену — человек уходит из кадра
   целиком, «обрезанного по корпусу» кадра, как в варианте 4:3, нет.
   Цена варианта принята Павлом (О24): на телефоне фотография квадратная,
   первый экран выше на 15px на 320px и на 79px на 640px, чем снимок как
   есть (вариант Б — не поднимать телефон).

   ЗАГОЛОВОК — clamp(20px, 7.99vw − 5.5px, 30px): крупнейший кегль, который
   держит запас 12px до стены на всей полосе 320-640px. Стена в долях
   ширины карточки почти не меняется (кадр 1:1, сдвиг 0%), поэтому кегль
   растёт линейно: (стена − 18 левый отступ − 12 запас)/11px на кегль =
   0,08*ширина − 5,5; потолок 30px — тот кегль, который заголовок этой
   страницы имеет на телефоне и сейчас (верхняя ступенька 24 / 26,25 / 30px).
   ПЛАШКА стоит НА снимке на всей полосе (верх 22px, кегль 16px, запас до
   стены 48,2px на 320px): над снимок её выносить не нужно — кадр 1:1 даёт
   стену 253px уже на 320px (правило раздела 11 «плашка над снимком до
   492px» сюда не достаёт, ступеньки кегля плашки у этой страницы нет).

   ПЛАНШЕТ — развилки нет: родной кадр (1680/967 — снимок показан целиком,
   кропа почти нет) даёт стену 49%, подъём проходит без правки кадра.
   Плашка 16px НА снимке с верха 22px, заголовок
   clamp(24px, 4.455vw − 5.5px, 38px) — 24px на 641px и 38px с 977px
   (потолок 38px — кегль /kontakty на десктопе, замер 01.10 на 981px):
   крупнейший, который держит те же 12px при колонке 49% (запас 16,5…28,1px).

   Замеры (проба `mock-kn.cjs` — впрыск CSS в живую страницу, стенд при
   этом не менялся): телефон 320-640 и планшет 641-980 по КАЖДОМУ пикселю
   (661 ширина, `precheck-kn.cjs` на раскатываемом файле) — зелено 661/661;
   минимум запаса заголовка 13,8px на 323px (на 320px — 15,2px), минимум
   запаса плашки 48,2px на 320px, зазор плашка→заголовок 12,2px, строк
   заголовка не больше двух, высота плашки везде 36,8px (одна строка).
   Десктоп не сдвинулся: сравнение кадра первого экрана на 1440px до и
   после — `compare -metric RMSE` = 0 (0), файлы совпали байт в байт
   (184 414 б). Числа развилки — заметка «2026-10-01 -- Решение --
   kontakty, первый экран -- заголовок и плашка 320-980px» (вариант В).

   ГЕЙТ (полоса 9) меряет по РАСКАТАННОМУ файлу теми же 661 ширинами,
   плюс сторож десктопа 981px (карточка обязана остаться flex, кегль 38px)
   и утечка правила на соседнюю страницу (/tariffs — первая неподнятая
   страница очереди) в обеих полосах. */
/* Телефон 320-640: кадр 1:1 со сдвигом влево, плашка и заголовок на нём.
   Строки 3/4/5 — текст под снимком; строка 1 не занята никем (её высота
   нулевая) — раскладка та же, что мерилась, номера строк сохранены. */
@media (max-width: 640px) {
  body.page-id-8 .hero__card { display: grid; grid-template-columns: 1fr; padding: 0 0 24px; }
  body.page-id-8 .hero__text { display: contents; }
  body.page-id-8 .hero__bg {
    grid-row: 2;
    grid-column: 1;
    aspect-ratio: 615 / 844;
    object-position: 86.9% 50%;
  }
  body.page-id-8 .hero__pill {
    grid-row: 2;
    grid-column: 1;
    z-index: 3;
    align-self: start;
    justify-self: start;
    margin: 22px 12px 0 18px;
    width: fit-content;
    max-width: calc(100% - 36px);
    font-size: 16px;
  }
  body.page-id-8 .hero__text h1 {
    grid-row: 2;
    grid-column: 1;
    z-index: 2;
    align-self: start;
    margin: 71px 12.1% 0 18px;
    font-size: clamp(20px, calc(7.99vw - 5.5px), 30px);
  }
  body.page-id-8 .hero__lead { grid-row: 3; }
  body.page-id-8 .hero__text .btn-row { grid-row: 4; }
  body.page-id-8 .hero__note,
  body.page-id-8 .hero__notes { grid-row: 5; }
}

/* Планшет 641-980: кадр родной, кегль 24-38px, плашка 16px на снимке. */
@media (min-width: 641px) and (max-width: 980px) {
  body.page-id-8 .hero__card { display: grid; grid-template-columns: 1fr; padding: 0 0 24px; }
  body.page-id-8 .hero__text { display: contents; }
  body.page-id-8 .hero__bg { grid-row: 1; grid-column: 1; }
  body.page-id-8 .hero__pill {
    grid-row: 1;
    grid-column: 1;
    z-index: 3;
    align-self: start;
    justify-self: start;
    margin: 22px 0 0 18px;
    width: fit-content;
    max-width: calc(100% - 36px);
    font-size: 16px;
  }
  body.page-id-8 .hero__text h1 {
    grid-row: 1;
    grid-column: 1;
    z-index: 2;
    align-self: start;
    margin: 71px 51% 0 18px;
    font-size: clamp(24px, calc(4.455vw - 5.5px), 38px);
  }
  body.page-id-8 .hero__lead { grid-row: 2; }
  body.page-id-8 .hero__text .btn-row { grid-row: 3; }
  body.page-id-8 .hero__note,
  body.page-id-8 .hero__notes { grid-row: 4; }
}

/* ============================================================
   14. /tariffs: первый экран на телефоне (320-640) и на планшете
       (641-980) — плашка и заголовок НА снимке
   ============================================================ */
/* ДОПИСАНО НАМИ, не из эталона: то же отклонение, что у главной (раздел 10),
   у отраслевых (11) и у /kontakty (13) — у эталона на узком экране текст
   уходит ПОД снимок, здесь плашка и заголовок остаются НА нём. Лид, кнопки и
   сноска стоят, как были, — под снимком (строки 2-4 сетки). Десктоп (>=981)
   не задет вовсе: правила живут внутри медиазапросов, на 1440px геометрия
   карточки до и после правки совпадает до десятых (замер 01.10).

   КАДР ТЕЛЕФОНА НЕ МЕНЯЕТСЯ (общее правило `<=640`: 4:3, object-position
   60% 50%). Окно исходника `tariffs-hero.webp` (1680x942) — x 254..1510: в нём
   и стена под текст (слева), и руки с телефоном (справа). Стена свободна до
   x=1247 — это кромка «занятого»: рука входит в кадр на строке 600 из 942
   (63,7% кадра) и ниже идёт налево. Выше кромки нет: строки 0-300 — светлая
   стена с мягкой тенью и швом подсветки по x~748 (это НЕ силуэт: проверено
   вырезкой 640-900 x 0-300), поэтому кромка там = правый край кадра.

   ОТСЮДА БЮДЖЕТ ЗАГОЛОВКА: он должен кончиться выше 63,7% кадра — ниже
   кромку задаёт рука (182px из 288 на 320px). Кегль на телефоне снижен с
   базовых 24-30px до `clamp(20px, 5vw + 4px, 30px)`: на 24px текст «Выберите
   тариф для вашего бизнеса» (593px в одну строку) ломался в строку 268px при
   кромке 227,6px на 320px, то есть заходил на руку; при 20px и правом отступе
   26% строки кончаются на 130-144px при кромке 188-248px (запас 44,6px).
   ПЛАШКА — `clamp(11.5px, 4.2vw - 1.6px, 16px)`: лестница раздела 11 считала
   запас от края карточки без левого отступа, а здесь плашка стоит НА снимке с
   отступом 18px, и на 320px при 13px (271px) она ломалась в две строки
   (271 + 18 > 288). Порог найден замером: 11,5px даёт 253px, 253 + 18 = 271px
   при карточке 288px.

   ЗАМЕР (проба `check-tf.cjs` — впрыск CSS в ЖИВУЮ страницу, стенд при этом
   не менялся): телефон 320/340/360/380/400/420/440/460/480/500/540/580/620/640
   и планшет 641/700/767/860/980 — везде запас заголовка >= 30,8px (минимум на
   420px), зазор плашка->заголовок 8,2px, плашка в одну строку, перелива нет,
   плашка и заголовок на снимке. Планшет: кадр родной (1680/967), правый
   отступ заголовка 30%, кегль базовый 38px (снижать не понадобилось),
   минимум запаса 57,7px на 641px. */
@media (max-width: 640px) {
  body.page-id-25 .hero__card { display: grid; grid-template-columns: 1fr; padding: 0 0 24px; }
  body.page-id-25 .hero__text { display: contents; }
  body.page-id-25 .hero__bg { grid-row: 1; grid-column: 1; }
  body.page-id-25 .hero__pill {
    grid-row: 1;
    grid-column: 1;
    z-index: 3;
    align-self: start;
    justify-self: start;
    margin: 22px 12px 0 18px;
    width: fit-content;
    max-width: calc(100% - 30px);
    font-size: clamp(11.5px, 4.2vw - 1.6px, 16px);
  }
  body.page-id-25 .hero__text h1 {
    grid-row: 1;
    grid-column: 1;
    z-index: 2;
    align-self: start;
    margin: 67px 26% 0 18px;
    font-size: clamp(20px, 5vw + 4px, 30px);
  }
  body.page-id-25 .hero__lead { grid-row: 2; }
  body.page-id-25 .hero__text .btn-row { grid-row: 3; }
  body.page-id-25 .hero__note,
  body.page-id-25 .hero__notes { grid-row: 4; }
}

/* Планшет 641-980: кадр родной (1680/967), кегль заголовка базовый 38px. */
@media (min-width: 641px) and (max-width: 980px) {
  body.page-id-25 .hero__card { display: grid; grid-template-columns: 1fr; padding: 0 0 24px; }
  body.page-id-25 .hero__text { display: contents; }
  body.page-id-25 .hero__bg { grid-row: 1; grid-column: 1; }
  body.page-id-25 .hero__pill {
    grid-row: 1;
    grid-column: 1;
    z-index: 3;
    align-self: start;
    justify-self: start;
    margin: 22px 12px 0 18px;
    width: fit-content;
    max-width: calc(100% - 36px);
  }
  body.page-id-25 .hero__text h1 {
    grid-row: 1;
    grid-column: 1;
    z-index: 2;
    align-self: start;
    margin: 67px 30% 0 18px;
  }
  body.page-id-25 .hero__lead { grid-row: 2; }
  body.page-id-25 .hero__text .btn-row { grid-row: 3; }
  body.page-id-25 .hero__note,
  body.page-id-25 .hero__notes { grid-row: 4; }
}

/* ============================================================
   15. /cases: первый экран — плашка и заголовок НА снимке
       (задача rp-0510-wp-cases-hero, 05.10.2026)
   ============================================================ */
/* ДОПИСАНО НАМИ, не из эталона — осознанное отклонение по мобильной вёрстке
   (у эталона мобильная вёрстка своя и эталоном не является: там портрет идёт
   карточкой сверху, а весь текст — под ним).

   Что было. Первый экран `/cases` держался базовой раскладки <=980 из
   sections.css: снимок отдельной карточкой, весь текст (плашка «Кейсы»,
   заголовок, лид, кнопки, сноска) — под ним. В очереди подъёма hero `/cases`
   оставалась последней потому, что её снимок читался как «рукопожатие
   вплотную во всю ширину» (заметка 24.09 в разделе 10). Живой замер 05.10
   это опроверг: стена свободна в верхней половине кадра до 83-84% ширины
   (таблица силуэта CASE_BANDS в гейте снята тем же расчётом, что у главной:
   стена — первая колонка, где сработал признак насыщенности ИЛИ занятости
   в окне 24x50), к середине сужается до 51-57%, а непроходима только нижняя
   полоса (исходные строки 850+ — тёмный край кадра).

   Как устроено. Копия модели главной (разделы 10а-10е): карточка — сетка в
   одну колонку, `.hero__text` отдаёт детей наверх через `display: contents`,
   плашка и заголовок ложатся в ячейку снимка, текст (лид, кнопки, сноска)
   идёт следующими строками под ним. Абсолютного позиционирования нет
   намеренно — высоту строки задаёт сама фотография (её `aspect-ratio`), а
   заголовок к ней только прижат полями. `display: contents` снимает у
   `.hero__text` его коробку вместе с `padding: 0 0 24px` (наша же правка
   <=980) — нижние 24px под последним текстом карточки возвращаем самой
   карточке, как в 10а.
   Опорные отступы главной держатся буквально: плашка +22 от верхней кромки
   кадра, заголовок +71 (22 + 36,8 высота плашки + 12 зазор).

   Единственное отличие от главной — плашка не уходит над снимком. У главной
   порог 492px задаёт её собственная ширина (318px, «Официальный партнёр
   1С:БО»); здесь плашка — «Кейсы», 95px, и влезает на снимок на всех
   телефонных широтах (запас до силуэта 158px даже на 320px). Порядок уступок
   проекта (остаться на фото -> уменьшить кегль -> вынести над фото) первую
   ступень выполняет, поэтому выше снимка плашка здесь не поднимается, а
   заголовок стоит на опорном отступе +71 по всей полосе, а не только с
   492px. Кегль плашки при этом остаётся общей ступенькой раздела 11 (её
   сторожит полоса 3 гейта).

   Кегли — как на главной (18px до 370px, 22px на 371-640px, 34px на планшете):
   задача выравнивает страницу по главной, а не подбирает ей свой кегль.
   Замер 05.10 по каждому пикселю обеих полос (скрипт mock-cases.cjs —
   впрыск кандидата в живую страницу, стенд при этом не менялся): минимум
   запаса до силуэта 15,4px на 320px, 16,6px на 371px, 102,7px на 641px при
   пороге гейта 12px; перелива нет ни на одной ширине.

   Десктоп (>=981) не задет: правило живёт внутри @media и под
   `body.page-id-26`. Полоса `/cases` в гейте hero-overlay-check.cjs —
   полоса 10; привязку к странице сторожит и статическая проверка (все
   селекторы этого раздела обязаны начинаться с `body.page-id-26`). */
@media (max-width: 640px) {
  body.page-id-26 .hero__card { display: grid; grid-template-columns: 1fr; padding: 0 0 24px; }
  body.page-id-26 .hero__text { display: contents; }
  body.page-id-26 .hero__bg { grid-row: 1; grid-column: 1; }
  body.page-id-26 .hero__pill {
    grid-row: 1;
    grid-column: 1;
    z-index: 3;
    align-self: start;
    justify-self: start;
    margin: 22px 12px 0 18px;
    width: fit-content;
    max-width: calc(100% - 36px);
  }
  body.page-id-26 .hero__text h1 {
    grid-row: 1;
    grid-column: 1;
    z-index: 2;
    align-self: start;
    margin: 71px 50% 0 18px;
    line-height: 1.18;
  }
  body.page-id-26 .hero__lead { grid-row: 2; }
  body.page-id-26 .hero__text .btn-row { grid-row: 3; }
  body.page-id-26 .hero__note,
  body.page-id-26 .hero__notes { grid-row: 4; }
}

/* 15а. Кегль заголовка — ступенькой, как у главной в 10б/10в. */
@media (min-width: 371px) and (max-width: 640px) {
  body.page-id-26 .hero__text h1 { font-size: 22px; }
}

@media (max-width: 370px) {
  body.page-id-26 .hero__text h1 { font-size: 18px; }
}

/* 15б. Планшетная полоса 641-980px — та же модель, что в 10е: полоса берётся
   целиком (раскладка <=980 одна и та же, разрез по 767/768 дал бы скачок). */
@media (min-width: 641px) and (max-width: 980px) {
  body.page-id-26 .hero__card { display: grid; grid-template-columns: 1fr; padding: 0 0 24px; }
  body.page-id-26 .hero__text { display: contents; }
  body.page-id-26 .hero__bg { grid-row: 1; grid-column: 1; }
  body.page-id-26 .hero__pill {
    grid-row: 1;
    grid-column: 1;
    z-index: 3;
    align-self: start;
    justify-self: start;
    margin: 22px 0 0 18px;
    width: fit-content;
    max-width: calc(100% - 36px);
  }
  body.page-id-26 .hero__text h1 {
    grid-row: 1;
    grid-column: 1;
    z-index: 2;
    align-self: start;
    margin: 71px 50% 0 18px;
    font-size: 34px;
  }
  body.page-id-26 .hero__lead { grid-row: 2; }
  body.page-id-26 .hero__text .btn-row { grid-row: 3; }
  body.page-id-26 .hero__note,
  body.page-id-26 .hero__notes { grid-row: 4; }
}

/* 16. Квизы (/kviz, /kviz/<слаг>) — задача rp-0610-wp-kviz-impl (06.10.2026),
   поправка «каталог» 11:33. База блока — в sections.css (префикс `kviz-`);
   сюда уходят только полосы, потому что этот слой подключается последним и
   решает при равной специфичности.

   Модель раскладки, как у hero: **границы правок ставим по границам раскладки,
   а не по «телефон/планшет»** — пока картинка вопроса стоит в своём столбце
   слева, раскладка одна и та же, и резать её на 767/768 незачем.

   Полосы: <=1200 (узкий столбец картинки), <=980 (одна колонка: картинка над
   вопросом), <=640 (кегли и отступы), <=400 (кнопки вопроса в столбик). */

@media (max-width: 1200px) {
  .kviz-band__inner { grid-template-columns: minmax(0, 1fr) 280px; column-gap: 48px; }
}

@media (max-width: 980px) {
  .kviz-band { padding: 72px 0 64px; }
  .kviz-band__inner { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .kviz-band__media { justify-self: start; }
  .kviz-band__media img { width: 260px; }

  .kviz-section { padding: 56px 0 72px; }
  .kviz-slide { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  /* Одноколоночная раскладка: картинка больше не тянется на две строки
     (иначе `grid-row: span 2` съел бы под неё место вопроса). */
  .kviz-slide__media { grid-row: auto; }
  .kviz-slide__media img { width: 180px; }
  .kviz-form-section { padding: 0 0 84px; }
}

@media (max-width: 640px) {
  .kviz-band { padding: 56px 0 48px; }
  .kviz-band__kicker { margin-bottom: 12px; font-size: 13px; }
  .kviz-band__descr { margin-top: 16px; }
  .kviz-band__media img { width: 220px; }

  .kviz-section { padding: 44px 0 56px; }
  .kviz__progress { margin-bottom: 28px; }
  .kviz-q__title { font-size: 20px; gap: 10px; }
  .kviz-q__num { width: 28px; height: 28px; font-size: 14px; }
  .kviz-q__opts { margin-top: 22px; gap: 10px; }
  .kviz-opt { padding: 14px 16px; gap: 12px; }
  .kviz-opt__text { font-size: 16px; }
  .kviz-slide__media img { width: 148px; }

  .kviz-result__media img { width: 168px; margin-bottom: 22px; }
  .kviz-result__text { margin-top: 20px; font-size: 17px; }
  .kviz-result__todo { margin-top: 26px; font-size: 17px; }
  .kviz-result__recs li { font-size: 16px; }
  .kviz-result__lead { margin-top: 26px; font-size: 16px; }
  .kviz-result__phone { margin-top: 16px; font-size: 15px; }

  .kviz-form__body { margin-top: 26px; gap: 18px; }
  .kviz-form-section { padding: 0 0 64px; }

  /* Каталог квизов: одна колонка. Трек `minmax(320px, 1fr)` из sections.css
     на 320px шире контейнера (280px) и дал бы горизонтальный перелив,
     поэтому здесь он снят явно — правило то же, что и на широких широтах,
     меняется только минимальная ширина карточки. */
  .kviz-hub { padding: 48px 0 64px; }
  .kviz-hub__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .kviz-card__link { padding: 20px 22px 24px; }
  .kviz-card__title { font-size: 20px; }
}

@media (max-width: 400px) {
  /* Заголовок хаба «Квизы Бухгалтерия360» переливало на 320px (+38:
     слово «Бухгалтерия360» в Unbounded 600 при базовом кегле clamp(32…52)
     занимает 342px, а колонка контейнера на 320px — 288px; перенести слово
     некуда, `overflow-wrap` по умолчанию не рвёт слово). Нашли гейтом
     gate-kviz.cjs (проверка перелива хаба), а не глазами.
     Уступка — кегль, а не разрыв слова: при 26px то же слово 280px, то есть
     в колонке остаётся 8px запаса; «Бухгалтерия3|60» на бренде недопустимо.
     Полоса — по границе «узкого» блока (≤400), а не по 320: на 375px слово
     (342) влезало в колонку (343) с запасом в 1px — та же ломкость, только
     незамеченная, и держать её незачем. `overflow-wrap` здесь намеренно не
     ставим: он бы прятал такой перелив от гейта, а не лечил его. */
  .kviz-band--hub .kviz-band__title { font-size: 26px; }

  /* Две кнопки в строку на 320px делят ширину до 120px каждая — подписи
     «Назад» и «Показать результат» в неё не влезают. Ставим их столбиком:
     «Далее» сверху (к ней ведёт весь ход теста), «Назад» под ней. */
  .kviz-nav { flex-direction: column-reverse; gap: 10px; }
  .kviz-nav__back { margin-right: 0; }
  .kviz-nav .btn { width: 100%; white-space: normal; }
  .kviz-result__cta { width: 100%; white-space: normal; }
}