/* =========================================================
   FAQ — matches sections/faq.html
   Uses native <details>/<summary> so no JS is needed for the
   accordion behavior. To add a question: copy one <details>
   block in sections/faq.html.
   ========================================================= */
.faq{background:var(--cream);}
.faq-list{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:14px;}
.faq-item{
  background:var(--cream-warm); border:1px solid var(--line); border-radius:14px;
  overflow:hidden;
}
.faq-item summary{
  list-style:none; cursor:pointer; padding:22px 26px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--font-display); font-size:20px; font-weight:600; color:var(--primary-dark);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .plus{
  flex:0 0 auto; width:22px; height:22px; position:relative; color:var(--gold);
}
.faq-item summary .plus::before, .faq-item summary .plus::after{
  content:''; position:absolute; background:currentColor; border-radius:2px;
  transition:transform .25s ease;
}
.faq-item summary .plus::before{top:10px; left:2px; width:18px; height:2px;}
.faq-item summary .plus::after{top:2px; left:10px; width:2px; height:18px;}
.faq-item[open] summary .plus::after{transform:rotate(90deg); opacity:0;}
.faq-item .faq-answer{
  padding:0 26px 22px; font-size:15px; line-height:1.7; color:#5b6660;
}
.faq-note{
  max-width:760px; margin:22px auto 0; font-size:13px; color:#8a9089;
  text-align:center; font-style:italic;
}