/* ==========================================================
   TOL.Charge — публичный сайт, ОДИН общий CSS каркаса (#651).

   Инвариант направления (спайн `sayt-tol-kz-restrukturizaciya-pod-poiskovyy-spros`,
   § «Инварианты», п. 4): токены дизайн-системы одни на все пять страниц; общий CSS
   живёт здесь, копий в страницах нет, hex-цветов в HTML страниц — 0.

   ⚠ ОТКУДА ВЗЯТЫ БАЙТЫ. Источник — архив владельца «TOL.Charge Design System.zip»
   (05.09.2026, `C:\Users\Анатолий\projects\tmp\`), файлы:
       tokens/fonts.css · tokens/colors.css · tokens/typography.css · tokens/spacing.css
       styles.css (точка входа, только @import)
       ui_kits/marketing/index.html  — блоки .wrap/.btn/.hdr/.foot
       ui_kits/marketing/getkaspiqr.html — вариант шапки
   Архив в git НЕ лежит (32 МБ бинарников). Токены сведены сюда СЛИЯНИЕМ, а не
   @import'ом на файлы архива: второго тулчейна и второй раздаваемой поверхности у
   сайта быть не должно. Правя палитру — правь ЗДЕСЬ и назови в карточке, что
   разошлось с архивом.

   Шкала — `marketing` (navy-поверхности), не продуктовая `ink`: решение владельца
   05.09.2026 (гейт G2). Бренд-синий #1F4FCC, CTA-оранжевый #FF6B35, Onest +
   JetBrains Mono, 8-pt сетка.
   ========================================================== */

/* ── tokens/fonts.css — Google Fonts, @import обязан идти первым ── */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ==========================================================
   1. Токены цвета — tokens/colors.css
   ========================================================== */
:root {
  /* Brand: blue (логотип + кнопки/графики продукта) */
  --brand-50:  #EEF4FF;
  --brand-100: #DAE6FE;
  --brand-200: #B5CCFC;
  --brand-300: #82A7F8;
  --brand-400: #4D80F2;
  --brand-500: #2563EB;
  --brand-600: #1F4FCC;   /* PRIMARY brand */
  --brand-700: #173FA8;
  --brand-800: #133289;
  --brand-900: #0F2A6E;

  /* Navy: тёмные поверхности маркетинговой шкалы */
  --navy-950: #0A1426;
  --navy-900: #0E1B2F;
  --navy-800: #142339;
  --navy-700: #1C2D49;
  --navy-600: #28395A;
  /* Затемнение фонового видео первого экрана главной (#866, владелец 07.10.2026: «палитра
     фонового видео» — как на старом tol.kz). Снято из HTML старого сайта, блок с тем же
     роликом (`rec1244732581`, `.t-cover__filter`): цвет #29221C при opacity .7 — тёплый
     тёмно-коричневый, а не navy. Одно значение, одно место: в разметке страниц его нет. */
  --video-scrim: rgba(41, 34, 28, .70);

  /* Accent: оранжевый CTA — единственный цвет призыва к действию */
  --accent-50:  #FFF1EA;
  --accent-100: #FFE0CE;
  --accent-200: #FFC9AE;
  --accent-300: #FFA67D;
  --accent-400: #FF8E5C;
  --accent-500: #FF6B35;  /* PRIMARY CTA */
  --accent-600: #E54E1A;
  --accent-700: #B83C13;

  /* Functional — только статусы, никогда как бренд */
  --success-50:  #ECFDF5;
  --success-100: #D1FAE5;
  --success-500: #16A34A;
  --success-700: #166534;

  --danger-50:  #FEF2F2;
  --danger-100: #FEE2E2;
  --danger-500: #DC2626;
  --danger-700: #991B1B;

  --warning-50:  #FFFBEB;
  --warning-100: #FEF3C7;
  --warning-500: #F59E0B;
  --warning-700: #B45309;

  --info-50:  #ECFEFF;
  --info-100: #CFFAFE;
  --info-500: #06B6D4;
  --info-700: #0E7490;

  /* Нейтрали светлой темы */
  --surface:       #FFFFFF;
  --surface-2:     #F7F9FC;
  --surface-3:     #EEF1F6;
  --surface-4:     #E1E6EE;
  --border:        #DDE3EC;
  --border-strong: #C5CDDC;
  --text:    #0E1B2F;
  --text-2:  #475066;
  /* ⚠ #866 (каркас, п. 5 наряда — контраст ДС): `--text-3` темнее архива (#6F7A91 → #5F6B84).
     Архивное значение давало 4,31 : 1 на белом, 4,09 на `--surface-2` и 3,81 на `--surface-3` —
     ниже порога AA 4,5, который сама ДС ставит подписям (README «Contrast»). Замер 08.10.2026
     сканом отрисованных страниц: 652 текстовых узла ниже порога, все — этот токен. Новое значение:
     5,35 / 5,08 / 4,73. Оттенок тот же (сине-серый), сдвинута только светлота. */
  --text-3:  #5F6B84;
  --text-4:  #94A0B5;
  --on-brand:  #FFFFFF;
  --on-accent: #FFFFFF;

  --whatsapp: #25D366;
  --whatsapp-700: #128C7E;

  /* Текст и границы НА тёмных (navy) поверхностях — шапка, футер, тёмные секции.
     Донор писал их литералами по месту; здесь они выведены в токены, иначе
     «hex-цветов в HTML = 0» держалось бы только на дисциплине автора страницы. */
  --on-navy:        #F1F5FB;
  --on-navy-2:      #B6C2D8;
  --on-navy-3:      #8693AD;
  --on-navy-border: rgba(255, 255, 255, .08);
  --on-navy-border-strong: rgba(255, 255, 255, .16);
  --on-navy-hover:  rgba(255, 255, 255, .06);
}

/* ── Тёмная тема: переворачиваются только нейтрали и тени ── */
[data-theme="dark"] {
  --surface:       #0A1426;
  --surface-2:     #0E1B2F;
  --surface-3:     #142339;
  --surface-4:     #1C2D49;
  --border:        #25344F;
  --border-strong: #34466A;
  --text:    #F1F5FB;
  --text-2:  #B6C2D8;
  --text-3:  #8693AD;
  --text-4:  #5F6E89;
}

/* ==========================================================
   2. Токены типографики — tokens/typography.css
   ========================================================== */
:root {
  --font-sans: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;
  --fw-extrabold: 800;

  --leading-tight: 1.1;
  --leading-snug:  1.3;
  --leading-normal: 1.6;
  --tracking-tight: -0.02em;
  --tracking-wide:  0.08em;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--leading-normal);
  color: var(--text);
  background: var(--surface);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; }
code, kbd, samp { font-family: var(--font-mono); font-size: .9em; }

.t-display-xl { font-size: clamp(48px, 6vw, 80px); line-height: .95; letter-spacing: -.03em; font-weight: 800; }
.t-display-l  { font-size: clamp(40px, 4.5vw, 64px); line-height: 1; letter-spacing: -.025em; font-weight: 800; }
.t-display-m  { font-size: clamp(32px, 3.5vw, 48px); line-height: 1.05; letter-spacing: -.02em; font-weight: 700; }
.t-h1 { font-size: 36px; line-height: 1.1;  letter-spacing: -.015em; font-weight: 700; }
.t-h2 { font-size: 28px; line-height: 1.2;  letter-spacing: -.01em;  font-weight: 700; }
.t-h3 { font-size: 22px; line-height: 1.3;  font-weight: 600; }
.t-h4 { font-size: 18px; line-height: 1.35; font-weight: 600; }
.t-body-l { font-size: 18px; line-height: 1.55; }
.t-body   { font-size: 16px; line-height: 1.6; }
.t-body-s { font-size: 14px; line-height: 1.5; }
.t-caption  { font-size: 13px; line-height: 1.45; letter-spacing: .01em; color: var(--text-2); }
.t-overline { font-size: 12px; line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--text-3); }
.mono { font-family: var(--font-mono); }
.tnum, .t-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* ==========================================================
   3. Токены сетки, радиусов и теней — tokens/spacing.css (8-pt)
   ========================================================== */
:root {
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 40px;  --s-8: 48px;
  --s-9: 64px;  --s-10: 80px; --s-11: 96px; --s-12: 128px;

  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 16px;
  --r-5: 20px; --r-6: 28px; --r-pill: 999px;

  --sh-xs: 0 1px 2px rgba(14,27,47,.05);
  --sh-sm: 0 2px 6px rgba(14,27,47,.06), 0 1px 2px rgba(14,27,47,.04);
  --sh-md: 0 8px 20px rgba(14,27,47,.08), 0 2px 4px rgba(14,27,47,.04);
  --sh-lg: 0 24px 48px rgba(14,27,47,.12), 0 4px 8px rgba(14,27,47,.06);
  --sh-xl: 0 40px 80px rgba(14,27,47,.16);
  --sh-glow-brand:  0 8px 32px rgba(31,79,204,.30);
  --sh-glow-accent: 0 8px 32px rgba(255,107,53,.35);

  --container: 1200px;
  --content:   880px;
  --gutter:    var(--s-5);
}

[data-theme="dark"] {
  --sh-xs: 0 1px 2px rgba(0,0,0,.30);
  --sh-sm: 0 2px 6px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.20);
  --sh-md: 0 8px 20px rgba(0,0,0,.40), 0 2px 4px rgba(0,0,0,.25);
  --sh-lg: 0 24px 48px rgba(0,0,0,.50), 0 4px 8px rgba(0,0,0,.30);
  --sh-xl: 0 40px 80px rgba(0,0,0,.60);
}

/* ==========================================================
   4. Раскладка и кнопки — донор `ui_kits/marketing/index.html`
   ========================================================== */
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--s-7); }
@media (max-width: 920px) { .wrap { padding: 0 var(--s-5); } }

.sec { padding: var(--s-12) 0; }
@media (max-width: 920px) { .sec { padding: var(--s-10) 0; } }
.sec--light { background: var(--surface); }
.sec--cream { background: var(--surface-2); }

.eyebrow { font: 600 12px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--brand-700); margin: 0 0 var(--s-4); }
/* ⚠ «СИНЕЕ НА СИНЕМ» (#866, владелец 08.10.2026 про «Автопаркам, таксопаркам и каршерингу» на
   /business/fleet: «такие элементы переработать дизайнеру»). Класс — надпись над заголовком
   (`.eyebrow`) на ТЁМНОЙ поверхности: фирменный `brand-700` на `navy-950` даёт 2,03 : 1 (замер 08.10,
   30 узлов на 15 страницах — все герои `.phero`). На тёмном надпись берёт тон текста тёмных
   поверхностей `--on-navy-2` (10,25 : 1), как уже было в `.sec--dark`; синий остаётся только
   на светлом фоне, где он читается (9,08 : 1). */
.phero .eyebrow, .fork .eyebrow, .tol-net .eyebrow { color: var(--on-navy-2); }
.head-center { text-align: center; max-width: 64ch; margin: 0 auto var(--s-8); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 24px; font: 600 16px var(--font-sans); border-radius: var(--r-3); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .12s, box-shadow .15s, background .15s; }
.btn--md { padding: 11px 18px; font-size: 14px; }
.btn--lg { padding: 18px 32px; font-size: 17px; border-radius: var(--r-4); }
.btn--primary { background: var(--accent-500); color: var(--on-accent); box-shadow: var(--sh-glow-accent); }
.btn--primary:hover { background: var(--accent-600); transform: translateY(-1px); }
.btn--ghost { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn--ghost:hover { background: var(--surface-3); }
.btn--ghost-dark { background: transparent; color: var(--on-navy); border-color: var(--on-navy-border-strong); }
.btn--ghost-dark:hover { background: var(--on-navy-hover); }

/* ==========================================================
   4a. Ссылки — ПРАВИЛО КЛИКАБЕЛЬНОСТИ сайта (#866 п. 2.1/2.4, владелец 08.10.2026:
   «кликаться должны только кликабельные ссылки одинакового оформления»;
   «прослеживающиеся элементы правим на странице в работе, наследуем на остальные»).

   1. Кликабельно ⇔ выглядит кликабельным. Действие бывает двух видов, третьего нет:
      кнопка `.btn` (оранжевая `--primary` — одна на экран, это главный призыв) и
      ссылка — СИНИЙ текст со стрелкой `→` (`.lnk` в строке, `.lnk-list` списком).
   2. Одно действие — один вид: все переходы по разделам на странице оформлены одной
      `.lnk-list`, а не «заголовок-блок + оранжевая подпись + белые подпункты».
   3. Карточка (`.card`, `.fork`) — КОНТЕЙНЕР: на наведение не отвечает, целиком не
      кликается. Действие внутри неё — `.btn` или `.lnk`/`.lnk-list`.
   4. Ссылка в строке текста (абзац, подпись источника) остаётся подчёркнутой —
      это свой, третий канал, и цвет у неё по месту (`a { color: inherit }` выше).
   Цвет ссылки — токен `--link`: на светлом `brand-600`, на тёмных поверхностях
   (`.phero`, `.sec--dark`, карточка `.fork`) — `brand-300` (контраст ≈ 7 : 1 на
   navy-900). Оранжевый на ссылку НЕ идёт: он — цвет главного призыва.
   ========================================================== */
:root { --link: var(--brand-600); }
.phero, .sec--dark, .fork { --link: var(--brand-300); }

.lnk { display: inline-flex; align-items: center; gap: 8px; font: 600 16px/1.35 var(--font-sans); color: var(--link); text-decoration: none; }
.lnk svg, .lnk-list__t svg { width: 18px; height: 18px; flex: none; transition: transform .12s; }
.lnk:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.lnk:hover svg, .lnk-list a:hover svg { transform: translateX(3px); }
.lnk:focus-visible, .lnk-list a:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: var(--r-2); }

/* Список ссылок: строка = одна ссылка (вся строка — область нажатия, на телефоне это
   палец, а не курсор), заголовок строки — синий со стрелкой, пояснение — серым под ним.
   Разделители и подсветка — по месту: светлая поверхность или тёмная. */
.lnk-list { list-style: none; margin: 0; padding: 0; --lnk-sep: var(--border); --lnk-hover: var(--surface-2); --lnk-d: var(--text-2); }
.phero .lnk-list, .sec--dark .lnk-list, .fork .lnk-list { --lnk-sep: var(--on-navy-border-strong); --lnk-hover: var(--on-navy-hover); --lnk-d: var(--on-navy-2); }
.lnk-list li + li { border-top: 1px solid var(--lnk-sep); }
.lnk-list a { display: flex; flex-direction: column; gap: 4px; margin: 0 calc(-1 * var(--s-3)); padding: var(--s-3); border-radius: var(--r-3); text-decoration: none; transition: background .15s; }
.lnk-list a:hover { background: var(--lnk-hover); }
.lnk-list a:hover .lnk-list__t { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.lnk-list__t { font: 600 17px/1.35 var(--font-sans); color: var(--link); }
.lnk-list__t svg { display: inline-block; vertical-align: -3px; margin-left: 6px; }
.lnk-list__d { font: 400 14px/1.5 var(--font-sans); color: var(--lnk-d); }
/* Две колонки на широком экране (справочник главной): разделитель — у каждой строки снизу,
   иначе у второй колонки верхняя строка осталась бы без черты. */
.lnk-list--cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-8); border-top: 1px solid var(--lnk-sep); }
.lnk-list--cols li + li { border-top: 0; }
.lnk-list--cols li { border-bottom: 1px solid var(--lnk-sep); display: flex; }
.lnk-list--cols a { flex: 1; padding: var(--s-4) var(--s-3); }
@media (max-width: 720px) { .lnk-list--cols { grid-template-columns: 1fr; } .lnk-list__t { font-size: 16px; } }

/* ==========================================================
   5. Шапка каркаса — донор `.hdr` из `ui_kits/marketing/index.html`
   Отличие от донора: навигация — по ПЯТИ страницам первой волны, адреса
   подставляются с префиксом раздачи (`/preview` на dev, пусто на бою).
   ========================================================== */
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(10,20,38,.92); backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid var(--on-navy-border); }
.hdr__inner { display: flex; align-items: center; gap: var(--s-5); padding: 12px var(--s-7); max-width: var(--container); margin: 0 auto; }
@media (max-width: 920px) { .hdr__inner { padding: 12px var(--s-5); } }
.hdr__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.hdr__brand img { height: 38px; width: auto; }
/* ── Меню с подменю (#866, владелец 08.10.2026: «меню с вываливанием подменю, сразу
      переключаться»). Группы — аудитории: «Водителям» · «Бизнесу» · «Операторам» (канон разметки
      `_frame/header.html`, состав — `NAV_GROUPS` в `app/api/web_site.py`).
      Десктоп (от 1061 px): кнопка группы на navy-шапке, подменю — светлая карточка ДС (`--surface`,
      рамка, `--r-4`, тень `--sh-lg`) под кнопкой; открывается наведением, кликом и с клавиатуры.
      Без JS — наведением и фокусом (`html:not(.js)`), с JS фокус не держит подменю открытым:
      Esc его закрывает, а фокус остаётся на кнопке. Текущая страница — синий пункт, группа — светлее.
      Телефон (до 1060 px): бургер, панель под шапкой на navy, группы раскрываются по нажатию. ── */
.hdr__nav { flex: 1; min-width: 0; }
.nav { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; align-items: center; }
.nav__g { position: relative; }
.nav__btn, .nav__top { display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; border: 0; border-radius: var(--r-2); background: transparent; color: var(--on-navy-2); font: 500 15px var(--font-sans); text-decoration: none; white-space: nowrap; cursor: pointer; }
.nav__btn:hover, .nav__top:hover, .nav__g.is-open > .nav__btn { background: var(--on-navy-hover); color: var(--on-navy); }
.nav__g.is-current > .nav__btn, .nav__top[aria-current="page"] { color: var(--on-navy); font-weight: 600; }
.nav__btn:focus-visible, .nav__top:focus-visible { outline: 2px solid var(--brand-300); outline-offset: 2px; }
.nav__chev { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.nav__g.is-open .nav__chev { transform: rotate(180deg); }
.nav__sub { list-style: none; margin: 0; padding: var(--s-2); display: none; }
.nav__sub a { display: block; padding: 10px 12px; border-radius: var(--r-2); font: 500 15px/1.35 var(--font-sans); text-decoration: none; white-space: nowrap; }
@media (min-width: 1061px) {
  .nav__sub { position: absolute; top: calc(100% + 8px); left: 0; min-width: 232px; z-index: 60; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-4); box-shadow: var(--sh-lg); }
  /* Мостик через зазор 8 px: курсор, идущий от кнопки к подменю, не теряет наведение. */
  .nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
  .nav__g.is-open > .nav__sub, html:not(.js) .nav__g:focus-within > .nav__sub { display: block; }
  .nav__sub a { color: var(--text); }
  .nav__sub a:hover { background: var(--surface-2); color: var(--brand-700); }
  .nav__sub a[aria-current="page"] { color: var(--brand-600); font-weight: 600; background: var(--brand-50); }
  .nav__sub a:focus-visible { outline: 2px solid var(--brand-600); outline-offset: -2px; }
}
@media (min-width: 1061px) and (hover: hover) { .nav__g:hover > .nav__sub { display: block; } }
.hdr__cta { display: flex; gap: var(--s-3); align-items: center; margin-left: auto; }
.hdr__burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--on-navy-border-strong); border-radius: var(--r-3); background: transparent; color: var(--on-navy); }
.hdr__burger:hover { background: var(--on-navy-hover); }
.hdr__burger:focus-visible { outline: 2px solid var(--brand-300); outline-offset: 2px; }
.hdr__burger svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hdr__burger .i-close, .hdr.is-menu-open .hdr__burger .i-open { display: none; }
.hdr.is-menu-open .hdr__burger .i-close { display: inline; }
@media (max-width: 1060px) {
  .hdr__nav { display: none; }
  .js .hdr__burger { display: inline-flex; }
  .hdr.is-menu-open .hdr__nav { display: block; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 64px); overflow-y: auto; background: var(--navy-950); border-top: 1px solid var(--on-navy-border); border-bottom: 1px solid var(--on-navy-border-strong); padding: var(--s-2) var(--s-5) var(--s-5); }
  .nav { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__g + .nav__g { border-top: 1px solid var(--on-navy-border); }
  .nav__btn, .nav__top { width: 100%; justify-content: space-between; padding: 16px 4px; font: 600 17px var(--font-sans); color: var(--on-navy); border-radius: 0; }
  .nav__btn:hover, .nav__top:hover, .nav__g.is-open > .nav__btn { background: transparent; }
  .nav__g.is-open > .nav__sub { display: block; padding: 0 0 var(--s-3); }
  .nav__sub a { color: var(--on-navy-2); padding: 12px; font-size: 16px; }
  .nav__sub a:hover { background: var(--on-navy-hover); color: var(--on-navy); }
  .nav__sub a[aria-current="page"] { color: var(--on-navy); font-weight: 600; box-shadow: inset 2px 0 0 var(--brand-300); border-radius: 0 var(--r-2) var(--r-2) 0; }
}
@media (max-width: 440px) {
  /* 390 px: знак, «Написать в WhatsApp» и бургер в одну строку без прокрутки вбок. */
  .hdr__inner { gap: var(--s-3); }
  .hdr__cta { gap: var(--s-2); }
  .hdr__cta .btn--md { padding: 10px 12px; font-size: 13px; }
}

