/* ============================================================================
   ABOUT / FAQ — long-form section that sits inside [bt_about] body content
   ============================================================================
   Translation of the lol-boosting-faq-vr5 mock into the session's design
   language:
     - Bricolage Grotesque -> League (display, weight 500), session standard
     - Geist Mono          -> AvenirNextCyr-Medium with monospace-style
                              letter-spacing (no system mono in site stack)
     - Geist               -> AvenirNextCyr-Medium / Roboto (body)
     - Mock --blue #38a6e8 -> session brand --bt-blue #0364a8
     - Mock dark callout   -> session .bt-section-banner gradient
                              (#0a72b8 -> #0364a8 -> #024c80)
     - Border radii halved (matches the reviews-page polish + product cards)

   Scope:
     .bt-about-faq           — wrapper the user pastes into the WP editor
     .bt-faq-section         — each numbered card
     .bt-faq-item            — single accordion row (details element)
     .bt-faq-callout         — dark "still have a question" banner

   Self-contained — does NOT inherit from .bt-section variables. Re-declares
   the design tokens so it works whether or not extra-options.css has loaded
   above it. The accordion JS lives in about-faq.js next to this file.
============================================================================ */

.bt-about-faq {
    --bt-faq-bg:          #ffffff;
    --bt-faq-bg-soft:     #f6fafd;
    --bt-faq-ink:         #0c1a2b;
    --bt-faq-ink-2:       #16273d;
    /* DevTools pass: darker ink-soft (#4a5a6e -> #364150) so body prose
       contrasts harder against the white card bg. */
    --bt-faq-ink-soft:    #364150;
    /* DevTools pass: ink-muted darkened (#8a98a8 -> #76818d) so eyebrow
       labels + step-num lines have a touch more contrast against the
       white card bg. */
    --bt-faq-ink-muted:   #76818d;
    --bt-faq-line:        #e4ecf3;
    --bt-faq-line-soft:   #eef3f8;

    /* Session brand blue — same #0364a8 used on .bt-section-banner and the
       reviews-page polish. */
    --bt-faq-blue:        #0364a8;
    --bt-faq-blue-deep:   #024c80;
    --bt-faq-blue-mid:    #3a9de8;
    --bt-faq-blue-soft:   #b8e0f4;
    --bt-faq-blue-tint:   #eaf6fd;

    --bt-faq-orange:      #ff7a2a;
    --bt-faq-orange-soft: #ffc9a8;
    --bt-faq-orange-deep: #d65a10;
    --bt-faq-orange-tint: #fff0e6;

    --bt-faq-green:       #22b358;
    --bt-faq-green-soft:  #b8e8c8;
    --bt-faq-green-tint:  #e8f7ee;

    --bt-faq-shadow-soft: 0 1px 2px rgba(15, 60, 100, 0.04), 0 8px 24px rgba(15, 60, 100, 0.06);
    --bt-faq-shadow-pop:  0 2px 4px rgba(15, 60, 100, 0.05), 0 24px 60px rgba(15, 60, 100, 0.08);

    --bt-faq-ease:        cubic-bezier(0.16, 1, 0.3, 1);

    /* Session font tokens. Display = League 500. Body = AvenirNextCyr-Medium.
       Mono-style label = AvenirNextCyr-Medium with wide letter-spacing as a
       stand-in for Geist Mono (site doesn't ship a real monospace). */
    --bt-faq-font-display: 'League', 'avenirnextcyr-bold', 'AvenirNextCyr-Bold',
                            'Montserrat', system-ui, sans-serif;
    --bt-faq-font-body:    'avenirnextcyr-medium', 'AvenirNextCyr-Medium',
                            'Roboto', system-ui, sans-serif;
    --bt-faq-font-label:   'avenirnextcyr-bold', 'AvenirNextCyr-Bold',
                            'Roboto Mono', ui-monospace, monospace;

    display: block;
    color: var(--bt-faq-ink);
    font-family: var(--bt-faq-font-body);
    /* DevTools pass: dropped the 24px top spacer — the surrounding
       .bt-section--about card already provides its own margin-top. */
    /* margin-top: 24px; */
}
.bt-about-faq *,
.bt-about-faq *::before,
.bt-about-faq *::after { box-sizing: border-box; }

