@import "reset.css";

/* ============================================================
   FONTS
   ============================================================ */
/* e-Ukraine self-hosted (per Figma specs) */
    @font-face {
      font-family: 'e-Ukraine';
      src: url('../fonts/e-Ukraine-Light.otf') format('opentype');
      font-weight: 300;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'e-Ukraine';
      src: url('../fonts/e-Ukraine-Regular.otf') format('opentype');
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'e-Ukraine';
      src: url('../fonts/e-Ukraine-Medium.otf') format('opentype');
      font-weight: 500;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: 'e-Ukraine';
      src: url('../fonts/e-Ukraine-Bold.otf') format('opentype');
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }

/* IBM Plex Mono — self-hosted (no network dependency on load) */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono/ibm-plex-mono-cyrillic-ext-400.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono/ibm-plex-mono-cyrillic-400.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono/ibm-plex-mono-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono/ibm-plex-mono-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono/ibm-plex-mono-cyrillic-ext-500.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono/ibm-plex-mono-cyrillic-500.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono/ibm-plex-mono-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono/ibm-plex-mono-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono/ibm-plex-mono-cyrillic-ext-600.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono/ibm-plex-mono-cyrillic-600.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono/ibm-plex-mono-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono/ibm-plex-mono-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono/ibm-plex-mono-cyrillic-ext-700.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono/ibm-plex-mono-cyrillic-700.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono/ibm-plex-mono-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono/ibm-plex-mono-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================
   BASE + COMPONENTS + GLOBAL (page shell)
   ============================================================ */
