/* ============================================================================
   ok-home-w5.css — HOME-SHELL-V2 · ВОЛНА 5 (пакет HC-13)
   ----------------------------------------------------------------------------
   ФАЙЛ ОДНОЙ ВОЛНЫ. Волны 1-5 идут ПАРАЛЛЕЛЬНО, поэтому у каждой свой лист
   (решение оркестратора); слияние с ok-home.css — в HC-14/HC-16. Приёмы,
   структура секций и порядок разделов — те же, что в ok-home.css (HC-08).

   ═══ СОДЕРЖАНИЕ (порядок = порядок блоков на странице) ══════════════════════
     [W5.0]  ЛОКАЛЬНАЯ ПАЛИТРА ВОЛНЫ — тона, собранные из --ok-* через color-mix
     ★ [ABOUT] 17.3 «О компании» (тизер) — .ok-about ВЫНЕСЕН в assets/ok-about-teaser.css
       (SHARED-стили для Главной/ГЕО и страницы «О компании» /o-kompanii/: один файл
       на обе поверхности, а не две копии). Палитра .ok-about перенесена туда же.
     [REVIEWS]     17а  · «Отзывы клиентов»        — .ok-reviews (обёртка штатной разметки)
     [NEWS]        17б  · «Последние новости»      — .ok-news
     [BLOG]        17в  · «Полезные статьи»        — .ok-blog
     [SEOTEXT]     18   · «SEO-текст»              — .ok-seotext
     [FINAL-FORM]  19   · «Финальная форма»        — .ok-final (своя вёрстка, волна 3)
                                                     + .gv-final (фолбэк-скин старой)

   ═══ ПРАВИЛА ФАЙЛА (14_CSS_JS_ARCHITECTURE §16) ════════════════════════════
     1. Скоуп. Каждое правило начинается с класса своего блока (.ok-about…,
        .ok-reviews…, .gv-final…). Глобальных селекторов НЕТ — слой не протекает
        ни в шапку/футер, ни в FORBID-зоны (услуга, каталог).
     2. Цвет. Ноль литералов #hex: только токены --ok-* (assets/ok-tokens.css).
        Нужен промежуточный тон — собран из токенов через color-mix() с подписью ΔE.
     3. !important — не метод, а точечное лекарство ПРОТИВ ЧУЖОГО !important
        (design.css — ось заголовков 37px; .okna-btn.secondary). Каждый случай
        подписан причиной. Внутри своей разметки !important не применяется.
     4. Брейкпоинты — КАНОН M1: 1024 / 768 / 600 / 480. Новые значения запрещены.
        Media-правила блока — В КОНЦЕ ЕГО ЖЕ секции.
     5. Числа — из ЖИВОГО ЗАМЕРА мастер-файла «02 Главная.dc.html» (headless
        Chrome, --allow-file-access-from-files, file://, vp 1440 и 390), а не на глаз.

   ═══ ПОРЯДОК ENQUEUE — ГЛАВНАЯ ЛОВУШКА ЭТОЙ ВОЛНЫ ══════════════════════════
     ok-tokens → ok-foundation → ok-layout → ok-header → ok-footer → ok-home →
     ok-home-w1 … ok-home-w5,  и ТОЛЬКО ПОТОМ  glavnaya.css · single.css ·
     blog-list.css · blog-img.css · geo.css · twentytwentyone/style.css (2-й раз).
     Следствие: при РАВНОЙ специфичности выигрывает glavnaya.css, а не этот файл.
     Поэтому правила, целящие в СТАРЫЕ классы (.okna-reviews*, .okna-rev*,
     .okna-nrow*, .okna-bcard*, .gv-final*), пишутся с префиксом `html body`
     (+2 к элементам) или из-под скоупа-обёртки .ok-reviews (+1 к классам) —
     перевес берётся СПЕЦИФИЧНОСТЬЮ, а не порядком подключения (правило §16).

   ═══ ГДЕ ЧЬЯ РАЗМЕТКА ══════════════════════════════════════════════════════
     Своя (template-parts/home/blocks/*.php): about-teaser · news-home ·
     blog-home · seo-text.
     Чужая, НЕ ТРОГАЕМ (только стили):
       · отзывы — inc/reviews.php (запрет пакета: только что починен HC-15a);
         template-part лишь оборачивает вывод в .ok-reviews ради скоупа;
       · финальная форма — БЫЛО так же (только стили поверх .gv-final).
         ★ ВОЛНА 3 (21.07) сняла это ограничение: у блока появилась своя вёрстка
         template-parts/home/blocks/final-form.php (.ok-final), делегат за флагом
         стоит в blocks/final-form.php — прежняя ветка с починкой HC-15a осталась
         байт-в-байт и работает при снятом флаге. Скин .gv-final ниже сохранён
         как фолбэк-путь (если template-part удалить, блок вернётся к старой
         разметке и не поедет).
   ============================================================================ */


/* ═══ [W5.0] ЛОКАЛЬНАЯ ПАЛИТРА ВОЛНЫ ════════════════════════════════════════
   Палитра 07_DESIGN_TOKEN_REGISTRY закрыта, новые #hex запрещены. Мастер
   использует несколько тонов, которых в реестре нет, — вычисляем их из
   утверждённых токенов (приём HC-05/HC-08). Каждый токен объявлен ДВАЖДЫ:
   сперва простой var()-фолбэк, затем color-mix — браузер без color-mix
   отбрасывает второе объявление и остаётся на первом. ΔE76 ≤ ~2.5 — порог
   различимости глазом.                                                       */
.ok-reviews,
.ok-news,
.ok-blog,
.ok-seotext,
.ok-final,
.gv-final{
  /* густой navy заголовков карточки «О компании» · эталон #16294d (22,41,77)
     ink #123d87 светлее и синее, text #1d2433 темнее и серее → двухшаговый микс */
  --okw5-ink-deep:var(--ok-ink);
  --okw5-ink-deep:color-mix(in srgb, color-mix(in srgb, var(--ok-ink) 55%, var(--ok-text)) 75%, var(--ok-dark)); /* ≈#162b51 · ΔE 2.0 */

  /* мягкий серо-синий текст карточек мастера · эталон #5b6b7d (91,107,125) */
  --okw5-text-soft:var(--ok-text-2);
  --okw5-text-soft:color-mix(in srgb, var(--ok-text-2) 80%, var(--ok-muted-seed)); /* ≈#5d6b7d · ΔE 0.6 */

  /* глубокий фон под фото основателей · эталон #0b1f3f.
     ✔ HC-14: тон внесён в реестр как --ok-hero-dark-b, аппроксимация снята. */
  --okw5-navy:var(--ok-hero-dark-b);                                              /* #0b1f3f */

  /* подзаголовок на тёмной колонке финальной формы · эталон #cfd6e2 */
  --okw5-on-dark-sub:var(--ok-border-outline);
  --okw5-on-dark-sub:color-mix(in srgb, var(--ok-muted-seed) 31%, var(--ok-tint-blue)); /* ≈#cfd6e1 · ΔE 0.2 */

  /* текст галочек на тёмной колонке · эталон #e6ecf7 */
  --okw5-on-dark-chip:var(--ok-tint-blue);
  --okw5-on-dark-chip:color-mix(in srgb, var(--ok-tint-blue) 74%, var(--ok-border-outline)); /* =#e6ecf7 · ΔE 0.1 */

  /* hover красной кнопки · эталон #c81a30 */
  --okw5-red-hover:var(--ok-red);
  --okw5-red-hover:color-mix(in srgb, var(--ok-red) 88%, var(--ok-dark));         /* ≈#c8203a · ΔE 1.0 */

  /* ── HC-13 волна 3, блок 19 ────────────────────────────────────────────── */
  /* фон кружка «Заявка отправлена» · эталон #eef9f1 (рецепт --okh-ok-bg героя) */
  --okw5-ok-bg:var(--ok-section-b);
  --okw5-ok-bg:color-mix(in srgb, var(--ok-on-dark) 91%, var(--ok-success));       /* ≈#ebf6f0 · ΔE 1.2 */

  /* пунктир дропзоны · эталон #c7d3e8 (199,211,232) */
  --okw5-dash:var(--ok-border-outline);
  --okw5-dash:color-mix(in srgb, var(--ok-border-outline) 96%, var(--ok-blue));    /* ≈#c8d4e9 · ΔE 0.4 */

  /* фон дропзоны · эталон #fbfcfe (251,252,254) */
  --okw5-zone-bg:var(--ok-section-a);
  --okw5-zone-bg:color-mix(in srgb, var(--ok-on-dark) 60%, var(--ok-section-b));   /* =#fbfcfe · ΔE 0 */

  /* hover телефона на тёмной колонке · эталон #7fa6ef (127,166,239) */
  --okw5-phone-hover:var(--ok-blue);
  --okw5-phone-hover:color-mix(in srgb, var(--ok-on-dark) 44%, var(--ok-blue));    /* ≈#7fa5ef · ΔE 0.5 */

  /* ЗАМЕРЕННЫЕ размеры, которых нет в глобальных токенах */
  --okw5-h2:34px;             /* H2 секции, мастер (совпадает с --ok-fs-h2)      */
  --okw5-rule-w:44px;         /* красная черта под H2: 44×3                      */
  --okw5-rule-h:3px;
  --okw5-prose:820px;         /* ширина прозы SEO-текста (мастер, не 760)        */
  --okw5-seo-collapsed:420px; /* D2: высота свёрнутого SEO-текста (пол)          */
  --okw5-seo-expanded:4000px; /* D2: потолок раскрытия для transition max-height */
}