/* ============================================================================
   LIVE ACTIVITY TICKER — sits above the FAQ section cards.
============================================================================
   Translated from the lol-boosting-faq-v66 mock. Pulsing green dot +
   "LIVE" label on the left, single-line rotating activity items on the
   right (one visible at a time, faded in/out by about-faq.js).

   Markup contract (paste into .bt-about-faq as the first child):
     <div class="bt-faq-ticker" aria-live="polite">
       <span class="bt-faq-ticker-dot" aria-hidden="true"></span>
       <span class="bt-faq-ticker-label">Live</span>
       <span class="bt-faq-ticker-divider" aria-hidden="true"></span>
       <div class="bt-faq-ticker-content">
         <div class="bt-faq-ticker-item is-active">...</div>
         <div class="bt-faq-ticker-item">...</div>
         ...
       </div>
     </div>
============================================================================ */
.bt-about-faq .bt-faq-ticker {
    display: flex;
    align-items: center;
    /* Wider gap between the LIVE label, divider, and the rotating item
       column so the ticker reads as breathing-room marquee rather than
       a cramped row. Vertical padding bumped 14 -> 20 and margin-bottom
       18 -> 44 so the ticker reads as its own band, not crammed into
       the FAQ stack below it. */
    gap: 22px;
    padding: 20px 22px;
    background: var(--bt-faq-bg);
    border: 1px solid var(--bt-faq-line);
    border-radius: 3px;
    margin-bottom: 44px;
    box-shadow: var(--bt-faq-shadow-soft);
    overflow: hidden;
}
.bt-about-faq .bt-faq-ticker-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bt-faq-green);
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(34, 179, 88, 0.5);
    animation: bt-faq-ticker-pulse 2.2s infinite cubic-bezier(0.66, 0, 0, 1);
}
@keyframes bt-faq-ticker-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(34, 179, 88, 0.5); }
    70%  { box-shadow: 0 0 0 10px rgba(34, 179, 88, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 179, 88, 0); }
}
.bt-about-faq .bt-faq-ticker-label {
    /* DevTools pass: explicit Roboto + 700 + 14px for the LIVE chip.
       Reads heavier than the rotating items so the chip pops as a
       label, not just another ticker row. */
    font-family: 'Roboto', system-ui, sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bt-faq-green);
    flex-shrink: 0;
}
.bt-about-faq .bt-faq-ticker-divider {
    /* Doubled (1 -> 2px) so the divider reads as deliberate rather
       than a render artefact. */
    width: 2px;
    height: 14px;
    background: var(--bt-faq-line);
    flex-shrink: 0;
}
.bt-about-faq .bt-faq-ticker-content {
    flex: 1;
    position: relative;
    height: 18px;
    overflow: hidden;
    min-width: 0;
}
.bt-about-faq .bt-faq-ticker-item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    /* DevTools pass: ticker rows now Roboto bold @ 16px to match the
       weight of the LIVE chip on the left. Reads as a sustained heading
       across the band rather than dropping in weight after the divider. */
    font-family: 'Roboto', system-ui, sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.02em;
    /* Bigger word-spacing teases the chunks (dates / numbers / divider
       dots) apart so the item reads as a labelled feed, not a run-on. */
    word-spacing: 2px;
    color: var(--bt-faq-ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 400ms var(--bt-faq-ease),
                transform 400ms var(--bt-faq-ease);
}
.bt-about-faq .bt-faq-ticker-item.is-active {
    opacity: 1;
    transform: translateY(0);
}
.bt-about-faq .bt-faq-ticker-item em {
    font-style: normal;
    /* Brand blue + 700 weight + wider side padding (2 -> 6) so the
       emphasised chunks (rank names, codes, day counters) read as
       clickable-looking tokens against the body of the row. */
    color: #0364a8;
    font-weight: 700;
    padding: 0 6px;
}
.bt-about-faq .bt-faq-ticker-item .bt-faq-ticker-arrow {
    color: var(--bt-faq-orange);
    /* Wider margin around the arrow so "Gold IV → Plat IV" reads as
       three discrete tokens. */
    margin: 0 10px;
    font-weight: 500;
}
@media (prefers-reduced-motion: reduce) {
    .bt-about-faq .bt-faq-ticker-dot { animation: none; }
    .bt-about-faq .bt-faq-ticker-item { transition: none; }
}

