/* ─── DESIGN TOKENS ─── */
        :root {
            --color-primary: #3188f4;
            --color-dark-bg: #1a2845;
            --color-light-bg: #edf4ff;
            --color-white: #ffffff;
            --color-black: #000000;
            --color-text: #1f2024;
            --color-text-body: #383e48;
            --color-text-muted: #3f4260;
            --color-dark-text: #9db5ce;
            --color-plan-dark: #1a2845;
            --color-billing: #939baf;
            --color-premium-feat: #dbdfe8;
            --color-best-value: #f5a623;
            --color-cta-check: #deebff;
            --color-badge-muted: #74768d;
            --shadow-blocked: 0px 2px 7px 2px rgba(0, 0, 0, 0.50);
            --shadow-testimonial: 0px 0px 2px 2px rgba(0, 0, 0, 0.15);
            --shadow-pricing: 0px 2px 16px rgba(0, 0, 0, 0.16);
            --font: 'Manrope', sans-serif;
        }

        /* ─── RESET ─── */
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Manrope', sans-serif;
            color: var(--color-text);
            background: var(--color-white);
            padding-top: 47px;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 47px;
            background: transparent;
            z-index: -1;
            pointer-events: none;
        }

        img {
            max-width: 100%;
            display: block;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        ul {
            list-style: none;
        }

        /* ─── CONTAINER ─── */
        .container {
            max-width: 1290px;
            margin: 0 auto;
            padding: 0 24px;
            width: 100%;
        }

        /* ─── SHARED BUTTON ─── */
        .btn-primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: var(--color-primary);
            color: var(--color-white);
            font-family: var(--font);
            font-size: 18px;
            font-weight: 800;
            padding: 16px 24px;
            border-radius: 32px;
            border: none;
            cursor: pointer;
        }

        .hero-cta-row {
            padding-top: 9px;
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            align-self: flex-start;
        }

        .hero-store-badge {
            width: 131.98px;
            height: 43.99px;
            object-fit: contain;
        }

        .hero-store-row {
            display: contents;
        }

        /* ════════════════════════════
       SECTION 1 · HERO / BANNER
    ════════════════════════════ */
        .hero {
            position: relative;
            overflow: hidden;
            background: linear-gradient(to right, #f5f6f8 15%, transparent 40%), url('https://www.cms.mobicip.com/wp-content/uploads/2026/05/Picture-→-Porn-blocker.png') no-repeat right bottom #f5f6f8;
            background-size: 100% 100%, auto 82%;
            background-color: #EEEFF0;
            min-height: 536px;
        }

        .hero-inner {
            display: flex;
            align-items: center;
            min-height: 536px;
            position: relative;
            z-index: 2;
        }

        .hero-content {
            flex: 0 0 auto;
            width: 52%;
            max-width: 650px;
            padding: 80px 0;
            margin-left: -30px;
            display: flex;
            flex-direction: column;
            padding-bottom: 20px;
            gap: 24px;
        }

        /* Adjust hero content position at 110% zoom */
        @media (min-width: 1033px) and (max-width: 1400px) {
            .block-section {
                padding: 65px 0 65px !important;
            }

            .block-heading {
                margin-bottom: 16px !important;
            }

            .hero-content {
                margin-left: -80px;
            }

            .pricing-cards {
                gap: 24px !important;
            }
        }

        .hero-badge {
            display: inline-block;
            border: 2px solid var(--color-black);
            border-radius: 6px;
            padding: 1px 12px;
            font-size: 16px;
            padding-bottom: 2px;
            font-weight: 800;
            color: var(--color-black);
            align-self: flex-start;
        }

        .feature_top_content_container .feature_title {
            display: inline-flex;
            height: 32px;
            font-size: 16px;
            font-weight: 800;
            align-items: center;
            border-radius: 6px;
            border: solid 2px #1f2024;
            padding: 0 12px;
            margin-bottom: 8px;
        }

        .hero-heading {
            font-size: 44px;
            font-weight: 800;
            line-height: 54px;
            color: var(--color-text);
            white-space: nowrap;
        }

        .hero-desc {
            font-size: 18px;
            font-weight: 400;
            line-height: 28px;
            color: var(--color-text-muted);
            max-width: 640px;
        }

        /* Hero Mobile Image - hidden on desktop/tablet */
        .hero-mobile-image {
            display: none;
        }


        /* ════════════════════════════
       SECTION 2 · HOW TO BLOCK (DARK)
    ════════════════════════════ */
        .block-section {
            background: var(--color-dark-bg);
            padding: 58px 0 80px;
        }

        .block-heading {
            font-size: 34px;
            font-weight: 800;
            line-height: 44px;
            color: var(--color-white);
            text-align: center;
            /* margin-bottom: 32px; */
            letter-spacing: 0.7px;
            width: 1084px;
            padding-bottom: 15px;
        }

        .block-layout {
            display: flex;
            gap: 100px;
            align-items: center;
        }

        .block-features {
            flex: 0 0 555px;
            max-width: 555px;
            display: flex;
            flex-direction: column;
            gap: 40px;
        }

        .block-feature {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-left: 5px;
        }

        .block-feature.highlighted {
            flex-direction: row;
            gap: 20px;
        }

        .block-left-bar {
            display: none;
            /* hidden by default — overridden per breakpoint */
        }

        @media (min-width: 1033px) {
            .block-section {
                padding: 65px 0 65px !important;
            }

            .block-heading {
                margin-bottom: 16px !important;
            }

            .pricing-cards {
                gap: 24px !important;
            }

            .block-layout {
                margin-left: -44px;
                flex-direction: row !important;
                align-items: center !important;
                gap: 128px !important;
            }

            .block-features {
                flex: 1 !important;
                flex-direction: column !important;
                display: flex !important;
                gap: 32px !important;
                overflow-x: visible !important;
                max-width: 570px !important;
                padding-top: 0 !important;
                order: 1 !important;
                padding-left: 45px;
            }

            .block-feature {
                flex: unset !important;
                min-width: unset !important;
                width: 560px !important;
                padding-left: 25px !important;
                padding-bottom: 0 !important;
                border-bottom: none !important;
                border-left: none !important;
                position: relative !important;
                cursor: pointer !important;
                margin: 0 !important;
            }

            .block-feature.highlighted::before {
                content: '' !important;
                position: absolute !important;
                left: 0 !important;
                top: 0 !important;
                width: 4.2px !important;
                height: 100% !important;
                background: #ffffff !important;
                border-radius: 999px !important;
            }

            .block-feature.highlighted {
                border-bottom: none !important;
                border-left: none !important;
                flex-direction: column !important;
                gap: 8px !important;
            }

            /* Hide the manually injected left bar div — use ::before instead */
            .block-left-bar {
                display: none !important;
            }

            .block-tab-image {
                flex: 0 0 418px !important;
                width: 418px !important;
                height: 548px !important;
                max-width: 418px !important;
                max-height: 548px !important;
                object-fit: cover !important;
                border-radius: 24px !important;
                margin: 0 !important;
                order: 2 !important;
                margin-top: 0 !important;
                align-self: center !important;
            }

            .bf-desc {
                font-size: 18px;
                font-weight: 500;
                line-height: 1.33;
            }
        }

        @media (min-width: 1092.80px) and (max-width: 1092.80px) {
            .hero-content {
                width: 1084px !important;
                max-width: 1084px !important;
                flex: 0 0 1084px !important;
                min-height: 388px !important;
                padding: 0 !important;
                margin-left: -68px !important;
                align-items: flex-start !important;
                text-align: left !important;
                gap: 24px !important;
                justify-content: center !important;
                position: relative !important;
                z-index: 2 !important;
                margin-bottom: -23px;
            }
        }

        @media (min-width: 1033px) {
            .hero {
                background: #EEEFF0 !important;
                background-image: none !important;
                position: relative !important;
                overflow: hidden !important;
                min-height: 388px !important;
                height: 599px !important;
            }

            .hero .container {
                padding-top: 117px !important;
            }

            .hero-desc {
                margin-bottom: 21px;
                margin-top: 69px;
                text-align: left !important;
                font-size: 18px !important;
                color: #616b7b !important;
            }
        }

        @media (min-width: 1033px) and (max-width: 1149px) {
            .container {
                padding-top: 85px !important;
            }
        }

        @media (min-width: 1033px) and (max-width: 1149px) {
            .hero .container {
                padding-left: 24px !important;
                padding-right: 24px !important;
            }
        }

        .bf-title {
            font-size: 24px;
            font-weight: 800;
            color: #9DB5CE;
        }

        .bf-title.white {
            color: var(--color-white);
        }

        .bf-desc {
            font-size: 18px;
            font-weight: 500;
            line-height: 1.33;
            color: #9DB5CE;
        }

        .bf-desc.white {
            color: var(--color-white);
        }

        .block-feature {
            cursor: default;
        }

        .block-tab-image {
            flex: 1;
            max-height: 500px;
            max-width: 400px;
            border-radius: 30px;
            box-shadow: var(--shadow-blocked);
            margin-top: -90px;
        }

        /* Blocked Websites Card */
        .blocked-card {
            flex: 1;
            background: var(--color-white);
            border-radius: 30px;
            box-shadow: var(--shadow-blocked);
            padding: 32px;
            max-width: 400px;
        }

        .bc-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24px;
        }

        .bc-title-row {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .bc-title {
            font-size: 20px;
            font-weight: 600;
            color: var(--color-text);
        }

        .bc-input-row {
            background: #ededf2;
            border-radius: 14px;
            padding: 12px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
        }

        .bc-input-left {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .bc-input-bar {
            background: #393939;
            width: 91px;
            height: 25px;
            border-radius: 4px;
            display: inline-block;
        }

        .bc-dot-com {
            font-size: 18.16px;
            font-weight: 600;
            color: #4a4a4a;
        }

        .bc-add {
            font-size: 18px;
            font-weight: 800;
            letter-spacing: 0.78px;
            color: var(--color-primary);
        }

        .bc-hint {
            font-size: 12px;
            font-weight: 400;
            color: var(--color-badge-muted);
            margin-bottom: 16px;
        }

        .bc-divider {
            background: #4a4a4a;
            height: 25px;
            border-radius: 4px;
            margin-bottom: 16px;
        }

        .bc-site-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 0;
            border-top: 1px solid #f0f0f0;
        }

        .bc-site-name {
            font-size: 18.16px;
            font-weight: 600;
            color: #4a4a4a;
        }

        /* ════════════════════════════
       SECTION 3 · WHY YOU NEED
    ════════════════════════════ */
        .why-section {
            background: var(--color-white);
            padding: 0px;
            margin-bottom: 0;
            margin-top: 0;
        }

        .why-heading {
            width: 992px !important;
            max-width: 100% !important;
            box-sizing: border-box !important;
            letter-spacing: 0.7px;
            font-size: 34px;
            font-weight: 800;
            line-height: 44px;
            color: var(--color-text);
            margin-bottom: 24px;
        }

        .why-desc {
            font-size: 18px;
            font-weight: 500;
            line-height: 28px;
            color: var(--color-text-body);
            margin-bottom: 30px;
        }

        .why-grid {
            padding-top: 10px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            margin-bottom: 32px;
            overflow: visible;
        }

        .why-card-title {
            font-size: 24px;
            font-weight: 700;
            color: var(--color-text);
            margin-bottom: 16px;
            white-space: nowrap;
        }

        .why-card-desc {
            font-size: 18px;
            font-weight: 400;
            line-height: 28px;
            color: var(--color-text-body);
        }

        .why-blog-link {
            display: block;
            text-align: center;
            font-size: 18px;
            font-weight: 500;
            color: var(--color-primary);
            margin-top: 48px;
            margin-bottom: 105px;
        }

        /* ════════════════════════════
       SECTION 4 · WHY MOBICIP BEST
    ════════════════════════════ */
        .best-section {
            background-color: #f2f8ff;
            padding: 0px 0;
            text-align: center;
            margin-bottom: 0;
            margin-left: 0;
        }

        .best-heading {
            font-size: 34px;
            font-weight: 800;
            line-height: 44px;
            color: var(--color-text);
            margin-bottom: 24px;
            letter-spacing: 0.7px;
        }

        .best-desc {
            font-size: 18px;
            font-weight: 400;
            line-height: 28px;
            color: var(--color-text-body);
            margin-bottom: 56px;
        }

        .feat-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            margin-bottom: 40px;
        }

        .feat-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 24px;
        }

        .feat-icon-wrap {
            width: 75px;
            height: 75px;
            background: var(--color-white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
        }

        .feat-icon-wrap img {
            width: 42px;
            height: 42px;
            object-fit: contain;
        }

        .feat-card-title {
            font-size: 24px;
            font-weight: 700;
            color: var(--color-text);
            margin-bottom: 21px;
        }

        .feat-card-desc {
            font-size: 18px;
            font-weight: 400;
            line-height: 28px;
            color: var(--color-text-body);
        }

        .feat-cta {
            display: flex;
            justify-content: center;
            margin: 48px 0;
        }

        /* Desktop: 3 columns for unified grid */
        .feat-grid-unified {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            margin-bottom: 0;
            width: 100%;
            box-sizing: border-box;
        }

        /* ════════════════════════════
       SECTION 5 · TESTIMONIALS
    ════════════════════════════ */
        .testimonials-section {
            background: var(--color-white);
            margin-bottom: -25px;
        }

        @media (min-width: 1033px) {
            .container {
                /* padding-top: 85px !important; */
                /* padding-bottom: 65px !important; */
                padding-left: 102px;
            }
        }

        .testi-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 48px;
        }

        .testi-card {
            border-radius: 15px;
            box-shadow: var(--shadow-testimonial);
            padding: 20px;
            display: flex;
            flex-direction: column;
            gap: 14.5px;
            background: var(--color-white);
        }

        .star_wrapper {
            margin: -6px 0 4px 0;
            height: 16px;
            width: 100%;
        }

        .star_wrapper img {
            height: 100%;
            width: auto;
            object-fit: contain;
            object-position: left center;
        }

        .testi-name {
            font-size: 16px;
            font-weight: 700;
            color: var(--color-black);
        }

        .testi-text {
            font-size: 20px;
            font-weight: 400;
            line-height: 32px;
            color: var(--color-text);
        }

        .testi-track {
            display: contents;
            /* invisible wrapper on desktop — no effect */
        }

        .testi-dots {
            display: none;
            /* hidden on desktop and tablet */
        }

        .testi-tablet {
            display: none;
        }

        @media (min-width: 1033px) {
            .testimonials-section .container {
                padding-left: 104px !important;
                padding-right: 104px !important;
            }

            .testi-desktop {
                display: grid !important;
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 48px !important;
                visibility: visible !important;
                height: auto !important;
                overflow: visible !important;
                pointer-events: auto !important;
                width: 100% !important;
            }

            .testi-track {
                display: contents !important;
            }

            .testi-card {
                border-radius: 15px !important;
                box-shadow: var(--shadow-testimonial) !important;
                padding: 20px !important;
                gap: 6.5px !important;
                background: var(--color-white) !important;
                display: flex !important;
                flex-direction: column !important;
                visibility: visible !important;
                height: auto !important;
                width: auto !important;
                flex: unset !important;
            }

            .testi-tablet {
                display: none !important;
                visibility: hidden !important;
                height: 0 !important;
                overflow: hidden !important;
                pointer-events: none !important;
            }

            .star_wrapper {
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                gap: 2px !important;
                width: auto !important;
                height: auto !important;
                margin: -4px 0 4px 0 !important;
            }

            .star-icon {
                width: 16px !important;
                height: 16px !important;
                object-fit: contain !important;
                display: inline-block !important;
            }

            .testi-name {
                font-size: 16px !important;
                font-weight: 700 !important;
                color: var(--color-black) !important;
            }

            .testi-text {
                font-size: 20px !important;
                font-weight: 400 !important;
                line-height: 32px !important;
                color: var(--color-text) !important;
                padding-bottom: 24px;
                padding-top: 12px;
            }
        }

        /* ════════════════════════════
       SECTION 6 · PRICING
    ════════════════════════════ */
        .pricing-section {
            background-color: #f2f8ff;
            padding: 48px 0 48px;
            text-align: center;
        }

        .pricing-main-heading {
            font-family: var(--font);
            font-size: 44px;
            font-weight: 800;
            color: var(--color-text);
            margin-bottom: 8px;
            margin-top: -84px;
        }

        .pricing-heading {
            font-family: var(--font);
            font-size: 26px;
            font-weight: 800;
            color: rgb(78, 78, 78);
            margin-bottom: 12px;
        }

        .pricing-sub {
            font-family: var(--font);
            font-size: 18px;
            font-weight: 700;
            color: rgb(63, 66, 96);
            margin-bottom: 40px;
        }

        .pricing-sub .free {
            color: #229D7A;
        }

        .pricing-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 0;
            margin-bottom: 24px;
        }

        .pricing-card {
            background: var(--color-white);
            border-radius: 12px;
            border: 0.5px solid #bbc8d8;
            box-shadow: var(--shadow-pricing);
            padding: 32px;
            text-align: left;
            display: flex;
            flex-direction: column;
            gap: 24px;
            position: relative;
        }

        .pricing-card.premium {
            background: var(--color-dark-bg);
            border-color: var(--color-dark-bg);
        }

        .plan-name {
            font-size: 28px;
            font-weight: 800;
            color: var(--color-plan-dark);
        }

        .pricing-card.premium .plan-name {
            color: var(--color-white);
        }

        .plan-price-block {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .plan-price-row {
            display: flex;
            align-items: baseline;
            gap: 4px;
        }

        .plan-price {
            font-size: 34px;
            font-weight: 800;
            line-height: 44px;
            color: var(--color-plan-dark);
        }

        .pricing-card.premium .plan-price {
            color: var(--color-white);
        }

        .plan-period {
            font-size: 18px;
            font-weight: 500;
            color: var(--color-plan-dark);
        }

        .pricing-card.premium .plan-period {
            color: var(--color-premium-feat);
        }

        .plan-billing {
            font-size: 14px;
            font-weight: 500;
            color: var(--color-billing);
        }

        .btn-plan {
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: var(--font);
            font-size: 18px;
            font-weight: 700;
            color: var(--color-white);
            background: var(--color-primary);
            border-radius: 99px;
            padding: 12px 64px;
            align-self: center;
            border: none;
            cursor: pointer;
        }

        @media (min-width: 1033px) {
            .btn-plan {
                width: 273.32px;
                height: 56px;
                padding: 0 24px;
            }
        }

        .plan-features {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .pf-item {
            display: flex;
            align-items: flex-start;
            gap: 16px;
        }

        .pf-tick {
            width: 16px;
            height: auto;
            max-height: 12px;
            object-fit: contain;
            flex-shrink: 0;
            margin-top: 6px;
        }

        .pf-no-tick {
            width: 14px;
            height: 11px;
            flex-shrink: 0;
            margin-top: 6px;
        }

        .pf-text {
            font-size: 18px;
            font-weight: 500;
            color: var(--color-text-body);
        }

        .pricing-card.premium .pf-text {
            color: var(--color-premium-feat);
        }

        .pf-text.inactive {
            color: var(--color-text-body);
            opacity: 0.4;
        }

        /* Best Value Badge */
        .best-badge {
            position: absolute;
            top: 0;
            right: 24px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .best-badge-text {
            font-size: 15px;
            font-weight: 800;
            color: var(--color-white);
            line-height: 1.2;
            text-align: center;
        }

        /* Devices Row */
        .devices-row {
            border: 0.5px solid #c6cacf;
            border-radius: 12px;
            padding: 16px 32px;
            display: flex;
            align-items: center;
            gap: 32px;
            margin-bottom: 48px;
            justify-content: center;
            background: var(--color-white);
        }

        .devices-text {
            font-size: 18px;
            font-weight: 500;
            color: var(--color-text-body);
        }

        .devices-link {
            font-size: 18px;
            font-weight: 600;
            color: var(--color-primary);
        }

        /* Trust Badges */
        .trust-badges {
            margin-top: -21px;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            text-align: center;
        }

        .trust-badge {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
            justify-content: flex-end;
        }

        @media (min-width: 1033px) {
            .trust-badge img {
                margin-bottom: 2px;
                height: 100px;
                max-height: 100px;
                width: auto;
                object-fit: contain;
            }
        }

        .trust-badge-text {
            font-size: 18px;
            font-weight: 400;
            line-height: 22px;
            color: var(--color-text-body);
        }

        /* Swiper CSS variable overrides for testimonial dots */
        .testi-swiper {
            --swiper-pagination-color: #1f2024 !important;
            --swiper-pagination-bullet-inactive-color: #ffffff !important;
            --swiper-pagination-bullet-inactive-opacity: 1 !important;
            --swiper-pagination-bullet-size: 16px !important;
            --swiper-pagination-bullet-horizontal-gap: 6px !important;
        }

        /* ════════════════════════════
       RESPONSIVE · TABLET 768–1032px
    ════════════════════════════ */
        @media (max-width: 1032px) {

            .hero-mobile-image {
                display: none !important;
            }

            .hero-content {
                width: 60%;
                padding-left: 24px;
            }

            .hero-heading {
                white-space: normal;
            }

            .hero-heading br.desktop-break {
                display: none;
            }

            .hero::after {
                display: none !important;
                content: none !important;
            }

            .block-layout {
                flex-direction: column !important;
                align-items: center !important;
                gap: 32px !important;
            }

            .block-features {
                flex: none !important;
                width: 100% !important;
                max-width: 100% !important;
                flex-direction: row !important;
                display: flex !important;
                overflow-x: auto !important;
                overflow-y: visible !important;
                -webkit-overflow-scrolling: touch !important;
                scrollbar-width: none !important;
                gap: 0 !important;
                padding-bottom: 4px !important;
                order: 1 !important;
            }

            .block-features::-webkit-scrollbar {
                display: none !important;
            }

            .block-feature {
                flex: 0 0 390px !important;
                min-width: 390px !important;
                width: 390px !important;
                min-height: 227.63px !important;
                margin: 0 40px 0 0 !important;
                flex-direction: column !important;
                display: flex !important;
                border-left: none !important;
                border-bottom: 4px solid transparent !important;
                padding-bottom: 16px !important;
                padding-left: 0 !important;
                box-sizing: border-box !important;
                cursor: pointer !important;
                gap: 8px !important;
            }

            .block-feature:last-child {
                margin-right: 0 !important;
            }

            .block-feature.highlighted {
                flex-direction: column !important;
                border-bottom: 4px solid #ffffff !important;
                border-left: none !important;
                gap: 8px !important;
            }

            .block-left-bar {
                display: none !important;
            }

            .bf-title {
                color: #9db5ce !important;
                font-size: 24px !important;
                font-weight: 800 !important;
            }

            .bf-title.white {
                color: #ffffff !important;
            }

            .bf-desc {
                color: #9db5ce !important;
                font-size: 18px !important;
                font-weight: 400 !important;
                line-height: 1.55 !important;
                white-space: normal !important;
                overflow: visible !important;
                display: block !important;
                opacity: 1 !important;
                visibility: visible !important;
            }

            .bf-desc.white {
                color: #ffffff !important;
            }

            .block-tab-image {
                order: 2 !important;
                width: 418px !important;
                height: 548px !important;
                max-width: 418px !important;
                max-height: 548px !important;
                object-fit: cover !important;
                border-radius: 30px !important;
                margin: 0 auto !important;
                flex-shrink: 0 !important;
                display: block !important;
            }

            .blocked-card {
                max-width: 100%;
            }

            .why-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .feat-grid-unified {
                display: grid !important;
                grid-template-columns: 1fr 1fr !important;
                gap: 32px 24px !important;
                width: 100% !important;
                max-width: 100% !important;
                margin-bottom: 32px !important;
                box-sizing: border-box !important;
            }

            .feat-grid-group {
                width: 100% !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
            }

            .feat-card {
                width: 100% !important;
                margin: 0 !important;
                min-height: auto !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                text-align: center !important;
                gap: 12px !important;
                box-sizing: border-box !important;
                padding: 8px !important;
            }

            .feat-icon-wrap {
                width: 64px !important;
                height: 64px !important;
                flex-shrink: 0 !important;
            }

            .feat-card-title {
                font-size: 24px !important;
                text-align: center !important;
            }

            .feat-card-desc {
                font-size: 18px !important;
                text-align: center !important;
                line-height: 1.5 !important;
            }

            .best-section .container {
                max-width: 100% !important;
                width: 100% !important;
                padding: 0 24px !important;
                box-sizing: border-box !important;
            }

            .pricing-cards {
                grid-template-columns: repeat(3, 1fr);
            }

            .trust-badges {
                grid-template-columns: repeat(2, 1fr);
            }

            .testi-grid {
                grid-template-columns: repeat(2, 1fr) !important;
            }

            /* Testimonial Swiper — hide desktop, show tablet */

            .testi-swiper .swiper-slide {
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                box-sizing: border-box !important;
                padding: 10px 40px !important;
            }

            .testi-swiper .testi-card {
                width: 100% !important;
                max-width: 560px !important;
                min-height: auto !important;
                height: auto !important;
                box-sizing: border-box !important;
                margin: 0 auto !important;
                padding: 20px !important;
                border-radius: 15px !important;
                box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.15) !important;
                background: #ffffff !important;
            }

            .testi-swiper {
                overflow: visible !important;
                padding-bottom: 12px !important;
            }

            .testi-swiper-wrap {
                width: 100% !important;
                overflow: visible !important;
                position: relative !important;
                padding-bottom: 24px !important;
            }

            .testi-swiper-pagination {
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                position: relative !important;
                margin-top: 20px !important;
                bottom: auto !important;
                left: auto !important;
                right: auto !important;
            }

            .testi-swiper-pagination .swiper-pagination-bullet {
                width: 16px !important;
                height: 16px !important;
                border-radius: 50% !important;
                background: #ffffff !important;
                border: 2px solid #1f2024 !important;
                box-sizing: border-box !important;
                opacity: 1 !important;
                margin: 0 6px !important;
            }

            .testi-swiper-pagination .swiper-pagination-bullet-active {
                background: #1f2024 !important;
                border-color: #1f2024 !important;
                opacity: 1 !important;
            }

            .testi-swiper .swiper-pagination-bullet-active {
                background: #1f2024 !important;
                background-color: #1f2024 !important;
            }
        }

        /* ════════════════════════════
       RESPONSIVE · TABLET (Mini, Air, Pro, Surface) 768–1032px
    ════════════════════════════ */
        @media (min-width: 768px) and (max-width: 1032px) {

            html,
            body {
                width: 100% !important;
                max-width: 100vw !important;
                overflow-x: hidden !important;
                margin: 0 !important;
                padding: 0 !important;
            }

            .container {
                max-width: 100% !important;
                width: 100% !important;
                padding: 0 24px !important;
                box-sizing: border-box !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
            }

            /* CRITICAL: Kill ALL hero background */
            .hero {
                background: #ffffff !important;
                background-image: none !important;
                background-color: #ffffff !important;
                background-size: unset !important;
                background-position: unset !important;
                background-repeat: unset !important;
                min-height: auto !important;
                padding: 48px 0 60px !important;
                overflow: visible !important;
                /* restored to visible for overlap */
                width: 100% !important;
                position: relative !important;
                isolation: isolate !important;
            }

            .hero-inner {
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                min-height: auto !important;
                padding: 0 !important;
                gap: 40px !important;
                width: 100% !important;
                position: relative !important;
                z-index: 2 !important;
                background: #ffffff !important;
            }

            .hero-content {
                width: 100% !important;
                max-width: 800px !important;
                height: auto !important;
                min-height: 328px !important;
                margin: 0 auto !important;
                padding: 0 !important;
                align-items: center !important;
                text-align: center !important;
                gap: 20px !important;
                display: flex !important;
                flex-direction: column !important;
                justify-content: center !important;
                background: #ffffff !important;
                position: relative !important;
                z-index: 3 !important;
                box-sizing: border-box !important;
            }

            .hero-badge {
                align-self: center !important;
            }

            .hero-heading {
                font-size: 40px !important;
                line-height: 1.3 !important;
                white-space: normal !important;
                text-align: center !important;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                letter-spacing: -0.5px !important;
            }

            .hero::after {
                display: none !important;
                content: none !important;
            }

            .hero-desc {
                font-size: 18px !important;
                font-weight: 500 !important;
                line-height: 24px !important;
                text-align: center !important;
                width: 100% !important;
                max-width: 788px !important;
                margin: 0 !important;
            }

            .hero-content .btn-primary {
                align-self: center !important;
                margin: 0 !important;
            }

            .hero-cta-row {
                justify-content: center;
                width: 100%;
            }

            /* Show hand/phone image BELOW content, tucked behind next section */
            .hero-mobile-image {
                display: block !important;
                width: 100% !important;
                max-width: 800px !important;
                height: auto !important;
                min-height: auto !important;
                margin: 0 auto -60px auto !important;
                /* -60px pulls the next section UP to overlap */
                padding-bottom: 0 !important;
                background-color: transparent !important;
                overflow: visible !important;
                line-height: 0 !important;
                position: relative !important;
                z-index: 1 !important;
            }

            .hero-mobile-image img {
                display: block !important;
                width: 100% !important;
                height: auto !important;
                max-height: 420px !important;
                object-fit: contain !important;
                object-position: center bottom !important;
                content: url("https://www.cms.mobicip.com/wp-content/uploads/2026/04/Picture-→-Porn-blocker-1.svg") !important;
            }

            /* Ensure dark blue section layers ON TOP of the overlapping hero image */
            .block-section {
                position: relative !important;
                z-index: 10 !important;
            }

            .block-layout {
                flex-direction: column !important;
                align-items: center !important;
                gap: 32px !important;
            }

            .block-features {
                flex: none !important;
                width: 100% !important;
                max-width: 100% !important;
                flex-direction: row !important;
                display: flex !important;
                overflow-x: auto !important;
                overflow-y: visible !important;
                -webkit-overflow-scrolling: touch !important;
                scrollbar-width: none !important;
                gap: 0 !important;
                padding-bottom: 4px !important;
                order: 1 !important;
            }

            .block-features::-webkit-scrollbar {
                display: none !important;
            }

            .block-feature {
                flex: 0 0 390px !important;
                min-width: 390px !important;
                width: 390px !important;
                min-height: 227.63px !important;
                margin: 0 40px 0 0 !important;
                flex-direction: column !important;
                display: flex !important;
                border-left: none !important;
                border-bottom: 4px solid transparent !important;
                padding-bottom: 16px !important;
                padding-left: 0 !important;
                box-sizing: border-box !important;
                cursor: pointer !important;
                gap: 8px !important;
            }

            .block-feature:last-child {
                margin-right: 0 !important;
            }

            .block-feature.highlighted {
                flex-direction: column !important;
                border-bottom: 4px solid #ffffff !important;
                border-left: none !important;
                gap: 8px !important;
            }

            .block-left-bar {
                display: none !important;
            }

            .bf-title {
                color: #9db5ce !important;
                font-size: 24px !important;
                font-weight: 800 !important;
            }

            .bf-title.white {
                color: #ffffff !important;
            }

            .bf-desc {
                color: #9db5ce !important;
                font-size: 18px !important;
                font-weight: 400 !important;
                line-height: 1.55 !important;
                white-space: normal !important;
                overflow: visible !important;
                display: block !important;
                opacity: 1 !important;
                visibility: visible !important;
            }

            .bf-desc.white {
                color: #ffffff !important;
            }

            .block-tab-image {
                order: 2 !important;
                width: 418px !important;
                height: 548px !important;
                max-width: 418px !important;
                max-height: 548px !important;
                object-fit: cover !important;
                border-radius: 30px !important;
                margin: 0 auto !important;
                flex-shrink: 0 !important;
                display: block !important;
            }

            .feat-grid-unified {
                display: grid !important;
                grid-template-columns: 1fr 1fr !important;
                gap: 32px 24px !important;
                width: 100% !important;
                max-width: 100% !important;
                margin-bottom: 32px !important;
                box-sizing: border-box !important;
            }

            .feat-grid-group {
                width: 100% !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
            }

            .feat-card {
                width: 100% !important;
                margin: 0 !important;
                min-height: auto !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                text-align: center !important;
                gap: 12px !important;
                box-sizing: border-box !important;
                padding: 8px !important;
            }

            .feat-icon-wrap {
                width: 64px !important;
                height: 64px !important;
                flex-shrink: 0 !important;
            }

            .feat-card-title {
                font-size: 24px !important;
                text-align: center !important;
            }

            .feat-card-desc {
                font-size: 18px !important;
                text-align: center !important;
                line-height: 1.5 !important;
            }

            .best-section {
                padding: 48px 0 !important;
            }

            .best-section .container {
                max-width: 100% !important;
                width: 100% !important;
                padding: 0 24px !important;
                box-sizing: border-box !important;
                margin: 0 auto !important;
            }

            /* Testimonial Swiper — hide desktop, show tablet */
            .testi-desktop {
                display: none !important;
                visibility: hidden !important;
                height: 0 !important;
                overflow: hidden !important;
                pointer-events: none !important;
            }

            .testi-tablet {
                display: block !important;
                visibility: visible !important;
                height: auto !important;
            }

            .testi-swiper .swiper-slide {
                width: 100% !important;
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                box-sizing: border-box !important;
                padding: 10px 40px !important;
            }

            .testi-swiper .testi-card {
                width: 100% !important;
                max-width: 688px !important;
                min-height: auto !important;
                height: auto !important;
                box-sizing: border-box !important;
                margin: 0 auto !important;
                padding: 20px !important;
                border-radius: 15px !important;
                box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.15) !important;
                background: #ffffff !important;
            }

            .testi-swiper-wrap {
                width: 100% !important;
                overflow: hidden !important;
                position: relative !important;
                padding-bottom: 48px !important;
            }

            .testi-swiper-pagination {
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                position: relative !important;
                margin-top: 20px !important;
                bottom: auto !important;
                left: auto !important;
                right: auto !important;
            }

            .testi-swiper-pagination .swiper-pagination-bullet {
                width: 16px !important;
                height: 16px !important;
                border-radius: 50% !important;
                background: #ffffff !important;
                border: 2px solid #1f2024 !important;
                box-sizing: border-box !important;
                opacity: 1 !important;
                margin: 0 6px !important;
            }

            .testi-swiper-pagination .swiper-pagination-bullet-active {
                background: #1f2024 !important;
                border-color: #1f2024 !important;
                opacity: 1 !important;
            }

            .testi-swiper .swiper-pagination-bullet-active {
                background: #1f2024 !important;
                background-color: #1f2024 !important;
            }


            /* ── Lifted out of the 768-820px block, which was the only
                  place these lived. Everything from 821px to 1032px was
                  falling through to the desktop values: the heading kept
                  its fixed 1084px and was cut off, the stars stacked down
                  the card, and "Mobicip Pricing" kept its -84px pull-up
                  and landed on the testimonial. The fixed 648px star row
                  and 688px card width are now fluid so they hold on any
                  tablet rather than only on an iPad Mini. ── */

            .block-heading {
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                padding: 0 8px !important;
                /* The shorthand padding above wipes the base rule's
                   padding-bottom: 15px, which was the only thing holding the
                   heading off the feature cards. 24px matches the phone. */
                margin-bottom: 24px !important;
                white-space: normal !important;
            }

            .why-section .container {
                padding-top: 48px !important;
                padding-bottom: 0 !important;
            }

            /* The two-column reasons grid comes from the max-width: 1032px
               block, so 1024 was the one tablet width showing three. */
            .why-grid {
                grid-template-columns: repeat(2, 1fr) !important;
            }

            .pricing-main-heading {
                margin-top: 0 !important;
            }

            #pricing-cards {
                margin-bottom: 32px !important;
            }

            .pricing-swiper-pagination {
                margin-top: 16px !important;
                margin-bottom: 32px !important;
            }

            .devices-row {
                margin-top: 16px !important;
            }

            .testi-swiper .star_wrapper {
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                gap: 2px !important;
                width: auto !important;
                height: 16px !important;
                margin: 5px 0 4px 0 !important;
            }

            .testi-swiper .star_wrapper img {
                display: inline-block !important;
                width: 16px !important;
                height: 16px !important;
                object-fit: contain !important;
                flex-shrink: 0 !important;
            }

            .testimonials-section .container,
            .testi-swiper-wrap {
                padding-top: 32px !important;
            }

            /* The hero buttons were full desktop size only in this range;
               both the Mini and the Pro block shrank them. */
            .hero-content .btn-primary {
                height: 36px !important;
                font-size: 16px !important;
                padding: 0 20px !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
            }

            .hero-store-badge {
                width: 108px !important;
                height: 36px !important;
            }
        }

        /* ════════════════════════════
       RESPONSIVE · TABLET PRICING CAROUSEL 768-1032px
    ════════════════════════════ */
        @media (min-width: 768px) and (max-width: 1032px) {

            /* Pricing cards container becomes Swiper */
            #pricing-cards {
                display: flex !important;
                flex-direction: row !important;
                flex-wrap: nowrap !important;
                overflow: visible !important;
                width: 100% !important;
                box-sizing: border-box !important;
                margin-bottom: 0 !important;
                padding: 0 !important;
            }

            /* Each card: 312 x 808, padding 32, 32px above - from the inspector readout.
                  The 24px gap between cards is carried by the slide below,
                  so only the top margin is set here; adding the card's own
                  24px right margin on top of it would double the gap. */
            #pricing-cards .pricing-card,
            #pricing-cards .swiper-slide .pricing-card {
                flex: 0 0 312px !important;
                width: 312px !important;
                min-height: 808px !important;
                height: auto !important;
                box-sizing: border-box !important;
                flex-shrink: 0 !important;
                margin: 32px 0 0 0 !important;
                padding: 32px !important;
            }

            /* The base rule pads the button 64px either side, which left only
               about 118px for the label inside a 312px card and broke "Start
               Free Trial" onto two lines. 24px lets it sit on one, and the
               inspector's 56px height and 18px type come with it. The button
               fills the card's content box rather than carrying a fixed
               width, so it tracks the card at every tablet size. */
            .btn-plan {
                width: 100% !important;
                height: 56px !important;
                padding: 0 24px !important;
                font-size: 18px !important;
                font-weight: 700 !important;
                background: #3188F4 !important;
                color: #ffffff !important;
                white-space: nowrap !important;
            }

            /* Swiper slide wrapping each card */
            #pricing-cards .swiper-slide {
                width: 312px !important;
                flex-shrink: 0 !important;
                box-sizing: border-box !important;
                padding: 0 !important;
                margin-right: 24px !important;
            }

            /* Show peek of next card */
            #pricing-cards.swiper {
                overflow: visible !important;
                width: 100% !important;
            }

            #pricing-cards .swiper-wrapper {
                display: flex !important;
                flex-direction: row !important;
                align-items: flex-start !important;
            }

            /* No pagination on tablet - the cards are swiped directly. */
            .pricing-swiper-pagination {
                display: none !important;
            }

            /* Pricing section container must allow overflow 
         so peeked cards are visible */
            .pricing-section .container {
                overflow: visible !important;
            }

            .pricing-section {
                overflow: hidden !important;
            }

            /* Trust badges — single horizontal row, iPad Mini & Air only */
            .trust-badges {
                display: grid !important;
                grid-template-columns: repeat(4, 1fr) !important;
                gap: 16px !important;
                width: 100% !important;
                max-width: 100% !important;
                margin: 32px auto 0 auto !important;
                text-align: center !important;
                box-sizing: border-box !important;
            }

            .trust-badge {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: flex-start !important;
                gap: 12px !important;
            }

            .trust-badge img {
                max-height: 64px !important;
                width: auto !important;
                object-fit: contain !important;
            }

            .trust-badge-text {
                font-size: 14px !important;
                font-weight: 500 !important;
                line-height: 1.4 !important;
                color: var(--color-text-body) !important;
                text-align: center !important;
                white-space: normal !important;
                word-break: normal !important;
            }
        }


        /* ════════════════════════════
       RESPONSIVE · iPAD PRO 1024–1032px — STATIC PRICING GRID
       The only tablet widths where three cards fit side by side, so the
       carousel is switched off here and the cards sit still. The JS does
       not start Swiper in this range either, but the slide markup can
       still be present if the window was narrower earlier in the session,
       so the wrapper and slides are flattened out of the way rather than
       assumed absent.
    ════════════════════════════ */
        @media (min-width: 1024px) and (max-width: 1032px) {

            /* 24px gutters give the three columns and their two 24px gaps
               the room to sit inside the viewport without clipping. */
            .pricing-section .container {
                padding-left: 24px !important;
                padding-right: 24px !important;
                overflow: visible !important;
            }

            #pricing-cards,
            #pricing-cards.swiper {
                display: grid !important;
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                gap: 24px !important;
                overflow: visible !important;
                width: 100% !important;
                margin-bottom: 32px !important;
                padding: 0 !important;
            }

            /* Leftovers from a carousel built at a narrower width. */
            #pricing-cards .swiper-wrapper {
                display: contents !important;
                transform: none !important;
            }

            #pricing-cards .swiper-slide {
                width: auto !important;
                max-width: none !important;
                margin: 0 !important;
                transform: none !important;
            }

            #pricing-cards .pricing-card,
            #pricing-cards .swiper-slide .pricing-card {
                flex: none !important;
                width: 100% !important;
                max-width: none !important;
                min-height: 808px !important;
                margin: 32px 0 0 0 !important;
                padding: 32px !important;
            }

        }


        /* ════════════════════════════
       RESPONSIVE · iPAD PRO 1024–1366px
    ════════════════════════════ */
        @media (min-width: 1033px) and (max-width: 1199px) {
            .block-section {
                padding: 65px 0 65px !important;
            }

            .block-heading {
                margin-bottom: 16px !important;
            }

            /* Hero image alignment and button size for iPad Pro */
            .hero {
                background: #EEEFF0 !important;
                background-image: none !important;
                position: relative !important;
                overflow: hidden !important;
                min-height: 620px !important;
                margin-top: 0px !important;
                padding-top: 60px !important;
                z-index: 1 !important;
            }

            .hero::after {
                content: '' !important;
                position: absolute !important;
                top: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                width: 52% !important;
                background: url('https://www.cms.mobicip.com/wp-content/uploads/2026/05/Picture-→-Porn-blocker.png') no-repeat right bottom !important;
                background-size: auto 100% !important;
                z-index: 0 !important;
                pointer-events: none !important;
            }

            .hero-inner::after {
                content: none !important;
                display: none !important;
            }

            .hero .container {
                position: relative !important;
                z-index: 2 !important;
            }

            .hero-inner {
                position: relative !important;
            }

            .hero .btn-primary {
                width: 194px !important;
                height: 56px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                box-sizing: border-box !important;
                padding: 0 20px !important;
            }

            .hero-content {
                width: 44% !important;
                max-width: 44% !important;
                align-items: flex-start !important;
                text-align: left !important;
                position: relative !important;
                z-index: 2 !important;
            }

            .hero-content * {
                white-space: normal !important;
            }

            .hero-heading {
                width: 100% !important;
                max-width: 992px !important;
                white-space: nowrap !important;
            }

            .hero-heading .desktop-break {
                display: none !important;
            }

            .hero-desc {
                width: 100% !important;
                max-width: 992px !important;
            }

            /* Container full width on iPad Pro */
            .container {
                max-width: 100% !important;
                width: 100% !important;
                padding: 0 131px !important;
                box-sizing: border-box !important;
            }

            .testimonials-section .container {
                padding-left: 24px !important;
                padding-right: 24px !important;
            }

            /* Best section heading and description text — 992px wide */
            .best-heading {
                width: 992px !important;
                max-width: 100% !important;
                margin-left: auto !important;
                margin-right: auto !important;
                box-sizing: border-box !important;
            }

            .best-desc {
                width: 1084px !important;
                max-width: 100% !important;
                margin-left: auto !important;
                margin-right: auto !important;
                text-align: center !important;
                box-sizing: border-box !important;
            }

            /* Why section text — 992px wide */
            .why-heading {
                width: 992px !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }

            .why-desc {
                width: 1078px !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }

            /* Unified feat grid — 800px wide, 2 columns */
            .feat-grid-unified {
                display: grid !important;
                grid-template-columns: 1fr 1fr !important;
                gap: 32px 24px !important;
                width: 800px !important;
                max-width: 100% !important;
                margin: 0 auto 0 auto !important;
                box-sizing: border-box !important;
            }

            /* Also apply to original .feat-grid if
         feat-grid-unified restructure hasn't been done yet */
            .feat-grid {
                display: grid !important;
                grid-template-columns: 1fr 1fr !important;
                gap: 32px 24px !important;
                width: 800px !important;
                max-width: 100% !important;
                margin: 0 auto 0 auto !important;
                box-sizing: border-box !important;
            }

            .feat-grid-group {
                width: 100% !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
            }

            .feat-card {
                width: 100% !important;
                margin: 0 !important;
                min-height: auto !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                text-align: center !important;
                gap: 16px !important;
                box-sizing: border-box !important;
            }

            .feat-card-title {
                font-size: 24px !important;
                text-align: center !important;
            }

            .feat-card-desc {
                font-size: 18px !important;
                text-align: center !important;
                line-height: 1.5 !important;
            }

            .feat-cta {
                margin: 35px 0px 40px !important;
                display: flex !important;
                justify-content: center !important;
                width: 100% !important;
            }

            /* Pricing sizing for iPad Pro */
            .pricing-card {
                width: 338.32px !important;
                max-width: 100% !important;
                margin: 0 auto !important;
                box-sizing: border-box !important;
            }

            .btn-plan {
                width: 273.32px !important;
                height: 56px !important;
                padding: 0 !important;
                box-sizing: border-box !important;
            }

            .devices-row {
                max-width: 1094px;
            }

            /* Testimonial Swiper — hide desktop, show tablet */
            .testi-desktop {
                display: none !important;
                visibility: hidden !important;
                height: 0 !important;
                overflow: hidden !important;
                pointer-events: none !important;
            }

            .testi-tablet {
                display: block !important;
                visibility: visible !important;
                height: auto !important;
            }

            .testi-swiper .swiper-slide {
                width: 100% !important;
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                box-sizing: border-box !important;
                padding: 10px 60px !important;
            }

            .testi-swiper .testi-card {
                width: 100% !important;
                max-width: 688px !important;
                min-height: 206px !important;
                height: auto !important;
                box-sizing: border-box !important;
                margin: 0 auto !important;
                padding: 20px !important;
                border-radius: 15px !important;
                box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.15) !important;
                background: #ffffff !important;
            }

            .testi-swiper-wrap {
                width: 100% !important;
                overflow: hidden !important;
                position: relative !important;
                padding-bottom: 48px !important;
            }

            .testi-swiper-pagination {
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                position: relative !important;
                margin-top: 20px !important;
                bottom: auto !important;
                left: auto !important;
                right: auto !important;
            }

            .testi-swiper-pagination .swiper-pagination-bullet {
                width: 16px !important;
                height: 16px !important;
                border-radius: 50% !important;
                background: #ffffff !important;
                border: 2px solid #1f2024 !important;
                box-sizing: border-box !important;
                opacity: 1 !important;
                margin: 0 6px !important;
            }

            .testi-swiper-pagination .swiper-pagination-bullet-active {
                background: #1f2024 !important;
                border-color: #1f2024 !important;
                opacity: 1 !important;
            }

            .testi-swiper .swiper-pagination-bullet-active {
                background: #1f2024 !important;
                background-color: #1f2024 !important;
            }

            .pricing-cards {
                gap: 24px !important;
            }

            .testi-swiper .star_wrapper {
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                gap: 2px !important;
                width: auto !important;
                height: 16px !important;
                margin: 5px 0 4px 0 !important;
            }

            .testi-swiper .star_wrapper img {
                display: inline-block !important;
                width: 16px !important;
                height: 16px !important;
                object-fit: contain !important;
                flex-shrink: 0 !important;
            }

            .pricing-main-heading {
                margin-top: 24px !important;
            }
        }

        /* ════════════════════════════
       RESPONSIVE · FORCE STATIC DESKTOP GRID (1033px+)
    ════════════════════════════ */
        @media (min-width: 1033px) {

            /* Force static 3-column grid even if Swiper JS injected wrappers */
            #pricing-cards.swiper {
                display: block !important;
            }

            #pricing-cards .swiper-wrapper {
                display: grid !important;
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 24px !important;
                transform: none !important;
                width: 100% !important;
                margin: 0 auto !important;
            }

            #pricing-cards .swiper-slide {
                width: auto !important;
                height: auto !important;
                flex-shrink: 1 !important;
                margin: 0 !important;
                display: block !important;
            }

            #pricing-dots {
                display: none !important;
            }
        }

        /* ════════════════════════════
       RESPONSIVE · MOBILE ≤767px
    ════════════════════════════ */
        @media (max-width: 767px) {

            html,
            body {
                width: 100% !important;
                max-width: 100vw !important;
                overflow-x: hidden !important;
                margin: 0 !important;
                padding: 0 !important;
            }

            /* Fix 1: Hero background and layout */
            .hero {
                background: #ffffff !important;
                background-image: none !important;
                background-color: #ffffff !important;
                min-height: auto;
                padding-top: 20px;
                padding-bottom: 0 !important;
                overflow: visible;
            }

            .hero-inner {
                flex-direction: column;
                align-items: center;
                padding: 32px 0 0;
                width: 100%;
                min-height: auto;
                gap: 0;
                background: transparent;
                box-shadow: none;
                border: none;
                overflow: visible;
            }

            /* Fix 2: Hero content alignment and sizing */
            .container {

                padding-left: 16px !important;
                padding-right: 16px !important;
                box-sizing: border-box !important;
                width: 100% !important;
                max-width: 100% !important;
            }

            .hero-content {
                width: 100%;
                max-width: 100%;
                margin-left: 0;
                margin-right: 0;
                padding: 0;
                align-items: center;
                text-align: center;
                gap: 20px;
            }

            .hero-badge {
                align-self: center;
                font-size: 13px;
            }

            .hero-heading {
                width: 100%;
                max-width: 100%;
                font-size: 30px;
                font-weight: 800;
                line-height: 1.3;
                white-space: normal;
                text-align: center;
                display: block;
                overflow: visible;
            }

            .hero::after {
                display: none !important;
                content: none !important;
            }

            .hero-desc {
                width: 100%;
                max-width: 100%;
                margin: 16px 0 0;
                font-size: 16px;
                font-weight: 400;
                line-height: 1.6;
                color: #616b7b;
                text-align: center;
                display: block;
                overflow: visible;
                white-space: normal;
            }

            .hero-content .btn-primary {
                width: 312px;
                height: 44px;
                margin: 0;
                align-self: center;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 18px;
                font-weight: 700;
                padding: 0 20px;
                border-radius: 999px;
            }

            .hero-cta-row {
                flex-direction: column;
                align-items: center;
                width: 100%;
                gap: 12px;
            }

            .hero-store-row {
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                gap: 8px;
                width: 100%;
            }

            .hero-store-row .hero-store-badge {
                width: 132px;
                height: 44px;
            }

            /* Fix 3: Show the phone/hand image below the hero content */
            .hero-mobile-image {
                display: block !important;
                width: calc(100% + 50px) !important;
                margin-left: -16px !important;
                margin-right: -24px !important;
                margin-top: 32px !important;
                background-color: #eeeff0 !important;
                overflow: hidden !important;
                line-height: 0 !important;
                min-height: auto !important;
            }

            .hero-mobile-image img {
                display: block !important;
                width: 100% !important;
                max-width: 430px !important;
                height: auto !important;
                object-fit: contain;
                object-position: top center;
                content: url("https://media.mobicip.com/wp-content/uploads/2026/06/11110346/Banner-1.png") !important;
            }

            .block-heading {
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                padding: 0 16px !important;
                font-size: 26px !important;
                line-height: 1.4 !important;
                margin-bottom: 24px !important;
                text-align: center !important;
            }


            .block-layout {
                flex-direction: column;
                align-items: center;
                gap: 24px;
            }

            .block-features {
                flex: none;
                width: 100%;
                max-width: 100%;
                flex-direction: row;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                gap: 0;
                padding-bottom: 8px;
                list-style: none;
                order: 1;
            }

            .block-features::-webkit-scrollbar {
                display: none;
            }

            /* Each feature item — mobile dimensions */
            .block-feature {
                flex: 0 0 256px !important;
                min-width: 256px !important;
                width: 256px !important;
                margin: 0 32px 0 0 !important;
                flex-direction: column;
                border-left: none;
                border-bottom: 4px solid transparent;
                padding-bottom: 12px;
                padding-left: 0;
                box-sizing: border-box;
            }

            .block-feature.highlighted {
                flex-direction: column;
                border-bottom-color: #ffffff;
                gap: 8px;
            }

            .block-left-bar {
                display: none !important;
            }

            .bf-title {
                font-size: 20px !important;
                margin-bottom: 10px !important;
            }

            .bf-desc {
                font-size: 16px !important;
            }

            /* Feature image — mobile dimensions from inspector: 300 × 393.3 */
            .block-tab-image {
                order: 2 !important;
                width: 300px !important;
                height: 393.3px !important;
                max-width: 300px !important;
                max-height: 393.3px !important;
                object-fit: cover !important;
                border-radius: 20px !important;
                margin: 0 auto !important;
            }

            .blocked-card {
                max-width: 100%;
            }

            .why-section {
                padding: 25px 0 !important;
            }

            .why-grid {
                grid-template-columns: 1fr;
            }

            .why-heading {
                font-size: 26px;
            }

            .why-card-title {
                font-size: 24px;
            }

            .why-desc {
                font-size: 16px;
            }

            .why-card-desc {
                font-size: 18px;
                color: #383e48;
            }

            .why-blog-link {
                margin-bottom: 32px !important;
                margin-top: 24px !important;
            }

            .best-section {
                padding: 40px 0;
            }

            .best-heading {
                font-size: 26px;
            }

            .best-desc {
                font-size: 16px;
            }

            .best-section .btn-primary {
                width: auto !important;
                min-width: 168px !important;
                height: 48px !important;
                padding: 0 24px !important;
                font-size: 18px !important;
                white-space: nowrap !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
            }

            .star_wrapper {
                display: flex !important;
                flex-direction: row !important;
                align-items: center !important;
                gap: 2px !important;
                width: auto !important;
                height: 16px !important;
                margin: 5px 0 4px 0 !important;
            }

            .star_wrapper img {
                display: inline-block !important;
                width: 16px !important;
                height: 16px !important;
                object-fit: contain !important;
                flex-shrink: 0 !important;
            }

            .feat-grid {
                grid-template-columns: 1fr;
            }

            .feat-grid-unified {
                display: grid !important;
                grid-template-columns: 1fr !important;
                gap: 24px !important;
                width: 100% !important;
                margin-bottom: 24px !important;
            }

            .pricing-section {
                padding: 40px 0;
            }

            .pricing-section .container {
                padding: 0 !important;
                max-width: 100% !important;
                width: 100% !important;
                overflow: visible !important;
            }

            .pricing-main-heading,
            .pricing-heading,
            .pricing-sub {
                padding-left: 24px !important;
                padding-right: 24px !important;
            }

            .pricing-main-heading {
                font-size: 30px !important;
                margin-top: 24px !important;
            }

            .pricing-heading {
                font-size: 22px;
            }

            .pricing-sub {
                font-size: 16px;
            }

            .plan-name {
                font-size: 18px;
            }

            .plan-price {
                font-size: 30px;
            }

            .plan-period {
                font-size: 14px;
            }

            .plan-billing {
                padding-top: 3px;
                font-size: 14px;

            }

            .pf-text {
                font-size: 16px;
            }

            #pricing-cards {
                display: flex !important;
                flex-direction: column !important;
                gap: 16px !important;
                width: 100% !important;
                padding: 0 16px !important;
                box-sizing: border-box !important;
                overflow: visible !important;
            }

            #pricing-cards .swiper-wrapper {
                display: flex !important;
                flex-direction: column !important;
                gap: 16px !important;
                transform: none !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }

            #pricing-cards .swiper-slide,
            #pricing-cards .pricing-card {
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 !important;
                flex-shrink: unset !important;
            }

            .pricing-swiper-pagination {
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                margin-top: 24px !important;
                margin-bottom: 24px !important;
            }

            .btn-plan {
                width: 264px !important;
                height: 48px !important;
                padding: 0 20px !important;
                font-size: 18px !important;
                font-weight: 700 !important;
                margin-top: 0 !important;
            }

            .trust-badges {
                grid-template-columns: repeat(2, 1fr);
            }

            /* ── Testimonial Carousel — mobile only ── */
            .testi-desktop {
                display: none !important;
                visibility: hidden !important;
                height: 0 !important;
                overflow: hidden !important;
                pointer-events: none !important;
            }

            .testi-tablet {
                display: block !important;
                visibility: visible !important;
                height: auto !important;
            }

            .testi-swiper .swiper-slide {
                display: flex !important;
                justify-content: center !important;
                align-items: center !important;
                box-sizing: border-box !important;
                padding: 10px 16px !important;
                width: 100% !important;
                max-width: 100% !important;
            }

            .testi-swiper .testi-card {
                margin: 0 auto !important;
                flex: 1 !important;
                width: 100% !important;
                max-width: 100% !important;
                height: auto !important;
                min-height: 244px !important;
                box-sizing: border-box !important;
            }

            /* Font size overrides — mobile only */
            .testi-name {
                font-size: 14px !important;
            }

            .testi-text {
                font-size: 18px !important;
                line-height: 1.6 !important;
            }

            .devices-row {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;
                gap: 8px;
                flex-wrap: nowrap;
                width: 398px;
                max-width: 100%;
                min-height: 81px;
                height: auto;
                margin: 24px auto 0px auto;
                padding: 16px;
                background: #FFFFFF;
                border-radius: 12px;
                border: 0.5px solid #c6cacf;
                box-sizing: border-box;
            }

            .devices-row img {
                flex-shrink: 0;
                width: 62.17px;
                height: auto;
                object-fit: contain;
            }

            .devices-text-wrap {
                flex: 1;
                display: block;
                line-height: 1.5;
                max-width: 260px;
                margin-left: 8px;
                text-align: left;
            }

            .devices-text-wrap p,
            .devices-text-wrap span,
            .devices-text-wrap a {
                display: inline !important;
            }

            .devices-text {
                display: inline !important;
                font-size: 16px;
                font-weight: 500;
                color: var(--color-text-body);
                white-space: normal;
            }

            .devices-link {
                display: inline !important;
                font-size: 16px;
                font-weight: 600;
                color: #3187F3;
                white-space: normal;
                margin-left: 4px;
            }
        }

        /* MUST be absolute last rule in <style> */
        @media (min-width: 1033px) {
            .hero {
                background: #EEEFF0 !important;
                background-image: none !important;
                position: relative !important;
                overflow: hidden !important;
                min-height: 388px !important;
                height: 536px !important;
                margin-top: 0 !important;
                padding-top: 0 !important;
                z-index: 1 !important;
            }

            body::before {
                background: #EEEFF0;
            }

            .hero::after {
                content: '' !important;
                position: absolute !important;
                top: 0 !important;
                right: 0 !important;
                left: 120px !important;
                width: 100% !important;
                height: 100% !important;
                background: url('https://www.cms.mobicip.com/wp-content/uploads/2026/05/Picture-→-Porn-blocker.png') no-repeat right center !important;
                background-size: auto 100% !important;
                z-index: 0 !important;
                pointer-events: none !important;
            }

            .hero-inner {
                flex-direction: row !important;
                min-height: 388px !important;
                height: 388px !important;
                align-items: center !important;
                padding: 0 !important;
                gap: 0 !important;
                background: transparent !important;
                position: relative !important;
                z-index: 2 !important;
            }

            .hero-content {
                width: 1084px !important;
                max-width: 1084px !important;
                flex: 0 0 1084px !important;
                min-height: 388px !important;
                padding-top: 17px !important;
                padding-bottom: 62px !important;
                margin-left: 1px !important;
                align-items: flex-start !important;
                text-align: left !important;
                gap: 16px !important;
                justify-content: flex-start !important;
                position: relative !important;
                z-index: 2 !important;
                margin-bottom: 39px;
            }

            .hero-heading {
                margin-top: -8px;
                width: 690px !important;
                max-width: 690px !important;
                height: 120px !important;
                font-size: 44px !important;
                font-weight: 800 !important;
                color: #1F2024 !important;
                white-space: normal !important;
                text-align: left !important;
                line-height: 60px !important;
            }

            .hero-desc {
                margin-bottom: 21px;
                text-align: left !important;
                font-size: 18px !important;
                color: #616b7b !important;
                font-weight: 600 !important;
                max-width: 687px !important;
                /* letter-spacing: 0.3px; */
                width: 686px !important;
                line-height: 25px;
            }

            .hero .btn-primary {
                width: 220px !important;
                height: 44px !important;
                padding: 0 24px !important;
                font-size: 18px !important;
                font-weight: 700 !important;
                background: #3188F4 !important;
                border-radius: 999px !important;
                align-self: flex-start !important;
            }

            .hero-badge {
                align-self: flex-start !important;
            }

            .hero-mobile-image {
                display: none !important;
            }

            .hero-badge {
                align-self: flex-start !important;
            }

            .container {
                padding-top: 96px !important;
                padding-bottom: 96px !important;
            }

            .hero .btn-primary {
                width: 220px !important;
                height: 44px !important;
                padding: 0 24px !important;
                font-size: 18px !important;
                border-radius: 999px !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
            }

            .pricing-section .container {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                margin-bottom: -90px;
                padding-left: 0;
            }

            .pricing-cards {
                display: grid !important;
                grid-template-columns: repeat(3, 337.33px) !important;
                justify-content: center !important;
                width: 100% !important;
                margin: 0 auto 24px auto !important;
            }

            .pricing-card {
                width: 337.33px !important;
                min-height: 808px !important;
                margin: 0 !important;
                padding: 32px !important;
                box-sizing: border-box !important;
            }

            .devices-row {
                width: 1059px !important;
                max-width: 1059px !important;
                margin: 0 auto 24px auto !important;
                box-sizing: border-box !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
            }

            .trust-badges {
                width: 1059px !important;
                max-width: 1059px !important;
                margin: 0 auto !important;
                display: grid !important;
                grid-template-columns: repeat(4, 1fr) !important;
                gap: 24px !important;
                box-sizing: border-box !important;
            }

            .why-section .container {
                padding-top: 96px !important;
                padding-bottom: 0px !important;
                padding-left: 135px !important;
                padding-right: 135px !important;
                max-width: 1290px !important;
                width: 100% !important;
                margin-left: auto !important;
                margin-right: auto !important;
                box-sizing: border-box !important;
            }

            .best-section .container {
                padding-top: 96px !important;
                padding-bottom: 44px !important;
                padding-left: 131px !important;
                padding-right: 131px !important;
                max-width: 1290px !important;
                width: 100% !important;
                margin-left: auto !important;
                margin-right: auto !important;
                box-sizing: border-box !important;
            }

            .why-card-title {
                white-space: nowrap !important;
                font-size: 24px !important;
                font-weight: 700 !important;
            }

            .why-grid {
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 24px !important;
            }

            .feat-card {
                margin: 0 !important;
            }

            .feat-grid-unified {
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 40px 24px !important;
            }

            .best-desc {
                display: inline-block !important;
                font-size: 18px !important;
                font-weight: 500 !important;
                line-height: 28px !important;
                color: #383e48 !important;
                text-align: center !important;
                max-width: 100% !important;
            }

            .feat-card-desc {
                display: inline-block !important;
                font-size: 18px !important;
                font-weight: 400 !important;
                line-height: 28px !important;
                color: #383e48 !important;
                text-align: center !important;
            }
        }

        @media (min-width: 1200px) and (max-width: 1299px) {
            .block-section {
                padding: 65px 0 65px !important;
            }

            .block-heading {
                margin-bottom: 16px !important;
            }

            .hero>.container {
                margin-left: 63px !important;
                padding-left: 24px !important;
                padding-right: 24px !important;
                padding-top: 104px !important;
            }

            .block-section .container {
                max-width: 100% !important;
                width: 100% !important;
                padding: 0 87px !important;
                box-sizing: border-box !important;
            }

            .best-section {
                background-color: #f2f8ff !important;
                padding: 0px 0 !important;
                text-align: center !important;
            }

            .why-section {
                background: var(--color-white) !important;
                padding: 0px 0 !important;
            }

            .testi-desktop {
                display: grid !important;
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 48px !important;
                visibility: visible !important;
                height: auto !important;
                overflow: visible !important;
                pointer-events: auto !important;
                width: 100% !important;
            }

            .testi-track {
                display: contents !important;
            }

            .testi-card {
                display: flex !important;
                flex-direction: column !important;
                visibility: visible !important;
                height: auto !important;
                width: auto !important;
                flex: unset !important;
            }

            .testi-tablet {
                display: none !important;
                visibility: hidden !important;
                height: 0 !important;
                overflow: hidden !important;
                pointer-events: none !important;
            }

            .feat-grid-unified {
                display: grid !important;
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 24px !important;
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 auto !important;
                box-sizing: border-box !important;
            }

            .feat-grid {
                display: grid !important;
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 24px !important;
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 auto !important;
                box-sizing: border-box !important;
            }

            .pricing-cards {
                gap: 24px !important;
            }
        }

        @media (min-width: 1100px) and (max-width: 1199px) {
            .block-section {
                padding: 65px 0 65px !important;
            }

            .block-heading {
                margin-bottom: 16px !important;
            }

            .hero>.container {
                margin-left: 0 !important;
                padding-left: 87px !important;
                padding-right: 24px !important;
                padding-top: 85px !important;
            }



            .block-section .container {
                max-width: 100% !important;
                width: 100% !important;
                padding: 0 87px !important;
                box-sizing: border-box !important;
            }

            .best-section {
                background-color: #f2f8ff !important;
                padding: 0px 0 !important;
                text-align: center !important;
            }

            .why-section {
                background: var(--color-white) !important;
                padding: 0px 0 !important;
            }

            .testi-desktop {
                display: grid !important;
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 48px !important;
                visibility: visible !important;
                height: auto !important;
                overflow: visible !important;
                pointer-events: auto !important;
                width: 100% !important;
            }

            .testi-track {
                display: contents !important;
            }

            .testi-card {
                display: flex !important;
                flex-direction: column !important;
                visibility: visible !important;
                height: auto !important;
                width: auto !important;
                flex: unset !important;
            }

            .testi-tablet {
                display: none !important;
                visibility: hidden !important;
                height: 0 !important;
                overflow: hidden !important;
                pointer-events: none !important;
            }

            .feat-grid-unified {
                display: grid !important;
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 24px !important;
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 auto !important;
                box-sizing: border-box !important;
            }

            .feat-grid {
                display: grid !important;
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 24px !important;
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 auto !important;
                box-sizing: border-box !important;
            }

            .pricing-cards {
                gap: 24px !important;
            }
        }

        @media (min-width: 1234px) and (max-width: 1260px) {
            .hero-inner {
                flex-direction: row !important;
                min-height: 388px !important;
                height: 388px !important;
                align-items: center !important;
                gap: 0 !important;
                background: transparent !important;
                position: relative !important;
                z-index: 2 !important;
                margin-left: -18px;
            }

            .block-features {
                padding-left: 25px !important;
            }

            .container {
                padding-left: 68px !important;
            }
        }

        @media (min-width: 1033px) and (max-width: 1099px) {
            .block-section {
                padding: 65px 0 65px !important;
            }

            .block-heading {
                margin-bottom: 16px !important;
            }

            .hero>.container {
                margin-left: 0 !important;
                padding-left: 17px !important;
                padding-right: 24px !important;
                padding-top: 85px !important;
            }

            .block-section .container {
                max-width: 100% !important;
                width: 100% !important;
                padding: 0 27px !important;
                box-sizing: border-box !important;
            }

            .container {
                max-width: 100% !important;
                width: 100% !important;
                padding: 0 26px !important;
                box-sizing: border-box !important;
            }

            .best-section {
                background-color: #f2f8ff !important;
                padding: 0px 0 !important;
                text-align: center !important;
            }

            .why-section {
                background: var(--color-white) !important;
                padding: 0px 0 !important;
            }

            .testi-desktop {
                display: grid !important;
                grid-template-columns: repeat(2, 1fr) !important;
                gap: 48px !important;
                visibility: visible !important;
                height: auto !important;
                overflow: visible !important;
                pointer-events: auto !important;
                width: 100% !important;
            }

            .testi-track {
                display: contents !important;
            }

            .testi-card {
                display: flex !important;
                flex-direction: column !important;
                visibility: visible !important;
                height: auto !important;
                width: auto !important;
                flex: unset !important;
            }

            .testi-tablet {
                display: none !important;
                visibility: hidden !important;
                height: 0 !important;
                overflow: hidden !important;
                pointer-events: none !important;
            }

            .feat-grid-unified {
                display: grid !important;
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 24px !important;
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 auto !important;
                box-sizing: border-box !important;
            }

            .feat-grid {
                display: grid !important;
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 24px !important;
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 auto !important;
                box-sizing: border-box !important;
            }

            .pricing-cards {
                gap: 24px !important;
            }
        }

        /* 110% zoom — viewport ~1150px to 1179px */
        @media (min-width: 1150px) and (max-width: 1179px) {
            .block-section {
                padding: 65px 0 65px !important;
            }

            .block-heading {
                margin-bottom: 16px !important;
            }

            .hero-content {
                width: 1084px !important;
                max-width: 1084px !important;
                flex: 0 0 1084px !important;
                min-height: 388px !important;
                padding: 0 !important;
                margin-left: -55px !important;
            }

            .block-section .container {
                max-width: 100% !important;
                width: 100% !important;
                padding: 0 35px 87px !important;
                box-sizing: border-box !important;
            }

            .container {
                max-width: 100% !important;
                width: 100% !important;
                padding: 85px 35px 85px !important;
                box-sizing: border-box !important;
            }
        }

        /* Only allow wrap at narrower desktop — 110% zoom range */
        @media (min-width: 1033px) and (max-width: 1400px) {
            .block-section {
                padding: 65px 0 65px !important;
            }

            .block-heading {
                margin-bottom: 16px !important;
            }

            .hero-heading {
                width: 690px !important;
                max-width: 690px !important;
                font-size: 44px !important;
                white-space: normal !important;
            }

            .hero-desc {
                max-width: 690px !important;
                width: 690px !important;
            }

            .hero-content {
                padding-top: 24px !important;
                padding-bottom: 24px !important;
                justify-content: flex-start !important;
                gap: 16px !important;
            }

            .pricing-cards {
                gap: 24px !important;
            }
        }

