/* ============================================================================
   НаВстрече — дизайн-токены.
   Источник: Figma «НаВстрече · Light Glass / Desktop 1440» (302:3).
   Значения стекла, кнопок и типографики сняты через Figma MCP и совпадают
   с токенами «Видеоточки» (191:804) и прежней страницы «НаВстрече» (61:2164) —
   один и тот же файл, одна дизайн-система. Проверено по get_variable_defs:
   Blue Ribbon #005CFE, Primary/600 #2563eb, Gray/900 #101828.
   ========================================================================= */

@font-face{
  font-family:Onest;font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/img/v9a/019021ad6e1f.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:Onest;font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/img/v9a/21e838f00fb7.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* ── Имена v2 (ds/tokens.json, A7) ─────────────────────────────────────
     Имена эталона ds.html. Прежние имена выше — псевдонимы: var(--новое).
     Новые правила пишутся только новыми именами. */
  --accent:#1a59f5;
  --accent-hover:#1450e0;
  --accent-text:#1a59f5;
  --text-heading:#031040;
  --text-section:#0c132e;
  --text-lead-hero:#384563;
  --text-body:#424f6b;
  --text-menu:#424f6b;
  --text-caption:#505e78;
  --text-footnote:#505e78;
  --surface-soft:#f7f9fd;
  --surface-sunken:#f4f7fc;
  --line-soft:#eef2f9;
  --line:#e4eaf6;
  --fs-label:11px;
  --fs-footnote:12px;
  --fs-caption:13px;
  --fs-card:14px;
  --fs-dense:15px;
  --fs-body:16px;
  --fs-lead-hero:17px;
  --fs-stat:clamp(22px,1.2rem + .5vw,26px);
  --fs-stat-card:clamp(26px,1.4rem + .4vw,28px);
  --fs-hero-sub:clamp(22px,1.1rem + .8vw,28px);  /* подзаголовок первого экрана страницы продукта (D-33) */
  --mock-fs-1:9px;
  --mock-fs-2:11px;
  --mock-fs-3:12px;
  --mock-fs-4:13px;
  --mock-fs-5:15px;
  --pad-card-xl:46px;
  --pad-form:26px;
  --r-card:20px;
  --r-pill:999px;
  --elev-1:0 1px 2px rgba(15,31,71,.04), 0 12px 28px -12px rgba(15,31,71,.16);
  --elev-2:0 18px 46px rgba(15,31,71,.10);
  --elev-3:0 2px 6px rgba(15,31,71,.06), 0 28px 56px -22px rgba(15,31,71,.24);
  --sh-tile:0 3px 8px rgba(26,89,242,.13);
  --sh-header-scrolled:0 10px 30px rgba(15,31,71,.12);
  --sh-media:0 4px 14px rgba(15,31,71,.08),0 46px 88px -36px rgba(15,31,71,.38);
  --blur-strong:18px;
  --blur-glass:16px;
  --blur-solid:8px;
  --blur-node:10px;
  --blur-ghost:5px;

  /* ── Чернила и текст ─────────────────────────────────────────────────── */
  --ink:var(--text-section);
  --ink-2:var(--text-heading);        /* заголовки */
  --muted:var(--text-lead-hero);        /* лид */
  --muted-2:var(--text-body);      /* основной текст */
  --muted-3:var(--text-caption);      /* правка главной v6, перенесено из home.responsive.css */
  --muted-4:var(--text-footnote);      /* сноски; = --muted-3, пара была неразличима (D-02 А) */
  --nav:var(--text-menu);          /* пункты меню; = --muted-2 (D-02 А) */

  /* ── Акценты ─────────────────────────────────────────────────────────── */
  --blue:var(--accent);         /* кнопки, активные состояния */
  --blue-site:var(--accent-text);    /* акцентный текст; один синий на сайт (D-01 А) */
  --blue-deep:var(--accent-hover);    /* hover primary */
  --violet:#7a5eed;
  --teal:#14a1a8;
  --rec:#e5484d;          /* индикатор записи */
  --ok:#30a46c;           /* активные источники, успех */

  /* Семантика сигналов радара. Отдельный ряд от акцентов: эти четыре цвета
     обозначают тип сигнала, а не подсвечивают интерфейс, и в схемы не идут. */
  --sig-risk:#e5484d;     /* риски */
  --sig-opp:#1a59f5;      /* возможности */
  --sig-obj:#e08c31;      /* возражения */
  --sig-pos:#2f9e63;      /* позитив */

  /* ── Поверхности ─────────────────────────────────────────────────────── */
  --tile:#ebf1fd;         /* плитка под иконкой */
  --tile-teal:#e2f6f4;
  --tile-violet:#efeafd;
  --tile-grey:#eef1f6;
  --tile-risk:#fdecec;
  --tile-obj:#fdf1e3;
  --tile-pos:#e6f5ec;
  --line-2:var(--line);       /* разделители */
  --line-3:var(--line-soft);
  --surface:#ffffff;
  --surface-2:var(--surface-soft);    /* вложенные панели */
  --surface-3:var(--surface-sunken);
  --bg-page:linear-gradient(180deg,#fafbfe 0%,#f7f9fc 240px);  /* фон страницы (A7) */

  /* Линии (D-04 А): семь сырых серо-голубых сведены к трём линиям и дорожке */
  --line-strong:#c9d3e6;  /* наведение на поле и чип, пунктир, связи схемы */
  --track:#e6ecf7;        /* дорожка шкалы и степпера */

  /* Сырые цвета общего слоя получили имена с теми же значениями (A7) */
  --accent-fill:rgba(26,89,245,.96);      /* заливка основной кнопки */
  --ghost-bg:rgba(255,255,255,.72);       /* заливка кнопки-призрака и шапки */
  --ghost-br:rgba(26,89,245,.34);         /* рамка кнопки-призрака */
  --strip-br:rgba(255,255,255,.8);        /* рамка полосы C-03 */
  --accent-wash:rgba(26,89,245,.075);     /* подложка чипа первого экрана главной */
  --accent-wash-2:rgba(26,89,245,.11);    /* та же подложка при наведении, подсветка таба */
  --teal-text:#0b767c;                    /* текст бирюзовой метки: 4,8:1 на --tile-teal (было #0d7f85, 4,26) */
  --chip-text:#2c3a5a;                    /* текст чипа первого экрана главной */

  /* Тёмная секция — только «Где работает НаВстрече» на главной (D-05 Б) */
  --inverse-bg:#101e37;
  --inverse-card:#1b2c47;
  --inverse-line:#3b506e;
  --inverse-text:#f5f8ff;
  --inverse-lead:#bfcee5;
  --inverse-accent:#a9c9ff;
  --inverse-body:#e0e8f5;  /* пункты списка */
  --inverse-card-hover:#223652;

  /* Секция-иллюстрация C-18: свои серые подписи (D-03 А) */
  --illo-caption:#5c6680;
  --illo-note:#616b85;

  /* Завесы поверх видео и картинок в первом экране. Нужны там, где под
     текстом лежит движущийся кадр: без них контраст зависит от того, что
     сейчас в кадре. Ступеней много намеренно — двухстоповый градиент даёт
     видимую вертикальную границу там, где кончается заливка, а здесь
     плотность спадает по кривой и края перехода не видно.
     --scrim-l  — светлая, под тёмный текст (основной стиль сайта);
     --scrim-d  — тёмная, под светлый текст. */
  --scrim-l:linear-gradient(90deg,
    rgba(247,249,252,.985) 0%,  rgba(247,249,252,.975) 20%,
    rgba(247,249,252,.94) 34%,  rgba(247,249,252,.86) 44%,
    rgba(247,249,252,.72) 54%,  rgba(247,249,252,.52) 64%,
    rgba(247,249,252,.3) 75%,   rgba(247,249,252,.12) 86%,
    rgba(247,249,252,0) 96%);
  --scrim-d:linear-gradient(90deg,
    rgba(9,17,40,.94) 0%,   rgba(9,17,40,.92) 20%,
    rgba(9,17,40,.86) 34%,  rgba(9,17,40,.76) 44%,
    rgba(9,17,40,.6) 54%,   rgba(9,17,40,.42) 64%,
    rgba(9,17,40,.24) 75%,  rgba(9,17,40,.1) 86%,
    rgba(9,17,40,0) 96%);

  /* ── Стекло ──────────────────────────────────────────────────────────── */
  --glass-bg:rgba(255,255,255,.48);
  --glass-br:rgba(255,255,255,.78);
  --glass-blur:var(--blur-glass);
  --glass-sh:var(--elev-2);

  /* Плотное стекло — карточки поверх визуала (макет: .86 / .9 / blur 8) */
  --glass-solid-bg:rgba(255,255,255,.86);
  --glass-solid-br:rgba(255,255,255,.9);
  --glass-solid-blur:var(--blur-solid);
  --sheet-bg:rgba(255,255,255,.94);   /* шторка меню: плотнее стекла, сквозь .86 проступала кнопка первого экрана */
  --glass-solid-sh:0 18px 23px rgba(15,31,71,.10);

  /* ── Тени ────────────────────────────────────────────────────────────── */
  --sh-card:var(--elev-1);
  --sh-lift:var(--elev-3);
  --sh-btn:0 8px 20px rgba(20,71,219,.22);
  --sh-btn-hover:0 12px 26px rgba(20,71,219,.28);

  /* Непрозрачная ступень для масок. Это не цвет из палитры: маске всё равно,
     какой оттенок, ей важно «видно / не видно», а любой непрозрачный цвет
     читается как «видно». Лежит здесь, потому что линтер (L1) запрещает
     сырые цвета в CSS страниц, и обходить его именованным чёрным нельзя:
     сторож, который обходят, перестаёт быть сторожем. */
  --mask-solid:#000;
  --ring:0 0 0 3px rgba(26,89,245,.22);
  --ring-err:0 0 0 3px rgba(229,72,77,.20);

  /* ── Градиенты (about S-01, бенто фактов) ───────────────────────────────
     --grad-hero-mid — промежуточный тон фирменного градиента акцентной
     плиты. Не сырой оттенок прототипа (#2f6ff7, контраст с белым 4.43:1 —
     не проходил 4.5:1): затемнён до смеси 75% --blue / 25% --teal, тем же
     курсом на teal, контраст с белым 4.95:1. --grad-hero держит ≥4.5:1
     с белым текстом первые ~65% плиты по диагонали 135deg (там и стоит
     текст: верхний левый угол, подпись ограничена max-width 34ch) — дальний
     нижний правый угол (декоративное пятно ::after, без текста) уходит ниже,
     это ожидаемо. */
  --grad-hero-mid:#196be2;
  --grad-hero:linear-gradient(135deg,var(--blue) 0%,var(--grad-hero-mid) 45%,var(--teal) 130%);
  --grad-tint-violet:linear-gradient(160deg,#fff 0%,#f4f1ff 70%,#eef4ff 100%);
  --grad-tint-teal:linear-gradient(120deg,#fff 0%,#eef7f7 100%);
  --sh-hero-plate:0 18px 40px -18px rgba(20,71,219,.55);
  --on-accent:#fff;                        /* текст на --grad-hero, ≥4.5:1 в рабочей зоне */

  /* ── Радиусы ─────────────────────────────────────────────────────────── */
  --r-xs:8px;  --r-sm:10px; --r-md:12px; --r-lg:14px;
  /* Семь ступеней (D-16 Б): 15 сведено к 14, 19 — к 20. --r-xl и --r-2xl —
     псевдонимы --r-lg и --r-3xl, пока их употребления не переименованы */
  --r-xl:var(--r-lg); --r-2xl:var(--r-card); --r-3xl:var(--r-card);
  --r-illo:24px;          /* секция-иллюстрация C-18 (D-03 А) */

  /* ── Раскладка ───────────────────────────────────────────────────────── */
  --wrap:1200px;
  --wrap-wide:1280px;
  --pad:clamp(16px,4vw,24px);
  --sec-y:clamp(40px,5vw,58px);
  --head-gap:clamp(28px,3.4vw,44px);  /* шапка секции → содержимое (D-14 Б) */
  --gap-grid:20px;                    /* зазор сетки карточек C-17 (D-21 А) */
  --pad-card:22px;                    /* поле карточки; на ≤639 — 16 (D-15 Б) */

  /* ── Кегли заголовков: роли с clamp (D-06 А) ─────────────────────────── */
  --fs-h1:clamp(32px,1.6rem + 1.4vw,44px);
  --fs-h2:clamp(30px,1.5rem + 2.2vw,46px);
  --fs-h3:clamp(17px,1rem + .4vw,20px);
  --hdr-h:68px;

  /* ── Движение ────────────────────────────────────────────────────────────
     Перенесено из navstreche-redesign/src/styles/v4.css. Ограниченный
     словарь: одно вхождение --dur-epic на страницу, translateY без
     translateX для текста. ------------------------------------------------ */
  --ease-entrance:cubic-bezier(.22,1,.36,1);   /* всё, что въезжает */
  --ease-swap:cubic-bezier(.76,0,.24,1);       /* смена состояния на месте */
  --ease-chip:cubic-bezier(.34,1.36,.64,1);    /* только плавающие элементы */

  --dur-micro:120ms;   /* hover, focus */
  --dur-fast:240ms;    /* таб, подсветка */
  --dur-base:420ms;    /* reveal карточки */
  --dur-slow:720ms;    /* сигнатурная схема */
  --dur-epic:1200ms;   /* первый экран, один раз */

  --stagger:60ms;
  --reveal-y:16px;
}


/* ============================================================================
   НаВстрече — сброс, полотно, ореолы, контейнеры.
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr-h) + 32px);
}

body{
  position:relative;
  margin:0;
  font-family:Onest,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.6;
  color:var(--muted-2);
  /* Полотно макета ровное: замер пикселей hero-figma.png даёт #f7f9fc и слева,
     и справа, и внизу. Боковая лавандовая подмешка и одиннадцать радиальных
     пятен были выдумкой прототипа — заказчик читал их как непрофессиональную
     «лилово-пурпурную» гамму. Оставляем плоский фон макета с едва заметным
     подъёмом сверху; фактуру даёт структурная сетка .bg-grid. */
  background:var(--bg-page);
  background-attachment:scroll;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0;text-wrap:pretty}

h1,h2,h3,h4{margin:0;color:var(--ink-2);letter-spacing:-.02em;line-height:1.14}
h1{font-size:var(--fs-h1);font-weight:800;line-height:1.12;letter-spacing:-.02em}
h2{font-size:var(--fs-h2);font-weight:600;line-height:1.209;letter-spacing:0;color:var(--ink)}
h3{font-size:var(--fs-h3);font-weight:600;letter-spacing:-.015em;color:var(--ink-2)}
h4{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink-2);line-height:1.3}

:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px}
::selection{background:var(--blue);color:#fff}

/* Ссылка «к содержимому» для клавиатуры */
.skip{position:absolute;left:-9999px}
.skip:focus{
  left:16px;top:16px;z-index:100;background:var(--blue);color:#fff;
  padding:10px 16px;border-radius:var(--r-sm);text-decoration:none;
}

/* ── Фактура фона ─────────────────────────────────────────────────────────
   Раньше здесь были одиннадцать размытых эллипсов «Glow / *», перенесённых
   из макета. Замер пикселей самого макета показал, что фон в нём ровный
   #f7f9fc — эллипсы существовали только в прототипе и давали ту самую
   лилово-пурпурную гамму. Убраны целиком.
   Структурный фон: тонкая инженерная сетка, привязанная к вьюпорту, чтобы
   маска не зависела от высоты полотна (8600px). Контраст на грани видимости —
   она должна читаться как бумага в клетку, а не как декор. */
/* «Радар сигналов» — шейдерный фон. Раз в 6.5 с из точки за левым нижним углом
   расходится очень широкий мягкий фронт; самой окружности не видно, читается
   только перепад плотности. Когда фронт проходит через фиксированные позиции,
   полтора десятка точек на мгновение проявляются акцентным синим и гаснут.
   Кольца рисовать нельзя — с ними это мгновенно военный HUD из шаблона.

   Буфер один к одному с CSS-пикселями (без множителя плотности): в кадре нет
   мелкой детали, кроме точек, а полноэкранный холст при 1.5× стоил бы вдвое
   с лишним дороже. Ниже 768 холст не создаётся вовсе — там остаётся плоский
   фон и сетка. */
.bg-radar{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0;display:block;
}
@media (max-width:767px){ .bg-radar{display:none} }

.bg-grid{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(to right, rgba(23,52,112,.038) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(23,52,112,.038) 1px, transparent 1px);
  background-size:80px 80px;
  -webkit-mask-image:radial-gradient(135% 95% at 50% 38%,#000 0%,transparent 78%);
  mask-image:radial-gradient(135% 95% at 50% 38%,#000 0%,transparent 78%);
}


/* ── Контейнеры ──────────────────────────────────────────────────────────── */
.wrap{
  width:min(100% - 2 * var(--pad),var(--wrap));
  margin-inline:auto;
  position:relative;
  z-index:1;
}
.wrap--wide{width:min(100% - 2 * var(--pad),var(--wrap-wide))}

.sec{padding-block:var(--sec-y);position:relative}
.sec--tight{padding-block:calc(var(--sec-y) * .72)}

/* Шапка секции */
.sec__head{max-width:820px}
.sec__head--center{margin-inline:auto;text-align:center}
/* На телефоне все шапки секций по левому краю: многострочный лид по центру
   читается хуже, и соседние экраны чередовали выравнивание (П3 списка
   заказчика 30.09, решение пользователя 02.10.2026). Лид секции-иллюстрации
   центрируется своим правилом (C-18), которое грузится позже (components.css),
   поэтому гашение на ступень специфичнее. */
@media (max-width:767px){
  .sec__head--center{margin-inline:0;text-align:left}
  .sec.sec--illo .sec__head--center .lead{margin-inline:0}
}
.sec__head + *{margin-top:var(--head-gap)}

.eyebrow{
  display:block;margin-bottom:14px;
  font:600 11px/1.4 Onest;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue-site);
}
.eyebrow--badge{
  display:inline-block;margin-bottom:20px;padding:7px 12px;
  border-radius:var(--r-xs);background:var(--tile);
  color:var(--blue-site);letter-spacing:.1em;
}

.lead{
  margin-top:18px;
  font-size:16px;
  line-height:1.5625;color:var(--muted-2);
}
.note{margin-top:16px;font-size:13px;line-height:1.6;color:var(--muted-4)}
.note--center{text-align:center}

/* Служебное: доступно скринридеру, скрыто визуально */
.vh{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* Не рвать строку: «15-летним» и подобное — число с дефисом переносилось
   после дефиса («с 15- / летним», D-28 на весь текст, № 9 списка
   заказчика 30.09) */
.nobr{white-space:nowrap}

/* ── Адаптив общего слоя ─────────────────────────────────────────────────
   Перенесено из home.responsive.css (не было скоуплено по #id — правило
   сайта, а не варианта главной). */
@media (max-width:767px){
  /* Стекло на телефоне дорого: blur меньше, часть ореолов убрана */
  :root{--blur-glass:12px;--reveal-y:10px}
}
@media (max-width:639px){
  h2{font-size:clamp(24px,5.8vw,30px)}
}

/* Заголовки секций выравнивают строки по длине (D-10 А) */
.sec__head h2,.split__copy h2{text-wrap:balance}


/* ============================================================================
   НаВстрече — примитивы. Каждый компонент со всеми состояниями:
   default / hover / active / focus-visible / disabled, где применимо.
   ========================================================================= */

/* ── Стекло ──────────────────────────────────────────────────────────────── */
.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-br);
  border-radius:var(--r-3xl);
  box-shadow:var(--glass-sh);
  -webkit-backdrop-filter:blur(var(--glass-blur));
  backdrop-filter:blur(var(--glass-blur));
}
/* Плотное стекло: карточки, лежащие поверх визуала */
.glass--solid{
  background:var(--glass-solid-bg);
  border-color:var(--glass-solid-br);
  box-shadow:var(--glass-solid-sh);
  -webkit-backdrop-filter:blur(var(--glass-solid-blur));
  backdrop-filter:blur(var(--glass-solid-blur));
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgba(255,255,255,.94)}
  .glass--solid{background:rgba(255,255,255,.96)}
  .btn--ghost{background:rgba(255,255,255,.96)}
  .sheet{background:rgba(240,245,253,.99)}
}

/* ── Кнопки ──────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 26px;border:0;border-radius:var(--r-lg);
  font:500 14px/1 Onest;text-align:center;text-decoration:none;
  cursor:pointer;position:relative;isolation:isolate;
  transition:transform var(--dur-micro) var(--ease-swap),
             box-shadow var(--dur-micro) var(--ease-swap),
             background-color var(--dur-micro) var(--ease-swap),
             border-color var(--dur-micro) var(--ease-swap),
             color var(--dur-micro) var(--ease-swap);
}
.btn--primary{
  background:var(--accent-fill);color:#fff;box-shadow:var(--sh-btn);
}
.btn--primary:hover{background:var(--blue-deep);box-shadow:var(--sh-btn-hover);transform:translateY(-1px)}
.btn--primary:active{transform:translateY(0);box-shadow:0 4px 12px rgba(20,71,219,.24)}

.btn--ghost{
  background:var(--ghost-bg);color:var(--blue);
  border:1px solid var(--ghost-br);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
}
.btn--ghost:hover{background:#fff;border-color:rgba(26,89,245,.55);transform:translateY(-1px)}
.btn--ghost:active{transform:translateY(0);background:rgba(240,245,255,.9)}

.btn--lg{min-height:56px;border-radius:var(--r-lg);padding:0 32px;font-size:15px}
.btn--block{width:100%}

.btn[disabled],.btn[aria-disabled="true"]{
  pointer-events:none;opacity:.55;box-shadow:none;transform:none;
}

/* Состояние отправки: подпись уходит, крутится колечко */
.btn[data-state="loading"]{pointer-events:none}
.btn[data-state="loading"] .btn__label{opacity:0}
.btn[data-state="loading"]::after{
  content:"";position:absolute;width:18px;height:18px;border-radius:50%;
  border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  animation:ui-spin .7s linear infinite;
}
.btn--ghost[data-state="loading"]::after{
  border-color:rgba(26,89,245,.25);border-top-color:var(--blue);
}

