/* ============================================================
   KidmaTech — страница продукта «CRM с ИИ-администратором»
   Только то, чего нет в styles.css. Цвета, отступы, шрифты —
   исключительно из tokens.css: своих значений здесь не заводим,
   иначе страница разъедется с остальным сайтом при смене темы.
   Подключать ПОСЛЕ tokens.css и styles.css.
   ============================================================ */

/* Шапка липкая: без этого запаса переход по якорю («Посмотреть, как это
   работает» → #look) прячет заголовок секции под шапку. */
main > section[id] { scroll-margin-block-start: calc(var(--space-8) + var(--space-4)); }

/* ---------- Первый экран: текст слева, снимок справа ---------- */
.crm-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--space-7);
  align-items: center;
  padding-block: var(--space-8) var(--space-7);
}
.crm-hero h1 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  max-width: 18ch;
}
.crm-hero .lead {
  font-size: var(--text-lg);
  color: var(--color-ink-muted);
  line-height: var(--leading-snug);
  margin-block-start: var(--space-5);
  max-width: 46ch;
}
.crm-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-block-start: var(--space-6);
}

/* Цифры первого экрана: срок, цена, языки */
.crm-facts {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.crm-facts li {
  position: relative;
  padding-inline-start: 1.7em;
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  line-height: var(--leading-snug);
}
.crm-facts li::before {
  content: "✓";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  color: var(--color-brand);
  font-weight: var(--weight-bold);
}

/* Снимок интерфейса в первом экране — тот же кадр, что постер ролика:
   человек видит систему раньше, чем решит нажать «смотреть». */
.crm-hero-shot {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-lg);
  /* Фон коробки идёт ЗА темой, а не прибит к тёмному: без скрипта
     (блокировщик, обрыв загрузки) заставка не подставляется, и при
     светлой теме зритель видел ровно тот чёрный прямоугольник, ради
     которого всё и затевалось. Найдено критиком 21.09.2026. */
  background: var(--color-bg);
  line-height: 0;
}
.crm-hero-shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ---------- Ролик ---------- */
.crm-player {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  box-shadow: var(--shadow-lg);
  /* Фон коробки идёт ЗА темой, а не прибит к тёмному: без скрипта
     (блокировщик, обрыв загрузки) заставка не подставляется, и при
     светлой теме зритель видел ровно тот чёрный прямоугольник, ради
     которого всё и затевалось. Найдено критиком 21.09.2026. */
  background: var(--color-bg);
  line-height: 0; /* убирает щель под <video> */
  margin-block-start: var(--space-6);
}
.crm-player video {
  /* Сам тег <video> без заставки браузер красит чёрным, и фон коробки
     под ним не проступает — видео занимает её целиком. Без скрипта
     заставки нет, и человек со светлой системной темой видел ровно тот
     чёрный прямоугольник, ради которого всё затевалось. Фон на самом
     теге это закрывает и идёт за темой. Найдено приёмкой 21.09.2026,
     после того как фон одной лишь коробки дал ложно-зелёный сценарий. */
  background: var(--color-bg);
  display: block;
  width: 100%;
  height: auto;
  /* Место под кадр резервируется сразу: без этого страница дёргается,
     когда браузер дочитывает метаданные ролика. */
  aspect-ratio: 16 / 9;
}
.crm-player-note {
  margin-block-start: var(--space-4);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}
.crm-examples-link { margin-block-start: var(--space-4); }

/* ---------- Что умеет: восемь карточек ---------- */
.crm-feats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-6);
}
.crm-feat {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.crm-feat h3 {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-brand-strong);
  margin: 0;
}
.crm-feat p {
  margin-block-start: var(--space-3);
  color: var(--color-ink);
  line-height: var(--leading-normal);
}

/* ---------- Чем отличается: пары «у них — у нас» ---------- */
.crm-vs {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  max-width: 900px;
}
.crm-vs li {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  line-height: var(--leading-normal);
}
.crm-vs p { margin: 0; }
.crm-vs .crm-us { margin-block-start: var(--space-3); }

