/* mobile.css — единый мобильный слой aveasy.ru (ревизия 09.09.2026, решения Игоря на Чекпоинте 1).
   Подключается в head-партиале ПОСЛЕ site.css; build.py версионирует ссылку (?v=md5) как у site.css.

   ПРАВИЛА СЛОЯ (соблюдать всем, кто сюда пишет):
   1. Только медиазапросы max-width: основной брейкпоинт ≤759px (там же, где включается липкая панель
      и выключается кнопка шапки), точечный ≤380px для 320-px устройств, ≤959px — только для порядка
      шагов «Как мы работаем» и планшетных сеток. Правил без @media здесь НЕТ: десктоп ≥960 не двигается.
   2. Каждый селектор начинается с `html ` — это +1 к специфичности, чтобы слой побеждал инлайн-<style>
      секций index.html, которые в каскаде стоят ПОЗЖЕ head. Без этого правило слоя молча проигрывает.
   3. Не переписывать существующие правила site.css/инлайн-стилей — только переопределять здесь.
      Контент/тексты/href/alt/aria/цели Метрики не трогаем; скрывать на мобильном — можно (display:none).
   4. Каждая группа правил — с комментарием: id находки из MOBILE-AUDIT-2026-09.md и что она чинит.
   5. Чек-лист хрома при правке шапки/меню/панели/баннера: не вводить overflow:hidden/clip на html/body
      (ломает sticky-шапку, на iOS не блокирует свайп); пересчитать --avz-cc-h/--avz-sticky-h и отступ
      подвала; z-index: баннер 99970 × панель 9999 × меню 490 (внутри шапки 500) × попап 99980;
      reveal-порог секций на 667px; safe-area.
   Проверка: python site-live/build.py → превью :8794 → scripts/site_shots.py + scripts/site_diff.py
   (десктоп pixel-diff ≤0,1 %) + scripts/site_goals.py (набор целей = базе). */

