/* SLIST — отдельные страницы: документы (оферта, политика, правила), итог оплаты, 404.
   Те же токены и детали, что на главной: лист бумаги для документов, чек со штампом для оплаты. */

.pg { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.pg-main { flex: 1; padding: calc(var(--bar-h) + clamp(28px, 6vh, 64px)) 0 clamp(56px, 10vh, 110px); }
.pg .bar-in { grid-template-columns: 1fr auto 1fr; }

/* ---------- документы: лист с закладками ---------- */
.pg-doc { max-width: 940px; }
.pg-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.pg-tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 6px; font: 600 14px/1 var(--f-t); color: var(--ink-2); text-decoration: none; transition: background-color .18s, color .18s; }
.pg-tabs a:hover { background: var(--bar); color: var(--ink); }
.pg-tabs a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.pg-sheet { padding: clamp(22px, 4.5vw, 56px); background: var(--paper); border-radius: 8px; box-shadow: 0 46px 90px -56px var(--shadow), 0 0 0 1px var(--rule); }
.pg-sheet .lg-h { font-size: clamp(42px, 6.4vw, 78px); }
.pg-sheet .lg-lead { font-size: clamp(16px, 1.6vw, 19px); }
.pg-sheet .lg-secs p { max-width: 70ch; }
.pg-up { display: inline-flex; align-items: center; min-height: 44px; margin-top: 18px; font: 500 12.5px/1 var(--f-m); color: var(--ink-2); text-decoration: none; }
.pg-up:hover { color: var(--amber-ink); }

/* ---------- итог оплаты: чек со штампом ---------- */
.pay { display: grid; justify-items: center; }
.pay-rc { width: min(580px, 100%); padding: 30px clamp(20px, 4.5vw, 42px) calc(34px + var(--zz)); font-size: 13.5px; }
.pay-h { margin: 18px 0 16px; text-align: center; font: 900 clamp(50px, 8.4vw, 88px)/.86 var(--f-d); text-wrap: balance; }
.pay-rc dl { margin-bottom: 20px; }
.pay-state { display: grid; gap: 14px; font: 400 15.5px/1.55 var(--f-t); }
.pay-state > p:first-child { font-weight: 600; }
.pay-k { font: 600 11px/1 var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.pay-key { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 14px; border: 1.5px dashed var(--amber-ink); border-radius: 6px; background: var(--bar); }
.pay-key code { flex: 1 1 250px; min-width: 0; font: 600 clamp(13.5px, 3.7vw, 20px)/1.3 var(--f-m); letter-spacing: .03em; overflow-wrap: anywhere; user-select: all; }
.pay-key .btn { flex: none; }
.pay-steps { counter-reset: st; display: grid; gap: 10px; margin-top: 4px; }
.pay-steps li { position: relative; padding-left: 36px; }
.pay-steps li::before { counter-increment: st; content: counter(st); position: absolute; left: 0; top: -1px; font: 900 25px/1 var(--f-d); color: var(--amber-ink); }
.pay-wait { display: flex; align-items: center; gap: 12px; }
.pay-spin { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--rule-2); border-top-color: var(--amber); animation: pay-spin .8s linear infinite; }
@keyframes pay-spin { to { transform: rotate(360deg); } }
.pay-note { font-size: 13.5px; color: var(--ink-2); }
.pay-note a { font-weight: 600; color: var(--ink); }
.pay-note a[href^="tel:"] { white-space: nowrap; }
.pay-rc .btn { width: 100%; }
.pay-rc .pay-key .btn { width: auto; }
.pay-stamp { top: auto; bottom: calc(14px + var(--zz)); right: 18px; font-size: 21px; }
.pay-stamp-bad { border-color: var(--bad); color: var(--bad); background: rgba(179, 38, 30, .06); }
.pay-rc .rc-code { margin-bottom: 0; }

/* ---------- 404 ---------- */
.nf { display: grid; justify-items: start; gap: 18px; max-width: 760px; }
.nf .h2 { font-size: clamp(60px, 11vw, 150px); }
.nf p { max-width: 46ch; color: var(--ink-2); }

@media (max-width: 860px) {
  .pg .bar-now { display: none; }
  .pg .bar-in { grid-template-columns: 1fr auto; }
}