:root {
    --sub-bg: #07070d;
    --sub-surface: #11111c;
    --sub-elevated: #1a1a2c;
    --sub-border: #30304a;
    --sub-text: #ffffff;
    --sub-muted: #aaaac1;
    --sub-primary: #8b7cf0;
    --sub-cyan: #56c7eb;
    --sub-success: #33d17a;
    --sub-error: #ff5c78;
    --sub-warning: #f5b942;
    --sub-font: 'Outfit', sans-serif;
    --sub-data-font: 'Inter', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--sub-bg); }

.subscription-body {
    min-height: 100vh;
    margin: 0;
    color: var(--sub-text);
    background: var(--sub-bg);
    font-family: var(--sub-font);
}

.subscription-header {
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: rgba(7,7,13,.95);
}

.subscription-header-inner,
.subscription-main,
.subscription-footer {
    width: min(1160px, calc(100% - 40px));
    margin: 0 auto;
}

.subscription-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 76px;
}

.subscription-header-inner span {
    color: var(--sub-muted);
    font-family: var(--sub-data-font);
    font-size: 12px;
}

.subscription-logo { display: block; width: auto; height: 42px; }

.subscription-main {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
    gap: 64px;
    padding: 64px 0 80px;
}

.subscription-intro { min-width: 0; }
.subscription-eyebrow,
.subscription-form-heading > span {
    color: var(--sub-cyan);
    font-family: var(--sub-data-font);
    font-size: 11px;
    font-weight: 600;
}

.subscription-copy h1 {
    margin: 12px 0 18px;
    font-size: clamp(42px, 6vw, 72px);
    line-height: 1.02;
}

.subscription-copy > p {
    max-width: 620px;
    margin: 0;
    color: var(--sub-muted);
    font-size: 18px;
    line-height: 1.55;
}

.subscription-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 30px 0 22px;
}

.subscription-price strong { font-size: 34px; }
.subscription-price span { color: var(--sub-muted); }

.subscription-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 22px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #d7d7e5;
    font-size: 14px;
}

.subscription-benefits li { position: relative; padding-left: 22px; }
.subscription-benefits li::before { position: absolute; left: 0; color: var(--sub-success); content: '✓'; }

.subscription-covers {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 10px;
    margin-top: 42px;
}

.subscription-cover { min-width: 0; margin: 0; }
.subscription-cover img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 6px;
    object-fit: cover;
}

.subscription-cover figcaption {
    overflow: hidden;
    margin-top: 7px;
    color: var(--sub-muted);
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subscription-checkout {
    align-self: start;
    padding: 28px;
    border: 1px solid var(--sub-border);
    border-radius: 8px;
    background: var(--sub-surface);
}

.subscription-form-heading h2 { margin: 8px 0 8px; font-size: 26px; }
.subscription-form-heading p { margin: 0; color: var(--sub-muted); font-size: 14px; line-height: 1.5; }
.subscription-form { display: flex; flex-direction: column; gap: 16px; margin-top: 24px; }

.subscription-form label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: #e8e8f2;
    font-size: 13px;
    font-weight: 500;
}

.subscription-form input {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid var(--sub-border);
    border-radius: 6px;
    outline: none;
    color: var(--sub-text);
    background: var(--sub-elevated);
    font: 14px var(--sub-data-font);
}

.subscription-form input:focus { border-color: var(--sub-primary); box-shadow: 0 0 0 3px rgba(139,124,240,.15); }
.subscription-form input::placeholder { color: #707088; }
.subscription-form small { color: var(--sub-muted); font-size: 11px; font-weight: 400; }

.subscription-submit {
    min-height: 48px;
    border: 0;
    border-radius: 6px;
    color: #fff;
    background: linear-gradient(120deg, var(--sub-cyan), var(--sub-primary));
    font: 700 14px var(--sub-font);
    cursor: pointer;
}

.subscription-submit:hover { filter: brightness(1.08); }
.subscription-security { margin: 0; color: var(--sub-muted); font: 11px/1.5 var(--sub-data-font); text-align: center; }

.subscription-form.is-confirmed input {
    color: var(--sub-muted);
    cursor: not-allowed;
    opacity: .72;
}

.subscription-payment {
    display: none;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--sub-border);
}

