/* Экран оплаты. По прототипу владельца «subscription-prototype.html»
   (23.09.2026), на токенах приложения: светлая тема получается сама.
   Пять требований приложения к оферте — в карточке плана, ничего не
   спрятано за раскрытиями: доказательственное значение имеет то, что
   человек видел, а не то, что мог бы открыть. Раскрываются только
   вопросы под карточкой. */
.pay-wrap { max-width: 940px; margin: 0 auto; position: relative }
/* Шрифты — как в прототипе: системный гротеск и системный моноширинный
   для цифр (правка владельца). Переопределены токены, поэтому за ними
   идут и кнопки, и поле, и цифры с классом t-num. */
#v-pay .pill-mono { font-family: var(--font-mono) }
/* Тонкая сетка сверху — «техничность» без шума. */
.pay-wrap::before { content: ''; position: absolute; inset: -40px 0 auto; height: 460px; z-index: -1; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 75%); mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 75%) }

/* ── Герой ── */
.pay-hero { text-align: center; margin: 8px 0 34px }
/* Без подписки герой — заголовок и строка, карточка плана сразу под ним. */
.pay-hero.is-free { margin: 4px 0 22px }
.pay-hero.is-free h3 { font-size: 27px; letter-spacing: -.025em }
.pay-big { position: relative; display: inline-block; margin-bottom: 6px }
/* Поля по краям — под заливку: у градиентного текста с поджатыми
   буквами края цифр выходят за рамку и срезались (правка владельца). */
.pay-big b { display: block; padding: .04em .1em .06em; font-family: var(--font-mono); font-size: 128px; line-height: 1; font-weight: 700; letter-spacing: -.05em;
  background: linear-gradient(170deg, var(--text) 0%, var(--lime) 42%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent }
.pay-big::after { content: ''; position: absolute; inset: -30px -40px; z-index: -1; border-radius: 50%;
  background: radial-gradient(ellipse, var(--accent-wash-2, var(--accent-wash)), transparent 70%); animation: pay-glow 3.4s ease-in-out infinite }
@keyframes pay-glow { 0%, 100% { opacity: .55 } 50% { opacity: 1 } }
@media (max-width: 560px) { .pay-big b { font-size: 86px } }
.pay-unit { font-size: 15px; color: var(--muted); margin-bottom: 16px }
.pay-hero h3 { margin: 0 0 8px; font-size: 23px; font-weight: 700; letter-spacing: -.02em }
.pay-hero > p { margin: 0 auto; max-width: 430px; font-size: 14px; line-height: 1.6; color: var(--muted) }
.pay-timeline { max-width: 430px; margin: 24px auto 0 }
.pay-tl { display: block; height: 6px; border-radius: var(--r-pill); background: var(--panel-3); overflow: hidden }
.pay-tl i { display: block; width: 0; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--lime)); transition: width 1.2s var(--ease) }
.pay-tlx { display: flex; justify-content: space-between; margin-top: 9px; font-size: 10.5px; color: var(--muted-3) }

/* ── Переключатель тарифов (когда их больше одного) ── */
.pay-switch { display: flex; justify-content: center; margin-bottom: 22px }
/* Как в прототипе: ползунок переезжает под выбранный тариф, подпись и
   цена выровнены по центру строки; цена — плашкой, как «−32 %» в
   прототипе, но с суммой: её видно до выбора (приложение к оферте). */
.pay-sw { position: relative; display: inline-flex; gap: 5px; padding: 5px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--panel) 75%, transparent); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px) }
.pay-thumb { position: absolute; top: 5px; left: 0; height: calc(100% - 10px); width: 0; border-radius: var(--r-pill); z-index: 0;
  background: var(--accent) linear-gradient(135deg, #25D063, var(--accent)); box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 32%, transparent);
  transition: transform .38s var(--ease-bounce), width .38s var(--ease-bounce) }
.pay-sw button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 0 22px 0 26px; border: 0; border-radius: var(--r-pill); cursor: pointer; white-space: nowrap;
  background: transparent; color: var(--muted); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; transition: color .22s }
.pay-sw button b { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; line-height: 1;
  letter-spacing: .02em; background: var(--panel-3); color: var(--text) }
.pay-sw button[aria-selected="true"] { color: var(--on-accent) }
.pay-sw button[aria-selected="true"] b { background: rgba(5, 42, 18, .28); color: var(--on-accent) }
@media (hover: hover) { .pay-sw button[aria-selected="false"]:hover { color: var(--text) } }
@media (max-width: 400px) { .pay-sw button { padding: 0 14px 0 16px; gap: 7px } }
.pay-sw button:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px }

/* ── Карточка плана ── */
.pay-plan { position: relative; overflow: hidden; border-radius: 26px; padding: 0; margin: 0;
  background: linear-gradient(168deg, color-mix(in srgb, var(--panel-2) 88%, transparent), color-mix(in srgb, var(--panel) 92%, transparent));
  -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow) }
