/*
  Адаптация лендинга под телефон, планшет и узкий ноутбук.

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

  Это слой поверх, а не переделка: правила живут только внутри медиа-запросов,
  и на десктопе (от 1025 и шире) не срабатывает ни одно. `!important` здесь
  вынужден — inline style сильнее любого селектора по специфичности, и обойти
  его иначе нельзя, не переписывая всю разметку.

  Важно про селекторы по подстроке: разметку на странице пересобирает
  скрипт, поэтому в DOM попадает не исходный текст атрибута, а его
  сериализация браузером — `0` превращается в `0px`, `minmax(0, 1fr)`
  в `minmax(0px, 1fr)`. Селекторы ниже написаны под этот вид; сверять их
  надо по готовой странице, а не по index.html.

  Слой временный: когда дизайнер сделает мобильную версию, его надо удалить,
  а не наслаивать поверх.
*/

/* ==========================================================================
   1024 и уже — планшет и телефон
   ========================================================================== */
@media (max-width: 1024px) {

  /* Разметка считает ширину без padding: у дизайнера всё умещалось за счёт
     запаса на 1440. На узком экране запас исчезает, и контейнер с боковыми
     отступами оказывается шире родителя ровно на них — отсюда и уезжала
     вбок вся страница. */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Страховка от выезда вбок, если очередная выгрузка принесёт новый широкий
     блок. Именно `clip`, а не `hidden`: `hidden` делает страницу прокручиваемым
     контейнером и ломает `position: sticky` у карты и у сцены «Путь сделки». */
  html,
  body {
    overflow-x: clip !important;
  }

  img,
  iframe,
  video {
    max-width: 100%;
  }

  /* Длинное слово в узкой колонке (почта, ссылка) распирает блок изнутри.
     Только текстовые блоки: на span это правило рвало пополам числа
     в плитках («47» превращалось в «4» и «7» на двух строках). */
  h1, h2, h3, p, a {
    overflow-wrap: break-word;
  }

  /* Флекс- и грид-элемент по умолчанию не ужимается меньше своего содержимого
     и вылезает из колонки. Без !important — инлайновый min-width сильнее. */
  [style*="display: flex"] > *,
  [style*="display: grid"] > * {
    min-width: 0;
  }
}

/* ==========================================================================
   900 и уже — телефон и узкий планшет: одноколоночная раскладка
   ========================================================================== */
