/* Questions: a quiet editorial index between evidence and the invitation. */
#faq {
  --qn-paper: #e8eadc;
  --qn-ink: #1b3022;
  --qn-muted: #48604c;
  --qn-line: rgba(225, 224, 204, .19);
}
main > #faq.panel > .panel__inner.qn-layout {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.8fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
  padding-block: 88px 96px;
}
#faq .qn-intro { min-width: 0; }
#faq .qn-intro .idx { display: block; margin-bottom: 27px; }
#faq .qn-intro h2 {
  margin: 0;
  color: var(--tx1);
  font: 500 clamp(46px, 4.5vw, 64px)/1.04 "Inter Display", Inter, system-ui, sans-serif;
  letter-spacing: -.055em;
}
#faq .qn-intro h2 span { color: #8fbf96; }
#faq .qn-intro > p {
  max-width: 29ch;
  margin: 27px 0 0;
  color: var(--tx2);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -.012em;
}
#faq .qn-index { min-width: 0; border-top: 1px solid var(--qn-line); }
#faq .qn-item { border-bottom: 1px solid var(--qn-line); }
#faq .qn-item summary {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  gap: 24px;
  align-items: center;
  min-height: 84px;
  padding: 22px 28px;
  color: var(--tx1);
  list-style: none;
  cursor: pointer;
}
#faq .qn-item summary::-webkit-details-marker { display: none; }
#faq .qn-number {
  color: var(--tx3);
  font-size: 11px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: .09em;
  font-variant-numeric: tabular-nums;
}
#faq .qn-question {
  font: 500 clamp(20px, 1.8vw, 26px)/1.25 "Inter Display", Inter, system-ui, sans-serif;
  letter-spacing: -.025em;
}
#faq .qn-item summary i {
  position: relative;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(225, 224, 204, .25);
  border-radius: 50%;
  transition: background-color 160ms ease, border-color 160ms ease;
}
#faq .qn-item summary i::before, #faq .qn-item summary i::after {
  content: "";
  position: absolute;
  top: 14px;
  left: 9px;
  width: 12px;
  height: 1px;
  background: currentColor;
}
#faq .qn-item summary i::after { transform: rotate(90deg); }
#faq .qn-item:not([open]) summary:hover { background: rgba(166, 211, 168, .045); color: #f3f4e9; }
#faq .qn-item:not([open]) summary:hover i { border-color: #8fbf96; background: rgba(166, 211, 168, .09); }
#faq .qn-item[open] { background: var(--qn-paper); border-color: var(--qn-paper); }
#faq .qn-item[open] summary { color: var(--qn-ink); padding-bottom: 16px; }
#faq .qn-item[open] .qn-number { color: #497455; }
#faq .qn-item[open] summary i { color: var(--qn-ink); border-color: #a5b6a0; }
#faq .qn-item[open] summary i::after { transform: scaleY(0); }
#faq .qn-item summary:focus-visible { outline: 2px solid #9fe3a8; outline-offset: 4px; }
#faq .qn-item[open] summary:focus-visible { outline-color: #366345; outline-offset: -4px; }
#faq .qn-answer { padding: 0 84px 34px; }
#faq .qn-answer p {
  max-width: 55ch;
  margin: 12px 0 0;
  color: var(--qn-muted);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -.012em;
}
#faq .qn-answer .qn-answer__lead {
  margin: 0;
  color: var(--qn-ink);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -.02em;
}
/* Retain a straightforward reading order below the desktop layout. */
@media (max-width: 959px) {
  main > #faq.panel > .panel__inner.qn-layout { grid-template-columns: 1fr; gap: 36px; padding-block: 64px; }
  #faq .qn-intro h2 { font-size: 46px; }
  #faq .qn-intro > p { max-width: 45ch; margin-top: 20px; }
  #faq .qn-item summary { grid-template-columns: 24px minmax(0, 1fr) 28px; gap: 14px; min-height: 80px; padding: 22px 18px; }
  #faq .qn-item summary i { width: 28px; height: 28px; }
  #faq .qn-item summary i::before, #faq .qn-item summary i::after { top: 12px; left: 7px; }
  #faq .qn-answer { padding: 0 56px 28px; }
}
@media (prefers-reduced-motion: reduce) {
  #faq .qn-item summary i { transition: none; }
}