/* ============================================================================
   SECTION CARD — same chrome as the product-page .bt-section cards
============================================================================ */
.bt-about-faq .bt-faq-section {
    background: var(--bt-faq-bg);
    /* DevTools pass: hairline border restored. Earlier round set border:0,
       which left the card relying on box-shadow alone — looked too
       floaty next to the bordered cards on the rest of the page. */
    border: 1px solid var(--bt-faq-line);
    /* Halved (mock 6 -> 3). */
    border-radius: 3px;
    box-shadow: var(--bt-faq-shadow-soft);
    overflow: hidden;
    /* Cards now stack with a 40px gap between them — the earlier flush
       stacking read as a single giant block. */
    margin-bottom: 40px;
    position: relative;
    opacity: 0;
    transform: translateY(20px);
    animation: bt-faq-reveal 0.7s var(--bt-faq-ease) forwards;
}
.bt-about-faq .bt-faq-section:nth-of-type(1) { animation-delay: 0.05s; }
.bt-about-faq .bt-faq-section:nth-of-type(2) { animation-delay: 0.12s; }
.bt-about-faq .bt-faq-section:nth-of-type(3) { animation-delay: 0.19s; }
.bt-about-faq .bt-faq-section:nth-of-type(4) { animation-delay: 0.26s; }
.bt-about-faq .bt-faq-section:nth-of-type(5) { animation-delay: 0.33s; }
.bt-about-faq .bt-faq-section:nth-of-type(6) { animation-delay: 0.40s; }
.bt-about-faq .bt-faq-section:nth-of-type(7) { animation-delay: 0.47s; }
.bt-about-faq .bt-faq-section:nth-of-type(8) { animation-delay: 0.54s; }
@keyframes bt-faq-reveal {
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================================
   SECTION HEAD — eyebrow row + League title + right-side badge
============================================================================ */
.bt-about-faq .bt-faq-section-head {
    padding: 20px 26px 18px;
    background: var(--bt-faq-bg-soft);
    border-bottom: 1px solid var(--bt-faq-line);
    /* DevTools pass: hairline border-top added so the eyebrow band has a
       deliberate top edge against the page background — gives the
       section-head its own contained "header strip" look rather than
       blending into the card top. */
    border-top: 1px solid var(--bt-faq-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.bt-about-faq .bt-faq-section-head-left { min-width: 0; flex: 1 1 auto; }
.bt-about-faq .bt-faq-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.bt-about-faq .bt-faq-tag {
    font-family: var(--bt-faq-font-label);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--bt-faq-orange-deep);
    background: var(--bt-faq-orange-tint);
    border: 1px solid var(--bt-faq-orange-soft);
    padding: 3px 7px;
    border-radius: 2px;
    line-height: 1;
}
.bt-about-faq .bt-faq-eyebrow-text {
    font-family: var(--bt-faq-font-label);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bt-faq-ink-muted);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bt-about-faq .bt-faq-eyebrow-text svg {
    /* DevTools pass: bumped icon glyphs 13 -> 14 so they read at parity
       with the eyebrow text x-height. */
    width: 14px;
    height: 14px;
    color: var(--bt-faq-blue-mid);
    flex-shrink: 0;
}
.bt-about-faq .bt-faq-section-title {
    font-family: var(--bt-faq-font-display);
    /* League looks best at weight 500 across the site. */
    font-weight: 500;
    font-size: 26px;
    letter-spacing: 0.005em;
    color: var(--bt-faq-ink);
    line-height: 1.2;
    text-transform: uppercase;
    margin: 0;
}
.bt-about-faq .bt-faq-section-title em {
    /* DevTools pass: dropped the italic on section-title em — League
       at weight 500 doesn't have a true italic cut, and the synthesized
       slant was reading as off-kilter. Orange colour stays. */
    /* font-style: italic; */
    font-weight: 500;
    color: var(--bt-faq-orange);
}
.bt-about-faq .bt-faq-head-badge {
    font-family: var(--bt-faq-font-label);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bt-faq-blue-deep);
    background: var(--bt-faq-blue-tint);
    border: 1px solid var(--bt-faq-blue-soft);
    padding: 6px 10px;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    white-space: nowrap;
}
.bt-about-faq .bt-faq-head-badge svg { width: 12px; height: 12px; color: var(--bt-faq-blue); }
.bt-about-faq .bt-faq-head-badge em { font-style: normal; color: var(--bt-faq-ink); font-weight: 500; }

/* ============================================================================
   SECTION BODY — lead paragraph + supporting body paragraphs
============================================================================ */
/* DevTools pass: body padding bumped vertical 24 -> 30 for more breathing
   room between the section-head border and the first paragraph. */
.bt-about-faq .bt-faq-section-body { padding: 30px 26px; }
@media (max-width: 760px) { .bt-about-faq .bt-faq-section-body { padding: 22px; } }

.bt-about-faq .bt-faq-lead {
    font-family: var(--bt-faq-font-body);
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1.45;
    color: var(--bt-faq-ink);
    margin: 0 0 12px;
}
.bt-about-faq .bt-faq-lead em {
    font-style: italic;
    font-weight: 500;
    color: var(--bt-faq-orange-deep);
}

.bt-about-faq .bt-faq-p {
    font-size: 15px;
    color: var(--bt-faq-ink-soft);
    line-height: 1.65;
    /* DevTools pass: widened the readable column from 760 -> 900 so the
       prose fills more of the card on wide screens. */
    max-width: 900px;
    margin: 0;
}
.bt-about-faq .bt-faq-p + .bt-faq-p { margin-top: 12px; }
.bt-about-faq .bt-faq-p strong { color: var(--bt-faq-ink); font-weight: 500; }

/* Inline product links — same hover-flip as the body links on product pages */
.bt-about-faq .bt-faq-p a,
.bt-about-faq .bt-faq-lead a,
.bt-about-faq .bt-faq-step-card p a,
.bt-about-faq .bt-faq-item .bt-faq-answer a {
    color: var(--bt-faq-blue-deep);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px dotted var(--bt-faq-blue-soft);
    padding: 0 1px;
    transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.bt-about-faq .bt-faq-p a:hover,
.bt-about-faq .bt-faq-lead a:hover,
.bt-about-faq .bt-faq-step-card p a:hover,
.bt-about-faq .bt-faq-item .bt-faq-answer a:hover {
    color: var(--bt-faq-orange-deep);
    border-bottom-color: var(--bt-faq-orange);
    background: var(--bt-faq-orange-tint);
    border-radius: 2px;
}

/* ============================================================================
   STATUS PILLS — small uppercase chips, one of three colour variants
============================================================================ */
.bt-about-faq .bt-faq-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.bt-about-faq .bt-faq-pill {
    font-family: var(--bt-faq-font-label);
    font-size: 12px;
    /* DevTools pass: lighter pill weight (700 -> 500) so the chips read
       as labels rather than competing with the heading. */
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: 2px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bt-about-faq .bt-faq-pill svg { width: 12px; height: 12px; }
.bt-about-faq .bt-faq-pill--green {
    color: var(--bt-faq-green);
    background: var(--bt-faq-green-tint);
    border: 1px solid var(--bt-faq-green-soft);
}
.bt-about-faq .bt-faq-pill--blue {
    color: var(--bt-faq-blue-deep);
    background: var(--bt-faq-blue-tint);
    border: 1px solid var(--bt-faq-blue-soft);
}
.bt-about-faq .bt-faq-pill--orange {
    color: var(--bt-faq-orange-deep);
    background: var(--bt-faq-orange-tint);
    border: 1px solid var(--bt-faq-orange-soft);
}

/* ============================================================================
   3-STEP CARDS — used inside "How does boosting work?" section
============================================================================ */
.bt-about-faq .bt-faq-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 760px) { .bt-about-faq .bt-faq-steps-grid { grid-template-columns: 1fr; } }

.bt-about-faq .bt-faq-step-card {
    padding: 22px;
    background: var(--bt-faq-bg-soft);
    border: 1px solid var(--bt-faq-line);
    /* Halved (mock 8 -> 4). */
    border-radius: 4px;
    overflow: hidden;
    transition: transform 300ms var(--bt-faq-ease), box-shadow 300ms var(--bt-faq-ease), border-color 300ms ease;
}
.bt-about-faq .bt-faq-step-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--bt-faq-shadow-pop);
    border-color: var(--bt-faq-blue-soft);
    background: var(--bt-faq-bg);
}
.bt-about-faq .bt-faq-step-num {
    font-family: var(--bt-faq-font-label);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bt-faq-ink-muted);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.bt-about-faq .bt-faq-step-num::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bt-faq-orange);
}
.bt-about-faq .bt-faq-step-num .num {
    color: var(--bt-faq-ink);
    font-weight: 500;
    font-size: 12px;
}
.bt-about-faq .bt-faq-step-card h3 {
    font-family: var(--bt-faq-font-display);
    font-weight: 500;
    font-size: 22px;
    letter-spacing: 0.005em;
    color: var(--bt-faq-ink);
    margin: 0 0 8px;
    line-height: 1.2;
    text-transform: uppercase;
}
.bt-about-faq .bt-faq-step-card h3 em {
    font-style: italic;
    font-weight: 500;
    color: var(--bt-faq-orange);
}
.bt-about-faq .bt-faq-step-card p {
    font-size: 14px;
    line-height: 1.55;
    color: var(--bt-faq-ink-soft);
    margin: 0;
}

