/* ============================================================
   ok-guarantee.css — SHARED стили блока «Гарантия, документы и работа по договору» (.ok-guar).
   ОДИН файл на все поверхности блока: Главная/ГЕО (каскад okna_home_is_template) и
   «О компании» (/o-kompanii/, tpl-about). Ранее секция [GUARANTEE] жила в ok-home-w3.css;
   вынесена сюда как общий слой — главная и /o-kompanii/ читают ОДИН файл, не две копии.

   Разметка: okna_guar_block_render() (inc/guarantee-shared.php) — Главная
   (template-parts/home/blocks/guarantee-home.php) и «О компании» (blocks/about/guarantee.php).
   Эталон:   data-screen-label="12 Гарантия и документы" · <!-- M11 --> (390).
   Мобильная версия блока — 1-в-1 с боевого сайта (макет НЕ источник истины, CLAUDE.md §28).

   Подключается:
     · Главная/ГЕО — в shell-цепочке оболочки (functions.php, после ok-home-w3);
     · «О компании» — на tpl-about (functions.php), после ok-about.css.
   Попап карточек (okna-org-guar-modal) остался в org.css и на /o-kompanii/ подключается
   тем же листом org.css (стили модалки единые для Главной/B2B/«О компании»).

   ⚠ Токены --okw3-* продублированы из :root файла ok-home-w3.css: там они нужны
   блокам [PROCESS]/[GEO]/[B2B], здесь — гарантии на страницах вне каскада.
   ============================================================ */

: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 — эталон */
}


