/* ERP page-specific styles.
   Shared shell classes (.page, .page-container, .page-layout, .page-main,
   .page-header, .page-eyebrow, .page-title, .page-description,
   .page-section, .page-section-title) are intentionally owned by site.css. */

.e-page {
    --e-ink: #303638;
    --e-primary: #159fca;
    --e-primary-dark: #087aa1;
    --e-accent: #22c9df;
    --e-text: #58676d;
    --e-muted: #819096;
    --e-border: #dce7ea;
    --e-soft: #f5fafb;
    --e-ease: cubic-bezier(.22, 1, .36, 1);
    --e-shadow: 0 18px 48px rgba(38,54,58,.075);
    --e-shadow-hover: 0 22px 48px rgba(38,54,58,.13);
}

    /* Header additions */
    .e-page .e-head {
        background: radial-gradient(circle at 88% 0, rgba(34,201,223,.16), transparent 31%), linear-gradient(135deg, #fff 0%, #f5fafb 100%);
    }

    .e-page .e-text {
        max-width: 900px;
        margin: 0 0 14px;
        color: var(--e-text);
        font-size: 16px;
        line-height: 1.8;
    }

        .e-page .e-text strong {
            color: var(--e-ink);
        }

    .e-page .e-actions {
        margin-top: 24px;
    }

    .e-page .e-btn,
    .e-page .e-side-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--e-primary);
        border-radius: 9px;
        color: #fff;
        background: linear-gradient(135deg, var(--e-primary), var(--e-primary-dark));
        text-decoration: none;
        box-shadow: 0 8px 20px rgba(21,159,202,.16);
        transition: transform .28s var(--e-ease), border-color .28s ease, box-shadow .28s ease, background .28s ease;
    }

    .e-page .e-btn {
        min-height: 46px;
        padding: 11px 20px;
        font-size: 14px;
        font-weight: 700;
    }

        .e-page .e-btn:hover,
        .e-page .e-btn:focus-visible,
        .e-page .e-side-btn:hover,
        .e-page .e-side-btn:focus-visible {
            transform: translateY(-3px);
            border-color: var(--e-primary-dark);
            color: #fff;
            background: linear-gradient(135deg, var(--e-primary-dark), var(--e-primary));
            box-shadow: 0 14px 28px rgba(21,159,202,.22);
        }

    /* Section content */
    .e-page .e-sec-head {
        margin-bottom: 24px;
    }

    .e-page .e-eye {
        display: inline-block;
        margin-bottom: 10px;
        color: var(--e-primary);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .14em;
        line-height: 1.3;
    }

    .e-page .e-intro {
        max-width: 900px;
        margin: 0 0 14px;
        color: var(--e-text);
        font-size: 15px;
        line-height: 1.78;
    }

    .e-page .e-note {
        margin: 22px 0 0;
        padding: 13px 17px;
        border: 1px solid var(--e-border);
        border-radius: 10px;
        color: var(--e-primary-dark);
        background: #eefafd;
        font-size: 14px;
        line-height: 1.6;
    }

    /* Grids */
    .e-page .e-checks,
    .e-page .e-services,
    .e-page .e-process,
    .e-page .e-grid4,
    .e-page .e-grid3 {
        display: grid;
        gap: 15px;
    }

    .e-page .e-checks,
    .e-page .e-grid4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .e-page .e-services,
    .e-page .e-process {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .e-page .e-grid3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .e-page .e-check,
    .e-page .e-card,
    .e-page .e-step,
    .e-page .e-value,
    .e-page .e-mini {
        min-width: 0;
        border: 1px solid var(--e-border);
        border-radius: 15px;
        background: #fff;
        transition: transform .3s var(--e-ease), border-color .3s ease, box-shadow .3s ease;
    }

        .e-page .e-check:hover,
        .e-page .e-card:hover,
        .e-page .e-step:hover,
        .e-page .e-value:hover,
        .e-page .e-mini:hover {
            transform: translateY(-4px);
            border-color: #b9dfe6;
            box-shadow: var(--e-shadow-hover);
        }

    .e-page .e-check {
        padding: 14px 15px;
        color: var(--e-ink);
        font-size: 13px;
        font-weight: 650;
        line-height: 1.5;
    }

        .e-page .e-check::before {
            display: inline-grid;
            width: 21px;
            height: 21px;
            margin-right: 8px;
            place-items: center;
            border-radius: 50%;
            color: var(--e-primary);
            background: #e9fafd;
            content: "✓";
            font-size: 12px;
            font-weight: 800;
        }

    .e-page .e-card,
    .e-page .e-mini {
        position: relative;
        padding: 22px;
    }

        .e-page .e-card h3,
        .e-page .e-value h3,
        .e-page .e-mini h3 {
            margin: 0 0 10px;
            color: var(--e-ink);
            font-size: 19px;
            font-weight: 700;
            line-height: 1.35;
        }

        .e-page .e-card p,
        .e-page .e-step p,
        .e-page .e-value p,
        .e-page .e-mini p {
            margin: 0;
            color: var(--e-text);
            font-size: 14px;
            line-height: 1.75;
        }

    .e-page .e-num,
    .e-page .e-step > span {
        display: inline-grid;
        width: 32px;
        height: 32px;
        place-items: center;
        border-radius: 9px;
        color: var(--e-primary);
        background: #e9fafd;
        font-size: 11px;
        font-weight: 800;
    }

    .e-page .e-num {
        margin-bottom: 13px;
    }

    .e-page .e-value {
        position: relative;
        padding: 20px 17px;
    }

        .e-page .e-value h3,
        .e-page .e-mini h3,
        .e-page .e-step h3 {
            font-size: 16px;
        }

        .e-page .e-value p,
        .e-page .e-mini p {
            font-size: 13px;
        }

    .e-page .e-step {
        display: flex;
        gap: 14px;
        padding: 20px 18px;
    }

        .e-page .e-step > span {
            flex: 0 0 32px;
        }

        .e-page .e-step h3 {
            margin: 2px 0 7px;
            color: var(--e-ink);
            line-height: 1.35;
        }

    /* Deployment */
    .e-page .e-feature {
        background: #f7fbfc;
    }

    .e-page .e-acc {
        margin-top: 22px;
    }

    .e-page .e-acc-item {
        margin-bottom: 10px;
        overflow: hidden;
        border: 1px solid var(--e-border);
        border-radius: 10px;
        background: #fff;
    }

        .e-page .e-acc-item .accordion-header {
            margin: 0;
        }

        .e-page .e-acc-item .accordion-button {
            gap: 12px;
            padding: 15px 18px;
            color: var(--e-ink);
            background: #fff;
            box-shadow: none;
            font-size: 15px;
            font-weight: 700;
        }

            .e-page .e-acc-item .accordion-button:not(.collapsed),
            .e-page .e-acc-item .accordion-button:hover {
                color: var(--e-primary-dark);
                background: #eefafd;
            }

            .e-page .e-acc-item .accordion-button:focus {
                border-color: transparent;
                box-shadow: 0 0 0 3px rgba(21,159,202,.14);
            }

    .e-page .e-acc-num {
        color: var(--e-primary);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .08em;
    }

    .e-page .e-acc-item .accordion-body {
        padding: 0 48px 17px;
        color: var(--e-text);
        font-size: 14px;
        line-height: 1.7;
    }

    /* Sidebar */
    .e-page .e-side {
        position: sticky;
        top: 105px;
        z-index: 10;
        align-self: start;
        overflow: visible;
        max-height: none;
        border: 1px solid #d5e3e7;
        border-radius: 22px;
        background: #ffffff;
        box-shadow: 0 18px 55px rgba(38,54,58,.09);
        transition: transform .35s var(--e-ease), border-color .35s ease, box-shadow .35s ease;
    }

        .e-page .e-side:hover {
            transform: translateY(-4px);
            border-color: #b8dce3;
            box-shadow: 0 24px 65px rgba(38,54,58,.13), 0 8px 24px rgba(21,159,202,.08);
        }


    .e-page .e-hire {
        position: relative;
        z-index: 1;
        overflow: hidden;
        border-radius: 22px 22px 0 0;
        border-bottom: 1px solid #d7e8eb;
        background: #ffffff;
    }

        .e-page .e-hire::before {
            content: "";
            position: absolute;
            z-index: 5;
            top: 0;
            left: -55%;
            width: 32%;
            height: 115px;
            pointer-events: none;
            opacity: 0;
            transform: skewX(-20deg);
            background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.04) 18%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.05) 82%, transparent 100%);
        }

    .e-page .e-side:hover .e-hire::before {
        opacity: 1;
        animation: eHireShine .85s var(--e-ease) forwards;
    }


    .e-page .e-hire-top {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        padding: 19px 22px 21px;
        background: radial-gradient(circle at 86% 8%, rgba(34,201,223,.20), transparent 32%), linear-gradient(135deg, #30383a 0%, #145f73 52%, #159fca 100%);
        color: #ffffff;
    }

        .e-page .e-hire-top::before {
            position: absolute;
            top: 0;
            left: 22px;
            width: 64px;
            height: 4px;
            border-radius: 0 0 6px 6px;
            background: var(--e-accent);
            content: "";
        }

        .e-page .e-hire-top::after {
            content: "";
            position: absolute;
            z-index: 0;
            width: 180px;
            height: 180px;
            right: -72px;
            bottom: -115px;
            border: 1px solid rgba(255,255,255,.13);
            border-radius: 50%;
            box-shadow: 0 0 0 22px rgba(255,255,255,.025), 0 0 0 44px rgba(34,201,223,.035);
            pointer-events: none;
        }


    .e-page .e-hire-label {
        position: relative;
        z-index: 3;
        display: block;
        margin: 0 0 6px;
        color: rgba(255,255,255,.94);
        font-size: 15px;
        font-weight: 700;
        line-height: 1.3;
    }

    .e-page .e-price-row {
        position: relative;
        z-index: 3;
        display: flex;
        align-items: flex-end;
        gap: 12px;
    }

    .e-page .e-price {
        color: #ffffff;
        font-size: 44px;
        font-weight: 850;
        line-height: .9;
        letter-spacing: -.05em;
    }

    .e-page .e-unit {
        padding-bottom: 5px;
        color: rgba(255,255,255,.92);
        font-size: 10px;
        font-weight: 850;
        line-height: 1.2;
        letter-spacing: .14em;
        text-transform: uppercase;
    }

    .e-page .e-hire-benefits {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        background: radial-gradient(circle at 100% 0%, rgba(34,201,223,.09), transparent 35%), #ffffff;
    }

    .e-page .e-hire-benefit {
        position: relative;
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 11px 6px;
        text-align: center;
    }

        .e-page .e-hire-benefit + .e-hire-benefit::before {
            content: "";
            position: absolute;
            top: 20%;
            bottom: 20%;
            left: 0;
            width: 1px;
            background: #dce7ea;
        }

        .e-page .e-hire-benefit:hover .e-hire-icon {
            transform: translateY(-2px);
            border-color: #a9dce5;
            box-shadow: 0 7px 16px rgba(21,159,202,.10);
        }


    .e-page .e-hire-icon {
        display: grid;
        width: 32px;
        height: 32px;
        place-items: center;
        border: 1px solid #ccebf0;
        border-radius: 10px;
        background: #e9fafd;
        color: #087aa1;
        font-size: 14px;
        font-weight: 850;
        line-height: 1;
        transition: transform .25s var(--e-ease), border-color .25s ease, box-shadow .25s ease;
    }

    .e-page .e-hire-benefit > span {
        color: #39484d;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.35;
    }

    .e-page .e-side-body {
        padding: 18px 20px 20px;
        border-radius: 0 0 22px 22px;
        background: linear-gradient(180deg, #ffffff 0%, #f8fcfd 100%);
    }

    .e-page .e-side-eye {
        display: inline-flex;
        margin: 0 0 10px;
        padding: 5px 9px;
        border: 1px solid #c9eaf0;
        border-radius: 999px;
        color: var(--e-primary-dark);
        background: #eefafd;
        font-size: 9px;
        font-weight: 850;
        line-height: 1.3;
        letter-spacing: .13em;
    }

    .e-page .e-side-title {
        margin: 0 0 10px;
        color: var(--e-ink);
        font-size: 19px;
        font-weight: 760;
        line-height: 1.35;
    }

    .e-page .e-side-intro,
    .e-page .e-side-support {
        margin: 0 0 15px;
        color: var(--e-text);
        font-size: 13px;
        line-height: 1.62;
    }

    .e-page .e-side-body h3 {
        margin: 16px 0 9px;
        color: var(--e-ink);
        font-size: 14px;
        font-weight: 750;
        line-height: 1.35;
    }

    .e-page .e-needs {
        display: grid;
        gap: 6px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .e-page .e-needs li {
            position: relative;
            margin: 0;
            padding: 7px 9px 7px 29px;
            border: 1px solid #e0ecee;
            border-radius: 9px;
            color: #46565b;
            background: #fff;
            font-size: 12px;
            font-weight: 620;
            line-height: 1.4;
            transition: transform .25s var(--e-ease), border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
        }

            .e-page .e-needs li::before {
                position: absolute;
                top: 8px;
                left: 9px;
                display: grid;
                width: 14px;
                height: 14px;
                place-items: center;
                border-radius: 50%;
                color: var(--e-primary-dark);
                background: #e9fafd;
                content: "✓";
                font-size: 9px;
                font-weight: 900;
            }

            .e-page .e-needs li:hover {
                transform: translateX(4px);
                border-color: #b9dfe6;
                background: #f2fbfd;
                box-shadow: 0 7px 18px rgba(21,159,202,.09);
            }

    .e-page .e-side-btn {
        width: 100%;
        min-height: 42px;
        gap: 8px;
        margin-top: 14px;
        padding: 9px 14px;
        font-size: 12px;
        font-weight: 750;
    }

    .e-page .e-side-btn-label,
    .e-page .e-side-btn-arrow {
        transition: transform .25s ease;
    }

    .e-page .e-side-btn:hover .e-side-btn-label {
        transform: translateX(3px);
    }

    .e-page .e-side-btn:hover .e-side-btn-arrow {
        transform: translateX(7px);
    }

    /* Progressive reveal: visible by default; JS only enhances it. */
    .e-page.e-animate .e-check,
    .e-page.e-animate .e-card,
    .e-page.e-animate .e-value,
    .e-page.e-animate .e-step,
    .e-page.e-animate .e-mini {
        opacity: 0;
        transform: translateY(18px);
    }

        .e-page.e-animate .e-check.is-visible,
        .e-page.e-animate .e-card.is-visible,
        .e-page.e-animate .e-value.is-visible,
        .e-page.e-animate .e-step.is-visible,
        .e-page.e-animate .e-mini.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

    .e-page .e-check,
    .e-page .e-card,
    .e-page .e-value,
    .e-page .e-step,
    .e-page .e-mini {
        transition: opacity .55s var(--e-ease), transform .55s var(--e-ease), box-shadow .3s ease, border-color .3s ease;
        transition-delay: var(--animation-delay, 0ms);
    }

    .e-page.e-animate .e-check.is-visible:hover,
    .e-page.e-animate .e-card.is-visible:hover,
    .e-page.e-animate .e-value.is-visible:hover,
    .e-page.e-animate .e-step.is-visible:hover,
    .e-page.e-animate .e-mini.is-visible:hover {
        transform: translateY(-4px);
    }


@keyframes eHireShine {
    from {
        left: -55%;
    }

    to {
        left: 125%;
    }
}

/* Page-specific responsive behavior only.
   Shared horizontal page spacing remains in site.css. */
@media (max-width: 960px) {
    .e-page .e-side {
        position: static;
        top: auto;
    }

    .e-page .e-checks,
    .e-page .e-grid4,
    .e-page .e-grid3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .e-page .e-services,
    .e-page .e-process,
    .e-page .e-checks,
    .e-page .e-grid4,
    .e-page .e-grid3 {
        grid-template-columns: 1fr;
    }

    .e-page .e-card,
    .e-page .e-mini {
        padding: 19px;
    }

    .e-page .e-acc-item .accordion-body {
        padding: 0 42px 15px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .e-page .e-text {
        font-size: 15px;
    }

    .e-page .e-side {
        border-radius: 18px;
    }

    .e-page .e-side-body {
        padding: 17px;
    }

    .e-page .e-hire-top {
        padding: 18px;
    }

    .e-page .e-price {
        font-size: 40px;
    }

    .e-page .e-hire-benefit {
        padding: 10px 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .e-page .e-check,
    .e-page .e-card,
    .e-page .e-value,
    .e-page .e-step,
    .e-page .e-mini,
    .e-page .e-btn,
    .e-page .e-side-btn {
        animation: none;
        transition: none;
        transform: none;
    }

    .e-page.e-animate .e-check,
    .e-page.e-animate .e-card,
    .e-page.e-animate .e-value,
    .e-page.e-animate .e-step,
    .e-page.e-animate .e-mini {
        opacity: 1;
        transform: none;
    }
}