/* How it works (2026-10-09): one clear order and one alignment.
   Steps, then the tracker, then three short cards in one row, then what the report holds.
   Same left edge for every block. */
.how-layout { grid-auto-flow: row; align-items: stretch; }
.how-layout > .steps { margin-bottom: 0; }
.how-layout > .card:not(#tracker) { text-align: left; }
.how-layout > .card:not(#tracker) > .btn { margin-top: 0.25rem; }
.how-layout .price-list { width: auto; margin-inline: 0; text-align: left; }
@media (min-width: 820px) {
  .how-layout { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; }
  .how-layout > .steps,
  .how-layout > #tracker,
  .how-layout > .card:last-child { grid-column: 1 / -1; grid-row: auto; width: 100%; max-width: none; margin-inline: 0; }
  .how-layout > .card:not(#tracker) { text-align: left; }
  .how-layout .price-list { width: auto; margin-inline: 0; columns: 2; column-gap: 2rem; }
  .how-layout .price-list li { break-inside: avoid; }
}