/* The flow is drawn on a glass panel here, so it needs its own ink and list reset;
   six components and six controls read as two full rows of three. */

.sa-contract .mk-flow { margin: 8px 0 0; padding: 0; list-style: none; }
.sa-contract .mk-flow-step { display: grid; justify-items: center; width: 100%; }
.sa-contract .mk-node { color: var(--mk-ink); }
.sa-contract .mk-node.is-solid { color: #FFFFFF; }
.sa-contract .mk-flow-note { color: var(--mk-on-dark-muted); }
.sa-contract .mk-flow-arrow { background: var(--mk-on-dark-muted); }
.sa-contract .mk-flow-arrow::after { border-top-color: var(--mk-on-dark-muted); }

.sa-grid .mk-cards, .sa-grid .mk-lanes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sa-grid .mk-fineprint { margin-top: 14px; }
.sa-next { justify-content: center; margin: 0 0 32px; }

@media (max-width: 900px) {
  .sa-grid .mk-cards, .sa-grid .mk-lanes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sa-grid .mk-cards, .sa-grid .mk-lanes { grid-template-columns: minmax(0, 1fr); }
}