/* ============================================================================
   ok-home-w4.css — HOME-SHELL-V2 · ВОЛНА 4 (пакет HC-12)
   ----------------------------------------------------------------------------
   Блоки волны (порядок = порядок на странице):
     [CALC]          14   · калькулятор веса          — своя вёрстка (template-part)
     [CASES]         15   · примеры работ (strip)     — вёрстка рендерера + этот слой
     [FAQ]           17   · частые вопросы            — своя вёрстка (template-part)
     [PARTNERS]      17.1 · партнёры — ★ ВЫНЕСЕН в assets/ok-partners.css
                    (SHARED-стили для Главной/ГЕО и «О компании»: один файл на обе
                    поверхности, не две копии). Шапка (.gv-head) партнёров — там же.
     [CERTIFICATES]  17.2 · статусы и гарантии        — вёрстка рендерера + этот слой

   ФАЙЛ ВОЛНЫ. Волны 1-5 пишут каждая в свой ok-home-w<N>.css (решение оркестратора);
   слияние в ok-home.css — в HC-14/HC-16. Здесь соблюдены ПРАВИЛА ok-home.css:
     1. Скоуп. Каждый селектор начинается с класса своего блока
        (.ok-calc / .ok-cases / .ok-faq / .ok-partners / .ok-certificates).
        Глобальных селекторов в файле НЕТ — слой не протекает ни в шапку/футер,
        ни в FORBID-зоны (услуга, каталог, товар, страница «О компании»).
     2. Цвет. Ноль новых #hex: только токены --ok-* (assets/ok-tokens.css); тонов,
        которых в закрытой палитре нет, добиваемся color-mix() из утверждённых
        токенов с подписью ΔE76 (приём HC-05/HC-08, секция [C.0]).
     3. !important — ТОЛЬКО против чужого !important, каждый случай подписан.
        Против TT1 (twentytwentyone/style.css грузится ДВАЖДЫ) бьём СПЕЦИФИЧНОСТЬЮ.
     4. Брейкпоинты — КАНОН M1: 1024 / 768 / 600 / 480. Медиа-правила блока — в
        конце его же секции.
     5. Числа — из ЖИВОГО ЗАМЕРА мастера, замер подписан в шапке каждой секции.

   ★ ЧЕМ МЕРЕНО: headless Chrome (--allow-file-access-from-files), file://…/
     «02 Главная.dc.html», десктоп vp1440 + мобильное дерево мастера (внутренний
     фрейм 390px; включается state mode:'mobile', иначе support.js вырезает ветку
     sc-if isMobile из DOM — при vp390 мастер всё равно рисует десктоп).

   ★ ПОЧЕМУ ТРИ БЛОКА ИЗ ПЯТИ БЕЗ НОВОЙ РАЗМЕТКИ. Кейсы/партнёры/статусы печатают
     переиспользуемые рендереры (inc/case-cpt.php, inc/partners-slider.php,
     inc/status-cards.php), к которым привязаны рабочие механизмы: попап-галерея с
     ЛЕНИВЫМ видео (assets/cases.js, data-media), слайдер с подкачкой ширины
     (assets/partners-slider.js), ссылки /partnery/<slug>/. Их DOM-структура уже
     совпадает с мастером 1-в-1 (медиа+бейдж / заголовок / текст / срок и т.д.),
     поэтому блок волны даёт им СКОУП-контейнер, а расхождение с мастером
     добирается стилями. Переписать разметку = продублировать 100 строк логики
     видео/слайдера ради тех же пикселей и потерять привязки JS.

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


/* ██████████████████████████████████████████████████████████████████████████████
   [C.0] ЛОКАЛЬНЫЕ ТОНА ВОЛНЫ — производные от --ok-* через color-mix()
   ------------------------------------------------------------------------------
   Палитра 07_DESIGN_TOKEN_REGISTRY закрыта, а тёмная панель калькулятора требует
   тонов, которых в ней нет. Новые #hex запрещены → вычисляем из утверждённых
   токенов. Каждый токен объявлен ДВАЖДЫ: сперва простой var()-фолбэк, затем
   color-mix — браузер без color-mix отбрасывает второе объявление и остаётся на
   первом. ΔE76 ≤ 2.3 — порог различимости глазом (посчитан в Lab, D65).
   ████████████████████████████████████████████████████████████████████████████ */
.ok-calc,
.ok-cases,
.ok-certificates{
  /* светлая подложка формы калькулятора · эталон #f4f7fd */
  --ok4-panel:var(--ok-tint-blue);
  --ok4-panel:color-mix(in srgb, var(--ok-on-dark) 34%, var(--ok-tint-blue));        /* =#f4f7fd · ΔE 0.11 ТОЧНО */

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

  /* верх градиента мобильной шапки калькулятора · эталон #16233f */
  --ok4-navy-2:var(--ok-dark);
  --ok4-navy-2:color-mix(in srgb, var(--ok-blue) 17%, var(--ok-dark));               /* ≈#14223e · ΔE 0.75 */

  /* графитовая кнопка «Рассчитать» · эталон #1e2330 / hover #2a3140 */
  --ok4-btn:var(--ok-text);
  --ok4-btn:color-mix(in srgb, var(--ok-dark) 14%, var(--ok-text));                  /* ≈#1b2230 · ΔE 1.15 */
  --ok4-btn-hover:var(--ok-text);
  --ok4-btn-hover:color-mix(in srgb, var(--ok-border-outline) 7%, var(--ok-text));   /* ≈#293140 · ΔE 0.21 */

  /* подписи на тёмной панели · эталоны #9fb4d8 / #9aa4b6 / #cfd6e2 / #7fa6ef */
  --ok4-on-navy-label:var(--ok-border-outline);
  --ok4-on-navy-label:color-mix(in srgb, var(--ok-blue-hover) 31%, var(--ok-border-input)); /* ≈#a0b4d9 · ΔE 0.46 */
  --ok4-on-navy-mute:var(--ok-muted-seed);
  --ok4-on-navy-mute:color-mix(in srgb, var(--ok-border-outline) 23%, var(--ok-muted-seed));/* =#9aa4b6 · ΔE 0.14 ТОЧНО */
  --ok4-on-navy-text:var(--ok-border-outline);
  --ok4-on-navy-text:color-mix(in srgb, var(--ok-muted-seed) 31%, var(--ok-tint-blue));     /* ≈#cfd6e1 · ΔE 0.23 */
  --ok4-on-navy-accent:var(--ok-blue);
  --ok4-on-navy-accent:color-mix(in srgb, var(--ok-blue) 57%, var(--ok-on-dark));           /* ≈#7ea2e8 · ΔE 2.22 */

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

  /* фон бейджа «Статус подтверждён» на мобилке · эталон #e7f7ee */
  --ok4-ok-bg:var(--ok-section-b);
  --ok4-ok-bg:color-mix(in srgb, var(--ok-on-dark) 89%, var(--ok-success));          /* ≈#e6f4ec · ΔE 1.22 */
}


