/* ── PAGE SHELL ── */
.si-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
    /* Brand background — dark: bg4 (high-contrast gears), light: bg3 (purple gears) */
    background-image: url('/images/bg4.png');
    background-size: cover;
    background-position: center;
}

    /* Dark overlay on background */
    .si-page::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient( 145deg, rgba(8, 8, 15, 0.50) 0%, rgba(30, 10, 55, 0.45) 50%, rgba(8, 8, 15, 0.55) 100% );
        z-index: 0;
    }

    /* Grain texture */
    .si-page::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
        opacity: var(--tdm-grain-opacity);
        pointer-events: none;
        z-index: 1;
    }

/* ── CARD ── */
.si-card {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 420px;
    background: var(--tdm-elevated);
    border: 1px solid var(--tdm-border);
    border-radius: 16px;
    padding: 2.4rem 2.4rem 2rem;
    box-shadow: 0 0 0 1px rgba(var(--tdm-purple-rgb), 0.08), 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 80px rgba(var(--tdm-purple-rgb), 0.08);
}

/* ── LOGO ── */
.si-logo-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.8rem;
}

.si-logo {
    height: 36px;
    width: auto;
    filter: drop-shadow(0 0 8px rgba(var(--tdm-purple-rgb), 0.55));
}

.si-brand {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.si-brand-name {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--tdm-chrome);
}

.si-brand-sub {
    font-family: 'Barlow', sans-serif;
    font-size: 0.63rem;
    font-weight: 500;
    color: var(--tdm-text);
    letter-spacing: 0.04em;
}

/* ── HEADINGS ── */
.si-heading {
    font-family: 'Exo 2', sans-serif;
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--tdm-white);
    line-height: 1;
    margin: 0 0 0.3rem;
}

.si-sub {
    font-size: 0.82rem;
    color: var(--tdm-text);
    margin: 0 0 1.8rem;
}

/* ── FIELDS ── */
.si-field-wrap {
    margin-bottom: 1.1rem;
}

.si-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--tdm-chrome);
    margin-bottom: 0.4rem;
}

/* ── REQUIRED LABEL MARKER ── */
.si-label-req::after {
    content: ' *';
    color: var(--tdm-red, #ef4444);
    font-weight: 700;
}

.si-input-wrap {
    position: relative;
}

.si-input-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--tdm-text);
    font-size: 0.85rem;
    pointer-events: none;
    transition: color 0.2s ease;
}

.si-input {
    width: 100%;
    padding: 0.62rem 0.9rem 0.62rem 2.4rem;
    background: #20203c;
    border: 1px solid rgba(139, 92, 246, 0.32);
    border-radius: 8px;
    color: #e8e8ff;
    font-family: 'Barlow', sans-serif;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    color-scheme: dark;
}



    .si-input::placeholder {
        color: #6868a0;
    }

    .si-input:focus {
        border-color: var(--tdm-purple);
        box-shadow: 0 0 0 3px rgba(var(--tdm-purple-rgb), 0.18);
    }

        .si-input:focus + .si-input-icon,
        .si-input-wrap:focus-within .si-input-icon {
            color: var(--tdm-purple);
        }

.csel-input {
    border-color: rgba(var(--tdm-purple-rgb), 0.7);
   /* box-shadow: 0 0 0 3px rgba(var(--tdm-purple-rgb), 0.12);*/
    background: rgba(var(--tdm-purple-rgb), 0.18);
    border: 1px solid rgba(139, 92, 246, 0.32);
    border-radius: 8px;
    color: #e8e8ff;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    color-scheme: dark;
}

/*.csel-input:focus {
    border-color: var(--tdm-purple);
    box-shadow: 0 0 0 3px rgba(var(--tdm-purple-rgb), 0.18);
}*/

.csel-value.placeholder {
    /*  color: #6969A0;*/
    color: #6868a0;
    background: var(--tdm-surface-placeholder);
}

.csel-trigger {
    width: 100%;
    background: var(--tdm-surface-placeholder);
    border: 1px solid var(--tdm-border);
    border-radius: 4px;
    color: var(--tdm-white);
    font-family: 'Barlow', sans-serif;
    font-size: 0.9rem;
    font-weight: 400;
    padding: 0.65rem 2.4rem 0.65rem 0.9rem;
    outline: none;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
    position: relative;
}
    .csel-trigger:focus,
    .csel-trigger[aria-expanded="true"] {
        border-color: rgba(var(--tdm-purple-rgb), 0.6);
        box-shadow: 0 0 0 3px rgba(var(--tdm-purple-rgb), 0.12);
        background: var(--tdm-surface-placeholder);
    }
   