/* ██████████████████████████████████████████████████████████████████████████████
   [REVIEWS] · HC-13 · 17а «Отзывы клиентов»
   ------------------------------------------------------------------------------
   Разметка: inc/reviews.php (okna_reviews_auto_html) — НЕ ТРОГАЕМ (запрет пакета,
             блок только что починен HC-15a). template-parts/home/blocks/reviews.php
             оборачивает её в .ok-reviews ради скоупа.
   Эталон:   «02 Главная.dc.html» → data-screen-label="17а Отзывы" (десктоп)
             и «M20. Отзывы (карусель)» мобильного дерева.

   ★ ЖИВОЙ ЗАМЕР (headless Chrome, file://)

   ДЕСКТОП vp1440 ─────────────────────────────────────────────────────────────
     секция ............. h 1388.86 · bg #f5f8fd · padding 72px 0
     H2 ................. 34/800 · ls −.01em · #123d87 · черта 44×3 · pb 14 · mb 8
     подзаголовок ....... 16/400 · #526173 · mb 26 · БЕЗ левого отступа
     сводка ............. bg #fff · 1px #e8ecf2 · r16 · padding 22 · gap 14 · h 183
                          грид 220px + repeat(4,1fr) → 220 / 223.5×4 · align center
                          БЕЗ фонового рисунка и без тени
     рейтинг ............ 46/800 #123d87 · звёзды 18px ls 3 · «512 оценок» 13 #8a94a6
     плашка аспекта ..... 223.5×101 · bg #fff · 1px #e8ecf2 · r12 · padding 14 16
                          название 12.5 #526173 · процент 24/800 · «довольны» 11.5
     «На основе …» ...... 12.5 #8a94a6 · margin 10 0 26
     сетка карточек ..... repeat(2,1fr) · gap 16
     карточка ........... r16 · 1px #e8ecf2 · padding 20 22 · gap 10 · без тени
                          аватар 44 · имя 15/800 #123d87 · подпись 12 #8a94a6
                          звёзды 13 · текст 14/1.6 #526173 · источник 12.5/700 внизу
     «Показать ещё» ..... h48 · padding 0 26 · bg #fff · 1px #dfe5ee · r8 · 14.5/700
                          #1c5bd6 · по центру · mt 24

   МОБАЙЛ vp390 ───────────────────────────────────────────────────────────────
     секция ............. bg #f5f8fd · padding 44px 0 48px · H2 margin 0 16 16
     карточки ........... горизонтальная лента: gap 12 · snap x mandatory
                          карточка 280px · r16 · padding 18 · gap 10
                          аватар 38 · имя 13.5 · текст 13/1.55
     ★ ОТКЛОНЕНИЕ: у мастера лента выходит за край экрана (bleed −16). Мы ленту
       НЕ выпускаем за контейнер — осознанно: любой отрицательный margin на 375
       это кандидат в горизонтальный overflow, а он в приёмке = жёсткий провал
       (06 §3 п.10). Лента скроллится ВНУТРИ контейнера, вид отличается только
       отсутствием «подглядывания» за краем.
     ★ Сводка-баннер и кнопка «показать ещё» в мобильном мастере отсутствуют —
       но это ДАННЫЕ (агрегаты Яндекса) и рабочий контрол, терять нельзя:
       оставлены и сжаты (сводка в один столбец, аспекты 2×2).

   ⚠ ЧЕГО НЕ ТРОГАЕМ СОЗНАТЕЛЬНО:
     · `.okna-rev__stars span.is-on svg{fill:#f5b50a !important}` (glavnaya.css) —
       чужой !important. Эталон #f5a623 (--ok-star). Разница в оттенке янтаря
       ~15 единиц по G; бить чужой !important ради неё несоразмерно. ЗАЯВКА в отчёт.
     · логотип «Я» (#fc3f1d) — фирменный цвет Яндекса, в палитру сайта не входит
       и в неё не переводится.
   ████████████████████████████████████████████████████████████████████████████ */

/* Обёртка НЕ прямой потомок .glavnaya-v4 → `> section.gv-soft{background}` и
   `> section{padding:32px 0}` из glavnaya.css больше не действуют: фон и ритм
   задаём здесь целиком. */
html body .ok-reviews{ background:var(--ok-section-b); }
html body .ok-reviews .okna-reviews{
  padding-block:var(--ok-section-space-desktop);
  background:transparent;
}
/* Контейнер: старый .okna-wrap даёт 1280/pad40 (контент 1200) — приводим к
   мастеру 1280/pad32 (контент 1216). `html body` — перевес над
   `.glavnaya-v4 .okna-wrap` (0,2,0), который грузится позже. */
html body .ok-reviews .okna-wrap{
  width:100%;
  max-width:var(--ok-container-max);
  margin-inline:auto;
  padding-inline:var(--ok-container-pad);
  box-sizing:border-box;
}

/* — шапка — */
.ok-reviews .okna-reviews__head{ margin:0; }
/* ✔ ОСЬ 37px — ЗАЯВКА ЗАКРЫТА В HC-14: снятие отступа централизовано в
   ok-legacy-compat.css §[4] (`margin-left:0` на все заголовочные элементы
   .ok-scope), поэтому здесь остаётся только собственная отбивка блока —
   уже без !important. */
html body .ok-reviews .okna-section-title{
  margin:0 0 8px;
  padding-bottom:14px;
  font-size:var(--okw5-h2);
  font-weight:var(--ok-fw-black);
  line-height:var(--ok-lh-heading);
  letter-spacing:var(--ok-ls-h2);
  color:var(--ok-ink);
}
html body .ok-reviews .okna-section-title::after{
  width:var(--okw5-rule-w);
  height:var(--okw5-rule-h);
}
html body .ok-reviews .okna-reviews__subhead{
  margin:0 0 26px;                 /* ось 37px снимает ok-legacy-compat §[4] */
  max-width:none;
  font-size:var(--ok-fs-body);
  line-height:1.4;
  color:var(--ok-text-2);
}

/* — сводка-баннер — */
.ok-reviews .okna-reviews__summary{
  grid-template-columns:220px minmax(0,1fr);
  gap:14px;
  padding:22px;
  margin:0 0 10px;
  background:var(--ok-section-a);
  background-image:none;           /* мастер: без фонового рисунка */
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-card);
  box-shadow:none;
}
.ok-reviews .okna-reviews__rate-num{ font-size:46px; }
.ok-reviews .okna-reviews__rate-cnt{ font-size:13px; color:var(--ok-text-muted); }
.ok-reviews .okna-rev__stars--big{ gap:3px; margin:6px 0 4px; }
.ok-reviews .okna-rev__stars--big svg{ width:18px; height:18px; }
.ok-reviews .okna-reviews__source{ margin-top:10px; font-size:12px; color:var(--ok-text-2); }

.ok-reviews .okna-reviews__aspects{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.ok-reviews .okna-reviews__aspect{
  padding:14px 16px;
  background:var(--ok-section-a);
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-category);
  box-shadow:none;
}
/* иконки аспекта в мастере нет; поле — наше, не данные → уменьшаем, не удаляем */
.ok-reviews .okna-reviews__aspect-ic{ width:22px; height:22px; margin-bottom:6px; border-radius:6px; }
.ok-reviews .okna-reviews__aspect-ic svg{ width:14px; height:14px; }
.ok-reviews .okna-reviews__aspect-name{ min-height:0; margin-bottom:6px; font-size:var(--ok-fs-micro); color:var(--ok-text-2); }
.ok-reviews .okna-reviews__aspect-pct{ font-size:24px; }
.ok-reviews .okna-reviews__aspect-lbl{ font-size:11.5px; color:var(--ok-text-muted); }
.ok-reviews .okna-reviews__based{ margin:10px 0 26px; font-size:var(--ok-fs-micro); color:var(--ok-text-muted); }

/* — сетка карточек — */
.ok-reviews .okna-reviews__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.ok-reviews .okna-rev{
  gap:10px;
  padding:20px 22px;
  border-radius:var(--ok-radius-card);
  border:1px solid var(--ok-border);
  box-shadow:none;
}
.ok-reviews .okna-rev__top{ align-items:center; gap:11px; }
.ok-reviews .okna-rev__ava{ width:44px; height:44px; }
.ok-reviews .okna-rev__ava--ini{ font-size:15px; }
.ok-reviews .okna-rev__name{ font-size:15px; }
.ok-reviews .okna-rev__cap{ font-size:12px; margin:1px 0 0; }
.ok-reviews .okna-rev__stars svg{ width:13px; height:13px; }
.ok-reviews .okna-rev__text{ font-size:14px; line-height:1.6; color:var(--ok-text-2); }
.ok-reviews .okna-rev__src{ margin-top:auto; font-size:var(--ok-fs-micro); font-weight:var(--ok-fw-bold); color:var(--ok-text-2); }

/* — кнопка «Показать ещё отзывы» — */
.ok-reviews .okna-reviews__more{ margin-top:24px; }
/* !important ПРОТИВ ЧУЖОГО: design.css задаёт `.okna-btn.secondary{border:1px solid
   var(--blue)!important}` — у мастера рамка нейтральная #dfe5ee. */
html body .ok-reviews .okna-reviews__more .okna-btn{
  height:var(--ok-control-h);
  padding:0 26px;
  border-color:var(--ok-border-input) !important;
  border-radius:var(--ok-radius-cta) !important;
  font-size:14.5px;
  font-weight:var(--ok-fw-bold);
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
}
/* B1/B2 · отклик СВОЕЙ кнопки блока (не голого канон-.okna-btn — селектор скоуплен
   в .ok-reviews__more): наведение — лёгкий голубой тинт + navy текст, как у парных
   вторичных кнопок «Все новости»/«Перейти в блог»; нажатие — сдвиг на 1px. */
html body .ok-reviews .okna-reviews__more .okna-btn:hover{
  background:var(--ok-tint-blue);
  color:var(--ok-ink);
  border-color:var(--ok-tint-blue) !important;
}
html body .ok-reviews .okna-reviews__more .okna-btn:active{ transform:translateY(1px); }

