/* -------------------- */
        /* -- Global Resets & Base Styles -- */
        /* (These are generally fine without prefixes if they are foundational,
           but ensure they don't conflict with user_header/footer styles.
           For this exercise, focusing on component-specific classes.)
        /* -------------------- */
        html {
            font-size: 60%; /* Base 10px for scalable typography */
            scroll-behavior: smooth;
        }

        body {

            font-size: 1.6rem; /* Default font size (16px) */
            line-height: 1.7;
            color: #333333;
            background-color: #FFFFFF;
            margin: 0;
            padding: 0;
            overflow-x: hidden;
        }
        /* Assuming header might be around 8rem (80px) - Adjust as per your actual header */
        /* body { padding-top: 8rem; } */


        /* -------------------- */
        /* -- Typography -- */
        /* -------------------- */
        /* These h1,h2,h3,p styles are general. If they need to be unique to this page
           and avoid any global styles from header/footer, they would need to be scoped
           e.g., .epm-about-main h1 { ... } or ensure higher specificity.
           The !important usage below suggests existing specificity concerns.
        */
        .epm-about-main h1, .epm-about-main h2, .epm-about-main h3 { /* Scoping to main section */
            font-weight: 700;
            color: #1a1a1a;
            margin-top: 0;
            line-height: 1.3;
        }

        .epm-about-main h1 { /* Page Title - prominent */
            font-size: 3.8rem;
            margin-bottom: 3rem;
            text-align: center;
            color: #007AFF !important; /* Example primary color */
        }

        .epm-about-main h2 {
            font-size: 2.8rem;
            margin-bottom: 2rem;
        }

        .epm-about-main h3.epm-about-content-block__title { /* More specific for content block titles */
            font-size: 2.2rem;
            margin-bottom: 1.5rem;
            color: #2c3e50 !important; /* A softer black for sub-titles */
        }

        .epm-about-main p {
            font-size: 1.6rem;
            margin-bottom: 2rem;
            color: #555555 !important;
        }

        .epm-about-main p strong, .epm-about-main strong {
            font-weight: 600;
        }

        ul.epm-about-benefits-list {
            list-style: none;
            padding-left: 0;
        }

        ul.epm-about-benefits-list li {
            padding-left: 2.5rem;
            position: relative;
            margin-bottom: 1.5rem;
        }

        ul.epm-about-benefits-list li::before {
            content: '✅';
            position: absolute;
            left: 0;
            color: #28a745;
            font-size: 1.8rem;
        }

        /* -------------------- */
        /* -- Layout & Containers -- */
        /* -------------------- */
        .epm-about-page-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem; /* Padding for smaller screens */
        }

        .epm-about-brand-story-section {
            padding: 4rem 0;
        }

        .epm-about-brand-story__layout {
            display: flex;
            flex-direction: column; /* Mobile first: stack image and content */
            gap: 3rem; /* Space between image and content, and content blocks */
            align-items: center; /* Center image on mobile */
        }

        .epm-about-brand-story__visual-container {
            width: 100%;
            max-width: 450px; /* Limit image size */
            margin-bottom: 2rem; /* Space below image on mobile */
            animation: epmAboutFadeInFromLeft 1s ease-out forwards; /* Renamed animation */
        }

        .epm-about-brand-story__visual-container img {
            width: 100%;
            height: auto;
            border-radius: 20px;
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
        }

        .epm-about-brand-story__text-content {
            width: 100%;
        }

        .epm-about-content-block {
            background-color: #f8f9fa;
            padding: 2.5rem;
            border-radius: 20px;
            margin-bottom: 3rem;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
            opacity: 0; /* For scroll animation */
            transform: translateY(30px); /* For scroll animation */
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }

        .epm-about-content-block.is-visible { /* State class, keep prefix on base */
            opacity: 1;
            transform: translateY(0);
        }

        .epm-about-content-block__title { /* This is the h3 inside content-block */
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .epm-about-content-block__title .epm-about-emoji-icon { /* Class for emoji span */
            font-size: 2.4rem;
        }

        /* Pill-shaped button example (not in current HTML, but for guidance) */
        .epm-about-action-button {
            display: inline-block;
            background-color: #007AFF;
            color: #FFFFFF;
            padding: 1.2rem 3rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1.6rem;
            box-shadow: 0 4px 15px rgba(0, 122, 255, 0.2);
            transition: background-color 0.3s ease, transform 0.2s ease;
        }

        .epm-about-action-button:hover {
            background-color: #0056b3;
            transform: translateY(-2px);
        }

        /* -------------------- */
        /* -- Animations -- */
        /* -------------------- */
        @keyframes epmAboutFadeInFromLeft { /* Renamed animation */
            from {
                opacity: 0;
                transform: translateX(-50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        /* -------------------- */
        /* -- Responsiveness -- */
        /* -------------------- */
        @media (min-width: 768px) { /* Tablet and larger */
            .epm-about-brand-story__layout {
                flex-direction: row;
                align-items: flex-start;
                gap: 4rem;
            }

            .epm-about-brand-story__visual-container {
                flex: 0 0 40%;
                max-width: none;
                margin-bottom: 0;
            }

            .epm-about-brand-story__text-content {
                flex: 1;
            }

            .epm-about-main h1 { /* Scoped h1 for responsiveness */
                font-size: 4.2rem;
                text-align: left;
            }
        }

        @media (min-width: 1024px) { /* Desktop */
            .epm-about-main h1 { /* Scoped h1 for responsiveness */
                font-size: 4.8rem;
            }

            .epm-about-content-block {
                padding: 3rem;
            }
        }