/* ── Текстовая ссылка со стрелкой ────────────────────────────────────────── */
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  color:var(--blue);font-weight:600;font-size:14px;text-decoration:none;
  transition:color var(--dur-micro) var(--ease-swap);
}
.link-arrow__ico{
  transition:transform var(--dur-micro) var(--ease-swap);
  width:14px;height:14px;flex:none;
}
.link-arrow:hover{color:var(--blue-deep)}
.link-arrow:hover .link-arrow__ico{transform:translateX(3px)}

/* ── Иконки ──────────────────────────────────────────────────────────────── */
.ico{flex:none;color:currentColor}
.ico--14{width:14px;height:14px}
.ico--16{width:16px;height:16px}
.ico--18{width:18px;height:18px}
.ico--20{width:20px;height:20px}
.ico--22{width:22px;height:22px}

/* Плитка под иконкой — фирменный мотив макета */
/* Плитка под иконкой снята с макета, узел 298:1104: квадрат со скруглением
   0,3125 от стороны, заливка не плоская, а вертикальным градиентом
   #e0edff → #f7fbff, и мягкая синяя тень 0 8 18 при 13 % — за счёт неё плитка
   не лежит на фоне, а чуть парит. Плоская заливка --tile осталась запасной:
   на цветных вариантах градиент строится от их собственного тона. */
