/* =========================================================================
   Knowledge Center — public FAQ hub (resources/faq.html)
   -------------------------------------------------------------------------
   Full-width editorial masthead (with the "Ask an AI" CTAs) across the top;
   a sticky category rail + the answer content drop below it. The premium
   surface language is borrowed verbatim from the Insights hub: a soft lavender
   canvas, white cards floating on it with layered shadows, pill controls, a
   cool brand aurora, and a warm purple-navy ink palette. Its own --faqx-* token
   set (light + dark), scoped to .faqx and re-pointed under html[data-theme=dark].

   CSP: all styling here (PUBLIC_CSP strips inline <style>); behavior in
   js/public/faq/faq.js and js/public/faq/faq_ask.js.
   ========================================================================= */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Sticky fix — `.body-wrap` has overflow:hidden which kills position:sticky
   for the rail; `overflow: clip` clips identically without a scroll container. */
.body-wrap { overflow: clip !important; overflow-x: clip !important; overflow-y: clip !important; }

/* ---- Palette (mirrors the Insights hub's --cni-* set) ------------------
   Scoped to .faqx AND .faqx-askmodal: the modal is rendered OUTSIDE the .faqx
   section (it is position:fixed and lives after </section>), so without this it
   inherits none of these tokens and its panel/border/ink resolve to nothing —
   the dialog renders see-through over the page. */
.faqx,
.faqx-askmodal {
    --faqx-indigo: #6366f1;
    --faqx-indigo-deep: #4f46e5;
    --faqx-title: #0f172a;
    --faqx-ink: #2c2a4d;
    --faqx-ink-soft: #4a4866;
    --faqx-muted: #6f6d8a;
    --faqx-border: #e4e2f2;
    --faqx-border-strong: #cfcceb;
    --faqx-card: #ffffff;
    --faqx-page: #f5f5fb;
    --faqx-frost: rgba(245, 245, 251, 0.82);
    --faqx-lilac: rgba(99, 102, 241, 0.10);
    --faqx-open-tint: color-mix(in srgb, var(--faqx-indigo) 6%, var(--faqx-card));
    --faqx-row-hover: color-mix(in srgb, var(--faqx-ink) 4%, var(--faqx-card));
    --faqx-card-shadow: 0 1px 2px rgba(28, 26, 54, 0.045), 0 14px 34px -16px rgba(28, 26, 54, 0.12);
    --faqx-radius: 16px;
    --faqx-radius-sm: 12px;
    --faqx-pill: 999px;
}
html[data-theme="dark"] .faqx,
html[data-theme="dark"] .faqx-askmodal {
    --faqx-indigo: #818cf8;
    --faqx-indigo-deep: #a5b4fc;
    --faqx-title: #f4f6fb;
    --faqx-ink: #e8eaf3;
    --faqx-ink-soft: #c3c6d6;
    --faqx-muted: #9aa0b8;
    --faqx-border: #1e2233;
    --faqx-border-strong: #333b55;
    --faqx-card: #0c0f1a;
    --faqx-page: var(--main-bg-color);
    --faqx-frost: rgba(10, 12, 20, 0.86);
    --faqx-lilac: rgba(129, 140, 248, 0.16);
    --faqx-card-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 36px -16px rgba(0, 0, 0, 0.62);
}

/* ---- Shell + aurora ---------------------------------------------------- */

.faqx {
    background: var(--faqx-page);
    color: var(--faqx-ink);
    padding: 5rem 0 7rem;
    min-height: 100vh;
    position: relative;
    overflow-x: clip;
}

/* Cool brand aurora, anchored top-right and kept off the headline (same
   treatment as the Insights hub + /pricing/). */
.faqx::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(60% 50% at 104% -8%, color-mix(in srgb, var(--blurple) 12%, transparent) 0%, transparent 60%),
        radial-gradient(48% 44% at 88% 40%, color-mix(in srgb, var(--indigo) 6%, transparent) 0%, transparent 68%);
}

.faqx-shell-inner {
    position: relative;
    z-index: 1;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 2rem;
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    /* column-gap only: the full-width masthead sits in row 1 and a shared `gap`
       would add the same 5rem as dead space above the rail + content. */
    column-gap: 5rem;
    row-gap: 0;
    align-items: start;
}

/* ---- Masthead: full-width header across the top ----------------------- */