/* ============================================================
       TOKENS — Figma 7058-11115 exact specs
       ============================================================ */
    :root {
      --c-black: #000;
      --c-white: #fff;
      --c-blue: #3964FB;
      --c-blue-dark: #0039FF;
      --c-blue-tint-10: rgba(57, 100, 251, 0.10);
      --c-blue-tint-19: rgba(19, 127, 236, 0.1);
      --c-blue-soft: #F0F7FF;
      --c-yellow: #FCF240;
      --c-text: #000;
      --c-text-muted: #636363;
      --c-text-light: rgba(0, 0, 0, 0.3);
      --c-text-soft: rgba(0, 0, 0, 0.8);
      --c-bg: #fff;
      --c-bg-soft: #F6F6F6;
      --c-border: #E0E0E0;
      --c-border-card: #E2E8F0;
      --c-border-button: rgba(0, 0, 0, 0.16);
      --c-counter-red: #EE3131;
      --c-divider-soft: rgba(226, 232, 240, 0.2);

      --font-body: "e-Ukraine", "Inter", system-ui, -apple-system, "Helvetica Neue", sans-serif;
      --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
      --font-decor: var(--font-body);

      --container-max: 1280px;
      --header-h: 75px;
      --transition: 0.25s ease;
      /* entrance easing — gentle ease-out for reveal-on-scroll (see MOTION block) */
      --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* ============================================================
       RESET
       ============================================================ */
    .sr_only {
      position: absolute; width: 1px; height: 1px;
      padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0,0,0,0); white-space: nowrap; border: 0;
    }
    .container {
      max-width: var(--container-max);
      margin: 0 auto;
      padding: 0 10px;
    }

    /* ============================================================
       HEADER (Figma node 7058:11187/11188 — height 75px)
       ============================================================ */
    .site_header {
      position: sticky;
      top: 0;
      z-index: 50;
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      background: rgba(255, 255, 255, 0.92);
      border-bottom: 1px solid var(--c-border);
      height: var(--header-h);
    }
    .site_header__inner {
      max-width: var(--container-max);
      margin: 0 auto;
      display: flex;
      align-items: stretch;
      justify-content: space-between;
      height: var(--header-h);
    }
    .site_header__left {
      display: flex;
      align-items: stretch;
      flex: 0 0 auto;
    }
    .burger {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 5px;
      width: 100px;
      padding: 10px 0;
    }
    .burger__lines { display: flex; flex-direction: column; gap: 5px; width: 35px; }
    .burger__lines span { height: 4px; background: var(--c-black); display: block; }
    .burger__label {
      font-family: var(--font-mono);
      font-weight: 600;
      font-size: 11px;
      letter-spacing: 0.27em;
      text-transform: uppercase;
      line-height: 1;
    }
    .catalog_btn {
      background: var(--c-bg-soft);
      padding: 0 35px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-mono);
      font-weight: 600;
      font-size: 14px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      height: 75px;
    }
    .catalog_btn__icon {
      display: grid;
      grid-template-columns: 7.085px 7.085px;
      grid-template-rows: 7.085px 7.085px;
      gap: 2px;
      flex-shrink: 0;
    }
    .catalog_btn__icon span {
      background: var(--c-black);
      display: block;
    }
    .catalog_btn__icon span:last-child {
      background: transparent;
      border: 1px solid var(--c-black);
    }
    .site_header__search {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 75px;
    }
    .site_header__search svg { width: 22px; height: 22px; }
    .site_header__center {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 0 16px;
    }
    .site_header__logo-text {
      width: 104px;
      height: 32px;
      flex-shrink: 0;
    }
    .site_header__logo-mark {
      width: 32px; height: 32px;
      flex-shrink: 0;
      position: relative;
    }
    .site_header__logo-mark .es_frame {
      width: 100%; height: 100%;
      border: 1px solid var(--c-black);
      display: grid;
      place-items: center;
      font-family: var(--font-mono);
      font-weight: 700;
      font-size: 13px;
      color: var(--c-black);
    }
    .site_header__logo-mark .es_llc {
      position: absolute;
      top: -2px; right: -10px;
      font-size: 5px;
      line-height: 1;
      color: var(--c-blue);
      font-family: var(--font-body);
    }
    .site_header__right {
      display: flex;
      align-items: center;
      gap: 24px;
      padding: 0 20px;
    }
    .site_header__phone {
      display: flex;
      align-items: center;
      gap: 9px;
      font-family: var(--font-mono);
      font-weight: 600;
      font-size: 14px;
      color: #212121;
    }
    .site_header__phone-icon {
      width: 20px; height: 20px;
      background: var(--c-black);
      color: white;
      display: grid;
      place-items: center;
      border-radius: 2px;
      flex-shrink: 0;
    }
    .site_header__phone-icon svg { width: 12px; height: 12px; fill: currentColor; }
    .chev {
      display: inline-block;
      width: 6px; height: 6px;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: rotate(45deg);
      vertical-align: middle;
    }
    .site_header__lang {
      display: flex;
      align-items: center;
      gap: 4px;
      font-family: var(--font-mono);
      font-weight: 600;
      font-size: 14px;
      color: #212121;
    }
    .site_header__icons { display: flex; align-items: center; gap: 15px; }
    .site_header__icon-btn {
      display: grid;
      place-items: center;
      position: relative;
    }
    .site_header__icon-btn svg { width: 24px; height: 24px; }
    .basket_counter {
      position: absolute;
      top: -6px; right: -6px;
      min-width: 18px; height: 18px;
      padding: 0 4px;
      background: var(--c-counter-red);
      color: white;
      border: 2px solid white;
      border-radius: 999px;
      font-size: 8px;
      font-weight: 700;
      letter-spacing: -0.04em;
      display: grid;
      place-items: center;
      font-family: var(--font-body);
    }

    /* ============================================================
       BREADCRUMBS + HERO container
       Figma: hero top: 96px; left col 662 + right col 540 + gap 38
       ============================================================ */
    .hero_section {
      padding-top: 30px;
    }
    .hero_grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 32px;
    }
    .hero_left {
      display: flex;
      flex-direction: column;
      gap: 29px;
      max-width: 662px;
      min-width: 0;
    }

    /* Breadcrumbs */
    .breadcrumbs {
      font-family: var(--font-body);
      font-size: 12px;
      line-height: 1;
    }
    .breadcrumbs__list {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }
    .breadcrumbs__list a {
      color: var(--c-black);
      display: inline-flex;
      align-items: center;
    }
    .breadcrumbs__list a:hover { color: var(--c-blue); }
    .breadcrumbs__sep {
      width: 6px; height: 6px;
      border-right: 1.5px solid var(--c-black);
      border-bottom: 1.5px solid var(--c-black);
      transform: rotate(-45deg);
      opacity: 0.7;
    }
    .breadcrumbs__current { color: var(--c-text-light); }

    /* Hero content stack */
    .hero_content {
      display: flex;
      flex-direction: column;
      gap: 45px;
      width: 100%;
    }
    .hero_stack {
      display: flex;
      flex-direction: column;
      gap: 24px;
      max-width: 656px;
    }
    .hero_headline {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .hero_chip {
      align-self: flex-start;
      background: var(--c-black);
      color: var(--c-white);
      padding: 9px 8px;
      font-size: 12px;
      font-weight: 400;
      line-height: 1.1;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }
    .hero_h1 {
      font-family: var(--font-body);
      font-weight: 500;
      font-size: clamp(24px, 4.5vw, 36px);
      line-height: 1.25;
      color: var(--c-black);
      margin: 0;
      font-style: normal;
      word-break: break-word;
      hyphens: auto;
    }
    .hero_h1__accent { color: var(--c-blue); }
    .hero_sub {
      font-family: var(--font-body);
      font-weight: 400;
      font-size: 14px;
      line-height: 1.7;
      color: var(--c-text-muted);
      max-width: 656px;
      margin: 0;
    }
    .hero_actions {
      display: flex;
      flex-direction: column;
      gap: 28px;
      max-width: 609px;
    }
    .hero_cta_col {
      display: flex;
      flex-direction: column;
      gap: 22px;
    }
    .btn-primary,
    .btn-outline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      height: 60px;
      padding: 0 18px;
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 14px;
      line-height: 1.2;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      white-space: nowrap;
      transition: background var(--transition), color var(--transition), border-color var(--transition);
      border: 1px solid transparent;
    }
    .btn-primary {
      background: var(--c-blue);
      color: var(--c-white);
    }
    .btn-primary:hover { background: #2a55ea; }
    .btn-primary:active { background: var(--c-blue-dark); }
    .btn-outline {
      background: transparent;
      color: var(--c-black);
      border-color: var(--c-black);
    }
    .btn-outline:hover { background: var(--c-black); color: var(--c-white); }
    /* hero CTA button text trimmed 14 -> 13 */
    .hero_actions .btn-primary,
    .hero_actions .btn-outline { font-size: 13px; }
    .btn-arrow {
      width: 16px; height: 16px;
      flex-shrink: 0;
      display: grid;
      place-items: center;
    }
    .btn-arrow::after {
      content: '';
      width: 8px; height: 8px;
      border-right: 1.5px solid currentColor;
      border-top: 1.5px solid currentColor;
      transform: rotate(45deg);
      margin-left: -2px;
    }
    .hero_cta_note {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      line-height: 1.5;
      letter-spacing: 0.01em;
    }
    .hero_cta_note__text { flex: 1; }
    .hero_cta_note__icon {
      width: 36px; height: 36px;
      flex-shrink: 0;
      display: grid;
      place-items: center;
      color: var(--c-blue);
    }
    .hero_cta_note__icon svg { width: 22px; height: 22px; fill: currentColor; }

    /* ============================================================
       HERO RIGHT — фото + overlay
       Figma: 540px wide, contains bg image, manager-card overlay, decor strip top-right
       ============================================================ */
    .hero_right {
      position: relative;
      width: 100%;
      max-width: 540px;
      aspect-ratio: 540 / 600;
      align-self: stretch;
    }
    .hero_right__photo {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
    }
    .hero_right__decor-top {
      position: absolute;
      top: 0;
      right: 0;
      width: 410px;
      max-width: calc(100% - 30px);
      height: 18px;
      pointer-events: none;
    }
    .hero_right__decor-top img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .hero_right__corner-notch {
      position: absolute;
      bottom: -28px; left: -29px;
      width: 56px; height: 56px;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }
    .hero_right__corner-notch::before {
      content: '';
      width: 40px; height: 40px;
      background: var(--c-white);
      transform: rotate(-45deg);
    }
    /* Tablet (single-column hero): the 540px cap left empty space to the right —
       stretch the photo to the full column width as a landscape banner instead. */
    @media (min-width: 600px) and (max-width: 1023px) {
      .hero_right {
        max-width: none;
        aspect-ratio: 16 / 10;
      }
    }

    /* Manager card overlay — bottom of photo */
    /* ============================================================
       DECORATION COORDINATE STRIP (Figma node 7058:11480)
       ============================================================ */
    .deco_strip {
      max-width: var(--container-max);
      margin: 60px auto 0;
      padding: 0 20px;
      display: flex;
      align-items: center;
      gap: 15px;
      font-family: var(--font-decor);
      font-size: 8px;
      letter-spacing: 0.01em;
      color: rgba(0, 0, 0, 0.6);
      text-transform: uppercase;
      line-height: 1.3;
    }
    .deco_strip__group {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      min-width: 0;
    }
    .deco_strip__group > span { white-space: nowrap; flex-shrink: 0; }
    .deco_strip__line {
      flex: 1 1 0;
      max-width: 130px;
      height: 1px;
      background: var(--c-border-card);
    }
    .deco_strip__dot {
      width: 5px; height: 5px;
      background: rgba(0,0,0,0.6);
      flex-shrink: 0;
      display: inline-block;
    }

    /* ============================================================
       DECISION SECTION (Figma node 7058:11299)
       ============================================================ */
    .decision {
      padding: 60px 0 80px;
    }
    .decision__head {
      display: flex;
      flex-direction: column;
      gap: 25px;
      margin: 0 0 32px;
    }
    .decision__head-text {
      display: flex;
      flex-direction: column;
      gap: 25px;
      max-width: 767px;
    }
    .decision__title {
      font-family: var(--font-body);
      font-weight: 500;
      font-size: clamp(20px, 3.2vw, 32px);
      line-height: 1.3;
      color: var(--c-black);
      margin: 0;
    }
    .decision__title-accent { color: var(--c-blue); }
    .decision__sub {
      font-family: var(--font-body);
      font-weight: 400;
      font-size: 17px;
      line-height: 1.61;
      color: var(--c-black);
      margin: 0;
    }
    .decision__sub-accent { color: var(--c-blue); }

    /* ============================================================
       AUTHOR CARD (Figma 7627:2520) — author byline in decision head.
       Mobile: stacked above the heading (order:-1). Desktop (≥1024):
       fixed 385px column to the right of the heading text.
       ============================================================ */
    .author_card {
      order: -1;            /* mobile: sits before the heading */
      display: flex;
      flex-direction: column;
      gap: 6px;
      width: 100%;
      box-sizing: border-box;
    }
    .author_card__main {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 16px;
      background: var(--c-bg-soft);
    }
    .author_card__profile {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
    /* photo (left) + [identity | social] on one row */
    .author_card__user {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 8px;
    }
    .author_card__identity {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .author_card__name {
      margin: 0;
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 13px;
      line-height: 1.4;
      color: var(--c-black);
    }
    .author_card__role {
      margin: 0;
      font-family: var(--font-body);
      font-weight: 300;
      font-size: 11px;
      line-height: 1.5;
      color: var(--c-text-soft);
    }
    .author_card__social {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .author_card__social-chip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 4px;
      background: rgba(37, 38, 83, 0.04);
    }
    .author_card__social-chip img {
      display: block;
      width: 18px;
      height: 18px;
    }
    .author_card__photo {
      flex-shrink: 0;
      width: 36px;
      height: 36px;
      overflow: hidden;
      background: #e8e8ec;
    }
    .author_card__photo img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
    }
    .author_card__verify {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 6px 6px 10px;
      background: var(--c-white);
    }
    .author_card__verify-icon {
      flex-shrink: 0;
      display: inline-flex;
    }
    .author_card__verify-icon img {
      display: block;
      width: 14px;
      height: 14px;
    }
    .author_card__verify-label {
      flex: 1 1 0;
      min-width: 0;
      font-family: var(--font-body);
      font-weight: 400;
      font-size: 10px;
      line-height: 1.5;
      letter-spacing: 0.1px;
      text-transform: uppercase;
      color: var(--c-black);
    }
    .author_card__verify-divider {
      flex-shrink: 0;
      align-self: stretch;
      width: 1px;
      background: rgba(0, 0, 0, 0.06);
    }
    .author_card__verify-by {
      flex: 2.4 1 0;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .author_card__verify-person {
      flex: 1 1 0;
      min-width: 0;
      font-family: var(--font-body);
      font-weight: 300;
      font-size: 10px;
      line-height: 1.5;
      letter-spacing: 0.1px;
      color: var(--c-black);
    }
    .author_card__verify-photo {
      flex-shrink: 0;
      width: 30px;
      height: 30px;
      overflow: hidden;
      background: #e8e8ec;
    }
    .author_card__verify-photo img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center top;
    }
    .author_card__dates {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px;
      background: var(--c-bg-soft);
    }
    .author_card__date {
      flex: 1 1 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
    .author_card__date-label {
      font-family: var(--font-body);
      font-weight: 300;
      font-size: 9px;
      line-height: 1.1;
      letter-spacing: 0.63px;
      text-transform: uppercase;
      color: var(--c-black);
    }
    .author_card__date-value {
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 12px;
      line-height: 1.1;
      color: var(--c-black);
    }
    .author_card__date-value img {
      display: block;
      width: 14px;
      height: 14px;
    }
    .author_card__date-value time { font: inherit; }

    /* Tablet (768–1023): lay the card out horizontally — the profile/verify
       block on the left, the dates panel on the right. align-items:stretch
       makes the dates panel grow to the same height as the left block, so the
       two dates stack vertically and centre within that stretched height. */
    @media (min-width: 768px) and (max-width: 1023px) {
      .author_card {
        flex-direction: row;
        align-items: stretch;
      }
      .author_card__main {
        flex: 1 1 0;
        min-width: 0;
      }
      .author_card__dates {
        flex: 1 1 0;
        min-width: 0;
      }
    }

    /* Desktop: heading text + author card side by side (Figma desktop layout) */
    @media (min-width: 1024px) {
      .decision__head {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        gap: 40px;
      }
      .decision__head-text { flex: 1 1 auto; min-width: 0; }
      .author_card {
        order: 0;
        flex: 0 0 385px;
        width: 385px;
      }
    }

    /* ≥1200: the TOC sidebar appears and .decision__grid becomes
       [448px TOC] + [pair]; the pair splits into two equal cards (gap 0).
       Match the author card to that right-hand card column ("Хочу швидко
       і без ризику") so the two line up in the same grid. */
    @media (min-width: 1200px) {
      .author_card {
        flex: 0 0 calc((100% - 448px - 24px) / 2);
        width: calc((100% - 448px - 24px) / 2);
      }
    }

    .decision__grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 24px;
      align-items: stretch;
    }

    /* TOC card */
    .toc {
      background: var(--c-white);
      border: 1px solid var(--c-border-card);
      border-radius: 0;
      padding: 21px;
      display: flex;
      flex-direction: column;
      /* no gap: the list sits flush against the expand button so items appear
         to slide out from behind it; title keeps its own spacing via margin */
      gap: 0;
      position: relative;
    }
    /* collapsed: clip the LIST (not the whole card) so the expand button stays visible */
    .toc__scroll {
      position: relative;
      overflow: hidden;
      max-height: 440px;
    }
    .toc--expanded .toc__scroll {
      max-height: none;
      overflow: visible;
    }
    /* expanded: items no longer hide behind the button, so add a gap between
       the list and the collapse button (collapsed state keeps gap:0 + fade) */
    .toc--expanded .toc__expand { margin-top: 14px; }
    .toc__title {
      font-family: var(--font-body);
      font-weight: 400;
      font-size: 11px;
      line-height: 1.4;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--c-black);
      margin: 0 0 14px;
      flex-shrink: 0;
    }
    .toc__list {
      display: flex;
      flex-direction: column;
      position: relative;
    }
    .toc__item {
      display: grid;
      grid-template-columns: 20px 1fr 20px;
      gap: 16px;
      align-items: stretch;
      position: relative;
      padding: 6px 6px;
    }
    .toc__item--active {
      background: rgba(19, 127, 236, 0.10);
    }
    .toc__item--inactive {
      background: transparent;
    }
    .toc__num-col {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      align-self: stretch;
      width: 20px;
    }
    .toc__num-col::before {
      content: '';
      position: absolute;
      left: 50%;
      top: -10px;
      bottom: -10px;
      width: 1px;
      background: rgba(0, 0, 0, 0.07);
      transform: translateX(-50%);
      z-index: 0;
    }
    .toc__item:first-child .toc__num-col::before { top: calc(50% + 10.5px); }
    .toc__item:last-child .toc__num-col::before { bottom: calc(50% + 10.5px); }
    .toc__num {
      position: relative;
      z-index: 1;
      width: 20px;
      height: 20px;
      display: grid;
      place-items: center;
      font-family: var(--font-body);
      font-weight: 400;
      font-size: 13px;
      line-height: 1.4;
    }
    .toc__item--active .toc__num {
      background: var(--c-blue);
      color: var(--c-white);
    }
    .toc__item--inactive .toc__num {
      background: rgba(0, 0, 0, 0.05);
      color: var(--c-black);
    }
    .toc__heading {
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 14px;
      line-height: 1.6;
      margin: 0;
      color: var(--c-black);
    }
    .toc__item--active .toc__heading { color: var(--c-blue); }
    .toc__sub {
      font-family: var(--font-body);
      font-weight: 300;
      font-size: 14px;
      line-height: 1.7;
      letter-spacing: 0.01em;
      color: var(--c-black);
      margin: 4px 0 0;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
    .toc__chev {
      width: 20px;
      height: 20px;
      align-self: center;
      display: grid;
      place-items: center;
      color: #94A3B8;
    }
    .toc__chev::after {
      content: '';
      width: 8px;
      height: 8px;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: rotate(-45deg);
    }
    .toc__fade {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 72px;
      /* plain white gradient, no blur — items softly fade out into the button below */
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
      pointer-events: none;
      z-index: 2;
    }
    .toc--expanded .toc__fade { display: none; }
    .toc__expand {
      width: 100%;
      background: var(--c-white);
      border: 1px solid var(--c-border-button);
      padding: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 12px;
      line-height: 1.5;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      text-align: left;
      transition: background var(--transition);
      cursor: pointer;
      flex-shrink: 0;
      position: relative;
      z-index: 3;
    }
    .toc__expand:hover { background: var(--c-bg-soft); }
    .toc__expand-arrow {
      width: 16px; height: 16px;
      flex-shrink: 0;
      transition: transform 0.3s ease;
    }
    .toc--expanded .toc__expand-arrow { transform: rotate(180deg); }
    .toc__expand-arrow::after {
      content: '';
      display: block;
      width: 8px; height: 8px;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: rotate(45deg);
      margin: 4px auto 0;
    }

    /* Article + Action pair */
    .decision__pair {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 24px;
    }

    .ed_card {
      background: var(--c-blue-soft);
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .ed_card__eyebrow,
    .act_card__eyebrow {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 12px;
      line-height: 1.4;
      letter-spacing: 0.03em;
      text-transform: uppercase;
    }
    .ed_card__eyebrow-icon,
    .act_card__eyebrow-icon {
      width: 16px; height: 16px;
      flex-shrink: 0;
      display: grid;
      place-items: center;
    }
    .ed_card__eyebrow-icon svg { width: 16px; height: 16px; }
    .act_card__eyebrow-icon { width: 22px; height: 18px; }
    .act_card__eyebrow-icon svg { width: 22px; height: 18px; fill: white; }
    .ed_card__title,
    .act_card__title {
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 20px;
      line-height: 1.5;
      margin: 0;
    }
    .ed_card__title { color: var(--c-black); }
    .act_card__title { color: var(--c-white); }
    .ed_card__body,
    .act_card__body {
      font-family: var(--font-body);
      font-weight: 300;
      font-size: 14px;
      line-height: 1.8;
      margin: 0;
    }
    .act_card__body { color: var(--c-white); }
    .divider_line {
      height: 1px;
      border: 0;
      background: var(--c-border-card); /* ed_card: #E2E8F0 */
      width: 100%;
      margin: 0;
    }
    .act_card .divider_line { background: var(--c-divider-soft); } /* #E2E8F0 @ 20% */
    .checklist {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .checklist li {
      display: flex;
      align-items: center;
      gap: 12px;
      font-family: var(--font-body);
      font-weight: 400;
      font-size: 15px;
      line-height: 1.4;
    }
    /* Check bullet is a CSS ::before, not an extra <span> — the list stays a clean
       WYSIWYG <ul>. Icon colour comes from the parent card: blue on .ed_card, white on .act_card. */
    .checklist li::before {
      content: '';
      flex: 0 0 15px;
      width: 15px;
      height: 15px;
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
    }
    .ed_card .checklist li::before { background-image: url('../img/assets2figma/check_blue.svg'); }
    .act_card .checklist li::before { background-image: url('../img/assets2figma/check_white.svg'); }
    .ed_card__btn {
      background: var(--c-white);
      border: 1px solid var(--c-blue);
      color: var(--c-blue);
      padding: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 12px;
      line-height: 1.5;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      text-align: left;
      transition: background var(--transition), color var(--transition);
      margin-top: auto;
    }
    .ed_card__btn:hover { background: var(--c-blue); color: var(--c-white); }

    .act_card {
      background: var(--c-blue);
      color: var(--c-white);
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      position: relative;
    }
    .act_card__ribbon {
      position: absolute;
      top: 3px; right: 3px;
      background: var(--c-yellow);
      color: var(--c-black);
      padding: 3px 8px;
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 9px;
      line-height: 1.5;
      letter-spacing: 0.01em;
      text-transform: uppercase;
    }
    .act_card__btn {
      background: var(--c-yellow);
      color: var(--c-black);
      padding: 10px 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      font-family: var(--font-body);
      font-weight: 500;
      font-size: 12px;
      line-height: 1.4;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      text-align: left;
      transition: background var(--transition);
      margin-top: auto;
    }
    .act_card__btn:hover { background: var(--c-black); color: var(--c-white); }
    .act_card__btn:hover .act_card__btn-icons > * { border-color: var(--c-black); }
    .act_card__btn-text { min-width: 0; flex-shrink: 1; }
    .act_card__btn-icons {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }
    .act_card__btn-icons > * {
      width: 28px; height: 28px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      display: grid;
      place-items: center;
    }
    .msg_photo { border-radius: 0; overflow: hidden; }
    .msg_tg, .msg_wa { border-radius: 0; overflow: visible; }
    .act_card__btn-icons img { width: 100%; height: 100%; object-fit: cover; display: block; }

    /* ============================================================
       Article body sections — applications, features, etc.
       ============================================================ */
    .section {
      padding: 50px 0;
    }
    .section__title {
      font-family: var(--font-body);
      font-weight: 700;
      font-size: clamp(20px, 3vw, 30px);
      line-height: 1.25;
      color: var(--c-black);
      margin: 0 0 24px;
      max-width: 820px;
      position: relative;
      padding-bottom: 14px;
    }
    .section__title::after {
      content: '';
      position: absolute;
      bottom: 0; left: 0;
      width: 60px;
      height: 4px;
      background: var(--c-blue);
    }

    .faq_list {
      display: grid;
      gap: 12px;
      margin-top: 20px;
    }
    .faq_item {
      background: var(--c-white);
      border: 1px solid var(--c-border-card);
      transition: border-color var(--transition);
    }
    .faq_item[open] { border-color: var(--c-blue); }
    .faq_item summary {
      list-style: none;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 16px;
      padding: 18px 22px;
      font-family: var(--font-body);
      font-weight: 400;
      font-size: 16px;
      line-height: 1.6;
      color: var(--c-black);
      cursor: pointer;
    }
    .faq_item summary::-webkit-details-marker { display: none; }
    .faq_item summary::after {
      content: '+';
      flex-shrink: 0;
      width: 28px; height: 28px;
      display: grid; place-items: center;
      background: var(--c-blue-tint-10);
      color: var(--c-blue);
      font-size: 22px;
      font-weight: 300;
      line-height: 1;
      transition: background var(--transition), color var(--transition);
    }
    .faq_item[open] summary::after { content: '−'; background: var(--c-blue); color: white; }
    .faq_item summary:hover { color: var(--c-blue); }
    .faq_answer {
      padding: 0 22px 18px;
      font-size: 14px;
      line-height: 1.7;
      color: var(--c-text-muted);
    }
    .faq_answer p { margin: 0; }

    a:focus-visible, button:focus-visible, summary:focus-visible {
      outline: 2px solid var(--c-blue);
      outline-offset: 2px;
    }

    /* ============================================================
       RESPONSIVE — Figma viewport is 1280
       ============================================================ */
    @media (min-width: 768px) {
      .container { padding: 0 30px; }
      /* keep the deco strip aligned to the same grid gutters as .container */
      .deco_strip { padding: 0 30px; }
      .hero_section { padding-top: 40px; }
      /* hero-h1 size handled by clamp() in base */
      .hero_actions { flex-direction: row; gap: 28px; }
      .hero_cta_col { flex: 1; }
      .hero_cta_col + .hero_cta_col { max-width: 248px; }
      .decision__sub { font-size: 20px; }
      .decision__pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
      .section { padding: 60px 0; }
      /* title font-sizes handled by clamp() in base */
    }

    @media (min-width: 1024px) {
      .container { padding: 0 40px; }
      /* keep the deco strip aligned to the same grid gutters as .container */
      .deco_strip { padding: 0 40px; }
      .toc__item { padding: 10px 8px; }
      /* equal-height CTA buttons on desktop (box-sizing: border-box → 56px total) */
      .toc__expand,
      .ed_card__btn,
      .act_card__btn { height: 56px; }
      /* hero CTA buttons trimmed 6px on desktop (60 -> 54) */
      .hero_actions .btn-primary,
      .hero_actions .btn-outline { height: 54px; }
      .hero_section { padding-top: 50px; }
      .hero_grid {
        /* minmax(0, …) so each track keeps its proportional fr share and the
           left column can't be squeezed below it by nowrap content. */
        grid-template-columns: minmax(0, 662fr) minmax(0, 540fr);
        gap: 38px;
        align-items: stretch;
      }
      /* hero-h1 reaches max 36px via clamp() */
      /* Photo matches the left column's height: drop the fixed aspect-ratio so
         the (absolutely-positioned) photo stretches to the grid row height,
         which is defined by .hero_left. object-fit: cover crops cleanly. */
      .hero_right { aspect-ratio: auto; }
      /* buy-cta__title reaches max via clamp() */
    }

    /* 1024–1199: the hero is two columns but the left track (~499px) is too
       narrow for the two CTA buttons side by side (they need ~566px and would
       overflow under the photo). Stack them until the row genuinely fits (≥1200). */
    @media (min-width: 1024px) and (max-width: 1199px) {
      .hero_actions { flex-direction: column; gap: 24px; }
      .hero_cta_col,
      .hero_cta_col + .hero_cta_col { flex: none; max-width: none; }
    }

    /* Decision: TOC sidebar + side-by-side cards only at >=1200 (room for 3 columns).
       At 1024-1199 the grid stays single-column — TOC on top, cards 2-up below —
       so the act-card no longer overflows. */
    @media (min-width: 1200px) {
      .decision__grid {
        grid-template-columns: minmax(0, 448px) minmax(0, 1fr);
        gap: 24px;
        align-items: stretch;
      }
      .toc_col { position: relative; align-self: stretch; }
      .decision__pair {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: repeat(6, auto);
        column-gap: 0;
        row-gap: 24px;
        align-items: stretch;
      }
      .ed_card,
      .act_card {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: 1 / -1;
        align-self: stretch;
        padding: 30px; /* верхній падінг = решта сторін (бірку «Рекомендовано» приховано) */
      }
      .ed_card { margin-right: -1px; }
    }

/* ============================================================
   SECTIONS — article body modules
   ============================================================ */
/* ============================================================
   Engineering Article — Body Preview · v5
   Project-locked rules applied:
     1. 840 px prose column
     2. Mobile-first CSS
     3. e-Ukraine for ALL text (no mono fallbacks)
     4. Tight inter-section spacing
     5. Visual decoration where it serves content
     6. No section chrome (no top borders, no ratio markers, no chapter numerals, no section emblems, no FAQ glyphs)
     7. Left-anchored page (no margin-inline: auto)
     8. Decoration must serve readability (icon+number split, horizontal rows for long-text items, visualized table, simpler buy panel)
   Tokens follow article-design-system.md.
   Body modules (§7) are DRAFT — pending designer review.
   ============================================================ */

/* ----- Design tokens ----- */
:root {
  /* Brand */
  --color-brand-primary: #3964FB;
  --color-brand-accent: #FCF240;

  /* Base */
  --color-base-black: #000000;
  --color-base-white: #FFFFFF;

  /* Surface */
  --color-surface-muted: #F6F6F6;
  --color-surface-info: #F0F7FF;

  /* Border */
  --color-border-default: #E2E8F0;

  /* Status */
  --color-warning: #E07B00;

  /* Text */
  --color-text-primary: #000000;
  --color-text-body: #3C3C3C;
  --color-text-muted: #636363;
  --color-text-inverse: #FFFFFF;

  /* Typography — e-Ukraine ONLY */
  --font-family-sans: 'e-Ukraine', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Type sizes — MOBILE defaults (bumped up at >=768px) */
  --text-h2-size: 24px;
  --text-h2-line: 140%;
  --text-h3-size: 20px;
  --text-h3-line: 150%;
  --text-body-large-size: 18px;
  --text-body-large-line: 161%;
  --text-body-regular-size: 16px;
  --text-body-regular-line: 170%;
  --text-body-small-size: 14px;
  --text-body-small-line: 180%;
  --text-label-size: 12px;
  --text-label-line: 140%;
  --text-label-tracking: 0.06em;

  /* Spacing scale (locked) */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;

  /* Aliases — mobile defaults */
  --space-section-gap: var(--space-48);
  --space-paragraph-gap: var(--space-20);
  --space-card-pad: var(--space-20);
  --space-h2-bottom: var(--space-24);

  /* Widths */
  --width-text-column: 840px;
}

/* ============================================================
   Wide screens (>=1920px) — bump article body copy 16px -> 18px
   ============================================================ */
@media (min-width: 1920px) {
  :root { --text-body-regular-size: 18px; }
}

/* Tablet — bump type up to desktop design-system sizes */
@media (min-width: 768px) {
  :root {
    --space-section-gap: var(--space-64);
    --space-card-pad: var(--space-24);
    --space-h2-bottom: var(--space-32);
    --text-h2-size: 32px;
    --text-h3-size: 22px;
    --text-body-large-size: 20px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  :root {
    --space-section-gap: var(--space-80);
    --space-card-pad: var(--space-32);
    --space-h2-bottom: var(--space-40);
  }
}

/* Long free-prose strings may wrap anywhere — but ONLY in prose containers,
   never globally, so single words in tables/headings never break mid-word. */
.ls_p,
.ls_app_tile__text {
  overflow-wrap: break-word;
}

/* ============================================================
   Article body — global rhythm
   ============================================================ */
.article_body { display: block; }

.ls_section + .ls_section {
  margin-top: var(--space-section-gap);
}

/* ============================================================
   Section header — JUST the H2 (no top border, no chapter chrome)
   ============================================================ */
.ls_section__header {
  display: block;
  margin-bottom: var(--space-h2-bottom);
}

/* ============================================================
   Typography primitives
   ============================================================ */
.ls_h2 {
  font-family: var(--font-family-sans);
  font-weight: 500;
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line);
  color: var(--color-text-primary);
  margin: 0;
  letter-spacing: 0;
  max-width: var(--width-text-column);
  text-wrap: balance;
}

.ls_h3 {
  font-family: var(--font-family-sans);
  font-weight: 700;
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line);
  color: var(--color-text-primary);
  margin: 0;
  letter-spacing: 0;
  text-wrap: balance;
}

.ls_p {
  font-family: var(--font-family-sans);
  font-weight: 300;
  font-size: var(--text-body-regular-size);
  line-height: 175%;
  color: var(--color-text-body);
  margin: 0;
  max-width: var(--width-text-column);
}

/* Article body copy reads at 18px on desktop (16px on mobile/tablet). */
@media (min-width: 1024px) {
  .ls_p {
    font-size: 18px;
  }
}

/* Lead paragraphs: toned down to regular body size (16px) on mobile so lead blocks
   stay compact; the larger lead size is restored at the desktop breakpoint below. */
.ls_p--lead {
  font-weight: 300;
  font-size: var(--text-body-regular-size);
  line-height: var(--text-body-regular-line);
}

@media (min-width: 768px) {
  .ls_p--lead {
    font-size: 18px;
    line-height: var(--text-body-large-line);
  }
}

/* Body paragraph rhythm — DESIGN SYSTEM RULE.
   Article body copy reads in short paragraphs (≈3–4 lines max). Any two
   stacked body paragraphs are separated by the paragraph gap so that
   splitting a long source paragraph at a sentence boundary always renders
   with correct spacing, in this article and every future one. */
.ls_p + .ls_p {
  margin-top: var(--space-paragraph-gap);
}

/* Containers that already lay paragraphs out with flex/grid `gap` manage
   their own spacing — neutralise the margin there to avoid a double gap. */
.ls_hero__deck .ls_p + .ls_p,
.ls_hero__split .ls_p + .ls_p,
.ls_buy__lead .ls_p + .ls_p,
.ls_buy__body .ls_p + .ls_p {
  margin-top: 0;
}

.article_body strong {
  font-weight: 500;
  color: var(--color-text-primary);
}

/* ============================================================
   SECTION 01 — Hero intro (stacked, vertical-first)
   ============================================================ */
.ls_hero__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  max-width: var(--width-text-column);
}

/* Lead "deck": distinct intro block set on a soft blue info panel so the opening
   reads as a highlighted lead callout (no left accent bar). The blue tint also
   sets it apart from the grey detail panel below — blue = intro, grey = detail. */
.ls_hero__deck {
  background: var(--color-surface-info);
  padding: var(--space-16);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.ls_hero__deck .ls_p { max-width: none; }

/* Deck reads with more open line spacing on desktop. */
@media (min-width: 1024px) {
  .ls_hero__deck .ls_p { line-height: 185%; }
}

/* Supporting body: the first two paragraphs read as standard full-width prose;
   the final two are paired into a distinct two-column "detail" block (one paragraph
   per column) so the section gains rhythm without splitting prose mid-flow. */
.ls_hero__body { display: block; }
.ls_hero__split {
  margin-top: var(--space-paragraph-gap);
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}
.ls_hero__split .ls_p { margin: 0; max-width: none; }

@media (min-width: 768px) {
  .ls_hero__grid { gap: var(--space-40); }
  .ls_hero__deck { padding: var(--space-28) var(--space-32); gap: var(--space-20); }
}

/* Two plain text columns only at ≥1200px. Below that (incl. 1024) the block
   stays stacked — the text column is capped at 840px, so 1fr/1fr columns
   (~368px each) compress the text too much. No background, padding or divider. */
@media (min-width: 1200px) {
  .ls_hero__split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-40);
  }
}

/* ============================================================
   SECTION 02 — Applications
   App tiles: icon + text only (no number), corner brackets
   ============================================================ */
.ls_applications__intro {
  max-width: var(--width-text-column);
  margin-bottom: var(--space-32);
}

.ls_applications__kicker {
  display: block;
  margin-bottom: var(--space-24);
  max-width: var(--width-text-column);
}

.ls_app_grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-12);
  counter-reset: ls-tile;
}

