#faq { padding-block: clamp(48px, 6vw, 84px); }
#faq .sec-head { margin-bottom: 24px; }

#faq .faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 10px 14px;
  max-width: none;
}

#faq .faq-item { margin: 0; }
#faq .faq-item summary { min-height: 56px; padding: 13px 18px; }
#faq .faq-item .ans { padding: 0 18px 16px; }
#faq .faq-item summary:focus-visible { outline-offset: -4px; }

#faq .faq-more { margin-top: 10px; }
#faq .faq-more > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  min-height: 48px;
  padding-inline: 12px;
  border-radius: 8px;
  cursor: pointer;
  list-style: none;
  font: 500 .95rem/1.3 var(--display-heading);
}

#faq .faq-more > summary::-webkit-details-marker { display: none; }
#faq .faq-more > summary::before {
  content: '';
  width: .45em;
  height: .45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

#faq .faq-more[open] > summary::before { transform: rotate(225deg); }
#faq .faq-more > summary .faq-more__hide,
#faq .faq-more[open] > summary .faq-more__show { display: none; }
#faq .faq-more[open] > summary .faq-more__hide { display: inline; }
#faq .faq-more > .faq { margin-top: 7px; }
#faq .faq-more:not([open]) > .faq { display: none; }

@media (max-width: 680px) {
  #faq .faq { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #faq .faq-item summary { min-height: 52px; padding-inline: 14px; }
  #faq .faq-item .ans { padding-inline: 14px; }
}