.crm-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-inline-end: var(--space-3);
  padding: 0.15em 0.7em;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: 0.15em;
}
.crm-tag.is-them {
  /* Не свой цвет, а разбавленный фирменный «ошибочный» — так плашка
     переедет вместе с темой, а не останется светлым пятном. */
  background: color-mix(in srgb, var(--color-error) 14%, var(--color-surface));
  color: var(--color-error);
}
.crm-tag.is-us { background: var(--color-brand); color: var(--color-on-brand); }
.crm-tag.is-them::before { content: "!"; font-weight: var(--weight-bold); }
.crm-tag.is-us::before { content: "✓"; }

/* Главная фраза блока — её просила выделить Диана 18.09 */
.crm-shout {
  margin-block-start: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  text-align: center;
  box-shadow: var(--shadow-md);
}

/* ---------- Ступени ----------
   Собрано 19.09 по макету Дианы: номера, объём, иконки, флагман тёмной плашкой.
   Главное, чего на макете не было: одинаковые признаки стоят на ОДНОМ уровне во всех
   четырёх карточках. Делает это subgrid — карточка наследует строки общей сетки,
   поэтому «понимает живую речь» у всех ступеней на одной высоте. Где возможности нет,
   строка не пропадает, а гаснет: пустое место на её месте ломало бы выравнивание.
   ------------------------------------------------------------------------------- */
.crm-plans-kicker {
  margin: 0 0 var(--space-3);
  color: var(--color-brand);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.crm-plans-lead {
  margin-block-start: var(--space-4);
  color: var(--color-ink-muted);
  max-width: var(--content-measure);
}
/* Подсказка «листайте вбок» — только на телефоне, где пакеты стоят лентой.
   Прячем через display:none, а не visibility: иначе на компе остаётся пустая
   строка под заголовком блока. */
.crm-plans-swipe {
  display: none;
  width: fit-content;
  margin-block-start: var(--space-5);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-brand-soft);
  border: 1px solid color-mix(in srgb, var(--color-brand) 28%, transparent);
  color: var(--color-brand-strong);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
/* Стрелка внутри плашки покачивается — жест показан, а не описан словами
   (правка Дианы 08.10.2026: «нудно как-то»). Движение выключается у тех, кто
   просил его не показывать: иначе качающийся элемент мешает читать. */
.crm-plans-swipe::after {
  /* Альтернативный текст пустой: стрелка — картинка, и диктору читать её незачем,
     о ленте он уже сказал по aria-label (находка ревью 08.10.2026). */
  content: "→" / "";
  display: inline-block;
  margin-inline-start: var(--space-2);
  font-size: 1.1em;
  line-height: 1;
}
@media (prefers-reduced-motion: no-preference) {
  /* Три цикла, а не бесконечно: движение дольше пяти секунд, которое нельзя
     остановить, — нарушение WCAG 2.2.2, а доступность у нас неприкосновенна
     (находка критика 08.10.2026). Трёх покачиваний хватает, чтобы заметить. */
  .crm-plans-swipe::after { animation: kt-swipe-hint 1.8s ease-in-out 3; }
}
@keyframes kt-swipe-hint {
  0%, 60%, 100% { transform: translateX(0); }
  30% { transform: translateX(5px); }
}
/* В RTL лента листается в другую сторону — стрелка обязана смотреть туда же,
   иначе подсказка врёт. */
[dir="rtl"] .crm-plans-swipe::after { content: "←" / ""; }
@media (prefers-reduced-motion: no-preference) {
  [dir="rtl"] .crm-plans-swipe::after { animation-name: kt-swipe-hint-rtl; }
}
@keyframes kt-swipe-hint-rtl {
  0%, 60%, 100% { transform: translateX(0); }
  30% { transform: translateX(-5px); }
}
.crm-plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* Шесть строк шапки (номер, картинка, название, подпись, цена, кому), двенадцать
     строк признаков и строка кнопки. Приписка «единоразово» с 19.09 стоит в одной
     строке с суммой (правка Дианы), отдельной строки под неё больше нет. Признаки
     вынесены в общую сетку намеренно: только так одинаковая возможность встаёт на
     один уровень во всех четырёх карточках. */
  grid-template-rows: auto auto auto auto auto auto repeat(12, auto) auto;
  gap: var(--space-5);
  margin-block-start: var(--space-7);
}
.crm-plan {
  position: relative;
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}
.crm-plan:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* Браузер без subgrid (Safari до 16, старый Firefox) выравнивание не получит, но и
   не сломается: карточки станут обычными колонками. Проверять есть ли поддержка
   надёжнее, чем гадать по версии. */
