/* FAQ accordion (native <details>). */

.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: start;
}
.faq__grid .section-head { position: sticky; top: calc(var(--nav-h) + 40px); margin-bottom: 0; }

.faq__list { border-top: 1px solid var(--nm-black); }
.qa { border-bottom: 1px solid var(--nm-black); }
.qa summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 0;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: '';
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--nm-black);
  border-radius: var(--r-sm);
  background:
    linear-gradient(var(--nm-black), var(--nm-black)) center / 12px 1.8px no-repeat,
    linear-gradient(var(--nm-black), var(--nm-black)) center / 1.8px 12px no-repeat;
  transition: transform var(--t) var(--ease), background-color var(--t);
}
.qa[open] summary::after {
  transform: rotate(45deg);
  background-color: var(--nm-lime);
}
.qa summary:hover::after { background-color: var(--nm-lime); }
.qa p { padding: 0 48px 24px 0; color: var(--nm-muted); max-width: 64ch; }

@media (max-width: 860px) {
  .faq__grid { grid-template-columns: 1fr; }
  .faq__grid .section-head { position: static; }
  .qa p { padding-right: 0; }
}