/* =========================================================================
   ENISHI — FAQ page (faq.html)
   Mirrors HOBBY FAQ accordion style for visual consistency.
   Tokens are defined in style.css — do NOT redefine.
   ========================================================================= */

/* =======================================================================
   1. FAQ BODY — three groups
   ======================================================================= */
.faq-body{ padding-block:72px 80px; }
.faq-body__inner{ display:flex; flex-direction:column; gap:56px; }

.faq-group{ display:flex; flex-direction:column; gap:24px; }
.faq-group__title{
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-heading); font-weight:700; font-size:22px;
  color:var(--ink); line-height:1.3;
}
.faq-group__tick{
  flex:0 0 auto; width:28px; height:3px; border-radius:999px;
  background:var(--accent);
}
.faq-group__label{ min-width:0; }

/* =======================================================================
   2. ACCORDION — matches /css/hobby.css for consistency
   ======================================================================= */
.acc-list{ display:flex; flex-direction:column; gap:14px; }
.acc-item{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 28px; display:flex; flex-direction:column; gap:14px;
}
.acc-q{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  cursor:pointer;
}
.acc-q-text{ font-family:var(--font-heading); font-weight:700; font-size:17px; color:var(--ink); }
.acc-plus{
  flex:0 0 auto; width:30px; height:30px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent);
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .2s ease;
}
.acc-a{
  display:none;
  font-family:var(--font-body); font-size:14px; color:var(--muted); line-height:1.85;
}
.acc-item.is-open .acc-a{ display:block; }
.acc-item.is-open .acc-plus{ transform:rotate(45deg); }

/* =======================================================================
   3. CLOSING CTA
   ======================================================================= */
.faq-cta{ padding-block:64px; }
.faq-cta__inner{
  display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:32px;
}
.faq-cta__text{ display:flex; flex-direction:column; gap:10px; }
.faq-cta__heading{
  font-family:var(--font-heading); font-weight:700; font-size:30px;
  line-height:1.3; color:var(--ink);
}
.faq-cta__sub{ font-size:15px; line-height:1.7; color:var(--muted); max-width:560px; }
.faq-cta__button{ padding:18px 34px; gap:10px; font-size:17px; color:#fff; flex:0 0 auto; }

/* =======================================================================
   4. Responsive
   ======================================================================= */
@media (max-width:860px){
  .faq-cta__inner{ flex-direction:column; align-items:flex-start; gap:24px; }
  .faq-group__title{ font-size:20px; }
}
@media (max-width:560px){
  .acc-item{ padding:20px 20px; }
  .acc-q-text{ font-size:16px; }
}