/* eCommerce-specific styles only. Shared .page-* styles are defined in site.css. */

#ec-page {
    --ec-cyan-soft: #e9fafd;
    --ec-shadow-hover: 0 22px 48px rgba(38,54,58,.13);
}

    #ec-page, #ec-page * {
        box-sizing: border-box;
    }

        #ec-page img {
            max-width: 100%;
            height: auto;
        }

        #ec-page p:last-child, #ec-page ul:last-child {
            margin-bottom: 0;
        }

        #ec-page img {
            max-width: 100%;
            height: auto;
        }

        #ec-page p:last-child, #ec-page ul:last-child {
            margin-bottom: 0;
        }

        #ec-page .ec-cta__eyebrow {
            display: inline-flex;
            align-items: center;
            margin: 0 0 18px;
            padding: 6px 12px;
            border: 1px solid #c9eaf0;
            border-radius: 999px;
            background: rgba(255, 255, 255, .82);
            color: var(--site-primary-dark);
            font-size: 11px;
            font-weight: 850;
            letter-spacing: .14em;
            line-height: 1.3;
            box-shadow: 0 5px 15px rgba(21, 159, 202, .06);
        }

        #ec-page .ec-intro__actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            align-items: center;
            margin-top: 25px;
        }

        #ec-page .ec-button {
            display: inline-flex;
            min-height: 48px;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 12px 19px;
            border: 1px solid transparent;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 750;
            line-height: 1.3;
            text-decoration: none;
            transition: color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .35s var(--site-ease);
        }

            #ec-page .ec-button span {
                display: inline-block;
                transition: transform .35s var(--site-ease);
            }

            #ec-page .ec-button:hover span {
                transform: translateX(4px);
            }

        #ec-page .ec-button--primary {
            color: #ffffff;
            background: linear-gradient(110deg, var(--site-primary-dark), var(--site-primary));
            box-shadow: 0 10px 22px rgba(8, 122, 161, .19);
        }

            #ec-page .ec-button--primary:hover, #ec-page .ec-button--primary:focus-visible {
                color: #ffffff;
                background: linear-gradient(110deg, #066d90, #118db6);
                box-shadow: 0 14px 26px rgba(8, 122, 161, .26);
                transform: translateY(-2px);
            }

        #ec-page .ec-button--text {
            color: var(--site-primary-dark);
            background: rgba(255, 255, 255, .75);
            border-color: #c9eaf0;
        }

            #ec-page .ec-button--text:hover, #ec-page .ec-button--text:focus-visible {
                color: var(--site-primary-dark);
                background: #ffffff;
                border-color: var(--site-accent);
                box-shadow: 0 8px 20px rgba(21, 159, 202, .1);
                transform: translateY(-2px);
            }

        #ec-page .ec-hero__caption {
            position: absolute;
            right: 18px;
            bottom: 18px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            max-width: calc(100% - 36px);
            padding: 10px 15px 10px 10px;
            border: 1px solid rgba(255, 255, 255, .72);
            border-radius: 12px;
            background: rgba(255, 255, 255, .92);
            color: var(--site-heading);
            font-size: 13px;
            font-weight: 700;
            box-shadow: 0 9px 26px rgba(34, 54, 60, .12);
            backdrop-filter: blur(8px);
        }

        #ec-page .ec-hero__caption-mark {
            display: grid;
            width: 34px;
            height: 34px;
            flex: 0 0 34px;
            place-items: center;
            border-radius: 9px;
            background: linear-gradient(135deg, var(--site-primary), var(--site-accent));
            color: #ffffff;
            font-size: 11px;
            font-weight: 850;
        }

        #ec-page .ec-overview {
            background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%);
        }

        #ec-page .ec-block__lead, #ec-page .page-section > p:not(.ec-note) {
            margin: 0 0 22px;
            color: #62747a;
            font-size: 16px;
            line-height: 1.8;
        }

        #ec-page h3 {
            color: var(--site-heading);
        }

        #ec-page .ec-cards {
            display: grid;
            gap: 16px;
            margin-top: 25px;
        }

        #ec-page .ec-cards--three {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        #ec-page .ec-cards--two {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        #ec-page .ec-card, #ec-page .ec-svc, #ec-page .ec-feature, #ec-page .ec-step, #ec-page .ec-why__item {
            transition: transform .4s var(--site-ease), box-shadow .4s var(--site-ease), border-color .3s ease, background .3s ease;
        }

        #ec-page .ec-card {
            position: relative;
            min-height: 205px;
            padding: 23px 22px 21px;
            overflow: hidden;
            border: 1px solid var(--site-border);
            border-radius: 15px;
            background: linear-gradient(145deg, #ffffff, #f8fbfc);
        }

            #ec-page .ec-card::after {
                content: "";
                position: absolute;
                right: -30px;
                bottom: -44px;
                width: 105px;
                height: 105px;
                border: 1px solid rgba(34, 201, 223, .17);
                border-radius: 50%;
                box-shadow: 0 0 0 14px rgba(34, 201, 223, .035);
                transition: transform .5s var(--site-ease);
            }

            #ec-page .ec-card:hover, #ec-page .ec-svc:hover, #ec-page .ec-feature:hover, #ec-page .ec-step:hover, #ec-page .ec-why__item:hover {
                transform: translateY(-5px);
                border-color: #b9e6ed;
                box-shadow: 0 16px 30px rgba(38, 54, 58, .09);
            }

                #ec-page .ec-card:hover::after {
                    transform: scale(1.15);
                }

        #ec-page .ec-card__number, #ec-page .ec-step__number, #ec-page .ec-why__number {
            display: inline-grid;
            width: 42px;
            height: 42px;
            place-items: center;
            margin-bottom: 15px;
            border: 1px solid #c9eaf0;
            border-radius: 12px;
            background: var(--ec-cyan-soft);
            color: var(--site-primary-dark);
            font-size: 12px;
            font-weight: 850;
            letter-spacing: .04em;
        }

        #ec-page .ec-card h3, #ec-page .ec-svc h3, #ec-page .ec-feature h3, #ec-page .ec-step h3, #ec-page .ec-why__item h3 {
            margin: 0 0 9px;
            font-size: 17px;
            font-weight: 740;
            line-height: 1.35;
        }

        #ec-page .ec-card p, #ec-page .ec-svc p, #ec-page .ec-feature p, #ec-page .ec-step p, #ec-page .ec-why__item p {
            margin: 0;
            color: #65777d;
            font-size: 14px;
            line-height: 1.72;
        }

        #ec-page .ec-svc {
            display: grid;
            grid-template-columns: 58px minmax(0, 1fr);
            gap: 17px;
            align-items: start;
            min-height: 160px;
            padding: 22px;
            border: 1px solid var(--site-border);
            border-radius: 15px;
            background: #ffffff;
            box-shadow: 0 8px 22px rgba(38, 54, 58, .035);
        }

        #ec-page .ec-svc__icon {
            display: grid;
            width: 58px;
            height: 58px;
            place-items: center;
            border: 1px solid #c5e8ee;
            border-radius: 15px;
            background: linear-gradient(145deg, #eafafd, #f6fdfe);
            color: var(--site-primary-dark);
            font-size: 12px;
            font-weight: 850;
            letter-spacing: .02em;
            box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .7);
            transition: color .3s ease, background .3s ease, transform .4s var(--site-ease);
        }

        #ec-page .ec-svc:hover .ec-svc__icon {
            color: #ffffff;
            background: linear-gradient(135deg, var(--site-primary-dark), var(--site-accent));
            transform: rotate(-4deg) scale(1.05);
        }

        #ec-page .ec-feature-area {
            background: linear-gradient(180deg, #f8fcfd 0%, #ffffff 100%);
        }

        #ec-page .ec-features {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
            margin-top: 23px;
        }

        #ec-page .ec-feature {
            display: flex;
            gap: 13px;
            align-items: flex-start;
            padding: 17px 18px;
            border: 1px solid #e2edef;
            border-radius: 13px;
            background: #ffffff;
        }

        #ec-page .ec-feature__mark {
            display: grid;
            width: 28px;
            height: 28px;
            flex: 0 0 28px;
            place-items: center;
            border-radius: 8px;
            background: #e5f8fb;
            color: var(--site-primary-dark);
            font-size: 14px;
            font-weight: 900;
        }

        #ec-page .ec-feature h3 {
            margin-bottom: 5px;
            font-size: 15px;
        }

        #ec-page .ec-feature p {
            font-size: 13px;
        }

        #ec-page .ec-note {
            margin: 19px 0 0;
            padding: 13px 16px;
            border-left: 3px solid var(--site-accent);
            border-radius: 0 10px 10px 0;
            background: #f1fafb;
            color: #61747a;
            font-size: 13px;
            line-height: 1.65;
        }

        #ec-page .ec-process-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
            margin-top: 25px;
        }

        #ec-page .ec-step {
            position: relative;
            min-height: 180px;
            padding: 20px 20px 19px;
            border: 1px solid var(--site-border);
            border-radius: 15px;
            background: #ffffff;
        }

        #ec-page .ec-step__number {
            width: 38px;
            height: 38px;
            margin-bottom: 13px;
            background: linear-gradient(135deg, var(--site-primary-dark), var(--site-primary));
            color: #ffffff;
            border: 0;
        }

        #ec-page .ec-why {
            background: linear-gradient(145deg, #f6fbfc, #ffffff 72%);
        }

        #ec-page .ec-why__list {
            display: grid;
            gap: 12px;
            margin-top: 23px;
        }

        #ec-page .ec-why__item {
            display: grid;
            grid-template-columns: 42px minmax(0, 1fr);
            gap: 15px;
            align-items: start;
            padding: 17px 19px;
            border: 1px solid var(--site-border);
            border-radius: 13px;
            background: rgba(255, 255, 255, .88);
        }

        #ec-page .ec-why__number {
            width: 38px;
            height: 38px;
            margin: 0;
            border-radius: 11px;
        }

        #ec-page .ec-faq__accordion {
            display: grid;
            gap: 11px;
            margin-top: 22px;
        }

        #ec-page .ec-faq__item {
            overflow: hidden;
            border: 1px solid var(--site-border);
            border-radius: 13px !important;
            background: #ffffff;
            box-shadow: 0 7px 20px rgba(38, 54, 58, .035);
        }

            #ec-page .ec-faq__item .accordion-header {
                margin: 0;
            }

            #ec-page .ec-faq__item .accordion-button {
                gap: 16px;
                padding: 18px 20px;
                color: var(--site-heading);
                background: #ffffff;
                font-size: 15px;
                font-weight: 720;
                line-height: 1.5;
                box-shadow: none;
            }

                #ec-page .ec-faq__item .accordion-button::after {
                    width: 28px;
                    height: 28px;
                    flex: 0 0 28px;
                    border: 1px solid #c9eaf0;
                    border-radius: 50%;
                    background-color: #eafafd;
                    background-position: center;
                    background-size: 11px;
                }

                #ec-page .ec-faq__item .accordion-button:not(.collapsed) {
                    color: var(--site-primary-dark);
                    background: linear-gradient(90deg, #f2fbfc, #ffffff 70%);
                }

            #ec-page .ec-faq__item .accordion-body {
                padding: 0 20px 19px;
                color: #65777d;
                font-size: 14px;
                line-height: 1.75;
            }

        #ec-page .ec-cta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 22px;
            margin: 12px 28px 30px;
            padding: 27px 29px;
            border: 1px solid #c8eaf0;
            border-radius: 17px;
            background: radial-gradient(circle at 90% 0%, rgba(34, 201, 223, .22), transparent 30%), linear-gradient(120deg, #eafafd, #f7fcfd 66%, #ffffff);
        }

        #ec-page .ec-cta__eyebrow {
            margin-bottom: 10px;
            padding: 0;
            border: 0;
            background: transparent;
            box-shadow: none;
        }

        #ec-page .ec-cta h2 {
            margin: 0 0 8px;
            color: var(--site-heading);
            font-size: clamp(22px, 2vw, 28px);
            font-weight: 760;
            line-height: 1.25;
        }

        #ec-page .ec-cta p {
            max-width: 650px;
            margin: 0;
            color: #61747a;
            font-size: 14px;
            line-height: 1.7;
        }

        #ec-page .ec-button--light {
            flex: 0 0 auto;
            color: #ffffff;
            background: linear-gradient(110deg, var(--site-primary-dark), var(--site-primary));
            box-shadow: 0 10px 22px rgba(8, 122, 161, .19);
        }

            #ec-page .ec-button--light:hover, #ec-page .ec-button--light:focus-visible {
                color: #ffffff;
                box-shadow: 0 14px 26px rgba(8, 122, 161, .27);
                transform: translateY(-2px);
            }

        #ec-page .ec-sidebar {
            position: sticky;
            top: 22px;
            display: grid;
            gap: 17px;
            align-self: start;
        }

        #ec-page .ec-side-overview, #ec-page .ec-side-nav, #ec-page .ec-side-note {
            overflow: hidden;
            border: 1px solid var(--site-border);
            border-radius: 19px;
            background: #ffffff;
            box-shadow: var(--site-shadow);
        }

        #ec-page .ec-side-overview {
            position: relative;
            padding: 23px 22px 21px;
            background: radial-gradient(circle at 100% 0%, rgba(34, 201, 223, .19), transparent 38%), linear-gradient(145deg, #ffffff, #f5fbfc);
        }

            #ec-page .ec-side-overview::before {
                content: "";
                position: absolute;
                top: 0;
                left: 22px;
                width: 56px;
                height: 4px;
                border-radius: 0 0 5px 5px;
                background: linear-gradient(90deg, var(--site-primary), var(--site-accent));
            }

        #ec-page .ec-side-eyebrow {
            display: block;
            margin: 4px 0 11px;
            color: var(--site-primary-dark);
            font-size: 10px;
            font-weight: 850;
            letter-spacing: .14em;
        }

        #ec-page .ec-side-overview h2, #ec-page .ec-side-nav h2, #ec-page .ec-side-note h2 {
            margin: 0 0 10px;
            color: var(--site-heading);
            font-size: 19px;
            font-weight: 760;
            line-height: 1.35;
        }

        #ec-page .ec-side-overview p, #ec-page .ec-side-note p {
            margin: 0 0 15px;
            color: #687a80;
            font-size: 13px;
            line-height: 1.7;
        }

        #ec-page .ec-side-overview ul {
            display: grid;
            gap: 10px;
            margin: 0 0 19px;
            padding: 0;
            list-style: none;
        }

        #ec-page .ec-side-overview li {
            display: flex;
            align-items: center;
            gap: 9px;
            color: #43565d;
            font-size: 13px;
            font-weight: 650;
            line-height: 1.45;
        }

            #ec-page .ec-side-overview li span {
                display: grid;
                width: 22px;
                height: 22px;
                flex: 0 0 22px;
                place-items: center;
                border-radius: 7px;
                background: #e2f7fa;
                color: var(--site-primary-dark);
                font-size: 12px;
                font-weight: 900;
            }

        #ec-page .ec-side-button {
            display: flex;
            min-height: 46px;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 11px 14px;
            border-radius: 10px;
            background: linear-gradient(110deg, var(--site-primary-dark), var(--site-primary));
            color: #ffffff;
            font-size: 13px;
            font-weight: 750;
            text-decoration: none;
            box-shadow: 0 9px 20px rgba(8, 122, 161, .16);
            transition: transform .35s var(--site-ease), box-shadow .3s ease, background .3s ease;
        }

            #ec-page .ec-side-button span {
                transition: transform .35s var(--site-ease);
            }

            #ec-page .ec-side-button:hover, #ec-page .ec-side-button:focus-visible {
                color: #ffffff;
                transform: translateY(-2px);
                box-shadow: 0 13px 24px rgba(8, 122, 161, .25);
            }

                #ec-page .ec-side-button:hover span {
                    transform: translateX(4px);
                }

        #ec-page .ec-side-nav {
            padding: 21px 18px 17px;
        }

            #ec-page .ec-side-nav h2 {
                margin: 0 0 12px;
                padding: 0 4px 12px;
                border-bottom: 1px solid #e7eff0;
                font-size: 17px;
            }

            #ec-page .ec-side-nav a {
                position: relative;
                display: flex;
                min-height: 43px;
                align-items: center;
                gap: 10px;
                overflow: hidden;
                padding: 9px 8px;
                border-radius: 9px;
                color: #53666c;
                font-size: 12px;
                font-weight: 650;
                line-height: 1.4;
                text-decoration: none;
                transition: color .25s ease, background .25s ease, padding .35s var(--site-ease);
            }

                #ec-page .ec-side-nav a::before {
                    content: "";
                    position: absolute;
                    z-index: 0;
                    inset: 0 auto 0 0;
                    width: 3px;
                    border-radius: 4px;
                    background: linear-gradient(180deg, var(--site-primary), var(--site-accent));
                    transform: scaleY(0);
                    transform-origin: center;
                    transition: transform .35s var(--site-ease);
                }

                #ec-page .ec-side-nav a:hover, #ec-page .ec-side-nav a:focus-visible {
                    padding-left: 14px;
                    color: var(--site-primary-dark);
                    background: #effafd;
                }

                    #ec-page .ec-side-nav a:hover::before, #ec-page .ec-side-nav a:focus-visible::before {
                        transform: scaleY(1);
                    }

                #ec-page .ec-side-nav a span {
                    flex: 0 0 22px;
                    color: #1499bc;
                    font-size: 10px;
                    font-weight: 850;
                }

        #ec-page .ec-side-note {
            position: relative;
            padding: 20px 19px 19px;
            background: linear-gradient(145deg, #eafafd, #ffffff 78%);
        }

        #ec-page .ec-side-note-icon {
            display: grid;
            width: 32px;
            height: 32px;
            place-items: center;
            margin-bottom: 11px;
            border: 1px solid #bce6ed;
            border-radius: 50%;
            background: #ffffff;
            color: var(--site-primary-dark);
            font-size: 15px;
            font-weight: 800;
        }

        #ec-page .ec-side-note h2 {
            font-size: 16px;
        }

        #ec-page .ec-side-note p {
            margin: 0;
            font-size: 12px;
        }

        #ec-page .ec-reveal {
            opacity: 0;
            transform: translateY(24px);
            transition: opacity .65s ease var(--animation-delay, 0ms), transform .65s var(--site-ease) var(--animation-delay, 0ms);
        }

            #ec-page .ec-reveal.is-visible {
                opacity: 1;
                transform: translateY(0);
            }

