/* Pricing page tokens */
.pricing-page {
    --_pricing-bg: #faf9fb;
    --_pricing-gradient: linear-gradient(90deg, #d6286a 0%, #b0308c 50%, #7e3bc0 100%);
    --_pricing-btn-gradient: linear-gradient(
        124.8deg,
        #d6286a 5.37%,
        #a73298 48.84%,
        #7e3bc0 94.02%
    );
    --_pricing-heading-clr: #2d3047;
    --_pricing-table-clr: #282f43;
    --_pricing-body-clr: #5f5b6b;
    --_pricing-body-clr-alt: #5e6078;
    --_pricing-muted-clr: #8b8992;
    --_pricing-subtle-clr: #6e7085;
    --_pricing-feature-clr: #1b1a21;
    --_pricing-stat-label-clr: #6b6880;
    --_pricing-footnote-clr: #737373;
    --_pricing-border-clr: #e5e7eb;
    --_pricing-tag-border-clr: #eaeaea;
    --_pricing-tag-border-clr-alt: #e6e4ee;
    --_pricing-divider-clr: #e8e5ee;
    --_pricing-row-border-clr: #eeecf4;
    --_pricing-section-border-clr: #e9e7f0;
    --_pricing-highlight-clr: rgb(194 24 91 / 6%);
    --_pricing-highlight-header-clr: rgb(194 24 91 / 5%);
    --_pricing-accent-clr: var(--primary-clr-500);
    --_pricing-new-clr: var(--primary-clr-400);
    --_pricing-eyebrow-clr: #d0286e;

    position: relative;
    isolation: isolate;
    overflow: clip;
    background-color: var(--_pricing-bg);
    font-family: var(--ff-inter);
    color: var(--_pricing-body-clr);
    --_max-width: 1560px;

    & > * {
        position: relative;
        z-index: 1;
    }

    & .pricing-gradient-text {
        background-image: var(--_pricing-gradient);
        background-clip: text;
        color: transparent;
    }
}

/* Limited-time offer */
.pricing-offer {
    position: sticky;
    top: var(--pricing-header-height, 0px);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    min-height: 68px;
    padding: 8px 16px;
    background-image: var(--_pricing-gradient);
    box-shadow: 0px 6px 15px 0px rgb(57 137 174 / 13%);
    color: var(--white-clr);
    font-size: 14px;
    font-weight: var(--fw-400);

    & .offer-countdown {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 10px;
    }

    & .offer-units {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    & .offer-unit {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 34px;
        height: 24px;
        padding-inline: 4px;
        border-radius: var(--radius-md);
        background-color: rgb(255 255 255 / 14%);
        font-size: 13px;
        font-variant-numeric: tabular-nums;

        &:nth-child(3) {
            min-width: 37px;
        }

        & small {
            font-size: 10px;
        }
    }
}

/* Hero */
.pricing-hero-wrapper {
    position: relative;
    padding-block: 88px 0;
}

.pricing-hero-glow {
    position: absolute;
    z-index: 0;
    top: -420px;
    left: 50%;
    translate: calc(-50% + 11.5px) 0;
    width: 2432px;
    max-width: none;
    height: 1034px;
    pointer-events: none;
}

.pricing-hero-grid {
    position: absolute;
    z-index: 0;
    inset-block-start: -1px;
    inset-inline: 0;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    opacity: 0.2;
    pointer-events: none;

    & .grid-piece {
        position: relative;
        height: 330px;
        overflow: clip;

        & img {
            position: absolute;
            max-width: none;
            width: 969px;
            height: 969px;
        }

        &:first-child {
            width: 188px;

            & img {
                left: -791px;
                top: 8px;
            }
        }

        &:last-child {
            width: 420px;

            & img {
                left: -104px;
                top: 40px;
            }
        }
    }
}

.pricing-hero-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;

    & .hero-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        text-align: center;
    }

    & .hero-title-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }

    & .hero-title {
        font-size: clamp(2.75rem, 5vw + 1rem, 70px);
        font-weight: var(--fw-700);
        line-height: 1.18;
        letter-spacing: -0.057em;
        background-image: linear-gradient(152.49deg, #0c1523 31.78%, #6b6e86 63.45%);
        background-clip: text;
        color: transparent;
        text-wrap: balance;
    }

    & .hero-description {
        max-width: 783px;
        font-size: 18px;
        line-height: 1.7;
        letter-spacing: -0.3px;
        font-weight: var(--fw-400);
        color: var(--_pricing-body-clr);
    }
}

.pricing-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--_pricing-tag-border-clr);
    border-radius: 30px;
    background-color: transparent;
    font-size: var(--fs-300);
    font-weight: var(--fw-500);
    line-height: 1.4;
    letter-spacing: -0.28px;
    color: #171717;
    white-space: nowrap;

    &.tag-white {
        padding-inline: 14px;
        border-color: var(--_pricing-tag-border-clr-alt);
        background-color: var(--white-clr);
        letter-spacing: normal;
    }

    & img {
        width: 8px;
        height: 8px;
    }
}

.pricing-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.pricing-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid var(--_pricing-border-clr);
    border-radius: 999px;
    background-color: #fbfafd;
    font-size: 15px;
    font-weight: var(--fw-500);
    line-height: 20px;
    letter-spacing: 0.15px;
    color: var(--_pricing-body-clr);
    white-space: nowrap;

    & img {
        width: 20px;
        height: 20px;
    }

    &.pill-check {
        color: var(--gray-clr-800);

        & img {
            width: 19px;
            height: 19px;
        }
    }
}

/* Sections */
.pricing-section-wrapper {
    padding-block: 140px 0;

}

.pricing-audience-panel > .pricing-section-wrapper:last-child {
    padding-block-end: 140px;
}

.pricing-section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;

    & .section-title {
        font-size: clamp(1.75rem, 2.4vw + 0.9rem, 44px);
        font-weight: var(--fw-600);
        line-height: 1.35;
        letter-spacing: -1px;
        color: var(--_pricing-heading-clr);
    }

    & .section-description {
        max-width: 558px;
        font-size: var(--fs-300);
        font-weight: var(--fw-400);
        line-height: 20px;
        color: var(--_pricing-body-clr-alt);
    }
}

