/* mm-agent 10-15 card grids: consistent gaps, equal-height cards in a row, and a centred last row (no orphan card hugging the left).
   Loaded after site.css on every page (marketing + app). Above 640px the multi-column grids become wrapping flex rows with exact
   column widths, so full rows look identical to before and only a short last row changes (it is centred). At 640px and below the
   existing layouts stay as they are (single column, or the swipe carousels). */
@media (min-width: 641px) {
  .grid.g2, .grid.g3, .grid.g4, .w-swipe.g3c, .w-swipe.g4c {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: var(--grid-gap, 16px);
  }
  .grid.g2 > *, .grid.g3 > *, .grid.g4 > *, .w-swipe.g3c > *, .w-swipe.g4c > * { box-sizing: border-box; min-width: 0; margin-top: 0; margin-bottom: 0; }
  .grid.g2 > * { flex: 0 1 calc((100% - var(--grid-gap, 16px)) / 2); }
  .grid.g3 > *, .w-swipe.g3c > * { flex: 0 1 calc((100% - 2 * var(--grid-gap, 16px)) / 3); }
  .grid.g4 > *, .w-swipe.g4c > * { flex: 0 1 calc((100% - 3 * var(--grid-gap, 16px)) / 4); }
  .grid.g2 > [hidden], .grid.g3 > [hidden], .grid.g4 > [hidden] { display: none; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .grid.g3 > *, .grid.g4 > * { flex-basis: calc((100% - var(--grid-gap, 16px)) / 2); }
}
@media (min-width: 641px) and (max-width: 960px) {
  .w-swipe.g4c > * { flex-basis: calc((100% - var(--grid-gap, 16px)) / 2); }
}