/* One button row for every multi-step flow in the app and the site.
   Desktop: right-aligned, primary (Next/Continue) rightmost, Back directly to its left; data-align="start"
   puts the row at the left edge of a left-aligned block.
   Mobile (< 640px): stacked full width, primary last. button-row.js keeps the DOM order right. */
rr-button-row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}
rr-button-row > * { flex: 0 0 auto; }
/* In a left-aligned block (a heading and its text, as on the app pages), the row starts at the text's left edge,
   like the site's left-aligned calls to action. Order is unchanged: Back, then the primary. */
rr-button-row[data-align="start"] { justify-content: flex-start; }

@media (max-width: 639.98px) {
  rr-button-row {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
  }
  rr-button-row > * { width: 100%; }
}