/* ============================================================================
   ok-home.css — HOME-SHELL-V2 · СЛОЙ ПРЕДСТАВЛЕНИЯ КАСКАДА ГЛАВНОЙ
   ----------------------------------------------------------------------------
   ОБЩИЙ файл волн HC-08 … HC-13. Волны идут ПОСЛЕДОВАТЕЛЬНО и дописывают СВОЮ
   секцию в конец — правила чужих секций не трогаются.

   ═══ ОГЛАВЛЕНИЕ (порядок = порядок блоков на странице) ═══════════════════════
     [HERO]          HC-08 ✔  01 · первый экран (H1, выгоды, CTA, пруфы, заявка)
     [SITUATIONS]    HC-09 ·  02 · когда нужна замена
     [SERVICES]      HC-09 ·  03 · что мы делаем
     [PICKER-DARK]   HC-09 ·  04 · подберём стекло (тёмный баннер)
     [PODBOR]        HC-09 ·  05 · подбор по каталогу (страна→марка→модель)
     [SHOWCASE]      HC-10 ·  05а · популярные стёкла
     [TRANSPORT]     HC-10 ·  06 · для какого транспорта
     [BRANDS]        HC-10 ·  07 · марки автобусов (strip + лого)
     [NOCAT]         HC-10 ·  08 · не нашли стекло
     [PROCESS]       HC-11 ·  09 · как проходит замена
     [B2B]           HC-11 ·  11 · автопаркам
     [GUARANTEE]     HC-11 ·  12 · гарантия и документы
     [GEO]           HC-11 ·  13 · география выезда
     [CALC]          HC-12 ·  14 · калькулятор веса
     [CASES]         HC-12 ·  15 · примеры работ (strip)
     [FAQ]           HC-12 ·  17 · частые вопросы
     [PARTNERS]      HC-12 ·  17.1 · партнёры
     [CERTIFICATES]  HC-12 ·  17.2 · статусы и гарантии
     [ABOUT]         HC-13 ·  17.3 · о компании
     [REVIEWS]       HC-13 ·  17а · отзывы
     [NEWS]          HC-13 ·  17б · новости
     [BLOG]          HC-13 ·  17в · статьи
     [SEOTEXT]       HC-13 ·  18 · SEO-текст
     [FINAL-FORM]    HC-13 ·  19 · финальная форма
   Заготовки-якоря всех секций стоят ниже по файлу в этом же порядке.

   ═══ ПРАВИЛА ФАЙЛА (14_CSS_JS_ARCHITECTURE §16, соблюдать всем волнам) ═══════
     1. Скоуп. Каждое правило начинается с класса своего блока (.ok-hero…,
        .ok-situations… и т.д.). Глобальных селекторов в файле НЕТ — слой не
        протекает ни в шапку/футер, ни в FORBID-зоны (услуга, каталог).
     2. Цвет. Ноль литералов #hex: только токены --ok-* (assets/ok-tokens.css).
        Нужен промежуточный тон — собрать из токенов через color-mix() и
        подписать ΔE (приём HC-05, см. секцию [HERO] → [H.0]).
     3. !important не применяется. TT1 (twentytwentyone/style.css грузится
        ДВАЖДЫ — первым и последним) перебивается СПЕЦИФИЧНОСТЬЮ: где нужен
        перевес над `html body …`-правилами темы/okna-mobile — пишем такой же
        префикс `html body .ok-…`, а не рассчитываем на порядок enqueue.
     4. Брейкпоинты — КАНОН M1, новые значения запрещены: 1024 / 768 / 600 / 480.
        Все media-правила блока — В КОНЦЕ ЕГО ЖЕ секции, а не общей свалкой.
     5. Числа — из ЖИВОГО ЗАМЕРА мастер-файла, а не на глаз; замер подписывается
        в шапке секции.

   ЗАВИСИМОСТИ ENQUEUE: ok-tokens → ok-foundation → ok-layout → (ok-header,
   ok-footer) → ok-home. Слот уже заведён в functions.php за флагом
   okna_home_shell_v2(); handle — `okna-ok-home`, версия — filemtime.
   ============================================================================ */