.csel-panel {
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    right: 0;
    z-index: 500;
    background: var(--tdm-surface);
    border: 1px solid var(--tdm-border);
    border-radius: 6px;
    max-height: 256px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
    display: none;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}


    /* Password toggle */
    .si-pw-toggle {
        position: absolute;
        right: 0.7rem;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        padding: 0.2rem 0.3rem;
        color: var(--tdm-text);
        cursor: pointer;
        font-size: 0.9rem;
        transition: color 0.2s ease;
        line-height: 1;
    }

        .si-pw-toggle:hover {
            color: var(--tdm-chrome);
        }
    /* Validation */
    .si-field-wrap.was-invalid .si-input {
        border-color: var(--tdm-red);
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
    }

    .si-invalid-msg {
        display: none;
        font-size: 0.72rem;
        color: var(--tdm-red);
        margin-top: 0.3rem;
    }

    .si-field-wrap.was-invalid .si-invalid-msg {
        display: block;
    }
    /* ── REMEMBER + FORGOT ROW ── */
    .si-row-aux {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0.2rem 0 1.4rem;
        gap: 0.5rem;
    }
    /* Custom checkbox */
    .si-check-label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
        font-size: 0.82rem;
        color: var(--tdm-text);
        user-select: none;
    }

    .si-checkbox {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .si-check-box {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        border: 1.5px solid rgba(139, 92, 246, 0.4);
        border-radius: 4px;
        background: #20203c;
        flex-shrink: 0;
        transition: border-color 0.2s ease, background 0.2s ease;
    }

        .si-check-box::after {
            content: '';
            display: none;
            width: 9px;
            height: 5px;
            border-left: 2px solid #fff;
            border-bottom: 2px solid #fff;
            transform: rotate(-45deg) translateY(-1px);
        }

    .si-checkbox:checked + .si-check-box {
        background: var(--tdm-purple);
        border-color: var(--tdm-purple);
    }

        .si-checkbox:checked + .si-check-box::after {
            display: block;
        }

    .si-checkbox:focus-visible + .si-check-box {
        box-shadow: 0 0 0 3px rgba(var(--tdm-purple-rgb), 0.25);
    }
    /* Links */
    .si-link {
        font-size: 0.82rem;
        color: var(--tdm-purple);
        text-decoration: none;
        transition: color 0.2s ease;
    }

        .si-link:hover {
            color: var(--tdm-purple-hi);
        }

        .si-link:focus-visible {
            outline: 2px solid var(--tdm-purple);
            outline-offset: 2px;
            border-radius: 2px;
        }
    /* ── SUBMIT BUTTON ── */
    .si-btn-submit {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        width: 100%;
        padding: 0.72rem 1.5rem;
        background: var(--tdm-purple);
        border: none;
        border-radius: 8px;
        color: #fff;
        font-family: 'Barlow', sans-serif;
        font-size: 0.95rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        cursor: pointer;
        transition: background 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
        box-shadow: 0 4px 18px rgba(var(--tdm-purple-rgb), 0.35);
        margin-bottom: 0.3rem;
    }

    .si-btn-arrow {
        font-size: 1.3rem;
        transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .si-btn-submit:hover {
        background: var(--tdm-purple-hi);
        box-shadow: 0 6px 24px rgba(var(--tdm-purple-rgb), 0.5);
        transform: translateY(-1px);
    }

        .si-btn-submit:hover .si-btn-arrow {
            transform: translateX(3px);
        }

    .si-btn-submit:active {
        transform: translateY(0);
        box-shadow: 0 2px 10px rgba(var(--tdm-purple-rgb), 0.3);
    }

    .si-btn-submit:focus-visible {
        outline: 2px solid var(--tdm-purple-hi);
        outline-offset: 3px;
    }
    /* ── REGISTER LINK ── */
    .si-register {
        text-align: center;
        margin-top: 1.4rem;
        padding-top: 1.2rem;
        border-top: 1px solid var(--tdm-border);
        font-size: 0.82rem;
        color: var(--tdm-text);
    }

    .si-link-hi {
        font-weight: 600;
        color: var(--tdm-purple);
    }

        .si-link-hi:hover {
            color: var(--tdm-purple-hi);
        }
    /* ── THEME TOGGLE ── */
    .si-theme-wrap {
        position: fixed;
        top: 1rem;
        right: 1.2rem;
        z-index: 100;
    }

    .si-theme-menu {
        background: var(--tdm-elevated);
        border: 1px solid var(--tdm-border);
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        min-width: 140px;
    }

        .si-theme-menu .dropdown-item {
            color: var(--tdm-chrome);
            font-size: 0.82rem;
            padding: 0.45rem 1rem;
            border-radius: 6px;
            margin: 0.15rem 0.25rem;
            transition: background 0.15s ease, color 0.15s ease;
        }

            .si-theme-menu .dropdown-item:hover {
                background: rgba(var(--tdm-purple-rgb), 0.15);
                color: var(--tdm-purple-hi);
            }
    /* ── LIGHT MODE OVERRIDES ── */
    [data-bs-theme="light"] .si-page {
        background-image: url('/images/bg3.png');
    }

    [data-bs-theme="light"] .si-card {
        background: #ffffff;
        border-color: rgba(109, 40, 217, 0.16);
        box-shadow: 0 0 0 1px rgba(109, 40, 217, 0.06), 0 8px 32px rgba(0, 0, 0, 0.10), 0 0 60px rgba(109, 40, 217, 0.06);
    }

    [data-bs-theme="light"] .si-page::before {
        background: linear-gradient( 145deg, rgba(220, 215, 245, 0.78) 0%, rgba(200, 190, 240, 0.72) 50%, rgba(220, 215, 245, 0.82) 100% );
    }

    [data-bs-theme="light"] .si-input {
        background: #f5f5fa;
        border-color: rgba(109, 40, 217, 0.28);
        color: #2d2d4a;
        color-scheme: light;
    }

        [data-bs-theme="light"] .si-input::placeholder {
            color: #9090b8;
        }

        [data-bs-theme="light"] .si-input:focus {
            border-color: #6d28d9;
            box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.14);
        }

    [data-bs-theme="light"] .si-check-box {
        background: #f5f5fa;
        border-color: rgba(109, 40, 217, 0.35);
    }

    [data-bs-theme="light"] .si-pw-toggle {
        color: #9090b8;
    }

        [data-bs-theme="light"] .si-pw-toggle:hover {
            color: #2d2d4a;
        }

    [data-bs-theme="light"] .si-theme-menu {
        background: #ffffff;
        border-color: rgba(109, 40, 217, 0.16);
    }

        [data-bs-theme="light"] .si-theme-menu .dropdown-item {
            color: #2d2d4a;
        }

            [data-bs-theme="light"] .si-theme-menu .dropdown-item:hover {
                background: rgba(109, 40, 217, 0.08);
                color: #6d28d9;
            }
    /* ── MOBILE ── */
    @media (max-width: 480px) {
        .si-card {
            padding: 1.8rem 1.4rem 1.5rem;
            border-radius: 12px;
        }

        .si-heading {
            font-size: 1.45rem;
        }
    }
    /* ── BACKGROUND ── */
    .si-page {
        background-image: url('/images/bg.png');
        background-position: center center;
        align-items: center;
        padding: 2rem 1rem;
    }
    /* Checkout card is tall — allow vertical scroll and top-align */
    .co-page {
        overflow: auto;
        align-items: flex-start;
        justify-content: center;
    }

    .si-page::before {
        background: linear-gradient( 145deg, rgba(8, 8, 15, 0.74) 0%, rgba(18, 6, 38, 0.70) 50%, rgba(8, 8, 15, 0.76) 100% );
    }

    [data-bs-theme="light"] .si-page {
        background-image: url('/images/bg.png');
    }

        [data-bs-theme="light"] .si-page::before {
            background: linear-gradient( 145deg, rgba(220, 215, 245, 0.84) 0%, rgba(200, 185, 240, 0.80) 50%, rgba(220, 215, 245, 0.86) 100% );
        }
    /* ── CARD SHELL ── */
    .co-card {
        width: 100%;
        max-width: 920px;
        background: var(--tdm-elevated);
        border: 1px solid var(--tdm-border);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 0 0 1px rgba(var(--tdm-purple-rgb), 0.1), 0 16px 56px rgba(0, 0, 0, 0.55), 0 0 120px rgba(var(--tdm-purple-rgb), 0.08);
        /* override si-card padding */
        padding: 0;
        position: relative;
        z-index: 10;
    }
    /* ── HEADER ── */
    .co-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
        padding: 1.6rem 2rem 1.4rem;
        border-bottom: 1px solid var(--tdm-border);
    }
    /* ── STEP INDICATOR ── */
    .co-steps {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .co-step {
        display: flex;
        align-items: center;
        gap: 0.45rem;
    }

    .co-step-num {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: rgba(var(--tdm-purple-rgb), 0.1);
        border: 1.5px solid rgba(var(--tdm-purple-rgb), 0.28);
        font-family: 'Space Mono', monospace;
        font-size: 0.6rem;
        color: var(--tdm-text);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition: all 0.2s ease;
    }

    .co-step-label {
        font-family: 'Exo 2', sans-serif;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.09em;
        text-transform: uppercase;
        color: var(--tdm-text);
    }

    .co-step--active .co-step-num {
        background: var(--tdm-purple);
        border-color: var(--tdm-purple);
        color: #fff;
        box-shadow: 0 0 10px rgba(var(--tdm-purple-rgb), 0.45);
    }

    .co-step--active .co-step-label {
        color: var(--tdm-chrome);
    }

    .co-step--done .co-step-num {
        background: rgba(var(--tdm-green-rgb), 0.15);
        border-color: var(--tdm-green);
        color: var(--tdm-green);
        font-size: 0.78rem;
    }

    .co-step--done .co-step-label {
        color: var(--tdm-text);
    }

    .co-step-line {
        width: 2.5rem;
        height: 1px;
        background: var(--tdm-border);
        margin: 0 0.6rem;
        flex-shrink: 0;
    }
    /* ── TWO-PANEL LAYOUT ── */
    .co-layout {
        display: flex;
        min-height: 0;
    }
    /* ── SUMMARY PANEL (left) ── */
    .co-summary {
        width: 280px;
        flex-shrink: 0;
        padding: 2rem 1.75rem;
        background: radial-gradient(ellipse at 70% 10%, rgba(var(--tdm-purple-rgb), 0.07) 0%, transparent 65%), var(--tdm-surface);
        border-right: 1px solid var(--tdm-border);
        display: flex;
        flex-direction: column;
    }

    .co-plan-badge {
        font-family: 'Space Mono', monospace;
        font-size: 0.6rem;
        letter-spacing: 0.18em;
        color: var(--tdm-purple);
        margin-bottom: 0.6rem;
    }

    .co-summary-price {
        display: flex;
        align-items: baseline;
        gap: 0.15rem;
        margin-bottom: 0.3rem;
        line-height: 1;
    }

    .co-price-amount {
        font-family: 'Space Mono', monospace;
        font-size: 2.6rem;
        font-weight: 700;
        color: var(--tdm-white);
        line-height: 1;
    }

    .co-price-period {
        font-family: 'Exo 2', sans-serif;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--tdm-text);
    }

    .co-seats {
        font-family: 'Space Mono', monospace;
        font-size: 0.62rem;
        color: rgba(var(--tdm-purple-rgb), 0.7);
        letter-spacing: 0.04em;
        margin-bottom: 1.6rem;
    }
    /* Feature checklist */
    .co-features {
        list-style: none;
        padding: 0;
        margin: 0 0 0;
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
    }

        .co-features li {
            display: flex;
            align-items: center;
            gap: 0.55rem;
            font-family: 'Barlow', sans-serif;
            font-size: 0.82rem;
            color: var(--tdm-text);
            line-height: 1.3;
        }

        .co-features .bi-check2 {
            color: var(--tdm-green);
            font-size: 0.92rem;
            flex-shrink: 0;
        }

    .co-billing-note {
        font-family: 'Barlow', sans-serif;
        font-size: 0.76rem;
        color: var(--tdm-text);
        margin-top: auto;
        padding-top: 1.25rem;
        line-height: 1.5;
    }

    .co-tax-note {
        font-family: 'Space Mono', monospace;
        font-size: 0.58rem;
        color: rgba(var(--tdm-purple-rgb), 0.45);
        letter-spacing: 0.04em;
        margin-top: 0.4rem;
        margin-bottom: 1.25rem;
    }

    .co-change-link {
        font-family: 'Exo 2', sans-serif;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--tdm-text);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        transition: color 0.18s ease;
    }

        .co-change-link:hover {
            color: var(--tdm-purple);
        }

        .co-change-link:focus-visible {
            outline: 2px solid var(--tdm-purple);
            border-radius: 2px;
        }
    /* ── FORM PANEL (right) ── */
    .co-form-panel {
        flex: 1;
        min-width: 0;
        padding: 2rem 2rem 2rem;
    }

    .co-form-heading {
        font-family: 'Exo 2', sans-serif;
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--tdm-white);
        line-height: 1;
        margin: 0 0 0.3rem;
    }

    .co-form-sub {
        font-size: 0.8rem;
        color: var(--tdm-text);
        margin: 0 0 1.5rem;
    }
    /* ── PAYMENT ALERT ── */
    .co-alert {
        display: flex;
        align-items: flex-start;
        gap: 0.6rem;
        padding: 0.75rem 1rem;
        border-radius: 8px;
        font-size: 0.82rem;
        margin-bottom: 1.25rem;
    }

    .co-alert--error {
        background: rgba(239, 68, 68, 0.1);
        border: 1px solid rgba(239, 68, 68, 0.3);
        color: var(--tdm-red);
    }

    .co-alert .bi {
        flex-shrink: 0;
        margin-top: 1px;
    }
    /* ── EXPIRY + CVC ROW ── */
    .co-field-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
    /* Input variants */
    .co-input-bare {
        padding-left: 0.9rem !important;
    }

    .co-input-cvc {
        padding-right: 2.4rem !important;
    }

    .co-cvc-icon {
        position: absolute;
        right: 0.85rem;
        top: 50%;
        transform: translateY(-50%);
        color: var(--tdm-text);
        font-size: 0.85rem;
        pointer-events: none;
    }
    /* ── SUBMIT BUTTON ── */
    .co-btn-submit {
        margin-top: 0.4rem;
        font-size: 0.9rem;
    }

        .co-btn-submit:disabled {
            opacity: 0.72;
            cursor: not-allowed;
            transform: none !important;
        }
    /* Loading spinner (replaces arrow icon when processing) */
    .co-spinner {
        width: 16px;
        height: 16px;
        border: 2px solid rgba(255, 255, 255, 0.3);
        border-top-color: #fff;
        border-radius: 50%;
        animation: co-spin 0.7s linear infinite;
        display: inline-block;
        flex-shrink: 0;
    }

    @keyframes co-spin {
        to {
            transform: rotate(360deg);
        }
    }
    /* ── SECURITY NOTE ── */
    .co-security {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.4rem;
        font-family: 'Space Mono', monospace;
        font-size: 0.6rem;
        color: rgba(var(--tdm-purple-rgb), 0.42);
        letter-spacing: 0.06em;
        margin-top: 0.75rem;
    }
    /* ── LIGHT MODE ── */
    [data-bs-theme="light"] .co-card {
        box-shadow: 0 0 0 1px rgba(109, 40, 217, 0.08), 0 16px 56px rgba(0, 0, 0, 0.12), 0 0 100px rgba(109, 40, 217, 0.06);
    }

    [data-bs-theme="light"] .co-summary {
        background: radial-gradient(ellipse at 70% 10%, rgba(109, 40, 217, 0.05) 0%, transparent 65%), #f0f0f8;
    }

    [data-bs-theme="light"] .co-alert--error {
        background: rgba(220, 38, 38, 0.06);
        border-color: rgba(220, 38, 38, 0.25);
    }
    /* ── SECTION LABELS ── */
    .co-section-label {
        font-family: 'Space Mono', monospace;
        font-size: 0.58rem;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: rgba(var(--tdm-purple-rgb), 0.6);
        margin: 1rem 0 0.65rem;
        padding-bottom: 0.35rem;
        border-bottom: 1px solid rgba(var(--tdm-purple-rgb), 0.12);
    }

        .co-section-label:first-child {
            margin-top: 0;
        }
    /* ── OPTIONAL LABEL ── */
    .co-optional {
        font-family: 'Barlow', sans-serif;
        font-size: 0.68rem;
        font-weight: 400;
        text-transform: none;
        letter-spacing: 0;
        color: var(--tdm-text);
        opacity: 0.55;
    }
    /* ── ADDRESS ROW (city / state / zip) ── */
    .co-addr-row {
        display: grid;
        grid-template-columns: 1fr 80px 120px;
        gap: 0.75rem;
    }
    /* ── STATE SELECT ── */
    .co-select-wrap {
        position: relative;
    }

    .co-state-select {
        appearance: none;
        -webkit-appearance: none;
        padding-right: 2rem !important;
        cursor: pointer;
        color-scheme: dark;
    }

    [data-bs-theme="light"] .co-state-select {
        color-scheme: light;
    }

    .co-select-chevron {
        position: absolute;
        right: 0.7rem;
        top: 50%;
        transform: translateY(-50%);
        font-size: 0.72rem;
        color: var(--tdm-text);
        pointer-events: none;
    }
    /* ── STRIPE ELEMENT CONTAINERS ── */
    .co-stripe-wrap {
        cursor: text;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .co-stripe-el {
        flex: 1;
        padding: 0.52rem 0.75rem 0.52rem 0;
        min-height: 20px;
    }

    .co-stripe-el--bare {
        padding-left: 0.9rem;
    }

    .co-stripe-el--cvc {
        padding-right: 2.4rem;
    }

    .co-stripe-wrap.is-focused {
        border-color: var(--tdm-purple) !important;
        box-shadow: 0 0 0 3px rgba(var(--tdm-purple-rgb), 0.18) !important;
    }

    .si-field-wrap.was-invalid .co-stripe-wrap {
        border-color: var(--tdm-red) !important;
        box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
    }
    /* ── STEP LINE DONE STATE ── */
    .co-step-line--done {
        background: rgba(var(--tdm-green-rgb), 0.35);
    }
    /* ── PLAN SELECT (step 1) ── */
    .co-plan-select {
        appearance: none;
        -webkit-appearance: none;
        padding-left: 0.9rem !important;
        padding-right: 2rem !important;
        font-family: 'Exo 2', sans-serif;
        font-weight: 600;
        font-size: 0.88rem;
        cursor: pointer;
        color-scheme: dark;
    }

    [data-bs-theme="light"] .co-plan-select {
        color-scheme: light;
    }
    /* ── FIELD HINT ── */
    .co-field-hint {
        font-family: 'Barlow', sans-serif;
        font-size: 0.76rem;
        color: var(--tdm-text);
        margin: -0.35rem 0 0.9rem;
        line-height: 1.5;
    }
    /* ── TERMS WRAP ── */
    .co-terms-wrap {
        margin-bottom: 1.25rem;
    }

        .co-terms-wrap .si-check-label {
            align-items: flex-start;
            gap: 0.6rem;
        }

        .co-terms-wrap .si-check-box {
            margin-top: 2px;
            flex-shrink: 0;
        }

        .co-terms-wrap .si-check-label span {
            font-size: 0.8rem;
            line-height: 1.55;
        }
    /* ── VERIFY CARD ── */
    .co-card--verify {
        max-width: 640px;
    }
    /* ── VERIFY PAGE BODY ── */
    .co-verify-body {
        padding: 2.5rem 2rem 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .co-verify-icon {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: rgba(var(--tdm-purple-rgb), 0.1);
        border: 1.5px solid rgba(var(--tdm-purple-rgb), 0.35);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.7rem;
        color: var(--tdm-purple);
        margin-bottom: 1.25rem;
        box-shadow: 0 0 28px rgba(var(--tdm-purple-rgb), 0.15);
        animation: co-verify-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    @keyframes co-verify-drop {
        from {
            transform: scale(0.5) translateY(-10px);
            opacity: 0;
        }

        to {
            transform: scale(1) translateY(0);
            opacity: 1;
        }
    }

    .co-verify-header {
        display: flex;
        align-items: center; /* vertically centers icon with text */
        justify-content: space-between; /* pushes icon to the right */
        gap: 16px; /* optional spacing */
}

    .co-verify-heading {
        font-family: 'Exo 2', sans-serif;
        font-size: 1.7rem;
        font-weight: 800;
        color: var(--tdm-white);
        margin: 0 0 0.5rem;
        line-height: 1;
    }

    .co-verify-sub {
        font-family: 'Barlow', sans-serif;
        font-size: 0.88rem;
        color: var(--tdm-text);
        margin: 0 0 2rem;
        line-height: 1.65;
    }

    .co-verify-email {
        font-weight: 600;
        color: var(--tdm-chrome);
        font-family: 'Space Mono', monospace;
        font-size: 0.8rem;
    }
    /* ── VERIFICATION CODE BOXES ── */
    .co-code-group {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1.75rem;
    }

    .co-code-box {
        width: 52px;
        height: 60px;
        background: #20203c;
        border: 1.5px solid rgba(139, 92, 246, 0.32);
        border-radius: 10px;
        color: #e8e8ff;
        font-family: 'Space Mono', monospace;
        font-size: 1.5rem;
        font-weight: 700;
        text-align: center;
        outline: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        caret-color: var(--tdm-purple);
    }

        .co-code-box:focus {
            border-color: var(--tdm-purple);
            box-shadow: 0 0 0 3px rgba(var(--tdm-purple-rgb), 0.18);
        }

    .co-code-sep {
        width: 14px;
        height: 2px;
        background: var(--tdm-border);
        border-radius: 1px;
        flex-shrink: 0;
    }

    [data-bs-theme="light"] .co-code-box {
        background: #f5f5fa;
        border-color: rgba(109, 40, 217, 0.28);
        color: #2d2d4a;
    }

        [data-bs-theme="light"] .co-code-box:focus {
            border-color: #6d28d9;
            box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.14);
        }

    .co-verify-btn {
        width: 100%;
    }

    .co-verify-resend {
        font-family: 'Barlow', sans-serif;
        font-size: 0.82rem;
        color: var(--tdm-text);
        margin-top: 1.25rem;
    }

    .co-resend-btn {
        background: none;
        border: none;
        padding: 0;
        font-family: 'Barlow', sans-serif;
        font-size: 0.82rem;
        color: var(--tdm-purple);
        cursor: pointer;
        text-decoration: underline;
        text-underline-offset: 2px;
        transition: color 0.18s ease;
    }

        .co-resend-btn:hover {
            color: var(--tdm-purple-hi);
        }

        .co-resend-btn:focus-visible {
            outline: 2px solid var(--tdm-purple);
            border-radius: 2px;
        }
    /* ── SAME-AS CHECK ── */
    .co-same-check {
        margin-bottom: 0.9rem;
    }

        .co-same-check .si-check-label span {
            font-size: 0.82rem;
        }
    /* ── BILLING CONTACT NOTICE ── */
    .co-bill-notice {
        display: flex;
        align-items: flex-start;
        gap: 0.55rem;
        background: rgba(var(--tdm-purple-rgb), 0.06);
        border: 1px solid rgba(var(--tdm-purple-rgb), 0.18);
        border-radius: 8px;
        padding: 0.75rem 1rem;
        margin-bottom: 1.25rem;
        font-family: 'Barlow', sans-serif;
        font-size: 0.78rem;
        color: var(--tdm-text);
        line-height: 1.55;
    }

    .co-bill-notice-icon {
        color: rgba(var(--tdm-purple-rgb), 0.65);
        font-size: 0.9rem;
        flex-shrink: 0;
        margin-top: 1px;
    }
    /* ── SUCCESS PAGE ── */
    .co-card--success {
        max-width: 640px;
    }

    .co-success-body {
        padding: 3rem 2rem 2.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .co-success-icon {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        background: rgba(var(--tdm-green-rgb), 0.1);
        border: 2px solid var(--tdm-green);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: var(--tdm-green);
        margin-bottom: 1.5rem;
        box-shadow: 0 0 0 8px rgba(var(--tdm-green-rgb), 0.06), 0 0 32px rgba(var(--tdm-green-rgb), 0.18);
        animation: co-success-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    @keyframes co-success-pop {
        from {
            transform: scale(0.4);
            opacity: 0;
        }

        to {
            transform: scale(1);
            opacity: 1;
        }
    }

    .co-success-heading {
        font-family: 'Exo 2', sans-serif;
        font-size: 2rem;
        font-weight: 800;
        color: var(--tdm-white);
        margin: 0 0 0.5rem;
        line-height: 1;
    }

    .co-success-sub {
        font-family: 'Barlow', sans-serif;
        font-size: 0.88rem;
        color: var(--tdm-text);
        margin: 0 0 2rem;
        max-width: 380px;
        line-height: 1.6;
    }

    .co-success-plan-card {
        background: var(--tdm-surface);
        border: 1px solid var(--tdm-border);
        border-radius: 12px;
        padding: 1.25rem 1.75rem;
        margin-bottom: 1.75rem;
        width: 100%;
        max-width: 380px;
        text-align: left;
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
    }

    .co-success-plan-row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        font-family: 'Barlow', sans-serif;
        font-size: 0.82rem;
        color: var(--tdm-text);
    }

        .co-success-plan-row strong {
            font-family: 'Space Mono', monospace;
            font-size: 0.72rem;
            font-weight: 700;
            color: var(--tdm-chrome);
        }

    .co-success-plan-total {
        border-top: 1px solid var(--tdm-border);
        padding-top: 0.6rem;
        margin-top: 0.1rem;
    }

        .co-success-plan-total span:last-child {
            font-family: 'Space Mono', monospace;
            font-size: 0.96rem;
            font-weight: 700;
            color: var(--tdm-white);
        }

    .co-success-cta {
        width: 100%;
        max-width: 380px;
        text-decoration: none;
    }

    .co-success-note {
        font-family: 'Space Mono', monospace;
        font-size: 0.58rem;
        color: rgba(var(--tdm-purple-rgb), 0.42);
        letter-spacing: 0.05em;
        margin-top: 1.25rem;
        max-width: 360px;
        line-height: 1.7;
    }
    /* ── HIGHLIGHTS (sidebar value props) ── */
    .co-highlights {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        margin-top: 1.25rem;
        padding-top: 1.25rem;
        border-top: 1px solid rgba(var(--tdm-purple-rgb), 0.12);
    }

    .co-highlight-item {
        display: flex;
        align-items: flex-start;
        gap: 0.6rem;
        font-family: 'Barlow', sans-serif;
        font-size: 0.78rem;
        color: var(--tdm-text);
        line-height: 1.45;
    }

        .co-highlight-item .bi {
            color: rgba(var(--tdm-purple-rgb), 0.6);
            font-size: 0.88rem;
            flex-shrink: 0;
            margin-top: 2px;
        }
    /* ── EMAIL-OK CONFIRM PANEL ── */
    .co-email-confirm-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: rgba(var(--tdm-green-rgb), 0.08);
        border: 1.5px solid rgba(var(--tdm-green-rgb), 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.65rem;
        color: var(--tdm-green);
        margin: 0.5rem 0 1.5rem;
        box-shadow: 0 0 24px rgba(var(--tdm-green-rgb), 0.12);
        animation: co-verify-drop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    }

    .co-email-confirm-heading {
        font-family: 'Exo 2', sans-serif;
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--tdm-white);
        margin: 0 0 0.35rem;
        line-height: 1.25;
    }

    .co-email-confirm-sub {
        font-family: 'Barlow', sans-serif;
        font-size: 0.84rem;
        color: var(--tdm-text);
        margin: 0 0 1.75rem;
        line-height: 1.6;
    }

    .co-email-confirm-address {
        font-family: 'Space Mono', monospace;
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--tdm-purple);
    }

    .co-setup-btn {
        margin-bottom: 0.85rem;
    }

    .co-change-email-btn {
        background: none;
        border: none;
        padding: 0;
        font-family: 'Exo 2', sans-serif;
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--tdm-text);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 0.3rem;
        transition: color 0.18s ease;
    }

        .co-change-email-btn:hover {
            color: var(--tdm-purple);
        }

        .co-change-email-btn:focus-visible {
            outline: 2px solid var(--tdm-purple);
            border-radius: 2px;
        }
    /* ── VERIFY IN TWO-PANEL ── */
    .co-form-panel--verify {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        justify-content: center;
        padding: 2.5rem 2rem;
    }
    /* ── PASSWORD CARD ── */
    .co-card--password {
        max-width: 520px;
    }
    /* ── RESPONSIVE ── */
    @media (max-width: 760px) {
        .co-layout {
            flex-direction: column;
        }

        .co-summary {
            width: 100%;
            border-right: none;
            border-bottom: 1px solid var(--tdm-border);
            padding: 1.5rem 1.4rem;
        }

        .co-features {
            display: none;
        }

        .co-form-panel {
            padding: 1.5rem 1.4rem;
        }

        .co-header {
            padding: 1.1rem 1.4rem 1rem;
            gap: 0.5rem;
        }
        /* Hide brand text so header fits — logo alone is enough */
        .si-brand {
            display: none;
        }

        .co-addr-row {
            grid-template-columns: 1fr 70px 100px;
        }
    }

    @media (max-width: 480px) {
        .co-field-row {
            grid-template-columns: 1fr;
        }

        .co-addr-row {
            grid-template-columns: 1fr 1fr;
        }

        .co-addr-city {
            grid-column: 1 / -1;
        }
        /* Shorten step labels */
        .co-step-label {
            display: none;
        }

        .co-step-line {
            width: 1.5rem;
        }
    }

