/* ============================================================================
   ok-home-w3.css — HOME-SHELL-V2 · ВОЛНА 3 (HC-11)
   ----------------------------------------------------------------------------
   ЧТО ЗДЕСЬ. Слой представления ТРЁХ блоков каскада Главной (и ~1200 ГЕО):
     [PROCESS]    09 · «Как проходит замена стекла»
     [B2B]        11 · «Автопаркам и транспортным компаниям»
     [GEO]        13 · «География выезда» + живая форма проверки выезда
   ★ [GUARANTEE] 12 «Гарантия, документы и работа по договору» ВЫНЕСЕН в
     assets/ok-guarantee.css — это SHARED-стили блока для Главной/ГЕО и страницы
     «О компании» (/o-kompanii/): главная и /o-kompanii/ читают ОДИН файл.

   ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ. Волны HC-08…HC-13 идут ПАРАЛЛЕЛЬНО, а ok-home.css один
   на всех — одновременная запись в него = гонка. Поэтому у волны 3 свой лист;
   HC-14/HC-16 сливают w1/w2/w3 обратно в ok-home.css (секции уже названы так же,
   как якоря в его оглавлении, слияние — копипастой блока целиком).

   ═══ ПРАВИЛА ФАЙЛА (14_CSS_JS_ARCHITECTURE §16 — те же, что в ok-home.css) ═══
     1. Скоуп. Каждое правило начинается с класса своего блока (.ok-proc / .ok-b2b
        / .ok-guar / .ok-geo). Глобальных селекторов нет — слой не протекает ни в
        шапку/футер, ни в FORBID-зоны (услуга, каталог).
     2. Цвет. Ноль литералов #hex: только токены --ok-* (assets/ok-tokens.css).
        Промежуточные тона — color-mix() из токенов, с подписанной ΔE.
     3. !important — не метод. Он стоит РОВНО в трёх местах, каждое подписано:
        а) против UA-стиля <details> (форс-раскрытие шагов на десктопе);
        б) против geo-request.css там, где старое правило само стоит с !important;
        в) против okna-mobile.css: глобальная мобильная типографика объявлена там
           через !important (`body h3{font-size:19px !important}`), а мастер даёт
           у H3 внутри блоков 13.5-17px. H2 НЕ перебиваем — там канон okna-mobile
           (23px) совпадает с мастером.
        TT1 (twentytwentyone/style.css грузится ДВАЖДЫ) перебивается
        СПЕЦИФИЧНОСТЬЮ — префиксом `html body .ok-…`, а не порядком enqueue.
     4. Брейкпоинты — КАНОН: 1024 / 768 / 600 / 480. Медиа-правила блока стоят в
        КОНЦЕ его же секции.
     5. Числа — из ЖИВОГО ЗАМЕРА мастера (headless Chrome 150, file://,
        «02 Главная.dc.html», vp 1440 и кадр 390). Замер подписан в шапке секции.

   ★ ПОРЯДОК ЗАГРУЗКИ (замер живого HTML): цепочка ok-* печатается РАНЬШЕ, чем
     glavnaya.css / org.css / geo-request.css и второй экземпляр TT1. То есть на
     равной специфичности выигрывает СТАРЫЙ файл. Поэтому:
       · новые блоки используют НОВЫЕ имена классов (.ok-proc__*, .ok-b2b__*,
         .ok-guar__*, .ok-geo__*) — с ними пересечений нет вовсе;
       · единственное исключение — форма гео: её классы .okna-geo-req__* нельзя
         переименовать (за них держится assets/geo-request.js), поэтому старые
         правила перебиваются составным селектором `.ok-geo .okna-geo-req__…`
         (0,2,0 против 0,1,0) — специфичностью, а не порядком.

   ENQUEUE: handle `okna-ok-home-w3`, зависимость — `okna-ok-home`
   (цепочка ok-tokens → ok-foundation → ok-layout → ok-header → ok-footer →
   ok-home → ok-home-w3), версия filemtime, только за флагом okna_home_shell_v2().
   ============================================================================ */


/* ══════════════════════════════════════════════════════════════════════════════
   [W3.0] ОБЩИЕ ТОНЫ ВОЛНЫ — color-mix из токенов (правило 2)
   ------------------------------------------------------------------------------
   Считано скриптом (ΔE76 в Lab, перебор пар токенов × 1..99%). В комментарии —
   какой цвет мастера воспроизводим, что даёт смесь и ΔE. Переменные объявлены на
   :root ОДИН раз (а не в каждом блоке) — их делят [PROCESS] и [GEO], [B2B].
   (Копия токенов для [GUARANTEE] живёт в assets/ok-guarantee.css — там они нужны
   на страницах вне каскада, например на /o-kompanii/.) Префикс --okw3- (свой,
   чтобы не столкнуться с --okh- из HC-08).
   ============================================================================ */
:root{
  /* нейтрали и синие тинты */
  --okw3-tint-line:color-mix(in srgb, var(--ok-blue) 11%, var(--ok-section-b));       /* #dbe6f8 → #dde7f9 · ΔE 0.59 — рамка голубой врезки/зоны */
  --okw3-ice:color-mix(in srgb, var(--ok-tint-blue) 90%, var(--ok-border-outline));   /* #eaf1fb → #ebf0fa · ΔE 0.53 — кружок иконки карточки */
  --okw3-paper:color-mix(in srgb, var(--ok-on-dark) 62%, var(--ok-section-b));        /* #fbfdff → #fbfcfe · ΔE 0.35 — «страница» паспорта */
  --okw3-dash:color-mix(in srgb, var(--ok-bg) 33%, var(--ok-border-outline));         /* #d9e1ee → #d9e1ee · ΔE 0.11 — пунктир между тезисами */
  --okw3-ring:color-mix(in srgb, var(--ok-section-b) 53%, var(--ok-border-outline));  /* #e3eaf5 → #e3e9f4 · ΔE 0.34 — рамка кружка-иконки */
  --okw3-bar:color-mix(in srgb, var(--ok-text) 71%, var(--ok-text-2));                /* #2a3648 → #2c3646 · ΔE 1.63 — штрих-код паспорта */
  /* тексты на тёмном */
  --okw3-on-dark-2:color-mix(in srgb, var(--ok-muted-seed) 31%, var(--ok-tint-blue)); /* #cfd6e2 → #cfd6e1 · ΔE 0.23 — лид на тёмном */
  --okw3-on-dark-3:color-mix(in srgb, var(--ok-muted-seed) 77%, var(--ok-border-outline)); /* #9aa4b6 → #9aa4b6 · ΔE 0.14 — вторичный на тёмном */
  --okw3-on-navy:color-mix(in srgb, var(--ok-blue) 25%, var(--ok-on-dark));           /* #c6d4f2 → #c6d6f5 · ΔE 0.90 — текст паспорта */
  --okw3-navy-line:color-mix(in srgb, var(--ok-blue-hover) 68%, var(--ok-border));    /* #5f7cc0 → #587cc1 · ΔE 1.88 — черта в паспорте */
  --okw3-navy-label:color-mix(in srgb, var(--ok-on-dark) 43%, var(--ok-blue));        /* #7fa6ef → #7ea2e8 · ΔE 2.22 — подпись паспорта (моб.) */
  /* тёмно-синие подложки паспорта */
  --okw3-navy:color-mix(in srgb, var(--ok-blue-hover) 74%, var(--ok-dark));           /* #16337f → #133b86 · ΔE 4.15 — под обложкой паспорта (видна только пока грузится webp) */
  /* ★ ИСПРАВЛЕНО (замечание владельца «на сайте фон синий, а ты сделал тёмный»):
     здесь стояла смесь с --ok-dark и выходило #14223e — почти чёрно-синий.
     Эталон рабочей версии — #17377e, насыщенный синий. Берём его от --ok-ink
     (#123d87), он ближе всего; --ok-dark из формулы убран. */
  --okw3-navy-a:color-mix(in srgb, var(--ok-ink) 88%, var(--ok-blue));                /* ≈#16397f · старт градиента (моб.), эталон #17377e */
  --okw3-navy-b:var(--ok-hero-dark-b);                                               /* #0b1f3f — эталон (HC-14 внёс токен) */
  /* стекло на тёмном — эталонные rgba(255,255,255,x) */
  --okw3-hair:color-mix(in srgb, var(--ok-on-dark) 12%, transparent);                 /* эталон rgba(255,255,255,.12) — разделитель строк B2B */
  /* ✔ РАЗРЫВ ПАЛИТРЫ ЗАКРЫТ В HC-14. Галочка B2B в мастере — #3fd07a (яркий
     зелёный на тёмном); полный перебор пар токенов давал минимум ΔE 19.2, то есть
     цель была физически вне охвата палитры. Заявка волны 3 исполнена: цвет внесён
     в 07_DESIGN_TOKEN_REGISTRY и ok-tokens.css как --ok-success-bright. */
  --okw3-check:var(--ok-success-bright);                                             /* #3fd07a — эталон */
}