/* ═══════════════════════════════════════════════════════════════════════════
   БЛОК P1 — «первый экран и липкий хром» (09.09.2026, решения Игоря 1а/3а/3б/4б/4в)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 759px) {

  /* ── nav-07: шапка 64 px вместо 84 ──────────────────────────────────────────
     84 px на 667-пиксельном экране — 13 % высоты под один логотип и бургер.
     Переменную читают min-height шапки, высота/отступ меню-оверлея и
     scroll-margin-top якорей — все три едут за ней согласованно. */
  html:root { --avz-header-h: 64px; }
  /* Логотип-дубль и крестик оверлея позиционированы абсолютом от верха экрана —
     их пересчитываем вручную под новую высоту (было 30/20 при шапке 84). */
  html.avz-nav-open .avz-header__nav::before { top: 20px; }
  html .avz-header__nav-close { top: 10px; }

  /* ── nav-04/05/x03 + nav-07: липкая панель 56 px, всегда видна ───────────────
     Автоскрытие при скролле снято в JS (footer.html). Здесь — высота: было 69 px
     (padding 10 + кнопка 43), стало 56 (padding 6 + кнопка 44 = минимальная цель
     нажатия по WCAG 2.5.8). Кнопка Telegram 44×44 — раньше 46×43. */
  html .avz-stickycta {
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
  }
  html .avz-stickycta-main { padding: 0 10px; min-height: 44px; font-size: 15px; }
  html .avz-stickycta-tg { width: 44px; min-height: 44px; }
  /* фолбэк до первого замера syncBar (подвал читает переменную в padding-bottom) */
  html:root { --avz-sticky-h: 56px; }

  /* ── спека §4: экранная клавиатура ──────────────────────────────────────────
     Пока в фокусе поле ввода, панель и cookie-баннер прижаты клавиатурой прямо
     поверх этого поля (на iOS position:fixed не знает про visual viewport).
     Класс ставит скрипт панели (footer.html) по focusin/focusout + visualViewport. */
  html.avz-kb .avz-stickycta,
  html.avz-kb #avz-cc { display: none; }

  /* ── nav-12 / nav-x04: cookie-баннер как продолжение панели ──────────────────
     Скруглённый угол и своя тень читались как второй самостоятельный слой поверх
     панели (решение 3б — один визуальный контейнер). Кнопка «Хорошо» была 34 px
     высотой — ниже минимальной цели нажатия. */
  html #avz-cc {
    border-radius: 0; box-shadow: none;
    border-top: 1px solid var(--avz-border); border-bottom: 0;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
  }
  html .avz-cc__btn { min-height: 44px; }
  /* nav-02: под открытым меню-оверлеем баннер не нужен (панель уже скрыта в site.css) */
  html.avz-nav-open #avz-cc { display: none; }

  /* ── hero-01/03/x01/04/07/x02: первый экран ────────────────────────────────
     Критерий: кнопка «Получить бесплатный аудит» целиком видна без скролла при
     первом визите. Жёсткий <br> в h1 (перенос под десктопную ширину) на 375 px
     добавлял лишнюю строку; отступы hero рассчитаны на десктоп. Тексты, цифры
     и порядок элементов не меняем — только типографика и отступы.
     Решение 4б/4в: карточка «206 ₽» с подсказкой на мобильном скрыта (дублирует
     ту же цифру в блоке hero-stats ниже) — она стоила ~120 px первого экрана. */
  html .hero { padding: 20px 0 24px; }
  html .hero-grid { gap: 24px; }
  html .hero h1 { font-size: clamp(29px, 8.4vw, 34px); line-height: 1.08; }
  /* ⚠️ <br> в h1 НЕ скрываем, хотя решение 4в это предполагало. Между </span> и <br>
     в разметке нет пробела, и display:none склеивает «Авито» и «под» в «Авитопод» —
     не только визуально (зазор 0 px), но и в тексте заголовка: innerText, скринридер и
     семантический регресс site_diff.py видят одно слово. Вернуть пробел одним CSS нельзя
     (margin на .hl чинит вид, но не текст), а разметку index.html править запрещено.
     Замер показывает, что скрывать его и незачем: на 375 px заголовок 3 строки в обоих
     вариантах и низ CTA 380 px, на 320 px — 4 строки против 3, низ CTA 451 px при
     пороге 512. Критерий первого экрана выполняется и с живым <br>. */
  html .hero-badge { margin-bottom: 14px; padding: 6px 12px 6px 10px; }
  html .hero-badge span { font-size: 10.5px; letter-spacing: .06em; }
  html .hero-sub { font-size: 16px; line-height: 1.5; margin-top: 14px; }
  html .hero-cta { margin-top: 18px; gap: 10px; }
  html .hero-anchor { display: none; }
  html .scene { min-height: 0; margin-top: 8px; }

  /* ── hero-06: бегущая строка ниш обрывалась по краям экрана «на полуслове» ── */
  html .hero-marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }

  /* ── hero-08: 4 карточки-доказательства в колонку по ~160 px = 640 px скролла
     мимо однострочных чисел. Две колонки: числа («850 000+») в строку влезают. */
  html .hero-stats-wrap { padding: 28px 0 8px; }
  /* minmax(0,1fr), а не 1fr: числа стоят в nowrap, и обычный 1fr (= minmax(auto,1fr))
     раздувал колонку под самое длинное из них — на 320 px они выходили 145/131. */
  html .hero-stats-wrap .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  html .hero-stats-wrap .statc { padding: 16px 14px; }
  html .hero-stats-wrap .statc .num { font-size: 24px; white-space: nowrap; }
  html .hero-stats-wrap .statc .lbl { font-size: 12.5px; margin-top: 6px; }

  /* ── nav-06 / forms-01 / tech-03: 16 px в полях ввода ───────────────────────
     Шрифт <16px заставляет iOS Safari зумить страницу при фокусе (и обратно она
     сама не отъезжает). Padding прежний, поэтому поле подросло с 46 до 48 px —
     ровно до высоты кнопки «Отправить», цель нажатия только выиграла. */
  html .avz-pl-field input[type=text], html .avz-pl-field input[type=tel],
  html .avz-zvn-field input[type=text], html .avz-zvn-field input[type=tel],
  html .avz-field input[type=text], html .avz-field input[type=tel] { font-size: 16px; }
  /* Тап-цель галочки согласия: сам чекбокс 24×24 (визуально не трогаем), но строка
     целиком становится ≥44 px по высоте. Ссылки внутри подписи остаются своими
     целями — они лежат в <span>, у него собственный клик. */
  html .avz-pl-consent,
  html .avz-consent,
  html .avz-zvn-consent { min-height: 44px; display: flex; align-items: center; }
}

