/* ============================================================================
   AIToolsay — /faq help-centre page kit (.aitfq-*)
   ----------------------------------------------------------------------------
   This is the PAGE. The shared in-page accordion is a different thing and stays
   where it is (.aitsq-* in faq.css) — every module still renders that one at the
   foot of its own page. This file is only ever loaded on /faq, via a
   route-gated <link> in layouts/public.blade.php, so none of it costs the rest
   of the site a byte.

   Namespace: every selector starts `.aitfq`. The page also carries `.aits-*`,
   `.aitshd-*`, `.aitsft-*`, `.hpx-*` and a Bootstrap/Tabler base, so a bare
   `.card`, `.list` or `.tab` here would collide with all of them.

   Colour comes from the global `--aits-*` tokens declared in custom.{dir}.css,
   so light/dark is INHERITED rather than re-declared. The exceptions are the
   coloured shadows and the mesh, which have no token and get explicit dark
   twins at the foot of the file — a blue glow that reads as depth on white
   reads as haze on near-black.

   Per-topic accent arrives as `--acc` / `--acc2` on the group, chip, tab and
   CTA card (set inline from the palette in the view). Everything tinted is
   expressed through those two, which is why one line in the Blade file
   recolours a whole topic.

   Two hard rules, both from bugs on this install:
     · NOTHING truncates. No line-clamp, no text-overflow:ellipsis, no fixed
       height on any box that holds copy. Long questions wrap.
     · Every hover state sits inside `@media (hover: hover)`. A tap on a touch
       screen latches :hover, so an un-gated lift stays lifted until the reader
       taps somewhere else.

   Direction-agnostic: logical properties throughout (inset-inline-*,
   margin-inline-*, padding-inline-*), so LTR and RTL share this one file.
   ========================================================================= */

