/* =========================================================================
   Falconet: FAQ page only. Sticky category rail + search (desktop),
   sticky chip bar (mobile), grouped accordions, closing contact card.
   ========================================================================= */
html { scroll-behavior: smooth; }

/* ---------- layout ---------- */
.faq-body { padding-block: clamp(0.5rem, 2vw, 1.5rem) clamp(2rem, 5vw, 4rem); }
.faq-layout { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq-side { position: sticky; top: 96px; display: grid; gap: 1.25rem; }

/* ---------- search ---------- */
.faq-search { position: relative; margin: 0; }
.faq-search > svg { position: absolute; left: 1rem; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.faq-search .input { -webkit-appearance: none; appearance: none; padding-left: 2.75rem; }
.faq-search .input::-webkit-search-decoration { -webkit-appearance: none; }
.faq-search .input::-webkit-search-cancel-button { cursor: pointer; }

/* ---------- category rail ---------- */
.faq-cats ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.faq-cats a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 44px; padding: 0.5rem 0.6rem 0.5rem 0.95rem; border-radius: 12px;
  font-size: 0.98rem; font-weight: 600; color: var(--ink-2);
  transition-property: color, background-color, box-shadow; transition-duration: 0.2s; transition-timing-function: var(--ease-ui);
}
.faq-cats a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.04); }
.faq-cats a[aria-current] { color: var(--ink); background: var(--cyan-soft); box-shadow: inset 0 0 0 1px rgba(47, 216, 255, 0.3); }
.cat-n {
  display: grid; place-items: center; min-width: 1.75rem; height: 1.5rem; padding: 0 0.45rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink-3); background: rgba(255, 255, 255, 0.05);
  transition-property: color, background-color; transition-duration: 0.2s; transition-timing-function: var(--ease-ui);
}
.faq-cats a[aria-current] .cat-n { color: var(--cyan); background: rgba(47, 216, 255, 0.14); }

.side-note { display: grid; gap: 0.4rem; padding: 1.1rem 1.2rem; border-radius: var(--r-md); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 0.95rem; color: var(--ink-2); }
.side-note .link-arrow { min-height: 40px; }

/* ---------- groups ---------- */
.faq-group { scroll-margin-top: 96px; }
/* gap only between visible groups, so filtered results never start with an empty gap */
.faq-group:not([hidden]) ~ .faq-group:not([hidden]) { margin-top: clamp(3rem, 6vw, 4.5rem); }
.group-head { display: grid; grid-template-columns: 2.25rem 1fr; column-gap: 0.75rem; align-items: baseline; margin-bottom: 1.25rem; }
.group-n { font-size: 0.95rem; font-weight: 700; color: var(--cyan); font-variant-numeric: tabular-nums; }
.group-title { font-size: clamp(1.65rem, 2.8vw, 2.25rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; }
.group-head p { grid-column: 2; margin-top: 0.45rem; color: var(--ink-3); }
.faq-groups .faq details { scroll-margin-top: 110px; }
.faq-groups .faq summary { min-height: 64px; }
.faq .ans a:not(.link-arrow), .faq-empty .inline-link {
  color: var(--cyan); text-decoration: underline; text-decoration-color: rgba(47, 216, 255, 0.4); text-underline-offset: 3px;
  transition: text-decoration-color 0.2s var(--ease-ui);
}
.faq .ans a:not(.link-arrow):hover, .faq-empty .inline-link:hover { text-decoration-color: currentColor; }

.faq-empty { display: grid; gap: 0.6rem; padding: clamp(1.5rem, 3vw, 2.25rem); border-radius: var(--r-lg); background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
.faq-empty[hidden] { display: none; }
.faq-empty-q { color: var(--cyan); overflow-wrap: anywhere; }

/* ---------- still have a question (light contact block; the shared CTA band follows) ---------- */
.still { scroll-margin-top: 96px; padding-top: 0; }
.still-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); gap: clamp(1.25rem, 4vw, 3rem); align-items: center;
  padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--r-lg);
  background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line);
}
.still-card .muted { margin-top: 0.45rem; max-width: 46ch; }
.contact-row {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 20px; gap: 1rem; align-items: center;
  min-height: 76px; padding: 0.9rem 1.1rem 0.9rem 0.9rem; border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.03); box-shadow: inset 0 0 0 1px var(--line);
  transition-property: background-color, box-shadow; transition-duration: 0.2s; transition-timing-function: var(--ease-ui);
}
.contact-row:hover { background: var(--cyan-soft); box-shadow: inset 0 0 0 1px rgba(47, 216, 255, 0.3); }
.contact-row .icon-tile { margin: 0; }
.cr-text { display: grid; gap: 0.15rem; min-width: 0; }
.cr-text b { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.cr-text small { font-size: 0.88rem; color: var(--ink-3); line-height: 1.4; }
.cr-text .cr-mail { color: var(--ink-2); font-weight: 600; overflow-wrap: anywhere; }
.cr-go { width: 20px; height: 20px; color: var(--ink-3); transition-property: translate, color; transition-duration: 0.3s; transition-timing-function: var(--ease-ui); }
.contact-row:hover .cr-go { translate: 4px 0; color: var(--cyan); }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .faq-side { display: contents; }
  .side-note { display: none; }
  /* categories become a sticky, swipeable chip bar under the fixed nav */
  .faq-cats {
    position: sticky; top: 72px; z-index: 40;
    margin-inline: calc(-1 * var(--gutter)); padding: 0.65rem var(--gutter);
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
    background: rgba(7, 8, 13, 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 var(--line);
  }
  .faq-cats::-webkit-scrollbar { display: none; }
  .faq-cats ul { display: flex; gap: 0.45rem; width: max-content; }
  .faq-cats a { min-height: 40px; gap: 0.5rem; padding: 0.4rem 0.45rem 0.4rem 0.95rem; border-radius: 999px; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line-2); }
  .faq-groups { margin-top: 1rem; }
  .faq-group { scroll-margin-top: 150px; }
  .faq-groups .faq details { scroll-margin-top: 160px; }
  .still-card { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .faq-groups .faq summary { padding: 1.1rem 1.15rem; font-size: 1.02rem; }
  .faq-groups .faq .ans { padding: 0 1.15rem 1.2rem; }
  .contact-row { grid-template-columns: 44px minmax(0, 1fr) 18px; gap: 0.85rem; padding-inline: 0.75rem 0.9rem; }
  .contact-row .icon-tile { width: 44px; height: 44px; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}