/* Audience tabs + billing toggle */
.pricing-controls {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 42px;
}

.pricing-audience-tabs {
    display: flex;
    align-items: center;
    max-width: 100%;
    padding: 4px;
    border: 1px solid #e2dfe5;
    border-radius: 1000px;
    background-color: #f9f6fa;
    overflow-x: auto;
    scrollbar-width: none;

    & .audience-tab {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        flex: 0 0 150px;
        padding: 8px 24px;
        border: none;
        border-radius: 100px;
        background-color: transparent;
        font-size: var(--fs-400);
        font-weight: var(--fw-400);
        line-height: 24px;
        color: #2d3047;
        white-space: nowrap;
        transition: background-color 180ms ease;

        & img {
            width: 20px;
            height: 20px;
        }

        &[aria-selected="true"] {
            flex-basis: auto;
            gap: 10px;
            background-color: #d0286e;
            box-shadow:
                0px 1px 1.5px 0px rgb(16 24 40 / 10%),
                0px 1px 1px 0px rgb(16 24 40 / 6%);
            font-weight: var(--fw-500);
            color: var(--white-clr);

            & img {
                filter: brightness(0) invert(1);
            }
        }
    }
}

.pricing-billing-toggle {
    display: flex;
    align-items: center;
    gap: 14px;

    & .billing-label {
        cursor: pointer;
        padding: 0;
        border: none;
        background: none;
        font-size: var(--fs-400);
        font-weight: var(--fw-500);
        line-height: 20px;
        letter-spacing: 0.16px;
        color: var(--_pricing-muted-clr);

        &.active {
            font-weight: var(--fw-600);
            color: var(--_pricing-heading-clr);
        }
    }

    & .billing-switch {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 45px;
        padding: 2px;
        border: none;
        border-radius: 40px;
        background-image: var(--_pricing-gradient);

        &::after {
            content: "";
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: var(--white-clr);
            transition: translate 180ms ease;
        }

        &[aria-checked="true"]::after {
            translate: 21px 0;
        }
    }

    & .billing-savings {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    & .savings-badge {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 30px;
        padding: 4px 12px;
        border: 0.714px solid var(--primary-clr-400);
        border-radius: var(--radius-full);
        background-color: var(--white-clr);
        font-size: var(--fs-200);
        font-weight: var(--fw-700);
        line-height: 18px;
        letter-spacing: 0.12px;
        color: #d2296e;
        white-space: nowrap;
    }
}

.pricing-tab-empty {
    padding-block: 80px;
    text-align: center;
    font-size: var(--fs-400);
    color: var(--_pricing-body-clr);
}

/* Plans */
.pricing-plans {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: 24px;
    margin-block-start: 52px;

    &[hidden] {
        display: none;
    }
}

.pricing-plan {
    padding-block-start: 40px;

    & .plan-card {
        display: flex;
        flex-direction: column;
        gap: 16.85px;
        padding: 25.27px;
        border: 1.053px solid var(--_pricing-border-clr);
        border-radius: 16.85px;
        background-color: var(--white-clr);
    }

    & .plan-header {
        display: flex;
        flex-direction: column;
        gap: 16.85px;
    }

    & .plan-intro {
        display: flex;
        flex-direction: column;
        gap: 21.06px;
    }

    & .plan-heading {
        display: flex;
        flex-direction: column;
        gap: 3px;
        line-height: normal;

        & .plan-eyebrow {
            font-size: 12px;
            font-weight: var(--fw-500);
            letter-spacing: 0.36px;
            text-transform: uppercase;
            color: var(--_pricing-eyebrow-clr);
        }

        & .plan-heading-body {
            display: flex;
            flex-direction: column;
            gap: 7.87px;
        }

        & .plan-name {
            font-size: 21.65px;
            font-weight: var(--fw-700);
            color: var(--_pricing-heading-clr);
        }

        & .plan-description {
            font-size: 15.74px;
            font-weight: var(--fw-400);
            color: var(--_pricing-body-clr);
        }
    }

    & .plan-price {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 80px;
        line-height: normal;
        white-space: nowrap;

        & .price-variant {
            display: flex;
            flex-direction: column;
            gap: 8.42px;

            &[hidden] {
                display: none;
            }
        }

        & .price-original-stack {
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            gap: 1px;
        }

        & .price-badge {
            font-size: 10px;
            font-weight: var(--fw-400);
            letter-spacing: 0.1px;
            color: #d2296e;
        }

        & .price-row {
            display: flex;
            align-items: flex-end;
            gap: 16.85px;
            height: 41.06px;
        }

        & .price-original {
            font-size: 20px;
            font-weight: var(--fw-500);
            color: var(--_pricing-muted-clr);
            text-decoration: line-through;
            text-decoration-skip-ink: none;
        }

        & .price-current {
            font-size: 33.69px;
            font-weight: var(--fw-700);
            color: var(--_pricing-heading-clr);
        }

        & .price-note {
            font-size: 13.78px;
            font-weight: var(--fw-400);
            color: var(--_pricing-muted-clr);
        }

        & .price-note-highlight {
            color: #d2296e;
        }
    }

    & .plan-action {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;

        & .plan-note {
            font-size: var(--fs-300);
            font-weight: var(--fw-400);
            line-height: normal;
            color: var(--gray-clr-500);
        }
    }

    & .plan-divider {
        height: 1.053px;
        border-radius: 105px;
        background-color: var(--_pricing-divider-clr);
    }

    & .plan-features {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    & .plan-features-group {
        display: flex;
        flex-direction: column;
        gap: 12.63px;

        & .features-title {
            font-size: 12.63px;
            font-weight: var(--fw-600);
            line-height: normal;
            text-transform: uppercase;
            color: var(--_pricing-body-clr);

            &.title-new {
                color: var(--_pricing-new-clr);
            }
        }

        & ul {
            display: flex;
            flex-direction: column;
            gap: 12.63px;
            list-style: none;
        }
    }

    &.plan-recommended {
        padding-block-start: 0;
        padding: 0 2px 2px;
        border-radius: 18px;
        background-image: var(--_pricing-gradient);
        box-shadow:
            8px 22px 52px 0px rgb(123 31 162 / 4%),
            -8px 18px 44px 0px rgb(194 24 91 / 10%);

        & .plan-badge {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 40px;
            font-size: var(--fs-300);
            font-weight: var(--fw-700);
            letter-spacing: 1.12px;
            text-transform: uppercase;
            color: var(--white-clr);
        }
    }
}

.pricing-feature {
    display: flex;
    align-items: center;
    gap: 10.53px;
    font-size: 13.78px;
    font-weight: var(--fw-400);
    line-height: normal;
    color: var(--_pricing-feature-clr);

    & img {
        flex-shrink: 0;
        width: 21.06px;
        height: 21.06px;
    }

    &.feature-muted {
        color: var(--_pricing-subtle-clr);
    }
}

.pricing-feature-new {
    display: inline-flex;
    align-items: center;
    height: 22px;
    margin-inline-start: 4px;
    padding-inline: 12px;
    border: 1px solid var(--primary-clr-100);
    border-radius: 22px;
    background-color: var(--primary-clr-50);
    font-size: var(--fs-200);
    line-height: 24px;
    color: var(--primary-clr-500);
    white-space: nowrap;
}

/* Buttons */
.pricing-btn {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 47.23px;
    padding: 9px 32px;
    border: 1.579px solid var(--_pricing-border-clr);
    border-radius: 25.27px;
    background-color: transparent;
    font-size: 15.79px;
    font-weight: var(--fw-500);
    color: var(--midnight-blue-clr-600);
    text-align: center;
    transition:
        background-color 180ms ease,
        color 180ms ease,
        box-shadow 180ms ease;

    &:hover {
        background-color: var(--primary-clr-50);
        color: var(--primary-clr-500);
    }

    &.btn-gradient {
        height: 48px;
        border: 1px solid rgb(15 26 43 / 10%);
        border-radius: 100px;
        background-image: var(--_pricing-btn-gradient);
        box-shadow: inset 0px 4px 4px 0px rgb(255 255 255 / 20%);
        font-size: var(--fs-400);
        font-weight: var(--fw-600);
        line-height: 1.7;
        color: var(--white-clr);

        &:hover {
            color: var(--white-clr);
            filter: brightness(1.08);
        }
    }

    &.btn-outline-accent {
        width: 269px;
        max-width: 100%;
        height: 48px;
        border: 1px solid #cd2a72;
        border-radius: 100px;
        font-size: var(--fs-400);
        font-weight: var(--fw-600);
        color: #cb2972;
    }
}

/* Pay per appointment */
.pricing-payper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;

    & .payper-cards {
        display: flex;
        gap: 24px;
        width: 1032px;
        max-width: 100%;
    }

    & .payper-card {
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        gap: 24px;
        min-width: 0;
        padding: 36px;
        border-radius: 32px;
        background-color: var(--white-clr);
    }

    & .payper-card-text {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    & .payper-card-title {
        font-size: 33px;
        font-weight: var(--fw-600);
        line-height: 40px;
        color: var(--_pricing-heading-clr);
    }

    & .payper-card-description {
        font-size: var(--fs-300);
        font-weight: var(--fw-400);
        line-height: 22px;
        color: var(--gray-clr-500);
    }

    & .payper-billing {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 16px 20px;
        border-radius: 16px;
        background-color: #f4f3f7;
        font-size: var(--fs-300);
        line-height: 20px;
        white-space: nowrap;

        & .billing-label-text {
            font-weight: var(--fw-500);
            color: var(--_pricing-heading-clr);
        }

        & .billing-note {
            font-weight: var(--fw-400);
            color: var(--gray-clr-500);
        }
    }

    & .payper-price-row {
        display: flex;
        align-items: center;
        gap: 24px;
    }

    & .payper-price {
        display: flex;
        align-items: flex-end;
        gap: 8px;
        white-space: nowrap;

        & .price-amount {
            font-size: 32px;
            font-weight: var(--fw-700);
            line-height: 48px;
            color: var(--_pricing-heading-clr);
        }

        & .price-unit {
            font-size: var(--fs-400);
            font-weight: var(--fw-400);
            line-height: 24px;
            color: var(--gray-clr-500);
        }
    }

    & .pricing-btn.btn-outline-accent {
        flex: 1;
        width: auto;
        min-width: 0;
        padding-inline: 16px;
        white-space: nowrap;
    }

    @media (width <= 900px) {
        & .payper-cards {
            flex-direction: column;
        }
    }
}

/* Multi-destination add-ons */
.pricing-addons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;

    & .addons-body {
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: 1032px;
        max-width: 100%;
    }

    & .addons-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px;
    }

    & .addon-tile {
        display: flex;
        flex-direction: column;
        gap: 16px;
        min-width: 0;
        padding: 16px;
        border-radius: 16px;
        background-color: var(--white-clr);
    }

    & .addon-title {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 18px;
        font-weight: var(--fw-600);
        line-height: 32px;
        color: var(--_pricing-heading-clr);

        & img {
            flex-shrink: 0;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
        }
    }

    & .addon-pill {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 14px 16px;
        border-radius: 12px;
        background-color: #fafafa;

        & .addon-description {
            flex: 1;
            min-width: 0;
            font-size: var(--fs-300);
            line-height: 20px;
            color: var(--_pricing-heading-clr);
        }
    }

    & .addon-price {
        display: flex;
        align-items: flex-end;
        flex-shrink: 0;
        gap: 4px;
        white-space: nowrap;

        & .price-amount {
            font-size: 24px;
            font-weight: var(--fw-700);
            line-height: 30px;
            color: var(--_pricing-heading-clr);
        }

        & .price-unit {
            font-size: var(--fs-300);
            line-height: 22px;
            color: var(--_pricing-muted-clr);
        }
    }

    & .addon-bundle {
        display: flex;
        align-items: center;
        gap: 24px;
        padding: 28px 32px;
        border-radius: 16px;
        background-color: var(--white-clr);

        & .bundle-info {
            display: flex;
            flex: 1;
            flex-direction: column;
            gap: 6px;
            min-width: 0;
        }

        & .bundle-title {
            font-size: 24px;
            font-weight: var(--fw-600);
            line-height: 32px;
            color: var(--_pricing-feature-clr);
        }

        & .bundle-note {
            font-size: var(--fs-300);
            line-height: 22px;
            color: var(--_pricing-body-clr);
        }

        & .bundle-price {
            display: flex;
            align-items: flex-end;
            gap: 6px;
            white-space: nowrap;

            & .price-amount {
                font-size: 40px;
                font-weight: var(--fw-700);
                line-height: 48px;
                color: var(--_pricing-feature-clr);
            }

            & .price-unit {
                font-size: var(--fs-300);
                line-height: 22px;
                color: var(--_pricing-body-clr);
            }
        }

        & .bundle-cta {
            flex-shrink: 0;
            padding: 14px 28px;
            border-radius: 12px;
            background-image: var(--_pricing-gradient);
            font-size: var(--fs-400);
            font-weight: var(--fw-500);
            line-height: 24px;
            color: var(--white-clr);
            white-space: nowrap;

            &:hover {
                filter: brightness(1.08);
            }
        }
    }

    @media (width <= 900px) {
        & .addons-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        & .addon-bundle {
            flex-wrap: wrap;
        }
    }

    @media (width <= 600px) {
        & .addons-grid {
            grid-template-columns: minmax(0, 1fr);
        }
    }
}