@media (max-width: 380px) {
  /* 320×568: запас первого экрана меньше на 99 px — ужимаем заголовок и отступы */
  html .hero { padding: 16px 0 20px; }
  html .hero h1 { font-size: 29px; }
  html .hero-sub { font-size: 15px; margin-top: 12px; }
  html .hero-cta { margin-top: 14px; }
  html .hero-badge { margin-bottom: 10px; }
  /* nav-15: на 568 px высоты последний пункт меню — кнопка «Оставить заявку» — уходил
     на 7 px за нижний край (меню скроллится, но целевое действие должно быть видно
     сразу). Снимаем по 3 px с вертикальных отступов пунктов: 8 пунктов × 6 px = 48 px. */
  html .avz-header__nav a { padding: 13px 0; }
  /* «850 000+» в nowrap не влезает в 110 px контента карточки при 24 px — ужимаем */
  html .hero-stats-wrap .statc .num { font-size: 21px; }
  html .hero-stats-wrap .statc { padding: 14px 10px; }
}

/* hero-06 / замечание Игоря 09.09 (iOS «Уменьшение движения»): при prefers-reduced-motion бегущая
   строка ниш стоит на месте и на телефоне видны только «Недвижимость» и «Строительство» — ложное
   впечатление о нишах. Без движения показываем все 9 ниш статичным списком в несколько строк:
   дубль-половина (элементы 10–18 нужны только для бесшовного цикла) скрыта, маска краёв снята. */