.faqx-head {
    grid-column: 1 / -1;
    margin: 0 0 2.5rem;
    padding-bottom: 1.9rem;
    border-bottom: 1px solid var(--faqx-border);
}

.faqx-eyebrow {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--faqx-indigo-deep);
    margin: 0 0 0.7rem;
}

.faqx-h1 {
    font-family: var(--brand-font);
    font-size: clamp(1.9rem, 4.2vw, 2.7rem);
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin: 0;
    color: var(--faqx-title);
}

.faqx-lede {
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--faqx-ink-soft);
    margin: 0.85rem 0 0;
    max-width: 580px;
}

/* ---- Ask-an-AI action row (pill chips) ------------------------------- */
.faqx-ai-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 1.5rem;
}
.faqx-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    box-sizing: border-box;
    padding: 0 18px;
    font-family: var(--font-main);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none !important;
    border-radius: var(--faqx-pill);
    /* Calm flat chip, matching the Insights hub's Follow control (a.cn-ins-chip):
       transparent fill and a hairline that warms to indigo on hover. A solid
       card fill made this read as a second primary and competed with the
       content behind it — it is a secondary action and should sit back. */
    border: 1px solid var(--faqx-border-strong);
    background: transparent;
    color: var(--faqx-ink-soft);
    transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.faqx-ai-btn-icon { width: 16px; height: 16px; flex-shrink: 0; }
.faqx-ai-btn:hover { border-color: var(--faqx-indigo); color: var(--faqx-indigo-deep); }
.faqx-ai-btn:focus-visible { outline: 2px solid var(--faqx-indigo-deep); outline-offset: 2px; }
.faqx-ai-btn--primary {
    color: #fff !important;
    background: linear-gradient(135deg, var(--faqx-indigo), var(--faqx-indigo-deep));
    border-color: transparent;
    box-shadow: 0 10px 24px -10px rgba(79, 70, 229, .6);
}
.faqx-ai-btn--primary:hover { color: #fff !important; border-color: transparent; transform: translateY(-1px); }

/* ---- Sticky category rail --------------------------------------------- */

/* padding-top matches `.faqx-controls`' own padding-top (1rem) so the rail's
   first row and the search field begin on exactly the same line — see the
   .faqx-rail-title height note below. */
.faqx-rail {
    position: sticky;
    /* Same 60px offset the control bar sticks at (the fixed site header's
       height). Both columns then carry an identical 1rem top padding, so the
       rail label and the search field stay on one line PINNED as well as at
       rest — sticking the rail lower (6rem) dropped it 60px once scrolled. */
    top: 60px;
    align-self: start;
    max-height: calc(100vh - 5rem);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem 0.25rem 1rem 0;
    scrollbar-width: none;
}
.faqx-rail::-webkit-scrollbar { display: none; }

/* Height is pinned to the search field's 46px and the label is flex-centred in
   it, so the rail header and the search control share one optical centre line
   instead of floating 15px apart. */
.faqx-rail-title {
    display: flex;
    align-items: center;
    height: 46px;
    box-sizing: border-box;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--faqx-muted);
    margin: 0 0 0.55rem 0.95rem;
}

/* A hairline guide runs down the rail; the active link marks it with an indigo
   segment (classic premium docs-nav), and the whole set keeps a tight rhythm. */
.faqx-rail-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    border-left: 1px solid var(--faqx-border);
}

.faqx-rail-link {
    display: block;
    position: relative;
    margin-left: -1px;
    padding: 0.44rem 0.9rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--faqx-muted);
    text-decoration: none !important;
    border-left: 2px solid transparent;
    border-radius: 0 8px 8px 0;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.faqx-rail-link:hover { color: var(--faqx-ink); background: var(--faqx-row-hover); border-left-color: var(--faqx-border-strong); }
.faqx-rail-link.is-active {
    font-weight: 600;
    color: var(--faqx-indigo-deep);
    background: var(--faqx-lilac);
    border-left-color: var(--faqx-indigo);
}
.faqx-rail-link.is-empty { opacity: 0.35; pointer-events: none; }

/* ---- Main column ------------------------------------------------------- */

/* No padding-top: the sticky control bar supplies the column's top spacing
   (its own 1rem), and the rail matches that exactly, so both columns align. */
.faqx-main { min-width: 0; padding-top: 0; }

