/* =============================================
   weekly-business-review.html — page-specific styles
   ============================================= */

/* --- Hero overrides --- */
h1 {
    margin: 3.2rem 0 1.6rem;
}

/* --- Capability Grid --- */
.capability-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4rem;
    max-width: 110rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .capability-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.capability-card {
    background: white;
    padding: 2.4rem;
    border-radius: 0.8rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-top: 4px solid #ea580c;
}

.capability-card h3 {
    font-size: 2rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 1.2rem;
}

.capability-card p {
    font-size: 1.4rem;
    color: #333333;
    line-height: 1.7;
}

/* --- Mechanism Flow --- */
.mechanism-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4rem;
    max-width: 110rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .mechanism-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.mechanism-card {
    background: white;
    padding: 2.4rem;
    border-radius: 0.8rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-left: 4px solid #ea580c;
}

.mechanism-card h3 {
    font-size: 1.8rem;
    font-weight: 600;
    color: #9a3412;
    margin-bottom: 1.2rem;
}

.mechanism-card p {
    font-size: 1.4rem;
    color: #333333;
    line-height: 1.7;
}

/* --- Outcomes Grid --- */
.outcomes-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4rem;
    max-width: 110rem;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .outcomes-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.outcome-card {
    background: white;
    padding: 2.4rem;
    border-radius: 0.8rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    text-align: center;
    border-top: 4px solid #ea580c;
}

.outcome-value {
    font-size: 4.8rem;
    font-weight: bold;
    color: #ea580c;
    margin-bottom: 0.8rem;
}

.outcome-label {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.outcome-detail {
    font-size: 1.2rem;
    color: #666666;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .outcome-value {
        font-size: 3.6rem;
    }
}