/* ============================================================================
   pro.css — страница «Подписка» (11.10.2026). Стиль «Ключница»: золото PRO, фиолет MAX,
   у бесплатного — спокойный серо-зелёный. Крупно и плотно: без огромных пустот.
   ============================================================================ */
:root { --pr-pro: #e6bf55; --pr-pro2: #b8892a; --pr-max: #b28cff; --pr-max2: #6b3fd1; --pr-free: #7fc7a4; --pr-line: rgba(255,255,255,.1); --pr-box: rgba(18,16,12,.72); }
body.light { --pr-line: rgba(0,0,0,.1); --pr-box: rgba(255,253,247,.9); --pr-pro: #a57c12; --pr-max: #6b3fd1; --pr-free: #2f8a5f; }


/* --- шапка: название слева, деталь с данными справа (как на остальных страницах) --- */
.page-content .hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; text-align: left; padding: 8px 0 22px; margin: 0; }
.page-content .hero h1 { justify-content: flex-start; font-family: Unbounded, sans-serif; font-weight: 700; font-size: clamp(30px, 4.4vw, 54px); line-height: 1.05; margin: 0; text-align: left; }
.page-content .hero h1::after { display: none; }
.page-content .hero h1 span { background: none; -webkit-text-fill-color: currentColor; color: var(--text-color); text-shadow: none; }
.hero-text { display: flex; flex-direction: column; gap: 12px; }
.page-content .hero .hero-sub { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: .1em; color: var(--pr-pro); text-align: left; }
.page-content .hero .hero-sub::before, .page-content .hero .hero-sub::after { display: none; }

/* --- деталь в шапке: «ключи» — сколько страниц открыто тебе --- */
.pr-keys { display: grid; grid-template-columns: auto auto; gap: 6px 22px; align-items: center; padding: 16px 20px; border-radius: 16px; border: 1px solid rgba(212,175,55,.35); background: var(--pr-box); min-width: 330px; }
.pr-keys-load { font-size: 15px; opacity: .7; }
.pr-keys .big { grid-row: span 3; font: 700 46px/1 Unbounded, sans-serif; color: var(--pr-pro); }
.pr-keys .big small { display: block; margin-top: 6px; font: 600 13px Onest, sans-serif; color: var(--text-secondary); letter-spacing: .04em; }
.pr-keys .row { display: flex; justify-content: space-between; gap: 14px; font-size: 15px; }
.pr-keys .row b { font-weight: 800; }
.pr-bar { grid-column: 1 / -1; display: flex; height: 8px; border-radius: 6px; overflow: hidden; background: rgba(128,128,128,.2); }
.pr-bar i { display: block; height: 100%; }
.pr-bar .f { background: var(--pr-free); } .pr-bar .p { background: var(--pr-pro); } .pr-bar .m { background: var(--pr-max); }

/* --- заголовки блоков --- */
.pr-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 34px 0 14px; }
.pr-head h2 { margin: 0; font: 700 24px/1.2 Unbounded, sans-serif; display: flex; align-items: center; gap: 12px; }
.pr-num { font: 700 14px Onest, sans-serif; padding: 4px 9px; border-radius: 8px; border: 1px solid rgba(212,175,55,.5); color: var(--pr-pro); }
.pr-period { display: inline-flex; padding: 4px; border-radius: 999px; border: 1px solid var(--pr-line); background: var(--pr-box); }
.pr-period button { border: 0; background: none; color: inherit; font: 700 15px Onest, sans-serif; padding: 9px 18px; border-radius: 999px; cursor: pointer; }
.pr-period button.on { background: var(--pr-pro); color: #1a1405; }
.pr-period b { color: var(--pr-free); margin-left: 4px; } .pr-period .on b { color: #1d4d2f; }

/* --- мой тариф --- */
.pr-me { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; }
.pr-me:empty { display: none; }
.pr-card { padding: 20px 22px; border-radius: 18px; border: 1px solid var(--pr-line); background: var(--pr-box); }
.pr-card h3 { margin: 0 0 10px; font: 700 18px Onest, sans-serif; display: flex; align-items: center; gap: 10px; }
.pr-tier { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font: 800 16px Onest, sans-serif; letter-spacing: .03em; }
.pr-tier.guest, .pr-tier.free { background: rgba(127,199,164,.14); color: var(--pr-free); border: 1px solid rgba(127,199,164,.4); }
.pr-tier.pro { background: rgba(230,191,85,.15); color: var(--pr-pro); border: 1px solid rgba(230,191,85,.5); }
.pr-tier.max { background: rgba(178,140,255,.15); color: var(--pr-max); border: 1px solid rgba(178,140,255,.5); }
.pr-me p { margin: 10px 0 0; font-size: 16px; line-height: 1.5; }
.pr-log { margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--text-secondary); }
.pr-log li { padding: 5px 0; border-top: 1px dashed var(--pr-line); display: flex; justify-content: space-between; gap: 10px; }
.pr-views { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 6px; }
.pr-views button { padding: 11px 12px; border-radius: 12px; border: 1px solid var(--pr-line); background: none; color: inherit; font: 700 15px Onest, sans-serif; cursor: pointer; text-align: left; }
.pr-views button.on { border-color: var(--pr-pro); background: rgba(230,191,85,.12); }
.pr-views small { display: block; font-weight: 500; font-size: 13px; color: var(--text-secondary); margin-top: 2px; }

.pr-lv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pr-lv div { position: relative; padding: 12px 12px 16px; border-radius: 12px; border: 1px solid var(--pr-line); overflow: hidden; }
.pr-lv div.me { border-color: var(--pr-pro); }
.pr-lv b { display: block; font: 700 30px/1 Unbounded, sans-serif; }
.pr-lv span { font-size: 14px; color: var(--text-secondary); }
.pr-lv i { position: absolute; left: 0; bottom: 0; height: 5px; }
.pr-lv .guest i, .pr-lv .free i { background: var(--pr-free); } .pr-lv .pro i { background: var(--pr-pro); } .pr-lv .max i { background: var(--pr-max); }
.pr-lv .pro b { color: var(--pr-pro); } .pr-lv .max b { color: var(--pr-max); }

/* --- тарифы --- */
.pr-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pr-plan { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 20px; border: 1px solid var(--pr-line); background: var(--pr-box); }
.pr-plan.pro { border-color: rgba(230,191,85,.6); box-shadow: 0 0 0 1px rgba(230,191,85,.25), 0 18px 50px rgba(230,191,85,.08); }
.pr-plan.max { border-color: rgba(178,140,255,.55); }
.pr-plan .tag { position: absolute; top: -12px; right: 18px; padding: 4px 12px; border-radius: 999px; font: 800 12px Onest, sans-serif; letter-spacing: .05em; background: var(--pr-pro); color: #1a1405; }
.pr-plan h3 { margin: 0; font: 700 22px Unbounded, sans-serif; }
.pr-plan.free h3 { color: var(--pr-free); } .pr-plan.pro h3 { color: var(--pr-pro); } .pr-plan.max h3 { color: var(--pr-max); }
.pr-price { font: 700 38px/1 Unbounded, sans-serif; }
.pr-price small { font: 600 15px Onest, sans-serif; color: var(--text-secondary); margin-left: 6px; }
.pr-price-sub { font-size: 14px; color: var(--text-secondary); min-height: 20px; }
.pr-plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; flex: 1; }
.pr-plan li { display: flex; gap: 10px; align-items: baseline; font-size: 16px; line-height: 1.4; }
.pr-plan li i { width: 16px; flex: 0 0 16px; }
.pr-plan li .fa-check { color: var(--pr-free); } .pr-plan li .fa-xmark { color: #8a8a8a; } .pr-plan li.no { color: var(--text-secondary); }
.pr-btn { display: inline-flex; justify-content: center; align-items: center; gap: 9px; padding: 13px 18px; border-radius: 14px; border: 1px solid var(--pr-line); background: none; color: inherit; font: 700 16px Onest, sans-serif; cursor: pointer; text-decoration: none; }
.pr-btn.pro { background: linear-gradient(140deg, #f5d97a, #c99a2e); color: #1a1405; border: 0; }
.pr-btn.max { background: linear-gradient(140deg, #c9a7ff, #6b3fd1); color: #fff; border: 0; }
.pr-btn[disabled] { opacity: .55; cursor: default; }
.pr-btn:hover:not([disabled]) { filter: brightness(1.08); }
.pr-pay-note { margin-top: 14px; padding: 14px 18px; border-radius: 14px; border: 1px dashed rgba(230,191,85,.55); font-size: 16px; line-height: 1.5; background: rgba(230,191,85,.06); }

/* --- приглашение --- */
.pr-invite { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
.pr-link { display: flex; gap: 8px; margin: 12px 0; }
.pr-link input { flex: 1; min-width: 0; padding: 13px 14px; border-radius: 12px; border: 1px solid var(--pr-line); background: rgba(0,0,0,.25); color: inherit; font: 600 16px Onest, sans-serif; }
body.light .pr-link input { background: #fff; }
.pr-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 6px; }
.pr-steps div { padding: 12px; border-radius: 12px; border: 1px solid var(--pr-line); font-size: 15px; line-height: 1.4; }
.pr-steps b { display: block; font: 700 22px Unbounded, sans-serif; color: var(--pr-pro); margin-bottom: 4px; }
.pr-meter { display: flex; gap: 5px; margin: 10px 0 6px; }
.pr-meter i { flex: 1; height: 10px; border-radius: 4px; background: rgba(128,128,128,.22); }
.pr-meter i.on { background: var(--pr-pro); }
.pr-friends { margin: 8px 0 0; padding: 0; list-style: none; font-size: 15px; max-height: 180px; overflow: auto; }
.pr-friends li { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px dashed var(--pr-line); }
.pr-friends .ok { color: var(--pr-free); } .pr-friends .wait { color: var(--text-secondary); }

/* --- сравнение --- */
.pr-legend { display: flex; gap: 8px; }
.pr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font: 600 14px Onest, sans-serif; text-decoration: none; color: inherit; border: 1px solid var(--pr-line); }
.pr-chip.free { border-color: rgba(127,199,164,.45); background: rgba(127,199,164,.08); }
.pr-chip.pro { border-color: rgba(230,191,85,.5); background: rgba(230,191,85,.08); }
.pr-chip.max { border-color: rgba(178,140,255,.5); background: rgba(178,140,255,.08); }
.pr-chip.pro::after { content: 'PRO'; font: 800 10px Onest, sans-serif; color: var(--pr-pro); }
.pr-chip.max::after { content: 'MAX'; font: 800 10px Onest, sans-serif; color: var(--pr-max); }
.pr-legend .pr-chip::after { content: none; }
.pr-chip:hover { filter: brightness(1.15); }
.pr-cmp { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.pr-sec { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--pr-line); background: var(--pr-box); }
.pr-sec h4 { margin: 0 0 4px; font: 700 18px Onest, sans-serif; display: flex; align-items: center; gap: 10px; }
.pr-sec h4 i { color: var(--pr-pro); }
.pr-sec .cnt { font-size: 14px; color: var(--text-secondary); margin-bottom: 10px; }
.pr-sec .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-sec .pr-bar { margin-bottom: 10px; }

/* --- вопросы --- */
.pr-faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-items: start; }
.pr-faq details { padding: 15px 18px; border-radius: 14px; border: 1px solid var(--pr-line); background: var(--pr-box); }
.pr-faq summary { cursor: pointer; font: 700 17px Onest, sans-serif; }
.pr-faq p { margin: 10px 0 0; font-size: 16px; line-height: 1.55; }

@media (max-width: 980px) {
    .pr-plans, .pr-cmp, .pr-faq, .pr-me, .pr-invite { grid-template-columns: 1fr; }
    .pr-keys { min-width: 0; width: 100%; }
}
@media (max-width: 560px) { .pr-steps { grid-template-columns: 1fr; } .pr-head h2 { font-size: 20px; } }

/* ===== 11.10 вторая версия: визуал ===== */
.pr-hint { font: 600 14px Onest, sans-serif; color: var(--text-secondary); }
.pr-chip.off { opacity: .7; } .pr-chip.off::after { content: none; }
/* мозаика */
.pr-mosaic { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.pr-msec { padding: 16px 18px; border-radius: 18px; border: 1px solid var(--pr-line); background: var(--pr-box); }
.pr-msec-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pr-msec-h i { color: var(--pr-pro); } .pr-msec-h b { font: 700 17px Onest, sans-serif; } .pr-msec-h span { margin-left: auto; font-size: 14px; color: var(--text-secondary); }
.pr-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.pr-tile { position: relative; display: flex; align-items: flex-end; min-height: 64px; padding: 9px 10px; border-radius: 10px; color: inherit; text-decoration: none; font: 600 13px/1.25 Onest, sans-serif; overflow: hidden; transition: transform .15s; }
.pr-tile span { position: relative; }
.pr-tile.free { background: linear-gradient(150deg, rgba(127,199,164,.38), rgba(127,199,164,.12)); }
.pr-tile.pro { background: linear-gradient(150deg, rgba(230,191,85,.42), rgba(230,191,85,.12)); }
.pr-tile.max { background: linear-gradient(150deg, rgba(178,140,255,.45), rgba(178,140,255,.12)); }
.pr-tile.off { filter: grayscale(.75) brightness(.6); }
body.light .pr-tile.off { filter: grayscale(.8) opacity(.55); }
.pr-tile.off > i { position: absolute; top: 8px; right: 9px; font-size: 13px; opacity: .9; }
.pr-tile:hover { transform: translateY(-2px); filter: none; }
.pr-tip { position: fixed; z-index: 3000; pointer-events: none; padding: 8px 11px; border-radius: 10px; background: #0d0d0f; color: #f0f0f0; border: 1px solid var(--pr-pro); font: 600 14px Onest, sans-serif; }
/* шторка */
.pr-demo { padding: 18px 20px; border-radius: 20px; border: 1px solid var(--pr-line); background: var(--pr-box); }
.pr-demo-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.pr-demo-h b { display: block; font: 700 18px Onest, sans-serif; } .pr-demo-h span { font-size: 14px; color: var(--text-secondary); }
.pr-demo-tags { display: flex; gap: 8px; } .pr-demo-tags span { padding: 6px 12px; border-radius: 999px; font: 700 13px Onest, sans-serif; }
.pr-demo-tags .free { background: rgba(127,199,164,.15); color: var(--pr-free); } .pr-demo-tags .pro { background: rgba(230,191,85,.16); color: var(--pr-pro); }
.pr-demo-box { position: relative; height: 380px; border-radius: 14px; overflow: hidden; cursor: ew-resize; user-select: none; color: var(--text-color); touch-action: pan-y; }
.pr-demo-layer { position: absolute; inset: 0; padding: 8px 4px; background: var(--pr-box); }
.pr-demo-layer svg { width: 100%; height: 300px; display: block; }
.pr-demo-layer.blur > svg, .pr-demo-layer.blur > .pr-demo-sum { filter: blur(9px) saturate(.6); opacity: .8; }
.pr-demo-sum { display: flex; flex-wrap: wrap; gap: 8px 26px; padding: 4px 6px 12px; font-size: 16px; }
.pr-demo-sum b { font: 800 22px Unbounded, sans-serif; }
.pr-demo-lock { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); padding: 10px 16px; border-radius: 12px; background: var(--pr-pro); color: #1a1405; font: 800 16px Onest, sans-serif; }
.pr-demo-knob { position: absolute; top: 0; bottom: 0; left: 50%; width: 4px; margin-left: -2px; background: var(--pr-pro); z-index: 3; }
.pr-demo-knob::before { content: ''; position: absolute; top: 50%; left: 50%; width: 64px; height: 44px; margin: -22px 0 0 -32px; border-radius: 22px; background: var(--pr-pro); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.pr-demo-knob i { position: absolute; top: 50%; margin-top: -8px; font-size: 15px; color: #1a1405; z-index: 1; }
.pr-demo-knob i:first-child { left: -20px; } .pr-demo-knob i:last-child { left: 10px; }
/* тарифы: иконка + шкала доступа */
.pr-ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 24px; }
.pr-plan.free .pr-ico { background: rgba(127,199,164,.16); color: var(--pr-free); }
.pr-plan.pro .pr-ico { background: linear-gradient(140deg, #f5d97a, #b8892a); color: #1a1405; }
.pr-plan.max .pr-ico { background: linear-gradient(140deg, #c9a7ff, #6b3fd1); color: #fff; }
.pr-pm > div { height: 10px; border-radius: 6px; background: rgba(128,128,128,.18); overflow: hidden; }
.pr-pm i { display: block; height: 100%; border-radius: 6px; }
.pr-plan.free .pr-pm i { background: var(--pr-free); } .pr-plan.pro .pr-pm i { background: var(--pr-pro); } .pr-plan.max .pr-pm i { background: var(--pr-max); }
.pr-pm span { display: block; margin-top: 6px; font-size: 14px; color: var(--text-secondary); } .pr-pm b { color: var(--text-color); font-size: 16px; }
@media (max-width: 980px) { .pr-mosaic { grid-template-columns: 1fr; } .pr-demo-box { height: 330px; } }

/* пробный PRO */
.pr-trial { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; }
.pr-ring { width: 150px; height: 150px; color: var(--text-color); }
.pr-trial-on { font: 700 16px Onest, sans-serif; color: var(--pr-free); }
.pr-trial-off { font-size: 15px; color: var(--text-secondary); }
@media (max-width: 560px) { .pr-trial { grid-template-columns: 1fr; } }

/* шапка-витрина */
.page-content .hero h1 { font-size: clamp(40px, 5.6vw, 84px); line-height: .98; letter-spacing: -.03em; }
.page-content .hero h1 span { display: block; }
.page-content .hero h1 em { font-style: normal; color: var(--pr-pro); }
.page-content .hero .hero-sub { order: -1; }
.pr-hero-p { max-width: 560px; font-size: 18px; line-height: 1.55; color: var(--text-secondary); }
.pr-hero-p b { color: var(--text-color); }
.pr-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.pr-keys { min-width: 360px; padding: 22px 24px; }
.pr-keys .big { font-size: 64px; }
/* мозаика: закрытые плитки сохраняют цвет тарифа и метку */
.pr-tile.off { filter: none; opacity: .55; background-blend-mode: multiply; }
body.light .pr-tile.off { filter: none; opacity: .5; }
.pr-tile.off:hover { opacity: 1; }
.pr-tile em { position: absolute; top: 7px; right: 8px; font: 800 10px/1 Onest, sans-serif; letter-spacing: .05em; font-style: normal; padding: 3px 6px; border-radius: 6px; }
.pr-tile.pro em { background: var(--pr-pro); color: #1a1405; }
.pr-tile.max em { background: var(--pr-max); color: #fff; }
.pr-tile.off > i { display: none; }

/* ================= ОПЛАТА КРИПТОЙ (pro-pay.js, 12.10.2026) ================= */
.pr-crypto { margin: -4px 0 12px; font-size: 14px; color: #b9b3a2; }
.pr-crypto b { color: var(--pr-pro); }
.pr-crypto i { color: #f7931a; margin-right: 4px; }
.py-wrap { position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.72); backdrop-filter: blur(4px); }
.py-box { position: relative; width: min(720px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 26px 28px 22px; border-radius: 6px;
  background: linear-gradient(180deg, #16150f, #0c0b08); border: 1px solid rgba(201,168,90,.45); box-shadow: 0 40px 90px -30px #000; color: #ece8dc; font-family: Onest, sans-serif; }
.py-box::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, #d9bd72, transparent); }
.py-x { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; border-radius: 4px; border: 1px solid rgba(255,255,255,.12); background: none; color: #bbb; font-size: 16px; cursor: pointer; }
.py-x:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.py-kicker { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: #d9bd72; }
.py-box h3 { margin: 6px 0 8px; font: 700 24px/1.25 Unbounded, sans-serif; }
.py-sum { color: #d9bd72; }
.py-p { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: #b9b3a2; }
.py-nets { display: grid; gap: 8px; }
.py-net { display: grid; grid-template-columns: 170px 1fr; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.06); }
.py-net-n { font-size: 15px; font-weight: 700; color: #ddd8ca; }
.py-coins { display: flex; flex-wrap: wrap; gap: 8px; }
.py-coin { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 120px; padding: 9px 12px; border-radius: 4px; cursor: pointer; text-align: left;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.02); color: #ece8dc; font-family: inherit; transition: border-color .3s, background .3s; }
.py-coin b { font-size: 16px; }
.py-coin small { font-size: 12px; color: #9b968a; }
.py-coin.st b { color: #8fd1a8; }
.py-coin:hover { border-color: rgba(217,189,114,.7); background: rgba(217,189,114,.06); }
.py-coin.wait { opacity: .5; cursor: progress; }
.py-err { margin-top: 12px; padding: 10px 12px; border-radius: 4px; border: 1px solid rgba(248,113,113,.45); color: #fca5a5; font-size: 14px; }
.py-inv { display: grid; grid-template-columns: 184px 1fr; gap: 20px; align-items: center; margin: 14px 0; }
.py-qr { width: 184px; height: 184px; padding: 8px; border-radius: 4px; background: #fff; display: grid; place-items: center; color: #333; font-size: 12px; text-align: center; }
.py-fields label { display: block; margin: 0 0 6px; font-size: 13px; color: #9b968a; }
.py-fields label b { color: #ece8dc; }
.py-amt { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; font-size: 17px; }
.py-amt b { font: 700 28px/1 Unbounded, sans-serif; color: #d9bd72; }
.py-addr { display: flex; align-items: center; gap: 10px; }
.py-addr code { flex: 1; min-width: 0; padding: 9px 10px; border-radius: 4px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); font-size: 13.5px; word-break: break-all; color: #ece8dc; }
.py-copy { flex: 0 0 auto; padding: 8px 11px; border-radius: 4px; border: 1px solid rgba(217,189,114,.5); background: none; color: #d9bd72; font: 600 13px Onest, sans-serif; cursor: pointer; }
.py-copy:hover { background: rgba(217,189,114,.1); }
.py-warn { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 7px; font-size: 14px; line-height: 1.45; color: #c9c3b3; }
.py-warn i { width: 18px; color: #e3a07a; }
.py-status { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 4px; border: 1px solid rgba(143,209,168,.35); background: rgba(143,209,168,.06); font-size: 15px; }
.py-status.late { border-color: rgba(227,160,122,.45); background: rgba(227,160,122,.06); }
.py-status.off { border-color: rgba(255,255,255,.15); background: none; color: #aaa; }
.py-dot { width: 9px; height: 9px; border-radius: 50%; background: #8fd1a8; flex: 0 0 auto; animation: pyPulse 1.6s ease-in-out infinite; }
@keyframes pyPulse { 50% { opacity: .25; } }
.py-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 13px; color: #8b877c; }
.py-link { background: none; border: 0; color: #d9bd72; font: 600 14px Onest, sans-serif; cursor: pointer; padding: 0; }
.py-ok { text-align: center; padding: 18px 0 6px; }
.py-ok > i { font-size: 52px; color: #8fd1a8; }
.py-ok p { font-size: 16px; color: #c9c3b3; margin: 0 0 18px; }
body.light .py-box { background: #fbfaf6; color: #1d1b16; }
body.light .py-p, body.light .py-warn, body.light .pr-crypto { color: #555; }
body.light .py-coin { color: #1d1b16; border-color: rgba(0,0,0,.15); }
body.light .py-addr code { background: #f1efe8; color: #1d1b16; border-color: rgba(0,0,0,.12); }
@media (max-width: 640px) {
  .py-box { padding: 22px 16px 16px; }
  .py-net { grid-template-columns: 1fr; }
  .py-inv { grid-template-columns: 1fr; justify-items: center; }
  .py-coin { min-width: 0; flex: 1 1 45%; }
}
@media (prefers-reduced-motion: reduce) { .py-dot { animation: none; } }

/* ================= ОФОРМЛЕНИЕ v2 (12.10.2026): «Ключница» в духе новой шапки =================
   Острые углы, тонкие золотые линии, гравировка. Декор несёт данные: кольцо-связка из всех страниц в шапке,
   «клубные карты» тарифов с выбитым числом открытых страниц. */
:root { --pr-r: 6px; --pr-gold-line: rgba(201,168,90,.38); }

/* шапка: рамка-«сертификат» с уголками */
.page-content .hero { position: relative; padding: 26px 30px; margin-top: 8px; border: 1px solid var(--pr-gold-line); border-radius: var(--pr-r);
  background: radial-gradient(520px 260px at 85% 50%, rgba(201,168,90,.10), transparent 70%), linear-gradient(120deg, rgba(201,168,90,.07), transparent 45%); }
.page-content .hero::before, .page-content .hero::after { content: ''; position: absolute; width: 18px; height: 18px; border: 2px solid #d9bd72; pointer-events: none; }
.page-content .hero::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.page-content .hero::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.page-content .hero h1 em { font-style: normal; background: linear-gradient(100deg, #f5dd8f, #c99a2e 60%, #f5dd8f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pr-hero-p { font-size: 17px; line-height: 1.5; max-width: 560px; }

/* деталь справа: кольцо, где каждое деление — страница */
.pr-keys { display: grid; grid-template-columns: 184px auto; gap: 8px 26px; align-items: center; position: relative; padding: 0; border: 0; border-radius: 0; background: none; min-width: 0; }
.pr-ring { grid-row: 1; grid-column: 1; width: 184px; height: 184px; }
.pr-ring path { fill: none; stroke-width: 15; opacity: .22; transition: opacity .3s, stroke-width .3s; cursor: help; }
.pr-ring path.on { opacity: 1; }
.pr-ring path:hover { stroke-width: 19; opacity: 1; }
.pr-ring .f { stroke: var(--pr-free); } .pr-ring .p { stroke: var(--pr-pro); } .pr-ring .m { stroke: var(--pr-max); }
.pr-ring-c { grid-row: 1; grid-column: 1; display: grid; place-items: center; align-content: center; text-align: center; pointer-events: none; }
.pr-ring-c b { display: block; font: 700 46px/1 Unbounded, sans-serif; color: #f1dca0; }
body.light .pr-ring-c b { color: #8a6510; }
.pr-ring-c span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.25; color: var(--text-secondary); }
.pr-ring-l { display: grid; gap: 10px; }
.pr-ring-l div { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 10px; font-size: 16px; min-width: 210px; }
.pr-ring-l i { width: 12px; height: 12px; }
.pr-ring-l i.f { background: var(--pr-free); } .pr-ring-l i.p { background: var(--pr-pro); } .pr-ring-l i.m { background: var(--pr-max); }
.pr-ring-l b { font: 700 20px Unbounded, sans-serif; }

/* заголовки блоков: гравированный номер и золотая линия до края */
.pr-head h2 { flex: 1 1 auto; }
.pr-head h2::after { content: ''; flex: 1; height: 1px; margin-left: 6px; background: linear-gradient(90deg, var(--pr-gold-line), transparent); }
.pr-num { border-radius: 2px; padding: 5px 9px; background: linear-gradient(180deg, rgba(201,168,90,.16), rgba(201,168,90,.04)); border-color: rgba(217,189,114,.6); letter-spacing: .08em; }
.pr-period { border-radius: var(--pr-r); }
.pr-period button { border-radius: 4px; }

/* все карточки — острые углы */
.pr-card, .pr-plan, .pr-demo, .pr-faq details { border-radius: var(--pr-r) !important; }
.pr-btn { border-radius: 4px; }

/* ---------- тарифы: «клубные карты» ---------- */
.pr-plan { padding: 14px 14px 18px; gap: 14px; }
.pr-face { position: relative; overflow: hidden; aspect-ratio: 1.62; padding: 16px 18px; border-radius: 10px; display: flex; flex-direction: column; color: #f3efe4;
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.18); }
.pr-face::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(100deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px); }
.pr-face::after { content: ''; position: absolute; top: -40%; bottom: -40%; width: 40%; left: -60%; transform: rotate(18deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); transition: left .9s cubic-bezier(.7,0,.2,1); }
.pr-plan:hover .pr-face::after { left: 130%; }
.pr-face.free { background: linear-gradient(135deg, #3a3f3c, #1d211f 55%, #2b302d); }
.pr-face.pro { background: linear-gradient(135deg, #f3d98a, #c99a2e 38%, #8a6514 70%, #d7b257); color: #1c1505; }
.pr-face.max { background: linear-gradient(135deg, #2a1d45, #120c1f 50%, #3b2770); }
.pr-face > * { position: relative; z-index: 1; }
.pr-face-top { display: flex; align-items: center; gap: 10px; }
.pr-chipc { width: 34px; height: 26px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
  background: linear-gradient(90deg, transparent 32%, rgba(0,0,0,.25) 33% 35%, transparent 36% 64%, rgba(0,0,0,.25) 65% 67%, transparent 68%),
    linear-gradient(0deg, transparent 46%, rgba(0,0,0,.25) 47% 53%, transparent 54%), linear-gradient(135deg, #f0d898, #b8902e); }
.pr-face-brand { font: 700 12px Unbounded, sans-serif; letter-spacing: .22em; opacity: .7; }
.pr-face .tag { position: static; margin-left: auto; padding: 4px 8px; border-radius: 3px; font: 800 11px Onest, sans-serif; letter-spacing: .08em; background: #1c1505; color: #f3d98a; }
.pr-face h3 { margin: 12px 0 2px; font: 700 26px/1 Unbounded, sans-serif; color: inherit !important; letter-spacing: .02em; }
.pr-face .pr-price { font-size: 34px; margin-top: 4px; }
.pr-face .pr-price small { color: inherit; opacity: .75; }
.pr-face .pr-price-sub { color: inherit; opacity: .75; min-height: 0; }
.pr-face-num { margin-top: auto; display: flex; align-items: baseline; gap: 10px; }
.pr-face-num span { font: 600 22px/1 Consolas, 'Courier New', monospace; letter-spacing: .14em; text-shadow: 0 1px 0 rgba(255,255,255,.25), 0 -1px 0 rgba(0,0,0,.45); }
.pr-face-num small { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; opacity: .7; }
.pr-face-bar { height: 3px; margin-top: 8px; background: rgba(0,0,0,.25); }
.pr-face-bar i { display: block; height: 100%; background: currentColor; opacity: .8; }
.pr-face.free .pr-face-bar i { background: var(--pr-free); opacity: 1; }
.pr-face.max .pr-face-bar i { background: var(--pr-max); opacity: 1; }
.pr-plan.pro { border-color: rgba(217,189,114,.6); box-shadow: 0 0 0 1px rgba(217,189,114,.2), 0 24px 60px -30px rgba(217,189,114,.5); }
.pr-plan.max { border-color: rgba(178,140,255,.5); }
.pr-plan .pr-crypto { margin: 0 6px; }
.pr-plan ul { padding: 0 6px; }
.pr-plan .pr-btn { margin: 0 6px; }

/* строка «Принимаем криптой» */
.pr-accept { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; padding: 12px 16px; border: 1px solid var(--pr-line); border-radius: var(--pr-r); background: var(--pr-box); font-size: 14px; }
.pr-accept[hidden] { display: none; }
.pr-acc-h { font-weight: 700; color: #d9bd72; margin-right: 6px; }
.pr-acc-i { display: inline-flex; gap: 6px; padding: 5px 9px; border: 1px solid var(--pr-line); border-radius: 3px; color: var(--text-secondary); }
.pr-acc-i b { color: var(--text-color); }
.pr-acc-n { margin-left: auto; color: var(--text-secondary); }

body.light .pr-face.free { background: linear-gradient(135deg, #e5e9e6, #c9d0cb); color: #1d211f; }
@media (max-width: 1100px) { .pr-keys { grid-template-columns: 184px; } .pr-ring-l { grid-row: 2; } }
@media (max-width: 640px) {
  .page-content .hero { padding: 18px 16px; }
  .pr-face { aspect-ratio: auto; min-height: 190px; }
  .pr-acc-n { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .pr-face::after { transition: none; } }
.page-content .hero { margin-bottom: 18px; }
.pr-face { aspect-ratio: auto; min-height: 236px; }   /* ниже, без пустоты посередине */
.pr-face h3 { margin-top: 16px; }

/* ================= ОКНО ОПЛАТЫ v2 (12.10.2026): 3 шага — сеть → монета → оплата ================= */
.py-box { width: min(760px, 100%); }
.py-steps { display: flex; align-items: center; gap: 10px; margin: 0 44px 18px 0; font-size: 14px; color: #8b877c; }
.py-steps span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.py-steps b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); font-size: 12px; }
.py-steps span.on { color: #f1dca0; } .py-steps span.on b { border-color: #d9bd72; background: #d9bd72; color: #1a1405; }
.py-steps span.done { color: #8fd1a8; } .py-steps span.done b { border-color: rgba(143,209,168,.6); }
.py-steps i { flex: 1; height: 1px; background: rgba(255,255,255,.12); min-width: 16px; }
.py-plan { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; margin-bottom: 16px; border: 1px solid rgba(201,168,90,.3);
  border-radius: 4px; background: rgba(201,168,90,.06); font-size: 15px; color: #ddd8ca; }
.py-plan > span { display: inline-flex; align-items: center; gap: 10px; }
.py-plan b { font: 700 20px Unbounded, sans-serif; color: #f1dca0; }
.py-box h3 { display: flex; align-items: center; gap: 10px; font-size: 22px; margin: 0 0 14px; }
.py-h-ic { display: inline-flex; }
.py-ic { display: block; flex: 0 0 auto; }
.py-pair { display: inline-flex; } .py-pair .py-ic + .py-ic { margin-left: -8px; box-shadow: 0 0 0 2px #14130e; border-radius: 50%; }

.py-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.py-grid.coins { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.py-tile { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 6px; cursor: pointer; text-align: left; overflow: hidden;
  border: 1px solid rgba(255,255,255,.1); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); color: #ece8dc; font-family: inherit;
  transition: border-color .2s cubic-bezier(.2,.8,.2,1), background .2s cubic-bezier(.2,.8,.2,1), transform .2s cubic-bezier(.2,.8,.2,1);
  animation: pyIn .3s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes pyIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.py-tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--nc, #d9bd72); transform: scaleY(0); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.py-tile:hover { border-color: rgba(217,189,114,.55); background: linear-gradient(180deg, rgba(217,189,114,.08), rgba(217,189,114,.02)); transform: translateY(-2px); }
.py-tile:hover::before { transform: scaleY(1); }
.py-tile:disabled { cursor: progress; opacity: .55; }
.py-tile.wait { opacity: 1; border-color: #d9bd72; }
.py-tile-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.py-tile-t b { font-size: 17px; }
.py-tile-t small { font-size: 13px; color: #9b968a; line-height: 1.3; }
.py-tile.coin { padding: 16px; }
.py-tile.coin .py-tile-t b { font-size: 20px; }
.py-tile-p { margin-left: auto; text-align: right; font: 700 18px Unbounded, sans-serif; color: #f1dca0; white-space: nowrap; }
.py-tile-p small { display: block; font: 500 12px Onest, sans-serif; color: #9b968a; }
.py-note { margin: 16px 0 0; font-size: 14px; color: #9b968a; }
.py-note i { color: #d9bd72; margin-right: 6px; }
body.light .py-tile { color: #1d1b16; border-color: rgba(0,0,0,.12); background: #fff; }
body.light .py-plan { color: #333; }
@media (max-width: 700px) { .py-grid { grid-template-columns: 1fr 1fr; } .py-steps { font-size: 12px; } }
@media (max-width: 440px) { .py-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .py-tile { animation: none; transition: none; } }

/* плашка «есть неоплаченный счёт» на шаге 1 и окно «сначала аккаунт» */
.py-resume { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: -4px 0 16px; border: 1px solid rgba(143,209,168,.4); border-radius: 4px; background: rgba(143,209,168,.06); font-size: 15px; }
.py-resume > span:nth-child(2) { flex: 1; }
.py-reg > i { color: #d9bd72; }
.py-reg small { display: block; margin-top: 8px; color: #8b877c; }
.py-reg .py-link { display: block; margin: 14px auto 0; }

/* шаг «Способ оплаты»: крипта работает, карта и СБП — «скоро появится» */
.py-grid.methods { grid-template-columns: 1fr; gap: 10px; }
.py-tile.method { padding: 18px; gap: 16px; }
.py-tile.method .py-tile-t b { font-size: 19px; }
.py-m-ic { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; font-size: 22px; color: #fff; background: var(--mc); }
.py-m-go { margin-left: auto; color: #d9bd72; transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.py-tile.method:hover .py-m-go { transform: translateX(4px); }
.py-tile.soon { cursor: not-allowed; opacity: .6; }
.py-tile.soon:hover { transform: none; border-color: rgba(255,255,255,.1); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); }
.py-tile.soon:hover::before { transform: scaleY(0); }
.py-tile.soon .py-m-ic { filter: grayscale(.7); }
.py-soon { margin-left: auto; padding: 4px 9px; border-radius: 3px; border: 1px solid rgba(255,255,255,.18); font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #b8b3a6; white-space: nowrap; }
.py-err.info { border-color: rgba(217,189,114,.45); color: #e8d7a6; background: rgba(217,189,114,.06); }
/* «Почувствуй разницу»: замазанная половина — без читаемых данных */
.pr-demo-layer.blur > svg { filter: blur(18px) saturate(.4); opacity: .7; }
.pr-demo-layer.blur > .pr-demo-sum { filter: blur(5px); opacity: .75; }
.pr-demo-layer.blur { background: #100f0b; }   /* непрозрачный: сквозь замазку не просвечивает чёткий слой */
body.light .pr-demo-layer.blur { background: #f7f5ef; }

/* ============================================================================
   13.10.2026 — главная страница подписки (body.pr-main) в своём оформлении «Витрина»:
   глубокий сине-чёрный фон, свет в цветах тарифов (золото PRO, фиолет MAX), стеклянные карточки,
   у PRO — переливающаяся обводка. Только pro.html; pro-pro / pro-max — как были.
   ============================================================================ */
body.pr-main:not(.light):not(.mx-black) { --bg-color: #06070c; --bg-gradient: none; background: #06070c; }
body.pr-main:not(.light):not(.mx-black)::before, body.pr-main:not(.light):not(.mx-black)::after { background: none !important; }
body.pr-main:not(.light) { --pr-box: rgba(16, 18, 28, .62); --pr-line: rgba(255, 255, 255, .09); }
body.pr-main.light { --pr-box: rgba(255, 255, 255, .78); }

/* фон: три мягких пятна света + сетка, тающая к краям */
.pr-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.pr-bg i { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform; }
.pr-bg .a { width: 52vw; height: 52vw; left: -14vw; top: -18vw; background: radial-gradient(closest-side, rgba(230, 191, 85, .30), transparent); animation: prDriftA 38s linear infinite alternate; }
.pr-bg .b { width: 48vw; height: 48vw; right: -14vw; top: 22vh; background: radial-gradient(closest-side, rgba(140, 92, 255, .32), transparent); animation: prDriftB 44s linear infinite alternate; }
.pr-bg .c { width: 40vw; height: 40vw; left: 28vw; bottom: -22vw; background: radial-gradient(closest-side, rgba(56, 189, 248, .14), transparent); animation: prDriftA 52s linear infinite alternate-reverse; }
.pr-bg .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%); }
@keyframes prDriftA { to { transform: translate(6vw, 4vh) scale(1.08); } }
@keyframes prDriftB { to { transform: translate(-5vw, -6vh) scale(1.1); } }
body.light .pr-bg i { opacity: .5; } body.light .pr-bg .grid { background-image: linear-gradient(rgba(0, 0, 0, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .04) 1px, transparent 1px); }
body.mx-black .pr-bg i { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .pr-bg i { animation: none; } }
body.pr-main .page-content { position: relative; z-index: 1; }

/* шапка крупнее, «весь» — золотой перелив */
body.pr-main .page-content .hero { padding: 30px 34px 34px; }
@media (max-width: 700px) { body.pr-main .page-content .hero { padding: 22px 18px 24px; } }
body.pr-main .page-content .hero h1 { font-size: clamp(36px, 5.6vw, 76px); letter-spacing: -.01em; }
body.pr-main .page-content .hero h1 em { font-style: normal; background: linear-gradient(100deg, #f8e08e 0%, #e6bf55 35%, #fff4c4 50%, #e6bf55 65%, #b8892a 100%); background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: prShine 6s linear infinite; }
@keyframes prShine { to { background-position: -220% 0; } }
body.pr-main .pr-hero-p { font-size: 18px; line-height: 1.55; max-width: 620px; color: var(--text-secondary); }
body.pr-main .pr-hero-p b { color: var(--text-color); }
body.pr-main .pr-hero-cta .pr-btn { padding: 15px 22px; font-size: 16px; }
body.pr-main .pr-hero-cta .pr-btn.pro { box-shadow: 0 10px 30px rgba(230, 191, 85, .28); }
.pr-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--text-secondary); }
.pr-facts li { display: inline-flex; align-items: center; gap: 7px; } .pr-facts i { color: var(--pr-pro); font-size: 13px; }
body.pr-main .pr-keys { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-color: rgba(230, 191, 85, .28); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }

/* стекло вместо коричневых плашек */
body.pr-main .pr-card, body.pr-main .pr-plan, body.pr-main .pr-demo, body.pr-main .pr-faq details, body.pr-main .pr-invite > *, body.pr-main .pr-accept, body.pr-main .pr-mosaic > * {
    background: var(--pr-box); border-color: var(--pr-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
body.pr-main .pr-head h2 { font-size: 28px; }
body.pr-main .pr-num { border-color: rgba(230, 191, 85, .45); background: rgba(230, 191, 85, .08); }

/* тарифы: PRO приподнят, обводка переливается */
body.pr-main .pr-plans { align-items: stretch; gap: 20px; margin-top: 6px; }
body.pr-main .pr-plan { transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s cubic-bezier(.2, .8, .2, 1); }
body.pr-main .pr-plan:hover { transform: translateY(-4px); }
body.pr-main .pr-plan.pro { transform: translateY(-10px); border-color: transparent; box-shadow: 0 30px 80px rgba(230, 191, 85, .16); isolation: isolate; }
body.pr-main .pr-plan.pro:hover { transform: translateY(-14px); }
body.pr-main .pr-plan.pro::before { content: ''; position: absolute; inset: -1.5px; z-index: -1; border-radius: inherit; padding: 1.5px;
    background: conic-gradient(from var(--pr-ang, 0deg), #f8e08e, #b8892a, #fff4c4, #b28cff, #f8e08e);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: prSpin 7s linear infinite; }
@property --pr-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes prSpin { to { --pr-ang: 360deg; } }
body.pr-main .pr-plan.max { box-shadow: 0 24px 70px rgba(140, 92, 255, .12); }
@media (prefers-reduced-motion: reduce) { body.pr-main .pr-plan.pro::before, body.pr-main .page-content .hero h1 em { animation: none; } }
@media (max-width: 900px) { body.pr-main .pr-plan.pro, body.pr-main .pr-plan.pro:hover { transform: none; } }
body.pr-main.light .page-content .hero h1 em { background-image: linear-gradient(100deg, #8a6410 0%, #b8892a 35%, #e0b54a 50%, #b8892a 65%, #7a560c 100%); }
@media (max-width: 900px) { body.pr-main .pr-plan.pro { order: -1; } body.pr-main .pr-plan.max { order: 0; } body.pr-main .pr-plan.free { order: 1; } }