:root {
    /* Home/eCommerce-aligned responsive shell and hero scale. */
    --saas-shell-width: var(--site-shell-width, calc(100% - clamp(32px, 8vw, 128px)));
    --saas-shell-max-width: var(--site-shell-max-width, 1424px);
    --saas-shell-gutter: clamp(12px, 1.1vw, 16px);
    --saas-hero-title-size: 34px;
    --saas-hero-subtitle-size: 16px;
    --saas-hero-button-size: 18px;
    --saas-cta-title-size: 24px;
    --saas-cta-description-size: 15px;
    --saas-cta-button-size: 16px;
    --saas-products-heading-size: 18px;
    --saas-products-intro-size: 14px;
    --saas-product-title-size: 22px;
    --saas-product-copy-size: 17px;
    --saas-impact-title-size: 28px;
    --saas-impact-description-size: 18px;
    --saas-impact-card-title-size: 22px;
    --saas-impact-card-description-size: 18px;
    --saas-pricing-title-size: 28px;
    --saas-pricing-description-size: 18px;
    --saas-pricing-category-title-size: 17px;
    --saas-pricing-category-subtitle-size: 13px;
    --saas-pricing-guarantee-size: 16px;
    --saas-pricing-toggle-size: 16px;
    --saas-pricing-plan-name-size: 24px;
    --saas-pricing-badge-size: 15px;
    --saas-pricing-plan-price-size: 32px;
    --saas-pricing-plan-detail-size: 15px;
    --saas-pricing-button-size: 16px;
    --saas-pricing-body-title-size: 18px;
    --saas-pricing-feature-size: 16px;
    --saas-pricing-border: 1.3px solid var(--Neutral-50, #BDBDBD);
    --saas-card-padding: clamp(28px, 3vw, 40px);
}

@media (min-width: 576px) {
    :root {
        --saas-hero-title-size: 38px;
        --saas-hero-subtitle-size: 18px;
        --saas-hero-button-size: 20px;
        --saas-cta-title-size: 28px;
        --saas-cta-description-size: 17px;
        --saas-cta-button-size: 17px;
        --saas-products-heading-size: 20px;
        --saas-products-intro-size: 16px;
        --saas-impact-title-size: 32px;
        --saas-impact-description-size: 20px;
        --saas-pricing-title-size: 32px;
        --saas-pricing-description-size: 22px;
        --saas-pricing-category-title-size: 18px;
        --saas-pricing-category-subtitle-size: 14px;
        --saas-pricing-guarantee-size: 18px;
        --saas-pricing-badge-size: 16px;
        --saas-pricing-plan-price-size: 34px;
        --saas-pricing-plan-detail-size: 16px;
        --saas-pricing-button-size: 17px;
        --saas-pricing-body-title-size: 20px;
    }
}

@media (min-width: 768px) {
    :root {
        --saas-hero-title-size: clamp(38px, 3vw, 46px);
        --saas-hero-subtitle-size: clamp(18px, 1.4vw, 20px);
        --saas-cta-title-size: 32px;
        --saas-cta-description-size: 18px;
        --saas-cta-button-size: 18px;
        --saas-products-heading-size: 22px;
        --saas-products-intro-size: 17px;
        --saas-impact-title-size: 34px;
        --saas-impact-description-size: 22px;
        --saas-pricing-title-size: 34px;
        --saas-pricing-description-size: 24px;
        --saas-pricing-category-title-size: 20px;
        --saas-pricing-category-subtitle-size: 15px;
        --saas-pricing-guarantee-size: 20px;
        --saas-pricing-badge-size: 18px;
        --saas-pricing-plan-price-size: 36px;
        --saas-pricing-button-size: 18px;
        --saas-pricing-body-title-size: 22px;
    }
}

@media (min-width: 992px) {
    :root {
        --saas-hero-button-size: 24px;
        --saas-cta-title-size: 32px;
        --saas-cta-description-size: 22px;
        --saas-cta-button-size: 20px;
        --saas-products-heading-size: 26px;
        --saas-products-intro-size: 18px;
        --saas-product-title-size: 22px;
        --saas-product-copy-size: 18px;
        --saas-impact-title-size: 36px;
        --saas-impact-description-size: 22px;
        --saas-impact-card-title-size: 22px;
        --saas-impact-card-description-size: 18px;
        --saas-pricing-title-size: 40px;
        --saas-pricing-description-size: 27px;
        --saas-pricing-category-title-size: 20px;
        --saas-pricing-category-subtitle-size: 15px;
        --saas-pricing-guarantee-size: 22px;
        --saas-pricing-toggle-size: 16px;
        --saas-pricing-plan-name-size: 28px;
        --saas-pricing-badge-size: 18px;
        --saas-pricing-plan-price-size: 42px;
        --saas-pricing-plan-detail-size: 18px;
        --saas-pricing-button-size: 18px;
        --saas-pricing-body-title-size: 22px;
        --saas-pricing-feature-size: 20px;
    }
}

    :is(#hero, #operational-impact, #products, #pricing) > .container {
        width: var(--saas-shell-width);
        max-width: var(--saas-shell-max-width);
        margin-right: auto;
        margin-left: auto;
        padding-right: var(--saas-shell-gutter);
        padding-left: var(--saas-shell-gutter);
    }

#banner,
#hero,
.products-section,
.operational-impact-section,
.pricing-section {
        max-width: 100%;
        overflow-x: clip;
    }

    #banner {
        position: absolute;
        top: calc(var(--site-navbar-space, 0px) * -1);
        left: 0;
        width: 100%;
        height: calc(101vh + var(--site-navbar-space, 0px));
        min-height: calc(720px + var(--site-navbar-space, 0px));
        overflow: hidden;
    }

    #home-banner {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    #hero {
        --solution-hero-title-size: var(--saas-hero-title-size);
        --solution-hero-description-size: var(--saas-hero-subtitle-size);
        position: relative;
        box-sizing: border-box;
        z-index: 2;
        height: 101vh;
        min-height: 720px;
        padding-top: var(--site-navbar-space, 0px);
    }

    #hero .container {
        position: relative;
        top: calc(var(--site-navbar-space, 0px) * -1);
        height: calc(100% + var(--site-navbar-space, 0px));
        min-height: 0;
    }

    .hero-title {
        color: #fff !important;
        margin: 0 0 16px;
        font-size: var(--saas-hero-title-size);
        font-style: normal;
        font-weight: 700;
        line-height: 1.18;
        letter-spacing: 0;
        font-family: Poppins, sans-serif;
    }

    .hero-content {
        position: absolute;
        top: 50%;
        left: 0;
        z-index: 999;
        width: min(62%, 900px);
        max-width: 100%;
        color: #fff;
        transform: translateY(-50%);
    }

    .hero-subtitle {
        margin: 0 0 36px;
        max-width: min(100%, 670px);
        color: #fff;
        font-family: Poppins, sans-serif;
        font-size: var(--saas-hero-subtitle-size);
        font-style: normal;
        font-weight: 500;
        line-height: 1.35;
        letter-spacing: 0;
    }

    .hero-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: clamp(220px, 23vw, 330px);
        min-height: 64px;
        padding: 16px 48px;
        border-radius: 16px;
        background: var(--STORE2GO-Normal, #0071BD);
        color: #FFFFFF;
        font-family: Poppins, sans-serif;
        font-size: var(--saas-hero-button-size);
        font-style: normal;
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
    }

    .hero-button:hover {
        color: #FFFFFF;
        text-decoration: none;
    }

    .products-section {
        background: #fff;
        color: var(--Neutral-100, #212121);
        font-family: Poppins, sans-serif;
        overflow: visible;
        padding: 32px 0 96px;
    }

    .products-section > .container {
        max-width: var(--saas-shell-max-width);
    }

    .products-layout {
        align-items: stretch !important;
        min-width: 0;
        --bs-gutter-x: 0;
    }

    .products-sticky-col,
    .products-list {
        min-width: 0;
    }

    .products-sticky-col {
        align-self: stretch;
        width: 29%;
        padding-right: clamp(36px, 3.4vw, 52px);
    }

    .products-sticky {
        position: sticky;
        top: calc(var(--site-navbar-space, 96px) + 32px);
        align-self: start;
        width: calc(100% + clamp(36px, 3.4vw, 52px));
        padding-right: clamp(12px, 1.2vw, 18px);
    }

    .products-sticky::after {
        content: "";
        position: absolute;
        top: 76px;
        right: 0;
        bottom: 0;
        width: 2px;
        background: var(--Neutral-40, #D6D6D6);
    }

    .products-heading {
        max-width: 350px;
        margin: 0 0 22px;
        color: var(--Neutral-100, #212121);
        font-size: var(--saas-products-heading-size);
        font-weight: 700;
        line-height: 1.1;
    }

    .products-intro {
        max-width: 350px;
        margin: 0;
        color: var(--Neutral-100, #212121);
        font-size: var(--saas-products-intro-size);
        font-weight: 400;
        line-height: 1.35;
        text-align-last: left;
    }

    .products-ecosystem-image {
        display: block;
        width: 100%;
        max-width: 350px;
        height: auto;
        margin-top: 28px;
        object-fit: contain;
    }

    .products-list {
        display: flex;
        flex-direction: column;
        width: 71%;
        padding-left: clamp(36px, 3.4vw, 52px);
    }

    .product-item {
        border-bottom: 2px solid var(--Neutral-40, #D6D6D6);
    }

    .product-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        width: 100%;
        min-height: 124px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--Neutral-100, #212121);
        text-align: left;
        cursor: pointer;
    }

    .product-item.is-open .product-toggle {
        min-height: 76px;
        align-items: flex-start;
    }

    .product-item + .product-item.is-open .product-toggle {
        min-height: 0;
        padding: 40px 0 28px;
    }

    .product-title {
        color: var(--STORE2GO-Normal, #0071BD);
        font-size: var(--saas-product-title-size);
        font-weight: 500;
        line-height: 1.2;
    }

    .product-chevron {
        position: relative;
        flex: 0 0 auto;
        width: 24px;
        height: 24px;
        margin-top: 0;
    }

    .product-item.is-open .product-chevron {
        margin-top: 8px;
    }

    .product-chevron::before,
    .product-chevron::after {
        content: "";
        position: absolute;
        top: 11px;
        width: 16px;
        height: 3px;
        border-radius: 999px;
        background: var(--Neutral-100, #212121);
        transition: transform 0.2s ease;
    }

    .product-chevron::before {
        left: 0;
        transform: rotate(45deg);
    }

    .product-chevron::after {
        right: 0;
        transform: rotate(-45deg);
    }

    .product-item.is-open .product-chevron::before {
        transform: rotate(-45deg);
    }

    .product-item.is-open .product-chevron::after {
        transform: rotate(45deg);
    }

    .product-panel {
        display: none;
        padding: 0 0 36px;
    }

    .product-item.is-open .product-panel {
        display: grid;
        grid-template-columns: minmax(280px, 1.08fr) minmax(280px, 0.98fr);
        gap: clamp(24px, 3vw, 40px);
        align-items: start;
        animation: productPanelFadeUp 1.0s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .product-item.is-open .product-image,
    .product-item.is-open .product-copy {
        animation: productPanelFadeUp 0.58s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .product-item.is-open .product-copy li {
        animation: productPanelFadeUp 0.52s cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .product-item.is-open .product-copy li:nth-child(1) {
        animation-delay: 0.06s;
    }

    .product-item.is-open .product-copy li:nth-child(2) {
        animation-delay: 0.12s;
    }

    .product-item.is-open .product-copy li:nth-child(3) {
        animation-delay: 0.18s;
    }

    .product-item.is-open .product-copy li:nth-child(4) {
        animation-delay: 0.24s;
    }

    @keyframes productPanelFadeUp {
        from {
            opacity: 0;
            transform: translateY(28px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .product-image {
        display: block;
        width: 100%;
        max-height: 320px;
        aspect-ratio: 16 / 10;
        border-radius: 16px;
        object-fit: contain;
    }

    .product-copy {
        color: var(--Neutral-100, #212121);
        font-size: var(--saas-product-copy-size);
        font-weight: 400;
        line-height: 1.32;
    }

    .product-copy p {
        margin: 0 0 22px;
    }

    .product-copy ul {
        display: grid;
        gap: 20px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .product-copy li {
        position: relative;
        padding-left: 40px;
    }

    .product-copy li::before {
        content: "";
        position: absolute;
        top: 0.56em;
        left: 8px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--STORE2GO-Normal, #0071BD);
    }

    .product-copy a {
        color: var(--STORE2GO-Normal, #0071BD);
        text-decoration: underline;
    }

    .operational-impact-section {
        overflow: hidden;
        background: #fff;
        color: var(--Neutral-100, #212121);
        font-family: Poppins, sans-serif;
        padding: 92px 0 32px;
    }

    .operational-impact-header {
        max-width: 1320px;
        margin: 0 auto 48px;
        text-align: center;
    }

    .operational-impact-title {
        margin: 0 0 18px;
        color: var(--Neutral-100, #212121);
        font-size: var(--saas-impact-title-size);
        font-weight: 700;
        line-height: 1.18;
    }

    .operational-impact-description {
        margin: 0 auto;
        max-width: 1320px;
        color: var(--Neutral-100, #212121);
        font-size: var(--saas-impact-description-size);
        font-weight: 400;
        line-height: 1.25;
    }

    .impact-carousel {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr) 64px;
        gap: 42px;
        align-items: center;
    }

    .impact-track {
        position: relative;
        min-height: 520px;
        overflow: visible;
    }

    .impact-card {
        --impact-x: 0px;
        --impact-scale: 0.78;
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: min(100%, 330px);
        min-height: 300px;
        padding: 24px 20px;
        border: 2px solid transparent;
        border-radius: 16px;
        background: transparent;
        color: var(--Neutral-100, #212121);
        text-align: center;
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, -50%) translateX(var(--impact-x)) scale(var(--impact-scale));
        transform-origin: center;
        transition:
            transform 0.72s cubic-bezier(0.22, 1, 0.36, 1),
            opacity 0.46s ease,
            width 0.72s cubic-bezier(0.22, 1, 0.36, 1),
            min-height 0.72s cubic-bezier(0.22, 1, 0.36, 1),
            padding 0.72s cubic-bezier(0.22, 1, 0.36, 1),
            border-color 0.42s ease,
            background-color 0.42s ease;
        will-change: transform, opacity;
    }

    .impact-card.is-prev,
    .impact-card.is-active,
    .impact-card.is-next {
        opacity: 1;
    }

    .impact-card.is-prev {
        --impact-x: calc(-1 * clamp(250px, 30vw, 360px));
        --impact-scale: 0.84;
        z-index: 1;
    }

    .impact-card.is-active {
        --impact-x: 0px;
        --impact-scale: 1;
        z-index: 3;
        width: min(100%, 380px);
        min-height: 500px;
        padding: 40px 28px 36px;
        border: 2px solid var(--STORE2GO-Normal, #0071BD);
        border-radius: 16px;
        background: var(--STORE2GO-Lightest, #E8F6FF);
    }

    .impact-card.is-next {
        --impact-x: clamp(250px, 30vw, 360px);
        --impact-scale: 0.84;
        z-index: 1;
    }

    .impact-card.is-off-left {
        --impact-x: calc(-1 * clamp(520px, 58vw, 720px));
        --impact-scale: 0.66;
    }

    .impact-card.is-off-right {
        --impact-x: clamp(520px, 58vw, 720px);
        --impact-scale: 0.66;
    }

    .impact-card.is-staging {
        transition: none !important;
    }

    .impact-icon {
        display: block;
        width: 150px;
        height: 150px;
        margin: 0 auto 24px;
        object-fit: contain;
    }

    .impact-card.is-active .impact-icon {
        width: 170px;
        height: 170px;
        margin-bottom: 26px;
    }

    .impact-card-title {
        margin: 0;
        color: var(--Neutral-100, #212121);
        font-size: var(--saas-impact-card-title-size);
        font-weight: 600;
        line-height: 1.12;
    }

    .impact-card.is-active .impact-card-title {
        margin-bottom: 16px;
    }

    .impact-card-description {
        margin: 0;
        color: var(--Neutral-100, #212121);
        font-size: var(--saas-impact-card-description-size);
        font-weight: 300;
        line-height: 1.28;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        transform: translateY(10px);
        transition: max-height 0.58s ease, opacity 0.38s ease, transform 0.58s ease;
    }

    .impact-card.is-active .impact-card-description {
        max-height: 220px;
        opacity: 1;
        transform: translateY(0);
    }

    .impact-nav {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        border: 4px solid var(--Neutral-100, #212121);
        border-radius: 50%;
        background: #fff;
        color: var(--Neutral-100, #212121);
        cursor: pointer;
        transition: border-color 0.2s ease, color 0.2s ease;
    }

    .impact-nav:hover {
        border-color: var(--STORE2GO-Normal, #0071BD);
        color: var(--STORE2GO-Normal, #0071BD);
    }

    .impact-nav svg {
        width: 30px;
        height: 30px;
    }

    .pricing-section {
        background: #fff;
        color: var(--Neutral-100, #212121);
        font-family: Poppins, sans-serif;
        padding: 112px 0 128px;
    }

    .pricing-header {
        max-width: 1160px;
        margin: 0 auto 38px;
        text-align: center;
    }

    .pricing-title {
        margin: 0 0 18px;
        color: var(--Neutral-100, #212121);
        font-size: var(--saas-pricing-title-size);
        font-weight: 700;
        line-height: 1.18;
    }

    .pricing-description {
        margin: 0 auto;
        max-width: 1060px;
        color: var(--Neutral-100, #212121);
        font-size: var(--saas-pricing-description-size);
        font-weight: 400;
        line-height: 1.25;
    }

    .pricing-categories {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        max-width: 980px;
        margin: 0 auto 42px;
        padding: 6px;
        border: 1px solid #F0F0F0;
        border-radius: 16px;
        background: #F6F6F6;
        overflow: hidden;
    }

    .pricing-category {
        display: flex;
        align-items: center;
        gap: 18px;
        min-height: 88px;
        padding: 18px 24px;
        border: 0;
        background: transparent;
        color: var(--Neutral-80, #424242);
        text-align: left;
        cursor: pointer;
    }

    .pricing-category.is-active {
        background: #fff;
        border-radius: 10px;
    }

    .pricing-category-icon {
        flex: 0 0 auto;
        width: 34px;
        height: 34px;
        color: var(--Neutral-90, #2B2B2B);
    }

    .pricing-category-title {
        display: block;
        color: var(--Neutral-100, #212121);
        font-size: var(--saas-pricing-category-title-size);
        font-weight: 700;
        line-height: 1.15;
    }

    .pricing-category-subtitle {
        display: block;
        margin-top: 4px;
        color: var(--Neutral-70, #6B6B6B);
        font-size: var(--saas-pricing-category-subtitle-size);
        font-weight: 500;
        line-height: 1.25;
    }

    .pricing-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        margin-bottom: 56px;
    }

    .pricing-guarantee {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 12px 22px;
        border-radius: 999px;
        background: #DFF8DF;
        color: #26932D;
        font-size: var(--saas-pricing-guarantee-size);
        font-weight: 500;
        line-height: 1;
    }

    .pricing-toggle {
        display: inline-flex;
        align-items: center;
        padding: 6px;
        border-radius: 999px;
        background: #F4F4F4;
    }

    .pricing-toggle-button {
        min-width: 84px;
        padding: 12px 20px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--Neutral-80, #424242);
        font-family: Poppins, sans-serif;
        font-size: var(--saas-pricing-toggle-size);
        font-weight: 500;
        cursor: pointer;
    }

    .pricing-toggle-button.is-active {
        background: #fff;
        color: var(--Neutral-100, #212121);
        font-weight: 700;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    }

    .pricing-table {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
        border-top: var(--saas-pricing-border);
        border-left: var(--saas-pricing-border);
        background: #fff;
    }

    .pricing-plan {
        display: grid;
        grid-template-rows: auto 1fr;
        border-right: var(--saas-pricing-border);
        border-bottom: var(--saas-pricing-border);
    }

    .pricing-plan-head,
    .pricing-plan-body {
        padding: var(--saas-card-padding);
    }

    .pricing-plan-head {
        display: flex;
        flex-direction: column;
        height: 300px;
        border-bottom: var(--saas-pricing-border);
    }

    .pricing-plan-name {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        min-height: 36px;
        margin: 0 0 clamp(28px, 3vw, 46px);
        color: var(--Neutral-100, #212121);
        font-size: var(--saas-pricing-plan-name-size);
        font-weight: 600;
        line-height: 1.1;
    }

    .pricing-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        border-radius: 999px;
        background: var(--STORE2GO-Lightest, #E8F6FF);
        color: var(--Neutral-100, #212121);
        font-size: var(--saas-pricing-badge-size);
        font-weight: 700;
    }

    .pricing-badge svg {
        flex: 0 0 auto;
        width: 24px;
        height: 24px;
    }

    .pricing-plan-price {
        display: flex;
        align-items: flex-end;
        gap: 4px;
        margin-bottom: 28px;
        color: var(--Neutral-100, #212121);
        font-size: var(--saas-pricing-plan-price-size);
        font-weight: 700;
        line-height: 1.05;
    }

    .pricing-plan-price small {
        margin-bottom: 4px;
        color: var(--Neutral-80, #424242);
        font-size: var(--saas-pricing-plan-detail-size);
        font-weight: 500;
        line-height: 1.25;
    }

    .pricing-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 54px;
        border: 1.3px solid var(--Neutral-50, #BDBDBD);
        border-radius: 8px;
        background: #fff;
        color: var(--Neutral-80, #424242);
        font-size: var(--saas-pricing-button-size);
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
        margin-top: auto;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }

    .pricing-button:hover {
        border-color: var(--STORE2GO-Normal, #0071BD);
        color: var(--STORE2GO-Normal, #0071BD);
        text-decoration: none;
    }

    .pricing-button.is-primary {
        border-color: var(--STORE2GO-Normal, #0071BD);
        background: var(--STORE2GO-Normal, #0071BD);
        color: #fff;
    }

    .pricing-button.is-primary:hover {
        background: #005F9F;
        color: #fff;
    }

    .pricing-plan-body-title {
        margin: 0 0 20px;
        color: var(--Neutral-100, #212121);
        font-size: var(--saas-pricing-body-title-size);
        font-weight: 500;
        line-height: 1.3;
    }

    .pricing-plan-body-title strong {
        font-weight: 700;
    }

    .pricing-features {
        display: grid;
        gap: 18px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .pricing-feature {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        color: var(--Neutral-90, #2B2B2B);
        font-size: var(--saas-pricing-feature-size);
        font-weight: 500;
        line-height: 1.25;
    }

    .pricing-feature-icon {
        flex: 0 0 auto;
        width: 22px;
        height: 22px;
        margin-top: 2px;
        display: block;
    }

    @media screen and (max-width: 1199.98px) {
        .pricing-section {
            padding: 84px 0 96px;
        }

        .pricing-categories {
            grid-template-columns: 1fr;
            max-width: 620px;
        }

        .pricing-toolbar {
            align-items: flex-start;
            flex-direction: column;
            margin-bottom: 36px;
        }

    }

    @media screen and (max-width: 991.98px) {
        .hero-content {
            left: 0;
            width: min(72%, 640px);
            max-width: 100%;
        }

        .hero-title {
            line-height: 1.22;
            margin-bottom: 12px;
        }

        .hero-subtitle {
            margin-bottom: 28px;
            line-height: 1.35;
        }

        .hero-button {
            width: clamp(200px, 32vw, 280px);
            min-height: 56px;
            padding: 14px 36px;
        }

        .products-section {
            padding-top: 32px;
        }

        .products-layout {
            row-gap: 36px;
        }

        .products-sticky-col,
        .products-list {
            width: 100%;
            padding-right: 0;
            padding-left: 0;
        }

        .products-sticky {
            position: static;
            width: 100%;
            padding-right: 0;
        }

        .products-sticky::after {
            display: none;
        }

        .products-heading,
        .products-intro,
        .products-ecosystem-image {
            max-width: none;
        }

        .product-item.is-open .product-panel {
            grid-template-columns: 1fr;
            gap: 24px;
        }

        .operational-impact-section {
            padding: 72px 0 40px;
        }

        .impact-carousel {
            grid-template-columns: 54px minmax(0, 1fr) 54px;
            gap: 18px;
        }

        .impact-track {
            gap: 24px;
            min-height: 440px;
        }

        .impact-card {
            width: min(100%, 220px);
        }

        .impact-card.is-active {
            width: min(100%, 300px);
            min-height: 430px;
            padding: 32px 22px;
        }

        .impact-card.is-prev {
            --impact-x: calc(-1 * clamp(180px, 30vw, 250px));
        }

        .impact-card.is-next {
            --impact-x: clamp(180px, 30vw, 250px);
        }

        .impact-card.is-off-left {
            --impact-x: calc(-1 * clamp(340px, 58vw, 500px));
        }

        .impact-card.is-off-right {
            --impact-x: clamp(340px, 58vw, 500px);
        }

        .impact-icon {
            width: 110px;
            height: 110px;
        }

        .impact-card.is-active .impact-icon {
            width: 140px;
            height: 140px;
        }

    }

    @media screen and (max-width: 575.98px) {
        #home-banner {
            left: 50%;
            width: auto;
            min-width: 100%;
            height: 100%;
            transform: translateX(-50%);
        }

        .hero-content {
            top: 50%;
            width: 100%;
        }

        .hero-button {
            width: clamp(180px, 62vw, 240px);
            min-height: 50px;
            padding: 12px 28px;
            border-radius: 12px;
        }

        .products-section {
            padding: 28px 0 64px;
        }

        .product-toggle {
            min-height: 88px;
        }

        .product-copy li {
            padding-left: 28px;
        }

        .operational-impact-section {
            padding: 56px 0 32px;
        }

        .operational-impact-header {
            margin-bottom: 32px;
        }

        .impact-carousel {
            grid-template-columns: 42px minmax(0, 1fr) 42px;
            gap: 8px;
        }

        .impact-track {
            min-height: 410px;
        }

        .impact-card.is-prev,
        .impact-card.is-next {
            opacity: 0;
        }

        .impact-card.is-active {
            width: min(100%, 280px);
            min-height: 390px;
            padding: 28px 20px;
        }

        .impact-card.is-prev {
            --impact-x: -120%;
        }

        .impact-card.is-next {
            --impact-x: 120%;
        }

        .impact-card.is-off-left {
            --impact-x: -180%;
        }

        .impact-card.is-off-right {
            --impact-x: 180%;
        }

        .impact-nav {
            width: 42px;
            height: 42px;
            border-width: 3px;
        }

        .impact-nav svg {
            width: 23px;
            height: 23px;
        }

        .pricing-section {
            padding: 64px 0 72px;
        }

        .pricing-header {
            margin-bottom: 28px;
        }

        .pricing-category {
            gap: 14px;
            min-height: 76px;
            padding: 16px;
        }

        .pricing-category-icon {
            width: 28px;
            height: 28px;
        }

        .pricing-guarantee {
            width: 100%;
            justify-content: center;
            padding: 12px 16px;
        }

        .pricing-toggle {
            width: 100%;
        }

        .pricing-toggle-button {
            flex: 1;
            min-width: 0;
            padding: 11px 12px;
        }

        .pricing-plan-head,
        .pricing-plan-body {
            padding: 28px 20px;
        }

        .pricing-plan-head {
            height: auto;
            min-height: 260px;
        }

        .pricing-plan-name {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 28px;
        }

        .pricing-badge svg {
            width: 20px;
            height: 20px;
        }

        .pricing-plan-price {
            display: block;
            line-height: 1.1;
        }

        .pricing-plan-price small {
            display: block;
            margin-top: 6px;
            margin-bottom: 0;
        }

    }

    @media (min-width: 992px) {
        .operational-impact-title,
        .pricing-title {
            line-height: 1.18;
        }

        .operational-impact-description,
        .pricing-description {
            line-height: 1.35;
        }
    }

/* Fluid page layout ------------------------------------------------------- */

/* Keep every Bootstrap row child shrinkable inside the eCommerce-sized shell. */
.products-layout > *,
.product-panel > *,
.impact-carousel > * {
    min-width: 0;
}

.products-ecosystem-image,
.product-image {
    height: auto;
    max-width: 100%;
}

.impact-carousel {
    grid-template-columns:
        clamp(42px, 4.2vw, 64px)
        minmax(0, 1fr)
        clamp(42px, 4.2vw, 64px);
    gap: clamp(8px, 2.5vw, 42px);
}

@media screen and (min-width: 768px) and (max-width: 991.98px) {
    /* Follow eCommerce's stacked tablet layout while keeping artwork bounded. */
    .products-ecosystem-image {
        width: min(100%, 430px);
        margin-inline: auto;
    }

    .impact-track {
        min-height: clamp(430px, 51vw, 470px);
    }

    .impact-card {
        width: min(100%, clamp(200px, 25vw, 230px));
    }

    .impact-card.is-active {
        width: min(100%, clamp(280px, 34vw, 320px));
        min-height: clamp(410px, 47vw, 450px);
        padding: clamp(28px, 3.4vw, 34px) clamp(20px, 2.6vw, 26px);
    }

    .impact-card.is-prev {
        --impact-x: calc(-1 * clamp(170px, 25vw, 235px));
    }

    .impact-card.is-next {
        --impact-x: clamp(170px, 25vw, 235px);
    }

    .impact-card.is-off-left {
        --impact-x: calc(-1 * clamp(330px, 49vw, 470px));
    }

    .impact-card.is-off-right {
        --impact-x: clamp(330px, 49vw, 470px);
    }
}

@media screen and (min-width: 992px) {
    /* Keep the active impact card and controls proportional at desktop zoom levels. */
    .operational-impact-section {
        padding-bottom: clamp(20px, 1.7vw, 28px);
    }

    .operational-impact-header {
        margin-bottom: clamp(28px, 2vw, 36px);
    }

    .impact-track {
        min-height: clamp(340px, 23vw, 370px);
    }

    .impact-card.is-active {
        width: min(100%, clamp(300px, 22vw, 340px));
        min-height: clamp(340px, 23vw, 370px);
        padding: clamp(20px, 1.5vw, 24px) clamp(20px, 1.5vw, 24px);
    }

    .impact-card.is-active .impact-icon {
        width: clamp(130px, 9vw, 150px);
        height: clamp(130px, 9vw, 150px);
        margin-bottom: clamp(20px, 1.5vw, 24px);
    }

    .impact-nav {
        width: clamp(44px, 2.6vw, 46px);
        height: clamp(44px, 2.6vw, 46px);
        justify-self: center;
        border-width: 3px;
    }

    .impact-nav svg {
        width: clamp(18px, 1.3vw, 22px);
        height: clamp(18px, 1.3vw, 22px);
    }

    /* Replace rigid percentage columns and doubled padding with a fluid grid. */
    .products-layout {
        display: grid;
        grid-template-columns: clamp(220px, 24vw, 350px) minmax(0, 1fr);
        column-gap: clamp(28px, 3.4vw, 52px);
    }

    .products-sticky-col,
    .products-list {
        width: auto;
        padding-right: 0;
        padding-left: 0;
    }

    .products-sticky {
        width: 100%;
        padding-right: 0;
    }

    .products-sticky::after {
        right: calc(-0.5 * clamp(28px, 3.4vw, 52px));
    }

    .product-item.is-open .product-panel {
        grid-template-columns: minmax(240px, 1fr) minmax(260px, 0.98fr);
    }
}