/* Custom pricing */
.pricing-custom {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 58px;
    padding: 40px 32px;
    border-radius: var(--radius-2xl);
    background-color: var(--white-clr);

    & .custom-intro {
        display: flex;
        flex-direction: column;
        align-self: stretch;
        flex: 0 0 340px;
        justify-content: space-between;

        & .custom-text {
            display: flex;
            flex-direction: column;
            gap: 86px;
            height: 279px;
            padding-block-end: 24px;
        }

        & .custom-heading {
            display: flex;
            flex-direction: column;
            gap: 3px;
            line-height: normal;
        }

        & .custom-eyebrow {
            font-size: 12px;
            font-weight: var(--fw-500);
            letter-spacing: 0.36px;
            text-transform: uppercase;
            color: #d0286e;
        }

        & .custom-heading-body {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        & .custom-partner {
            font-size: 21.648px;
            font-weight: var(--fw-700);
            line-height: normal;
            color: var(--_pricing-heading-clr);
        }

        & .custom-description {
            font-size: 16px;
            font-weight: var(--fw-400);
            line-height: 22px;
            color: var(--_pricing-body-clr);
        }

        & .custom-price {
            display: flex;
            flex-direction: column;
            gap: 4px;
            white-space: nowrap;
        }

        & .custom-title {
            font-size: 32px;
            font-weight: var(--fw-700);
            line-height: 48px;
            color: var(--_pricing-heading-clr);
        }

        & .custom-price-note {
            font-size: 13px;
            line-height: 18px;
            letter-spacing: 0.13px;
            color: #6b7280;
        }

        & .pricing-btn.btn-outline-accent {
            width: 100%;
            height: 48px;
            padding: 9px 32px;
            border: 1px solid #ce2971;
            border-radius: 100px;

            & span {
                background-image: linear-gradient(90deg, #d6286a, #b0308c, #7e3bc0);
                background-clip: text;
                font-size: 16px;
                font-weight: var(--fw-600);
                line-height: 1.7;
                color: transparent;
            }
        }
    }

    & .custom-cards {
        display: grid;
        grid-template-columns: 342fr 350fr 350fr;
        align-items: stretch;
        align-self: center;
        gap: 28px;
        flex: 1;
        min-width: 0;
    }

    & .custom-card {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        min-width: 0;
        padding: 24px;
        border: 1px solid var(--_pricing-border-clr);
        border-radius: var(--radius-3xl);
        background-color: var(--_pricing-bg);
    }

    & .custom-card-content {
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 243px;
    }

    & .custom-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        border-radius: 30px;
        background-image: var(--_pricing-gradient);

        & img {
            width: 32px;
            height: 32px;
        }
    }

    & .custom-card-title {
        margin-block-end: 8px;
        font-size: 20px;
        font-weight: var(--fw-600);
        line-height: 1.6;
        color: var(--_pricing-heading-clr);
    }

    & .custom-card ul {
        display: flex;
        flex-direction: column;
        gap: 12.633px;
        width: max-content;
        max-width: 289px;
        list-style: none;
    }

    & .custom-card .pricing-feature {
        font-size: 13.776px;

        &.feature-strong {
            font-weight: var(--fw-600);
            color: var(--_pricing-heading-clr);
        }
    }

    & .custom-card .pricing-feature-new {
        margin: 0;
        padding-inline: 12px;
        font-size: 12px;
        line-height: 24px;
    }
}

/* Comparison table */
.pricing-compare {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.pricing-compare-header .section-description,
.pricing-payper-header .section-description,
.pricing-addons-header .section-description {
    max-width: 600px;
}

.pricing-compare-header,
.pricing-payper-header,
.pricing-addons-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;

    & .section-header-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
}

.pricing-table-scroll {
    overflow-x: clip;

    /* A scroll container would stop the plan header from sticking to the viewport */
    @media (width <= 1100px) {
        overflow-x: auto;
    }
}

.pricing-table {
    min-width: 960px;

    & .table-columns {
        display: grid;
        grid-template-columns: minmax(200px, 1fr) repeat(5, minmax(112px, 192px));
        column-gap: 24px;
    }

    & .table-plans {
        position: sticky;
        top: calc(var(--pricing-header-height, 0px) + var(--pricing-offer-height, 0px));
        z-index: 1;
        padding-inline: 32px;
        background-color: var(--_pricing-bg);
    }

    & .table-plan {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 36px 24px 28px;
        text-align: center;

        &.plan-pro {
            justify-content: center;
            padding: 24px;
            border-radius: 16px 16px 0 0;
            background-color: var(--_pricing-highlight-header-clr);
        }

        & .table-plan-badge {
            font-size: 11px;
            font-weight: var(--fw-600);
            letter-spacing: 0.88px;
            color: #9b2063;
            text-transform: uppercase;
            white-space: nowrap;
        }

        & .table-plan-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            margin-block-end: 12px;
            line-height: normal;
            white-space: nowrap;
        }

        & .table-plan-name {
            font-size: var(--fs-400);
            font-weight: var(--fw-500);
            color: var(--_pricing-table-clr);
        }

        & .table-plan-price {
            font-size: 24px;
            font-weight: var(--fw-600);
            color: var(--_pricing-table-clr);
        }

        & .table-plan-note {
            font-size: var(--fs-200);
            font-weight: var(--fw-400);
            color: var(--_pricing-body-clr);
        }

        &.plan-pro .table-plan-name {
            color: #9b2063;
        }
    }

    & .table-cta {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 144px;
        height: 40px;
        border: 1px solid #d9d6e3;
        border-radius: 100px;
        background-color: var(--white-clr);
        font-size: 13px;
        font-weight: var(--fw-500);
        color: var(--_pricing-table-clr);
        white-space: nowrap;
        transition:
            background-color 180ms ease,
            color 180ms ease;

        &:hover {
            background-color: var(--primary-clr-50);
            color: var(--primary-clr-500);
        }

        &.cta-gradient {
            border: none;
            background-image: linear-gradient(135deg, #c2185b 0%, #7b1fa2 100%);
            color: var(--white-clr);

            &:hover {
                filter: brightness(1.08);
            }
        }
    }

    & .table-section {
        display: contents;
    }

    & .section-toggle {
        display: none;
    }

    & .table-body {
        padding-inline: 32px;
        border-radius: 20px;
        background-color: var(--white-clr);
        overflow: clip;
    }

    & .table-section-title {
        height: 80px;
        align-items: end;

        & .section-label {
            grid-column: 1 / 4;
            padding-block: 32px 16px;
            border-bottom: 1px solid var(--_pricing-section-border-clr);
            font-size: 20px;
            font-weight: var(--fw-600);
            line-height: normal;
            color: var(--_pricing-table-clr);
        }

        & .section-highlight {
            grid-column: 4;
            align-self: stretch;
            background-color: var(--_pricing-highlight-clr);
        }
    }

    & .table-row {
        height: 52px;
        align-items: center;
        border-bottom: 1px solid var(--_pricing-row-border-clr);

        & .row-label {
            padding-inline: 24px 16px;
            font-size: var(--fs-300);
            font-weight: var(--fw-400);
            color: var(--_pricing-table-clr);
        }

        & .row-cell {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            padding-inline: 8px;
            font-size: var(--fs-300);
            font-weight: var(--fw-400);
            color: var(--_pricing-stat-label-clr);
            text-align: center;
            white-space: nowrap;

            &.cell-pro {
                background-color: var(--_pricing-highlight-clr);
            }

            & img {
                width: 20px;
                height: 20px;
            }
        }
    }
}

/* Go live steps */
.pricing-steps-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;

    & .section-description {
        max-width: none;
        font-size: var(--fs-400);
        line-height: normal;
        color: var(--_pricing-body-clr-alt);
    }
}

