/*

 * Vektor Child — Uslugi Pages Styles (Ф3, t-vektor-rebuild)

 * Правки ТОЛЬКО под обёрткой .vkt-us — не протекать на другие шаблоны.

 * Компоненты (vkt-card/vkt-tabs/vkt-faq/vkt-cta-banner/vkt-service-card__prices

 * и т.д.) уже подключены site-wide через front-page.css — здесь только то,

 * чего в ките ещё нет.

 */



/* ── S4: мини-блок пруфа у формы заявки (карта rebuild-page-map-2026-07-08.md) ──

   Верстка-заглушка: границы места заданы, ТЕКСТ = TODO-комментарий в разметке,

   пока не решён гейт O3 (публичность кейсов). */

.vkt-us .vkt-us-trust-proof {

  min-height: 56px;

  border: 1px dashed var(--color-border);

  margin-block: var(--space-5);

}



/* ── Табы: панель всегда полная ширина контейнера, независимо от объёма

   контента (владелец 2026-07-13). Протестировано на пилоте на 7 брейкпоинтах

   (1920/1200/1024/900/768/600/375) — ширина панелей уже совпадала (grid/block

   и так растягивают на 100%), бага не воспроизвёл. Ставлю явно defensively —

   на случай контента, где текста меньше, чем в проверенных панелях. */

.vkt-us .vkt-tabs__panel { width: 100%; box-sizing: border-box; }

.vkt-us .vkt-tabs--sidebar .vkt-tabs__panel { justify-self: stretch; }



/* ── FAQ: вопрос — h3 внутри summary (парити с прод-H3, находка Н4 от

   2026-07-13). h3 внутри summary наследует вид старого голого текста —

   глобальное h1,h2,h3{...} (style.css) не трогаем, гасим точечно тут. */

.vkt-us .vkt-faq__item summary h3 {

  margin: 0;

  font-size: inherit;

  font-weight: inherit;

  font-family: inherit;

  color: inherit;

  line-height: inherit;

}



/* =====================================================================

   Контроль топлива v3 (2026-07-22, t-vektor-toplivo-verstka) — новые

   компоненты для этой страницы. Скоуп .vkt-us — не протекать на другие

   услуги (rules/web.md §6).

   ===================================================================== */



/* ── Крошки: полоса navy сливается с hero ниже (владелец 2026-07-23 — было:

   белая полоса над навy-hero, «отклеена»). Общий стиль для всех услуг:

   класс .vkt-us__crumbs-bar/.vkt-us__crumbs, без привязки к этой странице. ── */

.vkt-us .vkt-us__crumbs-bar { background: var(--color-navy); }

.vkt-us .vkt-us__crumbs {

  display: block;

  margin: 0;

  padding: var(--space-3) 0;

  font-size: var(--text-2xs);

  color: rgba(255, 255, 255, .6);

}

.vkt-us .vkt-us__crumbs a { color: rgba(255, 255, 255, .6); text-decoration: underline; }

.vkt-us .vkt-us__crumbs a:hover { color: var(--color-white); }

.vkt-us .vkt-us__crumbs .breadcrumb_last { color: var(--color-white); font-weight: 700; }



/* ── Hero: график уровня топлива — переделан по артефакту дизайна

   (владелец 2026-07-23: старый .vkt-hero-map/.vkt-fg отклонён). НОВЫЙ

   компонент .vkt-fchart, страница-скоуп (не .vkt-hero-map — тот общий

   с главной, где отрисовывает карту дорог, трогать нельзя).

   --fuel-line — компонентный токен (не глобальный, tokens.css вне

   области этой задачи); задокументирован в design/ui-kit.md. ────────── */

.vkt-us .vkt-fchart {

  --fuel-line: #E8A13C;

  position: relative;

  background: rgba(255, 255, 255, .05);

  border: 1px solid rgba(255, 255, 255, .16);

  border-radius: var(--radius-card);

  padding: var(--space-4) var(--space-4) var(--space-3);

}

/* Внутренности схемы тянутся под слот hero (пропорция слота — front-page.css,

   волна 1 t-vektor-hero-align): подпись сверху, канвас забирает остаток,

   легенда снизу. Скоуп .vkt-hero__media — чтобы не задеть вторую копию

   .vkt-fchart ВНЕ hero (видеонаблюдение, блок «один подрядчик»).

   SVG остаётся с viewBox и дефолтным preserveAspectRatio="xMidYMid meet" —

   растяжения картинки не будет, разметку SVG не меняли. */

.vkt-us .vkt-hero__media .vkt-fchart { display: flex; flex-direction: column; box-sizing: border-box; }

.vkt-us .vkt-hero__media .vkt-fchart__canvas { flex: 1 1 auto; min-height: 0; }

.vkt-us .vkt-hero__media .vkt-fchart__svg { height: 100%; }

/* Спецтехника: внутри .vkt-fchart вместо __canvas стоит HTML-виджет

   .vkt-us-shift — тянем его тем же способом, иначе карточка даёт пустоту снизу. */

.vkt-us .vkt-hero__media .vkt-fchart > .vkt-us-shift { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; }

.vkt-us .vkt-fchart__head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: var(--space-2);

  margin-bottom: var(--space-2);

}

.vkt-us .vkt-fchart__label {

  font-size: var(--text-2xs);

  font-weight: 700;

  letter-spacing: .08em;

  text-transform: uppercase;

  color: var(--color-white);

}

.vkt-us .vkt-fchart__meta { font-size: var(--text-2xs); color: rgba(255, 255, 255, .62); }

.vkt-us .vkt-fchart__canvas { position: relative; }

.vkt-us .vkt-fchart__svg { display: block; width: 100%; height: auto; }

.vkt-us .vkt-fchart__grid line { stroke: rgba(255, 255, 255, .1); stroke-width: 1; }