/* ── РЕСПОНСИВ «Отзывы» (канон 1024/768/600/480) ─────────────────────────── */
@media (max-width:1024px){
  html body .ok-reviews .okna-wrap{ padding-inline:var(--ok-container-pad-tablet); }
  .ok-reviews .okna-reviews__summary{ grid-template-columns:minmax(0,1fr); gap:16px; }
  .ok-reviews .okna-reviews__aspects{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px){
  html body .ok-reviews .okna-reviews{ padding-block:var(--ok-section-space-tablet); }
  .ok-reviews .okna-reviews__grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:600px){
  html body .ok-reviews .okna-wrap{ padding-inline:var(--ok-container-pad-mobile); }
  html body .ok-reviews .okna-reviews{
    padding-block:var(--ok-section-space-mobile) var(--ok-section-last-pb-mobile);
  }
  .ok-reviews .okna-reviews__summary{ padding:16px; }
  .ok-reviews .okna-reviews__rate-num{ font-size:38px; }
  /* мастер M20: карточки — горизонтальная лента со snap. Bleed НЕ делаем (см. шапку). */
  .ok-reviews .okna-reviews__grid{
    display:flex;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:10px;
  }
  .ok-reviews .okna-reviews__grid::-webkit-scrollbar{ display:none; }
  .ok-reviews .okna-rev{
    flex:0 0 280px;
    max-width:280px;
    scroll-snap-align:start;
    padding:18px;
  }
  .ok-reviews .okna-rev__ava{ width:38px; height:38px; }
  .ok-reviews .okna-rev__ava--ini{ font-size:14px; }
  .ok-reviews .okna-rev__name{ font-size:13.5px; }
  .ok-reviews .okna-rev__text{ font-size:13px; line-height:1.55; }
}


/* ██████████████████████████████████████████████████████████████████████████████
   [NEWS] · HC-13 · 17б «Последние новости»
   ------------------------------------------------------------------------------
   Разметка: template-parts/home/blocks/news-home.php (оболочка)
             + штатная okna_news_row_html() (inc/home-blocks.php) для строк.
   Эталон:   data-screen-label="17б Новости" (десктоп) · «M21» (мобайл).

   ★ ЖИВОЙ ЗАМЕР (headless Chrome, file://)
   ДЕСКТОП vp1440 ─────────────────────────────────────────────────────────────
     секция ............. h 736.81 · bg #ffffff · padding 72px 0
     шапка .............. flex · space-between · align-items flex-start · gap 20
     H2 ................. 34/800 · ls −.01em · #123d87 · черта 44×3 · pb 14 · mb 10
     кнопка «Все …» ..... h48 · padding 0 22 · bg #fff · 1px #dfe5ee · r8
                          14/700 · #1c5bd6 · white-space nowrap
     подзаголовок ....... 16/400 · #526173 · mb 24
     строка ............. 1216×146.94 · bg #fff · 1px #e8ecf2 · r12 · padding 18 22 · mb 12
     мета ............... flex · gap 10 · mb 8 · дата 12.5/700 #8a94a6
                          рубрика — пилюля bg #eef3fc · #1c5bd6 · 11.5/700 · padding 3 10 · r999
     заголовок .......... 17/800 · lh 1.35 · #1c5bd6 · mb 6
     анонс .............. 14/1.5 · #526173 · mb 8
     «Читать новость →» . 13.5/700 · #1c5bd6
   МОБАЙЛ vp390 ───────────────────────────────────────────────────────────────
     секция ............. bg #fff · padding 44 16 48 · H2 23/800 mb 12
     строка ............. БЕЗ карточки: padding 11 0 · разделитель 1px #eef1f6
                          дата 11.5/700 #8a94a6 · заголовок 14/700 #1d2433 lh 1.4
     ★ анонс и «Читать новость →» в мобильном мастере не показываются — прячем
       их CSS-ом (в HTML остаются: индексируются и возвращаются на ≥600).
   ████████████████████████████████████████████████████████████████████████████ */

html body .ok-news{
  padding-block:var(--ok-section-space-desktop);
  background:var(--ok-section-a);
  max-width:none;
  margin-inline:0;
}
.ok-news__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}
.ok-news .ok-news__h2{
  margin:0 0 10px;
  padding-bottom:14px;
  font-size:var(--okw5-h2);
  font-weight:var(--ok-fw-black);
  line-height:var(--ok-lh-heading);
  letter-spacing:var(--ok-ls-h2);
  color:var(--ok-ink);
  background:linear-gradient(var(--ok-red),var(--ok-red)) left bottom/var(--okw5-rule-w) var(--okw5-rule-h) no-repeat;
}
html body .ok-news .ok-news__all{
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  height:var(--ok-control-h);
  padding:0 22px;
  background:var(--ok-section-a);
  border:1px solid var(--ok-border-input);
  border-radius:var(--ok-radius-cta);
  font-size:14px;
  font-weight:var(--ok-fw-bold);
  color:var(--ok-blue);
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
html body .ok-news .ok-news__all:hover{ background:var(--ok-tint-blue); color:var(--ok-ink); border-color:var(--ok-tint-blue); }
.ok-news__all:active{ transform:translateY(1px); }
.ok-news .ok-news__sub{
  margin:0 0 24px;
  max-width:none;
  font-size:var(--ok-fs-body);
  line-height:1.4;
  color:var(--ok-text-2);
}

/* Строка ленты (штатная разметка .okna-nrow из blog-list.css, специфичность (0,1,0)) */
.ok-news .okna-nrow{
  display:block;
  margin:0 0 12px;
  padding:18px 22px;
  background:var(--ok-section-a);
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-category);
  box-shadow:none;
  text-decoration:none;
  transition:border-color .2s ease;
}
.ok-news .okna-nrow:last-child{ margin-bottom:0; }
.ok-news .okna-nrow:hover{ border-color:var(--ok-blue); box-shadow:none; }
.ok-news .okna-nrow__meta{
  gap:10px;
  margin-bottom:8px;
  font-size:var(--ok-fs-micro);
  font-weight:var(--ok-fw-bold);
  color:var(--ok-text-muted);
}
.ok-news .okna-nrow__meta i{ display:none; }   /* мастер разделяет дату и рубрику зазором, не точкой */
.ok-news .okna-nrow__meta b{
  padding:3px 10px;
  background:var(--ok-tint-blue);
  border:0;
  border-radius:var(--ok-radius-pill);
  font-size:11.5px;
  font-weight:var(--ok-fw-bold);
  color:var(--ok-blue);
}
.ok-news .okna-nrow__title{
  display:block;
  margin-bottom:6px;
  font-size:17px;
  font-weight:var(--ok-fw-black);
  line-height:1.35;
  color:var(--ok-blue);
}
.ok-news .okna-nrow__excerpt{
  display:block;
  margin:0 0 8px;
  font-size:14px;
  line-height:1.5;
  color:var(--ok-text-2);
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}
.ok-news .okna-nrow__more{
  display:inline-block;
  margin:0;
  font-size:13.5px;
  font-weight:var(--ok-fw-bold);
  color:var(--ok-blue);
}

/* ── РЕСПОНСИВ «Новости» ─────────────────────────────────────────────────── */
@media (max-width:1024px){
  html body .ok-news{ padding-block:var(--ok-section-space-tablet); }
}
@media (max-width:768px){
  .ok-news .ok-news__h2{ background-size:44px 3px; }
  html body .ok-news .ok-news__all{ height:44px; padding:0 16px; font-size:13.5px; }
}
@media (max-width:600px){
  html body .ok-news{
    padding-block:var(--ok-section-space-mobile) var(--ok-section-last-pb-mobile);
  }
  /* Порядок мастера M21: H2 → подзаголовок → лента → кнопка. В DOM кнопка лежит
     внутри шапки (рядом с H2), поэтому шапку «растворяем» через display:contents
     и раскладываем элементы order-ом уже на контейнере секции. */
  .ok-news .ok-container{ display:flex; flex-direction:column; }
  .ok-news__head{ display:contents; }
  .ok-news .ok-news__h2{ order:1; margin-bottom:12px; }
  .ok-news .ok-news__sub{ order:2; margin-bottom:14px; font-size:14px; }
  .ok-news__list{ order:3; }
  /* мастер M21: компактный список без карточек */
  .ok-news .okna-nrow{
    margin:0;
    padding:11px 0;
    background:none;
    border:0;
    border-bottom:1px solid var(--ok-border);
    border-radius:0;
  }
  .ok-news .okna-nrow:last-child{ border-bottom:0; }
  .ok-news .okna-nrow__meta{ margin-bottom:2px; font-size:11.5px; }
  .ok-news .okna-nrow__meta b{ padding:2px 8px; font-size:11px; }
  .ok-news .okna-nrow__title{ margin:0; font-size:14px; font-weight:var(--ok-fw-bold); color:var(--ok-text); }
  .ok-news .okna-nrow__excerpt,
  .ok-news .okna-nrow__more{ display:none; }
  html body .ok-news .ok-news__all{ order:4; width:100%; justify-content:center; margin-top:14px; }
}


/* ██████████████████████████████████████████████████████████████████████████████
   [BLOG] · HC-13 · 17в «Полезные статьи»
   ------------------------------------------------------------------------------
   Разметка: template-parts/home/blocks/blog-home.php (оболочка + штатный трек
             .okna-nhome-track) + штатная okna_blog_card_html() (mu-plugins/okna-blog.php).
   Эталон:   data-screen-label="17в Полезные статьи" (десктоп) · «M21» (мобайл).

   ★ ЖИВОЙ ЗАМЕР (headless Chrome, file://)
   ДЕСКТОП vp1440 ─────────────────────────────────────────────────────────────
     секция ............. h 711.64 · bg #f5f8fd · padding 72px 0
     шапка/H2/кнопка .... как у новостей (кнопка 166.61×48)
     сетка .............. 3×393.328 · gap 18
     карточка ........... 393.33×451.64 · bg #fff · 1px #e8ecf2 · r16 · overflow hidden
                          hover: translateY(−4) + shadow 0 14 40 rgba(20,40,80,.10)
     обложка ............ 391.33×220.11 → aspect 16/9 (padding-bottom 56.25%)
     тело ............... padding 16 18 18 · колонка · flex 1
     пилюля ............. bg #eef3fc · #1c5bd6 · 11/800 UPPER · ls .05em · padding 4 10 · r999 · mb 10
     заголовок .......... 16.5/800 · lh 1.35 · #1c5bd6 · mb 8
     анонс .............. 13.5/1.5 · #526173 · mb 12
     мета ............... 12.5 · #8a94a6 · margin-top auto
   МОБАЙЛ vp390 ───────────────────────────────────────────────────────────────
     лента .............. gap 12 · snap x mandatory · карточка 250px
     обложка ............ h 150 (aspect 5/3) · тело padding 14 16 16
     пилюля 10.5/800 · заголовок 14.5/700 #1d2433 lh 1.4 · мета 12
     ★ bleed за край экрана мастера не повторяем (см. шапку [REVIEWS]).
   ████████████████████████████████████████████████████████████████████████████ */