/* ============================================================================
   TRUST STATS ROW — 4 vertical-rule-separated stats
============================================================================ */
.bt-about-faq .bt-faq-trust-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    /* DevTools pass: bumped 18 -> 26 so the trust-stat strip has a clearer
       break from the supporting paragraphs above it. */
    margin-top: 26px;
    padding: 18px 22px;
    background: var(--bt-faq-bg-soft);
    border: 1px solid var(--bt-faq-line);
    border-radius: 3px;
}
@media (max-width: 760px) { .bt-about-faq .bt-faq-trust-row { grid-template-columns: repeat(2, 1fr); } }
.bt-about-faq .bt-faq-trust-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
}
.bt-about-faq .bt-faq-trust-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -7px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: var(--bt-faq-line);
}
@media (max-width: 760px) { .bt-about-faq .bt-faq-trust-stat::after { display: none !important; } }
.bt-about-faq .bt-faq-trust-value {
    font-family: var(--bt-faq-font-display);
    font-size: 30px;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1;
    color: var(--bt-faq-ink);
}
.bt-about-faq .bt-faq-trust-value em {
    font-style: italic;
    font-weight: 500;
    color: var(--bt-faq-orange);
}
.bt-about-faq .bt-faq-trust-label {
    font-family: var(--bt-faq-font-label);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bt-faq-ink-muted);
    margin-top: 6px;
}

