.training-matrix { margin: 32px 0; }
.training-matrix table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.training-matrix caption { text-align: left; color: var(--muted); font-size: 15px; margin-bottom: 16px; }
.training-matrix th, .training-matrix td { border: 1px solid var(--line); padding: 18px; text-align: left; vertical-align: top; }
.training-matrix th { font-size: 15px; font-weight: 400; line-height: 1.6; color: var(--muted); }
.training-matrix tr > :first-child { width: 25%; }
.training-matrix thead td { border-top: 0; border-left: 0; }
.training-matrix .payoff { display: block; font-size: 26px; font-weight: 450; color: var(--foreground); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.training-matrix .outcome { display: block; font-size: 15px; line-height: 1.65; color: var(--body); }
.training-matrix figcaption { margin-top: 14px; font-size: 14px; line-height: 1.7; color: var(--muted); }
.matrix-mobile-label { display: none; }
@media (max-width: 520px) {
  .training-matrix table, .training-matrix tbody, .training-matrix tr, .training-matrix caption { display: block; }
  .training-matrix thead, .training-matrix th { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .training-matrix td { display: block; width: auto; padding: 18px; border-bottom: 0; }
  .training-matrix tbody tr:last-child td:last-child { border-bottom: 1px solid var(--line); }
  .matrix-mobile-label { display: block; font-size: 15px; line-height: 1.6; color: var(--muted); margin-bottom: 14px; }
  .training-matrix .outcome { font-size: 16px; }
}