/* ==========================================================
   6. Футер каркаса — донор `.foot` из `ui_kits/marketing/index.html`
   Реквизиты и контакты — спайн направления, § «Реестр фактов».
   ========================================================== */
.foot { background: var(--navy-950); color: var(--on-navy); }
/* ⚠ Отступы футера — только ВЕРТИКАЛЬНЫЕ (#866). Прежняя запись `padding: … 0 …` на том же
   элементе, что и `.wrap`, обнуляла боковой отступ контейнера: на телефоне текст футера
   стоял вплотную к краю экрана (снимок 390 px до правки). */
.foot__main { padding-top: var(--s-9); padding-bottom: var(--s-7); }
.foot__cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: var(--s-7); }
@media (max-width: 920px) { .foot__cols { grid-template-columns: 1fr 1fr; gap: var(--s-5); } }
@media (max-width: 560px) { .foot__cols { grid-template-columns: 1fr; } }
.foot__brand img { height: 52px; width: auto; margin-bottom: var(--s-3); }
.foot__brand p { font: 400 13px/1.5 var(--font-sans); color: var(--on-navy-3); margin: 0 0 var(--s-3); max-width: 34ch; }
.foot__req { font: 400 13px/1.6 var(--font-sans); color: var(--on-navy-3); margin: 0; max-width: 34ch; }
.foot__req strong { color: var(--on-navy-2); font-weight: 600; }
.foot__col h4 { font: 600 12px var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--on-navy-2); margin: 0 0 var(--s-3); }
.foot__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.foot__col a, .foot__col span { color: var(--on-navy-3); text-decoration: none; font: 400 14px var(--font-sans); }
.foot__col a:hover { color: var(--on-navy); }
.foot__bottom { border-top: 1px solid var(--on-navy-border); padding-top: var(--s-5); padding-bottom: var(--s-5); display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; font: 400 13px var(--font-sans); color: var(--on-navy-3); }
/* Документы (#866): политика конфиденциальности и публичная оферта — в каждом футере. */
.foot__legal { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.foot__legal a { color: var(--on-navy-3); text-decoration: none; }
.foot__legal a:hover { color: var(--on-navy); text-decoration: underline; }

/* ==========================================================
   7. Слот компонента сети (бриф §5.3, режимы `strip` / `compact`)
   Каркас слот ОБЪЯВЛЯЕТ и оставляет пустым: наполнение — карточка слоя данных
   (#650). Пустой слот не занимает места и не рисует «0 станций»: страница со
   вчерашними числами лучше страницы с нулями, а страница без блока — лучше обеих,
   пока чисел нет.
   ========================================================== */
[data-network] { display: block; }
[data-network][data-network-state="pending"] { display: none; }
.netstrip { background: var(--navy-900); color: var(--on-navy); padding: var(--s-6) 0; }
.netstrip__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
@media (max-width: 920px) { .netstrip__row { grid-template-columns: repeat(2, 1fr); } }
.netstrip__v { font: 700 clamp(24px, 2.6vw, 34px) var(--font-sans); line-height: 1; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.netstrip__l { display: block; font: 400 13px/1.4 var(--font-sans); color: var(--on-navy-3); margin-top: 8px; }
.netstrip__asof { font: 400 12px var(--font-mono); color: var(--on-navy-3); margin-top: var(--s-4); }
/* Полоска доказательств внизу главной (#866). Тот же слот и те же `data-tol`, что были в
   шапке каркаса, — сменилось место и поверхность: перед тёмным футером navy-полоса слилась
   бы с ним, поэтому здесь светлая поверхность и тёмный текст. */
.netstrip--proof { background: var(--surface-2); color: var(--text); border-top: 1px solid var(--border); padding: var(--s-10) 0; }
/* #866 п. 2.2: у блока есть заголовок и действие — «Наша сеть в цифрах» + ссылка на карту;
   числа крупнее и каждое под чертой, чтобы четыре числа читались одним рядом, а не
   разрозненными подписями; дата — под рядом, моноширинной строкой источника. */
.netstrip__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3) var(--s-6); flex-wrap: wrap; margin: 0 0 var(--s-7); }
.netstrip__head h2 { margin: 0; }
.netstrip--proof .netstrip__row > div { border-top: 1px solid var(--border-strong); padding-top: var(--s-4); }
.netstrip--proof .netstrip__v { font-size: clamp(32px, 3.4vw, 48px); }
.netstrip--proof .netstrip__l { color: var(--text-2); font-size: 14px; }
.netstrip--proof .netstrip__asof { color: var(--text-3); margin-top: var(--s-6); }
@media (max-width: 720px) {
  .netstrip--proof { padding: var(--s-8) 0; }
  .netstrip__head { margin-bottom: var(--s-5); }
  .netstrip--proof .netstrip__row { gap: var(--s-5) var(--s-4); }
}

/* ==========================================================
   8. Служебное каркаса: полоса превью, доска состояния, заглушка страницы
   ========================================================== */

/* Полоса «это превью» — она же признак того, что страница НЕ боевая.
   Ставится каркасом, а не страницей: убрать её со страницы поодиночке нельзя. */
.previewbar { background: var(--warning-100); color: var(--warning-700); font: 500 13px var(--font-sans); }
.previewbar__inner { max-width: var(--container); margin: 0 auto; padding: 8px var(--s-7); display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
@media (max-width: 920px) { .previewbar__inner { padding: 8px var(--s-5); } }
.previewbar code { font-family: var(--font-mono); font-size: 12px; }

.board { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-7); }
.board__item { display: flex; align-items: flex-start; gap: var(--s-4); padding: var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-4); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .12s; }
.board__item:hover { border-color: var(--border-strong); box-shadow: var(--sh-md); transform: translateY(-1px); }
@media (max-width: 560px) { .board__item { flex-wrap: wrap; gap: var(--s-3); } .board__state { width: 100%; } }
.board__num { font: 500 12px var(--font-mono); color: var(--text-4); letter-spacing: .12em; min-width: 3ch; flex-shrink: 0; padding-top: 6px; }
.board__body { flex: 1; min-width: 0; }
.board__title { font: 700 19px/1.3 var(--font-sans); margin: 0 0 4px; }
.board__path { font: 400 13px var(--font-mono); color: var(--text-3); word-break: break-word; }
.board__note { font: 400 14px/1.5 var(--font-sans); color: var(--text-2); margin: 6px 0 0; }
.board__state { flex-shrink: 0; padding-top: 2px; }

.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); font: 600 12px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill--wip { background: var(--warning-50); color: var(--warning-700); }
.pill--ready { background: var(--success-50); color: var(--success-700); }

.stub { padding: var(--s-11) 0 var(--s-12); }
.stub__card { max-width: var(--content); border: 1px dashed var(--border-strong); border-radius: var(--r-5); background: var(--surface-2); padding: var(--s-8); }
.stub h1 { font: 700 clamp(30px, 3.4vw, 44px)/1.08 var(--font-sans); letter-spacing: -.02em; margin: 0 0 var(--s-4); }
.stub__lead { font: 400 18px/1.55 var(--font-sans); color: var(--text-2); margin: 0 0 var(--s-5); max-width: 62ch; }
.stub__meta { display: flex; flex-direction: column; gap: 8px; padding-top: var(--s-5); border-top: 1px solid var(--border); font: 400 14px var(--font-sans); color: var(--text-3); }
.stub__meta .k { color: var(--text-3); }
.stub__meta .v { color: var(--text); font-weight: 600; }
.stub__meta .mono { font-family: var(--font-mono); font-size: 13px; }

/* ==========================================================
   9. Блоки страниц первой волны — общий словарь вёрстки (#653)

   ⚠ ЭТИ КЛАССЫ ОБЩИЕ, А НЕ «страницы /getkaspiqr». Инвариант направления: страница
   своих стилей не заводит, hex-цветов в HTML — 0. Поэтому всё, что понадобилось
   первой странице серии, лежит ЗДЕСЬ и достаётся следующим четырём как есть.
   Донор вида — ui_kits/marketing/ архива дизайн-системы (шкала marketing, navy);
   имена блоков донора сохранены (diff-block, flow, checks), чтобы соседняя страница
   не изобретала второе имя тому же блоку.

   ⚠ Правя этот файл, прогони `python scripts/site_frame_sync.py apply`: версия CSS в
   адресе (site.css?v=…) — первые 8 знаков md5 ЭТОГО файла, и её ставит скрипт.
   ========================================================== */

/* ── Секции и заголовки ── */
.sec--dark { background: var(--navy-900); color: var(--on-navy); }
.sec--dark .eyebrow { color: var(--on-navy-2); }
/* Тот же класс «тёмный текст на тёмном»: подпись `.names` в герое (/roi, 2,29 : 1). */
.phero .names { color: var(--on-navy-2); }
.sec__head { max-width: 68ch; margin: 0 0 var(--s-7); }
.sec__head h2 { margin: 0 0 var(--s-4); }
.sec__head p { margin: 0; color: var(--text-2); font-size: 18px; line-height: 1.55; }
.sec--dark .sec__head p { color: var(--on-navy-2); }

/* ── Сноска под числом или блоком (#866 п. 3.3, владелец 08.10.2026: «внутренние источники убрать
      везде, внешние — тихой сноской-ссылкой»). ДВА класса, и третьего вида нет:
      · `.src`  — ВНЕШНИЙ источник: в нём всегда ссылка наружу (условия Kaspi, производитель,
        публичная публикация). Внутренние («наш API», «телеметрия сети», «срез») сюда не пишутся
        вовсе — инвариант 1 направления держится в коде и реестре, а не в видимой строке;
      · `.asof` — дата, к которой относятся числа рядом («данные на …»), инвариант 2.
      Вид один — тихий: 12 px, третий тон текста; ссылка подчёркнута тонко. Сторож —
      tests/test_866_site_map_batch3.py (в `.src` без внешней ссылки — красное). ── */
.src, .asof { display: block; font: 400 12px/1.5 var(--font-sans); color: var(--text-3); margin-top: 6px; }
.src a { color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.src a:hover { color: var(--text-2); text-decoration-color: currentColor; }
.sec--dark .src, .phero .src, .sec--dark .asof, .phero .asof { color: var(--on-navy-3); }
.sec--dark .src a, .phero .src a { text-decoration-color: var(--on-navy-border-strong); }

/* ── Герой страницы серии ── */
.phero { background: var(--navy-950); color: var(--on-navy); padding: var(--s-10) 0 var(--s-9); }
.phero h1 { font: 800 clamp(32px, 4.2vw, 56px)/1.06 var(--font-sans); letter-spacing: -.025em; margin: 0 0 var(--s-5); max-width: 20ch; }
.phero__lead { font: 400 clamp(17px, 1.5vw, 20px)/1.55 var(--font-sans); color: var(--on-navy-2); margin: 0 0 var(--s-6); max-width: 60ch; }
.phero__cta { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: var(--s-5); }
@media (max-width: 720px) { .facts { grid-template-columns: 1fr; gap: var(--s-4); } }
.facts--hero { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--on-navy-border); }

/* ── Отступы-утилиты: 8-pt шаг, чтобы страница не заводила инлайновых стилей ── */
.mt-6 { margin-top: var(--s-6); }
.mt-8 { margin-top: var(--s-8); }
.sec__sub { margin: var(--s-8) 0 var(--s-5); }

/* ── Число с подписью и источником ── */
.fact__v { font: 700 clamp(26px, 2.8vw, 36px)/1 var(--font-sans); letter-spacing: -.015em; font-variant-numeric: tabular-nums; display: block; }
.fact__u { font-weight: 500; font-size: .55em; color: var(--text-3); margin-left: .25em; }
.phero .fact__u, .sec--dark .fact__u { color: var(--on-navy-3); }
.fact__l { font: 400 14px/1.45 var(--font-sans); color: var(--text-2); margin-top: 8px; display: block; }
.phero .fact__l, .sec--dark .fact__l { color: var(--on-navy-2); }

/* ── Двухколоночный блок «текст + доказательство» (донор diff-block) ── */
.diff-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: start; }
@media (max-width: 920px) { .diff-block { grid-template-columns: 1fr; gap: var(--s-6); } }
.diff-block h3 { font: 600 22px/1.3 var(--font-sans); margin: 0 0 var(--s-4); }
.diff-block p { margin: 0 0 var(--s-4); line-height: 1.6; }
.checks { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
/* ⚠ ЗНАЧОК СПИСКА (#866, владелец 08.10.2026 про «круг с галочкой»: «недопустимый дизайн…
   Сомнения в зелёном цвете — привести к дизайн-системе. Такое уродство не выпускать ни на одной
   странице»). Было: зелёный круг с обводкой и галочкой внутри — цвет СТАТУСА («успех»), а не бренда,
   и плашка-кружок на каждой строке. Стало по ДС («check-marks rendered as CSS borders in list
   bullets», README § Iconography): одна линейная галочка 2 px фирменным синим, без подложки —
   тот же штрих, что у иконок ДС (2 px, скруглённые концы). На тёмной поверхности — `brand-300`. */
.checks { --check: var(--brand-600); }
.sec--dark .checks, .phero .checks, .fork .checks { --check: var(--brand-300); }
.checks li { position: relative; padding-left: 28px; line-height: 1.5; }
.checks li::before { content: ""; position: absolute; left: 3px; top: .42em; width: 12px; height: 6px; border-left: 2px solid var(--check); border-bottom: 2px solid var(--check); border-bottom-left-radius: 1px; transform: rotate(-45deg); }

/* ── Цепочка платежа (донор flow) — ОДНА полоса: утверждение о своей механике ── */
.flow { border: 1px solid var(--border); border-radius: var(--r-4); background: var(--surface); padding: var(--s-6); }
.sec--dark .flow { border-color: var(--on-navy-border-strong); background: var(--navy-800); }
.flow__steps { display: flex; align-items: stretch; gap: var(--s-2); flex-wrap: wrap; }
.flow__node { flex: 1 1 120px; min-width: 104px; border: 1px solid var(--border); border-radius: var(--r-3); padding: var(--s-4) var(--s-3); background: var(--surface-2); text-align: center; font: 600 14px/1.35 var(--font-sans); }
.sec--dark .flow__node { border-color: var(--on-navy-border-strong); background: var(--navy-700); color: var(--on-navy); }
.flow__node.is-you { border-color: var(--accent-500); box-shadow: var(--sh-glow-accent); }
.flow__node small { display: block; font: 400 12px/1.35 var(--font-mono); color: var(--text-3); margin-top: 6px; }
.sec--dark .flow__node small { color: var(--on-navy-2); }
.flow__arrow { align-self: center; font-size: 20px; color: var(--text-3); line-height: 1; }
.sec--dark .flow__arrow { color: var(--on-navy-3); }
.flow__out { margin: var(--s-5) 0 0; padding-top: var(--s-4); border-top: 1px dashed var(--border-strong); font: 400 15px/1.55 var(--font-sans); color: var(--text-2); }
.sec--dark .flow__out { border-color: var(--on-navy-border-strong); color: var(--on-navy-2); }

/* ── Карточки в сетке ── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: var(--s-5); }
.card { border: 1px solid var(--border); border-radius: var(--r-4); background: var(--surface); padding: var(--s-6); }
.sec--dark .card { border-color: var(--on-navy-border-strong); background: var(--navy-800); }
.card h3 { font: 600 18px/1.35 var(--font-sans); margin: 0 0 var(--s-3); }
.card p { margin: 0; color: var(--text-2); line-height: 1.55; font-size: 15px; }
.sec--dark .card p { color: var(--on-navy-2); }

/* ── Слот ассета: рамка-заглушка, внутри — ТЗ на съёмку, а не «здесь будет видео» ── */
.slot { border: 1px dashed var(--border-strong); border-radius: var(--r-4); background: var(--surface-2); padding: var(--s-5); }
.slot__frame { display: flex; align-items: center; justify-content: center; text-align: center; background: var(--surface-3); border-radius: var(--r-3); color: var(--text-3); font: 500 13px/1.4 var(--font-mono); padding: var(--s-6) var(--s-4); }
.slot__frame[data-ratio="16:9"] { aspect-ratio: 16 / 9; }
.slot__frame[data-ratio="4:5"] { aspect-ratio: 4 / 5; }
.slot__frame[data-ratio="16:10"] { aspect-ratio: 16 / 10; }
.slot h3 { font: 600 17px/1.35 var(--font-sans); margin: var(--s-4) 0 var(--s-3); }
/* ⚠ Одна колонка ВСЕГДА, а не только на узком экране: слоты стоят по три в ряд, и
   пара «подпись + значение» в две колонки рвала значение на строки в три слова. */
.slot dl { margin: 0; font-size: 14px; line-height: 1.5; }
.slot dd + dt { margin-top: var(--s-4); }
.slot dt { font: 600 11px/1.5 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
.slot dd { margin: 0; color: var(--text-2); }
.slot dd.is-forbidden { color: var(--danger-700); }

/* ── Шаги подключения ── */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); gap: var(--s-5); counter-reset: step; }
.steps li { counter-increment: step; border-top: 2px solid var(--accent-500); padding-top: var(--s-4); }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; font: 500 12px var(--font-mono); color: var(--accent-500); letter-spacing: .12em; margin-bottom: var(--s-3); }
.steps strong { display: block; font: 600 17px/1.35 var(--font-sans); margin-bottom: 6px; }
.steps span { color: var(--text-2); font-size: 15px; line-height: 1.55; }
.sec--dark .steps span { color: var(--on-navy-2); }

/* ── Логотипы и имена площадок ── */
.logos { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; margin: 0 0 var(--s-5); padding: 0; list-style: none; }
.logos img { height: 44px; width: auto; }
/* На navy-поверхности логотип партнёра кладётся на светлую плашку: файлы Halyk и Kaspi
   свёрстаны под светлый фон. Знаку TOL.Charge (.hdr__brand img / .foot__brand img)
   плашка с #657 больше НЕ нужна — он двухцветный на прозрачном фоне и читается на navy
   сам; плашка была костылём под чёрно-белый logo-base.png. */
.sec--dark .logos img { background: var(--surface); border-radius: var(--r-2); padding: 6px; }
.names { color: var(--text-2); font-size: 15px; line-height: 1.6; margin: 0; }
.sec--dark .names { color: var(--on-navy-2); }

/* ── Компонент сети: копия разметки из web/site/network-preview.html ── */
[data-tol-network="strip"]   [data-modes]:not([data-modes~="strip"])   { display: none; }
[data-tol-network="compact"] [data-modes]:not([data-modes~="compact"]) { display: none; }
[data-tol-network="full"]    [data-modes]:not([data-modes~="full"])    { display: none; }
/* `color` (#866, контраст): компонент тёмный и на светлой секции (/roi) — без своего цвета текста
   числа наследовали тёмный `--text` и стояли на navy-800 с контрастом 1,09 : 1. */
.tol-net { border: 1px solid var(--on-navy-border-strong); border-radius: var(--r-4); padding: var(--s-6); background: var(--navy-800); color: var(--on-navy); }
.tol-net__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: var(--s-5); margin: 0 0 var(--s-5); padding: 0; list-style: none; }
.tol-net__v { font: 700 clamp(22px, 2.4vw, 30px)/1 var(--font-sans); letter-spacing: -.015em; font-variant-numeric: tabular-nums; display: block; }
.tol-net__k { display: block; font: 400 13px/1.4 var(--font-sans); color: var(--on-navy-2); margin-top: 8px; }
.tol-net table { border-collapse: collapse; width: 100%; margin: var(--s-5) 0 0; font-size: 14px; }
.tol-net th, .tol-net td { border-bottom: 1px solid var(--on-navy-border); padding: 8px; text-align: right; font-variant-numeric: tabular-nums; }
.tol-net th[scope="col"] { color: var(--on-navy-2); font: 600 12px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; }
.tol-net th[scope="row"] { text-align: left; font-weight: 500; }
.tol-net caption { text-align: left; font: 600 15px var(--font-sans); padding: 0 8px var(--s-3); color: var(--on-navy); }
.tol-net__note { font: 400 13px/1.5 var(--font-sans); color: var(--on-navy-2); margin: var(--s-4) 0 0; }
.tol-net__scroll { overflow-x: auto; }