/* ██████████████████████████████████████████████████████████████████████████████
   [GUARANTEE] · HC-11 · 12 «Гарантия, документы и работа по договору»
   ------------------------------------------------------------------------------
   Разметка: template-parts/home/blocks/guarantee-home.php
   Эталон:   data-screen-label="12 Гарантия и документы" · <!-- M11 --> (390).

   ★ ЖИВОЙ ЗАМЕР ─ ДЕСКТОП vp1440 ────────────────────────────────────────────
     секция ......... h 900 · bg #fff · padding 72 0
     H2 ............. 34/800 · подчёркивание 44×3 · pb 14 · mb 32 → 1216×60
     раскладка ...... grid minmax(0,1.32fr) minmax(0,1fr) · gap 24 · stretch
                      → 678.2 / 513.8 · h 664
     ПАСПОРТ ........ flex 0 0 244 · r26 · bg #16337f + guarantee-passport-cover
                      (center / COVER — см. D13 ниже) · shadow 0 20 44 rgba(12,32,88,.28)
                      padding 30 26 24 · z-index 1
       щит .......... 92×92 · mb 22 · drop-shadow 0 10 18 rgba(0,0,0,.3)
       подпись ...... 23/800 UPPER · ls .04em · lh 1.2 · mb 14 (в мастере
                      «Паспорт<br>сервиса» — при 192px переносится сам)
       текст ........ 14/400 · lh 22.4 · #c6d4f2
       черта ........ 40×1 · #5f7cc0 · mt 18
     СТРАНИЦА ....... flex 1 · bg #fbfdff · 1px #e8ecf2 · r26
                      margin 10 0 10 −26 (наезд на паспорт) · padding 26 28 22 54
                      → 460.2×644
       шапка ........ 13.5/800 UPPER · ls .1em · #123d87 · pb 14 · border-bottom
       тезис ........ flex gap 14 center · padding 14 0 · пунктир 1px #d9e1ee
       кружок ....... 50×50 · r999 · #fff · 1px #e3eaf5 · shadow 0 4 12 rgba(20,40,80,.07)
       глиф ......... 24×24 · H3 15.5/800 #123d87 mb 3 · текст 13.5/400 lh 20.25
       подвал ....... grid 1fr 1fr · gap 6 24 · mt auto · pt 16 · border-top
                      подпись 10.5/800 #8a94a6 ls .08em · значение 13/700 #1c5bd6
                      штрих-код 76×28 · repeating-linear-gradient #2a3648 · .75
     КАРТОЧКИ ....... grid 1fr 1fr · gap 24 → 244.89 × h 320
                      #fff · 1px #e8ecf2 · r22 · padding 26 28 · flex column gap 8
       кружок 64×64 r999 #eaf1fb · глиф 30×30
       черта 34×3 #e0223a r2 mt 6
       H3 18/800 lh 23.4 #123d87 · mt 6 · min-height 47
       текст 13/400 lh 19.5 #526173 · стрелка mt auto pt 10 · svg 20 #1c5bd6

   ★ ЖИВОЙ ЗАМЕР ─ МОБАЙЛ (кадр 390) ─────────────────────────────────────────
     H2 23/800 lh 28.75 mb 16
     паспорт: gradient(165deg,#16233f,#0b1f3f) · r16 · p 22 18 · center · gap 10
              щит 72×72 · подпись 11.5/800 ls .12em #7fa6ef · текст 13/400 lh 20.15
              черта 40×3 #e0223a r2
     «Наши гарантии»: bg #f5f8fd · 1px #e8ecf2 · r16 · p 18 16 · mb 12
              шапка 12/800 ls .08em #8a94a6 mb 12 · строки gap 12 · глиф 26×26
              b 14/700 #1d2433 · текст 12.5/400 lh 18.75
     карточки: grid 1fr 1fr · gap 10 → 173 · p 14 · r16 · глиф 30 · b 13.5/700
              · текст 12/400 lh 17.4 · стрелки НЕТ

   ★★★ D13 · ПЕЧАТЬ НА ОБЛОЖКЕ ПАСПОРТА БЫЛА ОВАЛЬНОЙ ────────────────────────
     ЗАМЕР (живой, vp1440, Главная и ГЕО): карточка 244×664 — ровно как в мастере,
     ширина 244 мастеру соответствует и НЕ менялась. Причина овала не в размере
     карточки, а в `background-size:100% 100%`: обложка 615×1346 (соотношение
     .4569) насильно натягивается в бокс 244×664 (соотношение .3675), то есть
     масштаб по X (.3967) НЕ равен масштабу по Y (.4933) — картинка сжимается
     по горизонтали на 19.6 %. Круглая печать становится вертикальным овалом.
     Пиксельный замер печати на живом скрине ДО: 95×120, отношение Ш/В = 0.792.
     ★ Это дефект САМОГО МАСТЕРА: у него та же картинка 615×1346 и тот же
       `100% 100%`, значит при 664px он показывает такой же овал. «Высоты, при
       которой пропорция совпадает» не существует: совпала бы она только при
       ширине бокса 303px, а мастер задаёт 244.
     ФИКС: `cover` — масштаб единый по обеим осям при ЛЮБОЙ высоте карточки.
     Пиксельный замер ПОСЛЕ (то же окно детектора, Главная и ГЕО одинаково):
     116×119 → 0.975 при эталоне 0.938 (столько детектор даёт на самой исходной
     картинке — остаток это его систематическая ошибка, а не овал).
     Ширина 244 НЕ тронута (замер: 244 и до, и после).
     ★ ПОЧЕМУ ПРИВЯЗКА 70%, А НЕ center. `cover` кадрирует по горизонтали:
     обложка ложится шириной 0.4569×H, лишнее срезается. Печать занимает по
     ширине доли 0.5252…0.9155 (замер сканом строки через её центр). При center
     её правый край = 0.4183×H − (0.4569×H − 244)/2 = 0.1898×H + 122; при H 664
     это 248 из 244 — правая дуга уходила ЗА край (видно на рендере вариантов).
     При 70% край = 0.4183×H − 0.7×(0.4569×H − 244) = 0.0985×H + 171 → при 664
     это 237 из 244: печать целиком в кадре, и остаётся такой вплоть до H 743.
     Подпись тоже цела (её левый край уходит за кадр только при H > 676).
     ★ ГРАНИЦА ЧЕСТНО. Выше H 743 печать останется КРУГЛОЙ (масштаб единый), но
       начнёт срезаться правым краем карточки. Живая высота — 664 и на Главной,
       и на ГЕО, и она задаётся НЕ «страницей», а колонкой карточек (2×320+24):
       «страница» короче — высота та же 664 (замер: 1 тезис вместо 3 → 664).
       Расти карточка начнёт, только если тексты тезисов вырастут больше чем на
       ~20px (сейчас «страница» 644 из 664). Число тезисов не редактируется —
       структура из 3 зашита в guarantee-home.php:72.

   ★ КАРТОЧКИ ОСТАЮТСЯ КНОПКАМИ. В мобильном мастере это <div> без стрелки, но
     кнопка открывает shared-попап okna_org_guar_modal_html() — на телефоне он
     работает так же. Убрать кнопку = потерять функцию (запрет пакета), поэтому
     на ≤600 прячется только стрелка. Разметка/JS-контракт (.okna-org-guar-open +
     data-slug/title/num/icon-url) сохранён 1-в-1.
   ============================================================================ */