/* ---- Sticky control bar: search + expand/collapse all -----------------
   Parks under the 60px fixed site header. Opaque so answer cards scroll UNDER
   it; the negative side margins bleed the background past the column edges. */

.faqx-controls {
    position: sticky;
    top: 60px;
    z-index: 6;
    margin: 0 -1rem 1.7rem;
    padding: 1rem 1rem 0.6rem;
    /* Transparent at rest so the page aurora reads straight through the toolbar
       (its empty right side no longer punches a flat hole in the gradient).
       Turns opaque only once pinned — exactly when answers scroll under it. */
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.faqx-controls.is-pinned {
    /* Frosted glass once pinned: a high-alpha fill (content behind is heavily
       blurred, never legibly scrolling through) plus a saturated backdrop blur —
       the premium sticky-bar treatment the Insights hub uses. */
    background: var(--faqx-frost);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    border-bottom-color: var(--faqx-border);
    box-shadow: 0 14px 34px -24px rgba(28, 26, 54, 0.45);
}

.faqx-controls-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.faqx-search { position: relative; flex: 1 1 auto; min-width: 0; max-width: 520px; }

.faqx-search-icon {
    position: absolute;
    left: 1.05rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--faqx-muted);
    pointer-events: none;
}

/* Pill field, matching the Insights search. */
.faqx-search-input {
    width: 100%;
    height: 46px;
    box-sizing: border-box;
    padding: 0 1rem 0 2.7rem;
    font-family: var(--font-main);
    font-size: 0.9rem;
    color: var(--faqx-ink);
    background: var(--faqx-card);
    border: 1px solid var(--faqx-border-strong);
    border-radius: var(--faqx-pill);
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.faqx-search-input::placeholder { color: var(--faqx-muted); }
.faqx-search-input:focus {
    border-color: var(--faqx-indigo);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--faqx-indigo) 16%, transparent);
}
.faqx-search-input::-webkit-search-decoration,
.faqx-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.faqx-search-clear {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--faqx-muted);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
.faqx-search-clear:hover { color: var(--faqx-ink); background: var(--faqx-row-hover); }
.faqx.is-searching .faqx-search-clear { display: inline-flex; }
.faqx.is-searching .faqx-search-input { padding-right: 2.7rem; }

/* Expand / collapse all — quiet pill, same height as the search. */
.faqx-expandall {
    flex-shrink: 0;
    height: 46px;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0 1.1rem;
    font-family: var(--font-main);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--faqx-ink-soft);
    background: var(--faqx-card);
    border: 1px solid var(--faqx-border-strong);
    border-radius: var(--faqx-pill);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.faqx-expandall:hover { color: var(--faqx-indigo-deep); border-color: var(--faqx-indigo); background: var(--faqx-open-tint); }
.faqx-expandall:focus-visible { outline: 2px solid var(--faqx-indigo-deep); outline-offset: 2px; }

.faqx-expandall-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: 0.7;
    transition: transform 0.28s ease, opacity 0.15s ease;
}
.faqx-expandall:hover .faqx-expandall-icon { opacity: 1; }
.faqx-expandall[aria-expanded="true"] .faqx-expandall-icon { transform: rotate(180deg); opacity: 1; }

.faqx-searchmeta {
    min-height: 1rem;
    margin: 0.55rem 0 0;
    font-size: 0.8rem;
    color: var(--faqx-muted);
}
.faqx-searchmeta b { color: var(--faqx-indigo-deep); font-weight: 700; }

/* ---- Categories: eyebrow + elevated card of questions ----------------- */

.faqx-cat { margin: 0 0 2.25rem; scroll-margin-top: 11rem; }
.faqx-cat:last-of-type { margin-bottom: 0; }
.faqx-cat.is-empty { display: none; }

.faqx-cat-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--faqx-indigo-deep);
    margin: 0 0 0.7rem 0.15rem;
}

/* The card. overflow:hidden clips the full-bleed row hover + open tint to the
   radius; focus rings are inset so nothing important gets clipped. */
.faqx-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--faqx-card);
    border: 1px solid var(--faqx-border);
    border-radius: var(--faqx-radius);
    box-shadow: var(--faqx-card-shadow);
    overflow: hidden;
}

