/* ==========================================================================
   markXpand — FAQ page (/FAQ)
   --------------------------------------------------------------------------
   Loaded AFTER landing-page.css and product-page.css, and layered on top of
   them: .pr-page supplies the ground, the type scale, the buttons, the shell
   measure and the closing band, so nothing here re-declares any of those. Only
   the four things this page owns live in this file — the search band, the topic
   rail, the sticky sidebar and the <details> accordion.

   Three rules it lives by:

   1. NO NEW COLOUR. Every value below resolves to a landing-page.css token
      (--brand / --brand-dark / --ink / --text-body / --text-muted) or to
      product-page.css's --pr-glass / --pr-glass-line / --pr-band. A colour
      invented here would be a colour only this page speaks.

   2. LOGICAL PROPERTIES throughout — inset-inline-start, padding-inline,
      margin-inline, border-inline-start. The page ships in Arabic on the same
      markup, and a `left` written here is a bug in the other direction.

   3. RESPONSIVE RULES LAST. landing-page.css has been bitten before by an
      unmediated block later in the file quietly beating an earlier media query;
      every @media in this file therefore sits in §7, after all the base rules.
   ========================================================================== */


/* ==========================================================================
   0. LOCAL TOKENS
   ========================================================================== */
.fq-page {
    /* One easing, matching product-page.css's --pr-ease. */
    --fq-ease: cubic-bezier(.16, 1, .3, 1);
    /* The measure the sidebar holds at desktop widths. */
    --fq-aside: 260px;
}


/* ==========================================================================
   1. HERO — the dark band, with the search field as its one control
   ========================================================================== */
.fq-hero {
    /* The band's two radial lights are painted by .pr-hero--band::after, which
       is absolute with inset:0 and z-index:-1. Without a positioned host that
       pseudo resolved against the initial containing block instead — a 100vh
       box — so its dark bottom-left light spilled ~300px past the seam and
       greyed the top-left of the topic rail below. The same three properties
       .pr-hero, .ct-hero and .cr-hero already carry: relative gives the pseudo
       its box, isolate makes this a stacking context so the negative z-index
       paints ABOVE the band's own background rather than under it, and clip
       stops anything reaching the light section. */
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding-block: clamp(140px, 15vw, 190px) clamp(64px, 7vw, 92px);
    text-align: center;
}

.fq-hero-inner {
    max-width: 760px;
    margin-inline: auto;
}

/* The kicker is centred here, so its leading rule (::before on .pr-kicker) has
   to sit in the flow rather than beside the text. */
.fq-hero .pr-kicker { justify-content: center; }

.fq-hero-h1 { margin: 0 0 18px; }

.fq-hero-lede {
    margin: 0 auto;
    max-width: 58ch;
}

/* ---------- search ---------- */
.fq-search {
    position: relative;
    display: flex;
    align-items: center;
    margin: clamp(26px, 3.4vw, 38px) auto 0;
    max-width: 560px;
    border-radius: 999px;
    /* Frosted, so it reads as glass ON the band rather than a white slab cut
       out of it. The border carries the whole affordance at rest. */
    background: rgba(255, 255, 255, .12);
    border: 1.5px solid rgba(255, 255, 255, .34);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: border-color .25s var(--fq-ease), background-color .25s var(--fq-ease), box-shadow .25s var(--fq-ease);
}

.fq-search:focus-within {
    background: rgba(255, 255, 255, .96);
    border-color: #fff;
    box-shadow: 0 18px 44px -20px rgba(0, 0, 0, .55);
}

/* Visually hidden, not display:none — the field still needs a name. */
.fq-search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.fq-search-icon {
    flex: 0 0 auto;
    margin-inline: 22px 0;
    font-size: .95rem;
    color: rgba(255, 255, 255, .78);
    transition: color .25s var(--fq-ease);
    pointer-events: none;
}

.fq-search:focus-within .fq-search-icon { color: var(--brand-dark); }

.fq-search-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 17px 20px;
    border: 0;
    background: transparent;
    font-family: var(--font-b);
    font-size: 1rem;
    color: #fff;
    caret-color: #fff;
}

.fq-search-input::placeholder { color: rgba(255, 255, 255, .68); }
.fq-search-input:focus { outline: none; }

.fq-search:focus-within .fq-search-input { color: var(--ink); caret-color: var(--brand-dark); }
.fq-search:focus-within .fq-search-input::placeholder { color: var(--text-muted); }