.icon-tile{
  display:grid;place-items:center;flex:none;
  width:34px;height:34px;border-radius:var(--r-sm);
  background:linear-gradient(180deg,#e0edff 0%,#f7fbff 100%);
  color:var(--blue);
  box-shadow:0 3px 8px rgba(26,89,242,.13);
  transition:background-color var(--dur-fast) var(--ease-swap),
             color var(--dur-fast) var(--ease-swap);
}
.icon-tile--lg{width:56px;height:56px;border-radius:var(--r-lg);
  box-shadow:0 6px 14px rgba(26,89,242,.13)}
.icon-tile--teal  {background:linear-gradient(180deg,var(--tile-teal) 0%,#f4fcfb 100%);
  color:var(--teal);box-shadow:0 3px 8px rgba(20,161,168,.14)}
.icon-tile--violet{background:linear-gradient(180deg,var(--tile-violet) 0%,#f8f6fe 100%);
  color:var(--violet);box-shadow:0 3px 8px rgba(122,94,237,.14)}
.icon-tile--grey  {background:linear-gradient(180deg,var(--tile-grey) 0%,#f8fafc 100%);
  color:var(--muted-3);box-shadow:0 3px 8px rgba(15,31,71,.10)}

/* ── Чипы и бейджи ───────────────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  min-height:30px;padding:0 12px;border-radius:var(--r-xs);
  background:var(--surface-3);border:1px solid var(--line-2);
  font-size:13px;font-weight:500;color:#1c2742;white-space:nowrap;
  transition:background-color var(--dur-micro) var(--ease-swap),
             border-color var(--dur-micro) var(--ease-swap);
}
.chip--accent{background:var(--tile);border-color:transparent;color:var(--blue-site)}

.badge{
  display:inline-flex;align-items:center;
  padding:5px 10px;border-radius:var(--r-xs);
  font-size:12px;font-weight:500;line-height:1.2;white-space:nowrap;
  background:var(--tile);color:var(--blue-site);
  transition:background-color var(--dur-fast) var(--ease-swap);
}
.badge--teal  {background:var(--tile-teal);  color:var(--teal-text)}
.badge--violet{background:var(--tile-violet);color:#5f45c9}
.badge--grey  {background:var(--tile-grey);  color:var(--muted-3)}

/* ── Карточка ────────────────────────────────────────────────────────────── */
.card{
  background:var(--surface);
  border:1px solid var(--line-3);
  border-radius:var(--r-3xl);
  box-shadow:var(--sh-card);
  transition:transform var(--dur-fast) var(--ease-entrance),
             box-shadow var(--dur-fast) var(--ease-entrance),
             border-color var(--dur-fast) var(--ease-entrance);
}
/* Плоская карточка на стекле: тот же случай, что #flow .way на главной
   (home.v2.css) — подложка --surface-2 (#f7f9fd) против фона страницы
   (#f7f9fc, base.css body) на глаз не отличима, карточка сливается
   с фоном. Рецепт главной — стекло вместо плоской заливки; здесь тот же
   рецепт как явный вариант общего слоя (F-01, 2026-09-20), второе
   употребление — about #story. */
.card--glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-br);
  box-shadow:var(--glass-sh);
  -webkit-backdrop-filter:blur(var(--glass-blur));
  backdrop-filter:blur(var(--glass-blur));
}
.card--hover:hover{transform:translateY(-4px);box-shadow:var(--sh-lift);border-color:var(--line-2)}
.card--hover:focus-within{transform:translateY(-4px);box-shadow:var(--sh-lift)}
/* Ховер поднимает карточку, но рамку оставляет стеклянной — как у
   #flow .way.card--hover:hover на главной, иначе светлый контур на
   наведении подменяется серым и читается как мигание. */
.card--glass.card--hover:hover{border-color:var(--glass-br)}

/* Полоса-заметка на всю ширину */
.strip{
  display:flex;align-items:flex-start;gap:14px;
  padding:18px 22px;border-radius:var(--r-3xl);
  background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(244,248,255,.62));
  border:1px solid var(--strip-br);
}
/* Иконка в полосе лежала прямо на фоне — на макете под ней та же плитка */
.strip__ico{
  flex:none;display:grid;place-items:center;
  width:38px;height:38px;border-radius:var(--r-md);
  background:linear-gradient(180deg,#e0edff 0%,#f7fbff 100%);
  color:var(--blue);box-shadow:0 3px 8px rgba(26,89,242,.13);
}
.strip__t{font-weight:600;color:var(--ink-2);font-size:15px;line-height:1.35}
.strip__d{margin-top:4px;font-size:14px;line-height:1.5;color:var(--muted-3)}

.divider{height:1px;background:var(--line-3);border:0;margin:0}

/* ── Табы ────────────────────────────────────────────────────────────────── */
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tab{
  display:flex;align-items:flex-start;gap:12px;
  padding:18px 20px;border-radius:var(--r-3xl);text-align:left;
  background:var(--surface-2);border:1.5px solid transparent;
  cursor:pointer;width:100%;
  transition:background-color var(--dur-fast) var(--ease-swap),
             border-color var(--dur-fast) var(--ease-swap),
             box-shadow var(--dur-fast) var(--ease-swap),
             transform var(--dur-fast) var(--ease-entrance);
}
.tab:hover{background:#fff;box-shadow:var(--sh-card);transform:translateY(-2px)}
.tab[aria-selected="true"]{
  background:#fff;border-color:var(--blue);box-shadow:0 10px 26px -14px rgba(26,89,245,.5);
}
.tab__n{
  display:grid;place-items:center;flex:none;
  width:26px;height:26px;border-radius:50%;
  background:var(--tile-grey);color:var(--muted-3);
  font-size:12px;font-weight:600;
  transition:background-color var(--dur-fast) var(--ease-swap),
             color var(--dur-fast) var(--ease-swap);
}
.tab[aria-selected="true"] .tab__n{background:var(--blue);color:#fff}
.tab__t{font-size:16px;font-weight:600;color:var(--ink-2);line-height:1.25}
.tab[aria-selected="true"] .tab__t{color:var(--blue-site)}
.tab__d{margin-top:3px;font-size:13px;line-height:1.45;color:var(--muted-3)}
.tab__badge{margin-top:10px}

.tabpanels{position:relative;margin-top:22px}
.tabpanel[hidden]{display:none}

/* ── Степпер ─────────────────────────────────────────────────────────────── */
.stepper{display:grid;grid-template-columns:repeat(3,1fr);position:relative}
.step{display:flex;align-items:flex-start;gap:14px;padding:18px 22px;position:relative}
.step__n{
  display:grid;place-items:center;flex:none;
  width:28px;height:28px;border-radius:50%;
  background:var(--track);color:var(--muted-3);font-size:13px;font-weight:600;
  transition:background-color var(--dur-fast) var(--ease-swap),color var(--dur-fast) var(--ease-swap);
}
.step[data-state="current"] .step__n{background:var(--blue);color:#fff}
.step__t{font-size:16px;font-weight:600;color:var(--ink-2)}
.step[data-state="current"] .step__t{color:var(--blue-site)}
.step__d{margin-top:3px;font-size:13px;line-height:1.45;color:var(--muted-3);max-width:26ch}
/* Пунктир между шагами */
.step + .step::before{
  content:"";position:absolute;left:-38px;top:36px;width:56px;
  border-top:1.5px dashed var(--line-strong);
}
/* Подчёркивание активного шага — ширина анимируется из motion.css */
.stepper__bar{
  position:absolute;left:0;bottom:0;height:3px;border-radius:999px;
  background:var(--blue);width:33.333%;
  transition:transform var(--dur-fast) var(--ease-swap);
}

/* ── Индикаторы ──────────────────────────────────────────────────────────── */
.meter{height:6px;border-radius:999px;background:var(--track);overflow:hidden}
.meter__fill{
  height:100%;border-radius:999px;background:var(--blue);
  width:var(--val,0%);
  transition:width var(--dur-slow) var(--ease-entrance);
}
.meter--level{height:5px;background:var(--track)}
.meter--level .meter__fill{background:var(--ok)}

.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.dot--rec{width:10px;height:10px;background:var(--rec)}

/* Пульсирующее кольцо вокруг индикатора записи */
.rec{
  display:grid;place-items:center;flex:none;
  width:40px;height:40px;border-radius:50%;
  background:#fdeced;position:relative;
}
.rec::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(229,72,77,.45);
}
.rec__core{width:14px;height:14px;border-radius:50%;background:var(--rec)}

/* ── Поля формы ──────────────────────────────────────────────────────────── */
.field{display:block;margin-bottom:16px}
.field__label{
  display:block;margin-bottom:8px;
  font-size:14px;font-weight:600;color:var(--ink-2);
}
.field__req{color:var(--rec);margin-left:3px}
.field__ctrl{
  display:block;width:100%;min-height:48px;
  padding:12px 16px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line-2);
  font-size:15px;color:var(--ink-2);
  transition:border-color var(--dur-micro) var(--ease-swap),
             box-shadow var(--dur-micro) var(--ease-swap),
             background-color var(--dur-micro) var(--ease-swap);
}
.field__ctrl::placeholder{color:#98a2b8}
.field__ctrl:hover{border-color:var(--line-strong)}
.field__ctrl:focus{outline:none;border-color:var(--blue);box-shadow:var(--ring)}
.field__ctrl[aria-invalid="true"]{border-color:var(--rec);box-shadow:var(--ring-err)}
.field__ctrl:disabled{background:var(--surface-3);color:var(--muted-4);cursor:not-allowed}
textarea.field__ctrl{min-height:92px;resize:vertical;line-height:1.5}
/* На телефоне кегль поля 16: Safari на iPhone увеличивает страницу при фокусе
   на поле мельче 16 px и сам масштаб не возвращает (О-2 приёмки main, круг 1).
   Формы с этими полями — на главной и на компанийной главной. */
@media (max-width:767px){
  .field__ctrl{font-size:16px}
}

/* Select со своей стрелкой */
.field--select{position:relative}
.field--select .field__ctrl{appearance:none;padding-right:44px;cursor:pointer}
.field--select::after{
  content:"";position:absolute;right:18px;bottom:19px;
  width:10px;height:10px;pointer-events:none;
  border-right:2px solid var(--muted-3);border-bottom:2px solid var(--muted-3);
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--dur-micro) var(--ease-swap);
}
.field--select:focus-within::after{border-color:var(--blue)}

/* Знак внутри поля. Заведено для формы заявки на главной продукта,
   второе употребление — форма компанийной главной, поэтому правило
   переехало сюда из home.layout.css. Отступ слева считается от знака,
   у списка добавляется место справа под собственную стрелку select. */
.field--ico{position:relative}
.field--ico .field__ctrl{padding-left:48px}
.field--ico.field--select .field__ctrl{padding-right:44px}
.field__ico{position:absolute;left:16px;top:15px;color:var(--muted-3);pointer-events:none}

.field__err{
  display:none;margin-top:6px;font-size:13px;color:var(--rec);
}
.field[data-state="error"] .field__err{display:block}

/* Чекбокс */
.check{display:flex;align-items:flex-start;gap:12px;cursor:pointer;margin:20px 0 18px}
.check input{position:absolute;opacity:0;width:0;height:0}
.check__box{
  display:grid;place-items:center;flex:none;
  width:20px;height:20px;margin-top:1px;border-radius:6px;
  background:var(--surface);border:1.5px solid var(--line-2);
  transition:background-color var(--dur-micro) var(--ease-swap),
             border-color var(--dur-micro) var(--ease-swap);
}
.check__box svg{width:12px;height:12px;color:#fff;opacity:0;transition:opacity var(--dur-micro)}
.check:hover .check__box{border-color:var(--line-strong)}
.check input:checked + .check__box{background:var(--blue);border-color:var(--blue)}
.check input:checked + .check__box svg{opacity:1}
.check input:focus-visible + .check__box{box-shadow:var(--ring);border-color:var(--blue)}
.check__t{font-size:13px;line-height:1.5;color:var(--muted-3)}
.check[data-state="error"] .check__box{border-color:var(--rec)}

/* Результат отправки */
.form__result{
  display:none;margin-top:16px;padding:14px 18px;border-radius:var(--r-md);
  font-size:14px;line-height:1.5;
}
.form__result[data-state="success"]{display:block;background:#e8f6ef;color:#1a7a4f}
.form__result[data-state="error"]  {display:block;background:#fdeced;color:#b4262b}

@keyframes ui-spin{to{transform:rotate(360deg)}}

/* Связи схемы: слой поверх колонок, но под карточками */
.flow{position:relative}
.flow__wires{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;overflow:visible;z-index:0;
}
.wire{fill:none;stroke:var(--line-strong);stroke-width:1.5}

/* ── Зона нажатия ────────────────────────────────────────────────────────────
   Контролы внутри UI-мокапа дашборда нарисованы в макете мельче 44px.
   Размер оставляем как в макете, а область попадания расширяем невидимым
   слоем — палец попадает, вид не меняется. */
.iconbtn,.panel__link,.btn--sm,.acts a{position:relative}
.iconbtn::after,.panel__link::after,.btn--sm::after,.acts a::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:max(100%,44px);height:max(100%,44px);
}

/* ============================================================================
   НаВстрече — компоненты, которых не было в «Видеоточке».
   Палитра шире: к синему добавлены фиолетовый, зелёный, красный и янтарный —
   это семантика сигналов радара, а не второй акцент интерфейса.
   ========================================================================= */

/* Темы плитки и бейджа под сигналы */
.icon-tile--risk{background:linear-gradient(180deg,var(--tile-risk) 0%,#fef7f7 100%);
  color:var(--sig-risk);box-shadow:0 3px 8px rgba(229,72,77,.14)}
.icon-tile--obj {background:linear-gradient(180deg,var(--tile-obj) 0%,#fefaf4 100%);
  color:var(--sig-obj);box-shadow:0 3px 8px rgba(224,140,49,.14)}
.icon-tile--pos {background:linear-gradient(180deg,var(--tile-pos) 0%,#f4fbf7 100%);
  color:var(--sig-pos);box-shadow:0 3px 8px rgba(47,158,99,.14)}
.badge--risk{background:var(--tile-risk);color:#c0393d}
.badge--obj {background:var(--tile-obj); color:#b06a1c}
.badge--pos {background:var(--tile-pos); color:#1f7a4b}

/* Чип с иконкой — в первом экране обозначает вариант размещения */
.chip--lg{
  min-height:40px;padding:0 16px;border-radius:var(--r-md);
  background:var(--surface);font-size:14px;font-weight:500;
  box-shadow:var(--sh-card);gap:6px;
}
.chip--lg .ico{width:16px;height:16px}
.chip--lg .ico{color:var(--blue)}
.chip--lg:hover{background:#fff;border-color:var(--line-strong)}

/* Плавающая карточка первого экрана: заголовок, текст, цветная плитка */
.feature{
  display:flex;gap:11px;align-items:flex-start;
  padding:15px 15px 15px 16px;border-radius:var(--r-2xl);
}
.feature__t{font-size:15px;font-weight:600;color:var(--ink-2);line-height:18px}
.feature__d{margin-top:2px;font-size:12.5px;line-height:18px;color:#5a6473}

/* Карточка-вопрос: пример вопроса, строка с плиткой слева. Не элемент
   управления: ни наведения, ни значка «код» — кнопка, которая ничего
   не делает, читалась как недоделанное демо (№ 5 списка заказчика 30.09,
   решение пользователя 02.10.2026 — вариант «статичный список»). */
.qcard{
  display:flex;align-items:center;gap:12px;
  padding:13px 16px;border-radius:var(--r-xl);
  background:var(--surface-2);border:1px solid transparent;
  font-size:14.5px;font-weight:500;color:var(--ink-2);
  text-align:left;width:100%;
}

/* Узел схемы «контекст в процессах» */
.node{
  padding:18px 20px;border-radius:var(--r-3xl);
  background:var(--surface);box-shadow:var(--sh-card);
  border:1px solid var(--line-3);
}
.node__t{font-size:15px;font-weight:600;color:var(--ink-2);margin-bottom:12px}
.node__list{display:grid;gap:9px}
.node__li{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.4;color:var(--muted-3)}
.node__li .ico{color:var(--muted-4);margin-top:2px}

/* Список с галочками — повторяется в карточках размещения и узлах схемы */
.checks{display:grid;gap:10px}
.checks li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--muted-2)}
.checks .ico{color:var(--ink-2);margin-top:2px;flex:none}

/* Спарклайн в карточке сигнала: линия рисуется при появлении */
.spark{width:130px;height:62px;display:block;margin-left:auto;overflow:visible}
.spark__line{fill:none;stroke:var(--sig-c,var(--blue));stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
/* Заливка под кривой была отключена (display:none), и медиазапросы ниже,
   выставлявшие ей opacity, не срабатывали: в карточках оставались тонкие
   голые загогулины вместо графиков макета. */
.spark__area{fill:var(--sig-c,var(--blue));opacity:.12}

/* Счётчик сигналов: подпись слева, число справа */
.counter{
  display:flex;align-items:center;gap:11px;
  padding:12px 16px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line-3);
  transition:border-color var(--dur-fast) var(--ease-swap),
             box-shadow var(--dur-fast) var(--ease-swap);
}
.counter:hover{border-color:var(--line-2);box-shadow:var(--sh-card)}
/* В макете знак сигнала идёт цветом по фону карточки, без плитки */
.counter__i{color:var(--sig-c);flex:none}
.counter__t{font-size:14px;font-weight:500;color:var(--ink-2)}
.counter__v{
  margin-left:auto;font-size:15px;font-weight:600;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}


/* ============================================================================
   НаВстрече — общий слой компонентов.
   Подключается после primitives.css, до chrome.css — каскад должен решаться
   так же, как если бы правило стояло в home.*.css: где на главной компонент
   переопределён по id (#hero, #place, …), тот id всегда специфичнее голого
   класса и побеждает независимо от порядка файлов.
   Реестр — ds/components.md (C-nn). Правит только ds.
   ========================================================================= */

/* ── C-01 · Сетка первого экрана (hero) ──────────────────────────────────────
   Вынесена с главной (было в home.layout.css): текст слева, визуальная часть
   справа. Это базовая раскладка — сам визуал (плавающие карточки, скриншот,
   параллакс) остаётся вариантом главной в #hero (home.v2.css), который всегда
   переопределяет эти голые классы по специфичности id. Взяла страница
   «О компании» (S-01): слева копия, справа — столбец фактов. */
.hero{padding-block:clamp(28px,5.3vw,76px) clamp(26px,3.3vw,48px);position:relative}
.hero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) 644px;
  gap:clamp(24px,2.4vw,32px);align-items:start;
}
@media (max-width:1279px){
  .hero__grid{grid-template-columns:minmax(0,420px) minmax(0,1fr)}
}
@media (max-width:1099px){
  .hero__grid{grid-template-columns:1fr;gap:28px}
}
@media (max-width:767px){
  .hero{padding-top:24px}
}

/* ── C-12 · Заголовок первого экрана ─────────────────────────────────────────
   Вынесен с главной (было #hero h1, home.v2.css + home.responsive.css):
   второе употребление — about S-01. Класс, а не id-скоуп: страница не имеет
   доступа к home.v2.css/home.responsive.css. */
.hero__title{
  font-size:clamp(32px,1.6rem + 1.4vw,44px);
  line-height:1.13;font-weight:800;letter-spacing:-.025em;
  color:var(--ink-2);text-wrap:pretty;
}
@media (max-width:767px){
  .hero__title{font-size:31px}
}

/* ── C-01 (продолжение) · Лид и кнопки первого экрана ─────────────────────────
   Вынесены с главной: базовая `.hero__lead`/`.hero__cta` жила в
   home.layout.css, а `#hero .hero__lead`/`#hero .hero__cta` (home.v2.css)
   переопределяли её под финальный вид главной — id всегда побеждал голый
   класс, поэтому базой стали сразу значения id-варианта. Второе
   употребление — about S-01 (сборщик взял обычный `.lead` и заново собрал
   `.pg-hero-cta`, потому что общего класса не было — F-02).
   Адаптив `.hero__lead` на ≤1099 (home.responsive.css: max-width:none,
   margin-top:24px) на главной не переносится: он был мёртвым кодом под
   `#hero`-скоупом (id есть всегда, медиазапрос его не побеждал) — здесь
   он и остаётся мёртвым, так что вид главной не меняется. Адаптив
   `.hero__cta` на ≤767 (id-скоуп его не перекрывал — flex-direction/btn
   width там не были заданы) переносится как есть: он и был живым. */
.hero__lead{
  margin-top:18px;max-width:430px;
  font-size:17px;line-height:1.6;color:var(--muted);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
@media (max-width:767px){
  .hero__cta{flex-direction:column;align-items:stretch}
  .hero__cta .btn{width:100%}
}

/* ── C-02 · Карточка возможности ─────────────────────────────────────────────
   Плитка иконки + заголовок + описание. На главной — «После встречи остаётся
   готовый рабочий результат» (#result .feats), сетка 4 → 2 → 1. Взяла страница
   «О компании» как факты первого экрана (S-01), карточки инфраструктуры (S-03),
   цифры и утверждения (S-04) и карточки условий работы (S-05). */
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-grid);margin-top:var(--head-gap)}
/* В макете карточка 285×168 — текст плотнее обычного */
.feat{padding:var(--pad-card)}
.feat h3{margin:16px 0 10px;font-size:16px}
.feat p{font-size:13px;line-height:1.45;color:var(--muted-3)}
@media (max-width:1099px){
  .feats{grid-template-columns:1fr 1fr}
}
@media (max-width:767px){
  .feats{grid-template-columns:1fr}
}
@media (max-width:639px){
  .feat{padding:16px}
}

/* Размер плитки иконки для карточки возможности — модификатор примитива
   .icon-tile (primitives.css), 46px вместо базовых 34. */
.icon-tile--lg2{width:46px;height:46px;border-radius:var(--r-lg)}

/* Вариант «факт»: значение карточки — не название, а само число/утверждение
   («15 лет», «1000+ компаний»), крупная строка, по которой пробегает глаз
   (design/about.md S-01, S-04). Второе употребление — about S-01 (факты
   первого экрана) и S-04 (цифры и утверждения), F-A. Кегль ниже h2 секции
   (min 30px) — заголовок карточки не спорит с заголовком секции.
   Значение — класс `.feat__stat`, не привязан к тегу: в S-04 это `<h3>`
   (первый h3 страницы стоит после h2 секции — уровни не пропущены), в S-01
   это `<p>` (h1 → h2 секции ещё не было, `<h3>` был бы пропуском уровня,
   F-09/F-05 круга 2, 2026-09-20). Вес/цвет/трекинг заданы явно, а не
   унаследованы от h3 — иначе на `<p>` они бы не сработали. */
.feat--stat .feat__stat{
  display:block;margin:16px 0 10px;
  font-size:clamp(26px,1.4rem + .4vw,28px);line-height:1.15;
  font-weight:600;letter-spacing:-.015em;color:var(--ink-2);
}


/* ── C-19 · Карточка с иллюстрацией ─────────────────────────────────────────
   Карточка факта с изометрической иллюстрацией слева и текстом справа.
   Первое употребление — «О компании» S-04/S-05; вынесена в общий слой
   решением D-23 А. Модификатор сетки .feats: пары, в столбец на ≤959
   (иллюстрация 180 px и текст рядом не помещаются в половину планшета),
   на ≤639 иллюстрация встаёт над текстом (потолок 220 px).
   Две строки-пружины 1fr вокруг заголовка и текста центрируют их
   относительно иллюстрации, которая занимает все четыре линии. Картинка
   стоит в поле карточки — радиус 12 (C-07). */
.illo-cards{grid-template-columns:1fr 1fr}
@media (max-width:959px){
  .illo-cards{grid-template-columns:1fr}
}
.illo-cards__pic{display:block;line-height:0;grid-row:1 / -1}
.illo-cards__pic img{display:block;width:100%;height:auto;border-radius:var(--r-md)}
.illo-cards .feat{
  display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);
  grid-template-rows:1fr auto auto 1fr;
  gap:6px 20px;align-items:center;
}
.illo-cards h3,.illo-cards .feat__stat{grid-row:2;margin:0}
.illo-cards p{grid-row:3}
/* Правка 01.10.2026 по обратной связи 30.09 (вариант Б2, решение
   пользователя). Раньше на ≤639 иллюстрация вставала над текстом с потолком
   220 px: в карточке шириной 358 это оставляло справа около 120 px пустоты,
   а две секции по четыре карточки занимали на телефоне 3650 px. Карточка
   остаётся горизонтальной, иллюстрация ужимается со 180 до 112 px — строка
   сетки, зазор и центрирование берутся из базового правила выше.
   Высота «О компании» на 390: 9015 → 7606. */
@media (max-width:639px){
  .illo-cards .feat{grid-template-columns:112px minmax(0,1fr);column-gap:16px}
  .illo-cards__pic{max-width:112px}
}

/* ── C-18 · Секция-иллюстрация ─────────────────────────────────────────────
   Одна широкая иллюстрация под центрированной шапкой секции, значения
   главной (D-03 А, D-22 А): лид под заголовком на 18, как на главной;
   картинка под шапкой — на --head-gap, общий зазор новых страниц (D-14 Б).
   Ниже 959 картинка не вписывается, а
   прокручивается внутри рамки: вписанная в телефон схема дала бы подписи
   кеглем около трёх пикселей. */
.sec--illo .sec__head{max-width:1080px}
.sec--illo .sec__head .lead{max-width:882px;margin-inline:auto;margin-top:18px}
.illo{line-height:0}
.illo__img{width:100%;height:auto;display:block;border-radius:var(--r-illo)}
@media (max-width:959px){
  .illo{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-illo)}
  .illo__img{width:1100px;max-width:none;border-radius:0}
}

/* ── C-03 · Информационные полосы ────────────────────────────────────────────
   Базовая полоса .strip и её плитка/текст — уже примитив (primitives.css).
   Здесь — три варианта состава, снятые с главной как есть. */

/* С кнопкой справа (#flow «Одна платформа — разные способы поступления
   встреч»). Взяла «О компании» как итоговая полоса пути (S-02, без кнопки —
   с кнопкой в конце пути) и полоса с кнопкой перед подвалом (S-06). */
.strip--cta{align-items:center;margin-top:22px;gap:18px;flex-wrap:wrap}
.strip--cta .strip__acts{display:flex;align-items:center;gap:18px;margin-left:auto;flex-wrap:wrap}
@media (max-width:959px){
  .strip--cta{flex-direction:column;align-items:flex-start}
  .strip--cta .strip__acts{margin-left:0}
}
@media (max-width:767px){
  .strip--cta .strip__acts{width:100%}
  .strip--cta .btn{width:100%;justify-content:center}
}

/* Одна строка, по центру (#signals «Каждый сигнал связан…»). Взяла
   «О компании» как итоговая фраза ленты этапов (S-02). */
.strip--note{margin-top:24px;align-items:center;max-width:440px}
.strip--note .strip__t{font-size:14px;line-height:1.4}

/* Модификатор полной ширины: снимает max-width у .strip--note, когда полосе
   нужно растянуться на весь контейнер (решение пользователя 2026-09-22,
   about S-02 «Технологии менялись…»). Поля, радиус, фон, выравнивание и
   кегль текста — не трогает, только ширина. */
.strip--note.strip--wide{max-width:none}

/* Из трёх пунктов с разделителями (#templates, под вкладками). Взяла
   «О компании» как юридическая справка (S-05). */
.strip--three{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  padding:28px;margin-top:22px;align-items:flex-start;
}
.strip__item{display:flex;gap:12px;align-items:flex-start}
@media (max-width:1099px){
  .strip--three{grid-template-columns:1fr;gap:16px}
}

/* ── C-04 · Полоса доверия ────────────────────────────────────────────────────
   Бегущая лента логотипов клиентов, целиком с главной (id="trust" вне
   какой-либо секции — уже общий элемент, не вариант). Страница «О компании»
   употребляет её как есть (решение Р-3 А), с теми же двенадцатью знаками.
   Приём снят замером с hero gong.io, но размещение другое: у них полоса стоит
   отдельной секцией под первым экраном, у нас живёт внутри колонки текста, под
   кнопками на главной. Место там и так пустовало, и первый экран не становится
   выше ни на пиксель — полоса видна без прокрутки. Плата: в кадре стоит
   три-четыре знака вместо восьми, остальные приезжают лентой. Знаки приведены
   к одному тону, лента едет медленно и продублирована для бесшовности. Ещё
   отличие: при наведении лента встаёт, а знак под курсором проявляется своим
   фирменным цветом. Цвет не потерян при перекраске — каждый дополнительный
   цвет знака вынесен в свою переменную --lN с запасным значением currentColor,
   поэтому в покое знак одноцветный, а на ховере палитра возвращается без
   второй копии файла. У Полисорба, ЕКС и Digis в наборе только негативные
   версии: фирменного цвета взять неоткуда, они уходят в чернила. ЮФУ и «Опека»
   растровые — у них монохром это маска по альфе, а цвет отдельным слоем.
   Размеры у каждого знака свои: у словесного знака и круглой печати при
   равной высоте разная зрительная масса, поэтому общей высоты ряда здесь нет. */
.trust{
  --ts:1;--gap:56px;
  padding-block:20px 0;position:relative;z-index:1;
}
/* Поле сверху ступенями шкалы, а не clamp: промежуточные значения clamp
   выпадали из шкалы отступов (D-12 Б) */
@media (max-width:1279px){.trust{padding-top:16px}}
@media (max-width:959px){.trust{padding-top:12px}}
@media (max-width:767px){.trust{padding-top:10px}}
.trust__cap{
  margin:0 0 20px;text-align:center;
  font-size:15px;font-weight:600;letter-spacing:-.005em;color:var(--blue-site);
}
.trust__mask{
  overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.trust__track{
  display:flex;width:max-content;align-items:center;gap:var(--gap);
  animation:trust-run 52s linear infinite;
}
/* половина минус половина зазора — иначе на стыке копий появляется лишний шаг */
@keyframes trust-run{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - var(--gap) / 2))}
}
.trust__mask:hover .trust__track,
.trust__mask:focus-within .trust__track{animation-play-state:paused}

/* Переходов здесь нет намеренно: color умеет анимироваться, а подстановка --lN
   происходит мгновенно, и знак из двух цветов проявлялся по частям — у DDX
   оранжевое слово опережало бирюзовое. Одновременность важнее плавности. */
.tl{
  position:relative;flex:none;display:block;
  height:calc(var(--h) * 1px * var(--ts));color:var(--muted-3);
}
.tl svg{display:block;height:100%;width:auto}
.tl__m{
  display:block;height:100%;aspect-ratio:var(--ar);background:currentColor;
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;
}
.tl__c{
  position:absolute;inset:0;background:var(--c) center/contain no-repeat;opacity:0;
}
/* монохромный слой гасим только там, где под ним лежит цветной: у Полисорба
   цветной версии нет, и общее правило заставляло знак исчезать на ховере */
.tl:hover .tl__c{opacity:1}
.tl--sfedu:hover .tl__m,.tl--opeka:hover .tl__m{opacity:0}

.tl--ttk:hover      {color:#1a1b1b;--l2:#dd2538}
.tl--tsu:hover      {color:#0072bc;--l2:#231f20}
.tl--uis:hover      {color:#0000aa}
.tl--ddx:hover      {color:#12d8d8;--l2:#ff7d20}
.tl--dialogi:hover  {color:#4c4af3}
.tl--finbridge:hover{color:#22093b;--l2:#722ea5}
.tl--extyl:hover    {color:#000;--l2:#f20036}
.tl--polisorb:hover,.tl--digis:hover{color:var(--ink-2)}
/* у ЕКС темнеет только надпись: квадратный знак с лучами при затемнении
   превращается в чёрное пятно и перетягивает на себя весь ряд, поэтому
   он приколот к общему тону явным значением, а не наследует color */
.tl--eks:hover{color:var(--ink-2);--l2:var(--muted-3)}

.tl--ttk{--h:20}
.tl--tsu{--h:34}
.tl--uis{--h:28}
.tl--ddx{--h:26}
.tl--polisorb{--h:24;--ar:247/39;--m:url("/img/v9a/f86b68528045.png")}
.tl--dialogi{--h:22}
.tl--eks{--h:32}
/* Знак Finbridge собран из трёх слоёв: лаймовая плашка сзади, фиолетовая копия
   со смещением и тёмная сверху. Плашка выезжает из-под знака светлым язычком,
   а на ховере лаймом перекрывает сам знак — гасим её в обоих состояниях. */
.tl--finbridge{--h:24;--l3:transparent}
.tl--digis{--h:20}
.tl--extyl{--h:48}
.tl--sfedu{--h:40;--ar:130/120;--m:url("/img/v9a/8c9da7e6b78b.png");--c:url("/img/v9a/96fad2f1dc7b.png")}
.tl--opeka{--h:40;--ar:140/121;--m:url("/img/v9a/92572525625e.png");--c:url("/img/v9a/396a7625f9c9.png")}

@media (prefers-reduced-motion:reduce){.trust__track{animation:none}}
@media (max-width:959px){
  .trust{--ts:.78;--gap:36px}
  .trust__cap{margin-bottom:14px;font-size:14px}
}


/* ============================================================================
   Схема «встречи → контекст → рабочие системы».
   Переехала из assets/css/home.v2.css на втором употреблении: та же схема
   стоит на странице продукта (index #context) и на компанийной главной
   (main.html). Геометрия жёсткая, обоснование — в комментарии ниже.
   ========================================================================= */
/* ── 8 · Контекст встреч: схема на строгой сетке ──────────────────────────
   Прежняя схема разъезжалась: шесть блоков начинались на шести разных высотах
   (132, 196, 247, 324, 483, 504), связи существовали, но были длиной 37 px и
   на экране не читались. Здесь геометрия задана жёстко — три колонки
   202 / 222 / 238, общая ось 190, адресаты по 116 с центрами 58 / 190 / 322,
   три ветви из общего ствола. Ниже 1100 схема разворачивается в столбик:
   абсолютные координаты там неприменимы. */
.cx-schema{position:relative;display:grid;gap:14px}
.cx-slab,.cx-halo,.cx-wires,.cx-dot{display:none}
.cx-node{border-radius:18px;padding:16px;
  background:var(--glass-solid-bg);border:1px solid var(--glass-solid-br);
  box-shadow:0 1px 2px rgba(15,31,71,.04), 0 14px 32px -14px rgba(15,31,71,.20);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.cx-t{margin:0 0 10px;font-size:13.5px;font-weight:600;color:var(--ink-2);
  display:flex;align-items:center;gap:9px}
.cx-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-md);
  background:var(--tile);color:var(--blue);margin:0 auto 12px}
.cx-list{display:grid;gap:8px}
.cx-li{display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.35;
  color:var(--muted-3)}
.cx-li .ico{flex:none;color:var(--blue);margin-top:1px}
.cx-node--in .cx-t{justify-content:center}
.cx-node--hero{padding:18px;border-radius:var(--r-2xl);
  background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.96);
  box-shadow:0 2px 4px rgba(15,31,71,.05), 0 26px 54px -20px rgba(20,71,219,.28)}
.cx-node--hero .cx-t{justify-content:center;font-size:15px;margin-bottom:12px}
.cx-logo{display:block;margin:0 auto 12px}
.cx-node--out .cx-t{margin-bottom:10px}
/* Чипы внутри схемы мельче общесайтовых: карточка-адресат держит высоту 116,
   а базовые 30 px по высоте и 12,5 по кеглю выбивали пять чипов «Поручений»
   на третью строку и вываливали их за карточку. */
.cx-node .chips{gap:6px}
.cx-node .chip{min-height:24px;padding:0 9px;font-size:11.5px;font-weight:400;
  background:var(--surface-3);border-color:var(--line-3);color:var(--muted-2)}
/* Подпись висит под главным узлом и не участвует в его центрировании:
   иначе колонка центрировала «карточку + подпись» как одно целое, карточка
   уезжала вверх на 22 px, и связь от «Встреч» приходила не в её центр.
   Отрицательное поле снизу равно высоте подписи вместе с её отступом. */
.cx-badge{display:inline-flex;align-items:center;gap:7px;margin:12px auto -44px;
  padding:7px 11px;border-radius:var(--r-sm);background:#eef3fe;color:var(--blue);
  font-size:11.5px;font-weight:500;white-space:nowrap}
.cx-srcs{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:22px;
  padding:14px 24px;border-radius:var(--r-3xl);
  background:var(--glass-bg);border:1px solid var(--glass-br);
  box-shadow:var(--glass-sh);
  -webkit-backdrop-filter:blur(var(--glass-blur));backdrop-filter:blur(var(--glass-blur))}
.cx-srcs__t{margin:0;font-size:14px;font-weight:600;color:var(--ink-2);flex:0 0 auto}
.cx-src{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted-2)}
.cx-src .icon-tile{width:30px;height:30px;border-radius:var(--r-sm)}
/* Ниже 1100 схема идёт столбиком. Адресаты («Поручения», «Документы»,
   «Корпоративный ИИ») стояли вплотную — у их колонки не было зазора; на
   телефоне пункты полосы источников переносились как придётся: заголовок
   в строке с «ВКС», дальше по два и по одному (П2 списка заказчика 30.09). */
@media (max-width:1099px){
  .cx-col--out{display:grid;gap:12px}
}
@media (max-width:767px){
  .cx-srcs{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
  .cx-srcs__t{grid-column:1 / -1}
}

/* Сетка «текст слева — визуал справа». Жила в стилях главной
   (home.layout.css:240, home.responsive.css:29) и переехала сюда на втором
   употреблении — секция «Контекст встреч» компанийной главной собиралась
   без неё своей сеткой и разошлась с главной (F-01 приёмки main, круг 1).
   Значения и порядок правил те же, вид главной не меняется. */
.split{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center}
.split__copy .lead{max-width:44ch}
/* Широкий вариант — «Контекст встреч». Стоит раньше адаптива ниже:
   пока он жил в home.layout.css, файл главной грузился после общего слоя,
   и его две колонки перебивали столбик на ≤1099 — гейт главной поймал
   это на 768 и 390 при первой попытке переноса. */
.split--wide{grid-template-columns:minmax(0,390px) minmax(0,1fr)}
@media (max-width:1099px){
  .split,.split--wide{grid-template-columns:1fr;gap:28px}
  .split__copy .lead{max-width:none}
}

@media (min-width:1100px){
  #context .split--wide{grid-template-columns:minmax(0,430px) 714px;gap:56px;
    align-items:center}
  .cx-schema{display:block;width:714px;height:380px}
  .cx-slab{display:block;position:absolute;inset:-22px -24px;border-radius:30px;
    background:var(--glass-bg);border:1px solid var(--glass-br);
    box-shadow:0 24px 60px rgba(15,31,71,.10);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:0}
  .cx-halo{display:block;position:absolute;left:228px;top:70px;width:222px;height:240px;
    border-radius:40px;z-index:0;filter:blur(18px);
    background:radial-gradient(60% 55% at 50% 50%, rgba(26,89,245,.16), transparent 70%)}
  .cx-wires{display:block;position:absolute;inset:0;width:714px;height:380px;
    pointer-events:none;z-index:1;overflow:visible}
  .cx-w{fill:none;stroke:url(#cxlg);stroke-width:1.25;vector-effect:non-scaling-stroke}
  .cx-col{position:absolute;top:0;height:380px;display:flex;flex-direction:column;
    justify-content:center;z-index:2}
  .cx-col--in {left:0;    width:202px}
  .cx-col--mid{left:228px;width:222px}
  .cx-col--out{left:476px;width:238px;justify-content:space-between}
  .cx-node--out{height:116px;display:flex;flex-direction:column;justify-content:center}
  .cx-node{background:rgba(255,255,255,.9);border-color:rgba(255,255,255,.95)}
  /* Полоса источников по ширине равна плите схемы, а не блоку: плита выходит
     за блок на 24 px в каждую сторону, и без этого её правый край не совпадал
     с краем полосы — расхождение 24 px было видно на глаз.
     Отступ сверху считается от плиты, а не от сетки: плита поднимается
     на 22 px, поэтому 30 px превращались в зазор 8. */
  .cx-srcs{margin-top:56px;margin-inline-end:-24px}
  .cx-srcs__t{flex:0 0 260px}
  .cx-src{flex:1;justify-content:center;border-left:1px solid var(--line-2)}
}
/* На 1100–1279 поля по бокам контейнера — 24…40 px, и выступ плиты схемы
   и полосы источников на 24 px вправо упирал их в край окна: слева поле 24,
   справа 0 (О-4 и F-12 приёмки main; то же было на главной). Здесь выступа
   справа нет — оба правых края стоят по краю контейнера и совпадают друг
   с другом. От 1280 всё как было. */
@media (min-width:1100px) and (max-width:1279px){
  .cx-slab{right:0}
  .cx-srcs{margin-inline-end:0}
}
/* От 1280 выступ плиты сохранён с обеих сторон, но вся схема сдвинута
   внутрь сетки на его ширину — за счёт колонки текста (430 → 406): плита
   и полоса источников кончаются на правом крае контента, как все остальные
   секции (П1 списка заказчика 30.09, решение пользователя 02.10.2026). */
@media (min-width:1280px){
  #context .split--wide{grid-template-columns:minmax(0,406px) 714px}
  .cx-srcs{margin-inline-end:0}
}

/* Точки едут по связям, карточка отвечает вспышкой рамки. Обе анимации —
   CSS и одной длительности: отклик сдвинут ровно на оборот, поэтому вспышка
   приходится на миг прибытия и не разъезжается со временем. */
@media (min-width:1100px){
  #context{--cyc:2.8s}
  .cx-dot{display:block;position:absolute;left:0;top:0;width:7px;height:7px;
    border-radius:50%;background:var(--blue);z-index:1;
    box-shadow:0 0 0 4px rgba(26,89,245,.12);
    offset-rotate:0deg;offset-distance:0%;
    animation:cx-ride var(--cyc) linear infinite}
  .cx-dot--1{offset-path:path('M450 190 H455 Q463 190 463 182 V66 Q463 58 471 58 H476');
    animation-delay:0s}
  .cx-dot--2{offset-path:path('M450 190 H476');animation-delay:.55s}
  .cx-dot--3{offset-path:path('M450 190 H455 Q463 190 463 198 V314 Q463 322 471 322 H476');
    animation-delay:1.1s}
  .cx-node--out{--d:0s;animation:cx-edge var(--cyc) cubic-bezier(.22,1,.36,1) infinite;
    animation-delay:calc(var(--d) + var(--cyc))}
  .cx2{--d:.55s} .cx3{--d:1.1s}
}
@keyframes cx-ride{
  0%{offset-distance:0%;opacity:0}
  8%{opacity:1}
  88%{opacity:1}
  100%{offset-distance:100%;opacity:0}
}
@keyframes cx-edge{
  0%{border-color:rgba(26,89,245,.85);
     box-shadow:0 0 0 3px rgba(26,89,245,.14), 0 14px 32px -14px rgba(15,31,71,.20)}
  30%,100%{border-color:rgba(255,255,255,.95);
     box-shadow:0 0 0 0 rgba(26,89,245,0), 0 14px 32px -14px rgba(15,31,71,.20)}
}
@media (prefers-reduced-motion:reduce){
  .cx-dot{display:none}
  .cx-node--out{animation:none}
  .cx-w{stroke:var(--line-strong)}
}

/* ── C-16 · Секция демонстрации ──────────────────────────────────────────────
   Три колонки на общей сетке 1200 (420 + 20 + 340 + 20 + 400): рассказ,
   визуал, форма заявки. Жила в стилях главной (home.layout.css,
   home.responsive.css) и переехала сюда на втором употреблении —
   компанийная главная собирала её копией, и копии разошлись: форма 380
   против 400 на 1024, поле формы 26 против 20 и контакты в строку против
   столбика на 390 (F-03 приёмки main, круг 1). Значения и порядок правил
   те же, вид главной не меняется.
   Визуал в середине у каждой страницы свой: .demo__stage с наклонённой
   плоскостью — на главной, картинка .pg-demo__stage — на компанийной. */
.demo{
  display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr) 400px;
  gap:20px;align-items:start;
}
.demo__copy h2{text-wrap:balance}
.demo__copy h2{margin-bottom:16px}
/* Заголовок финала выходит за колонку рассказа в зазор и на край визуала:
   в 420 px после неразрывного «на&nbsp;вашем» (D-28) он вставал в четыре
   строки по слову. Визуал центрирован по высоте ряда и начинается ниже
   двух строк заголовка — наложения нет (замер на 1440 и 1100). */
@media (min-width:1100px){
  .demo__copy h2{margin-inline-end:-64px}
}
.demo__copy .lead{max-width:44ch}
.demo__eyebrow{margin:32px 0 16px}
.demo__list{display:grid;gap:22px}
.demo__list li{display:flex;gap:16px;align-items:flex-start}
.demo__t{font-size:16px;font-weight:600;color:var(--ink-2);line-height:1.3}
.demo__d{margin-top:6px;font-size:14px;line-height:1.5;color:var(--muted-3)}
.demo__contacts{display:flex;flex-wrap:wrap;gap:26px;margin-top:32px}
.demo__contacts a{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;
  font-size:14px;color:var(--muted-2);text-decoration:none;
  transition:color var(--dur-micro) var(--ease-swap);
}
.demo__contacts a:hover{color:var(--blue)}
.demo__contacts .ico{color:var(--muted-3)}
.demo__form{padding:26px}
.demo__form-d{margin:10px 0 22px;font-size:15px;line-height:1.5;color:var(--muted-3)}
.demo__form .field{margin-bottom:12px}
.demo__form textarea.field__ctrl{min-height:104px;padding-top:14px}
.demo__form .btn{margin-top:10px}
.demo__note{
  display:flex;gap:10px;align-items:flex-start;margin-top:14px;
  font-size:13px;line-height:1.5;color:var(--muted-4);
}
.demo__note .ico{flex:none;margin-top:2px;color:var(--muted-4)}
@media (max-width:1099px){
  .demo{grid-template-columns:minmax(0,1fr) 400px;gap:24px;align-items:start}
}
@media (max-width:959px){
  .demo{grid-template-columns:minmax(0,1fr)}
  .demo__form{max-width:520px}
}
@media (max-width:767px){
  .demo__form{padding:20px}
  .demo__contacts{gap:12px;flex-direction:column}
}

/* ── C-20 · Точки ленты ────────────────────────────────────────────────────
   Под лентой, которая листается вбок со снапом: мишень 44, знак 8 px,
   текущая — пилюля 22 px в синем. Разметку собирает скрипт ленты:
   div.dots[role=group] > button.dots__b[aria-label][aria-current].
   Второе употребление — лента шаблонов на странице НаВстрече (№ 3 списка
   заказчика 30.09); первое — лента схем «Видеоточки» (D-37), переехало сюда. */
.dots{display:flex;justify-content:center;margin-top:4px}
.dots__b{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer}
.dots__b::before{content:"";width:8px;height:8px;border-radius:var(--r-pill);background:var(--line-strong);
  transition:width var(--dur-fast) var(--ease-swap),background-color var(--dur-fast) var(--ease-swap)}
.dots__b[aria-current="true"]::before{width:22px;background:var(--accent)}
.dots__b:focus-visible{border-radius:var(--r-sm)}
@media (prefers-reduced-motion:reduce){ .dots__b::before{transition:none} }


/* ============================================================================
   НаВстрече — шапка, мобильная шторка и подвал. Общие для всех страниц.
   Перенесено из блоков «раскладка секций» и «адаптив» главной v6.
   ========================================================================= */

/* ── Шапка C-09, редакция 2 ───────────────────────────────────────────────
   Вариант 5 «Знак-ссылка с предпросмотром» (решение пользователя 01.10.2026,
   D-32; стенд и замеры — design/ds-stands/header-v5/). Шапка сохраняет то,
   что задавала C-09: стекло .glass, липкость, контейнер --wrap-wide 1280,
   высоту --hdr-h и компактный режим после прокрутки. Новое — ряд продуктов
   со знаками в плитках под меткой «Продукты», предпросмотр продукта под шапкой
   и шторка, которая начинается с карточек продуктов. Поведение — site.js. */
/* ── Место шапки ──────────────────────────────────────────────────────────
   Высота места постоянна, поэтому страница под шапкой не сдвигается, когда
   шапка становится компактной. Отрицательный top держит прилипшую шапку
   в 12 px от края окна — столько же, сколько на телефоне. Прозрачное место
   не перехватывает нажатия у контента под ним. */
.hdr-slot{
  position:sticky;top:-12px;z-index:60;
  height:calc(24px + var(--hdr-h));
  padding:24px var(--pad) 0;
  pointer-events:none;
}
.hdr{
  position:relative;z-index:2;pointer-events:auto;
  max-width:var(--wrap-wide);margin-inline:auto;
  display:flex;align-items:center;gap:20px;
  min-height:var(--hdr-h);padding:0 12px 0 24px;
  transition:min-height var(--dur-fast) var(--ease-swap),
             box-shadow var(--dur-fast) var(--ease-swap),
             background-color var(--dur-fast) var(--ease-swap);
}
.hdr-slot[data-state="scrolled"] .hdr{
  min-height:56px;
  background:var(--ghost-bg);
  box-shadow:var(--sh-header-scrolled);
}

/* ── Компания: голый словесный знак ─────────────────────────────────────── */
/* Фокус на пунктах полосы шапки не прокручивает страницу. У html стоит
   scroll-padding-top (место шапки + 32, base.css) — для якорей, а липкая
   шапка лежит внутри этой зоны, и браузер считал её пункты закрытыми:
   Tab по шапке и возврат фокуса на бургер после Esc сдвигали прокрученную
   страницу вверх на 460 px. Отрицательное поле опускает верх пункта ниже
   зоны отступа. Только полоса .hdr: в шторке своя прокрутка, и там такое
   поле прятало бы верхний пункт при обходе вверх. */
.hdr a,.hdr button{scroll-margin-top:calc(-1 * (var(--hdr-h) + 52px))}
.hdr__co{display:flex;align-items:center;min-height:44px;flex:none;border-radius:var(--r-xs)}
.hdr__co img{height:32px;width:auto}

/* ── Плитка знака продукта ──────────────────────────────────────────────── */
/* Осталась от редакции 2: в строке шапки продуктов больше нет (D-44),
   но карточки шторки показывают знак в плитке — там он стоит внутри
   карточки продукта, а не рядом со знаком компании. */
.hprod__tile{
  flex:none;display:grid;place-items:center;
  width:40px;height:40px;
  border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--line-soft);
  box-shadow:var(--sh-tile);
  transition:transform var(--dur-micro) var(--ease-swap),
             box-shadow var(--dur-micro) var(--ease-swap);
}
.hprod__tile img{width:26px;height:26px}

/* ── Компания: разделы и призыв ─────────────────────────────────────────── */
.hdr__nav{display:flex;align-items:center;gap:24px;margin-left:auto}
/* Только прямые дети: полка живёт внутри ряда (ради порядка обхода Tab),
   и без > её карточки-ссылки попадали под правила пункта меню — inline-flex
   поверх сетки и nowrap, отчего полка вырастала с 271 до 506 px. */
.hdr__nav > a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--fs-card);color:var(--text-menu);text-decoration:none;white-space:nowrap;
  transition:color var(--dur-micro) var(--ease-swap);
}
.hdr__nav > a:hover{color:var(--text-heading)}
.hdr__nav > a[aria-current="page"]{color:var(--accent);font-weight:600}
/* Вход в развилку продуктов отличается от разделов компании весом и цветом
   текста, а не знаком: второго фирменного знака в строке нет (D-44). */
.hdr__prodlink{font-weight:600;color:var(--text-heading)}
.hdr__prodlink:hover{color:var(--accent)}
.hdr__cta{flex:none}
.hdr__cta-s{display:none}
/* Ряд разделов — по центру полосы, а не прижат к призыву (замечание
   заказчика 04.10.2026). Флексом этого не сделать честно: при знаке 118 px
   слева и призыве 215 px справа ряд уезжает влево на 48 px. Поэтому от 1100,
   где ряд вообще виден, полоса становится сеткой из трёх колонок: знак,
   центр, призыв — центральная колонка стоит по середине полосы независимо
   от того, насколько разной ширины её соседи. Ниже 1100 ряд уходит в шторку,
   и полоса остаётся флексом с прежними уступками. */
@media (min-width:1100px){
  .hdr{display:grid;grid-template-columns:1fr auto 1fr}
  .hdr__co{justify-self:start}
  .hdr__nav{margin-left:0;justify-self:center}
  .hdr__cta{justify-self:end}
}

/* ── Полка продуктов (D-45, вариант 1 стенда design/ds-stands/hdr-peek/) ──
   Раскрывается под полосой по наведению на «Продукты» или по фокусу в ряду.
   Во всю ширину полосы: два продукта рядом, одинаковой ширины — в строке
   они равны, и в полке тоже. Фон непрозрачный: полка ложится на заголовок
   первого экрана, сквозь стекло (.86) он читался под её текстом. Тень
   уровня 2 — та же, что у стекла шапки. Мостик ::before закрывает зазор
   8 px, чтобы курсор не ронял полку по дороге вниз.
   Полки нет в раскладке, пока не взведена (data-armed, site.js): до этого
   её ленивые снимки (22 и 3 КБ) не грузятся. */
.hshelf{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:2;
  display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:16px;
  background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r-card);box-shadow:var(--elev-2);
  opacity:0;transform:translateY(-4px);
  transition:opacity var(--dur-fast) var(--ease-swap),
             transform var(--dur-fast) var(--ease-swap);
}
.hshelf[data-armed]{display:grid}
.hshelf::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:12px}
.hshelf[data-open]{opacity:1;transform:translateY(0)}
.hcard{
  display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;
  padding:12px;border-radius:var(--r-lg);background:var(--surface-soft);
  color:inherit;text-decoration:none;
  transition:background-color var(--dur-micro) var(--ease-swap);
}
.hcard:hover{background:var(--surface-sunken)}
.hcard[aria-current="page"]{background:var(--accent-wash)}
.hcard__img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-sm);display:block}
.hcard__body{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:4px 4px 4px 0}
.hcard__k{font-size:var(--fs-label);font-weight:600;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.hcard__n{margin-top:4px;font-size:var(--fs-h3);font-weight:600;line-height:1.25;color:var(--text-heading)}
.hcard__p{margin-top:6px;font-size:var(--fs-card);line-height:1.45;color:var(--text-body)}
.hcard__pts{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.hcard__pt{display:flex;align-items:flex-start;gap:8px;font-size:var(--fs-caption);line-height:1.4;color:var(--text-caption)}
.hcard__pt .ico{margin-top:1px;color:var(--accent)}
.hcard__go{margin-top:12px}
.hcard:hover .hcard__go{color:var(--accent-hover)}

/* ── Бургер (≤1099) — рисунок C-09, превращается в крестик ───────────────── */
.burger{
  display:none;flex:none;width:44px;height:44px;
  align-items:center;justify-content:center;
  padding:0;background:transparent;border:0;border-radius:var(--r-lg);cursor:pointer;
  color:var(--text-heading);
}
.burger span{
  display:block;width:20px;height:2px;border-radius:var(--r-pill);
  background:currentColor;position:relative;
  transition:background-color var(--dur-fast) var(--ease-swap);
}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;
  border-radius:var(--r-pill);background:currentColor;
  transition:transform var(--dur-fast) var(--ease-swap),top var(--dur-fast) var(--ease-swap);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ── Шторка (≤1099) ────────────────────────────────────────────────────────
   Живёт внутри места шапки (оно липкое, без transform и filter, поэтому
   fixed считается от окна) и ниже полосы шапки по z-index.
   Во весь экран, под шапкой: шапка остаётся сверху, её бургер закрывает
   шторку. Содержимое начинается под шапкой (отступ сверху — место шапки
   плюс 12). Продукты — первыми, карточками с тем же снимком и обещанием,
   что в предпросмотре на десктопе. */
.sheet{
  position:fixed;inset:0;z-index:1;overflow-y:auto;pointer-events:auto;
  padding:0 var(--pad) 24px;
  background:var(--sheet-bg);
  -webkit-backdrop-filter:blur(var(--blur-strong));backdrop-filter:blur(var(--blur-strong));
}
.sheet[hidden]{display:none}
.sheet__in{display:flex;flex-direction:column;max-width:720px;margin:calc(36px + var(--hdr-h)) auto 0}
/* Зона под полосой шапки — та же, что верхний отступ содержимого: на низком
   окне обход Tab вверх по шторке иначе оставлял первую карточку под шапкой. */
.sheet{scroll-padding-top:calc(36px + var(--hdr-h));scroll-padding-bottom:8px}
.sheet__h{margin:0 0 10px;font-size:var(--fs-footnote);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-footnote)}
.sheet__prods{display:grid;gap:12px;margin:0 0 28px;padding:0;list-style:none}
.sprod{
  display:flex;align-items:center;gap:14px;
  min-height:88px;padding:12px;
  border-radius:var(--r-card);
  background:var(--surface);border:1px solid var(--line-soft);box-shadow:var(--elev-1);
  color:var(--text-heading);text-decoration:none;
}
.sprod:hover{box-shadow:var(--elev-3)}
.sprod[aria-current="page"]{border-color:var(--ghost-br);background:var(--surface-soft)}
.sprod__img{flex:none;width:88px;height:64px;object-fit:cover;border-radius:var(--r-xs)}
.sprod__body{display:flex;flex-direction:column;gap:6px;min-width:0}
.sprod__top{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.hprod__tile--sm{width:28px;height:28px;border-radius:var(--r-xs)}
.hprod__tile--sm img{width:20px;height:20px}
.sprod__name{font-size:var(--fs-body);font-weight:600;line-height:1.2}
.sprod__here{
  display:none;align-items:center;padding:2px 8px;border-radius:var(--r-pill);
  background:var(--accent-wash);color:var(--accent);
  font-size:var(--fs-footnote);font-weight:600;line-height:1.4;
}
.sprod[aria-current="page"] .sprod__here{display:inline-flex}
.sprod__promise{font-size:var(--fs-caption);line-height:1.4;color:var(--text-caption)}
.sheet__links{margin:0 0 24px;padding:0;list-style:none}
.sheet__links a{
  display:flex;align-items:center;min-height:52px;
  font-size:var(--fs-h3);font-weight:600;color:var(--text-heading);text-decoration:none;
  border-bottom:1px solid var(--line);
}
.sheet__links a:hover{color:var(--accent)}
.sheet__links a[aria-current="page"]{color:var(--accent)}

/* ── Адаптив ──────────────────────────────────────────────────────────── */
/* Метка «Продукты» добавила строке 87 px (75 метка + 12 зазор). Замер ряда
   на каждой ширине (круг 2): без перестановок кнопка вылезала за поле шапки
   на 64 px при 1100, на 74 при 960, на 61 при 768 и на 18 при 640. Порядок
   уступок — от наименее важного: сначала короче подпись призыва, потом
   разделы компании уходят в шторку, потом призыв (как у C-09 на ≤959),
   и только на телефоне — продукты. Метка видна везде, где продукты в строке. */
@media (max-width:1279px){
  .hdr__nav{gap:20px}
  .hdr__cta-l{display:none}
  .hdr__cta-s{display:inline}
  .hdr__cta{padding-inline:20px}
}
/* 960–1099: разделы компании — в шторку за бургером; в строке компания,
   продукты с меткой и призыв. */
@media (max-width:1099px){
  .hdr{gap:12px;padding-right:8px}
  /* Ряд разделов уходит в шторку, а вместе с ним и полка: вход в продукты
     здесь — карточки шторки, те же снимок, имя и обещание. */
  .hdr__nav,.hshelf,.hshelf[data-armed]{display:none}
  .hdr__cta{margin-left:auto}
  .burger{display:flex}
}
/* 768–959: призыв уходит в шторку, как у C-09; в строке компания, продукты
   с меткой и бургер. */
@media (max-width:959px){
  .hdr__cta{display:none}
  .burger{margin-left:auto}
}
@media (min-width:640px){
  .sheet__prods{grid-template-columns:1fr 1fr}
}
/* 960–1099: призыв стоит в строке шапки над шторкой — второй в шторке
   был бы вторым призывом на экране. */
@media (min-width:960px){
  .sheet__cta{display:none}
}
/* ≤767: в строке компания и бургер; продукты — первыми карточками шторки.
   С меткой ряд продуктов на 640 не помещался (18 px), а без метки продукты
   снова стояли бы в строке без объяснения. */
@media (max-width:767px){
  .hdr-slot{top:0;height:calc(12px + var(--hdr-h));padding-top:12px}
  .hdr{padding-left:16px}
  .sheet__in{margin-top:calc(24px + var(--hdr-h))}
  .sheet{scroll-padding-top:calc(24px + var(--hdr-h))}
}
/* Полка — только там, где есть наведение; на касании «Продукты» сразу ведут
   на развилку первого экрана. */
@media (hover:none),(pointer:coarse){
  .hshelf,.hshelf[data-armed]{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hdr,.hdr__nav > a,.hshelf,.hshelf[data-open],.hcard,
  .burger span,.burger span::before,.burger span::after{transition:none}
  .hshelf,.hshelf[data-open]{transform:none}
}

/* ── Подвал ────────────────────────────────────────────────────────────────
   Вариант A, выбран пользователем 2026-09-19: светлый, на полотне страницы,
   отделён линией — меньше всего спорит с призывом над ним. */
.ftr{position:relative;z-index:1;margin-top:8px;font-size:14px;line-height:1.5}
/* Ширина — как у .wrap секций: поле снаружи, а не внутри 1200. С полем
   внутри текст подвала начинался на 24 px правее контента страницы
   (№ 10 списка заказчика 30.09). На телефоне ширина та же, что была. */
.ftr__in{width:min(100% - 2 * var(--pad),var(--wrap));margin-inline:auto}
.ftr__grid{display:grid;grid-template-columns:minmax(296px,1.5fr) repeat(3,minmax(0,1fr));gap:32px 40px}
.ftr__logo{display:inline-flex;min-height:44px;align-items:center}
.ftr__logo img{height:32px;width:auto}
.ftr__tag{margin:12px 0 0;max-width:300px;color:var(--muted-2)}
.ftr__reg{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;padding:6px 12px 6px 10px;border-radius:999px;background:var(--tile);color:var(--blue);font-size:13px;font-weight:600;white-space:nowrap}
.ftr__col{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.ftr__h{margin:10px 0 8px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-4)}
.ftr__col a:not(.link-arrow){display:inline-flex;align-items:center;min-height:32px;color:var(--ink-2);text-decoration:none}
.ftr__col a:not(.link-arrow):hover{color:var(--blue)}
.ftr__col a[aria-current="page"]{color:var(--blue)}
/* На телефоне ссылки подвала — мишени от 44 px, как всё остальное нажимаемое
   на сайте: при 32 они были ниже рекомендации Apple (О-9 приёмки main). */
@media (max-width:767px){
  .ftr__col a:not(.link-arrow){min-height:44px}
}
.ftr__cta{margin-top:6px}
.ftr__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;margin-top:40px;padding-block:22px 28px;border-top:1px solid var(--line-2);color:var(--muted-4);font-size:13px}
.ftr__legal p{margin:0}
.ftr__legal p + p{max-width:620px}
@media (max-width:959px){.ftr__grid{grid-template-columns:1fr 1fr}.ftr__brand{grid-column:1 / -1}}
@media (max-width:639px){.ftr__grid{grid-template-columns:1fr 1fr;gap:24px 20px}.ftr__col:last-child{grid-column:1 / -1}.ftr__legal{flex-direction:column}}
.ftr{border-top:1px solid var(--line-2);padding-top:48px}


/* ============================================================================
   НаВстрече — раскладка секций.
   Макет: Figma «НаВстрече · Light Glass / Desktop 1440» (302:3), 10 экранов.
   Каркас на flex/grid: Figma отдаёт абсолютные координаты, они здесь не нужны.
   ========================================================================= */

/* ── 1 · Первый экран ────────────────────────────────────────────────────── */
/* Базовая сетка первого экрана (.hero, .hero__grid) вынесена в components.css
   (C-01) — её забрала страница «О компании». Здесь остаётся только то, что
   #hero переопределяет для визуала главной (см. home.v2.css, специфичность
   #hero всегда выше голого класса, поэтому порядок файлов не важен). */
/* Копия стоит ниже визуала: в макете верх карточек 145, верх H1 — 206 */
.hero__copy{padding-top:61px}
.hero__sub{
  margin-top:18px;
  font-size:clamp(21px,1.1rem + 1vw,30px);font-weight:600;line-height:1.3;
  letter-spacing:-.02em;color:var(--blue-site);
}
/* .hero__lead/.hero__cta вынесены в components.css (C-01, продолжение) —
   их взяла страница «О компании» (F-02). */
.hero__chips{margin-top:18px;gap:10px}

/* Визуал первого экрана. В макете карточки не лежат на скриншоте, а стоят
   над ним и под ним со сдвигом вправо: две сверху, скриншот, две снизу.
   Колонки 270 + 270 с зазором 104 дают ровно те же координаты, что в Figma. */
.hero__visual{
  display:grid;grid-template-columns:270px 270px;
  gap:23px 104px;justify-content:start;
}
.hero__shot{
  grid-column:1 / -1;order:2;margin-top:3px;
  width:563px;max-width:100%;height:auto;border-radius:var(--r-md);
  box-shadow:0 2px 8px rgba(15,31,71,.07), 0 34px 70px -28px rgba(15,31,71,.30);
}
.hero__f{width:270px;max-width:100%;min-height:92px}
.hero__f--tl,.hero__f--tr{order:1}
.hero__f--bl,.hero__f--br{order:3}

/* ── 2 · Одна встреча. История встреч. Вся картина ────────────────────────── */
.lvl{padding:clamp(20px,2.2vw,25px);margin-top:22px}
/* Высоты блоков заданы макетом: 300 у верхнего, 697 у пары под ним.
   Содержимое внутри распределяется, а не растягивает колонки пустотой. */
@media (min-width:1100px){
  #picture > .wrap > .lvl{min-height:300px}
  .lvl-pair > .lvl{min-height:697px}
}
.lvl__head{display:flex;gap:16px;align-items:flex-start;margin-bottom:18px}
.lvl__n{
  display:grid;place-items:center;flex:none;width:50px;height:50px;
  border-radius:var(--r-md);background:#377dff;color:#fff;
  font-size:25px;font-weight:600;
}
.lvl__t{font-size:clamp(19px,1.1rem + 1.2vw,27.9px);line-height:1.4}
.lvl__d{margin-top:0;font-size:18.1px;line-height:1.27;color:var(--muted-3)}
/* В макете блок был шире контента остальных разделов — 1350 при полях 45.
   Возвращён к общей ширине 1200: ряд выбивался из вертикали страницы.
   Ужаты первая и третья карточки, средняя сохранила свои 546. */
.wrap--picture{width:min(100% - 2 * var(--pad),var(--wrap))}
.lvl-pair{display:grid;grid-template-columns:756fr 578fr;gap:16px;align-items:stretch}
.lvl-pair .lvl{margin-top:0;display:flex;flex-direction:column}

/* Уровень 1: карточка встречи и цепочка этапов */
.one{display:grid;grid-template-columns:466px minmax(0,1fr);gap:32px;align-items:stretch;min-height:170px}
.one__meet{display:flex;gap:20px;align-items:center;padding:24px}
.one__cover{
  display:grid;place-items:center;flex:none;width:74px;height:74px;
  border-radius:var(--r-xl);color:#fff;
  background:linear-gradient(140deg,#e0397f,#8f4fe0 55%,#4a6cf0);
}
.one__meta{margin:4px 0 8px;font-size:13px;color:var(--muted-3)}
/* Цепочка этапов: стрелки рисуются псевдоэлементами —
   в потоке они были бы лишними узлами для скринридера.
   Отсчёт от самой плитки, иначе все стрелки лягут в одну точку. */
.one__steps{display:grid;grid-template-columns:repeat(5,1fr);gap:32px;align-items:center;position:relative}
.one__step{position:relative}
.one__step + .one__step::before,
.one--chain .one__steps::before{
  content:"→";position:absolute;top:50%;
  transform:translate(-50%,-50%);
  font-size:19px;line-height:1;color:var(--blue);
}
.one__step + .one__step::before{left:-15px}
/* Стрелка от карточки встречи к первой плитке живёт на самой группе */
.one--chain .one__steps::before{left:-15px}
.one__step{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:15.5px 6px;border-radius:var(--r-xl);
  background:#eff4fd;color:var(--blue);
  font-size:13px;line-height:25px;font-weight:500;text-align:center;
}
.one__step .ico{color:var(--blue);width:32px;height:32px}

/* Уровень 2: ИИ-анализ */
.ai__stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ai__stat{display:flex;gap:12px;align-items:center;padding:14px 16px}
.ai__k{font-size:13px;color:var(--blue-site);font-weight:500}
.ai__v{font-size:14px;color:var(--ink-2);font-weight:500}
/* Три колонки читаются как один прибор, а не три случайные плашки: у всех
   одинаковая шапка (у средней — синяя, потому что это шаг пользователя),
   между ними те же стрелки, что в цепочке уровня 1. Заказчик писал, что
   раньше «эти три окна между собой получаются несвязанными». */
.ai__cols{display:grid;grid-template-columns:repeat(3,1fr);column-gap:34px;row-gap:14px;
  margin-top:14px;align-items:stretch;flex:1}
.ai__col{padding:0;overflow:hidden;display:flex;flex-direction:column}
.ai__colhead{
  margin:0;padding:12px 16px;display:flex;align-items:center;gap:9px;
  background:#edf2fc;color:var(--ink-2);font-size:13.5px;font-weight:600;line-height:1.25;
}
.ai__colhead .ico{color:var(--blue);flex:none}
.ai__colhead--accent{background:var(--blue);color:#fff}
.ai__colhead--accent .ico{color:#fff}
.ai__colbody{padding:14px 16px;flex:1}
.ai__col + .ai__col{position:relative}
.ai__col + .ai__col::before{
  content:"→";position:absolute;left:-17px;top:21px;
  transform:translate(-50%,-50%);
  font-size:18px;line-height:1;color:var(--blue);
}
.ai__spark{color:var(--blue)}
.ai__qs{display:grid;gap:14px}
.ai__qs li{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.4;color:var(--muted-2)}
.ai__qs .ico{color:var(--blue);flex:none;margin-top:1px}
.ai__hist{display:grid;gap:13px}
.ai__hist li{display:flex;gap:10px;align-items:flex-start}
.ai__hist .ico{color:var(--blue);margin-top:3px;flex:none}
.ai__hist b{display:block;font-size:13px;font-weight:600;color:var(--ink-2);line-height:1.3}
.ai__hist i{display:block;font-style:normal;font-size:12px;color:var(--muted-4);margin-top:2px}
.ai__answer{font-size:13px;line-height:1.55;color:var(--muted-2)}
.ai__srcttl{margin:12px 0 8px;font-size:12.5px;color:var(--muted-4)}
.ai__srcs{display:grid;gap:7px}
.ai__srcs li{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.4;color:var(--blue-site)}
.ai__srcs .ico{color:var(--blue);margin-top:2px;flex:none}
.ai__cols + .note{margin-top:16px;margin-bottom:0}

/* Уровень 3: радар */
.radar__ttl{font-size:15px;font-weight:600;color:var(--ink-2);margin-bottom:14px}
.radar-row{display:grid;grid-template-columns:245px minmax(0,1fr);gap:35px;
  align-items:start;margin-top:8px}
.radar{width:100%;max-width:250px;height:auto;margin-inline:auto}
.radar__grid circle,.radar__grid line{fill:none;stroke:#dbe6f7;stroke-width:1}
.radar__core{fill:var(--blue)}
.radar__pts circle{fill:var(--sig-c)}
.counters{display:grid;gap:12px}
.radar__note{margin-top:24px;max-width:528px;font-size:18px;line-height:27px;color:var(--muted-2)}
/* В макете подпись стоит сразу под радаром, а не у нижнего края блока */

/* Полоса интеграций */
/* Полоса интеграций — узел 476:3291: 1350x76, стекло, паддинг 18, зазор 13.
   Логотипы собраны из тех же ассетов, что в макете; текст остался живым. */
.integr{
  margin-top:16px;min-height:76px;
  display:flex;align-items:center;gap:14px;padding:18px;
  border-radius:var(--r-3xl);
}
/* Текст и знак приведены к полосе секции «Как встреча попадает»: там подпись
   14/1,5 цветом --muted-3 (D-07), а знак лежит на плитке 38×38. Здесь было 10,6/15,4
   — вдвое мельче основного текста страницы и заметно мельче соседней полосы. */
.integr__note{
  flex:1;min-width:0;display:flex;align-items:center;gap:14px;
  font-size:14px;line-height:1.5;color:var(--muted-3);
}
.integr__mark{
  width:38px;height:38px;flex:none;padding:8px;border-radius:var(--r-md);
  background:linear-gradient(180deg,#e0edff 0%,#f7fbff 100%);
  box-shadow:0 3px 8px rgba(26,89,242,.13);
}
.integr__note span{display:block}

.ilogo{
  flex:none;display:flex;align-items:center;justify-content:center;
  height:38px;padding:10px 16px;border-radius:var(--r-xs);
  background:#fff;border:1px solid var(--line);
}
.ilogo--api{font-size:17px;font-weight:600;color:var(--blue)}
.ilogo__1c,.ilogo__bx,.ilogo__jira{position:relative;display:block}
.ilogo__1c > img,.ilogo__bx > img,.ilogo__jira > img{position:absolute;max-width:none}
/* Части знаков — координаты из Figma; жили инлайн-стилями в разметке */
.ilogo__1c > img:nth-child(1){left:0;top:0;width:39px;height:19.217px}
.ilogo__1c > img:nth-child(2){left:35.37px;top:16.95px;width:3.337px;height:3.345px}
.ilogo__1c > img:nth-child(3){left:36.46px;top:17.81px;width:1.284px;height:1.658px}
.ilogo__bx > img:nth-child(1){inset:0 12.83% 3.24% 67.84%}
.ilogo__bx > img:nth-child(2){inset:0.38% 33.49% -31.43% -0.11%}
.ilogo__bx > img:nth-child(3){inset:calc(5.33% - .77px) calc(.62% - .77px) calc(26.86% - .77px) calc(90.25% - .77px)}
.ilogo__bx > img:nth-child(4){inset:20.57% 2.31% 55.81% 94.51%}
.ilogo__jira > img:nth-child(1){inset:9.38% 66.13% 12.5% 0}
.ilogo__jira > img:nth-child(2){inset:15.79% -0.05% 16.96% 43.07%}
.ilogo__1c{width:39px;height:19.2px;transform:scaleY(-1)}
.ilogo__bx{width:112px;height:15px}
.ilogo__jira{width:54px;height:22px;overflow:hidden}
.ilogo__express{width:54px;height:36px;object-fit:cover}
.ilogo__amo{width:86px;height:21px}

/* Полоса доверия (.trust, .tl) целиком вынесена в components.css (C-04) —
   её взяла страница «О компании» как есть, с теми же двенадцатью знаками. */

/* Радар: иконка внутри ядра идёт белым по синему */
.radar__ico{color:#fff}

/* Заголовок «Одна встреча. История встреч. Вся картина.» в макете стоит
   в одну строку — контейнеру нужно больше ширины, чем базовым 820px. */
#picture > .wrap > .sec__head{max-width:960px}
/* Заголовок с подзаголовком стояли теснее, чем в соседних секциях: 10 px между
   ними против общих 18 и 16 до контента против 34 у «Не один шаблон». */
#picture .sec__head .lead{margin-top:18px}
#picture > .wrap > .sec__head{margin-bottom:18px}

/* ── 3 · Как встреча попадает в НаВстрече ─────────────────────────────────── */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.way{
  display:grid;grid-template-columns:minmax(0,230px) 280px;
  column-gap:28px;row-gap:8px;align-items:start;padding:26px;min-height:270px;
}
/* Шапка способа занимает обе колонки: в макете она шире текстовой колонки */
.way__copy{display:contents}
.way__head{grid-column:1 / -1}
.way__d{grid-column:1}
.way__shot{grid-column:2;grid-row:2;align-self:start}
.way__head{display:flex;align-items:center;gap:12px}
.way__n{
  display:grid;place-items:center;flex:none;width:28px;height:28px;
  border-radius:var(--r-xs);background:var(--blue);color:#fff;
  font-size:13px;font-weight:600;
  /* line-height:1 — иначе строка тащит с собой место под хвосты «р», «у», «д»,
     а у цифр хвостов нет: цифра вставала на 2 px выше центра квадрата
     (8,4 сверху против 10,4 снизу). Со строкой по кеглю расхождение 0,3. */
  line-height:1;
}
/* В макете заголовок способа стоит одной строкой. nowrap здесь опасен —
   в самой длинной карточке он наезжал на скриншот, поэтому даём колонке
   запас по ширине и переносим только при нехватке места. */
/* line-height задан явно: .way__t — это <span> внутри <p>, он наследовал
   абзацные 1.6, и в двухстрочном заголовке «Отправить ссылку боту»
   между строками зияла дыра. Все прочие заголовки страницы 1.12–1.30. */
.way__t{font-size:var(--fs-h3);font-weight:600;color:var(--ink-2);
  letter-spacing:-.018em;text-wrap:nowrap;line-height:1.2}
@media (max-width:1279px){ .way__t{text-wrap:balance} }
.way__d{margin-top:14px;font-size:14px;line-height:1.5;color:var(--muted-3)}
.way__shot{
  width:280px;max-width:100%;height:147px;object-fit:cover;
  border-radius:var(--r-md);border:1px solid var(--line);
  box-shadow:0 12px 30px rgba(15,31,71,.08);
}
.way:nth-child(2) .way__shot{width:273px;height:154px}
.way:nth-child(3) .way__shot{width:266px;height:140px}
.way:nth-child(4) .way__shot{width:266px;height:111px}

/* .strip--cta вынесена в components.css (C-03) */

/* ── 4 · После встречи — готовый результат ────────────────────────────────── */
/* .split и .split__copy .lead вынесены в components.css (C-14): второе
   употребление — «Контекст встреч» на компанийной главной (F-01 приёмки main). */
.split__shot{width:100%;height:auto;border-radius:var(--r-lg);box-shadow:var(--sh-lift)}
/* Ширины сняты с макета: у каждого раздела свой размер визуала.
   Две колонки «Задайте вопрос» и сдвиги рядом с визуалом — только от 1100:
   объявленные для всех ширин, они перебивали столбец .split (C-14) — на 390
   колонке снимка доставалось 0 px, на 768 — 217, а над «После встречи» висели
   лишние 74 px (№ 2 и № 8 списка заказчика 30.09). */
@media (min-width:1100px){
  #ask .split{grid-template-columns:minmax(0,475px) minmax(0,1fr)}
  #ask .split__shot{max-width:607px;margin-left:auto}
  #result .split__copy{margin-top:74px}
  #ask    .split__shot{margin-top:94px}
}
#result .split,#ask .split,#signals .split{align-items:start}
#signals .split__shot{margin-top:10px}
#signals .split__shot{max-width:720px;margin-left:auto}

/* Карточка возможности (.feats/.feat) вынесена в components.css (C-02) —
   на главной цвета плиток по-прежнему разведены по смыслу (поиск синий,
   саммари фиолетовое, поручения зелёные, вопросы янтарные); подробности —
   в components.css у .icon-tile--lg2. */

/* ── 5 · Шаблоны результата ───────────────────────────────────────────────── */
.tmpls{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.tmpl{padding:16px;display:flex;flex-direction:column}
/* В макете карточка 290×420, поэтому содержимое свёрстано плотнее обычного.
   Высота задана минимумом, а не жёстко: в самой полной карточке последняя
   строка таблицы упирается в границу, и резать её ради ровного числа нельзя.
   Сетка растянет соседние по самой высокой. */
@media (min-width:1100px){ .tmpls{align-items:stretch} .tmpl{min-height:420px} }
.tmpl__head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.tmpl__t{font-size:15px;font-weight:600;color:var(--ink-2);letter-spacing:-.015em}
.tmpl__h{
  margin:9px 0 5px;font-size:12px;font-weight:600;color:var(--ink-2);
}
.tmpl__h:first-of-type{margin-top:0}
.tmpl__p{font-size:11.5px;line-height:1.4;color:var(--muted-3)}

/* Полоска метаданных под шапкой карточки */
.meta-band{
  display:flex;flex-wrap:wrap;gap:6px 14px;
  padding:7px 10px;margin-bottom:12px;border-radius:var(--r-sm);
  background:var(--surface-2);
}
.meta-band span{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted-3)}
.meta-band .ico{color:var(--blue)}

/* Полоска-подвал карточки */
.foot-band{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin-top:auto;padding-top:10px;border-top:1px solid var(--line-3);
}
.foot-band__k{font-size:11.5px;color:var(--muted-4);margin-right:6px}
.foot-band__v{margin-left:auto;font-size:11.5px;color:var(--muted-3)}
.foot-band .chip{min-height:24px;padding:0 9px;font-size:11px}

.bullets{display:grid;gap:4px}
.bullets li{
  position:relative;padding-left:12px;
  font-size:11.5px;line-height:1.35;color:var(--muted-3);
}
.bullets li::before{
  content:"";position:absolute;left:2px;top:7px;
  width:4px;height:4px;border-radius:50%;background:#9db6e8;
}

/* Решения — отмеченные чекбоксы: в отчёте это факт, а не выбор */
.decisions{display:grid;gap:6px}
.decisions li{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;line-height:1.3;color:var(--muted-2)}
/* В макете отметки решений фиолетовые — тем же цветом, что подложка карточки */
.tick{
  display:grid;place-items:center;flex:none;width:15px;height:15px;
  border-radius:4px;background:#7c4dff;color:#fff;
}

/* Таблица работ */
.tbl{width:100%;border-collapse:collapse;font-size:10.5px}
.tbl{line-height:14px}
.tbl th{
  padding:6px 7px 3px;text-align:left;font-weight:500;color:var(--muted-4);
  background:var(--surface-2);border-bottom:1px solid var(--line-3);
}
.tbl th:first-child{border-radius:var(--r-xs) 0 0 0}
.tbl th:last-child{border-radius:0 var(--r-xs) 0 0;text-align:right}
.tbl td{padding:1px 7px;line-height:16px;color:var(--muted-2);border-bottom:0}
.tbl td:last-child{text-align:right;color:var(--muted-3);font-variant-numeric:tabular-nums}
.tbl tr:last-child td{border-bottom:0}

/* Договорённости: инициалы вместо фотографий */
.agrees{display:grid;gap:8px}
.agrees li{display:flex;align-items:center;gap:9px}
.ava{
  display:grid;place-items:center;flex:none;width:22px;height:22px;
  border-radius:50%;background:var(--tile);color:var(--blue-site);
  font-size:9px;font-weight:600;letter-spacing:.02em;
}
.agrees__t{font-size:11.5px;line-height:1.3;color:var(--muted-2)}
.agrees__d{margin-left:auto;font-size:11px;color:var(--muted-4);font-variant-numeric:tabular-nums}

/* Метрики периода */
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.metrics li{
  padding:8px 8px 5px;border-radius:var(--r-sm);
  background:var(--surface-2);display:grid;gap:0;
}
.metrics__k{font-size:9.5px;color:var(--muted-4)}
.metrics__v{font-size:15px;font-weight:700;color:var(--ink-2);letter-spacing:-.025em;
  white-space:nowrap}
/* «14,2 млн ₽» в узкой плитке иначе рвётся на две строки */
.metrics li:last-child .metrics__v{font-size:13px}
.metrics__g{font-size:9.5px;color:var(--sig-pos)}

/* Узлы 680:6513…6521: строки рекомендаций по 20 с шагом 24, в одну строку каждая.
   При 11.5/1.3 две из трёх переносились и растягивали карточку до 431. */
.recs{display:grid;gap:4px}
.recs li{display:flex;gap:8px;align-items:flex-start;font-size:11px;line-height:20px;color:var(--muted-2)}
.recs .ico{color:var(--sig-pos);flex:none;margin-top:2px}

/* Кольцо статуса задач */
.donut-row{display:flex;align-items:center;gap:14px}
.donut{width:72px;height:72px;flex:none;transform:rotate(-90deg)}
.donut__bg{fill:none;stroke:var(--line-3);stroke-width:4}
.donut__seg{fill:none;stroke-width:4;stroke-linecap:butt}
.donut__v,.donut__k{
  transform:rotate(90deg);transform-origin:center;
  text-anchor:middle;fill:var(--ink-2);
}
.donut__v{font:700 8px Onest}
.donut__k{font:400 3.4px Onest;fill:var(--muted-4)}
.legend{display:grid;gap:8px;flex:1;min-width:0}
.legend li{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted-3)}
.legend__d{width:8px;height:8px;border-radius:50%;background:var(--sig-c);flex:none}
.legend b{margin-left:auto;font-weight:500;color:var(--muted-2);font-variant-numeric:tabular-nums}

/* Риски */
.risks{display:grid;gap:7px}
.risks li{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;line-height:1.3;color:var(--muted-2)}
.risks__m{
  display:grid;place-items:center;flex:none;width:17px;height:17px;
  border-radius:5px;background:var(--tile-obj);color:var(--sig-obj);
  font-size:11px;font-weight:700;line-height:1;
}

/* .strip--three и .strip__item вынесены в components.css (C-03) */

/* ── 6 · Вопрос всей истории ──────────────────────────────────────────────── */
.qs{display:grid;gap:12px;margin-top:26px;max-width:430px}

/* ── 7 · Радар сигналов ───────────────────────────────────────────────────── */
/* .strip--note вынесена в components.css (C-03) */

.sigs{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:clamp(28px,3.4vw,44px)}
.sig{padding:22px;display:flex;flex-direction:column;min-height:210px}
.sig h3{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.sig p{font-size:14px;line-height:1.55;color:var(--muted-3)}
.sig .spark{margin-top:auto;padding-top:9px}

/* ── 8 · Контекст в рабочих процессах ─────────────────────────────────────── */
/* .split--wide вынесен в components.css вместе с .split (C-14, F-01 приёмки main) */
/* Ширины 195/235 сняты с макета 1440 и там держатся как есть. Ниже ~1160
   зажатая колонка .split--wide больше их не вмещает: две прибитые дорожки
   съедали всё, третьей оставалось 135px при карточках в 199px, и они лезли
   за экран. Пол min-content на каждой дорожке распускает первые две ровно
   настолько, насколько не хватает третьей; пока места хватает — дорожки
   выходят на свои 195 и 235, раскладка 1200+ не меняется. */
.ctx{display:grid;
  grid-template-columns:minmax(min-content,195px) minmax(min-content,235px)
                        minmax(min-content,1fr);
  gap:clamp(20px,2.6vw,44px);align-items:center}
.flow__col{display:grid;gap:16px;position:relative;z-index:1}
.flow__col--mid{justify-items:center}
.flow__col--mid .node{width:100%;padding-block:34px}
.ctx__badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line-3);
  font-size:12.5px;color:var(--muted-3);box-shadow:var(--sh-card);
}
.ctx__badge .ico{color:var(--muted-4)}

/* Узлы «Встречи» и «Контекст»: знак сверху, заголовок по центру
   с чертой под ним — так в макете отличают их от карточек-приёмников. */
.node--head{display:flex;flex-direction:column;align-items:center;text-align:center}
.node--head .node__t{order:1;margin-bottom:10px;font-size:16px}
.node--head .node__ico,
.node--head .node__logo{
  order:2;margin-bottom:14px;padding-bottom:14px;
  border-bottom:2px solid var(--blue);
}
.node--head .node__ico{color:var(--blue);display:grid;place-items:center;padding-inline:22px}
.node--head .node__logo{width:46px;height:auto}
.node--head .node__list{order:3;text-align:left;width:100%}

/* Источники встреч — карточка под текстом секции, не полоса под схемой */
/* Карточка выходит за колонку текста — в макете она шире неё */
.srcs{margin-top:28px;padding:28px;width:min(501px,100%)}
/* В макете карточка шире колонки текста и укладывается в одну строку */
@media (min-width:1100px){ .srcs{width:501px} }
.srcs__t{font-size:15px;font-weight:600;color:var(--ink-2);margin-bottom:14px}
.srcs__list{display:flex;flex-wrap:wrap;gap:10px 14px}
.srcs__list li{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted-2)}
.srcs__list .icon-tile{width:28px;height:28px;border-radius:var(--r-xs)}
.ctx__target .node__t{display:flex;align-items:center;gap:10px}
.ctx__target .chips{gap:6px}
.ctx__target .chip{min-height:26px;padding:0 10px;font-size:11.5px}

/* ── 9 · Варианты размещения ────────────────────────────────────────────────
   2026-09-25, решение пользователя по макету NV_Ready_7: карточек две,
   а не три, поэтому дорожек тоже две и картинка получает всю ширину
   карточки. Пропорция 653:262 — ровно та, в которой нарисован стеклянный
   объект; при прежних фиксированных 124 px object-fit срезал ему
   подставку сверху и снизу. min-height снят: две карточки одинаковой
   структуры выравнивает сама сетка, а с ним они держали лишнюю пустоту. */
.places{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.place{padding:22px;display:flex;flex-direction:column}
.place img{width:100%;height:auto;aspect-ratio:653 / 262;object-fit:cover;border-radius:18px;
  border:1px solid #dce6f7;box-shadow:0 12px 30px rgba(15,31,71,.08);margin-bottom:20px}
/* Название карточки крупнее общего h3 (17–20): в макете оно вдвое больше
   списка под ним, и на h3 иерархия карточки читалась плоско. 24 — ступень,
   которой на широких ширинах ещё не было, это сознательное отличие.
   Вторая строка под названием — новый элемент макета. */
.place h3{margin-bottom:0;font-size:24px;letter-spacing:-.02em}
.place__sub{margin:8px 0 18px;font-size:15px;line-height:1.4}
#place .checks li{font-size:15px}
.place__link{margin-top:14px}

/* ── 10 · Демонстрация ──────────────────────────────────────────────────────
   2026-09-25, макет NV_Ready_8: три колонки вместо плиты с картинкой.
   Слева рассказ, в середине визуал, справа форма заявки.
   Ширина блока — общие 1200, как у всех секций и подвала. Пробовал 1280:
   заголовок и форма выходили за общую вертикаль страницы на 40 px в каждую
   сторону, и последний экран читался как чужой. Ширины колонок подобраны
   под 1200: 420 + 20 + 340 + 20 + 400. Заголовок в колонке 420 идёт тремя
   строками — так же, как в «После встречи» (колонка 398) и «Система сама
   замечает» (440): это приём страницы, а не теснота. Колонку визуала
   ужимать дальше нельзя, иначе снимок интерфейса превращается в пятно.
   Колонки выровнены по верху: в макете верх формы и верх заголовка стоят
   на одной линии, при выравнивании по центру рассказ уезжал вниз.
   Прежние правила .cta сняты целиком — класса в разметке больше нет. */
/* Сетка, рассказ, список и контакты секции демонстрации вынесены в components.css
   (C-16): второе употребление — компанийная главная (F-03 приёмки main). */

/* Визуал. Плоскость наклонена в CSS, как в первом экране; backdrop-filter
   внутри preserve-3d Chrome считает в неповёрнутых координатах, поэтому
   у карточек здесь плотная заливка, а не стекло. */
/* Рассказ и форма выровнены по верху, визуал — по центру ряда: он вдвое
   ниже соседей, и при выравнивании по верху под ним оставалась пустая
   треть колонки. */
.demo__stage{perspective:1400px;perspective-origin:50% 50%;align-self:center}
.demo__plane{
  /* Высота плоскости = снимок плюс свес карточек: карточки лежат
     абсолютом, и лишняя высота оставляла под визуалом пустой хвост. */
  position:relative;height:310px;
  transform-style:preserve-3d;
  transform:rotateY(-13deg) rotateX(4deg);
}
/* Окно в середине — снимок интерфейса. Шире своей колонки (436 против 300)
   и выходит в зазоры: так же, как в макете, где визуал лежит между рассказом
   и формой. max-width:none обязателен — общий сброс в base.css держит img
   на 100 % родителя, и снимок садился на 300 px колонки.
   Скругление и тень как у снимков в разделах (.split__shot): у настоящего
   скриншота край честный, растворять его маской, как рендер, незачем. */
.demo__win{
  /* Свес только в зазоры между колонками (по 20 px), ни одного пикселя
     на текст: при свесе в 66 px снимок ложился на вторую строку лида
     и на подписи списка. */
  position:absolute;left:-20px;top:40px;width:360px;max-width:none;height:auto;
  transform:translateZ(0);border-radius:var(--r-lg);
  box-shadow:0 2px 8px rgba(15,31,71,.07), 0 30px 62px -26px rgba(15,31,71,.32);
}

.demo__f{
  position:absolute;display:flex;align-items:center;gap:11px;
  padding:12px 14px;border-radius:var(--r-xl);
  background:rgba(255,255,255,.97);border:1px solid var(--glass-solid-br);
  box-shadow:var(--glass-solid-sh);
}
/* Ширина карточек ограничена: без потолка «Ответы на вопросы по встречам»
   вытягивалась в 291 px и спорила с самим снимком. */
.demo__f{max-width:200px}
.demo__f p{font-size:13.5px;font-weight:600;color:var(--ink-2);line-height:1.25}
.demo__f--1{left:28px;top:6px;transform:translateZ(34px)}
.demo__f--2{left:146px;top:140px;transform:translateZ(46px)}
.demo__f--3{left:-14px;top:222px;transform:translateZ(34px)}
@media (prefers-reduced-motion:reduce){.demo__plane{transition:none}}

/* Форма. Поля — общие примитивы, новое здесь только одно: знак внутри поля.
   Отступ слева считается от него, а у списка — ещё и справа под галочку.
   Заголовок формы — обычный h3 страницы (20/600). Свои 22/700 сняты:
   на всей странице не было ни одного заголовка начертанием 700, и этот
   выбивался единственным. */
/* Форма секции демонстрации — в components.css (C-16). */
/* .field--ico и .field__ico переехали в primitives.css:
   второе употребление на компанийной главной (main.html). */

/* ── Плитки под иконками: в макете размер разный по разделам ──────────────
   первый экран 44, шапки карточек отчётов 46, вопросы и приёмники схемы 30,
   остальное — базовые 34. */
.hero__f .icon-tile{width:44px;height:44px;border-radius:var(--r-md);margin-top:2px}
.hero__f .icon-tile .ico{width:24px;height:24px}
.tmpl__head .icon-tile{width:46px;height:46px;border-radius:var(--r-md)}
.tmpl__head .icon-tile .ico{width:22px;height:22px}
.qcard .icon-tile{width:30px;height:30px;border-radius:var(--r-xs)}
.qcard .icon-tile .ico{width:16px;height:16px}
.ctx__target .icon-tile{width:30px;height:30px;border-radius:var(--r-xs)}


/* ── Вертикальные поля секций ──────────────────────────────────────────────
   В макете секции стыкуются встык, и у каждой своё поле сверху и снизу
   (сняты из «Экран 2…10»): 86/39 у «одной встречи», 130/104 у контекста и т.д.
   Единый --sec-y давал одинаковые 58 и уводил всю страницу. */
@media (min-width:1100px){
  #picture  {padding-block:86px 39px}
  #flow     {padding-block:56px 86px}
  #templates{padding-block:58px 50px}
  /* В макете блок этой секции 1220 и стоит несимметрично: слева 120, справа 100.
     Асимметрию не воспроизводим: фиксированный margin-left держал блок у левого
     края и на широких мониторах уводил всю секцию влево (на 2560 — 120 слева
     против 1220 справа). Ширину 1220 из макета оставляем, но центрируем. */
  #templates > .wrap{width:min(100% - 2 * var(--pad),1200px);margin-inline:auto;max-width:none}
  #templates .sec__head + *{margin-top:34px}
  #templates .strip--three{margin-top:26px}
  /* Четыре секции ниже раньше стояли вне медиазапроса и держали десктопные
     поля на всех ширинах: на 834 и 390 у них оставались 70/40, 80/70 и 90/80
     при типичных 40/40 у соседей. Перенесены сюда и продублированные
     макетные значения убраны — на каждую секцию по одному правилу.
     Числа взяты те, что стояли после воркшопа, а не исходные макетные:
     result 53/27, ask 96/128, signals 86/70 и context 130/104 меняли осознанно,
     когда перебирали композиции этих секций. */
  #result   {padding-block:70px 40px}
  #ask      {padding-block:80px 70px}
  #signals  {padding-block:80px 70px}
  #context  {padding-block:90px 80px}
  #place    {padding-block:62px 34px}
  #demo     {padding-block:100px 49px}
}

/* ── Ширины шапок секций и лидов ───────────────────────────────────────────
   Сняты из макета поштучно (get_metadata по узлам «Экран 1…10»): в макете
   у каждой секции своя ширина колонки заголовка и своя — лида, и лид почти
   везде уже заголовка. Общий max-width на .sec__head давал другие переносы. */
#picture  > .wrap > .sec__head{max-width:1080px}
#picture  .sec__head + .lvl{margin-top:30px}
#picture  .lvl-pair{margin-top:16px}
#picture  .lvl .note{font-size:16px;line-height:25px;color:var(--muted-2)}
#picture  .lead{max-width:882px;margin-inline:auto;margin-top:10px}
#flow     .sec__head{max-width:760px}
#flow     .sec__head + *{margin-top:23px}
#flow     .lead{max-width:660px;margin-top:14px}
#result   .split__copy h2{max-width:398px}
#result   .split__copy .lead{max-width:410px}
#result   .feats > *{min-height:168px}
#result   .feats{margin-top:29px}
#templates .sec__head{max-width:1209px}
#templates .lead{max-width:660px;margin-inline:auto}
/* П3 (D-42): на телефоне лид шаблонов по левому краю — правило выше
   (1-1-0) перебивало общее гашение .sec__head--center (правило 6, N-04) */
@media (max-width:767px){ #templates .sec__head--center .lead{margin-inline:0} }
#ask      .split__copy h2{max-width:475px}
#ask      .split__copy .lead{max-width:420px}
#ask      .qs{margin-top:20px}
#signals  .split__copy h2{max-width:430px}
#signals  .split__copy .lead{max-width:420px}
@media (min-width:1100px){
  /* Только когда колонки рядом: на ≤1099 заголовок идёт во всю ширину,
     иначе на 768 после «в&nbsp;рабочие» (D-28) оставалось одно слово. */
  #context .sec__head h2,#context .split__copy h2{max-width:390px}
}
#context  .lead{max-width:390px}
#place    .sec__head{max-width:none}
#place    .sec__head h2{max-width:560px}
/* 2026-09-25: у лида снят потолок 600 px. В макете подпись секции идёт одной
   строкой во всю ширину, а с прежним ограничением она ломалась на две. */
#place    .lead{max-width:none}
#place    .sec__head + *{margin-top:8px}
/* min(), а не жёсткие 501: без ограничения карточка «Источники встреч»
   пробивала вьюпорт на 390 и тащила за собой всю секцию (scrollWidth 517). */
#context  .srcs{width:min(501px,100%);margin-top:17px}


/* ============================================================================
   НаВстрече v2 — композиции, выбранные на воркшопе.
   Правила скоупятся по id секции: в артефактах вариантов каждая секция жила
   одна, и там хватало `.sec{…}`; на целой странице это разъехалось бы.
   ========================================================================= */

/* ── 1 · Первый экран: продукт крупнее ───────────────────────────────────── */
#hero{overflow:hidden}
/* Колонки выровнены по верху, а не по центру: при центрировании копия
   опускалась к середине и над заголовком зияли 234 px пустоты — ровно то,
   на что жаловался заказчик. В макете верх карточек 150, верх H1 — 210. */
#hero .hero__grid{grid-template-columns:minmax(0,470px) minmax(0,1fr);gap:48px;align-items:start}
#hero .hero__copy{padding-top:50px}
/* Имя продукта и слоган — одна фраза, одним начертанием и одним цветом.
   Разбивка на «жирный чёрный → жирный синий → серый» читалась разнобоем;
   слитый заголовок оставляет на экране одну ступеньку: дисплейный блок
   и описание под ним. Синий уходит из заголовка целиком и работает
   там, где он значит действие, — на кнопке и ссылках.
   Правила заголовка — C-12 .hero__title (components.css, класс на h1).
   .hero__lead/.hero__cta переопределений здесь больше нет: значения этого
   id-скоупа совпадали со значениями общего класса (перенесён в
   components.css, C-01 продолжение, F-02) — второй копии не оставляем. */
#hero .hero__chips{margin-top:20px}
#hero .hero__visual{display:block;position:relative}

/* Композиция макета: карточки не висят отдельным списком под кнопками,
   а стоят по углам кадра — две над скриншотом, две под ним (270 + 100 + 270).
   Заказчик читал их отрыв от иллюстрации как «не пришей кобыле хвост»,
   и заодно из-за него пустовал весь верх-левый угол экрана.

   Карточки лежат В ПЛОСКОСТИ иллюстрации: они дети .hero__plane, наследуют
   её наклон и уезжают в перспективу вместе с ней. translateZ поднимает их
   над плоскостью, чтобы читались как парящие, а не наклеенные.

   Наклон и параллакс разведены по двум элементам: сцену двигает общий
   механизм `data-parallax`, плоскость наклонена в CSS — иначе одно затирало
   бы другое в transform. Угол уменьшен с 14° до 11°: на плоскости теперь
   живой текст, и при 14° правая колонка карточек читалась тяжело. */
#hero .hero__stage{perspective:1600px;perspective-origin:24% 46%;will-change:transform}
#hero .hero__plane{
  display:grid;grid-template-columns:270px 270px;
  justify-content:start;gap:18px 100px;
  transform-style:preserve-3d;
  transform:rotateY(calc(-11deg + var(--mx,0) * 1deg))
            rotateX(calc(3deg + var(--my,0) * 1deg)) translateZ(20px);
  transition:transform 220ms cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){ #hero .hero__plane{transition:none} }

/* Скриншот шире колонок карточек (700 против 640) — он выходит за правый край
   композиции и там растворяется в фоне, как просил заказчик. Растворение
   начинается на 84 %, а не на 62 %: правые карточки должны стоять на плотном
   изображении, а не на прозрачной кромке. */
#hero .hero__shot{
  grid-column:1 / -1;grid-row:2;
  width:700px;max-width:none;margin-top:0;border-radius:20px;
  box-shadow:0 4px 14px rgba(15,31,71,.08),0 46px 88px -36px rgba(15,31,71,.38);
  -webkit-mask-image:linear-gradient(to right,#000 0,#000 84%,transparent 100%),
    linear-gradient(to bottom,#000 0,#000 94%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,#000 0,#000 84%,transparent 100%),
    linear-gradient(to bottom,#000 0,#000 94%,transparent 100%);
  mask-composite:intersect}

/* backdrop-filter внутри preserve-3d Chrome считает в неповёрнутых координатах:
   размытая подложка оставалась на месте, а сама карточка уезжала в перспективу,
   и текст двоился. Внутри плоскости стекло заменено плотной заливкой. */
#hero .hero__f{width:270px;min-height:92px;transform:translateZ(26px);
  -webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.97)}
#hero .hero__f--tl{grid-column:1;grid-row:1}
#hero .hero__f--tr{grid-column:2;grid-row:1}
#hero .hero__f--bl{grid-column:1;grid-row:3}
#hero .hero__f--br{grid-column:2;grid-row:3}

/* Чипы размещения и кнопки читались как один ряд кнопок: обе группы — белая
   заливка, тонкая рамка, скруглённый прямоугольник, высоты 40 и 44. Чипы
   становятся плоскими метками: без рамки и тени, мельче, на голубой подложке. */
#hero .hero__chips{margin-top:22px;gap:8px}
#hero .hero__chips .chip{
  min-height:28px;padding:0 12px;border:0;box-shadow:none;border-radius:var(--r-sm);
  background:var(--accent-wash);color:var(--chip-text);font-size:13px;gap:8px}
#hero .hero__chips .chip .ico{width:15px;height:15px;color:var(--blue-site);opacity:.75}
#hero .hero__chips .chip:hover{background:var(--accent-wash-2)}


/* ── 2 · Одна встреча: три уровня в один ряд ──────────────────────────────
   Раскладка по референсу заказчика: уровни стоят строкой, а не «один сверху,
   два под ним». Ширины розданы по содержимому, а не поровну: во втором уровне
   три подколонки и текст ответа, ему нужно больше места, чем соседям.
   Разметка не тронута — .lvl-pair раскрывается через display:contents,
   и три уровня становятся ячейками одной сетки. */
@media (min-width:1100px){
  #picture > .wrap{
    display:grid;grid-template-columns:264px minmax(0,1fr) 360px;
    gap:16px;align-items:start;
  }
  /* Третья колонка не уже 360: ниже этого счётчики «Возможности» и «Позитив»
     перестают помещаться в две колонки и вылезают из плашки. */
  #picture > .wrap > .sec__head{grid-column:1 / -1}
  #picture > .wrap > .integr{grid-column:1 / -1;margin-top:4px}
  #picture .lvl-pair{display:contents}
  #picture > .wrap > .lvl,
  #picture .lvl-pair > .lvl{margin-top:0;min-height:0;height:100%}

  /* Light Glass: уровни — стеклянные карточки, как шапка и лента интеграций.
     Полупрозрачный слой пропускает шейдерный фон, и три блока перестают
     читаться как три плоские коробки поверх страницы. */
  #picture > .wrap > .lvl,
  #picture .lvl-pair > .lvl{
    background:var(--glass-bg);
    border:1px solid var(--glass-br);
    border-radius:var(--r-3xl);
    box-shadow:var(--glass-sh);
    -webkit-backdrop-filter:blur(var(--glass-blur));
    backdrop-filter:blur(var(--glass-blur));
  }

  /* Стрелки между уровнями — тот же знак, что в цепочке первого уровня */
  #picture .lvl-pair > .lvl{position:relative}
  /* Соединитель между уровнями: кружок поверх стыка карточек.
     Было — знак «стрелка вправо» с left:-16 при зазоре 16, то есть коробка
     глифа центрировалась по левой границе зазора: 412,1–431,1 при зазоре
     422–438, половина рисунка ложилась на предыдущую карточку. Теперь центр
     кружка — середина зазора, а по вертикали он на центре плитки с номером
     (47 от верха карточки). Стрелка нарисована, а не набрана: у знака рисунок
     висит выше базовой линии на величину, которой не управляешь. */
  #picture .lvl-pair > .lvl::before{
    content:"";position:absolute;left:-8px;top:47px;
    transform:translate(-50%,-50%);
    width:26px;height:26px;border-radius:50%;
    background:#fff url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2018%2018'%20fill='none'><path%20d='M4%209h10M10%205l4%204-4%204'%20stroke='%231a59f5'%20stroke-width='1.75'%20stroke-linecap='round'%20stroke-linejoin='round'/></svg>") center / 18px 18px no-repeat;
    border:1px solid var(--line-2);
    box-shadow:0 2px 8px rgba(15,31,71,.10);
  }

  /* Уровень 1 в узкой колонке: карточка встречи сверху, цепочка под ней */
  #picture .one{grid-template-columns:1fr;gap:18px;min-height:0}
  #picture .one__meet{padding:16px;gap:14px}
  #picture .one__cover{width:52px;height:52px;border-radius:14px}
  #picture .one__meet h4{font-size:15px}
  /* Цепочка этапов идёт столбиком. Пять плиток в ряд ужимались до 44–77 px
     при шрифте 10,5 и боковых полях 3: в колонке 377 px ряду места нет.
     Строкой подпись гарантированно влезает в одну строку при любой ширине. */
  #picture .one__steps{grid-template-columns:1fr;gap:8px}
  #picture .one__step{flex-direction:row;justify-content:flex-start;text-align:left;
    gap:12px;padding:10px 14px;font-size:13.5px;line-height:1.3;
    border-radius:var(--r-lg)}
  #picture .one__step .ico{width:22px;height:22px;flex:none}
  #picture .one--chain .one__steps::before{display:none}
  /* Стрелка вправо между плитками становится вертикальным соединителем */
  #picture .one__step + .one__step::before{content:"";left:26px;top:-8px;
    width:1px;height:8px;background:#c9d9f7;transform:none}

  /* Уровень 2: три подколонки плотнее */
  #picture .ai__stats{gap:9px}
  #picture .ai__stat{padding:10px 12px;gap:9px}
  #picture .ai__k{font-size:11.5px}
  #picture .ai__v{font-size:12.5px}
  #picture .ai__cols{column-gap:19px;row-gap:10px;margin-top:10px}
  #picture .ai__colhead{padding:9px 10px;font-size:11.5px;gap:6px}
  #picture .ai__colhead .ico{width:13px;height:13px}
  #picture .ai__colbody{padding:10px}
  #picture .ai__hist{gap:9px}
  #picture .ai__hist b{font-size:11.5px}
  #picture .ai__hist i{font-size:10.5px}
  #picture .ai__qs{gap:10px}
  #picture .ai__qs li{font-size:11.5px;gap:7px}
  #picture .ai__answer{font-size:11.5px;line-height:1.5}
  #picture .ai__srcttl{font-size:11px;margin:9px 0 6px}
  #picture .ai__srcs li{font-size:11px}
  #picture .ai__col + .ai__col::before{left:-10px;top:18px;font-size:15px}
  #picture .note--center{font-size:12px;margin-top:12px}

  /* Заголовки уровней чуть мельче: «Поток встреч компании» в самой узкой
     колонке ломался на две строки и утаскивал подпись вниз. */
  #picture .lvl__t{font-size:20px}
  #picture .lvl__d{font-size:14px}
  #picture .lvl__head{gap:14px;margin-bottom:16px}
  #picture .lvl__n{width:42px;height:42px;font-size:15px}

  /* Уровень 3: радар над счётчиками, а не рядом */
  #picture .radar-row{grid-template-columns:1fr;gap:16px}
  #picture .radar{max-width:210px;margin-inline:auto}
  #picture .counters{gap:8px}
  #picture .counter{padding:9px 12px;font-size:12.5px;gap:9px}
  #picture .radar__note{font-size:12px;margin-top:14px;max-width:none}
}

/* ── 2 · Одна встреча: дорожка с кружками, автопереключение 6 с ──────────── */
/* Радар встаёт над счётчиками, счётчики — в две колонки. Рядом они не
   помещались: чип не сжимается ниже 177 px (иконка 20, поля по 12, подпись 14,
   число 15), а дорожка двухколоночного ряда давала ему 152 на 1440 и 91
   на 1100 — «Возможности» выходили за карточку на 24 и 62 px. */
@media (min-width:1100px){
  #picture .lvl-pair .lvl:last-child .radar-row{grid-template-columns:1fr;gap:0;
    align-items:start}
  #picture .lvl-pair .lvl:last-child .radar{max-width:170px;margin:0 auto 14px}
  #picture .lvl-pair .lvl:last-child .counters{gap:9px}
  #picture .lvl-pair .lvl:last-child .radar__note{max-width:none;margin-top:20px}
}
/* Две колонки только с 1280: ниже карточка сама сужается до 306 px, и дорожка
   уходит под минимальную ширину чипа — «Возможности» начинают вылезать
   из плашки. В полосе 1100–1279 счётчики идут столбиком, места под них
   в карточке с запасом. */
@media (min-width:1280px){
  #picture .lvl-pair .lvl:last-child .counters{
    grid-template-columns:repeat(2,minmax(0,1fr))}
  #picture .lvl-pair .lvl:last-child .counter{padding:8px 10px;gap:8px;
    border-radius:var(--r-sm)}
  #picture .lvl-pair .lvl:last-child .counter__i{width:16px;height:16px}
  #picture .lvl-pair .lvl:last-child .counter__t{font-size:11.5px}
  #picture .lvl-pair .lvl:last-child .counter__v{font-size:12px}
}

/* ── 3 · Как встреча попадает: четыре в ряд, строки выровнены ────────────── */
#flow .ways{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch;
  grid-template-rows:auto auto auto}
#flow .way{grid-row:span 3;min-width:0;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;
  row-gap:14px;padding:22px;min-height:0}
