/* --- START OF FILE styles.css --- */

:root {
    /* ======================================================================== */
    /* THEMATIC CONTROL PANEL                                                   */
    /* ======================================================================== */
    /* All major design decisions are controlled from here. Adjust these        */
    /* variables to change the look and feel of the entire site.                */

    /* ------------------------------------------------------------------------ */
    /* 1. COLOR PALETTE                                                         */
    /* ------------------------------------------------------------------------ */
    --color-brand-primary: #203451;
    --color-brand-secondary: #E0EEF9;
    --color-brand-accent: #F28BD7;
    --color-background-light: #FFFFFF;
    --color-background-dark: var(--color-brand-primary);
    --color-background-soft: rgba(124, 165, 203, 0.31);

    /* Text Colors */
    --color-text-primary: var(--color-brand-primary);
    --color-text-on-dark: var(--color-background-light);
    --color-text-muted: #555555;
    --color-text-on-dark-muted: rgba(255, 255, 255, 0.8);

    /* ------------------------------------------------------------------------ */
    /* 2a. BASE SPACING SCALE                                                   */
    /* A consistent scale for margins, gaps, component padding, etc.            */
    /* These values generally do not change across breakpoints.                 */
    /* ------------------------------------------------------------------------ */
    --space-xs: 0.5rem;   /* 8px */
    --space-sm: 1rem;     /* 16px */
    --space-md: 1.5rem;   /* 24px */
    --space-lg: 3rem;     /* 48px */
    --space-xl: 5rem;     /* 80px */
    --space-xxl: 7.5rem;  /* 120px */

    /* ------------------------------------------------------------------------ */
    /* 2b. RESPONSIVE SECTION PADDING (NEW & IMPROVED!)                         */
    /* Control vertical padding for each section at different breakpoints.      */
    /* Default values are for Desktop (> 992px). Tablet and Mobile values     */
    /* are set in the media queries at the bottom of the file.                */
    /* ------------------------------------------------------------------------ */
    /* Format: --padding-[section-name]-[axis] */
    
    /* -- Desktop Defaults (> 992px) -- */
    --padding-hero-y: 21rem;
    --padding-how-it-works-top: 12rem;
    --padding-how-it-works-bottom: 5rem;
    --padding-support-y: 5rem;
    --padding-testimonials-y: 30rem;
    --padding-experience-y: 14rem;
    --padding-faq-top: 10rem;
    --padding-footer-y: 0rem;

    /* ------------------------------------------------------------------------ */
    /* 3. COMPONENT STYLES (e.g., Buttons)                                      */
    /* ------------------------------------------------------------------------ */
    --btn-primary-bg: var(--color-brand-primary);
    --btn-primary-text: var(--color-background-light);
    --btn-primary-border: var(--color-brand-primary);

    --btn-secondary-bg: var(--color-background-light);
    --btn-secondary-text: var(--color-brand-primary);
    --btn-secondary-border: var(--color-brand-primary);

    /* ------------------------------------------------------------------------ */
    /* 4. TYPOGRAPHY                                                            */
    /* ------------------------------------------------------------------------ */
    --font-family-base: 'Poppins', sans-serif;

    /* Legacy variables for compatibility */
    --dark-blue: var(--color-brand-primary);
    --testimonial-blue: var(--color-brand-secondary);
    --white: var(--color-background-light);
    --font-family: var(--font-family-base);
}


/* ======================================================================== */
/* GLOBAL & BASE STYLES                                                     */
/* ======================================================================== */

html, body {
   /* FIX 1: Prevent horizontal scrolling caused by the hidden mobile menu */
   overflow-x: hidden;
}

body {
    margin: 0;
    font-family: var(--font-family-base);
    background-image: url('assets/background.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: scroll;
    background-color: var(--color-background-dark);
}

body.page-intro,
body.how-it-works {
    background-image: none;
    background-color: var(--color-background-light);
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* Other base styles (headings, buttons, etc.) */
h1 {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: var(--space-md);
    color: var(--color-text-primary);
}

.btn {
    padding: 14px 28px;
    border: 2px solid transparent;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s, color 0.2s;
}

.btn-primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border-color: var(--btn-primary-border);
}

.btn-secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border-color: var(--btn-secondary-border);
}

