/* Страница оплаты. Значения — только из ../tokens.css */

/* ── Экран 1 ──────────────────────────────────────────────── */
.pay-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr); align-items: center; gap: var(--space-8); }
.pay-hero h1 { font-size: var(--size-display); font-weight: var(--weight-bold); letter-spacing: -0.075em; line-height: var(--line-display); }
.pay-hero__lead { max-width: var(--text-width); margin-top: var(--space-6); font-size: var(--size-lead); line-height: var(--line-lead); }
.pay-hero__extra {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: var(--border-thin) solid var(--color-on-dark-line);
  color: var(--color-on-dark);
  font-style: italic;
}
.pay-hero__extra i { color: var(--color-lime); font-style: normal; font-weight: var(--weight-black); }
.pay-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-7); }
.pay-hero__updated { color: var(--color-on-dark-dim); font-size: var(--size-kicker); font-weight: var(--weight-black); letter-spacing: var(--track-caps); text-transform: uppercase; }
.pay-hero__legal { margin-top: var(--space-5); color: var(--color-on-dark-dim); font-size: var(--size-small); }

/* ── Что теряешь ──────────────────────────────────────────── */
.pain-list { counter-reset: pain; border-top: var(--border-thin) solid var(--color-ink); }
.pain-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: var(--border-thin) solid var(--color-line);
  font-size: var(--size-h4);
  line-height: 1.5;
}
.pain-list li::before {
  counter-increment: pain;
  content: "0" counter(pain);
  color: var(--color-muted);
  font-size: var(--size-kicker);
  font-weight: var(--weight-black);
  letter-spacing: var(--track-kicker);
}
.pain-list b { font-weight: var(--weight-black); }
/* Подсветка бежит за прокруткой: активная строка заливается лаймом.
   Отрицательный margin держит текст на месте, заливка выходит за края */
.pain-list li {
  margin-inline: calc(-1 * var(--space-5));
  padding-inline: var(--space-5);
  transition: background var(--dur-slow) var(--ease-out);
}
.pain--aktiven { background: var(--color-lime); }
.pain__total { margin-top: var(--space-7); font-size: var(--size-h3); font-weight: var(--weight-bold); letter-spacing: var(--track-tight); line-height: 1.15; }

/* ── Цифры автора ─────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-bottom: var(--space-7); }
.stats dt { color: var(--color-lime); font-size: var(--size-metric); font-weight: var(--weight-bold); letter-spacing: var(--track-tight); }
.stats dd { margin: var(--space-2) 0 0; color: var(--color-on-dark); font-size: var(--size-small); }
.about__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: var(--space-8); }
.about__quote { font-size: var(--size-h4); font-weight: var(--weight-bold); line-height: 1.5; }
.about__quote mark { background: var(--color-lime); color: var(--color-ink); }
.about__note { margin-top: var(--space-5); color: var(--color-on-dark); }
.about__photo { width: 100%; max-width: 420px; justify-self: end; border: var(--border-thin) solid var(--color-lime); }

/* ── Что даёт доступ ──────────────────────────────────────── */
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.pack { display: flex; flex-direction: column; padding: var(--space-6); border: var(--border-thin) solid var(--color-ink); background: var(--color-dark); color: var(--color-inverse); }
.pack h3 { margin-bottom: var(--space-5); font-size: var(--size-h4); font-weight: var(--weight-black); letter-spacing: var(--track-tight); }
.pack h3 mark { background: var(--color-lime); color: var(--color-ink); }
.pack ul { display: grid; gap: var(--space-3); }
.pack li { position: relative; padding-left: var(--space-5); color: var(--color-on-dark); font-size: var(--size-small); line-height: 1.65; }
.pack li::before { position: absolute; left: 0; color: var(--color-lime); content: "—"; }
.pack b { color: var(--color-inverse); font-weight: var(--weight-black); }

/* ── Почему сейчас ────────────────────────────────────────── */
.reasons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: var(--border-thin) solid var(--color-ink); }
.reason { padding: var(--space-6); border-right: var(--border-thin) solid var(--color-ink); border-bottom: var(--border-thin) solid var(--color-ink); }
.reason:nth-child(2n) { border-right: 0; }
.reason__num { color: var(--color-muted); font-size: var(--size-kicker); font-weight: var(--weight-black); letter-spacing: var(--track-kicker); }
.reason h3 { margin: var(--space-4) 0; font-size: var(--size-h4); font-weight: var(--weight-black); letter-spacing: var(--track-tight); }
.reason p { color: var(--color-muted); line-height: 1.7; }
.reason mark { background: var(--color-lime); color: var(--color-ink); }

/* ── Чек-лист «что получишь» ──────────────────────────────── */
.checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
.checklist li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); }
.checklist i {
  display: flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  background: var(--color-lime);
  color: var(--color-ink);
  font-size: var(--size-small);
  font-style: normal;
  font-weight: var(--weight-black);
}
.checklist h3 { font-size: var(--size-h4); font-weight: var(--weight-black); letter-spacing: var(--track-tight); }
.checklist p { margin-top: var(--space-2); color: var(--color-muted); line-height: 1.7; }

/* ── Сравнение с обедом ───────────────────────────────────── */
.lunch { text-align: center; }
.lunch h2 { max-width: 900px; margin: 0 auto; font-size: var(--size-h2); font-weight: var(--weight-semi); letter-spacing: -0.055em; }
.lunch p { max-width: var(--text-width); margin: var(--space-6) auto 0; font-size: var(--size-lead); font-style: italic; line-height: var(--line-lead); }
.lunch mark { background: var(--color-lime); color: var(--color-ink); }
.section--dark .lunch p { color: var(--color-on-dark); }
.lunch .btn { margin-top: var(--space-7); }

/* ── Адаптив ──────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .pay-hero__grid, .about__grid { grid-template-columns: 1fr; }
  .packs { grid-template-columns: repeat(2, 1fr); }
  .about__photo { max-width: 100%; justify-self: start; }
}

@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .packs, .reasons, .checklist { grid-template-columns: 1fr; }
  .reason { border-right: 0; }
  .pay-hero__actions .btn, .lunch .btn { width: 100%; }
  .pain-list li { font-size: var(--size-body); }
}

/* Фото на первом экране: показываем целиком, без обрезки под пропорцию */
.pay-hero__photo { width: 100%; height: auto; border: var(--border-thin) solid var(--color-lime); }