@charset "UTF-8";
/* =========================================================================
   Retrieva — узкий экран (до 760 px)

   Отдельный файл, а не десяток @media внутри components.css: на телефоне
   меняется не пара отступов, а форма половины слоёв. Держать это рядом
   с десктопной раскладкой — значит перечитывать оба варианта каждый раз,
   когда правишь один.

   Что было не так. Страница занимала 23.8 экрана. Каждый слой открывался
   одинаково — надзаголовок, крупный заголовок, подпись, — и дальше шёл
   вертикальный список карточек. Шесть сценариев и пять шагов запуска,
   которые на десктопе едут вбок и сменяют друг друга, здесь разворачивались
   в столбик и съедали шесть экранов текста без единой картинки.

   Что сделано:
     · воздух между слоями подрезан почти вдвое;
     · надзаголовок стал линейкой-разделителем, а не вторым заголовком,
       и её цвет говорит, о чём слой: шалфей — человеческое, сланец —
       техническое (то же деление палитры, что в tokens.css);
     · соседние слои разведены по фону — рядом не стоят два одинаковых;
     · у списков появилась форма: нумерация, шкала времени, приборная
       строка, рамка оффера, справочный рельс, — вместо шести одинаковых
       столбиков текста;
     · у двух тарифов появились свои акценты: рядом они больше не
       читаются как одна карточка;
     · сценарии и ниши листаются пальцем, как на десктопе листаются
       скроллом: это тот же приём, а не деградация. Весь текст на месте.

   Тексты сокращены в самой разметке, а не здесь: правка касается обеих
   раскладок. Ответы FAQ обязаны совпадать с FAQPage в <head> слово
   в слово — правите один, правьте и второй.

   Файл подключается последним — после motion.css.
   ========================================================================= */

