/* Questions: native disclosure widgets, so they work with keyboard and screen readers without script. */
.faq__list {
  max-width: 880px;
  margin-top: 24px;
  border-top: 1px solid var(--line);
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 14px 4px;
  color: var(--ink);
  font-size: 17px;
  font-weight: 500;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

/* a plus that turns into a minus while open */
.faq summary::after {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 14px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 2px 14px no-repeat;
}

.faq details[open] summary::after {
  background: linear-gradient(var(--accent), var(--accent)) center / 14px 2px no-repeat;
}

.faq details p {
  max-width: 760px;
  margin: 0 0 20px;
  padding: 0 4px;
  font-size: 16px;
  line-height: 1.6;
}

@media (prefers-reduced-motion: no-preference) {
  .faq details[open] p {
    animation: faqIn 220ms var(--ease-out) both;
  }

  /* where supported (Chrome 131+), the answer's height eases open instead of snapping */
  .faq {
    interpolate-size: allow-keywords;
  }

  .faq details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 240ms var(--ease-out), content-visibility 240ms allow-discrete;
  }

  .faq details[open]::details-content {
    block-size: auto;
  }
}

@keyframes faqIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}