/* Owner: shell. FAQ on white: heading and lead left and sticky, the list right with hairlines, one open at a time. */
#questions { background:var(--page); color:var(--text); }
/* The head is the same split head as every section (sections/shell.css, page rhythm), so the heading keeps its two lines
   and its size. The list sits below it at --sp-head, full width. */

#questions .faq { min-width:0; max-width:none; border-top:1px solid var(--hair); }
#questions .faq details { border-bottom:1px solid var(--hair); }
#questions .faq summary { display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); min-height:72px; padding:var(--space-5) 0; font-size:clamp(18px,1.6vw,21px); font-weight:480; line-height:1.3; letter-spacing:-.02em; color:var(--text); cursor:pointer; list-style:none; }
#questions .faq summary::-webkit-details-marker { display:none; }
#questions .faq summary::marker { content:""; }
#questions .faq-question { flex:1; min-width:0; text-wrap:pretty; }
#questions .faq-plus { flex:none; width:24px; height:24px; color:var(--text-2); transition:transform 320ms var(--ease),color var(--dur-1) ease; }
#questions .faq details[open] .faq-plus { transform:rotate(45deg); color:var(--violet); }
#questions .faq-answer { padding:0 var(--space-8) var(--space-5) 0; }
#questions .faq-answer p { max-width:60ch; margin:0; padding:0; color:var(--text-2); font-size:var(--t-body); line-height:1.65; }
#questions .faq summary:focus-visible { outline:2px solid var(--violet); outline-offset:2px; border-radius:6px; }
@media (hover:hover) and (pointer:fine) { #questions .faq summary:hover .faq-plus { color:var(--text); } }

/* Height animates where the browser can (interpolate-size). Elsewhere the disclosure is native and instant.
   A closed answer is also visibility:hidden, so it is out of Tab, out of search and has no stray box. */
#questions .faq details:not([open]) .faq-answer { visibility:hidden; }
@supports (interpolate-size:allow-keywords) and selector(details::details-content) {
  #questions .faq { interpolate-size:allow-keywords; }
  #questions .faq details::details-content { block-size:0; overflow:clip; opacity:0; transition:block-size 320ms var(--ease),opacity 240ms ease,content-visibility 320ms allow-discrete; }
  #questions .faq details[open]::details-content { block-size:auto; opacity:1; }
  #questions .faq .faq-answer { transition:visibility 0s linear 320ms; }
  #questions .faq details[open] .faq-answer { visibility:visible; transition-delay:0s; }
}

@media (max-width:720px) {
  #questions .faq summary { min-height:64px; padding:var(--space-4) 0; gap:var(--space-4); }
  #questions .faq-answer { padding-right:0; padding-bottom:var(--space-4); }
}
@media (prefers-reduced-motion:reduce) {
  #questions .faq-plus, #questions .faq .faq-answer { transition:none; }
  #questions .faq details::details-content { transition:none; }
}