/* ---- Datasheet tile: clean filled card + mono catalogue index + icon chip.
   Kept deliberately quiet — no dot grid, no corner brackets — so the chip,
   the mono index and the hover scan-line carry the character. ---- */
.ls_app_tile {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-20);
  padding: var(--space-24) var(--space-40) var(--space-24) var(--space-24);
  min-width: 0;
  border: 1px solid var(--color-border-default);
  background-color: var(--color-base-white);
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.ls_app_tile__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  /* cyber chamfer (top-right corner cut) — no border-radius, no outline. */
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  color: var(--color-brand-primary);
  background: rgba(57, 100, 251, 0.10);
  transition: background-color 0.28s ease, color 0.28s ease, transform 0.28s var(--ease-out);
}

.ls_app_tile__icon svg { display: block; width: 22px; height: 22px; }

.ls_app_tile__text {
  flex: 1 1 auto;
  font-family: var(--font-family-sans);
  font-weight: 400;
  font-size: var(--text-body-regular-size);
  line-height: var(--text-body-regular-line);
  color: var(--color-text-primary);
  min-width: 0;
  /* long UA words (деревообробній, автомобілебудуванні) must break in the
     narrow 2-up column instead of spilling past the card edge */
  overflow-wrap: break-word;
  hyphens: none;
}

