/* ===========================================================================
   SayIt — публичная страница продукта.

   Оформление: тёмная тема с одним тёплым акцентом.
   Золото вместо привычного фиолетово-синего градиента выбрано намеренно —
   это цвет денег и премиального банковского продукта, а заодно он сразу
   отличает страницу от типового «AI-лендинга», который выдаёт любой
   генератор. Свечения и летающие частицы не используются: вместо них
   работают контраст, крупная типографика и точные линии.

   Шрифты только системные: страница обязана открываться в закрытом контуре,
   где внешние CDN недоступны.
   =========================================================================== */

:root {
    --bg: #0a0c11;
    --bg-2: #10131a;
    --surface: #151922;
    --surface-2: #1c2230;
    --line: #262d3b;

    --text: #f2f4f8;
    --text-2: #a8b1c4;
    --text-3: #6d7689;

    /* Акцент: тёплое золото. Второй тон — для градиента на крупных элементах */
    --gold: #e8b64c;
    --gold-2: #c9923a;
    --gold-soft: rgba(232, 182, 76, .1);
    --gold-line: rgba(232, 182, 76, .32);
    --stamp: var(--gold);          /* имя используется иллюстрациями */

    --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;

    --maxw: 1120px;
    /* Ширина бокового меню. От неё зависят отступы всей страницы,
       поэтому она живёт здесь, а не тремя числами в трёх правилах */
    --side: 244px;
    --gutter: 32px;
    --r: 10px;
}

* { box-sizing: border-box; }

/* Тема одна при любых настройках системы: на светлом фоне золото выцветает
   в горчичный, и страница перестаёт выглядеть дорого. Это витрина, а не
   читалка — предсказуемый вид здесь важнее подстройки под предпочтения */
:root { color-scheme: dark; }

html { scroll-behavior: smooth; }

/* Шапка липкая: без запаса переход по якорю прячет заголовок раздела
   под ней, и человек попадает в середину первого абзаца */
.section, .facts, main { scroll-margin-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 17px/1.65 var(--sans);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -.02em; font-weight: 600; }
p { margin: 0; }
a { color: inherit; }

.hidden { display: none !important; }

.label {
    display: inline-block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold);
}

/* ---------- Шапка ---------- */
/* ===========================================================================
   Боковое меню.

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

.side {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 40;
    width: var(--side);
    /* Меню закрыто, пока его не позвали.
       Стояло всегда и занимало седьмую часть экрана постоянно, а нужно
       раз в сеанс: пришёл, выбрал раздел, дальше читаешь. Разделы,
       которые нужны по ходу чтения, переехали в верхнюю строку —
       там они не отнимают ширину у текста. */
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.2, .8, .3, 1);
    box-shadow: 0 0 40px rgba(0, 0, 0, .5);
    display: flex;
    flex-direction: column;
    padding: 20px 14px 16px;
    background: var(--bg-2);
    border-right: 1px solid var(--line);
    /* Прокручивается список, а не меню целиком: на экране ноутбука
       все пункты по высоте не помещаются, и при общей прокрутке вход
       в кабинет — единственное действие здесь, приносящее деньги, —
       уезжал за нижний край и не показывался, пока не докрутишь */
    overflow: hidden;
}

/* Знак и подпись под ним. Правила жили в шапке, которой больше нет,
   но бренд стоит ещё и в подвале — поэтому они не привязаны к меню */
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand svg { flex: none; }

.brand-name { font-size: 23px; font-weight: 600; letter-spacing: -.02em; }

.brand-sub {
    display: block;
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-top: -1px;
}

.side .brand { padding: 0 8px; margin-bottom: 24px; }

.side-nav {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Полосе прокрутки нужен зазор, иначе она ложится на текст пунктов */
    margin-right: -6px;
    padding-right: 6px;
}

/* Заголовок группы: отделяет якоря страницы от отдельных страниц.
   Без него «Оферта» читается как ещё один раздел лендинга */
.side-group {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-3);
    padding: 0 10px;
    /* Список длинный и на ноутбуке едва помещается по высоте: отступ
       между группами — первое, что можно ужать без потери читаемости */
    margin: 18px 0 7px;
}

.side-nav > .side-group:first-child { margin-top: 0; }

.side-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 7px;
    font-size: 14px;
    color: var(--text-2);
    text-decoration: none;
    transition: background .14s ease, color .14s ease;
}

.side-nav a:hover { background: var(--surface); color: var(--text); }

/*
 * Номер раздела тот же, что стоит в самом разделе. Это не украшение:
 * по нему видно, сколько страницы позади и сколько осталось, — длинную
 * страницу иначе читают вслепую.
 */
.side-nav a b {
    flex: none;
    width: 20px;
    font-family: var(--mono);
    font-size: 10.5px;
    font-weight: 400;
    color: var(--text-3);
    transition: color .14s ease;
}

/*
 * Открытый раздел отмечен полосой слева, а не заливкой во всю ширину:
 * заливка спорит за внимание с самим разделом, ради которого пришли.
 */
.side-nav a.active {
    color: var(--text);
    background: var(--gold-soft);
    box-shadow: inset 2px 0 0 var(--gold);
}

.side-nav a.active b { color: var(--gold); }

.side-page i { opacity: .6; transition: opacity .14s ease; }
.side-page:hover i { opacity: 1; }

/*
 * Значки рисуются маской, а не шрифтом и не картинкой: цвет берётся
 * от текста, поэтому пункт и его значок гаснут и загораются вместе,
 * одним правилом.
 */
.ico {
    width: 16px; height: 16px;
    flex: none;
    background: currentColor;
    -webkit-mask: var(--d) center / contain no-repeat;
    mask: var(--d) center / contain no-repeat;
}

.ico-slides { --d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='12' rx='2'/%3E%3Cpath d='M12 16v4M8 20h8'/%3E%3C/svg%3E"); }
.ico-book   { --d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5A2.5 2.5 0 0 1 6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5z'/%3E%3Cpath d='M4 17.5h16'/%3E%3C/svg%3E"); }
.ico-doc    { --d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6M8 13h8M8 17h5'/%3E%3C/svg%3E"); }
.ico-play   { --d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M10 8.5l6 3.5-6 3.5z'/%3E%3C/svg%3E"); }
.ico-flask  { --d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2h6M10 2v7L4.5 18a2 2 0 0 0 1.7 3h11.6a2 2 0 0 0 1.7-3L14 9V2'/%3E%3Cpath d='M7 15h10'/%3E%3C/svg%3E"); }
.ico-import { --d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M4 17v3h16v-3'/%3E%3C/svg%3E"); }

/*
 * Вход в кабинет прижат к низу и выделен заливкой: это единственное
 * действие в меню, которое приносит деньги, и теряться среди ссылок
 * на демонстрации ему нельзя.
 */
.side-cabinet {
    flex: none;
    padding: 11px 14px;
    border: 1px solid var(--gold);
    border-radius: 8px;
    background: var(--gold-soft);
    color: var(--gold);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    transition: background .14s ease, color .14s ease;
}

.side-cabinet:hover { background: var(--gold); color: var(--bg); }

/* Запас сверху: иначе кнопка липнет к последнему пункту, когда меню
   не прокручивается и margin-top:auto не даёт никакого промежутка */
/* Отделяет кнопку от прокручиваемого списка: без черты она читается
   как последний пункт этого списка, уехавший вниз */
.side-nav + .side-cabinet { margin-top: 16px; }

/* ---------- Шапка ---------- */
/*
 * На широком экране от неё остаётся название текущего раздела:
 * ориентир для того, кто пришёл по ссылке в середину страницы.
 * На узком — она единственный способ вызвать меню.
 */
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px var(--gutter);
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}

.topbar-title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Название меняется на прокрутке — без перехода оно щёлкает */
    transition: opacity .18s ease;
}

.topbar-title.fade { opacity: 0; }

.topbar-demo {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--gold-line);
    border-radius: 8px;
    background: var(--gold-soft);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gold);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .14s ease, color .14s ease, background .14s ease;
}

.topbar-demo svg { width: 15px; height: 15px; flex: none; }
.topbar-demo:hover { border-color: var(--gold); background: var(--gold); color: var(--bg); }

/* Короткая подпись — на узком экране, полная — на широком */
.topbar-demo-short { display: none; }

@media (max-width: 900px) {
    .topbar-demo { padding: 8px 11px; }
    .topbar-demo-full { display: none; }
    .topbar-demo-short { display: inline; }
}

/* Бургер: три полосы, складывающиеся в крест, когда меню открыто */
.burger {
    display: none;
    flex: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 38px; height: 38px;
    padding: 0 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: none;
    cursor: pointer;
}

.burger span {
    display: block;
    height: 1.5px;
    background: var(--text-2);
    border-radius: 2px;
    transition: transform .18s ease, opacity .14s ease;
}

.burger.on span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger.on span:nth-child(2) { opacity: 0; }
.burger.on span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ---------- Содержимое рядом с меню ---------- */
/*
 * Страница сдвигается отступом, а не вторым столбцом сетки: разделы
 * внутри сами держат свою ширину, и трогать их разметку ради меню
 * означало бы править одиннадцать мест вместо одного.
 */
/* Отступа под меню больше нет: оно выдвижное и ширины не занимает */
main, .footer { margin-left: 0; }

/* ---------- Полоса загрузки ---------- */
/*
 * Показывает занятость там же, где человек ждёт ответа. Появляется
 * не сразу: переход почти всегда мгновенный, и мелькнувшая полоса
 * читается как дефект отрисовки, а не как отклик.
 */
.loadbar {
    position: fixed;
    left: 0; right: 0; top: 0;
    height: 3px;
    z-index: 60;
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
}

.loadbar.on { opacity: 1; }

.loadbar > span {
    display: block;
    height: 100%;
    width: 34%;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(90deg, transparent, var(--gold-2) 30%, var(--gold) 70%, var(--gold-2));
    animation: loadbar-run 1.05s cubic-bezier(.45, 0, .35, 1) infinite;
}

@keyframes loadbar-run {
    from { transform: translateX(-100%); }
    to   { transform: translateX(330%); }
}

@media (prefers-reduced-motion: reduce) {
    .loadbar > span { animation: none; width: 100%; }
}

/* ---------- Появление разделов ---------- */
/*
 * Раздел проявляется, когда до него доходят. Смысл не в оживлении:
 * разделов одиннадцать, и движение отмечает границу между ними —
 * иначе прокрутка читается как один сплошной текст.
 *
 * Сдвиг маленький: большой заставляет ждать, пока содержимое доедет
 * до места, и мешает читать.
 */
/*
 * Класс reveal ставит скрипт, и он же его снимает. Само по себе ничто
 * на странице не спрятано: отключённый JavaScript, ошибка при его
 * загрузке или наблюдатель, который не запустился, оставляют разделы
 * видимыми. Это лендинг — его читают до всякого доверия к нам, и пустая
 * страница вместо текста стоит дороже любой анимации.
 */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .3, 1);
}