/* ══════════════════════════════════════════════════════════════════════════════
   [W3.1] ВЕРТИКАЛЬНЫЙ РИТМ СЕКЦИЙ — ✔ ЗАЯВКА ЗАКРЫТА В HC-14
   ------------------------------------------------------------------------------
   Было: класс `.ok-section` (72/56/44/32) не доходил до блока — glavnaya.css:54
   держит `.glavnaya-v4 > section{ padding:32px 0 }` (0,1,1 против 0,1,0), и волна
   лечила это своим перечислением четырёх секций (16 строк с медиа-ветками).
   Стало: правило централизовано ровно в том виде, в котором волна его и заказывала
   — ok-legacy-compat.css §[1] `html body .glavnaya-v4 > .ok-section{ padding-block:…}`.
   Локальный дубль снят; значения те же токены, геометрия секций не изменилась
   (замер до/после — в отчёте HC-14). Класс .ok-section на секциях волны ОСТАЁТСЯ —
   именно он и есть точка приложения централизованного правила.
   ============================================================================ */

/* ✔ MANROPE ВНУТРИ <ul>/<ol> — ЗАЯВКА ЗАКРЫТА В HC-14. Виновник (twentytwentyone
   style.css:2636 `ul, ol{font-family:var(--list--font-family)}`) бьёт по самому
   списку, а `.ok-scope{font-family}` стоит на секции — наследование проигрывает
   прямому объявлению. Лечение вынесено в ok-legacy-compat.css §[2] на ВСЕ списки
   оболочки; локальное перечисление пяти списков снято. */



/* ██████████████████████████████████████████████████████████████████████████████
   [PROCESS] · HC-11 · 09 «Как проходит замена стекла»
   ------------------------------------------------------------------------------
   Разметка: template-parts/home/blocks/process-steps.php
   Эталон:   «02 Главная.dc.html» → data-screen-label="09 Как проходит замена"
             (десктоп) и <!-- M9 --> (мобильный кадр 390).

   ★ ЖИВОЙ ЗАМЕР ─ ДЕСКТОП vp1440 ────────────────────────────────────────────
     секция ......... h 887.44 · bg #f5f8fd · padding 72 0
     контейнер ...... 1280 · padding 0 32 · grid minmax(0,1fr) minmax(0,1.15fr)
                      gap 44 · align-items stretch → колонки 545.11 / 626.89
     H2 ............. 34/800 · ls −.34px · #123d87 · подчёркивание 44×3 #e0223a
                      слева снизу · padding-bottom 14 · margin-bottom 12 → h 60
     подзаголовок ... 16.5/400 · lh 25.575 · #526173 · mb 26
     фото ........... w 100% · flex 1 1 auto · min-height 300 · cover · r16
                      (замер 545.11×594.31 — тянется до низа колонки)
     карточка ....... #fff · 1px #e8ecf2 · r16 · padding 28 30 → 626.89×743.44
     шаг ............ flex · gap 16 · padding-bottom 20 (последний 0) → h 98.94
     кружок ......... 34×34 · r999 · bg #1c5bd6 · 15/800 #fff · по центру
     тело шага ...... border-left 2 #e8ecf2 · margin-left −33 · padding-left 49
                      → линия на x=17, текст на x=66 (проверено: 564.89−17−49−2)
     заголовок шага . 16/800 #1d2433 · margin 6 0 4
     текст шага ..... 14.5/400 · lh 22.475 · #526173
     врезка ......... flex gap 14 · bg #eef3fc · 1px #dbe6f8 · r10 · p 18 20
                      · margin-top 24 → 564.89×194.75 · иконка 26 (stroke #1c5bd6)
     врезка H3 ...... 16.5/800 #123d87 · mb 6 · текст 14/400 lh 21.7 · mb 12
     цепочка ........ flex wrap · gap 6 · align center → h 29
     звено .......... #fff · 1px #dbe6f8 · r999 · p 5 11 · 12.5/700 #123d87
     стрелка ........ 12px #8a94a6 «→»

   ★ ЖИВОЙ ЗАМЕР ─ МОБАЙЛ (кадр 390) ─────────────────────────────────────────
     секция ......... padding 44 16 48 · контент 356 · h 1015.34
     H2 23/800 mb 8 · подзаголовок 14/400 lh 21.7 mb 16 · фото r16 mb 16
     шаг = <details> 1px #e8ecf2 · r10 · padding 0 16 · mb 8 (последний 14)
     summary ........ flex gap 12 · min-height 52 · padding 12 0 · 15/700 #1d2433
     кружок ......... 28×28 · 13/800
     панель ......... padding 0 0 14 40 · 13.5/400 · lh 20.925 · #526173
     врезка ......... p 16 · H3 15/800 mb 6 · текст 13/400 lh 20.15 mb 10
     цепочка ........ flex NOWRAP · center · min-height 64 · звенья 11/700 p 4 8
                      · чётные ↓12px, нечётные ↑12px · стрелки 13px ±38° · mx −4

   ★ ОДНО ДЕРЕВО НА ОБА ВЬЮПОРТА. В мастере десктоп — раскрытый список, мобилка —
     <details>. Дублировать разметку нельзя (дубль текста = SEO-дубль), поэтому
     дерево ОДНО: native <details> (мобилка получает эталон без единой строки JS,
     работает и с выключенным JS), а на десктопе шаг ФОРС-РАСКРЫТ чистым CSS.
     Форс написан в двух видах, потому что Chrome сменил реализацию:
       · старый UA-стиль `details:not([open]) > *:not(summary){display:none}`
       · новый — псевдоэлемент ::details-content + content-visibility.
     Оба перекрыты ниже (это и есть !important-исключение «а» из шапки файла).

   ★ ФОН НА МОБИЛКЕ. В мастере мобильная M9 белая, а десктопная секция #f5f8fd.
     Держим ОДИН фон секции (#f5f8fd) на всех вьюпортах: чередование A↔B задаётся
     соседними блоками (их делают другие волны), и перекрашивание секции по
     брейкпоинту рассинхронизировало бы ритм. Осознанное отклонение, см. отчёт.
   ============================================================================ */

