/* TOKENS_START */
/* Токены направления В «рабочий стол администратора» — botman.pro, главная v2.
   Одно решение на весь сайт: роли, не цвета. Все значения в вёрстке берутся отсюда. */

:root {
  /* Палитра: почти чёрный графит с едва заметным теплом (hue ≈ 30°, насыщенность ≈ 10 %). При заметной
     насыщенности фон и полосы читались коричневыми, «кофейными», и спорили по температуре с холодно-серыми
     окнами кабинета; на почти нейтральном графите окно читается светящимся экраном, а цвет даёт только свет за ним */
  --bg: #151311;                 /* фон страницы */
  --surface-1: #1C1916;          /* полосы секций, панели, карточки */
  --surface-2: #26221E;          /* вложенные блоки, табы, подложки глифов */
  --text-1: #F3EEE7;             /* заголовки, основной текст — 16.1:1 на --bg */
  --text-2: #B8B0A5;             /* лиды и абзацы — 8.6:1 на --bg, 7.4:1 на --surface-2 */
  --text-3: #9C9387;             /* подписи, мета ≥ 15 px — 6.1:1 на --bg, 5.8:1 на --surface-1, 5.2:1 на --surface-2 */
  --cta: #0066FF;                /* бренд-синий; белый текст 4.8:1 */
  --cta-hover: #2478FF;          /* светлее по решению владельца; белый текст 4.0:1 — только в hover */
  --cta-text: #FFFFFF;
  --cta-active: #0052CC;         /* нажатие: на ступень темнее покоя, без сдвига; белый текст 6.8:1 */
  --secondary: var(--surface-2);  /* вторичная кнопка: поверхность с рамкой, легче синей */
  --secondary-hover: #332D27;    /* --text-1 на нём 11.8:1 */
  --secondary-active: #3D362F;   /* нажатие вторичной: ещё ступень светлее; --text-1 на нём 10.4:1 */
  --secondary-text: var(--text-1);
  --secondary-border: rgba(255, 240, 222, 0.28); /* рамка 2.8:1 к фону: кнопка не сливается в плашку */
  --secondary-border-hover: rgba(255, 240, 222, 0.5); /* рамка под курсором: заметна и там, где подложка почти не отличается */
  --press-wash: rgba(255, 240, 222, 0.11); /* нажатие на пункт меню: плотнее --hover-wash */
  --link: #7DB0FF;               /* ссылки в тексте — 8.0:1 на --bg */
  --success: #3CCB7F;            /* статусы внутри копий интерфейса: онлайн, «записан», доставлено */
  --border: rgba(255, 240, 222, 0.09);
  --border-strong: rgba(255, 240, 222, 0.18);
  --highlight: rgba(255, 255, 255, 0.06); /* блик 1 px по верхней кромке панелей */
  --focus: #9CC3FF;              /* кольцо фокуса — 9.8:1 на --bg; стоит с отступом 2 px, поэтому контрастирует с фоном */
  --dot: rgba(245, 232, 214, 0.18);       /* точка сетки: тихая фактура, глубину даёт маска от центра композиции */
  --dot-hot: rgba(125, 176, 255, 0.9);    /* точка в центре линзы под курсором: холодная, цвета ссылки — тёплая сливалась с сеткой */
  --dot-halo: rgba(125, 176, 255, 0.8);  /* ореол той же точки в центре линзы */
  --success-bg: rgba(60, 203, 127, 0.14); /* подложка скидки у переключателя периода */
  --glow: rgba(0, 102, 255, 0.42);        /* свет от экрана продукта в hero */
  --glow-ai: rgba(0, 102, 255, 0.16);     /* тот же свет вдвое слабее, только за окном ИИ-агента: главный свет страницы один, в hero */
  --mask-ink: #000;                       /* чернила масок фактуры: у маски работает только альфа */
  --link-line: rgba(245, 232, 214, 0.18); /* связи «канал → строка диалога» на фоне hero */
  --scrim: rgba(21, 19, 17, 0.94);        /* шапка поверх контента: почти непрозрачная, свет под неё не заходит */
  --scrim-menu: rgba(21, 19, 17, 0.7);    /* подложка под открытым мобильным меню */
  --scrim-spread: 100vmax;                /* тень-подложка панели меню закрывает весь экран */
  --hover-wash: rgba(255, 240, 222, 0.06); /* наведение на пункт меню поверх любой поверхности */
  --shadow-menu: 0 24px 48px -16px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3);
  /* Копия интерфейса кабинета: цвета сняты с assets/stand-dialog-open.png */
  --mock-bg: #1A1A1E;            /* колонки «Диалоги», сайдбар, переписка */
  --mock-bg-deep: #0A0A0C;       /* поле ввода сообщения */
  --mock-line: #0C0C0E;          /* разделители колонок и строк */
  --mock-row-active: #2A2B30;    /* выбранный диалог, входящий пузырь, активный таб */
  --mock-chip-border: #2F3033;   /* рамка чипа «Не назначен» */
  --mock-text: #E6E6EA;
  --mock-muted: #8A8B8F;
  --mock-brand: #1565C0;         /* синий кабинета: плашка проекта, бейдж канала, аватар */
  --mock-bubble-out: #0D47A1;    /* исходящее сообщение */
  --mock-link: #4A90E2;
  --mock-tag: #6BB4DC;
  --mock-dot: rgba(255, 255, 255, 0.1); /* точечная сетка холста редактора */
  /* состояния контролов копий, как в кабинете: подложка синего под курсором, синяя кнопка светлее под курсором и темнее при нажатии */
  --mock-hover: rgba(74, 144, 226, 0.14);
  --mock-row-hover: #222327;     /* строка списка под курсором: между фоном и выбранной */
  --mock-brand-hover: #1976D2;   /* белый текст 4.6:1 */
  --mock-brand-press: #0D47A1;
  --mock-toggle-off: #4A4B50;    /* выключенный переключатель: дорожка 2.2:1 к колонке, бегунок слева */
  /* фирменные цвета каналов: только ряд каналов в collect, как кнопки каналов на главной кабинета; в обеих темах одни */
  --brand-tg: #2AABEE;
  --brand-vk: #0077FF;
  --brand-max: #5B48F5;
  --brand-ok: #EE8208;
  --brand-webchat: #1FA463;
  --brand-ig: #E1306C;
  --brand-jivo: #1DB954;
  --brand-avito-1: #97CF26;
  --brand-avito-2: #FF6163;
  --brand-avito-3: #A169F7;
  --brand-avito-4: #00AAFF;
  --mock-fill: var(--mock-row-active);   /* нейтральная заливка: входящий пузырь, аватар без фото, статусы; в тёмном кабинете совпадает с активной строкой */
  --mock-raised: var(--mock-row-active); /* всплывающие поверх окна: список «Ответственный», уведомление */
  --phone-bg: var(--mock-bg-deep);       /* рамка телефона */
  --phone-border: var(--border-strong);
  --theme-color: #151311;                /* meta theme-color: строка браузера в цвет фона */
  --only-dark: block;                    /* элементы одной темы: иконка переключателя, кадр схемы */
  --only-light: none;
  color-scheme: dark;

  /* Шрифты: Onest (Google Fonts, подмножество cyrillic есть во всех четырёх начертаниях) */
  --font-sans: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-display: 800;

  /* Кегли, 1440 */
  --fs-h1: 52px;
  --fs-h2: 40px;
  --fs-h3: 22px;
  --fs-niche-wide: 26px;          /* название широкой ниши в «Кому подойдёт»: крупнее узких, карточка читается главной в ряду */
  --fs-lead: 19px;
  --fs-body: 16px;
  --fs-small: 15px;
  --fs-nav: 15px;                /* пункты шапки: как у образца, тише текста страницы */
  --fs-mock: 13px;
  --fs-mock-sm: 12px;
  --fs-mock-md: 14px;            /* мелкий текст крупного фрагмента экрана в туре */
  --fs-mock-title: 20px;         /* заголовок «Диалоги» внутри окна */
  --fs-stat: 48px;

  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-tight: 1.3;
  --lh-body: 1.55;
  --ls-display: -0.025em;
  --ls-heading: -0.02em;
  --lh-none: 1;
  --measure: 48ch;               /* ширина колонки лида в hero (ограничивается колонкой hero 460 px) */

  /* Радиусы: 4 ступени, капсула только у бейджей */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 20px;
  --r-pill: 999px;

  /* Отступы */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 40px;
  --s-7: 56px;
  --s-8: 88px;
  --s-9: 128px;

  /* Плотность секций */
  --section-dense: var(--s-7);
  --section-normal: var(--s-8);
  --section-open: var(--s-9);

  /* Сетка */
  --container: 1280px;
  --gutter: var(--s-5);
  --hdr-offset: var(--s-2);            /* карточка шапки отстоит от верха окна */
  --hdr-bar: var(--s-7);               /* высота карточки шапки */
  --header-h: calc(var(--hdr-bar) + var(--hdr-offset)); /* 64 px: под эту высоту hero сдвигает текст */
  --hdr-pad: var(--s-4);               /* поле карточки: логотип стоит на линии текста hero */
  --lang-w: 160px;                     /* выпадающий список языков */
  --mm-side: 360px;                    /* правая колонка мегаменю: пункты «Botman» и карточка каналов с рядом из восьми значков */
  --mm-brand: 28px;                    /* значок канала и сервиса в карточке мегаменю */
  --header-blur: 12px;                 /* единственное место с блюром */
  --logo-w: 100px;                     /* viewBox логотипа обрезан по контуру знака: 32.5 0 100 20 */
  --logo-h: 20px;
  --hero-text-w: 460px;
  --hero-copy-max: 640px;              /* ширина текста hero, когда окно уходит под него (≤ 1279) */
  --hero-gap: var(--s-6);
  --hero-card-w: 480px;                /* открытая переписка в hero: одна колонка «Диалогов» */
  /* аватар Анны встаёт под плашку MAX: четвёртая из восьми, центр на 3,5/8 ширины ряда; центр аватара в шапке переписки — поле + половина аватара */
  --hero-card-shift: calc(43.75% - var(--s-5) - var(--mock-avatar) / 2);
  --hero-bus: calc(var(--lane) * 9);   /* зазор под рядом каналов: по дорожке на каждую связь стороны и поворот */
  --source: 32px;                      /* плашка глифа: ряд каналов над перепиской в hero, collect, шаги тура, ниши */
  --lane: var(--s-2);                  /* шаг параллельных связей в зазоре между текстом и окном */
  --link-r: 6px;                       /* скругление поворота связи: меньше шага, вложенные углы не слипаются */
  --link-w: 1px;
  --trace-w: 1.5px;                    /* след мотива внутри окна: строка → переписка → метка */
  --node: 3px;                         /* радиус узла-точки на концах связей */
  --flow-dot: 6px;                     /* точка, которая бежит по связи MAX → аватар Анны */
  --line: 1px;

  /* Контролы */
  --control-h: 48px;                   /* кнопки hero и шапки (тач-таргет ≥ 44) */
  --control-h-sm: 40px;
  --control-pad-x: var(--s-5);
  --control-pad-x-sm: var(--s-4);
  --focus-w: 2px;
  --focus-offset: 2px;

  /* Иконки */
  --icon: 24px;
  --icon-sm: 20px;
  --icon-xs: 16px;
  --icon-glyph: 12px;                  /* мелкие иконки в чипах и мете */
  --icon-channel: 14px;                /* глиф канала на бейдже аватара: заливкой, различим при 1x */
  --stroke: 1.75;
  --stroke-mock: 1.5;

  /* Окно продукта (HTML-копия «Диалогов») */
  --mock-rail: 64px;                   /* свёрнутый сайдбар кабинета */
  --mock-list: 300px;
  --mock-chat: 340px;
  --mock-topbar: 56px;
  --mock-avatar: 40px;
  --mock-avatar-sm: 20px;
  --mock-toggle-w: 36px;
  --mock-toggle-h: 20px;
  --mock-toggle-knob: 16px;
  --mock-toggle-pad: 2px;              /* зазор ползунка, смещение глифа канала на аватаре */
  --mock-chip-h: 22px;
  --mock-control-h: 36px;
  --mock-control-h-sm: 32px;
  --mock-bubble-max: 272px;
  --mock-composer-h: 88px;

  /* Кадр схемы в окне редактора: salon-steps-*.png 1573×663 — публичный шаблон «Запись в салон красоты» в редакторе при
     масштабе 57 % (снято @2x). В кадре два шага «Выбор мастера» → «Когда удобно» (x 0–1000, y 0–480 снимка), связь
     «ответил» уходит за правую кромку к «Телефону»: три шага целиком в колонке 2fr ~830 px дают тело блока 6–7 px,
     два — около 11 px, как у текста кабинета на ноутбуке.
     --still-zoom — ширина снимка в ширинах кадра, --still-x / --still-y — левый верхний угол кадра долей снимка */
  --still-zoom: 1.573;
  --still-x: 0;
  --still-y: 0;
  --canvas-ratio: 1000 / 480;
  --tour-ratio: 16 / 10;               /* одна рамка окна у всех шагов тура: при смене шага меняется только содержимое */
  --tour-step-scroll: 90vh;            /* прокрутка на один шаг закреплённого тура */
  --helper-w: 300px;                   /* панель помощника «Что автоматизируем?» в шаге «Сценарий» */
  --popover-w: 220px;                  /* выпадающий список «Ответственный» */
  --list-status-w: 96px;               /* колонки списка «Диалоги» в шаге 1 тура: статус, ответственный, время */
  --list-assign-w: 160px;
  --list-time-w: 44px;
  --toast-w: 260px;                    /* уведомление «Новый диалог» в кабинете */
  --phone-w: 360px;                    /* телефон операторов в collect: строки списка ≥ 11 px */
  --phone-ratio: 588 / 900;            /* список диалогов из пяти строк, пустой низ экрана срезан */
  /* второй телефон — экран «Настройки» (mobile-screen-settings.jpg 588×1280), прокрученный под шапкой: строка состояния и заголовок
     сверху (до 185 px снимка), ниже список с «Безопасность» (с 330 px). Блок профиля между ними — адрес демо-учётки, он в кадр не попадает */
  --pset-w: 588;
  --pset-head-h: 185;
  --pset-cut-y: 330;
  --pset-body-h: 470;
  /* Схема сценария на телефоне: лента из того же снимка (координаты в его пикселях), её листают пальцем внутри окна.
     В ленте три шага до кнопок и вопроса «Когда удобно»; масштаб 0,8 — заголовки блоков около 12 px */
  --strip-crop-x: 0px;
  --strip-crop-y: 0px;
  --strip-crop-w: 1573px;
  --strip-crop-h: 340px;
  --strip-scale: 0.8;
  --strip-src-w: 1573px;               /* ширина снимка salon-steps-*.png */
  --step-line: 2px;                    /* связь шагов тура на телефоне */
  --phone-w-sm: 260px;                 /* пара телефонов в секции приложения */
  --phone-pair-shift: var(--s-8);      /* второй телефон ниже и левее первого */
  /* интеграции: копия экрана кабинета, зазор под связи, колонка групп */
  --integ-gap: var(--s-8);
  --integ-side: 280px;
  --icard-h: 76px;                     /* карточка сервиса: название и кнопка «Подключить» */
  --mbar-h: var(--s-7);                /* нижняя панель с главной кнопкой на телефоне */
  --z-mbar: 9;                         /* под шапкой и её меню */

  /* Тени и слои */
  --shadow-window: 0 0 0 var(--line) rgba(110, 160, 255, 0.28), 0 32px 80px -24px rgba(0, 0, 0, 0.7), 0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-phone: var(--shadow-window);
  --shadow-card: inset 0 var(--line) 0 var(--highlight), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-cta: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.14); /* без синего ореола: свет на экране один — от окна */
  --glow-spill: 144px;                 /* на сколько свет выходит за верхнюю и левую кромку окна */
  --dot-step: 20px;
  --dot-lens-r: 110px;                 /* радиус линзы сетки у курсора; яркое пятно — около 5×5 точек в её середине */
  --hero-dots: radial-gradient(var(--dot) var(--line), transparent var(--line));
  /* точки видны в пустом поле под кнопками, в зазоре и вокруг окна; под окном их закрывает само окно */
  --hero-dots-mask: radial-gradient(ellipse 75% 85% at 55% 62%, #000 30%, transparent 85%);
  /* свет от экрана переписки: один, за карточкой, затухает раньше, чем доходит до текста */
  --hero-glow: radial-gradient(ellipse 62% 52% at 42% 40%, var(--glow), transparent 74%);
  --z-glow: 0;
  --z-window: 2;
  --z-links: 3;                        /* связи и след мотива поверх окна */
  --z-copy: 4;                         /* текст выше окна, связей и свечения */
  --z-header: 10;

  /* Движение */
  --dur-1: 150ms;
  --dur-2: 320ms;
  --dur-motif: 600ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --motif-shift: 16px;                 /* откуда въезжает карточка диалога */
  --dur-msg: 400ms;                    /* реплика hero въезжает, подложка окна растягивается за ней */
  --hero-cue-1: 250ms;                 /* моменты реплик hero от старта: точка по связи MAX → Анна, вопрос, ответ, выбор, запись, метка; конец 2,2 с */
  --hero-cue-2: 650ms;
  --hero-cue-3: 1100ms;
  --hero-cue-4: 1450ms;
  --hero-cue-tag: 1800ms;
  --tab-shift: 8px;                    /* сдвиг содержимого окна тура при смене шага */
  --reveal-shift: 16px;                /* содержимое блока въезжает снизу при первом показе */
  --reveal-step: 70ms;                 /* лесенка заголовок → абзац → окно */
  --reveal-card: 40ms;                 /* лесенка карточек: ниши, тарифы, группы интеграций, каналы */
  --pulse-every: 6s;                   /* после вступления hero точка раз в 6 с пробегает по связи следующего канала */
  --pulse-run: 1200ms;
  --price-roll: var(--dur-2);          /* перекат цены при смене периода */
  --typing-size: 6px;
  --opacity-disabled: 0.45;
  --opacity-muted: 0.6;
  --opacity-hover: 0.8;                /* логотип под курсором */
  --opacity-press: 0.72;               /* текстовая ссылка в момент нажатия */
  --opacity-out-meta: var(--opacity-muted); /* время в исходящем пузыре: 3.4:1 на тёмно-синем */
}