@supports not (grid-template-rows: subgrid) {
  .crm-plans { grid-template-rows: none; align-items: stretch; }
  .crm-plan { grid-row: auto; grid-template-rows: none; }
  .crm-plan-list { grid-row: auto; grid-template-rows: none; }
}

.crm-plan-num {
  margin: 0;
  color: var(--color-brand);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  opacity: .75;
}
.crm-plan h3 {
  margin: 0;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}
.crm-plan-tag {
  margin: 0;
  color: var(--color-ink-muted);
  line-height: var(--leading-snug);
}
/* Иллюстрации ступеней — картинки Дианы (19.09), нарезаны из одного PNG с прозрачным
   фоном. Плашки под ними нет: у самих рисунков есть свечение, на плашке оно выглядело
   наклейкой. Мастера 1024×1024 лежат в design/plans-src, в прод уезжает 256×256. */
.crm-plan-icon {
  display: grid;
  place-items: center;
  height: 112px;
}
.crm-plan-icon img {
  width: 112px;
  height: 112px;
  object-fit: contain;
}

.crm-plan-price {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  /* В колонке шириной 220 px сумма 48 px и слово рядом на одну строку не влезают:
     слово переносится под сумму — тогда межстрочный зазор должен быть маленьким,
     иначе приписка отрывается от цены и читается как отдельная мысль. */
  column-gap: 0.4em;
  row-gap: 0.1em;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-ink);
}
/* «от 10 000 ₪» длиннее соседей: без этого знак шекеля уезжал на вторую строку
   и цена флагмана выглядела обрубленной. */
.crm-plan-sum { white-space: nowrap; }
.crm-plan.is-flagship .crm-plan-price { font-size: var(--text-2xl); }
/* Приписка обязательна: на присланном макете стояло «/ мес», а пакет платится один
   раз. Слово стоит сразу за суммой (правка Дианы 19.09: «один раз, не в месяц»
   отдельной строкой ей не нравилось) и снимает недоразумение до вопроса. */
