@layer sections {
  /* Become «Стати партнером», Partners «З нами вже працюють» and Solution «Готове касове
     рішення» (PAGE-04). Pixel-perfect pass (D-21, L-0052): every size, line height, gap and
     padding is the literal Figma value at 375 (mobile frame) and 1280 (desktop frame). Figma
     snaps line heights to whole pixels, so 16.8 / 22.4 / 24.38 … are written as 17 / 22 / 24.
     Chrome adds letter-spacing after the last letter of a line and Figma does not, so centred
     tracked text gets an inline-start padding of one letter-spacing to centre the ink.
     Mobile-first: base rules for <1024 (the tablet keeps the mobile structure, a few caps in the
     768 block), one 1024 block. Each section owns the gap above it (margin-top). */

  /* --- Mobile (<768 px) --- */

  /* Become: 60 px below present3. Image group at 50, title at 448, the CTA ends 16 px above
     the section bottom. Markup contract: the five blocks are direct children of the section's
     .container (title, intro, media, terms, CTA, heading first for AT); the image moves first
     visually. */
  .become {
    overflow-x: clip;
    margin-top: 60px;
    padding-block: 50px 16px;
    text-align: center;
  }

  .become > .container {
    display: flex;
    flex-direction: column;
  }

  /* 20/24, 10 % tracking; «Стати | партнером» breaks on mobile only. */
  .become__title {
    padding-inline-start: 2px;
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    overflow-wrap: anywhere;
  }

  /* 12/17 caps, Montserrat in every range of the Figma node (its alternate-font default is
     never drawn); the seven lines come from the copy markers. Brand names in <strong>. Spacing
     lives on this element, so an empty (omitted) intro takes its gap with it. */
  .become__intro {
    max-inline-size: 335px;
    margin-top: 22px;
    margin-inline: auto;
    font-size: 12px;
    line-height: 17px;
    font-weight: 400;
    text-transform: uppercase;
  }

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

  .become__intro :is(p, ul, ol) + :is(p, ul, ol) {
    margin-top: 17px;
  }

  /* The Figma image group (501.74 × 341, exported 1004 × 682) at x −36.37, 27 px right of
     centre, clipped by the section; its bottom margin is the image → title gap (391 → 448). */
  .become__media {
    order: -1;
    width: 502px;
    margin-bottom: 57px;
    margin-left: calc(50% - 223.87px);
  }

  /* No image in either slot: the wrapper takes no space. */
  .become__media:not(:has(img)) {
    display: none;
  }

  /* The box keeps the Figma ratio whatever rendition the srcset picks (their heights are
     rounded); another upload is letterboxed inside it, never cropped. */
  .become__media :is(picture, img) {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 502 / 341;
    object-fit: contain;
  }

  /* 14/22 list, no gap between items. Figma's list marker is the bold Montserrat «•» set
     0.571em in, the text 1.5em in (8 / 21 px here, 8.57 / 22.5 px at 15 px); the marker is
     hidden from assistive tech (alt text ""). Up to 414 px the list keeps the Figma 335 px
     measure, centred, so the 375 px lines and their «|» breaks carry over to the large phones
     instead of leaving one-word lines; wider screens have their own rule below. */
  .become__terms {
    width: 100%;
    max-inline-size: 335px;
    margin-top: 54px;
    margin-inline: auto;
    font-size: 14px;
    line-height: 22px;
    text-align: start;
  }

  .become__terms li {
    position: relative;
    padding-inline-start: 1.5em;
  }

  .become__terms li::before {
    content: "•";
    content: "•" / "";
    position: absolute;
    top: 0;
    left: 0.571em;
    font-weight: 700;
  }

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

  /* The .btn hugs its label (inline-flex); the wrapper only centres it. */
  .become__cta {
    margin-top: 75px;
    text-align: center;
  }

  /* Partners: white frame that starts 10 px above the end of Become (Figma overlap). Eyebrow at
     92, the icon grid ends 89 px above the section bottom. */
  .partners {
    margin-top: -10px;
    padding-block: 92px 89px;
    background: var(--c-white);
    text-align: center;
  }

  .partners__head {
    font-weight: 400;
  }

  /* 18/22 caps, 10 % tracking (first line of the H2 and the audience title). */
  .partners__eyebrow,
  .partners__title {
    padding-inline-start: 1.8px;
    font-size: 18px;
    line-height: 22px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    overflow-wrap: anywhere;
  }

  .partners__eyebrow {
    display: block;
  }

  /* «3000+»: 600 70 px, bottom-aligned in its 87 px Figma box (baseline 70 px down). */
  .partners__stat {
    display: block;
    margin-top: 40px;
    padding-top: 3px;
    font-size: 70px;
    line-height: 84px;
    font-weight: 600;
    letter-spacing: 0;
    font-variant-numeric: lining-nums;
  }

  /* 11/13 caps under the stat. */
  .partners__caption {
    display: block;
    font-size: 11px;
    line-height: 13px;
    font-weight: 400;
    text-transform: uppercase;
  }

  .partners__head + .partners__title {
    margin-top: 48px;
  }

  /* Three 75 px columns, 32 / 30 px gaps; the Figma grid sits 1 px right of centre. */
  .partners__grid {
    display: grid;
    grid-template-columns: repeat(3, 75px);
    column-gap: 32px;
    row-gap: 30px;
    width: max-content;
    margin-top: 63px;
    margin-left: calc(50% - 143.5px);
  }

  /* Icon frame, 7 px gap, 13/16 label. */
  .partners__type {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-align: center;
    font-size: 13px;
    line-height: 16px;
  }

  /* The Figma mobile frame (48 × 50, partners/m/*.svg); 64 × 64 desktop box from 1024. */
  .partners__type :is(picture, img) {
    display: block;
    width: 48px;
    height: 50px;
  }

  /* Solution: 20 px below Partners. Title at 82, the CTA ends 32 px above the section bottom.
     Figma gradient: #eee → #fff at 55 % of a handle 0.72 of the height long (39.6 %). */
  .solution {
    margin-top: 20px;
    padding-block: 82px 32px;
    background: linear-gradient(180deg, var(--c-grey-150) 0, var(--c-white) 39.6%);
    text-align: center;
  }

  /* The Figma title frame (x 27–350) sits 1 px right of centre. */
  .solution__head {
    padding-inline-start: 2px;
    font-weight: 400;
  }

  /* 20/24 caps, 10 % tracking; «Готове | касове рішення» breaks on mobile only. */
  .solution__title {
    display: block;
    padding-inline-start: 2px;
    font-size: 20px;
    line-height: 24px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    overflow-wrap: anywhere;
  }

  /* 12/15 caps, 10 % tracking, 22 px under the title. */
  .solution__subtitle {
    display: block;
    margin-top: 22px;
    padding-inline-start: 1.2px;
    font-size: 12px;
    line-height: 15px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    overflow-wrap: anywhere;
  }

  /* 2 × 2 of 150 px items, 30 px gaps (330 px from a 335 px container, i.e. 375 up); on
     narrower phones the gap and then the columns give way, so 320 px has no page scroll. */
  .solution__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 150px));
    justify-content: center;
    column-gap: clamp(16px, 100% - 2 * 150px, 30px);
    row-gap: 30px;
    margin-top: 52px;
  }

  /* 60 × 60 icon frame, 5 px gap, 12/15 text. */
  .solution__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
    font-size: 12px;
    line-height: 15px;
    overflow-wrap: anywhere;
  }

  .solution__item :is(picture, img) {
    display: block;
    width: 60px;
    height: 60px;
  }

  /* 700 15/18 lead; «Натисніть кнопку нижче, |» breaks on mobile, the rest wraps at 335. With
     no items the lead follows the head with the same gap as the list. */
  .solution__lead {
    max-inline-size: 335px;
    margin-top: 65px;
    margin-inline: auto;
    font-size: 15px;
    line-height: 18px;
    font-weight: 700;
  }

  .solution__head + .solution__lead {
    margin-top: 52px;
  }

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

  .solution__cta {
    margin-top: 47px;
    text-align: center;
  }

  /* Empty lead: the CTA follows the list with the list → lead gap. */
  .solution__list + .solution__cta {
    margin-top: 65px;
    text-align: center;
  }

  /* --- Below the 375 frame (320–374 px) --- base.css drops the «|» breaks here. The headings,
     the intro and the CTA lead are far shorter than the narrowest box, so they keep their Figma
     breaks; the solution items wrap on their own, the terms too, without a one-word last line. */
  @media (max-width: 374.98px) {
    .become__title .br-m,
    .become__intro .br-m,
    .partners__head .br-m,
    .partners__title .br-m,
    .solution__head .br-m,
    .solution__lead .br-m {
      display: inline;
    }

    .become__terms li {
      text-wrap: pretty;
    }
  }

  /* --- From 415 px: the terms take the desktop 488 px measure (or the container, if
     narrower), and the mobile-only breaks (made for 314 px lines) give way to natural wrapping;
     `pretty` keeps a single word off the last line of an item, «20–22 °C» stays together.
     The desktop rule below places the list in its grid column. --- */
  @media (min-width: 415px) {
    .become__terms {
      max-inline-size: 488px;
    }

    .become__terms .br-m {
      display: none;
    }

    .become__terms li {
      text-wrap: pretty;
    }
  }

  /* --- Tablet (768–1023 px): the mobile layout, with the terms set as on desktop — 15/24 in
     the 488 px column, so they wrap as the desktop frame does. --- */
  @media (min-width: 768px) {
    .become__terms {
      font-size: 15px;
      line-height: 24px;
    }
  }

  /* --- Desktop (>=1024 px) --- */
  @media (min-width: 1024px) {
    /* 46 px below present3; title at 85, the CTA ends 74 px above the section bottom. */
    .become {
      margin-top: 46px;
      padding-block: 85px 74px;
    }

    /* Title, intro and CTA span the container (centred on the page); media in column 1 at the
       container start (x 103), terms in column 3 (x 657, 488 wide). The two fr tracks share
       the free space 117.5 : 32.5, which is the Figma 1280 layout exactly. */
    .become > .container {
      display: grid;
      grid-template-columns:
        minmax(0, 437px) minmax(0, 117.5fr) minmax(0, 488px) minmax(0, 32.5fr);
      align-items: start;
    }

    /* 32/39, 10 % tracking, one line. */
    .become__title {
      grid-column: 1 / -1;
      padding-inline-start: 3.2px;
      font-size: 32px;
      line-height: 39px;
      letter-spacing: 3.2px;
    }

    /* 14/20 caps in the 704 px Figma box. */
    .become__intro {
      grid-column: 1 / -1;
      justify-self: center;
      width: 704px;
      max-inline-size: 100%;
      margin-top: 27px;
      font-size: 14px;
      line-height: 20px;
    }

    .become__intro :is(p, ul, ol) + :is(p, ul, ol) {
      margin-top: 20px;
    }

    /* Figma keeps the typed space before its desktop soft return («…SPACE CHOCOLATE ⏎») in
       the centred line; Chrome hangs a space before <br>. One Montserrat space (250 units)
       after a brand name that ends a line on both viewports (the plain <br> of «|^») puts
       that line 1.75 px left, as in Figma. Mobile has no such space, so desktop only. */
    .become__intro :is(strong, b):has(+ br:not([class])) {
      margin-inline-end: 0.25em;
    }

    /* 437 × 297 at x 103, 6 px lower than the terms. */
    .become__media {
      grid-column: 1;
      order: 0;
      width: min(100%, 437px);
      margin-top: 78px;
      margin-bottom: 0;
      margin-left: 0;
      justify-self: start;
    }

    .become__media :is(picture, img) {
      aspect-ratio: 437 / 297;
    }

    /* 15/24; marker and text indents scale with the font size (8.57 / 22.5 px). */
    .become__terms {
      grid-column: 3;
      width: 100%;
      max-inline-size: none;
      margin-top: 72px;
      margin-inline: 0;
      font-size: 15px;
      line-height: 24px;
    }

    .become__cta {
      grid-column: 1 / -1;
      margin-top: 78px;
    }

    /* Empty states: whichever of media / terms is left centres across the row. */
    .become > .container:not(:has(.become__terms)) .become__media {
      grid-column: 1 / -1;
      justify-self: center;
    }

    .become > .container:not(:has(.become__media img)) .become__terms {
      grid-column: 1 / -1;
      justify-self: center;
      max-inline-size: 488px;
    }

    /* 10 px below Become; eyebrow at 112, the icon row ends 171 px above the section bottom. */
    .partners {
      margin-top: 10px;
      padding-block: 112px 171px;
    }

    /* The Figma header block is centred 8 px left of the icon row (x 632.5 vs 640.5). */
    .partners__head,
    .partners__title {
      padding-inline-end: 16px;
    }

    .partners__eyebrow,
    .partners__title {
      padding-inline-start: 2.8px;
      font-size: 28px;
      line-height: 34px;
      letter-spacing: 2.8px;
    }

    /* 600 80 px centred in its 87 px Figma box. */
    .partners__stat {
      margin-top: 25px;
      padding-top: 0;
      font-size: 80px;
      line-height: 87px;
    }

    /* 16 px caps in a 20 px box, baseline 16 px down (Figma). */
    .partners__caption {
      padding-top: 1px;
      font-size: 16px;
      line-height: 19px;
    }

    .partners__head + .partners__title {
      margin-top: 69px;
    }

    /* Nine 75 px items with 50 px gaps fill the 1075 container at 1280; the gap shrinks with
       the container below that (35.6 px at 1024). More than nine types wrap into centred rows
       (WR-02, `--n` is capped at nine in sections.py). */
    .partners__grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      column-gap: clamp(8px, (100% - 9 * 75px) / 8, 50px);
      row-gap: 30px;
      width: auto;
      margin-top: 38px;
      margin-left: 0;
    }

    /* min-width 0: a label wider than 75 px («Спортзали», 78) overflows its item evenly, as
       the Figma auto-width text does, instead of widening the item. */
    .partners__type {
      flex: 0 0 75px;
      min-width: 0;
      gap: 12px;
      font-size: 14px;
      line-height: 17px;
    }

    /* Figma sets the 14/17 label baseline 14 px below its box top, Chrome 13. */
    .partners__type span {
      position: relative;
      top: 1px;
    }

    .partners__type :is(picture, img) {
      width: 64px;
      height: 64px;
    }

    /* Directly below Partners; title at 132, the CTA ends 122 px above the section bottom. */
    .solution {
      margin-top: 0;
      padding-block: 132px 122px;
    }

    .solution__head {
      padding-inline-start: 0;
    }

    /* 43/52, 10 % tracking, one line. */
    .solution__title {
      padding-inline-start: 4.3px;
      font-size: 43px;
      line-height: 52px;
      letter-spacing: 4.3px;
    }

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

    /* Four 220 px items, 50 px gaps (1030 px, centred); the gap shrinks below 1280. */
    .solution__list {
      grid-template-columns: repeat(4, 220px);
      column-gap: clamp(8px, (100% - 4 * 220px) / 3, 50px);
      margin-top: 73px;
    }

    .solution__item {
      gap: 20px;
      font-size: 15px;
      line-height: 18px;
    }

    .solution__item :is(picture, img) {
      width: 96px;
      height: 64px;
    }

    /* 700 16/20, «… зафіксувати ^» breaks on desktop only. Figma sets the baseline 16 px
       below the box top, Chrome 15: the lead moves down 1 px without moving the CTA. */
    .solution__lead {
      position: relative;
      top: 1px;
      max-inline-size: none;
      margin-top: 64px;
      font-size: 16px;
      line-height: 20px;
    }

    .solution__head + .solution__lead {
      margin-top: 73px;
    }

    .solution__cta {
      margin-top: 54px;
    }

    .solution__list + .solution__cta {
      margin-top: 64px;
    }
  }
}