/* =====================================================================
   ВЕКТОР ИТ — Главная (front-page.php)
   ---------------------------------------------------------------------
   Фаза 2 (t-vektor-rebuild). Контент — 1-в-1 с живой главной (rules/web.md
   §13), кит — только к механике. Подключается ТОЛЬКО на главной
   (functions.php: is_front_page()). Namespace vkt-*, токены tokens.css.
   ===================================================================== */

/* ── Hero (было: рулетка 5 слайдов → согласованное изменение №1) ────── */
.vkt-hero { overflow: hidden; padding-block: var(--space-7); }
.vkt-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}
.vkt-hero__eyebrow {
  display: inline-block;
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-accent-on-dark);
  margin-bottom: var(--space-4);
}
.vkt-hero h1 { color: var(--color-white); }
/* 18px: 22px читался «огромным» (разбор владельца 2026-07-09) */
.vkt-hero__lead { font-size: var(--text-base); color: var(--color-accent-tint); margin-bottom: var(--space-6); }
/* Плашка цен hero: две цифры одной строкой вместо двух абзацев (~90px было).
   Грамматику не изобретаем — взята у .vkt-us-shift__bar (uslugi.css:153-176),
   единственного сегментного компонента на тёмном фоне в ките: flex-строка,
   radius-control, overflow:hidden, рамка rgba(255,255,255,.16), поверхность
   .06. Сами классы .vkt-us-shift__* НЕ переиспользуются — они page-scoped под
   спецтехнику и семантически про шкалу смены.
   Файл: front-page.css, а НЕ uslugi.css — этот грузится сайтвайд на
   VEKTOR_VER, а 6 страниц серии держат uslugi.css на захардкоженной версии
   (?ver=0.1.0 / 0.3.4) при Cache-Control max-age=31536000, туда правка до
   вернувшихся посетителей не доедет (t-vektor-css-ver).
   Высота: padding 2x16 + строка 16px/1.2 + рамки = ~53px (ориентир 48-56).
   t-vektor-hero-price-strip, 2026-08-03. */
.vkt-hero__price {
  display: flex;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  border-radius: var(--radius-control);
  overflow: hidden;
  margin-bottom: var(--space-6);
}
.vkt-hero__price-seg {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  min-width: 0;
}
.vkt-hero__price-seg:first-child { flex: 1 1 auto; }
/* разделитель сегментов — линия той же прозрачности, что и рамка */
.vkt-hero__price-seg + .vkt-hero__price-seg { border-left: 1px solid rgba(255, 255, 255, .16); }
.vkt-hero__price-label { font-size: var(--text-2xs); line-height: 1.2; color: rgba(255, 255, 255, .7); }
.vkt-hero__price-dot { line-height: 1.2; color: rgba(255, 255, 255, .35); }
.vkt-hero__price-value { font-size: var(--text-base); font-weight: 700; line-height: 1.2; color: var(--color-white); white-space: nowrap; }
@media (max-width: 560px) {
  .vkt-hero__price { flex-direction: column; }
  .vkt-hero__price-seg:first-child { flex: 0 0 auto; }
  .vkt-hero__price-seg + .vkt-hero__price-seg { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .16); }
}
.vkt-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
/* Медиа-слот справа: пропорцию задаёт РАМКА, а не содержимое (волна 1
   t-vektor-hero-align, 2026-08-03). Было height:auto — портретное фото 962x1024
   в колонке 579px давало 616px, схема .vkt-fchart — 315px, и hero гулял
   от 498 до 720px между страницами (замер прода до правки).
   1.84 — ЗАМЕР ЭТАЛОНА: hero топливной (/uslugi/gps-glonass-i-kontrol-topliva/)
   принят владельцем на проде 23.07 и служит образцом кита; её .vkt-hero__media
   на 1920 и 1366 = 579.1x314.6 -> 1.8407 (расчётные «~1.9» замером не
   подтвердились, верим замеру).
   Пропорция — на СЛОТЕ, не на внутреннем элементе: внутри три разные структуры
   (.vkt-fchart со SVG, .vkt-fchart с HTML-виджетом .vkt-us-shift на спецтехнике,
   растровое <img>, .vkt-hero-map на главной).
   Слот — грид-элемент, у него автоматический минимальный размер: содержимое
   выше 1.84 (карта главной, схемы на мобиле) слот не даёт раздавить — пропорция
   работает как «не ниже», а не как жёсткий кроп смысла. */
.vkt-hero__media { aspect-ratio: 1.84; display: flex; flex-direction: column; }
/* любая из трёх структур растягивается на весь слот */
.vkt-hero__media > * { flex: 1 1 auto; min-height: 0; }
.vkt-hero__media img { background: var(--color-white); border-radius: var(--radius-card); box-shadow: var(--shadow-md); width: 100%; height: 100%; object-fit: cover; box-sizing: border-box; }
/* Кадр под кроп подобран по каждому фото (осмотрены исходники, волна 1 п.5):
   1.33-1.41 -> 1.84 срезает 23-27% высоты, главное в кадре остаётся целиком. */
body.page-id-3665 .vkt-hero__media img { object-position: 50% 45%; } /* снегоуборочная: машина целиком, чуть воздуха сверху */
body.page-id-3928 .vkt-hero__media img { object-position: 50% 35%; } /* топливозаправщик: цистерна+лестница целиком, меньше асфальта снизу */
body.page-id-2139 .vkt-hero__media img { object-position: 50% 40%; } /* тягач: кабина и тент не срезаны сверху */
/* ⚠️ ВРЕМЕННО, ждёт волны 3 (там эти два фото меняют схемами .vkt-fchart):
   портреты 987x1024 и 962x1024 при кропе до 1.84 теряют ~50% кадра, поэтому
   берём самую осмысленную полосу — шапку отчёта A1Track и нижний блок
   «АвтоГРАФ» инфографики перехода (а не случайную середину). */