@media (max-width: 959px) and (prefers-reduced-motion: reduce) {
  html .hero-marquee { -webkit-mask-image: none; mask-image: none; }
  html .hero-marquee-track { width: auto; flex-wrap: wrap; justify-content: center; gap: 8px 18px; padding: 0 12px; animation: none; transform: none; }
  html .hero-marquee-item:nth-child(n+10) { display: none; }
  html .hero-marquee-item { font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   БЛОК P2 — «структура и компактность» (09.09.2026, решения Игоря 5а/5б/6)
   Цель блока: главная ≤21 экрана на 375×667 без переписывания контента —
   порядок шагов, карусели вместо колонок, кейсы аккордеоном, скрытие дублей.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── structure-02: порядок шагов «Как мы работаем» ──────────────────────────
   В DOM карточки лежат 1,2,3,6,5,4 — десктопная «змейка» (нижний ряд читается
   справа налево). При схлопывании сетки в 2 и 1 колонку змейка исчезает, а
   порядок остаётся вывернутым: пользователь читает 1,2,3,6,5,4. DOM не трогаем
   (десктоп ≥960 обязан остаться прежним) — правим только визуальный порядок. */
@media (max-width: 959px) {
  html .hw-s1 { order: 1; }
  html .hw-s2 { order: 2; }
  html .hw-s3 { order: 3; }
  html .hw-s4 { order: 4; }
  html .hw-s5 { order: 5; }
  html .hw-s6 { order: 6; }
}

@media (max-width: 759px) {
  /* ── structure-02 (вторая половина): уплотнение карточек шагов ─────────────
     1 728 px на шесть коротких абзацев. Режем внутренние отступы, зазор сетки
     и «водяной» номер; тексты и заголовки не трогаем. */
  html .hw-section { padding: 36px 16px 44px; }
  html .hw-head { margin-bottom: 26px; }
  html .hw-grid { gap: 10px; }
  html .hw-card { padding: 18px 18px 16px; min-height: 0; }
  html .hw-card-title { font-size: 20px; }
  html .hw-card-desc { font-size: 13.5px; line-height: 1.45; }
  html .hw-tline { margin-bottom: 10px; }
  html .hw-bg-n { font-size: 72px; bottom: -8px; }
  html .hw-step-tag { margin-bottom: 10px; padding: 5px 12px; }
}

@media (max-width: 759px) {
  /* ── structure-03 / structure-11: карусели вместо колонок (решение Игоря 5а) ──
     #kreativy — четыре одинаковые карточки по ~400 px в колонку (3,33 экрана),
     #tarify — три тарифа в колонку, 670 px между «Стартом» и «Масштабом» (сравнить
     невозможно). Обе секции переводим в горизонтальную snap-карусель по готовому
     паттерну отзывов (.avz-rv-track): порядок карточек в DOM прежний, меняется только
     раскладка на ≤759. Карточка 84 % ширины — край следующей виден и подсказывает,
     что список листается; отрицательные поля выводят прокрутку до края экрана
     (padding возвращает отступ первой карточке), scroll-padding держит снап на нём. */
  html .avz-cr-grid,
  html .avz-tf-grid {
    display: flex; flex-wrap: nowrap; align-items: stretch;
    grid-template-columns: none;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    gap: 12px; margin: 0 -18px; padding: 2px 18px 6px;
    scroll-padding-left: 18px; scrollbar-width: none;
  }
  html .avz-cr-grid::-webkit-scrollbar,
  html .avz-tf-grid::-webkit-scrollbar { display: none; }
  html .avz-cr-grid > *,
  html .avz-tf-grid > * { flex: 0 0 84%; scroll-snap-align: start; }
  /* Карточки правее края экрана в IntersectionObserver не попадают и остались бы
     прозрачными (.avz-reveal{opacity:0}) — внутри карусели раскрываем сразу. */
  html .avz-cr-grid .avz-reveal,
  html .avz-tf-grid .avz-reveal { opacity: 1 !important; transform: none !important; }
  /* Бейдж «Оптимальный» дублирует заголовок карточки, а на узкой карточке ещё и
     наезжает на него (structure-11). */
  html .avz-tf-badge { display: none; }
  html .avz-tf-card { padding: 22px 20px; }
  html .avz-cr-body { padding: 14px 16px 16px; }

  /* ── точки-индикаторы карусели (создаёт JS в index.html, только на ≤759) ──────
     Кнопка 44×44 — минимальная цель нажатия по WCAG 2.5.8; сама точка рисуется
     псевдоэлементом, поэтому визуально она остаётся маленькой. */
  html .avz-dots { display: flex; justify-content: center; align-items: center; gap: 0; margin-top: 2px; }
  html .avz-dots button {
    width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center; -webkit-appearance: none; appearance: none;
  }
  html .avz-dots button::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: rgba(21, 26, 51, .22); transition: background .2s ease, transform .2s ease;
  }
  html .avz-dots button[aria-current="true"]::before { background: #3B5BFF; transform: scale(1.4); }
}

@media (max-width: 759px) and (prefers-reduced-motion: reduce) {
  html .avz-dots button::before { transition: none; }
}

@media (max-width: 759px) {
  /* ── structure-04 / structure-x04: кейсы ниш под переключателем (решение 5б) ──
     Кнопку и класс скрытия ставит скрипт после секции #nishi (index.html), только
     на ≤759. Кнопка на всю ширину ряда: 44 px — минимальная цель нажатия. */
  html .avz-nc-toggle {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 44px; padding: 11px 16px; box-sizing: border-box;
    background: #fff; border: 1.5px solid rgba(59, 91, 255, .3);
    color: #3B5BFF; font-family: var(--avz-font-text); font-weight: 700; font-size: 14.5px;
    cursor: pointer; -webkit-appearance: none; appearance: none;
    clip-path: polygon(10px 0%, calc(100% - 10px) 0%, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0% calc(100% - 10px), 0% 10px);
  }
  html .avz-nc-toggle::after { content: "▾"; font-size: 12px; line-height: 1; }
  html .avz-nc-toggle[aria-expanded="true"]::after { content: "▴"; }
  html .avz-nc-casewrap.avz-nc-case-hidden { display: none; }
  /* уплотнение самой длинной секции: отступы карточек ниш и ряда */
  html .avz-nc-rows { gap: 14px; }
  html .avz-nc-row { gap: 10px; }
}

@media (max-width: 759px) {
  /* ── structure-05 / structure-17: секция услуг ──────────────────────────────
     .sv-card-stat слово в слово повторяет hero-stats, показанные 1 300 px назад
     («850 000+», «80+», «206 ₽»), и на мобильном это третий показ тех же чисел.
     Скрываем карточку целиком: тексты и цифры на странице не переписываются,
     на десктопе она на месте. Плюс 52 px пустоты после заголовка (structure-17). */
  html .sv-card-stat { display: none; }
  html .sv-head { margin-bottom: 26px; }
  html .sv-section { padding: 44px 16px 52px; }
  /* structure-10: 13 призывов к действию при постоянно висящей липкой панели —
     ряд-дубль под карточками услуг на мобильном лишний (inline style → !important). */
  html .sv-cta-row { display: none !important; }

  /* ── structure-08: воронка ──────────────────────────────────────────────────
     275 px декоративного SVG (aria-hidden, дублирует ридаут справа от него) и
     нарратив из пяти описаний, пересказывающий те же пять строк ридаута.
     Заголовки шагов (.avz-nt) и сами числа остаются — уходит только дубль. */
  html .avz-fwrap { display: none; }
  html .avz-visual { grid-template-columns: 1fr; }
  html .avz-nstep .avz-nd { display: none; }
  html .avz-nstep { padding: 9px 0; }

  /* ── structure-12: отзывы читаемыми ─────────────────────────────────────────
     Карточка была 164 px шириной — текст переписки ~7–8 px, доказательство
     нечитаемо; подпись обещала стрелки, а они с 619 px были скрыты вовсе.
     78 % ширины экрана (292 px на 375) + прокрутка до края + вернувшиеся стрелки
     44×44 внутри поля карусели. object-fit оставлен cover (см. отчёт): при contain
     картинка вписалась бы в 420 px по высоте и ужалась бы до 199 px по ширине —
     то есть ровно ту проблему, ради которой находка и заведена. */
  html .avz-rv-track { margin: 0 -18px; padding: 0 18px 4px; scroll-padding-left: 18px; }
  /* 78vw, а не 78%: проценты во flex-basis считаются от контент-бокса дорожки
     (375 − 36 px паддингов = 339) и давали 264 px вместо нужных ≥280. */
  html .avz-rv-card { flex: 0 0 78vw; min-width: 0; }
  html .avz-rv-shot { max-height: 420px; }
  html .avz-rv-nav { display: flex; }
  html .avz-rv-prev { left: 4px; }
  html .avz-rv-next { right: 4px; }
}

@media (max-width: 759px) {
  /* ── structure-09: контакты в формах — компактный ряд «иконка + подпись» ─────
     Три одинаковые формы на странице (#zvonok, #lead, попап) выводят один и тот
     же набор контактов трижды, каждый раз колонкой по 44–66 px на строку. На
     мобильном ужимаем блок до двух строк, НО подписи оставляем видимыми: голые
     иконки (правка P2) не читаются — номер телефона должен быть виден текстом.
     Раскладка ≤759: телефон на всю ширину первой строкой, Telegram и почта —
     двумя равными колонками второй. href и порядок ссылок не меняются. */
  html .avz-zvn-contacts { flex-wrap: wrap; gap: 8px; margin-top: 18px; }
  html .avz-zvn-contact {
    flex: 1 1 calc(50% - 4px); min-width: 0; justify-content: center;
    padding: 10px 8px; font-size: 12.5px; gap: 7px; white-space: nowrap;
  }
  html .avz-zvn-contact:first-child { flex-basis: 100%; font-size: 15px; gap: 9px; }
  html .avz-zvn-contact svg { width: 17px; height: 17px; }
  html .avz-zvn-contact:first-child svg { width: 19px; height: 19px; }
  /* #lead: одна колонка, но ряды ужаты (было 3 иконки без подписей) */
  html .avz-contact-list { grid-template-columns: 1fr; gap: 8px; margin-top: 18px; }
  html .avz-contact-row { gap: 11px; padding: 9px 12px 9px 14px; min-height: 50px; }
  html .avz-contact-row .avz-ic { width: 34px; height: 34px; }
  html .avz-contact-row .avz-ic svg { width: 17px; height: 17px; }
  html .avz-contact-row .avz-ck { font-size: 10.5px; }
  html .avz-contact-row .avz-cv { font-size: 14.5px; margin-top: 1px; }

  /* уплотнение колонок обеих форм */
  html .avz-zvn { padding: 34px 0; }
  html .avz-lead { padding: 34px 0; }
  html .avz-zvn-grid, html .avz-lead-grid { gap: 22px; }
  html .avz-zvn-card { padding: 22px 18px 20px; }
  html .avz-lead-card { padding: 22px 18px 20px; }
  html .avz-zvn-field, html .avz-field { margin-top: 11px; }
  html .avz-zvn-sla { margin-top: 18px; }

  /* forms-03: чипы канала связи в #lead были ~40 px — ниже минимальной цели
     нажатия, в отличие от таких же чипов в #zvonok и попапе */
  html .avz-msgr button { min-height: 44px; }

  /* forms-x01: CTA-ссылка блока креативов — 294×28 при min-height 44 у соседних CTA */
  html .avz-cr-link { min-height: 44px; box-sizing: border-box; padding: 9px 0 7px; }
}

/* ── nav-x05 / tech-01 / tech-02: цели нажатия шапки и подвала ────────────────
   Единственное исключение из правила «только ≤759/≤380/≤959» в этом слое: находки
   заданы для диапазона ≤900 (там прячется телефон шапки и включается бургер, там же
   .avz-btn_sm остаётся 40 px). Десктоп ≥960 правило не задевает. Визуальный размер
   логотипа и иконок не меняем там, где это возможно: у логотипа растёт только зона
   тапа (padding при выключенном сдвиге — шапка выше содержимого), кружки иконок
   Telegram/телефона/ВК подрастают с 38–40 до 44 px. */
@media (max-width: 900px) {
  html .avz-header__logo { min-height: 44px; padding: 10px 0; box-sizing: border-box; }
  html .avz-header__icon { width: 44px; height: 44px; }
  html .avz-footer__icon { width: 44px; height: 44px; }
  html .avz-header .avz-btn_sm { min-height: 44px; }
  /* ссылки колонок и правовой строки подвала были 23 и 19 px по высоте —
     добираем до 44 за счёт паддингов, зазор колонки при этом снимаем */
  html .avz-footer__col { gap: 0; }
  html .avz-footer__col a { display: flex; align-items: center; min-height: 44px; }
  html .avz-footer__legal-links a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 759px) {
  /* ── structure-04 / structure-17 (уплотнение, вторая половина) ───────────────
     Секции ниш и услуг оставались самыми длинными и после скрытия дублей и кейсов:
     это отступы, рассчитанные под десктопную ширину. Режем только паддинги и
     зазоры — тексты, порядок и число блоков не трогаем. */
  html .avz-nc { padding: 40px 0; }
  html .avz-nc-head { margin-bottom: 22px; }
  html .avz-nc-niche { padding: 16px 16px 18px; }
  html .avz-nc-nico { width: 42px; height: 42px; margin-bottom: 10px; }
  html .avz-nc-ntag { margin-top: 10px; }
  html .avz-nc-svc { padding: 18px 16px; gap: 14px; }
  html .avz-nc-svc-ico { width: 44px; height: 44px; }
  html .avz-nc-foot { margin-top: 22px; }
  html .sv-card { padding: 20px 18px 18px; }
  html .avz-cr { padding-top: 40px; padding-bottom: 40px; }
  html .avz-tf { padding-top: 40px; padding-bottom: 40px; }
  html .avz-rv { padding-top: 40px; padding-bottom: 40px; }
  html .avz-faq { padding-top: 40px; padding-bottom: 40px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   БЛОК P3 — внутренние страницы (09.09.2026, пункты 22–23 плана)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 759px) {

  /* ── inner-04 / inner-05: оглавление юр-документа ───────────────────────────
     /politik/ — 31 экран на 375 без единой точки входа. Оглавление собрано из
     существующих h2 (текст пунктов дословный, заголовки не менялись — им добавлены
     только id). Блок скрыт базовым правилом самой страницы (.avz-toc{display:none}),
     здесь включается только на мобильном: десктоп читает документ как читал.
     /sog/ оглавления не получил осознанно — там 4,4 экрана и НИ ОДНОГО h2:
     сочинять заголовки ради оглавления значило бы менять текст документа. */
  html .avz-toc {
    display: block; margin: 0 0 18px;
    background: var(--avz-surface); border: 1px solid rgba(255, 255, 255, .8);
    border-radius: var(--avz-radius); box-shadow: var(--avz-card-shadow);
    padding: 4px 16px 8px;
  }
  html .avz-toc > summary {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    min-height: 48px; box-sizing: border-box;
    font-family: var(--avz-font-head); font-weight: 700; font-size: 15px;
    color: var(--avz-ink); list-style: none;
  }
  html .avz-toc > summary::-webkit-details-marker { display: none; }
  html .avz-toc > summary::before {
    content: ""; width: 20px; height: 3px; border-radius: 3px;
    background: var(--avz-primary); flex: 0 0 auto;
  }
  html .avz-toc > summary::after {
    content: ""; margin-left: auto; width: 8px; height: 8px; flex: 0 0 auto;
    border-right: 2px solid var(--avz-ink-3); border-bottom: 2px solid var(--avz-ink-3);
    transform: rotate(45deg); transition: transform .18s ease;
  }
  html .avz-toc[open] > summary::after { transform: rotate(-135deg); }
  html .avz-toc ol { margin: 4px 0 0; padding: 0 0 0 0; list-style: none; }
  html .avz-toc li { margin: 0; }
  /* inner-05: пункт оглавления — цель нажатия не меньше 44 px по высоте */
  html .avz-toc a {
    display: flex; align-items: center; min-height: 44px; box-sizing: border-box;
    padding: 8px 0; font-size: 14.5px; line-height: 1.35;
    color: var(--avz-ink-2); text-decoration: none;
    border-bottom: 1px solid rgba(17, 24, 39, .07);
  }
  html .avz-toc li:last-child a { border-bottom: 0; }

  /* ── inner-x01 / inner-05: крошка «Главная» — цель нажатия ───────────────────
     Ссылка возврата на / уже есть на o-nas / keysy / politik / sog (и в статьях
     блога), но её кликабельная область 51×16 px. Новых ссылок не добавляем —
     добираем высоту существующей до 44 px. */
  html .avz-crumbs, html .blog-page .crumbs { display: flex; align-items: center; flex-wrap: wrap; }
  html .avz-crumbs a, html .blog-page .crumbs a {
    display: inline-flex; align-items: center; min-height: 44px;
  }

  /* ── inner-01: «Что дальше» на /404.html уходил под панель и cookie-баннер ───
     Замер 375×667 (первый визит): карточки 506–714 при панели с 504 и баннере с 560,
     то есть блок целиком под липким хромом. Поднимаем блок за счёт паддингов
     (верх 64→40, отступ блока 40→28: первая карточка встаёт выше панели) и
     добавляем нижний отступ на высоту панели, чтобы последняя строка не липла к ней. */
  html .avz-service__inner { padding: 40px 20px calc(var(--avz-sticky-h, 56px) + 28px); }
  html .avz-service__while { margin-top: 28px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   БЛОК P3 — полировка (09.09.2026, пункт 24 плана)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 759px) {

  /* ── structure-13: секция .avz-cta — 366 px ради предложения проскроллить ────
     Сразу за ней начинается #lead, куда эта кнопка и ведёт. Секцию не убираем
     (она источник цели по #lead), но ужимаем паддинги и типографику. */
  html .avz-cta { padding: 26px 0; }
  html .avz-cta-wrap { padding: 0 16px; }
  html .avz-cta-band { padding: 20px 18px 22px; gap: 14px; }
  html .avz-cta-h2 { font-size: 21px; margin-bottom: 8px; }
  html .avz-cta-p { font-size: 14px; line-height: 1.45; }
  html .avz-cta-btn { padding: 13px 22px; }

  /* ── structure-14: подвал разрежённой колонкой — 980 px (1,47 экрана) ───────
     site.css на ≤560 схлопывает .avz-footer__top в одну колонку; ставим обратно
     две (навигация + контакты), блок бренда остаётся на всю ширину. Цели нажатия
     ссылок подвала (44 px, правило ≤900 выше) не трогаем — только сетку и отступы. */
  html .avz-footer__top { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  html .avz-footer__brand { grid-column: 1 / -1; }
  html .avz-footer__col-title { margin-bottom: 6px; }
  html .avz-footer__inner { padding: 34px 20px 24px; }
  html .avz-footer__top { padding-bottom: 22px; }
  html .avz-footer__claim { margin: 12px 0 10px; }
  html .avz-footer__legal { padding-top: 18px; gap: 10px; }

  /* ── tech-07: два hero-орба 360 и 300 px с blur(46px) крутились бесконечно ───
     Гейт был только по prefers-reduced-motion. Ниже 600 px это два полноэкранных
     размытых слоя, которые композитор перерисовывает каждый кадр ради фонового
     градиента. Анимацию снимаем, размытие режем до 18 px: сама подложка —
     radial-gradient с прозрачностью с 70 %, край и без сильного blur мягкий. */
  html .hero .orb.o1, html .hero .orb.o2 { animation: none; }
}

@media (max-width: 600px) {
  html .hero .orb.o1, html .hero .orb.o2 { animation: none; filter: blur(18px); }
}

@media (max-width: 380px) {
  /* ── hero-badge на 320–380: «с 2018 года» переносилось так, что на второй
     строке оставалось одинокое «ГОДА». Сжимаем кегль и трекинг строки бейджа. */
  html .hero-badge { padding: 7px 13px 7px 10px; }
  html .hero-badge span:not(.dot) { display: block; text-wrap: balance; font-size: 9.8px; letter-spacing: .05em; }
}