.ok-guar{ background:var(--ok-section-a); }

html body .ok-guar__h2{
  margin:0 0 32px;
  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;
}

.ok-guar__layout{
  display:grid;
  grid-template-columns:minmax(0,1.32fr) minmax(0,1fr);   /* ЗАМЕР 678.2 / 513.8 */
  gap:24px;
  align-items:stretch;
}

/* ── «документ»: обложка + страница ──────────────────────────────────────── */
.ok-guar__doc{ position:relative; display:flex; align-items:stretch; min-width:0; }

/* ★ ПЕРЕСОБРАНО ПО РАБОЧЕЙ ВЕРСИИ САЙТА (решение владельца: ориентир — не макет,
   а то, как блок уже отображается на главной; `assets/org.css:407-433`).
   Три отличия, из-за которых мой вариант «уехал»:

   1. ВЫРЕЗ. Он не рисуется CSS — он ПРОЗРАЧНАЯ ОБЛАСТЬ В САМОЙ ОБЛОЖКЕ
      `guarantee-passport-cover.webp` (замер альфы: правый край посередине = 127,
      то есть полностью прозрачно). Я подкладывал под картинку заливку --okw3-navy,
      и она этот вырез закрашивала → получался ровный прямоугольник. Фон теперь
      ТОЛЬКО картинка, без цвета.
   2. ТЕНЬ. `box-shadow` рисуется по прямоугольному боксу и «достраивает» углы там,
      где их нет. В рабочей версии — `drop-shadow`, он повторяет форму выреза.
   3. ПРОПОРЦИЯ. Обложка 615x1346 = 0.457. Рабочая версия даёт боксу 46% ширины
      колонки → ~269x619 = 0.434, расхождение 5% — печать читается круглой при
      честном `100% 100%` (вырез при этом точно совпадает с боксом). Мои прежние
      244x664 = 0.367 давали 25% искажения — тот самый овал, который я до этого
      лечил кадрированием `cover`; при `cover` же вырез уезжал за край.
      Поэтому возвращаю связку «46% + 100% 100%» целиком, а не по частям. */
.ok-guar__passport{
  position:relative;
  z-index:2;                              /* поверх светлой страницы */
  flex:0 0 46%;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;                 /* текст напротив середины выреза */
  padding:40px 28px 84px 34px;            /* нижний больше → блок текста смещён к ~50% */
  background:var(--ok-guar-cover, none) center / 100% 100% no-repeat;
  filter:drop-shadow(0 16px 30px color-mix(in srgb, var(--ok-ink) 18%, transparent));
  color:var(--ok-on-dark);
}
.ok-guar__passport-in{ position:relative; margin:auto 0; display:flex; flex-direction:column; }
/* Обёртка заголовка и описания. На десктопе прозрачна для раскладки — узлы остаются
   прямыми детьми `-in`, поэтому десктопная вёрстка не меняется ни на пиксель.
   На мобилке получает подложку: там под текстом лежит слой с росписью. */