#flow .way__shot,#flow .way:nth-child(2) .way__shot,#flow .way:nth-child(3) .way__shot,
#flow .way:nth-child(4) .way__shot{grid-column:1;grid-row:3;
  width:100%;max-width:100%;height:auto;min-width:0;display:block;
  object-fit:contain;object-position:top}
#flow .way__t{text-wrap:balance}
  /* Карточки способов на стекле. Было card--flat: подложка #f7f9fd против фона
     страницы #f7f9fc — карточку не отличить от фона, край виден только
     у той, что под курсором. Рецепт тот же, что у карточек уровней. */
  #flow .way{
    background:var(--glass-bg);
    border:1px solid var(--glass-br);
    box-shadow:var(--glass-sh);
    -webkit-backdrop-filter:blur(var(--glass-blur));
    backdrop-filter:blur(var(--glass-blur));
  }
  /* Ховер поднимает карточку, но рамку оставляет стеклянной: иначе на наведении
     светлый контур подменялся серым и это читалось как мигание. */
  #flow .way.card--hover:hover{border-color:var(--glass-br)}
/* Subgrid держит описания на общей линии, но заголовок «Загрузить файл»
   умещается в одну строку против двух у соседей — и под ним оставался
   двойной провал. Однострочная шапка центрируется в общей строке. */