.pricing-steps {
    position: relative;
    width: min(728px, 100%);
    margin: 60px auto 0;
    padding-block: 27px;
    --steps-start: 27px;
    --steps-end: 191px;

    &::before {
        content: "";
        position: absolute;
        inset-block: var(--steps-start) var(--steps-end);
        inset-inline-start: 50%;
        width: 1px;
        background-color: #e6e4ee;
        translate: -0.5px 0;
    }

    &::after {
        content: "";
        position: absolute;
        inset-block-end: var(--steps-end);
        inset-inline-start: 50%;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: #d9d9d9;
        translate: -3.5px 3.5px;
    }

    & .steps-progress {
        position: absolute;
        inset-block-start: var(--steps-start);
        inset-inline-start: 50%;
        width: 1.5px;
        height: var(--steps-progress, 0px);
        max-height: calc(100% - var(--steps-start) - var(--steps-end));
        background-image: linear-gradient(180deg, rgb(155 32 99 / 0%) 0, #9b2063 48px);
        translate: -0.75px 0;
    }
}

.pricing-step {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: 56px;
    min-height: 199px;

    & .step-visual {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-inline-end: 9px;

        & img,
        & .step-lottie {
            width: auto;
            height: 80px;
        }
    }

    & .step-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        max-width: 337px;
    }

    & .step-marker {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 31px;
        height: 31px;
        border-radius: 100px;
        background-color: #9b2063;
        font-size: var(--fs-400);
        font-weight: var(--fw-500);
        color: var(--white-clr);
    }

    & .step-text {
        display: flex;
        flex-direction: column;
        gap: 12px;
        line-height: 20px;
    }

    & .step-title {
        font-size: var(--fs-400);
        font-weight: var(--fw-600);
        line-height: 15px;
        color: var(--_pricing-table-clr);
    }

    & .step-description {
        font-size: var(--fs-300);
        font-weight: var(--fw-400);
        color: var(--_pricing-body-clr-alt);
    }

    /* Even steps mirror: content left (right-aligned), visual right */
    &:nth-child(even) {
        & .step-content {
            grid-column: 1;
            grid-row: 1;
            align-items: flex-end;
            justify-self: end;
            padding-inline-end: 11px;
            text-align: right;
        }

        & .step-visual {
            grid-column: 2;
            grid-row: 1;
            justify-content: flex-start;
            padding-inline: 0;
        }
    }
}