.ok-proc{ background:var(--ok-section-b); }

.ok-proc__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);   /* ЗАМЕР: 545.11 / 626.89 при 1216 */
  gap:var(--ok-gap-cols);                                  /* 44 */
  align-items:stretch;
}

/* ── левая колонка ───────────────────────────────────────────────────────── */
.ok-proc__intro{ display:flex; flex-direction:column; min-width:0; }

/* H2 с красным подчёркиванием — приём мастера: линия рисуется фоном, поэтому не
   ломается при переносе строк и не требует ::after (который забирал бы z-index). */
html body .ok-proc__h2{
  margin:0 0 12px;
  padding-bottom:14px;
  font-size:var(--ok-fs-h2);
  font-weight:var(--ok-fw-black);
  line-height:normal;                      /* ЗАМЕР: в мастере lh не задан (строка 46px) */
  letter-spacing:var(--ok-ls-h2);
  color:var(--ok-ink);
  background:linear-gradient(var(--ok-red), var(--ok-red)) left bottom / 44px 3px no-repeat;
}

html body .ok-proc__sub{
  margin:0 0 26px;
  font-size:var(--ok-fs-intro);          /* 16.5 */
  line-height:var(--ok-lh-body);         /* 1.55 → 25.575 */
  color:var(--ok-text-2);
}

.ok-proc__media{
  display:block;
  width:100%;
  flex:1 1 auto;                          /* фото добирает высоту колонки — как в мастере */
  min-height:300px;
  object-fit:cover;
  border-radius:var(--ok-radius-card);    /* 16 */
}

/* ── правая карточка ─────────────────────────────────────────────────────── */
.ok-proc__card{
  min-width:0;
  background:var(--ok-section-a);
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-card);
  padding:28px 30px;
}

.ok-proc__steps{ list-style:none; margin:0; padding:0; }

.ok-proc__step{
  position:relative;
  padding-bottom:20px;
}
.ok-proc__step:last-child{ padding-bottom:0; }

/* вертикальная линия таймлайна: в мастере это border-left тела шага, сдвинутый
   на центр кружка (x=17). Рисуем псевдоэлементом — так линия не зависит от того,
   раскрыт шаг или нет, и не требует отрицательных margin'ов. */
.ok-proc__step::before{
  content:"";
  position:absolute;
  left:16px; top:0; bottom:0;
  width:2px;
  background:var(--ok-border);
}
.ok-proc__step:last-child::before{ content:none; }

.ok-proc__det{ position:relative; }

.ok-proc__head{
  display:flex;
  align-items:center;
  gap:32px;                               /* 34(кружок)+32 = текст на x=66 — как в мастере */
  list-style:none;
  cursor:pointer;
}
.ok-proc__head::-webkit-details-marker{ display:none; }   /* Safari-треугольник */
.ok-proc__head::marker{ content:""; }

.ok-proc__num{
  position:relative;                      /* поверх линии таймлайна */
  z-index:1;
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px;
  border-radius:var(--ok-radius-pill);
  background:var(--ok-blue);
  color:var(--ok-on-dark);
  font-size:15px;
  font-weight:var(--ok-fw-black);
}

.ok-proc__title{
  flex:1 1 auto;
  min-width:0;
  font-size:16px;
  line-height:normal;                      /* ЗАМЕР 22 (не 1.55 от .glavnaya-v4) */
  font-weight:var(--ok-fw-black);
  color:var(--ok-text);
}

.ok-proc__chev{
  flex:0 0 auto;
  display:none;                            /* десктоп: шаг раскрыт, стрелка не нужна */
  width:18px; height:18px;
  color:var(--ok-text-muted);
  transition:transform .2s ease;
}
.ok-proc__chev svg{ display:block; width:100%; height:100%; }

/* Текст на той же оси x=66, что и заголовок. Верхнего падинга НЕТ: в мастере шаг
   = один блок (заголовок с margin 6/4 + абзац), у нас — summary(34) + панель;
   ЗАМЕР: 34 + 44.94 = 78.94 — ровно высота тела шага в мастере. */
.ok-proc__panel{ padding:0 0 0 66px; }

html body .ok-proc__panel p{
  margin:0;
  font-size:var(--ok-fs-card);             /* 14.5 */
  line-height:var(--ok-lh-body);           /* 22.475 */
  color:var(--ok-text-2);
}

/* ФОРС-РАСКРЫТИЕ на десктопе. Перебиваем UA-стиль браузера — это единственный
   способ показать содержимое <details> без атрибута open; чужой !important
   (правило 3а шапки файла). Две записи = две реализации <details> в Chrome. */
@media (min-width:769px){
  .ok-proc__det:not([open]) > .ok-proc__panel{ display:block !important; }
  .ok-proc__det::details-content{
    content-visibility:visible !important;
    block-size:auto !important;
  }
  .ok-proc__head{ cursor:default; }
}

/* ── врезка «почему важна вклейка» ───────────────────────────────────────── */
.ok-proc__why{
  display:flex;
  gap:14px;
  margin-top:24px;
  padding:18px 20px;
  background:var(--ok-tint-blue);
  border:1px solid var(--okw3-tint-line);
  border-radius:var(--ok-radius-dropdown);  /* 10 */
}
.ok-proc__why-ic{
  flex:0 0 auto;
  margin-top:2px;
  color:var(--ok-blue);
}
.ok-proc__why-ic svg{ display:block; width:26px; height:26px; }
.ok-proc__why-body{ min-width:0; }

html body .ok-proc__why-h3{
  margin:0 0 6px;
  font-size:var(--ok-fs-intro);            /* 16.5 */
  font-weight:var(--ok-fw-black);
  line-height:normal;                      /* ЗАМЕР 23 */
  color:var(--ok-ink);
}
html body .ok-proc__why-text{
  margin:0 0 12px;
  font-size:14px;
  line-height:var(--ok-lh-body);           /* 21.7 */
  color:var(--ok-text-2);
}

.ok-proc__chain{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}
.ok-proc__chain-item{
  background:var(--ok-section-a);
  border:1px solid var(--okw3-tint-line);
  border-radius:var(--ok-radius-pill);
  padding:5px 11px;
  font-size:var(--ok-fs-micro);            /* 12.5 */
  font-weight:var(--ok-fw-bold);
  line-height:normal;                      /* ЗАМЕР 17 → звено h 29 */
  color:var(--ok-ink);
  white-space:nowrap;
}
.ok-proc__chain-arr{
  flex:0 0 auto;
  font-size:12px;
  line-height:normal;                      /* ЗАМЕР 17 */
  color:var(--ok-text-muted);
}