/* ========================================
   SPACE ABOVE THE HERO (desktop)
   Nothing above this line is modified.

   Requested: a little breathing room between the fixed header and the
   hero, so the phone artwork (the hero's background image, anchored
   right-bottom) no longer sits flush against the header bar.

   Applied as a margin on .hero rather than padding so the hero's own
   height, background sizing and the 117px inner padding at this
   breakpoint are untouched. Desktop only - the tablet and phone
   breakpoints already restack the hero with their own spacing.
======================================== */

@media (min-width: 1033px) {
    .hero {
        margin-top: 24px !important;
    }
}

/* ========================================
   MOBILE / TABLET HEADER CLEARANCE (this page)
   Nothing above this line is modified.

   This export resets body { padding: 0 !important } in its tablet and
   phone breakpoints (768-1032px and <=767px). Those rules
   load after header.css, so they cancel the shared clearance appended
   there and the hero badge and heading slide back under the 80px fixed
   header. Restated here, after the export's rules, so this page gets
   the same 80px + 16px clearance as every other page. Desktop is
   untouched.
======================================== */

@media (max-width: 1032px) {
    body {
        padding-top: 96px !important;
    }
}

/* ========================================
   QUOTE BOX AND AWARDS ROW ON PHONES
   Nothing above this line is modified.

   Sized from the measurements taken off the live page at 393px:
     quote box   361 x 81, margin 24px 0 0, padding 24px
     Mom's Choice        58 x 58
     Certified Secure   101 x 30.91
     Trusted Provider   117 x 80
     Satisfaction        58 x 57.42
     caption            168.5 wide, 12px Manrope #383e48, 8px above
   The 168.5px caption width is the grid column itself: a 16px gutter
   each side of the 393px viewport leaves 361px, and a 24px gap between
   two columns leaves 168.5px each, so the grid is inset rather than the
   captions being sized directly.

   .trust-badges also carries margin-top: -21px, a desktop pull-up with
   no phone counterpart, which sat the Mom's Choice badge inside the
   quote box above it. The quote box already supplies the gap below
   itself, so the pull-up is cancelled here.

   Phones only; 768px and above keep every value they have.
======================================== */

