@layer components {
  .how__steps { list-style: none; margin: 0; padding: 0; }
  .how__step { display: grid; gap: var(--space-3); align-content: start; }
  .how__num { font: 300 var(--step-3) / 1 var(--font-display); color: var(--color-text-muted); }
  .how__text { color: var(--color-text-muted); }
  .how__keys { margin-block-start: var(--space-8); padding: var(--space-6); border-radius: var(--radius-card); background: var(--color-surface-2); }
  .how__keys-title { margin-block-end: var(--space-5); }
  .how__keylist { display: grid; gap: var(--space-3) var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); margin: 0; }
  .how__key { display: flex; align-items: center; gap: var(--space-3); }
  .how__key dt { display: flex; gap: var(--space-1); }
  .how__key dd { margin: 0; color: var(--color-text-muted); }
  .how__more { margin-block-start: var(--space-6); color: var(--color-text-muted); }
  .how__more a { color: var(--color-text); font-weight: 500; }
}