.aitfq {
    --aitfq-ease: cubic-bezier(.22, 1, .36, 1);
    --aitfq-r: 20px;

    /* Fallbacks so the kit still renders if it is ever loaded on a page that
       has not declared the global tokens. */
    --acc:  var(--aits-blue, #3680ED);
    --acc2: var(--aits-blue-light, #60A4F5);

    /* Two more, both set inline beside the pair above. A tone and a tint of
       that tone share a luminance neighbourhood by construction, so the raw
       brand hue used as TEXT on its own 12% plate measures 3.1-3.8:1 - under
       the 4.5 bar for every accent except violet. --acc-fill is the same hue
       walked down in HSL until it clears 4.6:1 on that plate, and --acc-deep
       is the deeper end of any fill that carries white. Neither moves with the
       theme: white on --acc-fill has to hold up on both canvases.

       --acc-ink is the one that DOES move. By day it is --acc-fill; at night
       the pastel --acc2 is what reads on a near-black card (5.9-7.2:1), and the
       darkened light ink would not. See the DARK block at the foot. */
    --acc-fill: #1465DD;
    --acc-deep: #1054B7;
    --acc-ink:  var(--acc-fill);   /* see the four carriers below */

    position: relative;
    color: var(--aits-txt, #444);
    /* The page owns its own vertical rhythm; the layout's container is padding
       -free in fullWidth mode. */
    padding-bottom: 8px;
}

.aitfq *,
.aitfq *::before,
.aitfq *::after { box-sizing: border-box; }

.aitfq-wrap {
    width: 100%;
    max-width: var(--seo-shell-max, 1600px);
    margin-inline: auto;
    padding-left: max(var(--seo-shell-pad, 24px), env(safe-area-inset-left));
    padding-right: max(var(--seo-shell-pad, 24px), env(safe-area-inset-right));
}

/* Long single tokens — an API key, a URL, a German compound — must wrap rather
   than push the layout sideways. This is the anti-truncation rule's other half:
   nothing is clipped, so nothing may overflow either. */
.aitfq h1, .aitfq h2, .aitfq h3,
.aitfq p, .aitfq li, .aitfq strong, .aitfq span { overflow-wrap: break-word; }

/* ── No hover underlines ────────────────────────────────────────────────────
   Tabler's base sheet ships a bare `a:hover { text-decoration: underline }`
   (0,1,1). Setting `text-decoration: none` on a component class is (0,1,0) and
   loses to it, which is why the rail's "Still stuck?" card grew two underlines
   the moment the pointer touched it. These selectors carry the :hover weight
   themselves, so they win outright rather than by load order.

   Underline is not the affordance in this kit — colour, lift, spine growth and
   the sliding arrows are. The ONE exception is prose inside an answer, below:
   a link in a paragraph needs a cue that is not colour alone, and it carries
   that underline at rest, so nothing "appears" on hover there either. */
.aitfq a,
.aitfq a:hover,
.aitfq a:focus,
.aitfq a:active,
.aitfq a:hover strong,
.aitfq a:hover span { text-decoration: none; }

/* --acc-ink is derived from another custom property, and a custom property is
   substituted ON THE ELEMENT THAT DECLARES IT. Declared once on .aitfq it
   resolved against .aitfq's OWN --acc-fill - the blue fallback - and that one
   computed value then inherited into every topic, so the amber group printed a
   blue count and the pink CTA a blue link. Measured: all four tones came back
   rgb(20,101,221).

   So it is declared on each of the four elements the view sets --acc/--acc2 on
   inline. Every consumer of --acc-ink is a descendant of one of them, and each
   resolves against its own tone. Add a carrier here if the view ever sets the
   accent vars on a fifth element. */
.aitfq-jump-b,
.aitfq-tab,
.aitfq-group,
.aitfq-card { --acc-ink: var(--acc-fill); }

/* ══════════════════════════════ HERO ══════════════════════════════ */

.aitfq-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(48px, 7vw, 92px) clamp(40px, 5vw, 64px);
    background: linear-gradient(180deg,
        var(--aits-blue-tint-2, #F4F8FE) 0%,
        var(--aits-bg, #FAFAFA) 78%,
        var(--aits-bg, #FAFAFA) 100%);
    /* No border-bottom. The gradient already lands on the body colour, and a
       hairline across it drew a hard seam straight through the mesh — the band
       looked cropped rather than faded. */
}

.aitfq-hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* Mesh: four blurred radials rather than DOM orbs — one element, no layout. */
.aitfq-hero-mesh {
    position: absolute;
    inset: -18% -6% auto -6%;
    height: 130%;
    background:
        radial-gradient(34% 48% at 14% 22%, rgba(54, 128, 237, .42), transparent 66%),
        radial-gradient(30% 40% at 86% 14%, rgba(112, 72, 232, .34), transparent 66%),
        radial-gradient(28% 42% at 74% 88%, rgba(236, 72, 153, .20), transparent 68%),
        radial-gradient(26% 38% at 26% 86%, rgba(6, 182, 212, .20), transparent 68%);
    filter: blur(56px);
    opacity: .85;
}

.aitfq-hero-grid {
    position: absolute;
    inset: 0;
    opacity: .5;
    background-image:
        linear-gradient(rgba(54, 128, 237, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(54, 128, 237, .06) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse 1000px 420px at 50% 38%, #000 18%, transparent 74%);
            mask-image: radial-gradient(ellipse 1000px 420px at 50% 38%, #000 18%, transparent 74%);
}

.aitfq-hero-in { position: relative; z-index: 1; text-align: center; }

/* ── Breadcrumb ── */
.aitfq-crumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--aits-mut, #666);
}

.aitfq-crumb a {
    /* 12.5px type is an 18px box; WCAG 2.2 asks for 24. Padding rather than a
       min-height so the row does not grow and the crumbs stay on one line. */
    padding-block: 4px;
    color: var(--aits-mut, #666);
    text-decoration: none;
    transition: color .2s var(--aitfq-ease);
}

.aitfq-crumb [aria-current] { color: var(--aits-ink, #111); }

/* ── Eyebrow ── */
.aitfq-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    padding: 6px 14px 6px 6px;
    border-radius: 999px;
    background: var(--aits-card, #fff);
    border: 1px solid var(--aits-blue-line, #CFE0FA);
    box-shadow: 0 6px 18px -10px rgba(54, 128, 237, .55), inset 0 1px 0 rgba(255, 255, 255, .9);
    /* "Frequently Asked Questions" is a long label for an uppercase chip — the
       tracking is tight for that reason, and it drops again under 720px. It
       still wraps rather than overflowing if a translation is longer. */
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--aits-ink, #111);
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: center;
}

.aitfq-eyebrow-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    flex: none;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--aits-blue, #3680ED), var(--aits-cyan, #0196FD));
    box-shadow: 0 4px 12px -4px rgba(54, 128, 237, .7);
}

.aitfq-eyebrow-ic svg { width: 16px; height: 16px; }

/* .aitfq-eyebrow-n removed with the count badge — the total is already
   the number on the "All questions" tab. */

/* ── Headline ── */
.aitfq-h1 {
    margin: 0 0 16px;
    font-size: clamp(2.1rem, 1.35rem + 3.4vw, 3.9rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -.038em;
    color: var(--aits-ink, #111);
}

.aitfq-hl {
    background: linear-gradient(96deg, var(--aits-blue, #3680ED) 0%, var(--aits-cyan, #0196FD) 52%, #EC4899 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    /* Descenders on a clipped gradient get shaved at some sizes without this. */
    padding-inline-end: .06em;
}

.aitfq-lede {
    margin: 0 auto 30px;
    max-width: 62ch;
    font-size: clamp(1rem, .95rem + .28vw, 1.15rem);
    line-height: 1.66;
    color: var(--aits-mut, #666);
    text-wrap: pretty;
}

/* ══════════════════════════════ SEARCH ══════════════════════════════ */

.aitfq-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 660px;
    margin-inline: auto;
    padding: 8px 10px 8px 18px;
    border-radius: 999px;
    background: var(--aits-card, #fff);
    border: 1.5px solid var(--aits-line-strong, #DADADA);
    box-shadow: 0 18px 40px -26px rgba(15, 23, 42, .5), inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: border-color .22s var(--aitfq-ease), box-shadow .22s var(--aitfq-ease),
                transform .22s var(--aitfq-ease);
}

.aitfq-search:focus-within {
    border-color: var(--aits-blue, #3680ED);
    box-shadow: 0 0 0 5px var(--aits-focus, rgba(54, 128, 237, .28)),
                0 22px 46px -28px rgba(54, 128, 237, .8);
    transform: translateY(-1px);
}

.aitfq-search-ic {
    display: inline-flex;
    flex: none;
    color: var(--aits-blue, #3680ED);
    transition: transform .24s var(--aitfq-ease);
}

.aitfq-search-ic svg { width: 20px; height: 20px; }
.aitfq-search:focus-within .aitfq-search-ic { transform: scale(1.08); }

.aitfq-search-in {
    flex: 1 1 auto;
    min-width: 0;
    /* 16px minimum: anything smaller makes iOS Safari zoom the page on focus. */
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.4;
    padding-block: 12px;
    color: var(--aits-ink, #111);
    background: transparent;
    border: 0;
    outline: 0;
    /* WebKit's native clear button would sit next to ours. */
    -webkit-appearance: none;
            appearance: none;
}

.aitfq-search-in::-webkit-search-cancel-button,
.aitfq-search-in::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.aitfq-search-in::placeholder { color: var(--aits-mut, #666); font-weight: 500; }

.aitfq-search-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px; height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    color: var(--aits-mut, #666);
    background: var(--aits-surface-3, #F7F7F8);
    transition: background-color .2s var(--aitfq-ease), color .2s var(--aitfq-ease),
                transform .2s var(--aitfq-ease);
}

.aitfq-search-x svg { width: 14px; height: 14px; }
.aitfq-search-x[hidden] { display: none; }

.aitfq-kbd {
    flex: none;
    margin-inline-end: 6px;
    padding: 4px 9px;
    border-radius: 8px;
    background: var(--aits-surface-3, #F7F7F8);
    border: 1px solid var(--aits-line, #ECECEC);
    border-bottom-width: 2px;
    color: var(--aits-mut, #666);
    font: 700 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

.aitfq-count {
    min-height: 22px;
    margin: 12px 0 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--aits-blue-dark, #2060C0);
    font-variant-numeric: tabular-nums;
}

/* ══════════════════════════ TOPIC CHIPS (hero) ══════════════════════════ */

.aitfq-jump {
    display: flex;
    flex-wrap: wrap;                 /* wraps — never a horizontal scroller */
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}

.aitfq-jump-b {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border-radius: 14px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -.008em;
    color: var(--aits-ink, #111);
    background: var(--aits-card, #fff);
    border: 1px solid var(--aits-line, #ECECEC);
    box-shadow: 0 2px 6px -4px rgba(15, 23, 42, .3);
    transition: color .2s var(--aitfq-ease), background-color .2s var(--aitfq-ease),
                border-color .2s var(--aitfq-ease), box-shadow .24s var(--aitfq-ease),
                transform .24s var(--aitfq-ease);
}

.aitfq-jump-ic {
    display: inline-flex;
    flex: none;
    color: var(--acc-ink);
    transition: transform .26s var(--aitfq-ease);
}

.aitfq-jump-ic svg { width: 15px; height: 15px; }

.aitfq-jump-b em {
    font-style: normal;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--aits-surface-3, #F7F7F8);
    color: var(--aits-mut, #666);
    font-size: 11.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    transition: background-color .2s var(--aitfq-ease), color .2s var(--aitfq-ease);
}

.aitfq-jump-b.is-on {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--acc-deep) 0%, var(--acc-fill) 100%);
    box-shadow: 0 12px 24px -12px color-mix(in oklab, var(--acc) 78%, transparent);
}

.aitfq-jump-b.is-on .aitfq-jump-ic { color: #fff; }
.aitfq-jump-b.is-on em { background: rgba(255, 255, 255, .22); color: #fff; }

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfq-jump-b.is-on { box-shadow: 0 12px 24px -12px rgba(54, 128, 237, .8); }
}

/* ══════════════════════════════ BODY GRID ══════════════════════════════ */

.aitfq-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding-block: clamp(32px, 4.5vw, 56px) clamp(40px, 6vw, 72px);
}

/* The rail is furniture, and above the fold it would push the first answer off
   the screen on a phone. The hero chips already do its job there. */
.aitfq-rail { display: none; }

@media (min-width: 1080px) {
    .aitfq-body {
        grid-template-columns: minmax(248px, 296px) minmax(0, 1fr);
        gap: 40px;
        /* NOT align-items:start. That collapses each grid item to its own
           content height, and .aitfq-rail-in then has nothing to be sticky
           WITHIN - it scrolled off with the rest of the page. The wrapper is
           transparent, so stretching it costs nothing visually. */
        align-items: stretch;
    }

    .aitfq-rail { display: block; }

    /* 104px clears the sticky site header. */
    .aitfq-rail-in { position: sticky; top: 104px; }
}

/* ── Rail ──
   A real panel, not a bare list on the page background. The first version left
   the topic list floating with only the active row carrying a surface, which
   read as an unfinished sidebar rather than a designed one. */
.aitfq-rail-in {
    padding: 18px 16px;
    border-radius: 22px;
    background: linear-gradient(180deg,
        var(--aits-card, #fff) 0%,
        var(--aits-surface-2, #FAFAFA) 100%);
    border: 1px solid var(--aits-line, #ECECEC);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03), 0 18px 40px -30px rgba(15, 23, 42, .5);
}

.aitfq-rail-h {
    display: block;
    margin-bottom: 12px;
    padding-inline-start: 4px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--aits-mut, #666);
}

.aitfq-rail-nav { display: grid; gap: 4px; }

.aitfq-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 13px;
    cursor: pointer;
    text-align: start;
    font-family: inherit;
    background: transparent;
    color: var(--aits-txt, #444);
    transition: background-color .2s var(--aitfq-ease), color .2s var(--aitfq-ease),
                border-color .2s var(--aitfq-ease), transform .2s var(--aitfq-ease),
                box-shadow .22s var(--aitfq-ease);
}

/* Accent spine on the selected topic — the same language the open accordion row
   speaks, so the rail and the list read as one control. */
.aitfq-tab::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--acc) 0%, var(--acc2) 100%);
    transform: translateY(-50%);
    transition: height .28s var(--aitfq-ease);
}

.aitfq-tab.is-on::before { height: 22px; }

.aitfq-tab-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px; height: 30px;
    border-radius: 10px;
    color: var(--acc-ink);
    background: color-mix(in oklab, var(--acc) 12%, transparent);
    transition: background-color .2s var(--aitfq-ease), color .2s var(--aitfq-ease),
                transform .26s var(--aitfq-ease);
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfq-tab-ic { background: var(--aits-blue-tint, #EAF2FD); }
}

.aitfq-tab-ic svg { width: 16px; height: 16px; }

/* Wraps. A topic title is admin-editable copy and a two-line label is fine —
   an ellipsis on a navigation item is not. */
.aitfq-tab-tx {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.8px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.01em;
}

.aitfq-tab em {
    flex: none;
    font-style: normal;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--aits-mut, #666);
    font-variant-numeric: tabular-nums;
}

.aitfq-tab.is-on {
    background: var(--aits-card, #fff);
    border-color: var(--aits-line, #ECECEC);
    color: var(--aits-ink, #111);
    box-shadow: 0 10px 24px -18px rgba(15, 23, 42, .6);
}

.aitfq-tab.is-on .aitfq-tab-ic {
    color: #fff;
    background: linear-gradient(135deg, var(--acc-deep) 0%, var(--acc-fill) 100%);
}

.aitfq-tab.is-on em { color: var(--acc-ink); }

/* Expand / collapse as one segmented control rather than two loose pills — two
   opposite actions on the same list belong in the same object. */
.aitfq-rail-acts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 16px;
    border-radius: 13px;
    overflow: hidden;
    background: var(--aits-card, #fff);
    border: 1px solid var(--aits-line, #ECECEC);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

.aitfq-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    padding: 10px 6px;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -.005em;
    color: var(--aits-mut, #666);
    background: transparent;
    transition: color .2s var(--aitfq-ease), background-color .2s var(--aitfq-ease),
                transform .2s var(--aitfq-ease);
}

.aitfq-mini + .aitfq-mini { border-inline-start: 1px solid var(--aits-line, #ECECEC); }
.aitfq-mini svg { width: 13px; height: 13px; flex: none; }

.aitfq-rail-help {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 12px;
    padding: 14px 34px 14px 14px;   /* room for the chevron */
    padding-inline: 14px 34px;
    border-radius: 18px;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(150deg, var(--aits-blue-tint, #EAF2FD) 0%, var(--aits-blue-tint-2, #F4F8FE) 72%);
    border: 1px solid var(--aits-blue-line, #CFE0FA);
    transition: transform .24s var(--aitfq-ease), box-shadow .24s var(--aitfq-ease),
                border-color .24s var(--aitfq-ease);
}

/* Corner sheen — the detail that stops the card reading as a flat blue box. */
.aitfq-rail-help::before {
    content: '';
    position: absolute;
    inset: -40% -30% auto auto;
    width: 150px; height: 150px;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(54, 128, 237, .22) 0%, transparent 70%);
    opacity: .9;
}

/* Chevron drawn from two borders: crisp at any zoom, no glyph to go missing. */
.aitfq-rail-help::after {
    content: '';
    position: absolute;
    inset-inline-end: 15px;
    top: 50%;
    width: 7px; height: 7px;
    margin-top: -4px;
    border-inline-end: 2px solid var(--aits-blue-dark, #2060C0);
    border-block-start: 2px solid var(--aits-blue-dark, #2060C0);
    transform: rotate(45deg);
    opacity: .55;
    transition: transform .24s var(--aitfq-ease), opacity .24s var(--aitfq-ease);
}

/* The rotate is physical while the borders are logical, so RTL needs the other
   direction — the one place in this file that is not direction-agnostic. */
[dir="rtl"] .aitfq-rail-help::after { transform: rotate(-135deg); }

.aitfq-rail-help-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px; height: 36px;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, var(--aits-blue, #3680ED), var(--aits-blue-dark, #2060C0));
    box-shadow: 0 8px 18px -10px rgba(54, 128, 237, .9);
}

.aitfq-rail-help-ic svg { width: 17px; height: 17px; }

.aitfq-rail-help-tx { display: grid; gap: 3px; min-width: 0; }

/* Both colours stated: `.card a { color: inherit }` further up the cascade has
   made links colourless on this site before. */
.aitfq-rail-help-tx strong {
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--aits-ink, #111);
}

.aitfq-rail-help-tx span {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--aits-mut, #666);
}

/* ══════════════════════════════ GROUPS ══════════════════════════════ */

.aitfq-main { min-width: 0; display: grid; gap: 34px; }

.aitfq-group { min-width: 0; scroll-margin-top: 96px; }
.aitfq-group[hidden] { display: none; }

.aitfq-group-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    position: relative;
}

/* Tinted hairline that fades out, instead of a flat grey rule — it ties the
   heading to the icon tile above it. */
.aitfq-group-head::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--acc) 46%, transparent) 0%,
        var(--aits-line, #ECECEC) 38%,
        transparent 100%);
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfq-group-head::after {
        background: linear-gradient(90deg, var(--aits-blue-line, #CFE0FA) 0%, var(--aits-line, #ECECEC) 38%, transparent 100%);
    }
}

.aitfq-group-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 46px; height: 46px;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, var(--acc-deep) 0%, var(--acc-fill) 100%);
    box-shadow: 0 12px 26px -14px color-mix(in oklab, var(--acc) 85%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, .28);
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfq-group-ic { box-shadow: 0 12px 26px -14px rgba(54, 128, 237, .85), inset 0 1px 0 rgba(255, 255, 255, .28); }
}

.aitfq-group-ic svg { width: 22px; height: 22px; }

.aitfq-group-tx { flex: 1 1 auto; min-width: 0; }

.aitfq-group-h {
    margin: 0 0 4px;
    font-size: clamp(1.15rem, 1.05rem + .5vw, 1.5rem);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.024em;
    color: var(--aits-ink, #111);
}

.aitfq-group-sub {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--aits-mut, #666);
}

.aitfq-group-n {
    flex: none;
    align-self: flex-start;
    padding: 5px 11px;
    border-radius: 999px;
    background: color-mix(in oklab, var(--acc) 12%, transparent);
    color: var(--acc-ink);
    font-size: 12.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfq-group-n { background: var(--aits-blue-tint, #EAF2FD); color: var(--aits-blue-dark, #2060C0); }
}

/* ══════════════════════════════ ACCORDION ══════════════════════════════ */

.aitfq-list { display: grid; gap: 10px; }

.aitfq-item {
    position: relative;
    /* A #q-… deep link scrolls the row to the top of the viewport, where the
       sticky site header would otherwise be sitting on it. */
    scroll-margin-top: 96px;
    border: 1px solid var(--aits-line, #ECECEC);
    border-radius: var(--aitfq-r);
    background: var(--aits-card, #fff);
    /* Three layers, not one: a lit inner top edge so the row catches the page
       light like glass, a contact shadow to seat it, and a wide soft one for
       lift. A single flat border read as a wireframe next to the gradient icon
       tiles above it. */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .7),
        0 1px 2px rgba(15, 23, 42, .035),
        0 10px 26px -20px rgba(15, 23, 42, .45);
    transition: border-color .22s var(--aitfq-ease), box-shadow .24s var(--aitfq-ease),
                background-color .22s var(--aitfq-ease), transform .24s var(--aitfq-ease);
}

.aitfq-item[hidden] { display: none; }

/* Accent spine — grows on hover, stays full height while open. Logical inset
   so RTL needs no flipped copy of this file. */
.aitfq-item::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 18px;
    width: 3px;
    height: 0;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--acc) 0%, var(--acc2) 100%);
    transition: height .32s var(--aitfq-ease);
}

.aitfq-item[open] {
    border-color: color-mix(in oklab, var(--acc) 34%, var(--aits-line, #ECECEC));
    /* The open row lifts off the page: its own accent glow replaces the neutral
       one, and the top wash tints the header toward the topic colour. */
    background:
        linear-gradient(180deg, color-mix(in oklab, var(--acc) 5%, transparent) 0%, transparent 78px),
        var(--aits-card, #fff);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .8),
        0 26px 50px -34px color-mix(in oklab, var(--acc) 90%, transparent);
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfq-item[open] {
        border-color: var(--aits-blue-line, #CFE0FA);
        background: linear-gradient(180deg, var(--aits-blue-tint-2, #F4F8FE) 0%, var(--aits-card, #fff) 78px);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 26px 50px -34px rgba(54, 128, 237, .9);
    }
}

.aitfq-item[open]::before { height: calc(100% - 36px); }

/* A copied deep link lands here — a ring that says "this one". */
.aitfq-item.is-linked {
    border-color: var(--acc);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--acc) 18%, transparent);
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfq-item.is-linked { box-shadow: 0 0 0 4px var(--aits-focus, rgba(54, 128, 237, .28)); }
}

.aitfq-sum {
    list-style: none;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: var(--aitfq-r);
}

/* Both are needed: WebKit uses the pseudo-element, everyone else the marker. */
.aitfq-sum::-webkit-details-marker { display: none; }
.aitfq-sum::marker { content: ''; }

.aitfq-sum:focus-visible {
    outline: 2px solid var(--aits-blue, #3680ED);
    outline-offset: -3px;
    border-radius: var(--aitfq-r);
}

.aitfq-sum-dot {
    flex: none;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: color-mix(in oklab, var(--acc) 26%, transparent);
    transition: background-color .22s var(--aitfq-ease), transform .26s var(--aitfq-ease),
                box-shadow .26s var(--aitfq-ease);
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfq-sum-dot { background: var(--aits-blue-line, #CFE0FA); }
}

.aitfq-item[open] .aitfq-sum-dot {
    background: var(--acc);
    transform: scale(1.25);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--acc) 16%, transparent);
}

.aitfq-sum-tx {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.aitfq-q {
    margin: 0;
    /* No clamp, no ellipsis, no fixed height: a long question wraps. */
    font-size: clamp(.99rem, .95rem + .2vw, 1.09rem);
    font-weight: 700;
    line-height: 1.48;
    letter-spacing: -.014em;
    color: var(--aits-ink, #111);
    transition: color .2s var(--aitfq-ease);
}

.aitfq-tag {
    flex: none;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--aits-surface-3, #F7F7F8);
    border: 1px solid var(--aits-line, #ECECEC);
    color: var(--aits-mut, #666);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    /* Deliberately NOT `white-space: nowrap`. These chips carry admin-entered
       names — "Update Your AI Tool Listing" is one of them — and an unbreakable
       190px chip pushes the row sideways on a 360px screen. Wrapping to two
       lines is the ugly-but-honest option; overflowing is not an option at all. */
}

/* Plus that rotates into a minus. Two gradient bars, not an icon font — it
   cannot render as a blank box on a build missing the glyph. */
.aitfq-mark {
    flex: none;
    width: 34px; height: 34px;
    border-radius: 11px;
    background:
        linear-gradient(currentColor, currentColor) center / 13px 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 13px no-repeat,
        color-mix(in oklab, var(--acc) 10%, transparent);
    color: var(--acc-ink);
    transition: transform .34s cubic-bezier(.4, 0, .2, 1), background-color .22s var(--aitfq-ease),
                color .22s var(--aitfq-ease), box-shadow .24s var(--aitfq-ease);
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfq-mark {
        background:
            linear-gradient(currentColor, currentColor) center / 13px 2px no-repeat,
            linear-gradient(currentColor, currentColor) center / 2px 13px no-repeat,
            var(--aits-blue-tint, #EAF2FD);
    }
}

.aitfq-item[open] .aitfq-mark {
    transform: rotate(135deg);
    color: #fff;
    background:
        linear-gradient(#fff, #fff) center / 13px 2px no-repeat,
        linear-gradient(#fff, #fff) center / 2px 13px no-repeat,
        linear-gradient(135deg, var(--acc-deep) 0%, var(--acc-fill) 100%);
    box-shadow: 0 10px 20px -10px color-mix(in oklab, var(--acc) 90%, transparent);
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfq-item[open] .aitfq-mark { box-shadow: 0 10px 20px -10px rgba(54, 128, 237, .9); }
}

/* ── Answer ── */
/* 42px is not a round number, it is the measured left edge of the question:
   summary padding 20 + dot 8 + gap 14. The answer starts exactly under the
   first character of the question it answers. Change either of those three and
   this has to move with them. */
.aitfq-a {
    padding: 0 20px 20px;
    padding-inline-start: 42px;
    animation: aitfq-in .34s var(--aitfq-ease) both;
}

@keyframes aitfq-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

.aitfq-a-body {
    font-size: 15px;
    line-height: 1.72;
    color: var(--aits-txt, #444);
}

.aitfq-a-body > :first-child { margin-top: 0; }
.aitfq-a-body > :last-child  { margin-bottom: 0; }
.aitfq-a-body p  { margin: 0 0 12px; }
.aitfq-a-body ul,
.aitfq-a-body ol { margin: 0 0 12px; padding-inline-start: 22px; }
.aitfq-a-body li { margin-bottom: 6px; }

.aitfq-a-body strong,
.aitfq-a-body b { color: var(--aits-ink, #111); font-weight: 800; }

/* The exception to the no-underline rule — and it needs the extra class to beat
   `.aitfq a:hover` above. Underlined at REST, so hovering changes the colour and
   the thickness, never adds a line. */
.aitfq .aitfq-a-body a,
.aitfq .aitfq-a-body a:hover,
.aitfq .aitfq-a-body a:focus {
    color: var(--aits-blue-dark, #2060C0);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-decoration-color: var(--aits-blue-line, #CFE0FA);
    text-underline-offset: 3px;
    transition: color .2s var(--aitfq-ease), text-decoration-color .2s var(--aitfq-ease);
}

.aitfq-a-body code {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--aits-surface-3, #F7F7F8);
    border: 1px solid var(--aits-line, #ECECEC);
    font-size: .92em;
    color: var(--aits-ink, #111);
}

.aitfq-a-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--aits-line, #ECECEC);
}

.aitfq-copy,
.aitfq-a-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    background: var(--aits-surface-3, #F7F7F8);
    border: 1px solid var(--aits-line, #ECECEC);
    color: var(--aits-mut, #666);
    transition: color .2s var(--aitfq-ease), background-color .2s var(--aitfq-ease),
                border-color .2s var(--aitfq-ease), transform .2s var(--aitfq-ease);
}

.aitfq-copy svg,
.aitfq-a-more svg { width: 14px; height: 14px; flex: none; }

.aitfq-a-more {
    background: color-mix(in oklab, var(--acc) 9%, transparent);
    border-color: color-mix(in oklab, var(--acc) 22%, transparent);
    color: var(--acc-ink);
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfq-a-more {
        background: var(--aits-blue-tint, #EAF2FD);
        border-color: var(--aits-blue-line, #CFE0FA);
        color: var(--aits-blue-dark, #2060C0);
    }
}

.aitfq-a-more svg { transition: transform .24s var(--aitfq-ease); }

/* Search highlight */
.aitfq-hit {
    padding: 1px 2px;
    border-radius: 4px;
    background: color-mix(in oklab, var(--aits-amber, #D97706) 22%, transparent);
    color: inherit;
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfq-hit { background: rgba(217, 119, 6, .22); }
}

/* ══════════════════════════ EMPTY STATES ══════════════════════════ */

.aitfq-none,
.aitfq-blank {
    text-align: center;
    padding: clamp(32px, 6vw, 56px) 24px;
    border-radius: 24px;
    background: var(--aits-card, #fff);
    border: 1px dashed var(--aits-line-strong, #DADADA);
}

.aitfq-none[hidden] { display: none; }

.aitfq-none-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    margin-bottom: 16px;
    border-radius: 18px;
    color: var(--aits-blue-dark, #2060C0);
    background: var(--aits-blue-tint, #EAF2FD);
}

.aitfq-none-ic svg { width: 26px; height: 26px; }

.aitfq-none-h,
.aitfq-blank h2 {
    margin: 0 0 8px;
    font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem);
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.3;
    color: var(--aits-ink, #111);
}

.aitfq-none-p,
.aitfq-blank p {
    margin: 0 auto;
    max-width: 46ch;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--aits-mut, #666);
}

.aitfq-none-acts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}

.aitfq-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 22px;
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -.005em;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(140deg, var(--aits-blue-light, #60A4F5) -10%, var(--aits-blue, #3680ED) 44%, var(--aits-blue-dark, #2060C0) 100%);
    box-shadow: 0 14px 28px -14px rgba(54, 128, 237, .85), inset 0 1px 0 rgba(255, 255, 255, .3);
    transition: transform .2s var(--aitfq-ease), box-shadow .24s var(--aitfq-ease), filter .2s var(--aitfq-ease);
}

.aitfq-btn.is-ghost {
    color: var(--aits-ink, #111);
    background: var(--aits-card, #fff);
    border: 1px solid var(--aits-line-strong, #DADADA);
    box-shadow: none;
}

.aitfq-btn:focus-visible {
    outline: 3px solid var(--aits-focus, rgba(54, 128, 237, .28));
    outline-offset: 2px;
}

.aitfq-blank .aitfq-btn { margin-top: 20px; }

/* ══════════════════════════════ CTA BAND ══════════════════════════════ */

.aitfq-cta {
    padding-block: clamp(40px, 6vw, 72px);
    background: linear-gradient(180deg, var(--aits-bg-deep, #F1F1F3) 0%, var(--aits-bg, #FAFAFA) 100%);
    border-top: 1px solid var(--aits-line, #ECECEC);
}

.aitfq-cta-head { text-align: center; margin-bottom: 28px; }

.aitfq-cta-h {
    margin: 0 0 10px;
    font-size: clamp(1.4rem, 1.2rem + 1vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.14;
    color: var(--aits-ink, #111);
}

.aitfq-cta-sub {
    margin: 0 auto;
    max-width: 56ch;
    font-size: 15px;
    line-height: 1.62;
    color: var(--aits-mut, #666);
}

.aitfq-cta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    align-items: start;             /* short card stays short — no dead space */
}

.aitfq-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    gap: 10px;
    padding: 24px 22px;
    border-radius: 22px;
    text-decoration: none;
    background: var(--aits-card, #fff);
    border: 1px solid var(--aits-line, #ECECEC);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 32px -22px rgba(15, 23, 42, .5);
    transition: transform .26s var(--aitfq-ease), box-shadow .26s var(--aitfq-ease),
                border-color .22s var(--aitfq-ease);
}

/* Accent wash that fades in from the top on hover. */
.aitfq-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 120px;
    z-index: -1;
    opacity: 0;
    background: linear-gradient(180deg, color-mix(in oklab, var(--acc) 14%, transparent) 0%, transparent 100%);
    transition: opacity .26s var(--aitfq-ease);
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfq-card::before { background: linear-gradient(180deg, rgba(54, 128, 237, .12) 0%, transparent 100%); }
}

.aitfq-card-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(135deg, var(--acc-deep) 0%, var(--acc-fill) 100%);
    box-shadow: 0 12px 26px -14px color-mix(in oklab, var(--acc) 85%, transparent),
                inset 0 1px 0 rgba(255, 255, 255, .28);
    transition: transform .28s var(--aitfq-ease);
}

@supports not (background: color-mix(in oklab, red, blue)) {
    .aitfq-card-ic { box-shadow: 0 12px 26px -14px rgba(54, 128, 237, .85), inset 0 1px 0 rgba(255, 255, 255, .28); }
}

.aitfq-card-ic svg { width: 21px; height: 21px; }

.aitfq-card-h {
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -.018em;
    line-height: 1.3;
    color: var(--aits-ink, #111);
}

.aitfq-card-p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--aits-mut, #666);
}

.aitfq-card-go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: -.005em;
    color: var(--acc-ink);
}

.aitfq-card-go svg {
    width: 15px; height: 15px;
    transition: transform .24s var(--aitfq-ease);
}

/* ══════════════════════════════ TOAST ══════════════════════════════ */

.aitfq-toast {
    position: fixed;
    inset-block-end: 26px;
    inset-inline-start: 50%;
    z-index: 2147482000;
    padding: 11px 18px;
    border-radius: 999px;
    background: var(--aits-ink, #111);
    color: var(--aits-card, #fff);
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .7);
    opacity: 0;
    transform: translate(-50%, 10px);
    transition: opacity .22s var(--aitfq-ease), transform .22s var(--aitfq-ease);
    pointer-events: none;
}

.aitfq-toast[hidden] { display: none; }
.aitfq-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ══════════════════════════════ HOVER ══════════════════════════════
   Every hover rule lives in here. On a touch screen a tap latches :hover, so
   an un-gated lift or colour change sticks until the reader taps elsewhere —
   which reads as a stuck UI, not a hover. */
@media (hover: hover) and (pointer: fine) {
    .aitfq-crumb a:hover { color: var(--aits-blue-dark, #2060C0); }

    .aitfq-search:hover { border-color: var(--aits-blue-line, #CFE0FA); }

    .aitfq-search-x:hover {
        background: var(--aits-red-soft, #FFECEC);
        color: var(--aits-red, #E03131);
        transform: rotate(90deg);
    }

    .aitfq-jump-b:hover {
        transform: translateY(-2px);
        border-color: color-mix(in oklab, var(--acc) 34%, transparent);
        box-shadow: 0 14px 26px -16px color-mix(in oklab, var(--acc) 80%, transparent);
    }

    .aitfq-jump-b:hover .aitfq-jump-ic { transform: scale(1.12) rotate(-6deg); }
    .aitfq-jump-b.is-on:hover { transform: translateY(-2px); }

    .aitfq-tab:hover {
        background: var(--aits-surface-3, #F7F7F8);
        color: var(--aits-ink, #111);
    }

    .aitfq-tab:hover .aitfq-tab-ic { transform: scale(1.08) rotate(-5deg); }
    .aitfq-tab.is-on:hover { background: var(--aits-card, #fff); }

    .aitfq-mini:hover {
        color: var(--aits-blue-dark, #2060C0);
        background: var(--aits-blue-tint, #EAF2FD);
        border-color: var(--aits-blue-line, #CFE0FA);
        transform: translateY(-1px);
    }

    .aitfq-rail-help:hover {
        transform: translateY(-2px);
        border-color: var(--aits-blue, #3680ED);
        box-shadow: 0 18px 34px -22px rgba(54, 128, 237, .9);
    }

    .aitfq-rail-help:hover::after {
        opacity: 1;
        transform: rotate(45deg) translate(2px, -2px);
    }

    [dir="rtl"] .aitfq-rail-help:hover::after {
        transform: rotate(-135deg) translate(2px, -2px);
    }

    /* The whole row is the hit area, so the row reacts — not just the mark. */
    .aitfq-item:hover {
        border-color: color-mix(in oklab, var(--acc) 30%, var(--aits-line, #ECECEC));
        box-shadow: 0 18px 38px -30px color-mix(in oklab, var(--acc) 85%, transparent);
    }

    .aitfq-item:hover::before { height: calc(100% - 36px); }
    .aitfq-item:hover .aitfq-q { color: var(--acc-ink); }

    .aitfq-item:hover .aitfq-mark {
        color: #fff;
        background:
            linear-gradient(#fff, #fff) center / 13px 2px no-repeat,
            linear-gradient(#fff, #fff) center / 2px 13px no-repeat,
            linear-gradient(135deg, var(--acc-deep) 0%, var(--acc-fill) 100%);
    }

    .aitfq-item:hover .aitfq-sum-dot { background: var(--acc); transform: scale(1.2); }

    .aitfq-copy:hover {
        color: var(--aits-blue-dark, #2060C0);
        background: var(--aits-blue-tint, #EAF2FD);
        border-color: var(--aits-blue-line, #CFE0FA);
        transform: translateY(-1px);
    }

    .aitfq-a-more:hover { transform: translateY(-1px); }
    .aitfq-a-more:hover svg { transform: translateX(3px); }

    .aitfq .aitfq-a-body a:hover {
        color: var(--aits-blue, #3680ED);
        text-decoration-color: var(--aits-blue, #3680ED);
    }

    .aitfq-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 20px 38px -16px rgba(54, 128, 237, .95), inset 0 1px 0 rgba(255, 255, 255, .34);
    }

    .aitfq-btn.is-ghost:hover {
        border-color: var(--aits-blue, #3680ED);
        color: var(--aits-blue-dark, #2060C0);
        box-shadow: 0 14px 28px -20px rgba(54, 128, 237, .8);
    }

    .aitfq-card:hover {
        transform: translateY(-4px);
        border-color: color-mix(in oklab, var(--acc) 32%, transparent);
        box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 30px 54px -28px color-mix(in oklab, var(--acc) 78%, transparent);
    }

    .aitfq-card:hover::before { opacity: 1; }
    .aitfq-card:hover .aitfq-card-ic { transform: scale(1.06) rotate(-6deg); }
    .aitfq-card:hover .aitfq-card-go svg { transform: translateX(4px); }

    @supports not (background: color-mix(in oklab, red, blue)) {
        .aitfq-jump-b:hover { border-color: var(--aits-blue-line, #CFE0FA); box-shadow: 0 14px 26px -16px rgba(54, 128, 237, .8); }
        .aitfq-item:hover   { border-color: var(--aits-blue-line, #CFE0FA); box-shadow: 0 18px 38px -30px rgba(54, 128, 237, .85); }
        .aitfq-card:hover   { border-color: var(--aits-blue-line, #CFE0FA); box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 30px 54px -28px rgba(54, 128, 237, .78); }
    }
}

/* Active/press states are safe on touch — they end when the finger lifts. */
.aitfq-jump-b:active,
.aitfq-tab:active,
.aitfq-mini:active,
.aitfq-btn:active,
.aitfq-copy:active { transform: translateY(0) scale(.98); }

.aitfq-card:active { transform: translateY(-1px) scale(.995); }

/* ══════════════════════════════ DARK ══════════════════════════════
   Only what the tokens cannot carry: the mesh (a wash tuned for white), and
   every coloured shadow — a blue glow that reads as depth on white reads as
   haze on near-black, so those become real black shadows plus a hairline. */
/* The single theme-dependent accent value. Everything downstream - the topic
   count, the rail icon, the plus mark, "Full details", the CTA link, the
   hovered question - reads --acc-ink and follows automatically. Measured on
   the four live topics: 5.93-7.16:1 on the tinted plate, 6.6-8.3:1 on the
   card. The fills stay put; white on --acc-fill/--acc-deep is 4.6-7.1:1 on
   both canvases, and the lighter end still clears 3:1 against the dark page
   so the chip keeps a visible edge. */
body.theme-dark .aitfq-jump-b,
body.theme-dark .aitfq-tab,
body.theme-dark .aitfq-group,
body.theme-dark .aitfq-card { --acc-ink: var(--acc2); }

body.theme-dark .aitfq-hero {
    background: linear-gradient(180deg, var(--dk-accent-soft,rgba(54,128,237,.16)) 0%, transparent 74%), var(--aits-bg, var(--dk-bg,#0E0E11));
}

body.theme-dark .aitfq-rail-in {
    background: linear-gradient(180deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, .015) 100%);
    border-color: var(--aits-line, var(--dk-line,rgba(255,255,255,.10)));
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 20px 44px -32px rgba(0, 0, 0, .9);
}

body.theme-dark .aitfq-rail-acts {
    background: rgba(255, 255, 255, .04);
    border-color: var(--dk-line,rgba(255,255,255,.10));
    box-shadow: none;
}

body.theme-dark .aitfq-mini + .aitfq-mini { border-inline-start-color: var(--dk-line,rgba(255,255,255,.10)); }

body.theme-dark .aitfq-rail-help::before { background: radial-gradient(circle, rgba(96, 164, 245, .22) 0%, transparent 70%); }
body.theme-dark .aitfq-rail-help::after {
    border-inline-end-color: var(--aits-blue-light, #60A4F5);
    border-block-start-color: var(--aits-blue-light, #60A4F5);
}

body.theme-dark .aitfq-hero-mesh { opacity: .5; filter: blur(70px); }

body.theme-dark .aitfq-hero-grid {
    opacity: .45;
    background-image:
        linear-gradient(rgba(96, 164, 245, .09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(96, 164, 245, .09) 1px, transparent 1px);
}

body.theme-dark .aitfq-eyebrow {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(96, 164, 245, .26);
    box-shadow: 0 8px 22px -12px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .07);
}

body.theme-dark .aitfq-search {
    background: rgba(255, 255, 255, .04);
    border-color: var(--dk-line-strong,rgba(255,255,255,.16));
    box-shadow: 0 20px 44px -28px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05);
}

body.theme-dark .aitfq-search:focus-within {
    background: rgba(255, 255, 255, .06);
    border-color: var(--aits-blue-light, #60A4F5);
    box-shadow: 0 0 0 5px rgba(54, 128, 237, .22), 0 24px 48px -30px rgba(0, 0, 0, .95);
}

body.theme-dark .aitfq-search-ic { color: var(--aits-blue-light, #60A4F5); }
body.theme-dark .aitfq-search-x  { background: rgba(255, 255, 255, .07); }
body.theme-dark .aitfq-kbd       { background: rgba(255, 255, 255, .06); border-color: var(--dk-line-strong,rgba(255,255,255,.16)); }
body.theme-dark .aitfq-count     { color: var(--aits-blue-light, #60A4F5); }

/* :not(.is-on) is load-bearing, not tidiness. `body.theme-dark .aitfq-jump-b`
   is (0,2,1) and `.aitfq-jump-b.is-on` is (0,2,0), so without it the dark twin
   won and the SELECTED topic chip painted the same rgba(255,255,255,.04) as
   its neighbours - the active state simply vanished at night. The count pill
   inside it went the same way, landing muted grey on the accent fill at
   2.05:1. Same trap as the background-shorthand one further down. */
body.theme-dark .aitfq-jump-b:not(.is-on) {
    background: rgba(255, 255, 255, .04);
    border-color: var(--dk-line,rgba(255,255,255,.10));
    box-shadow: none;
}

body.theme-dark .aitfq-jump-b:not(.is-on) em { background: rgba(255, 255, 255, .08); color: var(--aits-mut, var(--dk-text-3,#9AA0AB)); }
body.theme-dark .aitfq-jump-b.is-on { box-shadow: 0 14px 28px -16px rgba(0, 0, 0, .9); }

body.theme-dark .aitfq-tab.is-on {
    background: rgba(255, 255, 255, .05);
    border-color: var(--dk-line,rgba(255,255,255,.10));
    box-shadow: none;
}

body.theme-dark .aitfq-mini {
    background: rgba(255, 255, 255, .05);
    border-color: var(--dk-line,rgba(255,255,255,.10));
}

body.theme-dark .aitfq-rail-help {
    background: linear-gradient(160deg, rgba(54, 128, 237, .16) 0%, rgba(54, 128, 237, .06) 100%);
    border-color: rgba(96, 164, 245, .24);
}

/* A 70%-white inner hairline is a lit edge on a white card and a scratch on a
   dark one, so the glass highlight drops to a whisper here. */
body.theme-dark .aitfq-item {
    background: rgba(255, 255, 255, .028);
    border-color: var(--aits-line, var(--dk-line,rgba(255,255,255,.10)));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .05),
        0 1px 2px rgba(0, 0, 0, .35),
        0 10px 26px -20px rgba(0, 0, 0, .8);
}

body.theme-dark .aitfq-item[open] {
    background:
        linear-gradient(180deg, color-mix(in oklab, var(--acc) 12%, transparent) 0%, transparent 78px),
        rgba(255, 255, 255, .05);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 26px 52px -34px rgba(0, 0, 0, .95);
}

@supports not (background: color-mix(in oklab, red, blue)) {
    body.theme-dark .aitfq-item[open] { background: rgba(255, 255, 255, .05); }
}

body.theme-dark .aitfq-tag {
    background: rgba(255, 255, 255, .06);
    border-color: var(--dk-line,rgba(255,255,255,.10));
}

body.theme-dark .aitfq-a-body code {
    background: rgba(255, 255, 255, .06);
    border-color: var(--dk-line,rgba(255,255,255,.10));
}

body.theme-dark .aitfq-a-body a { color: var(--aits-blue-light, #60A4F5); }
body.theme-dark .aitfq-a-foot   { border-top-color: var(--dk-line,rgba(255,255,255,.10)); }

body.theme-dark .aitfq-copy {
    background: rgba(255, 255, 255, .05);
    border-color: var(--dk-line,rgba(255,255,255,.10));
}

body.theme-dark .aitfq-none,
body.theme-dark .aitfq-blank {
    background: rgba(255, 255, 255, .028);
    border-color: var(--dk-line-strong,rgba(255,255,255,.16));
}

body.theme-dark .aitfq-none-ic { background: rgba(54, 128, 237, .18); color: var(--aits-blue-light, #60A4F5); }

body.theme-dark .aitfq-btn {
    box-shadow: 0 16px 32px -16px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .22);
}

body.theme-dark .aitfq-btn.is-ghost {
    background: rgba(255, 255, 255, .05);
    border-color: var(--dk-line-strong,rgba(255,255,255,.16));
    color: var(--aits-ink, var(--dk-text,#F4F5F7));
}

body.theme-dark .aitfq-cta {
    background: linear-gradient(180deg, var(--dk-bg-deep,#0A0A0C) 0%, var(--aits-bg, var(--dk-bg,#0E0E11)) 100%);
    border-top-color: var(--aits-line, var(--dk-line,rgba(255,255,255,.10)));
}

body.theme-dark .aitfq-card {
    background: rgba(255, 255, 255, .03);
    border-color: var(--dk-line,rgba(255,255,255,.10));
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 18px 38px -26px rgba(0, 0, 0, .9);
}

body.theme-dark .aitfq-toast {
    background: var(--dk-text,#F4F5F7);
    color: #111;
    box-shadow: 0 20px 44px -18px rgba(0, 0, 0, .95);
}

body.theme-dark .aitfq-hit { background: rgba(245, 158, 11, .3); color: #FDE68A; }

@media (hover: hover) and (pointer: fine) {
    body.theme-dark .aitfq-tab:hover  { background: rgba(255, 255, 255, .05); }
    body.theme-dark .aitfq-mini:hover { background: rgba(54, 128, 237, .18); color: var(--aits-blue-light, #60A4F5); }
    body.theme-dark .aitfq-copy:hover { background: rgba(54, 128, 237, .18); color: var(--aits-blue-light, #60A4F5); }
    body.theme-dark .aitfq-item:hover { box-shadow: 0 18px 40px -30px rgba(0, 0, 0, .9); }
    body.theme-dark .aitfq-card:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 30px 56px -28px rgba(0, 0, 0, .95); }
    body.theme-dark .aitfq-btn:hover  { box-shadow: 0 22px 40px -16px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .26); }
    body.theme-dark .aitfq-search-x:hover { background: rgba(224, 49, 49, .22); color: #FF8787; }
}

/* ══════════════════════════ NARROW SCREENS ══════════════════════════ */

@media (max-width: 720px) {

    .aitfq-eyebrow { font-size: 11.5px; letter-spacing: .015em; padding: 5px 12px 5px 5px; }
    .aitfq-eyebrow-ic { width: 25px; height: 25px; }
    .aitfq-eyebrow-ic svg { width: 14px; height: 14px; }

    .aitfq-search { padding: 7px 8px 7px 15px; gap: 10px; }
    .aitfq-kbd    { display: none; }          /* no physical keyboard to hint at */

    /* ── Hero height ──────────────────────────────────────────────────────
       Measured on a 390x844 phone before this block existed: the hero was
       725px and the first question sat at y=1144 - a FAQ page with no FAQ in
       the first viewport, and nearly two viewports of it on a 360x640. The
       numbers below are the measured contributors, largest first, not nudges:
       chips 200, lede 138, h1 100, padding 88, eyebrow 57, crumb 46, and 34px
       of blank reserved by an empty live region. */
    .aitfq-hero  { padding-block: 32px 28px; }
    .aitfq-crumb { margin-bottom: 12px; }
    .aitfq-h1    { margin-bottom: 12px; }
    .aitfq-lede  { font-size: 15px; margin-bottom: 18px; }

    /* .aitfq-count is a live region that reserves 22px + 12px so the chips do
       not jump when a result count appears. Worth it on a desktop, where the
       reserve costs nothing anyone can see; not worth 34px of a phone screen
       that a visitor pays for before reading a single answer. It collapses
       only while EMPTY, so the one shift happens on the first keystroke, with
       the keyboard already open and the reader looking at the field. */
    .aitfq-count:empty { min-height: 0; margin-top: 0; }

    .aitfq-jump { gap: 7px; margin-top: 16px; }
    .aitfq-jump-b { padding: 7px 11px; font-size: 12.4px; }

    .aitfq-group-head { gap: 12px; margin-bottom: 14px; padding-bottom: 14px; }
    .aitfq-group-ic   { width: 40px; height: 40px; border-radius: 13px; }
    .aitfq-group-ic svg { width: 19px; height: 19px; }

    .aitfq-sum  { padding: 16px 16px; gap: 11px; }
    .aitfq-mark { width: 30px; height: 30px; border-radius: 10px; }

    /* The 62px inset lines the answer up under the question on a wide row; on a
       phone it just steals a third of the reading width. */
    .aitfq-a { padding: 0 16px 18px; padding-inline-start: 16px; }
    .aitfq-a-body { font-size: 14.6px; }

    .aitfq-card { padding: 20px 18px; border-radius: 20px; }
}

@media (max-width: 400px) {
    /* The dot is decoration and the row needs the width more than it needs a
       decorative bullet. */
    .aitfq-sum-dot { display: none; }
    /* The tag used to drop to 10px here. It wraps rather than overflows, so
       the width that bought was never needed, and 10px uppercase sits under
       the floor the rest of the page holds to. Tighten the tracking and the
       padding instead - both buy width without touching legibility. */
    .aitfq-tag { letter-spacing: .04em; padding-inline: 7px; }
}

/* ══════════════════════════ SMALL PHONES ══════════════════════════ */

@media (max-width: 560px) {
    /* The eyebrow pill reads FREQUENTLY ASKED QUESTIONS, directly above an h1
       that reads "Everything you asked, Answered", directly below a crumb
       whose last item is FAQ. Three labels for one page. On a phone the pill
       is the one that can go - it is decoration, it carries no link, and both
       of the others stay. Worth 57px of the first screen. */
    .aitfq-eyebrow { display: none; }

    /* Dropping the chip glyph packs the five topics into three rows instead of
       four - measured 167px -> 123px, and the hero with it 556 -> 513. The
       glyph is the only part of a chip that carries no information: the topic
       name and its count both stay, the tinted border still carries the tone,
       and the rail keeps its icons on every screen wide enough to show it. */
    .aitfq-jump-ic { display: none; }
    .aitfq-jump-b  { gap: 6px; }
}

/* ══════════════════════ MEASURE & WIDE SCREENS ══════════════════════
   .aitfq-wrap is pinned to --seo-shell-max so the hero lines up with the site
   header, and on this install that setting is 1920px. A hero can be that wide;
   a column of answers cannot. Measured at 1920: the answer column came out
   1522px, which is roughly 190 characters a line, and a six-word question sat
   alone at the far left of a row a metre wide.

   So the READING part of the page carries its own cap while the hero and the
   band backgrounds keep the full shell. 1180px is the number the browse bands
   already use, so the two surfaces line up when a visitor moves between them. */
.aitfq-body,
.aitfq-cta-grid { max-width: var(--aitfq-measure, 1180px); margin-inline: auto; }

/* Single-column mode has no rail to spend width on, so the cap has to come off
   the column itself or a 1024px tablet gets the same 130-character line. */
@media (max-width: 1079.98px) {
    .aitfq-main { max-width: 820px; margin-inline: auto; }
}

/* ══════════════════════ SHORT / LANDSCAPE VIEWPORTS ══════════════════════
   A phone held sideways is ~360px tall. The hero is built out of vw-based
   clamps, which know nothing about height, so at 740x360 it filled the whole
   screen and the first question was two swipes away. */
@media (max-height: 560px) and (orientation: landscape) {
    .aitfq-hero { padding-block: 26px 22px; }
    .aitfq-crumb { margin-bottom: 12px; }
    .aitfq-eyebrow { margin-bottom: 12px; }
    .aitfq-h1 { font-size: clamp(1.6rem, 1.1rem + 2.6vw, 2.4rem); }
    .aitfq-lede { margin-bottom: 16px; }
    .aitfq-jump { margin-top: 14px; }
    .aitfq-body { padding-block: 24px 32px; }
    /* The sticky rail is taller than the viewport here, so pinning it hides
       its lower half with no way to reach it. */
    .aitfq-rail-in { position: static; }
}
/* ══════════════════════════ REDUCED MOTION ══════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .aitfq *,
    .aitfq *::before,
    .aitfq *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

    .aitfq-item:hover,
    .aitfq-card:hover,
    .aitfq-btn:hover,
    .aitfq-jump-b:hover,
    .aitfq-rail-help:hover { transform: none; }
}

/* ══════════════════════════════ PRINT ══════════════════════════════
   A printed FAQ has to contain the answers, and a closed <details> prints as a
   heading with nothing under it. CSS cannot fix that — the collapsed content is
   hidden by the UA at a level author styles do not reach — so the `beforeprint`
   listener in the view opens every panel first. This block only removes the
   interactive furniture that would print as dead ink. */
@media print {
    .aitfq-hero-bg,
    .aitfq-rail,
    .aitfq-search,
    .aitfq-kbd,
    .aitfq-jump,
    .aitfq-count,
    .aitfq-a-foot,
    .aitfq-toast,
    .aitfq-none { display: none !important; }

    .aitfq-body { display: block; }
    .aitfq-item { break-inside: avoid; border-color: #ddd; box-shadow: none; }
    .aitfq-a    { animation: none; }
    .aitfq-mark { display: none; }
}