/* ============================================================================
   ACCORDION — <details>-based, JS handles smooth height (about-faq.js)
============================================================================ */
.bt-about-faq .bt-faq-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bt-about-faq details.bt-faq-item {
    border: 1px solid var(--bt-faq-line);
    border-radius: 3px;
    background: var(--bt-faq-bg);
    overflow: hidden;
    transition: border-color 220ms var(--bt-faq-ease),
                box-shadow 220ms var(--bt-faq-ease),
                background 220ms var(--bt-faq-ease);
}
.bt-about-faq details.bt-faq-item[open] {
    border-color: var(--bt-faq-blue-soft);
    box-shadow: var(--bt-faq-shadow-soft);
    background: var(--bt-faq-bg-soft);
}
.bt-about-faq details.bt-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    /* DevTools pass: question summaries switched from League (display)
       to AvenirNextCyr-Bold so the question text reads as sentence-case
       body copy with weight rather than uppercase display text. !important
       so it wins over the var(--bt-faq-font-display) declaration below. */
    font-family: 'avenirnextcyr-bold', 'AvenirNextCyr-Bold',
                 'Montserrat', system-ui, sans-serif !important;
    font-weight: 500;
    /* Reverted 18 -> 17px — the bigger size was leading awkwardly into
       the 11px Q.NN tag on the left. 17 lines up cleaner. */
    font-size: 17px;
    letter-spacing: 0.005em;
    color: var(--bt-faq-ink);
    /* text-transform: uppercase; */
    user-select: none;
}
.bt-about-faq details.bt-faq-item summary::-webkit-details-marker { display: none; }
.bt-about-faq details.bt-faq-item summary .bt-faq-q-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.bt-about-faq details.bt-faq-item summary .bt-faq-q-tag {
    font-family: var(--bt-faq-font-label);
    font-size: 11px;
    font-weight: 500;
    /* DevTools pass: tighter tracking on the Q.NN tag (.06 -> .01) so
       it reads as a numeric label, not a uppercase code label. */
    letter-spacing: 0.01em;
    color: var(--bt-faq-ink-muted);
    flex-shrink: 0;
    transition: color 220ms ease;
    /* Override the bold label font with medium so the Q.NN tag reads
       as a quieter sibling of the question prose. */
    font-family: 'avenirnextcyr-medium', 'AvenirNextCyr-Medium',
                 system-ui, sans-serif;
}
.bt-about-faq details.bt-faq-item[open] summary .bt-faq-q-tag { color: var(--bt-faq-blue-deep); }
.bt-about-faq details.bt-faq-item summary .bt-faq-chev {
    flex-shrink: 0;
    /* DevTools pass: bigger toggle target (26 -> 30) with a 2px border
       so the chevron reads as a deliberate button rather than a hairline
       hint. */
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bt-faq-ink-muted);
    background: var(--bt-faq-bg-soft);
    border: 2px solid var(--bt-faq-line);
    border-radius: 2px;
    transition: transform 280ms var(--bt-faq-ease),
                color 220ms ease,
                background 220ms ease,
                border-color 220ms ease;
}
.bt-about-faq details.bt-faq-item[open] summary .bt-faq-chev {
    transform: rotate(180deg);
    color: var(--bt-faq-blue);
    background: var(--bt-faq-blue-tint);
    border-color: var(--bt-faq-blue-soft);
}
/* DevTools pass: chevron glyph bumped 11 -> 16 to fill the bigger 30px button. */
.bt-about-faq details.bt-faq-item summary .bt-faq-chev svg { width: 16px; height: 16px; }