/* ── КАНОН-МЕДИА 1024 / 768 / 600 / 480 ──────────────────────────────────── */
@media (max-width:1024px){
  .ok-proc__grid{ gap:28px; }
  .ok-proc__card{ padding:24px; }
}
@media (max-width:768px){
  /* одна колонка + мобильная механика: шаги СВОРАЧИВАЮТСЯ (эталон M9) */
  .ok-proc__grid{ grid-template-columns:minmax(0,1fr); gap:0; }
  .ok-proc__media{ flex:0 0 auto; min-height:0; margin-bottom:16px; }
  .ok-proc__card{ padding:0; background:none; border:0; border-radius:0; }

  .ok-proc__step{ padding-bottom:0; margin-bottom:8px; }
  .ok-proc__step:last-child{ margin-bottom:14px; }
  .ok-proc__step::before{ content:none; }        /* карточки вместо таймлайна */

  .ok-proc__det{
    background:var(--ok-section-a);
    border:1px solid var(--ok-border);
    border-radius:var(--ok-radius-dropdown);
    padding:0 16px;
  }
  .ok-proc__head{
    gap:12px;
    min-height:52px;
    padding:12px 0;
    font-size:15px;
  }
  .ok-proc__num{ width:28px; height:28px; font-size:13px; }
  .ok-proc__title{ font-size:15px; font-weight:var(--ok-fw-bold); }
  .ok-proc__chev{ display:block; }
  .ok-proc__det[open] .ok-proc__chev{ transform:rotate(180deg); }
  /* B1/B2 — отклик заголовка-аккордеона (на ≤768 <details> = живой тумблер;
     на ≥769 шаг форс-раскрыт, cursor:default — там отклик не нужен). */
  .ok-proc__head:hover .ok-proc__title,
  .ok-proc__head:hover .ok-proc__chev{ color:var(--ok-blue); }
  .ok-proc__head:active{ transform:translateY(1px); }
  .ok-proc__panel{ padding:0 0 14px 40px; }
  html body .ok-proc__panel p{ font-size:13.5px; }

  /* В мастере на мобилке (M9/M11/M12) у H2 НЕТ красного подчёркивания: чистый
     заголовок без градиента и без нижнего падинга. Замер: с подчёркиванием было
     +14px высоты. Размер шрифта отдан глобальному канону okna-mobile.css. */
  html body .ok-proc__h2{ padding-bottom:0; background-image:none; line-height:var(--ok-lh-h2-mobile); margin-bottom:8px; }
  html body .ok-proc__sub{ font-size:14px; margin-bottom:16px; }   /* ЗАМЕР M9 */

  .ok-proc__why{ padding:16px; margin-top:0; }
  .ok-proc__why-ic{ display:none; }                 /* ЗАМЕР M9: во врезке иконки нет */
  /* !important — блочное значение 15px против `body h3{19px!important}`. */
  html body .ok-proc__why-h3{ font-size:15px !important; line-height:normal; }
  html body .ok-proc__why-text{ font-size:13px; margin-bottom:10px; }

  /* зигзаг-цепочка мастера: одна строка, звенья через одно ↑/↓, стрелки под углом.
     nowrap + flex:0 0 auto — иначе звенья распирают строку (переполнение 375). */
  .ok-proc__chain{
    flex-wrap:nowrap;
    justify-content:center;
    gap:0;
    min-height:64px;
  }
  /* Звенья и стрелки лежат вперемешку и оба <span>, поэтому считаем по
     :nth-child, а НЕ по :nth-of-type (тот считал бы их вместе: звенья всегда
     нечётные → зигзаг не срабатывал вовсе). Звено k = ребёнок 2k−1 (1,3,5,7,9),
     стрелка k = ребёнок 2k (2,4,6,8). Мастер: звенья через одно ↑/↓, стрелки
     через одну +38°/−38°. */
  .ok-proc__chain-item{
    flex:0 0 auto;
    padding:4px 8px;
    font-size:11px;
  }
  .ok-proc__chain-item:nth-child(4n+1){ transform:translateY(-12px); }   /* 1, 5, 9 */
  .ok-proc__chain-item:nth-child(4n+3){ transform:translateY(12px); }    /* 3, 7    */
  .ok-proc__chain-arr{
    margin:0 -4px;
    font-size:13px;
    line-height:1;
  }
  .ok-proc__chain-arr:nth-child(4n+2){ transform:rotate(38deg); }        /* 2, 6 */
  .ok-proc__chain-arr:nth-child(4n){ transform:rotate(-38deg); }         /* 4, 8 */
}
@media (prefers-reduced-motion:reduce){
  .ok-proc__chev{ transition:none; }
}


/* ██████████████████████████████████████████████████████████████████████████████
   [B2B] · HC-11 · 11 «Автопаркам и транспортным компаниям»
   ------------------------------------------------------------------------------
   Разметка: template-parts/home/blocks/b2b.php
   Эталон:   data-screen-label="11 Автопаркам" (десктоп) и <!-- M10 --> (390).

   ★ ЖИВОЙ ЗАМЕР ─ ДЕСКТОП vp1440 ────────────────────────────────────────────
     секция ......... h 459.5 · bg #12161f · padding 72 0
     контейнер ...... grid minmax(0,1fr) minmax(0,1.1fr) · gap 48
                      align-items center → колонки 556.19 / 611.81 · h 315.5
     H2 ............. 34/800 · ls −.34px · #fff · mb 14 → h 92 (2 строки)
     текст .......... 16/400 · lh 25.6 · #cfd6e2 · mb 24 → h 76.78
     кнопка ......... h 48 · padding 0 26 · bg #1c5bd6 · 15.5/700 #fff · r4
                      hover #1448aa · active translateY(1px) → w 307.34
     строка ......... flex gap 10 · align start · padding 13 0 · h 49
                      border-bottom 1px rgba(255,255,255,.12) — у ВСЕХ шести
     галка .......... #3fd07a · 800 (см. [W3.0] о разрыве палитры)
     текст строки ... 14.5/400 · lh 21.75 · #9aa4b6 · <b> #fff 700

   ★ ЖИВОЙ ЗАМЕР ─ МОБАЙЛ (кадр 390) ─────────────────────────────────────────
     секция padding 44 16 48 · h 608.06 · H2 23/800 mb 10 · текст 14/400 mb 16
     список: flex column · gap 10 · mb 18 · БЕЗ разделителей
     строка: flex gap 9 · текст 13.5/400 lh 20.25
     кнопка: w 100% · h 50 · 15/700 — ПОСЛЕ списка (на десктопе — ДО него)

   ★ ПОРЯДОК КНОПКИ. Десктоп: кнопка в левой колонке под текстом. Мобилка: в самом
     низу, во всю ширину. Одно дерево → кнопка ОТДЕЛЬНЫЙ ребёнок грида, позиция
     задаётся grid-template-areas (десктоп «main/cta» слева, «list» справа;
     мобилка — main → list → cta). Никакого дубля разметки.
   ============================================================================ */

/* ★ ВЛАДЕЛЕЦ 06.09 (№108): тёмный B2B — НЕ full-bleed band, а скруглённая карта
   ТОЧНО ПО СТАНДАРТУ ШИРИНЫ, как «Подберём» (замечание владельца: «есть стандарт
   ширины, ты его игнорируешь»). Структура повторяет picker-dark: секция красится
   фоном страницы (белый) → .ok-container (макс.1280, паддинг 32/24/16 → контент 1216)
   как чистый носитель ширины → внутренняя карта .ok-b2b__grid заполняет КОНТЕНТ-БОКС
   контейнера (1216 деск), тёмный фон+скругление на ней. Раньше .ok-b2b__grid сам нёс
   класс .ok-container и красился по границе 1280 — карта была на 64px шире соседних
   карточек. Теперь края B2B = края «Подберём» (112…1328 при vw1440). Вертикальный
   ритм секции (72/0, моб 44/48) не трогаем. data-bg 'b2b' в inc/home-shell.php = 'white'. */
.ok-b2b{ background:var(--ok-section-a); }

