/* ==========================================================================
   FAQ page. The only styles the standalone /faq page needs on top of the
   shared design system in styles.css: an H1 sized like a section heading
   (styles.css only sizes section-head h2), and extra top room so the page
   header clears the fixed nav without a hero above it.
   ========================================================================== */

.faq-page { padding-top: 9rem; }

/* Visually hidden but still in the accessibility tree: labels the FAQ list so
   the page has a proper h1 -> h2 -> h3 (footer) hierarchy without adding a
   second visible heading. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section-head h1 {
  font-size: clamp(1.9rem, 4vw, 2.85rem);
  color: var(--espresso);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
}

@media (max-width: 860px) {
  .faq-page { padding-top: 7.5rem; }
}