/* Act 1 ends at the authorisation result (three steps); the Merchant Portal is shown in its own section. */
.flow__steps { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 899.98px) { .flow__steps { grid-template-columns: 1fr; } }

/* Phones: the map reads sideways in two rows, like a snake —
   Customer → Your checkout → processing, down to the card scheme, back left to the issuer; the answer climbs
   from the issuer to the checkout. The empty first cell of the second row holds the authorisation result. */
@media (max-width: 899.98px) {
  .flow__map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; align-items: start;
    row-gap: 40px; column-gap: 6px; height: auto; padding: 28px 0 8px; }
  .flow__map > .node { width: auto; min-width: 0; display: grid; grid-template-columns: none; justify-items: center; text-align: center;
    row-gap: 4px; column-gap: 0; }
  .flow__map > .node:nth-child(2) { grid-area: 1 / 1; }
  .flow__map > .node:nth-child(3) { grid-area: 1 / 2; }
  .flow__map > .node:nth-child(4) { grid-area: 1 / 3; }
  .flow__map > .node:nth-child(5) { grid-area: 2 / 3; }
  .flow__map > .node:nth-child(6) { grid-area: 2 / 2; }
  .flow__map .node__icon, .flow__map .node__icon--core { grid-row: auto; width: 58px; height: 58px; margin: 0 0 6px; border-radius: 16px; }
  .flow__map .node__icon svg { width: 24px; height: 24px; }
  .flow__map .node__icon--core svg.core-mark { width: 40px; height: 40px; }
  .flow__map .node__icon--schemes .scheme--visa { width: 32px; }
  .flow__map .node__icon--schemes .scheme--mc { width: 26px; }
  .flow__map .node__label { align-self: auto; font-size: var(--t-medium); }
  .flow__map .node__sub { align-self: auto; font-size: 12px; }
  /* The authorisation result: a small card in the free cell of the second row, beside the issuer, where the
     green answer turns back up to the checkout. */
  .flow__map .node__status { position: absolute; grid-column: auto; grid-row: auto; justify-self: auto; top: calc(100% + 40px); bottom: auto; right: auto; left: calc(-100% - 6px); width: 100%;
    margin: 0; display: grid; justify-items: center; gap: 3px; padding: 10px 6px; border-radius: 14px;
    white-space: normal; text-align: center; font: 600 12px/1.2 var(--font); }
  .flow__map .node__status::before { content: "Result"; font: 500 10px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
  .flow__map .node__check { top: -8px; right: calc(50% - 38px); left: auto; }
}
@media (max-width: 380px) { .flow__map .node__label { font-size: 14px; } .flow__map .node__sub { font-size: 11px; } }
/* The chip's two parts: one line on wide screens, stacked in the phone card. */
.node__status b { font-weight: 600; }
.node__status b::after { content: " ·"; }
@media (max-width: 899.98px) { .flow__map .node__status b::after { content: none; } .flow__map .node__status span { font: 500 12px/1 var(--font); } }