.pay-plan::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-edge-2), transparent) }
.pay-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 28px 32px 22px; border-bottom: 1px solid var(--line) }
.pay-title { margin: 0 0 6px; font-size: 27px; font-weight: 700; letter-spacing: -.025em }
.pay-days { font-size: 13px; color: var(--muted) }
.pay-pricebox { flex: none; text-align: right }
.pay-price { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; white-space: nowrap }
.pay-price .t-num { font-size: 56px; line-height: 1; font-weight: 700; letter-spacing: -.045em;
  background: linear-gradient(140deg, var(--text), var(--lime) 55%, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent }
.pay-price small { font-family: var(--font-mono); font-size: 22px; font-weight: 600; color: var(--muted) }
/* Выгода года — полной фразой из приложения к оферте, под шапкой плана. */
.pay-gain { margin: 0; padding: 12px 32px; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.5; color: var(--accent-ink);
  background: var(--accent-wash) }
@media (max-width: 620px) { .pay-gain { padding: 12px 20px } }
/* Даты оплачиваемого периода. */
.pay-period { display: grid; gap: 2px; margin-bottom: 12px; padding: 11px 15px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line) }
.pay-period-k { font-size: 12px; color: var(--muted) }
.pay-period b { font-size: 14px; font-weight: 700 }
.pay-period p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted) }
.pay-perday { display: inline-flex; margin-top: 9px; padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--accent-wash); border: 1px solid var(--accent-edge); font-size: 11px; font-weight: 600; color: var(--accent-ink) }
@media (max-width: 620px) {
  /* Телефон: цена справа от названия, а не под ним — строка экрана
     дороже, чем ширина. */
  .pay-head { gap: 12px; padding: 18px 16px 14px }
  .pay-title { font-size: 21px }
  .pay-price .t-num { font-size: 38px }
  .pay-price small { font-size: 17px }
  .pay-perday { margin-top: 6px; font-size: 10px; padding: 4px 8px }
  .pay-pricebox { text-align: right }
  .pay-go { min-height: 52px; font-size: 15.5px }
  .pay-renew p, .pay-mail-why { font-size: 11.5px }
}

.pay-feat { padding: 28px 32px }
.pay-fk { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink) }
.pay-fk::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--accent-edge), transparent) }
.pay-flist { display: grid; grid-template-columns: 1fr 1fr; gap: 13px }
@media (max-width: 700px) { .pay-flist { grid-template-columns: 1fr } .pay-feat { padding: 22px 20px } }
.pay-fitem { position: relative; isolation: isolate; overflow: hidden; padding: 19px; border-radius: 18px;
  background: linear-gradient(158deg, var(--accent-wash), color-mix(in srgb, var(--panel-2) 55%, transparent) 55%);
  border: 1px solid var(--accent-edge); transition: transform .28s var(--ease), border-color .28s, box-shadow .28s }
.pay-fitem::before { content: ''; position: absolute; top: -60px; right: -60px; width: 150px; height: 150px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, var(--accent-wash-2, var(--accent-wash)), transparent 70%); opacity: .7; transition: .35s }
.pay-fitem::after { content: ''; position: absolute; left: 19px; right: 19px; bottom: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--lime)); transform: scaleX(0); transform-origin: left; transition: transform .38s var(--ease) }
@media (hover: hover) {
  .pay-fitem:hover { transform: translateY(-4px); border-color: var(--accent-edge-2); box-shadow: 0 16px 40px rgba(0, 0, 0, .3) }
  .pay-fitem:hover::before { opacity: 1; transform: scale(1.25) }
  .pay-fitem:hover::after { transform: scaleX(1) }
}
.pay-fic { width: 44px; height: 44px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 14px;
  background: linear-gradient(145deg, var(--lime), var(--accent)); color: var(--on-accent);
  box-shadow: 0 8px 20px var(--accent-wash-2, var(--accent-wash)), inset 0 1px 0 rgba(255, 255, 255, .35) }
.pay-fic .sw-ico { width: 21px; height: 21px; stroke-width: 2.3 }
.pay-fitem b { display: block; margin-bottom: 6px; font-size: 15.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.015em }
.pay-fitem span:not(.pay-fic) { display: block; font-size: 12.5px; line-height: 1.55; color: var(--muted) }
.pay-fitem em { display: inline-block; margin-top: 11px; padding: 5px 10px; border-radius: var(--r-pill); font-style: normal;
  font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--lime);
  background: color-mix(in srgb, var(--lime) 10%, transparent); border: 1px solid color-mix(in srgb, var(--lime) 24%, transparent) }
:root[data-theme="light"] .pay-fitem em { color: var(--accent-ink) }