.pricing-provider-types {
    margin-block-start: 32px;
}

/* Features showcase */
.pricing-features-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.pricing-feature-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: min(1022px, 100%);
    margin: 60px auto 0;
}

.pricing-feature-card {
    --_sticky-top: calc(
        var(--pricing-header-height, 0px) + var(--pricing-offer-height, 0px) + 24px
    );

    transform: scale(var(--feature-scale, 1));
    transform-origin: center top;
    box-shadow: var(--shadow-lg);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 359px;
    gap: 0;
    min-height: 481px;
    padding: 12px;
    border-radius: 20px;
    background-color: var(--white-clr);
    overflow: clip;

    & .feature-main {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 16px;
        min-height: 457px;
        padding: 16px;
        border-radius: 20px 0 0 20px;
        background-color: var(--_pricing-bg);

        & .pricing-tag {
            align-self: flex-start;
        }

        & .feature-body {
            display: flex;
            flex-direction: column;
            gap: 20px;
            max-width: 451px;
        }

        & .feature-title {
            font-size: 24px;
            font-weight: var(--fw-500);
            line-height: 1.3;
            letter-spacing: -0.48px;
            white-space: nowrap;
            color: var(--_pricing-heading-clr);
        }

        & .feature-title:has(+ .feature-paragraph) {
            margin-block-end: -10px;
        }

        & .feature-checklist {
            display: flex;
            flex-direction: column;
            gap: 12.633px;
            list-style: none;

            & li {
                display: flex;
                align-items: center;
                gap: 10.529px;
                font-size: 13px;
                font-weight: var(--fw-400);
                line-height: normal;
                color: var(--_pricing-body-clr-alt);
            }

            & img {
                flex-shrink: 0;
                width: 18px;
                height: 18px;
            }
        }

        & .feature-paragraph {
            font-size: 12px;
            font-weight: var(--fw-400);
            line-height: 20px;
            letter-spacing: -0.24px;
            color: var(--_pricing-body-clr-alt);
        }

        & .feature-footnote {
            display: flex;
            align-items: flex-end;
            gap: 12px;
            margin-block-start: auto;
            font-size: var(--fs-200);
            font-weight: var(--fw-400);
            line-height: 1.4;
            letter-spacing: -0.24px;
            color: var(--_pricing-footnote-clr);

            & img {
                width: 16px;
                height: 16px;
            }
        }
    }

    & .feature-visual {
        position: relative;
        z-index: 1;
        height: 457px;
        margin-inline-start: -60px;

        & .visual-image {
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 20px;
            object-fit: cover;
        }

        & .feature-overlay {
            position: absolute;
            max-width: none;
            pointer-events: none;
        }

        & .feature-stats {
            position: absolute;
            inset-block-end: 9px;
            inset-inline-end: 7px;
            display: flex;
            gap: 20px;
            padding: 19.09px 13.884px;
            border: 0.868px solid var(--gray-clr-100);
            border-radius: 13.884px;
            background-color: var(--white-clr);
            line-height: normal;
            white-space: nowrap;
        }

        & .feature-stat {
            display: flex;
            flex: 1;
            flex-direction: column;
            align-items: center;
            gap: 3px;

            & + .feature-stat {
                padding-inline-start: 20px;
                border-inline-start: 1px solid var(--gray-clr-100);
            }

            & .stat-value {
                font-size: 20.825px;
                font-weight: var(--fw-600);
                letter-spacing: -0.4165px;
                color: var(--primary-clr-500);
            }

            & .stat-label {
                font-size: 10.413px;
                font-weight: var(--fw-400);
                color: var(--_pricing-stat-label-clr);
            }
        }
    }
}