/* ██████████████████████████████████████████████████████████████████████████████
   [C.1] ШАПКА СЕКЦИИ — общий формат всех пяти блоков волны
   ------------------------------------------------------------------------------
   ★ ЗАМЕР МАСТЕРА (vp1440, одинаков во всех пяти секциях):
     H2 ............. 34px/800 · ls −.01em (−0.34px) · #123d87
                      подчёркивание 44×3 #e0223a слева снизу · padding-bottom 14
                      margin-bottom: 12 (калькулятор) / 30 (FAQ) / 10 (партнёры,
                      статусы) / 12 (кейсы)
     подзаголовок ... 16.5px (калькулятор, кейсы) либо 16px (партнёры, статусы)
                      lh 1.55 · #526173 · margin-bottom 26…30
                      max-width 760 (везде, кроме партнёров — там на всю ширину)
     эйброу ......... 12.5px/800 UPPER · ls .06em (0.75px) · #1c5bd6 на #eef3fc
                      padding 7 13 · radius 999 · margin-bottom 14
   ★ ЗАМЕР МОБАЙЛА (фрейм 390): H2 23px/800; эйброу 11.5px/800 · padding 6 11.
     23px на мобилке приходят из okna-mobile.css `body h2{font-size:23px!important}`
     — это РОВНО мастер, конфликта нет, перебивать нечего.
   ████████████████████████████████████████████████████████████████████████████ */

/* H2. Существующая разметка кейсов/партнёров/статусов приносит свои классы
   (.okna-section-title, .gv-head h2) со своим размером 30px — перебиваем
   специфичностью (0,3,0) > (0,2,0). */
.ok-calc .ok-calc__h2,
.ok-faq .ok-faq__h2,
.ok-cases .okna-cases__head .okna-section-title,
.ok-certificates .gv-head h2{
  position:relative;
  margin:0;
  padding-bottom:14px;
  font-family:var(--ok-font);
  font-size:var(--ok-fs-h2);                 /* 34px */
  font-weight:var(--ok-fw-black);
  /* ЗАМЕР: в мастере line-height не задан → строка 46px (норма Manrope), из-за
     чего блок H2 = 60px. Токен --ok-lh-heading (1.18) дал бы 54 и разъехался бы
     с мастером на 6px. Тот же вывод у волны 3 (ok-home-w3.css, .ok-proc__h2). */
  line-height:normal;
  letter-spacing:var(--ok-ls-h2);            /* −.01em */
  color:var(--ok-ink);
}
.ok-calc .ok-calc__h2::after,
.ok-faq .ok-faq__h2::after,
.ok-cases .okna-cases__head .okna-section-title::after,
.ok-certificates .gv-head h2::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:44px;                                /* мастер: 44×3, у канона сайта 52×3 */
  height:3px;
  border-radius:0;                           /* мастер: прямые торцы (канон — 999px) */
  background:var(--ok-red);
}

/* ✔ ОСЬ ЗАГОЛОВКОВ 37px — ЗАЯВКА ЗАКРЫТА В HC-14. design.css:689-708 сдвигает
   заголовочные группы старой главной на --okna-head-indent через !important;
   внутри новой оболочки ось — край .ok-container. Снятие отступа централизовано
   в ok-legacy-compat.css §[4] одним правилом на все заголовочные элементы
   .ok-scope — локальный дубль (2 селектора) снят. */

/* Подзаголовок секции. */
.ok-calc .ok-calc__sub,
.ok-cases .okna-cases__head .okna-section-sub,
.ok-certificates .gv-head__sub{
  margin:0;
  font-size:var(--ok-fs-intro);              /* 16.5px */
  font-weight:var(--ok-fw-regular);
  line-height:var(--ok-lh-body);             /* 1.55 */
  color:var(--ok-text-2);
  max-width:var(--ok-content-narrow);        /* 760px */
}
/* Мастер: у партнёров подзаголовок на всю ширину и на полкегля мельче. */
.ok-certificates .gv-head__sub{ font-size:var(--ok-fs-body); }   /* 16px */

/* Эйброу-пилюля (печатают рендереры партнёров и статусов). */
.ok-certificates .gv-head .gv-eyebrow{
  display:inline-block;
  margin:0 0 14px;
  padding:7px 13px;
  border-radius:var(--ok-radius-pill);
  background:var(--ok-tint-blue);
  color:var(--ok-blue);
  font-size:var(--ok-fs-eyebrow);            /* 12.5px */
  font-weight:var(--ok-fw-black);
  line-height:1.25;
  letter-spacing:var(--ok-ls-eyebrow);       /* .06em */
  text-transform:uppercase;
}

/* Блок-обёртка шапки. .gv-head в glavnaya.css ограничен 780px и отбит на 38px —
   в мастере шапка занимает всю ширину контейнера, а отступ задаёт H2/подзаголовок. */
.ok-certificates .gv-head{
  max-width:none;
  margin:0 0 30px;
  text-align:left;
}
/* ✔ ОСЬ .gv-head — ЗАЯВКА ЗАКРЫТА В HC-14 (замер волны: H2 приходил 1179 вместо
   1216 — сдвиг на 37px от design.css:692). Снятие централизовано в
   ok-legacy-compat.css §[4]; локальный дубль снят. */
/* ВЫП113: шапка 1-в-1 с блоком блога/новостей (blog-list.css .okna-nhome-head):
   заголовок+лид слева, кнопка справа В СТРОКЕ заголовка. flex-direction:row —
   перебивает glavnaya.css:731 (.okna-cases__head{flex-direction:column}), иначе
   align-items:flex-end правит по правому краю (был перекос: текст на x≈473). */
.ok-cases .okna-cases__head{ margin:0 0 30px; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:20px; }
.ok-cases .okna-cases__head-txt{ flex:1 1 auto; min-width:0; }
.ok-cases .okna-cases__head-txt .okna-section-sub{ max-width:var(--ok-content-narrow); }
.ok-cases .okna-cases__seeall{ flex:0 0 auto; align-self:flex-end; white-space:nowrap; }  /* «Смотреть все» справа, как у блога */
.ok-cases .okna-cases__head .okna-section-title{ margin-bottom:12px; }