body.page-id-3797 .vkt-hero__media img { object-position: 50% 0%; }
body.page-id-2664 .vkt-hero__media img { object-position: 50% 100%; }
@media (min-width: 901px) {
  /* Замок высоты hero: 488px — контентная часть самой высокой левой
     (текстовой) колонки из 9 публичных. ПЕРЕСЧИТАН 2026-08-03
     (t-vektor-hero-price-strip): два абзаца цен в hero свернулись в плашку
     .vkt-hero__price, левые колонки укоротились и прежние 504px (по эталону
     топливной 501.6px, волна 1 t-vektor-hero-align) стали давать пустоту.
     Живой замер после правки: топливная 488, мониторинг 485, Wialon 485,
     лес 454, ЭРА 402, коммунальная 398, главная 377, вождение 377,
     топливозаправщики 320 -> максимум 488, он же ровно кратен 8.
     Hero везде ровно 584px (488 + padding-block 2x48). Только >=901px: ниже
     сетка одноколоночная (см. блок ниже), там фикс.высота дала бы пустоту. */
  .vkt-hero__grid { min-height: 488px; }
}
@media (max-width: 900px) {
  .vkt-hero__grid { grid-template-columns: 1fr; }
  .vkt-hero__media { order: -1; }
}

/* ── Общая сетка карточек (переиспользуется несколькими секциями) ──── */
.vkt-grid { display: grid; gap: var(--space-6); }
.vkt-grid--2 { grid-template-columns: repeat(2, 1fr); }
.vkt-grid--3 { grid-template-columns: repeat(3, 1fr); }
.vkt-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .vkt-grid--3, .vkt-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vkt-grid--2, .vkt-grid--3, .vkt-grid--4 { grid-template-columns: 1fr; } }
/* Отступ #2 (2026-07-14): на страницах услуг грид товаров шёл встык со
   следующим заголовком секции («Опциональное оборудование» и т.п.) — 0px
   между последней карточкой и h2. Сиблинг-селектор (не хардкод в .vkt-grid
   целиком) — не трогает грид, который является последним элементом секции
   (там разрыв уже даёт padding секции). */
.vkt-grid + h2 { margin-top: var(--space-8); }

.vkt-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .15s;
}
.vkt-card:hover { box-shadow: var(--shadow-md); }
.vkt-card__icon { width: 44px; height: 44px; margin-bottom: var(--space-4); color: var(--color-accent); }
.vkt-card h3, .vkt-card h4 { margin-bottom: var(--space-2); }
.vkt-card p { color: var(--color-ink-muted); margin: 0; }

/* ── Кейс (проблема/решение) ──────────────────────────────────────── */
.vkt-case-card { display: flex; flex-direction: column; gap: var(--space-4); }
/* S11 fix: убираем border-radius с inner-картинок кейсов — «странная рамка» (P3 чек-листа).
   card с radius-card + overflow hidden обрезает углы картинки сам. */
.vkt-case-card { overflow: hidden; }
.vkt-case-card img { border-radius: 0; width: 100%; height: 220px; object-fit: cover; }
.vkt-case-card__client { font-size: var(--text-2xs); color: var(--color-ink-muted); text-transform: uppercase; letter-spacing: .03em; }
.vkt-case-card__block + .vkt-case-card__block { margin-top: var(--space-3); }
.vkt-case-card__label { font-weight: 700; font-size: var(--text-2xs); color: var(--color-accent); text-transform: uppercase; letter-spacing: .03em; }
/* Bug 1: проблема/решение различаются цветом, не только текстом (2026-07-13) */
.vkt-case-card__label--problem { color: var(--color-danger); }
.vkt-case-card__label--solution { color: var(--color-success); }

/* ── Оборудование / доп. оборудование ────────────────────────────── */
.vkt-equip-card { text-align: center; }
.vkt-equip-card img { width: 100%; max-width: 220px; height: 160px; object-fit: contain; margin: 0 auto var(--space-4); display: block; }
.vkt-equip-card__badge { display: inline-block; font-size: var(--text-2xs); color: var(--color-accent); font-weight: 700; margin-bottom: var(--space-3); }

/* ── Услуги (тарифная карточка) ──────────────────────────────────── */
/* Bug 5: цена — отдельная смысловая группа от описания, не слипшийся margin
   (design.md «Блоки и сетка» — смысловые группы карточки разделять явно) */
.vkt-service-card__prices {
  display: flex; gap: var(--space-6); flex-wrap: wrap;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.vkt-service-card__price-label { font-size: var(--text-2xs); color: var(--color-ink-muted); }
.vkt-service-card__price-value { font-size: var(--text-lg); font-weight: 700; color: var(--color-ink); }

/* ── Платформа АвтоГРАФ ──────────────────────────────────────────── */
.vkt-platform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; margin-bottom: var(--space-8); }
.vkt-platform__grid img { border-radius: var(--radius-card); width: 100%; height: auto; box-shadow: var(--shadow-sm); }
@media (max-width: 900px) { .vkt-platform__grid { grid-template-columns: 1fr; } }
/* Карточная механика: блоки не «летают» (design.md «Фоны»), иконки 44px
   как у vkt-card__icon — один размер в группе (разбор 2026-07-09) */