#payment-form {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.payment-loading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 0 0.75rem;
    font-family: 'Space Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(var(--tdm-purple-rgb), 0.5);
}

.payment-loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(var(--tdm-purple-rgb), 0.18);
    border-top-color: var(--tdm-purple);
    border-radius: 50%;
    animation: co-spin 0.8s linear infinite;
    flex-shrink: 0;
}

/* ── PENDING STEP STATE ── */
.co-step--pending .co-step-num {
    background: rgba(245, 158, 11, 0.12);
    border-color: var(--tdm-amber);
    color: var(--tdm-amber);
    font-size: 0.78rem;
}

.co-step--pending .co-step-label {
    color: var(--tdm-amber);
}

.co-step-line--pending {
    background: rgba(245, 158, 11, 0.28);
}

/* ── PENDING PAGE ── */
.co-card--pending {
    max-width: 640px;
}

.co-pending-body {
    padding: 3rem 2rem 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.co-pending-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.08);
    border: 2px solid var(--tdm-amber);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--tdm-amber);
    margin-bottom: 1.5rem;
    box-shadow: 0 0 0 8px rgba(245, 158, 11, 0.05), 0 0 32px rgba(245, 158, 11, 0.14);
    animation: co-success-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.co-pending-heading {
    font-family: 'Exo 2', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: var(--tdm-white);
    margin: 0 0 0.5rem;
    line-height: 1;
}

.co-pending-sub {
    font-family: 'Barlow', sans-serif;
    font-size: 0.88rem;
    color: var(--tdm-text);
    margin: 0 0 1.75rem;
    max-width: 400px;
    line-height: 1.65;
}

.co-pending-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: rgba(245, 158, 11, 0.07);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.75rem;
    width: 100%;
    max-width: 420px;
    text-align: left;
}

.co-pending-notice-icon {
    color: var(--tdm-amber);
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.co-pending-notice-text {
    font-family: 'Barlow', sans-serif;
    font-size: 0.82rem;
    color: var(--tdm-text);
    line-height: 1.6;
}

    .co-pending-notice-text strong {
        color: var(--tdm-chrome);
        font-weight: 600;
    }

.co-pending-note {
    font-family: 'Space Mono', monospace;
    font-size: 0.58rem;
    color: rgba(var(--tdm-purple-rgb), 0.42);
    letter-spacing: 0.05em;
    margin-top: 1.25rem;
    max-width: 360px;
    line-height: 1.7;
}