@media (max-width: 760px) {

/* ============================== РИТМ ====================================
   --air на 11vh давал 89 px сверху и снизу у каждого из тринадцати слоёв:
   почти три экрана одних отступов. Кегли тоже сняты на ступень: подпись,
   набранная в 20 px, читается как ещё один заголовок. */
:root {
  --air:     5.4rem;
  --gutter:  2.2rem;
  --fs-h2:   2.5rem;
  --fs-h3:   1.9rem;
  --fs-lead: 1.8rem;
}

/* Заголовок слоя перестаёт кричать: на 375 px в него всё равно помещается
   три-четыре слова в строку, и разрядка тут важнее кегля. */
.h2 { line-height: 1.12; letter-spacing: -.03em; }

/* Подпись под заголовком — обычный текст, а не третий уровень заголовка. */
.lead { font-size: var(--fs-body); line-height: 1.6; max-width: none; }

/* -------------------------- ЛИНЕЙКА СЛОЯ -------------------------------
   Надзаголовок вытянут в разделитель: слева подпись, справа волосяная
   линия до края колонки. Глаз читает начало слоя как черту, а не как
   ещё одну строку крупного текста, — а именно на это уходило ощущение
   «сплошные заголовки». */
.kicker {
  display: flex; align-items: center; gap: 1.2rem;
  font-size: 1.1rem; letter-spacing: .22em;
  margin-bottom: 1.4rem;
}
.kicker::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* Цвет линейки говорит, о чём слой. Шалфей отвечает за человеческое —
   ночная смена, ушедший клиент, кейс, компания, заявка; сланец за всё
   техническое — демо, сценарии, системы, запуск, цены, вопросы. Это
   не украшение: то же деление палитры описано в tokens.css, просто
   на телефоне оно наконец видно, потому что слои идут подряд. */
:is(#demo-dialog, #skills, #integr, #launch, #pricing, #faq) .kicker { color: var(--slate); }
:is(#demo-dialog, #skills, #integr, #launch, #pricing, #faq) .kicker::after { background: var(--slate-deep); }


/* --------------------------- ЧЕРЕДОВАНИЕ -------------------------------
   Слои через один получают чуть приподнятый фон. Не рамка и не шов:
   градиент гаснет к краям, поэтому граница по-прежнему не видна —
   видно только, что предыдущий слой кончился. */
main > .layer:nth-of-type(2n+1):not(.hero):not(.pain) {
  background-image: linear-gradient(180deg,
    transparent 0, rgba(19, 22, 20, .5) 12%,
    rgba(19, 22, 20, .5) 88%, transparent 100%);
}

/* ============================== ШАПКА ================================== */
.site-header__inner { height: 6rem; gap: 1.2rem; }
.logo { font-size: 1.9rem; margin-right: auto; }
/* Переключатель языка остаётся в шапке и на телефоне: навигация там скрыта,
   и это единственное место, где язык вообще можно сменить. Ужимаем метки,
   чтобы он ужился с кнопкой «Получить демо» на 320 px. */
.lang__opt { min-width: 3.8rem; padding: .8rem .5rem; font-size: 1.05rem; letter-spacing: .06em; }
.site-header .btn--sm { padding: 1.1rem 1.6rem; font-size: 1.15rem; letter-spacing: .1em; }

/* ============================ 01. ПОРОГ ================================ */
.hero { padding: 3.4rem 0 var(--air); }
.hero__grid { gap: 3.6rem; }
.eyebrow { padding: .8rem 1.4rem; font-size: 1.1rem; letter-spacing: .16em; margin-bottom: 2rem; }
.hero__title { margin-bottom: 2rem; }
.hero__sub { margin-bottom: 2.6rem; }

/* Кнопки во всю ширину: две подряд всё равно не помещались в строку
   и переносились по одной, но с разной шириной — колонка выглядела рваной. */
.hero__cta { display: grid; gap: 1rem; }
.hero__cta .btn { width: 100%; padding: 1.7rem 2rem; }
.hero__note { margin-top: 1.6rem; }

/* Пузыри клиента: лесенка со сдвигом вправо на 30 и 60 px съедала треть
   колонки, и текст в третьем пузыре ломался по слогам. */
.hero__thread { gap: 1rem; }
.hero__thread-label { font-size: 1.1rem; letter-spacing: .16em; }
.msg { max-width: 100%; padding: 1.2rem 5.4rem 1.2rem 1.6rem; font-size: 1.65rem; }
.msg:nth-child(2), .msg:nth-child(3) { margin-left: 0; }

/* «Без ответа 14 часов» было строкой мелких прописных среди других таких же
   строк. Здесь это счётчик: плашка с горящей точкой — единственный красный
   огонёк на первом экране. */
.hero__unanswered {
  display: inline-flex; align-items: center; gap: .9rem;
  margin-top: 1.6rem; padding: .9rem 1.4rem;
  border: 1px solid var(--line-2); background: var(--surface);
  font-size: 1.15rem; letter-spacing: .12em;
}
.hero__unanswered::before {
  content: ''; width: .7rem; height: .7rem; border-radius: 50%; flex: none;
  background: #e0574c; box-shadow: 0 0 0 .3rem rgba(224, 87, 76, .14);
}

/* ========================= 02. НОЧНАЯ СМЕНА ============================
   Циферблат — главная картинка слоя, поэтому он встаёт по центру колонки,
   а не прижимается к краю. Запас снизу нужен хвосту шторы. */
.night__inner { padding: 3.4rem 0 6rem; gap: 3rem; }
.dial { width: min(22rem, 62vw); margin-inline: auto; }
.night__verdict { font-size: var(--fs-body); line-height: 1.6; max-width: none; }
.dial__legend { margin-top: 2rem; gap: .8rem; }
.dial__legend li { font-size: 1.1rem; }

/* ====================== 03. ЦЕНА ПРОМЕДЛЕНИЯ ===========================
   Три довода шли тремя одинаковыми абзацами. Стали нумерованной таблицей:
   номер слева, тезис и расшифровка справа, между строками волосяная линия.
   Читается сканированием, а не чтением. */
.cost__list { counter-reset: cost; gap: 0; margin: 2.8rem 0; }
.cost__list li {
  counter-increment: cost;
  display: grid; grid-template-columns: 3.4rem 1fr; gap: .4rem 1.2rem;
  max-width: none; padding: 1.8rem 0; border-top: 1px solid var(--line);
}
.cost__list li::before {
  content: counter(cost, decimal-leading-zero);
  grid-row: 1 / span 2; align-self: start;
  font: 500 1.3rem/1.5 var(--f-mono); letter-spacing: .1em; color: var(--slate);
}
.cost__list li:last-child { border-bottom: 1px solid var(--line); }
.cost__list b { font-size: 1.75rem; line-height: 1.3; }
.cost__list span { font-size: var(--fs-small); line-height: 1.55; color: var(--mute); }
.cost__answer { font-size: 1.8rem; max-width: none; padding-left: 1.8rem; }

/* =========================== 04. ЛЕНТА БОЛИ ============================ */
.pain { padding: 3.6rem 0; }
.pain__row span { padding: 1rem 1.6rem; font-size: 1.4rem; }
.pain__cap { margin-top: 2.4rem; font-size: 1.1rem; }

/* ========================= 05. ЖИВОЙ ДИАЛОГ ============================ */
/* minmax(0, 1fr), а не колонка по умолчанию: минимальный размер элемента
   сетки — его min-content, а у ленты ниш это сумма всех шести плашек.
   Без этого колонка растягивалась до 778 px, телефон вылезал за экран,
   и страница ехала вбок. Прокручиваемым лентам заодно нужен min-width: 0 —
   иначе они продолжают заявлять о себе полную ширину содержимого. */
.demo__grid { gap: 3.4rem; grid-template-columns: minmax(0, 1fr); }
.demo__lead, .demo__stage { min-width: 0; }

/* Ниши переехали в горизонтальную ленту: шесть плашек занимали три строки
   и выглядели как ещё один список. Лента листается пальцем и выходит
   за колонку — так видно, что её можно тянуть. */
.demo__label { margin-top: 2.6rem; font-size: 1.1rem; }
.demo__niches {
  flex-wrap: nowrap; overflow-x: auto; gap: .8rem; margin-top: 1.2rem;
  min-width: 0;
  margin-inline: calc(var(--gutter) * -1);
  padding: 0 var(--gutter) .4rem;
  scroll-snap-type: x proximity; scrollbar-width: none;
}
.demo__niches::-webkit-scrollbar { display: none; }
.demo__niches li { flex: none; scroll-snap-align: start; }
.demo__hint { margin-top: 1.4rem; max-width: none; }

/* Приборная строка: три показателя в ряд с волосяными перегородками.
   Раньше они переносились по два и один — строка ломалась пополам. */
.demo__metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin-top: 2.8rem; padding-top: 2.2rem;
}
.demo__metrics li { padding-left: 1.4rem; border-left: 1px solid var(--line); }
.demo__metrics li:first-child { padding-left: 0; border-left: 0; }
.demo__metrics b { font-size: 2.2rem; }
.demo__metrics span { font-size: 1.2rem; line-height: 1.35; margin-top: .6rem; }

/* Экран телефона занимал 620 px — почти весь кадр, и кнопки ответа
   уезжали за нижний край вместе с последней репликой. */
.demo__screen { height: min(56rem, 64vh); }
.demo__stage { gap: 1.6rem; }
.demo__note { font-size: 1.35rem; line-height: 1.5; }

/* Живой бот. На телефоне код уходит на вторую роль: наводить камеру
   посетителю не на что, ведёт кнопка. Совсем убирать его не за что —
   экран показывают соседу, а на планшете код снимают вторым телефоном.
   Ниже 14 rem не опускаем: на 37 модулей это уже меньше 4 px на модуль,
   и код перестаёт ловиться с экрана. */
.live { padding: 2.6rem 2rem; gap: 2.2rem; }
.live__qr { width: 14rem; height: 14rem; }
.live__text { font-size: 1.4rem; margin-top: 1.4rem; }
.live__cta { margin-top: 2.4rem; }

/* ======================== 06. ЧТО ДЕЛАЕТ БОТ ===========================
   На десктопе шесть сценариев едут вбок от скролла. Здесь они едут вбок
   от пальца — это тот же приём, просто у телефона другой привод.
   Столбиком они занимали 3.2 экрана сплошного текста.

   Карточка не во всю ширину намеренно: край следующей должен торчать,
   иначе ленту не за что взять глазом. */
.skills__track { height: auto !important; }
.skills__pin { position: static; overflow: visible; min-height: 0; display: block; }
.skills__head { margin-bottom: 2.6rem; }
.skills__strip {
  flex-direction: row; width: auto; gap: 1.2rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(var(--gutter) * -1);
  padding: 0 var(--gutter) 1.2rem;
  /* Сдвиг ленты считает motion.js только на широком экране; здесь тянет
     палец, и остатки инлайнового transform надо снять. */
  transform: none !important;
}
.skills__strip::-webkit-scrollbar { display: none; }
.skills__card {
  width: min(30rem, 80vw); flex: none; scroll-snap-align: center;
  padding: 2.6rem 2.2rem; gap: 1rem;
}
/* Значок — единственная картинка в карточке, поэтому он крупнее и взят
   шалфеем: сланцевый контур в 28 px на тёмном фоне почти не читался. */
.skills__card { position: relative; }
.skills__card svg { width: 3.6rem; height: 3.6rem; stroke: var(--sage); stroke-width: 1.3; }
/* Номер уходит в угол крупной прозрачной цифрой: в ленте он работает
   как счётчик карточек, а в потоке текста только мешал заголовку. */
.skills__card b {
  position: absolute; top: 2.2rem; right: 2.2rem;
  font: 700 3.4rem/1 var(--f-display); letter-spacing: -.05em;
  color: var(--line-2); text-transform: none;
}
.skills__card p { font-size: var(--fs-small); line-height: 1.6; }

/* Полоса прогресса возвращается: без неё непонятно, сколько карточек
   осталось. Отрезки зажигает motion.js по прокрутке самой ленты. */
.skills__progress { display: flex; gap: .5rem; margin-top: 1.8rem; }

/* =========================== 07. ИНТЕГРАЦИИ ===========================
   Два столбца таблицы встают друг под друга: на 375 px «Календарь и запись»
   в колонке 32 % ломался на четыре строки. Шина и отводы остаются. */
.wires { margin-top: 2.6rem; }
.wires__core { padding: 1.2rem 1.8rem; margin-bottom: .6rem; }
.wires__core b { font-size: 1.7rem; }
.wires th, .wires td { display: block; width: auto; }
.wires th { padding: 1.8rem 0 .6rem 4rem; font-size: 1.7rem; border-bottom: 0; }
.wires td { padding: 0 0 1.8rem 4rem; font-size: var(--fs-small); line-height: 1.55; color: var(--mute); }
.wires th::before { top: 2.7rem; background: var(--slate-deep); }
.wires th::after  { top: 2.35rem; background: var(--slate); border-color: var(--slate); }
.wires tbody::before { bottom: 1.8rem; background: var(--slate-deep); }
/* Узлы залиты, а не обведены: на десктопе они наливаются под курсором,
   а на телефоне курсора нет — схема осталась бы вечно погасшей. */
.wires__core { border-color: var(--slate); }
.wires__core span { color: var(--slate); }

/* ============================= 08. ЗАПУСК ==============================
   Пять шагов шли пятью одинаковыми блоками: подпись, заголовок, два абзаца.
   Стали шкалой времени — вертикальная линия с узлами. Линия и есть картинка
   раздела: по ней сразу видно, что этапов пять и они идут подряд. */
.launch__track { height: auto !important; }
.launch__pin { position: static; min-height: 0; display: block; }
.launch__head { margin-bottom: 2.6rem; }
.launch__index { display: none; }
.launch__body { gap: 0; }
.launch__steps { display: flex; flex-direction: column; gap: 0; }
/* Липкой сцены здесь нет: все пять шагов раскрыты сразу. */
.launch__step {
  position: relative; opacity: 1; visibility: visible; transform: none;
  gap: .7rem; padding: 0 0 2.8rem 3.6rem;
}
.launch__step::before {                     /* линия между узлами */
  content: ''; position: absolute; left: 1.05rem; top: 1.9rem; bottom: 0;
  width: 1px; background: var(--line-2);
}
.launch__step:last-child::before { display: none; }
.launch__step:last-child { padding-bottom: 0; }
.launch__step::after {                      /* сам узел */
  content: ''; position: absolute; left: .5rem; top: .5rem;
  width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--ink); border: 1px solid var(--sage);
}
.launch__day { font-size: 1.1rem; letter-spacing: .18em; }
.launch__step .h3 { font-size: 1.9rem; line-height: 1.25; }
.launch__step p { font-size: var(--fs-body); line-height: 1.6; max-width: none; }
.launch__who { font-size: 1.35rem; line-height: 1.5; padding-left: 1.2rem; margin-top: .2rem; }

/* ============================= 09. ТАРИФЫ ==============================
   Шапка тарифа собрана в строку: значок, название и цена в одном кадре.
   Столбиком она занимала 200 px до первого пункта списка — на двух карточках
   это пол-экрана впустую, и цены двух тарифов не попадали в один взгляд. */
.pricing__grid { gap: 1.6rem; margin-top: 2.6rem; }

/* Две карточки подряд читались как одна и та же. Теперь у каждой свой
   акцент: сланец — техническому Telegram, шалфей — WhatsApp. Цвет ведёт
   верхнюю кромку, срок и метки списка, поэтому карточки различаются
   с одного взгляда, ещё до чтения названий. Служебные --tg и --wa тут
   не годятся: это цвета мессенджеров, они живут только в демо-телефоне
   и на кнопках связи. */
.plan { position: relative; padding: 2.8rem 2.2rem 2.6rem; gap: 1.6rem; }
.plan::before {
  content: ''; position: absolute; left: -1px; right: -1px; top: -1px;
  height: 2px; background: var(--accent);
}
.plan--tg { --accent: var(--slate); }
.plan--wa { --accent: var(--sage); }

.plan__head {
  display: grid; grid-template-columns: auto 1fr; align-items: center;
  gap: .2rem 1.4rem;
}
.plan__logo { grid-row: 1 / span 2; width: 3.8rem; }
.plan__name { font-size: 1.6rem; align-self: end; }
.plan__price { font-size: 2.8rem; align-self: start; }
/* Срок — не сноска, а вторая половина обещания рядом с ценой, поэтому
   он стоит плашкой в цвете тарифа. */
.plan__term {
  grid-column: 1 / -1; justify-self: start; margin-top: 1.2rem;
  padding: .7rem 1.2rem; background: var(--surface-2);
  border-left: 2px solid var(--accent);
  font: 500 1.25rem/1.2 var(--f-mono); letter-spacing: .1em;
  text-transform: uppercase; color: var(--paper);
}
.plan__list { gap: .9rem; font-size: var(--fs-small); }
.plan__list li { padding-left: 1.6rem; line-height: 1.5; }
.plan__list li::before { background: var(--accent); }
.plan__foot { font-size: 1.35rem; line-height: 1.55; }
.plan .btn { padding: 1.6rem 2rem; }
.pricing__support { margin-top: 2.6rem; font-size: 1.35rem; line-height: 1.6; }

/* ====================== 10. ЧТО ОСТАЁТСЯ ВАШИМ ========================= */
.own__list { gap: 2rem; margin-top: 2.8rem; }
.own__list li { padding-left: 1.6rem; }
.own__list b { font-size: 1.75rem; line-height: 1.3; }
.own__list span { font-size: var(--fs-small); line-height: 1.55; color: var(--mute); }

/* ========================== 11. ПЕРВЫЙ КЕЙС ============================
   Четыре условия — не ещё один список, а одно предложение, поэтому они
   собраны в рамку с шалфейной кромкой слева и читаются как оффер целиком.
   У каждого пункта шалфейный плюс: это то, что вы получаете сверх обычного,
   а не просто следующий абзац. */
.firstcase__inner { gap: 3.4rem; }
.firstcase__text .btn { margin-top: 2.2rem; width: 100%; }
.firstcase__list {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 2px solid var(--sage);
  padding: .6rem 2rem;
}
.firstcase__list li {
  position: relative; gap: .5rem; padding: 1.8rem 0 1.8rem 3rem;
}
.firstcase__list li:first-child { border-top: 0; }
.firstcase__list li:last-child { border-bottom: 0; }
.firstcase__list li::before {
  content: ''; position: absolute; left: 0; top: 2.55rem;
  width: 1.2rem; height: 1px; background: var(--sage);
}
.firstcase__list li::after {
  content: ''; position: absolute; left: .55rem; top: 2rem;
  width: 1px; height: 1.2rem; background: var(--sage);
}
.firstcase__list b { font-size: 1.75rem; line-height: 1.3; }
.firstcase__list span { font-size: var(--fs-small); line-height: 1.55; color: var(--mute); }

/* ============================ 12. ВОПРОСЫ ============================== */
.faq__thread { margin-top: 2.4rem; }
.qa summary { padding: 2rem 4rem 2rem 0; font-size: 1.75rem; line-height: 1.35; }
.qa summary::after { top: 2.6rem; right: .4rem; width: 1.1rem; height: 1.1rem; }
.qa__answer { padding-bottom: 2.2rem; max-width: none; }
.qa__answer p { font-size: var(--fs-small); line-height: 1.65; }
.source { margin-top: 2.6rem; font-size: 1.3rem; }

/* ============================ 13. RETRIEVA ============================= */
.about__grid { gap: 3rem; }
.mark { width: 9rem; margin-bottom: 2rem; }
/* Факты о компании — не список доводов, а справка: сланцевый рельс слева
   и квадратная метка вместо линеек и плюсов, которые уже заняты соседними
   слоями. Квадрат, а не круг: круги на этой странице означают узел схемы. */
.about__facts { gap: 0; border-left: 1px solid var(--slate-deep); padding-left: 2rem; }
.about__facts li { position: relative; gap: .4rem; padding: 1.4rem 0; }
.about__facts li::before {
  content: ''; position: absolute; left: -2.45rem; top: 1.85rem;
  width: .7rem; height: .7rem; background: var(--slate);
}
.about__facts b { font-size: 1.1rem; letter-spacing: .18em; }
.about__facts span { font-size: var(--fs-small); line-height: 1.55; }
.about__note { margin-top: 1.8rem; }

/* ============================= 14. ЗАЯВКА ============================== */
.contact__grid { gap: 3rem; }
.contact__direct { gap: 1rem; margin-top: 2.4rem; }
.direct { width: 100%; padding: 1.1rem 2rem 1.1rem 1.1rem; }
.direct img { width: 3rem; }
.bubble--greet { margin-bottom: 2rem; padding: 1.4rem 1.8rem 2.4rem; font-size: 1.65rem; }
.chips { gap: .8rem; margin-bottom: 2rem; }
.chip span { padding: 1.1rem 1.6rem; font-size: 1.45rem; }
.field__input { padding: 1.6rem 1.8rem; }
.field--send .field__input { padding-right: 6.6rem; }
.send { width: 4.2rem; height: 4.2rem; top: .7rem; right: .7rem; }

/* ============================== ПОДВАЛ ================================= */
.site-footer__inner { gap: 3rem; }
.site-footer__copy { font-size: 1.35rem; margin-top: 1rem; }
.req { font-size: 1.35rem; gap: .6rem; }
.legal-links { font-size: 1.4rem; }
.site-footer__sources { font-size: 1.2rem; margin-top: 1.4rem; }

}

/* ========================== ОЧЕНЬ УЗКИЙ ЭКРАН ==========================
   360 px и меньше: тут уже нечего подрезать, кроме кегля заголовков. */
@media (max-width: 380px) {
  :root { --gutter: 1.8rem; }
  /* На 320 px в шапке тесно втроём: логотип, переключатель языка и кнопка.
     Ужимаем всех понемногу, чтобы подпись кнопки осталась в одну строку —
     в две она читается как ошибка вёрстки, а не как кнопка. */
  .site-header__inner { gap: .8rem; }
  .logo { font-size: 1.7rem; }
  .site-header .btn--sm { padding: 1.1rem 1rem; font-size: 1rem; letter-spacing: .06em; }
  .lang__opt { min-width: 3rem; padding: .7rem .3rem; font-size: 1rem; letter-spacing: .04em; }
  .demo__metrics b { font-size: 2rem; }
  /* Подпись под кодом — одна строка. На 320 px разрядка съедала
     последние пиксели, и «устройства» уезжало на второй ряд. */
  .live__scan { letter-spacing: .1em; }
  .plan__price { font-size: 2.5rem; }
}