/* /pay/kurs и итог оплаты /pay/kurs/ok, /pay/kurs/fail в дизайне курса (макет 20.10.2026, К-1020-582). Только токены Catalyst.
   Белый текст на фоне не ниже 4,5:1: основные кнопки — токены --primary / --on-primary, ссылки — --accent-ink, не браузерный синий.
   Каркас и шапка страницы — AppShell и T.backTop из boot.js; здесь раскладка pk-* и поправки к template.css. */

/* Оплата: слева тёмная карточка «что покупаешь», справа белая с формой */
html[data-template="pay-kurs"] body .tpl-pay { width: min(100%, 1200px); max-width: 1200px; gap: var(--space-6); padding-block: var(--space-6); }
html[data-template="pay-kurs"] body .tpl-pay-row { --row-gap: 22px; align-items: start; }
html[data-template="pay-kurs"] body .tpl-pay-offer { position: relative; overflow: hidden; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 230px; column-gap: var(--space-4); align-content: stretch; padding: 36px; border-radius: var(--radius-card); background: var(--primary); color: var(--on-primary); box-shadow: none; }
html[data-template="pay-kurs"] body .pk-text { min-width: 0; display: grid; align-content: start; gap: 22px; }
html[data-template="pay-kurs"] body .tpl-pay-offer .tpl-head { gap: 14px; }
html[data-template="pay-kurs"] body .tpl-pay-offer .tpl-head h1 { font-family: var(--font-display); font-size: clamp(32px, 3.4vw, 46px); line-height: 1.05; font-weight: 800; letter-spacing: -.045em; color: var(--on-primary); }
html[data-template="pay-kurs"] body .tpl-pay-offer .tpl-head p { font-size: 16px; line-height: 1.6; color: color-mix(in oklch, var(--on-primary) 72%, var(--primary)); }
html[data-template="pay-kurs"] body .tpl-pay-price { color: var(--on-primary); font-family: var(--font-display); font-size: clamp(48px, 5.4vw, 72px); font-weight: 800; letter-spacing: -.06em; line-height: 1; white-space: nowrap; }
html[data-template="pay-kurs"] body .tpl-pay-features { gap: 0; margin-top: 4px; }
html[data-template="pay-kurs"] body .tpl-pay-features li { gap: 12px; padding-block: 12px; border-bottom: 1px solid color-mix(in oklch, var(--on-primary) 18%, var(--primary)); color: var(--on-primary); font-size: 15px; line-height: 1.5; }
html[data-template="pay-kurs"] body .tpl-pay-features li:first-child { border-top: 1px solid color-mix(in oklch, var(--on-primary) 18%, var(--primary)); }
html[data-template="pay-kurs"] body .tpl-pay-features .cb-i { color: var(--on-primary); margin-top: 2px; }
html[data-template="pay-kurs"] body .tpl-pay-offer .tpl-pay-note,
html[data-template="pay-kurs"] body .tpl-pay-offer .tpl-pay-subscriber { font-size: 14px; line-height: 1.6; color: color-mix(in oklch, var(--on-primary) 72%, var(--primary)); font-weight: 400; }
html[data-template="pay-kurs"] body .tpl-pay-offer .tpl-pay-subscriber { color: var(--on-primary); font-weight: 600; }
html[data-template="pay-kurs"] body .pk-art { position: relative; min-width: 0; min-height: 360px; }
html[data-template="pay-kurs"] body .pk-robot { position: absolute; right: 0; bottom: 0; width: auto; max-width: 100%; height: 100%; max-height: 100%; object-fit: contain; object-position: right bottom;
  filter: drop-shadow(3px 0 0 var(--on-primary)) drop-shadow(-3px 0 0 var(--on-primary)) drop-shadow(0 3px 0 var(--on-primary)) drop-shadow(0 -3px 0 var(--on-primary)); }

