/* ===== SECTION: faq ===== */
/* Seven <details> as a refined accordion: fine rules, serif questions, a
   small rotating "+" in --muted, answers in --body-ink. */

#faq{ background:var(--surface); }
#faq > div{ width:min(100%,820px); }
#faq h2{ margin-bottom:clamp(2.5rem,5vw,3.75rem); }

#faq .faqs{ border-top:1px solid var(--line); text-align:left; }
#faq .faqs details{ border-bottom:1px solid var(--line); }

#faq .faqs summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.25rem;
  padding:1.35rem 0;
  font-family:var(--serif); font-weight:400; font-variation-settings:'opsz' 36;
  font-size:clamp(1.18rem,1.4vw,1.35rem); line-height:1.3; letter-spacing:-.012em;
  color:var(--ink); transition:color .2s ease;
}
#faq .faqs summary::-webkit-details-marker{ display:none; }
#faq .faqs summary .q{ flex:1 1 auto; min-width:0; text-wrap:pretty; }
#faq .faqs summary:hover{ color:var(--body-ink); }

/* the "+" indicator: two hairlines that rotate into an "x"-free minus */
#faq .faqs summary::after{
  content:""; flex:0 0 auto; position:relative; width:22px; height:22px; margin-top:.2em;
  border-radius:50%; border:1px solid var(--line-strong);
  background:
    linear-gradient(var(--muted),var(--muted)) center/10px 1px no-repeat,
    linear-gradient(var(--muted),var(--muted)) center/1px 10px no-repeat;
  transition:transform .28s var(--ease), border-color .2s ease;
}
#faq .faqs details[open] summary::after{ transform:rotate(45deg); border-color:var(--muted); }
#faq .faqs summary:hover::after{ border-color:var(--muted); }

#faq .faqs .faq-body{
  padding:.1rem 0 1.6rem; max-width:62ch;
  color:var(--body-ink); font-size:.98rem; line-height:1.62;
}
#faq .faqs .faq-body p{ margin:0 0 .85rem; text-wrap:pretty; }
#faq .faqs .faq-body p:last-child{ margin-bottom:0; }
#faq .faqs .faq-body strong{ color:var(--ink); font-weight:500; }
#faq .faqs .faq-body a{
  color:var(--ink); text-decoration:underline; text-decoration-color:var(--line-strong);
  text-decoration-thickness:1px; text-underline-offset:3px; transition:text-decoration-color .2s ease;
}
#faq .faqs .faq-body a:hover{ text-decoration-color:var(--ink); }

#faq .faqs .faq-body ul{ margin:0 0 1rem; display:grid; gap:.5rem; }
#faq .faqs .faq-body ul:last-child{ margin-bottom:0; }
#faq .faqs .faq-body li{ position:relative; padding-left:1.75rem; }
#faq .faqs .faq-body li::before{
  content:"✓"; position:absolute; left:0; top:.28em;
  width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--white); color:var(--accent-ink);
  font-family:var(--sans); font-size:.58rem; font-weight:600; line-height:1;
}

/* open/close: a soft fade for the answer where motion is allowed */
@media (prefers-reduced-motion:no-preference){
  #faq .faqs details[open] .faq-body{ animation:faq-in .32s var(--ease) both; }
  @keyframes faq-in{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
}

@media (max-width:640px){
  #faq .faqs summary{ font-size:1.12rem; padding:1.2rem 0; gap:1rem; }
  #faq .faqs summary::after{ width:20px; height:20px; margin-top:.15em; }
  #faq .faqs .faq-body{ font-size:.95rem; padding-bottom:1.4rem; }
}