#flow .way__head{align-self:center}
@supports not (grid-template-rows:subgrid){
  #flow .way{grid-row:auto;grid-template-rows:44px auto auto}
  #flow .way__head{align-items:flex-start}
}

/* ── 4 · После встречи ───────────────────────────────────────────────────
   Возврат к раскладке макета: слева заголовок и описание, справа интерфейс.
   Скриншот во всю ширину 1200 с заголовком по центру заказчик забраковал —
   «не нужен абсолютно такой огромный интерфейс», в макете лаконичнее. */
#result .feats{margin-top:34px}


/* ── 5 · Карусель шаблонов ────────────────────────────────────────────────
   Панели, которые просто показывались и прятались, заменены каруселью:
   активный шаблон по центру, предыдущий и следующий по бокам — позади,
   уменьшенные и приглушённые. Сдвиг 680 подобран так, чтобы из-за активной
   карточки выходила ЛЕВАЯ кромка следующей — с иконкой и названием;
   при меньшем сдвиге справа торчало пустое поле карточки. */
/* Сцена шире блока: в 1220 соседние карточки почти не видны. Ширину берём
   от блока прокрутки, а не 100vw — иначе полоса прокрутки добавляет свои
   пиксели и страница едет вбок. Боковые слайды обрезаем по горизонтали:
   overflow-x:clip не создаёт контейнер прокрутки и оставляет тени сверху
   и снизу видимыми. */