/* ██████████████████████████████████████████████████████████████████████████████
   [CALC] · HC-12 · 14 «Калькулятор веса стекла»
   ------------------------------------------------------------------------------
   Разметка: template-parts/home/blocks/calc.php (своя, по мастеру).
   Данные:   okna_home_data('calc-promo') — виджет без БД, счёт в assets/calc.js.
   ★ КОНТРАКТ calc.js НЕ ТРОГАЕМ: id calc-l/calc-w/calc-t (+ *-hint), кнопка
     #calc-go, вывод #calc-out, подпись #calc-people.people, сообщения
     #calc-msg.okna-calc-msg. className у .people и .okna-calc-msg скрипт
     ПЕРЕЗАПИСЫВАЕТ целиком → на этих узлах не должно быть других классов,
     стилизуем их из скоупа (.ok-calc .people).

   ★ ЗАМЕР МАСТЕРА · ДЕСКТОП vp1440 ───────────────────────────────────────────
     секция ........... bg #ffffff · padding 72px 0 · h 631.38
     контейнер ........ 1280 · padding 0 32 → контент 1216
     коробка .......... grid minmax(0,1.2fr) minmax(0,1fr) → 662.17 / 551.83
                        border 1px #e8ecf2 · radius 16 · overflow hidden · h 338.25
     левая панель ..... bg #f4f7fd + calc-left-bg.webp right center/cover
                        padding 30px 32px
       шапка .......... flex · gap 13 · align center · mb 20
       иконка ......... 46×46 · radius 10 · bg #eef3fc · картинка 34×34
       H3 ............. 20px/800 #123d87 · подпись 13.5px #8a94a6 (mt 2)
       поля ........... grid 1fr 1fr 1fr · gap 14 · mb 20 (колонка 190.05)
       лейбл .......... 13.5px/700 #1d2433 · mb 5
       поле ........... h 46 · bg #fff · 1.5px #dfe5ee · r 8 · padding 0 14 · 15px
                        focus: border #1c5bd6
       кнопка ......... h 48 · padding 0 26 · bg #1e2330 · #fff · r 8 · 15px/700
                        hover #2a3140 · active translateY(1px)
       сноска ......... mt 16 · flex gap 8 · 12.5px #8a94a6 · lh 1.5 · maxw 420
                        иконка-круг 14×14 stroke #8a94a6
     правая панель .... bg #0b1f3f + calc-right-bg.webp center/cover
                        padding 30px 32px · flex column
       подпись ........ 14px #9fb4d8
       строка ......... flex baseline · gap 10 · mt 12 · mb 6 · h 60
       «≈» ............ 30px/700 #7fa6ef
       число .......... 58px/800 · ls −.02em · lh 1 · #ffffff
       «кг» ........... 20px/700 #9fb4d8
       примечание ..... 13px #9aa4b6
       плашка-совет ... mt auto · bg rgba(255,255,255,.07) · 1px rgba(255,255,255,.14)
                        r 10 · padding 14 16 · flex gap 11 · текст 13px/1.55 #cfd6e2

   ★ ЗАМЕР МАСТЕРА · МОБАЙЛ 390 ───────────────────────────────────────────────
     секция ........... bg #fff · padding 44px 16px 48px
     коробка .......... radius 16 · border 1 · overflow hidden
     ТЁМНАЯ ШАПКА ..... linear-gradient(165deg,#16233f,#0b1f3f) · padding 20 18
                        flex gap 14 · иконка 46×46 r10 на БЕЛОЙ подложке
                        заголовок 19px/800 #fff · подпись 12.5px #cfd6e2
     тело ............. padding 18 16 · поля grid 3 · gap 10 · mb 14
                        лейбл 12px/700 mb 4 · поле h46 r10 padding 0 10 · 16px
     результат ........ СВЕТЛАЯ строка: bg #f5f8fd · 1px #e8ecf2 · r 10
                        padding 14 16 · space-between · подпись 13.5px #526173
                        число 22px/800 #123d87

   ★ ОСОЗНАННЫЕ ОТКЛОНЕНИЯ ОТ МАСТЕРА (мобайл), причины — в отчёте HC-12:
     1. В тёмной шапке мастера стоит H2 «Калькулятор веса стекла». У нас H2 секции
        печатается НАД коробкой (как на десктопе и как на боевом), поэтому внутрь
        шапки он не дублируется — в шапке остаётся собственный H3 «Параметры
        стекла». Дубль заголовка = минус SEO и минус смысл.
     2. Кнопка «Рассчитать» в мобильном мастере отсутствует (там пересчёт по
        onInput). У нас пересчёт по input тоже работает, но кнопка — реальный
        рабочий контрол calc.js: скрывать её = терять управление, поэтому она
        остаётся во всю ширину.
     3. Подпись «Вес указан на одно стекло» и плашка-совет в мобильном мастере
        не показаны — это КОНТЕНТ, а не украшение, поэтому сохранены компактно.
   ████████████████████████████████████████████████████████████████████████████ */

/* `html body` (0,1,2) обязателен: гасит правило `.glavnaya-v4 > section{padding:32px 0}`
   (0,1,1) из glavnaya.css — иначе к мастерским 72/72 приклеивается ещё по 32px. */
html body .ok-calc{
  max-width:none;
  margin-inline:0;
  padding-block:var(--ok-section-space-desktop);   /* 72px */
  background:var(--ok-section-a);
  color:var(--ok-text);
  font-family:var(--ok-font);
}

.ok-calc .ok-calc__h2{ margin-bottom:12px; }
.ok-calc .ok-calc__sub{ margin-bottom:26px; }

.ok-calc .ok-calc__box{
  display:grid;
  /* minmax(0,…) вместо голых fr: иначе длинное число распирает колонку и рождает
     горизонтальный overflow (06 §3 правило 10). */
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-card);             /* 16px */
  overflow:hidden;
}

.ok-calc .ok-calc__panel{ min-width:0; padding:30px 32px; }

/* ── левая панель: форма ───────────────────────────────────────────────────── */
.ok-calc .ok-calc__panel--form{
  background-color:var(--ok4-panel);
  background-image:url("img/sections/calc-left-bg.webp");
  background-position:right center;
  background-size:cover;
  background-repeat:no-repeat;
}

.ok-calc .ok-calc__head{
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:20px;
}
.ok-calc .ok-calc__ico{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:var(--ok-radius-dropdown);         /* 10px */
  background:var(--ok-tint-blue);
}
.ok-calc .ok-calc__ico img{ display:block; width:34px; height:34px; }
.ok-calc .ok-calc__h3{
  margin:0;
  font-size:20px;                                   /* мастер: 20px (не токен-H3 22) */
  font-weight:var(--ok-fw-black);
  line-height:1.35;
  color:var(--ok-ink);
}
.ok-calc .ok-calc__hint{
  margin:2px 0 0;
  font-size:var(--ok-fs-label);                     /* 13.5px */
  line-height:1.35;
  color:var(--ok-text-muted);
}