.vkt-us .vkt-fchart__line {

  fill: none;

  stroke: var(--fuel-line);

  stroke-width: 2.5;

  stroke-linecap: round;

  stroke-linejoin: round;

  stroke-dasharray: 900;

  stroke-dashoffset: 900;

  animation: vkt-fchart-draw 2.2s ease .2s forwards;

}

@keyframes vkt-fchart-draw { to { stroke-dashoffset: 0; } }

.vkt-us .vkt-fchart__leader { stroke-width: 1; stroke-dasharray: 3 3; }

.vkt-us .vkt-fchart__leader--refuel { stroke: var(--color-success); }

.vkt-us .vkt-fchart__leader--drain { stroke: var(--color-danger); }

.vkt-us .vkt-fchart__dot { stroke: var(--color-white); stroke-width: 2; }

.vkt-us .vkt-fchart__dot--refuel { fill: var(--color-success); }

.vkt-us .vkt-fchart__dot--drain { fill: var(--color-danger); }

.vkt-us .vkt-fchart__event {

  position: absolute;

  font-size: var(--text-2xs);

  font-weight: 600;

  color: var(--color-white);

  white-space: nowrap;

  pointer-events: none;

}

.vkt-us .vkt-fchart__event--refuel { transform: translate(-38%, -100%); }

.vkt-us .vkt-fchart__event--drain { transform: translate(-46%, 4px); }

.vkt-us .vkt-fchart__legend {

  display: flex;

  flex-wrap: wrap;

  gap: var(--space-4);

  font-size: var(--text-2xs);

  color: rgba(255, 255, 255, .7);

  padding-top: var(--space-2);

}

.vkt-us .vkt-fchart__legend span { display: inline-flex; align-items: center; gap: 6px; }

.vkt-us .vkt-fchart__legend-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

.vkt-us .vkt-fchart__legend-dot--refuel { background: var(--color-success); }

.vkt-us .vkt-fchart__legend-dot--drain { background: var(--color-danger); }

@media (prefers-reduced-motion: reduce) {

  .vkt-us .vkt-fchart__line { animation: none; stroke-dashoffset: 0; }

}

@media (max-width: 560px) {

  .vkt-us .vkt-fchart__event { font-size: 12px; }

}



/* ── Мониторинг спецтехники: шкала смены «3 состояния» (hero-иллюстрация,

   не фото/скриншот — тот же приём, что vkt-fchart на топливной: макет

   экрана платформы, не выдаваемый за конкретный клиентский кейс) ──────── */

.vkt-us .vkt-us-shift { padding-top: var(--space-2); }

.vkt-us .vkt-us-shift__bar {

  display: flex;

  width: 100%;

  height: 40px;

  border-radius: var(--radius-control);

  overflow: hidden;

  margin-bottom: var(--space-3);

  border: 1px solid rgba(255, 255, 255, .16);

}

.vkt-us .vkt-us-shift__seg {

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: var(--text-2xs);

  color: var(--color-navy);

  font-weight: 700;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  padding: 0 var(--space-2);

}

.vkt-us .vkt-us-shift__seg--load { background: var(--color-accent-on-dark); }

.vkt-us .vkt-us-shift__seg--idle { background: rgba(255, 255, 255, .5); color: var(--color-navy); }

.vkt-us .vkt-us-shift__seg--stop { background: rgba(255, 255, 255, .18); color: var(--color-white); }

.vkt-us .vkt-us-shift__dot--load { background: var(--color-accent-on-dark); }

.vkt-us .vkt-us-shift__dot--idle { background: rgba(255, 255, 255, .5); }

.vkt-us .vkt-us-shift__dot--stop { background: rgba(255, 255, 255, .18); }

@media (max-width: 560px) {

  .vkt-us .vkt-us-shift__seg { font-size: 10px; padding: 0 4px; }

}



/* ── Проблемы, которые закрываем: боль-решение (без стрелок) ─────────── */

.vkt-us .vkt-pain-card { border-top: 3px solid var(--color-accent); }

.vkt-us .vkt-pain-card h4 { color: var(--color-ink); }

/* Иконка боли (Tabler outline, спека кита: viewBox 24, stroke 2, accent, 24px).

   Одна метафорная плоскость — «символ проблемы» (капля-слив/чек/рост/глаз). */

.vkt-us .vkt-pain-card__icon { display: inline-flex; margin-bottom: var(--space-3); color: var(--color-accent); }

.vkt-us .vkt-pain-card__icon svg { width: 24px; height: 24px; }



/* ── Кейс-спойлер: <details> как карточка, цитата + CTA внутри ───────── */

.vkt-us .vkt-case-spoiler {

  margin-top: var(--space-6);

  background: var(--color-white);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-card);

  box-shadow: var(--shadow-sm);

  padding: var(--space-5) var(--space-6);

}

.vkt-us .vkt-case-spoiler summary {

  list-style: none;

  cursor: pointer;

  font-weight: 700;

  font-family: var(--font-head);

  font-size: var(--text-md);

  color: var(--color-ink);

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: var(--space-4);

}

.vkt-us .vkt-case-spoiler summary::-webkit-details-marker { display: none; }

.vkt-us .vkt-case-spoiler .vkt-faq__chevron { flex: none; transition: transform .2s; }

.vkt-us .vkt-case-spoiler[open] .vkt-faq__chevron { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) { .vkt-us .vkt-case-spoiler .vkt-faq__chevron { transition: none; } }

.vkt-us .vkt-case-spoiler__body { padding-top: var(--space-5); }

.vkt-us .vkt-case-spoiler__quote {

  margin: 0 0 var(--space-5);

  padding-left: var(--space-5);

  border-left: 3px solid var(--color-accent);

  color: var(--color-ink-muted);

  font-size: var(--text-md);

}



/* ── Как работает: 3 карточки + выделенный результат ─────────────────── */