/* Ноутбук и планшет: окно вписано в контейнер, профиль скрыт (не режется посреди подписей) */
@media (max-width: 1399px) {
  :root {
    --hero-dots-mask: radial-gradient(ellipse 80% 85% at 52% 62%, #000 30%, transparent 85%);
  }
}
@media (max-width: 1279px) {
  :root {
    --mock-list: 352px;                  /* список и панели копий кабинета на ноутбуке шире: подписи не режутся */
    --hero-dots-mask: radial-gradient(ellipse 85% 70% at 62% 40%, #000 30%, transparent 85%); /* пустое поле справа от текста и над окном */
    --tour-ratio: 4 / 3;                 /* колонка экрана тура уже: рамка выше, чтобы помощник и список влезали целиком */
    --integ-gap: var(--s-6);
    --integ-side: 220px;
  }
}

/* Телефон 390: отдельная шкала, не масштаб */
@media (max-width: 720px) {
  :root {
    --fs-h1: 34px;
    --fs-h2: 28px;
    --fs-h3: 20px;
    --fs-niche-wide: var(--fs-h3);
    --fs-lead: 17px;
    --fs-stat: 36px;
    --gutter: var(--s-4);
    --header-h: 56px;
    --control-h: 48px;
    --mock-bubble-max: 85%;
    --hero-dots-mask: radial-gradient(ellipse 120% 55% at 50% 48%, #000 30%, transparent 85%);
    --glow-spill: var(--s-8);
    --measure: 100%;
    --phone-w: min(100%, 320px);         /* экран приложения не уже 320 px */
    --phone-w-sm: 180px;                 /* пара телефонов внахлёст укладывается в 358 px */
    --phone-pair-shift: var(--s-6);
    --fs-mock-sm: 13px;                  /* время, имена, чипы и статусы в мокапах читаются с вытянутой руки */
    --mock-muted: #96979B;               /* 4.8:1 на --mock-row-active, самой светлой поверхности мокапа */
  }
}
/* Светлая тема — белая с синим, как светлый кабинет. Без атрибута тема берётся из системы; выбор в шапке
   ставит data-theme на <html> (скрипт в <head> читает его из localStorage до первой отрисовки).
   Один набор значений в двух местах: явный выбор и системная светлая без явного выбора */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #FFFFFF;
  --surface-1: #F5F7FA;          /* полосы секций, карточки: как фон рабочей области светлого кабинета */
  --surface-2: #EDF1F7;
  --text-1: #1B1B1F;             /* 17.2:1 на --bg, 15.2:1 на --surface-2 */
  --text-2: #4B4F58;             /* 8.2:1 на --bg, 7.2:1 на --surface-2 */
  --text-3: #636873;             /* 5.6:1 на --bg, 4.9:1 на --surface-2 */
  --cta: #0066FF;                /* белый текст 4.8:1 */
  --cta-hover: #0052CC;          /* на белом фоне наведение темнее; белый текст 6.8:1 */
  --cta-text: #FFFFFF;
  --cta-active: #0041A3;         /* нажатие: на ступень темнее наведения, без сдвига; белый текст 9.4:1 */
  --secondary-border-hover: rgba(37, 37, 40, 0.5);
  --press-wash: rgba(37, 37, 40, 0.09);
  --secondary: #FFFFFF;          /* вторичная кнопка — контурная, как «Создать сценарий» в кабинете */
  --secondary-hover: #F5F7FA;
  --secondary-active: #EBEEF2;
  --secondary-text: var(--text-1);
  --secondary-border: rgba(37, 37, 40, 0.28);
  --link: #1565C0;               /* синий кабинета: 5.8:1 на --bg, 5.1:1 на --surface-2 */
  --success: #157443;            /* 5.5:1 на --bg */
  --border: rgba(37, 37, 40, 0.10);
  --border-strong: rgba(37, 37, 40, 0.18);
  --highlight: rgba(255, 255, 255, 0.7);
  --focus: #0052CC;              /* 6.8:1 на --bg */
  --dot: rgba(37, 37, 40, 0.14);
  --dot-hot: rgba(0, 102, 255, 0.7);
  --dot-halo: rgba(0, 102, 255, 0.35);
  --success-bg: rgba(21, 116, 67, 0.10);
  --glow: rgba(0, 102, 255, 0.18);        /* на белом свет не светит, а тонирует: втрое слабее тёмного */
  --glow-ai: rgba(0, 102, 255, 0.08);
  --link-line: rgba(37, 37, 40, 0.22);
  --scrim: rgba(255, 255, 255, 0.92);
  --scrim-menu: rgba(27, 27, 31, 0.32);
  --hover-wash: rgba(37, 37, 40, 0.05);
  --shadow-menu: 0 24px 48px -20px rgba(16, 24, 40, 0.18), 0 2px 8px rgba(16, 24, 40, 0.06);
  /* копии экранов — светлый кабинет: stand-shots/light/light-home.png, light-dialogs.png */
  --mock-bg: #FFFFFF;
  --mock-bg-deep: #F4F6F9;
  --mock-line: #ECEEF2;
  --mock-row-active: #E8F1FB;
  --mock-fill: #EEF0F3;          /* --mock-muted на ней 4.2:1, --mock-text 13:1 */
  --mock-raised: #FFFFFF;
  --mock-chip-border: #D9DEE6;
  --mock-text: #252528;          /* 15.3:1 на белом, 13.4:1 на активной строке */
  --mock-muted: #6E727C;         /* мета: 4.8:1 на белом, 4.2:1 на активной строке; #7A7E88 кабинета давал 3.5:1 */
  --mock-brand: #1565C0;
  --mock-bubble-out: #1565C0;    /* белый текст 5.8:1 */
  --mock-link: #1565C0;          /* #2F80ED кабинета с белым текстом даёт 3.9:1, поэтому синий кабинета */
  --mock-tag: #0277A8;           /* 5.0:1 на белом */
  --mock-dot: rgba(37, 37, 40, 0.14);
  --mock-hover: rgba(21, 101, 192, 0.08);
  --mock-row-hover: #F3F7FC;
  --mock-brand-hover: #0D47A1;   /* в светлом кабинете синяя кнопка под курсором темнеет; белый текст 8.6:1 */
  --mock-brand-press: #0A3A85;
  --mock-toggle-off: #C3C8D1;
  --phone-bg: #FFFFFF;
  --phone-border: #D9DEE6;
  --theme-color: #FFFFFF;
  --only-dark: none;
  --only-light: block;
  --shadow-window: 0 0 0 var(--line) rgba(37, 37, 40, 0.10), 0 32px 80px -32px rgba(16, 24, 40, 0.24), 0 8px 24px rgba(16, 24, 40, 0.06);
  --shadow-phone: 0 24px 56px -24px rgba(16, 24, 40, 0.24), 0 4px 12px rgba(16, 24, 40, 0.06);
  --shadow-card: inset 0 var(--line) 0 var(--highlight), 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-cta: 0 1px 2px rgba(16, 24, 40, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --opacity-out-meta: 0.8;       /* пузырь светлее тёмного: при 0.6 время давало 2.4:1, при 0.8 — 3.9:1 */
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #FFFFFF;
    --surface-1: #F5F7FA;          /* полосы секций, карточки: как фон рабочей области светлого кабинета */
    --surface-2: #EDF1F7;
    --text-1: #1B1B1F;             /* 17.2:1 на --bg, 15.2:1 на --surface-2 */
    --text-2: #4B4F58;             /* 8.2:1 на --bg, 7.2:1 на --surface-2 */
    --text-3: #636873;             /* 5.6:1 на --bg, 4.9:1 на --surface-2 */
    --cta: #0066FF;                /* белый текст 4.8:1 */
    --cta-hover: #0052CC;          /* на белом фоне наведение темнее; белый текст 6.8:1 */
    --cta-text: #FFFFFF;
    --cta-active: #0041A3;         /* нажатие: на ступень темнее наведения, без сдвига; белый текст 9.4:1 */
    --secondary-border-hover: rgba(37, 37, 40, 0.5);
    --press-wash: rgba(37, 37, 40, 0.09);
    --secondary: #FFFFFF;          /* вторичная кнопка — контурная, как «Создать сценарий» в кабинете */
    --secondary-hover: #F5F7FA;
    --secondary-active: #EBEEF2;
    --secondary-text: var(--text-1);
    --secondary-border: rgba(37, 37, 40, 0.28);
    --link: #1565C0;               /* синий кабинета: 5.8:1 на --bg, 5.1:1 на --surface-2 */
    --success: #157443;            /* 5.5:1 на --bg */
    --border: rgba(37, 37, 40, 0.10);
    --border-strong: rgba(37, 37, 40, 0.18);
    --highlight: rgba(255, 255, 255, 0.7);
    --focus: #0052CC;              /* 6.8:1 на --bg */
    --dot: rgba(37, 37, 40, 0.14);
    --dot-hot: rgba(0, 102, 255, 0.7);
    --dot-halo: rgba(0, 102, 255, 0.35);
    --success-bg: rgba(21, 116, 67, 0.10);
    --glow: rgba(0, 102, 255, 0.18);        /* на белом свет не светит, а тонирует: втрое слабее тёмного */
    --glow-ai: rgba(0, 102, 255, 0.08);
    --link-line: rgba(37, 37, 40, 0.22);
    --scrim: rgba(255, 255, 255, 0.92);
    --scrim-menu: rgba(27, 27, 31, 0.32);
    --hover-wash: rgba(37, 37, 40, 0.05);
    --shadow-menu: 0 24px 48px -20px rgba(16, 24, 40, 0.18), 0 2px 8px rgba(16, 24, 40, 0.06);
    /* копии экранов — светлый кабинет: stand-shots/light/light-home.png, light-dialogs.png */
    --mock-bg: #FFFFFF;
    --mock-bg-deep: #F4F6F9;
    --mock-line: #ECEEF2;
    --mock-row-active: #E8F1FB;
    --mock-fill: #EEF0F3;          /* --mock-muted на ней 4.2:1, --mock-text 13:1 */
    --mock-raised: #FFFFFF;
    --mock-chip-border: #D9DEE6;
    --mock-text: #252528;          /* 15.3:1 на белом, 13.4:1 на активной строке */
    --mock-muted: #6E727C;         /* мета: 4.8:1 на белом, 4.2:1 на активной строке; #7A7E88 кабинета давал 3.5:1 */
    --mock-brand: #1565C0;
    --mock-bubble-out: #1565C0;    /* белый текст 5.8:1 */
    --mock-link: #1565C0;          /* #2F80ED кабинета с белым текстом даёт 3.9:1, поэтому синий кабинета */
    --mock-tag: #0277A8;           /* 5.0:1 на белом */
    --mock-dot: rgba(37, 37, 40, 0.14);
    --mock-hover: rgba(21, 101, 192, 0.08);
    --mock-row-hover: #F3F7FC;
    --mock-brand-hover: #0D47A1;   /* в светлом кабинете синяя кнопка под курсором темнеет; белый текст 8.6:1 */
    --mock-brand-press: #0A3A85;
    --mock-toggle-off: #C3C8D1;
    --phone-bg: #FFFFFF;
    --phone-border: #D9DEE6;
    --theme-color: #FFFFFF;
  --only-dark: none;
  --only-light: block;
    --shadow-window: 0 0 0 var(--line) rgba(37, 37, 40, 0.10), 0 32px 80px -32px rgba(16, 24, 40, 0.24), 0 8px 24px rgba(16, 24, 40, 0.06);
    --shadow-phone: 0 24px 56px -24px rgba(16, 24, 40, 0.24), 0 4px 12px rgba(16, 24, 40, 0.06);
    --shadow-card: inset 0 var(--line) 0 var(--highlight), 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-cta: 0 1px 2px rgba(16, 24, 40, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    --opacity-out-meta: 0.8;       /* пузырь светлее тёмного: при 0.6 время давало 2.4:1, при 0.8 — 3.9:1 */
  }
}
/* TOKENS_END */

/* ---------- база ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
[hidden] { display: none !important; } /* сильнее display у компонентов (.btn, .plan__bill) */
:focus-visible { outline: var(--focus-w) solid var(--focus); outline-offset: var(--focus-offset); }

.icon {
  width: var(--icon); height: var(--icon);
  fill: none; stroke: currentColor; stroke-width: var(--stroke);
  stroke-linecap: round; stroke-linejoin: round; flex: none;
}
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--xs { width: var(--icon-xs); height: var(--icon-xs); stroke-width: var(--stroke-mock); }
.icon--glyph { width: var(--icon-glyph); height: var(--icon-glyph); stroke-width: var(--stroke-mock); }
.icon--fill { fill: currentColor; stroke: none; }
.icon--channel { width: var(--icon-channel); height: var(--icon-channel); stroke-width: 2; }

.skip {
  position: absolute; left: var(--gutter); top: calc(-1 * var(--s-9));
  display: inline-flex; align-items: center; min-height: var(--control-h);
  z-index: var(--z-header);
  padding: var(--s-2) var(--s-3);
  background: var(--text-1); color: var(--bg);
  border-radius: var(--r-2); font-weight: var(--fw-medium);
}
.skip:focus-visible { top: var(--s-2); }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- кнопки: покой, наведение, нажатие, фокус, недоступно ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: var(--control-h); padding-inline: var(--control-pad-x);
  border-radius: var(--r-2); border: var(--line) solid transparent;
  font: inherit; font-size: var(--fs-body); font-weight: var(--fw-semibold); line-height: var(--lh-none);
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              box-shadow var(--dur-1) var(--ease);
}
.btn--primary { background: var(--cta); color: var(--cta-text); box-shadow: var(--shadow-cta); }
.btn--secondary { background: var(--secondary); color: var(--secondary-text); border-color: var(--secondary-border); }
.btn--sm { height: var(--control-h-sm); padding-inline: var(--control-pad-x-sm); font-size: var(--fs-body); }
/* состояния без движения: наведение и нажатие меняют подложку и рамку, кнопка стоит на месте. Нажатие вне медиазапроса — на телефоне
   это единственный отклик */
.btn--primary:active { background: var(--cta-active); }
.btn--secondary:active { background: var(--secondary-active); border-color: var(--secondary-border-hover); }
.btn[aria-disabled="true"] { opacity: var(--opacity-disabled); pointer-events: none; }
/* наведение только мышью: синяя светлее (--cta-hover), у вторичной подложка на ступень и рамка ярче; нажатие повторено после наведения,
   иначе наведение его перекрывает */
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--cta-hover); }
  .btn--secondary:hover { background: var(--secondary-hover); border-color: var(--secondary-border-hover); }
  .btn--primary:active { background: var(--cta-active); }
  .btn--secondary:active { background: var(--secondary-active); }
}

/* ---------- шапка: тихая полоса над hero, после прокрутки и с открытым меню — бар во всю ширину окна с линией снизу, как у образца; мегаменю висит под баром шириной контейнера ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header);
  height: var(--header-h); pointer-events: none; /* пустые поля шапки над hero не перехватывают клики по странице */
  transition: background-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
