/* Support and FAQ. */

.support-hero h1 {
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  margin-bottom: var(--s5);
}

.support-hero .lede {
}

.faq {
  display: grid;
  gap: var(--s4);
  max-width: 860px;
}

.faq .card {
  padding: 0;
}

.faq summary {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 60px;
  padding: var(--s4) var(--s5);
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-card);
}

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

/* The chevron is drawn here rather than by the marker so it can rotate. */
.faq summary::after {
  content: '';
  flex: none;
  margin-left: auto;
  width: 22px;
  height: 22px;
  background: var(--card-sunken)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2331567A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
    center / 15px no-repeat;
  border-radius: 50%;
  transition: transform var(--react-up) var(--ease-out);
}

.faq details[open] summary::after {
  transform: rotate(180deg);
}

.faq summary h2 {
  font-size: 1.12rem;
  margin: 0;
}

.faq details > p {
  margin: 0 var(--s5) var(--s4);
  color: var(--ink-card-body);
  max-width: none;
}

.faq details[open] > p {
  animation: settle var(--settle-duration) var(--ease-out) both;
}

.faq details > p:first-of-type {
  margin-top: calc(var(--s2) * -1);
}