.vkt-us .vkt-us-result {

  display: grid;

  grid-template-columns: 220px 1fr;

  gap: var(--space-6);

  align-items: center;

  margin-top: var(--space-7);

  background: color-mix(in srgb, var(--color-success) 8%, var(--color-white));

  border: 1px solid color-mix(in srgb, var(--color-success) 22%, transparent);

  border-radius: var(--radius-card);

  padding: var(--space-6);

}

@media (max-width: 767px) { .vkt-us .vkt-us-result { grid-template-columns: 1fr; } }

.vkt-us .vkt-us-result h3 { margin-bottom: var(--space-3); }

.vkt-us .vkt-us-result p { margin: 0; }



/* ── Плейсхолдер (rules/design.md: изображения — варианты/заглушка,

   пунктирная рамка на --color-bg-light с подписью) ───────────────────── */

.vkt-us .vkt-us-placeholder {

  min-height: 160px;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  border: 2px dashed var(--color-border);

  border-radius: var(--radius-card);

  background: var(--color-bg-light);

  color: var(--color-ink-muted);

  font-size: var(--text-2xs);

  padding: var(--space-5);

}

.vkt-us .vkt-us-placeholder small { display: block; margin-top: var(--space-2); opacity: .8; }

.vkt-us .vkt-us-placeholder--wide { min-height: 240px; }



/* ── Тарировка проливом: текст + 2 плейсхолдера (фото станции + схема) ── */

.vkt-us .vkt-us-tar__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-8); align-items: center; }

.vkt-us .vkt-us-tar__viz { display: flex; flex-direction: column; }

@media (max-width: 900px) { .vkt-us .vkt-us-tar__grid { grid-template-columns: 1fr; row-gap: var(--space-6); } }



/* ── Варианты и цены: таблица + CTA у строки комплекта ────────────────── */

.vkt-us .vkt-us-price-wrap { overflow-x: auto; }

.vkt-us .vkt-us-price {

  width: 100%;

  border-collapse: collapse;

  background: var(--color-white);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-card);

  overflow: hidden;

}

.vkt-us .vkt-us-price th,

.vkt-us .vkt-us-price td {

  text-align: left;

  padding: var(--space-4) var(--space-5);

  border-bottom: 1px solid var(--color-border);

}

.vkt-us .vkt-us-price th {

  font-size: var(--text-2xs);

  text-transform: uppercase;

  letter-spacing: .04em;

  color: var(--color-ink-muted);

  background: var(--color-bg-light);

}

.vkt-us .vkt-us-price tbody tr:last-child td { border-bottom: none; }

.vkt-us .vkt-us-price__row--kit td { background: var(--color-bg-light); }

.vkt-us .vkt-us-price__row--kit td:first-child { font-size: var(--text-md); }

.vkt-us .vkt-us-price__cta { margin-left: var(--space-5); }

@media (max-width: 560px) {

  .vkt-us .vkt-us-price__row--kit td:last-child { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }

  .vkt-us .vkt-us-price__cta { margin-left: 0; }

}



/* ── Этапы и сроки ─────────────────────────────────────────────────────── */

.vkt-us .vkt-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-6); }

.vkt-us .vkt-steps__item { display: grid; grid-template-columns: 48px 1fr; gap: var(--space-5); align-items: start; }

.vkt-us .vkt-steps__num {

  width: 48px; height: 48px; border-radius: 50%;

  background: var(--color-accent); color: var(--color-white);

  display: flex; align-items: center; justify-content: center;

  font-family: var(--font-head); font-weight: 700; font-size: var(--text-md);

  flex: none;

}

.vkt-us .vkt-steps__item h4 { margin-bottom: var(--space-2); }

.vkt-us .vkt-steps__item p { margin: 0; }

@media (max-width: 560px) { .vkt-us .vkt-steps__item { grid-template-columns: 40px 1fr; gap: var(--space-4); } .vkt-us .vkt-steps__num { width: 40px; height: 40px; font-size: var(--text-base); } }



/* ── Каким машинам подходит: единая метафора «среда/груз» (ui-kit: вариант

   «машинка + груз» на 22px не читается, отклонён владельцем 2026-07-08 →

   у каждого типа техники иконка его среды/предмета: груз/пассажиры/стройка/

   снег/лес/топливо/урожай — Tabler outline, одна семья) ───────────────── */

.vkt-us .vkt-us-fit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }

@media (max-width: 900px) { .vkt-us .vkt-us-fit-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 560px) { .vkt-us .vkt-us-fit-grid { grid-template-columns: 1fr; } }

.vkt-us .vkt-us-fit-item {

  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);

  background: var(--color-white);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-card);

  padding: var(--space-5);

  color: inherit; text-decoration: none;

  transition: box-shadow .15s, border-color .15s, transform .15s;

}

a.vkt-us-fit-item:hover { box-shadow: var(--shadow-md); border-color: var(--color-accent); text-decoration: none; transform: translateY(-3px); }

a.vkt-us-fit-item:hover .vkt-us-fit-item__name { color: var(--color-accent); }

a.vkt-us-fit-item:hover .vkt-us-fit-item__icon { background: var(--color-accent); color: var(--color-white); }

/* Карточки типов техники, у которых нет профильной страницы («Автобусы»,
   «Сельхозтехника», «Легковой транспорт»), рендерятся в партиале div-ом, а
   подсветка наведения висит на a.vkt-us-fit-item — выглядели они при этом
   точно как кликабельные, и курсор зря искал ссылку. Владелец 06.11.2026:
   приглушить, чтобы разница читалась глазом. Фон подложки вместо белого,
   нейтральная иконка, приглушённый заголовок, обычный курсор.
   :not(.is-current) — карточка своей же услуги тоже div, но она значит
   «вы здесь», а не «страницы нет»; её оставляем как была. */
.vkt-us div.vkt-us-fit-item:not(.is-current) { background: var(--color-bg-light); cursor: default; }
.vkt-us div.vkt-us-fit-item:not(.is-current) .vkt-us-fit-item__icon { background: var(--color-border); color: var(--color-ink-muted); }
.vkt-us div.vkt-us-fit-item:not(.is-current) .vkt-us-fit-item__name { color: var(--color-ink-muted); }

