/* ========================================
           RESULTS SECTION
           ======================================== */
 .results-section {
     padding: 6rem 2rem;
     background: linear-gradient(135deg, var(--warm-cream) 0%, var(--soft-peach) 100%);
 }

 .results-section .container {
    grid-template-columns: 1fr;
}

 /* Section Header */
 .results-section .results-header {
     max-width: 800px;
     margin: 0 auto 0px;
     text-align: center;
 }

 .results-section .section-title {
     font-weight: 700;
     color: var(--text-dark);
     margin-bottom: 10px;
 }

 .results-section .highlight-green {
     color: var(--brand-green);
 }

 .results-section .section-subtitle {
     font-size: 1.1rem;
     color: var(--text-gray);
     font-weight: 400;
 }

 /* Layout Grid for Comparison Cards */
 .results-section .comparison-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 40px;
 }

 /* Individual Comparison Card (Before/After) */
 .results-section .comparison-card {
     background-color: var(--light-bg);
     border-radius: 12px;
     overflow: hidden;
     /* Ensures image corners are rounded */
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
     text-align: center;
     transition: var(--transition);
 }

 .results-section .comparison-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
 }

 .results-section .card-header {
     padding: 15px 20px;
     font-size: 1.5rem;
     font-weight: 700;
     color: #ffffff;
     text-transform: uppercase;
     justify-content: center;
     margin-bottom: 0;
 }

 .results-section .card-header.before {
     background-color: #ef4444;
     /* Red color for 'Before' state (Pain/Problem) */
 }

 .results-section .card-header.after {
     background-color: var(--brand-yellow);
     /* Green color for 'After' state (Success/Solution) */
 }

 .results-section .card-image-placeholder {
     width: 100%;
     height: 250px;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 1.2rem;
     color: var(--text-dark);
     font-weight: 600;
     border-bottom: 3px solid var(--brand-yellow);
 }

 /* Placeholder Image Styles */
 .results-section .card-image-placeholder.before {
     background-color: #fca5a5;
     /* Lighter red placeholder */
     color: #7f1d1d;
 }

 .results-section .card-image-placeholder.after {
     background-color: #d1fae5;
     /* Lighter green placeholder */
     color: var(--brand-green);
 }

 .results-section .card-body {
     padding: 25px;
 }

 .results-section .card-body p {
     margin: 0;
     color: var(--text-gray);
 }

 /* Metric/Summary Section */
.results-section .metric-summary {
    color: var(--white);
    border-radius: 15px; /* Slightly more rounded corners */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px; /* Increased gap */
}

.results-section .metric-summary h3 {
    font-size: 2rem; /* Larger heading */
    font-weight: 800;
    margin: 0;
    color: var(--text-dark);
}

.results-section .metric-summary .metric-sub {
    color: var(--text-gray);
    margin: 0;
    font-size: 1.15rem; /* Larger subtext */
    max-width: 600px; /* Constrain width for readability */
}

.results-section .metric-row {
    display: flex;
    gap: 25px; /* Increased gap between cards */
    width: 100%;
    justify-content: center;
    align-items: stretch;
}

.results-section .metric-card {
    background: #00a757; /* White background for cards */
    border-radius: 12px;
    padding: 25px 30px;
    flex: 1; /* Allow cards to grow evenly */
    max-width: 280px; /* Max width for individual cards */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* Lighter shadow for cards */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.results-section .metric-card:hover {
    transform: translateY(-8px); /* More pronounced lift effect */
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.2); /* Deeper shadow on hover */
}

.results-section .metric-card .metric-value {
    font-size: 2.8rem; /* Even larger font size */
    font-weight: 900;
    color: #fff; /* Use brand green for values */
    line-height: 1;
}

.results-section .metric-card .metric-label {
    font-size: 1.05rem; /* Slightly larger label */
    color: #fff; /* Dark text for labels */
    font-weight: 600;
}

.results-section .metric-summary p {
    max-width: 760px;
    font-size: 1.1rem; /* Slightly larger paragraph text */
    line-height: 1.7;
    color: var(--text-gray);
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    .results-section .container {
        padding: 0 0;
    }

    .results-section {
        padding: 4rem 2rem;
    }

    .results-section .metric-summary {
        padding: 0px 20px;
        gap: 25px;
        border-radius: 12px;
    }

    .results-section .metric-summary h3 {
        font-size: 1.8rem;
    }

    .results-section .metric-summary .metric-sub {
        font-size: 1.05rem;
    }

    .results-section .metric-row {
        gap: 15px;
        align-items: center;
    }

    .results-section .metric-card {
        max-width: 90%; /* Allow cards to take more width on small screens */
        flex: none; /* Disable flex grow on small screens */
        padding: 20px;
    }

    .results-section .metric-card .metric-value {
        font-size: 2.2rem;
    }

    .results-section .metric-card .metric-label {
        font-size: 1rem;
    }

    .results-section .metric-summary p {
        font-size: 1rem;
    }

    .results-section .card-header {
        padding: 12px 15px;
        font-size: 1.2rem;
    }
}

@media (max-width: 767px) {
    .results-section .metric-row {
        flex-direction: column;
    }

    .results-section .comparison-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .results-section {
        padding: 3rem 1.5rem;
    }

    .results-section .metric-summary {
        gap: 25px;
        border-radius: 12px;
    }
    
    .results-section .metric-card .metric-value {
        font-size: 1.5rem;
    }

    .results-section .metric-card {
        padding: 18px;
        gap: 5px;
    }
}

@media (max-width: 480px) {
    .results-section .metric-summary h3 {
        font-size: 1.6rem;
    }

    .results-section .metric-summary .metric-sub {
        font-size: 0.95rem;
    }

    .results-section .metric-card .metric-label {
        font-size: 0.9rem;
    }

    .results-section .step-content h4 {
        font-size: 1.3rem;
    }
}