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

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

/* ---------- Первый экран ----------
   Без картинки справа: ролик вертикальный и живёт ниже, в своём блоке.
   Колонка текста узкая — длинная строка на всю ширину не читается. */
.inv-hero { padding-block: var(--space-8) var(--space-7); }
.inv-hero h1 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  max-width: 18ch;
}
.inv-hero .lead {
  font-size: var(--text-lg);
  color: var(--color-ink-muted);
  line-height: var(--leading-snug);
  max-width: 62ch;
}

/* Цифры первого экрана: человек сравнивает продукты по ним и до блока цены
   не мотает. Галочки — псевдоэлементом, чтобы не попадать в скринридер. */
.inv-facts {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  max-width: 62ch;
}
.inv-facts li {
  position: relative;
  padding-inline-start: 1.6em;
  color: var(--color-ink);
  line-height: var(--leading-normal);
}
.inv-facts li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-brand-strong);
  font-weight: var(--weight-bold);
}

.inv-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

/* ---------- Знакомо? Пары «сейчас → станет» ---------- */
.inv-pains {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
  max-width: 900px;
}
.inv-pains 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);
}
/* Вопрос над парой («Клиент пришёл повторно?») — он задаёт случай,
   а «сейчас/станет» под ним на него отвечают. */
.inv-pain-q {
  margin: 0 0 var(--space-3);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}
.inv-was, .inv-now { margin: 0; display: block; }
.inv-now {
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: 1px dashed var(--color-border-strong);
  color: var(--color-brand-strong);
  font-weight: var(--weight-medium);
}
/* В карточке без пары «сейчас» верхняя черта не нужна — над ней вопрос. */
.inv-pain-q + .inv-now { border-block-start: 0; padding-block-start: 0; }
.inv-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);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  vertical-align: baseline;
}
.inv-tag.is-now {
  /* Не свой цвет, а разбавленный фирменный «ошибочный» — плашка переедет
     вместе с темой, а не останется светлым пятном. */
  background: color-mix(in srgb, var(--color-error) 14%, var(--color-surface));
  color: var(--color-error);
}
.inv-tag.is-will { background: var(--color-brand); color: var(--color-on-brand); }
.inv-tag.is-now::before { content: "!"; font-weight: var(--weight-bold); }
.inv-tag.is-will::before { content: "✓"; }

/* ---------- Как это выглядит: вертикальный ролик и подписи рядом ----------
   Ролик снят на телефон, он вертикальный. Без ограничения по высоте плеер
   с одной лишь width:100% разворачивает кадр 1080×1920 на всю страницу. */
.inv-look {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-7);
  align-items: center;
}
.inv-video {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  padding: var(--space-5);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.inv-video video {
  max-height: 60vh;
  max-width: 100%;
  width: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.inv-video-note {
  margin: 8px 0 0;
  color: var(--color-ink-muted);
  font-size: 0.875rem;
  text-align: center;
}

.inv-look-notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
}
.inv-look-notes li {
  padding-inline-start: var(--space-4);
  border-inline-start: 3px solid var(--color-brand);
  color: var(--color-ink);
  line-height: var(--leading-normal);
}
.inv-look-notes strong { color: var(--color-ink); }

/* ---------- Что умеет бот ---------- */
.inv-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}
.inv-cards li {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.inv-cards h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  color: var(--color-ink);
}
.inv-cards p {
  margin: 0;
  color: var(--color-ink-muted);
  line-height: var(--leading-normal);
}

/* ---------- Простые перечисления (кому подходит, цена, безопасность) ---------- */
.inv-list {
  margin: 0;
  padding-inline-start: var(--space-5);
  display: grid;
  gap: var(--space-3);
  max-width: 75ch;
  color: var(--color-ink);
  line-height: var(--leading-normal);
}
.inv-price-cta { margin-block-start: var(--space-6); }

/* ---------- Как начать ---------- */
.inv-steps {
  margin: 0 0 var(--space-6);
  padding-inline-start: var(--space-5);
  display: grid;
  gap: var(--space-3);
  max-width: 70ch;
  color: var(--color-ink);
  line-height: var(--leading-normal);
  font-size: var(--text-lg);
}

/* ---------- Оговорка про Израиль ----------
   Заметная, но не кричащая: это честная граница продукта, а не реклама. */
.inv-abroad > h2 { font-size: var(--text-xl); }
.inv-abroad > p {
  max-width: 75ch;
  padding: var(--space-5);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-inline-start: 4px solid var(--color-brand);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  line-height: var(--leading-normal);
}

/* ---------- Узкий экран ---------- */
@media (max-width: 900px) {
  .inv-look { grid-template-columns: 1fr; gap: var(--space-5); }
  .inv-hero h1 { font-size: var(--text-2xl); max-width: none; }
  .inv-video { min-height: 240px; }
  .inv-video video { max-height: 70vh; }
}