@layer sections {
  /* FAQ «Часті питання» (PAGE-05). A native <details name="faq"> exclusive accordion inside
     .container--narrow (650): zero JS. Pixel-perfect pass (L-0052, D-21): the literal Figma
     values — mobile frame 1478:1525 (375) below 1024 px, desktop frame 466:3302 (1280) from
     1024 px. The section starts right after Solution's white end (gap 0); the white gap before
     the footer is the footer's margin-top (footer.css). */

  /* --- Mobile and tablet (<1024 px): Figma 1478:1525 --- */
  .faq {
    padding-block: 98px 119px;
  }

  /* 1478:1566: Montserrat 400 20/28, caps, no tracking on mobile; Figma centres it 1 px right of
     the column centre (x 102 + 173 in 20..355), hence the 2 px start padding. */
  .faq__title {
    padding-inline-start: 2px;
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }

  /* Title box bottom 126 -> first question 167. */
  .faq__list {
    margin-top: 41px;
  }

  /* Each Figma QUESTION frame: 20 px top/bottom padding, a 1 px black stroke inside its
     bottom edge (so 19 px of padding + the 1 px border); the first item has no top line. */
  .faq__item {
    border-bottom: 1px solid var(--c-black);
  }

  /* The QUESTION row: text (fills the row minus the 24 px icon, no gap: SPACE_BETWEEN) and the
     icon, centred on the cross axis. The whole row is the click target. */
  .faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding-block: 20px 19px;
    cursor: pointer;
    list-style: none;
  }

  /* Open: the ANSWER frame's own 18 px top padding follows the row directly. */
  .faq__item[open] .faq__q {
    padding-bottom: 0;
  }

  .faq__q::-webkit-details-marker {
    display: none;
  }

  /* The Phase-2 link ring around the whole row. */
  .faq__q:focus-visible {
    outline: 2px solid var(--c-black);
    outline-offset: 2px;
    border-radius: 2px;
  }

  /* 1478:1537 & co.: Montserrat 700 15 px, lines 18 px apart. Figma's text box is 7 px shorter
     than its lines (11 / 29 / 47 px for 1 / 2 / 3 lines), so the row is max(24, 18n - 7):
     the -3.5 px block margins reproduce that box and its baselines. min-width lets a long word
     wrap inside the flex row instead of pushing the icon. */
  .faq__q-text {
    flex: 1 1 auto;
    min-width: 0;
    margin-block: -3.5px;
    font-size: 15px;
    line-height: 18px;
    font-weight: 700;
    text-align: start;
    overflow-wrap: anywhere;
  }

  /* A hand break («|^») splits the question in two; in a row wider than Figma's 311 px the
     part before it must not end in a one-word line. Questions without one keep their Figma
     wrapping (pretty would rewrap «…для / бухгалтерії?» at 375). */
  .faq__q-text:has(br) {
    text-wrap: pretty;
  }

  /* Pure-CSS plus/minus (ICO OPEN / ICO CLOSE): two 14×2 bars with 1 px round ends in a 24 px
     box, the vertical one turns flat when open. */
  .faq__icon {
    position: relative;
    flex: none;
    width: 24px;
    height: 24px;
  }

  .faq__icon::before,
  .faq__icon::after {
    content: "";
    position: absolute;
    inset: 11px 5px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
  }

  .faq__icon::after {
    rotate: 90deg;
  }

  .faq__item[open] .faq__icon::after {
    rotate: 0deg;
  }

  /* 1478:1540 ANSWER: 18 px top padding; 1478:1541 Montserrat 400 14 px, lines 17 px apart.
     Figma's 17 px lines put the glyphs 1 px lower than the browser's, so 19 + 18 here keeps the
     item height (155) and lands the ink on Figma's. Sanitised rich text. */
  .faq__a {
    padding-block: 19px 18px;
    font-size: 14px;
    line-height: 17px;
    font-weight: 400;
    /* Figma draws only the first answer (open, no short last line); the others, and every
       answer between the frames, wrap without a one-word last line. */
    text-wrap: pretty;
  }

  .faq__a :is(p, ul, ol) + :is(p, ul, ol) {
    margin-top: var(--space-3);
  }

  .faq__a :is(ul, ol) {
    padding-inline-start: var(--space-4);
  }

  .faq__a :is(strong, b) {
    font-weight: 700;
  }

  /* Links inside text are always underlined: never colour-only. */
  .faq__a a {
    text-decoration: underline 1px;
    text-underline-offset: 4px;
  }

  @media (hover: hover) {
    .faq__q:hover .faq__q-text {
      text-decoration: underline 1px;
      text-underline-offset: 4px;
    }
  }

  /* Optional motion: only when the user allows it and the browser can animate to `auto`.
     Otherwise the toggle is instant. */
  @media (prefers-reduced-motion: no-preference) {
    @supports (interpolate-size: allow-keywords) {
      .faq {
        interpolate-size: allow-keywords;
      }

      .faq__item::details-content {
        block-size: 0;
        overflow: clip;
        transition:
          block-size 200ms ease,
          content-visibility 200ms allow-discrete;
      }

      .faq__item[open]::details-content {
        block-size: auto;
      }

      .faq__icon::after {
        transition: rotate 150ms ease;
      }
    }
  }

  /* Wider than the large phones (415–1023, no Figma frame): the mobile-only breaks («|») were
     set for the 335 px mobile text box; in the wider column (up to 650 px) they would leave a
     short ragged first line. Up to 414 px they keep the Figma 375 lines. */
  @media (min-width: 415px) {
    .faq__a .br-m {
      display: none;
    }
  }

  /* --- Desktop (>=1024 px): Figma 466:3302 --- */
  @media (min-width: 1024px) {
    /* The title's Figma box starts at 55; its glyphs sit 1 px lower than the browser draws
       them in a 44.8 px line, so the padding is 56 and the list margin 1 px less. */
    .faq {
      padding-block: 56px 163px;
    }

    /* 466:3343: Montserrat 400 32/44.8, tracking 10 %. The browser adds the tracking after the
       last letter too; a start padding of the same 3.2 px centres the letters as Figma does. */
    .faq__title {
      padding-inline-start: 3.2px;
      font-size: 32px;
      line-height: 44.8px;
      letter-spacing: 3.2px;
    }

    /* Title box -> first question at 132. */
    .faq__list {
      margin-top: 31.2px;
    }

    /* 466:3314 & co.: 700 16 px, lines 20 px apart, Figma box 20n - 9 px. */
    .faq__q-text {
      margin-block: -4.5px;
      font-size: 16px;
      line-height: 20px;
    }

    /* 466:3318: 400 16 px, lines 20 px apart. */
    .faq__a {
      font-size: 16px;
      line-height: 20px;
    }
  }
}