.subscription-page{ color-scheme: dark; --fx-font-main: 'Manrope', -apple-system, 'Segoe UI', sans-serif; --ultra-ink: var(--fx-gold); --subscription-sidebar: 0px; --subscription-gutter: 36px; --subscription-nav-height: 60px; }
.subscription-page *{ box-sizing: border-box; }
html:has(body[data-page-slug="subscription"]){ scroll-behavior: smooth; scroll-padding-top: 96px; scrollbar-width: none; }
html:has(body[data-page-slug="subscription"])::-webkit-scrollbar{ display: none; }
body[data-page-slug="subscription"]{ margin: 0; min-height: 100vh; color: var(--fx-text-main); background: radial-gradient(ellipse 58vw 48vh at 26% 4vh,rgba(122,77,245,.28),transparent 70%),radial-gradient(ellipse 48vw 43vh at 79% 16vh,rgba(56,232,197,.16),transparent 70%),#0b0b0f; }
.subscription-page button,.subscription-page input,.subscription-page summary{ font: inherit; }
.subscription-page button,.subscription-page a,.subscription-page summary{ -webkit-tap-highlight-color: transparent; }
.subscription-page button,.subscription-page summary{ cursor: pointer; }
.subscription-page button{ color: inherit; }
.subscription-page a{ color: inherit; text-decoration: none; }
.subscription-page button:disabled{ opacity: .45; cursor: not-allowed; }
.subscription-page :focus-visible{ outline: 2px solid var(--fx-ac2); outline-offset: 5px; }
.subscription-page [hidden]{ display: none !important; }
.subscription-page svg{ display: inline-block; width: 20px; height: 20px; flex-shrink: 0; fill: currentColor; }
.subscription-page .symbols{ position: absolute; width: 0; height: 0; overflow: hidden; }
.subscription-page .sr-only{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.subscription-page .page{ padding: 12px var(--subscription-gutter) 0; }
.subscription-page .subscription-nav{ position: fixed; top: max(12px,env(safe-area-inset-top,0px)); left: calc(var(--subscription-sidebar) + var(--subscription-gutter)); right: var(--subscription-gutter); z-index: 50; width: auto; max-width: 860px; margin: 0 auto; border-radius: var(--fx-radius-pill); background: rgba(11,11,15,.45); -webkit-backdrop-filter: blur(24px) saturate(145%); backdrop-filter: blur(24px) saturate(145%); box-shadow: 0 12px 38px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.08); }
.subscription-page .subscription-nav nav{ display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; padding: 8px; text-align: center; }
.subscription-page .subscription-nav a{ display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; padding: 8px 10px; border-radius: var(--fx-radius-pill); color: rgba(242,242,247,.64); font-size: 15px; font-weight: 600; transition: background-color .24s ease,color .2s ease; }
.subscription-page .subscription-nav a:hover,.subscription-page .subscription-nav a:focus-visible{ background: rgba(255,255,255,.075); color: #f2f2f7; }
.subscription-page .topbar{ max-width: 1140px; margin: auto; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.subscription-page .breadcrumb{ display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--fx-text-dim); }
.subscription-page .breadcrumb b{ font-weight: 500; color: var(--fx-text-main); }
.subscription-page .preview-tag{ font: 10px var(--fx-font-mono); letter-spacing: .5px; color: var(--fx-text-dim); border: 1px solid var(--fx-border); border-radius: var(--fx-radius-pill); padding: 7px 11px; }
.subscription-page .subscription-content{ max-width: 1140px; margin: auto; }
.subscription-page .hero{ text-align: center; padding: 24px 0 22px; }
.subscription-page .eyebrow{ display: inline-flex; align-items: center; gap: 9px; color: var(--fx-ac1); font-size: 11px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; }
.subscription-page .eyebrow svg{ width: 18px; height: 18px; }
.subscription-page h1{ margin: 17px 0 18px; font-size: clamp(36px,4.2vw,58px); font-weight: 800; letter-spacing: -2.3px; line-height: 1.12; }
.subscription-page h1 span{ color: var(--fx-ac1); }
.subscription-page .hero p{ margin: 0 auto; max-width: 550px; color: var(--fx-text-muted); font-size: 14px; line-height: 1.75; }
.subscription-page .billing{ display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; margin: 9px 0 5px; }
.subscription-page .period{ grid-column: 2; padding: 4px; display: flex; gap: 4px; border: 1px solid var(--fx-border-strong); border-radius: var(--fx-radius-pill); background: var(--fx-bg-deep); }
.subscription-page .period button{ min-height: 42px; min-width: 106px; padding: 10px 18px; border: 0; border-radius: inherit; background: none; color: var(--fx-text-muted); font-size: 12px; transition: background .2s,color .2s; }
.subscription-page .period button[aria-pressed="true"]{ color: var(--fx-text-main); background: #29272f; }
.subscription-page .period button small{ display: inline-block; padding: 2px 5px; margin-left: 6px; font-size: 9px; background: var(--fx-ac2-soft); color: var(--fx-ac2); border-radius: 5px; }
.subscription-page .billing-save{ grid-column: 3; justify-self: start; margin-left: 16px; color: var(--fx-ac2); font-size: 11px; white-space: nowrap; }
.subscription-page .billing-fine{ margin: 10px 0 20px; text-align: center; color: var(--fx-text-dim); font-size: 10px; }
.subscription-page .plan-nav{ display: none; }
.subscription-page .plans{ display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; align-items: stretch; padding-top: 32px; }
.subscription-page .plan{ --plan-accent-rgb: 170,170,185; --plan-text-muted: color-mix(in srgb,var(--fx-text-muted) 82%,var(--fx-text-main)); position: relative; min-width: 0; padding: 24px; border: 1px solid var(--fx-border-strong); border-radius: var(--fx-radius-lg); background-color: color-mix(in srgb,var(--fx-bg-elevated) 65%,transparent); -webkit-backdrop-filter: blur(20px) saturate(115%); backdrop-filter: blur(20px) saturate(115%); box-shadow: inset 0 1px 0 rgba(255,255,255,.045); scroll-margin-top: 24px; transition: transform .28s ease,border-color .28s ease; }
.subscription-page .plan.free{ background-color: color-mix(in srgb,var(--fx-bg-deep) 78%,transparent); border-color: var(--fx-border); }
.subscription-page .plan.pro{ --plan-accent-rgb: var(--fx-ac2-rgb); --reveal-delay: 75ms; --sheen-delay: -3s; margin-top: -12px; padding-top: 36px; border-color: rgba(var(--fx-ac2-rgb),.4); background-image: radial-gradient(ellipse at 100% 100%,rgba(var(--fx-ac2-rgb),.07),transparent 68%),linear-gradient(145deg,rgba(255,255,255,.025),transparent 45%); }
.subscription-page .plan.ultra{ --plan-accent-rgb: var(--fx-gold-rgb); --reveal-delay: 150ms; --sheen-delay: -6s; border-color: rgba(var(--fx-gold-rgb),.28); background-image: radial-gradient(ellipse at 100% 100%,rgba(var(--fx-gold-rgb),.065),transparent 68%),linear-gradient(145deg,rgba(255,255,255,.025),transparent 45%); }
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)){.subscription-page .plan::before{ content: ''; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg,transparent 20%,rgba(var(--plan-accent-rgb),.1) 37%,rgba(var(--plan-accent-rgb),.65) 49%,rgba(255,255,255,.2) 52%,rgba(var(--plan-accent-rgb),.15) 59%,transparent 80%); background-size: 280% 280%; -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .48; animation: plan-sheen 10s ease-in-out var(--sheen-delay,0s) infinite alternate paused; transition: opacity .25s; }
.subscription-page .plan.is-in-view::before{ animation-play-state: running; }
body[data-page-slug="subscription"][data-motion-paused="true"] .plan::before{ animation-play-state: paused; }
}
.subscription-page [data-reveal].is-revealed{ animation: surface-appear .65s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms) both; }
@keyframes surface-appear{ from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes plan-sheen{ from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
@media(hover:hover) and (pointer:fine){.subscription-page .plan:hover{ transform: translateY(-5px); border-color: rgba(var(--plan-accent-rgb),.65); }
.subscription-page .plan:hover::before{ opacity: .52; }
}
.subscription-page .plan:focus-within{ border-color: rgba(var(--plan-accent-rgb),.65); }
.subscription-page .recommend{ margin-left: auto; padding: 4px 8px; border: 1px solid rgba(var(--fx-ac2-rgb),.2); border-radius: var(--fx-radius-pill); color: var(--fx-ac2); font-size: 10px; font-weight: 650; white-space: nowrap; }
.subscription-page .plan-head{ display: flex; align-items: center; gap: 12px; min-height: 36px; margin-bottom: 8px; }
.subscription-page .plan-head h2{ margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.7px; }
.subscription-page .plan-head svg{ width: 28px; height: 28px; color: var(--fx-text-dim); }
.subscription-page .pro .plan-head svg,.subscription-page .pro .plan-head h2{ color: var(--fx-ac2); }
.subscription-page .ultra .plan-head svg,.subscription-page .ultra .plan-head h2{ color: var(--ultra-ink); }
.subscription-page .plan-intro{ font-size: 13px; line-height: 1.6; color: var(--plan-text-muted); margin: 0 0 12px; min-height: 44px; }
.subscription-page .price{ display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; min-height: 59px; }
.subscription-page .price strong{ font: 600 clamp(34px,3.4vw,46px)/1.3 var(--fx-font-mono); letter-spacing: -2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.subscription-page .price .unit{ font-size: 11px; color: var(--fx-text-muted); }
.subscription-page .price del{ color: var(--fx-text-dim); font: 12px var(--fx-font-mono); text-decoration-color: var(--fx-text-dim); }
.subscription-page .price-note{ min-height: 3.3em; color: var(--plan-text-muted); margin: 2px 0 0; font-size: 11px; line-height: 1.65; }
.subscription-page .price-space,.subscription-page .price-note-space{ display: grid; }
.subscription-page .price-space>.price,.subscription-page .price-note-space>.price-note{ grid-area: 1 / 1; min-width: 0; }
.subscription-page .price-reserve,.subscription-page .cta-reserve{ visibility: hidden; pointer-events: none; user-select: none; }
.subscription-page .price-note b{ color: var(--fx-text-main); font-weight: 600; }
.subscription-page .divider{ height: 1px; background: var(--fx-border); margin: 12px 0 16px; }
.subscription-page .benefits{ list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.subscription-page .benefits li{ display: flex; gap: 10px; align-items: flex-start; min-height: 40px; font-size: 13px; line-height: 1.5; }
.subscription-page .benefits svg{ width: 15px; height: 15px; margin-top: 2px; color: var(--fx-text-dim); }
.subscription-page .pro .benefits svg{ color: var(--fx-ac2); }
.subscription-page .ultra .benefits svg{ color: var(--ultra-ink); }
.subscription-page .benefits b{ display: block; font-weight: 600; }
.subscription-page .benefits small{ display: block; color: var(--plan-text-muted); font-size: 11px; margin-top: 3px; }
.subscription-page .benefits .plan-tool-link{ color: var(--fx-text-main); text-decoration: underline; text-decoration-color: rgba(var(--plan-accent-rgb),.45); text-underline-offset: 3px; transition: color .2s,text-decoration-color .2s; }
.subscription-page .benefits .plan-tool-link:hover,.subscription-page .benefits .plan-tool-link:focus-visible{ color: rgb(var(--plan-accent-rgb)); text-decoration-color: currentColor; }
.subscription-page .button{ display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 1px solid var(--fx-border-strong); border-radius: var(--fx-radius-pill); padding: 12px 18px; font: 700 12px/1.5 var(--fx-font-main); color: var(--fx-text-main); background: var(--fx-bg-subtle); transition: background .2s, border-color .2s, box-shadow .2s; }
.subscription-page .button:hover{ border-color: var(--fx-text-muted); background: var(--fx-bg-hover); }
.subscription-page .button.primary{ background: var(--fx-ac2); border-color: var(--fx-ac2); color: #08241d; }
.subscription-page .button.primary:hover{ background: #68eed4; }
.subscription-page .button.gold{ background: var(--fx-gold-soft); border-color: rgba(var(--fx-gold-rgb),.4); color: var(--fx-gold); }
.subscription-page .button.gold:hover{ background: rgba(var(--fx-gold-rgb),.16); border-color: var(--fx-gold); }
.subscription-page .button svg{ width: 16px; height: 16px; }
.subscription-page .plan .button{ width: 100%; margin-top: 12px; }
.subscription-page .purchase-cta{ margin-top: 12px; }
.subscription-page .purchase-cta>.button{ margin-top: 0; }
.subscription-page .cta-label{ display: grid; min-width: 0; }
.subscription-page .cta-label>span{ grid-area: 1 / 1; }
.subscription-page .purchase-cta>.button:active{ transform: scale(.99); }
.subscription-page .plan-meta{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 8px; min-height: 32px; margin-top: 6px; }
.subscription-page .free .plan-meta{ justify-content: center; }
.subscription-page .card-reassure{ margin: 0; font-size: 11px; color: var(--plan-text-muted); }
.subscription-page .text-button{ border: 0; background: none; color: var(--plan-text-muted); min-height: 32px; padding: 4px 0; font-size: 11px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--fx-border-strong); }
.subscription-page .text-button:hover{ color: var(--fx-text-main); }
.subscription-page .trust{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 24px; padding: 25px 0 0; color: var(--fx-text-muted); font-size: 10px; }
.subscription-page .trust span{ display: inline-flex; align-items: center; gap: 7px; }
.subscription-page .trust svg{ width: 13px; height: 13px; color: var(--fx-text-dim); }
.subscription-page .payment-marks{ display: inline-flex; align-items: center; gap: 11px; }
.subscription-page .payment-marks b{ font-size: 13px; font-weight: 800; letter-spacing: -.5px; color: #bdbbc6; }
.subscription-page .payment-marks b+b{ border-left: 1px solid var(--fx-border-strong); padding-left: 11px; font-style: italic; }
.subscription-page .billing-disclosure{ font-size: 10px; color: var(--fx-text-dim); text-align: center; margin: 11px auto 0; max-width: 680px; }
.subscription-page .compare-jump{ display: flex; align-items: center; justify-content: center; gap: 7px; width: fit-content; margin: 25px auto 0; font-size: 11px; color: var(--fx-text-muted); }
.subscription-page .compare-jump svg{ width: 14px; height: 14px; }
.subscription-page .value-section{ margin: 56px 0 24px; }
.subscription-page .value-grid{ display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.subscription-page .value-card{ min-width: 0; padding: 22px 24px; border: 1px solid var(--fx-border); border-radius: var(--fx-radius-md); background: var(--fx-bg-subtle); }
.subscription-page .value-card:nth-child(2){ --reveal-delay: 70ms; }
.subscription-page .value-card:nth-child(3){ --reveal-delay: 140ms; }
.subscription-page .value-heading{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.subscription-page .value-heading h3{ margin: 0; font-size: 10px; font-weight: 650; letter-spacing: 1.2px; text-transform: uppercase; color: var(--fx-text-muted); }
.subscription-page .value-heading svg{ width: 20px; height: 20px; color: var(--fx-text-dim); }
.subscription-page .value-price{ display: flex; align-items: baseline; gap: 6px; margin: 14px 0 8px; font: 600 28px/1.2 var(--fx-font-mono); letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.subscription-page .value-price small{ color: var(--fx-text-muted); font: 11px var(--fx-font-main); letter-spacing: 0; }
.subscription-page .value-card p{ margin: 0; font-size: 12px; line-height: 1.65; color: var(--fx-text-muted); }
.subscription-page .value-card p b{ color: var(--fx-text-main); font-weight: 600; }
.subscription-page .value-card .value-context{ font-size: 10px; margin-bottom: 12px; color: var(--fx-text-dim); }
.subscription-page .value-card:last-child .value-price,.subscription-page .value-card:last-child svg{ color: var(--fx-ac1); }
.subscription-page .value-caveat{ margin: 12px 4px 0; font-size: 10px; color: var(--fx-text-dim); line-height: 1.6; }
.subscription-page .ultra-note{ margin: 0 0 64px; padding: 30px 32px; border: 1px solid rgba(var(--fx-gold-rgb),.23); border-radius: var(--fx-radius-md); display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; background: radial-gradient(ellipse at 100% 100%,rgba(var(--fx-gold-rgb),.14),transparent 70%),linear-gradient(115deg,rgba(var(--fx-gold-rgb),.025),transparent 45%),var(--fx-bg-deep); }
.subscription-page .ultra-note>svg{ width: 36px; height: 36px; color: var(--ultra-ink); }
.subscription-page .ultra-note h2{ font-size: 18px; margin: 0 0 7px; font-weight: 750; letter-spacing: -.35px; }
.subscription-page .ultra-note p{ font-size: 12px; margin: 0; color: var(--fx-text-muted); max-width: 680px; }
.subscription-page .ultra-note a{ color: var(--ultra-ink); white-space: nowrap; font-size: 11px; }
.subscription-page .section-head{ display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 26px; }
.subscription-page .section-head h2{ font-size: 28px; letter-spacing: -.9px; margin: 0 0 8px; font-weight: 800; }
.subscription-page .section-head p{ font-size: 12px; color: var(--fx-text-muted); margin: 0; }
.subscription-page .section-index{ color: var(--fx-text-dim); font: 10px var(--fx-font-mono); letter-spacing: 1.5px; margin-bottom: 12px; display: block; }
.subscription-page .compare{ scroll-margin-top: 30px; }
.subscription-page .compare-plan-switch{ display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; padding: 4px; margin-bottom: 16px; border: 1px solid var(--fx-border-strong); border-radius: var(--fx-radius-pill); background: var(--fx-bg-deep); }
.subscription-page .compare-plan-switch button{ min-width: 0; min-height: 44px; padding: 8px 12px; border: 0; border-radius: inherit; background: none; color: var(--fx-text-muted); font-size: 13px; font-weight: 700; }
.subscription-page .compare-plan-switch button[aria-pressed="true"]{ color: var(--fx-text-main); background: #29272f; }
.subscription-page .compare-plan-switch [data-compare-plan="pro"][aria-pressed="true"]{ color: var(--fx-ac2); background: var(--fx-ac2-soft); }
.subscription-page .compare-plan-switch [data-compare-plan="ultra"][aria-pressed="true"]{ color: var(--fx-gold); background: var(--fx-gold-soft); }
.subscription-page .table-hint{ display: none; }
.subscription-page .table-wrap{ overflow-x: auto; border: 1px solid var(--fx-border); border-radius: var(--fx-radius-md); background: rgba(20,20,24,.55); scrollbar-width: thin; scrollbar-color: var(--fx-border-strong) transparent; }
.subscription-page table{ border-collapse: collapse; width: 100%; table-layout: fixed; font-size: 11px; }
.subscription-page caption{ text-align: left; }
.subscription-page th,.subscription-page td{ padding: 15px 18px; vertical-align: middle; border-bottom: 1px solid var(--fx-border); text-align: center; overflow-wrap: anywhere; }
.subscription-page thead th{ font-size: 13px; font-weight: 700; padding: 20px 18px; background: rgba(29,29,36,.7); }
.subscription-page thead th:first-child{ font-size: 11px; font-weight: 500; }
.subscription-page th:first-child{ text-align: left; width: 37%; }
.subscription-page tbody th{ font-weight: 600; }
.subscription-page td{ color: var(--fx-text-muted); }
.subscription-page th small,.subscription-page td small{ display: block; font-size: 9px; color: var(--fx-text-dim); margin-top: 4px; font-weight: 400; }
.subscription-page tr>:nth-child(3){ background: rgba(var(--fx-ac2-rgb),.035); }
.subscription-page thead th:nth-child(3){ color: var(--fx-ac2); background: rgba(var(--fx-ac2-rgb),.065); }
.subscription-page thead th:nth-child(4){ color: var(--ultra-ink); }
.subscription-page .yes{ color: var(--fx-text-main); }
.subscription-page .table-group th{ width: auto; padding-block: 12px; background: rgba(255,255,255,.025); color: var(--fx-text-dim); font-size: 9px; font-weight: 650; text-transform: uppercase; letter-spacing: 1.5px; }
.subscription-page .table-more{ width: 100%; padding: 15px; border: 1px solid var(--fx-border); border-top: 0; border-radius: 0 0 var(--fx-radius-md) var(--fx-radius-md); font-size: 11px; background: var(--fx-bg-subtle); color: var(--fx-text-muted); }
.subscription-page .table-wrap:has(+.table-more){ border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.subscription-page .limits-note{ color: var(--fx-text-dim); font-size: 10px; line-height: 1.7; margin: 16px 4px 0; }
.subscription-page .faq-section{ display: grid; grid-template-columns: .85fr 1.4fr; gap: 60px; margin: 76px 0; }
.subscription-page .faq-intro h2{ font-size: 30px; line-height: 1.25; margin: 0 0 14px; letter-spacing: -.9px; }
.subscription-page .faq-intro p{ color: var(--fx-text-muted); font-size: 12px; max-width: 260px; }
.subscription-page .faq-intro a{ color: var(--fx-ac2); font-size: 11px; display: inline-flex; align-items: center; gap: 7px; }
.subscription-page .faq-item{ border-bottom: 1px solid var(--fx-border); }
.subscription-page .faq-item:first-child{ border-top: 1px solid var(--fx-border); }
.subscription-page .faq-item summary{ list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 0; font-size: 12px; font-weight: 600; }
.subscription-page .faq-item summary::-webkit-details-marker{ display: none; }
.subscription-page .faq-item summary::after{ content: '+'; font: 18px var(--fx-font-mono); color: var(--fx-text-muted); }
.subscription-page .faq-item[open] summary::after{ content: '−'; color: var(--fx-ac2); }
.subscription-page .faq-item p{ margin: 0 0 20px; padding-right: 20px; font-size: 12px; color: var(--fx-text-muted); }
.subscription-page .faq-item details{ margin-bottom: 20px; }
.subscription-page .faq-item details summary{ padding: 0 0 10px; font-size: 10px; color: var(--fx-text-dim); }
.subscription-page .faq-item details p{ font-size: 10px; }
.subscription-page footer{ display: flex; justify-content: space-between; align-items: start; gap: 25px; border-top: 1px solid var(--fx-border); padding: 28px 0 40px; color: var(--fx-text-dim); font-size: 10px; }
.subscription-page .footer-brand{ color: var(--fx-text-muted); font-weight: 700; font-size: 11px; display: block; margin-bottom: 8px; }
.subscription-page .footer-links{ display: flex; gap: 18px; margin-bottom: 9px; }
.subscription-page .footer-links a:hover{ color: var(--fx-text-main); }
.subscription-page .footer-right{ text-align: right; }
.subscription-page .mobile-dock{ display: none; }
.subscription-page dialog{ width: min(450px,calc(100% - 28px)); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 28px; border: 1px solid var(--fx-border-strong); border-radius: var(--fx-radius-lg); background: #18171f; color: var(--fx-text-main); box-shadow: var(--fx-shadow-lg); }
.subscription-page dialog::backdrop{ background: rgba(0,0,0,.68); backdrop-filter: blur(8px); }
.subscription-page .dialog-top{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.subscription-page .dialog-top .eyebrow{ font-size: 9px; color: var(--fx-text-muted); }
.subscription-page .close{ width: 36px; height: 36px; border: 1px solid var(--fx-border); border-radius: 50%; background: none; display: grid; place-items: center; }
.subscription-page .close:hover{ border-color: var(--fx-error); }
.subscription-page dialog h2{ margin: 0 0 8px; font-size: 26px; letter-spacing: -.7px; }
.subscription-page .dialog-desc{ font-size: 12px; color: var(--fx-text-muted); margin: 0 0 24px; }
.subscription-page .order{ display: grid; gap: 12px; margin: 0 0 20px; font-size: 12px; }
.subscription-page .order div{ display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.subscription-page .order dt{ color: var(--fx-text-muted); }
.subscription-page .order dd{ margin: 0; font-weight: 600; text-align: right; }
.subscription-page .order .order-total{ padding-top: 16px; border-top: 1px solid var(--fx-border); }
.subscription-page .order-total dd{ font: 600 25px var(--fx-font-mono); }
.subscription-page .dialog-promo{ font-size: 11px; color: var(--fx-text-muted); margin: 18px 0; }
.subscription-page .promo-field{ display: flex; gap: 8px; margin-top: 12px; }
.subscription-page .promo-field input{ width: 100%; min-width: 0; min-height: 42px; border: 1px solid var(--fx-border-strong); border-radius: var(--fx-radius-sm); padding: 10px 12px; background: var(--fx-bg-deep); color: var(--fx-text-main); text-transform: uppercase; }
.subscription-page .promo-field button{ border: 1px solid var(--fx-border-strong); border-radius: var(--fx-radius-sm); background: var(--fx-bg-hover); padding: 8px 12px; font-size: 10px; }
.subscription-page .preview-warning{ padding: 12px 14px; margin: 20px 0; border: 1px dashed var(--fx-border-strong); border-radius: var(--fx-radius-sm); color: var(--fx-text-muted); font-size: 10px; line-height: 1.7; }
.subscription-page dialog>.button{ width: 100%; }
.subscription-page .dialog-legal{ font-size: 10px; color: var(--fx-text-dim); margin: 12px 0 0; }
.subscription-page .promo-status{ margin: 10px 0 0; font-size: 10px; color: var(--fx-ac2); }
body[data-page-slug="subscription"].modal-open{ overflow: hidden; }
@media(min-width:1700px){.subscription-page .hero{ padding-top: 50px; }
}
@media(max-width:1160px){.subscription-page{ --subscription-gutter: 24px; }
.subscription-page .plan{ padding-inline: 32px; }
.subscription-page .price strong{ font-size: 35px; }
.subscription-page .plans{ gap: 12px; }
.subscription-page .plan-intro{ min-height: 63px; }
.subscription-page .benefits li{ min-height: 58px; }
.subscription-page .ultra-note{ grid-template-columns: auto 1fr; }
.subscription-page .ultra-note a{ grid-column: 2; }
}
@media(max-width:740px){.subscription-page{ --subscription-gutter: 18px; --subscription-nav-height: 56px; }
.subscription-page .topbar{ min-height: 48px; }
.subscription-page .breadcrumb>span{ display: none; }
.subscription-page .breadcrumb{ font-size: 10px; }
.subscription-page .preview-tag{ font-size: 8px; }
.subscription-page .subscription-nav nav{ gap: 0; padding: 6px 3px; }
.subscription-page .subscription-nav a{ padding-inline: 2px; font-size: clamp(10px,2.8vw,14px); }
.subscription-page .hero{ padding: 28px 6px 22px; }
.subscription-page .eyebrow{ font-size: 9px; letter-spacing: 1.6px; }
.subscription-page h1{ font-size: clamp(31px,8vw,44px); letter-spacing: -1.4px; margin: 16px 0; }
.subscription-page .hero p{ font-size: 12px; max-width: 350px; }
.subscription-page .hero p br{ display: none; }
.subscription-page .billing{ grid-template-columns: minmax(0,1fr); justify-items: center; gap: 9px; margin-top: 0; }
.subscription-page .billing-save{ grid-column: 1; justify-self: center; margin-left: 0; white-space: normal; text-align: center; }
.subscription-page .period{ grid-column: 1; width: min(320px,100%); }
.subscription-page .period button{ flex: 1; min-width: 0; min-height: 40px; }
.subscription-page .billing-fine{ font-size: 9px; margin: 9px 0 17px; }
.subscription-page .plan-nav{ display: flex; justify-content: center; gap: 18px; padding: 0 0 8px; }
.subscription-page .plan-nav a{ padding: 6px 2px; color: var(--fx-text-dim); font-size: 11px; min-height: 36px; border-bottom: 2px solid transparent; }
.subscription-page .plan-nav a[aria-current="location"]{ color: var(--fx-text-main); border-bottom-color: currentColor; }
.subscription-page .plan-nav a[href="#plan-pro"][aria-current="location"]{ color: var(--fx-ac2); }
.subscription-page .plan-nav a[href="#plan-ultra"][aria-current="location"]{ color: var(--fx-gold); }
.subscription-page .plans{ grid-template-columns: minmax(0,1fr); gap: 20px; margin: 0 auto; max-width: 460px; padding: 12px 0; }
.subscription-page .plan,.subscription-page .plan.pro{ padding: 32px; margin-top: 0; }
.subscription-page .plan-head h2{ font-size: 24px; }
.subscription-page .plan-intro{ min-height: 44px; }
.subscription-page .price strong{ font-size: 40px; }
.subscription-page .price{ min-height: 54px; }
.subscription-page .benefits{ margin-bottom: 2px; }
.subscription-page .benefits li{ min-height: 40px; }
.subscription-page .plan .button{ min-height: 46px; }
.subscription-page .trust{ gap: 12px; padding-top: 18px; font-size: 9px; }
.subscription-page .trust>.payment-marks{ width: 100%; justify-content: center; }
.subscription-page .billing-disclosure{ font-size: 9px; }
.subscription-page .value-section{ margin: 36px 0 20px; }
.subscription-page .value-grid{ grid-template-columns: minmax(0,1fr); gap: 12px; }
.subscription-page .value-card{ padding: 20px 22px; }
.subscription-page .value-price{ margin-top: 12px; }
.subscription-page .value-card p{ font-size: 11px; }
.subscription-page .value-caveat{ font-size: 10px; }
.subscription-page .ultra-note{ margin: 0 0 40px; padding: 22px; gap: 14px; align-items: start; }
.subscription-page .ultra-note>svg{ width: 26px; height: 26px; }
.subscription-page .ultra-note h2{ font-size: 16px; }
.subscription-page .ultra-note p{ font-size: 11px; }
.subscription-page .ultra-note a{ font-size: 10px; }
.subscription-page .section-head{ margin-bottom: 20px; }
.subscription-page .section-head h2{ font-size: 24px; }
.subscription-page .section-head p{ font-size: 11px; }
.subscription-page .section-index{ font-size: 9px; }
.subscription-page .table-hint{ display: block; margin: -6px 0 12px; font-size: 10px; color: var(--fx-text-dim); }
.subscription-page .table-wrap{ border-radius: var(--fx-radius-sm); }
.subscription-page table{ min-width: 600px; font-size: 11px; }
.subscription-page th,.subscription-page td{ padding: 14px 12px; overflow-wrap: normal; }
.subscription-page th:first-child{ width: 150px; position: sticky; left: 0; background: #17171d; z-index: 1; box-shadow: 1px 0 var(--fx-border); }
.subscription-page thead th{ padding: 16px 12px; font-size: 12px; }
.subscription-page thead th:first-child{ font-size: 10px; }
.subscription-page th small,.subscription-page td small{ font-size: 9px; }
.subscription-page .table-group th{ position: static; font-size: 9px; padding-block: 10px; }
.subscription-page .limits-note{ font-size: 10px; }
.subscription-page .faq-section{ display: block; margin: 48px 0; }
.subscription-page .faq-intro{ margin-bottom: 24px; }
.subscription-page .faq-intro h2{ font-size: 26px; }
.subscription-page .faq-intro p{ max-width: none; }
.subscription-page .faq-item summary{ font-size: 11px; padding-block: 19px; }
.subscription-page .faq-item p{ font-size: 11px; }
.subscription-page footer{ display: block; padding-bottom: 125px; font-size: 9px; }
.subscription-page .footer-right{ text-align: left; margin-top: 22px; }
.subscription-page .mobile-dock{ position: fixed; display: flex; align-items: center; gap: 14px; bottom: 0; left: 0; right: 0; z-index: 20; padding: 12px 18px max(12px,env(safe-area-inset-bottom)); border-top: 1px solid var(--fx-border-strong); background: rgba(19,20,24,.94); backdrop-filter: blur(24px); box-shadow: 0 -12px 32px rgba(0,0,0,.15); }
.subscription-page .dock-copy{ min-width: 0; flex: 1; }
.subscription-page .dock-copy strong{ display: block; font-size: 12px; font-weight: 700; }
.subscription-page .dock-copy small{ display: block; font-size: 9px; color: var(--fx-text-muted); margin-top: 3px; }
.subscription-page .mobile-dock .button{ min-height: 44px; padding: 10px 18px; font-size: 11px; }
}
@media(max-width:360px){.subscription-page .plan,.subscription-page .plan.pro{ padding-inline: 17px; }
.subscription-page .price strong{ font-size: 34px; }
.subscription-page .plan-intro{ min-height: 63px; }
.subscription-page .benefits li{ min-height: 55px; }
.subscription-page .plan-nav{ gap: 22px; }
.subscription-page .dock-copy strong{ font-size: 11px; }
.subscription-page .dock-copy small{ font-size: 8px; }
.subscription-page .mobile-dock{ gap: 8px; padding-inline: 14px; }
.subscription-page .mobile-dock .button{ padding-inline: 14px; }
.subscription-page .ultra-note{ padding: 18px; grid-template-columns: 1fr; }
.subscription-page .ultra-note a{ grid-column: 1; }
}
@media(prefers-reduced-motion:reduce){html:has(body[data-page-slug="subscription"]){ scroll-behavior: auto; }
.subscription-page *,.subscription-page *::before,.subscription-page *::after{ transition: none !important; animation: none !important; }
.subscription-page [data-reveal]{ opacity: 1 !important; translate: none !important; }
.subscription-page .plan:hover,.subscription-page .purchase-cta>.button:active{ transform: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){.subscription-page .plan.free,.subscription-page .plan.pro,.subscription-page .plan.ultra{ background-color: var(--fx-bg-elevated); }
}
@media(prefers-reduced-transparency:reduce){.subscription-page .subscription-nav,.subscription-page .mobile-dock,.subscription-page .plan.free,.subscription-page .plan.pro,.subscription-page .plan.ultra,.subscription-page .value-card,.subscription-page .ultra-note{ -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--fx-bg-elevated); }
.subscription-page dialog::backdrop{ backdrop-filter: none; background: rgba(0,0,0,.85); }
}
    .subscription-page .payment-check-disclosure { max-width: 800px; margin: 32px auto; padding: 0 20px; box-sizing: border-box; }
    .subscription-page .payment-check-disclosure > summary { display: flex; align-items: center; justify-content: center; gap: 14px; width: fit-content; max-width: 100%; min-height: 46px; box-sizing: border-box; margin: 0 auto; padding: 11px 24px; border: 1px solid var(--fx-border); border-radius: var(--fx-radius-pill); background: transparent; color: var(--fx-text-muted); font-size: 14px; font-weight: 600; cursor: pointer; list-style: none; }
    .subscription-page .payment-check-disclosure > summary::-webkit-details-marker { display: none; }
    .subscription-page .payment-check-disclosure > summary::after { content: '+'; font-size: 18px; line-height: 1; }
    .subscription-page .payment-check-disclosure[open] > summary::after { content: '−'; }
    .subscription-page .payment-check-disclosure > summary:hover { color: var(--fx-text-main); border-color: var(--fx-text-dim); }
    .subscription-page .payment-check-disclosure > summary:focus-visible { outline: 2px solid var(--fx-ac2); outline-offset: 3px; }
    .subscription-page .payment-check-disclosure[open] > summary { margin-bottom: 20px; }
    .subscription-page .payment-check { margin: 0; padding: 28px; border: 1px solid var(--fx-border); border-radius: var(--fx-radius-lg); background: var(--fx-bg-elevated); }
    .subscription-page .payment-check h2 { margin: 0 0 18px; font-size: 20px; font-weight: 750; letter-spacing: -.35px; text-align: center; }
    .subscription-page .payment-check [hidden] { display: none !important; }
    .subscription-page .payment-check p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--fx-text-muted); }
    .subscription-page #paymentCheckStatus { padding: 16px 18px; border: 1px solid var(--fx-border); border-radius: var(--fx-radius-md); background: var(--fx-bg-deep); color: var(--fx-text-main); text-align: center; overflow-wrap: anywhere; }
    .subscription-page .payment-check p.payment-check-note { margin-top: 20px; font-size: 12px; line-height: 1.6; text-align: center; }
    .subscription-page .payment-check-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--fx-border); }
    .subscription-page .payment-check button, .subscription-page .payment-check a { color: var(--fx-text-main); font: inherit; font-size: 13px; }
    .subscription-page .payment-check button, .subscription-page .payment-check .payment-check-action { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box; padding: 10px 18px; border: 1px solid var(--fx-border); border-radius: var(--fx-radius-pill); background: transparent; font-weight: 650; text-decoration: none; text-align: center; cursor: pointer; }
    .subscription-page .payment-check button:hover:not(:disabled), .subscription-page .payment-check .payment-check-action:hover { border-color: var(--fx-text-dim); color: var(--fx-ac2); }
    .subscription-page .payment-check button:focus-visible, .subscription-page .payment-check a:focus-visible { outline: 2px solid var(--fx-ac2); outline-offset: 3px; }
    .subscription-page .payment-check .payment-check-account { padding: 10px 6px; color: var(--fx-text-muted); text-underline-offset: 4px; }
    .subscription-page .payment-check button:disabled { opacity: .55; cursor: wait; }
    .subscription-page .payment-check-orders { display: grid; gap: 10px; list-style: none; padding: 0; margin: 18px 0 0; }
    .subscription-page .payment-check-orders:empty { display: none; }
    .subscription-page .payment-check-orders li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px; border: 1px solid var(--fx-border); border-radius: var(--fx-radius-md); }
    .subscription-page .payment-check-order { min-width: 0; text-align: left; overflow-wrap: anywhere; }
    .subscription-page .payment-check-order b { display: block; font-size: 14px; font-weight: 700; color: var(--fx-text-main); }
    .subscription-page .payment-check-order small { display: block; margin-top: 5px; font-size: 12px; color: var(--fx-text-muted); }
    @media (max-width: 540px) {
        .subscription-page .payment-check-disclosure { padding: 0 12px; }
        .subscription-page .payment-check { padding: 20px 14px; border-radius: var(--fx-radius-md); }
        .subscription-page .payment-check-orders li { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px; }
        .subscription-page .payment-check-actions { flex-direction: column; align-items: stretch; text-align: center; }
    }
    /* === ОБЁРТКА === */
    .fxm-overlay.fxm-payment-summary {
        background:rgba(1,2,6,.94);
        -webkit-backdrop-filter:blur(9px) saturate(82%);
        backdrop-filter:blur(9px) saturate(82%);
    }
    .fxm-overlay.fxm-payment-summary .fxm-box {
        width:min(540px,100%);
        border-color:rgba(255,255,255,.09);
        background:linear-gradient(155deg,rgba(20,21,29,.995),rgba(12,13,19,.995));
        box-shadow:0 34px 100px rgba(0,0,0,.76),inset 0 1px rgba(255,255,255,.045);
    }
    .fxm-overlay.fxm-payment-summary .fxm-title { font-size:clamp(22px,3vw,25px); }
    .fxm-overlay.fxm-payment-summary .fxm-content { margin-top:22px; }
    .fxm-overlay.fxm-payment-summary .fxm-btn { font-size:13.5px; }
    .payment-summary-lead {
        margin:0 0 14px; color:var(--fx-text-muted);
        font-size:15.5px; line-height:1.55;
    }
    .payment-summary-list {
        overflow:hidden; border:1px solid rgba(255,255,255,.085);
        border-radius:var(--fx-radius-md); background:rgba(0,0,0,.26);
    }
    .payment-summary-row {
        display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:center;
        padding:13px 15px; border-bottom:1px solid rgba(255,255,255,.065);
    }
    .payment-summary-row:last-child { border-bottom:0; }
    .payment-summary-row span { color:var(--fx-text-muted); font-size:14.5px; line-height:1.4; }
    .payment-summary-row b {
        max-width:270px; color:var(--fx-text-main); font-size:15.5px;
        line-height:1.4; text-align:right;
    }
    .payment-summary-row.is-discount b { color:var(--fx-ac2); }
    .payment-summary-row.is-total {
        background:linear-gradient(90deg,var(--fx-ac1-soft),var(--fx-ac2-soft));
    }
    .payment-summary-row.is-total span { color:var(--fx-text-main); font-weight:850; }
    .payment-summary-row.is-total b { color:var(--fx-ac2); font-size:19px; }
    .payment-summary-row.is-renewal { align-items:start; background:rgba(255,255,255,.018); }
    .payment-summary-row.is-renewal b { color:var(--fx-text-muted); font-size:13.5px; font-weight:700; }
    .payment-summary-foot {
        margin:12px 2px 0; color:var(--fx-text-dim);
        font-size:12.5px; line-height:1.5;
    }

    @media(max-width:480px) {
        .payment-summary-row { gap:12px; padding:12px 13px; }
        .payment-summary-row span { font-size:13.5px; }
        .payment-summary-row b { max-width:190px; font-size:14.5px; }
        .payment-summary-lead { font-size:14.5px; }
    }


/* Shared shell stays intact. Only this page owns the content and top navigation. */
body[data-page-slug="subscription"] .fx-stage { overflow: visible; min-width: 0; }
body[data-page-slug="subscription"] .fx-topbar { display: none; }
main.fx-content.subscription-page { padding: 0; margin-top: 0; min-width: 0; font: 14px/1.6 var(--fx-font-main); }
.subscription-page .page { min-width: 0; padding-top: calc(max(12px,env(safe-area-inset-top,0px)) + var(--subscription-nav-height)); }
.subscription-page .subscription-content { max-width: 1140px; margin: auto; }
.subscription-page .hero { padding-top: 48px; }
.subscription-page .plans[data-paid="pro"] { grid-template-columns: repeat(2,minmax(0,1fr)); max-width: 790px; margin: auto; }
.subscription-page .plans[data-paid="ultra"] { grid-template-columns: minmax(0,440px); justify-content: center; }
.subscription-page .plans[data-paid]:not([data-paid=""]) .plan.pro { margin-top: 0; padding-top: 24px; }
.subscription-page .plan-actions { margin-top: 12px; }
.subscription-page .plan[data-current="true"] { display: flex; flex-direction: column; min-height: 720px; }
.subscription-page .plan-actions>.button { margin-top: 0; }
.subscription-page .plan-legal,.subscription-page .active-info,.subscription-page .upgrade-credit-note { margin-top: 12px; color: var(--fx-text-muted); font-size: 11px; line-height: 1.7; }
.subscription-page .plan-legal a,.subscription-page .active-info a { color: var(--fx-ac2); }
.subscription-page .btn-link-action { display: block; width: 100%; border: 1px solid var(--fx-border); border-radius: var(--fx-radius-pill); background: none; color: var(--fx-text-muted); padding: 8px 12px; margin-top: 10px; font-size: 11px; }
.subscription-page .btn-link-cancel:hover { border-color: var(--fx-error); color: var(--fx-error); }
.subscription-page .promo-inline { max-width: 520px; margin: 20px auto; font-size: 12px; color: var(--fx-text-muted); }
.subscription-page .promo-inline summary { text-align: center; padding: 12px; }
.subscription-page .promo-inline-body { display: grid; gap: 10px; padding: 12px; }
.subscription-page .promo-inline-input { width: 100%; min-width: 0; padding: 12px 18px; border: 1px solid var(--fx-border-strong); border-radius: var(--fx-radius-pill); background: var(--fx-bg-deep); color: var(--fx-text-main); text-transform: uppercase; font-size: 16px; }
.subscription-page .promo-inline-note { font-size: 11px; }
.subscription-page .promo-inline-result { color: var(--fx-ac2); }
.subscription-page .promo-entry { margin: 20px auto; text-align: center; }
/* Checkout-specific styling: keep the existing dark surface, simplify the content. */
.fxm-overlay.fxm-payment-summary { --fx-font-main: 'Manrope',-apple-system,'Segoe UI',sans-serif; font-family: var(--fx-font-main); }
.fxm-overlay.fxm-payment-summary .fxm-box { width: min(460px,100%); padding: 28px; }
.fxm-overlay.fxm-payment-summary .fxm-box::before,.fxm-overlay.fxm-payment-summary .fxm-mark { display: none; }
.fxm-overlay.fxm-payment-summary .fxm-head { display: block; padding-right: 34px; }
.fxm-overlay.fxm-payment-summary .fxm-title { font-size: 24px; font-weight: 750; }
.fxm-overlay.fxm-payment-summary .fxm-text { font-size: 13px; line-height: 1.7; }
.fxm-overlay.fxm-payment-summary .fxm-content { margin-top: 14px; }
.fxm-overlay.fxm-payment-summary .fxm-btn { border-radius: var(--fx-radius-pill); min-height: 46px; max-height: 52px; font-weight: 700; }
.fxm-overlay.fxm-payment-summary :focus-visible { outline-color: var(--fx-ac1); }
.fxm-overlay.fxm-payment-summary .fxm-btn--primary { background: var(--fx-ac1); color: #fff; box-shadow: none; }
.fxm-overlay.fxm-payment-summary .fxm-btn--primary:hover { background: var(--fx-ac1); filter: brightness(1.08); box-shadow: none; }
.fxm-overlay.fxm-payment-summary .fxm-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.fxm-overlay.fxm-payment-summary .payment-summary-list { border: 0; background: none; border-radius: 0; }
.fxm-overlay.fxm-payment-summary .payment-summary-row { padding: 12px 0; gap: 12px; }
.fxm-overlay.fxm-payment-summary .payment-summary-row :is(span,b) { font-size: 13px; }
.fxm-overlay.fxm-payment-summary .payment-summary-row:is(.is-total,.is-renewal) { background: none; }
.fxm-overlay.fxm-payment-summary .payment-summary-row.is-total b { font-size: 23px; color: var(--fx-text-main); }
.fxm-overlay.fxm-payment-summary .payment-summary-row.is-discount b { color: var(--fx-ac1); }
.fxm-overlay.fxm-payment-summary .payment-summary-lead { font-size: 13px; }
.fxm-overlay.fxm-payment-summary .payment-summary-foot { font-size: 11px; }
/* Cancellation uses the checkout surface; only its form needs extra styling. */
.fxm-subscription-cancel .cancel-reason-heading { margin-top: 20px; }
.fxm-subscription-cancel .cancel-reason-heading b { color: var(--fx-text-main); font-weight: 600; }
.fxm-subscription-cancel .fxm-chips { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 14px 0 20px; }
.fxm-subscription-cancel .fxm-chip { min-width: 0; min-height: 32px; padding: 10px 12px; border-radius: var(--fx-radius-lg); font-size: 12px; font-weight: 600; line-height: 1.5; }
.fxm-subscription-cancel .fxm-chip.fxm-chip--on { border-color: var(--fx-ac1); background: var(--fx-ac1-soft); color: var(--fx-text-main); box-shadow: none; }
.fxm-subscription-cancel .cancel-comment-label { display: block; margin-bottom: 8px; color: var(--fx-text-muted); font-size: 12px; }
.fxm-subscription-cancel .fxm-textarea { margin-top: 0; min-height: 96px; border-color: var(--fx-border-strong); border-radius: var(--fx-radius-md); background: var(--fx-bg-deep); font-size: 16px; }
.fxm-subscription-cancel .fxm-textarea::placeholder { color: var(--fx-text-dim); font-size: 13px; }
.fxm-subscription-cancel .fxm-textarea:focus { outline: none; border-color: var(--fx-ac1); background: var(--fx-bg-deep); box-shadow: 0 0 0 3px var(--fx-ac1-soft); }
.fxm-subscription-cancel .fxm-offer { margin-top: 0; padding: 16px; border-color: var(--fx-border-strong); background: var(--fx-bg-deep); box-shadow: none; }
.fxm-subscription-cancel .fxm-offer b { color: var(--fx-ac1); }
.fxm-checkout [hidden] { display: none !important; }
.fxm-checkout .checkout-description { margin: 0 0 22px; color: var(--fx-text-muted); font-size: 13px; }
.fxm-checkout .checkout-order>div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; color: var(--fx-text-muted); font-size: 13px; }
.fxm-checkout .checkout-order b { color: var(--fx-text-main); text-align: right; }
.fxm-checkout .checkout-order .checkout-total { border-top: 1px solid var(--fx-border); margin-top: 8px; padding-top: 16px; align-items: center; }
.fxm-checkout .checkout-total b { font: 700 28px var(--fx-font-mono); }
.fxm-checkout .checkout-discount { color: var(--fx-ac1); font-size: 12px; }
.fxm-checkout .checkout-legal { margin: 14px 0; color: var(--fx-text-dim); font-size: 11px; line-height: 1.7; }
.fxm-checkout .checkout-legal a { color: var(--fx-ac1); }
.fxm-checkout .checkout-continue { width: 100%; margin-top: 6px; }
.fxm-checkout .checkout-message { margin: 14px 0; padding: 12px 14px; border-radius: var(--fx-radius-sm); background: var(--fx-ac1-soft); color: var(--fx-text-main); font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
.fxm-checkout .checkout-message.is-error { color: var(--fx-error); }
.fxm-checkout .checkout-refresh { display: inline-block; margin-bottom: 12px; color: var(--fx-ac1); font-size: 13px; }
.fxm-checkout .promo-inline { margin: 20px 0; color: var(--fx-text-muted); font-size: 12px; }
.fxm-checkout .promo-inline summary { cursor: pointer; padding: 8px 0; }
.fxm-checkout .promo-inline[open] summary { color: var(--fx-ac1); }
.fxm-checkout .promo-inline-body { display: grid; gap: 9px; padding-top: 8px; }
.fxm-checkout .promo-inline-input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 46px; padding: 11px 15px; border: 1px solid var(--fx-border-strong); border-radius: var(--fx-radius-pill); background: var(--fx-bg-deep); color: var(--fx-text-main); font: 16px var(--fx-font-main); text-transform: uppercase; transition: border-color .2s,box-shadow .2s; }
.fxm-checkout .promo-inline-input:focus { outline: none; border-color: var(--fx-ac1); box-shadow: 0 0 0 3px var(--fx-ac1-soft); }
.fxm-checkout .promo-inline-result { color: var(--fx-ac1); }
.fxm-checkout .promo-inline-note { font-size: 11px; line-height: 1.6; }
.fxm-checkout .promo-inline[data-invalid="true"] .promo-inline-note { color: var(--fx-error); }
.fxm-checkout .promo-inline[data-invalid="true"] .promo-inline-input { border-color: var(--fx-error); }
@media(max-width:480px) { .fxm-overlay.fxm-payment-summary .fxm-box { padding: 24px 18px; } }
@media(prefers-reduced-motion:reduce) { .fxm-checkout .promo-inline-input { transition: none; } }
.subscription-page .promo-inline[data-invalid="true"] .promo-inline-input { border-color: var(--fx-error); }
.subscription-page .promo-inline[data-invalid="true"] .promo-inline-note { color: var(--fx-error); }
.subscription-page .price .promo-new-price { color: var(--fx-ac2); }
.subscription-page .ultra .price .promo-new-price { color: var(--fx-gold); }
.subscription-page .price .promo-period { font: 11px var(--fx-font-main); }
.subscription-page .price .promo-saving { flex-basis: 100%; font: 11px var(--fx-font-main); color: var(--fx-ac2); }
.subscription-page .compare-disclosure { margin: 36px 0; }
.subscription-page .compare-disclosure>summary { text-align: center; padding: 16px; }
.subscription-page .upgrade-payment-policy { padding: 20px; border: 1px solid var(--fx-border); border-radius: var(--fx-radius-md); background: var(--fx-bg-elevated); font-size: 12px; color: var(--fx-text-muted); }
.subscription-page .upgrade-payment-policy a { color: var(--fx-ac2); }
.subscription-page .state-warning { padding: 18px; margin: 20px 0; border: 1px solid var(--fx-warning); border-radius: var(--fx-radius-md); color: var(--fx-warning); font-size: 13px; }
.subscription-page .state-warning a { text-decoration: underline; }
.subscription-page .hero .ultra-tier-label { color: var(--fx-gold); }
@media(min-width:769px) {
 .subscription-page { --subscription-sidebar: calc(var(--fx-sidebar-w,248px) + 12px); }
 body.fx-collapsed .subscription-page { --subscription-sidebar: calc(var(--fx-sidebar-w-mini,72px) + 12px); }
}
@media(max-width:1100px) {
 
 .subscription-page .plan.pro { margin-top: 0; padding-top: 24px; }
 .subscription-page .plan-intro { min-height: 44px; }
 .subscription-page .benefits li { min-height: 40px; }
}
@media(max-width:768px) {
 .subscription-page .compare[data-compare-mobile="true"] .table-hint { display: none; }
 .subscription-page .compare[data-compare-mobile="true"] table { min-width: 0; font-size: 13px; }
 .subscription-page .compare[data-compare-mobile="true"] th,.subscription-page .compare[data-compare-mobile="true"] td { padding: 14px 12px; overflow-wrap: anywhere; }
 .subscription-page .compare[data-compare-mobile="true"] th:first-child { position: static; width: 52%; box-shadow: none; }
 .subscription-page .compare[data-compare-mobile="true"] thead th { font-size: 14px; }
 .subscription-page .compare[data-compare-mobile="true"] thead th:first-child { font-size: 12px; }
 .subscription-page .compare[data-compare-mobile="true"] th small,.subscription-page .compare[data-compare-mobile="true"] td small { font-size: 11px; line-height: 1.6; color: var(--fx-text-muted); }
 .subscription-page .compare[data-compare-mobile="true"] .table-group th { width: auto; font-size: 10px; padding-block: 12px; }
    .subscription-page .plans:not([data-paid="ultra"]) { grid-template-columns: minmax(0,400px); justify-content: center; padding: 8px;}
 body[data-page-slug="subscription"] .fx-topbar { display: flex; position: fixed; top: max(19px,calc(env(safe-area-inset-top,0px) + 7px)); left: 10px; width: 40px; height: 44px; padding: 0; z-index: 51; }
 body[data-page-slug="subscription"] .fx-topbar .fx-page-title { display: none; }
 body[data-page-slug="subscription"] .fx-topbar .fx-burger { backdrop-filter: blur(24px); border-radius: 14px; }
 .subscription-page .subscription-nav { left: calc(var(--subscription-gutter) + 42px); }
 .subscription-page .subscription-nav a { font-size: clamp(9px,2.8vw,11px); }
}