.reveal.shown { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Узкий экран: меню выдвигается ---------- */

.side-veil {
    position: fixed;
    inset: 0;
    z-index: 39;
    background: rgba(6, 8, 12, .55);
    backdrop-filter: blur(2px);
}

.side.open { transform: none; }

/* Бургер нужен теперь на любой ширине: другого способа открыть меню нет */
.burger { display: flex; }

@media (prefers-reduced-motion: reduce) {
    .side { transition: none; }
}

/*
 * Второго первого экрана на странице больше нет.
 *
 * Здесь стоял блок .hero: собственный заголовок первого уровня, своя
 * иллюстрация и четыре кнопки в ряд. Заголовков первого уровня на странице
 * оказывалось два, с разным текстом, и читалась она как две склеенные.
 * Всё, что этот блок объяснял, живёт теперь либо в первом экране (.ask),
 * либо в разделах 06 и 09, где то же самое сказано подробнее.
 *
 * Правила .hero* удалены целиком, а не оставлены «на всякий случай»:
 * мёртвое оформление переживает несколько правок и однажды применяется
 * к чужой разметке, случайно совпавшей именем класса.
 */

/* ---------- Кнопки ---------- */
.btn {
    font: inherit;
    font-size: 15px;
    font-weight: 550;
    padding: 14px 28px;
    border-radius: 9px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: border-color .14s ease, background .14s ease, transform .14s ease;
}

.btn:hover { border-color: var(--gold); background: var(--gold-soft); transform: translateY(-1px); }
.btn:active { transform: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* btn-primary — то же оформление: класс приходит из скрипта чата */
.btn-solid, .btn-primary {
    background: linear-gradient(135deg, var(--gold), var(--gold-2));
    border-color: transparent;
    color: #14171d;
    font-weight: 650;
}

.btn-solid:hover, .btn-primary:hover {
    filter: brightness(1.08);
    background: linear-gradient(135deg, var(--gold), var(--gold-2));
}

.btn-block { width: 100%; }

/* ---------- Доказательства ---------- */
.facts { border-bottom: 1px solid var(--line); background: var(--bg-2); }

.facts-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.fact { margin: 0; padding: 30px 30px 30px 0; }

/* Разделители рисуем границами, а не просветами сетки: фон полосы
   должен доходить до края экрана, а не только до колонок */
.fact + .fact { padding-left: 30px; border-left: 1px solid var(--line); }

@media (max-width: 780px) {
    .facts-inner { grid-template-columns: 1fr; }
    .fact { padding: 24px 0; }
    .fact + .fact { border-left: none; border-top: 1px solid var(--line); }
}

.fact dt { font-size: 19px; font-weight: 600; margin-bottom: 7px; }
.fact dd { margin: 0; font-size: 15px; color: var(--text-2); }

/*
 * Размеченное место под настоящие внедрения.
 *
 * Пустое место обязано быть видно и объяснено. Неназванное оно читается
 * как недовёрстанный блок — то есть как небрежность, — а объяснённое
 * читается как обещание не врать. Пунктирные поля взяты из оформления
 * оферты (.blank): там ими показывают графу, которую ещё предстоит
 * заполнить, и здесь смысл ровно тот же.
 */
.credits {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 var(--gutter) 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 16px;
}

.credits-head {
    flex: none;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-3);
}

.credits-text {
    flex: 1 1 420px;
    max-width: 86ch;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-3);
}

.credits-text strong { color: var(--text-2); font-weight: 600; }

.credits-slots { display: flex; flex-wrap: wrap; gap: 8px; opacity: .5; }

/* ---------- Разделы ---------- */
/*
 * Отступ 64, а не 92.
 *
 * Разделов одиннадцать, и каждый платил за воздух дважды — сверху и снизу.
 * Двадцать восемь пикселей с каждой стороны дают почти шестьсот на страницу,
 * то есть две трети экрана, отвоёванные без единой вырезанной мысли.
 * Ниже 64 опускать не стоит: раздел перестаёт читаться как отдельный
 * и склеивается с соседним, а одной разделительной линии для этого мало.
 */
.section {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 64px var(--gutter);
    border-bottom: 1px solid var(--line);
}

/* 28, а не 48: подводка раздела и есть начало раздела, а не отдельный
   экран перед ним. Сорок восемь пикселей отрывали заголовок от того,
   что он объясняет, и на десяти разделах стоили двух сотен пикселей */
.section-head { margin-bottom: 28px; }

/* Крупный полупрозрачный номер — ориентир в длинной странице */
.section-num {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: .16em;
    color: var(--gold);
    margin-bottom: 16px;
}

.section h2 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 16px; }
.section-lead { color: var(--text-2); font-size: 18px; max-width: 62ch; }
.section-lead strong { color: var(--text); font-weight: 600; }

/* ---------- Сетка доводов ---------- */
/* Ровно две колонки: при auto-fit четвёртая карточка уезжала на свою строку,
   а четыре в ряд оставляют слишком узкую колонку под этот объём текста */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 700px) { .grid { grid-template-columns: 1fr; } }

.grid > article {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 28px 26px;
    transition: border-color .16s ease, transform .16s ease;
}

.grid > article:hover { border-color: var(--gold); transform: translateY(-2px); }

.grid h3 { font-size: 19px; margin-bottom: 11px; }

.grid h3::before {
    content: attr(data-mark);
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--gold);
    margin-bottom: 12px;
    font-weight: 400;
}

.grid p { font-size: 15.5px; color: var(--text-2); }
.grid strong { color: var(--text); font-weight: 600; }

/* ===========================================================================
   Было / стало — анимация на два телефона.

   Слева клиент шесть раз тыкает в экраны, справа один раз говорит.
   Сделано целиком на CSS: страница живёт в закрытом контуре, тянуть
   анимационную библиотеку неоткуда, а видео весит больше всей страницы.

   Такт цикла — 10 секунд, одинаковый у обеих панелей, чтобы они
   перезапускались синхронно и сравнение читалось само.
   Внутри такта проценты соответствуют секундам: 10% = 1 c.
   =========================================================================== */

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 880px) { .compare { grid-template-columns: 1fr; } }

.pane {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 26px 26px 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

.pane-after { border-color: var(--gold-line); }

.pane-head { width: 100%; display: flex; align-items: baseline; gap: 12px; }

.pane-tag {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-3);
}

.pane-after .pane-tag { color: var(--gold); }
.pane-title { font-size: 16px; font-weight: 600; }

.pane-foot { width: 100%; display: flex; align-items: center; gap: 16px; }

.tally { display: flex; align-items: baseline; gap: 9px; flex: none; }

/* Счётчик прокручивается лентой цифр: перерисовывать число скриптом
   ради витрины незачем, а лента ещё и показывает сам факт прироста */
.tally-window { height: 1em; overflow: hidden; font-size: 30px; font-weight: 600; line-height: 1; }
.tally-strip span { display: block; height: 1em; }
.pane-after .tally-window { color: var(--gold); }

.tally-label { font-size: 13px; color: var(--text-3); }
.pane-note { font-size: 13px; color: var(--text-3); line-height: 1.45; }

/* ---------- Телефон ---------- */
.phone { padding: 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 26px; }

.phone-screen {
    position: relative;
    width: 244px;
    height: 460px;
    overflow: hidden;
    border-radius: 14px;
    background: var(--bg);
    animation: cycleFade 10s linear infinite;
}

/* Короткое затемнение на стыке цикла: без него возврат к первому экрану
   и сброс счётчика выглядят сбоем, а не началом заново */
@keyframes cycleFade {
    0%        { opacity: 0; }
    4%, 96%   { opacity: 1; }
    100%      { opacity: 0; }
}

.scr { position: relative; width: 244px; flex: none; padding: 0 16px; }

.scr-bar {
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-3);
}

.scr-title { height: 34px; line-height: 34px; font-size: 14px; font-weight: 600; }
.rows { margin-top: 12px; }

.row {
    height: 52px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    margin-bottom: 10px;
    border-radius: 8px;
    background: var(--surface);
    font-size: 13px;
    color: var(--text-2);
}

/* Кнопку ставим по координате, а не потоком: палец на неё наводится
   по абсолютному центру 400px, и высота текста выше не должна её сдвигать */
.row-cta {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 374px;
    margin: 0;
    justify-content: center;
    background: var(--surface-2);
    color: var(--text);
    font-weight: 600;
}

.scr-hint { margin-top: 12px; font-size: 12px; color: var(--text-3); line-height: 1.5; }
.scr-result { position: absolute; left: 16px; right: 16px; top: 190px; text-align: center; }

/* ---------- Левая панель: лента экранов ---------- */
.strip { display: flex; width: max-content; transform: translateX(-1464px); animation: stripSlide 10s linear infinite; }