.vkt-platform-feature {
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
}
.vkt-platform__features .vkt-platform-feature:first-child { border-top: none; padding-top: 0; }
.vkt-platform-feature h4 { font-size: var(--text-md); line-height: 1.25; margin-bottom: var(--space-1); color: var(--color-ink); font-weight: 700; }
.vkt-platform-feature p { font-weight: 400; color: var(--color-ink-muted); font-size: var(--text-2xs); }
.vkt-platform__features { display: flex; flex-direction: column; margin-top: var(--space-6); }
/* Bug 7: были разномастные PNG прод-сайта (одна пропала) — заменены на
   набор в спеке блока «Болевые точки» (outline + синий акцент, 2026-07-13) */
.vkt-platform-feature__icon { width: 32px; height: 32px; flex: none; display: block; }
.vkt-platform-feature__icon svg { width: 32px; height: 32px; display: block; }

/* Bug 6: скриншот платформы — убираем card-тень, скриншот/мокап не карточка
   (серый прямоугольник фона — часть исходного файла, не CSS; фикс изображения
   отдельной задачей, tokens тут не помогают) */
.vkt-platform__grid > img { box-shadow: none; }
/* Змейка сплитов (доп.7 §1): hero медиа справа -> платформу зеркалим (мокап слева) на десктопе */
@media (min-width: 901px) { .vkt-platform__grid > img { order: -1; } }

/* ── Табы (Возможности платформы / Примеры отчётов) ──────────────── */
.vkt-tabs__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.vkt-tabs__tab {
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  padding-inline: var(--space-5);
  border-radius: var(--radius-control);
  border: 2px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-ink);
  font-weight: 700;
  font-size: var(--text-2xs);
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color .15s, color .15s, background-color .15s;
}
/* Bug 8 (уточнено 2026-07-13): серый на ховере был НЕ дефолт браузера, а
   глобальный `button:hover` инлайн-стиль темы GeneratePress (кастомайзер,
   background-color:#3F4047) — селектор `элемент+:hover` даёт специфичность
   (0,1,1), которая обгоняет background из простого `.vkt-tabs__tab` (0,1,0).
   Моё правило по specificity выигрывало (0,3,0 > 0,1,1), НО background-color
   в нём не было указан — свойство "по умолчанию" утекало к GP. Урок: неполное
   переопределение = дыра для чужого правила, даже когда СЕЛЕКТОР выигрывает
   (design.md «Каскад CSS» — по свойствам, не по правилу целиком). */
.vkt-tabs__tab:hover:not([aria-selected="true"]) { background-color: var(--color-white); border-color: var(--color-accent); color: var(--color-accent); }
.vkt-tabs__tab[aria-selected="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-white); }
.vkt-tabs__panel { display: none; }
.vkt-tabs__panel.is-active { display: block; }
/* Bug 0 fix: gallery panel is display:grid, которое побивало display:none базового .vkt-tabs__panel.
   Фикс: явно контролируем display для комбо-класса (P3 чек-листа). */
.vkt-tabs__panel.vkt-tabs__gallery-grid { display: none; }
.vkt-tabs__panel.vkt-tabs__gallery-grid.is-active { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
.vkt-tabs__gallery-grid img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in; /* лайтбокс */
}

/* ── Мокап-рамка браузера для скринов ПО (пилот, 2026-07-13) ─────────
   Требование владельца: скрины интерфейса не голым screenshot, а в рамке
   (design.md «Демонстрация продукта»). Без внешних PNG-шаблонов — чистый
   CSS, работает с любым скрином, не нужно искать/лицензировать ассеты. */
.vkt-mockup {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
  background: var(--color-white);
}
.vkt-mockup__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-light);
  border-bottom: 1px solid var(--color-border);
}
.vkt-mockup__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border); flex: none; }
.vkt-mockup__bar-line { flex: 1; max-width: 280px; height: 8px; border-radius: 4px; background: var(--color-border); margin-left: var(--space-3); }

/* ── Bug 9: «Примеры отчётов» — табы слева, скрин справа (2026-07-13) ── */
.vkt-tabs--sidebar {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-8);
  align-items: start;
}
.vkt-tabs--sidebar .vkt-tabs__list {
  grid-column: 1;
  grid-row: 1;
  flex-direction: column;
  margin-bottom: 0;
}
.vkt-tabs--sidebar .vkt-tabs__list .vkt-tabs__tab { width: 100%; justify-content: flex-start; text-align: left; }
.vkt-tabs--sidebar .vkt-tabs__panel { grid-column: 2; grid-row: 1; }
@media (max-width: 900px) {
  .vkt-tabs--sidebar { grid-template-columns: 1fr; }
  .vkt-tabs--sidebar .vkt-tabs__list { grid-column: 1; grid-row: 1; flex-direction: row; }
  .vkt-tabs--sidebar .vkt-tabs__panel { grid-column: 1; grid-row: 2; }
}

/* ── Отзывы ───────────────────────────────────────────────────────── */
/* Bug 10+доп 2026-07-13: ровно 3 отзыва — это НЕ карусель, обычная сетка
   (design.md «Темп»: скролл-виджет оправдан только когда контент не влезает).
   Desktop = статичная 3-колоночная сетка, без скролла. Скролл-ряд остаётся
   ТОЛЬКО на мобайле, где 3 колонки физически не помещаются. */