/* Wrapper handles the smooth height animation — JS sets explicit heights */
.bt-about-faq details.bt-faq-item .bt-faq-answer-wrap {
    height: 0;
    overflow: hidden;
    transition: height 320ms var(--bt-faq-ease);
}
.bt-about-faq details.bt-faq-item .bt-faq-answer {
    /* DevTools pass: 10px top padding (was 1px) so the answer has a
       clear separation from the chevron line above when the accordion
       opens — 1px was just enough to stop clipping but read as crammed. */
    padding: 10px 18px 16px 48px;
    color: var(--bt-faq-ink-soft);
    font-size: 14.5px;
    line-height: 1.65;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 260ms var(--bt-faq-ease) 60ms,
                transform 260ms var(--bt-faq-ease) 60ms;
}
.bt-about-faq details.bt-faq-item.is-open .bt-faq-answer {
    opacity: 1;
    transform: translateY(0);
}
@media (max-width: 760px) {
    .bt-about-faq details.bt-faq-item .bt-faq-answer { padding-left: 18px; }
}
/* DevTools pass: tightened the inter-paragraph gap in answers (10 -> 5). */
.bt-about-faq details.bt-faq-item .bt-faq-answer p { margin: 0 0 5px; }
.bt-about-faq details.bt-faq-item .bt-faq-answer p:last-child { margin-bottom: 0; }
.bt-about-faq details.bt-faq-item .bt-faq-answer strong { color: var(--bt-faq-ink); font-weight: 500; }