/* после прокрутки — полоса во всю ширину окна: подложка с размытием и линия снизу; пункты стоят по контейнеру, своей рамки и фона у них нет */
.site-header.is-scrolled {
  background: var(--scrim); box-shadow: inset 0 calc(-1 * var(--line)) 0 var(--border-strong); pointer-events: auto;
  -webkit-backdrop-filter: blur(var(--header-blur)); backdrop-filter: blur(var(--header-blur));
}
.site-header.is-scrolled .hdr { border-color: transparent; background: transparent; }
.site-header.is-menu { background: var(--surface-1); box-shadow: inset 0 calc(-1 * var(--line)) 0 var(--border); }
.hdr-wrap { height: 100%; padding-top: var(--hdr-offset); transition: translate var(--dur-1) var(--ease); }
.hdr {
  position: relative; pointer-events: auto;
  display: flex; align-items: center; gap: var(--s-2);
  height: var(--hdr-bar); margin-inline: calc(-1 * var(--hdr-pad)); padding-inline: var(--hdr-pad);
  border: var(--line) solid transparent; border-radius: var(--r-3);
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
@media (min-width: 961px) { .site-header.is-scrolled { height: var(--hdr-bar); } .site-header.is-scrolled .hdr-wrap { translate: 0 calc(-1 * var(--hdr-offset)); } } /* --header-h посчитан на :root со сдвигом: бар после прокрутки ровно по высоте пунктов */
.logo { display: flex; align-items: center; min-height: var(--control-h); margin-right: var(--s-4); border-radius: var(--r-1); flex: none; }
.logo svg { width: var(--logo-w); height: var(--logo-h); transition: opacity var(--dur-1) var(--ease); }
.logo:active svg, .foot__logo:active svg { opacity: var(--opacity-press); }
@media (hover: hover) and (pointer: fine) { .logo:hover svg, .foot__logo:hover svg { opacity: var(--opacity-hover); } }
.hdr__nav { flex: 1; min-width: 0; }
.hdr__list { display: flex; align-items: center; gap: var(--s-1); white-space: nowrap; }
.hdr__li { display: flex; }
.hdr__item {
  display: inline-flex; align-items: center; gap: var(--s-1); height: var(--control-h-sm); padding-inline: var(--s-2);
  font: inherit; font-size: var(--fs-nav); font-weight: var(--fw-medium); line-height: var(--lh-none); white-space: nowrap;
  color: var(--text-1); background: transparent; border: 0; border-radius: var(--r-2); cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.hdr__chev { color: var(--text-3); transition: transform var(--dur-1) var(--ease); }
.hdr__trigger[aria-expanded="true"] { background: var(--surface-2); }
.hdr__trigger[aria-expanded="true"] .hdr__chev { transform: rotate(180deg); color: var(--text-1); }
/* нажатие: та же подложка, что при наведении, плюс слой --press-wash */
.hdr__item:active { background-color: var(--surface-2); background-image: linear-gradient(var(--press-wash), var(--press-wash)); }
@media (hover: hover) and (pointer: fine) {
  .hdr__item:hover { background-color: var(--surface-2); }
  .hdr__item:hover .hdr__chev { color: var(--text-1); }
}
.hdr__actions { display: flex; align-items: center; gap: var(--s-1); margin-left: auto; }
.hdr__actions .btn { margin-left: var(--s-1); }
/* вторичная кнопка шапки — контур без заливки, как «Talk to Sales» у образца: синяя остаётся единственным пятном.
   :where — чтобы правило не перебивало подложку наведения и нажатия у .btn--secondary */
:where(.hdr__actions) .btn--secondary { background: transparent; }
.lang { position: relative; display: flex; }
.lang__btn { padding-inline: var(--s-2); color: var(--text-2); }
.lang__code { display: none; } /* только глобус, как у образца: шесть пунктов и пять действий в одной строке 1280 */
.theme-toggle { justify-content: center; width: var(--control-h-sm); padding: 0; color: var(--text-2); }
.lang__menu {
  position: absolute; top: calc(100% + var(--s-2)); right: 0; min-width: var(--lang-w);
  padding: var(--s-1); background: var(--surface-1); border: var(--line) solid var(--border); border-radius: var(--r-2);
  box-shadow: var(--shadow-menu);
  opacity: 0; visibility: hidden; transform: translateY(calc(-1 * var(--s-1)));
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), visibility 0s linear var(--dur-1);
}
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), visibility 0s; }
.lang__opt {
  display: flex; align-items: center; min-height: var(--control-h); padding-inline: var(--s-3);
  font-size: var(--fs-body); color: var(--text-2); border-radius: var(--r-1);
}
.lang__opt[aria-current] { color: var(--text-1); font-weight: var(--fw-medium); }
.lang__opt { transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.lang__opt:active { background: var(--press-wash); color: var(--text-1); }
@media (hover: hover) and (pointer: fine) {
  .lang__opt:hover { background: var(--hover-wash); color: var(--text-1); }
  .lang__opt:active { background: var(--press-wash); }
}

/* ---------- мегаменю «Решения»: четыре колонки по пути заявки, как Product у respond.io; правая колонка отделена линией,
   под её пунктами карточка каналов и интеграций. Панель во всю ширину карточки шапки, прилегает снизу ---------- */
.mm {
  position: absolute; top: 100%; left: calc(-1 * var(--line)); right: calc(-1 * var(--line));
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, var(--mm-side)); grid-template-rows: auto 1fr;
  column-gap: var(--s-4); row-gap: var(--s-4);
  padding: var(--s-5) var(--s-4) var(--s-4);
  background: var(--surface-1); border: var(--line) solid var(--border); border-top: 0;
  border-radius: 0 0 var(--r-3) var(--r-3); box-shadow: var(--shadow-menu);
  white-space: normal;
  opacity: 0; visibility: hidden; transform: translateY(calc(-1 * var(--s-1)));
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), visibility 0s linear var(--dur-1);
}
.mm.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), visibility 0s; }
.mm::before { content: ""; grid-column: 4; grid-row: 1 / -1; justify-self: start; width: var(--line); margin-left: calc(var(--s-4) / -2); background: var(--border); }
.mm__col { grid-row: 1 / -1; display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.mm__col--side { grid-column: 4; grid-row: 1; }
.mm__head { padding-inline: var(--s-3); color: var(--text-3); font-size: var(--fs-small); line-height: var(--lh-tight); }
.mm__list { display: grid; gap: var(--s-1); }
.mm__item {
  display: flex; align-items: center; gap: var(--s-3); min-height: var(--control-h); padding: var(--s-2) var(--s-3);
  border-radius: var(--r-2); color: var(--text-1);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.mm__icon { color: var(--text-2); transition: color var(--dur-1) var(--ease); }
.mm__name { font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: var(--lh-tight); }
a.mm__item:active { background: var(--press-wash); }
@media (hover: hover) and (pointer: fine) {
  a.mm__item:hover { background: var(--hover-wash); }
  a.mm__item:hover .mm__icon { color: var(--text-1); }
  a.mm__item:active { background: var(--press-wash); }
}

/* карточка «Каналы и интеграции»: целиком ведёт к #integrations — ссылка заголовка растянута на карточку; значки каналов со своей
   страницей — отдельные ссылки поверх, остальные значки пропускают клик к карточке. Значки каналов фирменного цвета, как в collect */
.mm__chans {
  position: relative; grid-column: 4; grid-row: 2; align-self: end;
  display: grid; gap: var(--s-3); padding: var(--s-3) var(--s-4) var(--s-4);
  background-color: var(--surface-2); border: var(--line) solid var(--border); border-radius: var(--r-3);
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.mm__chans-link {
  display: flex; align-items: center; gap: var(--s-3); min-height: var(--control-h-sm);
  font-weight: var(--fw-medium); color: var(--text-1); border-radius: var(--r-1);
}
.mm__chans-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-3); }
.mm__brands { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding-left: calc(var(--icon) + var(--s-3)); }
.mm__brand { display: grid; place-items: center; border-radius: var(--r-2); }
a.mm__brand { position: relative; z-index: 1; }
.mm__chans .plate { width: var(--mm-brand); height: var(--mm-brand); background: var(--brand); color: var(--cta-text); box-shadow: none; transition: box-shadow var(--dur-1) var(--ease); }
.mm__chans .plate .icon { width: var(--icon-xs); height: var(--icon-xs); }
.mm__chans .plate[data-ch="avito"] { --brand: var(--bg); box-shadow: inset 0 0 0 var(--line) var(--border-strong); }
.mm__logo { width: var(--mm-brand); height: var(--mm-brand); border-radius: var(--r-2); background: var(--bg); box-shadow: inset 0 0 0 var(--line) var(--border-strong); color: var(--text-2); }
.mm__count { padding-left: var(--s-1); color: var(--text-2); font-weight: var(--fw-medium); }
.mm__chans:has(> .mm__chans-link:active) { background-image: linear-gradient(var(--press-wash), var(--press-wash)); border-color: var(--border-strong); }
.mm__chans-link:active .mm__icon { color: var(--text-1); }
a.mm__brand:active .plate { box-shadow: 0 0 0 var(--focus-offset) var(--surface-2), 0 0 0 calc(var(--focus-offset) + var(--line)) var(--text-2); }
@media (hover: hover) and (pointer: fine) {
  .mm__chans:has(> .mm__chans-link:hover) { background-image: linear-gradient(var(--hover-wash), var(--hover-wash)); border-color: var(--border-strong); }
  .mm__chans-link:hover .mm__icon { color: var(--text-1); }
  a.mm__brand:hover .plate { box-shadow: 0 0 0 var(--focus-offset) var(--surface-2), 0 0 0 calc(var(--focus-offset) + var(--line)) var(--text-3); }
  .mm__chans:has(> .mm__chans-link:active) { background-image: linear-gradient(var(--press-wash), var(--press-wash)); }
  a.mm__brand:active .plate { box-shadow: 0 0 0 var(--focus-offset) var(--surface-2), 0 0 0 calc(var(--focus-offset) + var(--line)) var(--text-2); }
}

/* переключатель темы строкой (меню телефона) */
.theme-only-dark { display: var(--only-dark); }
.theme-only-light { display: var(--only-light); }
.theme-row { gap: var(--s-3); width: 100%; padding: 0; font: inherit; font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-1); background: transparent; border: 0; cursor: pointer; text-align: left; }
.theme-row__text { flex: 1; }
.theme-row__switch {
  position: relative; flex: none; width: var(--mock-toggle-w); height: var(--mock-toggle-h);
  border-radius: var(--r-pill); background: var(--text-3); transition: background-color var(--dur-1) var(--ease); /* выключенное состояние различимо: дорожка ≥ 3:1 к панели меню */
}
.theme-row__switch::after {
  content: ""; position: absolute; top: var(--mock-toggle-pad); left: var(--mock-toggle-pad);
  width: var(--mock-toggle-knob); height: var(--mock-toggle-knob); border-radius: var(--r-pill); background: var(--cta-text);
  transition: transform var(--dur-1) var(--ease);
}
.theme-row[aria-pressed="true"] .theme-row__switch { background: var(--cta); }
.theme-row[aria-pressed="true"] .theme-row__switch::after { transform: translateX(calc(var(--mock-toggle-w) - var(--mock-toggle-knob) - 2 * var(--mock-toggle-pad))); }
/* переход по якорю: заголовок секции не прячется под шапкой */
section[id] { scroll-margin-top: calc(var(--header-h) + var(--s-4)); }

/* ---------- меню телефона: полноэкранная панель под шапкой ---------- */
.hdr__burger, .mnav { display: none; }
.hdr__burger {
  place-items: center; width: var(--control-h); height: var(--control-h); margin-left: auto; padding: 0;
  color: var(--text-1); background: transparent; border: 0; border-radius: var(--r-2); cursor: pointer;
  transition: background-color var(--dur-1) var(--ease);
}
.hdr__burger:active { background-color: var(--surface-2); background-image: linear-gradient(var(--press-wash), var(--press-wash)); }
@media (hover: hover) and (pointer: fine) { .hdr__burger:hover { background-color: var(--surface-2); } }
.hdr__burger-close { display: none; }
.hdr__burger[aria-expanded="true"] .hdr__burger-open { display: none; }
.hdr__burger[aria-expanded="true"] .hdr__burger-close { display: block; }
.mnav {
  position: fixed; left: 0; right: 0; top: var(--header-h); bottom: 0; pointer-events: auto;
  overflow-y: auto; overscroll-behavior: contain; background: var(--bg);
}
.mnav.is-open { display: block; }
.mnav__sheet {
  display: flex; flex-direction: column; min-height: 100%;
  padding: var(--s-2) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom));
}
.mnav__group { border-bottom: var(--line) solid var(--border); }
.mnav__row {
  display: flex; align-items: center; gap: var(--s-3); min-height: var(--control-h);
  font-size: var(--fs-body); color: var(--text-1); border-radius: var(--r-1);
}
.mnav__row .icon { color: var(--text-2); }
.mnav__row--static { color: var(--text-2); }
/* отклик строк меню: подложка выходит за текст тенью того же цвета, поэтому строка не сдвигается; нажатие плотнее наведения */
:is(a, summary, button).mnav__row { transition: background-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
:is(a, summary, button).mnav__row:active { background: var(--press-wash); box-shadow: 0 0 0 var(--s-2) var(--press-wash); }
.mnav__top:active { box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  :is(a, summary, button).mnav__row:hover { color: var(--link); }
  :is(a, summary, button).mnav__row:hover .icon { color: var(--link); }
}
.mnav__sum { justify-content: space-between; list-style: none; cursor: pointer; font-size: var(--fs-lead); font-weight: var(--fw-semibold); }
.mnav__sum::-webkit-details-marker { display: none; }
.mnav__chev { color: var(--text-3); transition: transform var(--dur-1) var(--ease); }
.mnav__group[open] .mnav__chev { transform: rotate(180deg); }
.mnav__group[open] { padding-bottom: var(--s-3); }
.mnav__head { display: block; padding-top: var(--s-3); color: var(--text-3); font-size: var(--fs-small); }
/* карточка каналов в конце «Решений»: значки-ссылки по 44 px, два ряда по четыре */
.mnav__chans { margin-top: var(--s-4); }
.mnav__chans .mm__chans-link { min-height: var(--control-h); }
.mnav__chans .mm__brands { display: grid; grid-template-columns: repeat(4, calc(var(--s-6) + var(--s-1))); gap: 0 var(--s-2); padding-left: 0; }
.mnav__chans .mm__brand { width: calc(var(--s-6) + var(--s-1)); height: calc(var(--s-6) + var(--s-1)); }
.mnav__chans .plate, .mnav__chans .mm__logo { width: var(--source); height: var(--source); }
.mnav__chans .mm__count { justify-self: center; padding-left: 0; }
.mnav__top { font-size: var(--fs-lead); font-weight: var(--fw-semibold); border-bottom: var(--line) solid var(--border); border-radius: 0; }
.mnav__prefs { display: flex; flex-direction: column; padding-block: var(--s-3); }
.mnav__lang-label { flex: 1; }
.mnav__seg { display: flex; padding: var(--s-1); gap: var(--s-1); background: var(--surface-2); border-radius: var(--r-2); }
.mnav__seg-opt {
  display: grid; place-items: center; min-width: var(--control-h); min-height: calc(var(--s-6) + var(--s-1));
  font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--text-2); border-radius: var(--r-1);
}
.mnav__seg-opt[aria-current] { background: var(--bg); color: var(--text-1); }
.mnav__seg-opt { transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.mnav__seg-opt:not([aria-current]):active { background: var(--press-wash); color: var(--text-1); }
@media (hover: hover) and (pointer: fine) { .mnav__seg-opt:not([aria-current]):hover { color: var(--text-1); } }
.mnav__foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3); margin-top: auto; padding-top: var(--s-4); }
.is-locked, .is-locked body { overflow: hidden; }

/* ноутбук: пункты остаются в одной строке; «Сделайте за меня» до 1180 px не помещается (на 1024 не хватает 39 px) — он есть в «Решениях» */
@media (max-width: 1179px) { .hdr__service { display: none; } }
@media (max-width: 1279px) {
  .logo { margin-right: var(--s-2); }
  /* мегаменю на ноутбуке: карточка каналов — полосой во всю ширину под колонками */
  .mm { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 0.8fr); column-gap: var(--s-3); padding-inline: var(--s-3); } /* у «Botman» пункты короче: три первые шире, и на 1024 названия в одну строку */
  .mm::before { grid-row: 1; margin-left: calc(var(--s-3) / -2); }
  .mm__col, .mm__col--side { grid-row: 1; }
  .mm__head { padding-inline: var(--s-2); }
  .mm__item { gap: var(--s-2); padding-inline: var(--s-2); }
  .mm__chans { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-5); }
  .mm__brands { padding-left: 0; }
}
/* планшет и телефон: шапка во всю ширину, вместо пунктов — кнопка меню */
@media (max-width: 960px) {
  .hdr__nav, .hdr__actions { display: none; }
  .hdr__burger { display: grid; }
  .hdr-wrap { padding-top: 0; }
  .hdr { height: var(--header-h); margin-inline: 0; padding-inline: 0; border: 0; border-radius: 0; background: transparent; }
  .site-header { transition: background-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
  .site-header.is-scrolled, .site-header.is-mnav { background: var(--scrim); box-shadow: inset 0 calc(-1 * var(--line)) 0 var(--border-strong); }
  .site-header.is-mnav { background: var(--bg); }
  .site-header.is-scrolled .hdr { background: transparent; }
  .site-header.is-mnav .hdr__burger { background: var(--surface-2); }
}

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; padding-block: calc(var(--header-h) + var(--section-dense)) var(--section-normal); } /* шапка лежит поверх hero прозрачной, точки просвечивают */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: var(--z-glow); pointer-events: none;
  background-image: var(--hero-dots); background-size: var(--dot-step) var(--dot-step);
  -webkit-mask-image: var(--hero-dots-mask); mask-image: var(--hero-dots-mask);
}
.hero__inner {
  position: relative;
  display: grid; grid-template-columns: minmax(0, var(--hero-text-w)) minmax(0, 1fr);
  column-gap: var(--hero-gap); align-items: center;
}
.hero__copy { position: relative; z-index: var(--z-copy); }
.hero h1 {
  font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--ls-display);
  font-weight: var(--fw-display); text-wrap: balance;
}
.hero__lead { margin-top: var(--s-5); font-size: var(--fs-lead); color: var(--text-1); font-weight: var(--fw-medium); max-width: var(--measure); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero__note { margin-top: var(--s-4); font-size: var(--fs-body); color: var(--text-3); max-width: var(--measure); }

/* образ: восемь каналов-источников сверху, связи от них сходятся в одну открытую переписку */
.hero__visual { position: relative; z-index: var(--z-window); display: flex; flex-direction: column; row-gap: var(--hero-bus); min-width: 0; }
.hero__chans { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); justify-items: center; }
.src { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); min-width: 0; color: var(--text-3); }
.src__plate {
  display: grid; place-items: center; width: var(--source); height: var(--source);
  border-radius: var(--r-2); background: var(--surface-2); box-shadow: inset 0 0 0 var(--line) var(--border);
}
.src__plate { position: relative; }
.src__plate::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 var(--line) var(--cta); opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.src.is-ping .src__plate::after { opacity: 1; }
.src__plate .icon { width: var(--icon-sm); height: var(--icon-sm); } /* 20 px на плашке 32: силуэты каналов различимы и без подписи на телефоне */
.src__caption { font-size: var(--fs-small); line-height: var(--lh-tight); white-space: nowrap; }
/* заявка в карточке пришла из MAX: его плашка отмечена, связь от неё входит в аватар Анны по прямой */
.src--on { color: var(--text-1); }
.src--on .src__plate { box-shadow: inset 0 0 0 var(--line) var(--cta); }

/* карточка переписки сдвинута под плашку MAX и на широком экране заходит за правую кромку колонки; свет один — за ней */
.hero__stage { position: relative; width: var(--hero-card-w); margin-left: var(--hero-card-shift); }
.hero__stage::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: calc(-1 * var(--glow-spill)); background: var(--hero-glow);
}
.hcard {
  position: relative; display: flex; flex-direction: column;
  background: var(--mock-bg); color: var(--mock-text);
  border-radius: var(--r-3); box-shadow: var(--shadow-window); overflow: hidden;
  font-size: var(--fs-mock); line-height: var(--lh-tight);
}
.hcard::after { content: ""; position: absolute; inset: 0 0 auto 0; height: var(--line); background: var(--highlight); pointer-events: none; }
.hcard .chat__body { justify-content: flex-start; }
.hcard .msg { max-width: 78%; }