.ok-calc .ok-calc__fields{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-bottom:20px;
}
.ok-calc .ok-calc__field{ min-width:0; }
.ok-calc .ok-calc__label{
  display:block;
  margin-bottom:5px;
  font-size:var(--ok-fs-label);                     /* 13.5px */
  font-weight:var(--ok-fw-bold);
  line-height:1.35;
  color:var(--ok-text);
}
/* ★ Селектор .ctrl, а НЕ БЭМ-класс: calc.js делает `inp.className = 'ctrl'` при
   каждом пересчёте (и сразу на bind) — любой другой класс поля будет стёрт.
   `html body` — против TT1 (twentytwentyone/style.css грузится дважды и красит
   input своим фоном/рамкой/радиусом селектором той же силы). */
html body .ok-calc .ctrl{
  width:100%;
  height:46px;
  box-sizing:border-box;
  padding:0 14px;
  border:var(--ok-input-border-w) solid var(--ok-border-input);   /* 1.5px */
  border-radius:var(--ok-radius-cta);               /* 8px */
  background:var(--ok-section-a);
  color:var(--ok-text);
  font-family:var(--ok-font);
  font-size:15px;
  line-height:normal;
  box-shadow:none;
  outline:none;
  -moz-appearance:textfield;
}
html body .ok-calc .ctrl:focus{ border-color:var(--ok-blue); }
/* Состояния валидации (классы ставит calc.js) — цвет рамки из глобальных правил
   glavnaya.css `.ctrl.okna-field-*`; здесь только приводим к своей толщине. */
html body .ok-calc .ctrl.okna-field-error,
html body .ok-calc .ctrl.okna-field-warn,
html body .ok-calc .ctrl.okna-field-info{ border-width:var(--ok-input-border-w); }
.ok-calc .ctrl::-webkit-outer-spin-button,
.ok-calc .ctrl::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
/* Подсказка валидации (её текст пишет calc.js в #calc-*-hint). Пустая — не занимает места. */
.ok-calc .ok-calc__err{
  display:block;
  margin-top:4px;
  font-size:12px;
  line-height:1.35;
  color:var(--ok-red);
}
.ok-calc .ok-calc__err:empty{ display:none; }

/* Кнопка «Рассчитать» — геометрия и типографика. */
html body .ok-calc .ok-calc__btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:var(--ok-control-h);                       /* 48px */
  padding:0 26px;
  border:0;
  border-radius:var(--ok-radius-cta);               /* 8px */
  background:var(--ok4-btn);
  color:var(--ok-on-dark);
  font-family:var(--ok-font);
  font-size:15px;
  font-weight:var(--ok-fw-bold);
  line-height:1;
  cursor:pointer;
  transition:background-color .18s ease, transform .12s ease;
}
/* ★★ ПЕРЕВЕС НАД TT1 (ЗАМЕР ПОКАЗАЛ: кнопка приходила тёмной #28303d, текст
   #d1e4dd — палитра TT1). twentytwentyone/style.css красит ЛЮБУЮ <button>:
       button:not(:hover):not(:active):not(.has-background){ background-color:… }
       button:not(:hover):not(:active):not(.has-text-color){ color:… }
   Специфичность (0,3,1) выше нашей (0,2,2) — геометрия из правила выше применялась,
   а фон/цвет перебивались. Бьём ТЕМ ЖЕ ПРИЁМОМ, без !important: повторяем только
   СПОРНЫЕ свойства селектором (0,4,2). Геометрию сюда не переносим — иначе на
   :hover кнопка теряла бы размеры. (Тот же капкан описан в ok-header.css и w3.) */
html body .ok-calc .ok-calc__btn:not(:hover):not(:active){
  background:var(--ok4-btn);
  color:var(--ok-on-dark);
}
html body .ok-calc .ok-calc__btn:hover{ background:var(--ok4-btn-hover); color:var(--ok-on-dark); }
html body .ok-calc .ok-calc__btn:active{ background:var(--ok4-btn-hover); color:var(--ok-on-dark); transform:translateY(1px); }
html body .ok-calc .ok-calc__btn:focus-visible{ outline:2px solid var(--ok-blue); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  html body .ok-calc .ok-calc__btn{ transition:none; }
  html body .ok-calc .ok-calc__btn:active{ transform:none; }
}

.ok-calc .ok-calc__note{
  display:flex;
  gap:8px;
  max-width:420px;
  margin:16px 0 0;
  font-size:var(--ok-fs-micro);                     /* 12.5px */
  line-height:1.5;
  color:var(--ok-text-muted);
}
.ok-calc .ok-calc__note svg{ flex:0 0 auto; margin-top:2px; }

/* ── правая панель: результат ──────────────────────────────────────────────── */
.ok-calc .ok-calc__panel--result{
  display:flex;
  flex-direction:column;
  background-color:var(--ok4-navy);
  background-image:url("img/sections/calc-right-bg.webp");
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  color:var(--ok-on-dark);
}
.ok-calc .ok-calc__res-label{
  display:block;
  font-size:14px;
  line-height:1.35;
  color:var(--ok4-on-navy-label);
}
.ok-calc .ok-calc__res{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin:12px 0 6px;
}
.ok-calc .ok-calc__approx{
  font-size:30px;
  font-weight:var(--ok-fw-bold);
  line-height:1;
  color:var(--ok4-on-navy-accent);
}
/* `html body` — TT1 задаёт b/strong свой вес; и без него число наследовало бы 700. */
html body .ok-calc .ok-calc__res b{
  font-size:58px;
  font-weight:var(--ok-fw-black);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--ok-on-dark);
}
.ok-calc .ok-calc__unit{
  font-size:20px;
  font-weight:var(--ok-fw-bold);
  line-height:1;
  color:var(--ok4-on-navy-label);
}
.ok-calc .ok-calc__res-note{
  display:block;
  font-size:13px;
  line-height:1.4;
  color:var(--ok4-on-navy-mute);
}

/* Сообщения валидации. Класс ведёт calc.js (is-error / is-warn), в glavnaya.css
   у них тёмная палитра — здесь панель тёмная, поэтому свои тона на тёмном. */
.ok-calc .okna-calc-msg{
  margin:14px 0 0;
  font-size:13.5px;
  line-height:1.5;
  color:var(--ok4-on-navy-text);
}
.ok-calc .okna-calc-msg:empty{ display:none; }
.ok-calc .okna-calc-msg.is-error{ color:var(--ok-star); }   /* красный на тёмно-синем не читается */
.ok-calc .okna-calc-msg.is-warn{ color:var(--ok-star); }
.ok-calc .okna-calc-msg ul{ margin:6px 0 0; padding-left:18px; }