.ls_applications__footer {
  margin-top: var(--space-32);
  max-width: var(--width-text-column);
}

@media (min-width: 768px) {
  .ls_app_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-20);
  }
  .ls_app_tile {
    gap: var(--space-24);
    padding: var(--space-28) var(--space-40) var(--space-28) var(--space-28);
    min-height: 0;
  }
  .ls_app_tile__icon {
    width: 48px;
    height: 48px;
    clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 0 100%);
  }
  .ls_app_tile__icon svg { width: 24px; height: 24px; }
}

/* 2-up at all widths from 768px (no 4-up jump on wide screens). */

/* ============================================================
   SECTION 03 — Pump types as HORIZONTAL ROWS (project rule 8)
   ============================================================ */
.ls_types__intro {
  max-width: var(--width-text-column);
  margin-bottom: var(--space-32);
}

/* 2×3 gallery of vertical cards: photo banner on top, prose below.
   The whole product photo is shown on a muted banner (object-fit: contain — never
   cropped or stretched); placeholder icons sit centred on the same banner. */
/* Mobile: horizontal scroll-snap slider so the six cards don't stack into a tall column;
   ~82% card width leaves a slice of the next card peeking in. Becomes a 2-col grid at >=768. */
.ls_type_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--space-16);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ls_type_list::-webkit-scrollbar { display: none; }

.ls_type_row {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 82%;
  scroll-snap-align: start;
  background: var(--color-base-white);
  border: 1px solid var(--color-border-default);
  overflow: hidden;
  min-width: 0;
  transition: border-color 0.2s ease;
}
.ls_type_row:hover {
  border-color: var(--color-brand-primary);
}

/* photo banner across the top of the card */
.ls_type_row__visual {
  position: relative;
  width: 100%;
}

.ls_type_row__frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;                 /* <figure> carries a default UA margin (1em 40px) — kill it */
  aspect-ratio: 4 / 3;
  border: 0;
  border-bottom: 1px solid var(--color-border-default);
  overflow: hidden;
  padding: var(--space-16);
}

.ls_type_row__frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;       /* whole product photo, no crop / no stretch */
  display: block;
}

/* index badge — overlaid on the top-left corner of the banner */
.ls_type_row__num {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  font-family: var(--font-family-sans);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  color: var(--color-text-inverse);
  background: var(--color-base-black);
  padding: 8px 11px;
  font-variant-numeric: tabular-nums;
}

.ls_type_row__content {
  min-width: 0;
  padding: var(--space-16);
  display: flex;
  flex-direction: column;
  flex-grow: 1;             /* fill the card so the CTA can sit at the bottom edge */
}

/* Mobile (slider): compact title + body so each card isn't excessively tall.
   Full article typography is restored for the static grid at >=768. */
.ls_type_row__title {
  margin: 0 0 var(--space-8) 0;
  max-width: var(--width-text-column);
  font-size: 18px;
  line-height: 1.25;
}

/* Matches the regular article body text (.ls_p). */
.ls_type_row__body {
  font-family: var(--font-family-sans);
  font-weight: 300;
  font-size: var(--text-body-regular-size);
  line-height: 175%;
  color: var(--color-text-body);
  margin: 0;
  max-width: var(--width-text-column);
}

.ls_type_row__body + .ls_type_row__body { margin-top: var(--space-12); }

/* Fixed gap above the CTA — preserved even when prose fills the column and
   margin-top:auto collapses to 0 (i.e. on the tallest card in a row). */
.ls_type_row__body:last-of-type { margin-bottom: var(--space-20); }

/* "Переглянути товари" CTA — Figma node 7640:3595.
   Filled button: F6F6F6 surface, no border, 14px pad, 32px text→arrow gap,
   e-Ukraine Regular 12px uppercase. Hugs its content (left-aligned). */
.ls_type_row__btn {
  /* Mobile (narrow slider card): stretch full width with text↔arrow split so the
     label never overflows a 320px card. Figma's hug-content layout is restored at
     >=768 where each card is wide enough. */
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  margin-top: auto;          /* push the CTA to the card's bottom edge */
  padding: 14px;
  border: 0;
  background: var(--color-surface-muted);
  font-family: var(--font-family-sans);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-base-black);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.ls_type_row__btn:hover,
.ls_type_row__btn:focus-visible {
  background: var(--color-base-black);
  color: var(--color-text-inverse);
}
.ls_type_row__btn-arrow {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.ls_type_row__btn:hover .ls_type_row__btn-arrow,
.ls_type_row__btn:focus-visible .ls_type_row__btn-arrow {
  transform: translateX(3px);
}

/* Very narrow phones (<360px): shrink card body text so prose stays comfortable. */
@media (max-width: 359px) {
  .ls_type_row__body { font-size: 14px; }
}

@media (min-width: 768px) {
  /* tablet/small desktop: keep the horizontal slider (one wide card + arrows) so the
     section stays compact instead of stacking into a very tall single column.
     The static two-up grid only kicks in at >=1200. */

  /* restore full article typography + padding now that each card is wide */
  .ls_type_row__frame { padding: var(--space-20); }
  .ls_type_row__content { padding: var(--space-24); }
  .ls_type_row__title {
    margin-bottom: var(--space-12);
    font-size: var(--text-h3-size);
    line-height: var(--text-h3-line);
  }
  .ls_type_row__body + .ls_type_row__body { margin-top: var(--space-paragraph-gap); }

  /* restore Figma CTA: hugs content, left-aligned, 32px text→arrow gap */
  .ls_type_row__btn {
    align-self: flex-start;
    display: inline-flex;
    justify-content: flex-start;
    gap: var(--space-32);
  }
}

@media (min-width: 1200px) {
  /* wide desktop: enough room for a static two-cards-per-row grid; no slider, no arrows */
  .ls_type_list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-24);
    overflow: visible;
    scroll-snap-type: none;
  }
  .ls_type_row { flex: 0 1 auto; }
  /* higher specificity so it beats the shared .ls_slider_nav { display:flex }, which
     is defined later in the file (in the matrix section) */
  .ls_section--types .ls_types__nav { display: none; }
}

/* ============================================================
   SECTION 04 — Comparison matrix (visualized spec sheet)
   Mobile: stacked cards · Desktop: real table with icons + check/X marks
   ============================================================ */
.ls_matrix__wrap {
  width: 100%;
  min-width: 0;
  background: var(--color-base-white);
}

.ls_matrix_table {
  width: 100%;
  font-family: var(--font-family-sans);
  background: var(--color-base-white);
  border-collapse: collapse;
  /* Mobile: a plain block so the tbody can become a horizontal slider */
  display: block;
}

/* ----- Mobile: stacked cards ----- */
.ls_matrix_table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
  white-space: nowrap;
}

/* Mobile: cards in a horizontal scroll-snap slider so the block doesn't stack tall.
   ~82% card width leaves a slice of the next card peeking in. */
.ls_matrix_table tbody {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  gap: var(--space-12);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  /* hide the native scrollbar — navigation is via the arrow buttons / swipe */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ls_matrix_table tbody::-webkit-scrollbar { display: none; }

.ls_matrix_table tbody tr {
  display: flex;
  flex-direction: column;
  flex: 0 0 82%;
  box-sizing: border-box;
  scroll-snap-align: start;
  border: 1px solid var(--color-border-default);
  margin-bottom: 0;
  padding: var(--space-16) var(--space-20);
}

@media (prefers-reduced-motion: reduce) {
  .ls_matrix_table tbody,
  .ls_type_list { scroll-behavior: auto; }
}

.ls_matrix_table__rowhead,
.ls_matrix_table__td {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  text-align: left;
}

.ls_matrix_table__rowhead {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding-bottom: var(--space-12);
  margin-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-border-default);
  font-family: var(--font-family-sans);
  font-weight: 700;
  font-size: var(--text-body-regular-size);
  line-height: var(--text-body-regular-line);
  color: var(--color-text-primary);
}

