/* FAQ page
   ---------------------------------------------------------------------------
   /faq reuses the .plan_faq grid from /pricing, which is tuned for 7 short
   Q&As. With 18 longer ones the 28px gap and bare text read as a wall, so this
   page gets its own spacing and a card treatment. Card values match .plan_card
   on the pricing page so the two look like the same system.
   Scoped to .faq_* classes: /pricing is deliberately untouched. */

/* Section headings sit left, matching the blog page, rather than centred. */
.faq_intro {
  max-width: none;
  margin: 0 0 1.75em;
  text-align: left;
}

.faq_list {
  gap: 24px;
}

.faq_list .plan_faq-item {
  padding: 28px 28px 30px;
  border: 1px solid var(--gray-200, #ebebeb);
  border-radius: 16px;
  background-color: var(--white, #fff);
}

.faq_list .plan_faq-item h3 {
  margin-top: 0;
  margin-bottom: 0.7em;
}

/* Answers are the reading surface: looser leading, slightly softened colour. */
.faq_list .plan_faq-item p {
  margin: 0;
  line-height: 1.7;
  color: var(--gray-700, #545454);
}

.faq_list .plan_faq-item a {
  color: var(--primary--500, #006adc);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Breathing room between the question groups. */
.faq_group + .faq_group {
  padding-top: 3.5em;
}

@media screen and (max-width: 991px) {
  .faq_list .plan_faq-item {
    padding: 22px 20px 24px;
  }
  .faq_group + .faq_group {
    padding-top: 2.5em;
  }
}