/* ══════════════════════════════════════════════════════════════════════════
   /faqs — on the Help Center system (2026-10-05). Loaded after home.css +
   help.css (hc-*). Only what this page alone has: the sliding topic bar,
   the question cards, the live count. Scoped to .fqp. Gold leads, no glows,
   logical properties, reduced-motion safe. Motion: faqs.js (CSSOM only).
   ══════════════════════════════════════════════════════════════════════════ */
.fqp-hero{ padding-block-end:clamp(28px,3.5vw,44px); }
.fqp-search{ position:relative; }
.hc-search .fqp-clear{ padding:0; } .fqp-clear{ flex:none; width:40px; height:40px; display:none; place-items:center; border:0; border-radius:12px; cursor:pointer; color:var(--hc-muted); background:var(--hc-surface-2); }
.fqp-clear svg{ width:16px; height:16px; }
.fqp-clear.is-visible{ display:grid; }
.hc-search .fqp-clear{ color:var(--hc-muted); background:var(--hc-surface-2); }
.hc-search .fqp-clear:hover{ transform:none; color:var(--hc-text); background:var(--hc-border); }

/* ── the topic bar: a gold pill slides under the chosen tab ── */
.fqp-bar-wrap{ position:sticky; top:calc(var(--em-nav-h,72px) + 10px); z-index:5; padding-block:6px; }
.fqp-bar{ position:relative; display:flex; gap:4px; width:max-content; max-width:100%; margin-inline:auto; padding:6px; overflow-x:auto; scrollbar-width:none;
  border-radius:20px; background:color-mix(in srgb,var(--hc-surface) 92%,transparent); border:1px solid var(--hc-border);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.fqp-bar::-webkit-scrollbar{ display:none; }
.fqp-bar__pill{ position:absolute; z-index:0; inset-block:6px; left:0; width:0; border-radius:14px; background:var(--hc-accent);
  transform:translateX(var(--fqp-x,0px)); width:var(--fqp-w,0px); transition:transform .45s cubic-bezier(.2,.9,.3,1.1), width .45s cubic-bezier(.2,.9,.3,1.1); }
.fqp-bar.is-instant .fqp-bar__pill{ transition:none; }
.fqp-tab{ position:relative; z-index:1; flex:none; display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border:0; border-radius:14px; cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:800; white-space:nowrap; color:var(--hc-text-2); background:transparent; transition:color .3s; }
.fqp-tab svg{ width:16px; height:16px; color:var(--hc-accent); transition:color .3s; }
.fqp-tab:hover{ color:var(--hc-text); }
.fqp-tab.is-active, .fqp-tab.is-active svg{ color:var(--hc-ink); }
.fqp-tab__n{ min-width:22px; padding:1px 7px; border-radius:99px; font-size:11.5px; text-align:center; color:var(--hc-muted); background:var(--hc-surface-2); transition:background-color .3s, color .3s; }
.fqp-tab.is-active .fqp-tab__n{ color:var(--hc-ink); background:rgba(255,255,255,.4); }

/* ── the questions ── */
.fqp-body{ padding-block:clamp(24px,3vw,40px) clamp(24px,4vw,48px); }
.fqp-count{ max-width:880px; margin:0 auto 14px; font-size:13.5px; font-weight:700; color:var(--hc-muted); }
.fqp-list{ max-width:880px; margin-inline:auto; display:grid; gap:12px; }
.fqp-item{ border-radius:22px; background:var(--hc-surface); border:1px solid var(--hc-border); transition:border-color .3s, transform .35s cubic-bezier(.2,.8,.2,1);
  animation:fqp-in .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fqp-in{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.fqp-item:hover{ border-color:color-mix(in srgb,var(--hc-accent) 40%,var(--hc-border)); }
.fqp-item.is-open{ border-color:color-mix(in srgb,var(--hc-accent) 60%,var(--hc-border)); }
.fqp-item[hidden]{ display:none; }
.fqp-q{ width:100%; display:flex; align-items:center; gap:16px; padding:18px 20px; border:0; background:none; cursor:pointer; font:inherit; color:inherit; text-align:start; }
.fqp-q:focus-visible{ outline:2px solid var(--hc-accent); outline-offset:-2px; border-radius:22px; }
.fqp-q__ico{ width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:14px; color:var(--hc-accent); background:var(--hc-accent-soft); transition:background-color .3s, color .3s, transform .45s cubic-bezier(.2,.9,.3,1.4); }
.fqp-q__ico svg{ width:20px; height:20px; }
.fqp-item.is-open .fqp-q__ico{ color:var(--hc-ink); background:var(--hc-accent); transform:rotate(-8deg); }
.fqp-q__txt{ flex:1; min-width:0; display:grid; gap:4px; }
.fqp-q__chip{ justify-self:start; padding:2px 9px; border-radius:99px; font-size:11.5px; font-weight:800; color:var(--hc-accent); background:var(--hc-accent-soft); }
.fqp[data-current-tab]:not([data-current-tab="all"]) .fqp-q__chip{ display:none; }
.fqp-q__t{ font-size:clamp(14.5px,1.08vw,15px); font-weight:800; line-height:1.6; }
.fqp-q__t mark{ padding:0 2px; border-radius:4px; color:inherit; background:color-mix(in srgb,var(--hc-accent) 35%,transparent); }
/* a plus that turns into a minus */
.fqp-q__plus{ position:relative; width:34px; height:34px; flex:none; border-radius:50%; border:1px solid var(--hc-border); transition:border-color .3s, background-color .3s, transform .4s cubic-bezier(.2,.9,.3,1.3); }
.fqp-q__plus i{ position:absolute; inset-block-start:50%; inset-inline-start:50%; width:12px; height:2px; margin:-1px 0 0 -6px; border-radius:2px; background:var(--hc-text-2); transition:transform .35s, background-color .3s; }
.fqp-q__plus i + i{ transform:rotate(90deg); }
.fqp-item.is-open .fqp-q__plus{ border-color:var(--hc-accent); background:var(--hc-accent-soft); transform:rotate(180deg); }
.fqp-item.is-open .fqp-q__plus i{ background:var(--hc-accent); }
.fqp-item.is-open .fqp-q__plus i + i{ transform:rotate(0deg); }
/* the answer opens smoothly (grid rows 0fr → 1fr) */
.fqp-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1); }
.fqp-item.is-open .fqp-a{ grid-template-rows:1fr; }
.fqp-a__in{ overflow:hidden; min-height:0; }
.fqp-a__in p{ position:relative; margin:0 20px 20px; padding:16px 20px; border-radius:16px; font-size:14.5px; line-height:1.95; color:var(--hc-text-2);
  background:color-mix(in srgb,var(--hc-accent) 6%,var(--hc-surface-2)); border-inline-start:3px solid var(--hc-accent);
  opacity:0; transform:translateY(-6px); transition:opacity .35s .05s, transform .4s .05s cubic-bezier(.2,.8,.2,1); }
.fqp-item.is-open .fqp-a__in p{ opacity:1; transform:none; }
.fqp-empty{ max-width:880px; margin:12px auto 0; }
.fqp-empty[hidden]{ display:none; }

@media (max-width:560px){
  .fqp-bar{ width:100%; } .fqp-tab{ padding:9px 12px; font-size:13px; }
  .fqp-q{ gap:12px; padding:16px; } .fqp-q__ico{ width:40px; height:40px; } .fqp-a__in p{ margin:0 14px 14px; }
}
@media (prefers-reduced-motion: reduce){ .fqp *, .fqp *::before, .fqp *::after{ animation:none!important; transition:none!important; } }