/* Cards stack on top of each other while scrolling; --feature-top is set by pricing.js so a card taller than the screen sticks by its bottom edge */
.pricing-feature-card {
    position: sticky;
    top: var(--feature-top, var(--_sticky-top));
    will-change: transform;
}

/* CTA banner */
.pricing-cta {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 792fr) minmax(0, 768fr);
    min-height: 518px;
    border-radius: 29px;
    background-color: #23263b;
    overflow: clip;

    & .cta-glows {
        position: absolute;
        inset: 0;
        pointer-events: none;

        & .cta-glow {
            position: absolute;

            & img {
                position: absolute;
                max-width: none;
            }

            &.glow-1 {
                left: -303.62px;
                top: 334.95px;
                width: 993.59px;
                height: 730.05px;

                & img {
                    inset: -72.4% -53.19%;
                }
            }

            &.glow-2 {
                left: -253.36px;
                top: 385.85px;
                width: 892.43px;
                height: 653.37px;

                & img {
                    inset: -80.89% -59.22%;
                }
            }

            &.glow-3 {
                left: -200.52px;
                top: 438.04px;
                width: 786.76px;
                height: 581.85px;

                & img {
                    inset: -90.84% -67.18%;
                }
            }

            &.glow-4 {
                left: -76.16px;
                top: 563.05px;
                width: 537.39px;
                height: 413.67px;

                & img {
                    inset: -31.94% -24.59%;
                }
            }
        }
    }

    & .cta-content {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 67px;
        padding: 60px 40px 60px 74px;
    }

    & .cta-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }

    & .cta-copy {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    & .cta-title {
        font-size: clamp(2rem, 2vw + 1.2rem, 42px);
        font-weight: var(--fw-600);
        line-height: 1.3;
        letter-spacing: -1.5px;
        color: var(--white-clr);
    }

    & .cta-description {
        max-width: 552px;
        font-size: var(--fs-400);
        font-weight: var(--fw-400);
        line-height: 1.7;
        color: #f9f9f9;
        opacity: 0.6;
    }

    & .pricing-btn {
        width: 277px;
        max-width: 100%;
        font-weight: var(--fw-400);
    }

    & .cta-attendees {
        display: flex;
        align-items: flex-end;
        gap: 8px;

        & .attendees-count {
            display: flex;
            align-items: center;
            gap: 16px;
            font-size: 32px;
            font-weight: var(--fw-600);
            line-height: 1.4;
            letter-spacing: -1px;
            color: var(--white-clr);
        }

        & .attendees-avatars {
            display: flex;
        }

        & .attendee {
            position: relative;
            width: 56px;
            height: 56px;
            flex-shrink: 0;

            &:first-child {
                margin-inline-end: -8px;
            }

            & img {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                max-width: none;
            }
        }

        & .attendees-label {
            max-width: 191px;
            font-size: var(--fs-400);
            font-weight: var(--fw-400);
            line-height: 1.7;
            color: #f9f9f9;
            opacity: 0.6;
        }
    }

    & .cta-visual {
        position: relative;
        margin-inline-end: -4px;
        overflow: clip;

        & img {
            position: absolute;
            top: -4.74%;
            left: -10.27%;
            width: 109.75%;
            height: 110%;
            max-width: none;
        }
    }
}