#templates .tstage{position:relative;height:var(--th,520px);margin-top:24px}
#templates .tslide{position:absolute;top:0;left:50%;width:720px;margin-left:-360px;
  transition:transform .78s cubic-bezier(.25,.8,.25,1),
             opacity .78s cubic-bezier(.25,.8,.25,1);
  will-change:transform,opacity}
/* Сдвиг соседних считает JS от фактической ширины сцены: их внешние края
   должны лечь ровно на края блока, а внутренние — уйти под центральную
   карточку. Числом это не задать — блок 1220 на широких экранах и уже
   на средних. Запасное значение 300 отвечает ширине 1220. */
#templates .tslide[data-pos="0"] {transform:translateX(0) scale(1);opacity:1;z-index:3}
#templates .tslide[data-pos="-1"]{transform:translateX(calc(-1 * var(--off,300px))) scale(.86);
  opacity:.45;z-index:2}
#templates .tslide[data-pos="1"] {transform:translateX(var(--off,300px)) scale(.86);
  opacity:.45;z-index:2}
#templates .tslide[data-pos="far"]{opacity:0;pointer-events:none}
#templates .tslide:not([data-pos="0"]){cursor:pointer}
#templates .tslide .tmpl{padding:30px 34px;min-height:0}
#templates .tslide .tmpl__t{font-size:21px}
#templates .tslide .tmpl__h{font-size:15px;margin-top:20px}
#templates .tslide .tmpl__h:first-of-type{margin-top:0}
#templates .tslide .tbl{font-size:13px;line-height:18px}
#templates .tslide .tbl th{padding:9px 10px 6px}