.vkt-us .vkt-us-fit-item__icon {

  width: 64px; height: 64px; flex: none; box-sizing: border-box; padding: 14px;

  background: var(--color-accent-tint); border-radius: 18px;

  margin-bottom: var(--space-2); color: var(--color-accent);

  transition: background .15s, color .15s;

}

.vkt-us .vkt-us-fit-item__name { font-weight: 700; color: var(--color-ink); line-height: 1.3; }

.vkt-us .vkt-us-fit-item__desc { font-size: var(--text-2xs); color: var(--color-ink-muted); }



/* ── Находимся в Екатеринбурге: бокс + офис (табы) ─────────────────────

   Композиция (решение агента по киту, 2026-07-22): карта широким полотном

   + компактная карточка-инфо слева. Работает БЕЗ фото бокса (годного фото

   пока нет — придёт из потока монтаж-архива, вложим позже). ─────────────── */

.vkt-us .vkt-us-loc { display: grid; grid-template-columns: minmax(280px, 360px) 1fr; gap: var(--space-6); align-items: start; }

@media (max-width: 900px) { .vkt-us .vkt-us-loc { grid-template-columns: 1fr; } }

.vkt-us .vkt-us-loc__info {

  background: var(--color-white);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-card);

  padding: var(--space-6);

  display: flex; flex-direction: column;

}

.vkt-us .vkt-us-loc__info h3 { margin: 0 0 var(--space-4); }

.vkt-us .vkt-us-loc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }

.vkt-us .vkt-us-loc__row { display: flex; flex-direction: column; gap: var(--space-1); }

.vkt-us .vkt-us-loc__label { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-ink-muted); }

.vkt-us .vkt-us-loc__value { font-weight: 700; color: var(--color-ink); }

.vkt-us .vkt-us-loc__value a { color: var(--color-accent); text-decoration: none; }

.vkt-us .vkt-us-loc__value a:hover { text-decoration: underline; }

.vkt-us .vkt-us-loc__note { margin: var(--space-5) 0 0; color: var(--color-ink-muted); font-size: var(--text-2xs); }

/* Карта — единый источник .vkt-contact-map (совместим с блоком-конструктором).

   display:flex на обёртке (владелец 2026-07-23: низ карты = низ фото бокса) —

   виджет Яндекса дописывает свой <iframe> СВОИМ width/height уже после загрузки

   (async script), проценты по высоте на него от grid-stretch надёжно не резолвятся;

   flex-родитель растягивает iframe по высоте без завязки на % (типовой приём). */

.vkt-us .vkt-us-loc__map { display: flex; border-radius: var(--radius-card); overflow: hidden; min-height: 360px; }

.vkt-us .vkt-us-loc__map iframe { display: block; width: 100%; height: 100%; flex: 1; min-height: 360px; border: none; }

.vkt-us .vkt-contact-map { display: flex; border-radius: var(--radius-card); overflow: hidden; }

.vkt-us .vkt-contact-map iframe { display: block; width: 100%; height: 100%; flex: 1; border: none; }



/* ── 6.1 Платформа коротко — компактная полоса преимуществ ─────────────

   Светлое поле (bg-light) сразу под navy-«Возможностями» — группирует

   как «платформа», не «матрас» (design.md фоны). Компактный паддинг

   (48/32) вместо секционного 64/48 — полоса, не полноценная секция.

   Пункты — плоские колонки на поле (не летают, фон несёт группа). ───── */

.vkt-us .vkt-us-plat { background: var(--color-bg-light); padding-block: var(--space-7); }

@media (max-width: 767px) { .vkt-us .vkt-us-plat { padding-block: var(--space-6); } }

.vkt-us .vkt-us-plat__grid {

  list-style: none; margin: 0; padding: 0;

  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6);

}

@media (max-width: 900px) { .vkt-us .vkt-us-plat__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } }

@media (max-width: 480px) { .vkt-us .vkt-us-plat__grid { grid-template-columns: 1fr; } }

.vkt-us .vkt-us-plat__item { display: flex; flex-direction: column; align-items: flex-start; }

.vkt-us .vkt-us-plat__icon { display: inline-flex; color: var(--color-accent); margin-bottom: var(--space-3); }

.vkt-us .vkt-us-plat__icon svg { width: 26px; height: 26px; }

.vkt-us .vkt-us-plat__title { margin: 0 0 var(--space-2); font-weight: 700; font-family: var(--font-head); color: var(--color-ink); line-height: 1.3; }

.vkt-us .vkt-us-plat__desc { margin: 0; font-size: var(--text-2xs); color: var(--color-ink-muted); line-height: 1.5; }



/* =====================================================================

   Финализация топливной (2026-07-22, t-vektor-toplivo-final) — устройство

   тарировки + вердикт, скрины-lightbox, поток-коннектор, таймлайн.

   Скоуп .vkt-us. Иконки/коннекторы decorative (aria-hidden / псевдоэлементы).

   ===================================================================== */



/* ── Блок 5: устройство (станция Экзатрон) с 2 выносками + плашка-вердикт ── */

.vkt-us .vkt-us-device {

  position: relative; margin: 0;

  background: var(--color-white);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-card);

  box-shadow: var(--shadow-sm);

  overflow: hidden;

}

.vkt-us .vkt-us-device__img { display: block; width: 100%; height: auto; }

/* Выноски — информативный ТЕКСТ (не aria-hidden): белая пилюля + акцентная грань-указатель */

.vkt-us .vkt-us-device__co {

  position: absolute; z-index: 2;

  display: inline-flex; align-items: center; max-width: 48%;

  padding: 6px 12px;

  background: var(--color-white);

  border: 1px solid var(--color-border);

  border-left: 3px solid var(--color-accent);

  border-radius: var(--radius-control);

  box-shadow: var(--shadow-sm);

  font-size: var(--text-2xs); font-weight: 700; color: var(--color-ink);

  line-height: 1.25;

}

