/* Home page: contract and payment stages, in order. */

@layer components {
  .deal-steps {
    display: grid;
    gap: var(--space-5) var(--space-4);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    padding: 0;
    list-style: none;
    counter-reset: deal-step;
  }

  .deal-steps li {
    display: grid;
    gap: var(--space-2);
    align-content: start;
    padding-top: var(--space-4);
    border-top: 2px solid var(--line-strong);
    counter-increment: deal-step;
  }

  .deal-steps li::before {
    content: counter(deal-step);
    color: var(--accent);
    font: 500 var(--step--1) var(--font-mono);
  }

  .deal-steps h3 { font-size: var(--step-0); }
  .deal-steps p {
    color: var(--ink-muted);
    font-size: var(--step--1);
  }
}