/* cybee v3 · S8 Questions (track T6, prefix faq-). Every class starts with faq-; shared cy- primitives come from css/foundation.css.
   Spec: DIRECTION-v3.md §3 S8, §5 (FAQ row). DS source: WEB 211 to 219 (native details, Signal plus), STA css 107 to 113 (d.20).
   Ground paper, hue Signal only, no living thing. Native <details>: identical with JS off.
   Height animates through ::details-content + interpolate-size where both exist (Chrome), instant elsewhere (Safari today).
   The DS reduced motion kill switch only reaches *, ::before and ::after, so ::details-content gets its own rule below. */

.faq{background:var(--s-bg)}
.faq-grid{align-items:start;row-gap:var(--pg-title-gap)}

/* 1440 and 1024: H2 in cols 1 to 4, the list in cols 5 to 12 */
.faq-head{grid-column:1 / span 4;min-width:0}
.faq-kicker{margin-bottom:20px}
.faq-list{grid-column:5 / span 8;min-width:0;border-bottom:1px solid var(--pg-rule)}

.faq-item{border-top:1px solid var(--pg-rule)}
.faq-q{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px;padding:18px 0;
  font-family:var(--font-body);font-size:20px;font-weight:500;line-height:1.35;letter-spacing:-.01em;color:var(--s-ink);
  margin-inline:-12px;padding-inline:12px;border-radius:10px;-webkit-tap-highlight-color:transparent}
/* the ring sits inside the row (inset) so it never covers the answer's first line; 12px of air either side of the text */
.faq-q:focus-visible{outline-offset:-3px}
.faq-q-text{min-width:0;text-wrap:pretty;transition:color 180ms var(--ease-out)}
.faq-plus{flex:none;display:block;width:20px;height:20px;color:#2757C9;fill:currentColor;transition:transform 180ms var(--ease-out)}
.faq-item[open]>.faq-q .faq-plus{transform:rotate(45deg)}
.faq-a{padding:0 44px 28px 0}
.faq-a p{max-width:60ch;font-family:var(--font-body);font-size:18px;font-weight:400;line-height:1.55;color:var(--s-ink-2);text-wrap:pretty}
@media (any-hover:hover){.faq-q:hover .faq-q-text{color:#2757C9}}

/* height: open and close glide where the browser can interpolate to auto */
@supports (interpolate-size:allow-keywords) and selector(::details-content){
  .faq{interpolate-size:allow-keywords}
  .faq-item::details-content{block-size:0;overflow-y:clip;
    transition:block-size 380ms var(--ease-out),content-visibility 380ms var(--ease-out) allow-discrete}
  .faq-item[open]::details-content{block-size:auto}
}
@media (prefers-reduced-motion:reduce){.faq-item::details-content{transition:none}}
html[data-reduced-motion="true"] .faq-item::details-content{transition:none}

/* below 900: the H2 above the list */
@media (max-width:899px){
  .faq-head,.faq-list{grid-column:1 / -1}
}
/* phones: summaries 18/500, min 64px */
@media (max-width:767px){
  .faq-q{min-height:64px;padding-block:16px;gap:20px;font-size:18px;line-height:1.4}
  .faq-a{padding-right:0}
}