.faq-layout { display: grid; gap: var(--space-7); }
@media (min-width: 1000px) {
  .faq-layout { grid-template-columns: 250px minmax(0,1fr); gap: clamp(3rem,6vw,6rem); align-items: start; }
}

.faq-nav { display: grid; gap: var(--space-2); }
@media (min-width: 1000px) { .faq-nav { position: sticky; top: calc(var(--header-h) + 3rem); } }
.faq-nav a {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  padding: .6rem .85rem;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  transition: all var(--dur-fast) var(--ease);
}
.faq-nav a:hover { background: var(--surface-2); color: var(--text); }
.faq-nav a.is-active { background: var(--text); color: var(--bg); }
.faq-nav a span { font-family: var(--font-mono); font-size: var(--fs-xs); opacity: .65; }

.faq-search { position: relative; margin-bottom: var(--space-7); max-width: 480px; }
.faq-search input { padding-left: 2.7rem; }
.faq-search svg {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-muted); pointer-events: none;
}
.faq-search .clear {
  position: absolute; right: .7rem; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  display: none; place-items: center;
  color: var(--text-muted);
  background: var(--surface-2);
  font-size: 14px; line-height: 1;
}
.faq-search.has-value .clear { display: grid; }

.faq-group { margin-bottom: var(--space-8); scroll-margin-top: calc(var(--header-h) + 2rem); }
.faq-group__title {
  display: flex; align-items: baseline; gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.faq-group__title h2 { font-size: var(--fs-xl); }
.faq-group__title span { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); }

.accordion__item.is-hidden { display: none; }
.faq-group.is-hidden { display: none; }

mark {
  background: var(--accent-wash);
  color: var(--accent);
  padding: 0 .15em;
  border-radius: 2px;
}

.faq-empty {
  display: none;
  padding: var(--space-8);
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  color: var(--text-muted);
}
.faq-empty.is-visible { display: grid; gap: var(--space-4); justify-items: center; }

.faq-help {
  display: grid; gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  margin-top: var(--space-8);
}
@media (min-width: 760px) { .faq-help { grid-template-columns: 1fr auto; align-items: center; } }