/* ── Финальный призыв ── */
.cta-final { text-align: center; max-width: 62ch; margin: 0 auto; }
.cta-final h2 { margin: 0 0 var(--s-4); }
.cta-final p { color: var(--text-2); margin: 0 0 var(--s-6); font-size: 18px; line-height: 1.55; }
.cta-final__row { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }

/* ── Таблица трёх моделей входа (#654, /business) ──
   Своя таблица, а не `.tol-net table`: та выравнивает ячейки ВПРАВО, потому что в ней
   числа, — здесь же в ячейках проза, и правый край её ломает. Минимальная ширина 720 px
   стоит намеренно: три колонки прозы ниже этого рвутся в столбик из двух слов. На узком
   экране таблица скроллится ВНУТРИ своей обёртки, а не распирает страницу — замер 375 px. */
.mtable__scroll { overflow-x: auto; }
.mtable { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 15px; }
.mtable caption { text-align: left; font: 600 15px var(--font-sans); color: var(--text-2); padding: 0 0 var(--s-3); }
.mtable th, .mtable td { border: 1px solid var(--border); padding: var(--s-4); text-align: left; vertical-align: top; line-height: 1.5; }
.mtable thead th { background: var(--surface-3); font: 600 12px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.mtable th[scope="row"] { width: 20%; background: var(--surface-3); font: 600 16px/1.35 var(--font-sans); }
.mtable td { color: var(--text-2); }
.mtable ul { margin: 0; padding-left: 18px; }
.mtable li + li { margin-top: 6px; }

/* Числовой вариант той же таблицы (#668, /roaming: источники запуска сессий).
   Отличий ровно три, и каждое от содержимого, а не от вкуса:
   · min-width 420 px вместо 720 — колонок три, но две из них узкие числовые, и общий
     потолок 720 растянул бы первую колонку прозой на пол-экрана. На 375 px таблица
     по-прежнему скроллится ВНУТРИ `.mtable__scroll`, страницу не распирая — замер ниже;
   · числа выровнены ВПРАВО и табличными цифрами: иначе разряды не сравнить глазом;
   · ширина колонки-заголовка снята с 20 % — имена приложений короткие и разной длины. */
.mtable--num { min-width: 420px; }
.mtable--num th[scope="row"] { width: auto; }
.mtable--num td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Кнопка перехода в карточке модели и вторая строка текста в карточке (#654). */
.card__cta { margin-top: var(--s-5); }
.card p + p { margin-top: var(--s-3); }
/* ===================================================
   Развилка главной (#657): два входа ОДНОГО веса
   Карточки намеренно одинаковы — рамка, фон, типографика, размер. Акцентной
   заливки нет ни у одной: выделить один вход и значит продать его, а работа
   главной (бриф §4.5) — развести, а не продать.
   ★ С #866 (п. 2.1) карточка — КОНТЕЙНЕР, а не ссылка: на наведение не отвечает
   (ни рамкой, ни сдвигом), курсор обычный. Кликабельное внутри — только ссылки
   `.lnk-list` (правило кликабельности — раздел «Ссылки» ниже). Заголовок карточки —
   аудитория (`h2.fork__k`), не ссылка.
   ========================================================== */
.forks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); margin: var(--s-7) 0 0; }
@media (max-width: 720px) { .forks { grid-template-columns: 1fr; gap: var(--s-3); } }
.fork { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); border: 1px solid var(--on-navy-border-strong); border-radius: var(--r-5); background: var(--navy-800); color: var(--on-navy); }
.fork__k { font: 700 clamp(20px, 1.9vw, 24px)/1.25 var(--font-sans); letter-spacing: -.01em; color: var(--on-navy); margin: 0; }
@media (max-width: 720px) { .fork { padding: var(--s-5); gap: var(--s-2); } }
/* На узком экране герой главной ужимается (признак закрытия #657, п. 1 — карточки развилки
   как можно выше). С #866 полосы агрегатов над героем больше нет (она внизу страницы), и
   правила для неё отсюда сняты. Адресовано по `data-page`: у остальных страниц герой несёт
   другую работу, и общий `.phero` им менять не за что. */
@media (max-width: 720px) {
  body[data-page="index"] .phero { padding: var(--s-5) 0 var(--s-8); }
  body[data-page="index"] .phero h1 { font-size: 30px; margin-bottom: var(--s-4); }
  body[data-page="index"] .phero__lead { margin-bottom: 0; }
  body[data-page="index"] .forks { margin-top: var(--s-4); }
  body[data-page="index"] .fork { padding: var(--s-4); }
}
/* Справочник главной (#866 п. 2.4): заголовок над списком ссылок, без вводного абзаца. */
.home-guide.sec { padding: var(--s-10) 0; }
.home-guide__h { margin: 0 0 var(--s-6); }
@media (max-width: 720px) {
  .home-guide.sec { padding: var(--s-8) 0; }
  .home-guide__h { margin-bottom: var(--s-4); }
  .home-guide__h, .netstrip__head h2 { font-size: 28px; }
}

/* ==========================================================
   9. Каталог оборудования (#656) — АДДИТИВНАЯ ДЕЛЬТА
   Ни одно правило выше не переопределяется: все селекторы ниже новые.
   Инвариант направления № 4 (общий CSS, hex в HTML = 0) держится тем, что
   цвета берутся ТОЛЬКО из токенов раздела 1.
   ========================================================== */

/* ── Хлебные крошки. Уточнитель «для электромобиля» в последнем звене —
      требование семантики (`_artifacts/site_semantika.md` § 4.4), а не украшение:
      крошка индексируется вместе с title и H1. Последнее звено — не ссылка. ── */
.crumbs { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 var(--s-6); padding: 0; font: 400 13px/1.4 var(--font-sans); color: var(--text-3); }
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: "/"; color: var(--text-4); }
.crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.crumbs a:hover { border-bottom-color: currentColor; }
.crumbs [aria-current="page"] { color: var(--text-2); font-weight: 600; }
.phero .crumbs { color: var(--on-navy-3); }
.phero .crumbs li + li::before { color: var(--on-navy-3); }
.phero .crumbs [aria-current="page"] { color: var(--on-navy-2); }

/* ── Таблица данных на СВЕТЛОЙ поверхности. `.tol-net table` выше живёт только
      внутри тёмного компонента сети и здесь неприменима.
      ⚠ Обёртка со своим `overflow-x` обязательна: таблица каталога шире 375 px,
      и без неё горизонтально уезжала бы вся страница, а не таблица. ── */
.dtable__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dtable { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 14px; }
.dtable caption { text-align: left; font: 600 15px var(--font-sans); color: var(--text); padding: 0 10px var(--s-3); }
.dtable th, .dtable td { border-bottom: 1px solid var(--border); padding: 10px; text-align: right; font-variant-numeric: tabular-nums; }
.dtable thead th { color: var(--text-3); font: 600 11px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; border-bottom-color: var(--border-strong); white-space: nowrap; }
.dtable th[scope="row"] { text-align: left; font-weight: 600; color: var(--text); white-space: nowrap; }
.dtable tbody tr:hover { background: var(--surface-2); }
.sec--cream .dtable tbody tr:hover { background: var(--surface-3); }

/* ── Пары «параметр — значение» в карточке модели. ── */
.spec { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--s-4); margin: var(--s-4) 0 0; font-size: 14px; line-height: 1.45; }
.spec dt { color: var(--text-3); }
.spec dd { margin: 0; color: var(--text); font-weight: 600; text-align: right; }

/* ── Сетка фотографий площадок. Подпись несёт площадку ТОЛЬКО тогда, когда она
      в разрешённом списке спайна № 22; остальные подписываются без имени места. ── */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-5); margin: 0; padding: 0; }
.shots figure { margin: 0; }
.shots img { display: block; width: 100%; height: 280px; object-fit: cover; border-radius: var(--r-4); border: 1px solid var(--border); background: var(--surface-3); }
.sec--dark .shots img { border-color: var(--on-navy-border-strong); }
.shots figcaption { font: 400 13px/1.45 var(--font-sans); color: var(--text-2); margin-top: 10px; }
.sec--dark .shots figcaption { color: var(--on-navy-2); }
@media (max-width: 560px) { .shots img { height: 220px; } }

/* ── Врезка-оговорка: то, чего мы НЕ делаем и НЕ обещаем. ── */
.caveat { border-left: 3px solid var(--border-strong); padding: 0 0 0 var(--s-5); margin: var(--s-6) 0 0; color: var(--text-2); font-size: 15px; line-height: 1.6; }
.sec--dark .caveat { border-left-color: var(--on-navy-border-strong); color: var(--on-navy-2); }
.slot--solo { max-width: 520px; }
/* ══════════════════════════════════════════════════════════════════════════════
   Калькулятор окупаемости — страница /roi (#655). АДДИТИВНАЯ ДЕЛЬТА: ни одно
   правило выше не переписано, добавлены только новые селекторы. Цвета — только
   токенами: hex в HTML страниц по инварианту направления (п. 4) равен нулю, и
   держится он тем, что палитра живёт здесь.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Форма калькулятора ── */
.calc { border: 1px solid var(--border); border-radius: var(--r-4); background: var(--surface); padding: var(--s-6); }
.calc__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-5); }
.calc__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Поле выбора занимает всю ширину ряда на широком экране: подпись модели длиннее
   любого числового поля, и в одной колонке она рвалась бы на четыре строки. */
.calc__field--wide { grid-column: 1 / -1; }
.calc__k { font: 600 13px/1.4 var(--font-sans); color: var(--text); }
.calc__hint { font: 400 12px/1.45 var(--font-sans); color: var(--text-3); }
.calc__field input,
.calc__field select {
  font: 500 16px/1.4 var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-2);
  padding: 10px var(--s-3);
  width: 100%;
  /* ⚠ 16px и box-sizing — не вкус: на iOS поле со шрифтом меньше 16px заставляет
     Safari зумить страницу при фокусе, и вёрстка на 375 px уезжает вбок. */
  box-sizing: border-box;
  min-width: 0;
}
.calc__field input:focus,
.calc__field select:focus { outline: 2px solid var(--brand-500); outline-offset: 1px; }

/* ── Три сценария ── */
.calc__out { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s-4); margin-top: var(--s-6); }
.calc__scn { border: 1px solid var(--border); border-radius: var(--r-3); background: var(--surface-2); padding: var(--s-5); display: flex; flex-direction: column; gap: 6px; }
.calc__scn.is-base { border-color: var(--accent-500); background: var(--accent-50); }
.calc__scn-k { font: 600 11px/1.5 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.calc__scn-v { font: 700 clamp(24px, 3vw, 34px)/1.05 var(--font-sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.calc__scn-n { font: 400 13px/1.5 var(--font-sans); color: var(--text-2); }
.calc__note { font: 400 14px/1.6 var(--font-sans); color: var(--text-2); margin: var(--s-5) 0 0; }

/* ── Раскрытая формула ── */
.formula__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); counter-reset: term; }
.formula__list li {
  display: grid;
  grid-template-columns: minmax(180px, 15rem) 1fr minmax(96px, auto);
  gap: var(--s-3) var(--s-5);
  align-items: baseline;
  border-top: 1px solid var(--border);
  padding-top: var(--s-4);
}
.formula__list li.is-total { border-top-width: 2px; border-top-color: var(--accent-500); }
.formula__eq { font: 500 15px/1.45 var(--font-mono); color: var(--text); }
.formula__d { font: 400 14px/1.6 var(--font-sans); color: var(--text-2); }
.formula__v { font: 600 16px/1.4 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--text); text-align: right; white-space: nowrap; }
/* Итог формулы — тёмный оттенок акцента: `accent-600` на `--surface-2` давал 3,66 : 1 (#866). */
.formula__list li.is-total .formula__v { color: var(--accent-700); }

/* ── Таблица «число → источник» и ряды данных ── */
.srctable { overflow-x: auto; margin: 0 0 var(--s-5); }
/* Ряды помесячной истории и прайса длинные: ограничение по высоте оставляет их
   на странице целиком (калькулятор читает ИМЕННО эти строки), но не превращает
   страницу в простыню. */
.srctable--scroll { max-height: 420px; overflow-y: auto; }
.srctable table { border-collapse: collapse; width: 100%; font-size: 14px; }
.srctable caption { text-align: left; font: 400 13px/1.5 var(--font-sans); color: var(--text-3); padding: 0 8px var(--s-3); }
.srctable th, .srctable td { border-bottom: 1px solid var(--border); padding: 8px; text-align: left; vertical-align: top; }
.srctable td.tnum, .srctable th[scope="col"] + th + td { font-variant-numeric: tabular-nums; }
.srctable thead th { position: sticky; top: 0; background: var(--surface); font: 600 12px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); z-index: 1; }
.srctable th[scope="row"] { font-weight: 500; color: var(--text); }
.srctable a { color: var(--brand-600); }
.sec--cream .srctable thead th { background: var(--surface-2); }

@media (max-width: 640px) {
  /* Одна колонка: три колонки формулы на 375 px дают в средней по два слова
     в строке — читается хуже, чем последовательные блоки. */
  .formula__list li { grid-template-columns: 1fr; }
  .formula__v { text-align: left; }
  .calc { padding: var(--s-5); }

  /* ⚠ ЗАМЕР, А НЕ ВКУС, И ПОТОМУ ПРАВИЛО ЗДЕСЬ. Подпись основного действия этой
     страницы («Запросить расчёт по вашему адресу») длиннее, чем у соседей, а `.btn`
     несёт `white-space: nowrap`. Замер 05.09.2026 на 375 px: кнопка 374 px при
     контент-боксе 327 ⇒ `documentElement.scrollWidth` 399 против 375, то есть у
     страницы появлялся горизонтальный скролл. Правило снимает nowrap ТОЛЬКО на узком
     экране и ТОЛЬКО на этой странице (`[data-page="roi"]`): у соседних страниц кнопки
     короче, и менять им перенос — значит трогать чужую вёрстку ради своей. */
  [data-page="roi"] .btn { white-space: normal; max-width: 100%; text-align: center; }
}

/* ==========================================================
   Карта сети — страница /map (#660). Аддитивная дельта: ни одно правило выше
   не переписано, все цвета — существующие токены (hex в HTML страниц = 0).
   ========================================================== */
.mapui { margin-top: var(--s-6); }

.mapui__filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s-4); align-items: end; }
.mapui__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mapui__k { font: 600 13px/1.4 var(--font-sans); color: var(--text); }
.mapui__field select {
  width: 100%;
  padding: 11px 12px;
  font: 500 15px var(--font-sans);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-3);
}
.mapui__field select:focus { outline: 2px solid var(--brand-500); outline-offset: 1px; }

.mapui__bar { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; margin: var(--s-5) 0 0; }
.mapui__count { font: 600 16px var(--font-sans); color: var(--text); font-variant-numeric: tabular-nums; }
.mapui__bar .src { margin-top: 0; }

/* Холст карты. Высота фиксированная: MapLibre считает размер контейнера при
   инициализации, и контейнер нулевой высоты даёт пустой холст без ошибки. */
.mapui__canvas { position: relative; height: 640px; margin-top: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-4); background: var(--surface-3); overflow: hidden; }
.mapui__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; font: 500 14px var(--font-mono); color: var(--text-3); }
/* Холст Google Maps (#678) — отдельный слой поверх заглушки; над ним ничего не лежит:
   логотип и копирайт Google в нижних углах обязаны быть видны (условие платформы, ADR-0371 §3). */
.mapui__gmap { position: absolute; inset: 0; }
/* Легенда карты (#678): образцы — те же SVG, что рисует модуль пинов; подписи — текст. */
.mapui__legend { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); font: 500 13px/1.4 var(--font-sans); color: var(--text-2); }
.mapui__legend li { display: inline-flex; align-items: center; gap: 8px; }
.mapui__sw { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; }
.mapui__sw svg { width: 100%; height: 100%; }
/* Кнопки мини-аппа по коду коннектора в карточке локации (#678, п. 6 якоря). */
.mapui__tma { margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.mapui__tma:empty { display: none; }
.mapui__codes { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.mapui__codes .btn { font-variant-numeric: tabular-nums; }
.mapui__note { margin: var(--s-4) 0 0; font: 400 15px/1.55 var(--font-sans); color: var(--text-2); }

.mapui__card { margin-top: var(--s-5); padding: var(--s-6); border: 1px solid var(--border-strong); border-radius: var(--r-4); background: var(--surface-2); }
.mapui__card h3 { margin: 0 0 var(--s-3); }
.mapui__card .spec { margin-top: var(--s-4); }
.mapui__go { margin-top: var(--s-5); }
.mapui__card .src { margin-top: var(--s-3); }

.mapui__list { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: var(--s-4); }
.mitem { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; text-align: left; padding: var(--s-5); font: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-4); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .12s; }
.mitem:hover { border-color: var(--border-strong); box-shadow: var(--sh-md); transform: translateY(-1px); }
.mitem:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.mitem__t { font: 700 17px/1.3 var(--font-sans); color: var(--text); }
.mitem__a { font: 400 14px/1.45 var(--font-sans); color: var(--text-2); }
.mitem__m { font: 400 13px/1.45 var(--font-mono); color: var(--text-3); }

/* Статус локации. Цвета — функциональные токены, и только они: бренд статусом не красят. */
.mstat { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 4px 10px; border-radius: var(--r-pill); font: 600 12px var(--font-sans); letter-spacing: .04em; text-transform: uppercase; }
.mstat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mstat.is-free { background: var(--success-50); color: var(--success-700); }
.mstat.is-busy { background: var(--warning-50); color: var(--warning-700); }
.mstat.is-fault { background: var(--danger-50); color: var(--danger-700); }
.mstat.is-off { background: var(--surface-3); color: var(--text-3); }
.mstat.is-unknown { background: var(--surface-3); color: var(--text-3); }

/* Клик по строке запечённой таблицы городов ставит фильтр — курсор об этом говорит. */
.tol-net [data-cities-table] tbody tr { cursor: pointer; }
.tol-net [data-cities-table] tbody tr:hover { background: var(--on-navy-hover); }

@media (max-width: 640px) {
  /* Замер 375 px: холст 460 px занимает экран целиком, список уходит за сгиб.
     #866 п. 3.7: плашка локации теперь живёт НАД картой (InfoWindow) — на 320 px она закрывала
     холст целиком. 480 px + шапка 62 px = 542 px из 844: карта и плашка видны на одном экране. */
  .mapui__canvas { height: 480px; }
  .mapui__filters { grid-template-columns: 1fr; }
  /* Подпись основного действия карточки локации длиннее соседних, а `.btn` несёт
     `white-space: nowrap` — на 375 px это давало бы горизонтальный скролл
     (тот же класс дефекта, что снят для `[data-page="roi"]`). */
  [data-page="map"] .btn { white-space: normal; max-width: 100%; text-align: center; }
}

/* Кнопка «Показать ещё» — отдельная ячейка сетки списка, во всю ширину. */
.mapui__more { grid-column: 1 / -1; display: flex; justify-content: center; }
/* ═══ Страница помощи `/help` (#663) — АДДИТИВНАЯ ДЕЛЬТА, ничего выше не переписано ═══ */

/* ── Разбор по симптомам: «симптом → что сделать за минуту». ──
   Класс отдельный, а не `.cards`: у карточки симптома внутри СПИСОК действий, а
   `.card p` рассчитан на абзац и задаёт 15 px тексту, который в `.checks` уже свой.
   Колонка шире стандартных 258 px (`.cards`): замер 1440 px — пункт действия здесь
   длиннее строки карточки-описания, и в узкой колонке он рвался на строки в два слова. */
.sympt { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s-5); }
.sympt__i { border: 1px solid var(--border); border-radius: var(--r-4); background: var(--surface); padding: var(--s-6); }
.sympt__i h3 { font: 600 19px/1.3 var(--font-sans); margin: 0 0 var(--s-3); }
.sympt__i > p { margin: 0 0 var(--s-5); color: var(--text-2); font-size: 15px; line-height: 1.55; }
.sympt__k { display: block; font: 600 11px/1.5 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); margin: 0 0 var(--s-4); }
.sympt .checks { margin: 0; font-size: 15px; }
.sympt .checks li { color: var(--text-2); }