/* связи рисует скрипт по реальным координатам плашек и аватара, поэтому они сходятся в одну точку на любой ширине */
.hero__links { position: absolute; inset: 0; z-index: var(--z-links); width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.link { fill: none; stroke: var(--link-line); stroke-width: var(--link-w); }
.port { fill: var(--bg); stroke: var(--cta); stroke-width: var(--link-w); }
.flow-dot { fill: none; stroke: var(--cta); stroke-width: var(--flow-dot); stroke-linecap: round; stroke-dasharray: 0.001 2; opacity: 0; }
/* пульс: заявки стекаются по связям каналов в окно; порт отвечает кольцом, когда точка дошла */
.pulse, .ipulse { fill: none; stroke: var(--cta); stroke-width: var(--flow-dot); stroke-linecap: round; stroke-dasharray: 0.001 2; opacity: 0; }
.port-ring { fill: none; stroke: var(--cta); stroke-width: var(--link-w); opacity: 0; transform-box: fill-box; transform-origin: center; }
.pulse.is-run { animation: flow-run var(--pulse-run) var(--ease) both; }
.port-ring.is-run { animation: ring-out var(--dur-motif) var(--ease) var(--pulse-run) both; }
@keyframes ring-out { from { opacity: 0.8; transform: scale(1); } to { opacity: 0; transform: scale(2.6); } }

/* ---------- копии интерфейса кабинета: колонка, сайдбар, аватар, чипы, переписка ---------- */
.win__col { min-width: 0; min-height: 0; overflow: hidden; border-right: var(--line) solid var(--mock-line); display: flex; flex-direction: column; }
.win__col:last-child { border-right: 0; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* свёрнутый сайдбар кабинета */
.rail { align-items: center; gap: var(--s-2); padding-block: var(--s-4); overflow: hidden; }
.rail__logo { width: var(--icon); height: auto; margin-bottom: var(--s-3); }
.rail__item {
  display: grid; place-items: center; position: relative;
  width: var(--mock-control-h); height: var(--mock-control-h);
  border-radius: var(--r-2); color: var(--mock-muted);
}
.rail__item--active { background: var(--mock-row-active); color: var(--mock-text); }
.rail__bottom { margin-top: auto; display: flex; flex-direction: column; gap: var(--s-2); align-items: center; }
.rail__dot {
  position: absolute; top: var(--s-2); right: var(--s-2);
  width: var(--s-2); height: var(--s-2); border-radius: var(--r-pill); background: var(--mock-brand);
}
.toggle { position: relative; width: var(--mock-toggle-w); height: var(--mock-toggle-h); border-radius: var(--r-pill); background: var(--mock-brand); flex: none; }
.toggle::after {
  content: ""; position: absolute; top: var(--mock-toggle-pad); right: var(--mock-toggle-pad);
  width: var(--mock-toggle-knob); height: var(--mock-toggle-knob); border-radius: var(--r-pill); background: var(--cta-text);
}
.nowrap { white-space: nowrap; }
.iconbtn {
  display: grid; place-items: center; flex: none;
  width: var(--mock-control-h); height: var(--mock-control-h);
  border: var(--line) solid var(--mock-chip-border); border-radius: var(--r-2); color: var(--mock-muted);
}
.avatar {
  position: relative; grid-row: 1 / 3; display: grid; place-items: center;
  width: var(--mock-avatar); height: var(--mock-avatar); border-radius: var(--r-pill);
  background: var(--mock-fill); color: var(--mock-muted);
}
.avatar--brand { background: var(--mock-brand); color: var(--cta-text); font-weight: var(--fw-semibold); font-size: var(--fs-small); }
.avatar__glyph {
  position: absolute; right: calc(-1 * var(--mock-toggle-pad)); bottom: calc(-1 * var(--mock-toggle-pad));
  display: grid; place-items: center;
  width: var(--mock-avatar-sm); height: var(--mock-avatar-sm); border-radius: var(--r-pill);
  background: var(--mock-brand); color: var(--cta-text);
  box-shadow: 0 0 0 var(--mock-toggle-pad) var(--mock-bg);
}
.chip {
  display: inline-flex; align-items: center; gap: var(--s-1);
  height: var(--mock-chip-h); padding-inline: var(--s-2);
  border: var(--line) solid var(--mock-chip-border); border-radius: var(--r-1);
  color: var(--mock-muted); font-size: var(--fs-mock-sm); white-space: nowrap;
}
.chip--ai { color: var(--mock-text); }
.chip--tag { color: var(--success); border-color: var(--success); }
.mini {
  display: grid; place-items: center; width: var(--mock-avatar-sm); height: var(--mock-avatar-sm);
  border-radius: var(--r-pill); background: var(--mock-fill); color: var(--mock-muted);
}
/* колонка переписки */
.chat__head {
  display: flex; align-items: center; gap: var(--s-3); flex: none;
  height: var(--mock-topbar); padding-inline: var(--s-5); border-bottom: var(--line) solid var(--mock-line);
}
.chat__who { flex: 1; min-width: 0; }
.chat__name { display: block; font-weight: var(--fw-semibold); }
.chat__sub { display: block; color: var(--mock-muted); font-size: var(--fs-mock-sm); margin-top: var(--s-1); }
.chat__actions { display: flex; align-items: center; gap: var(--s-3); color: var(--mock-muted); }
.chat__body {
  flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--s-2);
  padding: var(--s-4) var(--s-5); overflow: hidden;
}
.msg { display: flex; flex-direction: column; max-width: var(--mock-bubble-max); }
.msg--in { align-self: flex-start; }
.msg--out { align-self: flex-end; align-items: flex-end; }
.msg__who { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-1); color: var(--mock-muted); font-size: var(--fs-mock-sm); }
.msg__bubble {
  padding: var(--s-3) var(--s-4); border-radius: var(--r-3);
  background: var(--mock-fill); line-height: var(--lh-body);
}
.msg--in .msg__bubble { border-top-left-radius: var(--r-1); }
.msg--out .msg__bubble { background: var(--mock-bubble-out); color: var(--cta-text); border-top-right-radius: var(--r-1); }
.msg__time {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--s-1);
  margin-top: var(--s-1); font-size: var(--fs-mock-sm); color: var(--mock-muted);
}
.msg--out .msg__time { color: var(--cta-text); opacity: var(--opacity-out-meta); }
.chat__tags {
  display: flex; align-items: center; gap: var(--s-2); flex: none;
  padding: var(--s-2) var(--s-5); border-top: var(--line) solid var(--mock-line);
  color: var(--mock-muted); font-size: var(--fs-mock-sm);
}
.chat__composer {
  flex: none; display: flex; flex-direction: column; gap: var(--s-3);
  min-height: var(--mock-composer-h); padding: var(--s-3) var(--s-5);
  background: var(--mock-bg-deep);
}
.composer__field { color: var(--mock-muted); flex: 1; }
.composer__bar { display: flex; align-items: center; gap: var(--s-3); color: var(--mock-muted); }
.composer__bar strong { font-weight: var(--fw-medium); color: var(--mock-text); margin-left: auto; }
.composer__send {
  padding: var(--s-2) var(--s-4); border-radius: var(--r-2);
  background: var(--mock-bg); border: var(--line) solid var(--mock-chip-border); color: var(--mock-muted);
}
/* ---------- одна смысловая анимация: точка бежит по связи MAX → Анна, реплики появляются по очереди, затем метка «записан».
   Класс .is-play ставит скрипт в <head>, когда движение не отключено; без него (нет JS, reduced motion) переписка видна сразу ---------- */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes flow-run { 0% { stroke-dashoffset: 0; opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: -1; opacity: 0; } }

/* связи рисует скрипт после старта анимаций реплик; --t0 сдвигает задержку точки к моменту загрузки */
.is-play .hero .flow-dot { animation: flow-run var(--dur-motif) linear both var(--t0, 0ms); }
/* цепочка укладывается в 2,5 с, «записан» — последней. Раскладка финальная с начала: реплика въезжает, подложка окна растягивается
   за ней (scaleY до доли --hk от скрипта), пустого места нет. Радиус по вертикали делится на --hk — углы круглые */
@keyframes msg-in { from { opacity: 0; transform: translateY(var(--motif-shift)); } }
.is-play .hcard { background: none; box-shadow: none; }
.is-play .hcard .chat__head { background: var(--mock-bg); }
.is-play .hero__stage::after {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--mock-bg); box-shadow: var(--shadow-window);
  border-radius: var(--r-3) / calc(var(--r-3) / var(--hk, 1)); transform-origin: top; transform: scaleY(var(--hk, 0));
  transition: transform var(--dur-msg) var(--ease);
}
.is-play .hcard .msg:nth-child(1) { animation: msg-in var(--dur-msg) var(--ease) backwards var(--hero-cue-1); }
.is-play .hcard .msg:nth-child(2) { animation: msg-in var(--dur-msg) var(--ease) backwards var(--hero-cue-2); }
.is-play .hcard .msg:nth-child(3) { animation: msg-in var(--dur-msg) var(--ease) backwards var(--hero-cue-3); }
.is-play .hcard .msg:nth-child(4) { animation: msg-in var(--dur-msg) var(--ease) backwards var(--hero-cue-4); }
.is-play .hcard .chat__tags { animation: fade-in var(--dur-msg) var(--ease) backwards var(--hero-cue-tag); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .is-play .hcard .msg:nth-child(n), .is-play .hcard .chat__tags, .is-play .hero .flow-dot { animation: none; }
  .is-play .hero__stage::after { transform: none; border-radius: var(--r-3); transition: none; }
  .hero__links :is(.flow-dot, .pulse, .port-ring) { display: none; }
}

/* ---------- ноутбук и планшет: колонка образа равна карточке, подписи каналов остаются в title ---------- */
@media (max-width: 1279px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, var(--hero-card-w)); }
  .hero__stage { width: 100%; margin-left: 0; }
  .src__caption { display: none; }
}

/* ---------- шапка в меню, образ под текстом ---------- */
@media (max-width: 960px) {
  .hero__inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-7); }
  .hero__copy { max-width: var(--hero-copy-max); }
  .hero__stage { width: var(--hero-card-w); max-width: 100%; margin-left: max(0px, min(var(--hero-card-shift), 100% - var(--hero-card-w))); }
  .src__caption { display: block; }
}

/* ---------- телефон: карточка на всю ширину, высота по содержимому, глифы в ряд над ней ---------- */
@media (max-width: 720px) {
  .hero { padding-block: calc(var(--header-h) + var(--s-6)) var(--section-dense); }
  .hero__inner { row-gap: var(--s-6); }
  .hero__cta { margin-top: var(--s-5); }
  .hero__cta .btn { flex: 1 1 auto; }
  .hero__stage { width: 100%; margin-left: 0; }
  .src__caption { display: none; }
  .hcard .chat__head, .hcard .chat__tags { padding-inline: var(--s-4); }
  .hcard .chat__body { padding: var(--s-4); }
}

/* ================= страница целиком (поверх hero) ================= */

/* ---------- появление содержимого блока при первом показе: только opacity и translate, лесенкой; секции и фон не анимируются.
   Класс .will-reveal ставит скрипт и снимает после появления; без .is-play (reduced motion) ничего не скрыто ---------- */
.is-play .will-reveal { transition: opacity var(--dur-2) var(--ease) var(--rd, 0ms), translate var(--dur-2) var(--ease) var(--rd, 0ms); }
.is-play .will-reveal:not(.is-in, :focus-within) { opacity: 0; translate: 0 var(--reveal-shift); }

/* ---------- ритм: три плотности, чередование фона ---------- */
.sec { position: relative; isolation: isolate; }
.pad-open { padding-block: var(--section-open); }
.pad-normal { padding-block: var(--section-normal); }
.pad-dense { padding-block: var(--section-dense); }
.band { background: var(--surface-1); border-block: var(--line) solid var(--border); }
.dotted::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--hero-dots); background-size: var(--dot-step) var(--dot-step);
  -webkit-mask-image: var(--hero-dots-mask); mask-image: var(--hero-dots-mask);
}

.sec__title {
  font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading);
  font-weight: var(--fw-display); text-wrap: balance;
}
.sec__text { margin-top: var(--s-4); font-size: var(--fs-lead); color: var(--text-2); max-width: var(--measure); }
.sec__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-6); align-items: center; }
.split--rev { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.split > * { min-width: 0; }


/* плашка глифа: тот же знак, что у каналов-источников hero */
.plate {
  display: grid; place-items: center; flex: none;
  width: var(--source); height: var(--source); border-radius: var(--r-2);
  background: var(--surface-2); color: var(--text-2);
  box-shadow: inset 0 0 0 var(--line) var(--border);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.plate .icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: var(--stroke-mock); }

/* линза сетки у курсора (canvas вставляет скрипт только для мыши от 1024 px без reduced motion): в круге --dot-lens-r точки
   рисует canvas, раздвинутыми от курсора и светящимися, а CSS-сетку там вырезает маска; на краю круга точки canvas совпадают
   с обычными, поэтому шва нет. Вне круга и без мыши — только CSS-сетка */
.dots-lens { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; pointer-events: none; }
.hero > .dots-lens { z-index: var(--z-glow); }
.is-lens::before {
  -webkit-mask-image: radial-gradient(circle var(--dot-lens-r) at var(--mx) var(--my), transparent var(--dot-lens-r), var(--mask-ink) var(--dot-lens-r)), var(--hero-dots-mask);
  mask-image: radial-gradient(circle var(--dot-lens-r) at var(--mx) var(--my), transparent var(--dot-lens-r), var(--mask-ink) var(--dot-lens-r)), var(--hero-dots-mask);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* ---------- окно кабинета (HTML-копия), общая рамка ---------- */
.screen { position: relative; min-width: 0; }
.app {
  position: relative; display: grid;
  grid-template-columns: calc(var(--mock-list) - var(--s-8)) minmax(0, 1fr);
  background: var(--mock-bg); color: var(--mock-text);
  border-radius: var(--r-3); box-shadow: var(--shadow-window); overflow: hidden;
  font-size: var(--fs-mock); line-height: var(--lh-tight);
}
.app::after { content: ""; position: absolute; inset: 0 0 auto 0; height: var(--line); background: var(--highlight); pointer-events: none; }
.app--rail { grid-template-columns: var(--mock-rail) minmax(0, 1fr); }
.app__main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.app__top {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--s-3); flex: none;
  height: var(--mock-topbar); padding-inline: var(--s-4); border-bottom: var(--line) solid var(--mock-line);
}
.app__top--split { justify-content: space-between; }

/* развёрнутый сайдбар кабинета */
.side { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; padding: var(--s-4) var(--s-2); border-right: var(--line) solid var(--mock-line); }
.side__logo { width: var(--logo-w); height: var(--logo-h); margin: 0 var(--s-2) var(--s-3); }
.side__project {
  display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2);
  padding: var(--s-2); border-radius: var(--r-2);
  background: var(--mock-brand); color: var(--cta-text); font-weight: var(--fw-semibold); white-space: nowrap;
}
.initials {
  display: grid; place-items: center; flex: none;
  width: var(--icon); height: var(--icon); border-radius: var(--r-pill);
  background: var(--mock-link); color: var(--cta-text); font-size: var(--fs-mock-sm);
}
.side__item {
  display: flex; align-items: center; gap: var(--s-3);
  height: var(--mock-control-h); padding-inline: var(--s-2); border-radius: var(--r-2); white-space: nowrap;
}
.side__item--active { background: var(--mock-row-active); color: var(--mock-link); }

/* кнопки и поля внутри кабинета */
.mbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); flex: none;
  height: var(--mock-control-h-sm); padding-inline: var(--s-3);
  border: var(--line) solid var(--mock-muted); border-radius: var(--r-2); color: var(--mock-text); white-space: nowrap;
}
.mbtn--primary { height: var(--mock-control-h); padding-inline: var(--s-4); background: var(--mock-brand); border-color: var(--mock-brand); color: var(--cta-text); font-weight: var(--fw-medium); }
.select {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-width: 0;
  height: var(--mock-control-h); padding-inline: var(--s-4);
  border: var(--line) solid var(--mock-chip-border); border-radius: var(--r-2);
}
.select > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select .icon { color: var(--mock-muted); }
.field { padding: var(--s-3) var(--s-4); background: var(--mock-bg-deep); border-radius: var(--r-2); line-height: var(--lh-body); }
.mlabel { font-weight: var(--fw-semibold); }
.mhint { color: var(--mock-muted); font-size: var(--fs-mock-sm); }
.chip--open { color: var(--mock-tag); border-color: var(--mock-tag); }
.chip--on { color: var(--mock-text); border-color: var(--mock-link); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }


/* системная плашка и разделитель дня в переписке */
.sys {
  align-self: center; display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-1) var(--s-3); border-radius: var(--r-1);
  background: var(--mock-fill); color: var(--mock-muted); font-size: var(--fs-mock-sm);
}
.daysep { align-self: center; color: var(--mock-muted); font-size: var(--fs-mock-sm); }

/* ---------- живые копии экранов: figure[data-live] получает .is-live от 721 px, контролы копии — настоящие кнопки и поля.
   Состояния как в кабинете: подложка синего под курсором, синяя кнопка светлее, нажатие на 1 px; в углу окна ярлык «демо» ---------- */
