.faq-page{
  max-width:920px;
  margin:0 auto;
  padding:56px 20px}
.faq-hero h1{
  font-size:2.5rem;
  text-align:center;
  padding:24px 0 32px;
  margin:0 0 8px
}
.faq-hero .sub{
  color:var(--color-muted);
  text-align:center;
  margin:0 0 48px
}
.faq-tabs{
  display:flex;
  gap:12px;
  justify-content:center;
  margin:12px 0 80px;
}
.faq-tab{
  border:0;
  border-radius:4px;
  padding:10px 14px;
  border: 0.5px solid var(--color-border);
  background:#fff;
  color:var(--color-text);
  font-weight:600;
  cursor:pointer
}
.faq-tab.is-active{
  background:var(--color-primary);
  color:#fff
}
.faq-tab .badge{
  margin-left:8px;
  opacity:.85;
  font-weight:700
}

.faq-panel{
  display:none
}
.faq-panel.is-active{
  display:block
}

.faq-accordion{
  display:flex;
  flex-direction:column;
  gap:20px
}
.faq-item{
  border-radius:4px;
  background:none;
  border: 0.5px solid var(--color-border);
  overflow:hidden;
}
.faq-item a {
  color: var(--color-primary);
  text-decoration: none;
}
.faq-item a:hover {
  color: var(--color-muted)
}

.faq-q{margin:0}
.faq-toggle{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 18px;
  background:transparent;
  border:0;
  cursor:pointer;
  font-size:16px;
  font-weight:600
}
.faq-a{
  padding:0 18px 16px
}
.faq-a__inner{
  color:var(--color-text)
}
.chev{
  width:22px;
  height:22px;
  flex:0 0 22px;
  transition:transform .2s ease
}
.faq-item[open] .chev,
.faq-toggle[aria-expanded="true"] .chev{
  transform:rotate(180deg)
}
.faq-item:has(.faq-toggle[aria-expanded="true"]) {
  background: var(--color-bg-soft);
}

/* show/hidden handled in JS (attribute [hidden]) */

.faq-cta {
  text-align: center;
  padding: 48px 24px;
  background: var(--color-bg-soft);
  border-radius: 4px;
  margin-top: 40px;
  margin-bottom: 80px;
}
.faq-cta h2 {
  font-size: 2rem;
  margin-bottom: 12px;
}
.faq-cta p {
  color: var(--color-muted);
  margin-bottom: 20px;
}
.faq-cta .btn-primary {
  background: var(--color-primary);
  color: #fff;
  padding: 8px 10px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s;
}
.faq-cta .btn-primary:hover {
  background: var(--color-primary-hover);
}