.faq-body { padding-top: 120px; }
.faq-body .container-xl { overflow: visible; }

/* HERO */
.faq-hero { padding: 64px 0 52px; position: relative; overflow: hidden; }
.faq-hero-bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 70% at 15% 50%, rgba(78,222,163,0.05) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 85% 30%, rgba(16,185,129,0.04) 0%, transparent 60%);
}
.faq-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}
.faq-lead { font-size: 1.05rem; max-width: 720px; line-height: 1.7; }
.faq-meta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-faint);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 999px; padding: 8px 16px;
}
.faq-meta .material-symbols-outlined { font-size: 15px; color: var(--emerald); }

/* Breadcrumb */
.faq-breadcrumb ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0; margin: 0 0 20px; font-size: 13px; color: var(--text-faint);
}
.faq-breadcrumb li + li::before { content: "/"; margin-right: 8px; opacity: .6; }
.faq-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.faq-breadcrumb a:hover { color: var(--emerald); }

/* Quick-jump list */
.faq-jump {
  position: sticky; top: 120px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px;
  max-height: calc(100vh - 150px); overflow-y: auto;
}
.faq-jump ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.faq-jump li { font-size: 13.5px; line-height: 1.45; color: var(--text-faint); }
.faq-jump a { color: var(--text-muted); text-decoration: none; }
.faq-jump a:hover { color: var(--emerald); }

/* Toolbar */
.faq-toolbar { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.faq-toggle-all {
  background: none; border: 1px solid var(--border); color: var(--text-muted);
  border-radius: 999px; padding: 6px 16px; font-size: 13px; cursor: pointer;
  font-family: var(--font-body);
}
.faq-toggle-all:hover { color: var(--emerald); border-color: var(--emerald); }

/* Accordion */
.faq-list { display: grid; gap: 12px; }
.faq-item {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); scroll-margin-top: 130px;
  transition: border-color .2s ease;
}
.faq-item[open] { border-color: var(--emerald); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 16px; padding: 20px 22px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; border-radius: var(--radius-lg); }
.faq-num { font-family: var(--font-mono); font-size: 12px; color: var(--emerald); flex-shrink: 0; }
.faq-q {
  flex: 1; margin: 0; font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em;
}
.faq-icon { color: var(--emerald); font-size: 22px; transition: transform .2s ease; flex-shrink: 0; }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-a { padding: 0 22px 20px 60px; color: var(--text-muted); font-size: 15px; line-height: 1.75; }
.faq-a p { margin: 0 0 12px; }
.faq-a p:last-child { margin-bottom: 0; }
.faq-a a { color: var(--emerald); text-decoration: none; font-weight: 500; }
.faq-a a:hover { text-decoration: underline; }
.faq-a strong { color: var(--text); }

/* CTA + disclaimer */
.faq-cta {
  margin-top: 32px; padding: 26px 28px; border-radius: var(--radius-lg);
  background: var(--bg-card); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.faq-cta-title { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 6px; }
.faq-cta p { margin: 0; color: var(--text-muted); font-size: 14.5px; line-height: 1.6; max-width: 520px; }
.faq-cta a:not(.btn-emerald) { color: var(--emerald); text-decoration: none; font-weight: 500; }
.faq-disclaimer { margin-top: 24px; font-size: 12.5px; line-height: 1.7; color: var(--text-faint); }

@media (max-width: 991.98px) {
  .faq-jump { position: static; max-height: none; }
}
@media (max-width: 575.98px) {
  .faq-item summary { padding: 16px; gap: 12px; }
  .faq-a { padding: 0 16px 18px 16px; }
  .faq-q { font-size: 1rem; }
}