.vkt-testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 900px) {
  .vkt-testimonials {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-3);
    margin-inline: calc(-1 * var(--space-5));
    padding-inline: var(--space-5);
  }
  .vkt-testimonial { scroll-snap-align: start; flex: 0 0 min(420px, 85vw); }
}
.vkt-testimonial__client { font-family: var(--font-head); font-weight: 700; margin-bottom: var(--space-3); }
.vkt-testimonial { display: flex; flex-direction: column; }
.vkt-testimonial__author { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; padding-top: var(--space-4); }
.vkt-testimonial__author img { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; }
.vkt-testimonial__author-name { font-weight: 700; font-size: var(--text-2xs); }
.vkt-testimonial__author-role { font-size: var(--text-2xs); color: var(--color-ink-muted); }

/* ── Команда ──────────────────────────────────────────────────────── */
/* Реальный размер/скругление фото — только в блоке S12 ниже. Дублировать
   height здесь ЗАПРЕЩЕНО: height жёстко фиксирует box и глушит aspect-ratio
   даже когда более позднее правило его "переопределяет" — CSS каскадит по
   СВОЙСТВАМ, а не по правилу целиком (Bug 2, найдено 2026-07-13: лица
   обрезались до лба, потому что забытый height:120px здесь оставался
   в силе поверх aspect-ratio:3/4 из S12). */
.vkt-team-card { text-align: center; }
.vkt-team-card__role { color: var(--color-ink-muted); font-size: var(--text-2xs); margin-bottom: var(--space-3); }
.vkt-team-card__contact { display: block; font-size: var(--text-2xs); }

/* ── CTA-баннер (подрядчик не устраивает) ────────────────────────── */
.vkt-cta-banner { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-8); align-items: center; }
.vkt-cta-banner img { width: 100%; height: auto; border-radius: var(--radius-card); }
@media (max-width: 900px) { .vkt-cta-banner { grid-template-columns: 1fr; } .vkt-cta-banner__media { order: -1; } }

/* ── FAQ-аккордеон (нативный details/summary + JS «одна открыта») ── */
.vkt-faq__item { border-bottom: 1px solid var(--color-border); }
.vkt-faq__item summary {
  list-style: none;
  cursor: pointer;
  padding-block: var(--space-5);
  font-weight: 700;
  font-family: var(--font-head);
  font-size: var(--text-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}
.vkt-faq__item summary::-webkit-details-marker { display: none; }
.vkt-faq__chevron { flex: none; transition: transform .2s; }
.vkt-faq__item[open] .vkt-faq__chevron { transform: rotate(180deg); }
.vkt-faq__item p { color: var(--color-ink-muted); padding-bottom: var(--space-5); margin: 0; }
/* FAQ живёт в navy-секции: ink-muted на navy нечитаем (разбор 2026-07-09) */
.vkt-navy .vkt-faq__item p { color: var(--color-accent-tint); }
@media (prefers-reduced-motion: reduce) { .vkt-faq__chevron { transition: none; } }

/* ── Форма заявки (вёрстка блока, без отправки — Фаза 2) ──────────── */
.vkt-request__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; }
@media (max-width: 900px) { .vkt-request__grid { grid-template-columns: 1fr; } }
.vkt-request__media img { width: 100%; height: auto; border-radius: var(--radius-card); }
.vkt-form { display: flex; flex-direction: column; gap: var(--space-4); }
.vkt-form label { font-size: var(--text-2xs); font-weight: 700; margin-bottom: var(--space-1); display: block; }
.vkt-form input[type="text"],
.vkt-form input[type="tel"],
.vkt-form input[type="email"] {
  width: 100%;
  min-height: 44px;
  padding-inline: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-size: var(--text-base);
  background: var(--color-white);
  color: var(--color-ink);
}
.vkt-form__consent { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-2xs); color: var(--color-ink-muted); }
.vkt-form__consent input[type="checkbox"] { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.vkt-form__consent a { color: var(--color-ink-muted); text-decoration: underline; }
.vkt-form__note { font-size: var(--text-2xs); color: var(--color-ink-muted); }

/* =================================================================
   P3 — КОМПОЗИЦИЯ (чек-лист главной-эталона 2026-07-09)
   ================================================================= */

/* ── Контраст h4 vs body в карточках (владелец: «одного цвета», G3/G4) */
.vkt-card h4 {
  color: var(--color-ink);        /* полный контраст 16:1 */
  font-size: var(--text-md);
  font-weight: 700;
  font-family: var(--font-head);
  margin-bottom: var(--space-3);
}
.vkt-card p { color: var(--color-ink-muted); }  /* приглушённый 5.48:1 */

/* ── Равная высота карточек в строке — stretch уже дефолт в grid,
   но flex-column на карточке может мешать. Фиксируем явно. */
.vkt-grid { align-items: stretch; }
.vkt-card { height: 100%; box-sizing: border-box; }

/* ── S2: иконка в карточке болевых точек (44px, из живого сайта) ── */
.vkt-card__icon {
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-4);
  display: block;
  flex: none;
}
.vkt-card__icon svg { width: 44px; height: 44px; display: block; }

