/* Keep long evidence filenames inside the table on desktop. */
.matrix { table-layout: fixed; }
.matrix th, .matrix td { overflow-wrap: anywhere; }
.matrix th:nth-child(2) { width: 12%; }
.matrix th:nth-child(3) { width: 27%; }

@media (max-width: 700px) {
  .container { padding: 16px; }
  .card { padding: 18px; }
  .hero { padding: 30px 0 24px; }
  h1 { overflow-wrap: anywhere; }
  .btn { max-width: 100%; text-align: center; }
  .matrix { display: block; }
  /* Keep column headers available to assistive technology. */
  .matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .matrix tbody { display: grid; gap: 16px; }
  .matrix tbody tr { display: block; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  .matrix tbody td { display: block; padding: 10px 12px; }
  .matrix tbody td:first-child { background: #f4faf7; font-weight: 750; }
  .matrix tbody td:last-child { border-bottom: 0; }
  .matrix tbody td::before { content: attr(data-label); display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; font-weight: 650; }
}