/* ============================================================
   BITBI — Public Pricing / Credit Packs
   ============================================================ */

@layer pages {
    .pricing-page {
        position: relative;
        min-block-size: 100vh;
        padding-block-end: clamp(4rem, 8vw, 6rem);
        overflow-x: clip;
        color: rgba(255, 255, 255, 0.92);
        background:
            radial-gradient(circle at 18% 16%, rgba(0, 240, 255, 0.08), transparent 32rem),
            radial-gradient(circle at 82% 10%, rgba(255, 179, 0, 0.08), transparent 28rem),
            linear-gradient(180deg, #070707 0%, #0b1118 48%, #050505 100%);
    }

    .pricing-page .pricing-hero {
        width: auto;
        margin-inline: 0;
    }

    .pricing-page .hero--compact .pricing-hero__title {
        margin-block-start: 0;
        margin-block-end: var(--space-2);
        font-family: var(--font-display);
        font-size: 1.8rem;
        font-weight: 900;
        line-height: 1.08;
    }

    .pricing-page .hero--compact .pricing-hero__subtitle {
        max-inline-size: 28rem;
        margin-inline: auto;
        color: rgba(255, 255, 255, 0.35);
        font-size: 0.8rem;
        line-height: 1.5;
    }

    @media (min-width: 640px) {
        .pricing-page .hero--compact .pricing-hero__title {
            font-size: 2.4rem;
        }
    }

    @media (min-width: 1024px) {
        .pricing-page .hero--compact .pricing-hero__title {
            font-size: 3rem;
        }
    }

    .pricing-root,
    .pricing-shell {
        width: var(--bitbi-content-max-width, min(1180px, calc(100% - 2rem)));
        margin-inline: auto;
    }

    .pricing-root {
        padding-block-start: 0.9rem;
    }

    .pricing-shell {
        display: grid;
        gap: clamp(1rem, 2.2vw, 1.6rem);
    }

    .pricing-access,
    .pricing-card,
    .pricing-org,
    .pricing-legal,
    .pricing-return {
        min-inline-size: 0;
        border: var(--border-subtle);
        border-color: rgba(0, 240, 255, 0.14);
        border-radius: var(--radius-xl);
        background:
            linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.026)),
            rgba(13, 27, 42, 0.92);
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
    }

    .pricing-access,
    .pricing-org,
    .pricing-legal,
    .pricing-return {
        padding: clamp(1rem, 2vw, 1.45rem);
    }

    .pricing-access__copy,
    .pricing-section-copy,
    .pricing-card__copy,
    .pricing-return__copy,
    .pricing-org__state {
        margin: 0;
        color: rgba(255, 255, 255, 0.66);
        line-height: 1.55;
    }

    .pricing-kicker,
    .pricing-card__eyebrow {
        margin: 0 0 0.55rem;
        color: rgba(0, 240, 255, 0.76);
        font-family: var(--font-mono);
        font-size: 0.66rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        line-height: 1.3;
        text-transform: uppercase;
    }

    .pricing-section-title,
    .pricing-card__title,
    .pricing-return__title {
        margin: 0;
        color: rgba(255, 255, 255, 0.94);
        font-family: var(--font-display);
        font-weight: 700;
        line-height: 1.08;
        text-wrap: balance;
    }

    .pricing-section-title {
        font-size: clamp(1.28rem, 2vw, 1.85rem);
    }

    .pricing-offers-section {
        display: grid;
        gap: clamp(0.85rem, 2vw, 1.2rem);
    }

    .pricing-offers-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: clamp(0.8rem, 1.4vw, 1.1rem);
        align-items: stretch;
    }

    .pricing-card {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0.82rem;
        padding: clamp(1rem, 1.8vw, 1.35rem);
        overflow: hidden;
    }

    .pricing-card::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), transparent 48%);
    }

    .pricing-card--featured {
        border-color: rgba(255, 179, 0, 0.28);
        box-shadow: 0 24px 70px rgba(255, 179, 0, 0.08);
    }

    .pricing-card--free {
        border-color: rgba(0, 240, 255, 0.18);
    }

    .pricing-card--selected {
        border-color: rgba(0, 240, 255, 0.36);
        box-shadow: 0 24px 70px rgba(0, 240, 255, 0.09);
    }

    .pricing-card__head,
    .pricing-card__price,
    .pricing-card__best-for,
    .pricing-card__list,
    .pricing-card__cta,
    .pricing-card__copy {
        position: relative;
        z-index: 1;
    }

    .pricing-card__head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .pricing-card__title {
        font-size: clamp(1.35rem, 1.8vw, 1.75rem);
    }

    .pricing-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-block-size: 1.55rem;
        padding-inline: 0.62rem;
        border: 1px solid rgba(0, 240, 255, 0.18);
        border-radius: var(--radius-full);
        color: rgba(0, 240, 255, 0.84);
        background: rgba(0, 240, 255, 0.07);
        font-family: var(--font-mono);
        font-size: 0.6rem;
        font-weight: 800;
        line-height: 1.2;
        text-align: center;
        text-transform: uppercase;
    }

    .pricing-badge--featured {
        border-color: rgba(255, 179, 0, 0.34);
        color: rgba(255, 220, 140, 0.95);
        background: rgba(255, 179, 0, 0.11);
    }

    .pricing-card__price {
        display: grid;
        gap: 0.18rem;
    }

    .pricing-card__price-value {
        display: inline-block;
        transform: translateY(-0.2rem);
        color: var(--color-ember);
        font-family: var(--font-display);
        font-size: clamp(2rem, 3.2vw, 3.05rem);
        font-weight: 700;
        line-height: 0.92;
    }

    .pricing-card__cadence {
        color: rgba(255, 255, 255, 0.5);
        font-family: var(--font-mono);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.08em;
        line-height: 1.25;
        text-transform: uppercase;
    }

    .pricing-card__copy {
        min-block-size: 3.3rem;
        font-size: 0.9rem;
    }

    .pricing-card__best-for {
        display: grid;
        gap: 0.28rem;
        margin: 0;
        padding: 0.75rem 0.82rem;
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: var(--radius-md);
        color: rgba(255, 255, 255, 0.76);
        background: rgba(0, 0, 0, 0.16);
        font-size: 0.88rem;
        line-height: 1.42;
    }

    .pricing-card__best-for-label {
        color: rgba(0, 240, 255, 0.78);
        font-family: var(--font-mono);
        font-size: 0.62rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .pricing-card__list {
        display: grid;
        gap: 0.55rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .pricing-card__list li {
        position: relative;
        padding-inline-start: 1.2rem;
        color: rgba(255, 255, 255, 0.72);
        font-size: 0.88rem;
        line-height: 1.42;
    }

    .pricing-card__list li::before {
        content: "";
        position: absolute;
        inset-inline-start: 0;
        inset-block-start: 0.46rem;
        inline-size: 0.46rem;
        block-size: 0.46rem;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--color-cyan), var(--color-ember));
        box-shadow: 0 0 14px rgba(0, 240, 255, 0.24);
    }

    .pricing-card__cta,
    .pricing-return__link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-block-size: 2.85rem;
        margin-block-start: auto;
        padding-inline: 0.95rem;
        border: 1px solid rgba(0, 240, 255, 0.28);
        border-radius: var(--radius-full);
        color: #041014;
        background: linear-gradient(135deg, var(--color-cyan), var(--color-ember));
        font-family: var(--font-mono);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.07em;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        transition:
            transform 0.25s var(--ease-default),
            box-shadow 0.25s var(--ease-default),
            opacity 0.25s var(--ease-default);
    }

    .pricing-card__cta:hover:not(:disabled),
    .pricing-card__cta:focus-visible:not(:disabled),
    .pricing-return__link:hover,
    .pricing-return__link:focus-visible {
        transform: translateY(-1px);
        box-shadow: 0 18px 55px rgba(0, 240, 255, 0.16);
        outline: none;
    }

    .pricing-card__cta:disabled {
        cursor: not-allowed;
        opacity: 0.58;
        transform: none;
        box-shadow: none;
    }

    .pricing-org {
        display: grid;
        gap: 0.45rem;
    }

    .pricing-org__state a,
    .pricing-legal a {
        color: var(--color-cyan);
        text-decoration: underline;
        text-underline-offset: 0.18em;
    }

    .pricing-legal {
        display: grid;
        gap: 1rem;
    }

    .pricing-legal__checks {
        display: grid;
        gap: 0.8rem;
    }

    .pricing-legal__check {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 0.75rem;
        align-items: start;
        padding: 0.85rem 0.95rem;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: var(--radius-md);
        background: rgba(255, 255, 255, 0.045);
        color: rgba(255, 255, 255, 0.72);
        line-height: 1.55;
    }

    .pricing-legal__check input {
        inline-size: 1rem;
        block-size: 1rem;
        margin-block-start: 0.25rem;
        accent-color: var(--color-cyan);
    }

    .pricing-legal__host-note {
        margin: 0;
        padding: 0.8rem 0.9rem;
        border: 1px solid rgba(0, 240, 255, 0.18);
        border-radius: var(--radius-md);
        background: rgba(0, 240, 255, 0.065);
        color: rgba(0, 240, 255, 0.88);
        font-weight: 750;
        line-height: 1.55;
    }

    .pricing-legal__actions {
        display: flex;
        justify-content: flex-end;
    }

    .pricing-legal__checkout {
        min-inline-size: min(100%, 21rem);
        margin-block-start: 0;
    }

    .pricing-result {
        margin: 0;
        padding: 0.8rem 0.95rem;
        border: 1px solid rgba(0, 240, 255, 0.18);
        border-radius: var(--radius-md);
        color: rgba(0, 240, 255, 0.86);
        background: rgba(0, 240, 255, 0.06);
        line-height: 1.55;
    }

    .pricing-result--success {
        border-color: rgba(97, 255, 188, 0.24);
        color: rgba(164, 255, 214, 0.92);
        background: rgba(97, 255, 188, 0.07);
    }

    .pricing-result--error,
    .pricing-org__state--warning {
        color: rgba(255, 204, 142, 0.95);
    }

    .pricing-faq {
        display: grid;
        gap: 1rem;
    }

    .pricing-faq__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.8rem;
    }

    .pricing-faq__item {
        min-width: 0;
        padding: 0.95rem;
        border: 1px solid rgba(255, 255, 255, 0.09);
        border-radius: var(--radius-md);
        background: rgba(0, 0, 0, 0.14);
    }

    .pricing-faq__question {
        margin: 0;
        color: rgba(255, 255, 255, 0.92);
        font-size: 0.98rem;
        line-height: 1.3;
    }

    .pricing-faq__answer {
        margin: 0.45rem 0 0;
        color: rgba(255, 255, 255, 0.66);
        line-height: 1.55;
    }

    .pricing-return {
        display: grid;
        gap: 0.6rem;
        border-color: rgba(0, 240, 255, 0.22);
    }

    .pricing-return--success {
        border-color: rgba(97, 255, 188, 0.26);
    }

    .pricing-return--cancel {
        border-color: rgba(255, 179, 0, 0.24);
    }

    .pricing-return__link {
        justify-self: start;
        margin-block-start: 0.35rem;
    }

    @media (max-width: 1120px) {
        .pricing-offers-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 720px) {
        .pricing-root,
        .pricing-shell {
            width: min(100% - 1rem, 1120px);
        }

        .pricing-offers-grid,
        .pricing-faq__list {
            grid-template-columns: 1fr;
        }

        .pricing-card,
        .pricing-org,
        .pricing-legal,
        .pricing-return {
            padding: 1rem;
        }

        .pricing-card__copy {
            min-block-size: 0;
        }

        .pricing-card__head {
            display: grid;
        }

        .pricing-legal__actions {
            justify-content: flex-start;
        }

        .pricing-legal__checkout,
        .pricing-card__cta,
        .pricing-return__link {
            inline-size: 100%;
        }
    }
}