/* ── Small breakpoint: 640px and below (primary target: 390px) ───────────
   Explicit rules for narrow screens. The existing style.css already
   collapses most grids at 820px; these rules reinforce behaviour at 640px
   and tighten gaps for very small viewports.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Two-column grids → single column */
  .kh-2col {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .kh-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  /* Three-column grids → single column */
  .kh-3col {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  /* Four-column grids → single column */
  .kh-grid-4 {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Contact page main grid and form fields */
  .kh-ct-main-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .kh-ct-field-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Comparison table: label column + single content column */
  .kh-cmp-row {
    grid-template-columns: 120px 1fr !important;
  }
  .kh-cmp-wrap {
    overflow-x: auto !important;
  }
}