.ok-calc .ok-calc__tip{
  display:flex;
  gap:11px;
  margin-top:auto;
  padding:14px 16px;
  border:1px solid var(--ok4-hair);
  border-radius:var(--ok-radius-dropdown);          /* 10px */
  background:var(--ok4-glass);
}
.ok-calc .ok-calc__tip svg{ flex:0 0 auto; margin-top:2px; }
/* .people — класс ведёт calc.js (перезаписывает className целиком). */
.ok-calc .people{
  font-size:13px;
  line-height:1.55;
  color:var(--ok4-on-navy-text);
}

/* ── [CALC] РЕСПОНСИВ ─────────────────────────────────────────────────────── */
@media (max-width:1024px){
  html body .ok-calc{ padding-block:var(--ok-section-space-tablet); }   /* 56px */
  .ok-calc .ok-calc__panel{ padding:26px 24px; }
  html body .ok-calc .ok-calc__res b{ font-size:46px; }
}

@media (max-width:768px){
  /* Одна колонка. Мастер на 390 показывает ТЁМНУЮ шапку сверху и СВЕТЛУЮ строку
     результата снизу — воспроизводим ровно этот ритм на нашей структуре. */
  .ok-calc .ok-calc__box{ grid-template-columns:minmax(0,1fr); }
  .ok-calc .ok-calc__panel{ padding:0; }

  .ok-calc .ok-calc__panel--form{ background-image:none; background-color:var(--ok-section-a); }

  /* Шапка формы → тёмная полоса мастера (M13). Растягиваем на всю коробку. */
  .ok-calc .ok-calc__head{
    gap:14px;
    margin:0;
    padding:20px 18px;
    background:linear-gradient(165deg, var(--ok4-navy-2) 0%, var(--ok4-navy) 100%);
  }
  .ok-calc .ok-calc__ico{ background:var(--ok-on-dark); }
  .ok-calc .ok-calc__h3{ font-size:19px; color:var(--ok-on-dark); }
  .ok-calc .ok-calc__hint{ font-size:12.5px; color:var(--ok4-on-navy-text); }

  .ok-calc .ok-calc__fields{
    gap:10px;
    margin:0;
    padding:18px 16px 0;
  }
  .ok-calc .ok-calc__label{ margin-bottom:4px; font-size:12px; }
  /* okna-mobile.css задаёт `body input{font-size:16px!important}` (анти-зум iOS).
     16px = РОВНО мастер, конфликта нет — здесь только геометрия, кегль оставляем
     чужому правилу и !important не плодим. */
  html body .ok-calc .ctrl{ height:46px; padding:0 10px; border-radius:var(--ok-radius-field,8px); } /* Волна 1-бис: моб. калькулятор-поле 10(dropdown)→8 (роль поля, единое §1.2) */

  html body .ok-calc .ok-calc__btn{
    display:flex;
    justify-content:center;
    width:calc(100% - 32px);
    height:var(--ok-control-h-mobile);              /* 50px */
    margin:14px 16px 0;
  }
  .ok-calc .ok-calc__note{ max-width:none; margin:12px 16px 18px; }

  /* Панель результата на мобилке — светлая (мастер M13), а не тёмная. */
  .ok-calc .ok-calc__panel--result{
    padding:0 16px 18px;
    background-image:none;
    background-color:var(--ok-section-a);
    color:var(--ok-text);
  }
  .ok-calc .ok-calc__out{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:2px 12px;
    padding:14px 16px;
    border:1px solid var(--ok-border);
    border-radius:var(--ok-radius-dropdown);        /* 10px */
    background:var(--ok-section-b);
  }
  .ok-calc .ok-calc__res-label{ font-size:13.5px; color:var(--ok-text-2); }
  .ok-calc .ok-calc__res{ justify-content:flex-end; gap:4px; margin:0; }
  .ok-calc .ok-calc__approx{ font-size:18px; color:var(--ok-blue); }
  html body .ok-calc .ok-calc__res b{ font-size:22px; color:var(--ok-ink); }
  .ok-calc .ok-calc__unit{ font-size:14px; color:var(--ok-text-2); }
  .ok-calc .ok-calc__res-note{ grid-column:1 / -1; font-size:12px; color:var(--ok-text-muted); }

  .ok-calc .okna-calc-msg{ margin:10px 0 0; color:var(--ok-text-2); }
  .ok-calc .okna-calc-msg.is-error{ color:var(--ok-red); }
  .ok-calc .okna-calc-msg.is-warn{ color:var(--ok-text-2); }

  .ok-calc .ok-calc__tip{
    margin-top:10px;
    padding:12px 14px;
    border-color:var(--ok-border);
    background:var(--ok-section-b);
  }
  .ok-calc .ok-calc__tip svg{ stroke:var(--ok-blue); }
  .ok-calc .people{ color:var(--ok-text-2); }
}

@media (max-width:600px){
  html body .ok-calc{ padding-block:var(--ok-section-space-mobile) 48px; }  /* мастер: 44 / 48 */
  .ok-calc .ok-calc__h2{ margin-bottom:8px; }
  .ok-calc .ok-calc__sub{ margin-bottom:18px; font-size:14px; }
}

/* ⚠ ветки ≤480 у калькулятора НЕТ намеренно: мастер держит ТРИ поля в ряд и на
   390 (колонка 100.66px). При 375 колонка выходит 97px, при 320 — 82px, чего
   хватает четырёхзначному числу кеглем 16px (замер: «2200» ≈ 36px + padding 20).
   Схлопывание в две колонки разъехалось бы с мастером на целевом вьюпорте. */


