/* ===== CSS RESET & VARIABLES ===== */
        *,
        / *::before,
        *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --color-primary: #3188F4;
            --color-primary-light: #D6E7FD;
            --color-primary-hover: #2570d4;
            --color-bg: #FBFBFB;
            --color-trust-bar: #F2F8FF;
            --color-heading: #1F2024;
            --color-body: #616B7B;
            --color-body-secondary: #383E48;
            --color-label: #454A55;
            --color-feature-desc: #626C7C;
            --color-border: #E5E7EB;
            --color-tag-border: #B2BFCE;
            --color-red: #E54E56;
            --color-green: #31B057;
            --color-blue-filtered: #0061E0;
            --color-purple: #9C41A2;
            --color-orange: #FFA600;
            --color-teal: #229D7A;
            --color-coral: #FC644B;
            --color-white: #ffffff;
            --font-family: 'Manrope', sans-serif;
            --max-width: 1084px;
            --section-padding: 80px 90px;
        }

        .stages-section,
        .features-section,
        .tailored-section,
        .cta-section,
        .stats-section,
        .testimonials-section,
        .ai-section {
            padding-top: 20px;
            padding-bottom: 20px;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--font-family);
            background-color: #FFFFFF;
            color: var(--color-body);
            line-height: 1.6;
            overflow-x: hidden;
        }

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

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

        button {
            font-family: var(--font-family);
            cursor: pointer;
            border: none;
            background: none;
        }

        .container {
            max-width: 1084px;
            margin: 0 auto;
            padding: 0 20px;
            width: 100%;
            box-sizing: border-box;
        }

        /* ===== SECTION BADGE ===== */
        .section-badge {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            padding: 6px 16px;
            background-color: #D6E7FD;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            line-height: 20px;
            color: #454A55;
        }

        .section-badge svg,
        .section-badge img {
            flex-shrink: 0;
        }

        .stages-section .section-badge svg,
        .stages-section .section-badge img {
            width: 27px;
            height: 20px;
            flex-shrink: 0;
            color: #3188F4;
            fill: #3188F4;
        }

        .section-title {
            font-size: 34px;
            font-weight: 800;
            line-height: 44px;
            color: #1F2024;
            text-align: center;
        }

        .tablet-only-br {
            display: none;
        }

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

        .section-subtitle {
            font-size: 18px;
            font-weight: 500;
            line-height: 28px;
            color: rgb(56, 62, 72);
            text-align: center;
            max-width: 600px;
            margin: 0 auto;
        }

        /* ===== BUTTONS ===== */
        .btn-primary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 16px 36px;
            background-color: var(--color-primary);
            color: var(--color-white);
            font-size: 20px;
            font-weight: 700;
            border-radius: 50px;
            transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
        }

        .btn-primary:hover {
            background-color: var(--color-primary-hover);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(49, 136, 244, 0.35);
        }

        .btn-primary-outline {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 14px 32px;
            border: 2px solid var(--color-primary);
            color: var(--color-primary);
            font-size: 18px;
            font-weight: 700;
            border-radius: 10px;
            transition: all 0.3s ease;
        }

        .btn-primary-outline:hover {
            background-color: var(--color-primary);
            color: var(--color-white);
        }

        /* ===== HERO SECTION ===== */
        .hero {
            background: linear-gradient(103deg, rgba(255, 255, 255, 1) 34%, rgba(214, 231, 253, 1) 108%);
            padding: clamp(70px, 7vw, 114px) 0 clamp(50px, 5vw, 80px);
            width: 100%;
            min-width: 100%;
            overflow: hidden;
            box-sizing: border-box;
        }

        .hero .container {
            max-width: 1084px;
            margin: 0 auto;
            padding: 0 0px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: clamp(40px, 4vw, 60px);
        }

        @media (min-width: 1086px) and (max-width: 1100px) {
            .hero .container {
                max-width: 1084px;
                margin: 0 auto;
                padding: 0 16px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: clamp(10px, 1.5vw, 24px);
            }
        }

        .hero-content {
            max-width: clamp(400px, 36vw, 530px);
            flex-shrink: 0;
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            padding: 6px 16px;
            background-color: var(--color-primary-light);
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            line-height: 22.5px;
            color: #1F2024;
            margin-bottom: 11px;
        }

        .hero-title {
            font-size: clamp(32px, 3.8vw, 50px);
            font-weight: 800;
            color: #1F2024;
            line-height: 1.2;
            margin-bottom: 16px;
        }

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

        .hero-description {
            font-size: 16px;
            font-weight: 600;
            color: #616B7B;
            line-height: 25px;
            margin-bottom: 16px;
        }

        .hero-subdesc {
            font-size: 16px;
            font-weight: 600;
            color: #616B7B;
            line-height: 25px;
            margin-bottom: 30px;
        }

        .hero-cta-row {
            display: flex;
            align-items: center;
            gap: clamp(8px, 1vw, 19px);
            margin-bottom: 30px;
            flex-wrap: nowrap;
        }

        /* Hero Section: Store Badge Links */
        .hero-cta-row a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 0;
            height: 44px;
        }

        .hero-cta-row img {
            height: 56px;
            width: auto;
            vertical-align: middle;
            display: block;
        }

        .hero-cta-row a:nth-child(2) img,
        .hero-cta-row a:nth-child(3) img {
            width: 135px;
            height: 56px;
            object-fit: contain;
        }

        /* Hero Section: Start Free Trial CTA Button */
        .hero-cta-row .btn-primary {
            min-width: clamp(160px, 14vw, 250px);
            padding: 0 32px;
            height: 44px;
            font-size: 16px;
            font-weight: 700;
            border-radius: 10px;
            box-shadow: none;
            white-space: nowrap;
            line-height: 1.1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        /* Hero Section: Store Download Buttons */
        .hero-cta-row .store-btn {
            min-width: 131px;
            padding: 0 16px;
            height: 44px;
            gap: 8px;
            border-radius: 10px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .hero-cta-row .store-btn svg {
            width: auto;
            height: 25px;
            flex-shrink: 0;
        }

        /* Scoped to App Store button only to protect Google Play */
        .hero-cta-row a:nth-child(2).store-btn svg {
            width: 97px;
            height: 25px;
            flex-shrink: 0;
        }

        .cta-stores .store-btn svg {
            width: auto;
            height: 25px;
            flex-shrink: 0;
        }

        .cta-stores .full-badge-apple svg {
            width: 97px;
        }

        .hero-cta-row .store-btn-text {
            line-height: 1.1;
        }

        .hero-cta-row .store-btn-sub {
            font-size: 8px;
            font-weight: 400;
            letter-spacing: 0.3px;
        }

        .hero-cta-row .store-btn-main {
            font-size: 13px;
            font-weight: 700;
        }

        .cta-stores .store-btn-sub {
            font-size: 8px;
            font-weight: 400;
            letter-spacing: 0.3px;
            text-transform: uppercase;
        }

        .cta-stores .store-btn-main {
            font-size: 13px;
            font-weight: 700;
        }

        .cta-stores .store-btn-text {
            text-align: left;
            line-height: 1.2;
        }

        .store-badge-link {
            display: inline-block;
            transition: transform 0.2s ease;
        }

        .store-badge-link:hover {
            transform: translateY(-2px);
        }

        .store-badge-link img {
            height: 40px;
            width: auto;
        }

        .platform-icons {
            display: flex;
            align-items: center;
            gap: 24px;
            margin-bottom: 8px;
        }

        .platform-icons img {
            width: 24px;
            height: 24px;
            opacity: 1;
        }

        .platform-text {
            font-size: 12px;
            font-weight: 500;
            line-height: 18px;
            letter-spacing: 0.2px;
            color: #616B7B;
        }

        /* Protection Dashboard Card */
        .dashboard-card {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(3.5px);
            border-radius: 21px;
            border: 1px solid var(--color-border);
            box-shadow: 0 9px 35px rgba(60, 131, 246, 0.15);
            padding: clamp(20px, 2vw, 32px);
            width: 100%;
            max-width: clamp(340px, 32vw, 440px);
            flex-shrink: 0;
            animation: floatCard 3s ease-in-out infinite;
        }

        /* Desktop-only: nudge dashboard card right to avoid overlapping hero CTAs */
        @media (min-width: 1025px) {
            .dashboard-card {
                margin-left: 0px;
                flex-shrink: 0;
            }
        }

        @keyframes floatCard {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-8px);
            }
        }

        .dashboard-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 24px;
        }

        .dashboard-icon {
            width: 40px;
            height: 40px;
            flex-shrink: 0;
        }

        .dashboard-header-text h3 {
            font-size: 18px;
            font-weight: 600;
            color: #000000;
        }

        .dashboard-header-text p {
            font-size: 14px;
            font-weight: 400;
            color: #666666;
        }

        .dashboard-items {
            display: flex;
            flex-direction: column;
            gap: clamp(8px, 0.8vw, 12px);
            margin-bottom: 20px;
        }

        .dashboard-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: clamp(10px, 1vw, 14px) clamp(12px, 1.2vw, 20px);
            background: var(--color-bg);
            border-radius: 12px;
            transition: transform 0.2s;
        }

        .dashboard-item:hover {
            transform: translateX(4px);
        }

        .dashboard-item:nth-child(1) {
            background: rgba(229, 78, 86, 0.07);
        }

        .dashboard-item:nth-child(2) {
            background: rgba(82, 97, 255, 0.07);
        }

        .dashboard-item:nth-child(3) {
            background: rgba(49, 176, 87, 0.07);
        }

        .dashboard-item-left {
            display: flex;
            align-items: center;
            gap: 11px;
        }

        .dashboard-item-icon {
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .dashboard-item-label {
            font-size: 14px;
            font-weight: 600;
            color: #000000;
        }

        .status-badge {
            font-size: 14px;
            font-weight: 700;
            padding: 4px 12px;
            border-radius: 6px;
        }

        .status-blocked {
            color: #E54E56;
            background: rgba(229, 78, 86, 0.1);
        }

        .status-filtered {
            color: #0061E0;
            background: rgba(0, 97, 224, 0.1);
        }

        .status-allowed {
            color: #31B057;
            background: rgba(49, 176, 87, 0.1);
        }

        .dashboard-ai {
            display: flex;
            align-items: center;
            gap: 11px;
            padding: 14px 20px;
            background: linear-gradient(135deg, rgba(49, 136, 244, 0.08), rgba(49, 136, 244, 0.03));
            border-radius: 12px;
        }

        .ai-badge {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 32px;
            height: 32px;
            background: var(--color-primary);
            border-radius: 50%;
            color: var(--color-white);
            font-size: 13px;
            font-weight: 700;
            flex-shrink: 0;
        }

        .dashboard-ai-text h4 {
            font-size: 16px;
            font-weight: 600;
            color: #3188F4;
        }

        .dashboard-ai-text p {
            font-size: 14px;
            font-weight: 400;
            color: #666666;
        }

        /* ===== AGE STAGES SECTION ===== */
        .stages-section {
            padding: 40px 0 60px;
            text-align: center;
        }

        .stages-section .section-badge {
            margin-bottom: 20px;
        }

        .stages-section .section-title {
            margin-bottom: 20px;
        }

        .stages-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            margin-top: 40px;
            border-radius: 0;
            box-shadow: none;
            overflow: visible;
            align-items: stretch;
            margin-left: -17px;
        }

        .stage-card {
            background: var(--color-white);
            border-radius: 16px;
            overflow: hidden;
            border: 1px solid var(--color-border);
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
            display: flex;
            flex-direction: column;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            width: 100%;
            box-sizing: border-box;
        }

        .stage-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
        }

        .stage-card-image {
            height: 230px;
            width: 100%;
            overflow: hidden;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #e8f1fb;
            padding: 0;
            margin: 0;
            flex-shrink: 0;
        }

        .stage-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center center;
            display: block;
            border-radius: 0;
            margin: 0;
            padding: 0;
        }

        .stage-card-body {
            padding: 16px 16px 16px 16px;
            text-align: left;
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
            overflow: visible;
            width: 100%;
            box-sizing: border-box;
        }

        .stage-card-body h3 {
            font-size: 18px;
            font-weight: 700;
            color: var(--color-primary);
            margin-bottom: 8px;
        }

        .stage-card-body p {
            font-size: 15px;
            font-weight: 500;
            color: var(--color-body);
            margin-bottom: 0px;
            line-height: 1.5;
            flex: 1;
        }

        .stage-tags {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 6px;
            padding-bottom: 0;
            align-items: center;
            align-content: flex-start;
            margin-top: 12px;
            width: 100%;
            box-sizing: border-box;
            overflow: visible;
        }

        .stage-tag {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 4px 9px;
            border-radius: 8.42px;
            border: 1px solid var(--color-tag-border);
            font-size: 11px;
            font-weight: 600;
            color: var(--color-label);
            background: var(--color-white);
            white-space: nowrap;
            flex: 0 0 auto;
            width: auto;
            min-width: 0;
        }

        .stage-tag svg,
        .stage-tag img {
            width: 15px;
            height: 15px;
            flex-shrink: 0;
            object-fit: contain;
        }

        /* ===== TRUST BAR ===== */
        .trust-bar {
            background-color: var(--color-trust-bar);
            padding: 50px 0;
        }

        .trust-bar .container {
            text-align: center;
        }

        .trust-bar-title {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 40px;
        }

        .trust-bar-title svg {
            width: 26.88px;
            height: 36px;
            margin: 0 16px 0 0;
            flex-shrink: 0;
            display: block;
        }

        .trust-bar-title span {
            font-size: 20px;
            font-weight: 700;
            color: var(--color-body-secondary);
        }

        .trust-items {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 83px;
        }

        .trust-item {
            display: flex;
            align-items: center;
            gap: 24px;
        }

        .trust-item-icon {
            width: 42px;
            height: 42px;
            flex-shrink: 0;
        }

        .trust-item span {
            font-size: 20px;
            font-weight: 800;
            color: var(--color-body-secondary);
        }

        /* ===== FEATURES SECTION ===== */
        .features-section {
            padding: 80px 0;
            text-align: center;
            background: #FFFFFF;
        }

        .features-section .container {
            padding: 0 0px;
            margin: 0 auto;
            max-width: 1084px;
            width: 100%;
            text-align: center;
        }

        .features-section .section-title {
            margin-bottom: 20px;
        }

        .features-subtitle {
            font-size: 18px;
            font-weight: 500;
            color: var(--color-body);
            max-width: 750px;
            margin: 0 0 40px;
            text-align: center;
        }

        .features-tabs {
            display: inline-flex;
            width: fit-content;
            align-items: center;
            justify-content: center;
            gap: 4px;
            background: #FBFBFB;
            border-radius: 12px;
            padding: 12px 4px;
            margin: 0 auto 40px;
            border: none;
        }

        .feature-tab {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 162px;
            height: 33px;
            padding: 0;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 500;
            color: var(--color-feature-desc);
            transition: all 0.3s ease;
            cursor: pointer;
            white-space: nowrap;
        }

        .feature-tab:hover {
            color: var(--color-heading);
        }

        .feature-tab.active {
            background-color: var(--color-primary);
            color: var(--color-white);
            font-weight: 600;
        }

        .feature-tab.active img {
            filter: brightness(0) invert(1);
        }

        .feature-tab svg,
        .feature-tab img {
            width: 16.02px;
            height: 16.25px;
            object-fit: contain;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            text-align: left;
        }

        .feature-card {
            background: var(--color-white);
            border: 1px solid var(--color-border);
            border-radius: 16px;
            padding: 28px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
        }

        .feature-card-header {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 16px;
        }

        .feature-icon {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            border: 1px solid var(--color-border);
            background: transparent;
        }

        .features-section .feature-icon {
            width: 56px;
            height: 56px;
        }

        .feature-icon svg {
            width: 24px;
            height: 24px;
        }

        .feature-card-header h3 {
            font-size: 16px;
            font-weight: 600;
            color: var(--color-heading);
            line-height: 1.4;
        }

        .feature-card p {
            font-size: 14px;
            font-weight: 400;
            color: var(--color-feature-desc);
            line-height: 1.6;
        }

        .try-cta {
            text-align: center;
            margin-top: 90px;
            margin-bottom: 0;
        }

        .try-cta .btn-primary {
            width: 270px;
            height: 44px;
            border-radius: 10px;
            padding: 0 24px;
            gap: 10px;
            font-size: 16px;
            font-weight: 700;
            justify-content: center;
        }

        /* ===== AI TECHNOLOGY SECTION ===== */
        .ai-section {
            background: #FFFFFF;
        }

        .ai-section .container {
            display: flex;
            align-items: center;
            gap: 60px;
            padding-top: 20px;
        }

        .ai-content {
            flex: 1;
            max-width: 550px;
        }

        .ai-content .section-badge {
            margin-bottom: 12px;
        }

        .ai-content .section-title {
            margin-bottom: 12px;
            text-align: left;
            padding-bottom: 15px;
            padding-top: 25px;
        }

        .ai-content .section-title .highlight-italic {
            color: var(--color-primary);
            font-style: italic;
        }

        .ai-desc {
            font-size: 18px;
            font-weight: 500;
            color: var(--color-body);
            margin-bottom: 0;
            line-height: 28px;
            padding-bottom: 20px;
        }

        .ai-desc strong {
            color: var(--color-heading);
            font-weight: 700;
        }

        .ai-card {
            flex: 1;
            max-width: 500px;
            background: rgba(255, 255, 255, 0.80);
            backdrop-filter: blur(3px);
            border-radius: 20px;
            box-shadow: 0 8px 31px rgba(60, 131, 246, 0.15);

        }

        .ai-card-header {
            background: linear-gradient(110.85deg, rgb(60, 131, 246), rgb(36, 116, 245));
            margin: 12px 12px 0 12px;
            padding: 20px 20px;
            border-radius: 16px;
            text-align: center;
            color: var(--color-white);
        }

        .ai-card-header-icon {
            width: 63px;
            height: 63px;
            object-fit: contain;
            margin: 0 auto 8px;
        }

        .ai-card-header h3 {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .ai-card-header p {
            font-size: 14px;
            font-weight: 400;
            opacity: 0.9;
        }

        .ai-card-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            padding: 10px 12px;
        }

        .ai-feature-item {
            padding: 16px;
            text-align: center;
            background: #FFFFFF;
            border-radius: 12px;
            border: 1px solid var(--color-border);
            transition: background-color 0.2s;
        }

        .ai-feature-item:hover {
            background: rgba(49, 136, 244, 0.03);
        }

        .ai-feature-icon {
            width: 36px;
            height: 36px;
            margin: 0 auto 8px;
        }

        .ai-feature-item h4 {
            font-size: 14px;
            font-weight: 500;
            color: #2F3946;
            margin-bottom: 4px;
        }

        .ai-feature-item p {
            font-size: 12px;
            font-weight: 500;
            color: #81858A;
            line-height: 1.4;
        }

        .ai-card-footer {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 24px;
            margin: 0 16px 12px;
            background: rgba(60, 131, 246, 0.05);
            border: 1px solid rgba(60, 131, 246, 0.10);
            border-radius: 12px;
        }

        .ai-card-footer-left {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .ai-card-footer-dot {
            width: 9px;
            height: 9px;
            background: #1DD7BC;
            border-radius: 50%;
            animation: pulse 2s ease-in-out infinite;
        }

        @keyframes pulse {

            0%,
            100% {
                opacity: 1;
            }

            50% {
                opacity: 0.4;
            }
        }

        .ai-card-footer h4 {
            font-size: 12px;
            font-weight: 700;
            color: var(--color-primary);
        }

        .ai-card-footer p {
            font-size: 10px;
            font-weight: 600;
            color: #64748B;
        }

        .ai-card-footer-spinner {
            width: 14px;
            height: 14px;
            border: 2px solid var(--color-primary);
            border-top-color: transparent;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        /* ===== TAILORED SECTION ===== */
        .tailored-section {
            text-align: center;
            padding-bottom: 0;
            padding-top: 45px;
        }

        .tailored-section .section-title {
            margin-top: 10px;
            margin-bottom: 20px;
        }

        .tailored-section .section-title .highlight-blue {
            color: var(--color-primary);
        }

        .tailored-subtitle {
            font-size: 18px;
            font-weight: 500;
            color: var(--color-body);
            margin-bottom: 52px;
        }

        .tailored-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 38px 38px;
        }

        .tailored-card {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 9px;
            background: var(--color-white);
            border: 1px solid var(--color-border);
            border-radius: 16px;
            text-align: left;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .tailored-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
        }

        .tailored-card-icon {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            border: none;
            background: none;
            padding: 0;
        }

        .tailored-card-icon svg {
            width: 50px;
            height: 50px;
        }

        .tailored-card p {
            font-size: 14px;
            font-weight: 500;
            color: var(--color-body-secondary);
            line-height: 1.5;
        }

        /* ===== CTA SECTION ===== */
        .cta-section {
            text-align: center;
        }

        .cta-section .cta-row {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }

        .cta-row .btn-primary {
            width: 190px;
            height: 44px;
            border-radius: 10px;
            padding: 0 24px;
            font-size: 16px;
            font-weight: 700;
            justify-content: center;
            box-shadow: none;
        }

        .cta-label {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 16px;
            font-weight: 600;
            color: var(--color-label);
            padding-top: 30px;
        }

        .cta-note {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 600;
            color: var(--color-label);
        }

        .cta-stores {
            display: flex;
            align-items: center;
            gap: 23px;
        }

        .cta-stores img {
            height: 48px;
            width: auto;
        }

        /* ===== STATS BAR ===== */
        .stats-bar {
            background: var(--color-trust-bar);
            padding: 33px 0;
        }

        .stats-bar .container {
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        .stat-bar-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        .stat-bar-icon {
            width: 63.01px;
            height: 42.99px;
            flex-shrink: 0;
        }

        .stat-bar-item span {
            font-size: 18px;
            font-weight: 700;
            color: #1A1A1A;
        }

        /* ===== TESTIMONIALS ===== */
        .testimonials-section {
            text-align: center;
        }

        .testimonials-section .section-title {
            margin-bottom: 40px;
        }

        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 45px;
            max-width: 1084px;
            margin: 0 auto;
            width: 100%;
        }

        .testimonial-card {
            background: var(--color-white);
            border-radius: 16px;
            padding: 28px;
            text-align: left;
            transition: transform 0.3s, box-shadow 0.3s;
            box-shadow: 0px 0px 2px 2px #00000026;
            width: 100%;
            min-width: 0;
            box-sizing: border-box;
        }

        .testimonial-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
        }

        .testimonial-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
        }

        .testimonial-avatar {
            width: 68px;
            height: 68px;
            border-radius: 50%;
            object-fit: cover;
        }

        .testimonial-info h4 {
            font-size: 16px;
            font-weight: 700;
            color: var(--color-heading);
        }

        .testimonial-store {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            color: var(--color-feature-desc);
            margin: 2px 0;
        }

        .testimonial-stars {
            display: flex;
            gap: 2px;
        }

        .testimonial-stars svg {
            width: 16px;
            height: 16px;
            color: #F59E0B;
        }

        .testimonial-card p {
            font-size: 20px;
            font-weight: 400;
            color: var(--color-heading);
            line-height: 1.5;
        }

        /* ===== STATS SECTION ===== */
        .stats-section {
            text-align: center;
        }

        .stats-section .section-title {
            margin-bottom: 20px;
        }

        .stats-section .section-subtitle {
            margin-bottom: 40px;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
        }

        .stat-card {
            background: var(--color-white);
            padding: 40px 24px;
            text-align: center;
            transition: transform 0.3s, box-shadow 0.3s;
            border-radius: 12px;
            border: 1px solid rgba(0, 0, 0, 0.05);
            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
        }

        .stat-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
        }

        .stat-card-icon {
            width: 62px;
            height: 60px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 12px;
            border: none;
            background: none;
            padding: 0;
        }

        .stat-card-icon svg {
            width: 62px;
            height: 60px;
        }

        .stat-card-icon.blue,
        .stat-card-icon.coral,
        .stat-card-icon.teal,
        .stat-card-icon.purple {
            border: none;
        }

        .stat-card h3 {
            font-size: 32px;
            font-weight: 800;
            color: var(--color-heading);
            margin-bottom: 8px;
        }

        .stat-card p {
            font-size: 14px;
            color: #383E48;
            line-height: 20px;
            margin: 0;
            max-width: 200px;
            margin-left: auto;
            margin-right: auto;
            font-weight: 600;
        }



        /* ===== FADE IN ANIMATION ===== */
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.7s ease-out, transform 0.7s ease-out;
        }

        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* ===== FAQ SECTION ===== */
        .faq-section {
            padding: 50px 20px 70px;
            background: #ffffff;
        }

        .faq-title {
            font-size: 34px;
            font-weight: 800;
            color: #1f2024;
            line-height: 44px;
            text-align: center;
            margin-bottom: 40px;
            font-family: 'Manrope', sans-serif;
        }

        .faq-list {
            max-width: 800px;
            width: 100%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding: 0;
            box-sizing: border-box;
        }

        .faq-item {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            border-radius: 15px;
            box-shadow: 0px 0px 2px 2px #00000026;
            border: none;
            background: #ffffff;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-sizing: border-box;
        }

        .faq-question {
            font-size: 16px;
            font-weight: 600;
            color: #1f2024;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 15px 27px;
            gap: 12px;
            min-height: 58px;
            background: #ffffff;
            box-sizing: border-box;
            font-family: 'Manrope', sans-serif;
        }

        .faq-question .faq-toggle {
            width: 12px;
            height: 12px;
            flex-shrink: 0;
            transition: transform 0.3s ease;
        }

        .faq-item.open .faq-toggle {
            transform: rotate(180deg);
        }

        .faq-answer {
            font-size: 16px;
            font-weight: 500;
            color: #616b7b;
            line-height: 1.7;
            padding: 0 27px;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            background: #ffffff;
            font-family: 'Manrope', sans-serif;
            transition: max-height 0.4s ease,
                opacity 0.3s ease,
                padding 0.3s ease;
        }

        .faq-item.open .faq-answer {
            max-height: 500px;
            opacity: 1;
            padding: 15px 27px 25px;
        }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 1024px) {
            .desktop-only-br {
                display: none;
            }

            :root {
                --section-padding: 60px 40px;
            }

            .stages-section,
            .features-section,
            .tailored-section,
            .cta-section,
            .stats-section,
            .testimonials-section,
            .ai-section {
                padding-top: 15px;
                padding-bottom: 20px;
            }

            .hero-title {
                font-size: 42px;
            }

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

            .platform-icons {
                justify-content: center;
            }

            .platform-text {
                text-align: center;
            }

            .stages-grid {
                grid-template-columns: 1fr;
                max-width: 380px;
                margin: 40px auto 0;
                gap: 24px;
                overflow: visible;
                box-shadow: none;
                border-radius: 0;
            }

            .stage-card {
                width: 100%;
                max-width: 500px;
                margin: 0 auto;
                border-radius: 16px;
                overflow: hidden;
                border: 1px solid var(--color-border);
                box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
                display: flex;
                flex-direction: column;
                padding: 0;
                gap: 0;
                align-items: stretch;
            }

            .stage-card-image {
                height: auto;
                width: 100%;
                overflow: hidden;
                position: relative;
                display: block;
                padding: 0;
                margin: 0;
                background: #e8f1fb;
                flex-shrink: 0;
            }

            .stage-card-image img {
                width: 100%;
                height: auto;
                object-fit: cover;
                object-position: center center;
                display: block;
                margin: 0;
                padding: 0;
            }

            .trust-items {
                gap: 40px;
                flex-wrap: wrap;
            }

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

            .ai-section .container {
                flex-direction: column;
                align-items: center;
                padding-bottom: 20px;
            }

            .ai-content {
                max-width: 100%;
                text-align: center;
            }

            .ai-content .section-title {
                text-align: center;
            }

            .ai-card {
                max-width: 520px;
                margin: 0 auto;
            }

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

            .stats-bar .container {
                gap: 24px;
                flex-wrap: wrap;
                justify-content: center;
            }

            .testimonials-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 24px;
            }

            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
                max-width: 500px;
                margin: 0 auto;
            }

            .stats-section {
                padding-bottom: 80px;
            }

            .stages-section .container,
            .features-section .container,
            .tailored-section .container,
            .cta-section .container,
            .stats-section .container,
            .testimonials-section .container,
            .ai-section .container {
                padding: 0 40px;
            }

            /* FAQ — Tablet */
            .faq-section {
                padding: 40px 20px 60px;
            }

            .faq-title {
                font-size: 28px;
                line-height: 36px;
                margin-bottom: 30px;
                text-align: center;
            }

            .faq-list {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 16px;
                padding: 0 20px;
                max-width: 800px;
                margin: 0 auto;
            }

            .faq-item {
                width: 100%;
                max-width: 756px;
                border-radius: 15px;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
                border: 1px solid #e0e0e0;
                background: #ffffff;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                box-sizing: border-box;
            }

            .faq-question {
                font-size: 16px;
                font-weight: 600;
                color: #1f2024;
                padding: 15px 27px;
                min-height: 58px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                cursor: pointer;
                gap: 12px;
                background: #ffffff;
                box-sizing: border-box;
            }

            .faq-answer {
                font-size: 16px;
                font-weight: 500;
                color: #616b7b;
                line-height: 1.7;
                padding: 0 27px;
                max-height: 0;
                overflow: hidden;
                opacity: 0;
                background: #ffffff;
                transition: max-height 0.35s ease,
                    opacity 0.3s ease,
                    padding 0.3s ease;
            }

            .faq-item.open .faq-answer {
                max-height: 300px;
                opacity: 1;
                padding: 15px 27px 25px;
            }
        }

        @media (max-width: 900px) {
            .hero .container {
                flex-direction: column;
                align-items: center;
                padding: 0 16px;
                max-width: 100%;
                width: 100%;
                box-sizing: border-box;
            }

            .hero-content {
                max-width: 100%;
                width: 100%;
                text-align: center;
            }

            .dashboard-card {
                max-width: 100%;
                width: 100%;
                margin: 0 auto;
                box-sizing: border-box;
            }
        }

        @media (min-width: 769px) and (max-width: 1024px) {
            .stages-grid {
                grid-template-columns: 1fr;
                max-width: 380px;
                margin: 40px auto 0;
                gap: 28px;
                overflow: visible;
                box-shadow: none;
            }

            .testimonials-grid {
                grid-template-columns: repeat(2, 1fr);
                justify-content: center;
                gap: 24px;
                max-width: 100%;
            }

            .tablet-only-br {
                display: block;
            }

            .testimonial-card {
                width: 100%;
                height: 262px;
                padding: 20px;
                border-radius: 10px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
            }

            .stage-card {
                width: 100%;
                max-width: 560px;
                margin: 0 auto;
                overflow: hidden;
                border-radius: 16px;
            }

            .stage-card-image {
                height: auto;
                width: 100%;
                overflow: hidden;
                position: relative;
                display: block;
                padding: 0;
                margin: 0;
                background: #e8f1fb;
                flex-shrink: 0;
            }

            .stage-card-image img {
                width: 100%;
                height: auto;
                object-fit: cover;
                object-position: center center;
                display: block;
                margin: 0;
                padding: 0;
            }

            .stage-card-body {
                padding: 24px;
                text-align: left;
            }
        }

        @media (max-width: 768px) {

            /* Global mobile overflow fix */
            html,
            body {
                overflow-x: hidden !important;
                width: 100% !important;
                max-width: 100vw !important;
            }

            * {
                max-width: 100vw;
            }

            section,
            .hero,
            .trust-bar,
            .stages-section,
            .features-section,
            .ai-section,
            .tailored-section,
            .cta-section,
            .stats-section,
            .testimonials-section,
            .faq-section,
            .stats-bar {
                width: 100% !important;
                max-width: 100% !important;
                overflow-x: hidden !important;
                box-sizing: border-box !important;
            }

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

            .stages-section {
                padding-bottom: 20px;
            }

            .features-section {
                padding-top: 30px;
                padding-bottom: 20px;
            }

            .ai-section {
                padding-top: 20px;
                padding-bottom: 20px;
            }

            .tailored-section {
                padding-top: 20px;
                padding-bottom: 20px;
            }

            .cta-section {
                padding-top: 20px;
                padding-bottom: 20px;
            }

            .testimonials-section {
                padding-bottom: 20px;
            }

            .stats-section {
                padding-top: 20px;
                padding-bottom: 20px;
            }

            .hero {
                padding: 80px 0 60px;
                width: 100% !important;
                min-width: 0 !important;
                overflow-x: hidden !important;
            }

            .hero .container,
            .hero-container {
                flex-direction: column;
                align-items: center;
                padding: 0 16px !important;
                max-width: 100% !important;
                width: 100% !important;
                box-sizing: border-box !important;
                overflow: hidden;
            }

            .hero-content {
                max-width: 100% !important;
                width: 100% !important;
                flex-shrink: 1 !important;
                text-align: center;
                box-sizing: border-box;
            }

            .hero-title {
                word-wrap: break-word;
                overflow-wrap: break-word;
            }

            .hero-description,
            .hero-subdesc {
                max-width: 100%;
                word-wrap: break-word;
            }

            .dashboard-card {
                max-width: 100% !important;
                width: 100% !important;
                flex-shrink: 1 !important;
                box-sizing: border-box !important;
                margin-top: 20px;
            }

            .hero-cta-row {
                max-width: 100%;
                box-sizing: border-box;
            }

            .hero-cta-row .store-btn {
                min-width: 0;
            }

            .features-subtitle {
                white-space: normal !important;
                max-width: 100% !important;
                word-wrap: break-word;
            }

            .features-tabs {
                max-width: 100%;
                box-sizing: border-box;
            }

            .stages-grid {
                margin-left: 0 !important;
                max-width: 100% !important;
                box-sizing: border-box;
            }

            .features-section .container,
            .stages-section .container,
            .tailored-section .container,
            .cta-section .container,
            .stats-section .container,
            .testimonials-section .container,
            .ai-section .container {
                padding: 0 16px !important;
                max-width: 100% !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }

            .trust-bar {
                overflow-x: hidden !important;
            }

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

            .trust-items {
                max-width: 100%;
                box-sizing: border-box;
            }

            .faq-section {
                padding-left: 16px !important;
                padding-right: 16px !important;
            }

            .faq-list {
                max-width: 100% !important;
                box-sizing: border-box;
            }

            .faq-item {
                max-width: 100% !important;
                box-sizing: border-box;
            }

            .ai-card {
                max-width: 100% !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }

            .tailored-grid {
                max-width: 100%;
                box-sizing: border-box;
            }

            .testimonials-grid {
                max-width: 100% !important;
                box-sizing: border-box;
            }

            .stats-grid {
                max-width: 100% !important;
                box-sizing: border-box;
            }

            .section-title {
                word-wrap: break-word;
                overflow-wrap: break-word;
            }

            .section-subtitle {
                max-width: 100% !important;
                word-wrap: break-word;
            }

            .hero-title {
                font-size: 36px;
            }

            .section-title {
                font-size: 28px;
                line-height: 36px;
            }

            .stages-section .section-title {
                font-size: 34px;
                line-height: 44px;
            }

            .hero-cta-row {
                flex-direction: row;
                flex-wrap: wrap;
                align-items: center;
                justify-content: center;
                gap: 12px;
            }

            .hero-cta-row .btn-primary {
                width: 312px;
                max-width: 100%;
                height: 44px;
                flex: 0 0 auto;
                box-sizing: border-box;
            }

            .hero-cta-row .store-btn {
                width: 132px;
                height: 44px;
                min-width: 132px;
                max-width: 132px;
                flex: 0 0 132px;
                box-sizing: border-box;
            }

            .trust-bar {
                padding: 32px 0;
            }

            .trust-bar-title {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                gap: 8px;
                margin-bottom: 24px;
            }

            .trust-bar-title svg {
                display: block;
                width: 24px;
                height: 24px;
                margin: 0;
                flex-shrink: 0;
            }

            .trust-bar-title span {
                display: block;
                font-size: 14px;
                text-align: left;
            }

            .trust-items {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 16px 20px;
            }

            .trust-item {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: 6px;
                text-align: left;
            }

            .trust-item-icon {
                width: 32px;
                height: 32px;
            }

            .trust-item span {
                font-size: 13px;
                font-weight: 700;
                text-align: center;
            }

            .features-tabs {
                flex-wrap: nowrap;
                justify-content: flex-start;
                overflow-x: auto;
                max-width: 100%;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }

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

            .feature-tab {
                padding: 8px 16px;
                width: auto;
                height: auto;
                font-size: 14px;
            }

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

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

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

            .stat-card h3 {
                font-size: 36px;
            }

            .stats-bar {
                display: none;
            }

            .testimonials-section .container {
                overflow: visible !important;
            }

            .testimonials-grid {
                display: flex;
                flex-direction: row;
                overflow-x: auto !important;
                scroll-snap-type: x mandatory;
                -webkit-overflow-scrolling: touch;
                gap: 0;
                max-width: 100%;
                padding: 6px 6px 16px 6px;
                scrollbar-width: none;
            }

            .testimonials-grid::-webkit-scrollbar {
                display: none;
            }

            .testimonial-card {
                flex: 0 0 calc(100% - 12px);
                min-width: calc(100% - 12px);
                scroll-snap-align: center;
                transition: transform 0.3s ease;
                box-sizing: border-box;
                padding: 28px 20px;
                margin-right: 20px;
            }

            .testimonial-dots {
                display: flex;
                justify-content: center;
                gap: 8px;
                margin-top: 16px;
            }

            .testimonial-dot {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: transparent;
                border: 2px solid #1F2024;
                cursor: pointer;
                padding: 0;
                transition: background 0.3s ease;
            }

            .testimonial-dot.active {
                background: #1F2024;
            }

            .testimonial-header {
                margin-bottom: 5px;
            }

            .testimonial-card p {
                font-size: 16px;
                margin-top: 5px;
            }

            .cta-stores {
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
                gap: 12px;
            }

            .stage-card-image {
                height: auto;
                width: 100%;
                overflow: hidden;
                position: relative;
                display: block;
                padding: 0;
                margin: 0;
                background: #e8f1fb;
                flex-shrink: 0;
            }

            .stage-card-image img {
                width: 100%;
                height: auto;
                object-fit: cover;
                object-position: center center;
                display: block;
                margin: 0;
                padding: 0;
            }

            .stages-grid {
                max-width: 100%;
                padding: 0 16px;
                gap: 16px;
            }

            .stage-card {
                width: 100%;
                border-radius: 14px;
                overflow: hidden;
            }
        }

        @media (max-width: 480px) {
            .trust-bar-title svg {
                display: block;
                width: 20px;
                height: 20px;
                margin: 0;
            }

            .trust-bar-title span {
                font-size: 11px;
            }

            .trust-items {
                gap: 12px 10px;
                flex-wrap: nowrap;
            }

            .trust-item {
                gap: 4px;
            }

            .trust-item span {
                font-size: 10px;
            }

            .trust-item-icon {
                width: 24px;
                height: 24px;
            }

            .hero-title {
                font-size: 36px;
            }

            .section-title,
            .stages-section .section-title {
                font-size: 24px;
                line-height: 32px;
            }

            .dashboard-card {
                padding: 20px;
            }

            .features-tabs {
                gap: 2px;
            }

            .feature-tab {
                padding: 6px 12px;
                width: auto;
                height: auto;
                font-size: 13px;
            }

            .stats-grid {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .stat-card h3 {
                font-size: 30px;
            }

            .ai-card {
                background: transparent;
                box-shadow: none;
                border-radius: 0;
                overflow: visible;
            }

            .ai-card-header {
                border-radius: 12px;
                margin-bottom: 16px;
            }

            .ai-card-features {
                grid-template-columns: 1fr 1fr;
                gap: 16px;
                margin-bottom: 16px;
            }

            .ai-feature-item {
                background: #fff;
                border: 1px solid var(--color-border) !important;
                border-radius: 12px;
                padding: 16px;
            }

            .ai-feature-item:last-child {
                border-bottom: 1px solid var(--color-border) !important;
            }

            .ai-card-footer {
                background: #fff;
                border: 1px solid var(--color-border);
                margin: 0;
            }

            .stages-section .container,
            .features-section .container,
            .tailored-section .container,
            .cta-section .container,
            .stats-section .container,
            .testimonials-section .container,
            .ai-section .container {
                padding: 0 16px;
            }

            .stage-card-image {
                height: auto;
                width: 100%;
                overflow: hidden;
                position: relative;
                display: block;
                padding: 0;
                margin: 0;
                background: #e8f1fb;
                flex-shrink: 0;
            }

            .stage-card-image img {
                width: 100%;
                height: auto;
                object-fit: cover;
                object-position: center center;
                display: block;
                margin: 0;
                padding: 0;
            }

            .stages-grid {
                max-width: 100%;
                padding: 0 12px;
                gap: 14px;
            }

            .stage-card {
                width: 100%;
                border-radius: 12px;
                overflow: hidden;
            }

            .android-device .cta-note {
                align-items: flex-start;
                text-align: left;
            }

            .android-device .cta-note svg {
                margin-top: 3px;
            }

            /* FAQ — Mobile */
            .faq-section {
                padding: 24px 16px 36px;
                background: #ffffff;
            }

            .faq-title {
                font-size: 24px;
                font-weight: 800;
                line-height: 30px;
                text-align: center;
                margin-bottom: 20px;
                color: #1f2024;
            }

            .faq-list {
                display: flex;
                flex-direction: column;
                gap: 12px;
                padding: 0;
                max-width: 100%;
                width: 100%;
                margin: 0 auto;
            }

            .faq-item {
                width: 100%;
                background: #ffffff;
                border-radius: 12px;
                box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
                border: 1px solid #e8ecf1;
                overflow: hidden;
                display: flex;
                flex-direction: column;
                box-sizing: border-box;
                margin: 0;
            }

            .faq-question {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 15px 27px;
                font-size: 16px;
                font-weight: 600;
                color: #1f2024;
                min-height: 58px;
                cursor: pointer;
                gap: 12px;
                background: #ffffff;
                box-sizing: border-box;
                line-height: 1.4;
            }

            .faq-answer {
                font-size: 16px;
                font-weight: 500;
                color: #616b7b;
                line-height: 1.7;
                padding: 0 27px;
                max-height: 0;
                overflow: hidden;
                opacity: 0;
                background: #ffffff;
                transition: max-height 0.35s ease,
                    opacity 0.3s ease,
                    padding 0.3s ease;
            }

            .faq-item.open .faq-answer {
                max-height: 300px;
                opacity: 1;
                padding: 15px 27px 25px;
            }
        }

        .store-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 0 14px;
            min-width: 140px;
            height: 40px;
            background-color: #000;
            border-radius: 8px;
            color: white;
            text-decoration: none;
            transition: background-color 0.2s ease, transform 0.2s ease;
        }

        .store-btn:hover {
            background-color: #1a1a1a;
            transform: translateY(-2px);
        }

        .store-btn-text {
            display: flex;
            flex-direction: column;
            line-height: 1.2;
        }

        .store-btn-sub {
            font-size: 9px;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.85);
            letter-spacing: 0.3px;
            text-transform: uppercase;
        }

        .store-btn-main {
            font-size: 14px;
            font-weight: 700;
            color: white;
        }

        .gradient-text {
            background: linear-gradient(90deg, #3188F4 0%, #B727A3 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            color: #B727A3;
            font-weight: 800;
        }

/* ========================================
   PHONE HERO CLEARANCE
   Nothing above this line is modified.

   The export clears its own fixed header with padding-top: 80px on
   .hero. This page has no sub-nav, so with header.css reserving the
   header nothing else needs clearing; 22px leaves the hero the same
   breathing room Mature Content Blocker shows, the other page here
   without a sub-nav. Phones only; tablet and desktop keep the
   export's values.
======================================== */

@media (max-width: 767px) {
    .hero {
        padding-top: 22px;
    }
}

/* ========================================
   HERO TEXT COLUMN · 1024-1032px
   Nothing above this line is modified. The hero stacks at 1023 and
   below - see the block after this one - and desktop from 1033 keeps
   every value it has. This band is the two iPad Pro widths, which are
   the only tablet sizes that stay in the side-by-side layout.

   .hero-content is max-width: clamp(400px, 36vw, 530px). Across this
   band 36vw is smaller than the 400px floor - 371px at 1032 - so the
   floor is what applies and the column is pinned at 400px however
   much room there is. The container is 1017px at 1032 and the card
   beside it takes 340, so 400 + a 41px gap + 340 leaves 236px unused,
   and because the container is justify-content: space-between that
   space all falls between the two, as a hole in the middle.

   Meanwhile the title has to set a 39px line inside 400px, so
   "Mobicip Parental Control &" breaks after "Parental" and leaves
   "Control &" stranded on a line of its own - the heading reading as
   though it has been cut.

   Releasing the floor lets the column take the room that was being
   left empty. It is a maximum, not a width, so the card keeps its
   340px and only the slack moves.
======================================== */

@media (min-width: 1024px) and (max-width: 1032px) {
    .hero-content {
        max-width: none;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* The hero also had nothing holding it off the edges. Its
       container is max-width: 1084px with padding: 0 0px, so above
       1084 the max-width leaves a margin and below 901 the stacked
       rules pad it 16px - but in between it is full width with no
       padding at all, and the badge, the heading and the dashboard
       card all sit flush against the two edges.

       20px is the page's own gutter: the trust bar uses it at every
       width, and from 1025 so does every other section. The sections
       between 901 and 1024 use 40px, but 40 here cannot coexist with
       the heading setting on two lines - at 1024 it would leave the
       column 548px, and the second line needs about 588 - so the
       narrower of the page's two gutters is the one that fits. */
    .hero .container {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* ========================================
   TABLET HERO · 768-1023px  (iPad Mini, Surface Pro)
   Nothing above this line is modified. Phones at 767 and below keep
   their own rules, the two iPad Pro widths keep the side-by-side
   layout in the block above, and desktop from 1033 is untouched.

   The supplied measurements were taken against a 736px content
   column, which is a hero running the full width of a 768px viewport
   with its 16px gutters - the stacked form, not the side-by-side one.
   They only hold in that form: a 48px heading needs about 770px to
   keep "Mobicip Parental Control &" on one line, and the side-by-side
   layout leaves the text column 525px at 960, where the same heading
   breaks into three. So the stack, which this page already uses up to
   900, is carried to 1023 and the sizes are applied on top of it.

   Values from the inspector: heading 48px, the two body paragraphs
   16px, the platform line 14px with a 12px space above it, the
   primary button 170x44 from its text plus 20px of padding either
   side, and the store badges 132x44. The colours - #1F2024 on the
   heading, #616B7B on the body and platform text - already match and
   are not restated.
======================================== */

@media (min-width: 901px) and (max-width: 1023px) {
    .hero .container {
        flex-direction: column;
        align-items: center;
        padding-left: 16px;
        padding-right: 16px;
    }

    .hero-content {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {

    /* Supplied values. The html/body rule came with a
       max-width: 768px query, which would also have caught every
       phone - this page's own phone rules run to 767 - so it is
       applied across this tablet band instead, which is where it was
       asked for. The three guards against sideways scroll are kept as
       given even though this band already measures no overflow. */
    html,
    body {
        margin-top: -31px;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* Supplied. Against the base rule this changes four things: the
       gap 11px to 14px, the padding 6px 16px to 4px 12px, the bottom
       margin 11px to 12px, and a 6px top margin that was not set
       before. The rest restates what the base already has. */
    .hero-badge {
        margin-top: 6px;
        display: inline-flex;
        align-items: center;
        gap: 14px;
        padding: 4px 12px;
        background-color: var(--color-primary-light);
        border-radius: 6px;
        font-size: 14px;
        font-weight: 600;
        line-height: 22.5px;
        color: #1F2024;
        margin-bottom: 12px;
    }

    .hero-title {
        font-size: 48px;
        margin-top: -3px;
    }

    .platform-text {
        font-size: 14px;
        margin-top: 12px;
    }

    /* Both of these need .hero-cta-row in front of them: the page
       styles the hero buttons as .hero-cta-row .btn-primary, which
       outranks a bare .btn-primary, and at 768 a max-width: 768px
       block also pins the button to 312px wide.

       The width is set rather than left to the text. "Start Free
       Trial" measures 114px at 16px/700 here, so 20px of padding
       either side comes to 154, not the 170 the inspector reports -
       their copy of this button is simply a little wider. Since the
       measurement is the thing being matched, 170 is stated and the
       20px padding sits inside it. */
    .hero-cta-row .btn-primary {
        width: 170px;
        min-width: 170px;
        max-width: 170px;
        height: 44px;
        padding: 0 20px;
        font-size: 16px;
    }

    .hero-cta-row .store-btn {
        width: 132px;
        min-width: 132px;
        max-width: 132px;
        height: 44px;
        flex: 0 0 132px;
    }
}

/* ========================================
   AGE STAGES SECTION — SUPPLIED VALUES
   Nothing above this line is modified.

   The badge rule was given as
   .new_age_section .age_section_header .age_badge, which is the age
   section's own badge rather than every badge on the page, so it maps
   to .stages-section .section-badge here. The AI and features
   sections use the same .section-badge class and are left alone.

   Against what this page already has, the rule changes four things:
   padding 6px 16px to 4px 12px, the radius 6px to 5px, the colour
   #454A55 to the #000000 the inspector reports, and a 20px bottom
   margin that below 1025 was not set. The background, family, weight,
   size and line-height are restated but already matched.

   display is the one declaration not carried over. The supplied rule
   says inline-block, which suits a badge whose icon is part of its
   text; this page's badge has the icon as its own <img> child, and
   inline-block drops it onto a second line - the badge measures
   169.75 x 48 with the icon sitting 19.5px above the words. Left as
   inline-flex it comes to 207.75 x 28, and 207.75 is exactly the
   width the inspector reports, so the flex box is what reproduces the
   supplied measurement.
======================================== */

.stages-section .section-badge {
    background-color: #D6E7FD;
    padding: 4px 12px;
    border-radius: 5px;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: #000000;
    margin-top: 6px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .stages-section {
        margin-top: 14px;
        padding-bottom: 20px;
    }
}

/* ========================================
   AGE STAGES — SUPPLIED CARD AND SECTION VALUES · 768-1023px
   Nothing above this line is modified. Phones at 767 and below, the
   two iPad Pro widths and desktop all keep what they have; this band
   is iPad Mini and Surface Pro, which is where it was asked for.

   From the inspector: the heading 28px #000000 with a 16px space
   under it, the lead paragraph 16px running 700 wide inside 18px side
   margins, the card 418 wide on white, its title 24px with 20px under
   it, its body 20px with 24px under it, and the feature tags 14px in
   #616B7B.

   Two of the supplied figures describe markup this page does not
   have, and are adjusted rather than copied:

   - the lead paragraph carries an inline max-width: 620px and sits in
     a centring flex column, so it measures 533 wide. Reaching the
     700 the inspector reports means releasing that cap and letting
     the paragraph stretch between its 18px margins, which is what
     the two lines below do.
   - the tag padding is given as 5.05px 6.74px 5.05px 26px. That 26px
     is room for an icon painted as a background; this page's tags
     carry the icon as a real child with a 5px gap, so 26px would
     indent it twice over. The vertical and right values are taken as
     given and the left matches the right.
======================================== */

@media (min-width: 768px) and (max-width: 1023px) {

    .stages-section .section-title {
        font-size: 28px;
        color: #000000;
        line-height: 36px;
        align-self: stretch;
        margin-bottom: 16px;
    }

    .stages-section .section-subtitle {
        font-size: 16px;
        color: #383E48;
        line-height: 24px;
        max-width: none !important;
        align-self: stretch;
        margin-left: 18px;
        margin-right: 18px;
    }

    .stages-grid {
        grid-template-columns: 418px;
        justify-content: center;
    }

    .stages-section .stage-card {
        width: 418px;
        background: #FFFFFF;
    }

    .stages-section .stage-card-body h3 {
        font-size: 24px;
        color: #3188F4;
        line-height: 24px;
        margin-bottom: 20px;
    }

    .stages-section .stage-card-body p {
        font-size: 20px;
        color: #616B7B;
        line-height: 28px;
        margin-bottom: 24px;
    }

    .stages-section .stage-tag {
        font-size: 14px;
        color: #616B7B;
        line-height: 16px;
        padding: 5.05px 6.74px;
    }
}

/* ========================================
   TRUST BAR AND FEATURES — SUPPLIED VALUES · 768-1023px
   Nothing above this line is modified. Phones, the two iPad Pro
   widths and desktop keep what they have.

   Trust bar: the title line 20px #383E48 with 35px under it and 10px
   of padding top and bottom, its heart 26.89 x 36 with 16px to its
   right, and the three items 18px #383E48 with 30px icons 12px from
   their words.

   Features: the badge 14px #1F2024 on #D6E7FD with 4px 12px of
   padding and 16px under it, the heading 34px #000000 over 44px of
   leading, the lead paragraph #383E48, the tabs 16px with 16px
   icons, the card titles 16px #1F2024 over 22.5px and the card text
   14px #626C7C.

   The cards go two across. The supplied card description measures
   292 wide, which is a card of about 348 inside this container -
   two of them, where this page was still stacking one per row at
   768. At 960 it was already two.

   Three figures are not copied literally:
   - the badge's 16px bottom margin needs !important, since the
     markup sets margin-bottom: 20px inline.
   - the heading is given margin: 0 8px 16px 0. The 8px sits on a
     671.52px box that shrinks to its text; this page's heading is a
     full-width block, so the same 8px would pull centred text 4px
     off centre. Only the 16px below it is taken.
   - the icons are sized by height with their width left to the
     artwork. The supplied widths - 26.89, 32.5, 28.34, 30 - are what
     each icon's own proportions give at that height, and fixing both
     axes would squash them.
======================================== */

@media (min-width: 768px) and (max-width: 1023px) {

    .trust-bar-title {
        font-size: 20px;
        color: #383E48;
        margin-bottom: 35px;
        padding: 10px 0;
    }

    .trust-bar-title span {
        font-size: 20px;
        color: #383E48;
    }

    .trust-bar-title svg {
        width: 26.89px;
        height: 36px;
        margin-right: 16px;
    }

    .trust-item span {
        font-size: 18px;
        color: #383E48;
    }

    .trust-item .trust-item-icon,
    .trust-item img {
        height: 30px;
        width: auto;
        margin-right: 12px;
    }

    .features-section .section-badge {
        color: #1F2024;
        background-color: #D6E7FD;
        padding: 4px 12px;
        font-size: 14px;
        margin-bottom: 16px !important;
    }

    .features-section .section-title {
        font-size: 34px;
        color: #000000;
        line-height: 44px;
        margin-bottom: 16px;
    }

    .features-subtitle {
        font-size: 18px;
        color: #383E48;
        margin-bottom: 40px;
    }

    .feature-tab {
        font-size: 16px;
    }

    .feature-tab img {
        width: 16px;
        height: 16px;
    }

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

    .feature-card h3 {
        font-size: 16px;
        color: #1F2024;
        line-height: 22.5px;
    }

    .feature-card p {
        font-size: 14px;
        color: #626C7C;
    }
}

/* ========================================
   AI, TAILORED AND CTA — SUPPLIED VALUES · 768-1023px
   Nothing above this line is modified. Phones, the two iPad Pro
   widths and desktop keep what they have.

   AI section: heading 30px #1A1A1A with 30px under it, body 16px
   #616B7B, the card on #FFFFFFCC with 28px of padding, its header
   logo 76 x 76.88, the header title 24px and its line 22px in white,
   each feature box on #FFFFFF80 with 20px of padding, its icon in a
   50 x 50 tint of #3C83F61A, the feature titles 20px #2F3946 and
   their text 16px #64748B.

   Tailored: badge 14px #454A55 on #D6E7FD with 4px 16px of padding,
   heading 34px #1A1A1A, lead 18px #383E48, icons 48 x 48, card text
   14px #383E48, and the cards two across - the supplied card text
   measures 199 wide, which only happens in a two-column row; this
   page was still stacking one per row at 768, and at 960 it was
   already two.

   CTA: the label 14px #454A55 with 24px under it, the button's
   padding 0 20px, and the store badges 120 x 40.

   Two readings describe markup this page shapes differently:
   - the feature icon is given as a 50 x 50 container with the icon
     inside it. Here the icon is the element itself, so it takes the
     50 x 50 box with padding holding the drawing in, which comes to
     the same thing. The corner radius is not in the readings and is
     taken from the screenshot.
   - the AI heading's 30px bottom margin needs !important, since the
     markup sets margin-bottom: 10px inline.
======================================== */

@media (min-width: 768px) and (max-width: 1023px) {

    .ai-section .section-title {
        font-size: 30px;
        color: #1A1A1A;
        margin-bottom: 30px !important;
    }

    .ai-desc {
        font-size: 16px;
        color: #616B7B;
    }

    .ai-card {
        background: #FFFFFFCC;
        padding: 28px;
    }

    .ai-card-header {
        padding: 20px;
    }

    .ai-card-header-icon {
        width: 76px;
        height: 76.88px;
        object-fit: contain;
    }

    .ai-card-header h3 {
        font-size: 24px;
        color: #FFFFFF;
        margin-bottom: 20px;
    }

    .ai-card-header p {
        font-size: 22px;
        color: #FFFFFF;
    }

    .ai-feature-item {
        background: #FFFFFF80;
        padding: 20px;
    }

    .ai-feature-icon {
        width: 50px;
        height: 50px;
        padding: 12px;
        box-sizing: border-box;
        background: #3C83F61A;
        border-radius: 12px;
        margin: 13px 0 12px;
    }

    .ai-feature-item h4 {
        font-size: 20px;
        color: #2F3946;
        margin-bottom: 10px;
    }

    .ai-feature-item p {
        font-size: 16px;
        color: #64748B;
    }

    .tailored-section .section-badge {
        font-size: 14px;
        color: #454A55;
        background-color: #D6E7FD;
        padding: 4px 16px;
    }

    .tailored-section .section-title {
        font-size: 34px;
        color: #1A1A1A;
    }

    .tailored-subtitle {
        font-size: 18px;
        color: #383E48;
    }

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

    .tailored-card-icon,
    .tailored-card-icon svg {
        width: 48px;
        height: 48px;
    }

    .tailored-card p {
        font-size: 14px;
        color: #383E48;
    }

    .cta-label {
        font-size: 14px;
        color: #454A55;
        margin-bottom: 24px;
    }

    .cta-section .btn-primary {
        padding: 0 20px;
    }

    .cta-stores .store-btn {
        width: 120px;
        min-width: 120px;
        height: 40px;
    }
}

/* ========================================
   STATS — SUPPLIED VALUES · 768-1023px
   Nothing above this line is modified. Phones, the two iPad Pro
   widths and desktop keep what they have.

   From the inspector: the stat figure 44px #454A55 with 12px under
   it, its description 214 wide at 14px #383E48, and the grid two
   across with 49px either side of it.

   768 was still stacking the four cards one per row; 960 was already
   two across, so only the narrow end of the band changes shape.

   The grid comes to 638 wide here rather than the 550 reported. That
   figure is 49px either side of a 648px container, and this page's
   container is 736 at the same viewport - the margin is applied as
   given and the width follows from it. The card text keeps its own
   measurement either way.
======================================== */

@media (min-width: 768px) and (max-width: 1023px) {

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        margin: 0 49px;
    }

    .stat-card h3 {
        font-size: 44px;
        color: #454A55;
        margin-bottom: 12px;
    }

    .stat-card p {
        font-size: 14px;
        color: #383E48;
        max-width: 214px;
    }
}

/* ========================================
   AI CARD EDGE · 768-1023px
   Nothing above this line is modified. Phones at 767 and below keep
   their clipping, which is what stops the card scrolling sideways
   there; the two iPad Pro widths and desktop never clipped it.

   At 768 the card's bottom edge was being cut off. Two ancestors clip
   it: the max-width: 768px block gives every .container
   overflow: hidden, and that container's bottom sits exactly on the
   card's bottom - 4924 against 4924 - so the 20px corner radius is
   sliced flush. The section around it is a clipping context too, with
   overflow-y: auto and only 20px below the card, while the card's
   shadow is 0 8px 31px and reaches about 39px down.

   Releasing both lets the corner and the shadow draw. Measured at
   768: horizontal overflow stays 0, so the clip was not holding
   anything back. 960 and 1023 already had no clipping ancestor, so
   nothing changes there.
======================================== */

@media (min-width: 768px) and (max-width: 1023px) {
    .ai-section,
    .ai-section .container {
        overflow: visible !important;
    }
}

/* ========================================
   TESTIMONIALS · 768-1023px
   Nothing above this line is modified. Phones at 767 and below keep
   the slider; the two iPad Pro widths and desktop already lay the
   reviews out side by side.

   At 768 the reviews were a swipe slider: the max-width: 768px block
   makes .testimonials-grid a scroll-snap flex row and gives each card
   flex: 0 0 calc(100% - 12px), so one review filled the width - 712
   of a 736 box - and the second sat off-screen. From 820 the same
   page already draws them as a two-column grid, which is what the
   reference shows, so 768 is brought onto that layout rather than a
   new one: two equal columns, a 24px gap, and the 16px above the row
   the inspector reports.

   The scroll behaviour, the card's slider sizing and the dots that go
   with it are all unwound here, since none of them mean anything once
   both reviews are visible at once.
======================================== */

@media (min-width: 768px) and (max-width: 1023px) {

    .testimonials-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        overflow-x: visible !important;
        scroll-snap-type: none;
        padding: 0;
        margin-top: 16px;
    }

    .testimonial-card {
        flex: 0 1 auto;
        min-width: 0;
        margin-right: 0;
        scroll-snap-align: none;
    }

    .testimonial-dots {
        display: none;
    }
}

/* ========================================
   STATS GRID CENTRING · 769-1023px
   Nothing above this line is modified, and neither is 768.

   A max-width: 500px takes hold from 769 up. The 49px side margins
   that came with the supplied values then act as a left offset rather
   than an inset, because the grid can no longer fill the room they
   leave - so it sits 89px from the left while the gap on the right
   grows with the viewport: 211px at 800, 371 at 960, 434 at 1023.

   Automatic side margins centre it wherever that cap binds. 768 is
   left out on purpose: there is no cap at that width, so the grid is
   638 wide and the 49px margins already centre it. 1024 and up have
   their own centring margin and are untouched.
======================================== */

@media (min-width: 769px) and (max-width: 1023px) {
    .stats-grid {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ========================================
   SUPPLIED MOBILE VALUES · 767px and below
   Nothing above this line is modified. This block is closed at 767,
   so iPad Mini at 768, Surface Pro, the iPad Pro widths and desktop
   are all outside it and keep every value they have.

   The first supplied rule came with a max-width: 768px query, which
   would have reached iPad Mini. It is applied at 767 and below with
   the rest, since the ask was mobile only.

   Declarations shown struck through in the source are left out: the
   hero title's clamped font-size, the hero button's height and the
   middle and upper bounds of its min-width clamp, the 600px cap on
   .section-subtitle, and the 750px cap on .features-subtitle. The
   button's min-width is therefore the 160px floor that remained.
======================================== */

@media (max-width: 767px) {

    /* ---- Hero ---- */

    .hero-description,
    .hero-subdesc {
        max-width: 100%;
        word-wrap: break-word;
    }

    .hero-description {
        font-size: 16px;
        font-weight: 500;
        color: #616B7B;
        line-height: 24px;
        margin-bottom: 16px;
    }

    .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 11px;
        padding: 4px 12px;
        background-color: var(--color-primary-light);
        border-radius: 5px;
        font-size: 14px;
        font-weight: 600;
        line-height: 22.5px;
        color: #1F2024;
        margin-bottom: 11px;
    }

    .hero-title {
        font-weight: 800;
        color: #1F2024;
        line-height: 46px;
        margin-bottom: 16px;
        margin-top: -2px;
    }

    .hero-cta-row .btn-primary {
        min-width: 160px;
        padding: 0 32px;
        font-size: 16px;
        font-weight: 700;
        border-radius: 24px;
        box-shadow: none;
    }

    /* ---- Hero dashboard ---- */

    .dashboard-header-text p {
        font-size: 12px;
        font-weight: 400;
        color: #666666;
    }

    .dashboard-item-label {
        font-size: 12px;
        font-weight: 600;
        color: #000000;
    }

    .status-badge {
        font-size: 12px;
        font-weight: 700;
        padding: 4px 12px;
        border-radius: 6px;
    }

    .dashboard-ai-text h4 {
        font-size: 14px;
        font-weight: 600;
        color: #3188F4;
    }

    .dashboard-ai-text p {
        font-size: 12px;
        font-weight: 400;
        color: #666666;
    }

    /* ---- Shared section text ---- */

    .section-subtitle {
        font-size: 16px;
        font-weight: 500;
        line-height: 24px;
        color: rgb(56, 62, 72);
        text-align: center;
        margin: 0 auto;
    }

    /* ---- Age stages ---- */

    .stage-card-body h3 {
        font-size: 20px;
        font-weight: 700;
        color: var(--color-primary);
        margin-bottom: 8px;
    }

    .stage-card-body p {
        font-size: 16px;
        font-weight: 500;
        color: var(--color-body);
        margin-bottom: 0;
        line-height: 1.5;
        flex: 1;
    }

    .stage-tag {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 4px 9px;
        border-radius: 8.42px;
        border: 1px solid var(--color-tag-border);
        font-size: 12px;
    }

    /* ---- Features ---- */

    .features-subtitle {
        font-size: 16px;
        font-weight: 500;
        color: #383E48;
        margin: 0 0 40px;
        text-align: center;
    }

    .feature-tab svg,
    .feature-tab img {
        width: 12px;
        height: 12px;
        object-fit: contain;
    }

    .try-cta .btn-primary {
        width: 270px;
        height: 44px;
        border-radius: 10px;
        padding: 0 24px;
        gap: 10px;
        font-size: 18px;
        font-weight: 700;
        justify-content: center;
    }

    /* ---- AI section ---- */

    .ai-desc {
        font-size: 16px;
        font-weight: 500;
        color: var(--color-body);
        margin-bottom: 0;
        line-height: 28px;
        padding-bottom: 20px;
    }

    .ai-card-header h3 {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 4px;
    }

    .ai-feature-item h4 {
        font-size: 12px;
        font-weight: 500;
        color: #2F3946;
        margin-bottom: 4px;
    }

    .ai-feature-item p {
        font-size: 10px;
        font-weight: 500;
        color: #81858A;
        line-height: 14px;
    }

    /* ---- Tailored and CTA ---- */

    .tailored-subtitle {
        font-size: 15px;
        font-weight: 500;
        color: var(--color-body);
        margin-bottom: 52px;
    }

    .cta-label {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 13px;
        font-weight: 600;
        color: var(--color-label);
        padding-top: 30px;
    }

    .cta-note {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        font-weight: 600;
        color: var(--color-label);
    }

    /* ---- Stats ---- */

    .stat-card p {
        font-size: 14px;
        color: #383E48;
        line-height: 20px;
        margin: 0 auto;
        max-width: 200px;
        font-weight: 600;
    }
}

/* ========================================
   SUPPLIED MOBILE VALUES · 480px and below
   These came with their own max-width: 480px queries, which sit
   inside mobile, so they are kept at that width.

   .section-title was supplied four times over at this width with four
   different sizes - 26px, 28px, 24px and 28px, all over 32px of
   leading. One selector at one width can only take one, so the 28px
   that appeared twice is used. If the four were meant for different
   sections they need a selector each, and this is the one to revisit.
======================================== */

@media (max-width: 480px) {

    .trust-bar-title span {
        font-size: 14px;
    }

    .trust-item span {
        font-size: 12px;
    }

    .trust-item-icon {
        width: 18px;
        height: 24px;
    }

    .section-title,
    .stages-section .section-title {
        font-size: 28px;
        line-height: 32px;
    }

    .feature-tab {
        padding: 6px 12px;
        width: auto;
        height: auto;
        font-size: 10px;
    }

    .stat-card h3 {
        font-size: 44px;
    }
}

/* ========================================
   HERO DASHBOARD AI ROW · 767px and below
   Nothing above this line is modified, and only this one row is
   touched - its sibling .dashboard-item rows and the card around them
   are left alone. Tablet and desktop are outside the query.

   Supplied as 313 x 56 with padding 10px 16px 10px 12px. The height
   and the padding are taken as given. The 313 is not pinned, because
   it is the width this row happens to have inside the reference
   card at 375 rather than a size of its own, and fixing it breaks
   both ends of the range: at 320 the row would run 66px past the
   card's padding and set the card scrolling, and from 414 up it would
   stop short of the sibling rows - 214px short at 600, 381px at 767 -
   where the reference shows it filling the card like they do.

   Left to the card the row measures 303 at 375 against the 313
   reported, the 10px being this card's own padding.

   The 56 is a fixed height from 360 up and is left off below that.
   A minimum does not reach it - the avatar and the two lines of text
   plus this padding come to 61.58, so the row simply ignores a 56px
   floor. Fixed, it measures 56 exactly. At 320 the heading wraps to a
   second line and the content then runs past a 56px box, so the
   narrowest phones keep their natural height.
======================================== */

@media (max-width: 767px) {
    .dashboard-ai {
        padding: 10px 16px 10px 12px;
    }
}

@media (min-width: 360px) and (max-width: 767px) {
    .dashboard-ai {
        height: 56px;
    }
}

/* ===== MOBILE: disable ai-feature-item hover highlight ===== */
@media (max-width: 768px) {
    .ai-feature-item:hover {
        background: inherit;
    }
}

@media (hover: none) {
    .ai-feature-item:hover {
        background: inherit;
    }
}