.ls_matrix_table__rowicon {
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--color-base-black);
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  /* mobile card: icon sits at the right edge, name fills the width */
  order: 2;
}

.ls_matrix_table__rowicon svg { display: block; }

.ls_matrix_table__rowname {
  display: inline-block;
  order: 1;
  flex: 1 1 auto;
}

.ls_matrix_table__td {
  position: relative;
  padding-top: var(--space-20);
  font-weight: 300;
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-small-line);
  color: var(--color-text-primary);
}

.ls_matrix_table__td::before {
  content: attr(data-label);
  display: block;
  font-family: var(--font-family-sans);
  font-weight: 500;
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  letter-spacing: var(--text-label-tracking);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* Viscosity gauge (5 segments) — full-width bar above a readable range label */
.ls_visc_bar {
  display: flex;
  gap: 3px;
  width: 100%;
  max-width: 160px;
  margin: 0 0 var(--space-8);
}

.ls_visc_bar span {
  flex: 1 1 0;
  height: 6px;
  background: #EAEBEF;
  border: 0;
}

.ls_visc_bar[data-from="1"][data-to="3"] span:nth-child(1),
.ls_visc_bar[data-from="1"][data-to="3"] span:nth-child(2),
.ls_visc_bar[data-from="1"][data-to="3"] span:nth-child(3),
.ls_visc_bar[data-from="1"][data-to="4"] span:nth-child(1),
.ls_visc_bar[data-from="1"][data-to="4"] span:nth-child(2),
.ls_visc_bar[data-from="1"][data-to="4"] span:nth-child(3),
.ls_visc_bar[data-from="1"][data-to="4"] span:nth-child(4),
.ls_visc_bar[data-from="3"][data-to="4"] span:nth-child(3),
.ls_visc_bar[data-from="3"][data-to="4"] span:nth-child(4),
.ls_visc_bar[data-from="3"][data-to="5"] span:nth-child(3),
.ls_visc_bar[data-from="3"][data-to="5"] span:nth-child(4),
.ls_visc_bar[data-from="3"][data-to="5"] span:nth-child(5),
.ls_visc_bar[data-from="4"][data-to="5"] span:nth-child(4),
.ls_visc_bar[data-from="4"][data-to="5"] span:nth-child(5) {
  background: var(--color-brand-primary);
  border-color: var(--color-brand-primary);
}

.ls_visc_text {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 300;
  color: var(--color-text-primary);
}

/* Check / cross marks for advantages / limitations cells */
.ls_mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-right: var(--space-8);
  vertical-align: -3px;
}
.ls_mark svg { display: block; }
.ls_mark--warn { color: var(--color-warning); }

/* Advantages — blue square bullet list */
.ls_adv {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ls_adv li {
  position: relative;
  padding-left: 16px;
  line-height: 1.45;
}
.ls_adv li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  background: var(--color-brand-primary);
}

/* ============================================================
   LIST MODULE (.ls_list) — the ONE canonical body list
   Use this for EVERY <ul>/<ol> in article prose (materials,
   recommendations, requirements, "Найпоширеніші …:" enumerations).
   NEVER invent a per-page list class (ls_mat_list, ls_spec_list,
   ls_reco__list, …) — those ship without guaranteed CSS and render
   unstyled. Blue square bullets, e-Ukraine Light 300, 840 cap, flat.
   ============================================================ */
.ls_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  max-width: var(--width-text-column);
  font-family: var(--font-family-sans);
  font-weight: 300;
  font-size: var(--text-body-regular-size);
  line-height: var(--text-body-regular-line);
  color: var(--color-text-body);
}
.ls_list li {
  position: relative;
  padding-left: 18px;
  overflow-wrap: break-word;
  hyphens: none;
}
.ls_list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: var(--color-brand-primary);
}
.ls_list strong { font-weight: 500; color: var(--color-text-primary); }

/* Body lists read at 18px on desktop (matches .ls_p) — design-system §7.10. */
@media (min-width: 1024px) {
  .ls_list { font-size: 18px; }
}

/* A list joins the paragraph rhythm: it never sticks to the prose above/below it
   (design-system §4 block-rhythm). A .ls_list_lead colon line still hugs its list. */
.ls_p + .ls_list,
.ls_list + .ls_p { margin-top: var(--space-paragraph-gap); }
.ls_list_lead + .ls_list { margin-top: 0; }

/* Block rhythm — a stacked sub-block inside a section (a recommendations group, a
   secondary heading+list, etc.) NEVER collapses against the block above it. Wrap
   such a sub-block in .ls_subblock so future articles always keep the gap
   (design-system §4). */
.ls_subblock { margin-top: var(--space-40); }
.ls_subblock > .ls_h3 { margin: 0 0 var(--space-12); }

/* Lead-in line that introduces a list ("Найпоширеніші матеріали:") */
.ls_list_lead {
  font-weight: 500;
  color: var(--color-text-primary);
  font-size: var(--text-body-regular-size);
  line-height: var(--text-body-regular-line);
  margin-bottom: var(--space-24);
  max-width: var(--width-text-column);
}
/* The lead-in line matches its list / body copy on desktop (18px) — never smaller. */
@media (min-width: 1024px) {
  .ls_list_lead { font-size: 18px; }
}

/* Ordered variant — brand index numbers in a squared, cyber-chamfer chip (same
   chamfer motif as the criteria eyebrow / app-tile icon). More presence than a bare
   numeral, but the glyph stays 15px — well within the ≤28px "quiet numbers" rule
   (the chip is decoration, not an oversized numeral). Roomier rhythm: 20px between
   items so the list breathes. */
.ls_list--ordered { counter-reset: ls_list; gap: var(--space-20); }
.ls_list--ordered li { padding-left: 46px; counter-increment: ls_list; min-height: 30px; }
.ls_list--ordered li::before {
  content: counter(ls_list, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-info);
  color: var(--color-brand-primary);
  font-family: var(--font-family-sans);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}

/* Term variant — a black tag + description ("PP — для розбавлених кислот") */
.ls_list--terms li { padding-left: 0; display: flex; gap: var(--space-12); align-items: baseline; min-width: 0; }
.ls_list--terms li::before { content: none; }
.ls_list__term {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-width: 76px;
  padding: 3px 8px;
  background: var(--color-base-black);
  color: var(--color-text-inverse);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.ls_list__txt { flex: 1 1 auto; min-width: 0; }

/* Limitations — orange warning text + triangle icon */
.ls_matrix_table__td--neg {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  color: var(--color-warning);
}

/* On mobile, the data-label sits on its own line above the icon+text */
.ls_matrix_table__td--neg::before {
  flex-basis: 100%;
}

/* Keep the ⚠ icon and text on one flex line: the text shrinks (flex-basis 0,
   min-width 0) and wraps internally beside the icon instead of dropping below it */
.ls_matrix_table__td--neg > span:not(.ls_mark) {
  flex: 1 1 0;
  min-width: 0;
}

/* ----- Mobile slider arrows (shared by the comparison matrix and the pump-type cards) ----- */
.ls_slider_nav {
  display: flex;
  justify-content: center;
  gap: var(--space-12);
  margin-top: var(--space-16);
}

.ls_slider_arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--color-border-default);
  border-radius: 0;
  background: var(--color-base-white);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease, opacity .18s ease;
}

.ls_slider_arrow svg { display: block; }

.ls_slider_arrow:hover:not(:disabled) {
  border-color: var(--color-base-black);
  background: var(--color-base-black);
  color: var(--color-text-inverse);
}

.ls_slider_arrow:disabled {
  opacity: .35;
  cursor: default;
}

/* ----- Mobile cards: align matching parameters across cards (subgrid) + divider lines -----
   The slider becomes a grid whose 6 shared row tracks (card title + 5 parameters) are
   sized to the tallest content across ALL cards, so every parameter sits at the same
   vertical level when you swipe between cards. Each card subgrids onto those tracks. */
@media (max-width: 1279px) {
  .ls_matrix_table tbody {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    grid-template-rows: repeat(6, auto);
    column-gap: var(--space-12);
    row-gap: 0;
  }
  .ls_matrix_table tbody tr {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / -1;
    row-gap: 0;
  }
  /* the title no longer needs its own divider — each parameter draws one above itself */
  .ls_matrix_table__rowhead {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: var(--space-12);
  }
  /* divider line between consecutive parameters, with equal breathing space on both sides */
  .ls_matrix_table__td {
    border-top: 1px solid var(--color-border-default);
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }
  .ls_matrix_table__td:last-child {
    padding-bottom: 0;
  }
  /* card layout (mobile + tablet): extra top breathing room above the viscosity gauge */
  .ls_visc_bar { margin: 14px 0 var(--space-8); }
  /* limitations: match the ⚠ box height to the first text line so it centers on it instead of sitting slightly high */
  .ls_matrix_table__td--neg .ls_mark { height: calc(var(--text-body-small-size) * 1.8); }
}

/* ----- Desktop: real table (only at >=1280, where the article column is the full 840px;
   below that the stacked-card layout is used so long words never have to be split) ----- */
