/* ============================================================
   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);
  background: var(--color-dark-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);
  background: var(--color-dark-bg);
  line-height: 0; /* убирает щель под <video> */
  margin-block-start: var(--space-6);
}
.crm-player video {
  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-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);
}
.crm-shout-note {
  margin-block-start: var(--space-4);
  text-align: center;
  color: var(--color-ink-muted);
}

/* ---------- Ступени ----------
   Собрано 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);
}
.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) {
  /* Телефон: одна колонка, выравнивание по строкам выключено намеренно — в узкой
     колонке оно дало бы дыры между пунктами (замечание Дианы 19.09: таблица удобна
     для компа, не для телефона). */
  .crm-plans { grid-template-columns: 1fr; }
  .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; }

/* ---------- Пункт «всё из прошлой ступени» ---------- */
/* Диана 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); }
.crm-hire-note {
  margin-block-start: var(--space-6);
  max-width: var(--content-measure);
  line-height: var(--leading-normal);
}
#hire .btn { margin-block-start: var(--space-5); }