.faqx-item { scroll-margin-top: 11rem; position: relative; transition: background 0.15s ease; }
.faqx-item + .faqx-item { border-top: 1px solid var(--faqx-border); }
.faqx-item.is-empty { display: none; }
.faqx-item:not(.is-open):hover { background: var(--faqx-row-hover); }
.faqx-item.is-open { background: var(--faqx-open-tint); box-shadow: inset 3px 0 0 var(--faqx-indigo); }

.faqx-q {
    width: 100%;
    box-sizing: border-box;
    scroll-margin-top: 11rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.05rem 1.35rem;
    text-align: left;
    background: none;
    border: none;
    font-family: var(--font-main);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--faqx-title);
    cursor: pointer;
    transition: color 0.15s ease;
}
.faqx-q:hover { color: var(--faqx-indigo-deep); }
.faqx-q:focus-visible { outline: 2px solid var(--faqx-indigo-deep); outline-offset: -2px; border-radius: 4px; }
.faqx-item.is-open .faqx-q { color: var(--faqx-indigo-deep); }

.faqx-q-text { flex: 1; }

.faqx-q-chevron {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    margin-top: 0.15rem;
    color: currentColor;
    opacity: 0.5;
    transition: transform 0.28s ease, opacity 0.15s ease;
}
.faqx-item.is-open .faqx-q-chevron { transform: rotate(180deg); opacity: 1; }

.faqx-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
@media (prefers-reduced-motion: reduce) { .faqx-a { transition: none; } }

.faqx-a-inner { padding: 0 1.35rem 1.35rem; }

.faqx-a-inner p {
    font-size: 0.94rem;
    line-height: 1.72;
    color: var(--faqx-ink-soft);
    margin: 0 0 0.8rem;
}
.faqx-a-inner p:last-child { margin-bottom: 0; }
.faqx-a-inner strong, .faqx-a-inner b { color: var(--faqx-title); font-weight: 700; }

.faqx-a-inner ul, .faqx-a-inner ol { margin: 0 0 0.85rem; padding-left: 1.15rem; }
.faqx-a-inner li {
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--faqx-ink-soft);
    margin: 0 0 0.4rem;
}
.faqx-a-inner li::marker { color: var(--faqx-indigo); }

.faqx-a-inner a {
    color: var(--faqx-indigo-deep);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--faqx-indigo) 40%, transparent);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: text-decoration-color 0.18s ease;
}
.faqx-a-inner a:hover { text-decoration-color: var(--faqx-indigo); }

.faqx-hl { background: color-mix(in srgb, var(--faqx-indigo) 22%, transparent); border-radius: 3px; padding: 0 1px; color: inherit; }

/* ---- Empty state ------------------------------------------------------- */

