/* Версия 2 лендинга: главная про ДЕНЬГИ, экраны уехали на отдельную страницу.
 *
 * ⚠️ ЭТОТ ФАЙЛ ДОБАВЛЯЕТ, А НЕ ЗАМЕНЯЕТ. Первая версия (`/landing`) остаётся
 * живой по решению владельца 02.09.2026 — «не удаляй прошлое», — поэтому ни
 * одного правила существующих файлов здесь не переопределяется. Всё новое
 * названо своими классами: `.gains`, `.calc`, `.collage`, `.inside`.
 *
 * Палитра и ритм берутся из `tokens.css` — своих цветов тут нет.
 */

/* ── Коллаж экранов в первом экране ────────────────────────────────────
 * ⚠️ ЭТО СТАТИЧНАЯ КАРТИНКА, И ЭТО РЕШЕНИЕ. Играющие макеты живут на странице
 * возможностей; здесь они показали бы «как это выглядит» ценой того, что
 * человек начнёт их разглядывать вместо того, чтобы прочитать, сколько он
 * теряет. Первый экран говорит о деньгах, экраны — только фон этому разговору.
 */
.collage {
  position: relative;
  height: clamp(260px, 30vw, 400px);
  margin-top: clamp(20px, 2.5vw, 32px);
  /* Карточки НАМЕРЕННО выше своего места: экран, обрезанный снизу, читается
     как продолжающийся, а вписанный целиком — как картинка. Держит обрезку
     `overflow`, а не маска (разбор выше). */
  overflow: hidden;
}
/* Шторка цветом страницы: нижний край растворяется, а не обрывается линейкой. */
.collage::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  height: 42%; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--bg) 92%);
}
.collage-card {
  position: absolute;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-app);
  transform-origin: top left;
  /* Внутри лежит настоящая разметка макета в натуральную величину, а нужный
     размер даёт `scale`: перевёрстывать экран под коллаж значило бы завести
     его вторую копию, которая разойдётся с первой. */
}
.collage-card > * { pointer-events: none; }
.collage-1 { left: 0;    top: 0;    width: 58%; z-index: 3; }
.collage-2 { right: 0;   top: 4%;   width: 46%; z-index: 2; }
.collage-3 { left: 32%;  top: 40%;  width: 40%; z-index: 4; }
@media (max-width: 820px) {
  .collage { height: 240px; }
  .collage-1 { width: 84%; }
  .collage-2 { width: 66%; top: 12%; }
  .collage-3 { display: none; }
}

/* ── Четыре выгоды ─────────────────────────────────────────────────────
 * Крупное число слева, объяснение справа. Число здесь несёт смысл, а не
 * украшает: «−190 ₽» и «340 ₽» — настоящие замеры живого магазина, и они же
 * потом стоят в примере расчёта. */
.gains { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; }
.gain { display: grid; gap: 6px 28px; padding: clamp(22px, 3vw, 34px); background: var(--bg); }
@media (min-width: 860px) {
  .gain { grid-template-columns: minmax(0, 190px) minmax(0, 1fr); align-items: baseline; }
}
.gain-num {
  font-family: var(--mono); font-size: clamp(26px, 3.4vw, 38px); font-weight: 600;
  letter-spacing: -0.03em; color: var(--accent); line-height: 1;
}
.gain-num.is-warn { color: var(--warn, #B45309); }
.gain h3 { font-size: clamp(17px, 2vw, 21px); letter-spacing: -0.02em; margin: 0 0 6px; }
.gain p { color: var(--fg-2); margin: 0; max-width: 62ch; }
.gain-note { display: block; margin-top: 8px; font-size: 13.5px; color: var(--fg-3); }

/* ── Пример расчёта ───────────────────────────────────────────────────
 * ⚠️ ДОПУЩЕНИЯ НАЗВАНЫ НА ЭКРАНЕ, А НЕ СПРЯТАНЫ В СНОСКУ. Это решение
 * владельца 02.09.2026 — считать выгоду «на примере магазина». Пример без
 * видимых допущений превращается в обещание, а обещание придётся защищать
 * перед первым же клиентом, который сядет считать. */
.calc { display: grid; gap: 22px; }
@media (min-width: 900px) { .calc { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 56px; align-items: start; } }
.calc-rows { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.calc-row { display: flex; align-items: baseline; gap: 16px; padding: 14px 18px; border-top: 1px solid var(--line); }
.calc-row:first-child { border-top: 0; }
.calc-row span { min-width: 0; color: var(--fg-2); font-size: 14.5px; }
.calc-row b { margin-left: auto; font-family: var(--mono); font-size: 15px; white-space: nowrap; }
.calc-row--sum { background: var(--bg-2); }
.calc-row--sum span { color: var(--fg); font-weight: 500; }
.calc-row--sum b { font-size: 19px; font-weight: 600; }
.calc-note { font-size: 13.5px; color: var(--fg-3); margin: 14px 0 0; max-width: 56ch; }

/* ── «Что внутри» — список без экранов ─────────────────────────────────
 * Разделы названы словами и ведут на страницу возможностей. Макетов здесь
 * нет намеренно: главная отвечает на вопрос «зачем», а не «как выглядит». */
.inside { display: grid; gap: 10px; }
@media (min-width: 720px) { .inside { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; } }
.inside a {
  display: flex; align-items: baseline; gap: 12px; padding: 13px 2px;
  border-bottom: 1px solid var(--line); color: var(--fg); text-decoration: none;
  transition: color .18s, border-color .18s;
}
.inside a:hover { color: var(--accent); border-color: var(--accent); }
.inside .n { font-family: var(--mono); font-size: 12px; color: var(--fg-3); }
.inside .t { font-size: 15.5px; }
.inside .d { margin-left: auto; color: var(--fg-3); font-size: 13.5px; text-align: right; }
@media (max-width: 560px) { .inside .d { display: none; } }