/* page-how-it-works.css - Final attempt for extremely compact, left-aligned persona headings */

/* Hero Section: More balanced size */
.how-it-works-hero {
    /* Removed background gradient to make it transparent/white */
    background-color: transparent; /* Or var(--white) if you want an explicit white background */
    color: var(--text-dark); /* Changed text color to dark for readability on light background */
    padding: 60px 0;
    text-align: center;
    border-radius: 0 0 20px 20px;
    margin-bottom: 40px;
    box-shadow: none; /* Removed shadow as per request */
    position: relative;
    overflow: hidden;
}

.how-it-works-hero::before {
    /* Removed background pattern as it might conflict with transparent background */
    content: none;
}

.how-it-works-hero .container {
    position: relative;
    z-index: 1;
}

.how-it-works-hero h1 {
    font-size: 2.5em;
    margin-bottom: 12px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-shadow: none; /* Removed text shadow as text is now dark */
    color: var(--text-dark); /* Ensure heading is dark */
}

.how-it-works-hero p {
    font-size: 1.1em;
    max-width: 650px;
    margin: 0 auto;
    opacity: 1; /* Ensure full opacity */
    line-height: 1.5;
    font-weight: 600; /* Made paragraph bolder for better appearance */
    text-shadow: none; /* Removed text shadow as text is now dark */
    color: var(--text-body); /* Ensure paragraph is dark */
}

/* Persona Section: Top-level container for each user type */
.persona-section {
    padding: 25px 0;
    margin-bottom: 40px;
    display: block;
    /* Remove these overrides */
    /* opacity: 1 !important; */
    /* visibility: visible !important; */
}

.persona-section.bg-light-gray {
    background-color: var(--background-light);
    border-radius: 10px;
    padding: 30px 0;
    box-shadow: var(--shadow-xs);
}

/* Section Title Styling Enhancement - Refined for better alignment and size */
.persona-section .section-title {
    text-align: center;
    margin-bottom: 20px; /* Reduced from 30px */
    padding: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.persona-section .section-heading {
    font-size: 0.9em; /* Reduced from 1.1em for even smaller appearance */
    color: var(--text-body); /* Changed from primary-dark to text-body for less prominence */
    margin-bottom: 0; /* Removed bottom margin since there's no paragraph */
    font-weight: 500; /* Reduced from 600 for lighter appearance */
    line-height: 1.2;
    text-align: center;
    position: relative;
    display: inline-block;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.persona-section .section-heading i {
    margin-right: 8px;
    font-size: 0.9em; /* Slightly reduced icon size to match text */
}

/* Remove the divider under the section heading for a cleaner look */
.persona-section .section-heading:after {
    display: none; /* Remove the divider completely */
}

.persona-section .section-title p {
    font-size: 0.95em; /* Reduced from 1.1em */
    color: var(--text-body);
    max-width: 550px; /* Reduced from 650px */
    margin: 0 auto;
    line-height: 1.4;
    text-align: center;
}

/* Add a subtle divider under the section heading */
.persona-section .section-heading:after {
    content: '';
    display: block;
    width: 60px; /* Reduced from 80px */
    height: 2px; /* Reduced from 3px */
    background: var(--primary-light); /* Lighter color for subtlety */
    margin: 10px auto 0; /* Reduced top margin */
    border-radius: 2px;
}

/* Fix the duplicate section title styles that were causing conflicts */
/* Remove these duplicate styles as they're overriding our enhancements */
/* .persona-section .section-title {
    text-align: left;
    margin-bottom: 30px;
    display: block;
}

.persona-section .section-heading {
    font-size: 1.5em;
    color: var(--text-dark);
    margin-bottom: 6px;
    font-weight: 700;
    line-height: 1.1;
    text-align: left;
} */

.persona-section .section-title p {
    font-size: 0.8em;
    color: var(--text-body);
    max-width: 450px;
    margin-left: 0;
    margin-right: auto;
    line-height: 1.4;
    text-align: left;
}

/* How It Works Step: Alternating layout with balanced sizing */
.how-it-works-step {
    padding: 30px 0;
    position: relative;
    overflow: hidden;
    display: block;
    /* Remove these overrides */
    /* opacity: 1 !important; */
    /* visibility: visible !important; */
}

/* Background for alternating steps if needed (overrides bg-light-gray on parent) */
.how-it-works-step.bg-light-gray {
    background-color: var(--background-light);
}

.how-it-works-step .step-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
}

/* Image on Left, Text on Right */
.how-it-works-step.image-left-text-right .step-container {
    grid-template-areas: "media content";
}

/* Image on Right, Text on Left */
.how-it-works-step.image-right-text-left .step-container {
    grid-template-areas: "content media";
}

.step-media {
    grid-area: media;
    position: relative;
    padding: 6px;
}

.step-media img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: var(--shadow-xxs);
    transition: transform 0.2s ease-in-out;
}