@media (max-width: 900px) {

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

  /* 40 точек по краям съедают пятую часть телефона. Задаём боковые поля
     секциям, а не каждому внутреннему контейнеру: так правило переживёт
     очередную выгрузку с другими значениями padding. */
  section,
  footer,
  header > div {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
  /* Карта живёт во весь экран, поля ей не нужны. */
  #geo {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Вертикальные отступы макета (104–150 точек) дают по пустому экрану между
     блоками. Ужимаем примерно вдвое, сохраняя ритм: где сверху было 0,
     там 0 и остаётся. Правило для «104px 40px 0px» стоит после общего —
     подстрока у них общая, и разводит их только порядок. */
  [style*="padding: 104px 40px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  [style*="padding: 104px 40px 0px"] { padding-bottom: 0 !important; }
  [style*="padding: 130px 40px"] { padding-top: 72px !important; padding-bottom: 72px !important; }
  [style*="padding: 130px 0px 130px 40px"] { padding-top: 72px !important; padding-bottom: 72px !important; }
  [style*="padding: 140px 40px 150px"] { padding-top: 72px !important; padding-bottom: 80px !important; }
  [style*="padding: 128px 40px"] { padding-top: 72px !important; padding-bottom: 72px !important; }
  [style*="padding: 0px 40px 130px"] { padding-top: 0 !important; padding-bottom: 72px !important; }
  [style*="padding: 72px 40px 56px"] { padding-top: 48px !important; padding-bottom: 40px !important; }

  /* --- Шапка ------------------------------------------------------------ */

  /* Разделы всё равно листают скроллом, а меню в строку не помещается.
     Кнопку входа оставляем: это единственное действие в шапке. */
  header nav {
    display: none !important;
  }
  header > div {
    height: 64px !important;
    gap: 12px !important;
  }
  /* Палец промахивается по кнопке ниже 44 точек. */
  header a[href="/login"] {
    height: 44px !important;
    padding: 0 20px !important;
    white-space: nowrap !important;
  }
  /* Знак — тоже ссылка (наверх страницы), а кликалась только сама надпись
     высотой 26 точек. */
  header a[href="/#top"] {
    min-height: 44px !important;
  }

  /* --- Сетки ------------------------------------------------------------ */

  /* Всё, что задумано в несколько колонок под 1440, ставим в одну.
     Мелкие служебные сетки («время + событие», «стрелка + заголовок»)
     в списке отсутствуют — они и на телефоне остаются в две колонки. */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: repeat(7, 1fr)"],
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr 1.1fr"],
  [style*="grid-template-columns: 1.2fr 0.7fr 0.9fr 1.3fr 0.5fr"],
  [style*="grid-template-columns: 1.25fr 1.15fr 0.95fr 100px"],
  [style*="grid-template-columns: 1.05fr 0.95fr"],
  [style*="grid-template-columns: 1.4fr 1fr"],
  [style*="grid-template-columns: 344px minmax(0px, 1fr)"],
  [style*="grid-template-columns: 360px 1fr"],
  [style*="grid-template-columns: 1fr 340px"],
  [style*="grid-template-columns: 1fr 186px"] {
    grid-template-columns: 1fr !important;
  }

  /* Карточка «на две колонки» в сетке, ставшей одноколоночной, создаёт
     вторую колонку заново — и уезжает за экран.
     Ловим по куску `span 2`, а не по целому `grid-column: span 2`: WebKit
     раскладывает эту сокращённую запись на `grid-column-start`/`-end`, и
     селектор по полному имени свойства в Safari не находил ничего. Другой
     записи со «span 2» на странице нет. */
  [style*="span 2"] {
    grid-column: auto !important;
  }

  /* Расстояние между колонками (56–64 точки) после переноса в столбик
     превращается в дыру между блоками. */
  [style*="gap: 64px"],
  [style*="gap: 56px"] {
    gap: 28px !important;
  }

  /* Ряды, рассчитанные на десктоп, переносим вместо сжатия. */
  [style*="display: flex"] {
    flex-wrap: wrap;
  }

  /* --- Макеты интерфейса ------------------------------------------------ */

  /* Дашборд в первом экране и карточка разделов — это «снимок продукта»:
     их ценность в том, что видно настоящий интерфейс. Разложенные в одну
     колонку они превращались в кашу — обрывки таблицы, шапка, налезающая
     на содержимое под собой, вертикальный столбик из названий колонок.
     Поэтому их не перевёрстываем, а уменьшаем целиком: ровно так же
     ведут себя анимированные сцены ниже, они масштабируют себя сами. */
  #top > div:last-of-type,
  #system [style*="border-radius: 24px"] {
    zoom: 0.62;
  }
  /* Внешний отступ уменьшился вместе с макетом — возвращаем на глаз. */
  #top > div:last-of-type {
    margin-top: 110px !important;
  }
  /* Внутри уменьшенных макетов и анимированных сцен раскладка должна
     остаться десктопной — иначе уменьшать было незачем. */
  #top [style*="grid-template-columns: repeat(3, 1fr)"],
  #system [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
  #system [style*="grid-template-columns: repeat(5, 1fr)"] { grid-template-columns: repeat(5, 1fr) !important; }
  #top [style*="grid-template-columns: 1.4fr 1fr"] { grid-template-columns: 1.4fr 1fr !important; }
  #top [style*="grid-template-columns: 1.25fr 1.15fr 0.95fr 100px"] { grid-template-columns: 1.25fr 1.15fr 0.95fr 100px !important; }
  #system [style*="grid-template-columns: 1.2fr 0.7fr 0.9fr 1.3fr 0.5fr"] { grid-template-columns: 1.2fr 0.7fr 0.9fr 1.3fr 0.5fr !important; }
  #system [style*="grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr 1.1fr"] { grid-template-columns: 1.2fr 0.8fr 0.8fr 0.8fr 1.1fr !important; }
  /* То же самое, но для анимированных сцен: они рисуют интерфейс внутри
     себя и сами ужимают его трансформом. Правила одноколоночной раскладки
     доставали и туда — у роликов «Путь сделки» и «Сделка доходит до денег»
     сетка каталога схлопывалась в одну колонку, и на телефоне в кадре
     оставалось пустое белое поле вместо карточек. */
  [data-om-starter] [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
  [data-om-starter] [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(4, 1fr) !important; }
  [data-om-starter] [style*="grid-template-columns: repeat(5, 1fr)"] { grid-template-columns: repeat(5, 1fr) !important; }
  [data-om-starter] [style*="grid-template-columns: repeat(7, 1fr)"] { grid-template-columns: repeat(7, 1fr) !important; }
  [data-om-starter] [style*="span 2"] { grid-column: span 2 !important; }
  [data-om-starter] [style*="gap: 64px"] { gap: 64px !important; }
  [data-om-starter] [style*="gap: 56px"] { gap: 56px !important; }

  #top [style*="display: flex"],
  #system [style*="display: flex"],
  [data-om-starter] [style*="display: flex"] {
    flex-wrap: nowrap;
  }
  #top [style*="flex-wrap: wrap"],
  #system [style*="flex-wrap: wrap"],
  [data-om-starter] [style*="flex-wrap: wrap"] {
    flex-wrap: wrap;
  }
  /* Разделы в шапке макета рассчитаны на обрезку по краю окна — их полоса
     для того и объявлена с overflow: hidden. Разрешив им ужиматься, мы
     получали наложение подписей друг на друга. */
  #top [style*="white-space: nowrap"],
  #system [style*="white-space: nowrap"] {
    min-width: auto;
  }

  /* --- «Один клиент — от каталога до выплаты» ---------------------------- */

  /* Секция — история из пяти шагов, которая играет сама: активный шаг
     раскрывает абзац, а сцена справа показывает этот же шаг в интерфейсе.
     В одну колонку связка «шаг ↔ картинка» разваливалась: сначала пять
     заголовков подряд (текст виден только у активного), и уже за нижним
     краем экрана — ролик, непонятно к чему относящийся.
     Лечим не переносом, а плотностью: ужимаем шаги так, чтобы все пять и
     верх сцены попадали на один экран и менялись на глазах у читателя. */

  /* Заголовок центрован, но у контейнера ещё и padding-right: 40px под
     десктопную колонку — на телефоне из-за него центр уезжал влево. */
  #path [style*="padding-right: 40px"] {
    padding-right: 0 !important;
  }

  #path [style*="grid-template-columns: 344px minmax(0px, 1fr)"] {
    margin-top: 32px !important;
    gap: 20px !important;
  }

  /* Шаг на десктопе — строка в 21px с полями 22/24: пять таких занимают
     полтора экрана телефона, и список перестаёт читаться как один путь. */
  #path [style*="cursor: pointer"] {
    padding: 13px 0 15px 20px !important;
  }
  #path [style*="cursor: pointer"] [style*="font-size: 21px"] {
    font-size: 18px !important;
  }
  #path [style*="cursor: pointer"] p {
    margin-top: 8px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  /* Сцена «Путь сделки» на десктопе уходит за правый край экрана, поэтому
     скруглена только слева. В столбик она встала целиком — скругляем всё. */
  #path [style*="border-radius: 20px 0px 0px 20px"] {
    border-radius: 20px !important;
  }

  /* --- «CRM сама ведёт воронку» ------------------------------------------ */

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

  /* Карточка задана min-height: 420px под соседний столбец журнала. В столбик
     соседа нет, и эта высота превращалась в пустое поле над кнопками. */
  #leads [style*="min-height: 420px"] {
    min-height: 0 !important;
    padding: 24px 20px 22px !important;
  }
  /* Внутренние плашки карточки повторяли десктопные поля в 28 точек —
     на 390 у текста оставалось меньше двух третей ширины. */
  #leads [style*="padding: 26px 28px"],
  #leads [style*="padding: 18px 20px"],
  #leads [style*="padding: 16px 20px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Тёмные панели журнала и эскалации набирали поля от десктопной колонки
     и начинались на восемь точек правее белой карточки — на узком экране
     этот сдвиг заметен и читается как сбой. */
  #leads [style*="padding: 26px 28px 22px"],
  #leads [style*="padding: 24px 28px 26px"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Сумма комиссии набрана в 48 точек и в узкой плашке упиралась в край. */
  #leads [style*="font-size: 48px"] {
    font-size: 34px !important;
  }
  /* Две кнопки в подвале карточки: в ряд они не помещаются, а перенос
     оставлял вторую висеть отдельной строкой на четверть ширины. */
  #leads [style*="height: 46px"] {
    flex: 1 1 auto !important;
    justify-content: center !important;
    padding: 0 12px !important;
  }

  /* Цепочка «Срок истёк → напоминание → нет реакции → сводка директору»
     свёрстана строкой со стрелками-разделителями. При переносе стрелка
     оказывалась в начале строки и указывала в пустоту. Ставим цепочку
     столбиком и разворачиваем стрелки вниз — направление сохраняется. */
  #leads [style*="gap: 8px 12px"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 7px !important;
  }
  #leads [style*="gap: 8px 12px"] > [style*="color: rgba(255, 255, 255, 0.34)"] {
    transform: rotate(90deg);
    line-height: 1;
  }

  /* --- «Мелочи, из которых складывается рабочий день» -------------------- */

  /* Секция — бенто из шести плиток: три широкие на две колонки, три узкие.
     Ширина плитки на десктопе и означала её вес. В одну колонку вес исчез,
     и секция превратилась в шесть одинаковых абзацев подряд: после первой
     плитки со сторис читателю не за что зацепиться до самого низа.
     Возвращаем ритм тем, что осталось доступно на телефоне, — плотностью
     плиток и сохранением внутренних «интерфейсных» кусочков (список
     клиентов, доска сделок): именно они разбивают текстовую ленту.
     Селектор через :has() — у секции нет id, а «span 2» встречается на
     странице только здесь (про сам кусок «span 2» см. выше: в Safari
     свойство называется иначе, и по полному имени селектор не срабатывал —
     из-за этого вся секция в Safari оставалась десктопной, узкие плитки
     получали нулевую ширину, и текст в них рассыпался по букве на строку). */

  section:has([style*="span 2"]) [style*="grid-template-columns: repeat(3, 1fr)"] {
    margin-top: 28px !important;
    gap: 14px !important;
  }
  /* Поля плиток в 34/36 точек оставляли тексту 280 точек из 354. */
  section:has([style*="span 2"]) [style*="padding: 34px 36px"],
  section:has([style*="span 2"]) [style*="padding: 34px 32px"] {
    padding: 22px 18px !important;
  }
  section:has([style*="span 2"]) h3 {
    font-size: 20px !important;
  }
  section:has([style*="span 2"]) p {
    font-size: 15px !important;
    margin-top: 8px !important;
  }

  /* «Сделки на доске» — доска из четырёх колонок по этапам. В одну колонку
     это четыре подписи и восемь карточек подряд, шестьсот точек высоты, и
     от доски не остаётся ничего. В две колонки доска ещё читается доской. */
  section:has([style*="span 2"]) [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    margin-top: 16px !important;
  }

  /* Макет телефона со сторис — единственная картинка секции. В строке с
     текстом ей места нет, поэтому она встаёт под ним; прижатая к краю
     колонки, она читалась как случайно оставленный элемент. */
  section:has([style*="span 2"]) [style*="width: 186px"] {
    justify-self: center !important;
  }
  section:has([style*="span 2"]) [style*="grid-template-columns: 1fr 186px"] {
    gap: 20px !important;
  }

  /* --- Первый экран ----------------------------------------------------- */

  /* Декоративное свечение за героем: абсолют шириной в тысячу точек со
     сдвигом на половину — именно он тянул страницу вбок. */
  [style*="margin-left: -500px"] {
    margin-left: -50vw !important;
    width: 100vw !important;
  }

  /* --- Карта ------------------------------------------------------------ */

  /* 220vh — это два с лишним экрана прокрутки по тёмной карте. */
  #geo {
    height: 150vh !important;
  }
  /* Подписи стояли в строку по углам карты: правый блок с числом ЖК уезжал
     за экран целиком. */
  #geo [style*="padding: 64px 56px 0px"] {
    padding: 84px 18px 0 !important;
    flex-direction: column !important;
    gap: 20px !important;
  }
  #geo [style*="text-align: right"] {
    text-align: left !important;
  }
  #geo [style*="right: 56px"][style*="bottom: 56px"] {
    right: 18px !important;
    left: 18px !important;
    bottom: 24px !important;
  }

  /* --- Приложение ------------------------------------------------------- */

  /* Блок «Офис, который всегда с вами»: 80/64 точки внутренних полей
     оставляли тексту меньше половины ширины. */
  [style*="padding: 80px 64px"] {
    padding: 32px 20px !important;
  }
  /* Макеты телефона заданы в точках и в паре с полями не влезали. */
  [style*="width: 300px"] {
    width: min(260px, 100%) !important;
  }
  [style*="width: 186px"] {
    width: min(186px, 100%) !important;
    justify-self: start !important;
  }

  /* --- Футер ------------------------------------------------------------ */

  /* Разделы футера в столбик — это строки в 19 точек высотой с зазором
     в 10: пальцем попадаешь через раз. Кнопки-«таблетки» соцсетей лежат
     в отдельном ряду и под этот селектор не попадают. */
  footer [style*="gap: 10px"] > a {
    padding: 8px 0 !important;
  }
  /* Кнопки мессенджеров в футере — 38 точек, чуть ниже порога попадания. */
  footer a[style*="height: 38px"] {
    height: 44px !important;
  }
}