/* ██████████████████████████████████████████████████████████████████████████████
   [HERO] · HC-08 · 01 «Герой» — первый экран Главной и ~1200 ГЕО-посадок
   ------------------------------------------------------------------------------
   Разметка: template-parts/home/blocks/hero.php + hero-form.php
   Эталон:   «02 Главная.dc.html» → data-screen-label="01 Герой" (десктоп)
             и первая <section> мобильного дерева (sc-if isMobile).

   ★ ЖИВОЙ ЗАМЕР (headless Chrome 150, --allow-file-access-from-files, file://)

   ДЕСКТОП vp1440 ─────────────────────────────────────────────────────────────
     секция ............. h 733.91 · bg #0b1f3f + hero-home-bg.webp center/cover
     затемнение ......... linear-gradient(100deg, rgba(10,18,34,.94) 0%,
                                          rgba(10,18,34,.82) 45%,
                                          rgba(10,18,34,.55) 100%)
     контейнер .......... max-width 1280 · padding 64px 32px 60px · margin 0 auto
     грид ............... minmax(0,1fr) 400px · gap 48 · align-items center
                          фактические колонки 768 / 400 · зазор 48
     бейдж .............. 13.5px/600 · lh 1.55 · #9fc0f5 · bg rgba(255,255,255,.07)
                          padding 12 16 · radius 6 · mb 22 · max-width 560
     H1 ................. 46px/800 · lh 1.12 · ls −.015em · #fff · mb 16 · balance
     подзаголовок ....... 17px/400 · lh 1.55 · #cfd6e2 · mb 22 · max-width 600
     выгоды (сетка) ..... grid 1fr 1fr · gap 12 · mb 26 · max-width 600
     выгода (ячейка) .... flex/center · bg rgba(255,255,255,.05) · 1px #363d4d
                          radius 8 · padding 14 18 · 15px/600 · #e6ecf7
     CTA-ряд ............ flex · gap 14 · wrap · mb 30
     CTA основная ....... h 48 · padding 0 28 · bg #e0223a · #fff · r8 · 16px/700
     CTA вторая ......... h 48 · padding 0 28 · bg #fff · #123d87 · 1px #dfe5ee
     пруфы .............. flex · gap 40 · wrap · border-top 1px rgba(255,255,255,.16)
                          padding-top 22 · max-width 600
     пруф число/подпись . 30px/800 #fff  ·  13.5px #9aa4b6  (зазор в колонке 2)
     карточка ........... w 400 · h 378.13 · bg #fff · r16 · padding 26 26 22
                          shadow 0 30px 70px rgba(5,12,26,.45)
     заголовок карточки . 20px/800 #1d2433 · mb 6      (тег <p> — H1 один на странице)
     подзаг. карточки ... 14px/400 · lh 1.5 · #526173 · mb 16
     лейбл поля ......... block · 13.5px/600 · #1d2433 · mb 6 · звёздочка #e0223a
     поле телефона ...... w 100% · h 48 · bg #f5f8fd · 1.5px #dfe5ee · r8
                          padding 0 14 · 16px #1d2433 · mb 12
                          focus: border #1c5bd6 · bg #fff
     согласие ........... flex/center · gap 8 · 13px #526173 · mb 14 · cursor pointer
                          чекбокс 15×15 · accent-color #1c5bd6 · ссылка #1c5bd6
     сабмит ............. w 100% · h 48 · bg #e0223a · #fff · r8 · 15.5px/700
     примечание ......... mt 14 · 12.5px · lh 1.55 · #8a94a6
     heroSent ........... карточка h 297 · колонка center · gap 10 · padding 22 0
                          кружок 52×52 · r999 · bg #eef9f1
                          галка 26px · stroke #1f9d55 · width 2.4 · «M4 12l5 5L20 6»
                          заголовок 17px/800 #1d2433 · текст 14px #526173 center

   МОБАЙЛ vp390 ───────────────────────────────────────────────────────────────
     затемнение ......... linear-gradient(180deg, rgba(10,18,34,.92), rgba(10,18,34,.86))
     контейнер .......... padding 26px 16px 28px · одна колонка
     бейдж .............. 12px/600 · lh 1.5 · padding 10 13 · mb 14
     H1 ................. 28px/800 · lh 1.16 · ls −.01em · mb 10
     подзаголовок ....... 15px/400 · lh 1.55 · mb 14
     выгоды ............. grid 1fr 1fr · gap 8 · mb 18 · ячейка padding 11 12 · 12.5px
     CTA основная ....... full-width · h 50 · mb 10
     CTA вторая ......... full-width · h 48 · 15px/700 · mb 20
     пруфы .............. flex · gap 24 · padding-top 16 · число 23px · подпись 12px
     ⚠ ФОРМЫ В МОБИЛЬНОМ ГЕРОЕ МАСТЕРА НЕТ (проверено: hasInput=false, hasForm=false):
       её роль там играет попап pickOpen, которого ещё нет (HC-09+). Выбросить
       карточку сейчас = потерять рабочую CF7-заявку на телефонах, что прямо
       запрещено 13_FORMS_INTEGRATION_SPEC. Поэтому карточка остаётся в потоке
       после пруфов — ровно там, куда её кладёт и текущий боевой сайт
       (glavnaya.css @1024 схлопывает грид в одну колонку). Отклонение аддитивное:
       ни один элемент мастера не пропал и не сместился.

   ⚠ КЕГЛЬ H1 НА МОБИЛКЕ ЗАДАЁТ НЕ ЭТОТ ФАЙЛ. okna-mobile.css объявляет
     `body h1{font-size:30px !important}` (≤768) и `28px !important` (≤480) —
     перебить это без !important нельзя, а !important в слое запрещён. Конфликта
     нет: на 390 действует ветка ≤480 и даёт РОВНО мастерские 28px. Интерлиньяж
     и трекинг задаются здесь (у них !important нет).

   ✔ ТОКЕН --ok-fs-h1. Долг HC-08 закрыт в HC-14: токен приведён к замеру мастера
     (38 → 46px), локальный дубль --okh-h1 снят — H1 берёт кегль прямо из токена.
   ████████████████████████████████████████████████████████████████████████████ */


/* ═══ [H.0] ЛОКАЛЬНАЯ ОН-ДАРК ПАЛИТРА — производные от --ok-* ════════════════
   Палитра 07_DESIGN_TOKEN_REGISTRY закрыта, а тёмный герой требует тонов,
   которых в ней нет. Новые #hex запрещены → вычисляем из утверждённых токенов
   (приём HC-05/ok-footer.css). Каждый токен объявлен ДВАЖДЫ: сперва простой
   var()-фолбэк, затем color-mix — браузер без color-mix отбрасывает второе
   объявление и остаётся на первом. ΔE76 ≤ 2.3 — порог различимости глазом. */