/* Экран шириной 244px, поэтому шаг ленты — ровно 244px.
   Пять экранов взаимодействия и шестой с результатом */
@keyframes stripSlide {
    0%,  9.2%  { transform: translateX(0); }
    10%, 19.2% { transform: translateX(-244px); }
    20%, 29.2% { transform: translateX(-488px); }
    30%, 39.2% { transform: translateX(-732px); }
    40%, 49.2% { transform: translateX(-976px); }
    50%, 100%  { transform: translateX(-1220px); }
}

/* Подсветка строки, в которую сейчас попадёт палец. Нажатия идут ровно
   через секунду, поэтому у всех экранов одна анимация и разный старт */
@keyframes rowFlash {
    0%,  4%   { background: var(--surface-2); color: var(--text); }
    9%, 100%  { background: var(--surface); color: var(--text-2); }
}

.is-target { animation: rowFlash 10s linear infinite; }
.scr:nth-child(1) .is-target { animation-delay: .55s; }
.scr:nth-child(2) .is-target { animation-delay: 1.55s; }
.scr:nth-child(3) .is-target { animation-delay: 2.55s; }
.scr:nth-child(4) .is-target { animation-delay: 3.55s; }
.scr:nth-child(5) .is-target { animation-delay: 4.55s; }

/* ---------- Палец ---------- */
.tap { position: absolute; top: 0; left: 0; width: 0; height: 0; opacity: 0; }

.tap-dot, .tap-ring {
    position: absolute;
    left: -13px;
    top: -13px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
}

.tap-dot { background: var(--text); opacity: .82; }
.tap-ring { border: 1.5px solid var(--text); }

/* Палец переезжает от строки к строке; координаты — центры строк
   на экране 244×460 (первая строка на 100px, шаг 62px) */
@keyframes tapMove {
    0%,   2%   { transform: translate(200px, 162px); opacity: 0; }
    3%,   9%   { transform: translate(200px, 162px); opacity: 1; }
    12%, 19%   { transform: translate(200px, 100px); opacity: 1; }
    22%, 29%   { transform: translate(200px, 224px); opacity: 1; }
    32%, 39%   { transform: translate(200px, 100px); opacity: 1; }
    42%, 49%   { transform: translate(122px, 400px); opacity: 1; }
    50%, 100%  { transform: translate(122px, 400px); opacity: 0; }
}

/* Нажатие и круг от касания повторяются раз в секунду и сами попадают
   в такт: секунда укладывается в десятисекундный цикл целое число раз */
@keyframes press  { 0% { transform: scale(.55); } 18%, 100% { transform: scale(1); } }
@keyframes ripple { 0% { transform: scale(.3); opacity: .7; } 70%, 100% { transform: scale(2.6); opacity: 0; } }

.pane-before .tap      { animation: tapMove 10s linear infinite; }
.pane-before .tap-dot  { animation: press 1s ease-out .75s infinite; }
.pane-before .tap-ring { animation: ripple 1s ease-out .75s infinite; }

/*
 * Лента начинается с единицы, а не с нуля.
 *
 * Ноль здесь был ошибкой. Кадр 0% показывал «0 нажатий», и всякий раз, когда
 * анимация не идёт — вкладка неактивна, движок её приостановил, у человека
 * выключены анимации, — панель читалась как «действий не требуется». Это
 * ровно противоположно тому, что она должна доносить.
 *
 * Первое нажатие происходит на 0,75 с, и до него счётчик всё равно бессмыслен.
 */
@keyframes countUp {
    0%,   17.4% { transform: translateY(0); }
    17.5%,27.4% { transform: translateY(-1em); }
    27.5%,37.4% { transform: translateY(-2em); }
    37.5%,47.4% { transform: translateY(-3em); }
    47.5%,100%  { transform: translateY(-4em); }
}

/* Базовое положение — последняя цифра: с остановленной анимацией панель
   показывает итог, а не начало отсчёта */
.pane-before .tally-strip { transform: translateY(-4em); animation: countUp 10s linear infinite; }

/* ---------- Правая панель: одна фраза ---------- */
.scr-voice { position: relative; height: 460px; }

/* Микрофон анимации — только внутри экрана «одна фраза». Правило без
   родителя ловило кнопку микрофона панели предпросмотра в кабинете
   (тот же класс .mic): она уезжала из формы чата и висела поверх окна
   с сайтом, а при запрете анимаций пропадала вовсе */
.scr-voice .mic {
    position: absolute;
    left: 50%;
    top: 400px;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    border-radius: 50%;
    background: var(--gold);
    display: grid;
    place-items: center;
    color: #14171d;
    font-size: 19px;
    animation: micOut 10s ease-out infinite;
}

/* Когда появляется карточка мандата, микрофон уступает ей место:
   иначе они занимают одну и ту же нижнюю треть экрана */
@keyframes micOut {
    0%,  28%  { opacity: 1; transform: scale(1); }
    33%, 92%  { opacity: 0; transform: scale(.8); }
    97%, 100% { opacity: 1; transform: scale(1); }
}

.scr-voice .mic-ring {
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    border: 2px solid var(--gold);
    animation: ripple 2s ease-out infinite;
}

.say {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 84px;
    padding: 14px 16px;
    border-radius: 12px 12px 12px 4px;
    background: var(--surface);
    border: 1px solid var(--gold-line);
    opacity: 0;
    animation: sayIn 10s ease-out infinite;
}

@keyframes sayIn {
    0%,   8%  { opacity: 0; transform: translateY(10px); }
    14%, 96%  { opacity: 1; transform: none; }
    100%      { opacity: 0; transform: none; }
}

.say-text { font-size: 14px; font-style: italic; }

.wave { display: flex; align-items: flex-end; gap: 3px; height: 16px; margin-top: 10px; }

.wave i {
    width: 3px;
    height: 100%;
    border-radius: 2px;
    background: var(--gold);
    transform-origin: bottom;
    animation: wave .55s ease-in-out infinite alternate;
}

.wave i:nth-child(2) { animation-delay: .09s; }
.wave i:nth-child(3) { animation-delay: .18s; }
.wave i:nth-child(4) { animation-delay: .27s; }
.wave i:nth-child(5) { animation-delay: .36s; }

@keyframes wave { from { transform: scaleY(.25); } to { transform: scaleY(1); } }

.mandate {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 210px;
    padding: 14px;
    border-radius: 10px;
    background: var(--surface);
    border: 1px solid var(--line);
    opacity: 0;
    animation: mandateIn 10s ease-out infinite;
}

@keyframes mandateIn {
    0%,  30%  { opacity: 0; transform: translateY(16px); }
    36%, 56%  { opacity: 1; transform: none; }
    62%, 100% { opacity: 0; transform: translateY(-8px); }
}

.mandate-head {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}

.mandate dl { margin: 0; display: grid; gap: 6px; }
.mandate dl > div { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.mandate dt { color: var(--text-3); }
.mandate dd { margin: 0; text-align: right; }

.mandate-btn {
    height: 40px;
    margin-top: 12px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--gold), var(--gold-2));
    color: #14171d;
    font-size: 13px;
    font-weight: 650;
}

/* Палец справа нажимает ровно один раз — по кнопке подтверждения */
@keyframes tapOnce {
    0%,  44%  { transform: translate(122px, 371px) scale(1); opacity: 0; }
    46%, 48%  { transform: translate(122px, 371px) scale(1); opacity: 1; }
    50%       { transform: translate(122px, 371px) scale(.55); opacity: 1; }
    53%, 56%  { transform: translate(122px, 371px) scale(1); opacity: 1; }
    58%, 100% { transform: translate(122px, 371px) scale(1); opacity: 0; }
}

.pane-after .tap { animation: tapOnce 10s linear infinite; }

.done {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 210px;
    text-align: center;
    opacity: 0;
    animation: doneIn 10s ease-out infinite;
}

@keyframes doneIn {
    0%,  60%  { opacity: 0; transform: scale(.92); }
    66%, 94%  { opacity: 1; transform: none; }
    100%      { opacity: 0; transform: none; }
}

.done-mark {
    width: 54px;
    height: 54px;
    margin: 0 auto 14px;
    border-radius: 50%;
    border: 1.5px solid var(--gold);
    display: grid;
    place-items: center;
    color: var(--gold);
    font-size: 24px;
}

.done-text { font-size: 14px; font-weight: 600; }
.done-sub { font-size: 12px; color: var(--text-3); margin-top: 5px; }

/* Здесь ноль оправдан: до подтверждения клиент действительно не нажимал
   ничего. Но базовое положение всё равно итоговое — иначе с остановленной
   анимацией обе панели показывали бы ноль и сравнивать было бы нечего */
@keyframes countOne {
    0%,   49.4% { transform: translateY(0); }
    50%,  100%  { transform: translateY(-1em); }
}

.pane-after .tally-strip { transform: translateY(-1em); animation: countOne 10s linear infinite; }

.compare-verdict {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    font-size: 17px;
    color: var(--text-2);
    max-width: 72ch;
}

.compare-verdict strong { color: var(--text); font-weight: 600; }

/* Движение здесь — единственный носитель смысла, поэтому при запрете
   анимаций показываем обе панели в конечном состоянии, а не пустыми */
@media (prefers-reduced-motion: reduce) {
    .phone-screen, .strip, .is-target, .tap, .tap-dot, .tap-ring, .tally-strip,
    .say, .mandate, .done, .wave i, .scr-voice .mic, .scr-voice .mic-ring {
        animation: none !important;
    }
    .phone-screen { opacity: 1; }
    .say, .mandate { opacity: 1; transform: none; }
    .tap, .done, .scr-voice .mic, .scr-voice .mic-ring { display: none; }
}

/* ---------- Иллюстрации ---------- */
.figure { margin: 0; }

.figure svg {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--r);
}

.figure figcaption { margin-top: 15px; font-size: 14px; color: var(--text-3); }

/* Выравнивание по верху: колонки с разной длиной текста иначе «плавают» */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 36px; } }

