.faq-page-intro {
  padding-bottom: var(--s10);
}

.faq-lead {
  max-width: var(--reading-width);
  margin-bottom: var(--s7);
  color: var(--muted);
  font-size: var(--text-body);
  line-height: var(--body-leading);
}

.faq-directory {
  gap: var(--s2);
  padding: var(--s3);
  background: var(--panel);
}

.faq-directory a {
  padding-inline: var(--s5);
  border-left: var(--rule) solid var(--border);
}

.faq-directory a:first-child {
  border-left-color: var(--accent);
}

.faq-category {
  scroll-margin-top: var(--s7);
}

.faq-category-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--s8);
  align-items: end;
  margin-bottom: var(--s7);
}

.faq-category-heading h2 {
  margin: 0;
}

.faq-category-heading > p {
  max-width: var(--description-width);
  margin: 0;
  color: var(--muted);
  font-size: var(--text-base);
}

.faq-category-code {
  margin: 0 0 var(--s2);
  color: var(--accent);
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: var(--letter-label);
}

.faq-list {
  max-width: var(--reading-width);
  margin-left: auto;
}

.faq-list .faq-answer {
  padding-right: var(--s8);
}

.faq-followup {
  display: grid;
  grid-template-columns: minmax(0, 2fr) auto;
  gap: var(--s8);
  align-items: center;
}

.faq-followup h2 {
  margin-bottom: var(--s3);
}

.faq-followup p {
  max-width: var(--reading-width);
  margin: 0;
  color: var(--muted);
  font-size: var(--text-body);
}

@media (max-width: 800px) {
  .faq-category-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
  }

  .faq-list {
    max-width: none;
    margin-left: 0;
  }

  .faq-followup {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .faq-directory {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s1);
  }

  .faq-directory a {
    justify-content: center;
    padding-inline: var(--s2);
    border-left: 0;
    border-bottom: var(--rule) solid var(--border);
  }

  .faq-directory a:first-child {
    border-bottom-color: var(--accent);
  }

  .faq-list .faq-answer {
    padding-right: var(--s4);
  }
}