.pricingTiers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
    margin: 30px 0 20px;

    @media (max-width: 860px) {
        grid-template-columns: minmax(0, 1fr);
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }
}

.pricingTier {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 30px 26px 26px;
    border: solid hsla(var(--color-primary-hue), var(--color-primary-saturation), 85%, 70%) 1px;
    border-radius: var(--border-radius);
    background: #fff;

    &.featured {
        border: solid var(--color-accent) 2px;
        box-shadow: 0 12px 32px -14px hsla(var(--color-accent-hue), var(--color-accent-saturation), 30%, 45%);

        @media (min-width: 861px) {
            transform: translateY(-10px);
        }
    }

    .tierBadge {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 4px 12px;
        border-radius: 20px;
        background: var(--color-accent);
        color: #fff;
        font-size: var(--font-size-small);
        font-weight: 600;
        white-space: nowrap;
    }

    .tierName {
        font-size: 1.3em;
        font-weight: 700;
    }

    .tierPrice {
        display: flex;
        align-items: baseline;
        gap: 8px;
        flex-wrap: wrap;

        .amount {
            font-size: 2.3em;
            font-weight: 700;
            line-height: 1.1;
        }

        .unit {
            color: var(--color-primary-faint);
        }
    }

    .tierSummary {
        color: var(--color-primary-faint);
        min-height: 2.6em;
    }

    .tierFeatures {
        list-style: none;
        margin: 0;
        padding: 16px 0 0;
        border-top: solid var(--color-background-faint) 1px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        flex: 1;

        li {
            display: flex;
            gap: 10px;
            align-items: flex-start;

            svg {
                flex: none;
                width: 18px;
                height: 18px;
                margin-top: 2px;
            }

            &.included svg {
                color: var(--color-accent);
            }

            &.excluded {
                color: var(--color-primary-faint);
            }
        }
    }

    .tierAction {
        form {
            margin: 0;
        }

        .Button {
            width: 100%;
            justify-content: center;
            box-sizing: border-box;
        }
    }
}