.vkt-us .vkt-us-device__co--gas { top: 5%; left: 3%; }

.vkt-us .vkt-us-device__co--station {

  top: 42%; right: 3%; text-align: right;

  border-left: none; border-right: 3px solid var(--color-accent);

}

@media (max-width: 560px) {

  .vkt-us .vkt-us-device__co { font-size: 11px; padding: 4px 9px; max-width: 54%; }

  .vkt-us .vkt-us-device__co--gas { top: 2%; left: 2%; }

  .vkt-us .vkt-us-device__co--station { top: auto; bottom: 4%; right: 2%; }

}



.vkt-us .vkt-us-verdict {

  background: var(--color-white);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-card);

  box-shadow: var(--shadow-sm);

  padding: var(--space-6);

  display: flex; flex-direction: column;

}

.vkt-us .vkt-us-verdict__figure {

  font-family: var(--font-head); font-weight: 700; line-height: 1;

  font-size: var(--text-2xl); color: var(--color-success);

}

.vkt-us .vkt-us-verdict__unit {

  margin-top: var(--space-2);

  font-family: var(--font-head); font-weight: 700;

  font-size: var(--text-md); color: var(--color-ink);

}

.vkt-us .vkt-us-verdict__note { margin: var(--space-3) 0 0; color: var(--color-ink); line-height: 1.5; }

.vkt-us .vkt-us-verdict__bad-row {

  display: flex; align-items: center; flex-wrap: wrap;

  gap: var(--space-3); margin-top: var(--space-4);

}

.vkt-us .vkt-us-verdict__bad {

  display: inline-flex; align-items: center; gap: var(--space-2);

  flex: none;

  padding: 6px 14px 6px 8px; border-radius: 99px;

  background: color-mix(in srgb, var(--color-danger) 8%, transparent);

  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);

  color: var(--color-danger); font-size: var(--text-2xs); font-weight: 700;

}