/* ── Карточка выбранной локации в блоке «Статус станций сейчас». ──
   Донор — `.mapui__card` со страницы `/map`: та же рамка и та же подложка, потому что это
   тот же объект (локация сети), показанный в другом месте. Отдельный класс нужен ровно
   из-за одной строки — статус и число свободных портов стоят в ОДНОЙ строке с бейджем,
   а не под карточкой. */
.lstat { margin-top: var(--s-5); padding: var(--s-6); border: 1px solid var(--border-strong); border-radius: var(--r-4); background: var(--surface-2); }
.lstat h3 { font: 600 20px/1.3 var(--font-sans); margin: 0 0 var(--s-2); }
.lstat__addr { margin: 0 0 var(--s-4); color: var(--text-2); font-size: 15px; line-height: 1.5; }
.lstat__row { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin: 0 0 var(--s-4); }
.lstat__ports { font: 600 15px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--text); }
.lstat .names { margin: 0; }
.lstat .mapui__go { margin-top: var(--s-5); }

@media (max-width: 640px) {
  /* Подпись основного действия карточки локации длинная, а `.btn` несёт `white-space:
     nowrap` — на 375 px это дало бы горизонтальный скролл. Тот же класс дефекта уже снят
     для `[data-page="roi"]` и `[data-page="map"]`; лечение то же. */
  [data-page="help"] .btn { white-space: normal; max-width: 100%; text-align: center; }
  /* Одна колонка симптомов: 320 px минимума в сетке на 375 px даёт колонку впритык, и
     длинные названия разъёмов вылезают за край. */
  .sympt { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   Якорная навигация под ЛИПКОЙ шапкой — страница /routes (#664). АДДИТИВНАЯ ДЕЛЬТА:
   ни одно правило выше не переписано, добавлен один селектор.

   ⚠ ЗАМЕР, А НЕ ОСТОРОЖНОСТЬ. Переход по `#almaty-astana` на 1440×900 (Playwright,
   06.09.2026, dev): нижняя граница `.hdr` — 67 px, верх заголовка секции — 38 px,
   то есть заголовок коридора УЕЗЖАЛ ПОД ШАПКУ и читатель попадал на карточки фактов,
   не увидев, какой это коридор. У страницы /routes оглавление из пяти якорей —
   её собственная навигация, и без этого правила она вела «примерно туда».
   ⛔ `scroll-padding-top` на `html` не годится: он влияет на КАЖДУЮ прокрутку к цели
   в документе, включая программную, а нужна только посадка якоря.
   Значение — высота шапки плюс воздух; `scroll-margin` только отодвигает точку
   посадки и на вёрстку не влияет вовсе.
   ══════════════════════════════════════════════════════════════════════════════ */
section[id] { scroll-margin-top: 84px; }

/* ══════════════════════════════════════════════════════════════════════════════
   Семейство /cars/<модель> (#665). АДДИТИВНАЯ ДЕЛЬТА: ни одно правило выше не
   переписано, добавлен один медиазапрос.

   ⚠ ЗАМЕР, А НЕ ОСТОРОЖНОСТЬ. Playwright, 375×900 по отданным байтам dev 06.09.2026:
   `/preview/cars/byd-song-plus-ev` дал `document.scrollWidth = 396` при `clientWidth
   = 375`, то есть горизонтальный скролл 21 px. Виновник назван поимённо — основная
   кнопка «Найти станцию с разъёмом GB/T DC» шириной 372 px при `.btn { white-space:
   nowrap }`; таблицы тут ни при чём, они лежат в собственном `.mtable__scroll` и
   документ не расширяют. Подпись кнопки содержит НАЗВАНИЕ РАЗЪЁМА и потому длиннее
   типовой — на Zeekr 001 («CCS2») скролла нет вовсе.
   ⛔ Резать подпись нельзя: разъём в кнопке и есть обещание, ради которого на неё
   жмут. Тот же класс дефекта уже снят для `[data-page="roi"]`, `"map"` и `"help"` —
   лечение то же, одно правило. */
@media (max-width: 640px) {
  [data-page="cars"] .btn { white-space: normal; max-width: 100%; text-align: center; }
}

/* ==========================================================
   Главная (#866, пачка 1 вычитки владельца 07.10.2026) — АДДИТИВНАЯ ДЕЛЬТА.
   Цвета — только токены раздела 1 (инвариант № 4).
   ========================================================== */

/* ── Фон первого экрана — видео владельца под затемнением «как на старом tol.kz».
      Слои: кадр-заставка (фон секции, грузится всегда) → видео (только на широком экране
      без reduce-motion, подставляет скрипт страницы ПОСЛЕ загрузки) → затемнение → текст.
      Заставка — фон самой секции, а не `poster` у видео: на телефоне видео-элемента в
      раскладке нет вовсе, а кадр нужен. ── */
.phero--video { position: relative; overflow: hidden; isolation: isolate; background: var(--navy-950) url("img/hero-poster.jpg") center / cover no-repeat; }
.phero--video .phero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.phero--video::before { content: ""; position: absolute; inset: 0; background: var(--video-scrim); z-index: -1; }
@media (max-width: 768px) { .phero--video .phero__video { display: none; } }
@media (prefers-reduced-motion: reduce) { .phero--video .phero__video { display: none; } }

/* Три строки позиционирования под заголовком — список, а не абзац через точки. */
.phero__pillars { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font: 500 clamp(16px, 1.4vw, 19px)/1.5 var(--font-sans); color: var(--on-navy); }
.phero__pillars li { display: flex; align-items: center; gap: 10px; }
.phero__pillars li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-500); flex: none; }
@media (max-width: 720px) { .phero__pillars { flex-direction: column; gap: 6px; } }

/* Поверх видео карточка — `navy-900`, а не `navy-800`: фон кадра под ней читается, а текст — нет. */
.phero--video .fork { background: var(--navy-900); }

/* ── Страницы документов (`/confidence`, `/publicoffer`): текст 1:1 со старого tol.kz.
      Нумерованные пункты — как у источника: номер слева, текст справа. ── */
.legal { max-width: 820px; }
.legal__ed { font: 600 17px/1.4 var(--font-sans); color: var(--text); margin: 0 0 var(--s-2); }
.legal__note { font: 500 13px/1.5 var(--font-sans); letter-spacing: .02em; color: var(--text-3); margin: 0 0 var(--s-7); }
.legal__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-6); }
.legal__item { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-4); align-items: start; }
.legal__n { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-3); color: var(--text); font: 700 15px var(--font-sans); }
.legal__t { font: 400 16px/1.65 var(--font-sans); color: var(--text-2); overflow-wrap: anywhere; }
.legal__t strong { color: var(--text); font-weight: 600; }
.legal__t ol { margin: var(--s-2) 0; padding-left: 1.4em; }
.legal__t a { color: var(--brand-600); }
@media (max-width: 560px) {
  .legal__item { grid-template-columns: 32px 1fr; gap: var(--s-3); }
  .legal__n { width: 32px; height: 32px; font-size: 13px; }
  .legal__t { font-size: 15px; }
}

/* ==========================================================
   Карта /map и «Как начать зарядку» /start (#866, пачка 3 вычитки владельца 08.10.2026) —
   АДДИТИВНАЯ ДЕЛЬТА. Цвета — только токены раздела 1 (инвариант № 4).
   ========================================================== */

/* ── Палитра карты — дизайн-система TOL.Charge (п. 3.6: «сейчас там EVStations»). Значения читает
      `site-assets/map.js` и передаёт в СОБСТВЕННЫЙ модуль пинов сайта `site-assets/site-map-pins.js`
      (`TolSiteMapPins.create(тема)`, ADR-0487, решение владельца 08.10.2026); общего модуля с мини-
      аппом `/app` больше нет, и его палитру эти значения не трогают. Смысл цветов — функциональная шкала ДС:
      свободно — success, занято — warning, ошибка — danger, нет связи — нейтральный третий тон;
      фирменный синий — кластер, выбранная локация и пульс идущей зарядки. Оранжевый на карте не
      живёт: он закреплён за единственным призывом. Значения ЗАФИКСИРОВАНЫ (не `--text-*`): пин —
      белый диск на тайлах Google, тема страницы его не перекрашивает. ── */
:root {
  --map-free: var(--success-500);
  --map-busy: var(--warning-700);
  --map-fault: var(--danger-500);
  --map-offline: #6F7A91;
  --map-ink: var(--navy-900);
  --map-disc: #FFFFFF;
  --map-accent: var(--brand-600);
  --map-halo: var(--brand-400);
}

/* «Найти станцию на карте» ведёт на сам холст: шапка липкая (67 px), холст 640/440 px — с этим
   отступом карта встаёт под шапку ЦЕЛИКОМ (п. 3.2), а не заголовок раздела над ней. */
#map-canvas { scroll-margin-top: 84px; }

/* ── Плашка локации над картой (п. 3.7) — содержимое InfoWindow Google: крест закрытия рисует сам
      Google, заголовок локации стоит в его шапке. Без карты (нет ключа/отказ) та же разметка встаёт
      под холст в `.mapui__card`. ── */
.mpop { font: 400 14px/1.45 var(--font-sans); color: var(--text); max-width: 320px; }
/* Правый отступ плашки над картой (#866, замечание ведущего 08.10 на живом Google): рамка InfoWindow
   даёт поле слева и сверху, а справа его нет (там полоса прокрутки тела), и колонка значений `.spec`
   стояла вплотную к правому краю. Только внутри карты: под холстом у карточки свои поля. */
.mapui__gmap .mpop { padding: 0 var(--s-3) var(--s-1) 0; }
.mpop__t { font: 700 16px/1.3 var(--font-sans); color: var(--text); margin: 0; padding-right: 4px; }
.mpop__a { margin: 2px 0 0; color: var(--text-2); font-size: 13px; }
.mpop .mstat { margin-top: var(--s-2); }
.mpop .spec { margin-top: var(--s-3); font-size: 13px; gap: 4px var(--s-4); }
.mpop__act { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-2); margin-top: var(--s-4); }
.mpop__act .btn { white-space: normal; text-align: center; }
.mpop__codes { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-3); background: var(--surface-2); }
.mpop__codes[hidden] { display: none; }
.mpop__codes .mapui__k { font-size: 12px; font-weight: 500; color: var(--text-2); }
.mpop__codes .mapui__codes { gap: var(--s-2); }
.mpop__more { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-2); }
.mpop__more .lnk { font-size: 14px; }
.mapui__card .mpop { max-width: none; }
/* Статус локации — фраза («свободно 1 из 2», «свободных нет: занято 1, нет связи 1»), а не ярлык:
   капитель с разрядкой на такой длине кричит. Только на /map — бейдж /help остаётся прежним. */
[data-page="map"] .mstat { text-transform: none; letter-spacing: 0; font-size: 13px; }
@media (max-width: 640px) {
  /* Телефон: плашка над картой обязана оставлять карту видимой (п. 8.1 владельца) — плотнее. */
  .mpop { font-size: 13px; }
  .mpop__t { font-size: 15px; }
  .mpop .spec { margin-top: var(--s-2); font-size: 12px; gap: 2px var(--s-3); }
  .mpop__act { margin-top: var(--s-3); gap: 6px; }
  .mpop__act .btn { padding: 8px 12px; font-size: 13px; }
}
.mapui__card .mpop__act { flex-direction: row; flex-wrap: wrap; align-items: center; }
/* Тело InfoWindow Google — без своих полей: отступы задаёт `.mpop`. */
.mapui__gmap .gm-style-iw-d { overflow: auto !important; }

/* ── Таблица «по населенным пунктам» (п. 3.9): заголовок первой колонки — влево, как и сама
      колонка; единица мощности — строчными, а не капителью «КВТ». ── */
.tol-net th[scope="col"]:first-child { text-align: left; }
.tol-net th .u { text-transform: none; letter-spacing: 0; }
/* Дата строки — сразу под своими числами (getkaspiqr: смешанный блок, дата под каждой строкой), следующая строка — с воздухом. */
.tol-net__row + .tol-net__note { margin-top: 0; }
.tol-net__note + .tol-net__row { margin-top: var(--s-6); }

/* ── Плашки способов запуска (п. 3.10): логотип · название · одна фраза · действие ВНИЗУ.
      Действие прижато к низу карточки (`margin-top: auto`), поэтому во всём ряду оно стоит на
      одном уровне при любой длине текста. ── */
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
@media (max-width: 960px) { .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ways { grid-template-columns: 1fr; } }
.way { display: flex; flex-direction: column; gap: var(--s-3); border: 1px solid var(--border); border-radius: var(--r-4); background: var(--surface); padding: var(--s-6); }
.way__logos { display: flex; gap: var(--s-2); }
.way__logos img { width: 48px; height: 48px; border-radius: var(--r-3); display: block; }
.way__ico { width: 48px; height: 48px; border-radius: var(--r-3); background: var(--brand-50); color: var(--brand-600); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.way__ico svg { width: 26px; height: 26px; }
.way-sec__logos .way__ico { width: 64px; height: 64px; border-radius: var(--r-4); }
.way-sec__logos .way__ico svg { width: 34px; height: 34px; }
.way h3 { font: 600 18px/1.3 var(--font-sans); margin: var(--s-2) 0 0; }
.way p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.55; }
.way .way__go { margin-top: auto; padding-top: var(--s-3); }

/* Подзаголовок /map — три строки владельца (п. 3.1) переносами `<br>`: на широком экране строка
   не должна рваться посередине из-за общего ограничения 60ch. */
[data-page="map"] .phero__lead { max-width: 76ch; }
/* Ссылка «Если что-то пошло не так» под кнопками финального призыва (добавка ведущего №2). */
.cta-final .cta-final__help { margin: var(--s-5) 0 0; font-size: 16px; }

/* ── Страница «Как начать зарядку»: оглавление способов и раздел на способ. ── */
.toc { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: var(--s-6) 0 0; padding: 0; }
.toc a { display: inline-flex; align-items: center; gap: var(--s-2); padding: 8px 14px; border: 1px solid var(--on-navy-border-strong); border-radius: var(--r-pill); color: var(--on-navy); font: 500 14px var(--font-sans); text-decoration: none; }
.toc a:hover { background: var(--on-navy-hover); }
.toc img { width: 20px; height: 20px; border-radius: 5px; }
.way-sec { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s-5); align-items: start; max-width: 860px; }
.way-sec + .way-sec { margin-top: var(--s-9); padding-top: var(--s-9); border-top: 1px solid var(--border); }
.way-sec__logos { display: flex; flex-direction: column; gap: var(--s-2); }
.way-sec__logos img { width: 64px; height: 64px; border-radius: var(--r-4); display: block; }
.way-sec h2 { margin: 0 0 var(--s-3); }
.way-sec > div > p { margin: 0 0 var(--s-4); color: var(--text-2); font-size: 17px; line-height: 1.6; }
.way-sec .steps-n { margin: 0 0 var(--s-5); padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--s-3); font-size: 16px; line-height: 1.55; }
.way-sec .steps-n li::marker { font-weight: 700; color: var(--brand-600); }
.way-sec .way-note { margin: 0 0 var(--s-4); padding: var(--s-4) var(--s-5); border-left: 3px solid var(--brand-600); background: var(--surface-2); border-radius: 0 var(--r-3) var(--r-3) 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.way-sec__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
@media (max-width: 640px) {
  .way-sec { grid-template-columns: 1fr; gap: var(--s-3); }
  .way-sec__logos { flex-direction: row; }
  .way-sec__logos img { width: 48px; height: 48px; }
  [data-page="start"] .btn { white-space: normal; max-width: 100%; text-align: center; }
}

/* ==========================================================
   Единая форма заявки (#866, строка 5 реестра; владелец 08.10.2026: кнопки бизнеса — «заменить
   формой и созданием обращения»; ведущий: модалка, на телефоне — на весь экран, без JS — страница).
   Разметка — канон `_frame/lead.html` (диалог `dialog.lead`), поведение — `site-assets/site-frame.js`.
   Вид — светлая карточка ДС поверх затемнения navy: поля с рамкой `--border-strong` и фокусом
   `--brand-600`, одна оранжевая кнопка «Отправить» (главный призыв окна), согласие — тихой строкой.
   Состояния — атрибутами диалога: `data-lead-state` (form · sent), `data-lead-error` (код отказа).
   ========================================================== */
.lead { width: min(560px, calc(100% - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: var(--r-5); background: var(--surface); color: var(--text); box-shadow: var(--sh-xl); overflow-y: auto; }
.lead::backdrop { background: rgba(10, 20, 38, .66); }
html.lead-open { overflow: hidden; }
.lead__box { position: relative; padding: var(--s-7) var(--s-7) var(--s-6); }
.lead__close { position: absolute; top: var(--s-4); right: var(--s-4); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-2); }
.lead__close:hover { background: var(--surface-3); color: var(--text); }
.lead__close:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.lead__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.lead__title { font: 700 24px/1.25 var(--font-sans); letter-spacing: -.01em; margin: 0 0 var(--s-2); padding-right: var(--s-7); }
.lead__lead { margin: 0 0 var(--s-5); color: var(--text-2); font-size: 15px; line-height: 1.5; }
.lead__form { display: grid; gap: var(--s-4); }
.lead__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.lead__field label { display: block; margin: 0 0 6px; font: 600 14px/1.35 var(--font-sans); color: var(--text); }
.lead__req { color: var(--accent-700); }
.lead__field input, .lead__field select, .lead__field textarea { display: block; width: 100%; padding: 11px 14px; border: 1px solid var(--border-strong); border-radius: var(--r-3); background: var(--surface); color: var(--text); font: 400 16px/1.4 var(--font-sans); }
.lead__field textarea { min-height: 96px; resize: vertical; }
.lead__field input:focus, .lead__field select:focus, .lead__field textarea:focus { outline: none; border-color: var(--brand-600); box-shadow: 0 0 0 3px var(--brand-100); }
.lead__field input::placeholder { color: var(--text-3); }
.lead__err { display: none; margin: 6px 0 0; font: 500 13px/1.45 var(--font-sans); color: var(--danger-700); }
.lead[data-lead-error="phone_invalid"] [data-err="phone_invalid"],
.lead[data-lead-error="rate_limited"] [data-err="rate_limited"],
.lead[data-lead-error="network"] [data-err="network"] { display: block; }
.lead[data-lead-error="phone_invalid"] #lead-phone { border-color: var(--danger-500); }
.lead__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lead__send { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-3); margin-top: var(--s-2); }
.lead__send .btn { width: 100%; }
.lead__send .btn:disabled { opacity: .6; cursor: progress; transform: none; }
.lead__consent { margin: 0; font: 400 12px/1.5 var(--font-sans); color: var(--text-3); }
.lead__consent a { color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.lead__consent a:hover { color: var(--text-2); text-decoration-color: currentColor; }
.lead__view--sent { display: none; flex-direction: column; align-items: center; gap: var(--s-4); padding: var(--s-6) 0 var(--s-3); text-align: center; }
.lead__view--sent .lead__title { padding-right: 0; max-width: 22ch; }
.lead__view--sent .lead__title:focus { outline: none; }
.lead[data-lead-state="sent"] .lead__view--form { display: none; }
.lead[data-lead-state="sent"] .lead__view--sent { display: flex; }
/* Знак «принято» — линейная галочка ДС в тонированном квадрате (`--brand-50`, `--r-4`), без круга. */
.lead__ok { width: 56px; height: 56px; padding: 14px; border-radius: var(--r-4); background: var(--brand-50); fill: none; stroke: var(--brand-600); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lead__home { display: none; }
@media (max-width: 600px) {
  /* Телефон: окно — весь экран, без скруглений; крест — в углу экрана. */
  .lead { width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; border-radius: 0; }
  .lead__box { padding: var(--s-9) var(--s-5) var(--s-6); }
  .lead__row { grid-template-columns: 1fr; }
}
/* Страница заявки без JS (`request`): тот же диалог стоит внутри main и показан блоком страницы. */
body[data-page="request"] .lead { display: block; position: static; inset: auto; width: auto; max-width: 640px; height: auto; max-height: none; margin: 0; overflow: visible; border: 1px solid var(--border); border-radius: var(--r-5); box-shadow: var(--sh-sm); }
body[data-page="request"] [data-lead-close] { display: none; }
body[data-page="request"] .lead__home { display: inline-flex; }
.lead-page .crumbs { margin-bottom: var(--s-5); }

/* /help «QR на стикере» (#866, оговорка 3 re-QA пачки 3): блок с ОДНОЙ ячейкой вместо двухколоночной
   сетки — слот скрина снят со страницы, и при 1440 правая половина стояла пустой. Ширина — как у
   вводного текста секции (`.sec__head`, 68ch). */
.diff-block--one { grid-template-columns: minmax(0, 68ch); }

/* ==========================================================
   12. Страница операторов `/roaming` (#866, пачка 4 владельца, 08.10.2026: пересборка дизайнером
   и маркетологом). АДДИТИВНАЯ ДЕЛЬТА: выше не переписано ничего, сетка карточек главной
   (третья карточка «Операторам зарядных сетей») меняется только добавленными правилами ниже.
   Цвета — только токены; значков «круг с галочкой» нет (список — общий `.checks`).
   ========================================================== */
/* Главная: три карточки аудиторий. Телефон — столбиком; планшет — две в ряд, третья во всю
   ширину (иначе одна карточка висела бы в половине ряда); десктоп — три равных в ряд. */
@media (min-width: 721px) and (max-width: 1023px) { .forks .fork:nth-child(3) { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .forks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Значок из линейного набора ДС там, где файла-знака приложения нет (WhatsApp-бот, Яндекс Go). */
.ds-ico { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-2); background: var(--brand-50); color: var(--brand-600); flex: none; }
.ds-ico svg { width: 60%; height: 60%; }

/* Из каких приложений запускают зарядку: крупное число Kaspi.kz + строки групп. */
.launch { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-6); align-items: stretch; }
@media (max-width: 920px) { .launch { grid-template-columns: 1fr; gap: var(--s-4); } }
.launch__main { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); border-radius: var(--r-4); background: var(--surface); border: 1px solid var(--border); }
.launch__ico { width: 56px; height: 56px; border-radius: var(--r-3); }
.launch__v { font: 800 clamp(56px, 7vw, 88px)/1 var(--font-sans); letter-spacing: -.03em; color: var(--text); }
.launch__l { font: 400 17px/1.45 var(--font-sans); color: var(--text-2); max-width: 30ch; }
.launch__rows { list-style: none; margin: 0; padding: var(--s-2) var(--s-6); border-radius: var(--r-4); background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; justify-content: center; }
.launch__rows li { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; padding: var(--s-4) 0; }
.launch__rows li + li { border-top: 1px solid var(--border); }
.launch__icos { display: flex; gap: 4px; }
.launch__icos img { width: 32px; height: 32px; border-radius: var(--r-2); }
.launch__name { font: 500 16px/1.4 var(--font-sans); }
.launch__pct { font: 700 24px/1 var(--font-sans); white-space: nowrap; }
@media (max-width: 720px) {
  .launch__main, .launch__rows { padding-left: var(--s-4); padding-right: var(--s-4); }
  .launch__rows li { grid-template-columns: 68px minmax(0, 1fr) auto; gap: var(--s-3); }
  .launch__name { font-size: 15px; }
  .launch__pct { font-size: 20px; }
}

/* Приложения для водителей: плитка = знак, имя, ссылки магазинов (синие, правило 2). */
.apps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-4); }
.app { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--s-4); row-gap: 6px; align-items: center; padding: var(--s-4); border-radius: var(--r-4); background: var(--surface); border: 1px solid var(--border); }
.app__ico { width: 48px; height: 48px; border-radius: var(--r-3); grid-row: 1 / span 2; }
.app__ico.ds-ico { width: 48px; height: 48px; }
.app__name { font: 600 16px/1.3 var(--font-sans); }
.app__links { display: flex; flex-wrap: wrap; gap: 4px var(--s-4); }
.app__links .lnk { font-size: 14px; }
/* Ссылки плиток без стрелок (владелец 12.10.2026: «рябит в глазах»). Без стрелки две ссылки влезают в строку
   узкой плитки — столбик на широком экране держит правило, на телефоне строкой, как было. */
