:root {
            --primary: #3188F4;
            --heading: #1F2024;
            --body-alt: #383E48;
            --banner-bg: #F2F8FF;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Manrope', sans-serif;
            background: white;
            color: var(--body-alt);
            line-height: 28px;
        }

        /* Banner */
        .banner {
            background: var(--banner-bg);
            padding: 64px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 32px;
        }

        .banner h1 {
            font-size: 44px;
            font-weight: 800;
            color: var(--heading);
            text-align: center;
        }

        .banner-text {
            max-width: 1084px;
            font-size: 18px;
            font-weight: 500;
            line-height: 28px;
            color: var(--body-alt);
            padding: 0 20px;
        }

        /* Main Content */
        .content {
            max-width: 1084px;
            margin: 0 auto;
            padding: 64px 20px;
            display: flex;
            flex-direction: column;
            gap: 64px;
        }

        /* Section */
        .section {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .section-title {
            font-size: 24px;
            font-weight: 700;
            color: var(--heading);
        }

        /* Bullet Points */
        .bullets {
            padding-left: 24px;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

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

        .bullet-icon {
            flex-shrink: 0;
            width: 8px;
            height: 18px;
            position: relative;
            margin-top: 0;
        }

        .bullet-icon svg {
            width: 100%;
            height: 100%;
        }

        .bullet-text {
            flex: 1;
            font-size: 18px;
            font-weight: 500;
            line-height: 28px;
            color: var(--body-alt);
        }

        /* Links */
        a {
            color: var(--primary);
            font-weight: 600;
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        strong {
            font-weight: 700;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .banner h1 {
                font-size: 32px;
            }

            .section-title {
                font-size: 22px;
            }

            .banner-text,
            .bullet-text {
                font-size: 16px;
                line-height: 24px;
            }
        }

        @media (max-width: 480px) {
            .banner {
                padding: 48px 0;
            }

            .banner h1 {
                font-size: 26px;
            }

            .content {
                padding: 48px 16px;
                gap: 48px;
            }

            .section-title {
                font-size: 20px;
            }
        }

/* ========================================
   SHARED FOOTER PROTECTION
   Nothing above this line is modified.

   Like the Privacy export, this one styles the bare `a` element -
   primary colour, weight 600, underline on hover - for its policy
   links, and that rule also reaches the shared header and footer.
   The chrome's links are scoped back so they keep header.css's and
   footer.css's own styling, as on every other page.
======================================== */

#mobicip-header a,
#mobicip-footer a,
.mc-header a,
.mc-mob-header a,
.mc-mob-drawer a {
    color: inherit;
    font-weight: inherit;
}

#mobicip-header a:hover,
#mobicip-footer a:hover,
.mc-header a:hover,
.mc-mob-header a:hover,
.mc-mob-drawer a:hover {
    text-decoration: none;
}