/* Provider showcase tiers + community */
.pricing-feature-card .feature-main .feature-tiers {
    display: flex;
    flex-direction: column;
    gap: 10.1px;
    max-width: 423px;
    margin-block-start: auto;
    line-height: 1.4;

    & li {
        display: flex;
        align-items: center;
        gap: 6.598px;
    }

    & .tier-medal {
        flex-shrink: 0;
        width: 31px;
        height: 30px;
    }

    & .tier-text {
        flex: 1;
        font-size: 13px;
        letter-spacing: -0.26px;
        color: var(--_pricing-heading-clr);
        white-space: nowrap;
    }

    & .tier-plan {
        font-size: 12px;
        letter-spacing: -0.24px;
        color: var(--_pricing-body-clr-alt);
        white-space: nowrap;
    }
}

.pricing-community {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-block-start: 60px;

    & .community-globe {
        position: relative;
        width: min(1296px, 100%);
        aspect-ratio: 1296 / 484;
        margin-block-end: -12.65%;
        pointer-events: none;
    }

    & .globe-clip {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        width: 93.21%;
        aspect-ratio: 1208 / 419;
        overflow: clip;

        & img {
            display: block;
            width: 100%;
        }
    }

    & .community-portrait {
        position: absolute;
        aspect-ratio: 1;
        border-radius: 50%;
        pointer-events: auto;
        cursor: pointer;
        transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);

        & img {
            position: absolute;
            inset-block-start: 0;
            inset-inline-start: -9.09%;
            width: 118.18%;
            max-width: none;
            transition: filter 0.5s ease;
        }

        &:hover {
            z-index: 1;
            transform: translateY(-6px) scale(1.18);

            & img {
                filter: drop-shadow(0 10px 18px rgb(157 34 102 / 0.28));
            }
        }

        @media (prefers-reduced-motion: reduce) {
            transition: none;

            &:hover {
                transform: none;
            }
        }
    }

    & .pricing-section-header {
        position: relative;
        max-width: 720px;
    }

    & .section-description {
        max-width: 558px;
    }
}