html body .ok-blog{
  padding-block:var(--ok-section-space-desktop);
  background:var(--ok-section-b);
  max-width:none;
  margin-inline:0;
}
.ok-blog__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}
.ok-blog .ok-blog__h2{
  margin:0 0 10px;
  padding-bottom:14px;
  font-size:var(--okw5-h2);
  font-weight:var(--ok-fw-black);
  line-height:var(--ok-lh-heading);
  letter-spacing:var(--ok-ls-h2);
  color:var(--ok-ink);
  background:linear-gradient(var(--ok-red),var(--ok-red)) left bottom/var(--okw5-rule-w) var(--okw5-rule-h) no-repeat;
}
.ok-blog__act{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
html body .ok-blog .ok-blog__all{
  display:inline-flex;
  align-items:center;
  height:var(--ok-control-h);
  padding:0 22px;
  background:var(--ok-section-a);
  border:1px solid var(--ok-border-input);
  border-radius:var(--ok-radius-cta);
  font-size:14px;
  font-weight:var(--ok-fw-bold);
  color:var(--ok-blue);
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
html body .ok-blog .ok-blog__all:hover{ background:var(--ok-tint-blue); color:var(--ok-ink); border-color:var(--ok-tint-blue); }
.ok-blog__all:active{ transform:translateY(1px); }
.ok-blog .ok-blog__sub{
  margin:0 0 24px;
  max-width:none;
  font-size:var(--ok-fs-body);
  line-height:1.4;
  color:var(--ok-text-2);
}

/* Трек — штатный (.okna-nhome-track из blog-list.css, контракт related-scroll.js):
   при 3 карточках выглядит мастерской сеткой repeat(3,1fr), при большем числе
   становится лентой; ни одна карточка не пропадает. */
.ok-blog .okna-nhome-track{ --gap:var(--ok-gap-cards); padding-bottom:2px; }
.ok-blog__allm{ display:none; }

/* Карточка (штатная .okna-bcard; blog-list.css/blog-img.css — (0,1,0), мы (0,2,0)) */
.ok-blog .okna-bcard{
  background:var(--ok-section-a);
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-card);
  overflow:hidden;
  box-shadow:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.ok-blog .okna-bcard:hover{ transform:translateY(-4px); box-shadow:var(--ok-shadow-card-hover); }
.ok-blog .okna-bcard__img{ padding-bottom:56.25%; }         /* мастер 16/9 (в теме было 3/2) */
.ok-blog .okna-bcard__body{ gap:0; padding:16px 18px 18px; }
.ok-blog .okna-bcard__cat{
  margin-bottom:10px;
  padding:4px 10px;
  background:var(--ok-tint-blue);
  border-radius:var(--ok-radius-pill);
  font-size:11px;
  font-weight:var(--ok-fw-black);
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ok-blue);
}
.ok-blog .okna-bcard__title{
  margin-bottom:8px;
  font-size:16.5px;
  font-weight:var(--ok-fw-black);
  line-height:1.35;
  color:var(--ok-blue);
}
.ok-blog .okna-bcard__ex{
  margin-bottom:12px;
  font-size:var(--ok-fs-label);
  line-height:1.5;
  color:var(--ok-text-2);
}
.ok-blog .okna-bcard__meta{
  margin-top:auto;
  padding-top:0;
  font-size:var(--ok-fs-micro);
  color:var(--ok-text-muted);
}

/* ── РЕСПОНСИВ «Статьи» ──────────────────────────────────────────────────── */
@media (max-width:1024px){
  html body .ok-blog{ padding-block:var(--ok-section-space-tablet); }
}
@media (max-width:768px){
  .ok-blog .ok-blog__h2{ background-size:44px 3px; }
  html body .ok-blog .ok-blog__all{ height:44px; padding:0 16px; font-size:13.5px; }
}
@media (max-width:600px){
  html body .ok-blog{
    padding-block:var(--ok-section-space-mobile) var(--ok-section-last-pb-mobile);
  }
  .ok-blog__head{ display:block; }
  .ok-blog .ok-blog__h2{ margin-bottom:12px; }
  .ok-blog .ok-blog__sub{ margin-bottom:14px; font-size:14px; }
  .ok-blog__act{ display:none; }               /* стрелки/кнопка — под лентой (мастер) */
  .ok-blog .okna-nhome-track{ --gap:12px; }
  .ok-blog .okna-nhome-cell{ flex:0 0 250px; max-width:250px; }
  .ok-blog .okna-bcard__img{ padding-bottom:60%; }          /* мастер: 250×150 */
  .ok-blog .okna-bcard__body{ padding:14px 16px 16px; }
  .ok-blog .okna-bcard__cat{ margin-bottom:9px; padding:3px 9px; font-size:10.5px; letter-spacing:.04em; }
  .ok-blog .okna-bcard__title{ font-size:14.5px; font-weight:var(--ok-fw-bold); line-height:1.4; color:var(--ok-text); }
  .ok-blog .okna-bcard__ex{ display:none; }    /* мастер M21: в мобильной карточке анонса нет */
  .ok-blog .okna-bcard__meta{ font-size:12px; }
  .ok-blog__allm{ display:block; margin-top:16px; }
  html body .ok-blog .ok-blog__allm .ok-blog__all{ width:100%; justify-content:center; }
}

/* ★ §3.1 (14.08, мобильный макет 02): новости+статьи — ОДИН белый блок на мобильной (десктоп = две
   секции, там НЕ трогаем). Было: .ok-blog фон #f5f8fd (цветовой разрыв) + двойной паддинг стыка
   (низ новостей 48 + верх статей 44 = 92px) → читалось как два блока. Сводим к макету: статьи фон→белый
   + низ новостей →0 (стык = один внутренний зазор = верх .ok-blog). Гео зеркалит главную — правка общая. */
@media (max-width:768px){
  html body .ok-blog{ background:var(--ok-section-a,#ffffff); }
  html body .ok-news{ padding-bottom:0; }
}


/* ██████████████████████████████████████████████████████████████████████████████
   [SEOTEXT] · HC-13 · 18 «SEO-текст»
   ------------------------------------------------------------------------------
   Разметка: template-parts/home/blocks/seo-text.php
   Эталон:   data-screen-label="18 SEO-текст" (десктоп) · «M22» (мобайл).

   ★ ЖИВОЙ ЗАМЕР (headless Chrome, file://)
   ДЕСКТОП vp1440 ─────────────────────────────────────────────────────────────
     секция ............. h 1294.81 · bg #ffffff · padding 72px 0
     H2 ................. 34/800 · ls −.01em · #123d87 · черта 44×3 · pb 14 · mb 18
     проза .............. max-width 820 · 16/1.7 (27.2px) · #526173 · абзац mb 14
     H3 ................. 22/800 · #123d87 · margin 30 0 12 · НЕ ограничен 820
     ol ................. padding-left 24 · mb 20 · li mb 9 · маркер #123d87/800
     ul ................. padding-left 22 · mb 22 · li mb 9 · маркер #1c5bd6
     цитата ............. bg #f5f8fd · border-left 4px #e0223a · r 0 12 12 0
                          padding 18 24 · mb 24 · текст 17 курсив #1d2433
                          cite 14/700 #123d87 · margin-top 10
     таблица ............ обёртка max-w 820 · overflow-x auto · mb 20 · 15px
                          шапка bg #123d87 #fff · th 12 16 · td 11 16
                          зебра #f5f8fd · разделитель строк #e8ecf2
   МОБАЙЛ vp390 ───────────────────────────────────────────────────────────────
     секция ............. bg #f5f8fd · padding 44 16 48 · H2 23/800 lh1.3 mb 12
     проза 13.5/1.65 · H3 15/800 margin 18 0 8 · цитата padding 14 16
     таблица 12.5px min-width 300 (скролл ВНУТРИ обёртки, не страницы)

   ★ READ-MORE · СВЁРНУТО ПО УМОЛЧАНИЮ НА ВСЕХ ВЬЮПОРТАХ (D2, решение владельца):
     прежнее «десктоп открыт 1-в-1 с мастером» ОТМЕНЕНО живым проходом — текст
     свёрнут и на десктопе, и на мобилке; раскрытие по «Читать далее», плавно
     (transition max-height). Контрол печатается всегда, данные не теряются, JS
     не добавлен. Реализация — единым блоком в общих правилах секции (не в @media).

   ⚠ КЕГЛЬ H3 НА МОБИЛКЕ ЗАДАЁТ НЕ ЭТОТ ФАЙЛ: okna-mobile.css объявляет
     `body h3{font-size:19px !important}` (≤768). Мастер просит 15px. Это
     ОБЩЕСАЙТОВЫЙ мобильный канон трека MOBILE-M1; перебивать его локально ради
     одного блока — рассинхрон с соседями. Оставлено как есть, Δ 4px. ЗАЯВКА в отчёт.

   ★ HC-16 — ЗАЯВКА ЗАКРЫТА, КЕГЛЬ ПРИВЕДЁН К МАСТЕРУ (15px). ПОЧЕМУ ПЕРЕСМОТРЕНО:
     аргумент «рассинхрон с соседями» проверен и не подтвердился. Соседи этого H3 —
     не заголовки остального сайта, а типографика САМОЙ оболочки, а она вся снята с
     мастера: ok-legacy-compat §[6.6] фиксирует ТРИНАДЦАТЬ мест, где блок обязан
     перебить мобильный канон встречным `!important`, потому что мастер даёт другое
     значение (24/20/17/15.5/15/14/13.5 — среди них уже есть и 15). То есть 15px
     здесь не исключение из правила оболочки, а само правило; при 19px из общего
     ряда выбивался как раз этот блок. Внутри блока проза 13.5 — заголовок остаётся
     крупнее её и отбит весом 800, читаемость не страдает.
     ОБЩЕСАЙТОВЫЙ КАНОН MOBILE-M1 НЕ ТРОНУТ: правило скоупировано `.ok-seotext__body`,
     за пределами оболочки все H3 по-прежнему 19px.
   ████████████████████████████████████████████████████████████████████████████ */

html body .ok-seotext{
  padding-block:var(--ok-section-space-desktop);
  background:var(--ok-section-a);
  max-width:none;
  margin-inline:0;
}
.ok-seotext .ok-seotext__h2{
  margin:0 0 18px;
  padding-bottom:14px;
  font-size:var(--okw5-h2);
  font-weight:var(--ok-fw-black);
  line-height:var(--ok-lh-heading);
  letter-spacing:var(--ok-ls-h2);
  color:var(--ok-ink);
  background:linear-gradient(var(--ok-red),var(--ok-red)) left bottom/var(--okw5-rule-w) var(--okw5-rule-h) no-repeat;
}

/* Чекбокс-переключатель: скрыт визуально, но остаётся в фокусной цепочке. */
.ok-seotext__toggle{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  overflow:hidden;
  white-space:nowrap;
}

.ok-seotext__body{ position:relative; }
.ok-seotext__body > *{ max-width:var(--okw5-prose); }
.ok-seotext__body p{
  margin:0 0 14px;
  font-size:var(--ok-fs-body);
  line-height:var(--ok-lh-prose);
  color:var(--ok-text-2);
}
.ok-seotext__body p:last-child{ margin-bottom:0; }
.ok-seotext__body b,
.ok-seotext__body strong{ color:var(--ok-text); font-weight:var(--ok-fw-bold); }
.ok-seotext__body a{ color:var(--ok-blue); }
.ok-seotext__body h3{
  max-width:none;
  margin:30px 0 12px;
  font-size:var(--ok-fs-h3);
  font-weight:var(--ok-fw-black);
  line-height:1.25;
  color:var(--ok-ink);
}
.ok-seotext__body h4{
  max-width:none;
  margin:22px 0 10px;
  font-size:var(--ok-fs-h4);
  font-weight:var(--ok-fw-bold);
  color:var(--ok-ink);
}
.ok-seotext__body ul{ margin:0 0 22px; padding-left:22px; }
.ok-seotext__body ol{ margin:0 0 20px; padding-left:24px; }
.ok-seotext__body li{
  margin-bottom:9px;
  font-size:var(--ok-fs-body);
  line-height:1.6;
  color:var(--ok-text-2);
}
/* Мастер красит МАРКЕР, а не текст (в макете текст обёрнут в <span>; в ИИ-контенте
   такого span нет) — поэтому цвет вешаем на ::marker: вид совпадает при любом HTML. */
.ok-seotext__body ul > li::marker{ color:var(--ok-blue); }
.ok-seotext__body ol > li::marker{ color:var(--ok-ink); font-weight:var(--ok-fw-black); }

/* ★ TYPO-GUIDE 2026-08-02: главная переведена на гайд «05 Гайд по вёрстке» (раздел 7 «Текстовая типографика»):
   цитата — синий левый бар #1c5bd6, фон #f5f8fd, радиус только справа 0 10px 10px 0;
   контентная таблица — светлая шапка #eef3f9, th 800/#123d87, разделитель #d8e2f0, зебра #f5f8fd,
   1-й столбец 700/#123d87, рамка-карточка #e3e9f2 r14 + тень (единый стиль всех контентных таблиц, §17). */
.ok-seotext__body blockquote{
  margin:0 0 24px;
  padding:16px 22px;
  background:#f5f8fd;
  border:0;
  border-left:3px solid var(--ok-blue);
  border-radius:0 10px 10px 0;
}
.ok-seotext__body blockquote p{
  margin:0;
  font-size:16.5px;
  line-height:1.6;
  font-style:normal;
  color:var(--ok-text);
}
.ok-seotext__body blockquote cite{
  display:block;
  margin-top:10px;
  font-style:normal;
  font-size:13.5px;
  font-weight:700;
  color:var(--ok-text-2);
}
.ok-seotext__body blockquote strong{ color:var(--ok-ink); font-weight:var(--ok-fw-bold); }

/* Таблицы ИИ-текста: скролл ВНУТРИ обёртки — широкая таблица не толкает страницу
   (06 §3 п.10: горизонтального overflow быть не должно ни на одном вьюпорте). */
/* P-СЕО-ТАБЛ §0: тип-скоуп-копия обёртки (.ok-seotext .okna-tbl-scroll) СНЯТА — единый вид в design.css (глобально).
   Узкий кап 820 на home даёт .ok-seotext__body > * (max-width:var(--okw5-prose)) выше — спецификностью выше глобального max-width:100%, сохраняется. */
.ok-seotext__body table{
  width:100%;
  max-width:none;
  border-collapse:separate;
  border-spacing:0;
  font-size:14.5px;
  background:#fff;
  border:1px solid #e3e9f2;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(20,40,80,.05);
}
.ok-seotext__body thead tr{ background:#eef3f9; }
.ok-seotext__body th{
  padding:15px 18px;
  text-align:left;
  font-weight:800;
  color:var(--ok-ink);
  border-right:1px solid #dbe4f0;
  border-bottom:2px solid #d8e2f0;
}
.ok-seotext__body td{ padding:14px 18px; color:var(--ok-text-2); border-right:1px solid #eef1f6; vertical-align:top; line-height:1.55; }
.ok-seotext__body th:last-child, .ok-seotext__body td:last-child{ border-right:0; }
.ok-seotext__body tbody tr{ border-bottom:1px solid var(--ok-border); }
.ok-seotext__body tbody tr:nth-child(even){ background:#f5f8fd; }
.ok-seotext__body tbody tr:last-child{ border-bottom:0; }
.ok-seotext__body td:first-child{ color:var(--ok-ink); font-weight:700; }

/* ── READ-MORE · СВЁРНУТО ПО УМОЛЧАНИЮ НА ВСЕХ ВЬЮПОРТАХ (D2) ────────────────
   Решение владельца (живой проход): текст свёрнут и на десктопе тоже — прежнее
   «десктоп 1-в-1 с мастером» ОТМЕНЕНО. Раскрытие по «Читать далее», плавно.
   Механизм — чистый CSS (скрытый чекбокс #ok-seotext-toggle + label), своего JS
   пакет по-прежнему не добавляет.
   Плавность: max-height анимируется от свёрнутой высоты к заведомо большому
   потолку (--okw5-seo-expanded); реальная высота контента останавливает рост
   раньше — типовой приём read-more, интерполировать `none`/`auto` нельзя.
   Свёрнутая высота — ПОЛ: короткий гео-текст помещается целиком, кнопка на нём
   безобидна (клик ничего не сдвигает). id/классы прежние (ok-seotext__*) — на
   старых #okna-seo-toggle/.okna-seo-text висят чужие клипы style.css/glavnaya.css. */
.ok-seotext__body{
  max-height:var(--okw5-seo-collapsed);
  overflow:hidden;
  transition:max-height .45s ease;
}
.ok-seotext__body::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:64px;
  pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--ok-section-a));
}
.ok-seotext__toggle:checked ~ .ok-seotext__body{ max-height:var(--okw5-seo-expanded); }
.ok-seotext__toggle:checked ~ .ok-seotext__body::after{ content:none; }

.ok-seotext__btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:14px;
  min-height:44px;                 /* тач-минимум канона M1 */
  font-size:14.5px;
  font-weight:var(--ok-fw-bold);
  color:var(--ok-blue);
  cursor:pointer;
  user-select:none;
  transition:color .2s ease, transform .1s ease;
}
.ok-seotext__btn:hover{ color:var(--ok-blue-hover); }        /* B2: hover своей кнопки */
.ok-seotext__btn:active{ transform:translateY(1px); }        /* B2: active своей кнопки */
.ok-seotext__btn-less{ display:none; }
.ok-seotext__toggle:checked ~ .ok-seotext__btn .ok-seotext__btn-more{ display:none; }
.ok-seotext__toggle:checked ~ .ok-seotext__btn .ok-seotext__btn-less{ display:inline; }
.ok-seotext__toggle:focus-visible ~ .ok-seotext__btn{ outline:2px solid var(--ok-blue); outline-offset:2px; }

/* Уважаем системную настройку «меньше движения»: раскрытие без анимации высоты. */
@media (prefers-reduced-motion: reduce){
  .ok-seotext__body{ transition:none; }
  .ok-seotext__btn{ transition:color .2s ease; }
}

/* ── РЕСПОНСИВ «SEO-текст» ───────────────────────────────────────────────── */
@media (max-width:1024px){
  html body .ok-seotext{ padding-block:var(--ok-section-space-tablet); }
}
@media (max-width:768px){
  .ok-seotext .ok-seotext__h2{ margin-bottom:12px; padding-bottom:12px; background-size:44px 3px; line-height:1.3; }
  .ok-seotext__body p,
  .ok-seotext__body li{ font-size:var(--ok-fs-label); line-height:1.65; }
  /* Мастер (vp390): H3 15/800, margin 18 0 8. `!important` строго обязателен —
     конкурент okna-mobile.css:63 `body h3{font-size:19px !important}` (0,0,2), а
     важное объявление перебивается только важным. Специфичность держим низкой
     (0,2,1): её хватает против (0,0,2) и она не мешает уточнить кегль ниже. */
  .ok-seotext__body h3{
    margin:18px 0 8px;
    font-size:var(--ok-fs-h3-mobile) !important;   /* 15px — против okna-mobile.css:63 body h3{19px!important} */
  }
  .ok-seotext__body ul{ margin-bottom:16px; padding-left:19px; }
  .ok-seotext__body ol{ margin-bottom:16px; padding-left:20px; }
  .ok-seotext__body blockquote{ margin-bottom:16px; padding:14px 16px; border-radius:0 10px 10px 0; }
  .ok-seotext__body blockquote p{ font-size:14px; line-height:1.55; }
  .ok-seotext__body table{ font-size:var(--ok-fs-micro); min-width:300px; }
  .ok-seotext__body th{ padding:9px 12px; }
  .ok-seotext__body td{ padding:8px 12px; }

  /* Сворачивание вынесено в общие правила секции (D2: свёрнуто на ВСЕХ вьюпортах);
     на мобильных ширинах остаётся только типографика мастера M22 (выше). */
}
@media (max-width:600px){
  html body .ok-seotext{
    padding-block:var(--ok-section-space-mobile) var(--ok-section-last-pb-mobile);
    background:var(--ok-section-b);     /* мастер M22: мобильная секция на тинте */
  }
  .ok-seotext__body::after{ background:linear-gradient(to bottom, transparent, var(--ok-section-b)); }
  .ok-seotext__body blockquote{ background:var(--ok-section-a); }
}


/* ██████████████████████████████████████████████████████████████████████████████
   [FINAL-FORM] · HC-13 · 19 «Финальная форма» — ЧАСТЬ A: ФОЛБЭК-СКИН .gv-final
   ------------------------------------------------------------------------------
   ⚠ ЭТА ЧАСТЬ БОЛЬШЕ НЕ ОСНОВНАЯ. Волна 3 (21.07) дала блоку свою вёрстку
     .ok-final (template-parts/home/blocks/final-form.php) — её слой ниже,
     «ЧАСТЬ B». Правила .gv-final оставлены как страховка пути «template-part
     отсутствует → делегат не сработал → печатается старая разметка».
     Ниже — исходная записка волны 5, она объясняет, почему когда-то было так.

   ★★ РАЗМЕТКА НЕ ТРОГАЛАСЬ ВООБЩЕ. blocks/final-form.php — в запретном списке
      пакета: там живёт починка HC-15a, из-за которой на 1201 ГЕО-странице снова
      печатается настоящая CF7-форма (было — 4 серые заглушки, заявку отправить
      нельзя). Приводим блок к мастеру ИСКЛЮЧИТЕЛЬНО стилями. Это возможно,
      потому что структура старой разметки совпадает с мастером:
         .gv-final › .okna-wrap › .gv-box › (.gv-info тёмная | .gv-form белая)
      ⚠ И НЕ ДОЛЖНА МЕНЯТЬСЯ: id формы там берётся как
        `okna_filled('final_form_id') ? okna_get(...) : okna_get(..., okna_home_source_pid('finalform'))`
        и передаётся в шорткод СТРОКОЙ. В мете лежит `216b876` — это ХЭШ CF7
        (резолвится в форму 145 через okna_forms_resolve_final_id), а не мусор:
        приведение к (int) дало бы 216 и убило форму на всех страницах.

   Эталон: data-screen-label="19 Финальная форма" (десктоп) · «M23» (мобайл).

   ★ ЖИВОЙ ЗАМЕР (headless Chrome, file://)
   ДЕСКТОП vp1440 ─────────────────────────────────────────────────────────────
     секция ............. h 749 · bg #f5f8fd · padding 72px 0 84px
     бокс ............... 1216×593 · r16 · overflow hidden
                          shadow 0 20px 50px rgba(20,40,80,.10)
                          грид minmax(0,1fr) minmax(0,1.1fr) → 579.05 / 636.95
     левая колонка ...... bg #1d2330 · padding 40px 42px
     H2 ................. 29/800 · lh 1.25 · ls −.01em · #fff · черта 44×3 · pb 14 · mb 14
     лид ................ 15/1.6 · #cfd6e2 · mb 22
     галочки ............ колонка · gap 10 · mb 26 · текст 14.5 · #e6ecf7 · ✓ зелёная
     телефоны ........... 20/800 · #fff (первый mb 6)
     правая колонка ..... bg #fff · padding 36px 42px
     подпись над формой . 14 · #8a94a6 · mb 18
     лейбл .............. 13.5/700 · #1d2433 · mb 5
     поле ............... h48 · bg #f5f8fd · 1.5px #dfe5ee · r8 · padding 0 14 · 16px · mb 12
     согласие ........... 13 · #526173 · gap 8 · mb 14 · чекбокс 15×15
     сабмит ............. w100% · h54 · bg #e0223a · r10 · 16/700
   МОБАЙЛ vp390 ───────────────────────────────────────────────────────────────
     секция ............. padding 44 16 48 · колонки в столбик (уже даёт glavnaya @1024)
     тёмная часть ....... градиент 165° navy · H2 22/800 lh1.3 · лид 13.5 · галочки 13
     телефоны ........... 17/800 · по центру
     ⚠ Половинки уже ужимает glavnaya.css @600 (`.gv-final .gv-info,.gv-final
       .gv-form{padding:24px 18px}`) — не дублируем, только докручиваем мастер.

   ⚠ ВНУТРЕННОСТИ CF7 НЕ ПЕРЕКРАШИВАЕМ. Поля/иконки/дропзона/чекбокс согласия
     оформлены design.css и на замере уже совпадают с мастером по высоте и радиусу.
     Любая правка там — риск задеть ТУ ЖЕ форму на других страницах (она сквозная:
     шапка, каталог, модалка). Трогаем только оболочку блока.
   ████████████████████████████████████████████████████████████████████████████ */

/* `html body` (0,1,2) — перевес над `.glavnaya-v4 > section{padding:32px 0}` (0,1,1)
   и над `.gv-final{background:var(--blue-soft)}` (0,1,0) из glavnaya.css. */
html body .gv-final{
  padding-block:var(--ok-section-space-desktop) var(--ok-section-last-pb);
  background:var(--ok-section-b);
}
html body .gv-final .okna-wrap{
  width:100%;
  max-width:var(--ok-container-max);
  margin-inline:auto;
  padding-inline:var(--ok-container-pad);
  box-sizing:border-box;
}
html body .gv-final .gv-box{
  border-radius:var(--ok-radius-card);
  box-shadow:var(--ok-shadow-form);
}
html body .gv-final .gv-info{
  padding:40px 42px;
  background:var(--ok-text);        /* эталон #1d2330 · токен #1d2433 · ΔE 1.0 */
}
/* H2 тёмной колонки: glavnaya.css задаёт 30/800 и черту 52×3 через (0,2,1) —
   перебиваем (0,3,3), приводим к мастерским 29 и 44×3. */
html body .gv-final .gv-info h2{
  margin:0 0 14px;
  padding-bottom:14px;
  font-size:29px;
  line-height:1.25;
  letter-spacing:var(--ok-ls-h2);
}
html body .gv-final .gv-info h2::after{
  width:var(--okw5-rule-w);
  height:var(--okw5-rule-h);
}
html body .gv-final .gv-info p{
  margin:0 0 22px;
  font-size:15px;
  line-height:1.6;
  color:var(--okw5-on-dark-sub);
}
html body .gv-final .gv-info .li{
  gap:10px;
  margin-bottom:10px;
  font-size:var(--ok-fs-card);
  color:var(--okw5-on-dark-chip);
}
html body .gv-final .gv-info .ph{ font-size:20px; }
html body .gv-final .gv-form{ padding:36px 42px; }
html body .gv-final .gv-form-sub{
  margin:0 0 18px;
  font-size:14px;
  color:var(--ok-text-muted);
}

/* ── РЕСПОНСИВ «Финальная форма» ─────────────────────────────────────────── */
@media (max-width:1024px){
  html body .gv-final{ padding-block:var(--ok-section-space-tablet) var(--ok-section-space-tablet); }
  html body .gv-final .okna-wrap{ padding-inline:var(--ok-container-pad-tablet); }
  html body .gv-final .gv-info{ padding:32px 28px; }
  html body .gv-final .gv-form{ padding:28px 28px; }
}
@media (max-width:768px){
  html body .gv-final .gv-info h2{ font-size:25px; }
}
@media (max-width:600px){
  html body .gv-final{
    padding-block:var(--ok-section-space-mobile) var(--ok-section-last-pb-mobile);
  }
  html body .gv-final .okna-wrap{ padding-inline:var(--ok-container-pad-mobile); }
  /* мастер M23: тёмная часть — диагональный navy-градиент */
  html body .gv-final .gv-info{
    background:var(--okw5-navy);
    background:linear-gradient(165deg, var(--okw5-ink-deep) 0%, var(--okw5-navy) 100%);
  }
  html body .gv-final .gv-info h2{ font-size:22px; line-height:1.3; margin-bottom:10px; }
  html body .gv-final .gv-info p{ margin-bottom:16px; font-size:var(--ok-fs-label); line-height:1.55; }
  html body .gv-final .gv-info .li{ gap:9px; margin-bottom:7px; font-size:13px; }
  html body .gv-final .gv-info .ph{ font-size:17px; }
}


/* ██████████████████████████████████████████████████████████████████████████████
   [FINAL-FORM] · HC-13 · 19 «Финальная форма» — ЧАСТЬ B: ВЁРСТКА ВОЛНЫ 3
   ------------------------------------------------------------------------------
   Разметка: template-parts/home/blocks/final-form.php  →  .ok-final
   Эталон:   «02 Главная.dc.html»
             десктоп — data-screen-label="19 Финальная форма" (стр. 1181-1228)
             мобилка — ветка <sc-if isMobile> «M23. Финальная форма» (стр. 1958-1988)

   ★ ЧИСЛА — ИЗ ИНЛАЙНОВЫХ СТИЛЕЙ МАСТЕРА (в .dc.html они и есть источник правды)
   ДЕСКТОП ────────────────────────────────────────────────────────────────────
     секция ............ bg #f5f8fd · padding 72px 0 84px
     контейнер ......... max 1280 · padding 0 32 (= .ok-container)
     бокс .............. grid minmax(0,1fr) minmax(0,1.1fr) · r16 · overflow hidden
                         shadow 0 20px 50px rgba(20,40,80,.10)
     тёмная колонка .... bg #1d2330 · padding 40px 42px
     H2 ................ 29/800 · lh 1.25 · ls -.01em · #fff · черта 44x3 · pb 14 · mb 14
     лид ............... 15/1.6 · #cfd6e2 · mb 22
     галочки ........... колонка · gap 10 · mb 26 · 14.5 · #e6ecf7 · галка #3fd07a
     телефоны .......... 20/800 · #fff · gap 6 · hover #7fa6ef
     белая колонка ..... bg #fff · padding 36px 42px
     подпись над формой  14 · #8a94a6 · mb 18
     лейбл ............. 13.5/700 · #1d2433 · mb 5
     поле .............. h48 · bg #f5f8fd · 1.5px #dfe5ee · r8 · pad 0 14 · 16px · mb 12
                         focus: border #1c5bd6 + bg #fff
     дропзона .......... 1.5px dashed #c7d3e8 · r10 · bg #fbfcfe · pad 18 16 · mb 14
                         текст 13.5 #526173 · «нажмите» #1c5bd6/700 · хинт 12 #8a94a6
     согласие .......... 13 · #526173 · gap 8 · mb 14
     сабмит ............ w100% · h54 · bg #e0223a · r10 · 16/700 · active +1px
     успех ............. кружок 60 r999 bg #eef9f1 · галка 30 #1f9d55 sw2.4
                         заголовок 19/800 · текст 14.5 #526173 · max-w 320 · gap 12
   МОБАЙЛ (M23) ───────────────────────────────────────────────────────────────
     секция ............ linear-gradient(165deg,#16233f,#0b1f3f) · padding 44 16 48
     H2 ................ 22/800 · lh 1.3 · mb 10 · БЕЗ красной черты
     лид ............... 13.5/1.55 · mb 16 · галочки gap 7 · mb 18 · 13px · gap 9
     карточка формы .... bg #fff · r16 · padding 18 16
     поля .............. h48 · 1.5px #dfe5ee · r10 · 16px · mb 10
     порядок полей ..... Имя, Телефон*, Марка (в CF7 порядок десктопный)
     дропзона .......... НЕТ (узел скрыт, поля и лимит 5 остаются в DOM)
     сабмит ............ w100% · h50 · r4 · 15.5/700 · «Получить расчёт»
     примечание ........ 11.5 · #8a94a6 · lh 1.5 · по центру · mt 10 · ПОД кнопкой
     успех ............. кружок 48 · галка 24 · заголовок 16/800 · текст 13
     телефоны .......... 17/800 · #fff · по центру · gap 6 · mt 16 · ПОД формой

   ★ ОДИН DOM — ДВА ВИДА. В мастере это два независимых дерева <sc-if>. Здесь одна
     разметка: телефоны стоят ТРЕТЬИМ ребёнком .ok-final__box (порядок мобилки), а
     на десктопе grid-placement кладёт их во вторую строку левой тёмной колонки, и
     форма растягивается на обе строки. Никаких order-хаков ради этого не нужно.

   ★ ВНУТРЕННОСТИ CF7 КРАСИМ ТОЛЬКО ПОД .ok-final. Форма 145 сквозная (шапка,
     каталог, модалка товара, ГЕО) — глобальный скин design.css там и остаётся.

   ⚠ !important — два точечных случая, оба ПРОТИВ чужого !important из
     design.css:298 (.wpcf7 input[type=submit] — background/border-radius !important,
     он сам стоит против форм ТТ1). Каждый подписан. Внутри своей разметки — нет.

   ⚠ КЕГЛЬ H2 НА МОБИЛКЕ ЗАДАЁТ НЕ ЭТОТ ФАЙЛ: okna-mobile.css:62 объявляет
     `body h2{font-size:23px !important}`. Замер на 390: мастер 22px, боевой 23px
     (Δ 1px). Решение то же, что в волнах 4 и 5: чужой !important ради одного
     пикселя не перебиваем. Строка `font-size:22px` ниже оставлена как ЗАЯВЛЕННОЕ
     намерение (сработает, если слой okna-mobile когда-нибудь снимут).

   ⚠ ОСТАТОЧНАЯ РАЗНИЦА ВЫСОТ (замер 21.07, vp1440): белая колонка мастера 593px,
     боевая 609px (+16, 2.7%). Из них ~7px — чекбокс согласия 18px против
     мастерских 15px (не уменьшаем: это площадь касания), ~7px — рамка дропзоны
     и кегли внутри неё. Обе разницы осознанные, дальше не подгоняем.
   ████████████████████████████████████████████████████████████████████████████ */

/* ═══ [F.1] СЕКЦИЯ ══════════════════════════════════════════════════════════ */
/* `html body` (0,1,2) — перевес над `.glavnaya-v4 > section{padding:32px 0}` (0,1,1)
   из glavnaya.css: он грузится ПОЗЖЕ этого листа (ловушка порядка, §16). */
html body .ok-final{
  padding-block:var(--ok-section-space-desktop) var(--ok-section-last-pb);
  background:var(--ok-section-b);
}

/* ═══ [F.2] БОКС: тёмная колонка + белая колонка формы ══════════════════════ */
.ok-final .ok-final__box{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);   /* замер мастера: 579.05 / 636.95 из 1216 */
  border-radius:var(--ok-radius-card);
  overflow:hidden;
  box-shadow:var(--ok-shadow-form);
}
.ok-final .ok-final__info  { grid-column:1; grid-row:1; }
.ok-final .ok-final__phones{ grid-column:1; grid-row:2; }
.ok-final .ok-final__form  { grid-column:2; grid-row:1 / span 2; }

/* ═══ [F.3] ТЁМНАЯ КОЛОНКА ══════════════════════════════════════════════════ */
.ok-final .ok-final__info,
.ok-final .ok-final__phones{
  background:var(--ok-text);            /* эталон #1d2330 · токен #1d2433 · ΔE 1.0 */
}
/* Низ тёмной колонки держит .ok-final__phones (padding-bottom 40) — здесь 0,
   зазор до телефонов даёт margin-bottom галочек (мастер: 26). */
.ok-final .ok-final__info{ padding:40px 42px 0; }

.ok-final .ok-final__h2{
  margin:0 0 14px;
  padding-bottom:14px;
  font-size:29px;
  font-weight:var(--ok-fw-black);
  line-height:var(--ok-lh-h2-mobile);   /* 1.25 — совпадает с эталоном */
  letter-spacing:var(--ok-ls-h2);
  color:var(--ok-on-dark);
  background:linear-gradient(var(--ok-red), var(--ok-red)) left bottom / var(--okw5-rule-w) var(--okw5-rule-h) no-repeat;
}
.ok-final .ok-final__lead{
  margin:0 0 22px;
  font-size:15px;
  line-height:1.6;
  color:var(--okw5-on-dark-sub);
}
.ok-final .ok-final__ticks{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0 0 26px;
  padding:0;
  list-style:none;
}
.ok-final .ok-final__tick{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:var(--ok-fs-card);          /* 14.5 */
  line-height:1.4;
  color:var(--okw5-on-dark-chip);
}
.ok-final .ok-final__tick-ic{
  display:flex;
  flex:0 0 auto;
  color:var(--ok-success-bright);       /* галка #3fd07a — токен реестра */
}
.ok-final .ok-final__tick-ic svg{ display:block; }

.ok-final .ok-final__phones{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:0 42px 40px;
}
/* (0,2,0) — перевес над `.ok-scope a{color:--ok-blue}` (0,1,1) из ok-foundation. */
.ok-final .ok-final__phone{
  font-size:20px;
  font-weight:var(--ok-fw-black);
  line-height:1.2;
  color:var(--ok-on-dark);
  text-decoration:none;
}
.ok-final .ok-final__phone:hover,
.ok-final .ok-final__phone:focus-visible{ color:var(--okw5-phone-hover); }

/* ═══ [F.4] БЕЛАЯ КОЛОНКА ФОРМЫ ═════════════════════════════════════════════ */
/* flex-колонка нужна мобилке (подпись уезжает под кнопку через order) — на
   десктопе порядок совпадает с DOM, поведение не меняется. */
.ok-final .ok-final__form{
  display:flex;
  flex-direction:column;
  padding:36px 42px;
  background:var(--ok-section-a);
}
.ok-final .ok-final__form-sub{
  margin:0 0 18px;
  font-size:14px;
  line-height:1.5;
  color:var(--ok-text-muted);
}

/* ── поля ────────────────────────────────────────────────────────────────── */
/* ⚠ ПУСТОЙ <p> — АРТЕФАКТ ПАРСЕРА, А НЕ ОПЕЧАТКА. Блок согласия
   (inc/requests.php:158) сам по себе <p class="okna-cf7-acc">, а CF7 печатает
   сабмит внутри своего <p>. Вложенный <p> браузер НЕ вкладывает: он закрывает
   внешний, и в DOM остаются пустой <p> + согласие + сабмит ПРЯМЫМ ребёнком
   <form>. Пустой абзац тянет за собой `.ok-scope p{margin:0 0 16px}` — лишние
   16px в самой дорогой точке страницы. Убираем (скоупом, чужие формы не задеты).
   ⚠ Из-за этого же на мобилке порядок задаётся и согласию, и сабмиту ОТДЕЛЬНО
     (селектор `p:has(.wpcf7-submit)` не сработал бы — такого <p> в DOM нет). */
.ok-final .ok-final__cf7 .wpcf7-form > p:empty{ display:none; }

.ok-final .ok-final__cf7 .okna-cf7-row{ margin:0 0 12px; }
/* (0,3,1) — против `.wpcf7 .okna-cf7-row label` (0,2,1) из design.css. */
.ok-final .ok-final__cf7 .okna-cf7-row label{
  display:block;
  font-size:var(--ok-fs-label);         /* 13.5 */
  font-weight:var(--ok-fw-bold);
  line-height:1.35;
  color:var(--ok-text);
}
.ok-final .ok-final__cf7 input[type=text],
.ok-final .ok-final__cf7 input[type=tel],
.ok-final .ok-final__cf7 input[type=email]{
  width:100%;
  height:var(--ok-control-h);           /* 48 */
  min-height:var(--ok-control-h);       /* против `.wpcf7 input{min-height:54px}` */
  margin-top:5px;
  padding:0 14px;
  border:var(--ok-input-border-w) solid var(--ok-border-input);
  border-radius:var(--ok-radius-cta);   /* 8 */
  background-color:var(--ok-section-b);
  background-image:none;                /* в мастере полей-иконок нет */
  font-size:var(--ok-fs-body);          /* 16 — иначе iOS зумит форму */
  color:var(--ok-text);
}
.ok-final .ok-final__cf7 input[type=text]:focus,
.ok-final .ok-final__cf7 input[type=tel]:focus,
.ok-final .ok-final__cf7 input[type=email]:focus{
  outline:none;
  border-color:var(--ok-blue);
  background-color:var(--ok-section-a);
  box-shadow:none;
}

/* ── дропзона (разметку печатает inc/photo-upload.php — здесь только скин) ── */
.ok-final .ok-final__cf7 .okna-photo{ margin:0 0 14px; }
.ok-final .ok-final__cf7 .okna-photo__label{
  display:block;
  margin:0 0 5px;
  font-size:var(--ok-fs-label);
  font-weight:var(--ok-fw-bold);
  color:var(--ok-text);
}
.ok-final .ok-final__cf7 .okna-opt{
  font-size:var(--ok-fs-label);
  font-weight:var(--ok-fw-regular);
  color:var(--ok-text-muted);
}
.ok-final .ok-final__cf7 .okna-photo__zone{
  gap:6px;
  padding:18px 16px;
  border:var(--ok-input-border-w) dashed var(--okw5-dash);
  border-radius:var(--ok-radius-dropdown);   /* 10 */
  background:var(--okw5-zone-bg);
}
.ok-final .ok-final__cf7 .okna-photo__zone:hover,
.ok-final .ok-final__cf7 .okna-photo__zone.is-over{
  border-color:var(--ok-blue);
  background:var(--ok-tint-blue);
}
/* CF7-autop заворачивает лейбл дропзоны в свой <p> — гасим его отступ, иначе
   `.ok-scope p{margin:0 0 16px}` даёт +16px, которых в мастере нет. */
.ok-final .ok-final__cf7 .okna-photo > p{ margin:0; }
/* Пустой контейнер превью не должен занимать место до выбора фото (+10px). */
.ok-final .ok-final__cf7 .okna-photo__previews:empty{ margin-top:0; }
.ok-final .ok-final__cf7 .okna-photo__ic{ width:22px; height:22px; }
.ok-final .ok-final__cf7 .okna-photo__txt{ font-size:var(--ok-fs-label); color:var(--ok-text-2); }
.ok-final .ok-final__cf7 .okna-photo__pick{ font-weight:var(--ok-fw-bold); color:var(--ok-blue); }
.ok-final .ok-final__cf7 .okna-photo__hint{ font-size:12px; color:var(--ok-text-muted); }

/* ── согласие 152-ФЗ (блок печатает inc/requests.php — НЕ скрываем нигде) ─── */
.ok-final .ok-final__cf7 .okna-cf7-acc{ margin:0 0 14px; }
.ok-final .ok-final__cf7 .wpcf7-acceptance .wpcf7-list-item-label{
  gap:8px;
  align-items:center;                   /* мастер: галочка и текст по центру */
  font-size:13px;
  line-height:1.45;
  color:var(--ok-text-2);
}

/* ── сабмит ──────────────────────────────────────────────────────────────── */
.ok-final .ok-final__cf7 .wpcf7-submit{
  width:100%;
  height:54px;
  min-height:54px;
  padding:0 20px;
  font-size:var(--ok-fs-body);          /* 16 */
  font-weight:var(--ok-fw-bold);
  box-shadow:none;                      /* в мастере тени под кнопкой нет */
}
/* Спиннер CF7: `display:inline-block` + `visibility:hidden` — он ВСЕГДА держит
   строку, а при width:100% у кнопки переносится на свою и даёт 24px пустоты,
   которых в мастере нет. Прячем в покое и показываем блоком при отправке
   (тот же приём, что у героя, ok-home.css:577) — индикация не теряется. */
.ok-final .ok-final__cf7 .wpcf7-spinner{ display:none; }
.ok-final .ok-final__cf7 .wpcf7-form.submitting .wpcf7-spinner{ display:block; margin:10px auto 0; }

.ok-final .ok-final__cf7 .wpcf7-submit:hover{ transform:none; }        /* мастер: только смена фона */
.ok-final .ok-final__cf7 .wpcf7-submit:active{ transform:translateY(1px); }
/* Клиентский гейт согласия (inc/requests.php:219-224) держит сабмит disabled,
   пока галочка не отмечена. Состояние ОБЯЗАНО читаться глазом — иначе клик по
   «живой» кнопке молча ничего не делает (тихий отказ вместо видимой ошибки).
   ⚠ !important — против `.wpcf7 input[type=submit]{background:… !important}`
     (design.css:298). Без него серый фон не применится. */
.ok-final .ok-final__cf7 .wpcf7-submit:disabled{
  background:var(--ok-text-muted) !important;
  box-shadow:none;
  transform:none;
  cursor:not-allowed;
}

/* ═══ [F.5] ЭКРАН УСПЕХА (эталон: sc-if finalSent) ══════════════════════════ */
/* Переключение без подмены DOM: CF7 6.x сам ставит class="sent" на <form>.
   Основной путь — :has(); класс .is-sent от скрипта шаблона — фолбэк. */
.ok-final .ok-final__done{ display:none; }
.ok-final.is-sent .ok-final__cf7,
.ok-final.is-sent .ok-final__form-sub{ display:none; }
.ok-final.is-sent .ok-final__done{ display:flex; }
@supports selector(:has(*)){
  .ok-final:has(.wpcf7-form.sent) .ok-final__cf7,
  .ok-final:has(.wpcf7-form.sent) .ok-final__form-sub{ display:none; }
  .ok-final:has(.wpcf7-form.sent) .ok-final__done{ display:flex; }
}
.ok-final .ok-final__done{
  flex:1 1 auto;                        /* эталон height:100% — центр по высоте колонки */
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:40px 0;
  text-align:center;
}
.ok-final .ok-final__done-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:60px;
  height:60px;
  border-radius:var(--ok-radius-pill);
  background:var(--okw5-ok-bg);
  color:var(--ok-success);
}
.ok-final .ok-final__done-icon svg{ display:block; }
.ok-final .ok-final__done-title{
  font-size:19px;
  font-weight:var(--ok-fw-black);
  line-height:1.3;
  color:var(--ok-text);
}
.ok-final .ok-final__done-text{
  max-width:320px;
  font-size:var(--ok-fs-card);          /* 14.5 */
  line-height:1.45;
  color:var(--ok-text-2);
}
.ok-final .ok-final__done-text--m{ display:none; }   /* короткий текст — только M23 */