.step-media:hover img {
    transform: scale(1.002);
}

.step-content {
    grid-area: content;
    padding: 6px 0;
}

.step-content .step-number {
    font-size: 2.2em;
    font-weight: 800;
    color: var(--primary-light);
    line-height: 1;
    margin-bottom: 5px;
    display: block;
}

.step-content h3 {
    font-size: 1.6em;
    color: var(--text-dark);
    margin-bottom: 8px;
    font-weight: 700;
    line-height: 1.2;
}

.step-content p {
    font-size: 0.9em;
    color: var(--text-body);
    margin-bottom: 15px;
    line-height: 1.5;
}

.step-features {
    list-style: none;
    padding: 0;
    margin-bottom: 15px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
}

.step-features li {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    font-size: 0.85em;
    color: var(--text-dark);
    font-weight: 500;
}

.step-features li i {
    color: var(--success);
    font-size: 0.95em;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Call to Action at Bottom: Modern, clean design */
.cta-bottom {
    /* Replace gradient with a cleaner solid color */
    background-color: var(--primary);
    color: var(--white);
    padding: 60px 0;
    text-align: center;
    border-radius: 16px; /* Increased border radius for modern look */
    margin: 60px auto; /* Increased margin for better spacing */
    max-width: 1100px;
    box-shadow: var(--shadow-lg); /* More pronounced shadow for depth */
    position: relative;
    overflow: hidden;
    display: block;
}

/* Remove the pattern background for a cleaner look */
.cta-bottom::before {
    display: none;
}

.cta-bottom .container {
    position: relative;
    z-index: 1;
    max-width: 800px; /* Constrain width for better readability */
}

.cta-bottom h2 {
    font-size: 2.4em;
    margin-bottom: 16px;
    font-weight: 800;
    line-height: 1.2;
    text-shadow: none; /* Remove text shadow for cleaner look */
    letter-spacing: -0.02em; /* Slight negative letter spacing for modern typography */
}

.cta-bottom p {
    font-size: 1.1em;
    margin-bottom: 30px;
    opacity: 1;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-weight: 400; /* Increased from 300 for better readability */
    line-height: 1.6; /* Improved line height */
}

/* Add a subtle animated background effect */
.cta-bottom::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    transform: skewY(-3deg) translateY(30%);
    z-index: 0;
}

.cta-bottom .cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px; /* Increased gap between buttons */
    flex-wrap: wrap;
}

.cta-bottom .btn-lg {
    padding: 14px 32px; /* Larger padding for more prominent buttons */
    font-size: 1em;
    min-width: 200px;
    border-radius: 50px; /* Fully rounded buttons for modern look */
    font-weight: 600;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    border: 2px solid transparent; /* Prepare for hover effects */
}

.cta-bottom .btn-primary {
    background-color: var(--white);
    color: var(--primary);
    border-color: var(--white);
}