.ok-guar__passport-body{ display:contents; }

.ok-guar__passport-ic{
  width:92px; height:92px;
  margin:0 0 22px;
  filter:drop-shadow(0 10px 18px color-mix(in srgb, var(--ok-dark) 30%, transparent));
}
.ok-guar__passport-label{
  margin-bottom:14px;
  font-size:23px;
  font-weight:var(--ok-fw-black);
  line-height:1.2;
  letter-spacing:.04em;
  text-transform:uppercase;
  /* ★ Как в рабочей версии (`org.css:420`): ограничение по ширине заставляет
     «ПАСПОРТ СЕРВИСА» лечь в ДВЕ строки. Без него заголовок вытягивался в одну
     и обложка читалась иначе, чем на сайте. Меряем в ch — привязка к кеглю,
     а не к пикселям колонки. */
  max-width:7ch;
}
html body .ok-guar__passport-txt{
  margin:0;
  font-size:14px;
  line-height:1.6;                        /* ЗАМЕР 22.4 */
  color:var(--okw3-on-navy);
}
.ok-guar__passport-div{
  width:40px; height:1px;
  margin-top:18px;
  background:var(--okw3-navy-line);
}

/* Светлая страница вложена ЗА обложку: её левый край уходит под вырез, поэтому
   отступ и внутренний паддинг заданы в ПРОЦЕНТАХ (как в рабочей версии) — при
   любой ширине колонки страница заходит ровно настолько, насколько глубок вырез.
   Фиксированные -26px этого не держали: на других ширинах шов уезжал. */
.ok-guar__center{
  flex:1 1 auto;
  min-width:0;
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  margin-left:-5%;
  padding:34px 32px 28px calc(5% + 18px);
  background:var(--okw3-paper);
  border:1px solid var(--ok-border);
  border-radius:22px;
}
.ok-guar__center-h{
  margin-bottom:6px;
  padding-bottom:14px;
  border-bottom:1px solid var(--ok-border);
  font-size:var(--ok-fs-label);           /* 13.5 */
  line-height:normal;                     /* ЗАМЕР 19 → h 33 */
  font-weight:var(--ok-fw-black);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ok-ink);
}

.ok-guar__points{ list-style:none; margin:0; padding:0; }
.ok-guar__point{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 0;
  border-bottom:1px dashed var(--okw3-dash);
}
.ok-guar__point:last-child{ border-bottom:0; }
.ok-guar__point-ic{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  width:50px; height:50px;
  border-radius:var(--ok-radius-pill);
  background:var(--ok-section-a);
  border:1px solid var(--okw3-ring);
  box-shadow:0 4px 12px color-mix(in srgb, var(--ok-ink) 7%, transparent);   /* эталон rgba(20,40,80,.07) */
}
.ok-guar__point-ic img{ width:24px; height:24px; }
.ok-guar__point-ic svg{ width:24px; height:24px; color:var(--ok-blue); }
.ok-guar__point-b{ min-width:0; }
html body .ok-guar__point-t{
  margin:0 0 3px;
  font-size:15.5px;
  font-weight:var(--ok-fw-black);
  line-height:normal;                     /* ЗАМЕР 22 */
  color:var(--ok-ink);
}
html body .ok-guar__point-d{
  margin:0;
  font-size:var(--ok-fs-label);           /* 13.5 */
  line-height:1.5;                         /* ЗАМЕР 20.25 */
  color:var(--ok-text-2);
}