/* ======================================================================== */
/* SECTION PADDING APPLICATION                                              */
/* ======================================================================== */
/* Sections now use their specific padding variables from the control panel. */

.hero-section {
    padding-top: var(--padding-hero-top, var(--padding-hero-y)); /* Use top variable, with a fallback */
    padding-bottom: var(--padding-hero-y);
    text-align: center;
}

.how-it-works-section {
    padding-top: var(--padding-how-it-works-top);
    padding-bottom: var(--padding-how-it-works-bottom);
}

.support-section {
    /* This now prioritizes --padding-support-top when it's available */
    padding-top: var(--padding-support-top, var(--padding-support-y));
    
    /* It's good practice to also separate the bottom padding control */
    padding-bottom: var(--padding-support-bottom, var(--padding-support-y));
}
.testimonials-section {
    padding-top: var(--padding-testimonials-top, var(--padding-testimonials-y));
    padding-bottom: var(--padding-testimonials-bottom, var(--padding-testimonials-y));
}

.experience-section {
    padding-top: var(--padding-experience-top, var(--padding-experience-y));
    padding-bottom: var(--padding-experience-bottom, var(--padding-experience-y));
    text-align: center;
    color: var(--color-text-on-dark);
}

.faq-section {
    padding-top: var(--padding-faq-top);
    text-align: left;
    max-width: 800px;
    margin: 0 auto;
}

.site-footer-main {
    padding-top: var(--padding-footer-y);
    padding-bottom: var(--padding-footer-y);
    text-align: center;
    color: var(--color-text-on-dark-muted);
}


/* ... (The rest of your component and layout styles remain here) ... */
/* All the styles below this point are largely unchanged as they build upon */
/* the new, more flexible padding system. */

.how-it-works-blue-ellipse { position: absolute; width: 150vw; height: 100vh; top: -40vh; left: 50%;
    transform: translateX(-50%); background-color: var(--color-background-soft);
    border-radius: 50%; z-index: -1; }