/* Колонка сетки по умолчанию не уже своего содержимого, а внутри лежит
   неразрывный код: без этого страница разъезжается вбок на узком экране */
.split > * { min-width: 0; }

.split-text h3 { font-size: 22px; margin-bottom: 11px; }
.split-text p { color: var(--text-2); margin-bottom: 22px; }
.split-text p:last-child { margin-bottom: 0; }

/* ---------- Порядок работы ---------- */
.steps { list-style: none; margin: 0; padding: 0; }

.steps li {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 26px;
    padding: 22px 0;
    border-top: 1px solid var(--line);
}

.steps li:last-child { border-bottom: 1px solid var(--line); }

.steps .n {
    font-family: var(--mono);
    font-size: 22px;
    color: var(--gold);
    opacity: .55;
    line-height: 1.2;
}

.steps h3 { font-size: 20px; margin-bottom: 7px; }
.steps p { color: var(--text-2); font-size: 16px; max-width: 78ch; }

/* ---------- Выписка кода ---------- */
.excerpt {
    margin: 0;
    padding: 20px 22px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    border-radius: 8px;
    overflow-x: auto;
}

.excerpt code {
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--text-2);
    white-space: pre;
}

/* ---------- Вопросы ---------- */
.faq { display: flex; flex-direction: column; gap: 12px; }

.faq-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    transition: border-color .16s ease;
}

.faq-item.open { border-color: var(--gold); }

.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 18px;
    /* 16, а не 22: свёрнутый вопрос стоит высоты строки плюс отступы,
       и на семи вопросах лишние шесть пикселей сверху и снизу дают
       вместе почти четверть экрана пустоты */
    padding: 16px 24px;
    background: none;
    border: none;
    color: var(--text);
    font: inherit;
    font-size: 17.5px;
    font-weight: 550;
    text-align: left;
    cursor: pointer;
}

.faq-q:hover { background: var(--surface-2); }

.faq-sign {
    flex: none;
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--gold-soft);
    color: var(--gold);
    font-size: 17px;
    line-height: 1;
    transition: transform .22s ease;
}

.faq-item.open .faq-sign { transform: rotate(45deg); background: var(--gold); color: #14171d; }

.faq-a { max-height: 0; overflow: hidden; transition: max-height .26s ease; }
.faq-item.open .faq-a { max-height: 460px; }

.faq-a p { padding: 0 24px 24px 70px; color: var(--text-2); font-size: 16px; max-width: 76ch; }

@media (max-width: 620px) { .faq-a p { padding-left: 24px; } }
@media (prefers-reduced-motion: reduce) { .faq-a, .faq-sign { transition: none; } }

/* ---------- Заявка ---------- */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; gap: 36px; } }

.checklist { list-style: none; padding: 0; margin: 26px 0 0; }

.checklist li {
    padding: 14px 0 14px 32px;
    border-top: 1px solid var(--line);
    color: var(--text-2);
    font-size: 16px;
    position: relative;
}

.checklist li::before { content: "→"; position: absolute; left: 0; color: var(--gold); }

.form {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 32px;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }

.form label {
    display: block;
    margin-bottom: 18px;
    font-size: 13px;
    color: var(--text-3);
}

.form input, .form textarea, .chat-form input {
    display: block;
    width: 100%;
    margin-top: 8px;
    font: inherit;
    font-size: 16px;
    color: var(--text);
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 14px;
    resize: vertical;
    transition: border-color .14s ease;
}

.form input:focus, .form textarea:focus, .chat-form input:focus {
    outline: none;
    border-color: var(--gold);
}

.form input.invalid { border-color: #e0725f; }

.form-note { font-size: 12.5px; color: var(--text-3); margin-top: 14px; line-height: 1.55; }

.form-result {
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 15px;
    background: var(--gold-soft);
    border-left: 3px solid var(--gold);
}

.form-result.error { background: rgba(224, 114, 95, .1); border-left-color: #e0725f; }

/* ---------- Подвал ---------- */
.footer { border-top: 1px solid var(--line); background: var(--bg-2); }

.footer-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 40px var(--gutter) 64px;
    display: flex;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.footer p { font-size: 14.5px; color: var(--text-3); margin-top: 8px; max-width: 42ch; }
.footer nav { display: flex; gap: 28px; flex-wrap: wrap; }
.footer nav a { font-size: 14.5px; color: var(--text-2); text-decoration: none; }
.footer nav a:hover { color: var(--gold); }

/* ---------- Ассистент ---------- */
.chat-toggle {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 30;
    padding: 15px 26px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--gold), var(--gold-2));
    color: #14171d;
    font: inherit;
    font-size: 15px;
    font-weight: 650;
    cursor: pointer;
    box-shadow: 0 8px 26px rgba(232, 182, 76, .26);
    transition: transform .14s ease;
}

.chat-toggle:hover { transform: translateY(-2px); }

.chat-panel {
    position: fixed;
    right: 26px;
    bottom: 26px;
    z-index: 31;
    width: min(404px, calc(100vw - 32px));
    max-height: min(610px, calc(100vh - 52px));
    max-height: min(610px, calc(100dvh - 52px));
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.chat-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
}

.chat-head strong { font-size: 17px; font-weight: 600; }
.chat-sub { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }

.chat-close {
    background: none;
    border: none;
    color: var(--text-3);
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
    padding: 0 3px;
}

.chat-close:hover { color: var(--text); }

.chat-log {
    flex: 1;
    overflow-y: auto;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 13px;
    min-height: 180px;
}

.msg {
    max-width: 86%;
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 15px;
    line-height: 1.6;
    white-space: pre-wrap;
}

.msg-bot { align-self: flex-start; background: var(--bg-2); border: 1px solid var(--line); }

.msg-user {
    align-self: flex-end;
    background: linear-gradient(135deg, var(--gold), var(--gold-2));
    color: #14171d;
}

.msg-source {
    display: block;
    margin-top: 9px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-3);
}

.msg-typing span {
    display: inline-block;
    width: 6px; height: 6px;
    margin-right: 4px;
    border-radius: 50%;
    background: var(--text-3);
    animation: typing 1.2s infinite;
}

.msg-typing span:nth-child(2) { animation-delay: .15s; }
.msg-typing span:nth-child(3) { animation-delay: .3s; }

@keyframes typing {
    0%, 60%, 100% { opacity: .25; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) { .msg-typing span { animation: none; opacity: .6; } }

.chat-action { align-self: flex-start; }
.btn-chat-cta { padding: 10px 20px; font-size: 14px; }

/*
   Подсказок стало десять, и блок вырос до трети экрана: панель
   не поместилась, а заголовок «Справочная» выдавило за верхний край.
   Высота ограничена, лишнее прокручивается — так и выбор широкий,
   и панель цела.
*/
.chat-suggest {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 22px 14px;
    max-height: 132px;
    overflow-y: auto;
}

.chat-chip {
    background: var(--gold-soft);
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--gold);
    padding: 7px 14px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.chat-chip:hover { border-color: var(--gold); }

.chat-form { display: flex; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--line); }
.chat-form input { margin-top: 0; }
.btn-send { padding: 12px 18px; font-size: 17px; line-height: 1; flex: none; }

/* ===========================================================================
   Страницы-статьи: презентация, описание продукта, оферта.

   Читаются подряд, а не просматриваются, поэтому строка здесь уже
   лендинговой: колонка в 34 слова — предел, после которого глаз
   теряет начало следующей строки.
   =========================================================================== */

.page {
    max-width: 780px;
    margin: 0 auto;
    padding: 64px var(--gutter) 96px;
}

.page-kicker {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
}

.page h1 {
    font-size: clamp(30px, 4.4vw, 44px);
    line-height: 1.14;
    letter-spacing: -.02em;
    margin-bottom: 18px;
}

.page-lead {
    font-size: 18.5px;
    line-height: 1.6;
    color: var(--text-2);
    margin-bottom: 52px;
}

.page h2 {
    font-size: 24px;
    letter-spacing: -.01em;
    margin: 56px 0 18px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

.page h3 { font-size: 17px; margin: 30px 0 10px; }

.page p, .page li { font-size: 16px; line-height: 1.68; color: var(--text-2); }
.page p { margin-bottom: 15px; }
.page strong { color: var(--text); font-weight: 600; }

.page ul, .page ol { margin: 0 0 18px 22px; }
.page li { margin-bottom: 9px; }
.page li::marker { color: var(--text-3); }

.page a { color: var(--gold); }

/* Врезка: то, что человек обязан заметить, даже если читает по диагонали */
.note {
    padding: 18px 22px;
    margin: 26px 0;
    border-left: 2px solid var(--gold);
    border-radius: 0 var(--r) var(--r) 0;
    background: var(--gold-soft);
}

.note p:last-child { margin-bottom: 0; }

/* ---------- Презентация: страница вокруг сцены ---------- */
/*
 * Сама сцена и её управление — в deck.css: те же стили уходят в скачиваемый
 * файл и в PDF. Здесь только то, что есть на странице сайта: заголовок,
 * кнопки скачивания и подсказка под сценой.
 */
.dk-page {
    max-width: 1240px;
    margin: 0 auto;
    padding: 44px var(--gutter) 80px;
}

.dk-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 24px;
}

.dk-page-head h1 {
    margin: 0 0 10px;
    font-size: clamp(28px, 3.6vw, 40px);
    line-height: 1.14;
    letter-spacing: -.02em;
}

.dk-page-lead { max-width: 660px; font-size: 16.5px; line-height: 1.6; color: var(--text-2); }

.dk-downloads { flex: none; display: flex; flex-wrap: wrap; gap: 10px; }

.dk-dl {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font-size: 14.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .2s, color .2s, background .2s;
}

