/* Homepage pricing — reference-parity layout and billing interaction. */
.route-home #pricing.be-pricing {
    position: relative;
    width: 100%;
    min-height: 0;
    overflow: visible;
    color: #333;
    background: #fcfcfc;
}

.be-pricing__inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 96px;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.be-pricing__header {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

.be-pricing__eyebrow {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    color: #f55733;
    font-size: 18px;
    font-weight: 300;
    line-height: 21.6px;
}

.be-pricing__header h2 {
    margin: 0;
    color: #333;
    font-size: 42px;
    font-weight: 600;
    line-height: 42px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.be-pricing__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.be-pricing__toggle {
    height: 31.2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.be-pricing__toggle-label,
.be-pricing__switch {
    margin: 0;
    border: 0;
    font: inherit;
    cursor: pointer;
    appearance: none;
}

.be-pricing__toggle-label {
    padding: 0;
    color: #333;
    background: transparent;
    font-size: 24px;
    font-weight: 300;
    line-height: 31.2px;
}

.be-pricing__switch {
    position: relative;
    width: 58px;
    height: 30px;
    flex: 0 0 58px;
    padding: 2px;
    border-radius: 30px;
    background: #f55733;
    transition: background-color .4s cubic-bezier(.22, 1, .36, 1);
}

.be-pricing__body[data-billing-state="monthly"] .be-pricing__switch {
    background: #333;
}

.be-pricing__switch-knob {
    position: absolute;
    left: 2px;
    top: 2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    transform: translateX(30px);
    transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}

.be-pricing__body[data-billing-state="monthly"] .be-pricing__switch-knob {
    transform: none;
}

.be-pricing__cards {
    display: grid;
    grid-template-columns: repeat(var(--pricing-columns, 3), minmax(0, 1fr));
    gap: 20px;
    overflow: hidden;
}

.be-pricing__card {
    min-width: 0;
    padding: 30px 30px 40px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    overflow: hidden;
    border-radius: 40px;
    background: #fff;
    box-shadow: inset 0 0 0 1px #d8d8d8;
}

.be-pricing__card--featured {
    box-shadow: inset 0 0 0 1px #f55733;
}

.be-pricing__card h3 {
    margin: 0;
    color: #333;
    font-size: 24px;
    font-weight: 500;
    line-height: 31.2px;
}

.be-pricing__center {
    width: 100%;
    height: 140.8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.be-pricing__price {
    height: 36px;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    overflow: hidden;
}

.be-pricing__price-window {
    height: 36px;
    overflow: hidden;
}

.be-pricing__price-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
    transform: none;
    transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}

.be-pricing__body[data-billing-state="monthly"] .be-pricing__price-stack {
    transform: translateY(-46px);
}

.be-pricing__price-stack span {
    height: 36px;
    flex: 0 0 36px;
    color: #f55733;
    font-size: 42px;
    font-weight: 800;
    line-height: 35.7px;
    white-space: nowrap;
}

.be-pricing__period {
    margin: 0 0 .3px;
    color: #333;
    font-size: 18px;
    font-weight: 300;
    line-height: 21.6px;
    white-space: nowrap;
}

.be-pricing__description {
    margin: 0;
    color: #333;
    font-size: 18px;
    font-weight: 300;
    line-height: 21.6px;
}

.be-pricing__button {
    position: relative;
    width: 100%;
    height: 41.6px;
    flex: 0 0 41.6px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 40px;
    color: #fff;
    background: #333;
    font-size: 18px;
    font-weight: 300;
    line-height: 21.6px;
    text-decoration: none;
    transition: background-color .4s cubic-bezier(.22, 1, .36, 1);
}

.be-pricing__card--featured .be-pricing__button {
    background: #f55733;
}

.be-pricing__button:hover,
.be-pricing__button:focus-visible {
    background: #f55733;
}

.be-pricing__card--featured .be-pricing__button:hover,
.be-pricing__card--featured .be-pricing__button:focus-visible {
    background: #15bf5f;
}

.be-pricing__arrow {
    position: absolute;
    z-index: 1;
    right: 15px;
    top: calc(50% - 11px);
    width: 22px;
    height: 22px;
    color: #fff;
    transform: rotate(-45deg);
    transform-origin: 50% 50%;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.be-pricing__arrow svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    fill: currentColor;
}

.be-pricing__button:hover .be-pricing__arrow,
.be-pricing__button:focus-visible .be-pricing__arrow {
    transform: none;
}

.be-pricing__features {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    list-style: none;
}

.be-pricing__features li {
    min-width: 0;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    color: #333;
    font-size: 16px;
    font-weight: 300;
    line-height: 19.2px;
}

.be-pricing__feature-icon {
    width: 20px;
    height: 19.2px;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.be-pricing__feature-icon::before {
    content: "✓";
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #0bde66;
}

.be-pricing__features li.is-disabled {
    color: #a2a2a2;
}

.be-pricing__features li.is-disabled .be-pricing__feature-icon {
    color: #ed0707;
    font-size: 19px;
    font-weight: 300;
}

.be-pricing__features li.is-disabled .be-pricing__feature-icon::before {
    content: "×";
    width: auto;
    height: auto;
    background: transparent;
}

.be-estimator {
    width: 100%;
    min-height: 0;
    margin-top: 76px;
    padding: 64px 0 72px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 54px;
    border-top: 1px solid #d8d8d8;
}

.be-estimator__form-column,
.be-estimator__media-column {
    min-width: 0;
}

.be-estimator__form-column {
    display: flex;
    flex-direction: column;
    align-self: start;
}

.be-estimator__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.be-estimator__header p {
    margin: 0 0 24px;
    color: #f55733;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
}

.be-estimator__header h3 {
    max-width: 600px;
    margin: 0;
    color: #202027;
    font-size: clamp(36px, 3vw, 42px);
    font-weight: 650;
    line-height: 1.02;
    letter-spacing: -.045em;
    text-transform: uppercase;
}

.be-estimator__header h3 span {
    white-space: nowrap;
}

.be-estimator__header > span {
    max-width: 590px;
    margin-top: 20px;
    color: #707485;
    font-size: 18px;
    font-weight: 300;
    line-height: 1.45;
}

.be-estimator__form {
    margin-top: 46px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.be-estimator__directions,
.be-estimator__budget {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.be-estimator__directions legend,
.be-estimator__budget legend,
.be-estimator__field > span:first-child {
    margin: 0 0 10px;
    padding: 0;
    color: #202027;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
}

.be-estimator__directions > div {
    display: grid;
    grid-template-columns: repeat(var(--estimator-direction-columns, 4), minmax(0, 1fr));
    gap: 10px;
}

.be-estimator__directions label,
.be-estimator__budget label {
    position: relative;
    min-width: 0;
    cursor: pointer;
}

.be-estimator__directions input,
.be-estimator__budget input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.be-estimator__directions label span,
.be-estimator__budget label span {
    min-height: 50px;
    padding: 10px 8px;
    display: grid;
    place-items: center;
    border: 1px solid #d1d4dc;
    border-radius: 7px;
    color: #202027;
    background: #fff;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.15;
    text-align: center;
    text-transform: uppercase;
    transition: color .3s ease, border-color .3s ease, background-color .3s ease;
}

.be-estimator__directions label:hover span,
.be-estimator__budget label:hover span {
    border-color: #f55733;
    color: #f55733;
}

.be-estimator__directions input:checked + span {
    border-color: #202027;
    color: #fff;
    background: #202027;
}

.be-estimator__budget input:checked + span {
    border-color: #f55733;
    color: #f55733;
    background: rgba(245, 87, 51, .05);
}

.be-estimator__directions input:focus-visible + span,
.be-estimator__budget input:focus-visible + span {
    outline: 2px solid #f55733;
    outline-offset: 3px;
}

.be-estimator__field {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.be-estimator__select {
    position: relative;
    display: block;
}

.be-estimator__select::after {
    content: "";
    position: absolute;
    right: 21px;
    top: calc(50% - 5px);
    width: 9px;
    height: 9px;
    border-right: 1.5px solid #202027;
    border-bottom: 1.5px solid #202027;
    transform: rotate(45deg);
    pointer-events: none;
}

.be-estimator__select select {
    width: 100%;
    height: 52px;
    padding: 0 50px 0 20px;
    border: 1px solid #d1d4dc;
    border-radius: 7px;
    outline: 0;
    color: #707485;
    background: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 300;
    cursor: pointer;
    appearance: none;
    transition: border-color .3s ease, box-shadow .3s ease;
}

.be-estimator__select select:hover {
    border-color: #989ca7;
}

.be-estimator__select select:focus-visible {
    border-color: #f55733;
    box-shadow: 0 0 0 3px rgba(245, 87, 51, .12);
}

.be-estimator__budget > div {
    display: grid;
    grid-template-columns: repeat(var(--estimator-budget-columns, 3), minmax(0, 1fr));
    gap: 10px;
}

.be-estimator__budget label span {
    color: #707485;
    font-size: 15px;
    text-transform: none;
}

.be-estimator__submit {
    position: relative;
    min-height: 68px;
    padding: 15px 78px 15px 28px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    border-radius: 7px;
    color: #fff;
    background: #f55733;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.15;
    text-transform: uppercase;
    text-decoration: none;
    transition: background-color .4s cubic-bezier(.22, 1, .36, 1);
}

.be-estimator__submit:hover,
.be-estimator__submit:focus-visible {
    color: #fff;
    background: #202027;
}

.be-estimator__submit-arrow {
    position: absolute;
    right: 27px;
    top: calc(50% - 14px);
    width: 28px;
    height: 28px;
    color: currentColor;
    transform: rotate(-45deg);
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.be-estimator__submit-arrow svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
}

.be-estimator__submit:hover .be-estimator__submit-arrow,
.be-estimator__submit:focus-visible .be-estimator__submit-arrow {
    transform: none;
}

.be-estimator__benefits {
    display: grid;
    grid-template-columns: repeat(var(--estimator-benefit-columns, 3), minmax(0, 1fr));
    gap: 0;
}

.be-estimator__benefits span {
    min-width: 0;
    min-height: 30px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-right: 1px solid #d1d4dc;
    color: #202027;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.25;
    text-align: center;
    text-transform: uppercase;
}

.be-estimator__benefits span:first-child {
    padding-left: 0;
}

.be-estimator__benefits span:last-child {
    padding-right: 0;
    border-right: 0;
}

.be-estimator__benefits svg {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.be-estimator__media-column {
    align-self: stretch;
}

.be-estimator__media {
    position: sticky;
    top: 96px;
    isolation: isolate;
    width: 100%;
    height: 360px;
    min-height: 0;
    overflow: visible;
    border-radius: 40px;
    background: #f5a33e;
}

.be-estimator__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 32%;
    border-radius: inherit;
}

.be-estimator__media-cutout {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 31%;
    height: 23%;
    border-radius: 48px 0 0 0;
    background: #fcfcfc;
    pointer-events: none;
}

.be-estimator__media-cutout::before,
.be-estimator__media-cutout::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 40px;
    pointer-events: none;
    background: center / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 40V0C40 22.0914 22.0914 40 0 40H40Z' fill='%23fcfcfc'/%3E%3C/svg%3E");
}

.be-estimator__media-cutout::before {
    right: 0;
    bottom: 100%;
}

.be-estimator__media-cutout::after {
    right: 100%;
    bottom: 0;
}

@media (min-width: 801px) and (max-width: 1180px) {
    .be-estimator {
        min-height: 0;
        gap: 32px;
    }

    .be-estimator__header h3 {
        font-size: 38px;
    }

    .be-estimator__header h3 span {
        white-space: normal;
    }

    .be-estimator__directions > div {
        grid-template-columns: repeat(var(--estimator-mobile-direction-columns, 2), minmax(0, 1fr));
    }

    .be-estimator__submit {
        font-size: 18px;
    }

    .be-estimator__benefits {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .be-estimator__benefits span,
    .be-estimator__benefits span:first-child,
    .be-estimator__benefits span:last-child {
        padding: 0;
        justify-content: flex-start;
        border-right: 0;
    }
}

@media (max-width: 800px) {
    .be-pricing__inner {
        max-width: none;
        padding: 60px 20px;
        gap: 30px;
    }

    .be-pricing__eyebrow {
        font-size: 16px;
        line-height: 19.2px;
    }

    .be-pricing__header h2 {
        font-size: 22px;
        line-height: 22px;
    }

    .be-pricing__toggle {
        height: 30px;
    }

    .be-pricing__toggle-label {
        font-size: 18px;
        line-height: 23.4px;
    }

    .be-pricing__cards {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .be-pricing__card h3 {
        font-size: 18px;
        line-height: 23.4px;
    }

    .be-pricing__center {
        height: 128.2px;
    }

    .be-pricing__price,
    .be-pricing__price-window {
        height: 26px;
    }

    .be-pricing__body[data-billing-state="monthly"] .be-pricing__price-stack {
        transform: translateY(-36px);
    }

    .be-pricing__price-stack span {
        height: 26px;
        flex-basis: 26px;
        font-size: 30px;
        line-height: 25.5px;
    }

    .be-pricing__period,
    .be-pricing__description,
    .be-pricing__button,
    .be-pricing__features li {
        font-size: 16px;
        line-height: 19.2px;
    }

    .be-estimator {
        min-height: 0;
        margin-top: 40px;
        padding: 50px 0 0;
        grid-template-columns: 1fr;
        gap: 42px;
    }

    .be-estimator__header p {
        margin-bottom: 16px;
        font-size: 14px;
    }

    .be-estimator__header h3 {
        font-size: 31px;
        line-height: 1;
    }

    .be-estimator__header h3 span {
        white-space: normal;
    }

    .be-estimator__header > span {
        margin-top: 16px;
        font-size: 16px;
    }

    .be-estimator__form {
        margin-top: 34px;
        gap: 20px;
    }

    .be-estimator__directions > div {
        grid-template-columns: repeat(var(--estimator-mobile-direction-columns, 2), minmax(0, 1fr));
    }

    .be-estimator__budget > div {
        grid-template-columns: 1fr;
    }

    .be-estimator__submit {
        min-height: 58px;
        padding: 13px 60px 13px 18px;
        font-size: 17px;
    }

    .be-estimator__submit-arrow {
        right: 18px;
        top: calc(50% - 12.5px);
        width: 25px;
        height: 25px;
    }

    .be-estimator__benefits {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .be-estimator__benefits span,
    .be-estimator__benefits span:first-child,
    .be-estimator__benefits span:last-child {
        min-height: 26px;
        padding: 0;
        justify-content: flex-start;
        border-right: 0;
        text-align: left;
    }

    .be-estimator__media-column {
        order: 2;
    }

    .be-estimator__media {
        position: static;
        height: clamp(220px, 55vw, 320px);
        min-height: 0;
        aspect-ratio: auto;
        border-radius: 30px;
    }

    .be-estimator__media-cutout {
        display: none;
    }

}

@media (prefers-reduced-motion: reduce) {
    .be-pricing__switch-knob,
    .be-pricing__switch,
    .be-pricing__price-stack,
    .be-pricing__button,
    .be-pricing__arrow,
    .be-estimator__directions label span,
    .be-estimator__budget label span,
    .be-estimator__select select,
    .be-estimator__submit,
    .be-estimator__submit-arrow {
        transition: none;
    }
}