@media (max-width: 767px) {

    .devices-row {
        width: auto;
        max-width: none;
        margin: 24px 16px 0;
        padding: 24px;
    }

    /* margin-top cancels the -21px pull-up and adds the 24px the live
       page leaves between the quote box and the first badge; the rows
       themselves sit closer together than the columns do. */
    .trust-badges {
        margin-top: 20px;
        padding: 0 16px;
        row-gap: 12px;
        column-gap: 24px;
    }

    /* The caption's own 8px replaces the column's 16px gap. */
    .trust-badge {
        gap: 0;
    }

    .trust-badge img {
        object-fit: contain;
        /* The Certified Secure badge carries its offsets inline. */
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .trust-badge:nth-child(1) img {
        width: 58px;
        height: 58px;
    }

    /* Width only: this file's badge artwork is 131x80 rather than the
       101x30.91 the live page serves, so a fixed height would letterbox
       it down to half the width asked for. At 101px wide it draws the
       same size as the measurement. */
    .trust-badge:nth-child(2) img {
        width: 101px;
        height: auto;
    }

    .trust-badge:nth-child(3) img {
        width: 117px;
        height: 80px;
    }

    .trust-badge:nth-child(4) img {
        width: 58px;
        height: auto;
    }

    .trust-badge-text {
        font-size: 12px;
        line-height: 16px;
        margin-top: 8px;
    }
}

/* ========================================
   TESTIMONIAL BREATHING ROOM ON PHONES
   Nothing above this line is modified.

   The card sat 10px below the top of the white band - just the slide's
   own padding - and the dots sat 11px above the pricing band, because
   .testimonials-section carries margin-bottom: -25px and swallowed most
   of the 36px underneath it. Both become 24-26px here. The pull-up is
   reduced rather than removed, so the white band still tucks under the
   section below it the way the export intends.

   Phones only; 768px and above keep the full -25px and no top padding.
======================================== */

@media (max-width: 767px) {
    .testimonials-section {
        padding-top: 16px;
        margin-bottom: -12px;
    }
}

/* ========================================
   DESKTOP PRICING OVERFLOW AND CENTRING
   Nothing above this line is modified. Desktop only (1033px and up);
   the tablet and phone breakpoints are untouched.

   Two faults, both of which put the last pricing card against - or past
   - the right edge of the window.

   The export pins .devices-row and .trust-badges to a flat 1059px and
   .block-heading to 1084px. As soon as the window is narrower than
   those plus the container's own padding, they run off the right edge
   and the page scrolls sideways: at 1100px the document was 105px wider
   than the viewport. Capping them at the container cures that, and
   every window wide enough to have fitted them already is unchanged,
   because the cap only binds below roughly 1320px.

   Separately, .pricing-section .container had padding-left zeroed while
   padding-right kept the base 24px, so the whole pricing block - cards,
   quote box and awards - sat 24px left of centre at every desktop
   width, leaving the last card closer to the right edge than the first
   was to the left.
======================================== */

@media (min-width: 1033px) {

    .devices-row,
    .trust-badges {
        max-width: 100% !important;
    }

    .block-heading {
        max-width: 100%;
    }

    /* Both sides are pinned, not just the left. The export zeroes
       padding-left here, and at 1234-1260px a generic
       .container { padding-left: 68px !important } lands on top of it,
       so a plain padding-left could not win and the block sat 44px off
       centre in that band. Setting the pair keeps it symmetric at every
       desktop width whatever those per-zoom rules do. */
    .pricing-section .container {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    /* The dark feature block is a 570px list beside a 418px image with a
       128px gap - 1116px of fixed widths. Below about 1210px that is
       wider than the container, and because the image is flex: 0 0 418px
       it could not give any of it back, so the whole page scrolled
       sideways and every section drifted with it. Letting the two sides
       shrink costs nothing at wider widths, where there is already room
       and the shrink never engages. */
    .block-features {
        min-width: 0 !important;
    }

    .block-tab-image {
        flex-shrink: 1 !important;
        min-width: 0 !important;
        max-width: 418px !important;
    }

    /* Same story for the three pricing columns: 3 x 337.33 plus two 24px
       gaps is 1060px of fixed track, which does not fit a 1033px window.
       minmax lets the tracks give way only when they have to - above
       roughly 1130px they still resolve to the full 337.33. */
    .pricing-cards {
        grid-template-columns: repeat(3, minmax(0, 337.33px)) !important;
    }

    .pricing-cards .pricing-card {
        width: 100% !important;
        max-width: 337.33px !important;
    }
}