.dk-dl svg { width: 18px; height: 18px; flex: none; }
.dk-dl:hover { border-color: var(--gold-line); color: var(--gold); }
.dk-dl-main { background: var(--gold); border-color: var(--gold); color: #1b1406; }
.dk-dl-main:hover { background: #f0c766; color: #1b1406; }
.dk-dl.is-busy { opacity: .65; pointer-events: none; }

.dk-page-note { margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--text-3); }

.dk-page-note kbd {
    display: inline-block;
    padding: 1px 7px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font: 12px/1.5 var(--mono);
    color: var(--text-2);
}

@media (max-width: 760px) {
    .dk-page { padding-top: 26px; }
    .dk-page-head { flex-direction: column; align-items: flex-start; }
}

/* Печать страницы из браузера: только слайды, без обвязки сайта */
html.dk-print main { margin: 0 !important; padding: 0 !important; }
html.dk-print .dk-page { max-width: none; margin: 0; padding: 0; }
html.dk-print [data-print-hide] { display: none !important; }

/* ---------- Таблица ---------- */
/*
 * В своей прокрутке: числовая таблица не сжимается до ширины телефона
 * без потери читаемости, а горизонтальная прокрутка всей страницы —
 * дефект, который замечают раньше самой таблицы.
 */
.page-table { overflow-x: auto; margin: 22px 0; }

.page-table table { width: 100%; border-collapse: collapse; font-size: 15px; }

.page-table th, .page-table td {
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.page-table th {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-3);
    font-weight: 400;
    white-space: nowrap;
}

.page-table td { color: var(--text-2); }
.page-table td:first-child { color: var(--text); }

/* ---------- Пункты оферты ---------- */
/*
 * Нумерация вложенная и сквозная: в оферту приходят не читать,
 * а сослаться на пункт, и «п. 4.2» обязан находиться поиском.
 */
.terms { counter-reset: раздел; }

.terms > section { counter-increment: раздел; counter-reset: пункт; }

.terms > section > h2::before {
    content: counter(раздел) ". ";
    color: var(--text-3);
}

.terms > section > p {
    counter-increment: пункт;
    position: relative;
    padding-left: 46px;
}

.terms > section > p::before {
    content: counter(раздел) "." counter(пункт);
    position: absolute;
    left: 0;
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--text-3);
}

/* Место для подстановки реквизитов: пустое поле в договоре обязано
   быть видно, иначе его подписывают незаполненным */
.blank {
    padding: 1px 7px;
    border-bottom: 1px dashed var(--gold);
    color: var(--gold);
    font-family: var(--mono);
    font-size: 13.5px;
}

/* ---------- Подвал страницы ---------- */

.page-foot {
    margin-top: 64px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.page-foot p { margin: 0; font-size: 14px; color: var(--text-3); }

.page-cta {
    padding: 12px 24px;
    border: 1px solid var(--gold);
    border-radius: 8px;
    background: var(--gold-soft);
    color: var(--gold);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background .14s ease, color .14s ease;
}

.page-cta:hover { background: var(--gold); color: var(--bg); }

/* ---------- Уведомление о cookie ---------- */
/*
 * Не закрывает первый экран.
 *
 * Раньше баннер выезжал вместе со страницей и занимал нижний угол ровно
 * того экрана, ради которого человек пришёл: первое, что он видел на
 * витрине продукта, — просьба согласиться с печеньками. Изменено трое:
 *
 *  1. Появляется не сразу. Класс shown ставит landing.js после первой
 *     прокрутки или спустя пару секунд — то есть после того, как первый
 *     экран уже прочитан. До этого баннер прозрачен и не принимает
 *     нажатий (pointer-events: none), поэтому не мешает даже невидимым.
 *  2. Стал вдвое уже и ниже: текст в одну колонку, кнопка рядом.
 *     Речь о технических cookie, а не о рекламных профилях, — и объём
 *     уведомления обязан соответствовать объёму последствий.
 *  3. На узком экране по-прежнему стоит над плавающей кнопкой чата —
 *     иначе он её закрывает и человек не может открыть справочную,
 *     не согласившись предварительно с уведомлением. Но занимает он
 *     теперь одну строку вместо трёх, поэтому и перекрывает втрое меньше.
 */
.cookie-bar {
    position: fixed;
    left: 26px;
    bottom: 26px;
    z-index: 40;
    max-width: min(420px, calc(100vw - 52px));
    margin-right: 220px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .4);

    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}

.cookie-bar.shown { opacity: 1; transform: none; pointer-events: auto; }

.cookie-bar strong { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 3px; }
.cookie-bar p { font-size: 13px; color: var(--text-3); line-height: 1.5; }
.btn-cookie { flex: none; padding: 10px 18px; font-size: 14px; }

.cookie-bar.closing { opacity: 0; transform: translateY(10px); }

@media (prefers-reduced-motion: reduce) {
    .cookie-bar { transition: none; }
}

@media (max-width: 940px) {
    .cookie-bar {
        left: 12px; right: 12px; bottom: 84px;
        margin-right: 0;
        max-width: none;
    }
}

@media (max-width: 520px) {
    /* Кнопка под текстом, а не рядом: рядом ей остаётся полторы буквы */
    .cookie-bar { flex-direction: column; align-items: stretch; gap: 12px; }
}

/* ---------- Переключатель языка ---------- */
.lang-switch {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 7px;
    overflow: hidden;
    margin-left: 4px;
}

.lang-btn {
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .04em;
    padding: 6px 11px;
    border: none;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
}

.lang-btn + .lang-btn { border-left: 1px solid var(--line); }
.lang-btn:hover { color: var(--text); }
.lang-btn.active { background: var(--gold-soft); color: var(--gold); }

/* ===========================================================================
   Подсказка при наведении на кнопку.

   Своя, а не системный title: тот появляется через секунду с лишним, рвётся
   на одну строку и не поддаётся оформлению. Здесь у кнопок разное назначение
   («живое демо» против «песочницы»), и разницу человек должен увидеть
   до нажатия, а не после.

   Делается на CSS без скрипта: подсказка — оформление, а не поведение.
   =========================================================================== */
[data-tip] { position: relative; }

[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(4px);

    width: max-content;
    max-width: 300px;
    padding: 10px 13px;
    border-radius: 9px;
    border: 1px solid var(--gold-line);
    background: var(--surface);
    color: var(--text-2);

    font-family: var(--sans);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    text-align: left;
    white-space: normal;

    box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
    z-index: 40;
}

/* Уголок, указывающий на кнопку */
[data-tip]::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 5px);
    width: 9px;
    height: 9px;
    transform: translateX(-50%) rotate(45deg) translateY(4px);
    background: var(--surface);
    border-right: 1px solid var(--gold-line);
    border-bottom: 1px solid var(--gold-line);
    opacity: 0;
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
    z-index: 41;
}

[data-tip]:hover::after,
[data-tip]:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

[data-tip]:hover::before,
[data-tip]:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) rotate(45deg) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    [data-tip]::after, [data-tip]::before { transition: none; }
}

/*
 * В боковом меню подсказок нет: список прокручивается внутри обрезанного
 * меню, и псевдоэлемент вправо от пункта либо давал бы списку
 * горизонтальную прокрутку, либо обрезался. Правило оставлено запретом,
 * чтобы случайно добавленный data-tip не вернул полосу прокрутки.
 */
.side [data-tip]::after,
.side [data-tip]::before { display: none; }

/* На узком экране подсказки только мешают: там нет курсора */
@media (max-width: 700px) {
    [data-tip]::after, [data-tip]::before { display: none; }
}

/* ---------- Самообучение ---------- */
/*
 * Пять шагов в ряд, каждый со своим действующим лицом. Именно смена лица —
 * клиент, очередь, оператор, система, аудит — и есть содержание раздела:
 * видно, что решение принимает человек, а не модель сама себя переучивает.
 */
.learning {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0;
    margin: 40px 0 28px;
    padding: 0;
    list-style: none;
    counter-reset: learn;
}

.learning li {
    position: relative;
    padding: 26px 22px 26px 0;
    border-top: 2px solid var(--line);
    margin-right: 22px;
}

/* Золотой отрезок на первом шаге: взгляд начинает с него */
.learning li:first-child { border-top-color: var(--gold); }

.learning-step {
    display: inline-block;
    margin-bottom: 12px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold);
}

.learning h3 {
    font-size: 16.5px;
    margin-bottom: 10px;
    line-height: 1.3;
}

.learning p {
    color: var(--text-2);
    font-size: 14.5px;
    line-height: 1.6;
}

/* Стрелка между шагами: на последнем не нужна */
.learning li::after {
    content: "→";
    position: absolute;
    top: -14px;
    right: -14px;
    color: var(--text-3);
    font-size: 13px;
    background: var(--bg);
    padding: 0 4px;
}

.learning li:last-child::after { content: none; }

@media (max-width: 700px) {
    .learning li::after { content: none; }
    .learning li { margin-right: 0; }
}

.learning-note {
    max-width: 760px;
    padding: 18px 22px;
    border-left: 2px solid var(--gold);
    background: var(--gold-soft);
    color: var(--text-2);
    font-size: 15px;
    line-height: 1.65;
}

/* ---------- Счёт эффекта ---------- */
.calc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    margin-top: 40px;
}

@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }

.calc-inputs { display: grid; gap: 18px; align-content: start; }

.calc-inputs label { display: flex; flex-direction: column; gap: 8px; }

.calc-inputs span {
    font-size: 14.5px;
    color: var(--text-2);
    line-height: 1.45;
}

/* Пояснение под названием поля: откуда взялось значение по умолчанию */
.calc-inputs em {
    display: block;
    font-style: normal;
    font-size: 13px;
    color: var(--text-3);
    margin-top: 3px;
}

.calc-inputs input {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--bg-2);
    color: var(--text);
    font: inherit;
    font-family: var(--mono);
    font-size: 16px;
}

.calc-inputs input:focus { outline: none; border-color: var(--gold-line); }

