/* Секретарус: стили лендинга, юридических страниц, 404 и tools/visuals.html.
   Порядок: шрифты → токены → база → общие элементы (скриншоты на подложке, выноски) → секции
   сверху вниз → окно заявки → служебные страницы → адаптив (1100, 900, 760, 420, 380) → движение.
   Скругления, три ступени и пилюля:
     --r-control 10px  всё, что нажимают или заполняют: кнопки, вкладки, переключатели, поля,
                       вопросы-кнопки, свёрнутый материал, подписи выносок;
     --r-card 12px     карточки: скриншот, материал, карточка в схеме;
     --r-panel 16px    панели: подложки снимков, демо, итог пилота, окно заявки;
     999px             метки-теги и статусы.
   Вкладки-подчёркивания (контроль качества, кадры админки) без фона, скругления им не нужны.
   Окно консультанта повторяет настоящий виджет со своими скруглениями (18px и 14px у карточки).
   Поверхности: белая страница, тон --tint для секций и подложек, белые карточки на тоне; тени
   только у «окон» (виджет, снимок, окно заявки), у карточек рамка.
   Акцент один: красный; жёлтый только подсветка источника, зелёный/красный/жёлтый у статусов.
   Ритм секций: первая половина страницы 96px, со «Исследований» 64px (--section-b), ниже 760px
   64px и 44px. Подписи не мельче 14px. */