.vkt-us .vkt-us-verdict__bad svg { flex: none; width: 18px; height: 18px; padding: 2px; border-radius: 50%; background: var(--color-danger); color: #fff; }

.vkt-us .vkt-us-verdict__bad-note { margin: 0; color: var(--color-ink-muted); font-size: var(--text-2xs); line-height: 1.4; }



/* ── Скрин-из-программы: кликабельный, открывается в lightbox (main.js

   data-vkt-shot). Блок 3 (спойлер-кейс) и блок 4 (результат). ─────────── */

.vkt-us .vkt-us-shot {

  -webkit-appearance: none; appearance: none;

  display: block; width: 100%; padding: 0; border: none;

  background: transparent; cursor: zoom-in; text-align: left;

  font-family: var(--font-body);

}

.vkt-us .vkt-us-shot img {

  display: block; width: 100%; height: auto;

  border: 1px solid var(--color-border); border-radius: var(--radius-card);

}

.vkt-us .vkt-us-shot__hint {

  display: inline-flex; align-items: center; gap: var(--space-2);

  margin-top: var(--space-3);

  font-size: var(--text-2xs); font-weight: 700; color: var(--color-accent);

  text-decoration: underline; text-underline-offset: 3px;

}

.vkt-us .vkt-us-shot__hint svg { flex: none; }

.vkt-us .vkt-us-shot:hover .vkt-us-shot__hint { color: #2F548F; }

.vkt-us .vkt-case-spoiler__shot { margin-bottom: var(--space-5); }



/* ── Блок 4: поток-коннектор терминал → датчик → платформа (система).

   Псевдоэлементы (вне a11y-дерева), без анимации → reduced-motion безопасно.

   Десктоп ≥900 — горизонтально; 560-900 (2 кол) прячем; ≤560 — вертикально. */

.vkt-us .vkt-us-flow .vkt-equip-card { position: relative; }

.vkt-us .vkt-us-flow .vkt-equip-card:not(:last-child)::after {

  content: ''; position: absolute; z-index: 2;

  top: 50%; right: calc(-1 * var(--space-6)); width: var(--space-6); height: 0;

  border-top: 2px dashed var(--color-accent); opacity: .75;

  transform: translateY(-50%);

}

.vkt-us .vkt-us-flow .vkt-equip-card:not(:last-child)::before {

  content: ''; position: absolute; z-index: 3;

  top: 50%; right: calc(-0.5 * var(--space-6) - 4px);

  width: 8px; height: 8px; border-radius: 50%;

  background: var(--color-accent); transform: translateY(-50%);

}

@media (max-width: 900px) {

  .vkt-us .vkt-us-flow .vkt-equip-card:not(:last-child)::after,

  .vkt-us .vkt-us-flow .vkt-equip-card:not(:last-child)::before { display: none; }

}

@media (max-width: 560px) {

  .vkt-us .vkt-us-flow .vkt-equip-card:not(:last-child)::after {

    display: block; top: auto; bottom: calc(-1 * var(--space-6));

    left: 50%; right: auto; width: 0; height: var(--space-6);

    border-top: none; border-left: 2px dashed var(--color-accent);

    transform: translateX(-50%);

  }

  .vkt-us .vkt-us-flow .vkt-equip-card:not(:last-child)::before {

    display: block; top: auto; bottom: calc(-0.5 * var(--space-6) - 4px);

    left: 50%; right: auto; transform: translateX(-50%);

  }

}



/* ── Блок 8: компактный горизонтальный таймлайн (5 узлов в линию) ──────── */

.vkt-us .vkt-timeline {

  list-style: none; margin: 0; padding: 0;

  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-6);

}

.vkt-us .vkt-timeline__step { position: relative; padding-top: calc(40px + var(--space-4)); }

.vkt-us .vkt-timeline__num {

  position: absolute; top: 0; left: 0; z-index: 1;

  width: 40px; height: 40px; border-radius: 50%;

  background: var(--color-accent); color: var(--color-white);

  display: flex; align-items: center; justify-content: center;

  font-family: var(--font-head); font-weight: 700; font-size: var(--text-md);

}

.vkt-us .vkt-timeline__step:not(:last-child)::before {

  content: ''; position: absolute; z-index: 0;

  top: 19px; left: 40px; right: calc(-1 * var(--space-6));

  height: 2px; background: var(--color-border);

}

.vkt-us .vkt-timeline__title { margin: 0 0 var(--space-2); font-size: var(--text-base); font-weight: 700; }

.vkt-us .vkt-timeline__desc { margin: 0; color: var(--color-ink-muted); font-size: var(--text-2xs); line-height: 1.5; }

@media (max-width: 900px) {

  .vkt-us .vkt-timeline { grid-template-columns: repeat(2, 1fr); }

  .vkt-us .vkt-timeline__step:not(:last-child)::before { display: none; }

}

@media (max-width: 560px) {

  .vkt-us .vkt-timeline { grid-template-columns: 1fr; gap: 0; }

  .vkt-us .vkt-timeline__step { padding: 0 0 var(--space-5) calc(40px + var(--space-4)); }

  .vkt-us .vkt-timeline__step:not(:last-child)::before {

    display: block; top: 40px; bottom: 4px; left: 19px; right: auto;

    width: 2px; height: auto;

  }

}



/* =====================================================================

   Правки по ревью владельца (2026-07-22): блок 5 компактнее (нахлёст

   вердикта на устройство), скрин кейса меньше, результат — зелёный,

   фото бокса в блоке 10.

   ===================================================================== */



/* Блок 5: плашка-вердикт «нахлёстывает» низ устройства → секция компактнее.

   2026-07-23: нахлёст поднят ещё на 15px (владелец) — блок 5 заметно ниже. */

.vkt-us .vkt-us-verdict {

  position: relative; z-index: 2;

  margin-top: calc(-1 * var(--space-7) - 15px);

  margin-inline: var(--space-5);

}

@media (max-width: 900px) { .vkt-us .vkt-us-verdict { margin-inline: 0; margin-top: calc(-1 * var(--space-6) - 15px); } }

/* --flat: нейтрализует нахлёст на страницах без device-картинки выше (РНИС и подобные) */

.vkt-us .vkt-us-verdict--flat { margin-top: var(--space-5); }

@media (max-width: 900px) { .vkt-us .vkt-us-verdict--flat { margin-top: var(--space-4); } }



/* Блок 3: скрин из программы под спойлером — меньше (не на всю ширину) */

.vkt-us .vkt-us-shot--sm { max-width: 460px; }



/* Блок 10: фото бокса под карточкой адреса (левая колонка), карта — справа */

.vkt-us .vkt-us-loc__col { display: flex; flex-direction: column; gap: var(--space-5); }

.vkt-us .vkt-us-loc__photo {

  display: block; width: 100%; height: auto;

  border: 1px solid var(--color-border); border-radius: var(--radius-card);

  object-fit: cover;

}



/* =====================================================================

   Видеонаблюдение на транспорте (2026-07-27) — блок 7 «Как считаем

   стоимость» адаптирован без прайс-таблицы на камеры (факторы расчёта

   текстом вместо цифр, см. content/uslugi/videonablyudenie-transporta-v1.md).

   ===================================================================== */

.vkt-us .vkt-us-factors {

  margin: var(--space-5) 0 var(--space-6);

  padding-left: var(--space-5);

  display: flex; flex-direction: column; gap: var(--space-2);

}

.vkt-us .vkt-us-factors li { list-style: disc; color: var(--color-ink-muted); }



/* =====================================================================

   Правки по замечаниям владельца 2026-08-03 (скриншоты)

   ===================================================================== */



/* Правило `.vkt-us .vkt-navy .vkt-us-factors li { color: --color-accent-tint }`

   удалено 2026-08-03 (волна 1 t-vektor-hero-align) вместе с буллетами hero РНИС:

   решение владельца — буллетов в hero нет ни у кого. Это было ЕДИНСТВЕННОЕ место,

   где список факторов лежал на navy (греп: остальные 5 `.vkt-us-factors` — на

   светлых секциях --tint/белой). Вернуть, если список снова окажется на тёмной

   поверхности: базовое `.vkt-us .vkt-us-factors li` красит в --color-ink-muted. */



/* Абзац сразу под рядом карточек шёл встык (0px): у .vkt-grid/.vkt-us-fit-grid

   нет нижнего margin, а у <p> нет верхнего. Для h2 такое правило уже есть

   (.vkt-grid + h2, front-page.css) — тут тот же сиблинг-приём для абзаца,

   общим местом на всю серию услуг (ЭРА, РНИС, A1Track), не точечно.

   32px = «между группами элементов» по шкале отступов кита (ui-kit §1.4). */

.vkt-us .vkt-grid + p,

.vkt-us .vkt-us-fit-grid + p { margin-top: var(--space-6); }



/* Длинная надпись кнопки не переносится (.vkt-btn{white-space:nowrap}, style.css)

   и на узком экране распирает страницу за вьюпорт: на РНИС кнопка «Подробнее о

   подключении к ЭРА-ГЛОНАСС» = 398px при вьюпорте 375 → документ уезжал в

   горизонтальную прокрутку. Баг ПРЕД-СУЩЕСТВУЮЩИЙ (воспроизведён на версии

   страницы до правок 03.08), но правится тут: страница в приёмке, а лечить

   надо не текстом кнопки. Разрешаем перенос только на узких экранах и общим

   правилом на всю серию услуг — брейкпоинт 560px уже используется в этом файле. */

@media (max-width: 560px) {

  .vkt-us .vkt-btn { white-space: normal; text-align: center; }

}



/* =====================================================================

   Спецтехника v2 (2026-08-03, план plans/2026-08-03-vektor-spectehnika-

   redesign.md) - селективный порт дизайн-грамматики CD-макета.

   ВСЕ правила скоупятся модификатором .vkt-us--v2 - он стоит ТОЛЬКО в

   page-spectehniki-v2.php: оригинальная страница спецтехники и остальная

   серия услуг этих правил не видят (заморозка оригинала до апрува).

   После апрува v2 блок переезжает в оригинал вместе со скоуп-классом.

   ===================================================================== */



/* ── Кикер секции (CD: короткий ярлык над H2, левый край заголовков -

   решение по умолчанию №2 плана, в ui-kit не фиксируем до взгляда владельца) */

.vkt-us--v2 .vkt-kicker {

  display: block;

  font-size: var(--text-2xs);

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: .08em;

  color: var(--color-accent);

  margin-bottom: var(--space-2);

}



/* ── Проблемы (пакет п.1): номер карточки + сноска «В платформе:» ────── */

.vkt-us--v2 .vkt-pain2 { display: flex; flex-direction: column; }

.vkt-us--v2 .vkt-pain2__num {

  font-family: var(--font-head);

  font-weight: 700;

  font-size: var(--text-md);

  color: var(--color-accent);

  margin-bottom: var(--space-2);

}

.vkt-us--v2 .vkt-pain2 p { margin: 0 0 var(--space-4); }

.vkt-us--v2 .vkt-pain2 p.vkt-pain2__plat {

  margin: auto 0 0;

  padding: var(--space-3) var(--space-4);

  background: var(--color-accent-tint);

  border-radius: var(--radius-control);

  color: var(--color-ink);

}

.vkt-us--v2 .vkt-pain2__plat strong { color: var(--color-accent); }



/* ── Пример расчёта (пакет п.2): цифра + дизайн-таблица вводных ──────── */

.vkt-us--v2 .vkt-calc {

  margin-top: var(--space-6);

  background: var(--color-white);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-card);

  box-shadow: var(--shadow-sm);

  padding: var(--space-6);

  display: grid;

  grid-template-columns: 1fr 1.2fr;

  gap: var(--space-6);

  align-items: center;

}

