/* The FAQ (app/templates/public/faq.html): a rail of its sections and each question a row that opens.
   Every color is a token from palette.css. */
.fq { max-width:1080px; margin:0 auto; padding:48px 16px 80px; }
.fq-head { margin:0 0 28px; }
.fq-h1 { font-size:clamp(2rem, 5vw, 2.8rem); font-weight:800; letter-spacing:-.035em; line-height:1.05; margin:0 0 8px; color:var(--text-primary); }
.fq-sub { margin:0; color:var(--text-secondary); font-size:1rem; }
.fq-body { display:grid; grid-template-columns:220px minmax(0, 1fr); gap:40px; align-items:start; }
.fq-rail { position:sticky; top:88px; display:flex; flex-direction:column; gap:2px; }
.fq-rail a { display:flex; justify-content:space-between; gap:12px; padding:8px 10px; border-radius:var(--radius-sm);
             color:var(--text-secondary); text-decoration:none; font-size:.9rem; }
.fq-rail a:hover { background:var(--bg-secondary); color:var(--text-primary); }
.fq-rail b { font-weight:600; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.fq-group { margin:0 0 36px; scroll-margin-top:88px; }
.fq-h2 { font-size:1.25rem; font-weight:800; letter-spacing:-.02em; margin:0 0 10px; color:var(--text-primary); }
.fq-h2 span { font-size:.8rem; font-weight:600; color:var(--text-muted); margin-left:6px; }
.fq-q { border-top:1px solid var(--border-color); }
.fq-q:last-child { border-bottom:1px solid var(--border-color); }
.fq-q summary { cursor:pointer; list-style:none; padding:14px 32px 14px 0; position:relative; font-weight:600;
                font-size:1rem; color:var(--text-primary); }
.fq-q summary::-webkit-details-marker { display:none; }
.fq-q summary::after { content:'+'; position:absolute; right:4px; top:12px; font-size:1.2rem; color:var(--text-muted); }
.fq-q[open] summary::after { content:'\2212'; }
.fq-a { padding:0 0 16px; color:var(--text-secondary); font-size:.96rem; line-height:1.6; }
.fq-a p { margin:0 0 8px; }
.fq-src { font-size:.86rem; color:var(--accent-color); text-decoration:none; font-weight:600; }
.fq-src:hover { text-decoration:underline; }
@media (max-width:760px) {
  .fq { padding-top:32px; }
  .fq-body { grid-template-columns:1fr; gap:20px; }
  .fq-rail { position:static; flex-direction:row; flex-wrap:wrap; gap:6px; }
  .fq-rail a { border:1px solid var(--border-color); border-radius:50px; padding:6px 12px; }
}