.ok-b2b__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);   /* ЗАМЕР 556.19 / 611.81 */
  grid-template-areas:
    "main list"
    "cta  list";
  align-content:center;                                   /* = align-items:center мастера при 2 рядах */
  column-gap:48px;
  background:var(--ok-dark);                    /* карта: тёмный фон на внутренней карте */
  border-radius:var(--ok-radius-card);          /* 16 — как карта «Подберём» */
  padding:44px;                                 /* внутренние поля карты (десктоп) = «Подберём» 44 */
}
.ok-b2b__main{ grid-area:main; min-width:0; }
.ok-b2b__list{ grid-area:list; min-width:0; list-style:none; margin:0; padding:0; }

html body .ok-b2b__h2{
  margin:0 0 14px;
  font-size:var(--ok-fs-h2);
  font-weight:var(--ok-fw-black);
  line-height:normal;                      /* ЗАМЕР: в мастере lh не задан (строка 46px) */
  letter-spacing:var(--ok-ls-h2);
  color:var(--ok-on-dark);
}
html body .ok-b2b__text{
  margin:0 0 24px;
  font-size:var(--ok-fs-body);          /* 16 */
  line-height:1.6;                       /* ЗАМЕР 25.6 */
  color:var(--okw3-on-dark-2);
}

/* Кнопка. Класс .okna-btn НЕ используем намеренно: он тянет геометрию из
   design.css/okna-mobile.css, которые грузятся ПОЗЖЕ этого листа и перебили бы
   размеры мастера. Открытие попапа держится на .okna-autopark-open (это
   JS-контракт inc/forms-autopark.php), а он на вид не влияет. */
html body .ok-b2b__cta{
  grid-area:cta;
  justify-self:start;
  align-self:start;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:var(--ok-control-h);            /* 48 */
  padding:0 26px;
  border:0;
  border-radius:var(--ok-radius-btn);    /* 4 */
  background:var(--ok-blue);
  color:var(--ok-on-dark);
  font-family:var(--ok-font);
  font-size:15.5px;
  font-weight:var(--ok-fw-bold);
  line-height:1;
  cursor:pointer;
  transition:background-color .18s ease, transform .06s ease;
}
html body .ok-b2b__cta:hover,
html body .ok-b2b__cta:focus-visible{ background:var(--ok-blue-hover); color:var(--ok-on-dark); }
html body .ok-b2b__cta:active{ background:var(--ok-blue-hover); transform:translateY(1px); }

/* ★★ ПЕРЕВЕС НАД TT1 (замер: кнопка приходила тёмной #28303d вместо синей).
   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,1,2), и TT1 печатается ДВАЖДЫ — вторым
   после всего. Бьём ТЕМ ЖЕ ПРИЁМОМ, без !important: повторяем только СПОРНЫЕ
   свойства (фон и цвет) селектором (0,3,2). Геометрия остаётся в правиле выше —
   иначе на :hover кнопка теряла бы размеры. Ховер TT1 (0,1,1) слабее нашего
   (0,2,2), усиливать не нужно. */
html body .ok-b2b__cta:not(:hover):not(:active){
  background:var(--ok-blue);
  color:var(--ok-on-dark);
}

.ok-b2b__feat{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:13px 0;
  border-bottom:1px solid var(--okw3-hair);
}
.ok-b2b__check{
  flex:0 0 auto;
  color:var(--okw3-check);
  font-size:var(--ok-fs-body);             /* 16 — как в мастере */
  font-weight:var(--ok-fw-black);
  line-height:normal;                       /* ЗАМЕР 22 → строка 49 с рамкой (было 24.8 от .glavnaya-v4) */
}
.ok-b2b__feat-txt{
  min-width:0;
  font-size:var(--ok-fs-card);           /* 14.5 */
  line-height:1.5;                        /* ЗАМЕР 21.75 */
  color:var(--okw3-on-dark-3);
}
html body .ok-b2b__feat-txt b{ color:var(--ok-on-dark); font-weight:var(--ok-fw-bold); }

/* ── КАНОН-МЕДИА ─────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .ok-b2b__grid{ column-gap:28px; }
}
@media (max-width:768px){
  /* Карта B2B на мобилке: гаттер от краёв даёт .ok-container (padding-inline 16px,
     канон ok-layout.css), сама карта .ok-b2b__grid заполняет его контент-бокс —
     без переполнения и без спец-хака на секции (структура = picker-dark). */
  .ok-b2b__grid{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"main" "list" "cta";   /* кнопка уезжает вниз — эталон M10 */
    padding:28px 20px;                          /* внутренние поля карты на мобилке (карта, а не full-bleed — владелец 06.09) */
  }
  .ok-b2b__list{ display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
  .ok-b2b__feat{ gap:9px; padding:0; border-bottom:0; }   /* на мобилке разделителей нет */
  .ok-b2b__feat-txt{ font-size:13.5px; }
  html body .ok-b2b__text{ font-size:14px; line-height:var(--ok-lh-body); margin-bottom:16px; }
  html body .ok-b2b__cta{
    justify-self:stretch;
    width:100%;
    height:var(--ok-control-h-mobile);         /* 50 */
    font-size:15px;
  }
}
@media (max-width:600px){
  /* Размер H2 на мобилке задаёт ГЛОБАЛЬНЫЙ канон okna-mobile.css
     (`body h2{font-size:23px !important}`, ≤480 — 22px). Это ровно значение
     мастера (M10 = 23px), поэтому НЕ переопределяем: меньше !important, меньше
     расхождений с остальным сайтом. Наше — только ритм и line-height. */
  html body .ok-b2b__h2{ line-height:normal; margin-bottom:10px; }
  /* Чередование фонов — МОБИЛЬНАЯ фаза M9. На мобиле такт волны инвертирован
     (см. ok-home-w2.css ≤600): 05а A · 06 B · 07 A · 08 B · 09 A. Десктопное
     объявление .ok-proc (стр.172, фаза B) НЕ трогаем — оно держит десктоп и
     планшет ≥601. Строго ≤600, как инверсия подбора (ok-home-w1.css:1222). */
  html body .ok-proc{ background:var(--ok-section-a); }
}