.subscription-payment.is-visible { display: block; }

.subscription-payment-heading { margin-bottom: 18px; }
.subscription-payment-heading span {
    color: var(--sub-cyan);
    font-family: var(--sub-data-font);
    font-size: 11px;
    font-weight: 600;
}

.subscription-payment-heading h3 {
    margin: 6px 0 0;
    font-size: 20px;
}

.subscription-payment-element {
    min-height: 112px;
    padding: 12px;
    border: 1px solid var(--sub-border);
    border-radius: 6px;
    background: var(--sub-elevated);
}

.subscription-payment .subscription-submit { width: 100%; margin-top: 16px; }
.subscription-js-alert { display: none; }
.subscription-js-alert.is-visible { display: block; }

.subscription-alert {
    margin-top: 18px;
    padding: 11px 12px;
    border: 1px solid var(--sub-border);
    border-radius: 6px;
    font: 12px/1.5 var(--sub-data-font);
}

.subscription-alert p { margin: 0; }
.subscription-alert p + p { margin-top: 4px; }
.subscription-alert.is-success { color: var(--sub-success); border-color: rgba(51,209,122,.3); background: rgba(51,209,122,.08); }
.subscription-alert.is-warning { color: var(--sub-warning); border-color: rgba(245,185,66,.3); background: rgba(245,185,66,.08); }
.subscription-alert.is-error { color: var(--sub-error); border-color: rgba(255,92,120,.3); background: rgba(255,92,120,.08); }

.subscription-footer {
    display: flex;
    justify-content: space-between;
    padding: 26px 0;
    border-top: 1px solid rgba(255,255,255,.07);
    color: var(--sub-muted);
    font: 12px var(--sub-data-font);
}

.subscription-footer nav { display: flex; gap: 20px; }
.subscription-footer a { color: var(--sub-muted); text-decoration: none; }
.subscription-footer a:hover { color: var(--sub-text); }

.subscription-result-body { display: grid; place-items: center; padding: 24px; }
.subscription-result {
    width: min(520px, 100%);
    padding: 38px;
    border: 1px solid var(--sub-border);
    border-radius: 8px;
    background: var(--sub-surface);
    text-align: center;
}

.subscription-result .subscription-logo { margin: 0 auto 28px; }
.subscription-result-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0 auto 20px;
    border-radius: 50%;
    color: var(--sub-success);
    background: rgba(51,209,122,.12);
    font-size: 28px;
}

.subscription-result h1 { margin: 0 0 10px; font-size: 30px; }
.subscription-result p { margin: 0 0 24px; color: var(--sub-muted); line-height: 1.6; }
.subscription-result a { color: var(--sub-cyan); font-weight: 600; text-decoration: none; }

@media (max-width: 900px) {
    .subscription-main { grid-template-columns: 1fr; gap: 42px; }
    .subscription-checkout { width: min(560px, 100%); }
}

@media (max-width: 600px) {
    .subscription-header-inner,
    .subscription-main,
    .subscription-footer { width: min(100% - 28px, 1160px); }
    .subscription-header-inner { min-height: 66px; }
    .subscription-logo { height: 36px; }
    .subscription-main { padding: 40px 0 54px; }
    .subscription-copy h1 { font-size: 42px; }
    .subscription-copy > p { font-size: 16px; }
    .subscription-benefits { grid-template-columns: 1fr; }
    .subscription-covers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .subscription-checkout { padding: 20px; }
    .subscription-footer { align-items: flex-start; flex-direction: column; gap: 14px; }
}