.faqx{
  --fq-line:var(--v2-line,#e7eaf1);
  --fq-ink:var(--v2-ink,#0F0F12);
  --fq-muted:var(--v2-muted,#4A4A5A);
  --fq-card:#fff;
  --fq-blue:var(--v2-accent,#3680ED);
  --fq-ink-blue:#2060C0;    /* the accent as TEXT and as the mark's bars */
  --fq-fill-blue:#2060C0;   /* the accent as a FILL — white sits on it */
  --fq-tint:#EAF2FD;
  --fq-line-blue:rgba(54,128,237,.26);
  --fq-glow:0 20px 44px -30px rgba(54,128,237,.85);
  --fq-spine1:var(--v2-accent,#3680ED); --fq-spine2:#2060C0;
  --fq-e:cubic-bezier(.22,.61,.36,1);
}
body.theme-dark .faqx{
  --fq-card:var(--dk-surface-2,#17171B);
  --fq-tint:rgba(54,128,237,.16);
  --fq-line-blue:rgba(96,164,245,.30);
  /* #2060C0 as ink on a #171922 card is 2.92:1; as a fill under white it
     is 6.01:1. The two uses cannot share a value here. */
  --fq-ink-blue:#9DC8FF;
  /* the spine likewise: #2060C0 is 2.92:1 on this card, so the bar's lower
     half disappeared. #60A4F5 -> #3680ED measures 6.78 / 4.56. */
  --fq-spine1:#60A4F5; --fq-spine2:#3680ED;
  /* The open glow is REMOVED in dark rather than re-tinted: a blue bloom under
     a near-black card reads as a rendering fault, not as depth. */
  --fq-glow:none;
}

/* ── Heading ──────────────────────────────────────────────────────────────
   `.v2x .v2-section-title i{color:var(--brand-blue)}` only ever matched an <i>.
   The heading icon is an <svg>, so the kit colours it — and on the tool page
   §SPINE-BLUE turns that same svg into a gradient tile, which still wins.
   (A question-count badge lived here and was removed on request: it restated a
   figure the list below it already shows.) ─────────────────────────────── */
.faqx .v2-section-title > svg:first-child{ color:var(--fq-blue); }

/* ── The list ─────────────────────────────────────────────────────────── */
.faqx-list{ display:grid; gap:12px; }
.faqx-item{
  position:relative; border:1px solid var(--fq-line); border-radius:18px;
  background:var(--fq-card);
  transition:border-color .22s var(--fq-e), box-shadow .22s var(--fq-e),
             transform .22s var(--fq-e), background-color .22s var(--fq-e);
}
/* The accent spine. Height 0 at rest, a short preview on hover, full while
   open — one property doing all three states, so they cannot disagree. */
.faqx-item::before{
  content:""; position:absolute; inset-inline-start:0; top:16px;
  width:3px; height:0; border-radius:0 3px 3px 0;
  background:linear-gradient(180deg, var(--fq-spine1), var(--fq-spine2));
  transition:height .3s var(--fq-e);
}
.faqx-item[open]{
  border-color:var(--fq-line-blue);
  background:linear-gradient(180deg, var(--fq-tint) 0%, var(--fq-card) 42%);
  box-shadow:var(--fq-glow);
}
.faqx-item[open]::before{ height:calc(100% - 32px); }

/* ── Question row ─────────────────────────────────────────────────────── */
.faqx-item > summary{
  list-style:none; cursor:pointer; -webkit-user-select:none; user-select:none;
  display:flex; align-items:center; gap:16px;
  min-height:60px; padding:18px 20px; border-radius:18px;
}
.faqx-item > summary::-webkit-details-marker{ display:none; }
.faqx-item > summary::marker{ content:""; }
.faqx-item > summary:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(54,128,237,.34);
}
.faqx .faqx-item h3.faqx-q{
  flex:1 1 auto; min-width:0; margin:0;
  font-family:var(--font-body, inherit);
  font-size:clamp(.98rem, .94rem + .22vw, 1.08rem);
  font-weight:700; line-height:1.45; letter-spacing:-.014em;
  color:var(--fq-ink); overflow-wrap:anywhere;
  transition:color .2s var(--fq-e);
}
/* The mark is drawn, not iconed: two currentColor bars over a tinted plate, so
   rotating 135° turns + into × with nothing to load and nothing to swap. */
.faqx-mark{
  flex:none; width:32px; height:32px; border-radius:10px;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat,
    var(--fq-tint);
  color:var(--fq-ink-blue);
  transition:transform .3s cubic-bezier(.4,0,.2,1), background-color .22s var(--fq-e),
             color .22s var(--fq-e), box-shadow .22s var(--fq-e);
}
.faqx-item[open] .faqx-mark{
  transform:rotate(135deg);
  background:
    linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat,
    var(--fq-fill-blue);
  color:#fff;
  box-shadow:0 8px 18px -8px rgba(54,128,237,.9);
}
body.theme-dark .faqx-item[open] .faqx-mark{ box-shadow:none; }

/* ── Answer ───────────────────────────────────────────────────────────── */
.faqx-a{
  padding-block:0 18px; padding-inline:23px 20px;
  font-size:.95rem; line-height:1.72; color:var(--fq-muted);
  overflow-wrap:anywhere;
}
.faqx-a a{ color:var(--fq-ink-blue); font-weight:600; }

/* ── Hover. Gated behind a real pointer so it cannot stick after a tap —
      a `:hover` that survives a touch is the classic accordion bug. ────── */
@media (hover:hover) and (pointer:fine){
  .faqx-item:hover{
    border-color:var(--fq-line-blue);
    transform:translateY(-1px);
    box-shadow:0 2px 6px rgba(16,24,40,.05), 0 14px 30px -16px rgba(32,96,192,.34);
  }
  /* A preview of the spine: the same element, part-height, so opening reads as
     the bar completing rather than as a different thing appearing. */
  .faqx-item:not([open]):hover::before{ height:22px; }
  .faqx .faqx-item:hover h3.faqx-q{ color:var(--fq-ink-blue); }
  .faqx .faqx-item[open]:hover h3.faqx-q{ color:var(--fq-ink); }
  .faqx-item:not([open]):hover .faqx-mark{
    background:
      linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
      linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat,
      var(--fq-fill-blue);
    color:#fff;
    box-shadow:0 6px 14px -8px rgba(54,128,237,.8);
  }
  body.theme-dark .faqx-item:not([open]):hover .faqx-mark{ box-shadow:none; }
  body.theme-dark .faqx-item:hover{
    box-shadow:0 2px 6px rgba(0,0,0,.45), 0 14px 30px -16px rgba(0,0,0,.55);
  }
}
@media (prefers-reduced-motion:reduce){
  .faqx-item,.faqx-item::before,.faqx-mark,.faqx .faqx-item h3.faqx-q{ transition:none !important; }
  .faqx-item:hover{ transform:none; }
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width:575.98px){
  .faqx-item > summary{ gap:12px; padding:15px 15px; min-height:56px; }
  .faqx-item,.faqx-item > summary{ border-radius:15px; }
  .faqx-mark{ width:29px; height:29px; border-radius:9px; }
  .faqx-a{ padding-block:0 15px; padding-inline:18px 15px; font-size:.92rem; }
  .faqx-item[open]::before{ height:calc(100% - 26px); }
}