/* Отсчёт до автопереключения: не полоска снизу, а лёгкая полупрозрачная
   заливка, наполняющая вкладку слева направо. z-index:-1 вместе с isolation
   кладёт её под текст, но поверх фона вкладки. */
#templates .ttab{position:relative;isolation:isolate;overflow:hidden}
#templates .ttab__bar{position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--accent-wash-2);transform:scaleX(0);transform-origin:left;opacity:0}
#templates .ttab[data-state="current"] .ttab__bar{opacity:1;
  animation:tmpl-tick var(--every,5000ms) linear forwards}
#templates [data-tabs][data-paused="1"] .ttab__bar{animation-play-state:paused}
@keyframes tmpl-tick{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Ниже 1100 — лента: один отчёт, край следующего, листание вбок со снапом,
   под лентой точки (C-20); вкладок нет (№ 3 списка заказчика 30.09). Раньше
   здесь все четыре отчёта шли столбиком (2684 px на 390), а вкладки,
   которые ничего не переключали, оставались видны: их display:none
   перебивало базовое правило ниже по файлу — гашение теперь после него. */
@media (max-width:1099px){
  #templates .tstage{height:auto;display:flex;align-items:stretch;gap:12px;overflow-x:auto;
    scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
    margin-inline:calc(-1 * var(--pad));padding:4px var(--pad) 12px}
  #templates .tstage::-webkit-scrollbar{display:none}
  /* Основа — как ширина слайда карусели от 1100 (720): с потолком 560
     на 900–1099 вместо края следующей карточки была видна почти вся (N-08
     приёмки 02.10.2026). */
  /* min-width:0 — иначе таблица отчёта распирала карточку шире основы:
     на 320 карточка выходила за экран, на 360–390 первая была шире
     остальных (N-01 приёмки 02.10.2026); поле карточки на ≤639 — в
     home.responsive.css, он грузится последним */
  #templates .tslide{position:static;flex:0 0 min(86%,720px);min-width:0;width:auto;margin:0;transform:none !important;
    opacity:1 !important;transition:none;cursor:default;scroll-snap-align:center}
  /* Отметки карусели data-pos в ленте не обновляются: рука на боковых
     и pointer-events:none у «дальней» гасятся (N-06) */
  #templates .tslide[data-pos]{cursor:default;pointer-events:auto}
  #templates .tslide > .tmpl{height:100%}
  /* Зазор шапка → содержимое давала строка вкладок (.sec__head + *), здесь
     она скрыта. Минус 4 — верхнее поле ленты: от шапки до карточки ровно
     --head-gap (N-07) */
  #templates .ttabs + .tstage{margin-top:calc(var(--head-gap) - 4px)}
}

@media (min-width:1100px){
  #templates .dots{display:none}
}
/* Боковые карточки карусели при «уменьшить движение» скрыты — только
   в карусели: в ленте отметки data-pos не обновляются, и вторая с четвёртой
   карточкой навсегда теряли бы pointer-events (M-05 приёмки 02.10.2026) */
@media (prefers-reduced-motion:reduce) and (min-width:1100px){
  #templates .tslide[data-pos="-1"],#templates .tslide[data-pos="1"]{opacity:0;pointer-events:none}
}
/* На 960–1099 основа 720 оставляла видной почти половину второй карточки
   (37 % на 1024, 48 % на 1099) — край, как на телефоне, даёт 860 (M-06) */
@media (min-width:960px) and (max-width:1099px){
  #templates .tslide{flex-basis:min(86%,860px)}
}
@media (prefers-reduced-motion:reduce){
  #templates .tslide{transition:opacity .2s linear}
  #templates .ttab__bar{animation:none;transform:scaleX(1);opacity:.6}
}

/* ── 5 · Не один шаблон: переключатель шаблонов ──────────────────────────── */
#templates .ttabs{display:flex;gap:8px;justify-content:center;margin-top:32px;flex-wrap:wrap}
/* Гашение — после базового правила той же специфичности (правило 6) */
@media (max-width:1099px){ #templates .ttabs{display:none} }
#templates .ttab{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;
  border-radius:var(--r-lg);background:var(--surface-2);border:1px solid transparent;
  cursor:pointer;font:600 15px/1.2 Onest;color:var(--muted-2)}
#templates .ttab .icon-tile{width:28px;height:28px;border-radius:var(--r-xs)}
#templates .ttab .icon-tile .ico{width:15px;height:15px}
#templates .ttab[data-state="current"]{background:#fff;border-color:var(--line-2);
  color:var(--ink-2);box-shadow:var(--sh-card)}
#templates .ttab:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
#templates .tpane{margin-top:24px}
#templates .tpane[hidden]{display:none}
#templates .tpane .tmpls{grid-template-columns:1fr;gap:0;max-width:720px;margin-inline:auto}
#templates .tpane .tmpl{min-height:0;padding:30px 34px}
#templates .tpane .tmpl__t{font-size:21px}
#templates .tpane .tmpl__h{font-size:15px;margin-top:20px}
#templates .tpane .bullets li,#templates .tpane .decisions li,
#templates .tpane .agrees li{font-size:14.5px;line-height:1.6}
#templates .tpane .tbl{font-size:13px;line-height:18px}
#templates .tpane .tbl th{padding:9px 10px 6px}
#templates .tpane .tbl td{padding:3px 10px;line-height:21px}
#templates .tpane .metrics li{padding:13px}
#templates .tpane .metrics__k{font-size:12px}
#templates .tpane .metrics__v{font-size:20px}
#templates .tpane .recs li{font-size:14px;line-height:23px}
#templates .tpane .meta-band{font-size:13px}

/* ── 6 · Задайте вопрос ──────────────────────────────────────────────────
   Возврат к раскладке макета: слева заголовок, описание и четыре вопроса
   столбиком, справа интерфейс. Вариант с вопросами в строку и скриншотом
   во всю ширину делал секцию самой высокой на странице (1397 px). */

/* ── 7 · Система сама замечает: сигналы крупнее ──────────────────────────── */
#signals .split{grid-template-columns:minmax(0,470px) minmax(0,1fr);gap:44px;align-items:center}
#signals .split__copy{margin-top:0}
#signals .split__copy h2{max-width:440px}
#signals .split__copy .lead{max-width:430px}
#signals .split__shot{width:100%;max-width:none;margin:0}
/* Карточки сигналов вернулись к размеру макета (285×212). Увеличенные до
   250 px они стояли полупустыми — заказчик: «окошки огромные, ни к чему». */
#signals .sigs{margin-top:34px;gap:20px}
#signals .spark{width:180px;height:64px}


/* ── 7 · Связки радара: импульс, бегущий по пути ─────────────────────────────
   Заказчик просил связать дашборд с четырьмя категориями, как на его референсе.
   Сплошные провода из узкой правой зоны в широкий ряд давали несимметричный
   веер, поэтому линия приглушена до тени, а связь показывает бегущий по ней
   огонёк в цвете своего сигнала. Полоса живёт от 1100: ниже карточки идут
   столбиком и горизонтальная разводка бессмысленна. */
#signals .sig-band{display:none}
@media (min-width:1100px){
  #signals .sig-band{display:block;position:relative;height:66px;margin-top:8px}
  #signals .sig-band svg{display:block;width:100%;height:66px;overflow:visible}
  #signals .sigs{margin-top:0}
  #signals .sw{fill:none;stroke:var(--c);stroke-width:1.25;opacity:.16;
    vector-effect:non-scaling-stroke}
  #signals .sw__port{fill:var(--c);opacity:.5}
  #signals .sw__dot{fill:var(--c)}
}
@media (prefers-reduced-motion:reduce){
  #signals .sw__dot{display:none}
  #signals .sw{opacity:.45}
}


/* Схема контекста (.cx-*) переехала в components.css: второе
   употребление — компанийная главная main.html. */

/* ── 8 · Контекст встреч: песочные часы ──────────────────────────────────── */
/* ── 8 · Контекст встреч ─────────────────────────────────────────────────
   Схема-«песочные часы» с безье-стрелками и заголовком во всю ширину снята:
   заказчик сказал, что собрано «не так, как на исходной картинке». Секция
   вернулась к раскладке макета — заголовок и «Источники встреч» слева,
   схема справа, связи тонкими линиями (.flow__wires). */

/* Поле карточки на узком телефоне — 16, как у остальных карточек (D-15 Б) */
@media (max-width:639px){
  #flow .way{padding:16px}
}


/* ============================================================================
   НаВстрече — движение.

   Базис — нативные scroll-driven анимации (animation-timeline: view()):
   ноль JS, работа на потоке композитора. Для браузеров без поддержки —
   общий IntersectionObserver из js/site.js, вешающий .is-in на [data-reveal]
   (общий для всех страниц, не только главной).

   ⚠️ ЛОВУШКА, из-за которой весь блок ревилов обёрнут в no-preference.
   Глобальное `animation-duration:.01ms !important` под prefers-reduced-motion
   схлопывает обычную анимацию, но progress-based таймлайн длительностью
   НЕ управляется — правило не отменяет ничего, и контент продолжает
   двигаться у того, кто попросил его не двигать. Поэтому:
     · весь блок ревилов — внутри prefers-reduced-motion: no-preference
     · в reduce-ветке явно гасим и animation, и animation-timeline
     · базовое состояние элемента ВИДИМОЕ; скрытие живёт только в @keyframes from
   ========================================================================= */

@media (prefers-reduced-motion: no-preference){

  @supports (animation-timeline: view()){
    [data-reveal]{
      animation:ui-reveal linear both;
      animation-timeline:view();
      /* Заканчиваем ещё в фазе входа: когда элемент вошёл на 70%, он уже
         полностью проявился. С `cover` высокая карточка доезжала до
         непрозрачности слишком поздно и на середине экрана оставалась
         полупрозрачной. */
      animation-range-start:entry 4%;
      animation-range-end:entry 70%;
    }
    /* Карточки в группе въезжают друг за другом: сдвиг диапазона вместо delay,
       потому что у progress-based анимации delay не работает. */
    /* Каскад: сдвигаем начало диапазона, а не delay — у progress-based
       анимации задержка не работает. calc допустим только внутри процента,
       поэтому свойства раздельные, а не сокращённое animation-range. */
    [data-reveal][style*="--i"]{
      animation-range-start:entry calc(4% + var(--i, 0) * 7%);
      animation-range-end:entry calc(70% + var(--i, 0) * 5%);
    }
  }

  @supports not (animation-timeline: view()){
    [data-reveal]{
      opacity:0;transform:translateY(var(--reveal-y));
      transition:opacity var(--dur-base) var(--ease-entrance),
                 transform var(--dur-base) var(--ease-entrance);
      transition-delay:calc(var(--i, 0) * var(--stagger));
    }
    [data-reveal].is-in{opacity:1;transform:none}
  }

  /* Hero — единственный --dur-epic на странице. Каскад по --i. */
  [data-anim="hero"]{
    opacity:0;transform:translateY(18px);
    animation:ui-reveal var(--dur-epic) var(--ease-entrance) forwards;
    animation-delay:calc(120ms + var(--i, 0) * 90ms);
  }

  /* Плавающие карточки первого экрана дышат с разной амплитудой.
     Только на широком экране: на узком они стоят в потоке, и сдвиг читается
     как дрожание. */
  @media (min-width:1100px){
    [data-float="1"]{animation:ui-float 7s var(--ease-swap) infinite alternate}
    [data-float="2"]{animation:ui-float 9s var(--ease-swap) -3s infinite alternate}
  }

  /* Точки радара проступают одна за другой и мягко пульсируют */
  .radar__pts circle{
    transform-box:fill-box;transform-origin:center;
    animation:ui-pop var(--dur-base) var(--ease-chip) both,
              ui-breathe 3.2s ease-in-out infinite;
  }
  .radar__pts circle:nth-child(1){animation-delay:200ms, 0ms}
  .radar__pts circle:nth-child(2){animation-delay:320ms, 400ms}
  .radar__pts circle:nth-child(3){animation-delay:440ms, 800ms}
  .radar__pts circle:nth-child(4){animation-delay:560ms, 1200ms}

  /* Спарклайн сигнала прочерчивается при появлении карточки.
     Длину задаёт home.js — без неё dasharray был бы на глаз.
     Базовое состояние — график виден. Прячет его только метка
     html[data-spark], которую ставит тот же скрипт, что потом отмечает
     карточку .is-in: не сработал скрипт — график просто стоит, а не пропадает
     (№ 12 списка заказчика 30.09). */
  .spark__line{
    stroke-dasharray:var(--len,300);stroke-dashoffset:0;
    transition:stroke-dashoffset var(--dur-slow) var(--ease-entrance);
  }
  .spark__area{opacity:.16;transition:opacity var(--dur-slow) var(--ease-entrance) 160ms}
  :root[data-spark] .sig:not(.is-in) .spark__line{stroke-dashoffset:var(--len,300)}
  :root[data-spark] .sig:not(.is-in) .spark__area{opacity:0}

  /* Соединители схемы прорисовываются при первом показе панели */
  .wire{
    stroke-dasharray:var(--len,200);stroke-dashoffset:var(--len,200);
    animation:ui-draw var(--dur-slow) var(--ease-entrance) forwards;
    animation-delay:calc(var(--wi, 0) * 90ms);
  }
}

/* Полное отключение движения по просьбе пользователя */
@media (prefers-reduced-motion: reduce){
  [data-reveal],[data-anim="hero"],[data-float],.radar__pts circle,.wire{
    animation:none !important;animation-timeline:none !important;
    opacity:1 !important;transform:none !important;transition:none !important;
    stroke-dashoffset:0 !important;
  }
  .spark__line{stroke-dashoffset:0}
  .spark__area{opacity:.16}
    html{scroll-behavior:auto}
}

/* Смена таба: контент проявляется, не прыгая */
.tabpanel{animation:ui-fade var(--dur-fast) var(--ease-swap) both}
@media (prefers-reduced-motion: reduce){ .tabpanel{animation:none} }