.cta-bottom .btn-primary:hover {
    background-color: transparent;
    color: var(--white);
    border-color: var(--white);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.cta-bottom .btn-outline-white {
    background-color: transparent;
    border-color: var(--white);
    color: var(--white);
}

.cta-bottom .btn-outline-white:hover {
    background-color: var(--white);
    color: var(--primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* Add subtle animation for the CTA section */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cta-bottom h2,
.cta-bottom p,
.cta-bottom .cta-buttons {
    animation: fadeInUp 0.8s ease forwards;
}

.cta-bottom p {
    animation-delay: 0.2s;
}

.cta-bottom .cta-buttons {
    animation-delay: 0.4s;
}


/* Responsive Adjustments: Ensuring adaptability across devices */
@media (max-width: 1200px) {
    .how-it-works-hero h1 {
        font-size: 2.2em;
    }
    .how-it-works-hero p {
        font-size: 1em;
    }
    .persona-section .section-heading {
        font-size: 1.4em;
    }
    .persona-section .section-title p {
        font-size: 0.78em;
    }
    .how-it-works-step .step-container {
        gap: 25px;
    }
    .step-content .step-number {
        font-size: 2em;
    }
    .step-content h3 {
        font-size: 1.5em;
    }
    .step-content p {
        font-size: 0.88em;
    }
    .step-features li {
        font-size: 0.8em;
    }
    .cta-bottom h2 {
        font-size: 2em;
    }
    .cta-bottom p {
        font-size: 0.95em;
    }
    .cta-bottom .btn-lg {
        padding: 9px 22px;
        font-size: 0.85em;
    }
}

@media (max-width: 992px) {
    .how-it-works-hero {
        padding: 50px 0;
        margin-bottom: 30px;
        border-radius: 0 0 12px 12px;
    }
    .how-it-works-hero h1 {
        font-size: 1.8em;
    }
    .how-it-works-hero p {
        font-size: 0.85em;
    }
    .persona-section {
        padding: 20px 0;
        margin-bottom: 30px;
    }
    .persona-section.bg-light-gray {
        padding: 25px 0;
    }
    .persona-section .section-title {
        margin-bottom: 25px;
    }
    .persona-section .section-heading {
        font-size: 1.3em;
        text-align: center; /* Re-center text for mobile */
    }
    .persona-section .section-title p {
        font-size: 0.75em;
        max-width: 85%; /* Allow more width on smaller screens */
        margin-left: auto;
        margin-right: auto;
        text-align: center; /* Re-center text for mobile */
    }

    .how-it-works-step {
        padding: 18px 0;
    }
    .how-it-works-step .step-container {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 0 var(--spacing-lg);
    }

    .how-it-works-step.image-left-text-right .step-container,
    .how-it-works-step.image-right-text-left .step-container {
        grid-template-areas: "media" "content";
    }

    .step-media img {
        max-width: 90%;
    }

    .step-content {
        text-align: center; /* Center content for mobile */
    }
    .step-content .step-number {
        font-size: 1.8em;
    }
    .step-content h3 {
        font-size: 1.4em;
    }
    .step-content p {
        font-size: 0.8em;
    }
    .step-features {
        justify-content: center;
    }
    .step-features li {
        justify-content: center;
    }


    .cta-bottom {
        padding: 40px 0;
        margin: 30px auto; /* Centered with auto margins */
        border-radius: 6px;
    }
    .cta-bottom h2 {
        font-size: 1.8em;
    }
    .cta-bottom p {
        font-size: 0.85em;
        margin-bottom: 20px;
    }
    .cta-bottom .cta-buttons {
        flex-direction: column;
        gap: 8px;
    }
    .cta-bottom .btn-lg {
        min-width: 75%;
        padding: 8px 18px;
        font-size: 0.85em;
    }
}

@media (max-width: 768px) {
    .how-it-works-hero {
        padding: 35px 15px;
        border-radius: 0 0 8px 8px;
    }
    .how-it-works-hero h1 {
        font-size: 1.5em;
    }
    .how-it-works-hero p {
        font-size: 0.75em;
    }
    .persona-section {
        padding: 15px 0;
        margin-bottom: 20px;
    }
    .persona-section.bg-light-gray {
        padding: 20px 0;
    }
    .persona-section .section-title {
        margin-bottom: 15px;
    }
    .persona-section .section-heading {
        font-size: 1.1em;
    }
    .persona-section .section-title p {
        font-size: 0.7em;
    }
    .how-it-works-step {
        padding: 12px 0;
    }
    .step-content .step-number {
        font-size: 1.6em;
    }
    .step-content h3 {
        font-size: 1.2em;
    }
    .step-features li {
        font-size: 0.75em;
    }
    .cta-bottom {
        padding: 25px 15px;
        margin: 20px auto; /* Centered with auto margins */
        border-radius: 4px;
    }
    .cta-bottom h2 {
        font-size: 1.4em;
    }
    .cta-bottom p {
        font-size: 0.75em;
        margin-bottom: 15px;
    }
}

@media (max-width: 480px) {
    .how-it-works-hero {
        padding: 20px 10px;
    }
    .how-it-works-hero h1 {
        font-size: 1.3em;
    }
    .how-it-works-hero p {
        font-size: 0.7em;
    }
    .persona-section .section-heading {
        font-size: 1em;
    }
    .persona-section .section-title p {
        font-size: 0.68em;
    }
    .how-it-works-step {
        padding: 8px 0;
    }
    .step-media img {
        max-width: 90%;
    }
    .step-content .step-number {
        font-size: 1.3em;
    }
    .step-content h3 {
        font-size: 1em;
    }
    .step-content p {
        font-size: 0.7em;
    }
    .step-features li {
        font-size: 0.65em;
        gap: 4px;
    }
    .cta-bottom h2 {
        font-size: 1.2em;
    }
    .cta-bottom p {
        font-size: 0.7em;
    }


/* TEMPORARY FIX: REMOVE THIS ONCE YOU FIND THE REAL CONFLICT */ 
[data-aos][data-aos].aos-animate { 
    opacity: 1 !important; 
    visibility: visible !important; 
    transform: none !important; /* Ensures no lingering transform issues */ 
} 
 
/* Also target elements that haven't animated yet, if they are stuck */ 
[data-aos]:not(.aos-animate) { 
    opacity: 1 !important; 
    visibility: visible !important; 
    transform: none !important; 
} /* Close @media (max-width: 480px) */
} /* Close root stylesheet */