/* FAQ page, Figma 341:231. Sand ground, centered Saol title, question rows with hairline dividers. */
.faq-page { background: var(--color-sand); padding-block: 71px var(--space-section); }

.faq-page__title {
  margin: 0 auto var(--space-60);
  max-width: 900px;
  text-align: center;
  font-size: var(--h1-size);
  line-height: var(--h2-line); /* Figma: 60/78.6 */
}
.faq-page__intro { max-width: 807px; margin: 0 auto var(--space-60); text-align: center; }

/* Topic cards (Marco FAQ categories): Figma 349x206 cards, 1px #c7c7c7, 5px corners, 88px under the title */
.faq-topics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-20);
  margin: 28px 0 109px;
}
.faq-topic {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  min-height: 206px;
  padding: var(--space-30) var(--space-20);
  border: 1px solid #c7c7c7;
  border-radius: var(--radius-sm);
  color: var(--color-black);
  text-decoration: none;
}
.faq-topic__icon { display: flex; width: 40px; height: 40px; }
.faq-topic__name { font-weight: 700; font-size: 16px; line-height: 24px; }
.faq-topic__text { font-size: 16px; line-height: 24px; }

/* Topic headings: Saol 40/52.4, not uppercase; 86px between groups */
.faq-group { scroll-margin-top: var(--space-30); }
.faq-group + .faq-group { margin-top: 86px; }
.faq-group__title {
  margin-bottom: 8px;
  font-size: var(--h3-size);
  line-height: var(--h3-line);
  text-transform: none;
  color: var(--color-ink);
}

.faq-item { border-bottom: 1px solid var(--color-line-step); }
.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-20);
  min-height: 86px;
  padding-block: var(--space-20);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-black);
  cursor: pointer;
  list-style: none;
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--color-coral);
}
/* Figma shows the open question with the same plus in grey (#c0c0c0) */
.faq-item[open] .faq-item__icon { color: #c0c0c0; }

.faq-item__answer {
  max-width: 1089px;
  padding-bottom: var(--space-30);
  font-size: 16px;
  line-height: 28px;
  color: var(--color-black);
}
.faq-item__answer > :first-child { margin-top: 0; }
.faq-item__answer > :last-child { margin-bottom: 0; }

@media (max-width: 991.98px) {
  .faq-page { padding-block: var(--space-30) var(--space-60); }
  .faq-topics { grid-template-columns: repeat(2, 1fr); margin-bottom: var(--space-60); }
  .faq-topic { min-height: 0; }
  .faq-group + .faq-group { margin-top: var(--space-60); }
  .faq-page__title { line-height: var(--h1-line); margin-bottom: var(--space-30); }
  .faq-item__question { min-height: 0; padding-block: var(--space-15); }
}

@media (max-width: 575.98px) {
  .faq-topics { grid-template-columns: 1fr; }
}