@layer components {
    .billing-main {
        display: flex;
        flex-direction: row;
        gap: var(--space-neutral);
    }

    .pricing\/pricing {
        display: flex;
        flex-direction: column;
        gap: var(--space-x-small);
        justify-content: center;
    }
    .pricing\/price-card:first-child {
        --color-button-bg: oklch(0.596 0.18 312.09);
        --color-button-bg: oklch(0.69 0.11 238.12);
        order: 2;
    }
    .pricing\/price-card:nth-child(2) {
        order: 1;
        --color-button-bg: oklch(0.596 0.2266 281.9);
        outline: 4px solid var(--color-button-bg);
    }
    .pricing\/price-card:last-child {
        --color-button-bg: oklch(0.596 0.28 293.78);
        --color-button-bg: oklch(0.39 0.1 298.76);
        order: 3;
    }

    @media(width > 80ch) {
        .pricing\/pricing {
            display: flex;
            flex-direction: row;
            gap: 0;
        }
        .pricing\/price-card:first-child {
            border-right: none;
            border-radius: var(--border-radius) 0 0 var(--border-radius);
            order: 1;
        }
        .pricing\/price-card:nth-child(2){
            z-index: 1;
            margin-block: -1rem;
            margin-inline: -.1ch;
            border: none;
            order: 2;
        }
        .pricing\/price-card:last-child {
            border-left: none;
            border-radius: 0 var(--border-radius) var(--border-radius) 0;
            order: 3;
        }
    }

    .pricing\/price-card {
        font-size: var(--font-size-xx-small);
        font-weight: 600;
        display: flex;
        flex-direction: column;
        padding-block: var(--space-large);

        h4 {
            font-size: var(--font-size-large);
            font-weight: 900;
        }
        price {
            font-size: var(--font-size-xx-large);
            margin-top: var(--space-small);

            daily {
                font-weight: 900;
            }

            subtle {
                font-size: var(--font-size-xxx-small);
                opacity: .7;
            }
        }
        .bonus {
            color: var(--color-green-600);
        }
        button {
            margin-top: var(--space-small);
            font-size: var(--font-size-small);
        }
        hr {
            margin-block: var(--space-neutral);
        }
        ol {
            font-size: var(--font-size-x-small);
            display: grid;
            grid-template-columns: 2ch 1fr;
            gap: var(--space-small);
        }
        li {
            display: grid;
            grid-template-columns: subgrid;
            grid-column: 1/-1;
            font-weight: 500;
            align-items: center;

            i {
                text-align: left;
                margin-right: 1ch;
            }
        }
    }

    .pricing\/enterprise-pricing {
        background: oklch(20.8% 0.042 265.755);
        color: white;
        font-weight: 600;
        font-size: var(--space-small);
        text-align: center;
        max-width: 50rem;
        margin-inline: auto;

        display: flex;
        flex-direction: column;
        gap: var(--space-medium);
        padding: var(--space-large);

        p {
            font-size: var(--space-small);
            color: oklch(93% 0 0);
        }

        button {
            width: fit-content;
            padding: var(--space-neutral);
            margin-inline: auto;
            background: white;
            color: var(--color-fg);
            transition: transform ease .3s;

            &:hover {
                transform: scale(1.02, 1.02);
            }
        }
    }
}