@media (min-width: 721px) { .app__links { flex-direction: column; align-items: flex-start; } }

/* Витрина и роуминг: текст слева, живые снимки справа; на телефоне — снимки по два в ряд. */
.mode { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-8); align-items: start; }
.mode + .mode { margin-top: var(--s-9); padding-top: var(--s-9); border-top: 1px solid var(--border); }
@media (max-width: 920px) { .mode { grid-template-columns: 1fr; gap: var(--s-5); } .mode + .mode { margin-top: var(--s-7); padding-top: var(--s-7); } }
.mode__text h3 { font: 600 22px/1.3 var(--font-sans); margin: 0 0 var(--s-4); }
.mode__text p { margin: 0 0 var(--s-4); line-height: 1.6; color: var(--text-2); }
.mode__text p strong { color: var(--text); }
.mode__note { padding: var(--s-3) var(--s-4); border-left: 2px solid var(--brand-600); background: var(--surface-2); border-radius: 0 var(--r-2) var(--r-2) 0; }
.shots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.shot { margin: 0; }
.shot img { width: 100%; height: auto; aspect-ratio: 480 / 711; object-fit: cover; border-radius: var(--r-4); border: 1px solid var(--border); box-shadow: var(--sh-sm); background: var(--surface-2); }
.shot figcaption { margin-top: var(--s-3); font: 400 14px/1.45 var(--font-sans); color: var(--text-2); }
.shot figcaption strong { display: block; color: var(--text); font-weight: 600; }

/* Герой страницы: текст слева, справа — платформа в центре и приложения водителей вокруг неё
   (без линий-связей: правило 6 — схем со слипшимися линиями нет). На узком экране знаки скрыты,
   герой остаётся коротким. */
.phero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: center; }
.hero-apps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 88px); gap: var(--s-4); justify-content: center; }
.hero-apps li { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: var(--r-5); background: var(--navy-800); border: 1px solid var(--on-navy-border-strong); }
.hero-apps img, .hero-apps .ds-ico { width: 56px; height: 56px; border-radius: var(--r-3); }
.hero-apps .is-core { background: var(--surface); border-color: var(--brand-300); box-shadow: var(--sh-glow-brand); }
.hero-apps .is-core img { width: 72px; height: 72px; }
@media (max-width: 920px) { .phero__grid { grid-template-columns: 1fr; } .hero-apps { display: none; } }
@media (max-width: 720px) { .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); } }

/* Два способа подключиться: две равные карточки-контейнера, действие прижато к низу. */
.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
@media (max-width: 920px) { .offers { grid-template-columns: 1fr; } }
.offer { display: flex; flex-direction: column; padding: var(--s-7); border-radius: var(--r-4); background: var(--surface); border: 1px solid var(--border); }
@media (max-width: 720px) { .offer { padding: var(--s-5); } }
.offer__k { margin: 0 0 var(--s-2); font: 600 12px/1.3 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-700); }
.offer h3 { font: 700 24px/1.25 var(--font-sans); letter-spacing: -.01em; margin: 0 0 var(--s-3); }
.offer > p { margin: 0 0 var(--s-5); color: var(--text-2); line-height: 1.55; }
.offer .checks { margin-bottom: var(--s-6); }
.offer__go { margin-top: auto; }

/* Шаг «Подключиться» перед общей формой заявки: выбор способа, протокол, приложение. */
.connect { max-width: 760px; margin: 0 auto; display: grid; gap: var(--s-5); padding: var(--s-7); border-radius: var(--r-5); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--sh-sm); }
@media (max-width: 720px) { .connect { padding: var(--s-5); } }
.cta-final + .connect { margin-top: var(--s-7); }
.connect__group { margin: 0; padding: 0; border: 0; min-width: 0; }
.connect__group legend { padding: 0; margin: 0 0 var(--s-3); font: 600 14px/1.35 var(--font-sans); color: var(--text); }
.connect__extra { display: grid; gap: var(--s-5); }
.connect:has(input[name="topic"][value="platform"]:checked) .connect__extra { display: none; }
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
.choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) { .choices, .choices--3 { grid-template-columns: 1fr; } }
.choice { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--s-4) var(--s-4) var(--s-4) 48px; border: 1px solid var(--border-strong); border-radius: var(--r-3); cursor: pointer; transition: border-color .15s, background .15s; }
.choice:hover { background: var(--surface-2); }
.choice input { position: absolute; left: var(--s-4); top: calc(var(--s-4) + 2px); width: 18px; height: 18px; margin: 0; accent-color: var(--brand-600); }
.choice:has(input:checked) { border-color: var(--brand-600); background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand-600); }
.choice:has(input:focus-visible) { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.choice__t { font: 600 16px/1.35 var(--font-sans); color: var(--text); }
.choice__d { font: 400 14px/1.45 var(--font-sans); color: var(--text-2); }
.connect__send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); }
.connect__hint { margin: 0; font: 400 14px/1.45 var(--font-sans); color: var(--text-3); }
@media (max-width: 720px) { .connect__send .btn { width: 100%; } }

/* ==========================================================
   /business/fleet — пересборка (#866, строка 6 реестра; владелец 08.10.2026) — АДДИТИВНАЯ ДЕЛЬТА.
   Ни одно правило выше не переписано, цвета — только токены раздела 1 (инвариант № 4).
   ========================================================== */

/* ── Схема «Пополнение → получение услуги → закрывающие документы» (заголовок владельца): пять шагов
      цепочки сгруппированы по трём фазам заголовка. Стрелки — линейный значок ДС (svg, штрих 2 px) с
      воздухом по бокам, а не символ «→» впритык к плашкам; на телефоне цепочка встаёт столбиком и
      стрелки поворачиваются вниз (правило 6 тела #866: «самодельные схемы со слипшимися линиями —
      запрещены»). Плашка шага — общий `.flow__node`. ── */
.chain { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: var(--s-2); }
.chain__phase { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; flex: 1 1 0; }
.chain__phase + .chain__phase { flex-grow: 1.2; }
.chain__phase.chain__phase--wide { flex-grow: 3.4; }
.chain__k { font: 600 12px/1.3 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding-bottom: var(--s-2); border-bottom: 2px solid var(--border); }
.chain__nodes { display: flex; align-items: stretch; gap: var(--s-2); flex: 1; }
.chain__nodes .flow__node { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.chain__arrow { align-self: center; flex: none; width: 20px; height: 20px; color: var(--text-3); }
.chain__arrow svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Стрелка между фазами — тот же значок, рисуется перед первой плашкой следующей фазы. */
.chain__phase + .chain__phase .chain__nodes::before { content: ""; align-self: center; flex: none; width: 20px; height: 20px; background: var(--text-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m0 0-5-5m5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m0 0-5-5m5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 860px) {
  .chain, .chain__nodes { flex-direction: column; }
  .chain { gap: var(--s-5); }
  .chain__nodes { gap: var(--s-2); }
  .chain__arrow { transform: rotate(90deg); }
  /* Между фазами на телефоне стрелки нет: фазы разделяет подпись фазы над плашкой. */
  .chain__phase + .chain__phase .chain__nodes::before { display: none; }
}
/* Шаги 01–04 под схемой: полоска шага не касается рамки схемы (владелец 08.10.2026, скриншот
   `owner_batch6_fleet_steps.png`: «красные полоски слиплись с нижней рамкой плашек — раздвинуть»).
   Было: утилита `.mt-8` на `.steps` — но правило `.steps { margin: 0 }` стоит в файле НИЖЕ утилиты и при
   той же специфичности её перебивало, отступ был 0. Модификатор объявлен после `.steps` и выигрывает. */
.steps--after-flow { margin-top: var(--s-8); }

/* ── Выбор станций и таблица тарифа парка (`site-assets/fleet.js`). Поле населенного пункта и холст карты —
      общие `.mapui__field` / `.mapui__canvas` страницы /map; станции списка — общий `.choice` с флажком. ── */
.fpick { margin-top: var(--s-7); }
.fpick[hidden], .fpick [hidden] { display: none; }
.fpick__title { font: 600 22px/1.3 var(--font-sans); margin: 0 0 var(--s-3); }
.fpick__title--table { margin-top: var(--s-7); }
.fpick__lead { margin: 0 0 var(--s-5); max-width: 68ch; color: var(--text-2); line-height: 1.55; }
.fpick__city { max-width: 360px; }
.fpick__map { height: 480px; }
@media (max-width: 720px) { .fpick__map { height: 380px; } }
.fpick.is-nomap .fpick__map { height: 96px; }
.fpick__hint { margin: var(--s-3) 0 0; font: 400 14px/1.45 var(--font-sans); color: var(--text-3); }
.fpick__list { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-3); }
.fpick__item { height: 100%; }
.fpick__empty { margin: 0; color: var(--text-3); }
.fpick__send { margin-top: var(--s-6); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ftab__scroll { overflow-x: auto; }
.ftab { border-collapse: collapse; width: 100%; font-size: 15px; }
.ftab thead th { text-align: left; font: 600 11px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 10px 12px; border-bottom: 1px solid var(--border-strong); }
.ftab thead th:nth-child(3), .ftab thead th:nth-child(4) { text-align: right; }
.ftab th[scope="row"], .ftab td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: top; text-align: left; }
.ftab th[scope="row"] { width: 36%; font-weight: 600; }
.ftab__n { display: block; }
.ftab__a { display: block; margin-top: 2px; font: 400 13px/1.45 var(--font-sans); color: var(--text-3); }
.ftab__t { color: var(--text-2); }
.ftab td.ftab__p { text-align: right; white-space: nowrap; }
.ftab__vs, .ftab__v { display: block; }
.ftab__v + .ftab__v { margin-top: 6px; }
.ftab__v b { font: 600 16px/1.35 var(--font-sans); font-variant-numeric: tabular-nums; }
.ftab [data-fleet] b { color: var(--brand-700); }
.ftab__h { display: block; font: 400 12px/1.4 var(--font-sans); color: var(--text-3); }
.ftab__x { width: 48px; text-align: right; }
.ftab__rm { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--text-3); }
.ftab__rm:hover { background: var(--surface-3); color: var(--text); }
.ftab__rm:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.ftab__rm svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* Телефон: строка таблицы — карточка «станция сверху, пары подпись → цена ниже», без горизонтальной прокрутки. */
@media (max-width: 720px) {
  .ftab, .ftab tbody, .ftab tr, .ftab th[scope="row"], .ftab td { display: block; }
  .ftab thead { display: none; }
  .ftab tr { position: relative; }
  .ftab tr.is-first { border-top: 1px solid var(--border); padding-top: var(--s-2); }
  .ftab th[scope="row"] { width: auto; padding: var(--s-2) 44px var(--s-1) 0; border-bottom: 0; }
  .ftab td { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-1) 0; border-bottom: 0; }
  .ftab td::before { content: attr(data-label); font: 400 13px/1.45 var(--font-sans); color: var(--text-3); }
  .ftab td.ftab__x::before { content: none; }
  .ftab__x { position: absolute; top: var(--s-1); right: 0; width: auto; }
  .ftab td.ftab__p { white-space: normal; }
  .ftab tr:last-child { padding-bottom: var(--s-2); border-bottom: 1px solid var(--border); }
}

/* ==========================================================
   /map и /start — пачка 7 вычитки владельца (#866, 09.10.2026; якорь приёмки #issuecomment-6073500047).
   АДДИТИВНАЯ ДЕЛЬТА В КОНЦЕ ФАЙЛА: ни один раздел выше не переписан (ветка строится поверх `866-fleet`,
   перенос на main — построчный). Цвета — только токены раздела 1.
   ========================================================== */

/* «Найти станцию на карте» ведёт на фильтры (п. 1 владельца: «чтобы область фильтров тоже попадала
   в экран»): отступ под липкую шапку (67 px десктоп, 62 px телефон) — фильтры встают под неё целиком,
   холст карты идёт сразу за ними. Тот же отступ работает при клике по строке таблицы пунктов. */
#map-filters { scroll-margin-top: 84px; }

/* Карточка локации под картой: тариф короткой формой и «Подробнее →» (пп. 3 и 8 якоря). Ссылка — соседка
   кнопки карточки (ссылка внутри `<button>` невалидна), поэтому стоит абсолютом в нижнем поле карточки;
   карточки ряда — одной высоты, ссылка во всём ряду на одном уровне. */
.mapui__list > li { position: relative; display: flex; }
.mapui__list > li > .mitem { flex: 1 1 auto; padding-bottom: calc(var(--s-5) + 30px); }
.mitem__p { font: 600 14px/1.45 var(--font-sans); color: var(--text); }
.mitem__more { position: absolute; left: var(--s-5); bottom: var(--s-4); font-size: 14px; }

/* Таблица «Сеть по населенным пунктам»: первые строки + «Показать ещё» (п. 6 якоря; строки скрывает
   `map.js::citiesTableMore`, без JS видны все). */
[data-cities-table] tbody tr[hidden] { display: none; }
.tol-net__more { display: flex; justify-content: center; margin: var(--s-4) 0 0; }
.tol-net__more[hidden] { display: none; }

/* Финальный блок (п. 9): на десктопе обе кнопки в ряд — контейнер шире абзаца, абзац остаётся 62ch. */
[data-page="map"] .cta-final { max-width: 820px; }
[data-page="map"] .cta-final > p:not(.cta-final__help) { max-width: 62ch; margin-left: auto; margin-right: auto; }
[data-page="map"] .cta-final__row { flex-wrap: nowrap; }

@media (max-width: 640px) {
  /* Герой и финал (пп. 1, 9): столбиком, во всю ширину колонки (по центру), каждая кнопка — в одну
     строку; размер текста ужимается вместе с экраном, чтобы и на 320 px строка не рвалась. */
  [data-page="map"] .phero__cta,
  [data-page="map"] .cta-final__row { flex-direction: column; align-items: stretch; }
  [data-page="map"] .phero__cta .btn,
  [data-page="map"] .cta-final__row .btn { white-space: nowrap; padding: 16px 12px; font-size: min(16px, 4.1vw); }

  /* Заголовок блока карты (п. 2): одна строка заголовка и одна — подзаголовка. */
  [data-page="map"] #map .sec__head { margin-bottom: var(--s-5); }
  [data-page="map"] #map .sec__head p { font-size: 16px; }

  /* Фильтры плотнее: пункт во всю ширину, остальные по два в ряд — фильтры и верх карты на одном экране. */
  [data-page="map"] .mapui__filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  [data-page="map"] .mapui__field:first-child { grid-column: 1 / -1; }
  [data-page="map"] .mapui__field select { padding: 9px 10px; font-size: 14px; }
  [data-page="map"] .mapui__field .btn { width: 100%; padding: 10px 8px; }

  /* Итоговые числа сети (п. 7): 2 колонки × 2 ряда. Пятое число — «станций в планах» — на телефоне не
     повторяется: то же число из того же источника стоит в герое этой страницы («станций в планах сети»). */
  #cities .tol-net__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  #cities .tol-net__row > li[data-modes] { display: none; }

  /* Таблица пунктов влезает в 390 px без обрезки справа (п. 6): поля уже, шапка без капители. */
  #cities .tol-net { padding: var(--s-4); }
  #cities .tol-net table { font-size: 13px; }
  #cities .tol-net th, #cities .tol-net td { padding: 7px 4px; }
  #cities .tol-net th[scope="col"] { letter-spacing: 0; text-transform: none; font-size: 12px; }
  #cities .tol-net caption { padding: 0 4px var(--s-3); }
}

/* ==========================================================
   Знаки приложений на тёмных поверхностях (сетка героя `/roaming`, оглавление героя `/start`) — БЕЗ кольца.
   Пачка 8 (#866) обводила их светлым кольцом `drop-shadow`; владелец 09.10.2026: «Светлые рамки вокруг иконок
   кажутся лишними», у Kaspi кольцо легло и по внутреннему кругу — «мутное изображение». Кольцо снято:
   знак стоит на поверхности своим файлом, как на светлых страницах. Сторож — tests/test_866_site_icons_fix.py.
   ==========================================================*/

/* ── /map, телефон: плашка локации (доводка пачки 8; владелец 09.10.2026: «В плашке локации не влезает цена
      (тариф) - придумать ещё короче»). Ширину плашки задаёт Google (окно карты минус 144 px: 214 px на 390,
      184 px на 360), высоту — тоже он (322 px при холсте 480). Тариф «день 80 · ночь 70 ₸/кВт·ч (ночь
      22:00–07:00)» в правой колонке ломался на 7 строк и выталкивал кнопки за край. Здесь: строка тарифа — во
      всю ширину плашки и без подписи (₸/кВт·ч говорит сам за себя), ≤ 2 строк на 360–390 px; кнопки — в одну
      строку; шрифт и зазоры плотнее — обе кнопки и «Подробнее →» видны без прокрутки плашки. Текст тарифа тот
      же (`site_render.tariff_short_text` = `map.js::tariffShort`); десктоп не тронут.
      «Подробнее →» (владелец 09.10.2026: «кнопка "Подробнее" слишком прижата к "Старт без авторизации" - надо
      добавить отступ»): над ссылкой — тот же `--s-2`, что на десктопе (правило `.mpop__more` выше; телефонный
      `margin-top: 0` снят), не меньше зазора между кнопками. Высоту плашки Google не даёт (на 360 у
      «Халык — Аль-Фараби 34Б» запаса не было), поэтому плотнее статус, строки и кнопки: статус и строки на `--s-1`,
      вертикальное поле кнопок 7 → 5 px. Сторож — tests/test_866_site_map_phone_b11.py. ── */
