/* То, чего в утверждённом макете страницы оплаты НЕТ вовсе, но без чего боевая страница жить
   не может: плашка с ошибкой формы, значки состояний «уже есть подписка» / «оплата не прошла» /
   «платёж обрабатывается» и простая страница документа (оферта, политика).

   Отдельный файл, а не дописка в /assets/site/buy.css: тот собирается из макета скриптом
   docs/landing/design-v2/build.py и при каждой пересборке перезаписывается — дописанное туда
   руками потерялось бы. Плюс так видно границу: buy.css — утверждённый макет, pages.css —
   дорисованное под серверные состояния, теми же цветами и в том же стиле. */

:root{ --wait:#FF9F0A }

/* Ошибка формы: та же геометрия, что у карточек макета, цвет — макетный --red */
.alert{
  margin:0 0 18px;padding:12px 14px;border-radius:14px;
  background:rgba(255,69,58,.10);border:1px solid rgba(255,69,58,.35);
  color:#B3160D;font-size:15px;line-height:1.4
}

/* Значок состояния в шапке карточки — тот же .seal из макета, другого цвета */
.seal-wait{color:var(--wait);filter:drop-shadow(0 0 12px rgba(255,159,10,.35))}
.seal-bad{color:var(--red);filter:drop-shadow(0 0 12px rgba(255,69,58,.35))}

/* Обычный абзац внутри карточки состояния */
.state-text{margin:18px 0 0;font-size:16px;line-height:1.5;color:var(--text-2)}
.state-text b{color:var(--ink);font-weight:600}

/* «Платёж обрабатывается»: крутилка вместо печати */
.spin{
  width:64px;height:64px;flex:0 0 auto;border-radius:50%;
  border:5px solid var(--gray-2);border-top-color:var(--blue);
  animation:spin 1s linear infinite
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .spin{animation-duration:2.4s} }

/* Страница документа (оферта, политика): одна колонка текста в ширину карточки */
.doc{max-width:720px;margin:0 auto}
.doc h1{margin-bottom:18px}
.doc .card{margin-top:22px}
.doc p{margin:0 0 14px;font-size:16px;line-height:1.55;color:var(--text-2)}
.doc p:last-child{margin-bottom:0}
.doc p b{color:var(--ink);font-weight:600}
.doc .btn{width:auto}

/* Факты о подписке на странице отключения автопродления: две колонки «что — значение».
   Не нумерованные шаги макета (.steps): это не порядок действий, а карточка сведений. */
.facts{margin:20px 0 0;display:grid;grid-template-columns:1fr auto;gap:10px 16px;font-size:15px}
.facts dt{color:var(--text-2)}
.facts dd{margin:0;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.facts + form{margin-top:20px}