/* The help page: a short title, then sections that open under a structural
   rule, as the home page's do. Text keeps a readable measure. */
@layer components {
  .help__intro {
    display: grid;
    gap: calc(var(--block-space) * 0.5);
    padding: calc(var(--block-space) * 2) calc(var(--inline-space) * 2.5) calc(var(--block-space) * 1.5);
  }

  .help__title {
    font-size: var(--text-2xl);
  }

  .help__heading {
    padding: calc(var(--block-space) * 0.75) calc(var(--inline-space) * 2.5);
    border-block: var(--rule-width) solid var(--color-rule);
    font-size: var(--label-size);
    font-stretch: var(--stretch-normal);
    line-height: var(--leading);
  }

  .help__body {
    display: grid;
    gap: calc(var(--block-space) * 0.75);
    max-inline-size: 72ch;
    padding: calc(var(--block-space) * 1.25) calc(var(--inline-space) * 2.5) calc(var(--block-space) * 1.5);
    color: var(--color-ink-dim);
  }

  /* Straight on from the guide's steps, which end in their own space. */
  .guide + .help__body {
    padding-block-start: 0;
  }
}