/* Tablet */
@media (width <= 1024px) {
    .pricing-hero-wrapper {
        padding-block-start: 48px;
    }

    .pricing-section-wrapper {
        padding-block-start: 96px;
    }

    .pricing-plans {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pricing-custom {
        flex-direction: column;

        & .custom-intro {
            flex-basis: auto;
        }

        & .custom-cards {
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            align-self: stretch;
        }
    }

    .pricing-feature-card {
        grid-template-columns: 1fr;
        min-height: 0;

        & .feature-main {
            min-height: 0;
            border-radius: 20px;

            & .feature-title {
                white-space: normal;
            }
        }

        & .feature-visual {
            order: -1;
            height: 360px;
            margin: 0 0 8px;

            & .feature-overlay {
                display: none;
            }

            & .feature-stats {
                inset-inline: 0;
                width: fit-content;
                margin-inline: auto;
            }
        }
    }

    .pricing-cta {
        grid-template-columns: 1fr;

        & .cta-content {
            padding: 48px 32px;
        }

        & .cta-visual {
            min-height: 360px;
            margin-inline-end: 0;
        }
    }
}

/* Mobile */
@media (width <= 768px) {
    .pricing-page .wrapper {
        --_gap: 16px;
    }

    .pricing-offer {
        gap: 10px;
        min-height: 0;
        padding: 10px 16px;
        font-size: 12px;
        line-height: normal;

        & > p {
            flex: 0 1 147px;
        }

        & .offer-countdown {
            flex-shrink: 0;
        }
    }

    .pricing-hero-wrapper {
        padding-block-start: 32px;
    }

    .pricing-hero-grid {
        display: none;
    }

    .pricing-hero-content {
        gap: 28px;

        & .hero-title {
            font-size: 40px;
        }

        & .hero-description {
            font-size: 14px;
            line-height: 1.6;
        }
    }

    .pricing-pills {
        gap: 12px;

        & .pricing-pill {
            white-space: normal;
        }
    }

    .pricing-section-wrapper {
        padding-block-start: 72px;
    }

    .pricing-audience-panel > .pricing-section-wrapper:last-child {
        padding-block-end: 72px;
    }

    .pricing-section-header .section-description {
        font-size: 14px;
        line-height: 22px;
    }

    .pricing-controls {
        gap: 28px;
    }

    .pricing-billing-toggle {
        flex-wrap: wrap;
        justify-content: center;
    }

    .pricing-plans {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-block-start: 40px;
    }

    .pricing-plan {
        padding-block-start: 0;
    }

    .pricing-custom {
        gap: 28px;
        padding: 24px 16px;

        & .custom-intro .custom-text {
            gap: 24px;
            height: auto;
        }

        & .custom-cards {
            grid-template-columns: minmax(0, 1fr);
        }

        & .custom-card-content {
            width: auto;
        }
    }

    .pricing-community {
        padding-block-start: 32px;

        /* Wider than the screen and centred, so the edges crop and the portraits stay large */
        & .community-globe {
            width: 510px;
            max-width: none;
        }

        & .community-portrait {
            scale: 1.5;
        }

        & .pricing-break {
            display: none;
        }
    }

    .pricing-compare {
        gap: 40px;
    }

    .pricing-table-scroll {
        overflow-x: clip;
    }

    .pricing-table {
        min-width: 0;

        & .table-columns {
            grid-template-columns: repeat(5, minmax(0, 1fr));
            column-gap: 0;
        }

        & .table-plans {
            column-gap: 6px;
            padding: 14px 12px 0;
            border-radius: 16px 16px 0 0;
            background-color: var(--white-clr);

            & > :first-child {
                display: none;
            }

            &::after {
                content: "";
                grid-column: 1 / -1;
                height: 1px;
                background-color: var(--_pricing-section-border-clr);
            }
        }

        & .table-plan,
        & .table-plan.plan-pro {
            justify-content: flex-start;
            padding: 8px 7px;
            border-radius: 8px 8px 0 0;
            background-color: var(--_pricing-bg);

            & .table-plan-badge,
            & .table-plan-note {
                display: none;
            }

            & .table-plan-info {
                gap: 5px;
                margin-block-end: 0;
            }

            & .table-plan-name {
                font-size: 12px;
                font-weight: var(--fw-400);
                color: var(--_pricing-body-clr);
            }

            & .table-plan-price {
                font-size: 14px;
                font-weight: var(--fw-500);
            }
        }

        & .table-plan.plan-pro .table-plan-name {
            font-weight: var(--fw-500);
            color: #9b2063;
        }

        & .table-cta {
            display: none;
        }

        & .table-body {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 0;
            border-radius: 0;
            background-color: transparent;
            overflow: visible;
        }

        & .table-section {
            display: block;
            padding-inline: 12px;
            border-radius: 16px;
            background-color: var(--white-clr);

            &.is-collapsed {
                & .table-section-title {
                    border-bottom: none;
                }

                & .table-row {
                    display: none;
                }

                & .section-toggle svg {
                    rotate: -90deg;
                }
            }
        }

        & .table-section-title {
            grid-template-columns: minmax(0, 1fr) auto;
            height: auto;
            align-items: center;
            position: relative;
            border-bottom: 1px solid var(--_pricing-section-border-clr);

            & .section-label {
                grid-column: 1;
                padding-block: 16px;
                border-bottom: none;
                font-size: 14px;
            }

            & .section-highlight {
                display: none;
            }

            & .section-toggle {
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 32px;
                height: 32px;
                padding: 0;
                border: none;
                background: none;
                color: var(--_pricing-table-clr);

                /* Stretches the tap target over the whole title row */
                &::after {
                    content: "";
                    position: absolute;
                    inset: 0;
                }

                & svg {
                    transition: rotate 200ms ease;
                }
            }
        }

        & .table-row {
            height: auto;
            row-gap: 6px;
            padding-block: 12px 4px;

            &:last-child {
                border-bottom: none;
            }

            & .row-label {
                grid-column: 1 / -1;
                padding: 0;
                font-size: 13px;
            }

            & .row-cell {
                height: 32px;
                padding-inline: 2px;
                font-size: 11.5px;
                line-height: 1.2;
                white-space: normal;

                &.cell-pro {
                    background-color: transparent;
                }

                & img {
                    width: 18px;
                    height: 18px;
                }
            }
        }
    }

    .pricing-steps {
        --steps-end: 27px;

        margin-block-start: 40px;
        padding-inline-start: 30px;

        &::before,
        &::after,
        & .steps-progress {
            inset-inline-start: 0;
        }
    }

    .pricing-step {
        grid-template-columns: 82px minmax(0, 1fr);
        column-gap: 30px;
        min-height: 0;
        padding-block: 24px;

        & .step-visual,
        &:nth-child(even) .step-visual {
            grid-column: 1;
            grid-row: 1;
            justify-content: flex-start;
            padding: 0;

            & img,
            & .step-lottie {
                height: 63px;
            }
        }

        & .step-content,
        &:nth-child(even) .step-content {
            display: grid;
            grid-column: 2;
            grid-row: 1;
            grid-template-columns: 28px minmax(0, 1fr);
            align-items: center;
            justify-self: start;
            column-gap: 10px;
            row-gap: 12px;
            max-width: none;
            padding-inline-end: 0;
            text-align: left;
        }

        & .step-marker {
            width: 28px;
            height: 28px;
        }

        & .step-text {
            display: contents;
        }

        & .step-title {
            font-size: 16px;
        }

        & .step-description {
            grid-column: 1 / -1;
            font-size: 12px;
            line-height: 20px;
        }
    }

    .pricing-provider-types {
        gap: 16px 15px;
        margin-block-start: 48px;

        & .pricing-pill {
            padding: 10px 12px;
            font-size: 12px;
            letter-spacing: 0.12px;
            white-space: nowrap;
        }

        /* Keeps the 2 + 2 + 2 rows from the design on common 360-390px phones */
        @media (width <= 400px) {
            gap: 16px 8px;

            & .pricing-pill {
                gap: 6px;
                padding-inline: 10px;
                font-size: 11.5px;
            }
        }
    }

    .pricing-feature-card {
        padding: 16px;
        border-radius: 24px;

        & .feature-main {
            gap: 16px;
            padding: 20px 0 0;
            background-color: transparent;
        }

        & .feature-visual {
            height: 335px;

            & .feature-stats {
                inset-block-end: 10px;
                gap: 16px;
                padding: 12px 20px;
                border-radius: 12px;
            }

            & .feature-stat {
                gap: 2px;

                & + .feature-stat {
                    padding-inline-start: 16px;
                }

                & .stat-value {
                    font-size: 14px;
                }

                & .stat-label {
                    font-size: 10px;
                }
            }
        }

        & .feature-main .feature-tiers {
            margin-block-start: 24px;

            & .tier-text {
                white-space: normal;
            }
        }
    }

    .pricing-cta {
        min-height: 0;
        border-radius: 32px;

        & .cta-visual {
            order: -1;
            min-height: 241px;

            & img {
                inset: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        & .cta-content {
            align-items: center;
            gap: 32px;
            padding: 20px 32px 40px;
        }

        & .cta-text {
            align-items: center;
            text-align: center;
        }

        & .cta-copy {
            align-items: center;
            gap: 8px;
        }

        & .cta-title {
            font-size: 26px;
        }

        & .cta-description {
            font-size: 12px;
        }

        & .cta-attendees {
            flex-direction: column;
            align-items: center;
            text-align: center;

            & .attendees-count {
                font-size: 20px;
            }

            & .attendee {
                width: 40px;
                height: 40px;
            }

            & .attendees-label {
                max-width: none;
                font-size: 14px;
            }
        }
    }
}