@keyframes ecommerceFadeUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

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

@keyframes ecommerceTitleIn {
    from {
        opacity: 0;
        transform: translateY(13px);
    }

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

@keyframes ecommerceTextIn {
    from {
        opacity: 0;
        transform: translateY(9px);
    }

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

@media (max-width: 900px) {
    #ec-page .ec-sidebar {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #ec-page .ec-side-overview {
        grid-row: span 2;
    }

    #ec-page .ec-cards--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    #ec-page .ec-intro__actions {
        align-items: stretch;
    }

    #ec-page .ec-button {
        width: 100%;
        min-height: 47px;
        font-size: 13px;
    }

    #ec-page .ec-hero__caption {
        right: 10px;
        bottom: 10px;
        gap: 8px;
        max-width: calc(100% - 20px);
        padding: 8px 10px 8px 8px;
        font-size: 11px;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #ec-page .ec-hero__caption-mark {
        width: 29px;
        height: 29px;
        flex-basis: 29px;
    }

    #ec-page .ec-block__lead, #ec-page .page-section > p:not(.ec-note) {
        font-size: 14px;
        line-height: 1.75;
    }

    #ec-page .ec-cards--three, #ec-page .ec-cards--two, #ec-page .ec-features, #ec-page .ec-process-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    #ec-page .ec-sidebar, #ec-page .ec-card, #ec-page .ec-svc, #ec-page .ec-feature, #ec-page .ec-step, #ec-page .ec-why__item, #ec-page .ec-faq__item, #ec-page .ec-cta {
        min-width: 0;
        max-width: 100%;
    }

        #ec-page .ec-block__lead, #ec-page .page-section > p:not(.ec-note), #ec-page .ec-card h3, #ec-page .ec-card p, #ec-page .ec-svc h3, #ec-page .ec-svc p, #ec-page .ec-feature h3, #ec-page .ec-feature p, #ec-page .ec-step h3, #ec-page .ec-step p, #ec-page .ec-why__item h3, #ec-page .ec-why__item p, #ec-page .ec-faq__item .accordion-button, #ec-page .ec-faq__item .accordion-body, #ec-page .ec-sidebar a, #ec-page .ec-sidebar p {
            overflow-wrap: anywhere;
        }

    #ec-page .ec-card {
        min-height: 0;
    }

    #ec-page .ec-svc {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 13px;
        min-height: 0;
        padding: 17px;
    }

    #ec-page .ec-why__item {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 12px;
        padding: 15px;
    }

    #ec-page .ec-svc__icon {
        width: 48px;
        height: 48px;
        border-radius: 13px;
        font-size: 10px;
    }

    #ec-page .ec-step {
        min-height: 0;
    }

    #ec-page .ec-faq__item .accordion-button {
        padding: 15px 15px;
        font-size: 14px;
    }

    #ec-page .ec-faq__item .accordion-body {
        padding: 0 15px 16px;
        font-size: 13px;
    }

    #ec-page .ec-cta {
        align-items: stretch;
        flex-direction: column;
        margin: 3px 15px 19px;
        padding: 21px 18px;
    }

        #ec-page .ec-cta h2 {
            font-size: 23px;
        }

    #ec-page .ec-sidebar {
        grid-template-columns: minmax(0, 1fr);
    }

    #ec-page .ec-side-overview {
        grid-row: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    #ec-page *::before, #ec-page *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

#ec-page .ec-sidebar {
    min-width: 0;
}

@media (max-width:960px) {
    #ec-page .ec-sidebar {
        position: static;
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width:620px) {
    #ec-page .ec-sidebar {
        grid-template-columns: minmax(0,1fr);
    }

    #ec-page .ec-side-overview {
        grid-row: auto;
    }

    #ec-page .ec-cards--two, #ec-page .ec-cards--three, #ec-page .ec-features, #ec-page .ec-process-grid {
        grid-template-columns: minmax(0,1fr);
    }
}

@media (prefers-reduced-motion:reduce) {
    #ec-page *::before, #ec-page *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }

    #ec-page .ec-reveal {
        opacity: 1;
        transform: none;
    }
}