.faq {
  padding-bottom: clamp(48px, 7vw, 84px);
}

.faq .eyebrow {
  color: var(--coral);
}

.faq-grid {
  display: grid;
  width: min(900px, 100%);
  margin: 0 auto;
  border-top: 2px solid var(--ink);
}

.faq-grid details {
  border-bottom: 2px solid var(--ink);
}

.faq-grid summary {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 8px;
  cursor: pointer;
  font-weight: 850;
  list-style: none;
}

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

.faq-grid summary::after {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: var(--lemon);
  content: "+";
  font-size: 1.35rem;
  line-height: 1;
  transition: transform 160ms ease, background 160ms ease;
}

.faq-grid details[open] summary::after {
  background: var(--mint);
  content: "−";
}

.faq-grid p {
  max-width: 740px;
  margin: 0;
  padding: 0 8px 22px;
  color: var(--muted);
}

.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 48px;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
}

.footer span {
  color: var(--ink);
  font-family: "Arial Black", Arial, sans-serif;
  font-weight: 900;
}