/* ── S3: Слайдер «Решения задач» (одна карточка за раз, main.js) ─── */
.vkt-slider { position: relative; }
.vkt-slider__track { position: relative; min-height: 200px; }
.vkt-slider__item { display: none; }
.vkt-slider__item.is-active { display: block; }
.vkt-slider__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-top: var(--space-6);
}
.vkt-slider__btn {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  /* accent: секция слайдера теперь белая (navy = 2-4 удара, 2026-07-09) */
  border: 2px solid var(--color-accent);
  background: transparent;
  color: var(--color-accent);
  cursor: pointer;
  padding: 0;
  line-height: 0;
  transition: background-color .15s, color .15s;
  flex: none;
}
.vkt-slider__btn svg { display: block; flex: none; }
.vkt-slider__btn:hover,
.vkt-slider__btn:focus-visible { background: var(--color-accent); color: var(--color-white); }
/* Bug 3: без явного :active браузер подмешивал дефолтный серый нажатия */
.vkt-slider__btn:active { background: var(--color-accent); color: var(--color-white); border-color: var(--color-accent); }
.vkt-slider__dots { display: flex; gap: var(--space-2); }
.vkt-slider__dot {
  -webkit-appearance: none;
  appearance: none;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--color-accent);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background-color .15s;
}
.vkt-slider__dot.is-active,
.vkt-slider__dot:hover { background-color: var(--color-accent); }
/* Слайдер-карточка — полная ширина, скрин программы крупно */
.vkt-slider .vkt-case-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: start;
}
.vkt-slider .vkt-case-card img {
  /* S11: 0 — двойная рамка со скруглением карточки (приёмка P3 2026-07-09) */
  border-radius: 0;
  width: 100%;
  height: auto;
  min-height: 300px;
  object-fit: cover;
}
.vkt-slider .vkt-case-card__body { display: flex; flex-direction: column; gap: var(--space-4); }
@media (max-width: 900px) {
  .vkt-slider .vkt-case-card { grid-template-columns: 1fr; }
  .vkt-slider .vkt-case-card img { min-height: 200px; }
}

/* ── S10: Преимущества — чередующийся список (не сетка карточек) ── */
.vkt-advantages { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-8); }
@media (min-width: 768px) { .vkt-advantage:nth-last-child(2) { border-bottom: none; } }
@media (max-width: 767px) { .vkt-advantages { grid-template-columns: 1fr; } }
.vkt-advantage {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-6);
  align-items: start;
  padding-block: var(--space-5); /* Bug 11: было 48px (space-7) -> 24px по просьбе владельца 2026-07-13 */
  border-bottom: 1px solid var(--color-border);
}
.vkt-advantage:last-child { border-bottom: none; }
.vkt-advantage__num {
  font-family: var(--font-head);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1;
  padding-top: 4px;
}
.vkt-advantage__body h4 {
  font-family: var(--font-head);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-ink);
  margin-bottom: var(--space-3);
}
.vkt-advantage__body p { color: var(--color-ink-muted); margin: 0; }
@media (max-width: 600px) {
  .vkt-advantage { grid-template-columns: 48px 1fr; gap: var(--space-4); }
  .vkt-advantage__num { font-size: var(--text-xl); }
}

/* ── S12: Блок «Задайте вопрос» — лица крупнее, не сжимать ─────── */
.vkt-team-card img {
  width: 100%;
  height: auto; /* явный auto — иначе height:120px из старого правила выше побеждает per-property */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
  border-radius: var(--radius-card);
  margin: 0 0 var(--space-4);
  display: block;
}

/* ── Bug 1 (2026-07-13): фото кейсов Гортранс/УГМК — исходники обрезаны
   В КРУГ на проде (600x600, альфа-канал вне круга прозрачный, проверено
   скачиванием файла). Натянутые на прямоугольник 220px cover — прозрачные
   углы круга светятся белым фоном карточки = «странные вырезы».
   Фикс без новых ассетов: показываем фото КАК ЕСТЬ — кругом, не боремся
   с исходной формой. Новые/перекадрированные фото — отдельная задача. */
/* Карточка кейса — вся кликабельная ссылка (владелец 2026-07-14: заголовки
   кейсов кликабельны, ховер как у карточек товара — CARD-LINK-паттерн
   a.vkt-equip-card ниже, без отдельной кнопки «Подробнее»). flex-column
   сохранён для равной высоты в grid. */
.vkt-portfolio-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.vkt-portfolio-card__cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-control); margin-bottom: var(--space-4); display: block; }
.vkt-portfolio-card p { margin-bottom: 0; }
a.vkt-portfolio-card { color: inherit; text-decoration: none; }
a.vkt-portfolio-card:hover h4 { color: var(--color-accent); }

/* ── Лайтбокс для отчётов (Bug 7, main.js) ─────────────────────── */
.vkt-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(13, 52, 86, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  cursor: zoom-out;
  padding: var(--space-7);
}
.vkt-lightbox__img {
  max-width: 100%;
  max-height: 90vh;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  cursor: default;
}
.vkt-lightbox__close {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5);
  background-color: transparent;
  color: var(--color-white);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vkt-lightbox__close:hover { background-color: rgba(255,255,255,.15); border-color: var(--color-white); }

/* ── Результат-карточки кейсов (замена слайдера, 2026-07-13) ────── */
.vkt-result-card { display: flex; flex-direction: column; }
.vkt-result-card__num {
  font-family: var(--font-head);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-accent);
  line-height: 1.05;
  margin-top: var(--space-3);
}
.vkt-result-card__what {
  font-weight: 700;
  color: var(--color-ink);
  margin-top: var(--space-2);
  margin-bottom: var(--space-3);
}
/* «Как это было» убрано (владелец 2026-07-13): суть уже в строке карточки,
   раскрывашка дублировала её длинно; пруф = кнопка «Скрин из программы». */

/* Зона действия отделена от текста (правило «смысловые группы внутри
   карточки», 2026-07-13) */