/* кнопка или поле, в которые скрипт превращает span копии, выглядят как сам span: всё оформление — у класса элемента */
:where(button[data-ctl]) { appearance: none; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; line-height: inherit; letter-spacing: inherit; text-align: inherit; cursor: pointer; }
:where(input[data-ctl], textarea[data-ctl]) { appearance: none; display: block; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--mock-text); line-height: inherit; resize: none; }
.is-live :is(input, textarea)[data-ctl]::placeholder { color: var(--mock-muted); opacity: 1; }
/* поле в фокусе — рамка кабинета на его подложке, как у поля ввода в кабинете; своё кольцо полю не нужно */
.is-live :is(input, textarea)[data-ctl]:focus { outline: none; }
.is-live .chat__composer:focus-within, .is-live .helper__input:focus-within, .is-live textarea.tchat__field:focus { box-shadow: inset 0 0 0 var(--focus-w) var(--mock-link); }
/* фокус внутри окна — кольцо внутрь: окно режет всё, что выходит за его колонки */
.is-live [data-ctl]:focus-visible { outline-offset: calc(-1 * var(--focus-w)); }
.is-live :is(.mbtn, .iconbtn, .select, .ex, .composer__send, .tchat__send, .tpl__row, .bc__btn, .side__item, .rail__item, .dlist__row, .bl__row, .pop__item) { cursor: pointer; }
.is-live .bl__row--head { cursor: default; }
/* нажатие с протяжкой не выделяет подписи кнопок, как в кабинете */
.is-live :is(button[data-ctl], .mbtn, .iconbtn, .select, .ex, .composer__send, .tchat__send, .tpl__row, .bc__btn, .side__item, .rail__item, .dlist__row, .bl__row) { -webkit-user-select: none; user-select: none; }
.mbtn, .select, .iconbtn, .ex, .composer__send, .tchat__send, .bc__btn, .side__item, .rail__item, .tpl__row, .dlist__tab, .ig__tab, .dlist__row, .bl__row, .pop__item, .chip, .fn__row, .dlist__accept {
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.toggle { transition: background-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.toggle::after { transition: transform var(--dur-2) var(--ease); }
/* переключатель выключен: дорожка серая, бегунок уезжает влево */
[aria-pressed="false"] > .toggle { background: var(--mock-toggle-off); }
[aria-pressed="false"] > .toggle::after { transform: translateX(calc(var(--mock-toggle-knob) + 2 * var(--mock-toggle-pad) - var(--mock-toggle-w))); }
@media (hover: hover) and (pointer: fine) {
  .is-live :is(.mbtn, .iconbtn, .select, .ex, .composer__send, .tchat__send, .tpl__row):hover { border-color: var(--mock-link); background-color: var(--mock-hover); color: var(--mock-text); }
  .is-live :is(.mbtn--primary, .mbtn--on, .bc__btn):hover { background-color: var(--mock-brand-hover); border-color: var(--mock-brand-hover); color: var(--cta-text); }
  .is-live :is(.side__item, .rail__item):not(.side__item--active, .rail__item--active):hover { background-color: var(--mock-hover); color: var(--mock-text); }
  .is-live :is(.dlist__row, .bl__row:not(.bl__row--head)):not(.dlist__row--on):hover { background-color: var(--mock-row-hover); }
  .is-live :is(.dlist__tab, .ig__tab)[aria-selected="false"]:hover { background-color: var(--mock-hover); color: var(--mock-text); }
  .is-live .pop__item:hover { background-color: var(--mock-hover); }
  .is-live .chip[data-ctl]:hover { border-color: var(--mock-link); background-color: var(--mock-hover); color: var(--mock-text); }
  .is-live :is(.fn__row, .dlist__accept):hover { color: var(--mock-text); }
  .is-live :is(.fn__row, .dlist__accept):hover > .toggle { box-shadow: 0 0 0 var(--s-1) var(--mock-hover); }
}
/* нажатие — после наведения, иначе наведение перекрывает его подложку */
.is-live :is(.dlist__tab, .ig__tab):active { background-color: var(--mock-hover); color: var(--mock-text); }
.is-live :is(.mbtn, .iconbtn, .select, .ex, .composer__send, .tchat__send, .tpl__row, .pop__item):active, .is-live .chip[data-ctl]:active { background-color: var(--mock-hover); }
.is-live :is(.mbtn--primary, .mbtn--on, .bc__btn):active { background-color: var(--mock-brand-press); border-color: var(--mock-brand-press); color: var(--cta-text); }
.is-live :is(.side__item, .rail__item):active { background-color: var(--mock-hover); }
.is-live :is(.dlist__row, .bl__row:not(.bl__row--head)):active { background-color: var(--mock-row-active); }
.is-live :is(.fn__row, .dlist__accept):active > .toggle { box-shadow: 0 0 0 var(--s-1) var(--mock-row-active); }
/* ярлык «демо» — над правым верхним углом окна, как вкладка папки: не закрывает экран и стоит одинаково у всех живых копий */
.demo-tag { display: none; }
.is-live > .demo-tag {
  position: absolute; right: var(--s-5); bottom: 100%; z-index: var(--z-window);
  display: inline-flex; align-items: center; height: var(--mock-chip-h); padding-inline: var(--s-2);
  background: var(--mock-bg); color: var(--mock-muted); font-size: var(--fs-mock-sm); line-height: var(--lh-none);
  border-radius: var(--r-1) var(--r-1) 0 0; box-shadow: 0 0 0 var(--line) var(--mock-chip-border);
}

/* ---------- тур: 4 таба слева, экран справа, на телефоне шаги друг под другом ---------- */
.tour__title { margin-bottom: var(--s-6); }
.tour__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  grid-template-rows: repeat(4, auto) 1fr; column-gap: var(--s-6); row-gap: var(--s-2);
  counter-reset: step;
}
/* список шагов: на десктопе tablist, li и сам список не дают боксов, кнопки встают в сетку тура */
.tour__tabs, .tour__tabs > li { display: contents; }
.tour__tab {
  grid-column: 1;
  display: grid; grid-template-columns: var(--source) minmax(0, 1fr); column-gap: var(--s-3); row-gap: var(--s-1);
  padding: var(--s-4); text-align: left; cursor: pointer;
  font: inherit; color: var(--text-2); background: transparent;
  border: var(--line) solid transparent; border-radius: var(--r-3);
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease);
}
.tour__tabs > li:nth-child(1) > .tour__tab { grid-row: 1; }
.tour__tabs > li:nth-child(2) > .tour__tab { grid-row: 2; }
.tour__tabs > li:nth-child(3) > .tour__tab { grid-row: 3; }
.tour__tabs > li:nth-child(4) > .tour__tab { grid-row: 4; }
.tour__tab .plate { grid-row: 1 / 3; }
.tour__name { display: flex; gap: var(--s-2); font-size: var(--fs-h3); line-height: var(--lh-tight); font-weight: var(--fw-semibold); color: var(--text-1); }
.tour__num { color: var(--text-3); font-variant-numeric: tabular-nums; }
.tour__num::before { counter-increment: step; content: counter(step); }
.tour__desc { font-size: var(--fs-body); }
.tour__tab[aria-selected="true"] { background: var(--surface-2); border-color: var(--border-strong); box-shadow: var(--shadow-card); color: var(--text-1); }
.tour__tab[aria-selected="true"] .plate { background: var(--bg); color: var(--link); }
/* шаг под курсором: подложка и рамка, без подъёма; нажатие плотнее */
button.tour__tab[aria-selected="false"]:active { background-color: var(--press-wash); border-color: var(--border-strong); color: var(--text-1); }
@media (hover: hover) and (pointer: fine) {
  .tour__tab[aria-selected="false"]:hover { background-color: var(--hover-wash); border-color: var(--border-strong); color: var(--text-1); }
  button.tour__tab[aria-selected="false"]:active { background-color: var(--press-wash); }
  .tour__tab[aria-selected="false"]:hover .plate { color: var(--text-1); }
}
/* все панели лежат в одной ячейке и имеют одну рамку окна: crossfade идёт только по прозрачности */
.tour__panel {
  grid-column: 2; grid-row: 1 / -1; align-self: center; min-width: 0;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}
.tour__panel.is-active { opacity: 1; visibility: visible; transition: opacity var(--dur-2) var(--ease), visibility 0s; }
/* рамка окна стоит на месте, содержимое нового шага въезжает на 8 px */
.tour__panel .app__pane { transform: translateY(var(--tab-shift)); transition: transform var(--dur-2) var(--ease); }
.tour__panel.is-active .app__pane { transform: none; }
.tour__panel.is-past .app__pane { transform: translateY(calc(-1 * var(--tab-shift))); }
/* ≥1024 без reduced motion (.tour--scrolly ставит скрипт): четыре экрана прокрутки, шаги и окно закреплены под шапкой, связь шагов
   заполняется по ходу (--tour-p). На низком экране (--pin-off) закрепление начинается, когда заголовок ушёл под шапку */
.tour--scrolly { padding-block: 0; }
section.tour--scrolly { scroll-margin-top: var(--header-h); }
.tour--scrolly .tour__track { height: calc(100vh - var(--header-h) + var(--pin-off, 0px) + 3 * var(--tour-step-scroll)); }
section.tour--tight .tour__pin { justify-content: flex-start; }
.tour--scrolly .tour__pin {
  position: sticky; top: calc(var(--header-h) - var(--pin-off, 0px)); height: calc(100vh - var(--header-h) + var(--pin-off, 0px));
  display: flex; flex-direction: column; justify-content: center; padding-block: var(--s-5);
}
.tour--scrolly .tour__tab { z-index: 1; }
.tour--scrolly .tour__grid::before, .tour--scrolly .tour__grid::after {
  content: ""; grid-column: 1; grid-row: 1 / 4; justify-self: start; pointer-events: none;
  width: var(--step-line); background: var(--border-strong);
  margin: calc(var(--s-4) + var(--source) / 2) 0 calc(-1 * (var(--s-2) + var(--s-4) + var(--source) / 2)) calc(var(--s-4) + (var(--source) - var(--step-line)) / 2);
}
.tour--scrolly .tour__grid::after { background: var(--cta); transform: scaleY(var(--tour-p, 0)); transform-origin: top; }
.tour--scrolly .tour__panel { will-change: opacity; }
.journey__bar { display: flex; align-items: center; gap: var(--s-3); min-height: var(--s-7); padding: var(--s-4) var(--s-5); border-bottom: var(--line) solid var(--mock-chip-border); font-size: var(--fs-body); }
.journey__demo { margin-left: auto; color: var(--mock-muted); font-size: var(--fs-mock-sm); white-space: nowrap; }
.journey__muted { font-size: var(--fs-small); color: var(--mock-muted); }
.assistant { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-8); align-items: center; }
.assistant__copy .sec__text + .sec__text { margin-top: var(--s-4); }
.assistant__copy .btn { margin-top: var(--s-5); }
.assistant__body { display: grid; gap: var(--s-5); padding: var(--s-6); }
.assistant__body .helper__title { font-size: var(--fs-h3); margin: 0; }
.assistant__examples { display: flex; flex-wrap: wrap; gap: var(--s-2); font-size: var(--fs-small); }
.assistant__request { padding: var(--s-4); border-radius: var(--r-2); background: var(--mock-row-active); font-size: var(--fs-body); }
.assistant__draft { padding: var(--s-5); border: var(--line) solid var(--mock-chip-border); border-radius: var(--r-2); }
.assistant__draft-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); font-size: var(--fs-body); }
.assistant__draft-head .chip { margin-left: auto; }
.assistant__draft ol { list-style: decimal; padding-left: var(--s-5); margin-block: var(--s-4); font-size: var(--fs-body); }
.assistant__draft li + li { margin-top: var(--s-2); }
.mobile-banner { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; gap: var(--s-6); padding: var(--s-7); background: var(--surface-1); border: var(--line) solid var(--border-strong); border-radius: var(--r-4); }
.mobile-banner__visual img { display: block; width: 100%; height: auto; border-radius: var(--r-3); }
.mobile-banner__available { margin-top: var(--s-5); color: var(--text-1); font-size: var(--fs-body); }
.mobile-banner .mob__stores { margin-top: var(--s-4); gap: var(--s-2); }
.mobile-banner .mob__stores .btn { padding-inline: var(--s-4); }
.src__button { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); min-width: calc(var(--s-6) + var(--s-1)); min-height: calc(var(--s-6) + var(--s-1)); border: 0; padding: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; border-radius: var(--r-2); }
.src__button:active { color: var(--text-1); background: var(--press-wash); }
@media (hover:hover) and (pointer:fine) { .src__button:hover { color: var(--text-1); background: var(--hover-wash); } }
.hero .link--selected { stroke: var(--cta); stroke-width: calc(var(--link-w) * 2); }
.hero.has-selection .hcard .msg, .hero.has-selection .hcard .chat__tags { animation: none; }
.hero.has-selection .flow-dot { display: none; }
@media (max-width: 1279px) { .assistant { gap: var(--s-6); } .mobile-banner { padding: var(--s-6); } }
@media (max-width: 1023px) { .assistant { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .journey__bar { padding-inline: var(--s-4); }
  .assistant__body { padding: var(--s-4); gap: var(--s-4); }
  .assistant__draft { padding: var(--s-4); }
  .mobile-banner { grid-template-columns: minmax(0, 1fr); padding: var(--s-5); gap: var(--s-5); }
  .mobile-banner__visual { max-width: calc(var(--s-9) * 3); margin-inline: auto; }
  .mobile-banner .mob__stores { display: grid; grid-template-columns: minmax(0, 1fr); }
  .mobile-banner .mob__stores .btn { width: 100%; }
}

.app--tour { grid-template-columns: var(--mock-rail) minmax(0, 1fr); aspect-ratio: var(--tour-ratio); }
.app--tour > .win__col:last-child { border-right: 0; }
.app__pane { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* шаг 1: новый диалог, выбор ответственного */
.chip--assign { height: var(--mock-control-h-sm); padding-inline: var(--s-3); border-color: var(--mock-link); color: var(--mock-text); }
.pop {
  position: absolute; top: calc(var(--mock-topbar) - var(--s-1)); right: var(--s-5); z-index: var(--z-window);
  display: flex; flex-direction: column; gap: var(--s-1); width: var(--popover-w); padding: var(--s-2);
  background: var(--mock-raised); border: var(--line) solid var(--mock-chip-border); border-radius: var(--r-2);
  box-shadow: var(--shadow-window);
}
.pop__title { padding: var(--s-1) var(--s-2); color: var(--mock-muted); font-size: var(--fs-mock-sm); }
.pop__item { display: flex; align-items: center; gap: var(--s-2); height: var(--mock-control-h); padding-inline: var(--s-2); border-radius: var(--r-1); }
.pop__item--on { background: var(--mock-bg); color: var(--mock-link); }
.pop__check { margin-left: auto; }
.tour__panel .chat__body { justify-content: flex-start; }
/* шаг 1 — раздел «Диалоги» как список заявок на всю ширину окна, без переписки: этим шаг не повторяет открытую переписку hero */
.app--list { grid-template-columns: var(--mock-rail) minmax(0, 1fr); }
.dlist__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); flex: none; padding: var(--s-4) var(--s-4) var(--s-3); }
.dlist__title { font-size: var(--fs-mock-title); font-weight: var(--fw-semibold); line-height: var(--lh-none); }
.dlist__accept { display: flex; align-items: center; gap: var(--s-2); color: var(--mock-muted); font-size: var(--fs-mock-sm); white-space: nowrap; }
.dlist__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex: none; margin: 0 var(--s-4) var(--s-3); }
.dlist__tabs { display: flex; gap: var(--s-1); padding: var(--s-1); background: var(--mock-bg-deep); border-radius: var(--r-2); font-size: var(--fs-mock-sm); }
.dlist__tab { padding: var(--s-1) var(--s-2); border-radius: var(--r-1); color: var(--mock-muted); white-space: nowrap; }
.dlist__tab--on { background: var(--mock-row-active); color: var(--mock-text); }
.dlist__filter { display: inline-flex; align-items: center; gap: var(--s-1); height: var(--mock-chip-h); padding-inline: var(--s-2); border: var(--line) solid var(--mock-chip-border); border-radius: var(--r-1); color: var(--mock-muted); font-size: var(--fs-mock-sm); white-space: nowrap; }
.dlist__cols { display: none; }
.dlist__rows { min-height: 0; }
.dlist__row {
  display: grid; grid-template-columns: var(--mock-avatar) minmax(0, 1fr) auto; column-gap: var(--s-3); row-gap: var(--s-1); align-items: center;
  padding: var(--s-3) var(--s-4); border-top: var(--line) solid var(--mock-line);
}
.dlist__row .avatar { grid-row: 1 / 4; }
.dlist__row--on { background: var(--mock-row-active); }
.dlist__row--on .avatar__glyph { box-shadow: 0 0 0 var(--mock-toggle-pad) var(--mock-row-active); }
.dlist__who { grid-column: 2; display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.dlist__name { font-weight: var(--fw-semibold); }
.dlist__src { color: var(--mock-muted); font-size: var(--fs-mock-sm); }
.dlist__row--on .dlist__src { color: var(--mock-link); }
.dlist__time { grid-column: 3; grid-row: 1; align-self: start; color: var(--mock-muted); font-size: var(--fs-mock-sm); }
.dlist__text { grid-column: 2 / -1; color: var(--mock-muted); }
.dlist__status { display: none; }
.dlist__assign { position: relative; grid-column: 2 / -1; justify-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); min-width: 0; }
.dlist__assign .pop { position: relative; top: auto; right: auto; margin: 0; align-self: flex-start; }
/* на ширине окна строка — одна линия таблицы: клиент, последнее сообщение, статус, ответственный, время; список «Ответственный» раскрыт поверх строк ниже */
@media (min-width: 721px) {
  .dlist--wide .dlist__cols, .dlist--wide .dlist__row { grid-template-columns: var(--mock-avatar) minmax(0, 1.1fr) minmax(0, 2fr) var(--list-status-w) var(--list-assign-w) var(--list-time-w); }
  .dlist--wide .dlist__cols {
    display: grid; column-gap: var(--s-3); padding: var(--s-2) var(--s-4);
    color: var(--mock-muted); font-size: var(--fs-mock-sm); border-top: var(--line) solid var(--mock-line);
  }
  .dlist--wide .dlist__cols > :first-child { grid-column: 1 / 3; }
  .dlist--wide .dlist__cols > :last-child { justify-self: end; }
  .dlist--wide .dlist__row > * { grid-row: 1; }
  .dlist--wide .dlist__row .avatar { grid-column: 1; }
  .dlist--wide .dlist__who { grid-column: 2; }
  .dlist--wide .dlist__text { grid-column: 3; }
  .dlist--wide .dlist__status { display: inline-flex; grid-column: 4; justify-self: start; }
  .dlist--wide .dlist__assign { grid-column: 5; }
  .dlist--wide .dlist__time { grid-column: 6; align-self: center; justify-self: end; }
  .dlist--wide .dlist__assign .pop { position: absolute; top: calc(100% + var(--s-1)); left: 0; z-index: var(--z-window); }
}
.dlist__status--closed { color: var(--mock-muted); }
/* ноутбук: колонка статуса уходит, имя и последнее сообщение не режутся до двух букв */
@media (min-width: 721px) and (max-width: 1279px) {
  .dlist--wide .dlist__cols, .dlist--wide .dlist__row { grid-template-columns: var(--mock-avatar) minmax(0, 1fr) minmax(0, 1.3fr) var(--list-assign-w) var(--list-time-w); }
  .dlist--wide .dlist__cols > :nth-child(3), .dlist--wide .dlist__status { display: none; }
  .dlist--wide .dlist__assign { grid-column: 4; }
  .dlist--wide .dlist__time { grid-column: 5; }
}
/* телефон: строка — карточка списка, как в приложении; фильтр по ответственному не помещается рядом с табами */
@media (max-width: 720px) {
  .dlist__filter { display: none; }
  .dlist__row .avatar { align-self: start; }
}
#panel-2 .chat__body { justify-content: flex-end; } /* реплик больше, чем помещается: переписка прокручена к последней, как в кабинете, пустого верха нет */