/* Safari paints its own round X inside type="search"; ours is the only one. */
.fq-search-input::-webkit-search-decoration,
.fq-search-input::-webkit-search-cancel-button,
.fq-search-input::-webkit-search-results-button,
.fq-search-input::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; }

.fq-search-clear {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-inline: 0 12px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: .82rem;
    cursor: pointer;
    transition: background-color .2s var(--fq-ease), color .2s var(--fq-ease);
}

.fq-search-clear:hover { background: rgba(255, 255, 255, .3); }
.fq-search-clear:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.fq-search:focus-within .fq-search-clear { background: rgba(67, 163, 221, .16); color: var(--brand-dark); }
.fq-search:focus-within .fq-search-clear:hover { background: rgba(67, 163, 221, .28); }

.fq-hero-note {
    margin: 18px 0 0;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .58);
}


/* ==========================================================================
   2. TOPIC RAIL — the phone/tablet stand-in for the sidebar
   --------------------------------------------------------------------------
   Hidden at desktop (§7), where .fq-toc in the sidebar does this job.
   ========================================================================== */
.fq-rail {
    position: sticky;
    /* MINUS 16, deliberately. product-page.js writes --pr-navh as the measured bar
       height PLUS a 16px breathing gap, which is what anchor offsets want and what a
       sticky bar must not have: parked at the full value the rail leaves a 16px slot
       between it and the nav, and the page scrolls through it in full colour. */
    top: calc(var(--pr-navh, 88px) - 16px);
    z-index: 20;
    padding-block: 12px;
    background: rgba(247, 251, 254, .9);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-block-end: 1px solid var(--pr-glass-line);
}

.fq-rail-track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    /* The chips run edge to edge on a phone; the shell's gutter is restored as
       scroll padding so the first and last one are not glued to the bezel. */
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}

.fq-rail-track::-webkit-scrollbar { display: none; }

.fq-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--pr-glass-line);
    background: rgba(255, 255, 255, .7);
    font-family: var(--font-h);
    font-weight: 600;
    font-size: .84rem;
    line-height: 1;
    color: var(--text-body);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .2s var(--fq-ease), color .2s var(--fq-ease), background-color .2s var(--fq-ease);
}

.fq-chip i { font-size: .78rem; color: var(--brand-dark); }

.fq-chip:hover { border-color: rgba(67, 163, 221, .5); color: var(--brand-dark); }
.fq-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.fq-chip.is-current {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.fq-chip.is-current i { color: #fff; }


/* ==========================================================================
   3. BODY GRID
   ========================================================================== */
.fq-body { padding-block: clamp(44px, 5vw, 72px) var(--space-section); }

.fq-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(30px, 4vw, 56px);
    align-items: start;
}

/* The sidebar is desktop-only; on a phone the rail above carries the topics and
   the "still stuck" card would push the first question below the fold. */
.fq-aside { display: none; }

.fq-main { min-width: 0; }

/* ---------- sidebar: topic list ---------- */
.fq-toc-h {
    margin: 0 0 12px;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.fq-toc ul { margin: 0; padding: 0; list-style: none; }

.fq-toc li + li { margin-top: 2px; }

.fq-toc a {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    /* The active marker is a rule on the inline start edge, held at zero width
       at rest so the row never reflows when it lights up. */
    border-inline-start: 2px solid transparent;
    font-family: var(--font-h);
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.35;
    color: var(--text-body);
    text-decoration: none;
    transition: background-color .2s var(--fq-ease), color .2s var(--fq-ease), border-color .2s var(--fq-ease);
}

.fq-toc a i {
    flex: 0 0 auto;
    width: 1.1em;
    font-size: .85rem;
    color: var(--brand-dark);
    text-align: center;
}

.fq-toc a span { flex: 1 1 auto; }

.fq-toc a em {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-style: normal;
    font-size: .7rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.fq-toc a:hover { background: rgba(67, 163, 221, .08); color: var(--brand-dark); }
.fq-toc a:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.fq-toc a.is-current {
    background: rgba(67, 163, 221, .12);
    border-inline-start-color: var(--brand);
    color: var(--brand-dark);
}

/* A topic the current search has emptied — dimmed and struck through the count,
   rather than removed, so the list does not jump about as the visitor types. */
.fq-toc a.is-empty { opacity: .38; }
.fq-toc a.is-empty em { text-decoration: line-through; }

/* ---------- sidebar: the escape hatch ---------- */
.fq-help {
    margin-top: 26px;
    padding: 22px;
    border: 2px solid var(--pr-glass-line);
    border-radius: var(--radius-lg);
    background: var(--pr-glass);
    -webkit-backdrop-filter: blur(6.5px);
    backdrop-filter: blur(6.5px);
}

.fq-help-h {
    margin: 0 0 6px;
    font-family: var(--font-h);
    font-weight: 700;
    font-size: 1rem;
    color: var(--ink);
}

.fq-help-p {
    margin: 0 0 14px;
    font-family: var(--font-b);
    font-size: .85rem;
    line-height: 1.6;
    color: var(--text-muted);
}

.fq-help-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-family: var(--font-h);
    font-weight: 600;
    font-size: .87rem;
    color: var(--brand-dark);
    text-decoration: none;
    transition: gap .2s var(--fq-ease);
}

.fq-help-link i { width: 1.05em; font-size: .82rem; text-align: center; }
.fq-help-link:hover { gap: 14px; color: var(--brand); }
.fq-help-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }


/* ==========================================================================
   4. GROUPS
   ========================================================================== */
.fq-group + .fq-group { margin-top: clamp(38px, 4.4vw, 60px); }

/* Hidden by the search when every question inside it has been filtered out. */
.fq-group[hidden] { display: none; }

.fq-group-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

.fq-group-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    background: rgba(67, 163, 221, .12);
    color: var(--brand-dark);
    font-size: .95rem;
}