.vkt-result-card__shot {
  -webkit-appearance: none; appearance: none;
  display: flex; align-items: center; gap: var(--space-3);
  align-self: stretch; margin-top: auto;
  padding: var(--space-4) 0 0; border: none;
  border-top: 1px solid var(--color-border);
  background: transparent; cursor: pointer; text-align: left;
  font-family: var(--font-body);
}
.vkt-result-card__shot:hover { background: transparent; }
.vkt-result-card__thumb {
  width: 72px; height: 48px; object-fit: cover;
  border-radius: var(--radius-control); border: 1px solid var(--color-border);
  flex: none;
}
.vkt-result-card__shot-label {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-weight: 700; font-size: var(--text-2xs); color: var(--color-accent);
  text-decoration: underline; text-underline-offset: 3px;
}
.vkt-result-card__shot:hover .vkt-result-card__shot-label { color: #2F548F; }
.vkt-result-card__shot-label svg { flex: none; }
/* пружина: текст прижат вверх, действие — вниз, карточки ровные */
.vkt-result-card p { margin-bottom: var(--space-4); }


/* CARD-LINK (2026-07-14): сброс вида карточки-ссылки товара жил ТОЛЬКО
   в catalog.css под .vkt-cat — на страницах услуг card-product.php выводит
   тот же a.vkt-equip-card БЕЗ этого скоупа → рендерился синей подчёркнутой
   ссылкой браузера (тема GP красит все <a>), в каталоге — тёмным без
   подчёркивания. Перенесено на компонент, site-wide (rules/design.md
   «Единый источник компонента»: одна разметка — один стиль везде, не по
   родительскому классу страницы). Дубль в catalog.css (.vkt-cat a.vkt-card)
   безвреден — та же пара свойств, специфичность не конфликтует.
   ===================================================================== */
a.vkt-equip-card { display: block; color: inherit; text-decoration: none; }
a.vkt-equip-card:hover h4 { color: var(--color-accent); }

/* Оборудование компактнее: гарантия чипом на фото (владелец 2026-07-13) */
.vkt-equip-card__media { position: relative; margin-bottom: var(--space-4); }
/* Размер картинки скоуплен по типу карточки (Ф2-т1, 2026-07-14):
   - КАРТОЧКА ТОВАРА (a.vkt-equip-card, вывод card-product.php — каталог/
     категория/услуги): квадратное фото 180x180 (было 170x120 — квадратные
     фото товаров 300x300 рендерились на 120px с пустым полем).
   - ТАЙЛЫ ГЛАВНОЙ (div.vkt-equip-card с чипом гарантии, без цены): компактный
     размер как ДО пилота — глобальные 180px раздули нарочно-компактные
     категорийные тайлы секции «Оборудование».
   object-fit:contain сохранён в обоих. */
a.vkt-equip-card .vkt-equip-card__media img { width: 100%; max-width: 180px; height: 180px; object-fit: contain; margin: 0 auto; display: block; }
div.vkt-equip-card .vkt-equip-card__media img { width: 100%; max-width: 170px; height: 120px; object-fit: contain; margin: 0 auto; display: block; }
.vkt-equip-card__chip {
  position: absolute; top: 0; left: 0;
  display: inline-flex; align-items: center; gap: var(--space-1);
  background: var(--color-bg-light); border: 1px solid var(--color-border);
  border-radius: 99px; padding: 4px 10px;
  font-size: var(--text-2xs); font-weight: 700; color: var(--color-accent);
}

/* Услуги-маршрутизатор: два поля на общем фоне (владелец 2026-07-13) */
.vkt-services__split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-6); align-items: start;
}
.vkt-services__group {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}
.vkt-services__group-title {
  font-size: var(--text-2xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-ink-muted);
  margin: var(--space-2) var(--space-4) var(--space-3);
}
.vkt-service-link {
  display: flex; gap: var(--space-4); align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  text-decoration: none;
  transition: background-color .15s;
}
.vkt-service-link:hover { background: var(--color-bg-light); text-decoration: none; }
.vkt-service-link__icon { width: 24px; height: 24px; flex: none; color: var(--color-accent); margin-top: 2px; }
.vkt-service-link__name { display: block; font-weight: 700; color: var(--color-ink); line-height: 1.3; }
.vkt-service-link:hover .vkt-service-link__name { color: var(--color-accent); }
.vkt-service-link__desc { display: block; font-size: var(--text-2xs); color: var(--color-ink-muted); margin-top: 2px; }
.vkt-services__price-note {
  margin-top: var(--space-6);
  background: var(--color-white); border: 1px solid var(--color-border);
  border-radius: var(--radius-control); padding: var(--space-4) var(--space-5);
  color: var(--color-ink-muted);
}
.vkt-services__price-note strong { color: var(--color-ink); }
@media (max-width: 900px) {
  .vkt-services__split { grid-template-columns: 1fr; }
}

/* Trust-полоса: крупнейшие автопарки (владелец 2026-07-13, Пачка-3) */
.vkt-trust { padding-block: var(--space-6); border-bottom: 1px solid var(--color-border); }
.vkt-trust__title {
  font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-ink-muted); text-align: center; margin-bottom: var(--space-5);
}
.vkt-trust__row { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-8); }
.vkt-trust__item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.vkt-trust__name { font-weight: 700; color: var(--color-ink); }
.vkt-trust__meta { font-size: var(--text-2xs); color: var(--color-ink-muted); }
@media (max-width: 560px) { .vkt-trust__row { flex-direction: column; align-items: center; gap: var(--space-4); } }