/* шаг 2: уведомление в Telegram поверх окна */
.notice {
  position: absolute; right: var(--s-5); bottom: var(--s-5); z-index: var(--z-window);
  display: grid; grid-template-columns: var(--mock-avatar) minmax(0, 1fr); column-gap: var(--s-3); row-gap: var(--s-1);
  width: calc(var(--mock-list) - var(--s-6)); padding: var(--s-3) var(--s-4);
  background: var(--mock-raised); color: var(--mock-text); border-radius: var(--r-3);
  box-shadow: var(--shadow-window); font-size: var(--fs-mock); line-height: var(--lh-tight);
}
.notice__icon { grid-row: 1 / 3; display: grid; place-items: center; width: var(--mock-avatar); height: var(--mock-avatar); border-radius: var(--r-pill); background: var(--mock-brand); color: var(--cta-text); }
.notice__head { display: flex; justify-content: space-between; gap: var(--s-2); }
.notice__head span { color: var(--mock-muted); font-size: var(--fs-mock-sm); }

/* шаг 3: новый сценарий и помощник «Что автоматизируем?» */
.edtop { display: flex; align-items: center; gap: var(--s-3); flex: none; height: var(--mock-topbar); padding-inline: var(--s-4); border-bottom: var(--line) solid var(--mock-line); }
.edtop strong { flex: 1; min-width: 0; font-size: var(--fs-mock-md); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mbtn--on { background: var(--mock-brand); border-color: var(--mock-brand); color: var(--cta-text); }
.ed { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) var(--helper-w); }
/* черновик помощника: запуск → «Выбор услуги» → «Когда удобно», шаги со связями, как блоки редактора */
.ed__canvas {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-5);
  align-content: center; align-items: start; padding: var(--s-5);
  background-color: var(--mock-bg-deep);
  background-image: radial-gradient(var(--mock-dot) var(--line), transparent var(--line)); background-size: var(--dot-step) var(--dot-step);
}
.startnode { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; padding: var(--s-3); background: var(--mock-bg); border: var(--line) solid var(--mock-chip-border); border-radius: var(--r-2); }
.startnode__trigger { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); background: var(--mock-bg-deep); border-radius: var(--r-1); }
.startnode__add { color: var(--mock-muted); font-size: var(--fs-mock-sm); text-align: center; }
.startnode__next { align-self: flex-end; display: flex; align-items: center; gap: var(--s-1); color: var(--mock-muted); font-size: var(--fs-mock-sm); }
.fblk {
  position: relative; grid-column: 2; display: flex; flex-direction: column; gap: var(--s-2); min-width: 0;
  padding-bottom: var(--s-3); background: var(--mock-bg); border-radius: var(--r-2); overflow: visible;
  font-size: var(--fs-mock-sm); box-shadow: inset 0 0 0 var(--line) var(--mock-chip-border);
}
.fblk--first { grid-row: 1; }
.fblk--next { grid-row: 2; }
.fblk__head {
  display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3);
  background: var(--mock-brand); color: var(--cta-text); border-radius: var(--r-2) var(--r-2) 0 0; font-weight: var(--fw-semibold);
}
.fblk__q, .fblk__btn, .fblk__field { margin-inline: var(--s-3); }
.fblk__q { color: var(--mock-text); }
.fblk__btn { padding: var(--s-1) var(--s-2); text-align: center; background: var(--mock-link); color: var(--cta-text); border-radius: var(--r-1); font-weight: var(--fw-medium); }
.fblk__field { align-self: flex-start; padding: var(--s-1) var(--s-2); color: var(--mock-link); border: var(--line) solid var(--mock-link); border-radius: var(--r-1); }
/* связи: от запуска вправо в «Выбор услуги», от него вниз в «Когда удобно» */
.fblk--first::before, .fblk--next::before { content: ""; position: absolute; background: var(--mock-muted); }
.fblk--first::before { right: 100%; top: var(--s-6); width: var(--s-5); height: var(--line); }
.fblk--next::before { bottom: 100%; left: 50%; width: var(--line); height: var(--s-5); }
.ex--on { border-color: var(--mock-brand); box-shadow: inset 0 0 0 var(--line) var(--mock-brand); }
.helper { display: flex; flex-direction: column; gap: var(--s-2); min-height: 0; overflow: hidden; padding: var(--s-4); border-left: var(--line) solid var(--mock-line); }
.helper__head { display: flex; align-items: center; gap: var(--s-2); color: var(--mock-muted); }
.helper__title { margin-block: var(--s-2) var(--s-1); font-size: var(--fs-mock-title); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.ex { display: flex; align-items: center; gap: var(--s-2); min-height: var(--mock-control-h); padding: var(--s-2) var(--s-3); border: var(--line) solid var(--mock-chip-border); border-radius: var(--r-2); }
.ex .icon { color: var(--mock-muted); }
.helper__input { display: flex; align-items: center; gap: var(--s-2); margin-top: auto; padding: var(--s-3); background: var(--mock-bg-deep); border-radius: var(--r-2); color: var(--mock-muted); }
.helper__input span, .helper__input > [data-ctl] { flex: 1; min-width: 0; }

/* шаг 4: список рассылок со статусами */
.bl { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; padding: var(--s-5); }
.bl__top { display: flex; align-items: center; gap: var(--s-3); }
.bl__top .bc__title { flex: 1; }
.bl__top .select { width: calc(var(--popover-w) - var(--s-7)); }
.bl__table { display: flex; flex-direction: column; }
.bl__row {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--s-3); align-items: center; padding: var(--s-4); border-top: var(--line) solid var(--mock-line);
}
.bl__row--head { padding-block: var(--s-3); border-top: 0; border-radius: var(--r-2); background: var(--mock-fill); color: var(--mock-muted); }
.bl__name { font-weight: var(--fw-medium); }
.bl__ch { display: flex; gap: var(--s-2); color: var(--mock-muted); }
.status { justify-self: start; display: inline-flex; align-items: center; gap: var(--s-1); padding: var(--s-1) var(--s-2); border-radius: var(--r-1); background: var(--mock-fill); font-size: var(--fs-mock-sm); }
.status::before { content: ""; width: var(--s-1); height: var(--s-1); border-radius: var(--r-pill); background: currentColor; }
.status--plan { color: var(--mock-link); }
.status--sent { color: var(--success); }
.status--draft { color: var(--mock-muted); }
.bl__foot { display: flex; align-items: center; gap: var(--s-3); margin-top: auto; color: var(--mock-muted); }
.bl__foot .select { color: var(--mock-text); }
.bl__foot > :last-child { margin-left: auto; }
.bl { height: 100%; }

/* ---------- collect: список диалогов в приложении операторов, восемь каналов с глифами ---------- */
.split--collect { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.collect__shot { display: grid; place-items: center; padding-block: var(--s-5); }
.collect__shot::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--hero-dots); background-size: var(--dot-step) var(--dot-step);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, var(--mask-ink) 35%, transparent 80%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, var(--mask-ink) 35%, transparent 80%);
}
.phone {
  position: relative; z-index: var(--z-window);
  width: var(--phone-w); padding: var(--s-2);
  background: var(--phone-bg); border: var(--line) solid var(--phone-border);
  border-radius: calc(var(--r-4) + var(--s-2)); box-shadow: var(--shadow-phone);
}
.phone img { display: block; width: 100%; height: auto; aspect-ratio: var(--phone-ratio); object-fit: cover; object-position: top; border-radius: var(--r-4); }
.chans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-4); margin-top: var(--s-5); }
.chan {
  display: flex; align-items: center; gap: var(--s-3); min-height: calc(var(--s-6) + var(--s-1));
  border-radius: var(--r-2); color: var(--text-1); font-size: var(--fs-body); font-weight: var(--fw-medium);
  transition: color var(--dur-1) var(--ease);
}
a.chan:active { color: var(--link); }
/* знаки каналов в фирменном цвете: белый глиф на плашке цвета площадки, у Авито — четыре цветных круга на нейтральной */
.chans .plate { background: var(--brand); color: var(--cta-text); box-shadow: none; }
.chans .plate .icon { width: var(--icon-sm); height: var(--icon-sm); }
:is(.chans, .mm__chans) [data-ch="tg"] { --brand: var(--brand-tg); }
:is(.chans, .mm__chans) [data-ch="vk"] { --brand: var(--brand-vk); }
:is(.chans, .mm__chans) [data-ch="max"] { --brand: var(--brand-max); }
:is(.chans, .mm__chans) [data-ch="ok"] { --brand: var(--brand-ok); }
:is(.chans, .mm__chans) [data-ch="webchat"] { --brand: var(--brand-webchat); }
:is(.chans, .mm__chans) [data-ch="ig"] { --brand: var(--brand-ig); }
:is(.chans, .mm__chans) [data-ch="jivo"] { --brand: var(--brand-jivo); }
:is(.chans, .mm__chans) [data-ch="avito"] {
  --brand: var(--surface-2); box-shadow: inset 0 0 0 var(--line) var(--border);
  --av-1: var(--brand-avito-1); --av-2: var(--brand-avito-2); --av-3: var(--brand-avito-3); --av-4: var(--brand-avito-4);
}
/* круги знака Авито берут цвет из переменных плашки; вне collect переменных нет — круги цвета текста */
#g-avito circle:nth-child(1) { fill: var(--av-1, currentColor); }
#g-avito circle:nth-child(2) { fill: var(--av-2, currentColor); }
#g-avito circle:nth-child(3) { fill: var(--av-3, currentColor); }
#g-avito circle:nth-child(4) { fill: var(--av-4, currentColor); }
.chans__note { margin-top: var(--s-3); color: var(--text-3); font-size: var(--fs-small); max-width: var(--measure); text-wrap: pretty; }
@media (hover: hover) and (pointer: fine) {
  a.chan:hover { color: var(--link); }
  a.chan:hover .plate { background: var(--brand); color: var(--cta-text); }
  a.chan:hover .plate[data-ch="avito"] { background: var(--secondary-hover); }
}

/* ---------- ai: редактор агента с тест-чатом справа ---------- */
/* заголовок и абзац начинаются на одной линии; секцию отличает свет за окном, а не плашка над заголовком */
.ai__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-6); align-items: start; }
.ai__head .sec__text { margin-top: 0; }
.ai__shot { margin-top: var(--s-6); }
/* свет за окном агента: тот же синий, что от окна в hero, слабее */
#ai::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 35% 0 0 0;
  background: radial-gradient(ellipse 48% 55% at 72% 62%, var(--glow-ai), transparent 72%);
}
.app--agent {
  grid-template-columns: calc(var(--mock-list) - var(--s-8)) minmax(0, 1fr) calc(var(--mock-chat) + var(--s-6));
  height: calc(var(--s-9) * 6);
}
.agent { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; min-height: 0; overflow: hidden; padding: var(--s-5); background: var(--mock-bg-deep); }
.agent__title { display: flex; align-items: center; gap: var(--s-3); min-height: var(--mock-topbar); }
.agent__title strong { flex: 1; min-width: 0; font-size: var(--fs-mock-title); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcard { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4) var(--s-5); background: var(--mock-bg); border-radius: var(--r-3); }
.mcard__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.mcard__row .select { flex: 0 1 calc(var(--mock-list) - var(--s-8)); }
.mcard__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.mcard__title { font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.kb__row { display: flex; align-items: center; gap: var(--s-3); padding-top: var(--s-3); border-top: var(--line) solid var(--mock-line); }
.kb__icon { display: grid; place-items: center; flex: none; width: var(--mock-control-h-sm); height: var(--mock-control-h-sm); border-radius: var(--r-2); background: var(--mock-fill); color: var(--mock-muted); }
.kb__name { flex: 1; min-width: 0; }
.kb__ok { color: var(--success); }
.fn__row { display: flex; align-items: center; gap: var(--s-3); padding-top: var(--s-3); border-top: var(--line) solid var(--mock-line); }
.fn__row .toggle { margin-left: auto; }
.tchat { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-left: var(--line) solid var(--mock-line); }
.tchat__head { display: flex; align-items: center; gap: var(--s-3); flex: none; height: calc(var(--mock-topbar) + var(--s-4)); padding-inline: var(--s-4); border-bottom: var(--line) solid var(--mock-line); }
.tchat__bot { display: grid; place-items: center; flex: none; width: var(--mock-avatar); height: var(--mock-avatar); border-radius: var(--r-pill); background: var(--mock-brand); color: var(--cta-text); }
.tchat__who { flex: 1; min-width: 0; }
.tchat__name { display: block; font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tchat__mode { display: block; margin-top: var(--s-1); color: var(--success); font-size: var(--fs-mock-sm); }
.tchat__input { display: flex; gap: var(--s-2); flex: none; padding: 0 var(--s-4); }
.tchat__field { flex: 1; min-width: 0; height: var(--s-7); padding: var(--s-3) var(--s-4); background: var(--mock-bg-deep); border-radius: var(--r-2); color: var(--mock-muted); }
.tchat__send { display: grid; place-items: center; flex: none; width: var(--s-7); height: var(--s-7); border-radius: var(--r-2); background: var(--mock-bg-deep); color: var(--mock-muted); }
.tchat__note { display: flex; align-items: center; justify-content: center; gap: var(--s-2); flex: none; padding: var(--s-3) var(--s-4); color: var(--mock-muted); font-size: var(--fs-mock-sm); }

/* ---------- builder: окно редактора сценария с панелью шаблонов и живым редактором ---------- */
/* окно слева на 2/3, текст справа — зеркально return: три шага схемы читаются только в широком холсте */
.builder { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s-6); align-items: center; }
.builder__shot { grid-column: 1; grid-row: 1; }
.builder__text { grid-column: 2; grid-row: 1; min-width: 0; }
.app--editor {
  grid-template-columns: minmax(0, 1fr);
  border: var(--line) solid var(--border-strong);
}
.app--editor > .edtop { grid-column: 1 / -1; }
.edtop__back { transform: scaleX(-1); color: var(--mock-muted); }
.edtop__icon { color: var(--mock-muted); }
.edtop .mbtn--on { font-weight: var(--fw-medium); }
/* шаблоны строкой чипов над холстом: холст получает всю ширину окна; не влезший чип гаснет к кромке, а не режется посреди слова */
.tpl {
  display: flex; align-items: center; gap: var(--s-2); min-width: 0; overflow: hidden; padding: var(--s-2) var(--s-3); border-bottom: var(--line) solid var(--mock-line);
  -webkit-mask-image: linear-gradient(to right, var(--mask-ink) calc(100% - var(--s-8)), transparent);
  mask-image: linear-gradient(to right, var(--mask-ink) calc(100% - var(--s-8)), transparent);
}
.tpl__title { flex: none; padding: 0 var(--s-1) 0 0; color: var(--mock-muted); font-size: var(--fs-mock-sm); font-weight: var(--fw-semibold); }
.tpl__row { display: flex; align-items: center; gap: var(--s-2); flex: none; padding: var(--s-1) var(--s-3) var(--s-1) var(--s-1); border: var(--line) solid var(--mock-chip-border); border-radius: var(--r-pill); white-space: nowrap; }
.tpl__row--active { background: var(--mock-row-active); border-color: var(--mock-row-active); }
.gl { display: grid; place-items: center; width: var(--mock-avatar-sm); height: var(--mock-avatar-sm); border-radius: var(--r-pill); background: var(--mock-brand); color: var(--cta-text); }
/* высота кадра идёт от ширины: под полосой блоков нет пустого поля ни на одной ширине */
.canvas { position: relative; min-width: 0; aspect-ratio: var(--canvas-ratio); overflow: hidden; background: var(--mock-bg-deep); }
.canvas__still {
  position: absolute; left: 0; top: 0; width: calc(100% * var(--still-zoom)); max-width: none; height: auto;
  transform: translate(calc(-100% * var(--still-x)), calc(-100% * var(--still-y)));
}
/* живой редактор не перехватывает колесо, тач и Tab, пока посетитель сам не нажмёт «Подвигать схему» */
.canvas__live {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--mock-bg-deep);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
}
.canvas__live.is-live { opacity: 1; visibility: visible; transition: opacity var(--dur-2) var(--ease), visibility 0s; }
.canvas__live.is-grabbed { pointer-events: auto; }
.canvas__grab { position: absolute; right: var(--s-3); bottom: var(--s-3); z-index: var(--z-window); }
.app--flow { grid-template-columns: minmax(0, 1fr); }
/* дорожка ленты схемы есть только на телефоне; на остальных ширинах обёртка не даёт бокса и кадр стоит как раньше */
.canvas__track { display: contents; }
.canvas__hint { display: none; }
.app--bare { grid-template-columns: minmax(0, 1fr); }

/* ---------- return: форма рассылки ---------- */
.bc { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; padding: var(--s-5); }
.bc__title { font-size: var(--fs-mock-title); font-weight: var(--fw-semibold); }
.bc__grid { display: grid; grid-template-columns: calc(var(--mock-avatar) * 3) minmax(0, 1fr); gap: var(--s-3) var(--s-4); align-items: center; }
.bc__label { color: var(--mock-muted); }
.bc__label--top { align-self: start; padding-top: var(--s-3); }
.bc__btn { display: block; margin-top: var(--s-3); padding: var(--s-2); border-radius: var(--r-2); background: var(--mock-brand); color: var(--cta-text); text-align: center; font-weight: var(--fw-medium); }
.bc__foot { display: flex; justify-content: flex-end; gap: var(--s-3); padding-top: var(--s-4); border-top: var(--line) solid var(--mock-line); }

