/* faq — the FAQ page's own styles: the questions as accordions. The document around them (heading, sections) is
   legal.css; the tokens are tokens.css, the header, footer and join banner site.css */
.legal-head .lead a { color: var(--bone); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--gold-hi) 70%, transparent); text-underline-offset: 3px; }

.faq-sec { padding-top: var(--s4); scroll-margin-top: var(--s2); }
.faq-sec h2 { font-family: var(--f-title); font-weight: 700; font-size: clamp(1.3125rem, 1.15rem + .6vw, 1.625rem); line-height: 1.3; color: var(--bone); margin-bottom: var(--s2); }

/* ============ A question ============ */
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; scroll-margin-top: var(--s2); transition: border-color var(--dur-s) var(--ease-out); }
.faq-item + .faq-item { margin-top: 10px; }
.faq-item[open] { border-color: color-mix(in oklab, var(--gold-hi) 45%, var(--border)); }
.faq-item summary { display: flex; align-items: center; gap: var(--s2); min-height: 56px; padding: 14px 18px; cursor: pointer; list-style: none; border-radius: 10px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { flex: 1; font-family: var(--f-title); font-weight: 700; font-size: 1.0625rem; line-height: 1.4; color: var(--bone); }
/* the chevron: points down closed, up open */
.faq-item summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid var(--btn-red); border-bottom: 2px solid var(--btn-red); transform: translateY(-3px) rotate(45deg); transition: transform var(--dur-s) var(--ease-out); }
[data-theme="dark"] .faq-item summary::after { border-color: var(--gold-hi); }
.faq-item[open] summary::after { transform: translateY(2px) rotate(-135deg); }

.faq-a { padding: 0 18px 16px; color: var(--muted); }
.faq-a p + p { margin-top: var(--s1); }
.faq-a a { color: var(--bone); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--gold-hi) 70%, transparent); text-underline-offset: 3px; }

@media (max-width: 767px) {
  .faq-item summary { padding: 12px 14px; }
  .faq-a { padding: 0 14px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item, .faq-item summary::after { transition: none; }
}