/* ==================================================================
   FAQs page — kwizzbit/faq-page  (full /faqs page)
   Hero + live search, sticky category nav, accordion sections, CTA.
   Namespaced `.faqs` so it never collides with the small `.faq` segment
   (and its faq.js, which targets `.faq-item`). Behaviour: faq-page.js.
   ================================================================== */

  .faqs {
    background: var(--wp--preset--color--cream);
    color: var(--wp--preset--color--ink);
  }

  /* ── HERO ──────────────────────────────────────────────── */
  .faqs__hero {
    padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2.5rem, 4vw, 3.5rem);
  }
  /* Tighten the gap under the search field, mobile/tablet only (Max's ask,
     2026-08). It measured a genuine 64px — this rule's OWN bottom padding
     (40px at this width) plus .faqs__body's top padding (24px, overridden
     separately below its own base rule), verified by killing the search
     field's entrance animation and reading its true resting position (it
     carries a translateY(28px) rise that made an earlier probe misread the
     gap as negative/overlapping — a red herring, not the real number). This
     padding sits entirely BELOW the search input (search is the last child of
     .faqs__hero-inner), so shrinking it doesn't compress anything ABOVE the
     field — headline/lead spacing is untouched. Longhand `padding-bottom`,
     not the `padding-block` shorthand, so only this ONE edge is overridden;
     hero's own top padding (space above the eyebrow) is untouched.
     MUST STAY textually AFTER the base rule above — a later `padding-block`
     declaration would win the equal-specificity tie by source order and
     silently reset this back (caught by verification: the .faqs__body half of
     this same fix originally lived too early in the file and got overwritten
     this exact way). 12px is a first pass; one-line tweak if Max wants more
     or less. */
  @media (max-width: 1023px) {
    .faqs__hero { padding-bottom: 1rem; }
  }
  .faqs__hero-inner,
  .faqs__body-inner,
  .faqs__cta-inner {
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: clamp(1.25rem, 4vw, 3rem);
  }
  /* Centre the whole hub header — eyebrow, headline/hand, lead & search */
  .faqs__hero-inner { text-align: center; }
  .faqs__eyebrow {
    font-family: 'Pixelar', monospace;
    font-weight: 400;
    font-size: 19px;
    letter-spacing: 0.04em;
    color: var(--wp--preset--color--coral);
    margin: 0 0 0.5rem;
  }
  .faqs__title {
    font-family: var(--wp--preset--font-family--display);
    font-weight: 400;
    /* Matches the homepage hero headline: display token (80px), 88px at ≥1024 */
    font-size: var(--wp--preset--font-size--display);
    line-height: 0.95;
    letter-spacing: -0.10764em;
    color: var(--wp--preset--color--ink);
    margin: 0 0 1rem;
    text-wrap: balance;
  }
  @media (min-width: 1024px) {
    .faqs__title { font-size: 5.5rem; }
  }
  .faqs__title-accent { color: var(--wp--preset--color--coral); }

  /* Flashing cursor after "Ask us anything." */
  .faqs__cursor-dot {
    color: var(--wp--preset--color--coral);
    animation: faq-cursor-blink 1.1s step-end infinite;
    display: inline-block;
  }
  @keyframes faq-cursor-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .faqs__cursor-dot { animation: none; opacity: 1; }
  }

  /* Floating hand emoji — zero-width anchor, same technique as pricing */
  .faqs__hand-anchor {
    position: relative;
    display: inline-block;
    width: 0;
    overflow: visible;
  }
  .faqs__hand {
    display: block;
    position: absolute;
    bottom: calc(-0.1em - 16px);
    left: -24px;
    width: 76px;
    height: auto;
    animation: faqs-hand-float 4s ease-in-out infinite;
    will-change: transform;
    pointer-events: none;
  }
  .faqs__hand img {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
  }
  @keyframes faqs-hand-float {
    0%   { transform: translateY(0)    rotate(-2deg); }
    30%  { transform: translateY(-8px) rotate(1deg);  }
    60%  { transform: translateY(-4px) rotate(-1deg); }
    100% { transform: translateY(0)    rotate(-2deg); }
  }
  @media (max-width: 640px) {
    .faqs__hand { width: 90px; } /* 120px − 25% */
  }
  @media (prefers-reduced-motion: reduce) {
    .faqs__hand { animation: none; }
  }
  .faqs__lead {
    font-family: var(--wp--preset--font-family--body);
    font-weight: 500;
    font-size: var(--wp--preset--font-size--md);
    line-height: 1.5;
    color: var(--wp--custom--color--subcopy);
    max-width: 46ch;
    margin: 0 auto 1.75rem;
  }

  /* ── SEARCH — styled to match gateway inputs (#EEDED0 fill, no border, inset focus) */
  .faqs__search {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 480px;
    margin-inline: auto;
    background: #EEDED0;
    border: none;
    transition: box-shadow var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
  }
  .faqs__search:focus-within {
    box-shadow: inset 0 0 0 1px #D7BAAF;
  }
  .faqs__search-icon {
    flex-shrink: 0;
    margin-left: 0.875rem;
    color: #7E6E67;
  }
  .faqs__search-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    font-family: var(--wp--preset--font-family--body);
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--wp--preset--color--ink);
    padding: 0.8125rem 0.75rem;
    height: 50px;
    -webkit-appearance: none;
  }
  .faqs__search-input::placeholder { color: #7E6E67; }
  .faqs__search-input::-webkit-search-decoration,
  .faqs__search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
  /* Prevent iOS Safari auto-zoom — must be >=16px on all inputs. QA finding,
     2026-08: the 14px search field made Safari zoom the whole page in on focus.
     Same convention as contact.css / gateway.css's mobile-scoped overrides. */
  @media (max-width: 640px) {
    .faqs__search-input { font-size: 16px; }
  }
  .faqs__search-clear {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-right: 0.375rem;
    border: none;
    background: none;
    color: var(--wp--custom--color--nav-ink);
    cursor: pointer;
    border-radius: 50%;
    transition: background-color var(--wp--custom--motion--dur-fast) ease;
  }
  .faqs__search-clear:hover { background: rgba(0,0,0,0.06); }

  /* ── BODY: nav + content ───────────────────────────────── */
  .faqs__body { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem); }
  /* Second half of the search-field gap tightening (see the matching .faqs__hero
     override above) — this is the OTHER contributor to the 64px measured under
     the search field. MUST STAY textually AFTER the base rule directly above:
     an earlier draft of this same override lived up near .faqs__hero, before
     this base `padding-block` declaration, and lost the equal-specificity
     source-order tie — verification caught computed padding-top still reading
     24px, unchanged. Longhand `padding-top` only, so .faqs__body's own bottom
     padding (space below the last category / above the CTA strip) is untouched. */
  @media (max-width: 1023px) {
    .faqs__body { padding-top: 0.75rem; }
  }
  .faqs__body-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  @media (min-width: 1024px) {
    .faqs__body-inner {
      grid-template-columns: 232px 1fr;
      gap: clamp(3rem, 6vw, 6rem);
      align-items: start;
    }
  }

  /* Category nav */
  .faqs__nav { /* mobile: horizontal pill rail */ }

  /* ── COLLAPSE ON SEARCH (mobile/tablet only) ──────────────
     Max's ask, 2026-08: while a search term is active, the Topics rail is dead
     weight — it doesn't filter anything, and on a phone it's competing with the
     results for the same screen the keyboard has already halved (see the
     search-focus scroll-into-view fix, same session). faq-page.js toggles
     `.is-collapsed` from runSearch(); every other page-load a search is cleared
     it reappears.

     Scoped to <1024px: at desktop .faqs__nav is a separate STICKY SIDEBAR column
     (see the min-width:1024px block below), not a block sitting above the
     results — collapsing it there would just leave a blank column, not lift
     anything, so it stays put and desktop search behaves exactly as before.

     `.faqs__body-inner`'s `gap: 2.5rem` IS ALSO A GRID GAP, and this needed a
     second pass to get right (Max: "still too much gap even with the Topics box
     showing" caught it). GRID GAP IS NOT A MARGIN, and a negative margin on the
     COLLAPSING ITEM does not cancel it — that was the original (wrong) fix here,
     and it survived one round of verification because that test only checked
     that content.top moved by nav's OWN height delta, which is true whether or
     not the gap is cancelled (the gap is a constant present in both the before
     and after measurement, so it silently drops out of a before/after DELTA
     comparison without ever proving it reached zero). A grid's gap belongs to
     the CONTAINER, not the item, so it has to be zeroed on the container: */
  @media (max-width: 1023px) {
    .faqs__body-inner {
      transition: gap 0.32s ease;
    }
    /* :has() — same technique features-table.php/pricing.php already use for
       state-driven styling — derives straight from .faqs__nav's own
       .is-collapsed class rather than adding a second class to track in JS. */
    .faqs__body-inner:has(.faqs__nav.is-collapsed) {
      gap: 0;
    }
    .faqs__nav {
      overflow: hidden;
      transition: max-height 0.32s var(--wp--custom--motion--ease-out, ease),
                  opacity 0.32s ease;
      /* padding is NOT in this list, deliberately — see the comment below. */
    }
    /* padding:0 belongs here, not folded into the block above: at <=640px
       .faqs__nav becomes a padded panel (1.25rem 1.5rem, see the phone variant
       further down this file) — max-height:0 clips CONTENT but never touches an
       element's own padding, so without this the collapsed nav still measured
       40px tall (its top+bottom padding) no matter how far max-height dropped.
       (0,2,0) beats that block's (0,1,0), so this wins regardless of source
       order — safe to declare once, up here, covering both the tablet
       pill-rail (no padding to begin with, harmless no-op) and the phone panel.

       DELIBERATELY SNAPS INSTEAD OF EASING. faq-page.js measures `scrollHeight`
       to know how far max-height should travel, and scrollHeight includes
       padding — if padding eased in step with max-height, the target height at
       the MOMENT of expanding would be read before padding had grown back,
       under-reporting it and clipping the reveal short by the padding amount.
       Letting padding snap with the class (no transition-property entry) means
       it has already reached its final value in the same synchronous script
       turn the class toggles in, so scrollHeight is always correct at the
       instant faq-page.js reads it. The height CHANGE still reads as one
       smooth motion regardless, since it's carried entirely by max-height. */
    .faqs__nav.is-collapsed {
      opacity: 0;
      padding: 0;
      pointer-events: none;     /* pills unreachable while fading/clipped */
    }
    @media (prefers-reduced-motion: reduce) {
      .faqs__nav,
      .faqs__body-inner { transition: none; }
    }
  }

  .faqs__nav-label {
    font-family: var(--wp--preset--font-family--body);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wp--custom--color--nav-ink);
    margin: 0 0 0.875rem;
  }
  .faqs__nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .faqs__nav-list::-webkit-scrollbar { display: none; }
  .faqs__nav-link {
    display: block;
    white-space: nowrap;
    font-family: var(--wp--preset--font-family--body);
    font-weight: 500;
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--custom--color--subcopy);
    text-decoration: none;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--wp--custom--color--warm-border);
    transition: color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out),
                background-color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out),
                border-color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
  }
  .faqs__nav-link:hover { color: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); }
  .faqs__nav-link.is-active {
    color: var(--wp--preset--color--white);
    background: var(--wp--preset--color--ink);
    border-color: var(--wp--preset--color--ink);
  }

  @media (min-width: 1024px) {
    .faqs__nav {
      position: sticky;
      top: calc(88px + 1.5rem);
      max-height: calc(100vh - 88px - 3rem);
      overflow-y: auto;
    }
    .faqs__nav-list { flex-direction: column; gap: 0.25rem; overflow: visible; }
    .faqs__nav-link {
      border: none;
      padding: 0.5rem 0.75rem;
      border-left: 2px solid transparent;
    }
    .faqs__nav-link:hover { background: none; border-left-color: var(--wp--custom--color--warm-border); }
    .faqs__nav-link.is-active {
      color: var(--wp--preset--color--coral);
      background: none;
      border-left-color: var(--wp--preset--color--coral);
      font-weight: 600;
    }
  }

  /* ── CATEGORY SECTIONS ─────────────────────────────────── */
  .faqs__content { min-width: 0; }
  .faqs__category { scroll-margin-top: calc(88px + 1.5rem); }
  .faqs__category + .faqs__category { margin-top: clamp(2.5rem, 5vw, 4rem); }
  .faqs__category.is-hidden { display: none; }
  .faqs__category-title {
    /* Matches the H2 used inside article bodies (.blog-post__prose h2):
       Roobert Semimono 600, 1.625rem, tight tracking. Layout (flex + gap for
       the icon) is kept. */
    font-family: 'Roobert Semimono', monospace;
    font-weight: 600;
    font-size: 1.625rem;
    line-height: 1.05;
    letter-spacing: -0.08em;
    color: var(--wp--preset--color--ink);
    margin: 0 0 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  /* Remove divider between title and first accordion item */
  .faqs__list .faqs__item:first-child { border-top: none; }

  /* ── ACCORDION (matches .faq segment styling) ──────────── */
  .faqs__list { position: relative; }
  .faqs__item { border-top: 0.5px solid var(--wp--custom--color--faq-divider); }
  .faqs__item.is-hidden { display: none; }
  .faqs__trigger {
    width: 100%;
    background: none;
    border: none;
    padding: 1.375rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    cursor: pointer;
    text-align: left;
  }
  .faqs__question {
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--nav);
    font-weight: 600;
    line-height: 1.3;
    color: var(--wp--preset--color--ink);
    transition: color var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
  }
  .faqs__trigger:hover .faqs__question { color: var(--wp--preset--color--coral); }
  .faqs__chevron {
    flex-shrink: 0;
    width: 12px;
    height: 8px;
    color: var(--wp--preset--color--ink);
    transition: transform var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
  }
  .faqs__item.is-open .faqs__chevron { transform: rotate(180deg); }
  .faqs__item.is-open .faqs__question { color: var(--wp--preset--color--coral); }

  .faqs__panel {
    overflow: hidden;
    height: 0;
    transition: height var(--wp--custom--motion--dur-slow) var(--wp--custom--motion--ease-out);
  }
  .faqs__answer {
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--nav);
    font-weight: 500;
    line-height: 1.6;
    color: var(--wp--custom--color--subcopy);
    padding: 0 3rem 1.5rem 0;
  }
  .faqs__answer p { margin: 0 0 0.875rem; }
  .faqs__answer p:last-child { margin-bottom: 0; }
  .faqs__answer a {
    color: var(--wp--preset--color--coral);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
  /* Media explainers (future) — images + responsive video */
  .faqs__media {
    display: block;
    width: 100%;
    height: auto;
    margin: 0.5rem 0 1rem;
    border-radius: 0;
  }
  .faqs__video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0.5rem 0 1rem;
    background: var(--wp--preset--color--cream-soft, #F5EAE0);
  }
  .faqs__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  /* Editor-inserted media (kwb_faq answers): WP's own image/embed blocks
     inherit the designed media treatment automatically, so the team can
     drop images/videos in with zero class-fiddling. */
  .faqs__answer .wp-block-image { margin: 0.5rem 0 1rem; max-width: 480px; }
  .faqs__answer .wp-block-image img { display: block; width: 100%; height: auto; border-radius: 0; }
  .faqs__answer .wp-block-embed { margin: 0.5rem 0 1rem; max-width: 480px; }
  .faqs__answer .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; background: var(--wp--preset--color--cream-soft, #F5EAE0); }
  .faqs__answer .wp-block-embed__wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

  /* ── MOCK YOUTUBE VIDEO FRAME ──────────────────────────── */
  .faqs__video-mock {
    margin: 1.75rem 0 1.25rem;
    max-width: 480px;
    border-radius: 0;
    overflow: hidden;
    background: #0f0f0f;
    position: relative;
    cursor: pointer;
    user-select: none;
  }
  .faqs__video-mock__thumb {
    aspect-ratio: 16 / 9;
    background:
      linear-gradient(160deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    padding: 1.25rem;
    position: relative;
  }
  /* Subtle grid texture to feel like a real thumbnail */
  .faqs__video-mock__thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
      0deg, transparent, transparent 30px,
      rgba(255,255,255,0.02) 30px, rgba(255,255,255,0.02) 31px
    );
  }
  .faqs__video-mock__play {
    position: relative;
    z-index: 1;
    transition: transform 200ms ease;
  }
  .faqs__video-mock:hover .faqs__video-mock__play { transform: scale(1.08); }
  .faqs__video-mock__label {
    position: relative;
    z-index: 1;
    font-family: var(--wp--preset--font-family--body);
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 1.3;
    color: #ffffff;
    text-align: center;
    margin: 0;
  }
  .faqs__video-mock__channel {
    position: relative;
    z-index: 1;
    font-family: var(--wp--preset--font-family--body);
    font-weight: 500;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.65);
    margin: 0;
  }

  /* ── NO RESULTS ────────────────────────────────────────── */
  .faqs__no-results {
    font-family: var(--wp--preset--font-family--body);
    font-weight: 500;
    font-size: var(--wp--preset--font-size--nav);
    color: var(--wp--custom--color--subcopy);
    padding: 1.5rem 0;
  }
  .faqs__no-results a { color: var(--wp--preset--color--coral); text-decoration: underline; }

  /* ── CONTACT CTA ───────────────────────────────────────── */
  /* position:relative + overflow:hidden anchor the animated pixel-grain
     canvas that faq-page.js injects behind the copy (a cream-toned cousin
     of the mantra glitch field, see mantra.js/.mantra for the source effect). */
  .faqs__cta { background: #F0E3D9; padding-block: clamp(3rem, 6vw, 5rem); position: relative; overflow: hidden; }
  .faqs__cta-inner { text-align: center; position: relative; z-index: 1; }
  .faqs__cta-title {
    font-family: var(--wp--preset--font-family--display);
    font-weight: 400;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1;
    letter-spacing: -0.06em;
    color: var(--wp--preset--color--ink);
    margin: 0 0 0.5rem;
  }
  .faqs__cta-accent { color: var(--wp--preset--color--coral); }
  .faqs__cta-lead {
    font-family: var(--wp--preset--font-family--body);
    font-weight: 500;
    font-size: var(--wp--preset--font-size--md);
    color: var(--wp--custom--color--subcopy);
    margin: 0 0 1.5rem;
  }
  .faqs__cta-btn { display: inline-flex; }

  /* Header content lifts in, staggered, once the page-loader clears
     (held at frame 0 by the html.kwb-loading animation pause in base.css). */
  .faqs__eyebrow,
  .faqs__title,
  .faqs__lead,
  .faqs__search {
    animation: kwb-content-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
  .faqs__eyebrow { animation-delay: 0.05s; }
  .faqs__title   { animation-delay: 0.13s; }
  .faqs__lead    { animation-delay: 0.21s; }
  .faqs__search  { animation-delay: 0.29s; }
  @media (prefers-reduced-motion: reduce) {
    .faqs__eyebrow,
    .faqs__title,
    .faqs__lead,
    .faqs__search { animation: none; }
  }

  /* ── Reduced motion ────────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .faqs__panel { transition: none; }
    .faqs__chevron { transition: none; }
  }

  /* ── Mobile ────────────────────────────────────────────── */
  @media (max-width: 640px) {
    .faqs__title { font-size: clamp(2.25rem, 11vw, 3rem); }
    .faqs__answer { padding-right: 0; }
    .faqs__question { font-size: var(--wp--preset--font-size--sm); }
    .faqs__eyebrow { font-size: 18px; } /* Pixelar eyebrow → 16px on mobile */
    /* 16px on mobile (matches hero lead); width trimmed 35px narrower */
    .faqs__lead { font-size: 1rem; max-width: calc(min(46ch, 100%) - 35px); }
    /* CTA title → matches .hiw-step__title on mobile:
       clamp(2.25rem, 7.875vw, 2.875rem), line-height 1, letter-spacing -0.105em */
    .faqs__cta-title {
      font-size: clamp(2.25rem, 7.875vw, 2.875rem);
      line-height: 1;
      letter-spacing: -0.105em;
    }
    /* CTA lead — constrained to prevent stretching full width */
    .faqs__cta-lead { max-width: min(28ch, 88%); margin-inline: auto; }
    /* Category section headings — 15% smaller than desktop (1.625rem → ~1.375rem) */
    .faqs__category-title { font-size: 1.375rem; }
    /* Search bar — 30px narrower than desktop cap */
    .faqs__search { max-width: 450px; }
    /* Hand — further 10% reduction (68px → 61px), 10px higher, 5° clockwise */
    .faqs__hand {
      width: 61px;
      bottom: calc(-0.1em - 36px);
      animation-name: faqs-hand-float-mobile;
    }

    /* Category selector → legal "On this page" panel style, replacing the
       horizontal scrollable pill rail. Mirrors .legal__toc on mobile:
       a translucent panel, coral uppercase label, single-column text links. */
    .faqs__nav {
      padding: 1.25rem 1.5rem;
      background: rgba(255, 255, 255, 0.5);
    }
    .faqs__nav-label {
      font-size: 0.6875rem;
      color: var(--wp--preset--color--coral);
      margin-bottom: 0.75rem;
    }
    .faqs__nav-list {
      flex-direction: column;
      gap: 0.4rem;
      overflow: visible;
    }
    .faqs__nav-link {
      border: none;
      padding: 0;
      white-space: normal;
      font-weight: 500;
      font-size: 0.9375rem;
      line-height: 1.3;
      color: var(--wp--preset--color--ink);
    }
    .faqs__nav-link:hover {
      color: var(--wp--preset--color--coral);
      background: none;
      border-color: transparent;
    }
    .faqs__nav-link.is-active {
      color: var(--wp--preset--color--coral);
      background: none;
      border-color: transparent;
      font-weight: 600;
    }
    /* Suppress the PHP-primed is-active coral on the first item until the
       user taps a topic — JS adds .has-user-selected on first click. */
    .faqs__nav:not(.has-user-selected) .faqs__nav-link.is-active {
      color: var(--wp--preset--color--ink);
      font-weight: 500;
    }
  }

  /* Hand float keyframe for mobile — base rotation shifted +5° clockwise */
  @keyframes faqs-hand-float-mobile {
    0%   { transform: translateY(0)    rotate(3deg); }
    30%  { transform: translateY(-8px) rotate(6deg); }
    60%  { transform: translateY(-4px) rotate(4deg); }
    100% { transform: translateY(0)    rotate(3deg); }
  }

/* Desktop/tablet "Ask us anything" headline used to be pinned smaller and
   heavier (Roobert Semimono 600, 1.625rem) to match the article H2 — dropped
   2026-07-19 (user's call, "far nicer") so it falls back to the same larger,
   thinner display-font treatment the unscoped kwb-segment--try-cta strip
   (e.g. the how-it-works page) already uses via the base .faqs__cta-title
   rule above. All .faqs__cta-title strips (FAQ + try-cta) now match at
   every width; the ≥641px "matches the article H2" idea is gone sitewide,
   see the parallel removal in blog.css for .blog-newsletter__title. */