@layer sections {
  /* Mission «Наша місія» and Why «Чому саме продукція SPACE BITE?» (PAGE-04), pixel-matched to
     the Figma frames (L-0052): every value is the literal Figma px. Below 1024 px the mobile frame
     (375), from 1024 px the desktop frame (1280).
     - Figma rounds the "auto" line heights to whole pixels (Montserrat 18/21.94 lays out at 22),
       so the line heights here are those integers.
     - Text boxes take the Figma TEXT node widths; the hard breaks come from the «|» / «^» markers
       in the copy (L-0053).
     - Figma centres a line together with a space typed before its hard break ("викликають ⏎");
       `white-space: pre-wrap` does the same (that space is kept and counted, a space at a soft
       wrap still hangs), so the mobile texts with such spaces use it.
     - Where the leading is odd (Montserrat 14/17, 18/25) Chrome puts the baseline 1 px higher
       than Figma; those boxes start 1 px lower (the next gap is 1 px shorter).
     - Letter-spaced centred text: Figma centres the glyphs without the trailing letter-spacing,
       so a start padding of one letter-spacing moves the line back by half of it.
     - Icons: below 1024 px the templates swap in the Figma mobile-frame drawings (frame-sized
       SVGs, 1.5 px strokes); from 1024 px the sections.py icons draw Figma's desktop frame inside
       a square SVG, so the <img> box is the Figma ICO frame and `object-fit: none` shows the SVG
       unscaled, offset by the frame's position inside it. */

  /* --- Mobile frame (<1024 px) --- */

  /* Figma colours without a global token (#e4e4e4: the wedge and the top of the Why gradient). */
  .mission,
  .why {
    --mw-grey: #e4e4e4;
  }

  /* Mission: 40 px of page white after About (Figma 1900 → 1940), 560 px frame. The wedge (28 px)
     sits inside the bottom padding and only renders when Why follows (IN-04). */
  .mission {
    position: relative;
    margin-top: 40px;
    padding-top: 119px;
    padding-bottom: 169px;
    text-align: center;
  }

  .mission--wedge {
    padding-bottom: 197px;
  }

  /* Full bleed via the section box, never 100vw. The 28 px wedge plus a 1 px full-width strip
     that runs under the top row of Why (same #e4e4e4): when the boundary falls on a sub-pixel
     position the two anti-aliased edges would otherwise leave a light hairline. */
  .mission--wedge::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px 0;
    height: 29px;
    background: var(--mw-grey);
    clip-path: polygon(0 0, 100% 28px, 100% 100%, 0 100%);
  }

  /* <picture>: ICO frame 38×37 at x 169 (centre 188, half a pixel right of the page centre). */
  .mission__icon {
    display: block;
    width: 38px;
    margin-inline: auto;
    translate: 0.5px 0;
  }

  .mission__icon img {
    width: 38px;
    height: 37px;
  }

  .mission__label {
    margin-top: 7px;
    padding-inline-start: 1.4px;
    font-size: 14px;
    line-height: 17px;
    font-weight: 400;
    color: var(--c-ink);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    overflow-wrap: anywhere;
  }

  /* Figma box 335 px; 274 px makes «…і дарують» wrap where the mobile frame breaks it, without a
     marker (a marker would leave a counted space before the break). */
  .mission__statement {
    max-inline-size: 274px;
    margin-top: 51px;
    margin-inline: auto;
    font-size: 18px;
    line-height: 22px;
    font-weight: 600;
    white-space: pre-wrap;
  }

  /* Why: 800 px frame, gradient #e4e4e4 → #eeeeee. */
  .why {
    padding-top: 92px;
    padding-bottom: 99px;
    background: linear-gradient(180deg, var(--mw-grey), var(--c-grey-150));
    text-align: center;
  }

  .why__title {
    max-inline-size: 335px;
    margin-inline: auto;
    font-size: 18px;
    line-height: 22px;
    font-weight: 400;
    text-transform: uppercase;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  /* `css_class` lands on the <picture>. Figma box 168×99 at x 115 (11.5 px right of centre). */
  .why__image {
    position: relative;
    left: 11.5px;
    display: block;
    width: 168px;
    height: 99px;
    margin-top: 43px;
    margin-inline: auto;
  }

  .why__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Two 155 px columns, 5 px apart, 30 px between the rows (Figma "Frame 3", x 30..345). */
  .why__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 155px));
    justify-content: center;
    column-gap: 5px;
    row-gap: 30px;
    margin-top: 42px;
  }

  /* The mobile frame sets the items in the alt face (--font-alt, D-22); desktop is Montserrat. */
  .why__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 10px;
    font-family: var(--font-alt);
    font-size: 14px;
    line-height: 17px;
    text-align: center;
    overflow-wrap: anywhere;
  }

  .why__item img {
    width: 12px;
    height: 10px;
  }

  /* Heart ICO 20×18 at x 178 (centre 188), then 20 px to the regular lines, 17 px to the bold. */
  .why__closing {
    max-inline-size: 335px;
    margin-top: 83px;
    margin-inline: auto;
  }

  .why__closing picture {
    display: block;
  }

  .why__closing img {
    width: 20px;
    height: 18px;
    margin-inline: auto;
    translate: 0.5px 0;
  }

  .why__closing-regular {
    margin-top: 21px;
    font-size: 14px;
    line-height: 17px;
  }

  .why__closing-bold {
    margin-top: 16px;
    font-size: 15px;
    line-height: 18px;
  }

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

  /* --- Below the 375 frame (320–374 px) --- base.css drops the «|» breaks here. The statement
     box (274 px) and the item columns (155 px, 137.5 at 320) keep or narrow below their 375 px
     measure, so their breaks still fit and come back; the closing lines run 335 px wide at 375
     and wrap on their own below it, balanced (no one-word line). */
  @media (max-width: 374.98px) {
    .mission__statement .br-m,
    .why__item .br-m {
      display: inline;
    }

    .why__closing p {
      text-wrap: balance;
    }
  }

  /* --- Desktop frame (>=1024 px) --- */
  @media (min-width: 1024px) {
    /* 73 px of page white after About (Figma 1527 → 1600), 526 px frame. */
    .mission {
      margin-top: 73px;
      padding-top: 44px;
      padding-bottom: 225px;
    }

    .mission--wedge {
      padding-bottom: 253px;
    }

    /* ICO frame 44×42 at x 619, one pixel right of centre; the 48 px SVG holds it at (2, 3),
       which is exactly the centred `object-fit: none` offset. */
    .mission__icon {
      width: 44px;
      translate: 1px 0;
    }

    .mission__icon img {
      width: 44px;
      height: 42px;
      object-fit: none;
    }

    .mission__label {
      margin-top: 16px;
      padding-inline-start: 2px;
      font-size: 20px;
      line-height: 24px;
      letter-spacing: 2px;
    }

    /* Box 1017 px at x 132 (centre 640.5). */
    .mission__statement {
      max-inline-size: 1017px;
      margin-top: 45px;
      font-size: 28px;
      line-height: 34px;
      font-weight: 500;
      white-space: normal;
      translate: 0.5px 0;
    }

    .why {
      padding-top: 114px;
      padding-bottom: 61px;
    }

    .why__title {
      max-inline-size: none;
      padding-inline-start: 3.2px;
      font-size: 32px;
      line-height: 39px;
      letter-spacing: 3.2px;
      white-space: normal;
    }

    /* 316×186 at x 495 (13 px right of centre). */
    .why__image {
      left: 13px;
      width: 316px;
      height: 186px;
      margin-top: 79px;
    }

    /* Figma LIST: 173 + 3 × 174 + 3 × 12 = 731 px at x 275 (centre 640.5). */
    .why__list {
      grid-template-columns: 173px 174px 174px 174px;
      column-gap: 12px;
      row-gap: 0;
      margin-top: 36px;
      translate: 0.5px 0;
    }

    .why__item {
      row-gap: 14px;
      font-family: var(--font);
      font-size: 15px;
      line-height: 18px;
    }

    /* The em dash (D-16) is wider than Figma's hyphen: 4 px more on each side keeps
       «смаколики в Україні —» on one line, as in the frame; centred lines do not move. */
    .why__item span {
      margin-inline: -4px;
    }

    /* ICO 24×20: the 24 px check SVG holds Figma's frame at y 2 (the centred offset). */
    .why__item img {
      width: 24px;
      height: 20px;
      object-fit: none;
    }

    /* Frame 865 px at x 208 (centre 640.5): heart ICO 32×29, 20 px gap, three 18/25 lines. */
    .why__closing {
      max-inline-size: 865px;
      margin-top: 59px;
      translate: 0.5px 0;
    }

    /* ICO 32×29: the 32 px heart SVG sits 2 px above the frame top (as drawn in the frame). */
    .why__closing img {
      width: 32px;
      height: 29px;
      object-fit: none;
      object-position: 50% -2px;
      translate: none;
    }

    .why__closing-regular,
    .why__closing-bold {
      margin-top: 0;
      font-size: 18px;
      line-height: 25px;
    }

    /* 20 px in Figma; Chrome sets an 18/25 line 1 px higher, so the lines start 1 px lower. */
    .why__closing-regular {
      margin-top: 21px;
    }
  }
}