/* Форма: белая карточка с рамкой, как у плиток курса */
html[data-template="pay-kurs"] body .pk-pay .cb-card { padding: 32px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); box-shadow: none; }
html[data-template="pay-kurs"] body .pk-pay .cb-card-h h3 { font-family: var(--font-display); font-size: 28px; line-height: 1.1; font-weight: 800; letter-spacing: -.04em; }
html[data-template="pay-kurs"] body .pk-pay .cb-card-h p { margin-top: 6px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
html[data-template="pay-kurs"] body .pk-form { gap: var(--space-4); margin-top: var(--space-4); }
html[data-template="pay-kurs"] body .pk-form .cb-mn-agree { margin-top: var(--space-2); font-size: 13px; line-height: 1.6; color: var(--ink-2); }
html[data-template="pay-kurs"] body .pk-form .cb-btn.primary,
html[data-template="pay-kurs"] body .pk-result .cb-btn.primary { min-height: 54px; height: auto; padding: 15px 24px; border-radius: 40px; background: var(--primary); color: var(--on-primary); font-size: 15px; font-weight: 600; white-space: normal; text-align: center; }
html[data-template="pay-kurs"] body .pk-form .cb-btn.primary[disabled] { opacity: .45; cursor: not-allowed; }
html[data-template="pay-kurs"] body .pk-result .cb-btn.secondary { min-height: 54px; height: auto; padding: 15px 24px; border-radius: 40px; font-size: 15px; font-weight: 600; white-space: normal; text-align: center; }
html[data-template="pay-kurs"] body .cb-mn-link { color: var(--accent-ink); }
html[data-template="pay-kurs"] body .pk-foot { padding-top: var(--space-4); border-top: 1px solid var(--border); color: var(--ink-2); font-size: 13px; line-height: 1.8; }

/* Итог оплаты: одна карточка по центру */
html[data-template="pay-kurs"] body .pk-result-wrap { width: min(100%, 760px); max-width: 760px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-8); }
html[data-template="pay-kurs"] body .pk-result { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 44px 40px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); text-align: center; }
html[data-template="pay-kurs"] body .pk-result > * { min-width: 0; max-width: 100%; }
html[data-template="pay-kurs"] body .pk-result-robot { display: block; width: auto; height: 220px; max-width: 100%; margin: 0 0 22px; object-fit: contain; }
html[data-template="pay-kurs"] body .pk-result h1 { margin: 0; font-family: var(--font-display); font-size: clamp(34px, 4.6vw, 52px); line-height: 1.05; font-weight: 800; letter-spacing: -.045em; text-wrap: balance; }
html[data-template="pay-kurs"] body .pk-result .pk-lead { max-width: 560px; margin: 16px 0 0; color: var(--ink-2); font-size: 16px; line-height: 1.7; }
html[data-template="pay-kurs"] body .pk-result .pk-order { margin: 14px 0 0; font-size: 15px; }
html[data-template="pay-kurs"] body .pk-next { width: 100%; max-width: 560px; margin-top: 30px; padding: 22px 24px; border-radius: 20px; background: var(--inset); text-align: left; }
html[data-template="pay-kurs"] body .pk-next h2 { margin: 0 0 8px; font-family: var(--font-display); font-size: 22px; line-height: 1.2; font-weight: 800; letter-spacing: -.03em; }
html[data-template="pay-kurs"] body .pk-next .tpl-pay-features li { padding-block: 8px; color: var(--ink); font-size: 15px; border: 0; }
html[data-template="pay-kurs"] body .pk-next .tpl-pay-features li:first-child { border: 0; }
html[data-template="pay-kurs"] body .pk-next .tpl-pay-features .cb-i { color: var(--accent-ink); }
html[data-template="pay-kurs"] body .pk-more { max-width: 560px; margin-top: 26px; display: grid; gap: 12px; color: var(--ink-2); font-size: 15px; line-height: 1.7; }
html[data-template="pay-kurs"] body .pk-more p { margin: 0; }
html[data-template="pay-kurs"] body .pk-more b { color: var(--ink); }
html[data-template="pay-kurs"] body .pk-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }

/* Тёмная тема: тёмный робот на тёмной карточке, светлая обводка из токена текста */
html[data-theme="dark"][data-template="pay-kurs"] body .pk-result-robot { filter: drop-shadow(2px 0 0 var(--ink)) drop-shadow(-2px 0 0 var(--ink)) drop-shadow(0 2px 0 var(--ink)) drop-shadow(0 -2px 0 var(--ink)); }

@media (max-width: 1100px) {
  html[data-template="pay-kurs"] body .tpl-pay-offer { grid-template-columns: minmax(0, 1fr); }
  html[data-template="pay-kurs"] body .pk-art { display: none; }
}
@media (max-width: 959px) {
  html[data-template="pay-kurs"] body .tpl-pay { gap: var(--space-5); padding-block: var(--space-4); }
  html[data-template="pay-kurs"] body .tpl-pay-offer { padding: 28px; }
  html[data-template="pay-kurs"] body .pk-pay .cb-card { padding: 22px; }
}
@media (max-width: 620px) {
  html[data-template="pay-kurs"] body .pk-result-wrap { padding-inline: 0; padding-top: var(--space-4); }
  html[data-template="pay-kurs"] body .pk-result { padding: 30px 22px; }
  html[data-template="pay-kurs"] body .pk-result-robot { height: 170px; }
  html[data-template="pay-kurs"] body .pk-actions { flex-direction: column; align-items: stretch; width: 100%; }
}