/* Step list — C17.
 *
 * Three steps opened by a hairline each, like the compact range cards. The
 * numbering is CSS-adjacent decoration; the <ol> is what carries the order.
 */

.pl-steps__title {
  font-size: var(--step-2);
  letter-spacing: var(--track-tight);
  max-width: 20ch;
  margin: 0 0 var(--sp-6);
}

.pl-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 48rem) {
  .pl-steps__list {
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--sp-6);
  }
}

.pl-steps__step {
  border-top: var(--rule) solid var(--c-rule);
  padding-top: var(--sp-3);
}

.pl-steps__n {
  font-size: 0.78125rem;
  margin: 0 0 var(--sp-2);
}

.pl-steps__what {
  font-size: var(--step-1);
  line-height: 1.35;
  font-weight: 600;
  max-width: 24ch;
  margin: 0 0 var(--sp-1);
}

.pl-steps__body {
  font-size: 0.9375rem;
  line-height: 1.5;
  max-width: 32ch;
  text-wrap: pretty;
  margin: 0;
}