/* CSS variables */

:root {
  --primary-color: #4F2B88;
}
       
       /* Apply Red Hat Display font family (Updated) */
        body {
            font-family: 'Red Hat Display', sans-serif;
        }

        header {
            background-color: #381F5E;
        }

        p {
            margin-bottom: 1rem !important;
        }

     

        h3 {
            font-size: 1.2rem !important;
        }

        body.inner-page header,
        body.inner-page h1,
        body.inner-page .summary {
            text-align: left;
        }

        body.inner-page header {
            background-color: transparent;
        }
        
        /* Custom colors from mock-up */
        .bg-custom-purple { background-color: #4F2B88; }
        .bg-custom-gray { background-color: #F8F8F8; }
        .bg-custom-button { background-color: #6D5AEE; }
        .text-custom-button { color: #6D5AEE; }
        .border-custom-button { border-color: #6D5AEE; }
        .placeholder-custom::placeholder { color: #9CA3AF; } /* Tailwind gray-400 */

        /* Visually-hidden class for Honeypot field */
        .visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            padding: 0;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
        }

        img.character-single {
            max-width: 200px; /* Updated from 250px */
        }

        #itoms-logo {
            max-width: 300px; /* Updated from 240px */
        }

        /* Removed img.characters max-width */

        footer {
            text-align: center;
        }

        .legals a {
            text-decoration: underline;
        }

        .purple a,
        .inner-page h1 {
            color: var(--primary-color);
        }

        .inner-page #itoms-logo {
            max-width: 150px;
        }

        @media (max-width: 768px) {
            body.inner-page header, 
            header {
                padding: 1.5rem;
            }
            img.character-single {
                max-width: 120px;
            }
        }


        /* CSS variables */
        :root {
          --primary-color: #4F2B88;
        }  
               
       
       /* Apply Red Hat Display font family (Updated) */
        body {
            font-family: 'Red Hat Display', sans-serif;
        }

        /* Removed header background-color */
        
        /* Custom colors from mock-up */
        .bg-custom-purple { background-color: var(--primary-color); }
        .bg-custom-gray { background-color: #F8F8F8; }
        .bg-custom-button { background-color: var(--primary-color); }
        .text-custom-button { color: #6D5AEE; }
        .border-custom-button { border-color: #6D5AEE; }
        .placeholder-custom::placeholder { color: #9CA3AF; } /* Tailwind gray-400 */

        /* Visually-hidden class for Honeypot field */
        .visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            margin: -1px;
            padding: 0;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
        }

        #itoms-logo {
            max-width: 300px;
        }

        footer {
            text-align: center;
        }

        .legals a {
            text-decoration: underline;
        }

        .purple a {
            color: var(--primary-color);
        }

        /* Added styles for inner page content */
        .inner-page-content h2 {
            font-size: 1.875rem; /* 3xl */
            font-weight: 600;
            margin-top: 2.5rem; /* mt-10 */
            margin-bottom: 1rem; /* mb-4 */
        }
        .inner-page-content h3 {
            font-size: 1.5rem; /* 2xl */
            font-weight: 600;
            margin-top: 2rem; /* mt-8 */
            margin-bottom: 0.5rem; /* mb-2 */
        }
        .inner-page-content p {
            margin-bottom: 1.25rem; /* mb-5 */
            line-height: 1.6;
        }
        .inner-page-content ul {
            list-style-type: disc;
            margin-left: 1.5rem; /* ml-6 */
            margin-bottom: 1.25rem; /* mb-5 */
        }
        body.inner-page header {
            padding-bottom: 0px !important;
        }
        .inner-page-content li {
            margin-bottom: 0.5rem; /* mb-2 */
        }
        .inner-page-content a {
            color: var(--primary-color);
            text-decoration: underline;
        }

        .max-w-xl {
            max-width: 38rem !important;
        }


        /* Removed #notify-me-section rules, as Tailwind now handles this */