@keyframes ui-reveal{
  from{opacity:0;transform:translate(var(--enter-x,0),var(--reveal-y))}
  to  {opacity:1;transform:none}
}
@keyframes ui-fade{ from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
@keyframes ui-pop { from{opacity:0;transform:scale(.6) rotate(-25deg)} to{opacity:1;transform:none} }
@keyframes ui-ping{
  0%  {transform:scale(1);   opacity:.7}
  70% {transform:scale(1.35);opacity:0}
  100%{transform:scale(1.35);opacity:0}
}
@keyframes ui-float{ from{transform:translateY(-5px)} to{transform:translateY(5px)} }
@keyframes ui-breathe{ 0%,100%{opacity:1} 50%{opacity:.55} }
@keyframes ui-draw { to{stroke-dashoffset:0} }

/* Не оставляем will-change висеть после анимации */
.hero__shot{will-change:transform}


/* ============================================================================
   НаВстрече — адаптив.
   Эталон — Desktop 1440 из макета. Планшетной и мобильной версий для этой
   страницы в файле нет, поэтому раскладка выведена по правилам десктопа
   и по мобильной версии соседней страницы того же концепта.
   ========================================================================= */

/* ── ≤1279: узкий десктоп ────────────────────────────────────────────────── */
@media (max-width:1279px){
  .hero__f{width:min(240px,44%)}
  .feature__d{font-size:12px}
  .ctx{gap:clamp(18px,2.4vw,34px)}
}

/* ── ≤1099: планшет ──────────────────────────────────────────────────────── */
@media (max-width:1099px){

  /* Здесь визуал уже слишком узок для двух колонок карточек:
     всё выстраивается в один столбец, скриншот идёт первым. */
  .hero__visual{grid-template-columns:1fr;gap:14px;width:100%}
  .hero__shot{order:-1;width:100%}
  .hero__f{width:100%;max-width:none}
  .hero__f--tl,.hero__f--tr,.hero__f--bl,.hero__f--br{order:0}

  .lvl-pair{grid-template-columns:1fr}
  .ways{grid-template-columns:1fr}
  .tmpls,.sigs{grid-template-columns:1fr 1fr}
  .places{grid-template-columns:1fr}
  /* .split,.split--wide и .split__copy .lead на ≤1099 — в components.css (C-14) */
  .hero__copy{padding-top:0}
  .hero__f{min-height:0}
  /* Жёсткие рамки скриншотов сняты с 1440; ниже колонки уже, и фиксированная
     высота начала бы кадрировать картинки. */
  .way__shot,.way:nth-child(2) .way__shot,.way:nth-child(3) .way__shot,
  .way:nth-child(4) .way__shot{width:100%;height:auto}
  .place img{height:auto}

  /* Карточка способа на 1440 — две колонки 230+280; здесь они не помещаются */
  .way{grid-template-columns:1fr;row-gap:14px}
  .way__head,.way__d,.way__shot{grid-column:1}
  .way__shot{grid-row:auto}

  /* Лента интеграций собрана под 1350x76 — здесь переносим и отпускаем высоту */
  .integr{height:auto;flex-wrap:wrap;gap:12px;padding:18px}
  .integr__note{flex:1 0 100%}
  .qs{max-width:none}
  /* Визуал середины — украшение (aria-hidden), и он первый уходит, когда
     колонок больше не три: ниже 1100 рассказ и форма встают друг под друга. */
  /* .demo на ≤1099 — в components.css (C-16) */
  .demo__stage{display:none}
}

/* ── ≤959: шапка сворачивается в бургер ──────────────────────────────────── */
@media (max-width:959px){

  .one{grid-template-columns:1fr}
  /* Цепочка переносится на несколько строк — стрелки повисают
     в начале каждой новой строки, поэтому здесь их убираем */
  .one__steps{grid-template-columns:repeat(3,1fr)}
  .one__step + .one__step::before,
  .one--chain .one__steps::before{display:none}
  .ai__cols{grid-template-columns:1fr}
  .ai__col{min-height:0}
  .radar-row{grid-template-columns:1fr;gap:22px}
  .radar{max-width:220px}

  .way{grid-template-columns:1fr;min-height:0}
  /* Одной строкой заголовок держится только на широком экране */
  .way__t{white-space:normal}
  .way__d{max-width:none}
  .way__shot{max-width:420px}

  /* Форма больше не влезает рядом с рассказом: 400 px при вьюпорте 959
     оставляли колонке текста 535, и заголовок рвался на четыре строки. */
  /* .demo и .demo__form на ≤959 — в components.css (C-16) */
}

/* ── ≤833: схема разворачивается вертикально ─────────────────────────────── */
@media (max-width:767px){
  /* Связи рисовал скрипт по горизонтали — здесь их место занимают
     CSS-стрелки между колонками, поставленными друг под друга. */
  .ctx{grid-template-columns:1fr;gap:26px}
  .flow__wires{display:none}
  .flow__col + .flow__col::before{
    content:"";position:absolute;left:50%;top:-20px;
    width:2px;height:12px;background:var(--line-strong);transform:translateX(-50%);
  }
  .flow__col + .flow__col::after{
    content:"";position:absolute;left:50%;top:-12px;
    width:8px;height:8px;transform:translateX(-50%) rotate(45deg);
    border-right:2px solid var(--line-strong);border-bottom:2px solid var(--line-strong);
  }
}

/* ── ≤767: мобильная раскладка ───────────────────────────────────────────── */
@media (max-width:767px){
  /* .hero__cta ≤767 вынесен в components.css (C-01, продолжение) — F-02. */
  .hero__chips{gap:6px}

  .lvl{padding:18px}
  .one__steps{grid-template-columns:repeat(2,1fr)}
  .one__meet{flex-direction:column;align-items:flex-start}
  .ai__stats{grid-template-columns:1fr}

  .tmpls,.sigs{grid-template-columns:1fr}

  .strip{flex-wrap:wrap}

  .ctx__target .chips{gap:5px}
  /* .demo__form и .demo__contacts на ≤767 — в components.css (C-16) */
}

/* ── ≤639: узкий телефон ─────────────────────────────────────────────────── */
@media (max-width:639px){
  .hero__sub{font-size:clamp(19px,5.2vw,23px)}
  .lvl__t{font-size:19px}
  .one__step{padding:14px 6px;font-size:12px}
  .sig,.place,.tmpl{padding:16px}
  /* Замер на 390: h2 секции опускается до 24, и на этой ширине название
     карточки размещения (24) и заголовок формы (22) сравнивались с ним —
     иерархия пропадала. На телефоне они уходят на ступень ниже. */
  .place h3{font-size:20px}
  .radar{max-width:190px}
}



/* ── Иллюстрация уровней ───────────────────────────────────────────────────
   Секция показывает три уровня одной иллюстрацией из макета вместо трёх
   стеклянных карточек. Экспорт срезан выше её собственных заголовка и лида:
   заголовок секции остаётся живым — он держит типографическую шкалу страницы,
   ищется и читается скринридером, и только в нём сказано, что перестраивать
   переговорную и менять платформу ВКС не нужно.

   Фон иллюстрации непрозрачный #FBFCFF и со своей сеткой в 87 px против 80 у
   страницы, поэтому углы скруглены: светлая плита читается как панель, а не
   как несовпадение фонов.

   Композиция рассчитана на 1672 px. Ниже 900 она прокручивается по горизонтали
   внутри своей области: три карточки на телефоне разворачивали секцию в 2856 px,
   иллюстрация укладывается в 1085. */
.illo{margin:22px 0 0;line-height:0}
.illo__img{width:100%;height:auto;display:block;border-radius:var(--r-3xl)}
@media (min-width:1100px){
  #picture > .wrap > .illo{grid-column:1 / -1;margin-top:4px}
}
@media (max-width:959px){
  .illo{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-3xl)}
  .illo__img{width:1100px;max-width:none;border-radius:0}
}

/* Стили уровней (.lvl, .one, .ai__*) оставлены намеренно: радар и счётчики
   из третьего уровня повторяются в секции «Система сама замечает», а остальное
   нужно для отката — рядом лежит index-v3.до-иллюстрации.html. */


/* ── Первый экран ужат под полосу доверия ─────────────────────────────────
   Полоса стоит отдельной секцией под первым экраном, и чтобы она попадала
   в первый кадр без прокрутки, надо снять 155 px высоты. Масштабируется вся
   сцена целиком, а не только скриншот: скриншот намеренно шире блока карточек
   (700 против 640) и выходит за правый край композиции, растворяясь в фоне.
   Уменьшив его отдельно, мы бы сломали этот приём, а до 640 он отдаёт всего
   38 px из нужных 155. zoom сжимает раскладку, а не только рисунок, поэтому
   высота уменьшается честно, а пропорции карточек, зазоров и скриншота
   сохраняются.

   Сдвиг вправо возвращает сцене правый край, который zoom у неё отобрал:
   при 0,76 скриншот переставал доходить до кромки контейнера 139 px, и справа
   висела пустота. Сдвиг переменный — ниже 1180 места для него уже нет, и clamp
   обнуляет его сам. Паддинг стоит на .hero__visual, а не на .hero__stage:
   у сцены zoom, и отступ внутри неё уехал бы вместе с масштабом. */
@media (min-width:1100px){
  #hero{padding-block:48px 24px}
  #hero .hero__copy{padding-top:36px}
  #hero .hero__stage{zoom:.76}
  #hero .hero__visual{padding-left:clamp(0px,(100vw - 1180px) * .535,139px)}
}

/* ── Воркшоп v2: поведение выбранных композиций на узких экранах ─────────── */
@media (max-width:1279px){
  #hero .hero__shot{width:620px}
}
@media (max-width:1099px){
  /* Ниже 1100 перспектива и двухколоночная плоскость снимаются: карточки
     и скриншот выстраиваются в один столбец во всю ширину. */
  /* minmax(0,1fr), а не 1fr: у трека 1fr минимум равен min-content содержимого,
     и лента доверия шириной ~2700 px раздувала колонку вместе со всем первым
     экраном (замер на 375: колонка становилась 2713 px). */
  #hero .hero__grid{grid-template-columns:minmax(0,1fr)}
  #hero .hero__copy{padding-top:0;min-width:0}
  #hero .hero__stage{perspective:none}
  #hero .hero__plane{transform:none;grid-template-columns:1fr;gap:14px;justify-content:stretch}
  #hero .hero__f{width:100%;transform:none}
  #hero .hero__f--tl,#hero .hero__f--tr,#hero .hero__f--bl,#hero .hero__f--br{
    grid-column:1;grid-row:auto}
  #hero .hero__shot{grid-column:1;grid-row:auto;order:-1;
    width:100%;border-radius:var(--r-lg);
    -webkit-mask-image:none;mask-image:none}
  /* Цепочка уровня 1 не влезала в полосе 1024–1099: карточка встречи 466 плюс
     пять плиток с зазором 32 давали 1052 при вьюпорте 1024. Складываем
     в столбик и поджимаем плитки — так же, как в раскладке от 1100. */
  #picture .one{grid-template-columns:1fr;gap:18px;min-height:0}
  #picture .one__steps{grid-template-columns:repeat(5,1fr);gap:10px}
  #picture .one__step{padding:12px 4px;font-size:11px;line-height:15px;gap:8px}
  #picture .one__step .ico{width:24px;height:24px}
  #picture .one--chain .one__steps::before{display:none}
  #picture .one__step + .one__step::before{left:-6px;font-size:14px}
  #picture .lvl-pair .lvl:last-child .radar-row{grid-template-columns:1fr}
  /* Две колонки держат те же общие строки, что четыре на десктопе:
     subgrid выравнивает описания соседей, когда заголовок ролью h3 (D-06)
     встаёт в одной карточке в две строки, а в соседней — в одну. */
  #flow .ways{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:auto}
  #flow .way__shot,#flow .way:nth-child(2) .way__shot,#flow .way:nth-child(3) .way__shot,
  #flow .way:nth-child(4) .way__shot{height:auto}
  #templates .tpane .tmpls{max-width:none}
  #ask .qs{grid-template-columns:1fr 1fr}
  #signals .split{grid-template-columns:1fr}
}
@media (max-width:767px){
  #flow .ways{grid-template-columns:1fr}
  #ask .qs{grid-template-columns:1fr}
}
/* v4: редакторский проход по обратной связи */

#templates{padding-block:38px 36px}#templates .ttabs{margin-top:20px}#templates .tstage{margin-top:16px}#templates .tslide .tmpl{padding:20px 28px}#templates .tslide .tmpl__h{margin-top:12px}#templates .strip--three{margin-top:16px}#templates .tslide[data-pos="-1"],#templates .tslide[data-pos="1"]{opacity:.28}
#place{background:var(--inverse-bg);color:var(--inverse-text);margin-top:32px;padding-block:56px}#place h2,#place h3{color:var(--inverse-text)}#place .lead{color:var(--inverse-lead)}#place .place{background:var(--inverse-card);border:1px solid var(--inverse-line);border-radius:var(--r-3xl);box-shadow:none}#place .checks li{color:var(--inverse-body)}#place .checks .ico,#place .place__link{color:var(--inverse-accent)}#place .place__sub{color:var(--inverse-accent)}#place .place img{box-shadow:none;border-radius:var(--r-md);border-color:transparent}#place .card--hover:hover{transform:translateY(-2px);background:var(--inverse-card-hover)}
@media(max-width:1099px){#templates .tstage{height:auto!important}}

#picture{--r-3xl:var(--r-illo);--muted-3:var(--illo-caption);--muted-4:var(--illo-note)}

@media(min-width:1100px){#templates .strip--three{padding-block:18px}#templates .lead{max-width:800px}}

/* Лента шаблонов на телефоне (D-39, N-01 приёмки 02.10.2026): чтобы
   таблица «Работы и ответственные» помещалась в карточку одной ширины
   с остальными — поле карточки 18 вместо 28, ячейки поуже, на самых узких — переносы по слогам. Правило
   выше по файлу задаёт поле на всех ширинах, поэтому это — после него. */
@media (max-width:639px){
  #templates .tslide .tmpl{padding-inline:18px}
  #templates .tslide .tbl th,#templates .tslide .tbl td{padding-inline:4px}
  /* Узкая карточка выдавливала плитку «Выручка» и легенду кольца в правое
     поле на 320–330, «6 (14%)» рвалось (M-01 приёмки 02.10.2026) */
  #templates .tslide .metrics{gap:6px}
  #templates .tslide .metrics li{padding-inline:6px}
  #templates .tslide .donut-row{gap:10px}
  #templates .tslide .donut{width:56px;height:56px}
  #templates .tslide .legend li{gap:6px}
  #templates .tslide .legend b{white-space:nowrap}
  /* На 320–354 «Ответственный» не помещается — переносы по слогам, но только
     в карточке не шире 239 (на 353–354 при 238 таблица выходила в поле, K-06): на 360–414 слово целое, как в утверждённом кадре
     (M-02). Это запрос к ширине карточки, а не граница окна D-19. */
  #templates .tslide .tmpl{container-type:inline-size}
}
@container (max-width:239px){
  #templates .tslide .tbl{-webkit-hyphens:auto;hyphens:auto}
}


/* ── Настоящее меню и подвал (qa/v6-nav.mjs) ─────────────────────────────── */
.hdr__nav--real{gap:clamp(4px,1vw,14px)}
.hdr__nav--real>a{padding-inline:8px}
.nav-grp{position:relative;display:flex;align-items:center}
.nav-grp__btn{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 8px;
  background:transparent;border:0;cursor:pointer;
  font:inherit;font-size:14px;color:var(--nav);white-space:nowrap;
  transition:color var(--dur-micro) var(--ease-swap);
}
.nav-grp__btn:hover,.nav-grp:hover .nav-grp__btn,.nav-grp:focus-within .nav-grp__btn{color:var(--ink-2)}
.nav-grp__chev{transition:transform var(--dur-fast) var(--ease-swap)}
.nav-grp:hover .nav-grp__chev,.nav-grp:focus-within .nav-grp__chev,
.nav-grp[data-open] .nav-grp__chev{transform:rotate(180deg)}
.nav-grp__panel{
  position:absolute;left:0;top:100%;z-index:80;padding-top:10px;width:420px;
  visibility:hidden;opacity:0;
  transition:opacity var(--dur-fast) var(--ease-swap),visibility var(--dur-fast) var(--ease-swap);
}
.nav-grp:hover .nav-grp__panel,.nav-grp:focus-within .nav-grp__panel,
.nav-grp[data-open] .nav-grp__panel{visibility:visible;opacity:1}
.nav-grp__card{
  display:flex;flex-direction:column;gap:2px;padding:8px;
  background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-xl);box-shadow:var(--sh-lift);
}
/* ⚠️ Селектор с .hdr__nav — не для красоты. У макета своё правило на ссылки
   в меню: display:inline-flex, white-space:nowrap, min-height:44px. Оно сильнее
   одиночного класса — пункт панели вытягивался в одну строку, а описание
   уезжало за край карточки. Первый снимок это и показал. */
.hdr__nav .nav-it{
  display:block;padding:9px 12px;border-radius:var(--r-md);text-decoration:none;
  min-height:0;white-space:normal;
  transition:background-color var(--dur-micro) var(--ease-swap);
}
.hdr__nav .nav-it:hover{background:var(--surface-3)}
.nav-it__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nav-it__t{font-size:15px;font-weight:600;color:var(--ink-2);line-height:1.3}
.nav-it__b{
  flex:none;padding:3px 8px;border-radius:6px;
  background:var(--surface-3);color:var(--muted-3);font-size:11px;font-weight:600;white-space:nowrap;
}
.nav-it__d{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:var(--muted-3)}

.sheet--real{justify-content:flex-start;gap:0;overflow-y:auto;padding-block:20px 28px}
.sheet--real a{min-height:42px;font-size:16.5px}
.sheet__close{
  position:sticky;top:0;align-self:flex-end;flex:none;
  display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  margin-bottom:4px;background:transparent;border:0;color:var(--ink-2);cursor:pointer;
}
.sheet__cap{
  margin:18px 0 4px;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted-4);
}
.sheet__cap:first-child{margin-top:0}

.ftr{
  margin-top:clamp(48px,6vw,80px);padding-block:clamp(36px,4vw,56px) 24px;
  background:var(--surface-2);border-top:1px solid var(--line-2);
}
.ftr__grid{display:grid;grid-template-columns:minmax(260px,1fr) 2.2fr;gap:clamp(24px,4vw,64px)}
.ftr__brand{margin:0 0 10px;font-size:19px;font-weight:700;color:var(--ink-2)}
.ftr__lead{margin:0 0 16px;max-width:36ch;font-size:14px;line-height:1.5;color:var(--muted-3)}
.ftr__contact{margin:0 0 6px}
.ftr__contact a{font-size:15px;font-weight:600;color:var(--ink-2);text-decoration:none}
.ftr__contact a:hover{color:var(--blue)}
.ftr__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.5vw,32px)}
.ftr__cap{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-4)}
.ftr__col a{
  display:block;margin-bottom:7px;font-size:14px;line-height:1.4;
  color:var(--muted-2);text-decoration:none;
}
.ftr__col a:hover{color:var(--blue)}
.ftr__legal{
  display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;align-items:flex-start;
  margin-top:clamp(28px,3vw,40px);padding-top:20px;border-top:1px solid var(--line-2);
}
.ftr__legal-text p{margin:0 0 4px;font-size:12.5px;line-height:1.5;color:var(--muted-4);max-width:70ch}
.ftr__legal-links{margin:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.ftr__legal-links a{font-size:12.5px;color:var(--muted-3);text-decoration:none}
.ftr__legal-links a:hover{color:var(--blue)}

@media (max-width:1100px){
  .nav-grp__panel{width:360px}
}
@media (max-width:980px){
  .ftr__grid{grid-template-columns:1fr}
  .ftr__cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .ftr__cols{grid-template-columns:1fr}
  .ftr__legal{flex-direction:column}
}

.ftr__cols--v1{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){.ftr__cols--v1{grid-template-columns:1fr}}
/* Шапка: раскладка поверх макета дизайнера — ⛔ С 04.10.2026 (поздно) ПРАВИЛ НЕТ.
 *
 * Шапка «Продукты + полка» (предложение продакта 04.10): знак компании слева, по центру
 * «Продукты · Партнёрам · О компании · Контакты», справа кнопка «Войти». Знаков и названий
 * продуктов в строке больше нет — они в полке под «Продуктами» и в развилке первого экрана
 * главной. Путать знак компании с продуктом НаВстрече в строке теперь не с чем.
 *
 * ~~01.10 (поздно), вариант A: знак компании один слева, всё меню справа, черта между
 * продуктами и разделами (order + margin)~~ — перекрыто шапкой от 04.10: тех элементов нет.
 *
 * Файл подключает Header.astro и вставляет в страницы-макеты qa/preview-v9.mjs. Все селекторы под .hdr-slot.
 */
/* 05.10, продакт: «ссылка „Продукты“ по контрасту чуть отличается от тех, что рядом» — у дизайнера она
   полужирная (600), соседние разделы — обычные (400), цвет тот же. Начертание как у соседей; текущий
   раздел по-прежнему выделяется синим. Селектор длиннее обычного: на «Контактах» стили шапки сайта
   вставляются после этого файла и при равной специфичности перебили бы правку. */
.hdr-slot .hdr__nav .hdr__prodlink{font-weight:400}

.trust__mask{max-width:var(--wrap,1200px);margin-inline:auto}
/* Главная, «Контекст встреч встраивается…»: на 1024–1279 колонка узкая для 46 px — «встраивается»
   выходило за колонку (308 > 282 px на 1100) и упиралось в схему. */
@media (min-width:1024px) and (max-width:1279px){#context .split__copy h2{font-size:38px}}
/* «О компании», 320–359 px: заголовки двух карточек выходили за край (дизайнер ждал выбора способа) —
   перенос по слогам и чуть меньший кегль. */
@media (max-width:359px){#usage .feat__stat,#terms h3{hyphens:auto;overflow-wrap:break-word}#usage .feat__stat{font-size:22px}}
/* «О компании», «Инфраструктура»: плашка-примечание под четырьмя карточками была 440 px (max-width
   у .strip--note) — в полторы колонки, ни с чем не совпадала. Во всю ширину — так же, как дизайнер
   делает широкие примечания классом .strip--wide. ~~Отступ над карточками «Ваш контур или облако»~~ —
   замер вживую: 24 px против 28 px на главной, разницы нет, правка снята. */
#infrastructure .strip--note{max-width:none}
/* Видеоточка, «Как масштабируется», лента схем (телефон и планшет): карточки тянулись до высоты самой
   высокой (1291 px), и сетка внутри разносила содержимое — в «Одном зале» пустота ~190 px посередине.
   Каждой карточке — её высота. */
@media (max-width:1099px){#scale .pg-switch__stage{align-items:flex-start}}
/* «Партнёрам», первый экран на широком экране (продакт, снимок 05.10: «картинка улетела из сетки»): фон
   был растянут на всё окно — на 2560 картинка доходила до края окна при шапке 640…1920. Как на главной
   (01.10): с 1441 px фон не шире 1400 по центру, правый край картинки растворяется. До 1440 — как было. */
@media (min-width:1441px){
  #hero .pg-hero-bg__stage{left:max(0px,calc(50% - 700px));right:max(0px,calc(50% - 700px))}
  #hero .pg-hero-bg__img{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 8%,#000 40%,#000 92%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,transparent 8%,#000 40%,#000 92%,transparent 100%)}
}
/* Подсказка выпадающего списка — серым, как подсказки полей (на «Контактах» так и было — у них своё
   правило с более тёмным серым, оно специфичнее и остаётся). Пункты списка — обычным цветом. */
.field--select select:has(option[value=""]:checked){color:#98a2b8}
.field--select select option{color:var(--ink,#0d1733)}
.pg-consent{margin:4px 0 16px}
.pg-consent .check__t a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.pg-consent__err{margin:-10px 0 14px}
.pg-consent[data-state="error"] + .pg-consent__err{display:block}