/* ── Оплата ── */
.pay-pay { padding: 20px 32px 24px; border-bottom: 1px solid var(--line) }
@media (max-width: 620px) { .pay-pay { padding: 14px 16px 18px } }
.pay-renew { display: flex; gap: 12px; margin-bottom: 16px; padding: 12px 15px; border-radius: 14px;
  background: var(--brass-wash); border: 1px solid var(--brass-edge); border-left: 3px solid var(--brass) }
.pay-renew .sw-ico { width: 17px; height: 17px; margin-top: 1px; color: var(--brass) }
.pay-renew p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted) }
.pay-renew b { color: var(--text) }
/* Поле почты для чека. Стоит над кнопкой, а не в конце формы: человек
   должен увидеть его до того, как потянется платить. */
.pay-mail { display: block }
.pay-mail > span { display: block; margin-bottom: 9px; font-size: 12.5px; color: var(--muted) }
.pay-inp { position: relative; display: block }
.pay-inp .field { width: 100%; min-height: 52px; padding-left: 46px; border-radius: 14px }
.pay-at { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted-3); pointer-events: none }
.pay-inp .field:focus + .pay-at { color: var(--accent-ink) }
/* Пояснение к почте, строка ЮKassa и реквизиты — тише основного текста,
   как в прототипе (правка владельца). */
/* Строка оферты с исполнителем и пояснение к почте — обязательные по
   приложению к оферте, поэтому тише основного текста, но не ниже 4,5 по
   контрасту (находка QA). Совсем бледной осталась только строка ЮKassa. */
.pay-mail-why { margin: 8px 0 16px; font-size: 11.5px; line-height: 1.5; color: var(--muted) }
#v-pay { --pay-faint: color-mix(in srgb, var(--muted) 64%, var(--bg)) }
.pay-go { width: 100%; min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 11px;
  border-radius: var(--r-pill); font-size: 16.5px; font-weight: 700; position: relative; overflow: hidden;
  border: 0; color: var(--on-accent); background: linear-gradient(135deg, #2AE06D, var(--accent) 60%, var(--accent-deep));
  box-shadow: 0 14px 40px var(--accent-edge), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease) }
@media (hover: hover) {
  .pay-go:hover:not(:disabled) { transform: translateY(-3px); background: linear-gradient(135deg, #2AE06D, var(--accent) 60%, var(--accent-deep));
    box-shadow: 0 20px 52px var(--accent-edge-2), inset 0 1px 0 rgba(255, 255, 255, .3) }
}
.pay-go:active:not(:disabled) { transform: translateY(-1px) }
.pay-go:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px }
.pay-go::after { content: ''; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent); animation: pay-sheen 5s ease-in-out infinite }
@keyframes pay-sheen { 0%, 74% { left: -130% } 100% { left: 140% } }
.pay-err { margin: 12px 0 0; color: var(--bad-ink); font-size: 13px }
.pay-secure { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 12px }
.pay-secure span { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--pay-faint) }
.pay-secure .sw-ico { width: 13px; height: 13px }
/* Ссылка на оферту и реквизиты — рядом с кнопкой, а не в подвале. */
.pay-legal { margin: 14px 0 0; font-size: 11px; line-height: 1.55; color: var(--muted) }
.pay-legal a, .pay-a a { color: var(--accent-ink) }
.pay-note { margin-bottom: 16px; padding: 16px 18px; border-radius: 14px; background: var(--panel-2); border: 1px solid var(--line) }
.pay-note h3 { margin: 0 0 8px; font-size: 16px; font-weight: 600 }
.pay-note p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 13px }

/* ── Вопросы ── */
.pay-faq { margin-top: 18px; overflow: hidden; border-radius: 26px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 60%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px) }
.pay-q + .pay-q { border-top: 1px solid var(--line) }
.pay-q button { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 24px; border: 0; background: transparent; color: var(--text); font-family: inherit; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer }
@media (hover: hover) { .pay-q button:hover { background: var(--panel-2) } }
.pay-q button:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: -2px }
.pay-q button .sw-ico { width: 16px; height: 16px; color: var(--muted); transition: transform .3s var(--ease) }
.pay-q.is-open button .sw-ico { transform: rotate(180deg); color: var(--accent-ink) }
.pay-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease) }
.pay-a p { overflow: hidden; margin: 0; padding: 0 24px; font-size: 13px; line-height: 1.6; color: var(--muted) }
.pay-q.is-open .pay-a { grid-template-rows: 1fr }
.pay-q.is-open .pay-a p { padding-bottom: 19px }

/* Врезка на месте упора. Латунь, а не красный: это не ошибка человека. */
.paywall {
  border: 1px solid var(--brass-edge); background: var(--brass-wash);
  border-radius: var(--r-md); padding: var(--sp-3); margin: var(--sp-3) 0;
}
.paywall-title { font-weight: 500; margin-bottom: 4px; }
.paywall p { margin: 0 0 var(--sp-3); color: var(--muted); font-size: 13px; line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  .pay-big::after, .pay-go::after { animation: none }
  .pay-fitem, .pay-tl i, .pay-a { transition: none }
}