/* ── CHALLENGES VS GOALS TABLES ────────────────────── */
.compare-head {
    margin-bottom: 1.8rem;
}

.compare-head h2 {
    font-size: clamp(2rem, 3.4vw, 2.9rem);
    margin-top: .4rem;
}

.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.compare-card {
    background: #fff;
    border: 1px solid #e8e5df;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(13, 18, 39, .06);
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.compare-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 44px rgba(13, 18, 39, .1);
}

.compare-card-bad:hover {
    border-color: rgba(242, 122, 26, .28);
}

.compare-card-good:hover {
    border-color: rgba(42, 181, 196, .3);
}

.compare-card h3 {
    margin: 0;
    padding: 1rem 1.15rem;
    font-size: 1rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.compare-card-bad h3 {
    background: linear-gradient(90deg, rgba(242, 122, 26, .12), rgba(242, 122, 26, .03));
    color: #9d4300;
}

.compare-card-good h3 {
    background: linear-gradient(90deg, rgba(42, 181, 196, .14), rgba(42, 181, 196, .03));
    color: #0f6e78;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
}

.compare-table th,
.compare-table td {
    text-align: left;
    border: none;
    padding: .9rem 1.15rem;
    border-top: 1px solid #e8e5df;
    font-size: .92rem;
    vertical-align: top;
}

.compare-table th {
    font-size: .72rem;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: #857f6b;
    background: rgba(250, 248, 245, .7);
}

.compare-table td:first-child {
    width: 42%;
    font-weight: 600;
    color: #2d2d2d;
}

.compare-table td:last-child {
    /* color: #4e536f; */
}

.compare-table tbody tr {
    transition: background-color .18s ease;
}

.compare-card-bad .compare-table tbody tr:hover {
    background-color: rgba(242, 122, 26, .05);
}

.compare-card-good .compare-table tbody tr:hover {
    background-color: rgba(42, 181, 196, .06);
}