/* #why: the problem and what it costs. */

/* ---------- why (problem + cost, condensed) ---------- */
.sec--tight{padding-block:clamp(58px,7.5vw,96px)}
.why{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(30px,5vw,68px);align-items:start;
}
.why h2{margin-block:0 16px;font-size:clamp(1.85rem,3.6vw,2.7rem)}
.why .lede{font-size:1rem}
.why__label{
  font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px;
}
.why__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;
  background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;
}
.why__list li{padding:22px 24px}
.why__list li:nth-child(odd){border-right:1px solid var(--line)}
.why__list li:nth-child(n+3){border-top:1px solid var(--line)}
.why__list strong{
  display:flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:-.01em;
}
.why__list strong::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--rose);flex:none;
}
.why__list span{display:block;color:var(--muted);font-size:.9rem;margin-top:7px}
@media (max-width:860px){
  .why{grid-template-columns:1fr}
  .why__list{grid-template-columns:1fr}
  .why__list li:nth-child(odd){border-right:none}
  .why__list li+li{border-top:1px solid var(--line)}
}