/* ██████████████████████████████████████████████████████████████████████████████
   [CASES] · HC-12 · 15 «Примеры выполненных работ» (strip на мобилке)
   ------------------------------------------------------------------------------
   Разметка: inc/case-cpt.php::okna_cases_render() (НЕ ТРОГАЕМ — к ней привязаны
             попап-галерея и ЛЕНИВОЕ видео из assets/cases.js: data-media,
             .okna-case__play, okna_video_embed 4 источника).
   Обёртка:  blocks/cases-home.php печатает <div class="ok-cases ok-scope">.
   Данные:   okna_home_data('cases-home') → CPT okna_case + okna_cases_opts.

   ★ ЗАМЕР МАСТЕРА · ДЕСКТОП vp1440 ───────────────────────────────────────────
     секция ........ bg #f5f8fd · padding 72px 0 · h 652.5
     сетка ......... repeat(3,1fr) · gap 18 (колонка 393.33)
     карточка ...... bg #fff · 1px #e8ecf2 · r 16 · overflow hidden · flex column
                     hover: translateY(−4px) + shadow 0 14px 40px rgba(20,40,80,.10)
     медиа ......... 100% × 200 · object-fit cover
     бейдж ......... абс. top 10 left 10 · bg #fff · #123d87 · 12px/700
                     padding 5 11 · r 999
     тело .......... padding 18 20 20 · flex column · flex 1
     H3 ............ 17px/800 #123d87 · mb 6
     текст ......... 14px/1.55 #526173 · mb 12
     срок .......... mt auto · 13px…13.5px #526173 · border-top 1px #eef1f6 · pt 12
                     значение <b> #1c5bd6
   ★ ЗАМЕР МАСТЕРА · МОБАЙЛ 390 ───────────────────────────────────────────────
     секция ........ bg #f5f8fd · padding 44px 0 48px (боковых НЕТ — лента во всю ширину)
     H2 ............ 23px/800 · margin 0 16 16
     лента ......... flex · gap 12 · overflow-x auto · padding 2 16 10
                     scroll-snap-type x mandatory
     карточка ...... flex 0 0 270 · r 16 · overflow hidden
     фото .......... 100% × 150 cover
     тело .......... padding 14 16 16
     бейдж ......... В ПОТОКЕ (не поверх фото) · bg #eef3fc · #123d87 · 11px/700
                     padding 3 9 · r 999 · mb 8
     H3 ............ 15px/800 #1d2433 · mb 5 · текст 13px/1.5 #526173
   ★ ОТКЛОНЕНИЕ: бейдж рендерера лежит ВНУТРИ .okna-case__media (абсолютом поверх
     фото) и на мобилке остаётся там же — переносить его в тело можно только
     правкой рендерера, а он общий с другими шаблонами. Абсолютный бейдж на фото
     мастер использует на десктопе, так что язык дизайна сохранён.
   ★ ОТКЛОНЕНИЕ: строка «Срок» в мобильном мастере не показана — оставляем
     (это ДАННЫЕ из меты _case_term, а не декор).
   ████████████████████████████████████████████████████████████████████████████ */

/* Секция печатается рендерером ВНУТРИ .ok-cases, поэтому `.glavnaya-v4 > section`
   до неё не достаёт — вертикальный ритм задаём сами. */
.ok-cases .okna-cases{
  margin:0;
  padding-block:var(--ok-section-space-desktop);   /* 72px */
  background:var(--ok-section-b);
  color:var(--ok-text);
  font-family:var(--ok-font);
}
/* Контейнер рендерера — старый .okna-wrap (1200/40). Приводим к контракту 06:
   1280/32. `html body` даёт (0,3,2) против `.glavnaya-v4 .okna-wrap` (0,2,0). */
html body .ok-cases .okna-wrap{
  width:100%;
  max-width:var(--ok-container-max);               /* 1280 */
  margin-inline:auto;
  padding-inline:var(--ok-container-pad-desktop);  /* 32 */
  box-sizing:border-box;
}

.ok-cases .okna-cases__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--ok-gap-cards);                         /* 18px */
  margin-top:0;
  align-items:stretch;
}

.ok-cases .okna-case{
  display:flex;
  flex-direction:column;
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-card);             /* 16 (у канона 18) */
  background:var(--ok-section-a);
  box-shadow:none;                                 /* мастер: тень только на hover */
  transition:transform .2s ease, box-shadow .2s ease;
}
.ok-cases .okna-case:hover{
  transform:translateY(-4px);
  box-shadow:var(--ok-shadow-card-hover);
}
@media (prefers-reduced-motion:reduce){
  .ok-cases .okna-case{ transition:none; }
  .ok-cases .okna-case:hover{ transform:none; }
}

/* Мастер даёт фиксированные 200px, канон — aspect-ratio 16/9 (на 393px это 221).
   Высоту задаём контейнеру: у .okna-case__img в glavnaya.css стоит
   `width/height:100%!important`, он честно заполнит новый размер. */
.ok-cases .okna-case__media{
  aspect-ratio:auto;
  height:200px;
}
.ok-cases .okna-case__badge{
  top:10px;
  left:10px;
  padding:5px 11px;
  border-radius:var(--ok-radius-pill);
  background:var(--ok-section-a);
  color:var(--ok-ink);
  font-size:12px;
  font-weight:var(--ok-fw-bold);
  box-shadow:none;
}
.ok-cases .okna-case__body{ padding:18px 20px 20px; }
.ok-cases .okna-case__title{
  margin:0 0 6px;
  font-size:17px;
  font-weight:var(--ok-fw-black);
  line-height:1.3;
  color:var(--ok-ink);
}
.ok-cases .okna-case__title a{ color:inherit; }
.ok-cases .okna-case__text{
  margin:0 0 12px;
  font-size:14px;
  line-height:var(--ok-lh-body);
  color:var(--ok-text-2);
}
.ok-cases .okna-case__term{
  margin:auto 0 0;
  padding-top:12px;
  border-top:1px solid var(--ok-bg);               /* #eef1f6 — токен совпал точно */
  font-size:13.5px;
  font-weight:var(--ok-fw-regular);
  color:var(--ok-text-2);
}
.ok-cases .okna-case__term b{
  font-weight:var(--ok-fw-bold);
  color:var(--ok-blue);
}
.ok-cases .okna-cases__foot{ margin-top:26px; }

/* ── [CASES] РЕСПОНСИВ ────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .ok-cases .okna-cases{ padding-block:var(--ok-section-space-tablet); }
  html body .ok-cases .okna-wrap{ padding-inline:var(--ok-container-pad-tablet); }
  /* Канон 06: 3 → 2 колонки. Специфичность (0,3,0) перебивает
     `.okna-cases--grid .okna-cases__grid` (0,2,0) из glavnaya.css. */
  .ok-cases .okna-cases .okna-cases__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
}

@media (max-width:768px){
  /* Мастер на мобилке — горизонтальная лента карточек 270px со снапом.
     Скроллится САМ ряд (правило 06 §3 п.9): страница горизонтально не едет. */
  .ok-cases .okna-cases .okna-cases__grid{
    display:flex;
    grid-template-columns:none;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* Осознанный bleed: ряд выходит ровно на боковой padding контейнера и тут же
       возвращает его себе внутрь — края карточек не липнут к экрану. */
    margin-inline:calc(var(--ok-container-pad-tablet) * -1);
    padding-inline:var(--ok-container-pad-tablet);
    padding-bottom:10px;
  }
  .ok-cases .okna-cases__grid::-webkit-scrollbar{ display:none; }
  .ok-cases .okna-case{
    flex:0 0 270px;
    scroll-snap-align:start;
  }
  .ok-cases .okna-case__media{ height:150px; }
  .ok-cases .okna-case__body{ padding:14px 16px 16px; }
  /* !important — блочное значение 15px против okna-mobile.css
     `body h3{font-size:19px!important}` (0,0,2); специфичность (0,2,0) выше. */
  .ok-cases .okna-case__title{ font-size:15px !important; margin-bottom:5px; color:var(--ok-text); }
  .ok-cases .okna-case__text{ font-size:13px; line-height:1.5; margin-bottom:10px; }
  .ok-cases .okna-case__term{ font-size:12.5px; padding-top:10px; }
  .ok-cases .okna-case__badge{ font-size:11px; padding:3px 9px; }
}