.ok-hero{
  /* ✔ ЗАЯВКА HC-08 ЗАКРЫТА В HC-14: оба цвета внесены в 07_DESIGN_TOKEN_REGISTRY
     и ok-tokens.css (--ok-hero-dark-b / --ok-hero-dark-a). Аппроксимации через
     color-mix сняты — эталон берётся напрямую, дублирующего тона больше нет. */
  --okh-plate:var(--ok-hero-dark-b);                                              /* #0b1f3f — плашка секции */
  --okh-shade:var(--ok-hero-dark-a);                                              /* #0a1222 — база затемнения */

  /* текст бейджа-интро · эталон #9fc0f5 (лучшее, что даёт закрытая палитра) */
  --okh-badge:var(--ok-border-outline);
  /* ★ §Б-5 (27.08): #a0bbee (blue 37%) не проходил контраст на плашке hero (КВ подтвердил).
     Поднято до светлее — blue 18% в эталонный --ok-border-outline (#cfd6e2, тот же цвет, что подзаголовок
     на тёмном). Композит-замер: было 6.95:1, стало ~9:1. Синий тинт сохранён, но читаемость выше. В палитре. */
  --okh-badge:var(--ok-border-outline);   /* = цвет подзаголовка (эталон читаемого на тёмном hero), контраст ~9:1 */

  /* подзаголовок на тёмном · эталон #cfd6e2 */
  --okh-sub:var(--ok-border-outline);
  --okh-sub:color-mix(in srgb, var(--ok-muted-seed) 31%, var(--ok-tint-blue));     /* ≈#cfd6e1 · ΔE 0.23 */

  /* рамка карточки-выгоды на тёмном · эталон #363d4d */
  --okh-line:var(--ok-text);
  --okh-line:color-mix(in srgb, var(--ok-text) 78%, var(--ok-muted-seed));         /* ≈#353d4c · ΔE 0.42 */

  /* текст карточки-выгоды · эталон #e6ecf7 */
  --okh-chip:var(--ok-tint-blue);
  --okh-chip:color-mix(in srgb, var(--ok-tint-blue) 74%, var(--ok-border-outline));/* ≈#e6ecf7 · ΔE 0.13 */

  /* подпись цифры-доказательства · эталон #9aa4b6 */
  --okh-muted:var(--ok-muted-seed);
  --okh-muted:color-mix(in srgb, var(--ok-muted-seed) 77%, var(--ok-border-outline)); /* ≈#9aa4b6 · ΔE 0.14 */

  /* фон кружка «отправлено» · эталон #eef9f1 */
  --okh-ok-bg:var(--ok-section-b);
  --okh-ok-bg:color-mix(in srgb, var(--ok-on-dark) 91%, var(--ok-success));        /* ≈#ebf6f0 · ΔE 1.24 */

  /* полупрозрачные подложки мастера — из белого токена, без литералов */
  --okh-glass:color-mix(in srgb, var(--ok-on-dark) 7%, transparent);   /* эталон rgba(255,255,255,.07) */
  --okh-glass-2:color-mix(in srgb, var(--ok-on-dark) 5%, transparent); /* эталон rgba(255,255,255,.05) */
  --okh-hair:color-mix(in srgb, var(--ok-on-dark) 16%, transparent);   /* эталон rgba(255,255,255,.16) */

  /* размеры, которых нет в глобальных токенах (замер мастера) */
  --okh-card-w:400px;     /* ширина колонки формы */
  --okh-col-gap:48px;     /* зазор колонок (общий --ok-gap-cols 44 — здесь мастер даёт 48) */
}


/* ═══ [H.1] ПЛАШКА СЕКЦИИ И ЗАТЕМНЕНИЕ ══════════════════════════════════════ */
/* `html body` (0,1,2) обязателен: гасит TT1-ограничители ширины И правило
   `.glavnaya-v4 > section{padding:32px 0}` (0,1,1) из glavnaya.css — иначе
   к мастерским 64/60 сверху и снизу приклеивается ещё по 32px. */
html body .ok-hero{
  position:relative;
  max-width:none;
  margin-inline:0;
  padding-block:0;
  background-color:var(--okh-plate);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  color:var(--ok-on-dark);
}

.ok-hero__shade{
  position:absolute;
  inset:0;
  pointer-events:none;
  /* фолбэк для браузеров без color-mix: сплошное затемнение той же плотности */
  background:var(--ok-dark);
  opacity:.88;
}
/* Канон-градиент мастера. Вынесен в @supports, иначе `opacity:1` применился бы
   и в браузере без color-mix — фолбэк-затемнение пропало бы, текст лёг на фото. */
@supports (background:color-mix(in srgb, red 50%, transparent)){
  .ok-hero__shade{
    background:linear-gradient(100deg,
      color-mix(in srgb, var(--okh-shade) 94%, transparent) 0%,
      color-mix(in srgb, var(--okh-shade) 82%, transparent) 45%,
      color-mix(in srgb, var(--okh-shade) 55%, transparent) 100%);
    opacity:1;
  }
}


/* ═══ [H.2] СЕТКА ═══════════════════════════════════════════════════════════ */
/* Контейнер даёт ширину 1280 и боковой padding (32/24/16) — ok-layout.css;
   здесь только вертикальный ритм и колонки. minmax(0,1fr) вместо 1fr: иначе
   длинное слово распирает грид и рождает горизонтальный overflow (06 §3 п.10). */
.ok-hero__grid{
  position:relative;                /* над затемнением */
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--okh-card-w);
  gap:var(--okh-col-gap);
  align-items:center;
  padding-block:64px 60px;
}

.ok-hero__main{ min-width:0; }      /* страховка от распирания колонки */


/* ═══ [H.3] ЛЕВАЯ КОЛОНКА ═══════════════════════════════════════════════════ */

/* ГЕО-крошки: печатаются внутри тёмного героя (inc/geo-pages.php). Своей вёрстки
   у них тут нет — только перекраска под тёмный фон. */
.ok-hero .okna-geo-crumbs{
  margin:0 0 16px;
  font-size:var(--ok-fs-micro);
  color:var(--okh-muted);
}
.ok-hero .okna-geo-crumbs a{ color:var(--okh-sub); }
.ok-hero .okna-geo-crumbs a:hover,
.ok-hero .okna-geo-crumbs a:focus-visible{ color:var(--ok-on-dark); }
.ok-hero .okna-geo-crumbs .sep{ margin:0 6px; opacity:.6; }

.ok-hero__badge{
  display:inline-block;
  max-width:560px;
  margin:0 0 22px;
  padding:12px 16px;
  border-radius:6px;
  background:var(--okh-glass);
  color:var(--okh-badge);
  font-size:13.5px;
  font-weight:var(--ok-fw-semibold);
  line-height:var(--ok-lh-body);
}

/* Двойной класс (0,2,0) — перевес над `.ok-scope h1{color:var(--ok-ink)}` (0,1,1)
   из ok-foundation.css и над TT1 `h1` (0,0,1). */
.ok-hero .ok-hero__h1{
  margin:0 0 16px;
  color:var(--ok-on-dark);
  font-size:var(--ok-fs-h1);      /* 46px — токен (HC-14 закрыл долг HC-08) */
  font-weight:var(--ok-fw-black);
  line-height:1.12;
  letter-spacing:-.015em;
  text-wrap:balance;
}

