/* styles/sections/step-cards.css
 * /return-on-tokens/ "How Brief works": three numbered steps as bordered white cards, one
 * column below 900px and three from 900px. 24px card padding under 620px (the page's own
 * pre-swap query). */
@layer sections {
  .rot-steps {
    display: grid;
    gap: var(--space-24);
    margin: var(--space-32) 0 0;
    padding: 0;
    list-style: none;
  }

  .rot-step {
    padding: var(--space-32);
    border: 1px solid var(--rule-edge);
    border-radius: var(--radius-lg);
    background: var(--white);
  }

  .rot-step-num {
    display: block;
    margin-bottom: var(--space-16);
    color: var(--success);
    font-weight: 600;
  }

  .rot-step h3 {
    margin-bottom: var(--space-8);
  }

  .rot-step p {
    margin: 0;
  }

  @media (width >= 900px) {
    .rot-steps {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @media (width <= 620px) {
    .rot-step {
      padding: var(--space-24);
    }
  }
}