@media (min-width: 1280px) {
  .ls_matrix__wrap { position: relative; }

  /* The table scrolls horizontally INSIDE this inner element, which carries the border so
     the arrow nav (a sibling BELOW it) sits OUTSIDE the frame — no boxed-in empty strip.
     Subtle, on-brand scrollbar: thin, squared, muted grey. Pointer drag-to-scroll (grab). */
  .ls_matrix__scroll {
    overflow-x: auto;
    border: 1px solid var(--color-border-default);
    scrollbar-width: thin;                       /* Firefox */
    scrollbar-color: #C4CAD4 #EEF0F4;            /* thumb · track (Firefox) */
  }
  .ls_matrix__wrap--scrollable .ls_matrix__scroll { cursor: grab; }
  .ls_matrix__scroll.is-grabbing { cursor: grabbing; user-select: none; }
  .ls_matrix__scroll::-webkit-scrollbar { height: 4px; }
  .ls_matrix__scroll::-webkit-scrollbar-track { background: #EEF0F4; }
  .ls_matrix__scroll::-webkit-scrollbar-thumb { background: #C4CAD4; }
  .ls_matrix__scroll::-webkit-scrollbar-thumb:hover { background: #A7AFBC; }

  /* Arrow nav: hidden on desktop by default; JS reveals it ONLY when the table actually
     overflows (.ls_matrix__wrap--scrollable). Right-aligned, below the table. */
  .ls_matrix__nav { display: none; }
  .ls_matrix__wrap--scrollable .ls_matrix__nav {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-12);
  }

  /* Conditional scroll: width:100% + per-column min-width. Sum of min-widths > ~792px → the
     table grows past 100% and scrolls; sum < that (few columns) → width:100% stretches them
     to fill, nothing to scroll. Min-width lives on the BODY cells BY ROLE (prose roomy,
     short bool/viscosity columns narrower) — NOT on the header, which would force every
     column equal. border-collapse:separate keeps the sticky name column solid in Safari. */
  .ls_matrix_table { table-layout: auto; width: 100%; display: table; border-collapse: separate; border-spacing: 0; }
  .ls_matrix_table__td { min-width: 220px; }
  .ls_matrix_table__td--range { min-width: 160px; }
  .ls_matrix_table__td--bool { min-width: 140px; }
  .ls_matrix_table__rowhead { min-width: 200px; }

  /* Frozen pump-name column — pinned left while the rest scrolls. Its opaque background
     covers the cells passing under it; a soft, low-contrast right-edge shadow once scrolled. */
  .ls_matrix_table__rowhead { position: sticky; left: 0; z-index: 2; }
  .ls_matrix_table thead th:first-child { position: sticky; left: 0; z-index: 3; }
  .ls_matrix_table__rowhead::after,
  .ls_matrix_table thead th:first-child::after {
    content: "";
    position: absolute;
    top: 0; bottom: -1px; right: 0;
    width: 10px;
    transform: translateX(100%);
    pointer-events: none;
    background: linear-gradient(to right, rgba(17,19,24,.06), rgba(17,19,24,0));
    opacity: 0;
    transition: opacity .2s var(--ease-out, ease);
  }
  .ls_matrix__wrap--scrolled .ls_matrix_table__rowhead::after,
  .ls_matrix__wrap--scrolled .ls_matrix_table thead th:first-child::after { opacity: 1; }

  .ls_matrix_table thead {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    display: table-header-group;
  }

  .ls_matrix_table tbody { display: table-row-group; }

  .ls_matrix_table tbody tr {
    display: table-row;
    border: 0;
    margin: 0;
    padding: 0;
  }

  .ls_matrix_table tbody tr:nth-child(even) {
    background: var(--color-surface-muted);
  }

  .ls_matrix_table__th {
    background: #EDF0F5;
    color: var(--color-text-primary);
    font-family: var(--font-family-sans);
    font-weight: 600;
    text-transform: none;
    text-align: left;
    vertical-align: top;
    font-size: 12px;
    line-height: 1.35;
    letter-spacing: 0.005em;
    padding: 13px 10px;
    border-right: 1px solid #CDD4DE;
    border-bottom: 1px solid rgba(57, 100, 251, 0.2);
  }

  .ls_matrix_table__rowhead {
    display: table-cell;
    background: var(--color-border-default);
    font-family: var(--font-family-sans);
    font-weight: 500;
    font-size: var(--text-body-regular-size);
    line-height: var(--text-body-regular-line);
    color: var(--color-text-primary);
    text-align: left;
    vertical-align: top;
    padding: 13px 10px;
    border-right: 1px solid #E8ECF1;
    border-bottom: 0;
    margin: 0;
    width: auto;
  }

  .ls_matrix_table__rowhead .ls_matrix_table__rowicon { margin-bottom: var(--space-8); order: 0; }
  .ls_matrix_table__rowhead { display: table-cell; }
  .ls_matrix_table__rowhead .ls_matrix_table__rowname {
    display: block;
    order: 0;
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 13px;
    /* Row names stay WHOLE — never split mid-word (locked rule). With table-layout:auto
       this makes column 1's min-content the longest whole name, so auto layout always
       gives the column enough width and the names never shatter into «Шесте-ренча-стий». */
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
  }

  .ls_matrix_table__td {
    display: table-cell;
    font-family: var(--font-family-sans);
    font-weight: 300;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-primary);
    vertical-align: top;
    text-align: left;
    padding: 13px 10px;
    border-right: 1px solid #E8ECF1;
    width: auto;
  }

  .ls_matrix_table__td::before { content: none; display: none; }

  .ls_matrix_table__td--pos,
  .ls_matrix_table__td--range {
    display: table-cell;
  }

  /* Limitations cell MUST stay a real table-cell so its right divider spans the
     full row height like every other column (a flex/block td drops out of the
     table box and its border only reaches the content height). The ⚠ icon floats
     into its own left column; the text block forms a BFC beside it so 2nd+ lines
     align under the text, not under the icon. */
  .ls_matrix_table__td--neg {
    display: table-cell;
  }

  .ls_matrix_table__td--neg .ls_mark {
    /* Inline icon, NOT floated. A floated icon inflates the cell's min-content under
       table-layout:auto, so a long single word («производительность») can't drop to its
       own line and overflows into the next column. Inline (like the --bool cell), the
       icon and text wrap independently and min-content falls to just the longest word. */
    display: inline-flex;
    margin-right: 6px;
  }

  .ls_matrix_table__td--neg > span:last-child {
    display: inline;
  }

  .ls_matrix_table__td--range .ls_visc_bar { display: flex; margin-right: 0; margin-bottom: var(--space-8); }
  .ls_matrix_table__td--range .ls_visc_text { display: block; }

  .ls_matrix_table__th:last-child,
  .ls_matrix_table__td:last-child { border-right: none; }

  .ls_matrix_table tbody tr + tr .ls_matrix_table__rowhead {
    border-top: 1px solid #CDD4DE;
  }

  .ls_matrix_table tbody tr + tr .ls_matrix_table__td {
    border-top: 1px solid #E8ECF1;
  }
}

/* ============================================================
   SECTION 05 — Decision steps (numbered timeline)
   Each step is its own card; the icon is a circular "bead" and a continuous
   thread links the beads 01→04 on desktop. The step label ("Крок 0X") rides
   above the title as an eyebrow, so the rail stays clean — just the bead.
   ============================================================ */
.ls_criteria_list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* Mobile: icon + step label share the top line; title and body run full width
   below so dense prose isn't squeezed beside the icon. */
.ls_criteria_row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "media eyebrow"
    "title title"
    "body  body";
  column-gap: var(--space-12);
  row-gap: var(--space-12);
  align-items: center;
  padding: var(--space-20);
  background: #FAFAFA;
  position: relative; /* anchors the connecting thread (desktop ::after) */
}

.ls_criteria_row__media   { grid-area: media; }
.ls_criteria_row__eyebrow { grid-area: eyebrow; }
.ls_criteria_row__title   { grid-area: title; margin: 0; }
.ls_criteria_row__body    { grid-area: body; max-width: var(--width-text-column); }

/* Step label — a cyber brand chip with a small leading node. No round forms:
   the chip carries the house top-right chamfer (matches .ls_card) and the
   leading node is a diamond that echoes the chamfer's 45° cut. The tint matches
   the hex medallion's #E3E8FA family. */
.ls_criteria_row__eyebrow {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin: 0;
  /* space-8 vertical (not space-4) so the chip is tall enough for the corner cut
     to read as a clean notch rather than a lopsided slice on mobile. */
  padding: var(--space-8) var(--space-12);
  /* cyber chamfer (top-right corner cut) — no border-radius, no outline */
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  background: rgba(57, 100, 251, 0.10);
  font-family: var(--font-family-sans);
  font-weight: 600;
  font-size: var(--text-label-size);
  line-height: 1; /* caps sit snug; padding alone sets the chip height */
  letter-spacing: var(--text-label-tracking);
  text-transform: uppercase;
  color: var(--color-brand-primary);
}
/* Leading node — a small diamond (square on its point) echoing the chamfer's
   45° diagonal. Replaces the old round dot; no border-radius anywhere. */
.ls_criteria_row__eyebrow::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* Icon medallion — brand line glyph on a soft hexagonal "cyber" node.
   Background is the opaque equivalent of brand @ 12% over the #FAFAFA card; the
   opaque fill masks the thread, which plugs into the hex's top/bottom vertices
   (clip-path can't carry a box-shadow halo, so the fill alone does the masking). */
.ls_criteria_row__media {
  position: relative;
  z-index: 1;
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: #E3E8FA;
  /* regular pointy-top hexagon: width = (√3/2)×height, so the side vertices
     sit at 6.7%/93.3% x (not 0/100), keeping the shape proportional in the box */
  clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  color: var(--color-brand-primary);
}
.ls_criteria_row__media svg { display: block; width: 22px; height: 22px; }

/* Swiss-style paragraphs: no first-line indent, just a small gap that sets
   consecutive paragraphs apart without breaking the visual flow of the step. */
.ls_criteria_row__body .ls_p + .ls_p {
  margin-top: var(--space-12);
}

@media (min-width: 768px) {
  /* Desktop: the bead sits at the top of a left gutter; eyebrow / title / body
     stack on the right. A continuous thread runs through the beads (see ::after). */
  .ls_criteria_row {
    grid-template-columns: 52px minmax(0, 1fr);
    grid-template-areas:
      "media eyebrow"
      "media title"
      "media body";
    column-gap: var(--space-32);
    row-gap: var(--space-8);
    align-items: start;
    padding: var(--space-32);
  }
  /* Column is the bead's exact width, so the bead's left indent equals the top
     padding (32px) — it sits flush in the card's top-left corner. Mobile shrinks
     the node/pill for compactness; restore the full size here so the thread aligns. */
  .ls_criteria_row__media { justify-self: start; align-self: start; width: 52px; height: 52px; }
  .ls_criteria_row__media svg { width: 32px; height: 32px; }
  .ls_criteria_row__eyebrow { margin: 0 0 var(--space-4); } /* padding inherited from base (space-8) */
  .ls_criteria_row__title { margin: 0 0 var(--space-12); }

  /* The connecting thread: a 1px line from this card's bead centre down to the
     next card's bead centre. The bead sits at a constant 58px from the card left
     and 58px from the card top (padding 32 + icon radius 26), so the offsets are
     fixed; the bead's opaque fill + halo mask the ends. */
  .ls_criteria_row:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    left: 57.5px;
    top: 58px;
    width: 1px;
    height: calc(100% + var(--space-16)); /* spans this card + the gap to the next bead */
    background: rgba(0, 0, 0, 0.05);
  }
}

/* ============================================================
   SECTION 06 — Buy panel (deck-style lead + benefit cards + dual CTA)
   ============================================================ */
.ls_buy {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  max-width: var(--width-text-column);
}

/* Buy lead is PLAIN body text — no blue info panel, no padding, no emphasis (per review). */
.ls_buy__lead {
  display: flex;
  flex-direction: column;
  gap: var(--space-paragraph-gap);
}

.ls_buy__lead .ls_p { max-width: none; }

.ls_buy__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}

.ls_buy__body .ls_p { max-width: none; }

/* "Чому варто купити…" promoted to an H3 lead-in */
.ls_buy__kicker { margin: 0; }

/* Benefit cards share the datasheet .ls_app_tile system (frame + chip + scan-line),
   but carry a title + description instead of a single line, and drop the mono
   catalogue index (these are reasons-to-buy, not an enumerated catalogue). */
.ls_buy__benefits { margin: 0; }
.ls_buy__benefits .ls_app_tile::before { content: none; }
/* Benefit cards stay VERTICAL (icon on top, then title + description),
   unlike the single-line application tiles which run horizontally.
   They also carry more internal breathing room than the dense app tiles. */
.ls_buy__benefits .ls_app_tile {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  padding: var(--space-24) var(--space-20);
}
@media (min-width: 480px) {
  .ls_buy__benefits .ls_app_tile {
    gap: var(--space-20);
    padding: var(--space-28) var(--space-24);
  }
}
@media (min-width: 768px) {
  .ls_buy__benefits .ls_app_tile {
    gap: var(--space-28);
    padding: var(--space-48) var(--space-40);
  }
}
.ls_buy__benefits .ls_app_tile__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}
.ls_buy__benefits .ls_app_tile__title {
  font-family: var(--font-family-sans);
  font-weight: 500;
  font-size: 17px;
  line-height: 145%;
  color: var(--color-text-primary);
}
@media (min-width: 768px) {
  .ls_buy__benefits .ls_app_tile__title {
    font-size: 20px;
    line-height: 150%;
  }
}
.ls_buy__benefits .ls_app_tile__desc {
  font-family: var(--font-family-sans);
  font-weight: 400;
  font-size: var(--text-body-regular-size);
  line-height: 165%;
  color: var(--color-text-muted);
}
@media (min-width: 768px) {
  .ls_buy__benefits .ls_app_tile__desc {
    line-height: 185%;
  }
}

/* Dual CTA — buttons borrow the hero .btn-primary / .btn-outline styling */
.ls_buy__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

.ls_buy__actions .btn-primary,
.ls_buy__actions .btn-outline {
  flex: 1 1 0;
  height: auto;
  min-height: 60px;
  white-space: normal;
}

@media (min-width: 768px) {
  .ls_buy { gap: var(--space-32); }
  /* .ls_buy__lead: plain text — no panel, so no desktop padding override (gap inherits paragraph rhythm) */
  .ls_buy__actions {
    flex-direction: row;
    align-items: stretch;
    flex-wrap: wrap;
    margin-top: var(--space-12);
  }
  .ls_buy__actions .btn-primary,
  .ls_buy__actions .btn-outline {
    flex: 0 0 auto;
  }
}

/* ============================================================
   Datasheet tile chrome — mono catalogue index (::before) + hover
   scan-line (::after).
   ============================================================ */
