/* ============================================================
   FAQ / HELP CENTER PAGE
   Same shell as the legal template (nav, footer, auto gradient bg)
   with a wider card, a search box, and accordion Q&A grouped by
   category.
   ============================================================ */

.faq-card{
  width:100%;
  max-width:820px;
  background:#ffffff;
  border-radius:28px;
  padding: 64px 64px 72px;
  box-shadow: 0 30px 80px rgba(20,20,50,0.10), 0 4px 14px rgba(20,20,50,0.05);
}

.faq-card h1{
  font-size: clamp(30px, 4vw, 40px);
  font-weight:800;
  letter-spacing:-0.01em;
  color: var(--ink);
}

.faq-intro{
  margin-top:10px;
  font-size:15px;
  color: var(--ink-soft);
  opacity:0.75;
}

.faq-search{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:28px;
  padding: 13px 18px;
  border-radius:14px;
  border:1px solid rgba(20,20,60,0.14);
  background:#f8f8fc;
}
.faq-search svg{
  width:17px; height:17px;
  color: var(--ink-soft);
  opacity:0.6;
  flex-shrink:0;
}
.faq-search input{
  flex:1;
  border:none;
  background:transparent;
  outline:none;
  font-family:inherit;
  font-size:14px;
  color: var(--ink);
}
.faq-search input::placeholder{ color: var(--ink-soft); opacity:0.55; }

.faq-categories{
  margin-top:36px;
}

.faq-category{
  margin-top:38px;
}
.faq-category:first-child{ margin-top:0; }

.faq-category-title{
  font-size:12px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color: var(--brand);
  margin-bottom:14px;
}

.faq-item{
  border-bottom:1px solid rgba(20,20,60,0.10);
}
.faq-item:first-child{ border-top:1px solid rgba(20,20,60,0.10); }

.faq-question{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  text-align:left;
  background:none;
  border:none;
  cursor:pointer;
  padding: 17px 2px;
  font-family:inherit;
  font-size:15px;
  font-weight:600;
  color: var(--ink);
}

.faq-caret{
  flex-shrink:0;
  width:20px; height:20px;
  display:flex; align-items:center; justify-content:center;
  color: var(--ink-soft);
  transition: transform 260ms cubic-bezier(.4,0,.2,1);
}
.faq-item.is-open .faq-caret{ transform:rotate(45deg); }

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition: max-height 320ms cubic-bezier(.4,0,.2,1);
}
.faq-item.is-open .faq-answer{ max-height:600px; }

.faq-answer p,
.faq-answer ul{
  padding: 0 2px 18px;
  font-size:14.5px;
  line-height:1.7;
  color: var(--ink-soft);
}
.faq-answer ul{ margin-left:18px; }
.faq-answer strong{ color: var(--ink); }

.faq-item[hidden],
.faq-category[hidden]{ display:none; }

.faq-no-results{
  margin-top:20px;
  font-size:14px;
  color: var(--ink-soft);
  opacity:0.7;
}

.faq-cta{
  margin-top:56px;
  padding: 32px 34px;
  border-radius:20px;
  background: linear-gradient(120deg, rgba(46,59,193,0.06), rgba(61,117,230,0.08));
  border:1px solid rgba(46,59,193,0.12);
  text-align:center;
}
.faq-cta h3{
  font-size:19px;
  font-weight:700;
  color: var(--ink);
  margin-bottom:8px;
}
.faq-cta p{
  font-size:14px;
  color: var(--ink-soft);
  margin-bottom:20px;
}
.faq-cta-btn{
  display:inline-block;
  background: linear-gradient(120deg, #2E3BC1, #3D75E6);
  color:#fff;
  font-weight:700;
  font-size:14px;
  padding:12px 26px;
  border-radius:100px;
  text-decoration:none;
  box-shadow:0 14px 34px rgba(46,59,193,0.26);
}

@media (max-width: 640px){
  .faq-card{ padding: 40px 26px 48px; border-radius:22px; }
  .faq-cta{ padding: 26px 22px; }
}