.ok-hero .ok-hero__sub{
  max-width:600px;
  margin:0 0 22px;
  color:var(--okh-sub);
  font-size:17px;
  font-weight:var(--ok-fw-regular);
  line-height:var(--ok-lh-body);
}

.ok-hero__benefits{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  max-width:600px;
  margin:0 0 26px;
  padding:0;
  list-style:none;
}
.ok-hero__benefit{
  display:flex;
  align-items:center;
  margin:0;
  padding:14px 18px;
  border:1px solid var(--okh-line);
  border-radius:var(--ok-radius-cta);
  background:var(--okh-glass-2);
  color:var(--okh-chip);
  font-size:15px;
  font-weight:var(--ok-fw-semibold);
  line-height:1.4;      /* замер: ячейка ровно 51px (21 контент + 28 pad + 2 border) */
}

.ok-hero__ctas{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:0 0 30px;
}
/* Префикс .ok-hero обязателен: иначе `.ok-scope a{color:var(--ok-blue)}` (0,1,1)
   из ok-foundation.css перекрасит текст кнопок. */
.ok-hero .ok-hero__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--ok-control-h);
  padding:0 28px;
  border-radius:var(--ok-radius-cta);
  font-size:var(--ok-fs-body);
  font-weight:var(--ok-fw-bold);
  text-decoration:none;
  transition:background-color .2s ease, color .2s ease, transform .12s ease;
}
.ok-hero .ok-hero__cta--primary{
  background:var(--ok-red);
  color:var(--ok-on-dark);
  border:0;
}
.ok-hero .ok-hero__cta--primary:hover,
.ok-hero .ok-hero__cta--primary:focus-visible{
  background:color-mix(in srgb, var(--ok-red) 86%, var(--ok-text));  /* эталон hover #c81a30 */
  color:var(--ok-on-dark);
}
.ok-hero .ok-hero__cta--ghost{
  background:var(--ok-section-a);
  color:var(--ok-ink);
  border:1px solid var(--ok-border-input);
}
.ok-hero .ok-hero__cta--ghost:hover,
.ok-hero .ok-hero__cta--ghost:focus-visible{
  background:var(--ok-tint-blue);
  color:var(--ok-ink);
}
.ok-hero .ok-hero__cta:active{ transform:translateY(1px); }