@media (max-width: 767px) { .vkt-us--v2 .vkt-calc { grid-template-columns: 1fr; } }

.vkt-us--v2 .vkt-calc__kicker {

  display: block;

  font-size: var(--text-2xs);

  text-transform: uppercase;

  letter-spacing: .04em;

  color: var(--color-ink-muted);

  margin-bottom: var(--space-2);

}

.vkt-us--v2 .vkt-calc__figure {

  font-family: var(--font-head);

  font-weight: 700;

  line-height: 1;

  font-size: var(--text-2xl);

  color: var(--color-danger);

}

.vkt-us--v2 .vkt-calc__unit {

  margin-top: var(--space-2);

  font-family: var(--font-head);

  font-weight: 700;

  font-size: var(--text-md);

  color: var(--color-ink);

}

.vkt-us--v2 .vkt-calc__table { width: 100%; border-collapse: collapse; }

.vkt-us--v2 .vkt-calc__table td {

  padding: var(--space-3) 0;

  border-bottom: 1px solid var(--color-border);

  color: var(--color-ink-muted);

}

.vkt-us--v2 .vkt-calc__table td:last-child {

  text-align: right;

  font-weight: 700;

  color: var(--color-ink);

  white-space: nowrap;

}

.vkt-us--v2 .vkt-calc__table tr:last-child td { border-bottom: none; }



/* ── Как работает (пакет п.3): номера шагов + чипы «Технические детали» */

.vkt-us--v2 .vkt-step-card__num {

  display: inline-flex;

  align-items: baseline;

  gap: var(--space-2);

  font-family: var(--font-head);

  font-weight: 700;

  font-size: var(--text-md);

  color: var(--color-accent);

  margin-bottom: var(--space-2);

}

.vkt-us--v2 .vkt-step-card__num small {

  font-family: var(--font-body);

  font-weight: 400;

  font-size: var(--text-2xs);

  color: var(--color-ink-muted);

}

.vkt-us--v2 .vkt-tech-chips {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: var(--space-3);

  margin-top: var(--space-6);

}

.vkt-us--v2 .vkt-tech-chips__label { font-weight: 700; color: var(--color-ink); }

.vkt-us--v2 .vkt-tech-chip {

  padding: 6px 14px;

  border: 1px solid var(--color-border);

  border-radius: 99px;

  background: var(--color-white);

  font-size: var(--text-2xs);

  color: var(--color-ink-muted);

  white-space: nowrap;

}

@media (max-width: 560px) { .vkt-us--v2 .vkt-tech-chip { white-space: normal; } }



/* ── Моточасы (пакет п.4): 3 состояния списком + факт-карточки сбоку ──

   Цвета точек семантические из кита: работа = success, холостой ход =

   danger (потери топлива - нить всей страницы), простой = muted. */

.vkt-us--v2 .vkt-us-tar__grid { align-items: start; }

.vkt-us--v2 .vkt-states {

  list-style: none;

  margin: var(--space-5) 0;

  padding: 0;

  display: flex;

  flex-direction: column;

  gap: var(--space-3);

}

.vkt-us--v2 .vkt-states li {

  display: flex;

  align-items: flex-start;

  gap: var(--space-3);

  background: var(--color-white);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-control);

  padding: var(--space-3) var(--space-4);

}

.vkt-us--v2 .vkt-states__dot {

  width: 10px;

  height: 10px;

  border-radius: 50%;

  flex: none;

  margin-top: 7px;

}

.vkt-us--v2 .vkt-states__dot--load { background: var(--color-success); }

.vkt-us--v2 .vkt-states__dot--idle { background: var(--color-danger); }

.vkt-us--v2 .vkt-states__dot--stop { background: var(--color-ink-muted); }

.vkt-us--v2 .vkt-facts { display: flex; flex-direction: column; gap: var(--space-4); }