/* ██████████████████████████████████████████████████████████████████████████████
   [GEO] · HC-11 · 13 «География выезда» + ЖИВАЯ форма проверки выезда
   ------------------------------------------------------------------------------
   Разметка: template-parts/home/blocks/geo.php
   Эталон:   data-screen-label="13 География выезда" · <!-- M12 --> (390).

   ★ ЖИВОЙ ЗАМЕР ─ ДЕСКТОП vp1440 ────────────────────────────────────────────
     секция ......... h 857.69 · bg #f5f8fd · padding 72 0
     грид ........... minmax(0,1.15fr) minmax(0,1fr) · gap 44 · align start
                      → 626.88 / 545.13 · h 629
     бейдж .......... inline-block · bg #eef3fc · #1c5bd6 · 12.5/800 UPPER
                      ls .06em · padding 7 13 · r999 · mb 14 → h 31
     H2 ............. 34/800 · подчёркивание 44×3 · pb 14 · mb 12
     лид ............ 16/400 · lh 24.8 · #526173 · mb 24
     зоны ........... flex column · gap 12 · mb 22
     зона ........... flex gap 14 · r16 · padding 18 20 · border 1px + слева 3px
                      №1: bg #eef3fc · рамка #dbe6f8 · слева #e0223a
                      №2+: bg #fff · рамка #e8ecf2 · слева #1c5bd6 → h 84
     иконка зоны .... svg 24 · mt 2 · stroke #1c5bd6 1.7
     H3 зоны ........ 15.5/800 #1d2433 mb 3 · текст 14/400 lh 21 #526173
     подсказка ...... flex gap 12 · bg #fff · 1px #e8ecf2 · r10 · p 14 18 → h 70.5
                      иконка svg 20 mt 1 · текст 13.5/400 lh 20.25 · strong #1d2433
     ФОРМА .......... bg #fff · 1px #e8ecf2 · r16 · padding 26 26 22
                      shadow 0 20 50 rgba(20,40,80,.08) → 545.13×629
       шапка ........ flex gap 14 · mb 18 · svg 26 · H3 19/800 #123d87 mb 3
                      подпись 13.5/400 #8a94a6
       лейбл ........ 13.5/700 #1d2433 mb 5
       поле ......... h 46 · 1.5px #dfe5ee · r10 · padding 0 14 · 16px · mb 14
       сабмит ....... w 100% · h 48 · flex center gap 9 · bg #e0223a · 15.5/700 · r4
       нота ......... mt 12 · 12.5/400 · lh 18.75 · center · #8a94a6
     фичи ........... grid repeat(4,1fr) · gap 14 · mt 26 → 293.5 каждая
                      svg 20 mt 2 · текст 13.5/400 lh 19.575 · strong block #1d2433

   ★ ЖИВОЙ ЗАМЕР ─ МОБАЙЛ (кадр 390) ─────────────────────────────────────────
     бейдж 11.5/800 p 6 11 mb 10 · H2 23/800 lh 28.75 mb 8 · лид 14/400 mb 16
     зоны: gap 9 · mb 16 · зона r10 · p 13 14 · БЕЗ иконки и левой полосы
           b 13.5/700 mb 3 · текст 13/400 lh 18.85
     форма-карточка: bg #fff 1px #e8ecf2 r16 p 18 16
           H3 17/800 mb 3 · подпись 12.5/400 mb 14
           поле h 48 mb 10 · сабмит h 50 · нота mt 10 12/400 center

   ★ КЛАССЫ ФОРМЫ НЕ ПЕРЕИМЕНОВАНЫ. assets/geo-request.js держится за
     .okna-geo-req__form / #okna-geo-req-region|city|phone / __combo / __dropdown /
     __more / __extra / __submit / __consent / __input(is-invalid,is-autofilled) /
     input[name=…] и сам создаёт .okna-geo-req__opt* и __toast. Переименование =
     мёртвая форма. Поэтому старые имена сохранены, а вид перекрыт составным
     селектором `.ok-geo .okna-geo-req__…` (0,2,0 > 0,1,0 у geo-request.css).
     Там, где старое правило само стоит с !important (focus / is-invalid /
     is-autofilled / __more / __file-label / __submit:hover) — оно ПОЛЕЗНОЕ
     (кольцо фокуса, красная рамка ошибки) и оставлено работать как есть;
     перебиваем только там, где иначе не дотянуться (правило 3б шапки файла).
   ============================================================================ */

.ok-geo{ background:var(--ok-section-b); }

.ok-geo__grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);   /* ЗАМЕР 626.88 / 545.13 */
  gap:var(--ok-gap-cols);                                  /* 44 */
  align-items:start;
}
.ok-geo__main{ min-width:0; }

.ok-geo__badge{
  display:inline-block;
  margin-bottom: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.5 */
  font-weight:var(--ok-fw-black);
  line-height:normal;                      /* ЗАМЕР h 31 = 17 + 2x7 pad */
  letter-spacing:var(--ok-ls-eyebrow);     /* .06em */
  text-transform:uppercase;
}
html body .ok-geo__h2{
  margin:0 0 12px;
  padding-bottom:14px;
  font-size:var(--ok-fs-h2);
  font-weight:var(--ok-fw-black);
  line-height:normal;                      /* ЗАМЕР: в мастере lh не задан (строка 46px) */
  letter-spacing:var(--ok-ls-h2);
  color:var(--ok-ink);
  background:linear-gradient(var(--ok-red), var(--ok-red)) left bottom / 44px 3px no-repeat;
}
html body .ok-geo__lead{
  margin:0 0 24px;
  font-size:var(--ok-fs-body);             /* 16 */
  line-height:var(--ok-lh-body);           /* 24.8 */
  color:var(--ok-text-2);
}

/* ── зоны ────────────────────────────────────────────────────────────────── */
.ok-geo__zones{ display:flex; flex-direction:column; gap:12px; margin-bottom:22px; }
.ok-geo__zone{
  display:flex;
  gap:14px;
  padding:18px 20px;
  background:var(--ok-section-a);
  border:1px solid var(--ok-border);
  border-left:3px solid var(--ok-blue);
  border-radius:var(--ok-radius-card);
}
.ok-geo__zone--accent{
  background:var(--ok-tint-blue);
  border-color:var(--okw3-tint-line);
  border-left-color:var(--ok-red);
}
.ok-geo__zone-ic{ flex:0 0 auto; margin-top:2px; color:var(--ok-blue); }
.ok-geo__zone-ic svg{ display:block; width:24px; height:24px; }
.ok-geo__zone-b{ min-width:0; }
html body .ok-geo__zone-t{
  margin:0 0 3px;
  font-size:15.5px;
  font-weight:var(--ok-fw-black);
  line-height:normal;                       /* ЗАМЕР 22 */
  color:var(--ok-text);
}
html body .ok-geo__zone-d{
  margin:0;
  font-size:14px;
  line-height:1.5;                          /* ЗАМЕР 21 */
  color:var(--ok-text-2);
}

/* ── подсказка ───────────────────────────────────────────────────────────── */
.ok-geo__hint{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 18px;
  background:var(--ok-section-a);
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-dropdown);  /* 10 */
}
.ok-geo__hint-ic{ flex:0 0 auto; margin-top:1px; color:var(--ok-blue); }
.ok-geo__hint-ic svg{ display:block; width:20px; height:20px; }
.ok-geo__hint-txt{
  min-width:0;
  font-size:var(--ok-fs-label);             /* 13.5 */
  line-height:1.5;                           /* ЗАМЕР 20.25 */
  color:var(--ok-text-2);
}
html body .ok-geo__hint-txt strong{ color:var(--ok-text); font-weight:var(--ok-fw-bold); }