.crm-plan-once {
  font-family: var(--font-base);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  white-space: nowrap;
  color: var(--color-ink-muted);
}
.crm-plan-for {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

/* Список признаков: свой subgrid, чтобы одиннадцать строк совпали у всех четырёх. */
.crm-plan-list {
  display: grid;
  grid-row: span 12;
  grid-template-rows: subgrid;
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  gap: var(--space-3);
}
.crm-plan-list li {
  position: relative;
  padding-inline-start: 2em;
  line-height: var(--leading-snug);
  font-size: var(--text-sm);
}
.crm-plan-list li::before {
  content: "";
  position: absolute;
  inset-block-start: .15em;
  inset-inline-start: 0;
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  background: var(--color-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;
}
/* «Этого тут нет» — гаснет, но остаётся на своей строке: так разница читается по
   горизонтали, а не пересчётом пунктов (просьба Дианы 19.09). */
/* Вторая строка внутри пункта. Правка Дианы 19.09: в пакетах за 5000 и 7000 первой
   строкой стоит «карточка автоматически не заполняется» — ровно на том уровне, где у
   флагмана сказано, что заполняется, чтобы разница читалась по горизонтали. А под ней,
   обычным цветом, то, что система всё-таки делает: данные уходят в таблицу. */
.crm-plan-list li .crm-li-note {
  display: block;
  margin-block-start: 0.15em;
  color: var(--color-ink-muted);
}
.crm-plan-list li.is-off .crm-li-note { color: var(--color-ink); }
.crm-plan-list li.is-off { color: var(--color-ink-muted); }
.crm-plan-list li.is-off::before {
  background: var(--color-border-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5h7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/70% no-repeat;
}

/* Флагман — тёмная плашка, как на макете. Цвета из токенов тёмной темы, поэтому
   карточка выглядит одинаково в обеих темах сайта. */
.crm-plan.is-flagship {
  background: linear-gradient(165deg, #142E63, var(--color-dark-bg));
  border-color: var(--color-brand);
  color: var(--color-on-dark);
}
.crm-plan.is-flagship h3,
.crm-plan.is-flagship .crm-plan-price { color: #fff; }
.crm-plan.is-flagship .crm-plan-num { color: #9DBBF2; opacity: 1; }
.crm-plan.is-flagship .crm-plan-tag,
.crm-plan.is-flagship .crm-plan-once,
.crm-plan.is-flagship .crm-plan-for { color: #C7D6F0; }
/* Заметки во флагмане сейчас нет, но приглушённый цвет у неё задан двумя классами и
   перебил бы светлый текст тёмной карточки: тёмно-серое на тёмно-синем. */
.crm-plan.is-flagship .crm-plan-list li .crm-li-note { color: #C7D6F0; }
.crm-plan.is-flagship .crm-plan-list li { color: var(--color-on-dark); }
.crm-plan.is-flagship .crm-plan-list li::before { background-color: #5B8DEF; }
.crm-plan-badge {
  position: absolute;
  inset-block-start: calc(-1 * var(--space-3));
  inset-inline-end: var(--space-5);
  margin: 0;
  padding: 0.2em 0.9em;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
  color: var(--color-on-gold);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
/* Кнопка флагмана — тёплая, как на макете: на тёмной карточке синяя кнопка теряется. */
.btn-gold {
  background: var(--color-gold);
  color: var(--color-on-gold);
  border: 1px solid transparent;
}
.btn-gold:hover { background: var(--color-gold-hover); }
.crm-plan .btn { align-self: end; justify-self: start; margin-block-start: var(--space-4); }

/* Полоса обещаний под ступенями */
.crm-perks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
  list-style: none;
  margin: var(--space-7) 0 0;
  padding: var(--space-5) 0 0;
  border-block-start: 1px solid var(--color-border);
}
.crm-perks li { line-height: var(--leading-snug); }
.crm-perks b { display: block; color: var(--color-brand-strong); }
.crm-perks span { display: block; margin-block-start: var(--space-2); color: var(--color-ink-muted); font-size: var(--text-sm); }

/* ---------- Как устроена оплата ---------- */
.crm-money {
  margin-block-start: var(--space-7);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
}
.crm-money h3 {
  margin: 0;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}
.crm-money ul {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  max-width: var(--content-measure);
}
.crm-money li {
  position: relative;
  padding-inline-start: 1.7em;
  line-height: var(--leading-normal);
}
.crm-money li::before {
  content: "₪";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  color: var(--color-brand);
  font-weight: var(--weight-bold);
}


/* ---------- Узкий экран ---------- */
@media (max-width: 900px) {
  .crm-hero {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding-block: var(--space-6) var(--space-5);
  }
  .crm-hero h1 { max-width: none; }
  .crm-hero .lead { max-width: none; }
  /* Снимок уходит под текст: на телефоне сначала суть, потом картинка. */
  .crm-hero-shot { order: 2; }
}

/* Планшет: четыре колонки не помещаются, идём в две — выравнивание строк остаётся
   внутри пары. */
@media (max-width: 1100px) {
  .crm-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .crm-plan { grid-row: auto; grid-template-rows: none; }
  .crm-plan-list { grid-row: auto; grid-template-rows: none; }
}

@media (max-width: 560px) {
  /* Телефон: пакеты листаются вбок (правка Дианы 08.10.2026). Колонкой друг под
     другом сравнивать их было нечем — следующий пакет оказывался «где-то внизу»,
     и чтобы сверить строку с строкой, приходилось мотать туда-обратно. Теперь
     карточка занимает 85% ширины: соседняя выглядывает справа и сама говорит,
     что список продолжается. Выравнивание по строкам тут по-прежнему выключено
     (замечание Дианы 19.09: таблица удобна для компа, не для телефона).
     Контейнер выходит за поля .container и возвращает их себе отступами —
     иначе крайняя карточка упиралась бы в край экрана без воздуха. */
  .crm-plans {
    /* Лента остаётся СЕТКОЙ, а не flex (правка Дианы 08.10.2026: «каждый
       следующий пакет выглядит, будто надписи выше идут»). Колонки раздаёт
       grid-auto-flow: column, строки — та же общая сетка, что на компе, поэтому
       одинаковые возможности у соседних пакетов стоят на одном уровне и их
       можно сравнивать глазами, листая ленту. Плата известная: где в одном
       пакете строка в три ряда, а в соседнем в один, остаётся пустое место. */
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    grid-template-rows: auto auto auto auto auto auto repeat(12, auto) auto;
    align-items: stretch;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--container-pad);
    margin-inline: calc(-1 * var(--container-pad));
    padding-inline: var(--container-pad);
    /* запас сверху и снизу: тень карточки не должна срезаться краем прокрутки */
    padding-block: var(--space-2);
    scrollbar-width: none;
  }
  .crm-plans::-webkit-scrollbar { width: 0; height: 0; }
  .crm-plan {
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    scroll-snap-align: start;
    /* наведение поднимает карточку на десктопе; в ленте прокрутки подъём
       срезался бы верхним краем, поэтому здесь его не трогаем */
  }
  .crm-plan:hover { transform: none; }
  .crm-plan-list { grid-row: span 12; grid-template-rows: subgrid; }
  /* Браузер без subgrid (Safari до 16) получает прежнюю ленту на flex: строки у
     него не выровняются, но карточки останутся карточками. Общий откат выше
     (@supports not …) сюда не достаёт — этот блок идёт позже и перебивает его,
     поэтому откат повторяется здесь (находка критика 08.10.2026). */
  @supports not (grid-template-rows: subgrid) {
    .crm-plans { display: flex; grid-auto-flow: row; grid-template-rows: none; }
    .crm-plan { grid-row: auto; grid-template-rows: none; flex: 0 0 85%; }
    .crm-plan-list { grid-row: auto; grid-template-rows: none; }
  }
  /* Подсказка видна только там, где лента и есть. */
  .crm-plans-swipe { display: block; }
  .crm-feats { grid-template-columns: 1fr; }
  .crm-shout { padding: var(--space-5); font-size: var(--text-lg); }
  .crm-money { padding: var(--space-5); }
  .crm-plan { padding: var(--space-5); }
  /* Картинка прижимается влево: весь текст карточки на телефоне выровнен по левому
     краю, и картинка по центру висела сама по себе. */
  .crm-plan-icon { height: 88px; justify-items: start; }
  .crm-plan-icon img { width: 88px; height: 88px; }
}

/* Кнопка «посмотреть, как это работает» прячется на нерусских языках вместе с
   роликом (js/crm.js). Голого атрибута hidden мало: у .btn задан display:inline-flex,
   а он сильнее браузерного правила для [hidden] — кнопка осталась бы на месте. */
.crm-hero-actions a[hidden] { display: none; }

/* ---------- Новое по сравнению с прошлым пакетом ----------
   Вариант 2 из витрины, выбран Дианой 08.10.2026. Подложка взята НЕ из
   --color-brand-soft: на тёмной теме он почти сливается с поверхностью карточки,
   и её первое замечание было ровно про это («почти не видно разницы»). Поэтому
   мешаем фирменный цвет с поверхностью сами, и добавляем кромку слева — чтобы
   строка читалась выделенной даже там, где цвет передан слабо. */
.crm-plan-list li.is-new {
  margin-inline: calc(-1 * var(--space-3));
  /* Кромка в 3px входит в поле, иначе текст и галочка выделенной строки стоят
     на эти 3px правее соседних (находка ревью 08.10.2026). */
  padding-inline: calc(2em + var(--space-3) - 3px) var(--space-3);
  padding-block: var(--space-2);
  border-radius: var(--radius-md);
  border-inline-start: 3px solid var(--color-brand);
  background: color-mix(in srgb, var(--color-brand) 26%, var(--color-surface));
  font-weight: var(--weight-semibold);
}
.crm-plan-list li.is-new::before {
  inset-inline-start: calc(var(--space-3) - 3px);
  inset-block-start: calc(var(--space-2) + .15em);
}
/* Флагман стоит тёмной плашкой, и общая подложка на нём не видна: мешаем с его
   собственным фоном, иначе выделение пропадает ровно на самой дорогой карточке.
   Цвета здесь заданы числами, а не токенами, намеренно: плашка флагмана тёмная
   в ОБЕИХ темах (см. .crm-plan.is-flagship выше — градиент #142E63 → --color-dark-bg),
   поэтому светлые значения токенов на ней дали бы обратный эффект. */
.crm-plan.is-flagship .crm-plan-list li.is-new {
  background: color-mix(in srgb, #fff 16%, transparent);
  border-inline-start-color: #9DBBF2;
}

/* ---------- Пункт «всё из прошлой ступени» ---------- */
/* Диана 19.09: в пакетах не должно быть повторов, ступень читается как «предыдущая
   плюс вот это». Первый пункт такой карточки — ссылка на нижнюю ступень, и он выделен:
   иначе теряется среди обычных строк и человек снова ищет разницу глазами. */
.crm-plan-list li.is-prev {
  font-weight: var(--weight-semibold);
  color: var(--color-brand-strong);
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--color-border);
}

/* ---------- Схема «наём против системы» ---------- */
.crm-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-6);
}
.crm-branch {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
/* Ветку с наймом подкрашиваем «тревожным» фирменным, нашу — брендовым. Оба цвета из
   токенов: свои хексы ушли бы из темы и остались бы пятном на тёмном фоне. */
.crm-branch.is-hire { border-color: color-mix(in srgb, var(--color-error) 45%, var(--color-border)); }
.crm-branch.is-system { border-color: var(--color-brand); box-shadow: var(--shadow-md); }
.crm-branch h3 {
  margin: 0;
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
}
.crm-branch.is-hire h3 { color: var(--color-error); }
.crm-branch.is-system h3 { color: var(--color-brand-strong); }

.crm-branch-steps {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
}
.crm-branch-steps li {
  position: relative;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  line-height: var(--leading-snug);
}
.crm-branch-steps li b { display: block; font-size: var(--text-lg); }
.crm-branch-steps li span { display: block; margin-block-start: var(--space-2); color: var(--color-ink-muted); font-size: var(--text-sm); }
/* Стрелка вниз между шагами — рисуем символом, а не картинкой: он переворачивается
   вместе с темой и читается скринридером как ничто (aria-hidden не нужен, это ::after). */
.crm-branch-steps li + li { margin-block-start: var(--space-6); }

/* Строки обеих веток встают на один уровень: «как платим» напротив «как платим»,
   «за год» напротив «за год» (правка Дианы 19.09 — она просила читать схему
   строками, а не двумя отдельными столбиками). Делает subgrid, как в ступенях.
   На узком экране выключено: там колонка одна, выравнивать не с чем, а строки
   растянулись бы дырами. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 720px) {
    .crm-compare {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: auto repeat(3, auto);
    }
    .crm-branch {
      display: grid;
      grid-row: 1 / -1;
      grid-template-rows: subgrid;
      gap: var(--space-6);
    }
    .crm-branch-steps {
      display: grid;
      grid-row: 2 / -1;
      grid-template-rows: subgrid;
      gap: var(--space-6);
      margin: 0;
    }
    .crm-branch-steps li + li { margin-block-start: 0; }
  }
}
.crm-branch-steps li + li::before {
  content: "↓";
  position: absolute;
  inset-block-start: calc(-1 * var(--space-5));
  inset-inline-start: 50%;
  transform: translateX(-50%);
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--color-ink-faint);
}
.crm-branch.is-system .crm-branch-steps li + li::before { color: var(--color-brand); }
/* Фраза перед кнопкой — выделена и стоит по центру (правка Дианы 08.10.2026).
   Появляется подъёмом при прокрутке: метку data-kt-reveal вешает js/home-fx.js
   на детей .fx-reveal, поэтому абзац обёрнут в такой контейнер, а не помечен
   .fx-card — карточная рамка и ховер здесь не нужны. Движение выключается само
   при prefers-reduced-motion: правило живёт в home-fx.css. */
/* Подсказка о прокрутке у схемы — та же плашка, что у пакетов. */
.crm-compare-swipe {
  display: none;
  width: fit-content;
  margin-block-start: var(--space-5);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-brand-soft);
  border: 1px solid color-mix(in srgb, var(--color-brand) 28%, transparent);
  color: var(--color-brand-strong);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.crm-compare-swipe::after {
  content: "→" / "";
  display: inline-block;
  margin-inline-start: var(--space-2);
  font-size: 1.1em;
  line-height: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .crm-compare-swipe::after { animation: kt-swipe-hint 1.8s ease-in-out 3; }
}
[dir="rtl"] .crm-compare-swipe::after { content: "←" / ""; }
@media (prefers-reduced-motion: no-preference) {
  [dir="rtl"] .crm-compare-swipe::after { animation-name: kt-swipe-hint-rtl; }
}

/* ---------- Сравнение с наймом на телефоне: такая же лента, как у пакетов ----------
   Правка Дианы 08.10.2026: «сравнение с наймом сделай такое же как пакеты, чтоб
   листалось». Две ветки стоят рядом и листаются вбок, вторая выглядывает справа,
   а строки («как платим», «за год», «что с человеком») стоят друг напротив друга —
   её же требование 19.09 читать схему строками. Выше 560px всё как было: две
   колонки, выравнивание включается с 720px. */
@media (max-width: 560px) {
  .crm-compare {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    gap: var(--space-5);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--container-pad);
    margin-inline: calc(-1 * var(--container-pad));
    padding-inline: var(--container-pad);
    padding-block: var(--space-2);
    scrollbar-width: none;
  }
  .crm-compare::-webkit-scrollbar { width: 0; height: 0; }
  .crm-branch { scroll-snap-align: start; }
  .crm-compare-swipe { display: block; }

  @supports (grid-template-rows: subgrid) {
    /* Строки общей сетки объявляем ЗДЕСЬ: без subgrid они бы только добавили
       три пустых ряда под лентой (находка ревью 08.10.2026). */
    .crm-compare { grid-template-rows: auto repeat(3, auto); }
    .crm-branch {
      display: grid;
      grid-row: 1 / -1;
      grid-template-rows: subgrid;
      gap: var(--space-6);
    }
    .crm-branch-steps {
      display: grid;
      grid-row: 2 / -1;
      grid-template-rows: subgrid;
      gap: var(--space-6);
      margin: 0;
    }
    .crm-branch-steps li + li { margin-block-start: 0; }
  }
  /* Браузер без subgrid (Safari до 16) ленту всё равно получает — просто без
     выравнивания строк. Без этого отката ветки вставали друг под другом, лента
     переставала листаться, а подсказка «Листайте вбок» врала (находка критика
     08.10.2026: у пакетов такой откат был, у схемы его забыли). */
  @supports not (grid-template-rows: subgrid) {
    .crm-compare { display: flex; grid-auto-flow: row; grid-template-rows: none; }
    .crm-branch { flex: 0 0 85%; }
  }
}
.crm-hire-note-wrap { display: grid; justify-items: center; }
.crm-hire-note {
  position: relative;
  margin-block-start: var(--space-6);
  max-width: 46ch;
  padding: var(--space-6) var(--space-6) var(--space-6);
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg,
              var(--color-brand-soft),
              color-mix(in srgb, var(--color-brand-soft) 45%, var(--color-surface)));
  border: 1px solid color-mix(in srgb, var(--color-brand) 22%, transparent);
  box-shadow: var(--shadow-md);
  text-align: center;
  text-wrap: balance;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-ink);
}
/* Тонкая полоса сверху — чтобы плашка читалась как выделение, а не как ещё одна
   карточка пакета. */
.crm-hire-note::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  /* Центрируем полосу полями, а не inset-inline-start: 50% + translateX(-50%):
     сдвиг на половину ширины считается слева направо и в RTL (иврит, арабский)
     уводит полосу на 64px в сторону (поймано ревью 08.10.2026). */
  inset-inline: 0;
  margin-inline: auto;
  width: 64px;
  height: 4px;
  border-radius: 0 0 var(--radius-pill) var(--radius-pill);
  background: var(--color-brand);
}
#hire .btn { margin-block-start: var(--space-5); }