/* ==========================================================================
   561–900 — планшет: половина правил выше здесь избыточна
   ========================================================================== */
@media (min-width: 561px) and (max-width: 900px) {

  /* На планшете карточка во всю ширину — это строка текста и полэкрана
     пустоты справа. Двух колонок хватает, трёх уже нет. */
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: 1.4fr 1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Семь этапов воронки в четыре колонки читаются как две строки ленты. */
  #leads [style*="grid-template-columns: repeat(7, 1fr)"] {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  /* Широкие карточки макета занимали две колонки из трёх — в сетке из двух
     это ровно вся ширина. Без этого они делили строку пополам, и текст внутри
     сжимался до одного слова в строке. */
  [style*="span 2"] {
    grid-column: span 2 !important;
  }
  /* Текст и макет телефона рядом — на планшете места хватает обоим. */
  [style*="grid-template-columns: 1fr 186px"] {
    grid-template-columns: 1fr 186px !important;
  }
  [style*="grid-template-columns: 1fr 340px"] {
    grid-template-columns: 1fr 340px !important;
  }
  [style*="padding: 80px 64px"] {
    padding: 48px 40px !important;
  }

  /* «Один клиент» на планшете помещается в исходную пару «шаги — сцена»:
     колонку шагов чуть сужаем, чтобы сцене осталось больше половины
     ширины. Плотная телефонная раскладка здесь не нужна — растянутый на
     700 точек список из пяти строк выглядит пустым. */
  #path [style*="grid-template-columns: 344px minmax(0px, 1fr)"] {
    grid-template-columns: 300px minmax(0px, 1fr) !important;
    gap: 28px !important;
    align-items: start !important;
  }
  #path [style*="cursor: pointer"] {
    padding: 20px 0 22px 24px !important;
  }
  #path [style*="cursor: pointer"] [style*="font-size: 21px"] {
    font-size: 21px !important;
  }
  #path [style*="cursor: pointer"] p {
    margin-top: 12px !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
  }

  /* «CRM сама ведёт воронку»: на планшете ширины хватает и на подписи
     этапов в исходном размере, и на цепочку эскалации в одну строку —
     телефонные ужимки здесь только портят. */
  #leads [style*="grid-template-columns: repeat(7, 1fr)"] {
    gap: 20px 8px !important;
  }
  #leads [style*="grid-template-columns: repeat(7, 1fr)"] [style*="font-size: 11.5px"] {
    font-size: 11.5px !important;
    letter-spacing: 0.1em !important;
  }
  #leads [style*="grid-template-columns: repeat(7, 1fr)"] [style*="gap: 8px"] {
    gap: 8px !important;
  }
  #leads [style*="min-height: 420px"] {
    padding: 30px 32px 32px !important;
  }
  #leads [style*="padding: 26px 28px"],
  #leads [style*="padding: 18px 20px"],
  #leads [style*="padding: 16px 20px"],
  #leads [style*="padding: 26px 28px 22px"],
  #leads [style*="padding: 24px 28px 26px"] {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
  #leads [style*="font-size: 48px"] {
    font-size: 48px !important;
  }
  #leads [style*="height: 46px"] {
    flex: none !important;
    padding: 0 24px !important;
  }
  #leads [style*="gap: 8px 12px"] {
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px 12px !important;
  }
  #leads [style*="gap: 8px 12px"] > [style*="color: rgba(255, 255, 255, 0.34)"] {
    transform: none;
  }

  /* «Мелочи»: на планшете бенто живёт в двух колонках, плитке хватает и
     полей, и исходного кегля — ужимать её незачем. */
  section:has([style*="span 2"]) [style*="padding: 34px 36px"],
  section:has([style*="span 2"]) [style*="padding: 34px 32px"] {
    padding: 30px 28px !important;
  }
  section:has([style*="span 2"]) h3 {
    font-size: 23px !important;
  }
  section:has([style*="span 2"]) p {
    font-size: 16px !important;
    margin-top: 12px !important;
  }
  section:has([style*="span 2"]) [style*="grid-template-columns: repeat(3, 1fr)"] {
    gap: 20px !important;
  }
}