.ok-guar__foot{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 24px;
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--ok-border);
}
.ok-guar__foot-l{
  font-size:var(--ok-fs-micro,12.5px); /* MOB-05: 10.5 → пол ДС (одиночное правило, без override) */
  font-weight:var(--ok-fw-black);
  line-height:normal;                     /* ЗАМЕР 14 */
  letter-spacing:.08em;
  color:var(--ok-text-muted);
}
.ok-guar__foot-v{
  font-size:13px;
  font-weight:var(--ok-fw-bold);
  line-height:1.35;
  color:var(--ok-blue);
}
.ok-guar__foot-bar{
  grid-column:2;
  justify-self:end;
  margin-top:10px;
  width:76px; height:28px;
  opacity:.75;
  background:repeating-linear-gradient(90deg,
    var(--okw3-bar) 0 2px, transparent 2px 4px,
    var(--okw3-bar) 4px 7px, transparent 7px 9px,
    var(--okw3-bar) 9px 10px, transparent 10px 13px);
}

/* ── 2×2 карточки-кнопки ─────────────────────────────────────────────────── */
.ok-guar__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  min-width:0;
}
html body .ok-guar__card{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
  padding:26px 28px;
  text-align:left;
  background:var(--ok-section-a);
  border:1px solid var(--ok-border);
  border-radius:var(--ok-radius-feature);   /* 22 */
  font-family:var(--ok-font);
  font-size:13.5px;                          /* ЗАМЕР мастера: у <button> дефолтные 13.33 */
  font-weight:var(--ok-fw-regular);
  line-height:normal;
  cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease;
}
/* ★★ ПЕРЕВЕС НАД TT1 — тот же случай, что у .ok-b2b__cta (замер: карточки
   приходили тёмными). Повторяем только спорные фон/цвет селектором (0,3,2). */
html body .ok-guar__card:not(:hover):not(:active){
  background:var(--ok-section-a);
  color:var(--ok-text-2);
}
html body .ok-guar__card:hover,
html body .ok-guar__card:focus-visible{
  background:var(--ok-section-a);
  border-color:var(--ok-blue);
  box-shadow:0 12px 30px color-mix(in srgb, var(--ok-ink) 8%, transparent);   /* эталон rgba(20,40,80,.08) */
}
/* B1/B2 — нажатие карточки-кнопки (hover выше, active здесь). */
html body .ok-guar__card:active{ transform:translateY(1px); }
.ok-guar__card-ic{
  display:flex; align-items:center; justify-content:center;
  width:64px; height:64px;
  border-radius:var(--ok-radius-pill);
  background:var(--okw3-ice);
}
.ok-guar__card-ic img{ width:30px; height:30px; }
.ok-guar__card-ic svg{ width:30px; height:30px; color:var(--ok-blue); }
.ok-guar__card-line{
  width:34px; height:3px;
  margin-top:6px;
  border-radius:2px;
  background:var(--ok-red);
}
html body .ok-guar__card-t{
  margin:6px 0 0;
  min-height:47px;
  font-size:18px;
  font-weight:var(--ok-fw-black);
  line-height:1.3;
  color:var(--ok-ink);
}
html body .ok-guar__card-d{
  margin:0;
  font-size:13px;
  line-height:1.5;                          /* ЗАМЕР 19.5 */
  color:var(--ok-text-2);
}
.ok-guar__card-arrow{
  display:flex;
  margin-top:auto;
  padding-top:10px;
  color:var(--ok-blue);
}
.ok-guar__card-arrow svg{ width:20px; height:20px; }