.calc-result {
    border: 1px solid var(--gold-line);
    border-radius: var(--r);
    background: var(--surface);
    padding: 28px;
    align-self: start;
}

.calc-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 18px;
    padding: 13px 0;
    border-bottom: 1px solid var(--line);
}

.calc-line span { color: var(--text-2); font-size: 14.5px; }
.calc-line strong { font-family: var(--mono); font-size: 17px; white-space: nowrap; }

/* Годовая экономия — то, ради чего сюда пришли */
.calc-line-major { padding: 18px 0; }
.calc-line-major span { color: var(--text); font-size: 16px; }
.calc-line-major strong { font-size: 27px; color: var(--gold); }

.calc-note {
    margin-top: 20px;
    color: var(--text-3);
    font-size: 13.5px;
    line-height: 1.6;
}

/* ---------- Выбор роли ---------- */
/*
 * Стоит между подводкой и кнопками: человек уже понял, что это, и решает,
 * что смотреть дальше. Оформление намеренно спокойное — это навигация,
 * а не призыв к действию, и спорить с главной кнопкой ему незачем.
 */
.roles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}

.role {
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 99px;
    background: transparent;
    color: var(--text-2);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    transition: border-color .14s ease, color .14s ease, background .14s ease;
}

.role:hover { color: var(--text); border-color: var(--text-3); }

.role.active {
    border-color: var(--gold);
    background: var(--gold-soft);
    color: var(--gold);
}

.role-lead {
    max-width: 52ch;
    margin-bottom: 30px;
    color: var(--text-2);
    font-size: 16px;
    line-height: 1.6;
}

.role-link {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.role-link:hover { text-decoration-thickness: 2px; }

/* ---------- Конструктор в действии ---------- */
.builder {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 32px;
    margin-top: 40px;
    align-items: start;
}

@media (max-width: 860px) { .builder { grid-template-columns: 1fr; gap: 22px; } }

.builder-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 2px;
}

.builder-steps li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    color: var(--text-3);
    font-size: 14.5px;
    cursor: pointer;
    transition: color .16s ease, background .16s ease;
}

.builder-steps li span {
    flex: none;
    width: 24px;
    height: 24px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--mono);
    font-size: 12px;
}

.builder-steps li:hover { color: var(--text-2); }

/* Пройденные шаги гаснут, текущий подсвечен: видно, где мы находимся */
.builder-steps li.passed { color: var(--text-2); }
.builder-steps li.passed span { border-color: var(--gold-line); color: var(--gold); }

.builder-steps li.active {
    background: var(--gold-soft);
    color: var(--text);
}

.builder-steps li.active span {
    border-color: var(--gold);
    background: var(--gold);
    color: var(--bg);
}

/* Окно конструктора: рамка приложения, а не карточка на странице */
.builder-screen {
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--surface);
    overflow: hidden;
}

.builder-bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-2);
}

.builder-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--line);
}

.builder-bar em {
    margin-left: 10px;
    font-style: normal;
    font-size: 12.5px;
    color: var(--text-3);
    font-family: var(--mono);
}

.builder-body { padding: 24px 26px 28px; min-height: 320px; }

.builder-title { font-size: 19px; margin-bottom: 6px; }

.builder-caption {
    color: var(--text-3);
    font-size: 13.5px;
    line-height: 1.5;
    margin-bottom: 20px;
}

.builder-field {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 16px;
    align-items: baseline;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
    /* Поля проявляются по очереди: видно, что форму заполняют */
    animation: builder-in .3s ease both;
}

@keyframes builder-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .builder-field { animation: none; }
}

@media (max-width: 560px) {
    .builder-field { grid-template-columns: 1fr; gap: 4px; }
}

.builder-label { color: var(--text-3); font-size: 13.5px; }

.builder-value {
    font-family: var(--mono);
    font-size: 14px;
    color: var(--text);
    word-break: break-word;
}

/* Источник значения и выпадающий список отличаются от простого ввода:
   в конструкторе это разные элементы, и здесь они тоже разные */
.builder-source .builder-value,
.builder-select .builder-value { color: var(--gold); }

.builder-check .builder-value { color: var(--text-2); }

.builder-said .builder-value { font-family: Georgia, serif; font-style: italic; }
.builder-ok .builder-value { color: var(--gold); }

.builder-body.is-done { background: var(--gold-soft); }

.builder-note {
    max-width: 760px;
    margin-top: 26px;
    color: var(--text-2);
    font-size: 15px;
    line-height: 1.65;
}

.builder-note a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }


/* ===========================================================================
   Справочная: строка поиска на входе страницы.

   Страница длинная и говорит с тремя читателями сразу. Каждый приходит
   с одним вопросом, а получал полосу прокрутки. Строка отвечает на вопрос
   или уводит в нужный раздел — и заодно показывает продукт собой.
   =========================================================================== */

.ask {
    border-bottom: 1px solid var(--line);
    background:
        radial-gradient(120% 140% at 50% 0%, var(--gold-soft) 0%, transparent 62%),
        var(--bg);
}

/* Экран стал плотнее — к слогану добавились определение продукта
   и главное действие, — поэтому воздуха вокруг него нужно меньше,
   иначе первый экран перестаёт помещаться в экран */
.ask-inner {
    max-width: 780px;
    margin: 0 auto;
    padding: 56px var(--gutter) 44px;
    text-align: center;
}

.ask-label {
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 18px;
}

/* Справочная подчинена главному действию: та же строка, но подпись
   к ней не золотая заглавная, а обычная и тихая. Два золотых призыва
   рядом означали бы, что призыва нет ни одного */
.ask-quiet { margin-top: 34px; }

.ask-quiet .ask-label {
    color: var(--text-3);
    font-size: 12.5px;
    letter-spacing: normal;
    text-transform: none;
    margin-bottom: 12px;
}

/* Поле держит форму строки поиска: одна линия, крупный шрифт, ничего,
   что отвлекало бы от набора */
.ask-form {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: border-color .15s, box-shadow .15s;
}

.ask-form:focus-within {
    border-color: var(--gold-line);
    box-shadow: 0 0 0 4px var(--gold-soft);
}

.ask-icon { width: 20px; height: 20px; color: var(--text-2); flex: none; }

.ask-input {
    flex: 1;
    min-width: 0;
    padding: 14px 0;
    background: none;
    border: none;
    color: var(--text);
    font-family: inherit;
    font-size: 17px;
}

.ask-input::placeholder { color: var(--text-2); opacity: .75; }
.ask-input:focus { outline: none; }

/* Крестик очистки у type=search рисуется браузером и ломает круглую
   форму строки — убираем. Заданный вопрос остаётся в поле, но стирать
   его крестиком незачем: при фокусе он выделяется целиком, и первая
   буква следующего вопроса его заменяет (см. wireAskField в landing.js) */
.ask-input::-webkit-search-cancel-button { display: none; }

.ask-send {
    flex: none;
    padding: 12px 24px;
    background: var(--gold);
    border: none;
    border-radius: 999px;
    color: #14161b;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: filter .15s;
}

.ask-send:hover { filter: brightness(1.08); }

.ask-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

.ask-chip {
    padding: 8px 14px;
    background: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--text-2);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}

.ask-chip:hover { border-color: var(--gold-line); color: var(--text); }

.ask-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Куда приземлились после перехода из справочной: без отметки
   после долгой прокрутки непонятно, где именно ты оказался */
.section-landed {
    animation: section-land 1.6s ease-out;
}

@keyframes section-land {
    from { background-color: var(--gold-soft); }
    to { background-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .section-landed { animation: none; }
}

@media (max-width: 640px) {
    .ask-inner { padding: 48px var(--gutter) 36px; }
    .ask-form { padding-left: 14px; }
    .ask-input { font-size: 16px; }
    .ask-send { padding: 12px 16px; }
}

/* На узком экране подпись кнопки съедает само поле: остаётся стрелка,
   как в форме чата — жест тот же, места занимает втрое меньше */
.ask-send-icon { display: none; }

@media (max-width: 560px) {
    .ask-send-text { display: none; }
    .ask-send-icon { display: inline; font-size: 18px; line-height: 1; }
    .ask-send { padding: 12px 18px; }
}

/* ===========================================================================
   Верхнее меню с выпадающими списками.

   Разделов одиннадцать, и лентой в строку они однажды уже не поместились —
   ради этого меню и уехало вбок. Но сбоку оно стояло всегда и занимало
   седьмую часть экрана ради того, чем пользуются раз в сеанс.

   Группы снимают оба ограничения: в строке четыре слова, под каждым —
   свои разделы. Полный список остался в боковом меню, теперь закрытом.
   =========================================================================== */

.topnav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: none;
}

.topnav-item { position: relative; }

.topnav-btn {
    padding: 8px 12px;
    background: none;
    border: none;
    border-radius: 8px;
    color: var(--text-2);
    font-family: inherit;
    font-size: 13.5px;
    cursor: pointer;
    transition: color .14s ease, background .14s ease;
}

.topnav-btn::after {
    content: "";
    display: inline-block;
    width: 5px; height: 5px;
    margin-left: 7px;
    vertical-align: 2px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: .55;
    transition: transform .16s ease;
}

.topnav-btn:hover { color: var(--text); background: var(--surface); }

.topnav-item.open .topnav-btn { color: var(--gold); background: var(--gold-soft); }
.topnav-item.open .topnav-btn::after { transform: rotate(-135deg); }

/* Список появляется поверх содержимого, а не раздвигает шапку:
   иначе страница дёргалась бы при каждом наведении */
.topnav-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    min-width: 208px;
    display: none;
    flex-direction: column;
    padding: 6px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}

.topnav-item.open .topnav-menu { display: flex; }

.topnav-menu a {
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--text-2);
    font-size: 13.5px;
    text-decoration: none;
    white-space: nowrap;
    transition: color .14s ease, background .14s ease;
}

.topnav-menu a:hover { color: var(--text); background: var(--surface); }