.ok-hero__proof{
  display:flex;
  flex-wrap:wrap;
  gap:40px;
  max-width:600px;
  padding-top:22px;
  border-top:1px solid var(--okh-hair);
}
.ok-hero__proof-item{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.ok-hero__proof-num{
  color:var(--ok-on-dark);
  font-size:30px;
  font-weight:var(--ok-fw-black);
  line-height:1.1;
}
.ok-hero__proof-label{
  color:var(--okh-muted);
  font-size:13.5px;
}


/* ═══ [H.4] КАРТОЧКА-ЗАЯВКА (#zayavka) + CF7 ════════════════════════════════ */
.ok-hero__card{
  position:relative;
  z-index:1;
  align-self:center;
  padding:26px 26px 22px;
  border-radius:var(--ok-radius-card);
  background:var(--ok-section-a);
  color:var(--ok-text);
  box-shadow:0 30px 70px color-mix(in srgb, var(--ok-dark) 45%, transparent);
}

/* ── D5/D6 · ОБЁРТКА ФОРМЫ (попап на мобилке) — БАЗА, десктоп-нейтральна ────────
   Десктоп (D6): обёртка прозрачна (display:contents) — карточка остаётся ВТОРЫМ
   столбцом грида ровно как раньше, оверлей и крестик скрыты. Мобильное поведение
   (форма из потока → попап по кнопке hero) — в [H.6] @768. Механика — обёртка ТОЙ
   ЖЕ CF7-формы 4646 (партиал hero-form.php), не второй механизм. */
.ok-hero__formwrap{ display:contents; }
.ok-hero__ov{ display:none; }
.ok-hero__card-x{ display:none; }
/* Заголовок формы — <p>, а не h-тег: на странице обязан быть РОВНО ОДИН H1. */
.ok-hero .ok-hero__card-title{
  margin:0 0 6px;
  color:var(--ok-text);
  font-size:20px;
  font-weight:var(--ok-fw-black);
  line-height:1.35;
}
.ok-hero .ok-hero__card-sub{
  margin:0 0 16px;
  color:var(--ok-text-2);
  font-size:14px;
  line-height:1.5;
}
.ok-hero .ok-hero__card-note{
  margin:0;
  color:var(--ok-text-muted);
  font-size:var(--ok-fs-micro);
  line-height:var(--ok-lh-body);
}

/* ── CF7 внутри карточки. Разметку даёт шаблон формы + глобальные фильтры
   inc/requests.php (скрытые поля, согласие 152-ФЗ, сабмит). Ни один селектор
   не выходит за .ok-hero__form — другие формы сайта не затрагиваются.
   ⚠ Согласие вставляется фильтром ВНУТРЬ `<p class="okna-hf-submit">`, а браузер
   при разборе закрывает внешний <p> перед вложенным — поэтому сабмит стилизуем
   по .wpcf7-submit НАПРЯМУЮ, не опираясь на родителя. */
.ok-hero__form .wpcf7{ margin:0; }
.ok-hero__form .wpcf7 .screen-reader-response{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
/* Абзацы формы. Обнуляем ПОИМЁННО, а не через `.wpcf7-form > p` (0,2,1): такой
   селектор перебил бы собственные правила вида `.ok-hero__form .okna-hf-consent`
   (0,2,0) и съел отступ примечания — проверено замером. */
.ok-hero__form .okna-cf7-row,
.ok-hero__form .okna-hf-submit{ margin:0; }

.ok-hero__form .okna-cf7-row label{
  display:block;
  margin:0 0 6px;
  color:var(--ok-text);
  font-size:var(--ok-fs-label);
  font-weight:var(--ok-fw-semibold);
  line-height:1.3;
}
.ok-hero__form .okna-cf7-row label br{ display:none; }
.ok-hero__form .okna-req{ color:var(--ok-red); }
.ok-hero__form .wpcf7-form-control-wrap{ display:block; }

/* ⚠ ТРИ КОНКУРЕНТА ЗА ФОН ПОЛЯ, поэтому селектор трёхклассовый (0,3,1):
     design.css:262  `.wpcf7 input[type=tel]…`            (0,2,1) — рамка/паддинг/54px
     design.css:267  `.wpcf7 input[type=tel]`             (0,2,1) — иконка-подложка
     design.css:1268 `.okna-cf7-row--phone .wpcf7-form-control.wpcf7-text` (0,3,0) — ЕЩЁ иконка
   Двухклассовая версия (0,2,1) последнего НЕ перебивала: иконка оставалась, а
   мой шорткат `background` сбрасывал ей repeat/position/size → телефончик
   размножался плиткой по всему полю (поймано на скрине 1440).
   В эталоне иконки в поле НЕТ (замер: padding 0 14, чистая подложка). */
.ok-hero .ok-hero__form input[type="tel"],
.ok-hero .ok-hero__form input[type="text"],
.ok-hero .ok-hero__form input[type="email"],
.ok-hero .ok-hero__form textarea{
  display:block;
  width:100%;
  height:var(--ok-control-h);
  /* design.css:288 держит на полях CF7 `min-height:54px` — без сброса поле
     остаётся 54px, а мастер даёт 48 (замер). Специфичность (0,2,1) перебивает. */
  min-height:var(--ok-control-h);
  margin:0 0 12px;
  padding:0 14px;
  border:var(--ok-input-border-w) solid var(--ok-border-input);
  border-radius:var(--ok-radius-cta);
  background:var(--ok-section-b);
  color:var(--ok-text);
  font-family:var(--ok-font);
  font-size:var(--ok-fs-body);   /* 16px — иначе iOS зумит поле (гайд §6) */
  line-height:normal;
}
.ok-hero .ok-hero__form input[type="tel"]:focus,
.ok-hero .ok-hero__form input[type="text"]:focus,
.ok-hero .ok-hero__form input[type="email"]:focus,
.ok-hero .ok-hero__form textarea:focus{
  outline:none;
  border-color:var(--ok-blue);
  background:var(--ok-section-a);
}
.ok-hero__form ::placeholder{ color:var(--ok-text-muted); opacity:1; }

/* ── Согласие 152-ФЗ (inc/requests.php). Чекбокс НЕ предотмечен — трогаем только вид.
   ★ КОНТРОЛ НЕ ПОДМЕНЯЕМ. На сайте чекбокс — КАСТОМНЫЙ компонент дизайн-системы
   (design.css:279-283): нативный input спрятан (position:absolute; opacity:0;
   width/height:0), а квадрат и галочку рисует `.wpcf7-list-item-label::before`.
   Вернуть нативному input размеры (как в мастере: 15×15 + accent-color) — значит
   получить ДВА контрола разом (замер: 30×26 вместо 15×15). Поэтому оставляем
   компонент сайта и подгоняем его геометрию под мастер: 15px, gap 8, по центру.
   ⚠ Остаточное отличие от мастера: рамка 2px и радиус 5px кастомного квадрата
   против нативного чекбокса эталона. Это общий контрол всех форм сайта —
   его унификация принадлежит дизайн-системе, а не блоку hero. */
.ok-hero__form .okna-cf7-acc{ margin:0 0 14px; }
.ok-hero__form .wpcf7-acceptance .wpcf7-list-item{ margin:0; }
.ok-hero .ok-hero__form .wpcf7-acceptance label{
  margin:0;
  font-weight:var(--ok-fw-regular);
  cursor:pointer;
}
.ok-hero .ok-hero__form .wpcf7-acceptance .wpcf7-list-item-label{
  align-items:center;
  gap:8px;
  color:var(--ok-text-2);
  font-size:13px;
  line-height:1.4;
}
/* flex-basis приходит шорткатом `flex:0 0 18px` — перебиваем тем же шорткатом. */
.ok-hero .ok-hero__form .wpcf7-acceptance .wpcf7-list-item-label::before{
  flex:0 0 15px;
  width:15px;
  height:15px;
  margin-top:0;
  border-color:var(--ok-border-outline);
}
/* Ссылка на политику. Подчёркивание снимаем ЯВНО: `.ok-scope a{text-decoration:none}`
   (0,1,1) проигрывает двум легаси-правилам — `.okna-cf7-acc a` (0,1,1, объявлено
   позже) и `.wpcf7 .wpcf7-acceptance a` (0,2,1). Трёхклассовый селектор (0,3,1)
   выигрывает у обоих спецификой, а не порядком. Эталон: ссылки без подчёркивания
   (мастер, глобальное `a{text-decoration:none}` + гайд §15). */
.ok-hero .ok-hero__form .wpcf7-acceptance a{
  color:var(--ok-blue);
  text-decoration:none;
}
.ok-hero .ok-hero__form .wpcf7-acceptance a:hover{ color:var(--ok-blue-hover); }

/* ⚠ РАДИУС САБМИТА ОТДАН ЛЕГАСИ. design.css:298 объявляет
   `.wpcf7 input[type=submit],.wpcf7-submit{border-radius:10px !important}` —
   мастер даёт 8px, но перебить !important можно только !important, а он в слое
   запрещён. Правка design.css вне границ HC-08 (FORBID) → заявка в HC-19.
   Остальные свойства оттуда (bg var(--red), color #fff, border none) совпадают
   с мастером, поэтому расхождение ровно одно и ровно в 2px. */
.ok-hero__form .wpcf7-submit{
  display:block;
  width:100%;
  height:var(--ok-control-h);
  padding:0 16px;
  border:0;
  border-radius:var(--ok-radius-cta);
  background:var(--ok-red);
  color:var(--ok-on-dark);
  font-family:var(--ok-font);
  font-size:15.5px;
  font-weight:var(--ok-fw-bold);
  cursor:pointer;
  transition:background-color .16s ease, transform .12s ease;
}
.ok-hero__form .wpcf7-submit:hover{ background:color-mix(in srgb, var(--ok-red) 86%, var(--ok-text)); }
.ok-hero__form .wpcf7-submit:active{ transform:translateY(1px); }
/* Клиентский гейт согласия (inc/requests.php:214-217) держит сабмит disabled,
   пока галочка не отмечена — состояние обязано читаться глазом. */
.ok-hero__form .wpcf7-submit:disabled{
  background:var(--ok-text-muted);
  cursor:not-allowed;
  transform:none;
}

/* Примечание под формой (текст живёт в самой CF7-форме). */
.ok-hero__form .okna-hf-consent{ margin:14px 0 0; }
.ok-hero__form .okna-hf-consent small{
  display:block;
  color:var(--ok-text-muted);
  font-size:12.5px;
  line-height:var(--ok-lh-body);
}
.ok-hero__form .okna-hf-consent a{ color:var(--ok-blue); }

/* Служебные сообщения CF7: валидация и ответ сервера. */
.ok-hero__form .wpcf7-not-valid-tip{
  margin:-8px 0 12px;
  color:var(--ok-red);
  font-size:var(--ok-fs-micro);
}
.ok-hero__form .wpcf7-response-output{
  margin:14px 0 0;
  padding:10px 14px;                 /* Волна 1: 10/12→10/14 к канону */
  border:1px solid var(--ok-border);
  border-radius:8px;                 /* Волна 1: --ok-radius-btn(4)→8 к канону блока-ответа */
  color:var(--ok-text-2);
  font-size:13px;
  line-height:1.45;
}
.ok-hero__form .wpcf7-spinner{ margin:8px auto 0; display:block; }


/* ═══ [H.5] СОСТОЯНИЯ heroNotSent → heroSent ════════════════════════════════
   Основной путь — БЕЗ JS: CF7 6.x при успехе сам ставит на <form> class="sent"
   и data-status="sent" (includes/js/index.js). Дублирующий класс `is-sent` на
   карточке ставит крохотный слушатель wpcf7mailsent в hero-form.php — он нужен
   только браузерам без :has(). */
.ok-hero__done{ display:none; }

.ok-hero__card.is-sent .ok-hero__form{ display:none; }
.ok-hero__card.is-sent .ok-hero__done{ display:flex; }

@supports selector(:has(*)){
  .ok-hero__card:has(.wpcf7-form.sent) .ok-hero__form{ display:none; }
  .ok-hero__card:has(.wpcf7-form.sent) .ok-hero__done{ display:flex; }
}

.ok-hero__done{
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:22px 0;
  text-align:center;
}
.ok-hero__done-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:var(--ok-radius-pill);
  background:var(--okh-ok-bg);
  color:var(--ok-success);
}
.ok-hero__done-icon svg{ display:block; }
/* lh 1.35 — замер эталона: заголовок 17px даёт строку 23px, текст 14px → 19px. */
.ok-hero__done-title{
  color:var(--ok-text);
  font-size:17px;
  font-weight:var(--ok-fw-black);
  line-height:1.35;
}
.ok-hero__done-text{
  color:var(--ok-text-2);
  font-size:14px;
  line-height:1.35;
}


/* ═══ [H.6] РЕСПОНСИВ ГЕРОЯ ═════════════════════════════════════════════════
   Реестр брейкпоинтов — канон M1: 1024 / 768 / 600 / 480. Герой использует
   первые три; на 480 своих значений у него нет (обоснование — в конце секции). */

/* ── LG 1024: одна колонка. Карточка уходит под текст — так же ведёт себя и
   текущий боевой сайт (glavnaya.css @1024), поэтому переход не новый. ─────── */
@media (max-width:1024px){
  .ok-hero__grid{
    grid-template-columns:minmax(0,1fr);
    gap:32px;
    padding-block:56px 52px;
  }
  .ok-hero .ok-hero__h1{ font-size:38px; }
  .ok-hero .ok-hero__sub{ font-size:16px; max-width:none; }
  .ok-hero__badge,
  .ok-hero__benefits,
  .ok-hero__proof{ max-width:none; }
  .ok-hero__proof{ gap:32px; }
}

/* ── MD 768: главный мобайл-рубеж. CTA во всю ширину (гайд §5/§6, тач 48+). ── */
@media (max-width:768px){
  .ok-hero__grid{
    gap:26px;
    padding-block:40px 40px;
  }
  .ok-hero__ctas{
    gap:10px;
    margin-bottom:22px;
  }
  .ok-hero .ok-hero__cta{
    width:100%;
    padding:0 18px;
  }
  .ok-hero .ok-hero__cta--primary{ height:var(--ok-control-h-mobile); }  /* эталон 50 */
  .ok-hero__proof{ gap:24px; }
  .ok-hero__proof-num{ font-size:26px; }

  /* ── D5 · ФОРМА-ПОПАП. В мастере мобильный герой формы в потоке НЕ содержит —
     её роль играет попап по первой кнопке. Обёртка убирается из потока (иначе
     контент героя обрезался), карточка раскрывается оверлеем. Работает только при
     .ok-hero--modalform (cta1 → #zayavka + форма есть); иначе карточка остаётся
     в потоке как прежде — фолбэк без потери формы. ─────────────────────────────── */
  .ok-hero--modalform .ok-hero__formwrap{ display:none; }                 /* закрыто: формы в потоке нет (D5) */
  .ok-hero--modalform.is-form-open .ok-hero__formwrap{
    display:flex;
    position:fixed;
    inset:0;
    z-index:var(--ok-z-modal);                                            /* 300 · гайд §11 */
    align-items:center;
    justify-content:center;
    padding:16px;
  }
  /* Грид держит собственный контекст наложения (z-index:1 в [H.2], чтобы лечь над
     затемнением). Он ЗАПИРАЕТ position:fixed попапа под sticky-шапку (z 100).
     Поднимаем контекст грида до модального уровня, только пока попап открыт —
     тогда оверлей кроет и шапку (как модалка мастера, гайд §11). Шапку не трогаем. */
  .ok-hero--modalform.is-form-open .ok-hero__grid{ z-index:var(--ok-z-modal); }
  .ok-hero--modalform.is-form-open .ok-hero__ov{
    display:block;
    position:absolute;
    inset:0;
    background:color-mix(in srgb, var(--ok-dark) 55%, transparent);       /* эталон rgba(10,15,26,.55) · гайд §11 */
  }
  .ok-hero--modalform.is-form-open .ok-hero__card{
    position:relative;
    z-index:1;
    width:min(440px, calc(100vw - 32px));                                 /* гайд §11 */
    max-height:calc(100vh - 32px);
    margin:0;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  /* Крестик — только в мобильном оверлее (в потоке карточки его нет). */
  .ok-hero--modalform .ok-hero__card-x{
    display:flex;
    position:absolute;
    top:12px;
    right:12px;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    padding:0;
    border:0;
    border-radius:var(--ok-radius-pill);
    background:var(--ok-section-b);
    color:var(--ok-ink);
    cursor:pointer;
    transition:background-color .18s ease, color .18s ease;
  }
  .ok-hero--modalform .ok-hero__card-x:hover,
  .ok-hero--modalform .ok-hero__card-x:focus-visible{ background:var(--ok-blue); color:var(--ok-on-dark); }
  .ok-hero--modalform .ok-hero__card-x svg{ display:block; }

  /* No-JS фолбэк: <a href="#zayavka"> ставит хэш → :target раскрывает попап.
     Отдельным правилом под @supports — :has() нельзя мешать с JS-путём в одном
     списке селекторов (браузер без :has() выкинул бы всё правило вместе с .is-form-open). */
  @supports selector(:has(*)){
    .ok-hero--modalform .ok-hero__grid:has(.ok-hero__card:target){ z-index:var(--ok-z-modal); }
    .ok-hero--modalform .ok-hero__formwrap:has(.ok-hero__card:target){
      display:flex; position:fixed; inset:0; z-index:var(--ok-z-modal);
      align-items:center; justify-content:center; padding:16px;
    }
    .ok-hero--modalform .ok-hero__formwrap:has(.ok-hero__card:target) .ok-hero__ov{
      display:block; position:absolute; inset:0;
      background:color-mix(in srgb, var(--ok-dark) 55%, transparent);
    }
    .ok-hero--modalform .ok-hero__card:target{
      position:relative; z-index:1; width:min(440px, calc(100vw - 32px));
      max-height:calc(100vh - 32px); margin:0; overflow:auto;
    }
  }
}

/* ── SM 600: значения мобильного мастера 1:1 (замер vp390). ───────────────── */
@media (max-width:600px){
  /* Мобильное затемнение мастера — ДРУГОЕ: вертикальное 180deg .92 → .86
     (десктопное 100deg .94/.82/.55 на узком экране высветляет правый край,
     а там как раз лежит текст). Фолбэк-плотность тоже поднимаем. */
  .ok-hero__shade{ opacity:.9; }
  @supports (background:color-mix(in srgb, red 50%, transparent)){
    .ok-hero__shade{
      background:linear-gradient(180deg,
        color-mix(in srgb, var(--okh-shade) 92%, transparent) 0%,
        color-mix(in srgb, var(--okh-shade) 86%, transparent) 100%);
      opacity:1;
    }
  }
  .ok-hero__grid{
    gap:22px;
    padding-block:26px 28px;
  }
  .ok-hero__badge{
    margin-bottom:14px;
    padding:10px 13px;
    font-size:12px;
    line-height:1.5;
  }
  /* Кегль H1 здесь НЕ задаём: его держит okna-mobile.css с !important (см. шапку
     секции) и его 30/28px совпадают с каноном. Задаём то, где конфликта нет. */
  .ok-hero .ok-hero__h1{
    margin-bottom:10px;
    line-height:1.16;
    letter-spacing:-.01em;
  }
  .ok-hero .ok-hero__sub{
    margin-bottom:14px;
    font-size:15px;
  }
  .ok-hero__benefits{
    gap:8px;
    margin-bottom:18px;
  }
  .ok-hero__benefit{
    padding:11px 12px;
    font-size:12.5px;
  }
  .ok-hero .ok-hero__cta--ghost{ font-size:15px; }
  .ok-hero__ctas{ margin-bottom:20px; }   /* замер: 10 между кнопками + 20 до пруфов */
  .ok-hero__proof{ padding-top:16px; }
  .ok-hero__proof-num{ font-size:23px; }
  .ok-hero__proof-label{ font-size:12px; }
  .ok-hero__card{ padding:22px 18px 18px; }
}

/* ── XS 480: собственных значений у героя нет.
   Проверено замером: мастерский ряд пруфов (3 колонки, gap 24) укладывается в
   375px без переноса, а на более узких экранах его переносит уже flex-wrap из
   [H.3]. Отдельное правило только развело бы блок с эталоном — не вводим. ── */

/* Уважение к prefers-reduced-motion (a11y, гайд §10). */
@media (prefers-reduced-motion:reduce){
  .ok-hero .ok-hero__cta,
  .ok-hero__form .wpcf7-submit{ transition:none; }
  .ok-hero .ok-hero__cta:active,
  .ok-hero__form .wpcf7-submit:active{ transform:none; }
}


/* ██████████████████████████████████████████████████████████████████████████████
   [КНОПКИ — HOVER/ACTIVE §5] · ОБЩИЙ КНОПОЧНЫЙ КАНОН ОБОЛОЧКИ (B1/B2)
   ------------------------------------------------------------------------------
   ЗОНА: ГОЛЫЙ канонический `.okna-btn` (+ `.secondary`) — единственный владелец
   его состояний в оболочке, чтобы волны (w1-w5) их не дублировали. Волны держат
   hover/active СВОИХ уникальных `.ok-*__btn`/`.okna-*__*` в своих файлах.
   НЕ здесь:
     · `.ok-cta` (кнопка шапки) — её hover/active в ok-header.css:583-584;
     · `.ok-hero__cta` (своя реакция героя) — в секции [H.3] выше;
     · композит `.okna-btn.okna-qp__go` (подбор) — за волной w1 (ok-home-w1.css).

   ГАЙД §5 + EXP_important.json (HC-19 — база сверки покой/hover/active):
     · СИНЯЯ залитая (CTA) — «своя реакция»: hover ЗАТЕМНЯЕТ до --ok-blue-hover
       (#1448aa), а НЕ инвертирует в белое, как легаси; active — базовый --ok-blue
       + вдавливание (эталон active #1c5bd6).
     · КОНТУРНАЯ (.secondary) — «инвертируется»: hover заливает синим/белый текст;
       active темнее (--ok-blue-hover) + вдавливание.

   СПЕЦИФИЧНОСТЬ (перебиваем ей, не порядком — правило файла №3). Чужой !important-
   канон design.css:164-211 = (0,4,1). Ставим префикс `body` → (0,4,2): перевес над
   design.css есть, а над ВОЛНОВЫМИ композитами (`html body .ok-podbor a.okna-btn
   .okna-qp__go` = (0,4,3)) — НЕТ: их кнопки остаются за волнами. Токены, 0 новых #hex.
   ████████████████████████████████████████████████████████████████████████████ */

/* Переход состояний. Перебивает design.css:155 (0,1,0) специфичностью (0,1,2), без !important. */
body a.okna-btn,
body button.okna-btn{
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .12s ease;
}

/* СИНЯЯ (CTA) · HOVER/FOCUS — затемнение до --ok-blue-hover (не инверсия темы). */
body a.okna-btn:not(.okna-btn--hero):not(.secondary):hover,
body button.okna-btn:not(.okna-btn--hero):not(.secondary):hover,
body a.okna-btn:not(.okna-btn--hero):not(.secondary):focus-visible,
body button.okna-btn:not(.okna-btn--hero):not(.secondary):focus-visible{
  background:var(--ok-blue-hover) !important;   /* против !important design.css:170-172 (инверсия в белое) */
  border-color:var(--ok-blue-hover) !important;
  color:var(--ok-on-dark) !important;
}
/* СИНЯЯ (CTA) · ACTIVE — базовый тон + вдавливание. */
body a.okna-btn:not(.okna-btn--hero):not(.secondary):active,
body button.okna-btn:not(.okna-btn--hero):not(.secondary):active{
  background:var(--ok-blue) !important;         /* против !important design.css:181-183 (ink) */
  border-color:var(--ok-blue) !important;
  color:var(--ok-on-dark) !important;
  transform:translateY(1px);
}

/* КОНТУРНАЯ (.secondary) · HOVER/FOCUS — инверсия-заливка синим. */
body a.okna-btn.secondary:hover,
body button.okna-btn.secondary:hover,
body a.okna-btn.secondary:focus-visible,
body button.okna-btn.secondary:focus-visible{
  background:var(--ok-blue) !important;         /* против !important design.css:200-201 */
  border-color:var(--ok-blue) !important;
  color:var(--ok-on-dark) !important;
}
/* КОНТУРНАЯ (.secondary) · ACTIVE — темнее + вдавливание. */
body a.okna-btn.secondary:active,
body button.okna-btn.secondary:active{
  background:var(--ok-blue-hover) !important;   /* против !important design.css:208-209 (ink) */
  border-color:var(--ok-blue-hover) !important;
  color:var(--ok-on-dark) !important;
  transform:translateY(1px);
}

@media (prefers-reduced-motion:reduce){
  body a.okna-btn,
  body button.okna-btn{ transition:none; }
  body .okna-btn:active{ transform:none; }
}


/* ██████████████████████████████████████████████████████████████████████████████
   НИЖЕ — ЗАГОТОВКИ СЕКЦИЙ ДЛЯ СЛЕДУЮЩИХ ВОЛН.
   Волна дописывает правила ВНУТРЬ своего якоря и, как в [HERO], оставляет
   в шапке секции таблицу живого замера мастера. Порядок якорей менять нельзя —
   он повторяет порядок блоков на странице.
   ████████████████████████████████████████████████████████████████████████████ */

/* ═══ [SITUATIONS] · HC-09 · 02 «Когда нужна замена» ════════════════════════ */

/* ═══ [SERVICES] · HC-09 · 03 «Что мы делаем» ══════════════════════════════ */

/* ═══ [PICKER-DARK] · HC-09 · 04 «Подберём стекло» ═════════════════════════ */

/* ═══ [PODBOR] · HC-09 · 05 «Подбор по каталогу» ═══════════════════════════ */

/* ═══ [SHOWCASE] · HC-10 · 05а «Популярные стёкла» ═════════════════════════ */

/* ═══ [TRANSPORT] · HC-10 · 06 «Для какого транспорта» ═════════════════════ */

/* ═══ [BRANDS] · HC-10 · 07 «Марки автобусов» (strip) ══════════════════════ */

/* ═══ [NOCAT] · HC-10 · 08 «Не нашли стекло» ═══════════════════════════════ */

/* ═══ [PROCESS] · HC-11 · 09 «Как проходит замена» ═════════════════════════ */

/* ═══ [B2B] · HC-11 · 11 «Автопаркам» ══════════════════════════════════════ */

/* ═══ [GUARANTEE] · HC-11 · 12 «Гарантия и документы» ══════════════════════ */

/* ═══ [GEO] · HC-11 · 13 «География выезда» ════════════════════════════════ */

/* ═══ [CALC] · HC-12 · 14 «Калькулятор веса» ═══════════════════════════════ */

/* ═══ [CASES] · HC-12 · 15 «Примеры работ» (strip) ═════════════════════════ */

/* ═══ [FAQ] · HC-12 · 17 «Частые вопросы» ══════════════════════════════════ */

/* ═══ [PARTNERS] · HC-12 · 17.1 «Наши партнёры» ════════════════════════════ */

/* ═══ [CERTIFICATES] · HC-12 · 17.2 «Статусы и гарантии» ═══════════════════ */

/* ═══ [ABOUT] · HC-13 · 17.3 «О компании» ══════════════════════════════════ */

/* ═══ [REVIEWS] · HC-13 · 17а «Отзывы» ═════════════════════════════════════ */

/* ═══ [NEWS] · HC-13 · 17б «Новости» ═══════════════════════════════════════ */

/* ═══ [BLOG] · HC-13 · 17в «Полезные статьи» ═══════════════════════════════ */

/* ═══ [SEOTEXT] · HC-13 · 18 «SEO-текст» ═══════════════════════════════════ */

/* ═══ [FINAL-FORM] · HC-13 · 19 «Финальная форма» ══════════════════════════ */