@media (max-width: 640px) {
  .mpop { font-size: 12px; line-height: 1.35; }
  .mpop__t { font-size: 14px; line-height: 1.25; }
  .mpop__a { font-size: 12px; }
  .mpop .mstat { margin-top: var(--s-1); }
  .mpop .spec { margin-top: var(--s-1); line-height: 1.35; }
  .mpop .spec dt[data-k="tariff"] { display: none; }
  .mpop .spec dd[data-k="tariff"] { grid-column: 1 / -1; text-align: left; }
  .mpop__act { margin-top: var(--s-2); }
  .mpop__act > .btn { padding: 5px 6px; white-space: nowrap; }
}

/* ==========================================================
   Страница станции `/map/<id>` (#866, TA-0327 части 1–2; пачка 9 владельца 09.10.2026).
   Свой раздел в конце файла: общие классы `/map` (плашка, таблица, список) здесь не трогаются.
   Состав и тексты — TA-0327 `_artifacts/ta_0327_stranica-stancii-map-id.html` §1.1–1.6; «вид пикселей не
   нормативен — нормативны состав и порядок».
   ========================================================== */
/* Цвета ТИПОВ разъёма — секторы значка страницы станции (`TolSiteMapPins.sectorPinSvg`). Алиасы TA-0327 §1.2:
   GB/T DC — синий бренда, GB/T AC — бирюзовый, CCS2 — тёмно-синий, редкие (Type 2 и прочие) — светло-синий.
   Оранжевый не используется: он только для кнопки действия. */
:root {
  --map-type-gbt-dc: var(--brand-600);
  --map-type-gbt-ac: var(--info-500);
  --map-type-ccs2: var(--navy-700);
  --map-type-other: var(--brand-300);
}

/* ── Заголовок: название, адрес, сводка «мощность · тип — N», тариф, «сейчас свободно N из M». ── */
.stpage__hero h1 { max-width: 24ch; }
.stpage__hero .phero__lead { margin-bottom: var(--s-5); }
.stsum { display: grid; gap: var(--s-2); margin: 0 0 var(--s-4); }
.stsum__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s-2); font: 500 17px/1.5 var(--font-sans); color: var(--on-navy); }
.stsum__k { color: var(--on-navy-3); font-weight: 400; }
.stsum__v { font-weight: 700; }
.stsum__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; row-gap: 4px; }
.stsum__list li { white-space: nowrap; }
.stsum__list li + li::before { content: "·"; margin: 0 var(--s-2); color: var(--on-navy-3); }
.stpage__hero .phero__live { margin: 0; color: var(--on-navy-2); font-size: 16px; }

/* ── Карта площадки: кадр одной локации — ниже, чем холст хаба. Под картой — строка-легенда значка, когда
      коннекторов больше четырёх и выносок у секторов нет (владелец 10.10.2026). ── */
.mapui__canvas[data-loc-map] { height: 420px; }
/* Значок станции с выносками шире своего круга: общее правило `img { max-width: 100% }` не должно его ужимать. */
[data-loc-map] .mapui__gmap img { max-width: none; }
.stmap__legend { margin: var(--s-3) 0 0; font: 400 14px/1.45 var(--font-sans); color: var(--text-3); }

/* ── Расстановка: станции слева направо, силуэт напольной DC выше настенной AC, столбики коннекторов.
      #866 ч. 3 (владелец 09.10.2026): силуэты — по ВЕРХНЕМУ краю («AC зарядки обычно висят на стенах»),
      наполнение — сразу под строкой мощности. Цена и кнопки на одной линии во всех столбиках: всё выше цены
      имеет ФИКСИРОВАННУЮ высоту (код — одна строка, знак 56 px, тип и статус — одна строка, статус — зона 22 px
      с nowrap), поэтому высота статуса цену больше не двигает. ── */
.stl { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-3); margin: 0 0 var(--s-4); }
.stl__st { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-3) 10px var(--s-4); border: 2px solid var(--border-strong); border-radius: var(--r-4); background: var(--surface); box-shadow: var(--sh-xs); }
.stl__st--dc { min-height: 360px; }
.stl__st--ac { min-height: 300px; }
.stl__p { font: 600 13px/1.3 var(--font-sans); color: var(--text-3); white-space: nowrap; }
.stl__cols { display: flex; gap: var(--s-2); }
.stl__cn { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 98px; text-align: center; }
.stl__code { font: 700 18px/1.2 var(--font-sans); color: var(--text); white-space: nowrap; }
.stl__img { display: block; width: 56px; height: 56px; object-fit: contain; border-radius: var(--r-2); background: var(--surface-3); }
.stl__t { font: 400 12px/1.3 var(--font-sans); color: var(--text-3); white-space: nowrap; }
.stl__s { flex: 0 0 22px; height: 22px; font: 600 12px/22px var(--font-sans); padding: 0 8px; white-space: nowrap; border-radius: var(--r-pill); color: var(--on-brand); background: var(--map-offline); }
.stl__s:empty { visibility: hidden; }
.stl__s[data-occ="free"] { background: var(--map-free); }
.stl__s[data-occ="busy"] { background: var(--map-busy); }
.stl__s[data-occ="fault"] { background: var(--map-fault); }
.stl__s[data-occ="offline"] { background: var(--map-offline); }
/* Отступы статус → цена и цена → кнопки (владелец 09.10.2026: «сделать отступ до цены и от цены до кнопок»):
   поля сверху у цены и у кнопок, а не общий `gap` — выше цены всё по-прежнему фиксированной высоты, и цена с
   кнопками стоят на одной линии во всех столбиках. */
.stl__pr { margin-top: var(--s-3); font: 600 13px/1.35 var(--font-sans); color: var(--text); }
.stl__b { display: flex; gap: var(--s-2); justify-content: center; margin-top: var(--s-3); }
/* «Зарядиться» (#866, пачка 15 владельца: «Кнопку без фона, чтобы не пестрила»): контурная, без заливки, цвет текста
   страницы; по нажатию — выбор «Kaspi.kz» / «Telegram» / «Личный кабинет» списком под кнопкой поверх соседей.
   `<details>` — открывается и без JS; закрытие вне / Esc и сдвиг от края экрана — `station-charge.js` (`--chg-shift`). */
.chg { position: relative; }
.chg__btn { display: inline-flex; align-items: center; gap: 3px; height: 36px; padding: 0 8px; list-style: none; cursor: pointer; user-select: none; -webkit-user-select: none; white-space: nowrap; font: 600 12px/1 var(--font-sans); color: var(--text); background: transparent; border: 1px solid var(--border-strong); border-radius: var(--r-pill); transition: border-color .15s, color .15s; }
.chg__btn::-webkit-details-marker { display: none; }
.chg__btn::marker { content: ""; }
.chg__btn svg { flex: none; width: 10px; height: 10px; transition: transform .15s ease; }
.chg__btn:hover { border-color: var(--brand-600); color: var(--brand-600); }
.chg__btn:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.chg[open] > .chg__btn { border-color: var(--brand-600); color: var(--brand-600); }
.chg[open] > .chg__btn svg { transform: rotate(180deg); }
.chg__menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 50%; transform: translateX(calc(-50% + var(--chg-shift, 0px))); display: flex; flex-direction: column; min-width: 184px; padding: 6px; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-3); box-shadow: var(--sh-md); }
.stl__go { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-2); font: 500 15px/1.2 var(--font-sans); color: var(--text); text-decoration: none; white-space: nowrap; }
.stl__go img, .stl__go svg { flex: none; display: block; width: 20px; height: 20px; border-radius: 5px; }
.stl__go--lc svg { color: var(--text-2); }
.stl__go:hover { background: var(--surface-3); }
.stl__go:focus-visible { outline: 2px solid var(--brand-600); outline-offset: -2px; }
.stl + .src { display: block; }

/* ── Снимки площадки (#866, TA-0327 §1.3): первый крупно, остальные листаются — стрелки, ←/→, свайп; счётчик
      «1 / N». Кадр фиксированной высоты, снимок вписан целиком (`contain`): у площадки и вертикальные, и
      горизонтальные снимки, и листание не должно двигать страницу. Полосу включает `place-photos.js`. ── */
.phs { outline: none; }
.phs:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 4px; border-radius: var(--r-4); }
.phs__stage { height: 560px; border: 1px solid var(--border); border-radius: var(--r-4); background: var(--surface-3); overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.phs__slide { margin: 0; height: 100%; }
.phs__slide[hidden] { display: none; }
.phs__slide img { display: block; width: 100%; height: 100%; object-fit: contain; }
.phs__bar { display: flex; align-items: center; justify-content: center; gap: var(--s-4); margin-top: var(--s-4); }
.phs__bar[hidden] { display: none; }
.phs__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--text); cursor: pointer; transition: border-color .15s, color .15s; }
.phs__btn svg { width: 20px; height: 20px; }
.phs__btn:hover { border-color: var(--brand-600); color: var(--brand-600); }
.phs__btn:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.phs__count { min-width: 5ch; text-align: center; font: 600 15px/1 var(--font-sans); color: var(--text-2); }
/* Видео площадки — последний слайд (владелец 10.10.2026): заставка-кадр и «▶» по центру; играет только по нажатию,
   тогда кнопка уходит и появляется штатная панель плеера (`place-photos.js`). */
.phs__slide--video { position: relative; background: var(--navy-900); }
.phs__slide video { display: block; width: 100%; height: 100%; object-fit: contain; }
.phs__play { position: absolute; top: 50%; left: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 0 0 4px; border: 0; border-radius: 50%; color: var(--navy-900); background: rgba(255, 255, 255, .92); box-shadow: var(--sh-md); cursor: pointer; transition: transform .12s ease; }
.phs__play:hover { transform: scale(1.06); }
.phs__play:focus-visible { outline: 3px solid var(--brand-600); outline-offset: 3px; }
.phs__play[hidden] { display: none; }

/* ── Внизу: две кнопки в ряд и синяя ссылка под ними. ── */
.stpage__act .cta-final__row { margin-bottom: var(--s-4); }
.stpage__act p { margin: 0; font-size: 16px; }

/* ── Телефон: каждая станция — карточка во всю ширину, её коннекторы рядом внутри (TA-0327 §1.4 п. 5),
      сводка — по строке на пункт (§1.1 п. 5). ── */
@media (max-width: 640px) {
  .stsum__row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .stsum__list { flex-direction: column; }
  .stsum__list li + li::before { content: none; }
  .mapui__canvas[data-loc-map] { height: 320px; }
  .phs__stage { height: 440px; }
  /* Станция с двумя коннекторами — во всю ширину; с ОДНИМ — по две в ряд (владелец 09.10.2026). Три в ряд не
     влезают на 360: станция 96 px (внутри 68), а две кнопки 40 + 8 + 40 = 88 px и «Идёт зарядка» 96 px выходят за
     силуэт (замер Chromium + Onest, сдача #866 ч. 3; на 390 три — впритык, 106 px). Порядок site_order — flex-wrap. */
  .stl { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .stl__st { flex: 1 1 100%; min-width: 0; min-height: 0; padding: var(--s-3) var(--s-3) var(--s-4); }
  .stl__st--one { flex: 1 1 calc((100% - var(--s-3)) / 2); max-width: calc((100% - var(--s-3)) / 2); }
  .stl__st--dc { min-height: 0; }
  .stl__st--ac { min-height: 0; }
  .stl__p { margin-bottom: 0; }
  .stl__cols { width: 100%; justify-content: space-around; }
  .stl__cn { width: auto; flex: 1 1 0; max-width: 160px; }
}

/* ═══ «Как начать зарядку» `/start`, пачка 18 (#866, владелец 10.10.2026) — АДДИТИВНАЯ ДЕЛЬТА в конце файла:
       выше ничего не переписано (параллельный пакет страницы станции правит свои разделы). ═══ */
/* Подзаголовки внутри раздела способа: «Правила возврата», «Порядок зарядки без регистрации». */
.way-sec .way-sec__h3 { font: 600 19px/1.3 var(--font-sans); color: var(--text); margin: var(--s-5) 0 var(--s-3); }
.way-sec .steps-n + .way-sec__h3 { margin-top: 0; }
.way-sec .way-note strong { color: var(--text); font-weight: 600; }
/* Колонка текста раздела не растягивается по самой широкой ленте внутри (лента снимков на телефоне). */
.way-sec > div { min-width: 0; }
/* Магазины приложений Яндекса — ОДНА сетка на три строки: «название | App Store | · | Google Play», ссылки
   друг под другом при любой длине названия (снимок владельца `owner_b18_yandex_links_align.png`). */
.stores { display: grid; grid-template-columns: minmax(0, max-content) max-content max-content max-content; column-gap: var(--s-3); row-gap: var(--s-4); align-items: baseline; justify-content: start; margin: 0 0 var(--s-4); }
.stores__name { color: var(--text-2); font-size: 17px; line-height: 1.35; }
.stores__dot { color: var(--text-3); }
/* Лента снимков — ОДИН компонент для всех способов `/start` (владелец 10.10.2026 «да»; поведение —
   `site-assets/reel.js`). Десктоп: видно 3 кадра, стрелки; телефон (≤ 640 px): 1 кадр, свайп, счётчик «N / M».
   Число кадров любое: ширину кадра задаёт доля ленты, а не их число. Без JS (нет класса `js` у корня) — сетка:
   по три в ряд на десктопе, столбиком на телефоне, полоса стрелок спрятана. Рамка кадра одинакова в ленте —
   по самому вытянутому снимку (`--reel-ar` ставит скрипт), снимок вписан целиком по верхнему краю. */
.reel { margin: 0 0 var(--s-5); }
.reel__track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.reel__item { min-width: 0; }
.reel__item figure { margin: 0; }
.reel__media { display: block; border: 1px solid var(--border); border-radius: var(--r-3); overflow: hidden; background: var(--surface-2); }
.reel__media:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.reel__media img { display: block; width: 100%; height: auto; }
.reel__cap { margin-top: var(--s-2); font: 500 14px/1.4 var(--font-sans); color: var(--text-2); }
.js .reel__track { display: flex; position: relative; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.js .reel__track::-webkit-scrollbar { display: none; }
.js .reel__track:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 4px; border-radius: var(--r-3); }
.js .reel__item { flex: 0 0 calc((100% - 2 * var(--s-4)) / 3); scroll-snap-align: start; }
.js .reel__media { aspect-ratio: var(--reel-ar, auto); }
.js .reel__media img { height: 100%; object-fit: contain; object-position: center top; }
.reel__bar { display: flex; align-items: center; justify-content: center; gap: var(--s-4); margin-top: var(--s-4); }
.reel__bar[hidden] { display: none; }
.reel__btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--text); cursor: pointer; transition: border-color .15s, color .15s; }
.reel__btn svg { width: 20px; height: 20px; }
.reel__btn:hover:not(:disabled) { border-color: var(--brand-600); color: var(--brand-600); }
.reel__btn:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.reel__btn:disabled { opacity: .4; cursor: default; }
.reel__count { min-width: 7ch; text-align: center; font: 600 15px/1 var(--font-sans); color: var(--text-2); }
@media (max-width: 640px) {
  .stores { column-gap: var(--s-2); }
  .stores__name { font-size: 16px; }
  .reel__track { grid-template-columns: minmax(0, 1fr); }
  .js .reel__item { flex-basis: 100%; }
}
/* ═══ Страница помощи `/help`, пересборка по пачке 20 (#866, владелец 10.10.2026) — АДДИТИВНАЯ ДЕЛЬТА в конце файла:
       выше ничего не переписано (параллельно правится каркас «Водителям»). Доноры — общие блоки: `.calc` (/roi),
       `.apps` (/roaming), `.cards`, `.toc` и `.way-sec` с правилами возврата (/start). ═══ */
/* Блок-случай: заголовок, абзац, содержимое. Колонка текста не шире 860 px, как раздел способа на /start. */
.hcase { max-width: 860px; }
.hcase + .hcase { margin-top: var(--s-9); padding-top: var(--s-9); border-top: 1px solid var(--border); }
.hcase > h3 { font: 600 22px/1.3 var(--font-sans); color: var(--text); margin: 0 0 var(--s-4); }
.hcase > p { margin: 0 0 var(--s-4); color: var(--text-2); font-size: 17px; line-height: 1.6; }
.hcase .apps { margin-top: var(--s-5); }
.hcase .calc { margin-top: var(--s-2); }
.hcase .calc__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hcase__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hcase + .hcase__cards { margin-top: var(--s-9); }
/* Правила возврата — та же область, что на /start; там они внутри раздела способа (сетка «знак | текст»),
   здесь без колонки знака: модификатор снимает только сетку, оформление абзацев остаётся общим. */
.way-sec.way-sec--flat { display: block; max-width: none; }
.way-sec--flat .way-sec__h3 { margin-top: 0; }
/* Калькулятор: ползунки внутри общего поля `.calc__field` — без рамки и отступов текстового поля. */
.calc__field input[type="range"] { padding: 0; border: 0; background: transparent; accent-color: var(--brand-600); height: 28px; }
.calc__field input[type="range"]:focus { outline-offset: 4px; }
.calc__k output { font-variant-numeric: tabular-nums; }
.calc__hint a { color: var(--link); }
/* «Не вытаскивается коннектор»: список вариантов слева, видео справа; на телефоне — друг под другом. */
.hcase__split { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--s-7); align-items: start; }
.hcon { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-5); }
.hcon__i { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-4); align-items: start; }
.hcon__i img { width: 48px; height: 48px; display: block; }
.hcon__i strong { display: block; font: 600 17px/1.35 var(--font-sans); color: var(--text); margin-bottom: 4px; }
.hcon__i span { display: block; color: var(--text-2); font-size: 16px; line-height: 1.55; }
/* Видео владельца (свой файл, кадр 464×848): заставка — кадр видео (`poster`), плеер браузера, по нажатию. */
.hvid { width: 100%; max-width: 280px; margin: 0; }
.hvid__frame { position: relative; border-radius: var(--r-4); overflow: hidden; background: var(--navy-900); }
.hvid__v { display: block; width: 100%; height: auto; aspect-ratio: 464 / 848; object-fit: cover; }
.hvid__play { position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; display: inline-flex; align-items: center; justify-content: center; padding: 0 0 0 3px; border: 0; border-radius: var(--r-pill); background: var(--accent-500); color: var(--on-accent); box-shadow: var(--sh-md); cursor: pointer; transition: transform .12s; }
.hvid__play svg { width: 28px; height: 28px; }
.hvid__play:hover { transform: scale(1.06); }
.hvid__play:focus-visible { outline: 3px solid var(--brand-300); outline-offset: 3px; }
.hvid__play[hidden] { display: none; }
.hvid__cap { margin: var(--s-3) 0 0; font: 600 15px/1.4 var(--font-sans); color: var(--text-2); text-align: center; }
@media (max-width: 720px) {
  .hcase__split { grid-template-columns: 1fr; gap: var(--s-6); }
  .hcase .calc__grid { grid-template-columns: 1fr; }
  .hvid { max-width: 260px; }
  .hcase > h3 { font-size: 20px; }
  [data-page="help"] .btn { white-space: normal; max-width: 100%; text-align: center; }
}

/* ═══ Полоса «Бизнес и инвесторы», наряд 1 (#866, владелец 10.10.2026) — АДДИТИВНАЯ ДЕЛЬТА в конце файла:
       выше ничего не переписано (полоса каркаса дописывает свой раздел сюда же). ═══ */
/* Карточка «Бизнес на зарядных станциях» главной: последнее слово заголовка строки и стрелка — одно целое,
   на 360 px стрелка не уходит одна на новую строку. */
.lnk-list__nw { white-space: nowrap; }
/* `/getkaspiqr`, раздел «Что ещё получает станция»: три карточки одного вида, ссылка — внизу карточки, у
   соседних карточек на одной линии независимо от длины текста (правило вёрстки 4). */
