/* ═══════════════════════════════════════════════════════════════════════════
   components/flow.responsive.css — r89. ADDITIVE adaptive layer for the FLOW
   pages (Registration 3 today). Every rule sits inside a max-width query, so
   the desktop render is untouched — the same contract as
   components/home.responsive.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* The reviews wall is generated as
   `grid-template-columns: repeat(auto-fit, minmax(min(100%,220px), 1fr))`.
   That is genuinely responsive at the extremes — 3 across on a wide screen,
   1 across on a phone — but three cards in a two-column band leave the third
   alone on its own row, which is what the owner circled at ~630 px. auto-fit
   cannot know the item COUNT, so the fix is to end the two-column band: below
   760 px the wall stacks, and three equal full-width cards read as a
   deliberate list instead of a 2+1 orphan.
   Selector: the inline style substring, the same hook pattern the Home layer
   uses for generated markup (no class exists on this node). It is scoped to the
   220 px minimum, which is the reviews wall's own value — reg3 carries a SECOND
   auto-fit grid (the four billing-fact tiles, minimum 150 px) that must keep
   pairing up on a narrow screen, so a bare `repeat(auto-fit` selector would
   have stacked that one too. */
@media (max-width:759.98px){
  #root div[style*="min(100%, 220px)"],
  #root div[style*="min(100%,220px)"]{grid-template-columns:1fr!important}
}