@media (max-width:600px){
  .ok-cases .okna-cases{ padding-block:var(--ok-section-space-mobile) 48px; }
  html body .ok-cases .okna-wrap{ padding-inline:var(--ok-container-pad-mobile); }
  .ok-cases .okna-cases__head{ margin-bottom:16px; flex-direction:column; align-items:flex-start; gap:6px; }
  .ok-cases .okna-cases__seeall{ display:none; }   /* ВЫП113: на мобилке кнопка в .okna-nhome-allm ПОД лентой (как у блога) */
  .ok-cases .okna-cases__head .okna-section-title{ margin-bottom:10px; }
  /* В мобильном мастере у кейсов подзаголовка нет вовсе; у нас это редактируемый
     контент (okna_cases_opts.subtitle) — оставляем, но кеглем мобильной прозы. */
  .ok-cases .okna-cases__head .okna-section-sub{ font-size:14px; }
  .ok-cases .okna-cases .okna-cases__grid{
    margin-inline:calc(var(--ok-container-pad-mobile) * -1);
    padding-inline:var(--ok-container-pad-mobile);
  }
}

@media (max-width:480px){
  /* Карточка не должна занимать весь экран: остаётся «подглядывание» следующей. */
  .ok-cases .okna-case{ flex-basis:min(270px, 80vw); }
}


/* ██████████████████████████████████████████████████████████████████████████████
   [FAQ] · HC-12 · 17 «Частые вопросы»
   ------------------------------------------------------------------------------
   Разметка: template-parts/home/blocks/faq.php.
   Данные:   okna_home_data('faq') → okna_faq_pairs() (ACF faq_q1..6 своей
             страницы), на ГЕО — строка okna_geo.faq. Schema FAQPage —
             okna_faq_jsonld() (печатается только при ≥2 парах).
   ★ КАНОН СОХРАНЁН: секция несёт класс .okna-faq, поэтому базовый вид FAQ
     по-прежнему приходит из design.css (FORBID — не правим), а этот слой лишь
     доводит числа до мастера. Кружок «+» рисует ::before канона — своего <span>
     мы НЕ печатаем, иначе значков было бы два. Состояние [open] («×» на синем)
     наследуется от канона (в мастере оно не описано).

   ★ ЗАМЕР МАСТЕРА · ДЕСКТОП vp1440 ───────────────────────────────────────────
     секция ........ bg #f5f8fd · padding 72px 0 · h 680
     H2 ............ mb 30
     деталь ........ bg #fff · 1px #e8ecf2 · r 10 · mb 10 · padding 0 22 · h 66
                     (последняя — без mb)
     summary ....... flex row-reverse + justify flex-end (значок СЛЕВА)
                     gap 14 · align center · 16.5px/700 #123d87 · padding 18 0
     значок ........ 28×28 · r 999 · bg #eef3fc · #1c5bd6 · 18px/700
     ответ ......... padding 0 0 18 (БЕЗ левого отступа) · 15px/1.6 #526173
   ★ ЗАМЕР МАСТЕРА · МОБАЙЛ 390 ───────────────────────────────────────────────
     секция ........ bg #f5f8fd · padding 44 16 48 · H2 23px/800 mb 14
     деталь ........ r 10 · mb 8 · padding 0 16
     summary ....... space-between (значок СПРАВА) · gap 12 · 14.5px/700 #1d2433
                     lh 1.35 · padding 15 0
     значок ........ 24×24 · ответ padding 0 0 15 · 13.5px/1.6
   ████████████████████████████████████████████████████████████████████████████ */

/* `html body` (0,1,3 со своими классами) — против `.glavnaya-v4 > section{padding:32px}`. */
html body .ok-faq.okna-faq{
  max-width:none;
  margin:0;
  padding-block:var(--ok-section-space-desktop);   /* 72px */
  background:var(--ok-section-b);
  color:var(--ok-text);
  font-family:var(--ok-font);
}

.ok-faq .ok-faq__head{ margin-bottom:30px; }

.ok-faq.okna-faq details{
  margin-bottom:10px;
  padding:0 22px;
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-dropdown);         /* 10px (у канона 16) */
  background:var(--ok-section-a);
  box-shadow:none;
}
.ok-faq.okna-faq details:last-of-type{ margin-bottom:0; }

/* ★ ЗАМЕР ПОЙМАЛ: в мастере `flex-direction:row-reverse` нужен потому, что там
   значок — РЕАЛЬНЫЙ <span> ПОСЛЕ текста, и реверс выводит его влево. У нас значок
   рисует ::before КАНОНА, то есть он и так первый в потоке: реверс уносил бы его
   ВПРАВО. Поэтому здесь обычный `row` — результат совпадает с мастером (кружок
   слева, вопрос справа), а на мобилке значок уводится вправо через order (ниже). */
.ok-faq.okna-faq summary{
  display:flex;
  flex-direction:row;
  justify-content:flex-start;
  align-items:center;
  gap:14px;
  padding:18px 0;
  font-size:var(--ok-fs-intro);                    /* 16.5px */
  font-weight:var(--ok-fw-bold);
  line-height:1.35;
  color:var(--ok-ink);
}
.ok-faq.okna-faq summary::before{
  width:28px;
  height:28px;
  border:0;
  background:var(--ok-tint-blue);
  color:var(--ok-blue);
  font-size:18px;
  font-weight:var(--ok-fw-bold);
}
.ok-faq.okna-faq details[open] summary::before{
  background:var(--ok-blue);
  color:var(--ok-on-dark);
}
/* B1/B2 — отклик наведения/нажатия на строку вопроса. В каноне FAQ (design.css)
   у summary есть только cursor:pointer, без :hover — добавляем в СВОЁМ скоупе.
   Меняем лишь цвет текста; значок ::before (в т.ч. состояние [open]) наследуется
   от канона. Токены, 0 новых #hex, без !important (своя специфичность (0,3,1)). */
.ok-faq.okna-faq summary{ transition:color .15s ease; }
.ok-faq.okna-faq summary:hover{ color:var(--ok-blue); }
.ok-faq.okna-faq summary:active{ color:var(--ok-blue-hover); }
@media (prefers-reduced-motion:reduce){ .ok-faq.okna-faq summary{ transition:none; } }
/* Мастер: ответ начинается от края карточки, без «лесенки» под текстом вопроса
   (канон сдвигает его на 50px = кружок 34 + gap 16). */
.ok-faq.okna-faq details > div{
  padding:0 0 18px;
  font-size:15px;
  line-height:1.6;
  color:var(--ok-text-2);
}