/* ============================================================================
   CALLOUT — dark "still have a question?" banner using session gradient
============================================================================ */
.bt-about-faq .bt-faq-callout {
    /* DevTools pass: trimmed top margin (36 -> 20) — the 36px gap was
       reading as a hard break; 20 still separates the callout from the
       FAQ stack without leaving a vertical chasm. */
    margin-top: 20px;
    padding: 40px 40px;
    /* DevTools pass: darker callout gradient — dark-blue -> mid -> brand
       brighter blue, reads more dramatic against the now-pure-white page
       and the white card grid above it. */
    background:
        radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.10), transparent 55%),
        radial-gradient(circle at 0% 100%, rgba(0, 0, 0, 0.18), transparent 55%),
        linear-gradient(135deg, #014d83 0%, #005694 80%, #0364a9 100%);
    color: #fff;
    /* Halved (mock 8 -> 4). */
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(3,100,168,.18), 0 4px 10px rgba(3,100,168,.10);
}
/* DevTools pass: orange accent strip dropped from the callout bottom —
   was competing with the orange CTA pill. ::after kept for vertical
   layout consistency but with no fill colour. */
.bt-about-faq .bt-faq-callout::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    /* background: var(--bt-faq-orange); */
}
.bt-about-faq .bt-faq-callout-eyebrow {
    font-family: var(--bt-faq-font-label);
    /* DevTools pass: bigger eyebrow (11 -> 12px) with tighter tracking
       (0.18 -> 0.08em) so the support-pitch line reads more like prose
       and less like a code label. */
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
/* DevTools pass: eyebrow icon bumped 13 -> 18px so it sits at parity
   with the bigger 12px eyebrow text. */
.bt-about-faq .bt-faq-callout-eyebrow svg { width: 18px; height: 18px; color: var(--bt-faq-orange); }
.bt-about-faq .bt-faq-callout-text {
    /* DevTools pass: switched the callout headline from League to
       AvenirNextCyr-Bold. Reason: League at this size + 'em' inside the
       headline didn't have a true italic cut, so the synthesized italic
       was unreadable. AvenirNextCyr-Bold has both a true bold + the
       weight to carry the 26px line. */
    font-family: 'avenirnextcyr-bold', 'AvenirNextCyr-Bold',
                 'Montserrat', system-ui, sans-serif;
    font-size: 26px;
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1.2;
    text-transform: uppercase;
}
.bt-about-faq .bt-faq-callout-text em {
    /* DevTools pass: italic dropped (synthesized italic on this stack
       looked off-kilter). Orange kept as a literal #ff7a2a so the value
       survives any future --bt-faq-orange variable retune. */
    /* font-style: italic; */
    font-weight: 500;
    color: #ff7a2a;
}
.bt-about-faq .bt-faq-callout a {
    background: var(--bt-faq-orange);
    color: #fff !important;
    font-family: var(--bt-faq-font-label);
    font-weight: 500;
    /* DevTools pass: CTA dropped back 16 -> 14px so the button reads
       as a button rather than competing with the .bt-faq-callout-text
       headline on the left. */
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 14px 22px;
    border-radius: 2px;
    text-decoration: none !important;
    border-bottom: none !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
    box-shadow: 0 6px 20px -6px rgba(255, 122, 42, 0.55);
}
.bt-about-faq .bt-faq-callout a:hover {
    transform: translateY(-1px);
    background: #ffffff;
    color: var(--bt-faq-blue-deep) !important;
    box-shadow: 0 10px 26px -8px rgba(255, 255, 255, 0.35);
}
/* DevTools pass: callout CTA arrow scaled with the bigger label text. */
.bt-about-faq .bt-faq-callout a svg { width: 16px; height: 16px; }

/* ============================================================================
   TRUST STRIP — third-party verification badges
============================================================================ */
.bt-about-faq .bt-faq-trust-strip {
    /* DevTools pass: tighter to the callout above (16 -> 10) but more
       internal padding (14 -> 20 vertical) so the badges have room. */
    margin-top: 10px;
    padding: 20px 18px;
    background: var(--bt-faq-bg-soft);
    border: 1px solid var(--bt-faq-line);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.bt-about-faq .bt-faq-trust-strip-label {
    font-family: var(--bt-faq-font-label);
    /* DevTools pass: bumped to 14px so the "Verified on" label reads
       at the same weight as the neighbouring badges. */
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bt-faq-ink-muted);
    font-weight: 500;
}
.bt-about-faq .bt-faq-trust-badges {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.bt-about-faq .bt-faq-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bt-faq-bg);
    border: 1px solid var(--bt-faq-line);
    border-radius: 2px;
    font-family: var(--bt-faq-font-label);
    /* DevTools pass: 12 -> 14px so the platform names sit at parity
       with the "Verified on" label on the left of the strip. */
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bt-faq-ink-soft);
}
.bt-about-faq .bt-faq-trust-badge svg { width: 12px; height: 12px; color: var(--bt-faq-green); }

