/* 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: 47px;
    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: var(--fs-300);
    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;

        & 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: 16px;
            height: 16px;
        }
    }
}

/* Sections */
.pricing-section-wrapper {
    padding-block: 58px 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: stretch;
    justify-content: space-between;
    gap: 28px;
    padding: 40px 32px;
    border-radius: var(--radius-2xl);
    background-color: var(--white-clr);

    & .custom-intro {
        display: flex;
        flex-direction: column;
        gap: 40px;
        flex: 0 0 340px;
        justify-content: space-between;

        & .custom-text {
            display: flex;
            flex-direction: column;
            gap: 86px;
            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.65px;
            font-weight: var(--fw-700);
            color: var(--_pricing-heading-clr);
        }

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

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

        & .custom-title {
            font-size: 40px;
            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;
        }
    }

    & .custom-cards {
        display: flex;
        align-items: stretch;
        gap: 28px;
        flex: 1;
        min-width: 0;
    }

    & .custom-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1 1 0;
        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;
    }

    & .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.63px;
        list-style: none;
    }
}

/* 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-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;

    &::before {
        content: "";
        position: absolute;
        inset-block: 27px 191px;
        inset-inline-start: 50%;
        width: 1px;
        background-color: #e6e4ee;
        translate: -0.5px 0;
    }

    &::after {
        content: "";
        position: absolute;
        inset-block-end: 191px;
        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: 27px;
        inset-inline-start: 50%;
        width: 1.5px;
        height: var(--steps-progress, 0px);
        max-height: calc(100% - 218px);
        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: 394px;
    padding: 12px;
    border-radius: 20px;
    background-color: var(--white-clr);
    overflow: clip;

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

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

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

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

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

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

        & .feature-paragraph {
            max-width: 380px;
            font-size: var(--fs-300);
            font-weight: var(--fw-400);
            line-height: 1.4;
            letter-spacing: -0.28px;
            color: var(--_pricing-footnote-clr);
        }

        & .feature-footnote {
            position: absolute;
            inset-block-end: 17px;
            inset-inline-start: 16px;
            display: flex;
            align-items: flex-end;
            gap: 12px;
            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-stats {
            position: absolute;
            inset-block: 0;
            inset-inline-end: 31px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 40px;
            width: 189px;
            line-height: normal;
            white-space: nowrap;
        }

        & .feature-stat {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            padding: 22px 16px;
            border: 1px solid var(--gray-clr-100);
            border-radius: 16px;
            background-color: var(--white-clr);

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

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

    & .feature-visual {
        height: 370px;
        margin-inline-start: -16px;

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

/* Cards stack on top of each other while scrolling (desktop only) */
@media (width > 1024px) {
    .pricing-feature-card {
        position: sticky;
        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;
        }
    }
}

/* 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 {
            flex-wrap: wrap;

            & .custom-card {
                flex-basis: 260px;
            }
        }
    }

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

        & .feature-main {
            padding-inline-end: 16px;
            border-radius: 20px;

            & .feature-stats {
                position: static;
                flex-direction: row;
                justify-content: flex-start;
                gap: 16px;
                width: auto;
                margin-block-start: 8px;
            }

            & .feature-footnote {
                position: static;
                margin-block-start: auto;
            }
        }

        & .feature-visual {
            height: 320px;
            margin: 8px 0 0;
            border-radius: 20px;
            overflow: clip;
        }
    }

    .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-offer {
        flex-wrap: wrap;
        gap: 8px;
        text-align: center;
    }

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

    .pricing-pills {
        gap: 12px;

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

    .pricing-controls {
        gap: 28px;
    }

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

    .pricing-plans {
        grid-template-columns: 1fr;
    }

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

        & .custom-cards {
            flex-direction: column;
        }
    }

    .pricing-steps {
        padding-block: 0;

        &::before,
        &::after,
        & .steps-progress {
            display: none;
        }
    }

    .pricing-step {
        grid-template-columns: 1fr;
        row-gap: 16px;
        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;
        }

        & .step-content,
        &:nth-child(even) .step-content {
            grid-column: 1;
            grid-row: 2;
            align-items: flex-start;
            justify-self: start;
            text-align: left;
        }
    }

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

    .pricing-feature-card {
        & .feature-main {
            & .feature-stats {
                flex-direction: column;
                width: 100%;
            }
        }
    }
}