/* ==========================================================================
   SYS.09 queries — the accordion and its sticky aside.
   ========================================================================== */

/* ---------- SYS.09 queries (FAQ) ---------- */
.faq{ padding-block:15vh; }
.faq-wrap{ margin-top:7vh; display:grid; grid-template-columns:.85fr 1.6fr; gap:clamp(30px,5vw,90px); align-items:start; }
.faq-aside{ position:sticky; top:16vh; }
.faq-aside h3{ font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(1.35rem,2.1vw,1.95rem); line-height:1.05; letter-spacing:-.01em; }
.faq-aside p{ margin-top:18px; font-size:var(--fs-base); line-height:1.8; color:var(--muted); max-width:34ch; }
.faq-aside .faq-cta{ margin-top:24px; display:inline-flex; align-items:center; min-height:44px; gap:10px; font-size:var(--fs-sm); letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.faq-list{ border-top:1px solid var(--line); }
.faq-list details{ border-bottom:1px solid var(--line); }
.faq-list summary{ list-style:none; cursor:pointer; padding:22px 0; display:flex; gap:18px; align-items:center; justify-content:space-between; font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(.95rem,1.32vw,1.2rem); letter-spacing:0; transition:color .4s var(--ease-out); }
@media (pointer:coarse){ .faq-list summary{ cursor:pointer; } }
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary .q-tx{ display:flex; gap:16px; align-items:baseline; }
.faq-list summary .q-no{ font-family:var(--mono); font-weight:400; font-size:var(--fs-sm); letter-spacing:.08em; color:var(--amber); flex:0 0 auto; }
.faq-list summary .q-ic{ position:relative; flex:0 0 auto; width:16px; height:16px; }
.faq-list summary .q-ic::before,.faq-list summary .q-ic::after{ content:""; position:absolute; background:currentColor; }
.faq-list summary .q-ic::before{ left:0; right:0; top:50%; height:1.5px; transform:translateY(-50%); }
.faq-list summary .q-ic::after{ top:0; bottom:0; left:50%; width:1.5px; transform:translateX(-50%) scaleY(1); transition:transform .4s var(--ease-out); }
.faq-list details[open] summary .q-ic::after{ transform:translateX(-50%) scaleY(0); }
.faq-list summary:hover{ color:var(--accent); }
.faq-list details[open] summary{ color:var(--accent); }
.faq-list .ans{ overflow:hidden; }
.faq-list .ans-inner{ padding:2px 0 28px; max-width:66ch; font-size:var(--fs-base); line-height:1.85; color:var(--muted); }
.faq-list .ans-inner::before{ content:"> "; color:var(--accent); }
@media (max-width:860px){ .faq-wrap{ grid-template-columns:1fr; gap:6vh; } .faq-aside{ position:static; } }