.how-it-works-top-ellipse-content { position: absolute; z-index: 2; top: 50%; left: 40%; max-width: 40vw; }
.how-it-works-top-ellipse-content>h1>span { color: var(--color-brand-accent); }
.how-it-works-site-header { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); position: sticky; top: 0; z-index: 50; }
.relative { position: relative; }
.site-header { background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
.header-nav { display: flex; justify-content: space-between; align-items: center; height: 96px; }
.header-logo { height: 60px; width: auto; }
.desktop-nav-links { display: none; align-items: center; }
.desktop-nav-links>a+a { margin-left: 2.5rem; }
.desktop-nav-links a { font-weight: 500; color: var(--color-text-primary); text-decoration: none; transition: opacity 0.2s ease-in-out; }
.desktop-nav-links a:hover { opacity: 0.75; }
.mobile-menu-button-wrapper { display: block; }
.mobile-menu-button { width: 2rem; height: 2rem; display: flex; flex-direction: column; justify-content: space-around; align-items: center; background: none; border: none; padding: 0; cursor: pointer; position: relative; z-index: 51; }
.hamburger-line { display: block; width: 1.5rem; height: 2px; background-color: var(--color-text-primary); transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; transform-origin: center; }
.character-container { height: 12rem; position: relative; display: none; }
.how-it-works-chat-bubble { position: absolute; z-index: 2; top: 60%; left: 20%; transform: translate(-50%, -50%); scale: 80%; }
.hero-section p { font-size: 18px; max-width: 600px; margin: 0 auto var(--space-lg); color: var(--color-text-muted); }
.section-header { text-align: center; margin-bottom: var(--space-lg); }
.section-header h2 { font-size: 36px; margin-bottom: var(--space-sm); color: var(--color-text-primary); }
.section-header p { color: var(--color-text-muted); }
.support-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
.support-card { background: var(--color-background-light); padding: var(--space-md); border-radius: 20px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); }
.support-card h3 { font-size: 24px; }
.support-card p { font-size: 14px; margin: 0; }
.section-cta { text-align: center; margin-top: var(--space-lg); }
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.testimonial-bubble { background-color: var(--testimonial-blue); padding: var(--space-lg); border-radius: 15px; }
.testimonial-bubble p { font-size: 16px; font-style: italic; margin: 0 0 var(--space-md) 0; color: var(--color-text-primary); }
.testimonial-bubble span { font-weight: 600; color: var(--color-text-primary); text-align: right; display: block; }
.section-content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: center; }
.how-it-works-intro { text-align: right; padding-right: var(--space-lg); border-right: 1px solid var(--color-text-on-dark); }
.how-it-works-features { padding-left: var(--space-lg); }
.how-it-works-intro h2 { font-size: 42px; line-height: 1.3; color: var(--color-text-primary); }
.title-separator { width: 60px; height: 5px; background-color: var(--color-text-on-dark); border-radius: 3px; margin: 25px 0 25px auto; }
.feature-item { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); }
.feature-item h3 { font-size: 20px; color: var(--color-text-primary); margin: 0 0 5px 0; }
.feature-item p { margin: 0; color: var(--color-text-muted); font-size: 14px; }
.feature-icon { width: 60px; height: 60px; flex-shrink: 0; }
.experience-content h2 { font-size: 36px; color: var(--color-text-on-dark); margin-bottom: var(--space-sm); }
.experience-content p { color: var(--color-text-on-dark-muted); max-width: 500px; margin: 0 auto var(--space-lg); }
.faq-section h3 { text-align: center; font-size: 32px; color: var(--color-text-on-dark); margin-bottom: var(--space-lg); }
.faq-item { border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding: var(--space-md) 0; }
.faq-item:first-of-type { border-top: 1px solid rgba(255, 255, 255, 0.2); }
.faq-item summary { font-size: 18px; font-weight: 500; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item p { color: var(--color-text-on-dark-muted); padding-top: var(--space-sm); line-height: 1.6; }
.card-mascot { width: 80px; height: auto; margin-left: var(--space-md); }
.site-footer-main .footer-headline { color: var(--color-text-on-dark); }
.site-footer-main .footer-credits b { color: var(--color-text-on-dark); }


/* ======================================================================== */
/* RESPONSIVE CONTROL PANEL ADJUSTMENTS                                     */
/* ======================================================================== */

/* ------------------------------------------------------------------------ */
/* MEDIUM SCREENS (Tablets, <= 992px)                                       */
/* ------------------------------------------------------------------------ */
@media (max-width: 1700px) {
    :root {
        /* ADJUST PADDING HERE */
        --padding-hero-top: 15rem; 
        --padding-hero-y: 0rem;

        --padding-how-it-works-top: 23rem;
        --padding-how-it-works-bottom: 0rem;

        --padding-support-y: 0rem;

        /* === CHANGED HERE === */
        --padding-testimonials-top: 15rem;    /* <-- This is your new top padding control */
        --padding-testimonials-bottom: 5rem;  /* <-- NEW: Controls the bottom padding. Adjust as needed. */
        
        --padding-experience-top: 35rem;
        --padding-faq-top: 6rem;
        --padding-footer-y: 0rem;
    }

    h1 { font-size: 3rem; }
    .section-header h2,
    .how-it-works-intro h2 { font-size: 28px; }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
} 
@media (max-width: 1500px) {
    :root {
        /* ADJUST PADDING HERE */
        --padding-hero-top: 15rem; 
        --padding-hero-y: 0rem;

        --padding-how-it-works-top: 23rem;
        --padding-how-it-works-bottom: 0rem;

        --padding-support-y: 0rem;

        /* === CHANGED HERE === */
        --padding-testimonials-top: 0rem;    /* <-- This is your new top padding control */
        --padding-testimonials-bottom: 5rem;  /* <-- NEW: Controls the bottom padding. Adjust as needed. */
        
        --padding-experience-y: 15rem;
        --padding-faq-top: 6rem;
        --padding-footer-y: 0rem;
    }

    h1 { font-size: 3rem; }
    .section-header h2,
    .how-it-works-intro h2 { font-size: 28px; }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
} 
@media (max-width: 1340px) {
    :root {
        /* ADJUST PADDING HERE */
        --padding-hero-top: 8rem; 
        --padding-hero-y: 0rem;

        --padding-how-it-works-top: 28rem;
        --padding-how-it-works-bottom: 0rem;

        --padding-support-y: 14rem;

        /* === CHANGED HERE === */
        --padding-testimonials-top: 33rem;    /* <-- This is your new top padding control */
        --padding-testimonials-bottom: 5rem;  /* <-- NEW: Controls the bottom padding. Adjust as needed. */
        
        --padding-experience-y: 0rem;
        --padding-faq-top: 3.5rem;
        --padding-footer-y: 3.5rem;
    }

    h1 { font-size: 3rem; }
    .section-header h2,
    .how-it-works-intro h2 { font-size: 28px; }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
}


@media (max-width: 992px) {
    :root {
        /* ADJUST PADDING HERE FOR TABLETS */
        --padding-hero-top: 5rem; 
        --padding-hero-y: 0rem;
        --padding-how-it-works-top: 2rem;
        --padding-how-it-works-bottom: 0rem;
        --padding-support-y: 0rem;
        --padding-testimonials-y: 27rem;
        --padding-experience-y: 5rem;
        --padding-faq-top: 3.5rem;
        --padding-footer-y: 3.5rem;
    }

    h1 { font-size: 3rem; }
    .section-header h2,
    .how-it-works-intro h2 { font-size: 28px; }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
}

/* ------------------------------------------------------------------------ */
/* SMALL SCREENS (Mobile, <= 768px)                                         */
/* ------------------------------------------------------------------------ */


@media (max-width: 768px) {
    :root {
        /* ADJUST PADDING HERE FOR MOBILE */
        --padding-hero-y: 0rem;
        --padding-how-it-works-top: 10rem;
        --padding-how-it-works-bottom: 2.5rem;
        --padding-support-top: 35rem;
        --padding-testimonials-top: 10rem;
        --padding-testimonials-bottom: 2.5rem;
        --padding-experience-y: 3.5rem;
        --padding-faq-top: 2.5rem;
        --padding-footer-y: 2.5rem;

        /* Invert button colors for dark sections on mobile for better visibility */
        .support-section, .testimonials-section, .experience-section, .site-footer-main {
            --btn-secondary-bg: var(--color-background-light);
            --btn-secondary-text: var(--color-brand-primary);
            --btn-secondary-border: var(--color-brand-primary);

            --btn-primary-bg: var(--color-background-light);
            --btn-primary-text: var(--color-brand-primary);
            --btn-primary-border: var(--color-brand-primary);
        }
    }
    
    h1 { font-size: 2.25rem; }
    
    /* Mobile-specific layout changes */
    .character-container { display: none; }
    .support-grid { grid-template-columns: 1fr; }
    .section-content-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
    
    .how-it-works-section {
        background-color: rgba(255, 255, 255, 0);
        padding-left: var(--space-md); /* Add side padding for the container effect */
        padding-right: var(--space-md);
        border-radius: 20px;
        margin-top: calc(var(--padding-hero-y) * -1); /* Pull up under the hero section */
    }
    
    .support-section .section-header h2,
    .support-section .section-header p {
        color: var(--color-text-on-dark);
    }

    /* FIX 2: Make the testimonials heading text white on dark mobile background */
    .testimonials-section .section-header h2 {
        color: var(--color-text-on-dark);
    }
    
    .how-it-works-intro { text-align: center; border-right: none; padding-right: 0; }
    .title-separator { margin-left: auto; margin-right: auto; background-color: var(--color-text-primary); }
    .how-it-works-features { padding-left: 0; }

    .support-card.is-resizable { padding: var(--space-md); flex-direction: column; align-items: center; text-align: center; }
    .support-card.is-resizable h3 { font-size: 20px; }
    .support-card.is-resizable .card-mascot { margin: var(--space-md) 0 0 0; }

    .how-it-works-blue-ellipse { width: 180vw; height: 50vh; top: -15vh; }
    .how-it-works-chat-bubble { width: 30vw; max-width: 200px; }
}



@media (max-width: 606px) {
    :root {
        /* ADJUST PADDING HERE FOR MOBILE */
        --padding-hero-y: 0rem;
        --padding-how-it-works-top: 2.5rem;
        --padding-how-it-works-bottom: 2.5rem;
        --padding-support-y: 15rem;
        --padding-testimonials-top: 2.5rem;
        --padding-testimonials-bottom: 2.5rem;
        --padding-experience-y: 3.5rem;
        --padding-faq-top: 2.5rem;
        --padding-footer-y: 2.5rem;

        /* Invert button colors for dark sections on mobile for better visibility */
        .support-section, .testimonials-section, .experience-section, .site-footer-main {
            --btn-secondary-bg: var(--color-background-light);
            --btn-secondary-text: var(--color-brand-primary);
            --btn-secondary-border: var(--color-brand-primary);

            --btn-primary-bg: var(--color-background-light);
            --btn-primary-text: var(--color-brand-primary);
            --btn-primary-border: var(--color-brand-primary);
        }
    }
    
    h1 { font-size: 2.25rem; }
    
    /* Mobile-specific layout changes */
    .character-container { display: none; }
    .support-grid { grid-template-columns: 1fr; }
    .section-content-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
    
    .how-it-works-section {
        background-color: rgba(255, 255, 255, 0);
        padding-left: var(--space-md); /* Add side padding for the container effect */
        padding-right: var(--space-md);
        border-radius: 20px;
        margin-top: calc(var(--padding-hero-y) * -1); /* Pull up under the hero section */
    }
    
    .support-section .section-header h2,
    .support-section .section-header p {
        color: var(--color-text-on-dark);
    }
    
    .how-it-works-intro { text-align: center; border-right: none; padding-right: 0; }
    .title-separator { margin-left: auto; margin-right: auto; background-color: var(--color-text-primary); }
    .how-it-works-features { padding-left: 0; }

    .support-card.is-resizable { padding: var(--space-md); flex-direction: column; align-items: center; text-align: center; }
    .support-card.is-resizable h3 { font-size: 20px; }
    .support-card.is-resizable .card-mascot { margin: var(--space-md) 0 0 0; }

    .how-it-works-blue-ellipse { width: 180vw; height: 50vh; top: -15vh; }
    .how-it-works-chat-bubble { width: 30vw; max-width: 200px; }
}

@media (max-width: 490px) {
    :root {
        /* ADJUST PADDING HERE FOR VERY SMALL MOBILE */
        --padding-hero-top: 12rem;
        --padding-how-it-works-top: 30rem;
        --padding-how-it-works-bottom: 2.5rem;
        --padding-support-y: 2.5rem;
        --padding-testimonials-top: 2.5rem;
        --padding-testimonials-bottom: 2.5rem;
        --padding-experience-y: 3.5rem;
        --padding-faq-top: 2.5rem;
        --padding-footer-y: 2.5rem;
    }
    
    h1 { font-size: 2.25rem; }
    
    /* --- MOBILE LAYOUT CHANGES --- */
    .character-container { display: none; }
    .support-grid { grid-template-columns: 1fr; }
    .section-content-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
    
    .how-it-works-section {
        background-color: rgba(41, 32, 32, 0); 
        padding-left: var(--space-md);
        padding-right: var(--space-md);
        border-radius: 20px;
        margin-top: calc(var(--padding-hero-y) * -1);
    }
    
    /* EXPLICIT COLOR CONTROL FOR HOW-IT-WORKS SECTION */
    .how-it-works-section .how-it-works-intro h2 { color: var(--color-text-on-dark); }
    .how-it-works-section .title-separator { background-color: var(--color-text-on-dark); }
    .how-it-works-section .feature-item h3 { color: var(--color-text-on-dark); }
    .how-it-works-section .feature-item p { color: var(--color-text-on-dark-muted); }

    /* FIX FOR SUPPORT SECTION (Making it a light card) */
    .support-section {
        background-color: var(--color-background-light);
        border-radius: 20px;
        padding-left: var(--space-md);
        padding-right: var(--space-md);
        margin-left: var(--space-sm);
        margin-right: var(--space-sm);
    }
    .support-section .section-header h2,
    .support-section .section-header p {
        color: var(--color-text-primary);
    }
    
    /* ==================================================================== */
    /* FINAL FIX FOR EXPERIENCE SECTION & FOOTER                            */
    /* ==================================================================== */

    /* 1. TARGET THE BUTTONS */
    .experience-section .btn-secondary,
    .site-footer-main .btn-secondary,
    .site-footer-main .btn-primary {
        background-color: var(--color-background-light);
        color: var(--color-brand-primary);
        border-color: var(--color-brand-primary);
    }

    /* 2. TARGET THE PARAGRAPH AND THE FOOTER CREDITS */
    .experience-section .experience-content p,
    .site-footer-main .footer-credits { /* <<<< THIS IS THE CORRECTED SELECTOR */
        color: var(--color-text-on-dark); /* This sets the text to fully white */
    }

    /* --- Other Mobile Styles --- */
    .how-it-works-intro { text-align: center; border-right: none; padding-right: 0; }
    .how-it-works-features { padding-left: 0; }
    .support-card.is-resizable { padding: var(--space-md); flex-direction: column; align-items: center; text-align: center; }
    .support-card.is-resizable h3 { font-size: 20px; }
    .support-card.is-resizable .card-mascot { margin: var(--space-md) 0 0 0; }
    .how-it-works-blue-ellipse { width: 180vw; height: 50vh; top: -15vh; }
    .how-it-works-chat-bubble { width: 30vw; max-width: 200px; }
}


@media (max-width: 400px) {
    :root {
        /* ADJUST PADDING HERE FOR VERY SMALL MOBILE */
        --padding-hero-top: 12rem;
        --padding-how-it-works-top: 24rem;
        --padding-how-it-works-bottom: 2.5rem;
        --padding-support-y: 2.5rem;
        --padding-testimonials-top: 2.5rem;
        --padding-testimonials-bottom: 2.5rem;
    
        --padding-experience-y: 3.5rem;
        --padding-faq-top: 2.5rem;
        --padding-footer-y: 2.5rem;
    }
    
    h1 { font-size: 2.25rem; }
    
    /* --- MOBILE LAYOUT CHANGES --- */
    .character-container { display: none; }
    .support-grid { grid-template-columns: 1fr; }
    .section-content-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
    
    .how-it-works-section {
        background-color: rgba(41, 32, 32, 0); 
        padding-left: var(--space-md);
        padding-right: var(--space-md);
        border-radius: 20px;
        margin-top: calc(var(--padding-hero-y) * -1);
    }
    
    /* EXPLICIT COLOR CONTROL FOR HOW-IT-WORKS SECTION */
    .how-it-works-section .how-it-works-intro h2 { color: var(--color-text-on-dark); }
    .how-it-works-section .title-separator { background-color: var(--color-text-on-dark); }
    .how-it-works-section .feature-item h3 { color: var(--color-text-on-dark); }
    .how-it-works-section .feature-item p { color: var(--color-text-on-dark-muted); }

    /* FIX FOR SUPPORT SECTION (Making it a light card) */
    .support-section {
        background-color: var(--color-background-light);
        border-radius: 20px;
        padding-left: var(--space-md);
        padding-right: var(--space-md);
        margin-left: var(--space-sm);
        margin-right: var(--space-sm);
    }
    .support-section .section-header h2,
    .support-section .section-header p {
        color: var(--color-text-primary);
    }
    
    /* ==================================================================== */
    /* FINAL FIX FOR EXPERIENCE SECTION & FOOTER                            */
    /* ==================================================================== */

    /* 1. TARGET THE BUTTONS */
    .experience-section .btn-secondary,
    .site-footer-main .btn-secondary,
    .site-footer-main .btn-primary {
        background-color: var(--color-background-light);
        color: var(--color-brand-primary);
        border-color: var(--color-brand-primary);
    }

    /* 2. TARGET THE PARAGRAPH AND THE FOOTER CREDITS */
    .experience-section .experience-content p,
    .site-footer-main .footer-credits { /* <<<< THIS IS THE CORRECTED SELECTOR */
        color: var(--color-text-on-dark); /* This sets the text to fully white */
    }

    /* --- Other Mobile Styles --- */
    .how-it-works-intro { text-align: center; border-right: none; padding-right: 0; }
    .how-it-works-features { padding-left: 0; }
    .support-card.is-resizable { padding: var(--space-md); flex-direction: column; align-items: center; text-align: center; }
    .support-card.is-resizable h3 { font-size: 20px; }
    .support-card.is-resizable .card-mascot { margin: var(--space-md) 0 0 0; }
    .how-it-works-blue-ellipse { width: 180vw; height: 50vh; top: -15vh; }
    .how-it-works-chat-bubble { width: 30vw; max-width: 200px; }
}
@media (min-width: 768px) {
    .desktop-nav-links { display: flex; }
    .mobile-menu-button-wrapper { display: none; }
    .character-container { display: block; }
}

/* ======================================================================== */
/* INTRO PAGE & FOOTER STYLES (NO MAJOR CHANGES NEEDED)                     */
/* These benefit from the base variables but don't need the same granular   */
/* section-by-section control.                                              */
/* ======================================================================== */
.intro-page-section { text-align: center; padding: var(--space-xl) 0; position: relative; }
.intro-page-section .subtitle { font-size: 22px; font-weight: 600; color: #374151; max-width: 768px; margin: var(--space-sm) auto var(--space-md); }
.intro-page-section .intro-description { font-size: 16px; color: #4b5563; max-width: 768px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-sm); line-height: 1.6; }
.language-toggle-placeholder { position: absolute; top: 0; right: 0; }
.language-toggle-placeholder img { height: 48px; width: auto; }
.challenges-section { position: relative; overflow: hidden; z-index: 30; }
.challenges-curve { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; z-index: 10; pointer-events: none; }
.challenges-content-wrapper { position: relative; z-index: 20; padding: var(--space-xl) 0 var(--space-xxl) 0; }
.deco-pink-blob, .deco-purple-circle, .deco-yellow-circle, .deco-trees { position: absolute; display: none; z-index: -1; }
@media (min-width: 768px) { .deco-pink-blob, .deco-purple-circle, .deco-yellow-circle, .deco-trees { display: block; } }
.deco-pink-blob { top: -5rem; left: 0; width: 250px; }
.deco-purple-circle { top: 5rem; right: 0; width: 50px; }
.deco-yellow-circle { bottom: 5rem; left: 5rem; width: 224px; }
.deco-trees { bottom: 5rem; right: 5rem; width: 192px; }
.challenges-container { max-width: 512px; margin: 0 auto; padding: 0 var(--space-md); position: relative; z-index: 5; }
.challenge-intro-box { background-color: rgba(254, 252, 232, 0.9); backdrop-filter: blur(4px); border-radius: 12px; padding: 28px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); margin-bottom: var(--space-lg); font-size: 20px; font-style: italic; color: #1f2937; }
.challenge-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.challenge-item { background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(4px); border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); padding: var(--space-sm); display: flex; align-items: center; gap: var(--space-sm); color: #374151; }
.challenge-item img { width: 40px; height: 40px; flex-shrink: 0; }
.unique-features-section { background-color: #fff5f5; padding: var(--space-xl) 0; position: relative; z-index: 20; margin-top: -1px; }
.unique-features-intro { text-align: center; }
.unique-features-intro h2 { font-size: 48px; font-weight: 800; line-height: 1.1; color: var(--color-text-primary); }
.molly-wink-img { margin-top: var(--space-lg); margin-left: auto; margin-right: auto; width: 100%; max-width: 250px; height: auto; }
.unique-features-list { display: flex; flex-direction: column; gap: 40px; }
.intro-page-footer { position: relative; z-index: 10; margin-top: -1px; background-color: #bedeb5; background-image: url('assets/IntroFooter.svg'); background-position: top center; background-repeat: no-repeat; background-size: 100% auto; padding: 200px var(--space-md) 32px; text-align: center; color: var(--color-text-primary); }
.footer-headline { font-size: 36px; font-weight: 700; color: var(--color-text-primary); }
.footer-cta-buttons { margin-top: var(--space-lg); display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-sm); }
.btn-footer-primary, .btn-footer-secondary { width: auto; font-weight: 600; padding: 12px 24px; border-radius: 9999px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); display: flex; align-items: center; justify-content: center; gap: 12px; text-decoration: none; transition: background-color 0.2s ease-in-out; }
.btn-footer-primary img, .btn-footer-secondary img { width: 24px; height: 24px; }
.btn-footer-primary { background-color: var(--color-background-light); color: #1e40af; }
.btn-footer-primary:hover { background-color: #f3f4f6; }
.btn-footer-secondary { background-color: #15803d; color: var(--color-background-light); }
.btn-footer-secondary:hover { background-color: #166534; }
.footer-spacer { height: 64px; }
.footer-credits { font-size: 14px; line-height: 1.5; }
@media (max-width: 992px) { .unique-features-intro h2 { font-size: 2.5rem; } .footer-headline { font-size: 1.875rem; } }
@media (max-width: 768px) { .intro-page-section { padding: var(--space-lg) 0; } .intro-page-section .subtitle { font-size: 1.125rem; } .unique-features-intro { text-align: center; } .unique-features-intro h2 { font-size: 2rem; } .molly-wink-img { margin-left: auto; margin-right: auto; } }

/* --- MOBILE MENU STYLES (Simplified) --- */
.mobile-menu-checkbox { display: none; }
.mobile-nav-links { display: flex; flex-direction: column; gap: var(--space-sm); position: fixed; top: 0; right: 0; width: 80%; max-width: 320px; height: 100vh; background-color: var(--color-background-light); padding: 100px 30px 30px; z-index: 49; box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1); transform: translateX(100%); visibility: hidden; transition: transform 0.3s ease-in-out, visibility 0.3s; }
.mobile-nav-links a { color: var(--color-text-primary); text-decoration: none; font-size: 1.25rem; font-weight: 600; padding: var(--space-sm); border-radius: 8px; transition: background-color 0.2s; }
.mobile-nav-links a:hover { background-color: #f3f4f6; }
.mobile-menu-checkbox:checked~.mobile-nav-links { transform: translateX(0); visibility: visible; }
.mobile-menu-checkbox:checked~.mobile-menu-button .hamburger-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.mobile-menu-checkbox:checked~.mobile-menu-button .hamburger-line:nth-child(2) { opacity: 0; }
.mobile-menu-checkbox:checked~.mobile-menu-button .hamburger-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* --- FOOTER MARGIN FOR DECORATIVE EFFECT --- */
@media (min-width: 1305px) { .site-footer-main { margin-bottom: 20vh; } }
@media (min-width: 1655px) { .site-footer-main { margin-bottom: 200vh; } }


/* DELETED the incorrect @media (max-width: 400px) block that was here */