/* ==========================================================================
   560 и уже — телефон
   ========================================================================== */
@media (max-width: 560px) {

  /* Кнопки в ряд не помещаются — растягиваем на всю ширину и ставим стопкой. */
  [style*="height: 56px"][style*="border-radius: 999px"],
  [style*="height: 58px"][style*="border-radius: 999px"] {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Лента этапов — это шкала прогресса: важно видеть её целиком и понимать,
     сколько пройдено. В две колонки она читалась как таблица из четырёх
     строк, а не как путь. В четыре деления умещается в две строки —
     ближайшее к десктопной ленте, что даёт ширина телефона. */
  #leads [style*="grid-template-columns: repeat(7, 1fr)"] {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px 6px !important;
  }
  /* Второй селектор — та же полоска деления глазами Safari: он хранит
     `border-top` разобранным на составляющие, и сокращённая запись в DOM
     не встречается. */
  #leads [style*="grid-template-columns: repeat(7, 1fr)"] [style*="border-top: 2px solid"],
  #leads [style*="grid-template-columns: repeat(7, 1fr)"] [style*="border-top-width: 2px"] {
    padding-top: 9px !important;
  }
  /* Подпись деления в 11.5 точек с разрядкой 0.1em не влезала в 80 точек
     колонки: «КОМИССИЯ» переносилась и ломала ряд. */
  #leads [style*="grid-template-columns: repeat(7, 1fr)"] [style*="font-size: 11.5px"] {
    font-size: 9.5px !important;
    letter-spacing: 0.04em !important;
  }
  #leads [style*="grid-template-columns: repeat(7, 1fr)"] [style*="gap: 8px"] {
    gap: 5px !important;
  }

  /* Сумма комиссии набрана в 64 точки в одну строку — на 390 она упиралась
     в поля. */
  [style*="clamp(64px, 11vw, 156px)"] {
    font-size: 52px !important;
  }

  /* --- «Один клиент — от каталога до выплаты»: шкала вместо списка ------- */

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

  /* Колонка шагов — начало отсчёта для делений и место под саму шкалу. */
  #path [style*="344px minmax"] > div:first-child {
    position: relative !important;
    padding-top: 34px !important;
  }
  /* Черта, замыкавшая список снизу: списка больше нет. */
  #path [style*="344px minmax"] > div:first-child > div:last-child {
    display: none !important;
  }
  /* position: static нужен, чтобы деление считало координаты от колонки,
     а не от своего шага: активным бывает любой по счёту, а шкала одна. */
  #path [style*="344px minmax"] > div:first-child > [style*="cursor: pointer"] {
    position: static !important;
    padding: 0 !important;
    border-top: 0 !important;
  }
  /* Вертикальные рельсы слева — украшение десктопного списка. */
  #path [style*="344px minmax"] > div:first-child > [style*="cursor: pointer"] > [style*="position: absolute"] {
    display: none !important;
  }
  /* Деление: пятая часть ширины за вычетом четырёх промежутков по 6.
     Само деление — четыре точки высотой, но коробка ему дана в 24: шаг
     остаётся переключаемым пальцем, а в полоску в четыре точки попасть
     нельзя. Красится только внутренняя часть — отсюда background-clip. */
  #path [style*="344px minmax"] > div:first-child > [style*="cursor: pointer"]::before {
    content: "";
    position: absolute;
    top: 0;
    height: 24px;
    padding: 10px 0;
    width: calc((100% - 24px) / 5);
    border-radius: 999px;
    background-color: #E1E2E6;
    background-clip: content-box;
  }
  #path [style*="344px minmax"] > div:first-child > [style*="cursor: pointer"]:nth-child(1)::before { left: 0; }
  #path [style*="344px minmax"] > div:first-child > [style*="cursor: pointer"]:nth-child(2)::before { left: calc((100% - 24px) / 5 + 6px); }
  #path [style*="344px minmax"] > div:first-child > [style*="cursor: pointer"]:nth-child(3)::before { left: calc((100% - 24px) / 5 * 2 + 12px); }
  #path [style*="344px minmax"] > div:first-child > [style*="cursor: pointer"]:nth-child(4)::before { left: calc((100% - 24px) / 5 * 3 + 18px); }
  #path [style*="344px minmax"] > div:first-child > [style*="cursor: pointer"]:nth-child(5)::before { left: calc((100% - 24px) / 5 * 4 + 24px); }

  /* Абзац есть только у активного шага — по нему активный и отличаем. */
  #path [style*="344px minmax"] > div:first-child > [style*="cursor: pointer"]:has(> p)::before {
    background-color: #1B4BD1;
  }
  /* Номер и название неактивного шага читать негде, а на шкале он уже
     отмечен делением — поэтому шаг не занимает высоты вовсе. */
  #path [style*="344px minmax"] > div:first-child > [style*="cursor: pointer"]:not(:has(> p)) > [style*="display: flex"] {
    display: none !important;
  }
  #path [style*="344px minmax"] > div:first-child > [style*="cursor: pointer"] [style*="font-size: 21px"] {
    font-size: 20px !important;
  }
  #path [style*="344px minmax"] > div:first-child > [style*="cursor: pointer"] p {
    margin-top: 10px !important;
    font-size: 15.5px !important;
    line-height: 1.55 !important;
  }

  /* Сцена. На десктопе она уходит за правый край экрана — отсюда скругление
     только слева и sticky. На телефоне отдаём ей весь экран: боковые поля
     секции отыгрываем отрицательными полями, скругление снимаем. */
  #path [style*="border-radius: 20px 0px 0px 20px"] {
    position: static !important;
    margin: 4px -18px 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* --- Кадр сцены: показываем середину, а не весь кабинет ---------------- */

  /* Сцены рисуют кабинет шириной 1920 и сами вписывают его в контейнер:
     на 390 это масштаб около 0.2, при котором подписи превращаются в
     штрихи. Показываем не весь кадр, а его середину в масштабе, на котором
     текст читается, — лишнее обрезает overflow контейнера сцены. Высота
     задана в точках, а не пропорцией: иначе на широком телефоне кадр
     перестаёт закрывать подложку и по краям вылезает фон. */
  /* Внутри сцены есть ещё одна рамка со сдвигом в проценты — ею кадр
     обрезали под десктопную пропорцию. При другой высоте она уводит показ
     в нижнюю треть кабинета, поэтому распрямляем её по контейнеру. */
  #path [data-scene] > div,
  #money [data-scene] > div {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  #path [data-scene] {
    aspect-ratio: auto !important;
    height: 380px !important;
  }
  #path [data-om-starter] > div > svg {
    transform: scale(0.45) !important;
    transform-origin: center center !important;
  }

  /* «Сделка доходит до денег» — тот же случай: телефон с карточкой клиента
     ужимался до 90 точек в ширину, и от сцены оставался силуэт трубки.
     Кадр в основном пустой по бокам, поэтому увеличение почти ничего не
     срезает — телефон просто становится крупным. */
  #money [style*="margin: 56px auto 0px"] {
    margin: 32px -18px 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
  }
  #money [data-scene] {
    aspect-ratio: auto !important;
    height: 470px !important;
  }
  #money [data-om-starter] > div > svg {
    transform: scale(0.45) !important;
    transform-origin: center center !important;
  }
}

/*
  Увеличенный фрагмент интерфейса внутри мокапа задан как
  `width: 355.6%; left: -127.8%; max-width: none` — приём верный, но рамка
  вокруг него не обрезает переполнение, и страница становилась на 259 точек
  шире экрана: появлялась горизонтальная прокрутка на всех размерах.
*/
:has(> img[style*="max-width: none"]) {
  overflow: hidden;
}