@font-face{font-family:Fira;src:url('fonts/fira.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Onest;src:url('fonts/onest.woff2') format('woff2');font-weight:400 600;font-display:swap}

:root{
  --paper:#ffffff;
  --tint:#f4f2eb;
  --ink:#262720;
  --muted:#5b5c52;
  --line:#d6d4ca;
  --field:#8a8b80;
  --red:#c63a21;
  --red-dark:#a8311c;
  --red-soft:#fbe9e5;
  /* Цифра сноски на розовой подложке: 7.2:1, с запасом к 4.5. */
  --cite:#8f2816;
  --yellow:#efc84a;
  --yellow-soft:#fbf1cc;
  --green:#3d673c;
  /* Окно консультанта: цвета как у виджета продукта, фирменный цвет установки здесь красный. */
  --cw-surface:#f2f2ef;
  --cw-border:#e3e3de;
  /* Цвет бренда в окне консультанта: вкладка «Бытовая техника» подменяет его на другой бренд. */
  --cw-brand:var(--red);
  --cw-brand-soft:var(--red-soft);
  --cw-brand-ink:var(--cite);
  --cw-shadow:0 18px 50px rgba(38,39,32,.16),0 2px 8px rgba(38,39,32,.07);
  --shot-shadow:0 24px 60px -28px rgba(38,39,32,.45),0 2px 6px rgba(38,39,32,.06);
  --section:96px;
  --section-b:64px;
  --r-panel:16px;
  --r-card:12px;
  --r-control:10px;
  --gutter:56px;
  --maxw:1240px;
  --head:72px;
}

/* ---------- База ---------- */
*,*::before,*::after{box-sizing:border-box}
/* overflow-anchor: ответ в демо растёт вниз, и якорение прокрутки уводило страницу вслед за полем ввода. */
html{overflow-anchor:none;scroll-behavior:smooth;scroll-padding-top:calc(var(--head) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Onest,system-ui,sans-serif;font-size:17px;line-height:1.55}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
h1,h2,h3{font-family:Fira,'Arial Narrow',sans-serif;font-weight:600;letter-spacing:0;text-wrap:balance}
h1{font-size:clamp(40px,4.7vw,68px);line-height:1.02}
h2{font-size:clamp(34px,3.6vw,52px);line-height:1.08;max-width:24ch}
h3{font-size:24px;line-height:1.2}
p{text-wrap:pretty}
img{max-width:100%}
a{color:inherit}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a,button,summary{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
::selection{background:var(--yellow);color:var(--ink)}
.wrap{width:min(var(--maxw),100% - 2 * var(--gutter));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;z-index:20;background:var(--ink);color:var(--paper);padding:10px 16px}
.skip:focus{top:12px}
.kicker{font-size:14px;color:var(--muted);margin-bottom:14px} /* только tools/visuals.html */
.text-link{font-size:16px;border-radius:4px;text-decoration:underline;text-underline-offset:5px;display:inline-flex;align-items:center;min-height:44px}
.text-link:hover{color:var(--red)}

/* Кнопки: высота задана min-height, отклик на нажатие сдвигом на 1px. */
.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:52px;padding:0 24px;border:0;border-radius:var(--r-control);background:var(--red);color:#fff;font-size:16px;font-weight:500;white-space:nowrap;transition:background-color .2s}
.btn:hover{background:var(--red-dark)}
.btn span{font-size:22px;font-weight:400;line-height:1}
.btn[disabled]{opacity:.7;cursor:progress}
.btn-block{width:100%}
.btn-outline{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border:1px solid var(--ink);border-radius:var(--r-control);background:none;font-size:16px}
.btn-outline:hover{background:var(--ink);color:var(--paper)}
.btn:active,.btn-outline:active,.nav-cta:active,.ask-list button:active,.chat-action:active,.cw-chip:active,.burger:active{transform:translateY(1px)}

/* ---------- Шапка ---------- */
.mast{position:sticky;top:0;z-index:10;background:var(--paper);border-bottom:1px solid var(--line)}
.mast-inner{position:relative;height:calc(var(--head) - 1px);display:flex;align-items:center;justify-content:space-between;gap:24px}
.wordmark{font-family:Fira,sans-serif;font-weight:600;font-size:30px;line-height:1;padding:11px 0;text-decoration:none;white-space:nowrap}
.wordmark::after{content:'.';color:var(--red)}
.nav{display:flex;gap:28px;font-size:15px;white-space:nowrap}
.nav a{text-decoration:none;padding:12px 0}
.nav a:hover{text-decoration:underline;text-underline-offset:5px}
.mast-actions{display:flex;align-items:center;gap:8px}
.nav-cta{min-height:44px;padding:0 16px;border:1px solid var(--ink);border-radius:var(--r-control);background:none;font-size:15px;white-space:nowrap;transition:background-color .2s,color .2s,opacity .2s}
/* На телефоне, пока видна нижняя плашка с той же кнопкой, в шапке она не дублируется. */
body.cta-bar-on .nav-cta{opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s}
.nav-cta:hover{background:var(--ink);color:var(--paper)}
.cta-short{display:none}
.burger{display:none;position:relative;width:44px;height:44px;border:1px solid var(--ink);border-radius:var(--r-control);background:none;padding:0}
.burger span,.burger span::before,.burger span::after{position:absolute;left:12px;width:18px;height:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.burger span{top:20px}
.burger span::before,.burger span::after{content:'';left:0}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded=true] span{background:transparent}
.burger[aria-expanded=true] span::before{transform:translateY(6px) rotate(45deg);background:var(--ink)}
.burger[aria-expanded=true] span::after{transform:translateY(-6px) rotate(-45deg);background:var(--ink)}

/* ---------- Окно консультанта: общий вид для первого экрана и демо ----------
   Повторяет виджет продукта (widget/src/styles.ts): скруглённое окно, серые пузыри бота,
   пузырь клиента цветом бренда, сноска-«таблетка», карточка товара, список источников. */
.cw{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--cw-border);border-radius:18px;box-shadow:var(--cw-shadow);overflow:hidden;min-width:0;text-align:left}
.cw-head{display:flex;align-items:center;gap:12px;padding:12px 14px 12px 16px;border-bottom:1px solid var(--cw-border)}
.cw-avatar{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:50%;background:var(--cw-brand);transition:background-color .35s;color:#fff;font-weight:600;font-size:16px}
.cw-name{flex:1;min-width:0;line-height:1.3}
.cw-name p:first-child{font-size:15px;font-weight:600}
.cw-name p:last-child{font-size:14px;color:var(--muted)}
.cw-icons{display:flex;gap:14px;color:var(--muted)}
.cw-icons svg{fill:currentColor;stroke:currentColor}
.cw-icons svg:last-child{fill:none}
.cw-body{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px}
.cw-user{align-self:flex-end;max-width:85%;background:var(--cw-brand);transition:background-color .35s;color:#fff;padding:9px 14px;border-radius:18px 18px 6px 18px;font-size:15px;line-height:1.45}
.cw-bot{max-width:94%;background:var(--cw-surface);padding:10px 14px;border-radius:6px 18px 18px 18px;font-size:15px;line-height:1.5}
.cw-bot>*+*{margin-top:8px}
.nw{white-space:nowrap}
.cite{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;margin-left:4px;border-radius:10px;background:var(--cw-brand-soft);color:var(--cw-brand-ink);font-size:14px;font-weight:600;line-height:1;vertical-align:1px}
.cw-sources{font-size:14px;color:var(--muted);width:100%}
.cw-sources-title{display:flex;align-items:center;gap:6px;font-weight:500}
.cw-sources svg{stroke:currentColor}
.cw-source{display:flex;align-items:baseline;gap:8px;margin-top:4px;color:var(--ink)}
.cw-source .cite{margin:0;flex:none}
/* Поле ввода как в виджете: слева кнопка фото, справа микрофон и отправка (widget/src/index.ts). */
.cw-input{display:flex;align-items:center;gap:2px;margin:0 12px 12px;padding:5px 5px 5px 6px;border:1px solid var(--field);border-radius:22px;font-size:15px;color:var(--muted)}
.cw-field{flex:1;min-width:0;padding:0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cw-field.typed{color:var(--ink)}
.cw-ibtn{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;color:var(--muted)}
.cw-ibtn svg{stroke:currentColor}
.cw-send{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%;background:var(--cw-brand);transition:background-color .35s}
.cw-send svg{stroke:#fff}
.pcard{border:1px solid var(--cw-border);border-radius:14px;background:var(--paper);overflow:hidden;font-size:14px}
.pcard img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.pcard>div{padding:10px}
.pcard-row{display:flex;align-items:stretch;width:94%}
.pcard-row img{width:96px;flex:none;border-right:1px solid var(--cw-border)}
.pcard-row>div{flex:1;display:flex;flex-direction:column;gap:4px;justify-content:center}
.pname{font-size:14px;font-weight:500;line-height:1.35}
.pprice{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}
.pprice b{font-size:15px;font-weight:600}
.pstock{font-size:14px;color:var(--green)}
.pshop{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;height:32px;padding:0 14px;margin-top:4px;border-radius:10px;background:var(--cw-brand);color:#fff;font-size:14px;font-weight:500}
.cw-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:94%}
.cw-cards .pcard img{aspect-ratio:16/9;border-bottom:1px solid var(--cw-border)}
.cw-cards .pcard>div{display:flex;flex-direction:column;gap:2px}
.card-meta{font-size:14px;color:var(--muted)}
/* Две карточки для сравнения: миниатюра слева, чтобы сцена была не выше остальных. */
.cw-cards-row .pcard{display:flex;align-items:stretch}
.cw-cards-row .pcard img{width:64px;flex:none;aspect-ratio:auto;object-fit:cover;border-bottom:0;border-right:1px solid var(--cw-border)}
.cw-cards-row .pcard>div{padding:8px 10px;justify-content:center}
.cw-chips{display:flex;flex-wrap:wrap;gap:8px;width:100%;margin-top:4px}
.cw-chips p{width:100%;font-size:14px;color:var(--muted)}
.cw-chip{min-height:40px;padding:6px 14px;border:1px solid var(--cw-border);border-radius:12px;background:var(--paper);font-size:14px;text-align:left;transition:border-color .2s}
.cw-chip:hover{border-color:var(--ink)}
.cw-typing{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.cw-dots{display:inline-flex;gap:4px;padding:12px 14px;border-radius:6px 18px 18px 18px;background:var(--cw-surface)}
.cw-dots i{width:6px;height:6px;border-radius:50%;background:var(--muted);opacity:.5}
.chat-action{min-height:44px;padding:0 16px;border:0;border-radius:10px;background:var(--cw-brand);color:#fff;font-size:15px}
.chat-action:hover{background:var(--red-dark)}
.mini-form{display:grid;gap:10px;width:94%}
.mini-title{font-weight:500}
.mini-form label{display:grid;gap:4px;font-size:14px;color:var(--muted)}
.mini-form input[readonly]{min-height:44px;border:1px solid var(--cw-border);border-radius:10px;background:var(--paper);padding:0 12px;font-size:15px;color:var(--ink)}
.mini-form .mini-check{display:flex;align-items:center;gap:8px;color:var(--ink)}
.mini-check input{width:18px;height:18px;accent-color:var(--cw-brand)}
/* Другой бренд в том же консультанте (white-label): название, буква, цвет и подсказка поля
   приходят из настроек установки, здесь их подменяет script.js по вкладке. */
.demo-cw[data-brand=tech]{--cw-brand:#1f6a7a;--cw-brand-soft:#e1eff2;--cw-brand-ink:#154b57}
.cw-field,.cw-name p:first-child{transition:opacity .2s}
.cw-swap .cw-field,.cw-swap .cw-name p:first-child,.cw-swap .cw-avatar{opacity:0}

/* Скриншот админки в «окне»: без браузерной рамки, тень и мягкий угол. */
.shot{margin:0;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:#f8f9fa;box-shadow:var(--shot-shadow);min-width:0}
.shot picture,.shot img{display:block;width:100%;height:auto}
/* Подложка под скриншот: тон сайта вокруг «окна» админки, чтобы снимок был частью страницы, а не
   вставкой. На тонированной секции подложка белая. */
.stage{background:var(--tint);border-radius:var(--r-panel);padding:clamp(16px,2.4vw,32px);min-width:0}
/* Выноски: красная точка на ключевом месте снимка и подпись. Координаты в процентах от кадра
   (tools/make_shots.py печатает их при пересъёмке), у мобильного кадра свои (--mx, --my). */
.shot-marked{position:relative;overflow:visible}
.shot-marked picture{border-radius:11px;overflow:hidden}
.callout{position:absolute;left:var(--x);top:var(--y);width:0;height:0;z-index:1;pointer-events:none}
.callout>i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(198,58,33,.22),0 0 0 1px #fff}
.callout>span{position:absolute;top:0;transform:translateY(-50%);white-space:nowrap;background:var(--ink);color:#fff;font-size:14px;font-weight:500;line-height:1.3;padding:5px 10px;border-radius:var(--r-control);box-shadow:0 6px 16px -6px rgba(38,39,32,.5)}
.callout[data-side=right]>span{left:16px}
.callout[data-side=left]>span{right:16px}
.callout[data-side=below]>span{top:16px;left:0;transform:translateX(-50%)}
/* Над точкой: подпись выходит за верх снимка на подложку и не закрывает строки кадра. */
.callout[data-side=above]>span{top:auto;bottom:18px;left:0;transform:translateX(-50%)}
/* Выноска с рамкой: точка на краю рамки вокруг слова (ring задаёт саму рамку). */
.callout-ring>i{display:none}
/* Подпись выноски короче на телефоне, где кадр уже: .cl-wide только шире 760px, .cl-narrow только уже. */
.cl-narrow{display:none}
/* Кольцо вокруг слова на снимке (60 мл и 50 мл в кадре расхождения): координаты и размер в
   процентах от кадра, у мобильного кадра свои. Текст под кольцом не закрывается. */
.ring{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border:2px solid var(--red);border-radius:8px;box-shadow:0 0 0 3px rgba(198,58,33,.16);pointer-events:none}
/* Вырезка из середины экрана: верх и низ кадра мягко уходят в фон снимка. */
.shot-excerpt picture{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%)}
.shot-excerpt{background:#fff}

/* ---------- Первый экран ---------- */
.hero{display:grid;grid-template-columns:1fr minmax(0,560px);gap:40px;align-items:center;padding:56px 0 48px}
.hero h1{max-width:13em}
.intro{font-size:19px;line-height:1.55;max-width:34em;margin:24px 0 32px}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.hero-visual{position:relative;min-width:0;padding-left:130px}
.hero-cw{position:relative;z-index:1}
.hero-cw .cw-body{gap:10px;padding-bottom:12px}
/* Птица отражена и указкой показывает на окно консультанта. */
.hero-bird{position:absolute;left:-70px;bottom:-8px;z-index:2;width:210px;height:auto;transform:scaleX(-1);pointer-events:none}
/* Вопрос и ответ стоят в разметке и видны с первого кадра. Появляются только сноска и карточка
   товара (раздел «Движение» внизу файла, всего 0,4 с), место под них занято, окно не меняет высоту. */

.ask{display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center;border-top:1px solid var(--ink);border-bottom:1px solid var(--line);padding:16px 0}
.ask>p{font-size:15px;color:var(--muted)}
.ask-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ask-list button{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;text-align:left;background:var(--tint);border:1px solid transparent;border-radius:var(--r-control);padding:10px 16px;font-size:15px;line-height:1.35;transition:border-color .2s,background-color .2s}
.ask-list button:hover{border-color:var(--ink);background:var(--paper)}
.ask-list button span{color:var(--red);font-size:18px}

/* Стрелки и счётчик под полосой с прокруткой вбок (script.js, [data-carousel]): только ниже 760px. */
.car-nav{display:none;align-items:center;justify-content:flex-end;gap:6px;margin-top:6px}
.car-count{min-width:44px;text-align:center;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.car-btn{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--paper);color:var(--ink)}
.car-btn:disabled{opacity:.35;cursor:default}
.car-btn:not(:disabled):hover{border-color:var(--ink)}

/* ---------- Секции: общий ритм ---------- */
.chapter{padding:var(--section) 0}
.head p{font-size:18px;color:var(--muted);max-width:60ch;margin-top:18px}
/* Шапки секций в трёх видах, чтобы страница не шла одним шаблоном: по центру над демо (#answer),
   широкий заголовок в одну строку над визуалом (#control, #install), заголовок слева и
   интерактив справа (#quality, #launch, вопросы). */
.head-center{text-align:center}
.head-center h2,.head-center p{margin-inline:auto}
.head-wide h2{max-width:none}

/* ---------- Демо: материал и окно консультанта ---------- */
#answer h2{max-width:26ch}
.demo-bar{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px 24px;margin:40px 0 16px}
.demo-tabs{display:flex;flex-wrap:wrap;gap:6px}
.demo-tabs button{min-height:44px;padding:0 18px;white-space:nowrap;border:1px solid var(--line);border-radius:var(--r-control);background:var(--paper);font-size:15px;transition:background-color .2s,color .2s,border-color .2s}
/* Другая отрасль отделена зазором: это не четвёртый вопрос, а другой бренд. */
.demo-tabs [data-answer=tech]{margin-left:12px;display:inline-flex;align-items:center;gap:8px}
.brand-dot{width:9px;height:9px;border-radius:50%;background:#1f6a7a;flex:none;box-shadow:0 0 0 2px #fff}
.demo-tabs button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.demo-tabs button:hover:not([aria-pressed=true]){border-color:var(--ink)}
.live-btn{min-height:44px;padding:0 14px;border:1px solid var(--red);border-radius:var(--r-control);background:none;color:var(--red);font-size:14px}
.live-btn[hidden]{display:none}
.live-btn:hover{background:var(--red);color:#fff}

/* Высота демо не зависит от вопроса: script.js меряет все сцены и ставит окну чата высоту самой
   высокой (--chat-h), поэтому страница ниже не прыгает при переключении. Пустот нет: под
   карточкой материала соседние материалы базы, у каждой сцены в чате подсказки следующего вопроса. Что не влезло (мини-форма заявки, узкий экран), прокручивается
   внутри окна. */
.answer-lab{display:grid;grid-template-columns:1fr 1.05fr;background:var(--tint);border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden}
.source-pane{display:flex;flex-direction:column;padding:22px 28px 28px;border-right:1px solid var(--line);min-width:0}
.pane-label{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:14px;margin-bottom:18px}
.pane-caption{display:flex;align-items:center;gap:10px}
.pane-caption img{width:34px;height:34px}
.published{color:var(--green)}
/* Колонка материала не выше окна чата: карточка источника по верху, список соседних материалов
   по низу. В сравнении два материала, и список там не показывается (.source-pane.is-two). */
.source-docs{display:flex;flex-direction:column}
.source-pane.is-two .doc-more{display:none}
/* Соседние материалы базы: внизу колонки, приглушённо, консультант опирался не на них. */
.doc-more{margin-top:auto;padding-top:18px;max-width:460px}
.doc-more-title{font-size:14px;color:var(--muted);margin-bottom:8px}
.doc-more li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);padding:8px 12px;border:1px dashed var(--line);border-radius:var(--r-control);background:rgba(255,255,255,.5)}
.doc-more li+li{margin-top:6px}
.doc-more li::before{content:'';width:10px;height:12px;flex:none;border:1.5px solid var(--field);border-radius:2px}
.src-toggle{display:none}
.doc-in{animation:cw-rise .32s ease-out both}
.doc{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:18px 20px;max-width:460px}
.doc+.doc{margin-top:12px}
.doc h3{font-size:21px;margin-bottom:12px;padding-right:40px}
.doc .ref{position:absolute;top:16px;right:16px;margin:0}
.doc dl{display:grid;gap:10px}
.doc dt{font-size:14px;color:var(--muted)}
.doc dd{font-size:16px}
.doc mark,.src-quote{background:var(--yellow);padding:0 3px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* Сноска ↔ материал (script.js): наведение или фокус на одном подсвечивает другое. */
.doc,.doc mark,.cite,.cw-source,.try-doc{transition:box-shadow .2s,border-color .2s,background-color .2s,transform .2s}
.doc.is-hot,.try-doc.is-hot{border-color:var(--ink);box-shadow:0 0 0 3px rgba(239,200,74,.55)}
.doc mark.is-hot{box-shadow:0 0 0 3px var(--yellow)}
.cite[data-ref]{cursor:default}
.cite.is-hot{background:var(--cw-brand);color:#fff;transform:scale(1.12)}
.cite[data-ref]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cw-source.is-hot{color:var(--cw-brand-ink)}
.doc-foot{font-size:14px;color:var(--muted);border-top:1px dashed var(--line);margin-top:14px;padding-top:12px}
.demo-cw{position:relative;margin:20px;align-self:start}
.demo-cw .cw-body{flex:none;height:var(--chat-h,auto);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.demo-measure{position:absolute;left:0;right:0;top:0;visibility:hidden;pointer-events:none}
.demo-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 24px;margin-top:14px;font-size:14px;color:var(--muted)}
.demo-own{display:inline-block;min-height:44px;padding:0;border:0;background:none;font-size:16px;color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-align:left}
.demo-own span{color:var(--red)}
.demo-own:hover{color:var(--red)}

/* ---------- Команда и диалоги: «ролик» админки и два фрагмента окна ----------
   Ролик: три снимка в одной ячейке сетки, виден один (.is-on), смена прозрачностью. Высота
   ячейки по самому высокому кадру, поэтому смена кадра ничего не сдвигает. */
.team{background:var(--tint);padding:var(--section) 0}
.team .stage{background:var(--paper)}
.team-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:56px;align-items:center}
.team .reel{margin-top:36px}
.reel-tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto;scrollbar-width:none}
.reel-tabs button{position:relative;min-height:44px;padding:0;border:0;background:none;font-size:15px;color:var(--muted);white-space:nowrap}
.reel-tabs button::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--red);transform:scaleX(0);transform-origin:left}
.reel-tabs button[aria-selected=true]{color:var(--ink);font-weight:500}
.reel-tabs button[aria-selected=true]::after{transform:none}
/* Пока ролик идёт сам, подчёркивание выбранного кадра заполняется за время показа. */
.reel.is-auto .reel-tabs button[aria-selected=true]::after{animation:reel-fill var(--reel-ms,5200ms) linear both}
.reel-tabs button:hover{color:var(--ink)}
.reel-stage{display:grid}
.reel-frame{grid-area:1/1;align-self:center;display:grid;gap:14px;opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.reel-frame[hidden]{display:grid}
.reel-frame.is-on{opacity:1;transform:none;pointer-events:auto}
.reel-frame figcaption{font-size:14px;color:var(--muted)}
.team-side{display:grid;gap:28px}
.mini h3{font-size:21px;line-height:1.2}
.mini>p{font-size:15px;color:var(--muted);margin:8px 0 14px;max-width:46ch}
.op-cw,.order-cw{box-shadow:0 12px 32px -18px rgba(38,39,32,.4)}
.op-cw .cw-head{padding:10px 12px}
.op-cw .cw-body,.order-cw .cw-body{gap:8px;padding:12px}
.op-cw .cw-user,.op-cw .cw-bot,.order-cw .cw-user,.order-cw .cw-bot{font-size:14px}
.cw-sys{align-self:center;font-size:14px;color:var(--muted);text-align:center}
.cw-op{display:grid;gap:4px;max-width:94%}
.cw-who{font-size:14px;color:var(--muted);padding-left:4px}

/* ---------- База знаний ---------- */
.control-head p{font-size:18px;color:var(--muted);max-width:60ch;margin-top:18px}
.control-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:48px;align-items:center;margin-top:48px}

/* «Попробуйте сами»: посетитель переключает статус материала и видит, как меняется ответ
   (script.js). Без JS показан черновик и ответ «не знаю», переключатель просто не работает. */
.try{display:grid;gap:14px;min-width:0}
.try-doc{display:flex;align-items:center;gap:12px;transition:border-color .3s,box-shadow .3s;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);padding:12px 14px}
.try-doc img{width:40px;height:40px;flex:none}
.try-name{font-weight:500;line-height:1.3}
.try-meta{font-size:14px;color:var(--muted)}
.try-doc.is-live{border-color:var(--green);box-shadow:0 0 0 3px rgba(61,103,60,.12)}
.try-doc.is-live.is-hot{border-color:var(--ink);box-shadow:0 0 0 3px rgba(239,200,74,.55)}
/* Переключатель с «ползунком»: тёмная подложка переезжает под выбранный вариант. */
.try-switch{position:relative;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--ink);border-radius:var(--r-control);overflow:hidden;background:var(--paper)}
.try-thumb{position:absolute;left:0;top:0;bottom:0;width:50%;background:var(--ink);transition:transform .28s cubic-bezier(.3,.7,.2,1)}
.try-switch[data-state=published] .try-thumb{transform:translateX(100%)}
.try-switch button{position:relative;min-height:46px;padding:0 12px;border:0;background:none;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px;transition:color .2s}
.try-switch button::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--field)}
.try-switch [data-try-status=published]::before{background:var(--green)}
.try-switch button[aria-checked=true]{color:var(--paper)}
.try-switch button[aria-checked=true]::before{background:currentColor}
.try-switch button:hover:not([aria-checked=true]){text-decoration:underline;text-underline-offset:4px}
.try-switch button:active{transform:translateY(1px)}
.try-hint{font-size:14px;color:var(--muted)}
.try-cw{box-shadow:0 12px 32px -18px rgba(38,39,32,.4)}
.try-cw .cw-body{gap:8px;padding:14px}
.try-answer{display:grid;gap:8px;justify-items:start;align-content:start;width:100%;min-height:var(--try-h,0)}
/* Смена ответа: прежний уходит вверх и гаснет, новый собирается по частям (script.js). */
.try-answer>*{transition:opacity .18s,transform .18s}
.try-answer.is-leaving>*{opacity:0;transform:translateY(-6px)}

/* ---------- Контроль качества: вкладки ---------- */
.quality{background:var(--tint);padding:var(--section) 0}
.quality-head p{font-size:18px;color:var(--muted);max-width:60ch;margin-top:18px}
.quality .stage{background:var(--paper)}
/* Шапка слева, вкладки справа по нижнему краю: правая часть шапки занята переключателем. */
.quality-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 56px;align-items:end;border-bottom:1px solid var(--line)}
.quality-head{padding-bottom:20px}
.q-tabs{display:flex;gap:28px}
.q-tabs button{min-height:48px;padding:0;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;background:none;font-size:16px;color:var(--muted);white-space:nowrap}
.q-tabs button[aria-selected=true]{border-bottom-color:var(--red);color:var(--ink);font-weight:500}
.q-tabs button:hover{color:var(--ink)}
.q-panel{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:48px;align-items:center;padding-top:40px}
.q-panel[hidden]{display:none}
.q-copy h3{font-size:26px;line-height:1.2}
.q-copy>p{font-size:16px;color:var(--muted);margin-top:12px;max-width:46ch}
.q-steps{margin-top:22px;display:grid;gap:10px;border-top:2px solid var(--ink);padding-top:18px}
.q-steps li{font-size:15px;max-width:46ch}
.q-steps b{font-weight:500}
.checks-legend{display:grid;gap:14px;margin-top:22px;border-top:2px solid var(--ink);padding-top:18px}
.checks-legend div{display:grid;grid-template-columns:128px 1fr;gap:14px;align-items:baseline}
.checks-legend dd{font-size:15px;color:var(--muted)}
.st{display:inline-block;padding:2px 10px;border-radius:999px;font-size:14px;font-weight:500;white-space:nowrap}
.st-ok{background:#e6f1e4;color:var(--green)}
.st-bad{background:var(--red-soft);color:var(--red-dark)}
.st-unsure{background:var(--yellow-soft);color:#7a5a00}

/* ---------- Исследования ---------- */
.research{background:var(--paper);padding:var(--section-b) 0}
.research-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start}
.research-text>p{font-size:17px;max-width:48ch;margin-top:20px}
.r-steps{display:grid;gap:14px;margin-top:28px;max-width:46ch}
.r-steps li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.r-steps img{width:44px;height:44px;padding:6px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card)}
.r-steps p{font-size:15px;color:var(--muted);padding-top:2px}
.r-steps b{color:var(--ink);font-weight:500}
.research-guard{font-size:14px;color:var(--muted);margin-top:22px;max-width:46ch}
/* Птица с лупой стоит слева от снимка на высоте выноски «Сверено с реестром» и разглядывает
   именно эту запись: top по --y выноски минус высота лупы в птице. Только шире 1100px. */
.research-stage{position:relative;margin-top:24px}
.research .shot .research-bird{position:absolute;right:calc(100% + 4px);top:calc(39.2% - 42px);width:124px;height:auto;pointer-events:none}

/* ---------- Установка: схема, CRM под сервером, сниппет и окно на сайте ----------
   Тон секции отделяет её от белых «Исследований». Схема: три карточки в строку со стрелками
   вправо, под «Вашим сервером» CRM со стрелкой вниз. Ниже 760px всё столбиком, стрелки вниз. */
.install{background:var(--tint);padding:var(--section-b) 0}
.install-head p{font-size:18px;color:var(--muted);max-width:60ch;margin-top:18px}
.scheme{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:40px 48px;margin-top:36px;align-items:stretch}
.scheme>li{position:relative;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);padding:20px 22px}
.scheme>li:nth-child(-n+2)::after{content:'';position:absolute;top:50%;right:-49px;width:48px;height:1px;background:var(--ink)}
.scheme>li:nth-child(-n+2)::before{content:'';position:absolute;top:calc(50% - 4px);right:-49px;border:4px solid transparent;border-left:6px solid var(--ink);border-right:0}
.scheme .scheme-crm{grid-column:2;border-style:dashed}
.scheme .scheme-crm::after{content:'';position:absolute;left:50%;top:-41px;width:1px;height:40px;background:var(--ink)}
.scheme .scheme-crm::before{content:'';position:absolute;left:calc(50% - 4px);top:-7px;border:4px solid transparent;border-top:6px solid var(--ink);border-bottom:0}
.scheme-title{font-family:Fira,sans-serif;font-weight:600;font-size:22px;line-height:1.2}
.scheme-sub{font-size:15px;color:var(--muted);margin-top:8px}
.scheme .scheme-main{background:var(--yellow-soft);border-color:var(--ink)}
.scheme-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.scheme-tags li{background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:2px 10px;font-size:14px}
.scheme-main .scheme-tags li{border-color:#e3d49c}
.tag-note{color:var(--muted)}
.scheme-from{display:none;font-size:14px;color:var(--muted);margin-bottom:4px}
/* «Одна строка кода → окно на сайте»: сниппет виджета (docs/widget-embed.md) и стрелка к окну. */
.embed{display:grid;grid-template-columns:minmax(0,1.25fr) 72px minmax(0,1fr);align-items:center;margin-top:40px}
.embed-label{font-size:14px;font-weight:500;margin-bottom:8px}
/* Код не переносится посреди адреса: если строка не влезает, она прокручивается вбок в блоке. */
.embed pre{margin:0;padding:16px 18px;border-radius:var(--r-card);background:var(--ink);color:#e9e7de;font:14px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre;overflow-x:auto;scrollbar-width:thin}
.embed .t{color:#f3a08f}.embed .a{color:#efc84a}.embed .v{color:#b9d7b2}
.embed-note{font-size:14px;color:var(--muted);margin-top:10px;max-width:60ch}
.embed-note code{white-space:nowrap;font:13px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:1px 5px}
.embed-arrow{position:relative;height:1px;margin:0 12px;background:var(--ink)}
.embed-arrow::after{content:'';position:absolute;right:-1px;top:-4px;border:4px solid transparent;border-left:6px solid var(--ink);border-right:0}
.embed-site{position:relative;height:210px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--paper);overflow:hidden}
.embed-page{position:absolute;inset:0;padding:18px 20px;display:grid;align-content:start;gap:10px}
.embed-page i{display:block;height:10px;border-radius:5px;background:#ecebe4}
.embed-page i:first-child{width:38%;height:14px;background:#dcdad0}
.embed-page i:nth-child(2){width:72%}.embed-page i:nth-child(3){width:64%}.embed-page i:nth-child(4){width:48%}
.embed-cw{position:absolute;right:14px;bottom:14px;width:min(250px,80%);border-radius:14px}
.embed-cw .cw-head{padding:8px 10px;gap:8px}
.embed-cw .cw-avatar{width:28px;height:28px;font-size:14px}
.embed-cw .cw-name p:first-child{font-size:14px}
.embed-cw .cw-input{margin:10px;padding:3px 3px 3px 10px;font-size:14px}
.embed-cw .cw-field{padding:0}
.embed-cw .cw-send{width:28px;height:28px}
/* Заметки с иконками: расходы и пилотный режим. */
.scheme-notes{display:grid;grid-template-columns:1fr 1fr;gap:16px 48px;margin-top:40px}
.scheme-notes li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.scheme-notes img{width:44px;height:44px;padding:6px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card)}
.scheme-notes p{font-size:15px;color:var(--muted);max-width:60ch}
.scheme-notes b{color:var(--ink);font-weight:500}
.pd{display:grid;grid-template-columns:auto 1fr;gap:10px 32px;align-items:baseline;margin-top:32px;padding-top:22px;border-top:2px solid var(--ink)}
.pd-title{font-family:Fira,sans-serif;font-weight:600;font-size:21px;line-height:1.2}
.pd-tags{display:flex;flex-wrap:wrap;gap:8px}
.pd-tags li{border:1px solid var(--ink);border-radius:999px;padding:3px 12px;font-size:14px}
.pd-note{grid-column:2;font-size:15px;color:var(--muted);max-width:72ch}

/* ---------- Пилот: шапка слева, итог справа, «Вы / Мы» ниже ---------- */
.launch{padding:var(--section-b) 0}
.launch-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px 56px;align-items:start}
.launch-lead{font-size:18px;color:var(--muted);max-width:52ch;margin-top:18px}
.pilot{display:grid;grid-template-columns:1fr 1fr;margin-top:40px;border-top:2px solid var(--ink)}
.pilot-col{padding:22px 40px 8px 0}
.pilot-col+.pilot-col{padding:22px 0 8px 40px;border-left:1px solid var(--line)}
.pilot h3{font-size:24px;margin-bottom:12px}
.pilot li,.pilot-result li{position:relative;font-size:16px;padding-left:18px}
.pilot li+li,.pilot-result li+li{margin-top:8px}
.pilot li::before,.pilot-result li::before{content:'';position:absolute;left:0;top:.72em;width:8px;height:1px;background:var(--ink)}
.pilot-result{background:var(--yellow-soft);border-radius:var(--r-panel);padding:24px 28px}
.pilot-result h3{font-size:22px;margin-bottom:12px}
.launch-note{font-size:15px;color:var(--muted);margin-top:14px;max-width:52ch}

/* ---------- Вопросы ---------- */
/* Вопросы: заголовок слева (липкий), список справа. */
.faq{border-top:1px solid var(--line);padding:var(--section-b) 0;display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.6fr);gap:32px 56px;align-items:start}
.faq-side{position:sticky;top:calc(var(--head) + 24px)}
.faq-side p{font-size:16px;color:var(--muted);margin-top:14px;max-width:32ch}
.faq-side .text-link{padding:0;border:0;background:none;margin-top:6px}
.faq-list{max-width:880px}
details{border-top:1px solid var(--line)}
details:last-child{border-bottom:1px solid var(--line)}
summary{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:60px;padding:14px 0;list-style:none;cursor:pointer;font-size:18px;font-weight:500}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';flex:none;width:24px;text-align:center;font-size:26px;font-weight:400;color:var(--red);line-height:1}
details[open] summary::after{content:'−'}
summary:hover{color:var(--red-dark)}
details p{font-size:16px;color:var(--muted);max-width:66ch;padding:0 40px 22px 0}

/* ---------- Финал ---------- */
.final{background:var(--tint);overflow:hidden}
.final-inner{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:end}
.final-copy{padding:var(--section-b) 0}
.final h2{max-width:20ch}
.final p{font-size:18px;max-width:52ch;margin:18px 0 28px}
.final-inner>img{width:300px;height:auto;justify-self:end;align-self:end;display:block}

/* ---------- Подвал ---------- */
.footer{border-top:1px solid var(--line)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px 32px;padding:16px 0;font-size:14px;color:var(--muted)}
.footer a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.footer a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.footer-links{display:flex;flex-wrap:wrap;gap:0 24px}
.footer-req{padding:0 0 16px;font-size:13px;color:var(--muted)}
.footer a[hidden]{display:none}

/* ---------- Окно заявки ---------- */
dialog.brief{width:min(600px,100% - 32px);max-height:calc(100dvh - 32px);overflow:auto;padding:32px;border:1px solid var(--line);border-radius:var(--r-panel);background:var(--paper);color:var(--ink);box-shadow:0 30px 80px -24px rgba(38,39,32,.45),0 4px 14px rgba(38,39,32,.08)}
dialog.brief::backdrop{background:rgba(38,39,32,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog.brief[open]{animation:brief-in .22s ease-out}
@keyframes brief-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.brief .close{float:right;width:44px;height:44px;margin:-14px -14px 0 0;border:0;border-radius:var(--r-control);background:none;font-size:28px;line-height:1}
.brief .close:hover{background:var(--tint)}
.brief h2{font-size:34px;max-width:none}
.brief-lead{font-size:16px;color:var(--muted);margin:10px 0 24px}
.field{margin-bottom:16px}
.field label{display:block;font-size:14px;font-weight:500;margin-bottom:6px}
.opt{font-weight:400;color:var(--muted)}
.field input:not([type=checkbox]),.field textarea{display:block;width:100%;min-height:48px;border:1px solid var(--field);background:var(--paper);padding:0 14px;font-size:16px;border-radius:var(--r-control)}
.field textarea{padding:12px 14px;resize:vertical;min-height:88px}
.field input:focus,.field textarea:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
.field ::placeholder{color:#76776d}
.field.has-error input,.field.has-error textarea{border-color:var(--red);outline-color:var(--red)}
.error{font-size:14px;color:var(--red-dark);margin-top:6px}
.error:empty{display:none}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
/* «Добавить детали»: сайт и Telegram необязательны и свёрнуты, форма короче. */
.more-fields{margin:-4px 0 16px;border:0}
.more-fields:last-child{border:0}
.brief .more-fields summary{display:flex;justify-content:flex-start;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-height:44px;padding:10px 0;font-size:15px;font-weight:500;cursor:pointer;list-style:none;white-space:nowrap}
.more-fields summary::-webkit-details-marker{display:none}
.more-fields summary::before{content:'+';align-self:center;width:18px;color:var(--red);font-size:20px;font-weight:400;line-height:1;text-align:center}
.more-fields[open] summary::before{content:'−'}
.brief .more-fields summary::after{display:none}
.more-fields summary .opt{font-size:14px}
.more-fields[open] summary{margin-bottom:8px}
/* Кнопка отправки прилипает к низу окна заявки: при ошибке и длинной форме она видна. */
.form-submit{position:sticky;bottom:0;z-index:1;margin:0 -32px;padding:12px 32px 4px;background:linear-gradient(to bottom,rgba(255,255,255,0),var(--paper) 12px)}
.check{display:grid;grid-template-columns:24px 1fr;gap:4px 12px;align-items:start}
.check input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--red)}
.check label{font-size:14px;font-weight:400;margin:0}
.check label a{text-decoration:underline;text-underline-offset:3px}
.check .error{grid-column:2}
.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-error{font-size:15px;background:var(--red-soft);border-left:3px solid var(--red);border-radius:0 var(--r-control) var(--r-control) 0;padding:12px 14px;margin-bottom:16px}
.form-error a{text-decoration:underline;text-underline-offset:3px}
.brief-done{text-align:center;padding:8px 0}
.brief-done:focus{outline:none}
.brief-done img{width:180px;height:auto;margin:0 auto 8px;display:block}
.brief-done p{font-size:16px;color:var(--muted);max-width:42ch;margin:12px auto 24px}
.brief-done a{text-decoration:underline}

/* ---------- Служебные страницы: политика, согласие, 404 ---------- */
.legal{max-width:760px;padding:56px 0 96px}
.legal h1{font-size:clamp(34px,4vw,48px);line-height:1.1;margin-bottom:16px}
.legal h2{font-size:24px;max-width:none;margin:36px 0 12px}
.legal p,.legal li{font-size:16px;margin-top:10px}
.legal ul{list-style:disc;padding-left:22px}
.legal .draft{background:var(--yellow-soft);border-left:3px solid var(--yellow);padding:14px 16px;font-size:15px;margin:20px 0 8px}
.fill{background:var(--yellow);padding:0 4px;font-weight:500}
.notfound{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:64px 0 96px;min-height:calc(100dvh - var(--head) - 80px)}
.notfound p{font-size:18px;color:var(--muted);margin:16px 0 28px;max-width:40ch}
.notfound img{width:100%;max-width:420px;height:auto;justify-self:center}

/* ---------- Плашка «Обсудить внедрение» внизу экрана (телефон) ----------
   Появляется, когда первый экран ушёл вверх, прячется у финала и подвала, закрывается крестиком
   до конца визита (sessionStorage). Пока она видна, у body запас снизу, контент под ней не
   теряется. */
.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:9;display:flex;gap:8px;align-items:center;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.72);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-top:1px solid var(--line);box-shadow:0 -10px 24px -18px rgba(38,39,32,.4);transform:translateY(110%);transition:transform .25s ease-out}
.cta-bar[hidden]{display:none}
.cta-bar.on{transform:none}
.cta-bar .btn{flex:1;min-width:0;min-height:48px;gap:12px;padding:0 16px}
.cta-bar-close{display:grid;place-items:center;width:48px;height:48px;flex:none;border:1px solid var(--line);border-radius:var(--r-control);background:rgba(255,255,255,.6);color:var(--muted)}
.cta-bar-close:hover{border-color:var(--ink);color:var(--ink)}
body.has-cta-bar{padding-bottom:calc(68px + env(safe-area-inset-bottom))}

/* ---------- Адаптив ---------- */
@media (max-width:1100px){
  :root{--gutter:32px}
  .nav{gap:20px}
  .hero{grid-template-columns:1fr minmax(0,470px);gap:32px}
  /* Птице на первом экране не хватает места рядом с окном консультанта: убираем её. */
  .hero-visual{padding-left:0}
  .hero-bird{display:none}
  .research-grid,.team-grid,.control-grid,.q-panel{gap:40px}
  .source-pane{padding:24px 20px}
  .demo-cw{margin:20px}
  .scheme{column-gap:36px}
  .scheme>li:nth-child(-n+2)::after{right:-37px;width:36px}
  .scheme>li:nth-child(-n+2)::before{right:-37px}
  .research .shot .research-bird{display:none}
  .embed{grid-template-columns:minmax(0,1.2fr) 56px minmax(0,1fr)}
}
@media (max-width:900px){
  /* Меню: бургер раскрывает панель под шапкой. */
  .burger{display:block}
  .nav{display:none;position:absolute;left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));top:calc(var(--head) - 1px);flex-direction:column;gap:0;padding:8px var(--gutter) 20px;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 18px 30px -20px rgba(38,39,32,.35);font-size:17px}
  .nav.open{display:flex}
  .nav a{display:flex;align-items:center;min-height:52px;padding:0;border-bottom:1px solid var(--line)}
  .hero{grid-template-columns:1fr;gap:40px}
  .hero-visual{max-width:600px}
  .ask{grid-template-columns:1fr;gap:10px}
  /* Демо в одну колонку: материал свёрнутой строкой (название и выделенная цитата) над окном
     консультанта, по нажатию раскрывается целиком. */
  .answer-lab{grid-template-columns:1fr}
  .source-pane{border-right:0;border-bottom:1px solid var(--line);padding:14px 16px}
  .pane-label{margin-bottom:10px}
  .src-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:56px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--paper);text-align:left}
  .src-toggle:hover{border-color:var(--ink)}
  .src-sum{display:grid;gap:4px;min-width:0}
  .src-name{font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .src-quote{justify-self:start;font-size:15px;line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .src-more{display:flex;align-items:center;gap:4px;flex:none;font-size:14px;color:var(--muted)}
  .src-more svg{stroke:currentColor;transition:transform .2s}
  .src-toggle[aria-expanded=true] .src-more svg{transform:rotate(180deg)}
  /* Материал раскрыт целиком: строка-цитата над ним повторяла бы выделенное. */
  .src-toggle[aria-expanded=true] .src-quote{display:none}
  .source-docs{display:none;min-height:0;margin-top:12px}
  .doc-more{display:none}
  .source-docs.open{display:block}
  .doc{max-width:none}
  .demo-cw{margin:16px}
  .team-grid,.research-grid,.control-grid,.q-panel{grid-template-columns:1fr}
  .team .reel{margin-top:28px}
  .reel{max-width:720px}
  .team-side{grid-template-columns:1fr 1fr;gap:24px}
  .control-grid{gap:36px}
  .try{max-width:560px}
  .q-panel{gap:28px;padding-top:28px}
  .research-stage{margin-top:0}
  .pd{grid-template-columns:1fr}
  .pd-note{grid-column:1}
  /* Схема столбиком, стрелки вниз; CRM последней, подпись «Заявки с вашего сервера» вместо
     стрелки от сервера. */
  .scheme{grid-template-columns:1fr;gap:28px;max-width:560px}
  .scheme .scheme-crm{grid-column:auto}
  .scheme .scheme-crm::after,.scheme .scheme-crm::before{display:none}
  .scheme-from{display:block}
  .scheme>li:nth-child(-n+2)::after{top:auto;bottom:-29px;right:auto;left:36px;width:1px;height:28px}
  .scheme>li:nth-child(-n+2)::before{top:auto;bottom:-29px;right:auto;left:32px;border:4px solid transparent;border-top:6px solid var(--ink);border-bottom:0}
  .quality-top,.launch-top,.faq{grid-template-columns:1fr}
  .quality-top{gap:8px}
  .quality-head{padding-bottom:12px}
  .faq-side{position:static}
  .faq-side p,.faq-side .text-link{display:none}
  .launch-top{gap:24px}
  /* Сниппет над окном сайта, стрелка вниз. */
  .embed{grid-template-columns:minmax(0,1fr);max-width:560px}
  .embed-arrow{justify-self:start;width:1px;height:28px;margin:10px 0 10px 36px}
  .embed-arrow::after{right:auto;left:-4px;top:auto;bottom:-1px;border:4px solid transparent;border-top:6px solid var(--ink);border-bottom:0}
}
@media (max-width:760px){
  :root{--gutter:20px;--head:64px;--section:64px;--section-b:44px}
  body{font-size:16px}
  .wordmark{font-size:26px}
  .nav-cta{font-size:14px;padding:0 12px}
  .hero{gap:32px;padding:28px 0 40px}
  .hero h1{font-size:clamp(36px,10.4vw,56px);line-height:1.04}
  .intro{font-size:17px;margin:16px 0 24px}
  .hero-actions{gap:8px 20px}
  .hero-visual{padding-left:0}
  .hero-bird{display:none}
  .ask-list{grid-template-columns:1fr;gap:8px}
  h2{font-size:clamp(30px,8.2vw,40px)}
  .head p,.control-head p,.install-head p,.final p,.quality-head p,.launch-lead{font-size:16px}
  .demo-bar{flex-direction:column;align-items:stretch;margin-top:28px}
  .demo-tabs{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .demo-tabs button{padding:0 6px;font-size:14px}
  .demo-tabs button+button{border-left:1px solid var(--ink)}
  .demo-tabs button:nth-child(even){border-left:0}
  .demo-tabs button:nth-child(n+3){border-top:0}
  .demo-tabs [data-answer=tech]{margin-left:0;border-left:0}
  .demo-cw{margin:0;border:0;border-radius:0;box-shadow:none}
  .cw-body{padding:14px 12px}
  .cw-bot,.pcard-row,.cw-cards,.mini-form{max-width:100%;width:100%}
  .demo-own{font-size:15px}
  .mini h3{font-size:20px}
  .reel-tabs{gap:18px;margin-right:calc(-1 * var(--gutter))}
  .reel-tabs button{font-size:14px}
  .scheme-notes{grid-template-columns:1fr;gap:14px}
  .control-grid{margin-top:32px}
  .stage{padding:16px}
  .ring{left:var(--mx,var(--x));top:var(--my,var(--y));width:var(--mw,var(--w));height:var(--mh,var(--h))}
  .callout{left:var(--mx,var(--x));top:var(--my,var(--y))}
  .callout-desk,.cl-wide{display:none}
  .cl-narrow{display:inline}
  .callout[data-mside=right]>span{left:16px;right:auto;top:0;transform:translateY(-50%)}
  .callout[data-mside=left]>span{right:16px;left:auto;top:0;transform:translateY(-50%)}
  .callout[data-mside=below]>span{top:16px;left:auto;right:-24px;transform:none}
  .q-tabs{gap:20px;overflow-x:auto;scrollbar-width:none}
  .q-tabs button{font-size:15px}
  .q-copy h3{font-size:22px}
  .r-steps{margin-top:22px}
  .pd{margin-top:28px}
  .checks-legend div{grid-template-columns:1fr;gap:4px}
  .scheme{margin-top:28px}
  .scheme-title{font-size:20px}
  /* «Вы / Мы» остаются двумя колонками: пункты короткие, так глава вдвое ниже. */
  .pilot-col{padding:16px 14px 18px 0}
  .pilot-col+.pilot-col{padding:16px 0 18px 14px}
  .pilot h3{font-size:21px;margin-bottom:8px}
  .pilot li{font-size:15px;line-height:1.4;padding-left:12px}
  .pilot li::before{width:6px}
  .pilot li+li{margin-top:6px}
  .pilot-result{grid-template-columns:1fr;padding:18px 20px}
  .pilot-result ul{grid-template-columns:1fr}
  summary{font-size:17px}
  details p{padding-right:0;font-size:15px}
  .final-inner{grid-template-columns:1fr;gap:0}
  .final-copy{padding:var(--section-b) 0 8px}
  .final-inner>img{width:180px}
  /* Подвал в две колонки: ссылки на документы слева, контакт и «Наверх» справа. */
  .footer-inner{display:grid;grid-template-columns:1fr auto;align-items:start;gap:0 16px;padding:12px 0 16px}
  .footer-inner>span{grid-column:1 / -1;padding:10px 0 4px}
  .footer-links{display:contents}
  .footer-links a:nth-child(1){grid-area:2/1}
  .footer-links a:nth-child(2){grid-area:3/1}
  .footer-links a:nth-child(3){grid-area:2/2;justify-self:end}
  .footer-links a:nth-child(4){grid-area:4/2;justify-self:end}
  .footer-inner>a[href="#top"]{grid-area:3/2;justify-self:end}
  dialog.brief{padding:24px 20px;width:calc(100% - 24px);max-height:calc(100dvh - 24px)}
  .form-submit{margin:0 -20px;padding:12px 20px 4px}
  .brief .close{margin:-10px -10px 0 0}
  .brief h2{font-size:28px}
  .field-row{grid-template-columns:1fr}
  .notfound{grid-template-columns:1fr;padding:40px 0 64px}
  .notfound img{max-width:240px;grid-row:1}
  /* Короче на телефоне: вопросы полосой с прокруткой вбок, без повторов того, что уже сказано
     рядом (подробности есть в вопросах внизу страницы). */
  :root{--section:52px;--section-b:40px}
  .ask{padding:10px 0}
  .research-guard{margin-top:14px}
  .ask-list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter)}
  .ask-list::-webkit-scrollbar{display:none}
  .ask-list button{flex:none;max-width:78%;scroll-snap-align:start}
  .reel-frame figcaption{display:none}
  .mini>p{font-size:14px;margin:6px 0 12px}
  .q-copy>p{display:none}
  .q-steps{margin-top:14px}
  .r-steps{gap:10px}
  .r-steps li{grid-template-columns:36px 1fr;gap:12px}
  .r-steps img{width:36px;height:36px;padding:4px}
  .r-steps p{font-size:14px;padding-top:0}
  /* Схема и два фрагмента окна в разделе «Команда»: полосой с прокруткой вбок, следующая
     карточка выглядывает справа. Стрелки схемы снова горизонтальные, между карточками. */
  .team-side{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-right:calc(-1 * var(--gutter));padding:2px var(--gutter) 10px 0;max-width:none}
  .team-side::-webkit-scrollbar{display:none}
  .car-nav{display:flex}
  /* У вопросов под первым экраном стрелки в строке подписи «Спросите как клиент». */
  .ask{position:relative}
  .ask>p{min-height:40px;display:flex;align-items:center}
  .ask .car-nav{position:absolute;right:0;top:10px;margin:0}
  .team-side+.car-nav{margin-top:0}
  .head-center{text-align:left}
  .scheme{gap:24px;margin-top:24px}
  .scheme>li{padding:16px 18px}
  .scheme>li:nth-child(-n+2)::after{bottom:-25px;height:24px}
  .scheme>li:nth-child(-n+2)::before{bottom:-25px}
  .embed{margin-top:28px}
  .embed-site{height:132px}
  .embed-page{padding:14px 16px;gap:8px}
  .embed pre{font-size:13px;padding:14px}
  .embed-note{display:none}
  /* Мобильный кадр расхождения собран из целых предложений, его края не растворяем. */
  #quality .shot-excerpt picture{-webkit-mask-image:none;mask-image:none}
  .scheme-notes{margin-top:28px}
  .scheme-notes li{grid-template-columns:36px 1fr;gap:12px}
  .scheme-notes img{width:36px;height:36px;padding:4px}
  .scheme-notes p{font-size:14px}
  .team-side{gap:16px}
  .team-side .mini{flex:0 0 86%;scroll-snap-align:start;display:flex;flex-direction:column}
  .team-side .mini .cw{margin-top:auto}
  .pd-note,.launch-note{display:none}
  .pd-tags li{font-size:14px}
  .launch-lead{margin-top:12px}
  .hero{gap:24px;padding:24px 0 32px}
  .try-hint{display:none}
  summary{min-height:52px;padding:12px 0}
  /* Птица в финале крупнее и справа под кнопкой; ниже 420px скрыта (там ей негде встать). */
  .final-inner>img{width:200px;margin-top:-72px;justify-self:end}
  .final-copy{padding-bottom:0}
  .head p,.control-head p,.install-head p,.quality-head p{margin-top:12px}
  .faq-list{margin-top:20px}
  .final p{margin:14px 0 20px}
  .pilot{margin-top:22px}
}
@media (min-width:761px){
  .cta-bar{display:none}
  body.has-cta-bar{padding-bottom:0}
}
@media (max-width:420px){
  /* Кнопка шапки остаётся рядом с бургером, но с короткой подписью. */
  .cta-long{display:none}
  .cta-short{display:inline}
  /* Две вкладки контроля качества в одну строку: у первой короткая подпись. */
  .q-long{display:none}
  .final-inner>img{display:none}
  .final-copy{padding-bottom:var(--section-b)}
}
@media (max-width:380px){
  :root{--gutter:16px}
  .wordmark{font-size:24px}
  .nav-cta{padding:0 10px}
  .demo-tabs button{padding:0 2px}
  .pcard-row img{width:76px}
  .cw-icons svg:first-child{display:none}
  /* Выноске, которой нужно место справа от точки, на самом узком экране его не хватает. */
  .callout-roomy{display:none}
}

/* ---------- Движение ----------
   «Печатает…» в демо: три точки мигают по очереди; ответ появляется по строкам снизу вверх. */
@keyframes cw-blink{0%,80%,100%{opacity:.25}40%{opacity:.9}}
@keyframes cw-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cw-dots i{animation:cw-blink 1.1s infinite}
.cw-dots i:nth-child(2){animation-delay:.18s}
.cw-dots i:nth-child(3){animation-delay:.36s}
.cw-in{animation:cw-rise .32s ease-out both}
/* Первый экран: вопрос и ответ видны сразу, сноска и карточка товара поднимаются за 0,4 с
   (0,1 с задержки и 0,3 с движения), сноска в ответе один раз вспыхивает. */
@keyframes cite-pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.15);opacity:1}100%{transform:none}}
.hero-cw .pcard{animation:cw-rise .3s ease-out .06s both}
.hero-cw .cw-sources{animation:cw-rise .3s ease-out .1s both}
.hero-cw .cw-bot .cite{animation:cite-pop .3s ease-out .08s both}
/* Ролик админки: подчёркивание выбранного кадра заполняется за время его показа. */
@keyframes reel-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}