.kq-more .card { display: flex; flex-direction: column; gap: var(--s-3); }
.kq-more .card h3, .kq-more .card p { margin: 0; }
.kq-more .card .lnk { margin-top: auto; padding-top: var(--s-2); }
/* Знаки приложений строкой: файлы `img/apps/*` без обводки и теней (правило вёрстки 5), переносятся рядами. */
.kq-apps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.kq-apps img { display: block; width: 40px; height: 40px; border-radius: var(--r-2); }
/* 360 px: ряд знаков в карточке — 246 px (замер Chromium); шесть по 40 px с зазором 8 (280 px) не входили, последний
   уходил один на вторую строку. 36 px с зазором 4 — 236 px, ряд один; поля карточки — как у соседних. */
@media (max-width: 400px) { .kq-apps { gap: var(--s-1); } .kq-apps img { width: 36px; height: 36px; } }
/* Главная: четыре карточки аудиторий (добавка к наряду 1 — «Автопаркам») — сеткой 2×2 на широком экране, а не
   «три в ряд + одна» и не четыре узких столбца (в 4 в ряд на 1440 у карточки ~200 px строки — заголовки рвутся
   на три строки). Правила `.forks` выше (3 в ряд с 1024 px, третья во всю ширину на 721–1023 px) не переписаны,
   модификатор `.forks--4` их перекрывает. Телефон — столбиком, как раньше. */
@media (min-width: 721px) {
  .forks.forks--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .forks--4 .fork:nth-child(3) { grid-column: auto; }
}

/* ═══ «Автоматизация учёта автопарка» `/fleet-automation` (#866, полоса «Бизнес и инвесторы», наряд 2, владелец
       10.10.2026) — АДДИТИВНАЯ ДЕЛЬТА в конце файла: выше ничего не переписано. Карточки задач — `.cards/.card`,
       шаги — `.steps`, призыв — `.cta-final`; здесь только заголовки групп и блок «Пример отчёта». ═══ */
/* Группа задач: «Для любого парка» / «Для электромобилей». */
.fa-group { margin: 0 0 var(--s-5); }
.fa-group--next { margin-top: var(--s-9); }
/* Вторая строка карточки — «У вас появляется: …», текстом основного тона. */
.card .fa-get { color: var(--text); }
/* Шесть задач «для любого парка» — 3 × 2 на десктопе, а не 4 + 2 с дырой. */
@media (min-width: 921px) { .cards.fa-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card .fa-get strong { font-weight: 600; }
/* Пример отчёта: панель с видимой меткой «Пример», плитки чисел (телефон — 2×2) и полосы ёмкости. */
.fa-rep { padding: var(--s-7); border-radius: var(--r-5); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--sh-sm); }
.fa-rep__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin: 0 0 var(--s-5); }
.fa-rep__tag { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--text-2); font: 600 12px/1.3 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; }
.fa-rep__title { margin: 0; font: 600 20px/1.3 var(--font-sans); color: var(--text); }
.fa-rep__title--chart { margin-top: var(--s-7); }
.fa-rep__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.fa-rep__tile { padding: var(--s-5); border-radius: var(--r-3); background: var(--surface-2); }
.fa-rep__v { display: block; font: 700 clamp(22px, 2.4vw, 30px)/1.1 var(--font-sans); letter-spacing: -.015em; color: var(--text); white-space: nowrap; }
.fa-rep__l { display: block; margin-top: var(--s-2); font: 400 14px/1.45 var(--font-sans); color: var(--text-2); }
.fa-rep__note { margin: var(--s-2) 0 var(--s-4); color: var(--text-2); font-size: 15px; line-height: 1.55; max-width: 68ch; }
.fa-bars { list-style: none; margin: 0; padding: 0; }
.fa-bars li { display: grid; grid-template-columns: 88px minmax(0, 1fr) 76px; gap: var(--s-4); align-items: center; padding: var(--s-3) 0; }
.fa-bars li + li { border-top: 1px solid var(--border); }
.fa-bars__k { font: 500 15px/1.3 var(--font-sans); color: var(--text-2); white-space: nowrap; }
.fa-bars__track { display: block; height: 10px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.fa-bars__track svg { display: block; width: 100%; height: 100%; }
.fa-bars__bar { fill: var(--brand-600); }
.fa-bars__v { font: 600 16px/1 var(--font-sans); color: var(--text); text-align: right; white-space: nowrap; }
.fa-bars .is-flag .fa-bars__bar, .fa-rep__dot { fill: var(--warning-500); background: var(--warning-500); }
.fa-bars .is-flag .fa-bars__v { color: var(--warning-700); }
.fa-rep__legend { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-4) 0 0; font: 400 14px/1.4 var(--font-sans); color: var(--text-2); }
.fa-rep__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; }
@media (max-width: 920px) {
  .fa-rep__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .fa-rep { padding: var(--s-5) var(--s-4); }
  .fa-group--next { margin-top: var(--s-8); }
  .fa-rep__tiles { gap: var(--s-3); }
  .fa-rep__tile { padding: var(--s-4); }
  .fa-bars li { grid-template-columns: 72px minmax(0, 1fr) 64px; gap: var(--s-2); }
  .fa-bars__k { font-size: 14px; }
  .fa-bars__v { font-size: 15px; }
}

/* ==========================================================
   /roi — калькулятор окупаемости, редакция #874 (TA-0329 § 5). АДДИТИВНЫЙ раздел: правила выше
   не переписаны (классы #655 `.calc__*` переиспользованы как донор), все цвета — токены ДС.
   Ввод → сводка «Ваши вводные» → одна оранжевая кнопка; окно регистрации — модалка формы
   заявки (`.lead__*`) со своим содержимым.
   ========================================================== */
/* Заголовок первого экрана — 1–2 строки на 390 и 360 (правило сайта § 3.3). */
.roi-hero h1 { font-size: clamp(26px, 4.2vw, 52px); max-width: 24ch; }
@media (max-width: 380px) { .roi-hero h1 { font-size: 22px; } }
.roi-hero .phero__lead { margin-bottom: 0; }

/* Четыре поля в один ряд, на телефоне — столбиком (TA § 5.2). */
.roi-form__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); align-items: start; }
.roi-form__city { grid-column: 1 / -1; max-width: 420px; }
/* `hidden` у поля и у строк окна регистрации сильнее `display` их классов (`.calc__field` — flex). */
.roi-form__city[hidden], .roi-reg [data-roi-channel][hidden] { display: none; }
.roi-form__nojs { margin: var(--s-5) 0 0; }
@media (max-width: 1060px) { .roi-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .roi-form__grid { grid-template-columns: 1fr; gap: var(--s-4); } .roi-form__city { max-width: none; } }

/* Подобранные варианты — в блоке ввода под горизонтальной чертой (ч. 3, пачка 2 п. 10: блока «Ваши
   вводные» больше нет). */
.roi-out { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--border); }
.roi-sum__vars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.roi-sum__var { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--s-2) var(--s-4); align-items: baseline; }
.roi-sum__vk { font: 600 13px/1.4 var(--font-sans); color: var(--text-3); }
.roi-sum__vt { font: 500 16px/1.45 var(--font-sans); color: var(--text); overflow-wrap: anywhere; }
.roi-sum__vp { font: 600 16px/1.45 var(--font-sans); color: var(--text); white-space: nowrap; text-align: right; }
.roi-sum__note { margin: var(--s-3) 0 0; font: 400 13px/1.45 var(--font-sans); color: var(--text-3); }
.roi-sum__empty { margin: 0; color: var(--text-2); }
@media (max-width: 560px) {
  .roi-sum__var { grid-template-columns: 1fr; gap: 2px; }
  .roi-sum__vp { text-align: left; }
}

/* «Данные, на которых считаем»: число зарядок — первым; на телефоне — во всю строку, остальное 2 × 2. */
@media (max-width: 560px) {
  .roi-net .tol-net__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  .roi-net .roi-net__sessions { grid-column: 1 / -1; }
}
.roi-net .roi-net__sessions[hidden] { display: none; }

/* Единственная оранжевая кнопка экрана и пояснение под ней (пачка п. 20, дословно). */
.roi-cta { margin-top: var(--s-6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.roi-cta__note { margin: 0; max-width: 60ch; color: var(--text-2); font-size: 15px; line-height: 1.55; }
/* Подпись кнопки — в одну строку и на 360 (правило сайта § 3.3): правило `[data-page="roi"] .btn`
   (#655, перенос на узком экране) здесь перекрыто — подпись короче прежней «по вашему адресу». */
@media (max-width: 560px) { .roi-cta .btn { width: 100%; white-space: nowrap; font-size: 15px; padding: 16px 12px; } }
@media (max-width: 380px) { .roi-cta .btn { font-size: 14px; } }

/* Окно регистрации: переключатель «WhatsApp · Telegram». */
.roi-switch { display: inline-flex; justify-self: start; margin: 0; padding: 4px; border: 1px solid var(--border-strong); border-radius: var(--r-pill); gap: 4px; }
.roi-switch__opt { position: relative; }
.roi-switch__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.roi-switch__opt span { display: inline-block; padding: 8px 18px; border-radius: var(--r-pill); font: 600 14px/1.3 var(--font-sans); color: var(--text-2); }
.roi-switch__opt input:checked + span { background: var(--surface-3); color: var(--text); }
.roi-switch__opt input:focus-visible + span { outline: 2px solid var(--brand-600); outline-offset: 2px; }

/* ── #874 ч. 2: регистрация, расчёт на экране, ключевые показатели (TA-0329 § 5.3–5.5) ──
   Аддитивно к разделу выше; цвета и отступы — токены ДС. Разметку расчёта строит сервер
   (`roi_page.result_html`), классы ниже — только её вид. */

/* Одна кнопка — два состояния: посетитель не узнан / узнан по cookie. */
.roi-cta[data-roi-state="anon"] .roi-cta__user,
.roi-cta[data-roi-state="user"] .roi-cta__anon { display: none; }

/* «Вы вошли как Имя · WhatsApp +7 707 ••• 45 67 · Это не вы?» */
.roi-me { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin: 0 0 var(--s-5); font: 400 15px/1.5 var(--font-sans); color: var(--text-2); }
.roi-me[hidden] { display: none; }
.roi-me b { color: var(--text); font-weight: 600; }
.roi-me__out { display: inline; margin: 0; }
.roi-me__btn { padding: 0; border: 0; background: none; font: inherit; color: var(--link); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
/* «Рассчитать ещё вариант» — в этой строке (пачка 2 п. 7), справа на широком экране. */
.roi-me__again { margin-left: auto; }
@media (max-width: 560px) { .roi-me__again { margin-left: 0; flex-basis: 100%; } }

/* Окно регистрации: отказ Telegram (остальные коды — правила окна заявки каркаса). */
.lead[data-lead-error="tg_invalid"] [data-err="tg_invalid"] { display: block; }
.lead[data-lead-error="tg_invalid"] #roi-reg-tg { border-color: var(--danger-500); }
/* Без JavaScript окно открыто блоком страницы, а не модалкой. */
.roi-reg[open]:not(:modal) { position: static; display: block; width: min(560px, calc(100% - 32px)); max-height: none; margin: var(--s-6) auto; border: 1px solid var(--border); box-shadow: var(--sh-sm); overflow: visible; }

/* Расчёт. */
.roi-res { margin-top: var(--s-7); }
.roi-res__head { margin-bottom: var(--s-5); }
.roi-res__head h2 { margin: 0 0 var(--s-2); }
.roi-res__ctx { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.roi-vars { display: grid; gap: var(--s-5); }
.roi-var { border: 1px solid var(--border); border-radius: var(--r-4); background: var(--surface-2); padding: var(--s-6); min-width: 0; }
.roi-var__t { margin: 0 0 var(--s-4); font: 600 18px/1.35 var(--font-sans); overflow-wrap: anywhere; }
.roi-var__sc { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.roi-sc { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-3); background: var(--surface); }
.roi-sc__k { font: 600 14px/1.4 var(--font-sans); color: var(--text); }
.roi-sc__h { font: 400 12px/1.4 var(--font-sans); color: var(--text-3); }
.roi-sc__v { margin-top: var(--s-2); font: 700 24px/1.25 var(--font-sans); color: var(--text); }
.roi-sc__s { font: 400 13px/1.45 var(--font-sans); color: var(--text-2); }
.roi-var__line { margin: 6px 0 0; font: 400 15px/1.55 var(--font-sans); color: var(--text-2); overflow-wrap: anywhere; }
.roi-var__line b { color: var(--text); }
.roi-res__note, .roi-res__assume { margin: var(--s-5) 0 0; max-width: 80ch; font: 400 15px/1.55 var(--font-sans); color: var(--text-2); }

/* Ключевые показатели — над «Показать расчёт», не сворачиваются (ч. 3, пачка 2 п. 3). Строки:
   поток · цена станций по варианту · монтаж и закупка. До регистрации поля пустые и закрыты. */
.roi-keysbox { margin-top: var(--s-6); }
.roi-keys { border: 1px solid var(--border); border-radius: var(--r-4); background: var(--surface); padding: var(--s-5) var(--s-6) var(--s-6); }
.roi-keys__t { margin: 0; font: 600 18px/1.35 var(--font-sans); color: var(--text); }
.roi-keys__lock { margin-left: var(--s-2); font: 400 14px/1.4 var(--font-sans); color: var(--text-3); }
.roi-keys__row { display: grid; gap: var(--s-5); align-items: start; margin-top: var(--s-5); }
.roi-keys__row--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.roi-keys__row--2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.roi-keys__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* «Цена станций — для варианта»: наборы переключателем, подпись набора — целиком на любой ширине. */
.roi-vpick { display: grid; border: 1px solid var(--border-strong); border-radius: var(--r-2); overflow: hidden; background: var(--surface); }
.roi-vpick__o { display: flex; align-items: center; gap: var(--s-3); padding: 10px var(--s-3); cursor: pointer; font: 500 15px/1.4 var(--font-sans); color: var(--text); overflow-wrap: anywhere; }
.roi-vpick__o + .roi-vpick__o { border-top: 1px solid var(--border); }
.roi-vpick__o:has(input:checked) { background: var(--surface-2); }
.calc__field .roi-vpick__o input { flex: none; width: 18px; height: 18px; margin: 0; padding: 0; border: 0; accent-color: var(--brand-600); }
/* Ползунок — той же высоты, что поле ввода: значения строки стоят на одной линии. */
.roi-keys .roi-range { min-height: 44px; }
.calc__field input.roi-keys__void { background: var(--surface-2); border-color: var(--border); cursor: not-allowed; }
.roi-range { display: flex; align-items: center; gap: var(--s-3); }
.roi-range input[type="range"] { flex: 1; min-width: 0; accent-color: var(--brand-600); }
.roi-range__v { min-width: 4ch; text-align: right; font: 600 16px/1.3 var(--font-sans); color: var(--text); }

/* «Когда будет хуже» — три карточки. */
.roi-worse { margin-top: var(--s-6); }
.roi-worse__t { margin: 0 0 var(--s-2); font: 600 18px/1.35 var(--font-sans); }
.roi-worse__for { margin: 0 0 var(--s-4); color: var(--text-3); font-size: 14px; overflow-wrap: anywhere; }
.roi-worse__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.roi-worse__c { border: 1px solid var(--border); border-radius: var(--r-3); background: var(--surface-2); padding: var(--s-4) var(--s-5); min-width: 0; }
.roi-worse__k { margin: 0 0 var(--s-2); font: 600 15px/1.4 var(--font-sans); }
.roi-worse__v { margin: 0; font: 400 14px/1.55 var(--font-sans); color: var(--text-2); }

/* «Скачать расчёт в PDF»: пока сервер собирает файл, кнопка «залипает» — нажатый вид и крутящийся
   индикатор (пачка 2 п. 6). */
.roi-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin-top: var(--s-6); }
.roi-pdf { display: inline-flex; align-items: center; gap: var(--s-2); }
.roi-pdf__spin { display: none; width: 16px; height: 16px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: roi-spin .8s linear infinite; }
.roi-pdf.is-busy { pointer-events: none; background: var(--surface-3); box-shadow: inset 0 1px 2px var(--border-strong); }
.roi-pdf.is-busy .roi-pdf__spin { display: inline-block; }
@keyframes roi-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .roi-pdf__spin { animation-duration: 2.4s; } }

@media (max-width: 1060px) { .roi-keys__row--4, .roi-keys__row--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .roi-var__sc, .roi-worse__list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .roi-var { padding: var(--s-5); }
  .roi-keys { padding: var(--s-4) var(--s-5); }
  .roi-keys__row, .roi-keys__row--4, .roi-keys__row--2, .roi-keys__row--3 { grid-template-columns: 1fr; gap: var(--s-4); margin-top: var(--s-4); }
  .roi-sc__v { font-size: 22px; }
}

/* ==========================================================
   /chargers — модельные ряды (#866 В3, 10.10.2026)
   Один компонент на четыре серии: фото · описание · таблица «модификация · мощность ·
   коннекторы · цена». Строки таблиц собирает сервер из прайса (`chargers_page.py`).
   Телефон: строка таблицы — две строки текста (мощность · коннекторы · цена / модификация),
   цена не обрезается и не переносится; горизонтальной прокрутки нет.
   ========================================================== */
.ser { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-7); align-items: start; padding: var(--s-7) 0; border-top: 1px solid var(--border); }
.ser:first-of-type { border-top: 0; padding-top: 0; }
.ser__media { display: flex; justify-content: center; align-items: flex-end; gap: var(--s-4); padding: var(--s-6); border-radius: var(--r-4); background: var(--surface-2); }
.ser__media img { display: block; width: auto; max-width: 100%; height: 360px; object-fit: contain; }
/* Фото серий сплита — JPEG на белом: белый фон растворяется в подложке, а не стоит белым квадратом. */
.ser__media img { mix-blend-mode: multiply; }
.ser--split .ser__media img { max-width: calc(50% - var(--s-2)); }
.ser__t { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin: 0 0 var(--s-2); font: 700 28px/1.2 var(--font-sans); letter-spacing: -.01em; color: var(--text); }
.ser__tag { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--r-pill); background: var(--brand-50); color: var(--brand-700); font: 600 13px/1.3 var(--font-sans); letter-spacing: 0; }
.ser__k { margin: 0 0 var(--s-3); font: 500 16px/1.45 var(--font-sans); color: var(--text-2); }
.ser__d { margin: 0 0 var(--s-5); color: var(--text-2); font-size: 16px; line-height: 1.55; max-width: 60ch; }
.ptable { border-collapse: collapse; width: 100%; font-size: 15px; }
.ptable th, .ptable td { border-bottom: 1px solid var(--border); padding: 10px 12px; text-align: left; vertical-align: top; line-height: 1.4; }
.ptable thead th { color: var(--text-3); font: 600 11px/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; border-bottom-color: var(--border-strong); white-space: nowrap; }
.ptable tbody th { font-weight: 500; color: var(--text); }
.ptable td { color: var(--text-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ptable .ptable__p { text-align: right; color: var(--text); font-weight: 600; }
.ptable thead th:last-child { text-align: right; }
.ptable .is-req .ptable__p { color: var(--text-2); font-weight: 500; }
.ptable__more { margin-top: var(--s-4); }
.ptable__more[hidden] { display: none; }
@media (max-width: 920px) {
  .ser { grid-template-columns: 1fr; gap: var(--s-5); }
  .ser__media img { height: 280px; }
}
@media (max-width: 720px) {
  .ser { padding: var(--s-6) 0; }
  .ser__media { padding: var(--s-4); }
  .ser__media img { height: 220px; }
  .ser__t { font-size: 24px; }
  .ptable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ptable tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "kw cn pr" "md md md"; gap: 2px var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
  .ptable tbody tr[hidden] { display: none; }
  .ptable tbody th, .ptable tbody td { border: 0; padding: 0; }
  .ptable tbody td:nth-child(2) { grid-area: kw; color: var(--text); font-weight: 600; }
  .ptable tbody td:nth-child(3) { grid-area: cn; white-space: normal; }
  .ptable tbody td.ptable__p { grid-area: pr; white-space: nowrap; }
  .ptable tbody th { grid-area: md; font-size: 14px; color: var(--text-3); font-weight: 400; }
}
/* «Как выбрать конфигурацию» — три карточки; коннекторы — картинками сайта (`.hcon`). */
.pick .card h3 { margin-bottom: var(--s-4); }
.pick__con { gap: var(--s-4); }
.pick__con .hcon__i span { font-size: 15px; }
.pick__fmt { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); color: var(--text-2); font-size: 15px; line-height: 1.55; }
.pick__fmt strong { color: var(--text); font-weight: 600; }
/* «От заказа до первой зарядки» — вертикальная лента шагов: номер · что происходит · срок. */
.tline { list-style: none; margin: 0; padding: 0; counter-reset: tl; max-width: 960px; }
.tline li { counter-increment: tl; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: var(--s-2) var(--s-6); padding: 0 0 var(--s-6) 56px; }
.tline li::before { content: counter(tl); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand-50); color: var(--brand-700); font: 600 15px/1 var(--font-sans); }
.tline li::after { content: ""; position: absolute; left: 17px; top: 44px; bottom: 8px; width: 2px; background: var(--border); }
.tline li:last-child { padding-bottom: 0; }
.tline li:last-child::after { display: none; }
.tline__b strong { display: block; font: 600 18px/1.35 var(--font-sans); color: var(--text); margin: 6px 0 4px; }
.tline__b span { display: block; color: var(--text-2); font-size: 15px; line-height: 1.55; }
.tline__t { font-style: normal; font: 600 15px/1.45 var(--font-sans); color: var(--text); padding-top: 8px; }
@media (max-width: 720px) {
  .tline li { grid-template-columns: 1fr; padding-left: 48px; }
  .tline li::before { width: 32px; height: 32px; font-size: 14px; }
  .tline li::after { left: 15px; top: 40px; }
  .tline__t { padding-top: 0; }
}
/* Финал — два пути одного вида: расчёт (контурная) и заказ (оранжевая). */
.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.paths__i { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); padding: var(--s-7); }
.paths__i h2 { margin: 0; }
.paths__i p { margin: 0; flex: 1; font-size: 16px; }
@media (max-width: 720px) {
  .paths { grid-template-columns: 1fr; }
  .paths__i { padding: var(--s-5); }
  .paths__i .btn { width: 100%; justify-content: center; }
}