/* ── ФОРМА (старые хук-классы + новый вид) ───────────────────────────────── */
html body .ok-geo .okna-geo-req__form{
  padding:26px 26px 22px;
  background:var(--ok-section-a);
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-card);      /* 16 (старое правило: 18) */
  box-shadow:var(--ok-shadow-form);         /* 0 20 50 rgba(20,40,80,.10) ≈ эталон .08 */
}
.ok-geo__form-head{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin:0 0 18px;
}
.ok-geo__form-ic{ flex:0 0 auto; color:var(--ok-blue); }
.ok-geo__form-ic svg{ display:block; width:26px; height:26px; }
html body .ok-geo .okna-geo-req__form h3{
  margin:0 0 3px;
  font-size:19px;
  font-weight:var(--ok-fw-black);
  line-height:normal;                       /* ЗАМЕР 26 */
  color:var(--ok-ink);
}
html body .ok-geo__form-sub{
  margin:0;
  font-size:var(--ok-fs-label);             /* 13.5 */
  line-height:normal;                       /* ЗАМЕР 18 */
  color:var(--ok-text-muted);
}
html body .ok-geo .okna-geo-req__field{ margin:0 0 14px; }
html body .ok-geo .okna-geo-req__field label{
  display:block;
  margin:0 0 5px;
  font-size:var(--ok-fs-label);
  font-weight:var(--ok-fw-bold);
  line-height:normal;                       /* ЗАМЕР 18 */
  color:var(--ok-text);
}
/* ★★ ЕДИНСТВЕННОЕ МЕСТО С !important ПРОТИВ geo-request.css (правило 3б шапки).
   Замер показал, что поле приходило с чужой геометрией: radius 11, рамка #dbe4f0,
   ЦВЕТ ТЕКСТА #123d87 (тёмно-синий вместо почти-чёрного), margin 0 2px.
   Причина не в специфичности (наш селектор 0,2,2 против 0,1,0), а в том, что
   geo-request.css:46-48 объявляет эти свойства через !important:
       border:1.5px solid #dbe4f0 !important; border-radius:11px !important;
       background:#fff !important; color:var(--ink) !important; outline:none !important;
   Перебить !important можно ТОЛЬКО !important — ровно на этих четырёх свойствах.
   СОСТОЯНИЯ поля (:focus / .is-invalid / .is-autofilled) там же стоят с
   !important и НЕ трогаются: синее кольцо фокуса и красная рамка ошибки —
   полезное поведение живой формы, его сохраняем как есть. */
html body .ok-geo .okna-geo-req__input{
  width:100%;
  height:46px;
  margin:0;
  padding:0 14px;
  border:var(--ok-input-border-w) solid var(--ok-border-input) !important;   /* 1.5 · против !important geo-request.css */
  border-radius:var(--ok-radius-field,8px) !important;                       /* Волна 1-бис: geo-req на гео/главной 10→8 (сцепка) */
  background:var(--ok-section-a) !important;                                 /* против !important */
  color:var(--ok-text) !important;                                           /* против !important (был #123d87) */
  font-size:var(--ok-fs-body);              /* 16 — ниже 16 iOS зумит форму */
  line-height:normal;
  box-sizing:border-box;
}
html body .ok-geo .okna-geo-req__textarea{ height:auto; min-height:74px; padding:10px 14px; line-height:1.5; resize:vertical; }
html body .ok-geo .okna-geo-req__small{ display:block; margin:5px 2px 0; font-size:12px; color:var(--ok-text-muted); }
html body .ok-geo .okna-geo-req__more{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:0 0 12px;
  padding:0;
  font-size:14px;
  font-weight:var(--ok-fw-bold);
  color:var(--ok-blue);
}
/* B1/B2 — «Добавить фото/комментарий» (текст-кнопка): hover + нажатие. */
html body .ok-geo .okna-geo-req__more:hover,
html body .ok-geo .okna-geo-req__more:focus-visible{ color:var(--ok-blue-hover); }
html body .ok-geo .okna-geo-req__more:active{ transform:translateY(1px); }
html body .ok-geo .okna-geo-req__consent{
  margin:4px 0 14px;
  font-size:var(--ok-fs-micro);             /* 12.5 */
  line-height:1.5;
  color:var(--ok-text-muted);
}
/* Сабмит: geo-request.css:86-88 держит color/background/border/border-radius с
   !important. Совпадающие значения (красный фон, белый текст, border:0) не
   трогаем — перебиваем ТОЛЬКО радиус (у них 13, в мастере 4) и задаём падинг
   (иначе прилетает 15px 30px от кнопочных правил темы). */
html body .ok-geo .okna-geo-req__submit{
  width:100%;
  height:var(--ok-control-h);               /* 48 */
  padding:0 20px;
  border-radius:var(--ok-radius-btn) !important;   /* 4 · против border-radius:13px !important */
  line-height:normal;
  border:0;
  background:var(--ok-red);
  color:var(--ok-on-dark);
  font-size:15.5px;
  font-weight:var(--ok-fw-bold);
}
html body .ok-geo .okna-geo-req__submit svg{ width:17px; height:17px; }
/* B1/B2 — нажатие сабмита. Hover сабмита держит geo-request.css:88 (его !important
   ПОЛЕЗНЫЙ, оставлен как есть в шапке секции) — добавляем только press-состояние. */
html body .ok-geo .okna-geo-req__submit:active{ transform:translateY(1px); }
html body .ok-geo .okna-geo-req__note{
  margin:12px 0 0;
  font-size:var(--ok-fs-micro);
  line-height:1.5;                           /* ЗАМЕР 18.75 */
  text-align:center;
  color:var(--ok-text-muted);
}
html body .ok-geo .okna-geo-req__secure{
  margin:10px 0 0;
  justify-content:center;
  font-size:12px;
  color:var(--ok-text-muted);
}

/* ── D15 · ОБЁРТКА ФОРМЫ + ОТКРЫВАШКА ПОПАПА (десктоп: ничего не меняется) ──
   На десктопе .ok-geo__formwrap — обычная колонка грида (форма как была, inline),
   а открывашка/затемнение/крестик выключены. Всё поведение попапа включается
   ТОЛЬКО в ветке ≤768 ниже. */
.ok-geo__formwrap{ min-width:0; }
.ok-geo__open{ display:none; }
.ok-geo__ov{ display:none; }
.ok-geo__form-x{ display:none; }

/* ── 4 фичи под гридом ───────────────────────────────────────────────────── */
.ok-geo__feats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin:26px 0 0;
  list-style:none;
  padding:0;
}
.ok-geo__feat{ display:flex; align-items:flex-start; gap:11px; min-width:0; }
.ok-geo__feat-ic{ flex:0 0 auto; margin-top:2px; color:var(--ok-blue); }
.ok-geo__feat-ic svg{ display:block; width:20px; height:20px; }
.ok-geo__feat-txt{
  min-width:0;
  font-size:var(--ok-fs-label);             /* 13.5 */
  line-height:1.45;                          /* ЗАМЕР 19.575 */
  color:var(--ok-text-2);
}
html body .ok-geo__feat-txt strong{ display:block; color:var(--ok-text); font-weight:var(--ok-fw-bold); }

