:root { --space-5: 14px; --space-7: 19.6px; --space-9: 33.6px; --space-10: 44.8px; }
body { margin: 0; }
a { color: var(--color-accent-300); }
a:hover { color: var(--color-accent-200); }
img { max-width: 100%; height: auto; }
.th-hidden { display: none !important; }
.th-card-hover:hover { border-color: var(--color-accent-600); }

/* ---- mobile ---- */
@media (max-width: 640px) {
  /* two-column grids whose first track has a fixed minimum cannot shrink far
     enough on a phone, so their second column overflowed and was clipped */
  .stack-sm { grid-template-columns: 1fr !important; }
  /* thumb-sized tap targets */
  .btn { min-height: 44px; padding-top: var(--space-3); padding-bottom: var(--space-3); }
  /* comfortable typing targets on the enquiry form */
  .input { min-height: 44px; }
  textarea.input { min-height: 120px; }
  /* legibility: uppercase kickers and metadata were 10-11px */
  .card-kicker, .card-meta, .tag { font-size: 12px !important; }
  [style*="font-size: 10px"], [style*="font-size: 11px"] { font-size: 12px !important; }

  /* the spec-sheet library is four columns of links — too narrow to read on a
     phone, so each row becomes its own card with the column name as a label */
  .table-cards { font-size: 14px; }
  .table-cards thead { display: none; }
  .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: auto; }
  .table-cards tr {
    border: 1px solid var(--color-divider); border-radius: var(--radius-md);
    padding: var(--space-4); margin-bottom: var(--space-4);
  }
  .table-cards td {
    border: 0 !important; padding: var(--space-2) 0 !important;
    text-align: left !important; white-space: normal !important;
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
  }
  .table-cards td::before {
    content: attr(data-label); flex: none;
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--color-neutral-500);
  }
  .table-cards td:first-child { padding-top: 0 !important; }
  .table-cards td:first-child::before { display: none; }
  .table-cards td:first-child {
    font-size: 17px; display: block;
    padding-bottom: var(--space-3) !important;
    border-bottom: 1px solid var(--color-divider) !important;
    margin-bottom: var(--space-2);
  }
  /* the efficiency table stays a table and keeps scrolling sideways */
  .table:not(.table-cards) { font-size: 13px; }
}