.fq-group-copy { min-width: 0; }

.fq-group-h {
    margin: 0 0 3px;
    font-family: var(--font-h);
    font-weight: 800;
    font-size: clamp(1.15rem, 1.7vw, 1.4rem);
    line-height: 1.25;
    letter-spacing: -.015em;
    color: var(--ink);
}

.fq-group-blurb {
    margin: 0;
    font-family: var(--font-b);
    font-size: .89rem;
    line-height: 1.6;
    color: var(--text-muted);
    text-wrap: pretty;
}


/* ==========================================================================
   5. THE ACCORDION — native <details>
   --------------------------------------------------------------------------
   Same card language as .pr-acc on /Features, so a visitor arriving from that
   page's FAQ section does not feel they changed products. The difference is
   mechanical, not visual: these are independent, they open with JS blocked, and
   the browser can find text inside a closed one.
   ========================================================================== */
.fq-list { display: grid; gap: 10px; }

.fq-item {
    border: 2px solid var(--pr-glass-line);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .68);
    -webkit-backdrop-filter: blur(6.5px);
    backdrop-filter: blur(6.5px);
    overflow: hidden;
    transition: border-color .3s var(--fq-ease), box-shadow .3s var(--fq-ease);
}

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

.fq-item[open] {
    border-color: rgba(67, 163, 221, .48);
    box-shadow: 0 16px 40px -20px rgba(15, 31, 51, .24);
}

/* A question the visitor arrived at by link, so they can see WHICH of the open
   ones they were sent to. faq-page.js removes it on the next interaction. */
.fq-item.is-targeted { border-color: var(--brand); }

.fq-q {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px clamp(16px, 2vw, 24px);
    cursor: pointer;
    font-family: var(--font-h);
    font-weight: 700;
    font-size: clamp(.96rem, 1.1vw, 1.06rem);
    line-height: 1.45;
    color: var(--ink);
    list-style: none;
    transition: color .2s var(--fq-ease);
}

/* Both spellings: Safari still uses the pseudo-element for the disclosure marker. */
.fq-q::-webkit-details-marker { display: none; }
.fq-q::marker { content: ""; }

.fq-q:hover { color: var(--brand-dark); }
.fq-q:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-md); }

.fq-item[open] .fq-q { color: var(--brand-dark); }

.fq-q-text { flex: 1 1 auto; text-wrap: pretty; }

.fq-q-chev {
    flex: 0 0 auto;
    font-size: .78rem;
    color: var(--brand-dark);
    transition: transform .3s var(--fq-ease);
}

.fq-item[open] .fq-q-chev { transform: rotate(180deg); }

.fq-a { padding: 0 clamp(16px, 2vw, 24px) 20px; }

.fq-a-p {
    margin: 0;
    font-family: var(--font-b);
    font-size: .94rem;
    line-height: 1.72;
    color: var(--text-body);
    text-wrap: pretty;
    max-width: 68ch;
}