/* ── КАНОН-МЕДИА ─────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .ok-geo__grid{ gap:28px; }
  .ok-geo__feats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px){
  .ok-geo__grid{ grid-template-columns:minmax(0,1fr); gap:16px; }
  .ok-geo__zones{ gap:9px; margin-bottom:16px; }
  /* ЗАМЕР M12: у зон обычная рамка со всех сторон — цветной левой полосы нет.
     Менять только ширину мало: остаётся синяя нитка в 1px, видно на скрине. */
  .ok-geo__zone{
    padding:13px 14px;
    border-left:1px solid var(--ok-border);
    border-radius:var(--ok-radius-dropdown); /* 10 */
  }
  .ok-geo__zone--accent{ border-left-color:var(--okw3-tint-line); }
  .ok-geo__zone-ic{ display:none; }          /* эталон M12: без иконки */
  /* !important — блочное значение 13.5px против `body h3{19px!important}`. */
  html body .ok-geo__zone-t{ font-size:13.5px !important; font-weight:var(--ok-fw-bold); line-height:normal; }
  html body .ok-geo__zone-d{ font-size:13px; line-height:1.45; }
  /* ЗАМЕР M12: в мобильном мастере отдельной подсказки «Не знаете, как указать
     местоположение?» НЕТ (десктопный элемент). Прячем — её роль на мобилке уже
     выполняет инлайновая подпись под полем города. Класс статический, к hook-классам
     формы (.okna-geo-req__*) и скрытым полям 152-ФЗ не относится — гео-логику не задевает. */
  .ok-geo__hint{ display:none; }
  html body .ok-geo .okna-geo-req__form{ padding:18px 16px; }
  .ok-geo__form-ic{ display:none; }          /* эталон M12: без иконки в шапке формы */
  html body .ok-geo .okna-geo-req__form h3{ font-size:17px !important; }   /* блочное значение против body h3 */
  html body .ok-geo__form-sub{ font-size:var(--ok-fs-micro); }
  .ok-geo__form-head{ margin-bottom:14px; }
  html body .ok-geo .okna-geo-req__field{ margin-bottom:10px; }
  html body .ok-geo .okna-geo-req__input{ height:48px; }
  html body .ok-geo .okna-geo-req__submit{ height:var(--ok-control-h-mobile); }  /* 50 */
  html body .ok-geo .okna-geo-req__note{ margin-top:10px; font-size:12px; }
  .ok-geo__feats{ margin-top:18px; gap:12px; }

  /* ══ D15 · ФОРМА-ПОПАП НА МОБИЛКЕ ═══════════════════════════════════════════
     ЗАМЕР ДО: форма гео в потоке на 390 = 1082px высоты при экране 844 — больше
     экрана целиком, ровно та же болезнь, что была у героя до D5. В мастере (M12)
     на телефоне формы в потоке нет — её роль играет попап по кнопке.
     ЧИНИМ ТЕМ ЖЕ МЕХАНИЗМОМ, ЧТО И D5 (ok-home.css:665-739), а не вторым:
     обёртка уходит из потока, форма раскрывается оверлеем, в потоке остаётся
     одна кнопка. Разметка формы, её name/id, скрытые поля и согласие 152-ФЗ
     не тронуты — попап оборачивает ту же самую <form>. ────────────────────── */
  .ok-geo--modalform .ok-geo__formwrap{ display:none; }        /* закрыто: формы в потоке нет */

  /* Кнопка в потоке — вид сабмита формы (мастер M12: красная, во всю ширину, h 50). */
  .ok-geo--modalform .ok-geo__open{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    width:100%;
    height:var(--ok-control-h-mobile);                          /* 50 */
    padding:0 20px;
    border-radius:var(--ok-radius-btn);                         /* 4 */
    background:var(--ok-red);
    font-size:15.5px;
    font-weight:var(--ok-fw-bold);
    line-height:normal;
    transition:background-color .18s ease;
  }
  /* Префикс .ok-geo обязателен: иначе `.ok-scope a{color:var(--ok-blue)}` (0,1,1)
     перекрасит текст кнопки в синий на белом фоне ссылки. */
  html body .ok-geo .ok-geo__open,
  html body .ok-geo .ok-geo__open:hover,
  html body .ok-geo .ok-geo__open:focus-visible{ color:var(--ok-on-dark); text-decoration:none; }
  .ok-geo--modalform .ok-geo__open:active{ transform:translateY(1px); }
  .ok-geo--modalform .ok-geo__open svg{ width:17px; height:17px; }

  /* Открытое состояние. z-index 300 (гайд §11) кроет и sticky-шапку (z 100):
     ни один предок .ok-geo не создаёт контекста наложения, поэтому, в отличие
     от героя, поднимать z-index гриду не требуется (проверено замером). */
  .ok-geo--modalform.is-form-open .ok-geo__formwrap{
    display:flex;
    position:fixed;
    inset:0;
    z-index:var(--ok-z-modal);
    align-items:center;
    justify-content:center;
    padding:16px;
  }
  .ok-geo--modalform.is-form-open .ok-geo__ov{
    display:block;
    position:absolute;
    inset:0;
    background:color-mix(in srgb, var(--ok-dark) 55%, transparent);   /* эталон rgba(10,15,26,.55) · гайд §11 */
  }
  html body .ok-geo--modalform.is-form-open .okna-geo-req__form{
    position:relative;
    z-index:1;
    width:min(440px, calc(100vw - 32px));                       /* гайд §11 */
    max-height:calc(100vh - 32px);
    margin:0;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
  /* Крестик — только в мобильном оверлее (в потоке формы его нет). */
  .ok-geo--modalform .ok-geo__form-x{
    display:flex;
    position:absolute;
    top:12px;
    right:12px;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    padding:0;
    border:0;
    border-radius:var(--ok-radius-pill);
    background:var(--ok-section-b);
    color:var(--ok-ink);
    cursor:pointer;
    transition:background-color .18s ease, color .18s ease;
  }
  .ok-geo--modalform .ok-geo__form-x:hover,
  .ok-geo--modalform .ok-geo__form-x:focus-visible{ background:var(--ok-blue); color:var(--ok-on-dark); }
  .ok-geo--modalform .ok-geo__form-x svg{ display:block; }

  /* No-JS фолбэк: <a href="#okna-geo-req-card"> ставит хэш → :target раскрывает
     попап. Отдельным правилом под @supports — :has() нельзя мешать с JS-путём в
     одном списке селекторов (браузер без :has() выкинул бы всё правило целиком).
     ★ `:not(.is-target-off)` — ЗАМЕР: если пользователь пришёл по прямой ссылке
       с #okna-geo-req-card, попап раскрывает :target, а не класс. Закрыть его
       сбросом хэша нельзя: Chrome НЕ пересчитывает :target после
       history.replaceState (проверено — после Esc попап оставался открытым).
       Поэтому JS при закрытии вешает на секцию .is-target-off и глушит эту ветку.
       Без JS класс не появляется никогда — фолбэк работает как задуман. */
  @supports selector(:has(*)){
    .ok-geo--modalform:not(.is-target-off) .ok-geo__formwrap:has(.okna-geo-req__form:target){
      display:flex; position:fixed; inset:0; z-index:var(--ok-z-modal);
      align-items:center; justify-content:center; padding:16px;
    }
    .ok-geo--modalform:not(.is-target-off) .ok-geo__formwrap:has(.okna-geo-req__form:target) .ok-geo__ov{
      display:block; position:absolute; inset:0;
      background:color-mix(in srgb, var(--ok-dark) 55%, transparent);
    }
    html body .ok-geo--modalform:not(.is-target-off) .okna-geo-req__form:target{
      position:relative; z-index:1; width:min(440px, calc(100vw - 32px));
      max-height:calc(100vh - 32px); margin:0; overflow:auto;
    }
  }
}
@media (max-width:600px){
  .ok-geo__badge{ margin-bottom:10px; padding:6px 11px; font-size:11.5px; }
  /* размер H2 — глобальный канон okna-mobile.css (23px = мастер), см. [B2B];
     подчёркивание в мобильном мастере (M12) отсутствует */
  html body .ok-geo__h2{ padding-bottom:0; background-image:none; line-height:var(--ok-lh-h2-mobile); margin-bottom:8px; }
  html body .ok-geo__lead{ font-size:14px; margin-bottom:16px; }
  /* В мастере (M12) четырёх фич на мобилке НЕТ вовсе. Это РЕАЛЬНЫЕ данные поля
     okna_geo_feats — выкидывать нельзя, поэтому оставляем, но в две колонки:
     высота блока вдвое меньше, чем столбиком. */
  .ok-geo__feats{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 12px; }
}