.topnav-sep {
    height: 1px;
    margin: 5px 8px;
    background: var(--line);
}

/*
    На узком экране выпадающих списков нет: четыре слова с подписями
    не помещаются рядом с бургером и названием раздела, а весь тот же
    перечень лежит в боковом меню, до которого отсюда одно нажатие.
*/
@media (max-width: 900px) {
    .topnav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .topnav-btn::after { transition: none; }
}

/* ===========================================================================
   Первый экран: опознание, фон-анимация, ответ под строкой.
   =========================================================================== */

/* Фон рисуется под содержимым и событий не ловит: это картинка,
   а не элемент управления */
.ask { position: relative; overflow: hidden; }

.ask-scene {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .85;
}

.ask-inner { position: relative; z-index: 1; }

/* ---------- Кто мы ---------- */

.ask-id {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}

.ask-id-mark { color: var(--gold); display: flex; }

.ask-id-name {
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--text);
}

.ask-id-kind {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-2);
    padding-top: 3px;
}

.ask-title {
    font-size: clamp(28px, 4.4vw, 46px);
    line-height: 1.1;
    letter-spacing: -.025em;
    margin: 0 0 14px;
    text-wrap: balance;
}

.ask-title em { font-style: normal; color: var(--gold); }

.ask-lead {
    max-width: 620px;
    margin: 0 auto 12px;
    color: var(--text-2);
    font-size: 16px;
    line-height: 1.55;
}

/*
 * Кому это ставят — списком, а не прилагательным.
 *
 * «Для любого сайта» не значит ничего: любой сайт — это ничей сайт.
 * Владелец медцентра узнаёт себя только увидев слово «медцентр»,
 * и одна эта строка решает, читает ли он дальше.
 */
.ask-audience {
    max-width: 560px;
    margin: 0 auto 26px;
    color: var(--text-3);
    font-size: 14px;
    line-height: 1.5;
}

/* ===========================================================================
   Главное действие: импорт сайта.

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

.import { margin: 0 auto; max-width: 640px; }

.import-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 12px;
}

.import-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 6px 18px;
    background: var(--surface);
    /* Рамка золотая, в отличие от строки справочной: это не поле ввода
       среди прочих, а то самое место, ради которого страница написана */
    border: 1px solid var(--gold-line);
    border-radius: 999px;
    transition: border-color .15s, box-shadow .15s;
}

.import-row:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 4px var(--gold-soft);
}

.import-input {
    flex: 1;
    min-width: 0;
    padding: 14px 0;
    background: none;
    border: none;
    color: var(--text);
    font-family: inherit;
    font-size: 17px;
}

.import-input::placeholder { color: var(--text-2); opacity: .7; }
.import-input:focus { outline: none; }

.import-go {
    flex: none;
    padding: 13px 26px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--gold), var(--gold-2));
    color: #14161b;
    font-family: inherit;
    font-size: 15px;
    font-weight: 650;
    cursor: pointer;
    transition: filter .15s;
}

.import-go:hover { filter: brightness(1.08); }

.import-note {
    margin-top: 12px;
    color: var(--text-3);
    font-size: 13.5px;
    line-height: 1.55;
}

.import-error {
    margin-top: 10px;
    color: #e0725f;
    font-size: 13.5px;
}

/*
 * Прочие призывы: строка обычного текста со ссылками.
 *
 * Кнопками они спорили с главной; ссылками — дополняют её. Разница
 * не в вежливости, а в том, что глаз находит на первом экране ровно
 * одно действие, а не пять равных.
 */
.ask-secondary {
    margin-top: 22px;
    color: var(--text-3);
    font-size: 14px;
    line-height: 1.7;
}

.ask-secondary a,
.ask-secondary .linklike {
    color: var(--text-2);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--gold-line);
}

.ask-secondary a:hover,
.ask-secondary .linklike:hover { color: var(--gold); }

/* Кнопка, выглядящая ссылкой: заявку открывает скрипт, и делать
   ради этого ссылку в никуда нельзя — она попадёт в поисковую выдачу
   и в контекстное меню «открыть в новой вкладке» */
.linklike {
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    cursor: pointer;
}

@media (max-width: 560px) {
    /* На узкой ширине поле и кнопка в одну строку оставляют полю
       треть места: «https://ваш-са…» не даёт ни проверить набранное,
       ни понять, что вообще ждут */
    .import-row {
        flex-direction: column;
        align-items: stretch;
        border-radius: 16px;
        padding: 10px;
    }

    .import-input { padding: 10px 8px; }
    .import-go { width: 100%; }
}

/* ---------- Ответ под строкой ---------- */

.ask-answer {
    position: relative;
    max-width: 640px;
    margin: 22px auto 0;
    padding: 18px 40px 18px 20px;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
}

.ask-answer-close {
    position: absolute;
    top: 10px; right: 12px;
    width: 26px; height: 26px;
    background: none;
    border: none;
    color: var(--text-2);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
}

.ask-answer-close:hover { color: var(--text); background: var(--bg-2); }

.ask-answer-q {
    margin: 0 0 8px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold);
}

.ask-answer-body {
    color: var(--text);
    font-size: 15px;
    line-height: 1.6;
}

.ask-answer-body.waiting { color: var(--text-2); }

.ask-answer-source {
    display: block;
    margin-top: 10px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-2);
}

.ask-answer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.ask-answer-actions:empty { margin-top: 0; }

.btn-inline { padding: 9px 16px; font-size: 14px; }

/* ---------- Строка поиска в шапке ---------- */

.topbar-ask {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    max-width: 420px;
    margin-left: auto;
    padding: 7px 14px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    transition: border-color .15s;
}

.topbar-ask:focus-within { border-color: var(--gold-line); }
.topbar-ask svg { width: 15px; height: 15px; color: var(--text-2); flex: none; }

.topbar-ask input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
}

.topbar-ask input:focus { outline: none; }
.topbar-ask input::-webkit-search-cancel-button { display: none; }

@media (max-width: 720px) {
    .topbar-ask { max-width: none; }
    .ask-id-kind { display: none; }
}

/* ===========================================================================
   Отметка ИИ и загрузка.

   Один знак на всё: искра стоит в отметке, в заголовке справочной и в
   индикаторе загрузки. Пока она оживает — видно, кто именно сейчас думает,
   и это дешевле любой надписи «обрабатываю запрос».
   =========================================================================== */

.ai-spark {
    width: 13px;
    height: 13px;
    flex: none;
    fill: currentColor;
}

.ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 4px;
    padding: 3px 9px 3px 7px;
    border: 1px solid var(--gold-line);
    border-radius: 999px;
    background: var(--gold-soft);
    color: var(--gold);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .14em;
    line-height: 1;
    cursor: default;
}

.ai-badge .ai-spark { animation: ai-breathe 3.4s ease-in-out infinite; }

.ai-badge-sm {
    margin-left: 8px;
    padding: 2px 7px 2px 5px;
    font-size: 9px;
    vertical-align: middle;
}

/* Дыхание, а не мигание: знак живой, но взгляд к себе не тянет */
@keyframes ai-breathe {
    0%, 100% { opacity: .55; transform: scale(.92); }
    50%      { opacity: 1;   transform: scale(1.06); }
}

/* ---------- Загрузка ---------- */

.ai-loader {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0 2px;
    color: var(--gold);
}

.ai-loader .ai-spark {
    width: 15px; height: 15px;
    animation: ai-turn 1.4s ease-in-out infinite;
}

@keyframes ai-turn {
    0%   { transform: rotate(0deg) scale(.9); opacity: .6; }
    50%  { transform: rotate(180deg) scale(1.1); opacity: 1; }
    100% { transform: rotate(360deg) scale(.9); opacity: .6; }
}

.ai-loader-dots { display: inline-flex; gap: 5px; }

.ai-loader-dots i {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: .3;
    animation: ai-dot 1.2s ease-in-out infinite;
}

.ai-loader-dots i:nth-child(2) { animation-delay: .16s; }
.ai-loader-dots i:nth-child(3) { animation-delay: .32s; }

@keyframes ai-dot {
    0%, 100% { opacity: .25; transform: translateY(0); }
    40%      { opacity: .95; transform: translateY(-3px); }
}

/* Системный запрет на анимацию сильнее любого замысла: знак остаётся,
   движение уходит */
@media (prefers-reduced-motion: reduce) {
    .ai-badge .ai-spark,
    .ai-loader .ai-spark,
    .ai-loader-dots i { animation: none; }
    .ai-loader-dots i { opacity: .6; }
}

/* ═══════════════════ Голос в строке поиска ═══════════════════ */

/*
   Кнопка микрофона внутри круглой строки.

   Тише кнопки «Спросить» намеренно: набор остаётся основным способом,
   голос — вторым. Две одинаково яркие кнопки рядом заставляли бы
   выбирать там, где выбора не требуется.
*/
.ask-mic {
    flex: none;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--text-2);
    cursor: pointer;
    transition: color .15s, background .15s, border-color .15s;
}

.ask-mic svg { width: 20px; height: 20px; }

.ask-mic:hover {
    color: var(--text);
    background: var(--gold-soft);
    border-color: var(--gold-line);
}

/*
   Идёт запись: кольцо вокруг кнопки растёт по громкости.

   Не украшение. Без обратной связи человек не отличает «микрофон
   не слышит» от «система думает» и говорит в пустоту, пока запись
   не оборвётся по таймауту.
*/
.ask-mic.recording {
    color: #14161b;
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 0 0 calc(3px + var(--mic-level, 0) * 10px) var(--gold-soft);
}

/*
   Запись кончилась, распознанного текста ещё нет.

   Между ними проходят секунды, а на первом вызове после старта —
   до полминуты, пока движок прогревает модель. Погасшая кнопка на это
   время читается как «ничего не произошло», и человек жмёт её снова,
   обрывая то, что почти пришло. Кольца нет: громкости больше не меряем.
*/
.ask-mic.busy {
    color: var(--gold);
    border-color: var(--gold-line);
}