/* Центрированные заголовки секций (владелец 2026-07-13, Пачка-3 доп.2 §10) */
.vkt-section--center > .vkt-container > h2 { text-align: center; }

/* CTA-баннер: чат-пузыри жалоб на подрядчиков (владелец 2026-07-13, Пачка-3 доп.3) */
.vkt-cta-banner__chat { display: flex; flex-direction: column; gap: var(--space-3); max-width: 420px; margin-left: auto; }
.vkt-chat-bubble {
  background: rgba(255,255,255,.10);
  color: var(--color-accent-tint);
  border-radius: var(--radius-card);
  border-bottom-left-radius: 4px;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-2xs);
  align-self: flex-start;
}
.vkt-chat-bubble--ours {
  background: var(--color-accent);
  color: var(--color-white);
  border-bottom-left-radius: var(--radius-card);
  border-bottom-right-radius: 4px;
  align-self: flex-end;
  font-weight: 700;
}
@media (max-width: 900px) { .vkt-cta-banner__chat { margin: var(--space-5) auto 0; } }

.vkt-h2-accent { color: var(--color-accent); }
/* Пунктир-маршрут между «решите задачи» и «Решения задач» — визуальная связь
   двух половин одной истории; мотив = маршрут с пином, как в hero-картинке.
   Один раз на страницу, не размножать (design.md «Темп»: перебивка со смыслом). */
