[hidden] { display: none !important; }
.payment-skip { position: absolute; transform: translateY(-150%); padding: 12px; background: var(--volt); color: var(--night); z-index: 4; }
.payment-skip:focus { transform: none; }
.payment-header, .payment-footer { max-width: 1180px; margin: auto; padding: 28px 32px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.payment-header { border-bottom: 1px solid #303520; }
.payment-header .brand { display: flex; align-items: center; gap: 12px; }
.payment-layout { max-width: 1180px; margin: 64px auto 80px; padding: 0 32px; display: grid; grid-template-columns: 1fr 1.12fr; gap: 64px; align-items: start; }
.payment-product { font-size: 1.1rem; color: var(--volt); font-weight: 700; margin: 8px 0 24px; }
.payment-story h1 { font-size: clamp(2.6rem, 5vw, 4.3rem); line-height: 1.04; letter-spacing: -.055em; margin: 0 0 24px; max-width: 7em; }
.payment-intro { max-width: 24em; color: #c7cabd; font-size: 1.2rem; line-height: 1.65; }
.payment-benefits { list-style: none; padding: 0; margin: 32px 0 44px; display: grid; gap: 16px; }
.payment-benefits li { display: flex; align-items: center; gap: 12px; }
.payment-benefits li::before { content: '✓'; color: var(--volt); font-weight: 700; }
.payment-identity { padding-top: 24px; border-top: 1px solid #303520; }
.payment-identity p { color: #a9ad9e; font-size: .875rem; line-height: 1.6; margin: 6px 0; }
.payment-identity strong { display: block; overflow-wrap: anywhere; }
.payment-panel { min-width: 0; border: 1px solid #303520; border-radius: 24px; background: #191d10; padding: 28px; }
.payment-layout:has(#payment-confirmation:not([hidden])) { grid-template-columns: minmax(0, 640px); justify-content: center; }
.payment-layout:has(#payment-confirmation:not([hidden])) .payment-story { display: none; }
.payment-panel fieldset { border: 0; margin: 0; padding: 0; }
.payment-panel legend, .payment-panel h2 { font-size: 1.5rem; font-weight: 750; margin: 0 0 24px; }
.payment-plan { display: flex; align-items: center; padding: 20px; border: 1px solid #626953; border-radius: 12px; gap: 16px; margin-bottom: 12px; cursor: pointer; }
.payment-plan:has(input:checked) { border-color: var(--volt); background: #242c13; box-shadow: inset 3px 0 var(--volt); }
.payment-plan input { accent-color: var(--volt); width: 18px; height: 18px; flex-shrink: 0; }
.payment-plan span { display: flex; flex: 1; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.payment-plan strong { font-weight: 600; }
.payment-panel button, .payment-controls a { font: inherit; cursor: pointer; border: 1px solid #626953; border-radius: 10px; background: #10140b; color: #f1f1e7; padding: 14px 20px; min-height: 48px; text-decoration: none; }
.payment-panel button:disabled { opacity: .55; cursor: wait; }
.payment-panel .payment-primary { width: 100%; border-color: var(--volt); background: var(--volt); color: var(--night); font-weight: 750; margin-top: 12px; }
.payment-panel .payment-primary:hover:not(:disabled) { background: #daf777; border-color: #daf777; }
.payment-panel :focus-visible, .payment-header :focus-visible, .payment-footer :focus-visible { outline: 3px solid var(--volt); outline-offset: 5px; }
.payment-panel p { line-height: 1.65; }
.payment-hint, .payment-footnote { font-size: .8125rem; color: #a9ad9e; }
.payment-footnote { margin: 24px 0 0; text-align: center; }
.payment-controls { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.payment-sandbox { color: var(--volt); font-size: .875rem; }
#payment-notice:empty { display: none; }
#payment-notice[data-error='true'] { color: #ffb69f; }
#payment-signin button { width: 100%; margin-top: 12px; }
.runvel-paddle-frame { min-width: 0; }
.payment-footer { justify-content: center; border-top: 1px solid #303520; font-size: .875rem; color: #a9ad9e; }
@media (max-width: 800px) { .payment-layout { grid-template-columns: 1fr; margin: 32px auto 48px; gap: 28px; } .payment-story h1 { max-width: none; } .payment-benefits { margin: 24px 0; } }
@media (max-width: 430px) { .payment-layout, .payment-header, .payment-footer { padding-left: 16px; padding-right: 16px; } .payment-panel { padding: 16px 8px; border-radius: 16px; } #payment-plans, #payment-notice, #payment-signin, .payment-controls, .payment-sandbox { margin-left: 8px; margin-right: 8px; } .payment-plan { padding: 16px 12px; } }