.benefit-back { display: inline-block; margin-top: 16px; }
.benefit-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 15px;
  align-items: start;
}
.benefit-form { margin-top: 20px; }
.benefit-form .actions { margin-top: 17px; }
.benefit-form select { font-size: .9rem; }
.benefit-loans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
  margin-block: 17px;
}
.benefit-loans fieldset {
  min-width: 0;
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
}
.benefit-loans legend { padding-inline: 5px; font-size: .88rem; font-weight: 700; }
.benefit-verdict {
  display: grid;
  gap: 4px;
  margin-block: 16px 13px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: 8px;
  background: #0e1928;
}
.benefit-verdict[data-state="met"] { border-left-color: var(--mint); }
.benefit-verdict[data-state="review"] { border-left-color: var(--gold); }
.benefit-verdict p { margin: 0; font-size: .84rem; }
.benefit-checks { display: grid; gap: 5px; margin: 0 0 21px; padding: 0; list-style: none; }
.benefit-checks li { display: grid; grid-template-columns: 4.4em 1fr; gap: 8px; color: var(--muted); font-size: .83rem; }
.benefit-checks strong { color: var(--ink); }
.benefit-result h3 { margin-top: 18px; font-size: 1.12rem; }
.benefit-result h3 + .fine-print { margin-top: 5px; }
.benefit-chart { display: grid; gap: 4px; margin-block: 13px; }
.benefit-chart > div { display: grid; grid-template-columns: 5.1em 1fr; gap: 8px; align-items: center; font-size: .78rem; color: var(--muted); }
.benefit-chart meter { display: block; width: 100%; height: 16px; }
.benefit-chart meter::-webkit-meter-bar { background: #0b1725; border: 1px solid var(--line); border-radius: 4px; }
.benefit-chart meter::-webkit-meter-optimum-value { background: var(--blue); }
.benefit-chart > div + div meter::-webkit-meter-optimum-value { background: var(--mint); }
.benefit-chart meter::-moz-meter-bar { background: var(--blue); }
.benefit-chart > div + div meter::-moz-meter-bar { background: var(--mint); }
.benefit-payment-table { margin-top: 5px; font-variant-numeric: tabular-nums; }
.benefit-payment-table caption { text-align: left; font-size: .75rem; color: var(--muted); }
.benefit-payment-table td, .benefit-payment-table thead th:not(:first-child) { text-align: right; white-space: nowrap; }
.benefit-payment-table tbody tr:last-child { font-weight: 700; }
.benefit-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-block: 16px 0; }
.benefit-metrics div { background: #0e1928; border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; }
.benefit-metrics dt { color: var(--muted); font-size: .74rem; }
.benefit-metrics dd { margin: 3px 0 0; font-size: .93rem; font-weight: 650; overflow-wrap: anywhere; }
.benefit-source { padding-top: 12px; border-top: 1px solid var(--line); }
.benefit-sources .resource-card a + a { margin-top: 0; }

@media (max-width: 850px) {
  .benefit-workbench { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .benefit-loans, .benefit-sources .resource-grid { grid-template-columns: 1fr; }
  .benefit-payment-table th, .benefit-payment-table td { padding-inline: 4px; font-size: .75rem; }
}
.benefit-form { container-type:inline-size; }
@container (max-width:340px) { .benefit-loans { grid-template-columns:minmax(0,1fr); } }