.vkt-section--connected { position: relative; padding-top: var(--space-9); }
.vkt-section--connected::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--space-8));
  left: 50%;
  width: 0;
  height: calc(var(--space-8) + var(--space-9) - 20px);
  border-left: 2px dashed var(--color-accent);
  opacity: .55;
}
.vkt-section--connected::after {
  content: '';
  position: absolute;
  top: calc(var(--space-9) - 26px);
  left: 50%;
  transform: translateX(-50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
}
@media (max-width: 767px) {
  .vkt-section--connected { padding-top: var(--space-8); }
  .vkt-section--connected::before { top: calc(-1 * var(--space-7)); height: calc(var(--space-7) + var(--space-8) - 18px); }
  .vkt-section--connected::after { top: calc(var(--space-8) - 24px); }
}


/* ── Hero-инфографика: карта мониторинга (владелец 2026-07-13; читается как карта) ──
   Улицы + маршрут ТС + машинки-глифы. Маршрут приглушён (не график); едущая машина анимируется. prefers-reduced-motion уважаем. */
/* display:flex — карточка карты тянется под слот .vkt-hero__media снаружи
   (волна 1): полоса-шапка сверху, канвас забирает остаток. Внутрь карты
   (дороги, анимация маршрута, чипы) не лезем. */
.vkt-hero-map { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: var(--shadow-md); overflow: hidden; display: flex; flex-direction: column; }
.vkt-hero-map__bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--color-bg-light); border-bottom: 1px solid var(--color-border); }
.vkt-hero-map__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border); flex: none; }
.vkt-hero-map__title { margin-left: var(--space-2); font-size: var(--text-2xs); font-weight: 700; color: var(--color-ink-muted); }
.vkt-hero-map__canvas { position: relative; flex: 1 1 auto; min-height: 0; }
.vkt-hero-map__svg { display: block; width: 100%; height: 100%; background: var(--color-bg-light); }
.vkt-hero-map__grid line { stroke: #e7edf4; stroke-width: 1; }
.vkt-hero-map__roads path { fill: none; stroke: #d5deec; stroke-linecap: round; }
.vkt-hero-map__road { stroke-width: 9; }
.vkt-hero-map__hw { stroke: #cdd8e9; stroke-width: 13; }
.vkt-hero-route { fill: none; stroke: var(--color-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: .6; stroke-dasharray: 900; stroke-dashoffset: 900; animation: vkt-hero-draw 2.6s ease .2s forwards; }
@keyframes vkt-hero-draw { to { stroke-dashoffset: 0; } }
.vkt-hero-dest { fill: var(--color-accent); }
.vkt-hero-dest-in { fill: var(--color-white); }
.vkt-hero-pin-halo { fill: var(--color-accent); transform-box: fill-box; transform-origin: center; animation: vkt-hero-pulse 2.6s ease-out infinite; }
@keyframes vkt-hero-pulse { 0% { transform: scale(.5); opacity: .4; } 70% { transform: scale(2.4); opacity: 0; } 100% { opacity: 0; } }
.vkt-veh__wheel { fill: #0d3456; }
.vkt-veh--live .vkt-veh__box, .vkt-veh--live .vkt-veh__cab { fill: var(--color-accent); }
.vkt-veh--idle .vkt-veh__box, .vkt-veh--idle .vkt-veh__cab { fill: #aebccf; }
.vkt-veh--idle .vkt-veh__wheel { fill: #7d8ca3; }
.vkt-hero-veh-wrap { display: none; }
@supports (offset-path: path('M0 0')) {
  .vkt-hero-veh-wrap { display: block; offset-path: path('M150 350 L150 262 Q150 250 162 250 L298 250 Q310 250 310 238 L310 122 Q310 110 322 110 L460 110'); offset-rotate: 0deg; animation: vkt-hero-move 7s linear .4s infinite; }
}
@keyframes vkt-hero-move { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.vkt-hero-map__chip { position: absolute; display: inline-flex; align-items: center; gap: 6px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 99px; padding: 5px 12px; font-size: var(--text-2xs); font-weight: 700; color: var(--color-ink); box-shadow: var(--shadow-sm); white-space: nowrap; }
.vkt-hero-map__chip--tl { top: 14px; left: 14px; }
.vkt-hero-map__live { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); flex: none; }
@media (prefers-reduced-motion: reduce) {
  .vkt-hero-route { animation: none; stroke-dashoffset: 0; }
  .vkt-hero-veh-wrap { animation: none; }
  .vkt-hero-pin-halo { animation: none; opacity: 0; }
}

/* Отзывы — оформить как цитату (владелец 2026-07-13) */
.vkt-testimonial p::before {
  content: '“';
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 46px;
  line-height: .5;
  color: var(--color-accent);
  opacity: .3;
  margin-bottom: var(--space-2);
}

/* Логотипы клиентов в trust-полосе — единый вид: grayscale + высота, цвет на ховере (владелец 2026-07-13) */
.vkt-trust__logo { height: 56px; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-3); }
.vkt-trust__logo svg, .vkt-trust__logo img { height: 56px; width: auto; max-width: 210px; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; }
.vkt-trust__item:hover .vkt-trust__logo svg, .vkt-trust__item:hover .vkt-trust__logo img { filter: none; opacity: 1; }

/* Возможности платформы: заголовок+табы в строку, скрин на всю ширину (владелец 2026-07-13, Пачка-3 доп.7) */
.vkt-tabs__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-6); }
.vkt-tabs__head h2 { margin-bottom: 0; }
.vkt-tabs__head .vkt-tabs__list { margin-bottom: 0; justify-content: flex-end; }
.vkt-tabs__panel-lead { max-width: 75ch; margin-bottom: var(--space-5); }
.vkt-tabs__panel:not(.vkt-tabs__gallery-grid) img { width: 100%; height: auto; border-radius: var(--radius-card); cursor: zoom-in; display: block; }
@media (max-width: 767px) { .vkt-tabs__head { flex-direction: column; } .vkt-tabs__head .vkt-tabs__list { justify-content: flex-start; } }

/* ── Ф3 (2026-07-14): живая CF7 внутри .vkt-form — маппинг на кит ────
   Разметку рендерит CF7 (wpcf7-form, wpautop): стили едут с компонентом
   (.vkt-form), не со страницей — rules/design.md «Единый источник». */
.vkt-form form.wpcf7-form { display: flex; flex-direction: column; gap: var(--space-4); }
.vkt-form .wpcf7-form p { margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.vkt-form .wpcf7-form-control-wrap { display: block; }
.vkt-form .wpcf7-form br { display: none; }
.vkt-form .wpcf7-acceptance .wpcf7-list-item {
  display: flex; align-items: flex-start; gap: var(--space-3); margin: 0;
  font-size: var(--text-2xs); color: var(--color-ink-muted);
}
.vkt-form .wpcf7-acceptance input[type="checkbox"] { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.vkt-form .wpcf7-acceptance a { color: var(--color-ink-muted); text-decoration: underline; }
.vkt-form input[type="submit"] {
  align-self: flex-start;
  background: var(--color-accent); color: #fff;
  border: none; border-radius: var(--radius-control);
  padding: var(--space-4) var(--space-6);
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-2xs);
  cursor: pointer;
}
/* hover: background-color явно (каскад-урок design.md — тема перебивает) */
.vkt-form input[type="submit"]:hover { background-color: #2F548F; }
.vkt-form input[type="submit"]:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 560px) { .vkt-form input[type="submit"] { align-self: stretch; width: 100%; } }
.vkt-form .wpcf7-not-valid-tip { color: #B3261E; font-size: var(--text-2xs); margin-top: 4px; display: block; }
.vkt-form .wpcf7-response-output {
  margin: 0; padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-border); border-radius: var(--radius-control);
  font-size: var(--text-2xs);
}
.vkt-form form.sent .wpcf7-response-output { border-color: #2e7d32; color: #2e7d32; }
.vkt-form form.invalid .wpcf7-response-output,
.vkt-form form.failed .wpcf7-response-output { border-color: #B3261E; color: #B3261E; }
/* CF7 прячет honeypot сам; скрытые поля не рвут flex-gap */
.vkt-form .wpcf7-form input[type="hidden"] { display: none; }

/* ── Ф3: поп-ап заявки ──────────────────────────────────────────── */
.vkt-popup { position: fixed; inset: 0; z-index: 9500; }
.vkt-popup[hidden] { display: none; }
.vkt-popup__overlay { position: absolute; inset: 0; background: rgba(13, 52, 86, .6); }
.vkt-popup__dialog {
  position: relative; margin: 8vh auto 0;
  max-width: 480px; width: calc(100% - 32px);
  max-height: 84vh; overflow: auto;
  background: #fff; border-radius: var(--radius-card);
  padding: var(--space-8);
  box-shadow: 0 20px 50px rgba(13, 52, 86, .35);
}
.vkt-popup__dialog h3 { margin: 0; padding-right: 40px; }
.vkt-popup__lead { color: var(--color-ink-muted); font-size: var(--text-2xs); margin: var(--space-2) 0 var(--space-5); }
.vkt-popup__close {
  position: absolute; top: var(--space-4); right: var(--space-4);
  background: transparent; border: none; cursor: pointer;
  color: var(--color-ink-muted); padding: 6px; line-height: 0;
}
.vkt-popup__close:hover { color: var(--color-ink); background-color: transparent; }
@media (max-width: 560px) { .vkt-popup__dialog { margin-top: 4vh; padding: var(--space-6); } }