/* ============================================================================
   BACK TO TOP — bottom-of-page button, links to #top anchor
============================================================================ */
.bt-about-faq .bt-faq-back-to-top {
    /* DevTools pass: top margin 36 -> 20 so the back-to-top button
       sits closer to the trust strip / callout above. 80px below
       still leaves clear space before the footer. */
    margin: 20px 0 80px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 22px;
    background: #ffffff;
    color: var(--bt-faq-blue-deep);
    /* DevTools pass: thicker (1 -> 2px) + darker (-blue-soft -> #126dad)
       border so the back-to-top button reads as a deliberate CTA rather
       than a hairline pill. #126dad is a darker brand-blue shade picked
       to sit between --bt-faq-blue (#0364a8) and --bt-faq-blue-soft
       (#b8e0f4). */
    border: 2px solid #126dad;
    border-radius: 4px;
    font-family: var(--bt-faq-font-label);
    font-weight: 500;
    /* Bumped 13 -> 16px so the "Back to top" label reads as a button
       label, not a footer line. */
    font-size: 16px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
                transform 0.2s ease, box-shadow 0.2s ease;
}
.bt-about-faq .bt-faq-back-to-top:hover {
    background: var(--bt-faq-blue-tint);
    border-color: var(--bt-faq-blue);
    color: var(--bt-faq-blue-deep);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px rgba(3, 100, 168, 0.35);
}
/* Back-to-top arrow scaled with the bigger label text. */
.bt-about-faq .bt-faq-back-to-top svg { width: 16px; height: 16px; }

/* ============================================================================
   RESPONSIVE + MOTION
============================================================================ */
@media (max-width: 600px) {
    .bt-about-faq .bt-faq-section-head { padding: 16px 18px 14px; }
    .bt-about-faq .bt-faq-section-title { font-size: 22px; }
    .bt-about-faq .bt-faq-callout-text { font-size: 20px; }
    .bt-about-faq .bt-faq-callout { padding: 18px 20px; }
    .bt-about-faq .bt-faq-trust-value { font-size: 24px; }
    .bt-about-faq .bt-faq-step-card h3 { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .bt-about-faq .bt-faq-section {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .bt-about-faq details.bt-faq-item .bt-faq-answer-wrap { transition: none !important; }
    .bt-about-faq details.bt-faq-item .bt-faq-answer { transition: none !important; }
}