/* ==========================================================
   /chargers v2 — характеристики, корзина, заявка (#877, TA-0330 § 3–4, § 7; Dev ч. 1, 11.10.2026)
   АДДИТИВНАЯ ДЕЛЬТА в конце файла: раздел «/chargers — модельные ряды» выше не переписан.
   · Кнопка «В корзину» — пятая колонка таблиц серий; контурная, в корзине — контур брендового цвета
     (как `.ser__tag`), без оранжевого фона. Без JS колонки нет.
   · Окна «Характеристики» — донор `.lead` (тот же вид окна, что у формы заявки); таблица `.specs__t` — сетка
     `.ptable`; на телефоне строка — «параметр над значением», у многоколоночных таблиц над значением
     подпись колонки (`data-th`). Без JS окно показывается на месте по якорю (`:target`).
   · Таблица выбранного `.cart` (пожелание владельца 11.10.2026): колонки одной сетки, «Кол-во» по центру,
     «Цена» и «Стоимость» вправо с отступом колонки, «✕» своей колонкой. Телефон — позиция в две строки
     (подпись; кол-во · стоимость · ✕), кнопки 44 px, цена за штуку — строкой под подписью.
   ========================================================== */
.btn--sm { padding: 7px 14px; font-size: 13px; border-radius: var(--r-3); }
.ser__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); margin: 0 0 var(--s-2); }
.ser__head .ser__t { margin: 0; }
.ptable thead th:nth-child(4) { text-align: right; }
.ptable td.ptable__c { width: 1%; padding: 4px 12px 4px var(--s-2); text-align: right; }  /* кнопка — на линии цены (правила сайта §3.4) */
.ptable__c .btn { min-width: 9em; }
.ptable__c .btn[hidden] { display: none; }
.ptable__c .btn.is-in { border-color: var(--brand-600); background: var(--brand-50); color: var(--brand-700); }
html:not(.js) .ptable__c, html:not(.js) .ptable thead th:nth-child(5) { display: none; }
.ser__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
.ser__acts .ptable__more { margin-top: 0; }
@media (max-width: 720px) {
  .ptable tbody tr { grid-template-areas: "kw cn pr" "md md md" "ct ct ct"; }
  .ptable tbody td.ptable__c { grid-area: ct; width: auto; padding: var(--s-2) 0 0; }
  .ptable__c .btn { width: 100%; min-height: 44px; }
  .ser__acts .btn { flex: 1 1 auto; }
}

/* Окна «Характеристики». */
.specs { width: min(880px, calc(100% - 32px)); }
.specs__h { margin: var(--s-5) 0 var(--s-2); font: 600 17px/1.35 var(--font-sans); color: var(--text); }
.specs .lead__title + .specs__h { margin-top: var(--s-3); }
.specs__src { margin: var(--s-4) 0 0; font: 400 12px/1.5 var(--font-sans); color: var(--text-3); }
.specs__t { border-collapse: collapse; width: 100%; font-size: 14px; margin-top: var(--s-3); }
.specs__t th, .specs__t td { border-bottom: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; line-height: 1.45; }
.specs__t thead th { color: var(--text-3); font: 600 11px/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; border-bottom-color: var(--border-strong); }
.specs__t tbody th { width: 30%; font-weight: 500; color: var(--text); }
.specs__t td { color: var(--text-2); }
html:not(.js) dialog.specs:target { display: block; position: static; width: auto; max-width: none; max-height: none; margin: var(--s-6) 0 0; overflow: visible; border: 1px solid var(--border); box-shadow: var(--sh-sm); }
@media (max-width: 720px) {
  .specs__t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .specs__t tbody tr { display: block; padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
  .specs__t tbody th, .specs__t tbody td { display: block; width: auto; border: 0; padding: 0; }
  .specs__t tbody th { margin-bottom: 2px; font-size: 13px; font-weight: 400; color: var(--text-3); }
  .specs__t tbody td { color: var(--text); }
  .specs__t tbody td + td { margin-top: 4px; }
  .specs__t--cols tbody td[data-th]::before { content: attr(data-th) ": "; color: var(--text-2); font-weight: 600; }
}
@media (max-width: 600px) {
  .specs { width: 100%; max-width: 100%; }
}

/* Блок «Заявка на оборудование». */
.order { display: grid; gap: var(--s-5); }
html:not(.js) .order { display: none; }
.order__nojs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); }
.order__nojs p { margin: 0; color: var(--text-2); font-size: 16px; }
.js .order__nojs { display: none; }
.order .order__t { margin: 0 0 var(--s-4); font: 700 20px/1.3 var(--font-sans); color: var(--text); }
.order .order__empty, .order .order__gone, .order .order__note, .order .order__hint, .order .order__sum { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.55; }
.order .order__gone { margin-bottom: var(--s-3); color: var(--text); }
.order__gone[hidden] { display: none; }
.order .order__note { margin-top: var(--s-4); color: var(--text-3); font-size: 14px; }
.order .order__sum { margin-bottom: var(--s-4); }
.order__sum:empty { display: none; }
.order .order__hint { margin-bottom: var(--s-4); }
.order[data-cart-state="empty"] .cart, .order[data-cart-state="empty"] .order__note { display: none; }
.order[data-cart-state="items"] .order__empty { display: none; }
.order__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3) var(--s-4); }
.order__len { width: 240px; }
.order__go { display: flex; align-items: center; gap: var(--s-3); }
.order .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.cart { border-collapse: collapse; width: 100%; font-size: 15px; font-variant-numeric: tabular-nums; }
.cart th, .cart td { border-bottom: 1px solid var(--border); padding: 12px 0; text-align: left; vertical-align: middle; line-height: 1.4; }
.cart thead th { color: var(--text-3); font: 600 11px/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; border-bottom-color: var(--border-strong); white-space: nowrap; }
.cart tbody th { font-weight: 500; color: var(--text); }
.cart .cart__q { padding-left: var(--s-5); text-align: center; white-space: nowrap; }
.cart .cart__n { padding-left: var(--s-6); text-align: right; white-space: nowrap; color: var(--text); }
.cart .cart__x { width: 44px; padding-left: var(--s-4); text-align: center; }
.cart__label { display: block; }
.cart__per { display: none; }
.cart__qty { display: inline-block; min-width: 2.5ch; margin: 0 6px; text-align: center; font-weight: 600; color: var(--text); }
.cart__b { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: transparent; color: var(--text); font: 600 16px/1 var(--font-sans); cursor: pointer; vertical-align: middle; }
.cart__b:hover { background: var(--surface-3); }
.cart__b:focus-visible { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.cart__b:disabled { opacity: .4; cursor: default; background: transparent; }
.cart__x .cart__b { border-color: transparent; color: var(--text-2); }
.cart tfoot th, .cart tfoot td { border-bottom: 0; padding-top: var(--s-4); vertical-align: top; font-weight: 700; color: var(--text); }
.cart__more { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; color: var(--text-2); }
.cart__more[hidden] { display: none; }
@media (max-width: 720px) {
  .order__part { padding: var(--s-5) var(--s-4); }
  .order__len { width: 100%; }
  .order__go { flex-direction: column; align-items: stretch; width: 100%; gap: var(--s-2); }
  .order__go .btn { width: 100%; }
  .cart thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cart .cart__unit { display: none; }
  .cart tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "pos pos pos" "q n x"; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
  .cart tbody th, .cart tbody td { border: 0; padding: 0; }
  .cart tbody .cart__pos { grid-area: pos; }
  .cart tbody .cart__q { grid-area: q; text-align: left; }
  .cart tbody td.cart__n { grid-area: n; }
  .cart tbody .cart__x { grid-area: x; width: auto; }
  .cart__per { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--text-3); }
  .cart__b { width: 44px; height: 44px; font-size: 18px; }
  .cart tfoot tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-3); }
  .cart tfoot .cart__q, .cart tfoot .cart__x { display: none; }
  .cart tfoot th, .cart tfoot td { padding-left: 0; }
}

/* ==========================================================
   /chargers v2 — оценка монтажа, запрос КП, вход (#877, TA-0330 § 5–6; Dev ч. 2, 11.10.2026)
   АДДИТИВНАЯ ДЕЛЬТА в конце файла. Результат монтажа — одно число и строка вводных; переключатель
   «включить / исключить из КП» — радио на токенах ДС (как `.roi-switch` окна регистрации, но строкой);
   «Заявка принята…» — знак формы каркаса `.lead__ok`. Строка «Вы вошли как …» — `.roi-me` страницы `/roi`.
   ========================================================== */
.order .roi-me { margin: 0; }
.order__res { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--border); }
.order__res[hidden], .order__switch[hidden], .order__sent[hidden], .order__err[hidden], .order .order__hint[hidden] { display: none; }
.order .order__amount { margin: 0; font: 700 20px/1.35 var(--font-sans); color: var(--text); }
.order .order__amount b { font-weight: 700; white-space: nowrap; }
.order .order__line { margin: var(--s-1) 0 0; font-size: 15px; color: var(--text); }
.order .order__fine { margin: var(--s-3) 0 0; font-size: 14px; color: var(--text-3); line-height: 1.55; }
.order__switch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); margin: 0 0 var(--s-4); padding: 0; border: 0; }
.order__switch legend { float: left; margin-right: var(--s-2); padding: 0; font: 600 15px/1.5 var(--font-sans); color: var(--text); }
.order__opt { display: inline-flex; align-items: center; gap: var(--s-2); font-size: 15px; color: var(--text); cursor: pointer; }
.order__opt input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand-600); }
.order__sent { display: flex; align-items: flex-start; gap: var(--s-4); margin-top: var(--s-5); }
.order__sent .lead__ok { flex: none; width: 44px; height: 44px; padding: 10px; }
.order .order__sent p { margin: 0; font-size: 15px; color: var(--text-2); }
.order .order__sent .order__ok { margin-bottom: var(--s-1); font: 700 18px/1.35 var(--font-sans); color: var(--text); }
.order .order__err { margin: var(--s-3) 0 0; font: 500 14px/1.45 var(--font-sans); color: var(--danger-700); }
@media (max-width: 720px) {
  .order__switch { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .order__switch legend { float: none; margin: 0 0 var(--s-1); }
  .order .order__amount { font-size: 18px; }
}
/* ==========================================================
   #866 · главная и шапка (Оркестратор, якоря В5/В6, владелец 12.10.2026)
   ── «Связаться с нами»: кнопка шапки со списком (канон `_frame/header.html`, поведение —
      `site-frame.js`). Десктоп: светлая карточка ДС под кнопкой, по правому краю — тот же вид,
      что подменю меню. Телефон (до 1060 px): панель во всю ширину под шапкой на navy — тот же
      вид, что раскрытое меню, пункты крупными строками. Без JS — наведением и фокусом.
   ── «Наша сеть в цифрах»: пятая плитка «успешных транзакций» (запекает сервер; нет живого
      числа — плитка `hidden`). Пять плиток — пять колонок; на телефоне 2×2 и пятая во всю ширину.
   ========================================================== */
.hdr__contact { position: relative; }
.hdr__contact-btn { gap: 6px; }
.hdr__contact.is-open .nav__chev { transform: rotate(180deg); }
.hdr__contact-list { list-style: none; margin: 0; padding: var(--s-2); display: none; }
.hdr__contact.is-open > .hdr__contact-list,
html:not(.js) .hdr__contact:hover > .hdr__contact-list,
html:not(.js) .hdr__contact:focus-within > .hdr__contact-list { display: block; }
.hdr__contact-list a { display: block; padding: 10px 12px; border-radius: var(--r-2); font: 500 15px/1.35 var(--font-sans); text-decoration: none; white-space: nowrap; }
.hdr__contact-d { display: block; font: 400 13px/1.4 var(--font-sans); }
@media (min-width: 1061px) {
  .hdr__contact-list { position: absolute; top: calc(100% + 8px); right: 0; min-width: 248px; z-index: 60; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-4); box-shadow: var(--sh-lg); }
  .hdr__contact-list::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
  .hdr__contact-list a { color: var(--text); }
  .hdr__contact-list a:hover { background: var(--surface-2); color: var(--brand-700); }
  .hdr__contact-list a:focus-visible { outline: 2px solid var(--brand-600); outline-offset: -2px; }
  .hdr__contact-d { color: var(--text-3); }
}
@media (max-width: 1060px) {
  .hdr__contact { position: static; }
  .hdr__contact-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 60; max-height: calc(100vh - 64px); overflow-y: auto; background: var(--navy-950); border-top: 1px solid var(--on-navy-border); border-bottom: 1px solid var(--on-navy-border-strong); padding: var(--s-2) var(--s-5) var(--s-4); }
  .hdr__contact-list li + li { border-top: 1px solid var(--on-navy-border); }
  .hdr__contact-list a { padding: 16px 4px; font: 600 17px/1.35 var(--font-sans); color: var(--on-navy); border-radius: 0; white-space: normal; }
  .hdr__contact-list a:hover { background: var(--on-navy-hover); }
  .hdr__contact-list a:focus-visible { outline: 2px solid var(--brand-300); outline-offset: -2px; }
  .hdr__contact-d { margin-top: 2px; font-size: 14px; color: var(--on-navy-2); }
}
@media (max-width: 440px) {
  .hdr__contact-btn.btn--md { gap: 4px; }
}
@media (min-width: 921px) {
  .netstrip__row:has(> .netstrip__sessions:not([hidden])) { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 920px) {
  .netstrip__row > .netstrip__sessions { grid-column: 1 / -1; }
}

/* ═══ `/getkaspiqr`, вычитка владельца 12.10.2026 (#866, финальная сессия) — АДДИТИВНАЯ ДЕЛЬТА в конце файла:
       выше ничего не переписано. ═══ */
/* «до 2,5 %»: предлог перед числом — мельче числа, как знак единицы после него. */
.fact__p { font-weight: 500; font-size: .55em; margin-right: .1em; }
/* Схема «Клиент → Kaspi QR → Счёт владельца станции» (п. 6.3.1): пунктир ОТСТУПАЕТ вниз от блоков. Зазор 48 px —
   больше свечения плашки «Счёт владельца» (`--sh-glow-accent`: 8 px вниз + 32 px размытия), иначе линия тонет в нём. */
.flow__rule { margin-top: var(--s-8); border-top: 1px dashed var(--border-strong); }
.sec--dark .flow__rule { border-color: var(--on-navy-border-strong); }
/* «Наша сеть в цифрах» (п. 8): девять показателей — 3×3 на широком экране; если плитки «зарядных сессий» нет
   (сервер оставил её `hidden` — нет живого числа), восемь — 4×2. Телефон — две колонки; при девяти первая
   плитка («55+ владельцев») во всю ширину, чтобы не было «дыры» в последнем ряду. */
.facts--net { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--s-6); }
.facts--net > div { border-top: 1px solid var(--on-navy-border-strong); padding-top: var(--s-4); }
.facts--net > [hidden] { display: none; }
.facts--net:has(> .kq-net__sessions[hidden]) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .facts--net, .facts--net:has(> .kq-net__sessions[hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-4); }
  .facts--net:not(:has(> .kq-net__sessions[hidden])) > :first-child { grid-column: 1 / -1; }
}
.kq-net__map { margin: var(--s-7) 0 0; }
.kq-net__asof { margin-top: var(--s-4); }
/* «Как начать»: под шагами две карточки (Поддержка · Обслуживание) — пополам, без пустой третьей колонки. */
@media (min-width: 721px) { .cards.kq-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* «Что получаете ещё»: в карточке одна-две ссылки — столбиком внизу карточки, на одной линии у соседних карточек. */
.kq-more__links { margin-top: auto; padding-top: var(--s-2); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.kq-more .card .kq-more__links .lnk { margin-top: 0; padding-top: 0; }
/* Якоря на заголовках (`/roaming#vitrina`, `#rouming`): посадка ниже липкой шапки, как у `section[id]` выше. */
h2[id], h3[id] { scroll-margin-top: 84px; }
/* Финальный призыв на телефоне: две кнопки столбиком одной ширины (оранжевая и контурная), а не разной длины. */
@media (max-width: 480px) {
  [data-page="getkaspiqr"] .cta-final__row { flex-direction: column; align-items: stretch; }
  /* 360 px: «Оставить заявку на подключение» при 17 px и полях 32 px шире ряда (замер Chromium: 346 > 312) —
     поля и кегль ужаты, подпись в одну строку, как у призыва `/map`. */
  [data-page="getkaspiqr"] .cta-final__row .btn { padding: 18px 12px; font-size: min(17px, 4.5vw); }
}
/* ==========================================================
   /getkaspiqr — окно «Начать подключение» (#879, TA-0331 § 7). АДДИТИВНЫЙ раздел: вид — окно
   заявки каркаса (`.lead__*` выше, в т. ч. «весь экран» на телефоне), здесь только состояния
   `data-connect-state` / `data-connect-error` своего окна `dialog#connect`. Цвета — токены ДС.
   ========================================================== */
.connect-win .connect-win__view--done,
.connect-win .connect-win__view--failed { display: none; flex-direction: column; align-items: center; gap: var(--s-4); padding: var(--s-6) 0 var(--s-3); text-align: center; }
.connect-win[data-connect-state="done"] .connect-win__view--form,
.connect-win[data-connect-state="failed"] .connect-win__view--form { display: none; }
.connect-win[data-connect-state="done"] .connect-win__view--done,
.connect-win[data-connect-state="failed"] .connect-win__view--failed { display: flex; }
.connect-win__view--done .lead__title { padding-right: 0; }
.connect-win__view--done .lead__lead { margin: 0; max-width: 36ch; }
.connect-win__view--done .lead__title:focus, .connect-win__msg:focus { outline: none; }
.connect-win [data-connect-url][hidden] { display: none; }
.connect-win__msg { margin: 0; max-width: 32ch; font: 600 18px/1.45 var(--font-sans); color: var(--text); }
.connect-win[data-connect-error="phone_invalid"] [data-err="phone_invalid"],
.connect-win[data-connect-error="rate_limited"] [data-err="rate_limited"],
.connect-win[data-connect-error="network"] [data-err="network"] { display: block; }
.connect-win[data-connect-error="phone_invalid"] #connect-phone { border-color: var(--danger-500); }
/* «Открываем анкету…» — на время запроса; кнопка в это время выключена (`.lead__send .btn:disabled`). */
.connect-win__busy { display: none; }
.connect-win[data-connect-state="sending"] .connect-win__idle { display: none; }
.connect-win[data-connect-state="sending"] .connect-win__busy { display: inline; }
/* Без JavaScript кнопка «Подключиться» ведёт на `#connect`: окно показано блоком страницы. */
html:not(.js) .connect-win:target { display: block; position: static; width: min(560px, calc(100% - 32px)); height: auto; max-height: none; margin: var(--s-6) auto; border: 1px solid var(--border); border-radius: var(--r-5); box-shadow: var(--sh-sm); overflow: visible; scroll-margin-top: 96px; }
html:not(.js) .connect-win [data-connect-close] { display: none; }