/* Salary sacrifice: styles only this tool uses. The layout, option cards,
   verdict, notices, tables and tooltips are shared in ../assets/toolkit.css. */

/* ── Option cards: three across, salary sacrifice first ──── */
.option-grid--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1100px) { .option-grid--three { grid-template-columns: 1fr; } }
@media (max-width: 1100px) and (min-width: 521px) {
  .option-grid--three .option-card { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-items: baseline; }
  .option-grid--three .option-facts { grid-column: 1 / -1; }
}
.option-card[data-scenario="sacrifice"] { border-color: var(--primary); }
.option-card.is-best { border-color: var(--success); }

/* ── Where the difference comes from ─────────────────────── */
.sources th, .sources td:first-child { white-space: normal; vertical-align: bottom; }
.sources td:first-child { vertical-align: middle; }
.sources th:not(:first-child) { width: 30%; }
@media (max-width: 520px) { .sources { font-size: 0.8125rem; } .sources th { font-size: 0.6875rem; } }
.sources tr.total td { border-top: 1.5px solid var(--border); }

/* ── Worth sacrificing a bit more? ───────────────────────── */
.next-card { padding: 24px; }
.next-list {
  list-style: none; margin-top: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.next-list li {
  padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: 0.9375rem; line-height: 1.6; color: var(--muted);
}
.next-list strong { color: var(--text); font-weight: 700; }