/* ── [FAQ] РЕСПОНСИВ ──────────────────────────────────────────────────────── */
@media (max-width:1024px){
  html body .ok-faq.okna-faq{ padding-block:var(--ok-section-space-tablet); }
}

@media (max-width:768px){
  .ok-faq .ok-faq__head{ margin-bottom:14px; }
  .ok-faq.okna-faq details{ margin-bottom:8px; padding:0 16px; }
  .ok-faq.okna-faq summary{
    flex-direction:row;                            /* мастер-мобайл: значок СПРАВА */
    justify-content:space-between;
    gap:12px;
    padding:15px 0;
    font-size:14.5px;
    line-height:1.35;
    color:var(--ok-text);
  }
  .ok-faq.okna-faq summary::before{ order:2; width:24px; height:24px; font-size:16px; }
  .ok-faq.okna-faq details > div{ padding:0 0 15px; font-size:13.5px; }
}

@media (max-width:600px){
  html body .ok-faq.okna-faq{ padding-block:var(--ok-section-space-mobile) 48px; }
}




/* ██████████████████████████████████████████████████████████████████████████████
   [CERTIFICATES] · HC-12 · 17.2 «Статусы и гарантии»
   ------------------------------------------------------------------------------
   Разметка: inc/status-cards.php::okna_status_cards() (НЕ ТРОГАЕМ — тот же рендер
             стоит на странице «О компании»; поле img готово под сканы дипломов).
   Секцию печатает blocks/certificates-home.php: <section class="ok-certificates ok-scope">.
   Данные:   okna_home_data('certificates-home') → okna_status_cards_data().

   ★ ЗАМЕР МАСТЕРА · ДЕСКТОП vp1440 ───────────────────────────────────────────
     секция ........ bg #f5f8fd · padding 72px 0 · h 615.34
     сетка ......... repeat(3,1fr) · gap 18 (карточка 393.33×276.75)
     карточка ...... bg #fff · 1px #e8ecf2 · r 16 · padding 24 · flex column · gap 10
     иконка-бокс ... 56×56 · r 14 · bg #eef3fc · mb 4 (svg ≈26×31)
     заголовок ..... 17px/800 #123d87 · текст 14px/1.55 #526173
     бейдж ......... mt auto · align-self flex-start · bg #eef3fc · 12px/800
                     padding 5 11 · r 999 · цвет #1c5bd6 (у 3-й карточки #123d87)
   ★ ЗАМЕР МАСТЕРА · МОБАЙЛ 390 ───────────────────────────────────────────────
     секция ........ bg #f5f8fd · padding 44 16 48 · H2 23px/800 mb 14
     колонка ....... flex column · gap 10 · карточка padding 16 · r 16
     заголовок ..... 15px/800 #1d2433 mb 5 · текст 13px/1.5 mb 10
     бейдж ......... 11px/800 · padding 4 9
   ★ ОТКЛОНЕНИЕ 1: заголовок карточки печатается как <h4> (так в рендерере), в
     мастере это <h3>. Уровень НЕ меняем — иначе поедет дерево заголовков всей
     страницы и SEO-слепок покажет расхождение. Вид доведён стилями.
   ★ ОТКЛОНЕНИЕ 2: в мобильном мастере первые два бейджа зелёные, третий синий.
     Класс у всех трёх один (.gv-cert__badge), различие в мастере — позиционное.
     Красить по :nth-child() = привязать цвет к ПОРЯДКУ данных: владелец поменяет
     карточки местами — поедет смысл. Поэтому цвет привязан к ДАННЫМ: бейдж
     «Фиксируем в договоре» отличается от «Статус подтверждён» только текстом,
     класса под это в рендерере нет → оставляем единый синий бейдж мастера
     (десктопный вариант). Заявка на модификатор в рендерере — в отчёте HC-12.
   ████████████████████████████████████████████████████████████████████████████ */

html body .ok-certificates{
  max-width:none;
  margin-inline:0;
  padding-block:var(--ok-section-space-desktop);   /* 72px */
  background:var(--ok-section-b);
  color:var(--ok-text);
  font-family:var(--ok-font);
}

.ok-certificates .gv-cert__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--ok-gap-cards);                         /* 18px */
}
.ok-certificates .gv-cert__card{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:24px;
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-card);
  background:var(--ok-section-a);
  box-shadow:none;
}
.ok-certificates .gv-cert__ico{
  width:56px;
  height:56px;
  margin-bottom:4px;
  border-radius:14px;
  background:var(--ok-tint-blue);
}
.ok-certificates .gv-cert__scan{ margin-bottom:0; border-radius:var(--ok-radius-dropdown); }
.ok-certificates .gv-cert__card h4{
  margin:0;
  font-size:17px;
  font-weight:var(--ok-fw-black);
  line-height:1.3;
  color:var(--ok-ink);
}
.ok-certificates .gv-cert__card p{
  margin:0;
  font-size:14px;
  line-height:var(--ok-lh-body);
  color:var(--ok-text-2);
}
.ok-certificates .gv-cert__badge{
  margin-top:auto;
  align-self:flex-start;
  padding:5px 11px;
  border-radius:var(--ok-radius-pill);
  background:var(--ok-tint-blue);
  color:var(--ok-blue);
  font-size:12px;
  font-weight:var(--ok-fw-black);
  line-height:1.35;
}

/* ── [CERTIFICATES] РЕСПОНСИВ ─────────────────────────────────────────────── */
@media (max-width:1024px){
  html body .ok-certificates{ padding-block:var(--ok-section-space-tablet); }
  .ok-certificates .gv-cert__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
}

@media (max-width:768px){
  .ok-certificates .gv-head{ margin-bottom:14px; }
  .ok-certificates .gv-head .gv-eyebrow{ margin-bottom:10px; padding:6px 11px; font-size:11.5px; }
  .ok-certificates .gv-head h2{ padding-bottom:12px; }
  .ok-certificates .gv-head__sub{ font-size:14px; }
  .ok-certificates .gv-cert__grid{ grid-template-columns:minmax(0,1fr); gap:10px; }
  .ok-certificates .gv-cert__card{ padding:16px; gap:0; }
  .ok-certificates .gv-cert__ico{ width:44px; height:44px; margin-bottom:10px; border-radius:12px; }
  .ok-certificates .gv-cert__card h4{ margin-bottom:5px; font-size:15px; color:var(--ok-text); }
  .ok-certificates .gv-cert__card p{ margin-bottom:10px; font-size:13px; line-height:1.5; }
  .ok-certificates .gv-cert__badge{ margin-top:0; padding:4px 9px; font-size:11px; }
}

@media (max-width:600px){
  html body .ok-certificates{ padding-block:var(--ok-section-space-mobile) 48px; }
}