/* FAQ — modern searchable accordion (2026-07-24). Tokens from brand.css. */
.faq{ max-width:760px; margin:44px auto; padding:0 clamp(16px,4vw,32px); }

.faq__head{ text-align:center; margin-bottom:24px; }
.faq__head h1{ font-size:32px; font-weight:800; letter-spacing:-.02em; margin:0 0 8px; color:var(--color-text-strong); text-wrap:balance; }
.faq__head p{ color:var(--color-text-muted); font-size:15px; margin:0; }

/* Search box */
.faq__search{ position:relative; margin-bottom:22px; }
.faq__search-ic{ position:absolute; left:15px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--color-text-muted); pointer-events:none; }
#faq-search{
  display:block; /* collapse the inline-block baseline gap so the icon centers to the input */
  width:100%; padding:12px 16px 12px 44px; font-size:15px; font-family:var(--font-sans);
  color:var(--color-text-strong); background:var(--color-surface);
  border:1px solid var(--color-border); border-radius:999px; outline:none;
}
#faq-search::placeholder{ color:var(--color-text-muted); opacity:.85; }
#faq-search:focus{ border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-tint); }

/* Accordion */
.faq__list{ display:flex; flex-direction:column; gap:10px; }
.faq-item{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius); overflow:hidden; transition:border-color .15s; }
.faq-item[open]{ border-color:color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); }
.faq-item summary{
  display:flex; align-items:center; justify-content:space-between; gap:14px; cursor:pointer;
  padding:16px 18px; font-weight:600; font-size:15.5px; color:var(--color-text-strong); list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--color-primary); }
.faq-item summary:focus-visible{ outline:2px solid var(--color-primary); outline-offset:-2px; border-radius:var(--radius); }
.faq-item .chevron{ width:18px; height:18px; color:var(--color-text-muted); flex:none; transition:transform .18s ease; }
.faq-item[open] .chevron{ transform:rotate(180deg); color:var(--color-primary); }

.faq-a{ padding:0 18px 16px; color:var(--color-text-muted); font-size:14.5px; line-height:1.7; }
.faq-a p{ margin:0 0 10px; }
.faq-a p:last-child{ margin:0; }
.faq-a a{ color:var(--color-primary); }
.faq-a a:hover{ color:var(--color-primary-hover); }
.faq-a strong{ color:var(--color-text-strong); }
.faq-a code{ font-family:var(--font-mono); font-size:13px; background:var(--color-primary-tint); color:var(--color-text-strong); padding:2px 6px; border-radius:6px; }
.faq-a ul, .faq-a ol{ margin:0 0 10px 20px; }
.faq-a li{ margin:4px 0; }

.faq__empty{ text-align:center; color:var(--color-text-muted); font-size:14.5px; padding:28px 0; }

@media (prefers-reduced-motion:reduce){ .faq-item .chevron{ transition:none; } }

/* ---- closing CTA ----
   Sits under the question list (outside #faq-list, so the search filter can't hide it).
   The document centre is gated on a free account, so this is the page's exit path for
   anyone who wants more than an FAQ answer. */
.faq__cta{ margin-top:34px; padding:26px 24px; text-align:center; background:var(--color-surface);
  border:1px solid var(--color-border); border-radius:var(--radius); }
.faq__cta h2{ font-size:19px; font-weight:700; letter-spacing:-.01em; margin:0 0 8px;
  color:var(--color-text-strong); }
.faq__cta p{ color:var(--color-text-muted); font-size:14.5px; line-height:1.7;
  margin:0 auto 18px; max-width:52ch; }
.faq__cta-btns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }