/* static/css/why_us.css */

/* Hero Section */
.why-hero {
    text-align: center;
    padding: 60px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.why-hero-content h1 {
    font-size: 2.8em;
    color: #343a40;
    margin-bottom: 20px;
}

.prominent-claim {
    font-size: 1.3em;
    font-style: italic;
    color: #c0392b;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
    border-left: 4px solid #c0392b;
    padding-left: 20px;
    text-align: left;
}

/* Comparison Section */
.comparison-section {
    padding: 60px 20px;
    text-align: center;
}

.comparison-section h2 {
    font-size: 2.5em;
    margin-bottom: 10px;
}

.section-subtitle {
    font-size: 1.2em;
    color: #6c757d;
    max-width: 700px;
    margin: 0 auto 40px auto;
}

.comparison-table-container {
    max-width: 1100px; /* Increased width for new column */
    margin: 0 auto;
    overflow-x: auto;
}

table {
    width: 100%;
    min-width: 900px; /* Ensures table looks good before scrolling */
    border-collapse: collapse;
    font-size: 1.0em; /* Adjusted for more content */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

th, td {
    padding: 15px; /* Consistent padding */
    border: 1px solid #343a40;
    text-align: center;
    vertical-align: middle;
}

thead th {
    background-color: #343a40;
    color: #ffffff;
    font-size: 1.1em;
}

/* NEW RULE: Fixes text color contrast in our column header */
thead th.our-brand {
    color: #343a40;
}

tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

tbody td:first-child {
    text-align: left;
    font-weight: bold;
    color: #495057;
}

.our-brand {
    background-color: #fff8e1;
}

.feature-yes, .feature-partial, .feature-no {
    font-weight: bold;
}

.feature-yes { color: #28a745; }
.feature-no { color: #dc3545; }
.feature-partial { color: #fd7e14; }

/* FAQ Section Styling */
.faq-section-why-us {
    background-color: #f8f9fa;
    padding: 60px 20px;
}
.faq-section-why-us h2 {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 40px;
}
.faq-container { max-width: 800px; margin: 0 auto; }
.faq-item { margin-bottom: 30px; }
.faq-item h3 { margin-bottom: 5px; color: #343a40; }
.faq-item p { color: #6c757d; line-height: 1.7; }

/* Final CTA Section Styling */
.final-cta-section {
    text-align: center;
    padding: 80px 20px;
}

.final-cta-section h2 {
    font-size: 2.5em;
    margin-bottom: 15px;
}

.final-cta-section p {
    font-size: 1.2em;
    max-width: 600px;
    margin: 0 auto 30px auto;
    color: #6c757d;
}

/* --- NEW & IMPROVED CTA BUTTON STYLING --- */
/* This replaces the old .hero-cta-button style and makes the button look much better */
.cta-button, .hero-cta-button { /* Applied to both buttons */
    display: inline-block; /* Makes the entire area clickable */
    font-size: 1.2em;
    font-weight: bold;
    color: #ffffff;
    background-color: #c0392b;
    padding: 15px 35px;
    border-radius: 8px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(192, 57, 43, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cta-button:hover, .hero-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(192, 57, 43, 0.4);
}

.final-cta-section a.cta-button { color: #ffffff; }

.table-summary {
    max-width: 1100px;
    margin: 30px auto 0 auto;
    padding: 20px;
    text-align: center;
    font-size: 1.1em;
    line-height: 1.6;
    color: #495057;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #dee2e6;
}