/* ==========================================================================
   Numera - pages/faq.css
   What the FAQ page alone needs. The question and answer list (.faq, .faq__title, .faq__list, .faq__item, .faq__q,
   .faq__a) is shared with the plans and prices page and lives in css/pages.css. This page stacks one .faq section for
   each topic, so the sections sit closer together than the single block of the plans and prices page (72px above, 48px
   below), and a topic heading is smaller than that block's title: it stands under a 60px h1.
   base.html links this file after css/pages.css, so these rules win over the shared ones.
   ========================================================================== */

.faq--group { padding: 48px 0 8px; }
/* The first topic starts under the page head, which ends with padding of its own */
.page-head + .faq--group { padding-top: 16px; }
.faq--group .faq__title {
  margin-bottom: 20px;
  font-size: clamp(26px, 3.2vw, 36px);
}
/* Room between the last topic and the closing call */
.faq--group + .band { margin-top: 40px; }

/* ---- Phone: the shared .faq rule tightens up at 760px, so the topics do too ---- */
@media (max-width: 760px) {
  .faq--group { padding: 36px 0 4px; }
  .page-head + .faq--group { padding-top: 8px; }
  .faq--group + .band { margin-top: 32px; }
}