.ls_app_tile::before {
  counter-increment: ls-tile;
  content: counter(ls-tile, decimal-leading-zero);
  position: absolute;
  top: var(--space-20);
  right: var(--space-24);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: rgba(57, 100, 251, 0.34);
  transition: color 0.28s ease;
  pointer-events: none;
}
.ls_app_tile::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--color-brand-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--ease-out);
  pointer-events: none;
}

/* Hover removed — these tiles are static. */
@media (min-width: 768px) {
  .ls_app_tile::before { font-size: 16px; }
}

/* ============================================================
   MERGE OVERRIDES (must stay last)
   ============================================================ */
/* ===== MERGE OVERRIDES (clue article) ===== */
    /* TOC: collapsed clips the list (mobile); hover = active look (point 4) */
    .toc_col { display: block; }
    .toc__item { cursor: pointer; }
    .toc__item:hover { background: var(--c-blue-tint-19); }
    .toc__item:hover .toc__num { background: var(--c-blue); color: var(--c-white); }
    .toc__item:hover .toc__heading { color: var(--c-blue); }
    /* TOC overlay only when it's a sidebar (>=1200, matching .decision__grid 2-col) */
    @media (min-width: 1200px) {
      /* TOC expand = OVERLAY over blocks below, not pushing them (point 3) */
      .toc { position: absolute; inset: 0; width: 100%; max-width: none; padding: 24px; }
      .toc__scroll { flex: 1 1 auto; min-height: 0; max-height: none; }
      /* expanded keeps the same resting shadow as collapsed — no extra drop shadow added */
      .toc--expanded { inset: 0 0 auto 0; height: auto; z-index: 20; }
      .toc--expanded .toc__scroll { flex: none; overflow: visible; }
    }
    /* consult-widget button hover (Primary-Messenger) */
    .consult_widget__btn:hover { background: #2a55ea; }
    /* FAQ now lives inside the article body's main column as a normal ls_section
       (single column; the sticky consult widget sits to its right) */
    /* act-card eyebrow text = yellow (point 2, per Figma) */
    .act_card__eyebrow { color: var(--c-yellow); align-items: flex-start; } /* бірка тягнеться на всю ширину картки (ребро для «Рекомендовано» більше не резервуємо) */
    /* breadcrumbs — replicate dosingtech.com.ua (font inherits e-Ukraine per article rule) */
    .breadcrumbs { display: flex; align-items: baseline; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; min-width: 0; max-width: 100%; -ms-overflow-style: none; scrollbar-width: none; font-size: 12px; line-height: 1.34; color: #000; margin: 0 0 20px; padding: 0; }
    .breadcrumbs::-webkit-scrollbar { display: none; }
    .breadcrumbs__link { position: relative; flex-shrink: 0; color: inherit; margin-left: 10px; }
    .breadcrumbs__home { margin-left: 0; }
    .breadcrumbs__link:not(.breadcrumbs__home)::before { content: ""; display: inline-block; vertical-align: middle; width: 5px; height: 7px; margin-right: 10px; margin-bottom: 1px; background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNSIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgNSA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMy43NDMzNCAzLjMzNTM1TDEuMTc0MDcgMC41Njc4NUMxLjA4OTg5IDAuNDc3MjI5IDAuOTUzNjAyIDAuNDc3MzgyIDAuODY5NTY0IDAuNTY4MzE5QzAuNzg1NTkxIDAuNjU5MjQ0IDAuNzg1ODA4IDAuODA2NTM3IDAuODY5OTk4IDAuODk3MjI4TDMuMjg2MzQgMy41MDAwMUwwLjg2OTkxMSA2LjEwMjc4QzAuNzg1NzMyIDYuMTkzNDggMC43ODU1MTUgNi4zNDA2OCAwLjg2OTQ3NyA2LjQzMTYyQzAuOTExNjA1IDYuNDc3MjEgMC45NjY3OTUgNi41IDEuMDIxOTggNi41QzEuMDc3MDMgNi41IDEuMTMyMDEgNi40NzczNiAxLjE3NDA2IDYuNDMyMDlMMy43NDMzNCAzLjY2NDY2QzMuNzgzODkgMy42MjEwOSAzLjgwNjY0IDMuNTYxNzkgMy44MDY2NCAzLjUwMDAxQzMuODA2NjQgMy40MzgyMyAzLjc4MzgyIDMuMzc5IDMuNzQzMzQgMy4zMzUzNVoiIGZpbGw9IiMwMzFEM0QiIHN0cm9rZT0iIzAzMUQzRCIgc3Ryb2tlLXdpZHRoPSIwLjUiLz4KPC9zdmc+Cg==") center / contain no-repeat; }
    .breadcrumbs__home .svg-ico { margin-top: -3px; display: inline-block; vertical-align: middle; }
    .breadcrumbs__link:hover { color: #3964FB; }
    .breadcrumbs__last { color: rgba(0, 0, 0, .3); flex-shrink: 0; }
    /* TOC: number badge aligned to heading first line; step-line hidden behind opaque badges (point 5) */
    .toc__item { align-items: start; }
    .toc__num-col { justify-content: flex-start; }
    .toc__num { margin-top: 1px; }
    .toc__item--inactive .toc__num { background: #F2F2F2; color: var(--c-black); }
    .toc__item--active .toc__num, .toc__item:hover .toc__num { background: var(--c-blue); color: #fff; }
    .toc__item:first-child .toc__num-col::before { top: 11px; bottom: -10px; }
    .toc__item:last-child .toc__num-col::before { top: -10px; bottom: calc(100% - 11px); }

    /* never allow horizontal page scroll (clip ≠ hidden: keeps sticky header working) */
    html, body { overflow-x: clip; }
    /* decoration strip never expands the page width */
    .deco_strip { overflow: hidden; }

    /* ===== MOBILE: header + deco were overflowing 375px and breaking layout ===== */
    @media (max-width: 767px) {
      /* TOC: halve the collapsed height on mobile (was 440px) */
      .toc__scroll { max-height: 220px; }
      .decision { padding: 40px 0 20px; }
      .site_header, .site_header__inner { height: 64px; }
      .site_header__inner { padding: 0 14px; gap: 8px; }
      .burger { width: auto; padding: 0 6px; gap: 4px; }
      .burger__label { font-size: 9px; }
      .catalog_btn { display: none; }
      .site_header__lang { display: none; }
      .site_header__phone { font-size: 0; gap: 0; }
      .site_header__phone .chev { display: none; }
      .site_header__icons { gap: 10px; }
      .site_header__right { padding-right: 0; }
      .site_header__center { padding: 0 6px; }
      .site_header__logo-text { width: 90px; height: auto; }
      .deco_strip { gap: 8px; margin-top: 20px; }
      .deco_strip__group > span:nth-child(n+2) { display: none; }
      /* tighter hero rhythm on mobile */
      .hero_section { padding-top: 16px; }
      .breadcrumbs { margin: 0 0 0px; }
      .hero_content { gap: 20px; }
      .hero_left { gap: 16px; }
      .hero_stack { gap: 16px; }
      .hero_actions { gap: 16px; }
      .hero_cta_col { gap: 8px; }
      /* prevent flex/grid children from forcing the layout wider than the viewport */
      .hero_content, .hero_stack, .hero_headline, .hero_actions, .hero_cta_col,
      .hero_right, .hero_cta_note, .hero_cta_note__text { min-width: 0; }
    }
    /* very narrow screens (<333px): tighten the messenger button gap so the
       label stops wrapping to 3 rows */
    @media (max-width: 333px) {
      .act_card__btn { gap: 4px; }
    }
    /* fonts below breadcrumbs → e-Ukraine (article rule: only e-Ukraine in body) */
    .toc__title, .deco_strip, .deco_strip * { font-family: var(--font-body); }

    /* TOC heading is a link now — keep Serg's .toc__heading typography, just make it a block link */
    .toc__heading { display: block; cursor: pointer; }

    /* article body layout: left 840 text column + right sticky consult widget */
    .article_layout { padding: 32px 0 64px; }
    .article_layout__grid { display: block; }
    .article_layout__main { min-width: 0; }
    .article_layout__aside { margin-top: 32px; }

    /* Consult widget — mobile-first (Figma mobile frame 7181:174); desktop overrides at ≥1024 (frame 7181:204).
       Radial fill #D9E6FF→#F4F4F4, no stroke, NO corner rounding on card / avatar / phone tile. */
    .consult_widget { background: radial-gradient(135% 125% at 80% 60%, #D9E6FF 0%, #F4F4F4 100%); padding: 20px; }
    .consult_widget__title { font-family: var(--font-body); font-weight: 500; font-size: 18px; line-height: 1.4; color: var(--c-black); margin: 0 0 14px; }
    .consult_widget__title-accent { color: var(--c-blue); }
    .consult_widget__text { font-family: var(--font-body); font-weight: 300; font-size: 14px; line-height: 1.7; color: var(--c-text); margin: 0 0 14px; }
    .consult_widget__card { background: var(--c-white); display: flex; flex-direction: column; gap: 12px; padding: 14px; margin-bottom: 14px; }
    .consult_widget__person { display: flex; align-items: center; gap: 12px; }
    .consult_widget__avatar { width: 45px; height: 45px; overflow: hidden; flex-shrink: 0; }
    .consult_widget__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .consult_widget__person-info { display: flex; flex-direction: column; gap: 6px; }
    .consult_widget__person-name { font-family: var(--font-body); font-weight: 500; font-size: 12px; text-transform: uppercase; color: var(--c-black); }
    .consult_widget__person-role { font-family: var(--font-body); font-weight: 400; font-size: 11px; text-transform: lowercase; color: rgba(0, 0, 0, 0.7); }
    .consult_widget__divider { display: block; height: 1px; background: rgba(0, 0, 0, 0.05); margin: 0; }
    .consult_widget__contacts { display: flex; align-items: center; gap: 12px; }
    .consult_widget__contacts-text { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
    .consult_widget__phone { font-family: var(--font-body); font-weight: 500; font-size: 11px; letter-spacing: 0.11px; color: var(--c-black); }
    .consult_widget__mail { font-family: var(--font-body); font-weight: 400; font-size: 10px; color: rgba(0, 0, 0, 0.89); white-space: nowrap; }
    .consult_widget__call { flex-shrink: 0; width: 29px; height: 29px; display: grid; place-items: center; background: var(--c-blue-soft); }
    .consult_widget__call img { width: 14px; height: 14px; }
    .consult_widget__btn { display: flex; align-items: center; gap: 16px; padding: 10px 14px; background: var(--c-blue); color: #fff; font-family: var(--font-body); font-weight: 500; font-size: 12px; line-height: 1.4; text-transform: uppercase; }
    .consult_widget__btn-text { flex: 1; }
    .consult_widget__btn-icons { display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; }
    .consult_widget__btn-icons img { width: 28px; height: 28px; display: block; }

    @media (min-width: 1024px) {
      /* text column flexes (= 840px at the 1280 design width, narrower below) so the 320px widget always fits */
      .article_layout__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
      /* clear the sticky header (var(--header-h)) so the widget isn't hidden under the menu on scroll */
      .article_layout__aside { margin-top: 0; position: sticky; top: calc(var(--header-h) + 20px); }

      /* desktop sidebar widget — Figma desktop frame 7181:204 (larger padding / type / icons) */
      .consult_widget { padding: 32px; }
      .consult_widget__title { font-size: 20px; margin: 0 0 18px; }
      .consult_widget__text { margin: 0 0 20px; }
      .consult_widget__card { margin-bottom: 20px; }
      .consult_widget__person { gap: 14px; }
      .consult_widget__btn { padding: 10px 12px 10px 16px; font-size: 13px; }
      .consult_widget__btn-icons img { width: 32px; height: 32px; }
    }

    /* ≥1200: align the sticky aside to the same grid column as the .act_card.
       The decision grid is [448px TOC] + 24px gap + [pair], and the pair splits
       into two equal cards (gap 0) — so act_card width = (100% - 448 - 24) / 2.
       Both grids live in the same .container, so reusing that formula makes the
       aside's left/right edges line up exactly with the act_card column. */
    @media (min-width: 1200px) {
      .article_layout__grid {
        grid-template-columns: minmax(0, 1fr) calc((100% - 448px - 24px) / 2);
      }
    }

    /* ===== Comparison table polish (real table only at >=1280, where the column is the full 840px) ===== */
    @media (min-width: 1280px) {
      /* Whole words everywhere — NO hyphenation, NO mid-word breaks. Comfortable 13px type
         + generous padding; the table no longer squeezes 6 columns into 840px — it scrolls
         horizontally inside .ls_matrix__scroll with the name column frozen (see the main
         >=1280 block). Per-column min-width drives the conditional scroll. */
      .ls_matrix_table__th,
      .ls_matrix_table__rowname,
      .ls_matrix_table__td,
      .ls_adv li,
      .ls_visc_text { overflow-wrap: normal; word-break: normal; hyphens: none; }
      .ls_matrix_table__th { font-size: 12px; padding: 14px 16px; }
      .ls_matrix_table__rowhead,
      .ls_matrix_table__td { font-size: 13px; padding: 14px 16px; }
      .ls_matrix_table__rowhead .ls_matrix_table__rowname { font-size: 14px; }
      /* viscosity labels stay on ONE line; with table-layout:auto the column then
         auto-widens to fit the longest value («Середня – надвисока») — no hand-tuned width. */
      .ls_visc_text { font-size: 12px; white-space: nowrap; }
      /* frozen name-column tint */
      .ls_matrix_table__rowhead { background: #f4f7f9; }
      /* The base `.ls_matrix_table__td--bool { display: flex; ... }` rule is for the
         MOBILE card (icon + label on one line). On the desktop table it must be a real
         table-cell — otherwise the value flex-item (`flex: 1 1 0; min-width: 0`) shrinks
         BELOW its content and a long label («Ограниченно») overflows into the next column
         instead of wrapping. As a table-cell with the inline ⚠/✓ icon, a long value just
         wraps onto its own line below the icon and fits the column. (Higher specificity
         than the base rule so it wins regardless of source order.) */
      .ls_matrix_table__td.ls_matrix_table__td--bool { display: table-cell; }
      .ls_adv li { padding-left: 14px; }
      .ls_adv li::before { top: 0.45em; }
      /* keep the viscosity gauge inside its column */
      .ls_matrix_table__td--range .ls_visc_bar { max-width: 100%; }
      /* limitations: simple horizontal icon + text columns (flex), no text-indent hack */
      .ls_matrix_table__td--neg .ls_mark { width: 16px; height: 16px; margin-right: 6px; vertical-align: 0; }
      .ls_matrix_table__td--neg .ls_mark svg { width: 14px; height: 14px; }
    }

/* ============================================================
   MOTION — smooth anchor scrolling + reveal-on-scroll
   Progressive enhancement: the hidden initial state is scoped to
   `html.js`, so with JS off (or unsupported) every element renders
   fully visible. Only opacity + transform animate (GPU-friendly,
   no layout shift). prefers-reduced-motion disables all of it.
   ============================================================ */

/* --- Smooth in-page anchor scrolling --- */
html { scroll-behavior: smooth; }

/* Sticky header is 75px tall — keep anchored sections clear of it */
.ls_section { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* --- Reveal-on-scroll utility --- */
/* Individual reveal + per-child stagger inside a .reveal-stagger group */
html.js .reveal,
html.js .reveal-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}
html.js .reveal.is-visible,
html.js .reveal-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}
/* Fade-only variant — used on the sticky consult widget so the
   reveal transform never fights with position: sticky */
html.js .reveal--fade { transform: none; }

/* Stagger: --reveal-i is set per child in JS */
html.js .reveal-stagger > * { transition-delay: calc(var(--reveal-i, 0) * 60ms); }

/* Small fixed delays for paired elements (e.g. hero photo after copy) */
html.js .reveal--d1 { transition-delay: 0.09s; }

/* --- Accessibility: honour reduced-motion. Defined last so it wins
   over the rules above without needing !important. --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal,
  html.js .reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
}

/* ============================================================
   SHARE BOX — поділитися статтею (Telegram / WhatsApp / Viber / email)
   ============================================================ */
.share_box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 57px;
  margin-top: 32px;
}
.share_box__title {
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  line-height: 16px;
  letter-spacing: 0.72px;
  text-transform: uppercase;
  color: var(--c-black);
  white-space: nowrap;
}
.share_box__links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 32px;
}
/* Text links (Figma 7640-3658): underline hidden by default, revealed on hover. */
.share_link {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  line-height: 16px;
  text-transform: uppercase;
  color: #595959;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.25s ease, text-decoration-color 0.25s ease;
}
.share_link:hover,
.share_link:focus-visible {
  color: var(--c-black);
  text-decoration-color: currentColor;
}
.share_link--copy.is-copied {
  color: var(--c-blue);
  text-decoration-color: currentColor;
}

@media (max-width: 560px) {
  .share_box { gap: 24px 24px; }
  .share_box__title { flex-basis: 100%; }
  .share_box__links { gap: 24px 32px; }
}

/* Desktop: hero photo height matches the left content column (no forced viewport height) */
@media (min-width: 1025px) {
  .hero__container {
    align-items: stretch;
    min-height: 0;
  }
  .hero__media {
    align-self: stretch;
    min-height: 0;
  }
}

/* ============================================================
   MOBILE MINI-TOC — fixed quick-nav rail under the header
   Mobile/tablet only (<1024). Visual language matches the desktop
   .toc: numbered badge, blue active state (#3964FB + rgba(19,127,236,.1)),
   sharp corners, e-Ukraine type, header-style translucent blur.
   --mtoc-top / --mtoc-anchor-offset are kept in sync by JS.
   ============================================================ */
.mtoc { display: none; }

@media (max-width: 1023px) {
  .mtoc {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    top: var(--mtoc-top, 64px);
    z-index: 40; /* below the sticky header (50), above article content */
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--c-border);
    /* hidden until JS reveals it; visibility keeps it out of tab order + AT */
    visibility: hidden;
    transform: translateY(-120%);
    transition: transform 0.3s var(--ease-out), visibility 0s linear 0.3s;
  }
  .mtoc--visible {
    visibility: visible;
    transform: translateY(0);
    transition: transform 0.3s var(--ease-out), visibility 0s;
  }

  /* reading-progress line across the top edge of the rail */
  .mtoc__progress {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: rgba(0, 0, 0, 0.06);
  }
  .mtoc__progress-bar {
    display: block;
    height: 100%;
    width: 0;
    background: var(--c-blue);
    transition: width 0.15s linear;
  }

  /* horizontal scroll-snap rail — same pattern as the matrix/types sliders */
  .mtoc__list {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    /* keep the rail's edge inset when snap aligns a chip to the start/end,
       otherwise scroll-snap pulls the first/last chip flush against the edge */
    scroll-padding-inline: 10px;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .mtoc__list::-webkit-scrollbar { display: none; }
  .mtoc__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .mtoc__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px 7px 7px;
    background: var(--c-bg-soft);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    line-height: 1.2;
    color: var(--c-black);
    white-space: nowrap;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
  }
  .mtoc__num {
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: #F2F2F2;
    color: var(--c-black);
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 11px;
    line-height: 1;
    transition: background var(--transition), color var(--transition);
  }

  /* active chip = exact desktop-TOC active look */
  .mtoc__item--active .mtoc__link {
    background: var(--c-blue-tint-19);
    color: var(--c-blue);
  }
  .mtoc__item--active .mtoc__num {
    background: var(--c-blue);
    color: var(--c-white);
  }

  /* keyboard focus ring (chips are real links) */
  .mtoc__link:focus-visible {
    outline: 2px solid var(--c-blue);
    outline-offset: 2px;
  }

  /* anchored jumps must clear the header + the rail (JS keeps the value exact) */
  .ls_section { scroll-margin-top: var(--mtoc-anchor-offset, calc(var(--header-h) + 4.5rem)); }
}

/* 768–1023: header is 75px, so the rail pins lower */
@media (min-width: 768px) and (max-width: 1023px) {
  .mtoc { top: var(--mtoc-top, 75px); }
}

@media (prefers-reduced-motion: reduce) {
  .mtoc { transition: visibility 0s; }
  .mtoc--visible { transition: visibility 0s; }
  .mtoc__progress-bar { transition: none; }
}

/* ============================================================
   Collapsible card body ("Переглянути більше")
   Trims each type-card description to a COMMON bottom edge so the
   toggles line up across cards: the text frame is (tallest title +
   ~8 body lines), and a card with a shorter title just shows a few
   more lines — heights are measured, not lines counted, so paragraph
   gaps never throw the cut off. The lower half of the last visible
   line fades to white. JS (see index.html) wraps the body <p>s in
   .ls_type_row__prose, sets its height + --ls-lh, and adds
   .is-collapsible only when the text overflows the frame — so with
   JS off the full text shows and nothing is ever hidden.
   ============================================================ */
.ls_type_row__prose { min-width: 0; }

.ls_type_row__prose.is-collapsible {
  position: relative;
  overflow: hidden;
  /* height is set inline by JS (the common frame height); transition for open/close */
  transition: height 0.4s ease;
}
/* white fade over the last ~2 lines: a soft ramp over the upper line plus a full
   line of solid white at the bottom, so the hard overflow cut (which can land
   mid-line) is fully masked instead of leaving a sharp sliver of text. */
.ls_type_row__prose.is-collapsible::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--ls-lh, 1.75em) * 2.2);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 28%, var(--color-base-white) 45%);
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.ls_type_row__prose.is-collapsible.is-expanded::after { opacity: 0; }

/* quiet brand-coloured text toggle, between the prose and the "Переглянути товари" CTA */
.ls_type_row__more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin: var(--space-12) 0 var(--space-20);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: var(--font-family-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: var(--color-brand-primary);
}
.ls_type_row__more[hidden] { display: none; }
.ls_type_row__more-text { text-underline-offset: 2px; }
.ls_type_row__more:hover .ls_type_row__more-text,
.ls_type_row__more:focus-visible .ls_type_row__more-text { text-decoration: underline; }
.ls_type_row__more-arrow { flex-shrink: 0; transition: transform 0.2s ease; }
.ls_type_row__more[aria-expanded="true"] .ls_type_row__more-arrow { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .ls_type_row__prose.is-collapsible { transition: none; }
  .ls_type_row__more-arrow { transition: none; }
}

/* ============================================================
   App/benefit datasheet tiles — keep hover transitions alive even
   though they sit inside .reveal-stagger (whose higher-specificity
   transition would otherwise clobber box-shadow/border-color), and
   re-declare the reveal timing so the entrance animation survives.
   ============================================================ */
html.js .reveal-stagger > .ls_app_tile {
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out),
              box-shadow 0.3s ease, border-color 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .ls_app_tile,
  html.js .reveal-stagger > .ls_app_tile,
  .ls_app_tile::before,
  .ls_app_tile::after,
  .ls_app_tile__icon { transition: none; }
}

/* ============================================================
   Applications grid (NOT .ls_buy__benefits): static, number-free
   tiles. Drops the mono catalogue index + hover effect; on mobile
   uses a smaller icon chip + tighter spacing so long UA words
   (автомобілебудуванні) don't wrap mid-word. Benefit cards in the
   buy section keep their own hover / scan-line / sizing.
   ============================================================ */
.ls_app_grid:not(.ls_buy__benefits) .ls_app_tile::before,
.ls_app_grid:not(.ls_buy__benefits) .ls_app_tile::after { content: none; }

.ls_app_grid:not(.ls_buy__benefits) .ls_app_tile { padding-right: var(--space-24); }
@media (min-width: 768px) {
  .ls_app_grid:not(.ls_buy__benefits) .ls_app_tile { padding-right: var(--space-28); }
}

/* mobile: smaller icon chip + tighter gap/padding → wider text column */
@media (max-width: 767px) {
  .ls_app_grid:not(.ls_buy__benefits) .ls_app_tile {
    gap: var(--space-16);
    padding: var(--space-20);
  }
  .ls_app_grid:not(.ls_buy__benefits) .ls_app_tile__icon {
    width: 40px;
    height: 40px;
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  }
  .ls_app_grid:not(.ls_buy__benefits) .ls_app_tile__icon svg { width: 22px; height: 22px; }
}