/* Component: FAQ (Figma node 47:588 "FAQ") */
.faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  width: 100%;
  padding: 80px 0;
  overflow: hidden;
  position: relative;
}

.faq__title {
  max-width: 766px;
  text-align: center;
}

.faq__decor {
  position: absolute;
  left: -344px;
  top: -100px;
  width: 702px;
  height: 726px;
  transform: rotate(158.38deg);
  pointer-events: none;
  z-index: 0;
  opacity: 0.9;
}

@media (max-width: 1100px) {
  .faq__decor {
    display: none;
  }
}

.faq__list {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 896px;
  padding: 0 var(--page-gutter);
}

.faq__item {
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.32);
  padding: 20px 0;
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 20px;
  text-align: left;
  transition: opacity 0.25s ease-out;
}

.faq__question:hover {
  opacity: 0.7;
}

.faq__question-text {
  font-family: var(--font-didot);
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: var(--white);
}

.faq__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

/* Animated with the grid-rows trick instead of display:none/flex, so the
   answer eases open/closed instead of snapping. Padding-top is gated on
   .is-open (not a constant) — padding never shrinks on its own just because
   the row's track collapses to 0fr, so a fixed padding-top here would leave
   a permanent gap even fully closed. Animating it alongside the row keeps
   the gap and the content growing together. */
.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  /* visibility, not clipping alone: grid-template-rows: 0fr hides a closed
     answer visually but leaves its text in the accessibility tree, so a screen
     reader reads all five answers as though every one were open, flatly
     contradicting the aria-expanded="false" on the question button.
     visibility: hidden takes it out of the tree as well. The 0.5s delay holds
     it visible for the whole collapse, so the animation is unchanged and no
     pixel differs in either resting state. Same technique, and the same
     reason, as the sticky bar in page-level.css. */
  visibility: hidden;
  transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 0.5s;
}

.faq__answer > * {
  min-height: 0;
  overflow: hidden;
  padding-top: 0;
  transition: padding-top 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq__item.is-open .faq__answer {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s;
}

.faq__item.is-open .faq__answer > * {
  padding-top: 20px;
}

.faq__answer-text {
  font-family: var(--font-gotham);
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--white);
}

.faq__answer-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faq__answer-list li {
  position: relative;
  padding-left: 20px;
  font-family: var(--font-gotham);
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  color: var(--white);
}

.faq__answer-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--gold);
}