.fq-a-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-family: var(--font-h);
    font-weight: 600;
    font-size: .87rem;
    color: var(--brand-dark);
    text-decoration: none;
}

.fq-a-arrow { font-size: .74rem; transition: transform .2s var(--fq-ease); }

/* The arrow points along the reading direction, so it flips with the document. */
[dir="rtl"] .fq-a-arrow { transform: scaleX(-1); }

.fq-a-link:hover { color: var(--brand); }
.fq-a-link:hover .fq-a-arrow { transform: translateX(4px); }
[dir="rtl"] .fq-a-link:hover .fq-a-arrow { transform: scaleX(-1) translateX(4px); }

.fq-a-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }


/* ==========================================================================
   6. SEARCH FEEDBACK — the running count and the empty state
   ========================================================================== */
.fq-count {
    margin: 0 0 22px;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.fq-count[hidden] { display: none; }

.fq-empty {
    padding: clamp(38px, 5vw, 60px) 26px;
    text-align: center;
    border: 2px dashed var(--pr-glass-line);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .5);
}

.fq-empty[hidden] { display: none; }

.fq-empty-icon {
    font-size: 1.5rem;
    color: var(--brand);
    opacity: .7;
}

.fq-empty-h {
    margin: 16px 0 8px;
    font-family: var(--font-h);
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--ink);
}

.fq-empty-p {
    margin: 0 auto 22px;
    max-width: 44ch;
    font-family: var(--font-b);
    font-size: .92rem;
    line-height: 1.65;
    color: var(--text-muted);
}

.fq-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}


/* ==========================================================================
   7. RESPONSIVE — LAST IN THE FILE, ON PURPOSE
   --------------------------------------------------------------------------
   See the header note: an unmediated block after a media query silently wins,
   which is the bug landing-page.css has already been bitten by. Everything
   breakpoint-dependent lives from here down and nothing follows it.
   ========================================================================== */

/* Desktop: the sidebar appears and the mobile rail retires. */
@media (min-width: 992px) {
    .fq-rail { display: none; }

    .fq-grid { grid-template-columns: var(--fq-aside) minmax(0, 1fr); }

    .fq-aside {
        display: block;
        position: sticky;
        top: calc(var(--pr-navh, 88px) + 24px);
    }
}

/* The rail's chips run to the shell's gutter rather than to the viewport edge,
   so restore that as scroll padding while it is the visible control. */
@media (max-width: 991.98px) {
    .fq-rail-track { scroll-padding-inline: var(--lp-gutter, 12px); }

    /* Below 992px the rail is a SECOND fixed strip under the nav, so .pr-page's
       scroll-margin-top of one nav height drops every heading behind it. faq-page.js
       measures the rail for its own scrolling; this is the same correction for the
       jumps it does not handle — a native hash jump with the script blocked. */
    .fq-page .fq-group,
    .fq-page .fq-item { scroll-margin-top: calc(var(--pr-navh, 88px) + 46px); }
}

@media (max-width: 575.98px) {
    .fq-hero { padding-block: 118px 52px; }
    .fq-search-input { padding: 15px 16px; font-size: .95rem; }
    .fq-search-icon { margin-inline-start: 18px; }
    .fq-group-icon { width: 38px; height: 38px; }
    .fq-q { padding: 16px 16px; gap: 12px; }
    .fq-a { padding: 0 16px 18px; }
    .fq-empty-actions .btn { width: 100%; }
}

/* Arabic is cursive: letter-spacing pulls the glyphs apart at the joins, and
   text-transform does nothing but cost the browser a pass. The three mono micro-labels
   this page introduces therefore drop both in RTL — they are small enough that nobody
   reads them against the site's other mono notes and sees an inconsistency, and large
   enough that broken joins are visible. */
[dir="rtl"] .fq-hero-note,
[dir="rtl"] .fq-count,
[dir="rtl"] .fq-toc-h {
    letter-spacing: normal;
    text-transform: none;
}

/* The chevron rotation and the arrow nudge are decoration; the open/closed
   state itself is structural and stays. */
@media (prefers-reduced-motion: reduce) {
    .fq-item,
    .fq-q,
    .fq-q-chev,
    .fq-a-arrow,
    .fq-help-link,
    .fq-chip,
    .fq-toc a,
    .fq-search { transition: none; }

    .fq-a-link:hover .fq-a-arrow { transform: none; }
    [dir="rtl"] .fq-a-link:hover .fq-a-arrow { transform: scaleX(-1); }
}