/* ---------- integrations: экран «Интеграции» кабинета, справа группы сервисов, связи от групп экрана к подписям ---------- */
.integ__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-6); align-items: start; }
.integ__head .sec__text { margin-top: 0; }
/* ссылка на внутреннюю страницу: синий текст, тихое подчёркивание, при наведении оно цвета ссылки; высота тач-цели 48 */
.xlink {
  display: inline-flex; align-items: center; min-height: var(--control-h);
  color: var(--link); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 0.2em;
  border-radius: var(--r-1); transition: text-decoration-color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
/* текстовые ссылки: наведение красит подчёркивание в цвет ссылки, нажатие приглушает текст */
.xlink:active, .niche__name a:active, .fact__label a:active, .faq__answer a:active, .foot__list a:active { opacity: var(--opacity-press); }
@media (hover: hover) and (pointer: fine) { .xlink:hover { text-decoration-color: var(--link); } }
.integ__more { display: flex; flex-wrap: wrap; column-gap: var(--s-5); margin-top: var(--s-2); }
/* название ниши — ссылка на страницу аудитории; поле вокруг даёт тач-цель, не меняя строку */
.niche__name a { display: inline-block; padding-block: var(--s-3); margin-block: calc(-1 * var(--s-3)); color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 0.2em; border-radius: var(--r-1); transition: color var(--dur-1) var(--ease), text-decoration-color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease); }
@media (hover: hover) and (pointer: fine) { .niche__name a:hover { color: var(--link); text-decoration-color: var(--link); } }
.integ { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--integ-side); column-gap: var(--integ-gap); margin-top: var(--s-6); }
.app--integ { grid-template-columns: var(--mock-rail) minmax(0, 1fr); }
.app--integ .app__main { background: var(--mock-bg-deep); }
.ig { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; padding: var(--s-5) var(--s-4); }
.ig__title { font-size: var(--fs-mock-title); font-weight: var(--fw-semibold); }
.ig__tabs { display: flex; align-self: flex-start; max-width: 100%; overflow: hidden; border: var(--line) solid var(--mock-chip-border); border-radius: var(--r-2); }
.ig__tab { flex: none; padding: var(--s-2) var(--s-4); white-space: nowrap; color: var(--mock-muted); border-right: var(--line) solid var(--mock-chip-border); }
.ig__tab:last-child { border-right: 0; }
.ig__tab--on { background: var(--mock-row-active); color: var(--mock-text); font-weight: var(--fw-semibold); }
.ig__group { display: flex; flex-direction: column; gap: var(--s-2); }
/* подписи групп внутри экрана нужны, только когда колонки групп справа нет */
.ig__h { display: none; color: var(--mock-muted); font-size: var(--fs-mock-sm); font-weight: var(--fw-semibold); }
.ig__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.icard {
  display: flex; align-items: center; gap: var(--s-2); min-width: 0;
  padding: var(--s-1) var(--s-1) var(--s-1) var(--s-2); /* узкие поля: со значком название в три колонки на 1440 входит целиком */
  background: var(--mock-bg); border: var(--line) solid var(--mock-chip-border); border-radius: var(--r-2);
}
/* значок сервиса: квадрат на поверхности 2 с рамкой, как в кабинете; при наведении на карточку — цвета кнопки */
.icard__logo { border-radius: var(--r-1); background: var(--surface-2); box-shadow: inset 0 0 0 var(--line) var(--border-strong); color: var(--text-2); transition: color var(--dur-1) var(--ease); }
.icard__name { flex: 1; min-width: 0; font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* «Подключить» контурная, как вторичная кнопка кабинета; синяя одна — у amoCRM, как кнопка под курсором */
.icard__btn {
  display: inline-flex; align-items: center; flex: none; height: var(--mock-control-h-sm); padding-inline: var(--s-2);
  border-radius: var(--r-2); border: var(--line) solid var(--mock-chip-border); background: transparent; color: var(--mock-text);
  font-size: var(--fs-mock-sm); font-weight: var(--fw-medium);
}
.icard__btn--on { background: var(--mock-brand); border-color: var(--mock-brand); color: var(--cta-text); }
/* демонстрация на копии экрана: строка подсвечивается под курсором, «Подключить» при нажатии темнеет и на 1,2 с показывает «Подключено» */
.icard__btn { gap: var(--s-1); font-family: inherit; line-height: var(--lh-none); cursor: pointer; transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.icard__btn:active, .icard__btn.is-pressed { background-color: var(--mock-hover); }
.icard__btn--on:active { background-color: var(--mock-brand-press); border-color: var(--mock-brand-press); }
.icard__btn.is-done, .icard__btn.is-done:is(:hover, :active) { background: var(--success-bg); border-color: var(--success); color: var(--success); }
@media (hover: hover) and (pointer: fine) {
  .icard:hover { background: var(--mock-row-active); }
  .icard:hover .icard__logo { color: var(--cta); }
  .icard__btn:hover { border-color: var(--mock-link); background-color: var(--mock-hover); }
  .icard__btn--on:hover { background-color: var(--mock-brand-hover); border-color: var(--mock-brand-hover); }
  .icard__btn:active { background-color: var(--mock-hover); }
  .icard__btn--on:active { background-color: var(--mock-brand-press); border-color: var(--mock-brand-press); }
  .igroup:hover { background-image: linear-gradient(var(--hover-wash), var(--hover-wash)); }
}
/* карточка запроса в конце сетки: другого характера — пунктирная рамка на поверхности 2, без тени */
.integ__shot { grid-column: 1; grid-row: 1; }
.integ__side { grid-column: 2; grid-row: 1; }
.integ__ask {
  grid-column: 1; grid-row: 2; display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-4);
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
  background: var(--surface-2); border: var(--line) dashed var(--border-strong); border-radius: var(--r-3);
}
.integ__ask-icon { flex: none; color: var(--text-2); }
.integ__ask-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-3); row-gap: var(--s-1); }
.integ__ask-title { font-size: var(--fs-h3); line-height: var(--lh-tight); font-weight: var(--fw-semibold); }
.integ__ask-note { color: var(--text-2); }
.integ__ask-btn { flex: none; }
.ig__note { display: flex; align-items: center; gap: var(--s-2); color: var(--mock-muted); font-size: var(--fs-mock-sm); }
/* группы справа: без скрипта стоят списком; скрипт ставит каждую напротив её группы на экране и рисует связь */
.integ__side { position: relative; min-width: 0; }
.igroups { display: flex; flex-direction: column; gap: var(--s-3); }
.integ.is-aligned .igroups { position: absolute; inset: 0; display: block; }
.integ.is-aligned .igroup { position: absolute; left: 0; right: 0; top: var(--y, 0); transform: translateY(-50%); }
.igroup {
  display: flex; align-items: center; gap: var(--s-3); min-height: var(--control-h); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  background-color: var(--surface-2); border: var(--line) solid var(--border); border-radius: var(--r-2);
  color: var(--text-1); font-weight: var(--fw-medium); line-height: var(--lh-tight); text-wrap: balance; text-decoration: none;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.igroup__icon { width: var(--icon); height: var(--icon); flex: none; color: var(--text-2); transition: color var(--dur-1) var(--ease); }
.igroup__name { flex: 1; min-width: 0; }
.igroup__arrow { flex: none; color: var(--link); opacity: 0; transition: opacity var(--dur-1) var(--ease); }
/* группа под курсором: подложка и рамка ярче, без сдвига; связь к её строкам на экране цвета кнопки, строки группы в окне подсвечены */
.igroup.is-hot { background-image: linear-gradient(var(--hover-wash), var(--hover-wash)); border-color: var(--border-strong); }
.igroup.is-hot .igroup__icon { color: var(--link); }
.igroup.is-hot .igroup__arrow { opacity: 1; }
.igroup:active { background-image: linear-gradient(var(--press-wash), var(--press-wash)); border-color: var(--border-strong); }
.integ__links { position: absolute; inset: 0; z-index: var(--z-links); width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ilink { fill: none; stroke: var(--border-strong); stroke-width: var(--link-w); }
.iport { fill: var(--mock-bg-deep); stroke: var(--cta); stroke-width: var(--link-w); }
.ilink { transition: stroke var(--dur-1) var(--ease), stroke-width var(--dur-1) var(--ease); }
.ilink.is-hot { stroke: var(--cta); stroke-width: var(--trace-w); }
.iport.is-hot { fill: var(--cta); }
.is-play .ipulse { stroke-dashoffset: -1; }
.is-play .ipulse.is-hot { animation: ipulse-run var(--dur-motif) var(--ease) both; }
@keyframes ipulse-run { from { stroke-dashoffset: -1; opacity: 1; } 85% { opacity: 1; } to { stroke-dashoffset: 0; opacity: 0; } }
.icard { transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.ig__group.is-hot .icard { border-color: var(--mock-link); }
/* связи прорисовываются один раз, когда секция впервые попала на экран; без .is-play видны сразу */
.is-play .integ .ilink { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--dur-motif) var(--ease); }
.is-play .integ .iport { opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.is-play .integ.is-drawn .ilink { stroke-dashoffset: 0; }
.is-play .integ.is-drawn .iport { opacity: 1; }
.is-play .integ .ilink:nth-of-type(2), .is-play .integ .iport:nth-of-type(2) { transition-delay: var(--dur-1); }
.is-play .integ .ilink:nth-of-type(3), .is-play .integ .iport:nth-of-type(3) { transition-delay: calc(var(--dur-1) * 2); }
.is-play .integ .ilink:nth-of-type(4), .is-play .integ .iport:nth-of-type(4) { transition-delay: calc(var(--dur-1) * 3); }
.is-play .integ .ilink:nth-of-type(5), .is-play .integ .iport:nth-of-type(5) { transition-delay: calc(var(--dur-1) * 4); }

/* ---------- fit: восемь ниш в сетке переменной ширины. Две широкие (подписка, магазин) — плашкой на поверхности, иконка слева;
   узкие — контуром, иконка над названием. Ряды: заголовок + широкая, две короткие узкие + широкая, четыре узкие (самые длинные тексты) ---------- */
.fit { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s-4); align-items: stretch; }
.niches { display: contents; }
.fit__head { grid-column: span 4; align-self: center; padding-right: var(--s-4); }
.fit__no { margin-top: var(--s-3); color: var(--text-2); }
.niche {
  grid-column: span 3; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); min-width: 0;
  padding: var(--s-5); border: var(--line) solid var(--border-strong); border-radius: var(--r-3);
}
.niche__icon { width: var(--icon); height: var(--icon); flex: none; margin-bottom: var(--s-2); color: var(--text-2); }
.niche__name { font-size: var(--fs-h3); line-height: var(--lh-tight); font-weight: var(--fw-semibold); }
.niche__text { color: var(--text-2); }
.niche__link { margin-top: auto; }
.niche--wide {
  grid-column: span 6; display: grid; grid-template-columns: var(--icon) minmax(0, 1fr); align-content: center; column-gap: var(--s-4); row-gap: var(--s-2);
  background: var(--surface-1); border-color: var(--border);
}
.niche--a { grid-column: span 8; }
.niche--wide .niche__name { font-size: var(--fs-niche-wide); }
.niche--wide .niche__icon { grid-row: 1 / 3; margin: 0; color: var(--text-1); }
.niche--wide .niche__name, .niche--wide .niche__text { grid-column: 2; }
@media (max-width: 1279px) {
  .fit { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .fit__head, .niche--wide, .niche--a { grid-column: 1 / -1; }
  .fit__head { padding-right: 0; }
}
.facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); align-items: start;
  margin-top: var(--s-7); padding-top: var(--s-6); border-top: var(--line) solid var(--border-strong);
}
.facts > li { min-width: 0; }
.fact__num { display: block; font-size: var(--fs-stat); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--fw-display); font-variant-numeric: tabular-nums; }
.fact__label { display: block; margin-top: var(--s-2); color: var(--text-2); }
.fact__label a { display: inline-block; padding-block: var(--s-3); margin-block: calc(-1 * var(--s-3)); white-space: nowrap; color: var(--text-1); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease); }
@media (hover: hover) and (pointer: fine) { .fact__label a:hover { text-decoration-color: var(--text-1); } }

/* ---------- rates: четыре тарифа; выделенный — рамкой и мягким светом за ним, единственным в секции ---------- */
#rates { overflow-x: clip; }
.rates__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-5); }
.rates__note { margin-top: var(--s-3); color: var(--text-2); }
.period { display: inline-flex; gap: var(--s-1); padding: var(--s-1); background: var(--bg); border: var(--line) solid var(--border); border-radius: var(--r-3); }
.period__opt {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: calc(var(--s-6) + var(--s-1)); padding-inline: var(--s-4);
  font: inherit; font-weight: var(--fw-medium); color: var(--text-2); background: transparent;
  border: var(--line) solid transparent; border-radius: var(--r-2); cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
/* экономия видна сразу, ещё до выбора срока */
.period__off { padding-inline: var(--s-1); border-radius: var(--r-1); background: var(--success-bg); color: var(--success); font-size: var(--fs-body); font-weight: var(--fw-semibold); }
.period__opt[aria-checked="true"] { background: var(--surface-2); border-color: var(--border-strong); color: var(--text-1); box-shadow: var(--shadow-card); }
.period__opt[aria-checked="false"]:active { background: var(--press-wash); color: var(--text-1); }
@media (hover: hover) and (pointer: fine) { .period__opt[aria-checked="false"]:hover { background: var(--hover-wash); color: var(--text-1); } .period__opt[aria-checked="false"]:active { background: var(--press-wash); } }
.plans { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-6); }
.plan {
  position: relative; display: flex; flex-direction: column; min-width: 0; padding: var(--s-5);
  background: var(--bg); border: var(--line) solid var(--border); border-radius: var(--r-3); box-shadow: var(--shadow-card);
}
.plan--pick { border-color: var(--cta); }
.plan__name { font-size: var(--fs-h3); line-height: var(--lh-tight); font-weight: var(--fw-semibold); }
.plan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); margin-top: var(--s-3); }
.plan__sum { font-size: var(--fs-stat); line-height: var(--lh-display); letter-spacing: var(--ls-display); font-weight: var(--fw-display); }
/* цифры равной ширины только на время переката: число не дёргается, а в покое «12 990» не читается как «1 2 990» */
/* перекат цены: старое число уходит вверх, новое въезжает снизу (при уменьшении — наоборот); только transform и opacity */
.plan__sum.is-rolling { position: relative; overflow: hidden; }
.plan__sum.is-down { --roll-dir: -1; }
.roll { display: inline-block; animation: roll-in var(--price-roll) var(--ease) both; }
.roll--out { position: absolute; left: 0; top: 0; animation-name: roll-out; }
@keyframes roll-in { from { opacity: 0; transform: translateY(calc(var(--roll-dir, 1) * 60%)); } }
@keyframes roll-out { to { opacity: 0; transform: translateY(calc(var(--roll-dir, 1) * -60%)); } }
.plan__row .nb { white-space: nowrap; }
.plan__unit { color: var(--text-2); }
.plan__rows { flex: 1; margin-top: var(--s-5); }
.plan__row { display: flex; align-items: flex-start; gap: var(--s-3); padding-block: var(--s-3); border-top: var(--line) solid var(--border); }
.plan__row .icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--text-3); stroke-width: var(--stroke-mock); }
.plan--pick .plan__row .icon { color: var(--link); }
.plan__row .icon--fill { stroke: none; }
.plan .btn { width: 100%; margin-top: var(--s-5); }
.plan__bill { display: block; flex-basis: 100%; color: var(--text-3); font-size: var(--fs-small); }
.sr-only { position: absolute; width: var(--line); height: var(--line); margin: calc(-1 * var(--line)); padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- faq: разметка текущей главной, оформление аккордеоном ---------- */
.section-faq .faq-container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s-6); align-items: start; }
.section-faq .section-header { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
.section-faq .section-header__title { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); font-weight: var(--fw-display); text-wrap: balance; }
.section-faq .logo { display: inline; padding: 0; border-radius: 0; }
.faq { border-top: var(--line) solid var(--border); }
.faq-list > .faq:last-of-type { border-bottom: var(--line) solid var(--border); }
.faq__title {
  position: relative; display: flex; align-items: center; min-height: calc(var(--s-7) + var(--s-2));
  padding: var(--s-4) calc(var(--icon) + var(--s-4)) var(--s-4) 0;
  font-size: var(--fs-lead); line-height: var(--lh-tight); font-weight: var(--fw-semibold); color: var(--text-1);
  border-radius: var(--r-1);
}
.faq-list.is-js .faq__title { cursor: pointer; transition: color var(--dur-1) var(--ease); }
.faq-list.is-js .faq__title::before, .faq-list.is-js .faq__title::after {
  content: ""; position: absolute; right: var(--s-1); top: 50%;
  width: var(--s-4); height: var(--trace-w); background: currentColor; border-radius: var(--r-1);
  transition: transform var(--dur-2) var(--ease);
}
.faq-list.is-js .faq__title::after { transform: rotate(90deg); }
.faq.is-open .faq__title::before { transform: rotate(45deg); }
.faq.is-open .faq__title::after { transform: rotate(135deg); }
.faq-list.is-js .faq__title:active { color: var(--link); }
@media (hover: hover) and (pointer: fine) { .faq-list.is-js .faq__title:hover { color: var(--link); } }
.faq__answer { padding-bottom: var(--s-5); color: var(--text-2); max-width: calc(var(--measure) * 1.5); }
.faq__answer a { color: var(--link); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 0.2em; border-radius: var(--r-1); transition: text-decoration-color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease); }
@media (hover: hover) and (pointer: fine) { .faq__answer a:hover { text-decoration-color: var(--link); } }
.faq-list.is-js .faq:not(.is-open) .faq__answer { display: none; }
.faq-list.is-js .faq.is-open .faq__answer { animation: fade-in var(--dur-2) var(--ease); }
.faq-list.is-js .faq.hidden { display: none; }
.faq__more {
  display: inline-flex; align-items: center; height: var(--control-h); margin-top: var(--s-5); padding-inline: var(--control-pad-x);
  font: inherit; font-weight: var(--fw-semibold); color: var(--secondary-text); background: var(--secondary);
  border: var(--line) solid var(--secondary-border); border-radius: var(--r-2); cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.faq__more:active { background: var(--secondary-active); border-color: var(--secondary-border-hover); }
@media (hover: hover) and (pointer: fine) { .faq__more:hover { background: var(--secondary-hover); border-color: var(--secondary-border-hover); } .faq__more:active { background: var(--secondary-active); } }

/* ---------- приложение операторов: два настоящих экрана со сдвигом, магазины вторичными кнопками ---------- */
.mob { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-6); align-items: center; }
.mob__phones { display: grid; grid-template-columns: repeat(2, minmax(0, var(--phone-w-sm))); column-gap: var(--s-5); justify-content: center; align-items: start; }
.mob__phones > :last-child { margin-top: var(--phone-pair-shift); }
.phone--sm { width: 100%; max-width: var(--phone-w-sm); }
/* второй телефон показывает только верх экрана настроек: корпус срезан снизу, кромка гаснет, а не обрывается */
.phone--top { padding-bottom: 0; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  -webkit-mask-image: linear-gradient(to bottom, var(--mask-ink) 94%, transparent); mask-image: linear-gradient(to bottom, var(--mask-ink) 94%, transparent); }
.pset { display: block; overflow: hidden; background: var(--phone-bg); }
.pset img { aspect-ratio: auto; height: auto; border-radius: 0; }
.pset--head { aspect-ratio: var(--pset-w) / var(--pset-head-h); border-radius: var(--r-4) var(--r-4) 0 0; }
.pset--body { aspect-ratio: var(--pset-w) / var(--pset-body-h); }
.pset--body img { margin-top: calc(var(--pset-cut-y) / var(--pset-w) * -100%); }
.mob__stores { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.mob__more { margin-top: var(--s-3); }

/* ---------- final ---------- */
/* финал: текст слева, пара кнопок справа по нижней линии — без пустой половины карточки */
.final__panel {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-6); align-items: end;
  padding: var(--s-8) var(--s-7);
  background: var(--surface-1); border: var(--line) solid var(--border); border-radius: var(--r-4); box-shadow: var(--shadow-card);
}

