/* ===== Use cases: before / after "Aha" block ===== */
.ba-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 6px 0 36px;
}

.ba-card {
    flex: 1 1 240px;
    border-radius: 14px;
    padding: 20px 22px;
    font-family: "Inter", sans-serif;
}

.ba-card .ba-label {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.ba-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
}

.ba-before {
    background: var(--color-bg-light);
    border: 1px solid var(--color-border-dark-subtle);
}

.ba-before .ba-label {
    color: var(--color-text-dark-secondary);
}

.ba-before p {
    color: var(--color-text-dark-secondary);
}

.ba-after {
    background: var(--color-bg-dark-alt);
    border: 1px solid var(--color-border-light-light);
}

.ba-after .ba-label {
    color: var(--color-accent-green);
}

.ba-after p {
    color: var(--color-text-light-lighter);
}

.ba-after p strong {
    color: var(--color-text-white-strong);
}