/* why page styles (Binder). Theme variables only, see inject/theme.css. */
[data-sw-page="why"] .text-ink-mute { color: var(--ink-mute); }

/* ── jump links under the hero ──────────────────────── */
.why-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.why-jump a {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background: var(--cream-2);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  font: 700 10.5px/1 var(--sw-mono);
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.12s, color 0.12s, transform 0.1s;
}
.why-jump a:hover { background: var(--red); color: var(--cream); text-decoration: none; }
.why-jump a:active { transform: translate(1px, 1px); box-shadow: none; }
.why-jump a:last-child { background: var(--ink); color: var(--red-hot); }
.why-jump a:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ── before / after cards ───────────────────────────── */
.why-fixes { display: grid; gap: 14px; list-style: none; }
@media (min-width: 720px) { .why-fixes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
.why-fix {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  /* dark base so the rounded bottom corners don't bleed a light sliver under the dark "after" block */
  background: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}
.why-fix__head,
.why-fix__before { background: var(--cream-2); }
.why-fix__head { display: flex; align-items: baseline; gap: 10px; padding: 16px 18px 6px; }
.why-fix__n { color: var(--red); font: 400 22px/1 var(--sw-display); letter-spacing: -0.02em; }
.why-fix__head h3 { margin: 0; color: var(--ink); font: 400 clamp(18px, 2.4vw, 22px)/1.1 var(--sw-display); letter-spacing: -0.01em; }
.why-fix__before,
.why-fix__after { padding: 10px 18px 16px; font: 400 14px/1.55 var(--sw-body); }
.why-fix__before { flex: 1; color: var(--ink-mute); }
.why-fix__after { border-top: 1.5px solid var(--ink); background: var(--ink); color: rgba(251,238,243, 0.86); }
.why-fix__before > span,
.why-fix__after > span {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  font: 700 9.5px/1 var(--sw-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.why-fix__before > span { color: var(--ink-mute); }
.why-fix__before > span::before { content: ""; width: 10px; height: 1.5px; background: currentColor; }
.why-fix__after > span { color: var(--red-hot); }
.why-fix__after > span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--red-hot);
  transform: rotate(45deg);
}

/* ── scroll reveal (core.js adds .in) ───────────────── */
[data-sw-page="why"] .rv { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
[data-sw-page="why"] .rv.in { opacity: 1; transform: none; }
@media (min-width: 720px) { .why-fix.rv:nth-child(2n) { transition-delay: 0.08s; } }
@media (prefers-reduced-motion: reduce) {
  [data-sw-page="why"] .rv { opacity: 1; transform: none; transition: none; }
}