.faqx-empty { display: none; padding: 2.5rem 0; }
.faqx.is-noresults .faqx-empty { display: block; }
.faqx-empty-title { font-size: 1.02rem; font-weight: 700; color: var(--faqx-title); margin: 0 0 0.4rem; }
.faqx-empty-text { font-size: 0.92rem; line-height: 1.6; color: var(--faqx-muted); margin: 0; }
.faqx-empty-query { color: var(--faqx-indigo-deep); font-weight: 600; }
.faqx-empty-text a { color: var(--faqx-indigo-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Closing CTA — an elevated panel to match the cards --------------- */

.faqx-cta {
    margin: 4rem 0 0;
    padding: 2rem 2rem 2.1rem;
    background: var(--faqx-card);
    border: 1px solid var(--faqx-border);
    border-radius: var(--faqx-radius);
    box-shadow: var(--faqx-card-shadow);
}
.faqx-cta-title { font-family: var(--brand-font); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; color: var(--faqx-title); margin: 0 0 0.5rem; }
.faqx-cta-text { font-size: 0.94rem; line-height: 1.55; color: var(--faqx-muted); margin: 0 0 1.4rem; max-width: 460px; }
.faqx-cta-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }

.faqx-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.72rem 1.4rem;
    /* Reset the UA <button> border: the copy button is a <button>, and without
       this its default border traces a hard outline over the gradient fill. */
    border: none;
    border-radius: var(--faqx-pill);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
.faqx-btn svg { width: 15px; height: 15px; }
.faqx-btn-primary { color: #fff !important; background: linear-gradient(135deg, var(--faqx-indigo), var(--faqx-indigo-deep)); box-shadow: 0 10px 24px -10px rgba(79, 70, 229, .55); }
.faqx-btn-primary:hover { transform: translateY(-1px); opacity: 0.95; }
.faqx-btn-ghost { color: var(--faqx-ink) !important; background: var(--faqx-card); border: 1px solid var(--faqx-border-strong); }
.faqx-btn-ghost:hover { border-color: var(--faqx-indigo); color: var(--faqx-indigo-deep) !important; }

/* ---- Ask-other-AI modal ----------------------------------------------- */

.faqx-askmodal[hidden] { display: none; }
.faqx-askmodal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.faqx-askmodal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 16, 34, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: faqxFade 0.18s ease both;
}
.faqx-askmodal-panel {
    position: relative;
    width: 100%;
    max-width: 560px;
    box-sizing: border-box;
    padding: 1.9rem 1.9rem 1.6rem;
    background: var(--faqx-card);
    border: 1px solid var(--faqx-border);
    border-radius: 18px;
    box-shadow: 0 24px 60px -18px rgba(15, 16, 34, 0.5);
    animation: faqxPop 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.faqx-askmodal-x {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--faqx-muted);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}
.faqx-askmodal-x svg { width: 18px; height: 18px; }
.faqx-askmodal-x:hover { color: var(--faqx-ink); background: var(--faqx-row-hover); }
.faqx-askmodal-title {
    font-family: var(--brand-font);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--faqx-title);
    margin: 0 2rem 0.5rem 0;
}
.faqx-askmodal-desc {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--faqx-muted);
    margin: 0 0 1.1rem;
}
.faqx-askmodal-prompt {
    margin: 0 0 1.3rem;
    padding: 1rem 1.1rem;
    max-height: 240px;
    overflow: auto;
    background: var(--faqx-page);
    border: 1px solid var(--faqx-border);
    border-radius: 12px;
    font-family: var(--font-main);
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--faqx-ink);
    white-space: pre-wrap;
    word-break: break-word;
}
.faqx-askmodal-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.faqx-askmodal-actions .faqx-btn { cursor: pointer; }
/* The dialog is focused on open (a11y) but must show no ring; buttons get a
   clean branded ring for keyboard users only. */
.faqx-askmodal-panel:focus { outline: none; }
.faqx-btn:focus-visible { outline: 2px solid var(--faqx-indigo-deep); outline-offset: 3px; }

/* Copy → Copied: swap the icon for a check and go green (faq_ask.js toggles
   .is-copied for ~2s). */
.faqx-btn-check { display: none; }
.faqx-btn.is-copied .faqx-btn-copy { display: none; }
.faqx-btn.is-copied .faqx-btn-check { display: inline-block; }
.faqx-btn-primary.is-copied {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    box-shadow: 0 10px 24px -10px rgba(22, 163, 74, 0.5);
}
.faqx-btn-primary.is-copied:hover { transform: none; opacity: 1; }

@keyframes faqxFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes faqxPop {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .faqx-askmodal-backdrop, .faqx-askmodal-panel { animation: none; }
}

/* ---- Responsive -------------------------------------------------------- */

@media (max-width: 820px) {
    .faqx { padding: 3.5rem 0 5rem; }
    .faqx-shell-inner { grid-template-columns: 1fr; padding: 0 1.25rem; }
    .faqx-rail { display: none; }
    .faqx-main { max-width: 640px; margin: 0 auto; }
    .faqx-head { max-width: 640px; margin-left: auto; margin-right: auto; }
    .faqx-controls { margin-left: -1.25rem; margin-right: -1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; }
}

@media (max-width: 520px) {
    .faqx-h1 { font-size: 1.9rem; }
    .faqx-search { max-width: 100%; }
    .faqx-q { font-size: 0.95rem; padding-left: 1.1rem; padding-right: 1.1rem; }
    .faqx-a-inner { padding-left: 1.1rem; padding-right: 1.1rem; }
    .faqx-cta { padding: 1.6rem 1.4rem; }
    .faqx-cta-actions { flex-direction: column; align-items: flex-start; }
    .faqx-expandall { padding: 0 0.85rem; }
    .faqx-expandall-text { display: none; }
    .faqx-expandall-icon { width: 17px; height: 17px; }
}

@media (max-width: 380px) {
    .faqx-controls-row { flex-wrap: wrap; row-gap: 0.5rem; }
    .faqx-search { flex: 1 1 100%; max-width: 100%; }
    .faqx-expandall { margin-left: auto; }
}