/*
   Состояние голоса в подсказке пустого поля: «говорите», «слушаю»,
   «распознавание», отказ микрофона. Обычная подсказка блёклая, как
   и положено подсказке, — состояние блёклым быть не должно: на него
   человек смотрит в упор, решая, услышали его или нет.
*/
.ask-form.is-voice .ask-input::placeholder {
    color: var(--text);
    opacity: 1;
}

/* Заглушка вернёт не ваши слова — и это должно быть видно до нажатия */
.ask-mic.is-mock { opacity: .55; }

@media (prefers-reduced-motion: reduce) {
    .ask-mic { transition: none; }
    .ask-mic.recording { box-shadow: 0 0 0 4px var(--gold-soft); }
}

/* На узком экране «Спросить» ужимается до стрелки — микрофону место остаётся */
@media (max-width: 560px) {
    .ask-mic { width: 36px; height: 36px; }
    .ask-mic svg { width: 18px; height: 18px; }
}

/* ═══════════════════ Импорт сайта в шапке ═══════════════════ */

/*
   Заметнее «Живого демо» намеренно: демонстрация показывает, что продукт
   умеет, а импорт — то, ради чего его берут. Заливка, а не рамка,
   потому что это единственное действие в шапке, ведущее к результату.
*/
.topbar-import {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--gold-line);
    border-radius: 8px;
    background: var(--gold-soft);
    color: var(--gold);
    font-size: 13.5px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}

.topbar-import svg { width: 16px; height: 16px; flex: none; }

.topbar-import:hover {
    background: var(--gold);
    border-color: var(--gold);
    color: #14161b;
}

/*
   На узком экране остаётся значок без подписи, но сама ссылка остаётся.
   Прятать её целиком нельзя: на телефоне сайт открывают чаще, а импорт —
   ровно то, зачем сюда приходят.
*/
@media (max-width: 900px) {
    .topbar-import span { display: none; }
    .topbar-import { padding: 8px 10px; }
}

/* Личный кабинет в шапке: рамка золотом, чтобы читалась как вход «к своему»,
   но не соперничала с залитым импортом — залитая кнопка в шапке одна */
.topbar-cabinet {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--gold-line);
    border-radius: 8px;
    color: var(--gold);
    font-size: 13.5px;
    text-decoration: none;
    white-space: nowrap;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}

.topbar-cabinet svg { width: 16px; height: 16px; flex: none; }

.topbar-cabinet:hover {
    background: var(--gold-soft);
    border-color: var(--gold);
}

/* На узком экране — значок без подписи, как у импорта: сама ссылка
   остаётся, вернувшемуся с телефона она нужна не меньше */
@media (max-width: 900px) {
    .topbar-cabinet span { display: none; }
    .topbar-cabinet { padding: 8px 10px; }
}

/* ═══════════════════ Выделенный раздел ═══════════════════ */

/*
   Оформление ровно для одного раздела — «Было и стало».

   Он отвечает на вопрос, ради которого страницу и открывают: что,
   собственно, меняется. Прочие разделы объясняют устройство, цену
   и безопасность тому, кто суть уже понял. Набранная одинаково с ними,
   эта секция пролистывалась вместе со всеми.

   Полоса на всю ширину, а не рамка внутри колонки: рамка читается как
   врезка, то есть как отступление от главного, — здесь всё наоборот.
*/
.section-featured {
    position: relative;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    border-bottom: none;
    background:
        radial-gradient(120% 100% at 50% 0%,
            var(--gold-soft) 0%, transparent 62%),
        var(--surface);
}

/* Тонкая золотая черта сверху — граница, по которой глаз и цепляется */
.section-featured::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent, var(--gold) 22%, var(--gold) 78%, transparent);
}

/* Содержимое остаётся в общей колонке: шире неё текст читать тяжело */
.section-featured > * {
    max-width: var(--maxw);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

/* Номер раздела здесь не служебная подпись, а метка «читайте это» */
.section-featured .section-num {
    color: var(--gold);
    opacity: 1;
}

.section-featured h2 { color: var(--text); }

/*
   Панель «стало» выделена и внутри сравнения: без этого обе половины
   весят одинаково, и читатель сам решает, какая из них ответ.
*/
.section-featured .pane-after {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold-line), 0 18px 48px -28px var(--gold);
}

@media (prefers-reduced-motion: reduce) {
    .section-featured { background: var(--surface); }
}


/* ===========================================================================
   Телефон.

   Правила, которые делают сайт похожим на приложение, а не на уменьшенный
   ноутбук: поля под вырез и «бровь» экрана (--safe-*, из css/touch.css),
   цели под палец не меньше 42 пикселей, панели снизу во всю ширину,
   меню, под которым страница стоит.
   =========================================================================== */

/* Кнопка демо в боковом меню: первое, что видно, когда меню открыли */
.side-demo {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--gold), var(--gold-2));
    color: #14171d;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(232, 182, 76, .22);
    transition: filter .14s ease, transform .14s ease;
}

.side-demo:hover { filter: brightness(1.06); transform: translateY(-1px); }
.side-demo svg { width: 34px; height: 34px; flex: none; }
.side-demo b { display: block; font-size: 15px; font-weight: 650; line-height: 1.2; }
.side-demo small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.3; opacity: .78; }

/* Крестик в углу меню: на телефоне бургер шапки под меню и недоступен */
.side-close {
    position: absolute;
    top: calc(14px + var(--safe-top, 0px));
    right: 10px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: none;
    color: var(--text-2);
    cursor: pointer;
}

.side-close svg { width: 18px; height: 18px; }
.side-close:hover { color: var(--text); border-color: var(--gold-line); }

/* Меню: не шире экрана, с полями под вырезы; страница под ним стоит */
.side {
    width: min(var(--side), 86vw);
    padding-top: calc(20px + var(--safe-top, 0px));
    padding-bottom: calc(16px + var(--safe-bottom, 0px));
    padding-left: calc(14px + var(--safe-left, 0px));
}

body.side-open { overflow: hidden; }

/* Шапка: под вырезом экрана и с целями под палец */
.topbar {
    padding-top: calc(11px + var(--safe-top, 0px));
    padding-left: calc(var(--gutter) + var(--safe-left, 0px));
    padding-right: calc(var(--gutter) + var(--safe-right, 0px));
}

@media (pointer: coarse) {
    .burger, .topbar-import, .topbar-cabinet, .topbar-demo { min-height: 42px; }
    .side-nav a { min-height: 42px; }
    .side-cabinet { padding-top: 13px; padding-bottom: 13px; }
    .ask-chip, .chip { min-height: 38px; }
}

@media (max-width: 600px) {
    :root { --gutter: 20px; }

    .topbar { gap: 8px; }
    .topbar-title { font-size: 13.5px; }

    .ask-inner { padding: 34px var(--gutter) 30px; }
    .ask-lead { font-size: 15.5px; }
    .section { padding: 48px var(--gutter); }
    .section h2 { font-size: 26px; }
    .section-lead { font-size: 16.5px; }

    /* Телефоны сравнения: карточка уже, аппарат помещается целиком */
    .pane { padding: 18px 14px 16px; gap: 16px; }

    /* Код примеров переносится, а не уезжает за край */
    .excerpt { padding: 16px; }
    .excerpt code { white-space: pre-wrap; word-break: break-word; }

    /* Уведомление о cookie: одна компактная строка у нижнего края,
       а не карточка на треть экрана */
    .cookie-bar {
        left: 10px;
        right: 10px;
        bottom: calc(10px + var(--safe-bottom, 0px));
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 12px;
    }

    .cookie-bar strong { font-size: 13px; margin-bottom: 1px; }
    .cookie-bar p { font-size: 11.5px; line-height: 1.35; }
    .cookie-more { display: none; }
    .btn-cookie { padding: 9px 13px; font-size: 13px; }

    /* Справочная: кнопка ниже и правее, а пока виден баннер cookie —
       над ним, чтобы одно не закрывало другое */
    .chat-toggle {
        right: calc(14px + var(--safe-right, 0px));
        bottom: calc(14px + var(--safe-bottom, 0px));
        padding: 13px 20px;
        font-size: 14.5px;
    }

    body:has(.cookie-bar.shown:not(.closing)) .chat-toggle {
        bottom: calc(100px + var(--safe-bottom, 0px));
    }

    /* Окно справочной — лист снизу во всю ширину */
    .chat-panel {
        left: 0;
        right: 0;
        bottom: 0;
        width: auto;
        max-height: calc(100dvh - 48px);
        border-radius: 18px 18px 0 0;
        border-bottom: none;
        padding-bottom: var(--safe-bottom, 0px);
    }

    .footer-inner { padding: 32px var(--gutter) calc(40px + var(--safe-bottom, 0px)); }

    /* Презентация: подсказка про клавиши — для ноутбука */
    .dk-page-note { display: none; }
}

@media (max-width: 400px) { .phone { zoom: .88; } }
@media (max-width: 350px) { .phone { zoom: .78; } }

/* Презентация на телефоне: слайд на ширину телефона нечитаем, поэтому
   первой кнопкой — показ во весь экран; сцена там ложится поперёк */
.dk-mobile-cta {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 12px;
    padding: 14px 18px;
    border: none;
    border-radius: 12px;
    background: var(--gold);
    color: #1b1406;
    font: inherit;
    font-size: 15px;
    font-weight: 650;
    cursor: pointer;
}

.dk-mobile-cta svg { width: 20px; height: 20px; }

@media (max-width: 600px) {
    .dk-mobile-cta { display: flex; }
    .dk-downloads { width: 100%; }
    .dk-dl { flex: 1 1 auto; justify-content: center; }
}

/* Кнопка повторного запроса доступа к микрофону */
.mic-retry { margin: 6px 0 0 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.mic-retry:disabled { opacity: .6; cursor: default; }