/* ══════════════════════════════════════════════════════════════════════════
   Страница цен.

   Только то, чего нет на лендинге. Шапка, подвал, кнопки, карточки и
   типографика приходят из landing.css — он подключён раньше. Описывать их
   заново значит завести вторую версию оформления, которая разойдётся с
   первой в ближайшую же правку.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Главное предложение ────────────────────────────────────────────────
   Наблюдение стоит отдельным блоком во всю ширину, а не третьей карточкой
   в ряду. Причина не в оформлении: разовая проверка отвечает на вопрос
   «как сейчас», а продукт существует ради вопроса «что изменилось».
   Поставить их рядом равными значит предложить студии выбрать между
   основным продуктом и его упрощённой версией — и половина выберет
   упрощённую, потому что она дешевле.
   ────────────────────────────────────────────────────────────────────── */

.offer {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
  gap: var(--s6);
  padding: var(--s6);
  border-color: var(--accent);
  box-shadow: var(--shadow-2);
}

.offer-badge {
  display: inline-block;
  background: var(--accent-soft); color: var(--accent);
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill); margin-bottom: var(--s3);
}

.offer-name {
  font-size: clamp(22px, 3vw, 28px); font-weight: 700;
  letter-spacing: -.025em; line-height: 1.15; margin: 0 0 var(--s3);
}

.offer-what { margin: 0 0 var(--s5); font-size: 15.5px; line-height: 1.6; color: var(--text-2); }

.offer-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s4) var(--s5);
}

.offer-side {
  display: flex; flex-direction: column; justify-content: center;
  padding-left: var(--s6); border-left: 1px solid var(--border);
}
.offer-unit { font-size: 13px; color: var(--text-3); margin: var(--s2) 0 var(--s5); }

@media (max-width: 860px) {
  .offer { grid-template-columns: 1fr; gap: var(--s5); padding: var(--s5); }
  .offer-side { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); padding-top: var(--s5); }
}

.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s4);
  /* Карточки одной высоты: список внутри растягивается, и кнопки встают на
     одну линию. Разъехавшиеся по высоте кнопки читаются как разная
     важность тарифов, хотя разница только в длине текста. */
  align-items: stretch;
}

.price { display: flex; flex-direction: column; gap: var(--s3); position: relative; }

/* Тариф для студий выделен рамкой, а не размером: карточка, которая выше
   соседних, ломает ряд на узком экране и заставляет её содержимое
   растягиваться пустотой. */
.price-lead { border-color: var(--accent); box-shadow: var(--shadow-2); }

.price-badge {
  position: absolute; top: calc(var(--s4) * -1); left: var(--s5);
  background: var(--accent); color: var(--on-accent);
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill);
}

.price-name {
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-3);
}

.price-fig { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.price-fig b {
  font-size: clamp(28px, 4vw, 36px); font-weight: 700; letter-spacing: -.03em;
  line-height: 1.05; font-variant-numeric: tabular-nums;
}
.price-fig span { font-size: 13.5px; color: var(--text-3); }

.price-for { margin: 0; font-size: 14.5px; color: var(--text-2); line-height: 1.6; }
.price-for b { color: var(--text); font-weight: 600; }

.price-list {
  list-style: none; margin: 0 0 var(--s3); padding: 0;
  display: flex; flex-direction: column; gap: var(--s2);
  font-size: 14px; color: var(--text-2);
  /* Список тянется, чтобы кнопки в соседних карточках стояли на одной
     линии. Разъехавшиеся кнопки читаются как разная важность тарифов. */
  flex: 1;
}
.price-list li { display: flex; gap: var(--s3); align-items: flex-start; line-height: 1.5; }
.price-list li::before {
  content: ""; flex: none; margin-top: 7px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

@media (max-width: 560px) {
  .price-badge { position: static; align-self: flex-start; margin-bottom: var(--s2); }
}