.faq-intro {
  background:var(--c-cobalt);
  color:var(--c-on-dark);
}
.faq-intro__lead {
  max-width:34em;
  font-size:var(--text-lead);
  color:var(--c-on-dark-muted);
}
.faq-intro__hint {
  max-width:36em;
  font-size:var(--text-sm);
  color:var(--c-on-dark-muted);
}
.faq-intro a:focus-visible {
  outline-color:var(--c-on-dark);
}
.faq-map {
  min-width:0;
  padding:24px;
  border:var(--line) solid var(--c-border);
  border-bottom:8px solid var(--c-edge);
  border-radius:var(--r-card);
  background:var(--c-bg);
  color:var(--c-text);
}
.faq-map__caption {
  display:inline-block;
  max-width:100%;
  padding:6px 16px;
  border-radius:var(--r-pill);
  background:var(--c-note);
  color:var(--c-cobalt);
  font-size:var(--text-sm);
  font-weight:var(--weight-bold);
}
.faq-map svg {
  display:block;
  width:100%;
  height:auto;
  margin-top:20px;
}
.faq-map__device {
  fill:var(--c-clear);
  stroke:var(--c-cobalt);
  stroke-width:2;
}
.faq-map__note {
  margin-top:12px;
  color:var(--c-muted);
  font-size:var(--text-sm);
}
.faq-directory {
  max-width:calc(var(--reading) + var(--gutter) * 2);
}
.faq-category {
  margin-top:56px;
  scroll-margin-top:112px;
}
.faq-category__head {
  margin-bottom:24px;
}
.faq-category__head h2 {
  margin-top:14px;
}
.faq-category__head p {
  margin-top:12px;
  color:var(--c-muted);
}
.faq-category__related {
  margin-top:20px;
  color:var(--c-muted);
  font-size:var(--text-sm);
  line-height:1.9;
}
@media (max-width:640px) {
  .faq-map {
    padding:16px;
  }
  .faq-category {
    margin-top:40px;
  }
}