.final__panel > .sec__title, .final__panel > .sec__text, .final__trace { grid-column: 1; }
/* мотив замыкается: от текста к главной кнопке идёт та же связь, что от каналов к переписке в hero; без движения */
.final__trace { display: flex; align-items: center; gap: var(--s-4); min-height: var(--control-h); margin-top: var(--s-3); margin-right: calc(-1 * var(--s-6)); }
.final__trace .sec__text { margin-top: 0; flex: none; }
.final__link { flex: 1; min-width: var(--s-6); height: var(--s-4); overflow: visible; }
.final__link line { stroke: var(--link-line); stroke-width: var(--link-w); }
.final__port { r: var(--node); fill: var(--surface-1); stroke: var(--link-line); stroke-width: var(--link-w); }
.final__port--end { stroke: var(--cta); }
.final__panel > .sec__cta { grid-column: 2; grid-row: 1 / span 2; justify-self: end; flex-wrap: nowrap; }

/* ---------- футер ---------- */
.foot { padding-block: var(--s-8) var(--s-7); border-top: var(--line) solid var(--border); font-size: var(--fs-body); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
.foot__logo { display: inline-flex; align-items: center; min-height: var(--control-h); border-radius: var(--r-1); }
.foot__logo svg { width: var(--logo-w); height: var(--logo-h); transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.foot__legal { margin-top: var(--s-4); color: var(--text-3); }
.foot__social { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.foot__title { display: block; margin-bottom: var(--s-3); color: var(--text-1); font-weight: var(--fw-semibold); }
/* «Решения» и «Сравнения» сворачиваются только на телефоне; шире заголовок выглядит и ведёт себя как обычный */
.foot__fold > summary { list-style: none; cursor: default; }
.foot__fold > summary::-webkit-details-marker { display: none; }
.foot__chev { display: none; }
.foot__list { display: flex; flex-direction: column; gap: var(--s-1); }
.foot__list a, .foot__social a {
  display: inline-flex; align-items: center; gap: var(--s-2); padding-block: var(--s-1); min-width: calc(var(--s-6) + var(--s-1));
  color: var(--text-2); border-radius: var(--r-1);
  transition: color var(--dur-1) var(--ease), text-decoration-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.foot__social a { padding-inline: var(--s-3); min-height: var(--control-h-sm); background: var(--surface-1); box-shadow: inset 0 0 0 var(--line) var(--border); border-radius: var(--r-2); }
.foot__social .icon { width: var(--icon-xs); height: var(--icon-xs); }
.foot__list a { text-decoration: underline transparent; text-underline-offset: 0.2em; }
.foot__social a:active { color: var(--text-1); background-color: var(--surface-2); background-image: linear-gradient(var(--press-wash), var(--press-wash)); }
.foot__fold > summary:active { opacity: var(--opacity-press); }
@media (hover: hover) and (pointer: fine) {
  .foot__list a:hover { color: var(--text-1); text-decoration-color: var(--border-strong); }
  .foot__social a:hover { color: var(--text-1); background: var(--surface-2); }
}
@media (pointer: coarse) { .foot__list a, .foot__social a { min-height: calc(var(--s-6) + var(--s-1)); } }
/* телефон: ссылки футера блоками ≥ 44 px, в колонках по одиннадцать ссылок мимо не попасть */
@media (max-width: 767px) {
  .foot__list { gap: 0; }
  .foot__list a { display: flex; min-height: calc(var(--s-6) + var(--s-1)); padding-block: var(--s-2); }
}

/* ---------- нижняя панель с главной кнопкой: только телефон, когда кнопки hero, тарифов и финала не видны ---------- */
.mbar { display: none; }

/* ---------- модалка регистрации: место под эксперимент, выключена флагом ---------- */
.reg {
  width: calc(100% - var(--gutter) * 2); max-width: var(--hero-text-w); padding: 0;
  background: var(--surface-1); color: var(--text-1);
  border: var(--line) solid var(--border-strong); border-radius: var(--r-4); box-shadow: var(--shadow-window);
}
.reg::backdrop { background: var(--scrim); }
.reg__form { position: relative; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6) var(--s-5) var(--s-5); }
.reg__title { font-size: var(--fs-h3); line-height: var(--lh-tight); font-weight: var(--fw-semibold); }
.reg__label { color: var(--text-2); font-size: var(--fs-small); }
.reg__input {
  height: var(--control-h); padding-inline: var(--s-4); font: inherit; color: var(--text-1);
  background: var(--bg); border: var(--line) solid var(--border-strong); border-radius: var(--r-2);
}
.reg__close {
  position: absolute; top: var(--s-2); right: var(--s-2); display: grid; place-items: center;
  width: var(--control-h); height: var(--control-h); padding: 0; font: inherit; color: var(--text-2);
  background: transparent; border: 0; border-radius: var(--r-2); cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.reg__close:active { background: var(--press-wash); color: var(--text-1); }
@media (hover: hover) and (pointer: fine) { .reg__close:hover { background: var(--hover-wash); color: var(--text-1); } }

/* ---------- ноутбук ---------- */
@media (max-width: 1279px) {
  /* две колонки остаются до 960: чередование сеток держит ритм и на планшете */
  .split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split--rev, .split--collect { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .app--bc { grid-template-columns: minmax(0, 1fr); }
  .app--bc .side, .app--bc .app__top { display: none; }
  .app--agent { grid-template-columns: minmax(0, 1fr) calc(var(--mock-chat) + var(--s-6)); }
  .app--agent .side { display: none; }
  /* холст тура уже: черновик помощника — два шага столбцом, запуск за кадром */
  .ed__canvas { grid-template-columns: minmax(0, 1fr); padding: var(--s-4); }
  .startnode, .fblk--first::before { display: none; }
  .fblk { grid-column: 1; }
  /* текст над окном, окно во всю ширину: в половине контейнера три шага схемы стали бы мельче 6 px */
  .builder { grid-template-columns: minmax(0, 1fr); }
  .builder__shot, .builder__text { grid-column: 1; grid-row: auto; }
  .builder__text { max-width: var(--hero-copy-max); }
  .edtop__stop, .edtop__gear { display: none; }
  .foot__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .foot__brand { grid-column: 1 / -1; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ig__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .split, .split--rev, .split--collect { grid-template-columns: minmax(0, 1fr); }
  .split__text { order: -1; max-width: var(--hero-copy-max); }
  .ai__head { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .builder { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .builder__shot, .builder__text { grid-column: 1; grid-row: auto; }
  .builder__text { max-width: var(--hero-copy-max); }
  .mob { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .mob__text { order: -1; max-width: var(--hero-copy-max); }
  .integ__head { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .integ { grid-template-columns: minmax(0, 1fr); }
  .integ__side, .integ__links { display: none; }
  .ig__h { display: block; }
}

/* ---------- до 1023: шаги тура друг под другом, под каждым свой экран; роли табов снимает скрипт ---------- */
@media (max-width: 1023px) {
  .tour__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: var(--s-4); }
  .tour__tab, .tour__panel { grid-column: 1; }
  .tour__tabs > li:nth-child(1) > .tour__tab { grid-row: 1; }
  .tour__tabs > li:nth-child(2) > .tour__tab { grid-row: 3; }
  .tour__tabs > li:nth-child(3) > .tour__tab { grid-row: 5; }
  .tour__tabs > li:nth-child(4) > .tour__tab { grid-row: 7; }
  #panel-1 { grid-row: 2; }
  #panel-2 { grid-row: 4; }
  #panel-3 { grid-row: 6; }
  #panel-4 { grid-row: 8; }
  .tour__panel { opacity: 1; visibility: visible; transition: none; margin-bottom: var(--s-5); }
  .tour__panel .app__pane, .tour__panel.is-past .app__pane { transform: none; transition: none; }
  .tour__tab, .tour__tab[aria-selected="true"] { cursor: default; padding: 0; background: transparent; border-color: transparent; box-shadow: none; transform: none; pointer-events: none; }
  /* связь шагов: от плашки шага 1 до плашки шага 4; под экранами её закрывает окно, видна в зазорах между шагом и экраном */
  .tour__grid::before {
    content: ""; grid-column: 1; grid-row: 1 / 7; justify-self: start; pointer-events: none;
    width: var(--step-line);
    margin: var(--source) 0 calc(-1 * var(--s-4)) calc((var(--source) - var(--step-line)) / 2);
    background: var(--border-strong);
  }
  .tour__tab[aria-selected="true"] .plate { background: var(--surface-2); color: var(--text-2); }
}

/* ---------- телефон: своя раскладка экранов, шаги тура друг под другом ---------- */
@media (max-width: 720px) {
  .pad-open { padding-block: var(--section-normal); }
  .pad-normal { padding-block: var(--section-dense); }
  .pad-dense { padding-block: var(--s-6); }
  .sec__cta .btn { flex: 1 1 auto; }
  /* переход по якорю: заголовок секции не прячется под липкой шапкой */
  section[id] { scroll-margin-top: var(--s-6); }
  /* «ИИ-сотрудник», «чат-ботов» не рвутся по дефису в строке на 30–35 знаков (обёртку ставит typograf.cjs) */
  .nb { white-space: nowrap; }

  body { padding-bottom: calc(var(--mbar-h) + env(safe-area-inset-bottom)); }
  .mbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-mbar);
    display: flex; padding: var(--s-1) var(--gutter) calc(var(--s-1) + env(safe-area-inset-bottom));
    background: var(--scrim); box-shadow: inset 0 var(--line) 0 var(--border);
    transform: translateY(100%); visibility: hidden;
    transition: transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
  }
  .mbar.is-shown { transform: none; visibility: visible; transition: transform var(--dur-2) var(--ease), visibility 0s; }
  .mbar .btn { flex: 1; }

  .app, .app--rail, .app--flow, .app--agent { grid-template-columns: minmax(0, 1fr); height: auto; }
  .app .side, .app .rail, .app__top { display: none; }
  .agent__title .mbtn { display: none; }

  .app--tour { aspect-ratio: auto; }
  .tour__panel .chat__composer { display: none; }

  .notice { position: relative; right: auto; bottom: auto; width: auto; margin-top: var(--s-3); }
  .edtop .mbtn:not(.mbtn--on) { display: none; }
  .ed { grid-template-columns: minmax(0, 1fr); }
  .ed__canvas { display: none; }
  .helper { border-left: 0; }
  .bl { padding: var(--s-4); }
  .bl__top .select, .bl__row--head { display: none; }
  .bl__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s-1); padding-inline: 0; }
  .bl__row > :nth-child(3), .bl__row > :nth-child(4) { display: none; }
  .bl__row > :nth-child(5) { grid-column: 1 / -1; color: var(--mock-muted); font-size: var(--fs-mock-sm); }

  .collect__shot { place-items: center start; }
  /* каналы списком: плашка слева, название справа, без одинокой ячейки в последнем ряду */
  .chans { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .chan { min-height: var(--control-h); }

  .app--agent .mcard--setup, .app--agent .mcard--channels, .app--agent .mcard--fn { display: none; }
  .tchat { border-left: 0; border-top: var(--line) solid var(--mock-line); }
  .tchat .chat__body { justify-content: flex-start; }
  .tchat__note { text-align: center; }

  /* схема лентой: цепочка блоков в читаемом масштабе, листается пальцем; живой редактор на телефоне не грузится */
  .canvas { aspect-ratio: auto; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
  .canvas__track {
    display: block; position: relative; overflow: hidden; scroll-snap-align: start;
    width: calc(var(--strip-crop-w) * var(--strip-scale)); height: calc(var(--strip-crop-h) * var(--strip-scale));
  }
  .canvas__still {
    width: calc(var(--strip-src-w) * var(--strip-scale)); transform: none;
    left: calc(-1 * var(--strip-crop-x) * var(--strip-scale)); top: calc(-1 * var(--strip-crop-y) * var(--strip-scale));
  }
  .canvas__live, .canvas__grab { display: none; }
  .canvas__hint {
    display: flex; align-items: center; justify-content: center; gap: var(--s-2); padding: var(--s-2) var(--s-4);
    color: var(--mock-muted); font-size: var(--fs-mock-sm); border-top: var(--line) solid var(--mock-line);
  }
  .canvas__hint .icon { transform: scaleX(-1); }
  .app--editor > .canvas__hint { grid-column: 1 / -1; }
  .bc__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); }
  .bc__label--top { padding-top: 0; }

  .fit { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .fit > *, .niches > li { grid-column: 1; }
  .niche { padding: var(--s-4); }
  .bl__foot { display: none; }
  .niche--wide { column-gap: var(--s-3); }
  .niche--wide .niche__icon { align-self: start; }
  /* на телефоне все ниши строкой «иконка — название и текст»: восемь карточек столбиком не растягиваются на три экрана */
  .niche { display: grid; grid-template-columns: var(--icon) minmax(0, 1fr); column-gap: var(--s-3); row-gap: var(--s-1); }
  .niche__icon { grid-row: 1 / 4; margin: 0; }
  .niche__name, .niche__text, .niche__link { grid-column: 2; }
  .niche__link { justify-self: start; margin-top: 0; }
  /* цифры столбиком: число и подпись одной строкой на общей базовой линии; сторы — отдельный ряд кнопок под подписью */
  .facts { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-4); }
  .facts > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3); }
  .fact__label { margin-top: 0; }
  .facts > li:last-child .fact__label { display: contents; }
  .fact__sep { display: none; }
  .fact__stores { display: flex; flex-wrap: wrap; flex-basis: 100%; gap: var(--s-2); }
  .fact__label .fact__stores a {
    display: inline-flex; align-items: center; min-height: calc(var(--s-6) + var(--s-1)); margin-block: 0; padding: 0 var(--s-3);
    background: var(--surface-2); border: var(--line) solid var(--secondary-border); border-radius: var(--r-2); text-decoration: none;
  }

  .rates__head { flex-direction: column; align-items: stretch; }
  .rates__head, .period { max-width: 100%; }
  .period { display: flex; }
  /* на 320 скидка переносится под срок внутри своей кнопки, а не выталкивает переключатель за экран */
  .period__opt { flex: 1 1 0; min-width: 0; flex-direction: column; justify-content: center; gap: 0; min-height: var(--s-7); padding-inline: var(--s-1); white-space: normal; text-align: center; }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan--pick { order: -1; }

  .section-faq .faq-container { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .section-faq .section-header { position: static; }
  .faq__title { font-size: var(--fs-body); }

  .final__panel { grid-template-columns: minmax(0, 1fr); padding: var(--s-7) var(--s-4); }
  .final__trace { margin-right: 0; min-height: 0; }
  .final__link { display: none; }
  .ig { padding: var(--s-4); gap: var(--s-3); }
  .ig__tab:nth-child(n+3) { display: none; }
  .ig__cards { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .icard { padding: var(--s-2) var(--s-3); }
  .icard__btn { display: none; }
  .integ__ask { flex-wrap: wrap; align-items: flex-start; padding: var(--s-4); }
  .integ__ask-btn { flex: 1 1 100%; }
  .mob__phones { column-gap: var(--s-3); }
  .mob__stores li { flex: 1 1 auto; }
  .mob__stores .btn { width: 100%; }
  .final__panel > .sec__cta { grid-column: 1; grid-row: auto; justify-self: stretch; flex-wrap: wrap; }

  /* футер одной колонкой: длинные названия не переносятся, «Решения» и «Сравнения» свёрнуты, ссылки остаются в DOM */
  .foot__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
  .foot__fold > summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--control-h); margin-bottom: 0; border-radius: var(--r-1); cursor: pointer; }
  .foot__fold[open] > summary { margin-bottom: var(--s-2); }
  .foot__chev { display: block; color: var(--text-3); transition: transform var(--dur-2) var(--ease); }
  .foot__fold[open] .foot__chev { transform: rotate(180deg); }
}

/* узкие телефоны: кнопка в мокапе рассылок короче */
@media (max-width: 340px) {
  .xs-hide { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tour__panel, .canvas__live, .faq-list.is-js .faq__title::before, .faq-list.is-js .faq__title::after, .mbar, .mbar.is-shown, .foot__chev, .theme-row__switch, .theme-row__switch::after, .hdr, .hdr-wrap, .site-header, .hdr__item, .hdr__chev, .mm, .mm.is-open, .lang__menu, .lang.is-open .lang__menu, .mm__item, .mm__icon, .mm__chans, .mm__chans .plate, .mnav__chev, .igroup, .igroup__icon, .igroup__arrow, .ilink, .icard, .icard__btn { transition: none; }
  .mm, .lang__menu { transform: none; }
  .faq-list.is-js .faq.is-open .faq__answer { animation: none; }
  .tour__panel .app__pane, .btn, a.chan, .tour__tab, .period__opt { transition: none; }
  .tour__panel .app__pane { transform: none; }
  .tour__panel.is-past .app__pane { transform: none; }
  /* живые копии и кнопки: состояния меняются сразу, без переходов */
  .is-live *, .is-live *::after, .logo svg, .foot__logo svg, .lang__opt, :is(a, summary, button).mnav__row, .mnav__seg-opt, .hdr__burger, .faq__answer a, .foot__list a, .foot__social a, .reg__close, .faq__more, .xlink, .niche__name a, .fact__label a { transition: none; }
  /* движение выключили посреди визита: недоявленное и непрорисованное показывается сразу */
  .is-play .will-reveal.will-reveal { opacity: 1; translate: none; transition: none; }
  .is-play .integ :is(.ilink, .iport) { stroke-dashoffset: 0; opacity: 1; transition: none; }
}

.hero__demo { position: absolute; right: var(--s-3); bottom: var(--s-2); z-index: var(--z-window); color: var(--mock-muted); font-size: var(--fs-mock-sm); }
@media (max-width: 389px) { .hero__chans { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: var(--s-2); } }