/* ── КАНОН-МЕДИА ─────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .ok-guar__layout{ grid-template-columns:minmax(0,1fr); gap:16px; }
  html body .ok-guar__card{ padding:22px; }
}
@media (max-width:768px){
  /* «документ» распадается: обложка сверху во всю ширину, страница под ней */
  .ok-guar__doc{ flex-direction:column; }
  /* ★ Мобильный паспорт — КАК НА САЙТЕ (решение владельца: ориентир рабочая версия,
     не макет). Все значения сняты замером живого эталона, а не скопированы наугад:
     карточка 358x361, padding 34/26/30, radius 22, justify:center, ТЕКСТ ПО ЛЕВОМУ
     КРАЮ; слои — печать `50% calc(100% - 12px)` при 84%, автобусы `92% 9%` при 66%,
     под ними градиент 158deg.
     ⚠ Первая попытка провалилась именно на выравнивании: я оставил текст по центру
     (`align-items/text-align:center`) и слои легли поверх него — заголовок перекрыли
     автобусы, печать наехала на описание. В эталоне текст прижат влево, поэтому
     печать справа снизу его не задевает. Порядок правил ниже повторяет эталон. */
  .ok-guar__passport{
    flex:0 0 auto;
    align-items:normal;                     /* НЕ center: текст прижат к левому краю */
    text-align:left;
    justify-content:center;
    min-height:0;
    padding:34px 26px 30px;
    border-radius:22px;
    filter:none;                            /* drop-shadow по форме выреза — только десктоп */
    background:
      var(--ok-guar-stamp, none) 50% calc(100% - 12px) / 84% auto no-repeat,
      var(--ok-guar-buses, none) 92% 9% / 66% auto no-repeat,
      linear-gradient(158deg, var(--okw3-navy-a) 0%, var(--okw3-navy-b) 100%);
  }
  /* Щит — тот же ассет, что на десктопе, только мельче (правка владельца 21.07:
     «щит что на десктопе, что на мобилке одинаковый, размер может отличаться»).
     Раньше он был скрыт, и роль верхнего акцента играли только автобусы. */
  .ok-guar__passport-ic{
    display:block;
    width:115px; height:115px;              /* 76 -> 87 -> 100 -> 115px, три раза по +15% (владелец, 21.07) */
    margin:0 0 18px;
  }
  .ok-guar__passport-in{
    margin:26px 0 0;                        /* щит сам отбивает текст от автобусов */
    align-items:flex-start;                 /* НЕ center — иначе текст уедет под печать */
    gap:0;
  }
  /* Подложка под текстом: снизу по центру лежит слой с росписью и печатью,
     без плашки описание сливается с ними (правка владельца 21.07). */
  .ok-guar__passport-body{
    display:block;
    padding:16px 18px 18px;
    border-radius:16px;
    background:color-mix(in srgb, var(--okw3-navy-b) 72%, transparent);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
  }
  .ok-guar__passport-label{
    margin-bottom:14px;
    font-size:23px;                         /* эталон 23px, было 11.5 */
    letter-spacing:.04em;
    line-height:1.2;
    color:var(--ok-on-dark);
    max-width:7ch;                          /* «ПАСПОРТ / СЕРВИСА» в две строки */
  }
  html body .ok-guar__passport-txt{
    max-width:24ch;                         /* эталон: ширина текста 198 из 306 */
    font-size:13.5px;
    line-height:1.6;
    color:var(--okw3-on-dark-2);
  }
  .ok-guar__passport-div{
    width:60px; height:1px;
    margin-top:20px;
    border-radius:0;
    background:color-mix(in srgb, var(--ok-on-dark) 30%, transparent);
  }
  /* Карточка гарантий — по замеру эталона: padding 32/26/26, radius 22, отступ
     от паспорта 14. Прежние 18/16 и radius 16 сжимали блок сильнее, чем на сайте. */
  .ok-guar__center{
    margin:14px 0 0;
    padding:32px 26px 26px;
    background:var(--ok-section-b);
    border-radius:22px;
  }
  .ok-guar__center-h{
    margin-bottom:12px;
    padding-bottom:0;
    border-bottom:0;
    font-size:12px;
    letter-spacing:.08em;
    color:var(--ok-text-muted);
  }
  /* Тезис — по замеру эталона: сетка «кружок 66 + текст», выравнивание по центру,
     зазор 16, пунктирный разделитель между пунктами (как на десктопе и на сайте).
     Было flex/flex-start/gap 11 без разделителя — блок читался плотнее и без ритма. */
  .ok-guar__point{
    display:grid;
    grid-template-columns:66px minmax(0,1fr);
    align-items:center;
    gap:16px;
    padding:14px 0;
    border-bottom:1px dashed var(--okw3-dash);
  }
  .ok-guar__point:last-child{ border-bottom:0; }
  /* ★ Выгоды — по замеру эталона сайта: белый кружок 66x66 с мягкой тенью,
     заголовок 19px/800, описание 13px. Прежде здесь кружок был обнулён
     (26px, background:none, без тени) и кегли занижены — блок читался как
     плоский список, а не как карточки рабочей версии. */
  .ok-guar__point-ic{
    width:66px; height:66px;
    flex:0 0 66px;
    border:0;
    background:var(--ok-section-a);
    border-radius:50%;
    box-shadow:0 4px 11px color-mix(in srgb, var(--ok-ink) 10%, transparent),
               inset 0 0 0 1px color-mix(in srgb, var(--ok-ink) 5%, transparent);
  }
  .ok-guar__point-ic img,
  .ok-guar__point-ic svg{ width:28px; height:28px; }
  /* !important — против `body h3{19px!important}`; значение совпадает с эталоном,
     объявляем детерминированно, а не «повезло». */
  html body .ok-guar__point-t{ font-size:19px !important; font-weight:var(--ok-fw-black); line-height:1.2; }
  html body .ok-guar__point-d{ font-size:13px; line-height:1.5; }
  /* ★ Решение владельца (21.07): подвал «ДЕЙСТВУЕТ ДЛЯ / ОСНОВАНИЕ» на мобилке
     ОСТАЁТСЯ — он есть в рабочей версии сайта и несёт смысл. Прежде здесь стояло
     `display:none` по замеру M11 мобильного мастера; ориентир сменён с макета на
     рабочую версию. Скрывается только декоративный штрих-код («на мобилке штрих-код
     можно скрыть») — он не несёт информации и на узком экране лишь ест высоту. */
  .ok-guar__foot{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:4px 16px;
    margin-top:14px;
    padding-top:12px;
  }
  .ok-guar__foot-bar{ display:none; }

  /* ★ D16 · ПЛИТКИ СКРЫТЫ НА МОБИЛКЕ — решение владельца 21.07.
     Причина: четыре плитки съедают высоту и открывают крупный попап, на узком
     экране это лишний слой. Скрываем ВЕСЬ ряд, но **узел остаётся в DOM**:
     поля `okna_guar_cards` живые и кормят десктоп — данные не теряем.
     Вернуть показ = снять `display:none` ниже; оформление плиток (правила
     .ok-guar__card* и 2×2 на 480) сохранено нетронутым специально для этого.
     ⚠ SEO: при mobile-first индексации скрытый текст теряет вес. Риск принят
     владельцем и зафиксирован в реестре (D16), тот же класс, что скрытая
     строка преимуществ. */
  .ok-guar__grid{ display:none; gap:10px; margin-top:12px; }
  html body .ok-guar__card{ padding:14px; gap:6px; border-radius:var(--ok-radius-card); }
  .ok-guar__card-ic{ width:30px; height:30px; background:none; border-radius:0; }
  .ok-guar__card-line{ display:none; }
  html body .ok-guar__card-t{ min-height:0; font-size:13.5px !important; font-weight:var(--ok-fw-bold); line-height:1.3; color:var(--ok-text); margin-top:0; }
  html body .ok-guar__card-d{ font-size:12px; line-height:1.45; }
  .ok-guar__card-arrow{ display:none; }    /* эталон M11: стрелки нет; попап остаётся */
}
@media (max-width:600px){
  /* размер H2 — глобальный канон okna-mobile.css (23px = мастер), см. [B2B];
     подчёркивание в мобильном мастере (M11) отсутствует */
  html body .ok-guar__h2{ padding-bottom:0; background-image:none; line-height:var(--ok-lh-h2-mobile); margin-bottom:16px; }
}
@media (max-width:480px){
  /* Ряд скрыт с 768 (D16). Правило оставлено как заготовка: если показ вернут,
     на 375 сетка обязана остаться 2×2, а не схлопнуться в столбец. */
  .ok-guar__grid{ grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion:reduce){
  html body .ok-guar__card{ transition:none; }
}