/* ═══ [F.6] РЕСПОНСИВ (канон M1: 1024 / 768 / 600 / 480) ════════════════════ */
@media (max-width:1024px){
  html body .ok-final{ padding-block:var(--ok-section-space-tablet) var(--ok-section-space-tablet); }
  .ok-final .ok-final__info{ padding:32px 28px 0; }
  .ok-final .ok-final__phones{ padding:0 28px 32px; }
  .ok-final .ok-final__form{ padding:28px 28px; }
  .ok-final .ok-final__h2{ font-size:26px; }
}

@media (max-width:768px){
  /* Колонки в столбик. Порядок DOM (инфо, форма, телефоны) = порядок M23. */
  .ok-final .ok-final__box{ grid-template-columns:minmax(0,1fr); }
  .ok-final .ok-final__info,
  .ok-final .ok-final__form,
  .ok-final .ok-final__phones{ grid-column:1; grid-row:auto; }
  .ok-final .ok-final__h2{ font-size:25px; }
  .ok-final .ok-final__done{ flex:0 0 auto; }
}

@media (max-width:600px){
  /* M23: коробки нет — тёмный фон даёт сама секция, форма = белая карточка. */
  html body .ok-final{
    padding-block:var(--ok-section-space-mobile) var(--ok-section-last-pb-mobile);
    background:var(--okw5-navy);
    background:linear-gradient(165deg, var(--okw5-ink-deep) 0%, var(--okw5-navy) 100%);
  }
  .ok-final .ok-final__box{ border-radius:0; overflow:visible; box-shadow:none; }
  .ok-final .ok-final__info,
  .ok-final .ok-final__phones{ background:transparent; }
  .ok-final .ok-final__info{ padding:0; }
  .ok-final .ok-final__h2{
    margin-bottom:10px;
    padding-bottom:0;
    background-image:none;              /* M23: красной черты под H2 нет */
    font-size:22px;
    line-height:1.3;
  }
  .ok-final .ok-final__lead{ margin-bottom:16px; font-size:var(--ok-fs-label); line-height:1.55; }
  .ok-final .ok-final__ticks{ gap:7px; margin-bottom:18px; }
  .ok-final .ok-final__tick{ gap:9px; font-size:13px; }

  .ok-final .ok-final__form{ padding:18px 16px; border-radius:var(--ok-radius-card); }
  /* Подпись form_sub уезжает ПОД кнопку и мельчает — место примечания M23. */
  .ok-final .ok-final__cf7{ order:2; }
  .ok-final .ok-final__form-sub{
    order:3;
    margin:10px 0 0;
    font-size:11.5px;
    line-height:1.5;
    text-align:center;
  }
  .ok-final .ok-final__done{ order:4; }

  /* M23: дропзоны нет. Узел остаётся в DOM — file-поля, лимит 5 и типы файлов
     не меняются (источник разметки один: inc/photo-upload.php). */
  .ok-final .ok-final__cf7 .okna-photo{ display:none; }

  /* Порядок полей M23: Имя, Телефон*, Марка. В CF7 порядок десктопный, поэтому
     переставляем показом. Браузер без :has() остаётся на десктопном порядке —
     деградация, а не поломка. */
  @supports selector(:has(*)){
    .ok-final .ok-final__cf7 .wpcf7-form{ display:flex; flex-direction:column; }
    .ok-final .ok-final__cf7 .wpcf7-form > .okna-cf7-row:has(input[name="name"]){ order:1; }
    .ok-final .ok-final__cf7 .wpcf7-form > .okna-cf7-row:has(input[name="phone"]){ order:2; }
    .ok-final .ok-final__cf7 .wpcf7-form > .okna-cf7-row:has(input[name="mark"]){ order:3; }
    .ok-final .ok-final__cf7 .wpcf7-form > .okna-photo{ order:4; }
    /* согласие и сабмит — РАЗНЫЕ прямые дети формы (см. записку о пустом <p>) */
    .ok-final .ok-final__cf7 .wpcf7-form > .okna-cf7-acc{ order:5; }
    .ok-final .ok-final__cf7 .wpcf7-form > .wpcf7-submit{ order:6; }
    .ok-final .ok-final__cf7 .wpcf7-form > .wpcf7-response-output{ order:7; }
  }

  .ok-final .ok-final__cf7 .okna-cf7-row{ margin-bottom:10px; }
  .ok-final .ok-final__cf7 input[type=text],
  .ok-final .ok-final__cf7 input[type=tel],
  .ok-final .ok-final__cf7 input[type=email]{
    border-radius:var(--ok-radius-field,8px);  /* Волна 1-бис: моб. поле 10(dropdown/M23)→8 (норма §1.2 радиус поля единый по ширине) */
    background-color:var(--ok-section-a);      /* поля на белой карточке */
  }
  /* ⚠ !important — против `border-radius:10px !important` (design.css:298).
     Гайд §5: на мобилке ВСЕ красные CTA — 4px. */
  .ok-final .ok-final__cf7 .wpcf7-submit{
    height:var(--ok-control-h-mobile);         /* 50 */
    min-height:var(--ok-control-h-mobile);
    border-radius:var(--ok-radius-btn) !important;
    font-size:15.5px;
  }

  .ok-final .ok-final__phones{ padding:16px 0 0; align-items:center; }
  .ok-final .ok-final__phone{ font-size:17px; }

  .ok-final .ok-final__done{ gap:9px; padding:14px 0; }
  .ok-final .ok-final__done-icon{ width:48px; height:48px; }
  .ok-final .ok-final__done-icon svg{ width:24px; height:24px; }
  .ok-final .ok-final__done-title{ font-size:16px; }
  .ok-final .ok-final__done-text{ display:none; }
  .ok-final .ok-final__done-text--m{ display:block; font-size:13px; }
}

/* [W5-P02 п.5] Тач-цель ≥44: телефоны финальной CTA. Канон «И» (D-209). Без !important. */
@media (hover:none) and (pointer:coarse){
  .ok-final .ok-final__phone{
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
}