/* =========================================================
           PREMIUM PRICING / PLANNING PAGE
           Bootstrap-first + scoped custom styling
        ========================================================= */

        :root {
            --pricing-primary: #5ea3d8;
            --pricing-primary-dark: #367eaf;
            --pricing-primary-soft: #eef7fd;
            --pricing-primary-soft-2: #f5faff;

            --pricing-navy: #102c46;
            --pricing-navy-2: #173b5b;
            --pricing-text: #183246;
            --pricing-muted: #6d7d8d;

            --pricing-border: #dfeaf2;
            --pricing-bg: #f6faff;
            --pricing-white: #ffffff;

            --pricing-shadow-sm: 0 8px 25px rgba(16, 44, 70, 0.06);
            --pricing-shadow-md: 0 18px 50px rgba(16, 44, 70, 0.09);
            --pricing-shadow-lg: 0 25px 70px rgba(16, 44, 70, 0.12);
        }


        /* =========================================================
           PAGE
        ========================================================= */

        .pricing-page {
            position: relative;
            background:
                radial-gradient(
                    circle at 10% 0%,
                    rgba(94, 163, 216, 0.11),
                    transparent 28%
                ),
                linear-gradient(
                    180deg,
                    #f8fbfe 0%,
                    #f4f9fd 48%,
                    #ffffff 100%
                );
            overflow-x: clip;
        }

        .pricing-container {
            position: relative;
            z-index: 1;
            min-width: 0;
        }


        /* =========================================================
           TYPOGRAPHY
        ========================================================= */

        .pricing-eyebrow {
            color: var(--pricing-primary-dark);
            letter-spacing: .16em;
            font-size: .74rem;
            font-weight: 800;
            text-transform: uppercase;
        }

        .pricing-title {
            color: var(--pricing-navy);
            font-size: clamp(2rem, 4vw, 2.5rem);
            line-height: 1.08;
            letter-spacing: -.035em;
            font-weight: 600;
            margin-bottom: 1rem;
        }

        .pricing-title .highlight {
            color: var(--pricing-primary-dark);
        }

        .pricing-intro {
            max-width: 700px;
            color: var(--pricing-muted);
            font-size: 1.05rem;
            line-height: 1.75;
        }


        /* =========================================================
           TOP BADGE
        ========================================================= */

        .pricing-top-badge {
            background: rgba(255, 255, 255, .94);
            border: 1px solid rgba(94, 163, 216, .23);
            color: var(--pricing-primary-dark);
            border-radius: 999px;
            padding: .65rem 1rem;
            box-shadow: var(--pricing-shadow-sm);
        }

        .pricing-top-badge-icon {
            width: 2rem;
            height: 2rem;
            border-radius: .7rem;
            background: var(--pricing-primary-soft);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
        }


        /* =========================================================
           MAIN EXPLORER
        ========================================================= */

        .service-explorer {
            position: relative;
            width: 100%;
            max-width: 100%;
            border: 1px solid rgba(223, 234, 242, .95);
            border-radius: 1.5rem;
            background: var(--pricing-white);
            box-shadow: var(--pricing-shadow-lg);
            overflow: hidden;
        }


        /* =========================================================
           LEFT SIDEBAR
        ========================================================= */

        .service-sidebar {
            min-width: 0;
            background:
                linear-gradient(
                    180deg,
                    #f7fbfe 0%,
                    #eef6fb 100%
                );
            border-right: 1px solid var(--pricing-border);
        }

        .service-sidebar-header {
            padding: 1.5rem 1.5rem 1rem;
        }

        .service-sidebar-label {
            color: var(--pricing-muted);
            font-size: .72rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .16em;
        }

        .service-count {
            background: var(--pricing-white);
            color: var(--pricing-primary-dark);
            border: 1px solid rgba(94, 163, 216, .2);
            font-weight: 800;
            box-shadow: 0 4px 12px rgba(16, 44, 70, .04);
        }

        .service-nav {
            position: relative;
            padding: 0 1rem 1.25rem;
        }

        .service-nav-indicator {
            position: absolute;
            left: 1rem;
            right: 1rem;
            top: 0;
            height: 0;
            border-radius: 1rem;
            background:
                linear-gradient(
                    135deg,
                    var(--pricing-primary),
                    #78b9e2
                );
            box-shadow: 0 14px 30px rgba(94, 163, 216, .25);
            pointer-events: none;
            z-index: 0;
            transition:
                transform .35s cubic-bezier(.2, .8, .2, 1),
                height .35s cubic-bezier(.2, .8, .2, 1),
                background .4s ease,
                box-shadow .4s ease;
        }

        .service-nav-item {
            position: relative;
            z-index: 1;
            width: 100%;
            min-width: 0;
            border: 1px solid transparent;
            border-radius: 1rem;
            background: transparent;
            padding: .75rem .8rem;
            color: var(--pricing-text);
            text-align: left;
            transition:
                color .2s ease,
                transform .2s ease,
                border-color .2s ease,
                background-color .2s ease;
        }

        .service-nav-item:hover {
            transform: translateX(2px);
            border-color: rgba(94, 163, 216, .15);
        }

        .service-nav-item.active {
            color: #fff;
        }

        /*
         * FIX:
         * Each sidebar icon receives the selected service accent
         * through --nav-accent / --nav-accent-soft.
         */
        .service-nav-icon {
            width: 2.7rem;
            height: 2.7rem;
            border-radius: .8rem;
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            justify-content: center;

            background: #fff;

            color:
                var(
                    --nav-accent,
                    var(--pricing-primary-dark)
                );

            border:
                1px solid
                var(
                    --nav-accent-soft-border,
                    var(--pricing-border)
                );

            box-shadow:
                0 5px 14px rgba(16, 44, 70, .05);

            transition:
                color .25s ease,
                background-color .25s ease,
                border-color .25s ease,
                box-shadow .25s ease,
                transform .25s ease;
        }

        .service-nav-item:hover .service-nav-icon {
            color:
                var(
                    --nav-accent,
                    var(--pricing-primary-dark)
                );

            border-color:
                var(
                    --nav-accent-soft-border,
                    rgba(94, 163, 216, .2)
                );
        }

        .service-nav-item.active .service-nav-icon {
            color:
                var(
                    --nav-accent,
                    var(--pricing-primary-dark)
                );

            background: #fff;

            border-color:
                var(
                    --nav-accent-soft-border,
                    rgba(94, 163, 216, .22)
                );

            transform: scale(1.02);

            box-shadow:
                0 8px 18px
                rgba(16, 44, 70, .12);
        }

        .service-nav-name {
            font-size: .91rem;
            line-height: 1.25;
        }

        .service-nav-meta {
            font-size: .7rem;
            margin-top: .2rem;
            opacity: .68;
        }

        .service-nav-arrow {
            opacity: .45;
            transition:
                transform .2s ease,
                opacity .2s ease;
        }

        .service-nav-item:hover .service-nav-arrow {
            transform: translateX(3px);
            opacity: .75;
        }

        .service-nav-item.active .service-nav-arrow {
            opacity: .9;
        }

        .service-sidebar-note {
            color: var(--pricing-muted);
            font-size: .78rem;
            line-height: 1.6;
            padding: 0 1.5rem 1.5rem;
        }


        /* =========================================================
           RIGHT DETAIL
        ========================================================= */

        .service-content {
            width: 100%;
            min-width: 0;
            padding: 2rem;

            --svc-accent: #367eaf;
            --svc-accent-dark: #286989;
            --svc-accent-soft: rgba(94, 163, 216, .12);
            --svc-accent-border: rgba(94, 163, 216, .24);
            --svc-accent-shadow: rgba(94, 163, 216, .18);
            --svc-accent-btn-shadow: rgba(54, 126, 175, .20);
            --svc-accent-btn-shadow-hover: rgba(54, 126, 175, .27);
            --svc-accent-overlay: rgba(23, 50, 77, .42);
        }


        /* =========================================================
           CUSTOM MOBILE DROPDOWN
        ========================================================= */

        .service-mobile-picker {
            position: relative;
            width: 100%;
            max-width: 100%;
            margin-bottom: 1.75rem;
            z-index: 20;
        }

        .service-mobile-label {
            color: var(--pricing-muted);
            letter-spacing: .13em;
            font-size: .72rem;
            font-weight: 800;
            text-transform: uppercase;
        }

        .custom-service-dropdown {
            position: relative;
            width: 100%;
            max-width: 100%;
        }

        .custom-service-trigger {
            position: relative;
            width: 100%;
            min-width: 0;
            min-height: 4.1rem;
            padding: .75rem .8rem .75rem .85rem;

            display: flex;
            align-items: center;
            gap: .75rem;

            border: 1px solid var(--pricing-border);
            border-radius: 1rem;
            background: #fff;
            color: var(--pricing-text);

            box-shadow:
                0 8px 25px rgba(16, 44, 70, .055);

            cursor: pointer;

            transition:
                border-color .2s ease,
                box-shadow .2s ease,
                background-color .2s ease;
        }

        .custom-service-trigger:hover {
            border-color:
                var(
                    --svc-accent-border,
                    rgba(94, 163, 216, .45)
                );

            box-shadow:
                0 12px 30px rgba(16, 44, 70, .08);
        }

        .custom-service-trigger:focus-visible {
            outline: none;

            border-color:
                var(
                    --svc-accent,
                    var(--pricing-primary)
                );

            box-shadow:
                0 0 0 4px
                    var(
                        --svc-accent-soft,
                        rgba(94, 163, 216, .13)
                    ),
                0 12px 30px rgba(16, 44, 70, .08);
        }

        .custom-service-trigger.is-open {
            border-color:
                var(
                    --svc-accent,
                    var(--pricing-primary)
                );

            box-shadow:
                0 0 0 4px
                    var(
                        --svc-accent-soft,
                        rgba(94, 163, 216, .10)
                    ),
                0 12px 30px rgba(16, 44, 70, .09);

            border-bottom-left-radius: .85rem;
            border-bottom-right-radius: .85rem;
        }

        .custom-service-trigger-icon {
            width: 2.65rem;
            height: 2.65rem;
            flex: 0 0 auto;
            border-radius: .8rem;

            display: inline-flex;
            align-items: center;
            justify-content: center;

            background:
                linear-gradient(
                    145deg,
                    var(
                        --svc-accent-soft,
                        #eff8fe
                    ),
                    #ffffff
                );

            color:
                var(
                    --svc-accent,
                    var(--pricing-primary-dark)
                );

            border:
                1px solid
                var(
                    --svc-accent-border,
                    rgba(94, 163, 216, .18)
                );

            transition:
                color .3s ease,
                background .3s ease,
                border-color .3s ease;
        }

        .custom-service-trigger-content {
            min-width: 0;
            flex: 1 1 auto;
            text-align: left;
        }

        .custom-service-trigger-label {
            display: block;
            color: var(--pricing-muted);
            font-size: .63rem;
            font-weight: 800;
            letter-spacing: .09em;
            text-transform: uppercase;
            line-height: 1.2;
            margin-bottom: .18rem;
        }

        .custom-service-trigger-name {
            display: block;
            color: var(--pricing-navy);
            font-size: .92rem;
            font-weight: 800;
            line-height: 1.3;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .custom-service-trigger-arrow {
            width: 2rem;
            height: 2rem;
            flex: 0 0 auto;
            border-radius: .65rem;

            display: inline-flex;
            align-items: center;
            justify-content: center;

            background:
                var(
                    --svc-accent-soft,
                    var(--pricing-primary-soft)
                );

            color:
                var(
                    --svc-accent,
                    var(--pricing-primary-dark)
                );

            transition:
                transform .25s ease,
                background .3s ease,
                color .3s ease;
        }

        .custom-service-trigger.is-open
            .custom-service-trigger-arrow {
            transform: rotate(180deg);
        }

        .custom-service-menu {
            position: absolute;
            top: calc(100% + .5rem);
            left: 0;
            right: 0;

            width: 100%;
            max-width: 100%;

            padding: .5rem;

            border: 1px solid rgba(223, 234, 242, .98);
            border-radius: 1rem;
            background: rgba(255, 255, 255, .98);

            box-shadow:
                0 22px 50px rgba(16, 44, 70, .14),
                0 4px 12px rgba(16, 44, 70, .05);

            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);

            opacity: 0;
            visibility: hidden;
            transform: translateY(-7px) scale(.985);
            transform-origin: top center;

            pointer-events: none;

            transition:
                opacity .18s ease,
                transform .18s ease,
                visibility .18s ease;

            z-index: 50;
        }

        .custom-service-menu.is-open {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
            pointer-events: auto;
        }

        .custom-service-menu-inner {
            width: 100%;
            max-height: min(60vh, 26rem);
            overflow-y: auto;
            overflow-x: hidden;

            scrollbar-width: thin;
            scrollbar-color:
                rgba(94, 163, 216, .45)
                transparent;

            padding-right: .1rem;
        }

        .custom-service-menu-inner::-webkit-scrollbar {
            width: 5px;
        }

        .custom-service-menu-inner::-webkit-scrollbar-track {
            background: transparent;
        }

        .custom-service-menu-inner::-webkit-scrollbar-thumb {
            background: rgba(94, 163, 216, .4);
            border-radius: 99px;
        }

        .custom-service-option {
            width: 100%;
            min-width: 0;

            display: flex;
            align-items: center;
            gap: .7rem;

            border: 0;
            border-radius: .8rem;
            background: transparent;

            padding: .7rem;

            color: var(--pricing-text);
            text-align: left;

            transition:
                background-color .18s ease,
                color .18s ease,
                transform .18s ease;
        }

        .custom-service-option + .custom-service-option {
            margin-top: .15rem;
        }

        .custom-service-option:hover {
            background: var(--pricing-primary-soft);
            transform: translateX(2px);
        }

        .custom-service-option:focus-visible {
            outline: none;
            background: var(--pricing-primary-soft);

            box-shadow:
                inset 0 0 0 2px
                rgba(94, 163, 216, .25);
        }

        .custom-service-option.active {
            background:
                linear-gradient(
                    135deg,
                    rgba(94, 163, 216, .13),
                    rgba(94, 163, 216, .06)
                );
        }

        .custom-service-option-icon {
            width: 2.45rem;
            height: 2.45rem;
            flex: 0 0 auto;

            border-radius: .7rem;

            display: inline-flex;
            align-items: center;
            justify-content: center;

            background: #fff;
            color: var(--pricing-primary-dark);

            border: 1px solid var(--pricing-border);

            box-shadow:
                0 5px 14px rgba(16, 44, 70, .045);
        }

        .custom-service-option-content {
            min-width: 0;
            flex: 1 1 auto;
        }

        .custom-service-option-name {
            display: block;
            color: var(--pricing-navy);
            font-size: .87rem;
            font-weight: 800;
            line-height: 1.3;

            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .custom-service-option-meta {
            display: block;
            margin-top: .18rem;

            color: var(--pricing-muted);
            font-size: .68rem;
            line-height: 1.3;
        }

        .custom-service-option-check {
            width: 1.8rem;
            height: 1.8rem;
            flex: 0 0 auto;

            display: inline-flex;
            align-items: center;
            justify-content: center;

            border-radius: 50%;

            color: var(--pricing-primary-dark);
            background: var(--pricing-primary-soft);

            opacity: 0;
            transform: scale(.85);

            transition:
                opacity .18s ease,
                transform .18s ease;
        }

        .custom-service-option.active
            .custom-service-option-check {
            opacity: 1;
            transform: scale(1);
        }


        /* =========================================================
           SERVICE HEADER
        ========================================================= */

        .service-header {
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--pricing-border);
            margin-bottom: 1.75rem;
        }

        .service-main-icon {
            width: 4rem;
            height: 4rem;
            border-radius: 1.1rem;

            display: inline-flex;
            align-items: center;
            justify-content: center;

            background:
                linear-gradient(
                    145deg,
                    var(
                        --svc-accent-soft,
                        #eff8fe
                    ),
                    #ffffff
                );

            color:
                var(
                    --svc-accent,
                    var(--pricing-primary-dark)
                );

            border:
                1px solid
                var(
                    --svc-accent-border,
                    rgba(94, 163, 216, .2)
                );

            box-shadow:
                0 12px 25px
                var(
                    --svc-accent-soft,
                    rgba(94, 163, 216, .12)
                );

            flex: 0 0 auto;

            transition:
                color .35s ease,
                background .35s ease,
                border-color .35s ease,
                box-shadow .35s ease;
        }

        .service-header-tag {
            color:
                var(
                    --svc-accent,
                    var(--pricing-primary-dark)
                );

            font-size: .72rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .14em;
            margin-bottom: .25rem;
            transition: color .35s ease;
        }

        .service-title {
            color: var(--pricing-navy);
            font-size: clamp(1.6rem, 2.6vw, 2.25rem);
            font-weight: 600;
            letter-spacing: -.025em;
            margin: 0;
            line-height: 1.15;
        }

        .service-description {
            color: var(--pricing-muted);
            font-size: .98rem;
            line-height: 1.75;
            margin-bottom: 1.75rem;
        }


        /* =========================================================
           TWO-COLUMN BODY
        ========================================================= */

        .service-body {
            display: grid;
            grid-template-columns:
                minmax(0, 320px)
                minmax(0, 1fr);
            gap: 2rem;
            align-items: start;
        }


        /* =========================================================
           PHONE VISUAL
        ========================================================= */

        .service-visual {
            display: flex;
            align-items: center;
            justify-content: center;

            min-width: 0;
            min-height: 100%;

            position: relative;
            padding: .25rem;
        }

        .service-visual::before {
            content: "";

            position: absolute;

            width: 230px;
            height: 230px;

            border-radius: 50%;

            background:
                radial-gradient(
                    circle,
                    var(
                        --svc-accent-soft,
                        rgba(94, 163, 216, .14)
                    ),
                    transparent 68%
                );

            filter: blur(4px);
            pointer-events: none;
        }


        /* =========================================================
           PHONE MOCKUP
        ========================================================= */

        .service-phone {
            position: relative;

            width: min(100%, 225px);

            aspect-ratio: 9 / 18.5;

            padding: 7px;

            border-radius: 2rem;

            background:
                linear-gradient(
                    145deg,
                    #263746 0%,
                    #102230 48%,
                    #07131d 100%
                );

            border: 1px solid rgba(255, 255, 255, .14);

            box-shadow:
                0 28px 55px rgba(16, 44, 70, .20),
                0 12px 25px rgba(16, 44, 70, .10),
                inset 0 1px 0 rgba(255, 255, 255, .12);

            z-index: 2;

            transform: translateY(0);

            transition:
                transform .45s ease,
                box-shadow .45s ease;
        }

        .service-phone:hover {
            transform: translateY(-5px);

            box-shadow:
                0 35px 65px rgba(16, 44, 70, .23),
                0 14px 30px rgba(16, 44, 70, .12),
                inset 0 1px 0 rgba(255, 255, 255, .14);
        }

        .service-phone::before {
            content: "";

            position: absolute;
            right: -3px;
            top: 88px;

            width: 3px;
            height: 58px;

            border-radius: 0 4px 4px 0;

            background: #1b2d3a;
        }

        .service-phone::after {
            content: "";

            position: absolute;
            left: -3px;
            top: 72px;

            width: 3px;
            height: 36px;

            border-radius: 4px 0 0 4px;

            background: #1b2d3a;

            box-shadow:
                0 48px 0 #1b2d3a;
        }


        /* =========================================================
           PHONE SCREEN
        ========================================================= */

        .service-phone-screen {
            position: relative;

            width: 100%;
            height: 100%;

            overflow: hidden;

            border-radius: 1.65rem;

            background:
                linear-gradient(
                    180deg,
                    #f9fcfe 0%,
                    #f4f8fb 100%
                );

            border: 1px solid rgba(255, 255, 255, .2);

            isolation: isolate;
        }

        .service-phone-screen::before {
            content: "";

            position: absolute;
            top: 0;
            left: 0;
            right: 0;

            height: 4px;

            background:
                linear-gradient(
                    90deg,
                    var(--svc-accent, #5ea3d8),
                    var(--svc-accent, #367eaf)
                );

            z-index: 4;
        }

        .service-phone-notch {
            position: absolute;

            top: 7px;
            left: 50%;

            width: 72px;
            height: 18px;

            transform: translateX(-50%);

            border-radius: 0 0 14px 14px;

            background: #07131d;

            z-index: 10;
        }

        .service-phone-notch::after {
            content: "";

            position: absolute;

            width: 7px;
            height: 7px;

            right: 10px;
            top: 5px;

            border-radius: 50%;

            background: #1b3345;

            box-shadow:
                inset 0 0 0 2px #0c1b27;
        }

        .service-phone-status {
            display: flex;
            align-items: center;
            justify-content: space-between;

            padding: .55rem .75rem .2rem;

            color: #4f6271;

            font-size: .48rem;
            font-weight: 800;

            position: relative;
            z-index: 5;
        }

        .service-phone-status-right {
            display: flex;
            align-items: center;
            gap: .3rem;
        }

        .service-phone-status-right i {
            font-size: .42rem;
        }


        /* =========================================================
           PHONE CONTENT
        ========================================================= */

        .service-phone-content {
            position: relative;

            padding: .55rem .7rem .65rem;

            height: calc(100% - 1.25rem);

            overflow: hidden;
        }

        .service-phone-app-header {
            display: flex;
            align-items: center;
            justify-content: space-between;

            gap: .5rem;

            margin-bottom: .65rem;
        }

        .service-phone-app-brand {
            min-width: 0;
        }

        .service-phone-app-label {
            color: var(--pricing-muted);

            font-size: .42rem;
            font-weight: 800;

            text-transform: uppercase;
            letter-spacing: .08em;
        }

        .service-phone-app-title {
            color: var(--pricing-navy);

            font-size: .68rem;
            line-height: 1.15;

            font-weight: 800;

            margin-top: .08rem;

            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .service-phone-app-icon {
            width: 1.5rem;
            height: 1.5rem;

            border-radius: .45rem;

            display: inline-flex;
            align-items: center;
            justify-content: center;

            flex: 0 0 auto;

            color:
                var(
                    --svc-accent,
                    #367eaf
                );

            background:
                var(
                    --svc-accent-soft,
                    rgba(94, 163, 216, .11)
                );

            border:
                1px solid
                var(
                    --svc-accent-border,
                    rgba(94, 163, 216, .2)
                );

            font-size: .57rem;
        }


        /* =========================================================
           PHONE HERO
        ========================================================= */

        .service-phone-hero {
            position: relative;

            padding: .7rem;

            border-radius: .8rem;

            background:
                linear-gradient(
                    135deg,
                    var(
                        --svc-accent-soft,
                        rgba(94, 163, 216, .11)
                    ),
                    rgba(255, 255, 255, .96)
                );

            border:
                1px solid
                var(
                    --svc-accent-border,
                    rgba(94, 163, 216, .2)
                );

            margin-bottom: .55rem;

            overflow: hidden;
        }

        .service-phone-hero::after {
            content: "";

            position: absolute;

            width: 80px;
            height: 80px;

            right: -38px;
            bottom: -42px;

            border-radius: 50%;

            border:
                1px solid
                var(
                    --svc-accent-border,
                    rgba(94, 163, 216, .15)
                );
        }

        .service-phone-hero-label {
            color: var(--pricing-muted);

            font-size: .4rem;
            font-weight: 800;

            text-transform: uppercase;
            letter-spacing: .07em;

            margin-bottom: .25rem;
        }

        .service-phone-hero-value {
            color: var(--pricing-navy);

            font-size: 1.05rem;
            font-weight: 800;

            line-height: 1.1;
        }

        .service-phone-hero-change {
            display: inline-flex;
            align-items: center;
            gap: .2rem;

            margin-top: .2rem;

            color:
                var(
                    --svc-accent,
                    #367eaf
                );

            font-size: .4rem;
            font-weight: 800;
        }


        /* =========================================================
           PHONE STATS
        ========================================================= */

        .service-phone-stats {
            display: grid;

            grid-template-columns:
                repeat(2, minmax(0, 1fr));

            gap: .4rem;

            margin-bottom: .55rem;
        }

        .service-phone-stat {
            min-width: 0;

            padding: .5rem;

            border-radius: .65rem;

            background: #fff;

            border: 1px solid var(--pricing-border);

            box-shadow:
                0 4px 12px rgba(16, 44, 70, .035);
        }

        .service-phone-stat-label {
            color: var(--pricing-muted);

            font-size: .38rem;
            font-weight: 700;

            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .service-phone-stat-value {
            color: var(--pricing-text);

            font-size: .62rem;
            line-height: 1.2;

            font-weight: 800;

            margin-top: .12rem;
        }


        /* =========================================================
           PHONE ACTIVITY
        ========================================================= */

        .service-phone-section-title {
            display: flex;
            align-items: center;
            justify-content: space-between;

            gap: .5rem;

            margin-bottom: .35rem;
        }

        .service-phone-section-title span:first-child {
            color: var(--pricing-navy);

            font-size: .44rem;
            font-weight: 800;
        }

        .service-phone-section-title span:last-child {
            color:
                var(
                    --svc-accent,
                    #367eaf
                );

            font-size: .38rem;
            font-weight: 800;
        }

        .service-phone-rows {
            display: flex;
            flex-direction: column;
            gap: .28rem;
        }

        .service-phone-row {
            display: flex;
            align-items: center;
            gap: .42rem;

            padding: .38rem;

            border-radius: .55rem;

            background: rgba(255, 255, 255, .88);

            border: 1px solid
                rgba(223, 234, 242, .9);
        }

        .service-phone-row-icon {
            width: 1.2rem;
            height: 1.2rem;

            border-radius: .38rem;

            display: inline-flex;
            align-items: center;
            justify-content: center;

            flex: 0 0 auto;

            color:
                var(
                    --svc-accent,
                    #367eaf
                );

            background:
                var(
                    --svc-accent-soft,
                    rgba(94, 163, 216, .11)
                );

            font-size: .4rem;
        }

        .service-phone-row-content {
            min-width: 0;
            flex: 1 1 auto;
        }

        .service-phone-row-title {
            color: var(--pricing-text);

            font-size: .4rem;
            font-weight: 800;

            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .service-phone-row-meta {
            color: var(--pricing-muted);

            font-size: .34rem;

            margin-top: .05rem;
        }

        .service-phone-row-value {
            color: var(--pricing-navy);

            font-size: .4rem;
            font-weight: 800;

            flex: 0 0 auto;
        }


        /* =========================================================
           PHONE BOTTOM NAV
        ========================================================= */

        .service-phone-bottom-nav {
            position: absolute;

            left: .6rem;
            right: .6rem;
            bottom: .55rem;

            display: grid;

            grid-template-columns:
                repeat(4, minmax(0, 1fr));

            gap: .2rem;

            padding: .38rem;

            border-radius: .75rem;

            background: rgba(255, 255, 255, .97);

            border: 1px solid var(--pricing-border);

            box-shadow:
                0 7px 18px rgba(16, 44, 70, .08);

            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);

            z-index: 5;
        }

        .service-phone-bottom-item {
            display: flex;
            align-items: center;
            justify-content: center;

            height: 1.35rem;

            border-radius: .4rem;

            color: #8a99a6;

            font-size: .4rem;
        }

        .service-phone-bottom-item.active {
            color:
                var(
                    --svc-accent,
                    #367eaf
                );

            background:
                var(
                    --svc-accent-soft,
                    rgba(94, 163, 216, .11)
                );
        }


        /* =========================================================
           RIGHT DETAIL COLUMN
        ========================================================= */

        .service-detail {
            min-width: 0;
        }


        /* =========================================================
           PLANS
        ========================================================= */

        .plans-heading {
            display: flex;
            align-items: center;
            gap: .65rem;
            margin-bottom: 1rem;
        }

        .plans-heading-dot {
            width: .6rem;
            height: .6rem;
            border-radius: 50%;

            background:
                var(
                    --svc-accent,
                    var(--pricing-primary)
                );

            box-shadow:
                0 0 0 6px
                var(
                    --svc-accent-soft,
                    rgba(94, 163, 216, .12)
                );

            flex: 0 0 auto;

            transition:
                background .35s ease,
                box-shadow .35s ease;
        }

        .plans-heading-text {
            color: var(--pricing-navy);
            font-size: .75rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .15em;
        }

        .plan-card {
            position: relative;
            width: 100%;
            min-width: 0;
            height: 100%;

            display: flex;
            align-items: center;

            background: #fff;
            border: 1px solid var(--pricing-border);
            border-radius: 1rem;
            padding: 1rem;

            box-shadow:
                0 6px 20px rgba(16, 44, 70, .04);

            transition:
                transform .25s ease,
                border-color .25s ease,
                box-shadow .25s ease;

            overflow: hidden;
        }

        .plan-card::before {
            content: "";

            position: absolute;
            inset: 0 auto auto 0;

            width: 100%;
            height: 3px;

            background:
                linear-gradient(
                    90deg,
                    var(
                        --svc-accent,
                        var(--pricing-primary)
                    ),
                    transparent
                );

            opacity: 0;

            transition: opacity .25s ease;
        }

        .plan-card:hover {
            transform: translateY(-4px);

            border-color:
                var(
                    --svc-accent-border,
                    rgba(94, 163, 216, .32)
                );

            box-shadow:
                0 15px 35px rgba(16, 44, 70, .09);
        }

        .plan-card:hover::before {
            opacity: 1;
        }

        .plan-check {
            width: 2rem;
            height: 2rem;
            border-radius: .65rem;

            display: inline-flex;
            align-items: center;
            justify-content: center;

            background:
                var(
                    --svc-accent-soft,
                    var(--pricing-primary-soft)
                );

            color:
                var(
                    --svc-accent,
                    var(--pricing-primary-dark)
                );

            flex: 0 0 auto;

            transition:
                background .35s ease,
                color .35s ease;
        }

        .plan-name {
            color: var(--pricing-text);
            font-size: .88rem;
            font-weight: 700;
            line-height: 1.4;
            min-width: 0;
        }


        /* =========================================================
           BEST FOR
        ========================================================= */

        .best-for-card {
            background:
                linear-gradient(
                    135deg,
                    var(
                        --svc-accent-soft,
                        #eef8fe
                    ) 0%,
                    #f7fbfe 100%
                );

            border:
                1px solid
                var(
                    --svc-accent-border,
                    rgba(94, 163, 216, .18)
                );

            border-radius: 1rem;
            padding: 1rem;
            margin-top: 1.5rem;

            transition:
                background .4s ease,
                border-color .4s ease;
        }

        .best-for-icon {
            width: 2.65rem;
            height: 2.65rem;
            border-radius: .8rem;

            display: inline-flex;
            align-items: center;
            justify-content: center;

            background: #fff;

            color:
                var(
                    --svc-accent,
                    var(--pricing-primary-dark)
                );

            border:
                1px solid
                var(
                    --svc-accent-border,
                    rgba(94, 163, 216, .18)
                );

            box-shadow:
                0 7px 18px rgba(16, 44, 70, .05);

            flex: 0 0 auto;

            transition:
                color .35s ease,
                border-color .35s ease;
        }

        .best-for-label {
            color: var(--pricing-muted);
            text-transform: uppercase;
            letter-spacing: .13em;
            font-size: .7rem;
            font-weight: 800;
            margin-bottom: .2rem;
        }

        .best-for-value {
            color: var(--pricing-text);
            font-weight: 700;
            line-height: 1.55;
        }


        /* =========================================================
           PRIMARY BUTTON
           FIXED: now follows selected service accent
        ========================================================= */

        .pricing-primary-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .6rem;

            min-height: 3.15rem;

            padding: .85rem 1.25rem;

            border: 0;
            border-radius: .9rem;

            background:
                linear-gradient(
                    135deg,
                    var(
                        --svc-accent,
                        var(--pricing-primary)
                    ),
                    var(
                        --svc-accent-dark,
                        var(--pricing-primary-dark)
                    )
                );

            color: #fff;
            font-weight: 800;
            text-decoration: none;

            box-shadow:
                0 14px 30px
                var(
                    --svc-accent-btn-shadow,
                    rgba(54, 126, 175, .20)
                );

            transition:
                transform .2s ease,
                box-shadow .2s ease,
                filter .2s ease,
                background .35s ease;
        }

        .pricing-primary-btn:hover {
            color: #fff;

            transform: translateY(-2px);

            box-shadow:
                0 18px 35px
                var(
                    --svc-accent-btn-shadow-hover,
                    rgba(54, 126, 175, .27)
                );

            filter: brightness(1.03);
        }

        .pricing-primary-btn:focus-visible {
            outline:
                3px solid
                var(
                    --svc-accent-soft,
                    rgba(94, 163, 216, .25)
                );

            outline-offset: 3px;
        }


        /* =========================================================
           BOTTOM CTA
        ========================================================= */

        .pricing-cta {
            position: relative;
            overflow: hidden;

            border-radius: 1.5rem;

            background:
                radial-gradient(
                    circle at 85% 15%,
                    rgba(94, 163, 216, .2),
                    transparent 30%
                ),
                linear-gradient(
                    135deg,
                    #0d263d 0%,
                    #153b5b 100%
                );

            box-shadow: var(--pricing-shadow-lg);
        }

        .pricing-cta::after {
            content: "";

            position: absolute;
            width: 280px;
            height: 280px;

            right: -120px;
            bottom: -150px;

            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, .08);

            box-shadow:
                0 0 0 35px rgba(255, 255, 255, .025),
                0 0 0 70px rgba(255, 255, 255, .02);

            pointer-events: none;
        }

        .pricing-cta-content {
            position: relative;
            z-index: 1;
        }

        .pricing-cta-eyebrow {
            color: #8ec9ec;
            font-size: .72rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .16em;
        }

        .pricing-cta-title {
            color: #fff;
            font-size: clamp(1.65rem, 3vw, 2.5rem);
            line-height: 1.15;
            letter-spacing: -.025em;
            font-weight: 800;
        }

        .pricing-cta-description {
            color: rgba(255, 255, 255, .68);
            font-size: .98rem;
            line-height: 1.75;
            max-width: 650px;
        }

        .pricing-secondary-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .6rem;

            min-height: 3.2rem;

            padding: .85rem 1.25rem;

            border-radius: .9rem;

            background: #fff;
            color: var(--pricing-navy);

            text-decoration: none;
            font-weight: 800;

            box-shadow:
                0 15px 30px rgba(0, 0, 0, .12);

            transition:
                transform .2s ease,
                box-shadow .2s ease;
        }

        .pricing-secondary-btn:hover {
            color: var(--pricing-navy);
            transform: translateY(-2px);

            box-shadow:
                0 18px 35px rgba(0, 0, 0, .18);
        }


        /* =========================================================
           PANEL TRANSITION
        ========================================================= */

        .service-panel-transition {
            opacity: 1;
            transform: translateY(0);

            transition:
                opacity .18s ease,
                transform .18s ease;
        }

        .service-panel-transition.is-changing {
            opacity: 0;
            transform: translateY(5px);
        }


        /* =========================================================
           RESPONSIVE
        ========================================================= */

        @media (min-width: 992px) {

            .service-content {
                padding: 2.5rem 2.5rem 2.75rem;
            }

        }


        @media (min-width: 1200px) {

            .service-content {
                padding: 3rem;
            }

            .service-sidebar-header {
                padding: 1.75rem 1.5rem 1rem;
            }

            .service-sidebar-note {
                padding-bottom: 1.75rem;
            }

        }


        @media (max-width: 1199.98px) {

            .service-body {
                grid-template-columns:
                    minmax(0, 260px)
                    minmax(0, 1fr);

                gap: 1.5rem;
            }

            .service-phone {
                width: min(100%, 210px);
            }

        }


        @media (max-width: 991.98px) {

            .service-explorer {
                border-radius: 1.25rem;
            }

            .service-content {
                padding: 1.5rem;
            }

            .service-phone {
                width: 225px;
            }

        }


        @media (max-width: 767.98px) {

            .pricing-title {
                font-size: 1.9rem;
            }

            .pricing-intro {
                font-size: .97rem;
            }

            .service-content {
                padding: 1.15rem;
            }

            .service-main-icon {
                width: 3.5rem;
                height: 3.5rem;
                border-radius: .95rem;
            }

            .service-title {
                font-size: 1.55rem;
            }

            .plan-card {
                padding: .9rem;
            }

            .pricing-cta {
                border-radius: 1.25rem;
            }

            .custom-service-menu-inner {
                max-height: min(55vh, 23rem);
            }

            .service-body {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }

            .service-visual {
                min-height: 265px;
                padding: 0;
            }

            .service-phone {
                width: 190px;
            }

        }


        @media (max-width: 575.98px) {

            .pricing-page {
                overflow-x: clip;
            }

            .pricing-top-badge {
                padding: .55rem .85rem;
            }

            .pricing-title {
                font-size: 1.7rem;
            }

            .service-header {
                align-items: flex-start !important;
            }

            .service-description {
                margin-bottom: 1.4rem;
            }

            .best-for-card {
                padding: .9rem;
            }

            .pricing-primary-btn,
            .pricing-secondary-btn {
                width: 100%;
            }

            .custom-service-trigger {
                min-height: 3.9rem;
            }

            .custom-service-trigger-icon {
                width: 2.45rem;
                height: 2.45rem;
            }

            .custom-service-trigger-name {
                font-size: .86rem;
            }

            .custom-service-menu {
                top: calc(100% + .4rem);
                padding: .45rem;
                border-radius: .9rem;
            }

            .custom-service-option {
                padding: .65rem;
            }

            .custom-service-option-icon {
                width: 2.25rem;
                height: 2.25rem;
            }

            .custom-service-option-name {
                font-size: .82rem;
            }

            .service-visual {
                min-height: 240px;
            }

            .service-phone {
                width: 178px;
            }

        }


        @media (prefers-reduced-motion: reduce) {

            .service-nav-item,
            .service-nav-icon,
            .service-nav-arrow,
            .plan-card,
            .pricing-primary-btn,
            .pricing-secondary-btn,
            .service-panel-transition,
            .service-nav-indicator,
            .custom-service-trigger,
            .custom-service-trigger-arrow,
            .custom-service-menu,
            .custom-service-option,
            .custom-service-option-check,
            .service-phone {
                transition: none !important;
            }

            .service-phone:hover {
                transform: none;
            }

        }