.vkt-us--v2 .vkt-fact {

  background: var(--color-white);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-card);

  box-shadow: var(--shadow-sm);

  padding: var(--space-4) var(--space-5);

}

.vkt-us--v2 .vkt-fact__figure {

  font-family: var(--font-head);

  font-weight: 700;

  font-size: var(--text-lg);

  line-height: 1.1;

  color: var(--color-accent);

}

.vkt-us--v2 .vkt-fact--lead .vkt-fact__figure { font-size: var(--text-2xl); color: var(--color-success); }

.vkt-us--v2 .vkt-fact__desc { margin: var(--space-1) 0 0; font-size: var(--text-2xs); color: var(--color-ink-muted); line-height: 1.5; }



/* ── Кейсы и отзывы (пакет п.7): синий кикер-акцент компании ──────────── */

.vkt-us--v2 .vkt-case2__kicker {

  display: block;

  font-size: var(--text-2xs);

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: .06em;

  color: var(--color-accent);

  margin-bottom: var(--space-2);

}

.vkt-us--v2 .vkt-testimonial__client {

  font-size: var(--text-2xs);

  text-transform: uppercase;

  letter-spacing: .06em;

  color: var(--color-accent);

}



/* ── Преимущества (пакет п.8): компактнее по CD ───────────────────────── */

.vkt-us--v2 .vkt-advantage { grid-template-columns: 56px 1fr; gap: var(--space-5); padding-block: var(--space-4); }

.vkt-us--v2 .vkt-advantage__num { font-size: var(--text-xl); }



/* ── FAQ (пакет п.9): заголовок по центру ─────────────────────────────── */

.vkt-us--v2 [data-vkt-faq] h2 { text-align: center; }



/* ── Форма (пакет п.10, живёт пока на v2): плашка-подпись к фото ──────── */

.vkt-us--v2 .vkt-req-person { position: relative; margin: 0; }

.vkt-us--v2 .vkt-req-person img { display: block; width: 100%; height: auto; }

.vkt-us--v2 .vkt-req-person__plate {

  position: absolute;

  left: var(--space-4);

  right: var(--space-4);

  bottom: var(--space-4);

  background: var(--color-white);

  border: 1px solid var(--color-border);

  border-radius: var(--radius-control);

  box-shadow: var(--shadow-md);

  padding: var(--space-3) var(--space-4);

  display: flex;

  flex-direction: column;

  gap: 2px;

}

.vkt-us--v2 .vkt-req-person__name { font-weight: 700; color: var(--color-ink); }

.vkt-us--v2 .vkt-req-person__role { font-size: var(--text-2xs); color: var(--color-ink-muted); }



/* =====================================================================

   Плашки комплектов с ценой крупно (2026-08-04, решение владельца):

   из CD-редизайна спецтехники берём ТОЛЬКО этот блок и тиражируем на

   страницы услуг, где есть цена комплекта целиком. Поэтому скоуп общий

   .vkt-us, а НЕ .vkt-us--v2 (остальные v2-компоненты выше остаются

   только на странице сравнения).



   Сетка auto-fit: одна плашка занимает ряд целиком (страницы с одним

   комплектом - грузовой, топливная), две встают в две колонки

   (спецтехника). Модификаторов под количество не нужно.



   Второстепенный текст на ТЁМНОЙ плашке - rgba(255,255,255,.7): тот же

   канон, что .vkt-hero__price-label на navy-hero. --color-ink-muted

   рассчитан на светлый фон и на navy читается серым пятном (правка

   владельца 2026-08-04) - на featured перекрыты ВСЕ вторичные слоты.



   Состав комплекта (какой терминал ставим) в плашке НЕ пишем - владелец

   2026-08-04: «просто цена от и всё». Слот подписи убран целиком, нижний

   отступ держит сама цена. Разбор по позициям остаётся в таблице ниже.

   ===================================================================== */

.vkt-us .vkt-kits {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: var(--space-6);

  margin-bottom: var(--space-6);

}

.vkt-us .vkt-kit {

  background: var(--color-white);

  border: 1px solid var(--color-border);

  border-top: 3px solid var(--color-accent);

  border-radius: var(--radius-card);

  box-shadow: var(--shadow-sm);

  padding: var(--space-6);

  display: flex;

  flex-direction: column;

  align-items: flex-start;

}

.vkt-us .vkt-kit__label {

  font-size: var(--text-2xs);

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: .06em;

  color: var(--color-ink-muted);

}

.vkt-us .vkt-kit__price {

  font-family: var(--font-head);

  font-weight: 700;

  font-size: var(--text-2xl);

  line-height: 1.05;

  color: var(--color-ink);

  margin: var(--space-3) 0 var(--space-5);

}

.vkt-us .vkt-kit__per {

  font-family: var(--font-body);

  font-weight: 700;

  font-size: var(--text-base);

  color: var(--color-ink-muted);

  white-space: nowrap;

}

.vkt-us .vkt-kit .vkt-btn { margin-top: auto; }

.vkt-us .vkt-kit--featured { background: var(--color-navy); border-color: var(--color-navy); }

.vkt-us .vkt-kit--featured .vkt-kit__label { color: rgba(255, 255, 255, .7); }

.vkt-us .vkt-kit--featured .vkt-kit__price { color: var(--color-white); }

.vkt-us .vkt-kit--featured .vkt-kit__per { color: rgba(255, 255, 255, .7); }


/* ── Тахографы (page-id 5830): снимаем замок высоты hero ──────────────
   front-page.css держит .vkt-hero__grid min-height 488px, чтобы все hero
   услуг были ровно 584px (комментарий t-vektor-hero-price-strip). На этой
   странице левая колонка короче остальных — заголовок в одну строку, лид в
   два предложения, — и замок давал пустую синюю полосу под кнопкой.
   Владелец 06.11.2026: пустоту убрать. Скоуп по page-id, чтобы остальные
   девять услуг остались в общей высоте. */
body.page-id-5830 .vkt-hero__grid { min-height: 0; }