/* ============================================================
   GeoWise — единый файл стилей внутренних страниц
   Собран из инлайновых <style> старых страниц без изменений.
   ============================================================ */

/* ============================================================
   1. ШРИФТЫ (@font-face — семейство Manrope, 400/500/600/700/800)
   ============================================================ */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../fonts/font11_a87061c3.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../fonts/font12_90699812.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../fonts/font13_1d404971.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../fonts/font14_865de48e.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../fonts/font15_4d8052ab.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: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../../fonts/font16_d9d59589.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../fonts/font11_a87061c3.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../fonts/font12_90699812.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../fonts/font13_1d404971.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../fonts/font14_865de48e.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../fonts/font15_4d8052ab.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: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../../fonts/font16_d9d59589.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../fonts/font11_a87061c3.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../fonts/font12_90699812.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../fonts/font13_1d404971.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../fonts/font14_865de48e.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../fonts/font15_4d8052ab.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: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../../fonts/font16_d9d59589.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../fonts/font11_a87061c3.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../fonts/font12_90699812.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../fonts/font13_1d404971.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../fonts/font14_865de48e.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../fonts/font15_4d8052ab.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: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../../fonts/font16_d9d59589.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: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../../fonts/font11_a87061c3.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: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../../fonts/font12_90699812.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../../fonts/font13_1d404971.woff2") format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../../fonts/font14_865de48e.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../../fonts/font15_4d8052ab.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: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../../fonts/font16_d9d59589.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;
}

/* ============================================================
   2. ПЕРЕМЕННЫЕ, БАЗА, ССЫЛКИ
   3. ШАПКА (site-hdr) + НАВИГАЦИЯ ДЕСКТОП
   4. БУРГЕР — кнопка, панель, scrim, мобильная навигация
   5. КОНТЕНТ — main, .card, типографика
   6. ТАБЛИЦЫ — .tbl-wrap, .card table
   7. Q/A блок
   8. ПОДВАЛ — стили инлайн в HTML
   ============================================================ */
  :root {
    --ink: #0B0F17;
    --muted: #6A7385;
    --line: #DCE2EC;
    --brand: #1268F0;
    --card-bg: rgba(255,255,255,0.97);
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    color: var(--ink);
    font-family: Manrope, "Helvetica Neue", Helvetica, sans-serif;
    -webkit-font-smoothing: antialiased;
    background-color: #EEF1F6;
    background-image: url("../../images/img15_b0ca1b2f.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  a { color: var(--brand); text-decoration: none; }
  a:hover { color: #0B2E9E; }

  /* HEADER — переиспользуется стилистика лендинга: тот же градиент, синий "Wise" в логотипе, Manrope 600 в ссылках */
  .site-hdr {
    background: linear-gradient(to right,#FAF9FD 0%,#FAFAFD 5%,#F9F8FD 13%,#F3F3F9 18%,#ECEDF5 25%,#E9EAF3 31%,#E6E7F1 42%,#E3E4EF 50%,#E0E1ED 63%,#DEDFEB 75%,#E0E2ED 84%,#E0E2EE 100%);
    border-bottom: 1px solid rgba(11,15,23,0.08);
    position: sticky;
    top: 0;
    z-index: 50;
  }
  .hdr-in {
    max-width: 1440px;
    margin: 0 auto;
    padding: 14px 20px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px 20px;
  }
  .hdr-logo {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--ink);
    white-space: nowrap;
    flex: none;
  }
  .hdr-logo .brand { color: var(--brand); }
  .hdr-nav {
    display: none;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px 18px;
    flex: 1 1 auto;
    justify-content: flex-start;
    min-width: 0;
  }
  .hdr-nav a {
    font-size: 14.5px;
    font-weight: 600;
    color: #131824;
    transition: color .15s;
    padding: 6px 0;
    white-space: nowrap;
  }
  .hdr-nav a:hover { color: var(--brand); }
  .hdr-nav a.active {
    color: var(--brand);
    border-bottom: 2px solid var(--brand);
  }
  .hdr-cta {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: #fff;
    color: #0B0F17;
    border: 1.5px solid #C6CDD9;
    border-radius: 12px;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    flex: none;
  }
  .hdr-cta:hover { color: #0B0F17; opacity: .92; }
  .h-mob {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
  }
  .mburger-nav a.active { font-weight: 700; background: rgba(11,15,23,0.05); color: #0B0F17; }
  @media (min-width: 1280px) {
    .hdr-nav { display: flex; }
    .hdr-cta { display: inline-flex; }
    .h-mob { display: none !important; }
    /* Единая высота desktop-шапки: 67px .hdr-in (border-box, включает padding 14+14)
       + 1px border-bottom .site-hdr = 68px. Компенсирует «спокойную» .hdr-cta
       (13.5/8-14, ~36px), не увеличивая саму кнопку. */
    .hdr-in { min-height: 67px; }
  }

  /* Mobile burger menu — visible strictly below 1280px, no changes at >=1280px */
  .mburger-btn { display: none; }
  .mburger-panel, .mburger-scrim { display: none; }
  @media (max-width: 1279.98px) {
    /* hide header "Заказать →" button below 1280 (leave burger alone, kept in DOM for easy revert) */
    .h-mob a[href="#order"]:has(+ #mburger-btn) { display: none !important; }
    .mburger-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      padding: 0;
      margin: 0;
      border: 0;
      background: transparent;
      color: #131824;
      cursor: pointer;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      flex: none;
    }
    .mburger-btn:focus-visible { outline: 2px solid #1268F0; outline-offset: 2px; border-radius: 6px; }
    .mburger-lines { position: relative; width: 22px; height: 16px; display: block; }
    .mburger-lines::before,
    .mburger-lines::after,
    .mburger-lines > span {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      background: currentColor;
      border-radius: 2px;
    }
    .mburger-lines::before { top: 0; }
    .mburger-lines > span { top: 7px; display: block; }
    .mburger-lines::after { bottom: 0; }

    .mburger-scrim {
      display: block;
      position: fixed;
      inset: 0;
      background: rgba(11,15,23,0.45);
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s ease-out;
      z-index: 990;
    }
    .mburger-panel {
      display: flex;
      flex-direction: column;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      max-height: 100dvh;
      background: #FAFAFD;
      color: #0B0F17;
      font-family: 'Manrope', "Helvetica Neue", Helvetica, sans-serif;
      padding: 10px 20px 26px;
      box-shadow: 0 12px 32px rgba(11,15,23,0.18);
      border-bottom-left-radius: 24px;
      border-bottom-right-radius: 24px;
      transform: translateY(-100%);
      transition: transform .24s ease-out;
      z-index: 1000;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      visibility: hidden;
    }
    .mburger-close {
      align-self: flex-end;
      width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      background: transparent;
      color: #0B0F17;
      font-size: 28px;
      line-height: 1;
      cursor: pointer;
      padding: 0;
      margin: 0 -14px 4px 0;
      font-family: inherit;
    }
    .mburger-close:focus-visible { outline: 2px solid #1268F0; outline-offset: 2px; border-radius: 6px; }
    .mburger-nav { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
    .mburger-nav a {
      display: block;
      padding: 12px 8px;
      min-height: 44px;
      font-size: 16px;
      font-weight: 400;
      color: #0B0F17;
      text-decoration: none;
      border-radius: 8px;
      line-height: 1.25;
    }
    .mburger-nav a:hover { color: #1268F0; background: rgba(18,104,240,0.06); }
    .mburger-sep { height: 1px; background: rgba(11,15,23,0.18); margin: 18px 4px; }
    .mburger-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 22px;
      min-height: 56px;
      background: #0B0F17;
      color: #fff;
      padding: 16px 20px;
      border-radius: 14px;
      font-size: 15px;
      font-weight: 700;
      text-decoration: none;
      font-family: 'Manrope', "Helvetica Neue", Helvetica, sans-serif;
      white-space: nowrap;
      text-align: center;
    }
    body.mopen .mburger-scrim { opacity: 1; pointer-events: auto; }
    body.mopen .mburger-panel { transform: translateY(0); visibility: visible; }
    body.mopen { overflow: hidden; }
  }
  @media (min-width: 1280px) {
    .mburger-btn, .mburger-panel, .mburger-scrim { display: none !important; }
  }

  /* MAIN CARD */
  main {
    flex: 1 1 auto;
    padding: 16px 16px 48px;
    display: flex;
    justify-content: center;
  }
  .card {
    background: var(--card-bg);
    max-width: 820px;
    width: 100%;
    border-radius: 20px;
    padding: clamp(20px, 4vw, 44px) clamp(18px, 4vw, 48px);
    box-shadow: 0 10px 32px rgba(11,15,23,0.10), 0 2px 6px rgba(11,15,23,0.05);
  }

  /* Typography */
  .card h1 {
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.12;
    letter-spacing: -0.03em;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 18px;
  }
  .card h2 {
    font-size: clamp(20px, 2.2vw, 26px);
    line-height: 1.22;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--ink);
    margin: 36px 0 14px;
  }
  .card p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    margin: 0 0 14px;
    text-wrap: pretty;
  }
  .card strong { font-weight: 700; color: var(--ink); }
  .card em { color: var(--muted); font-style: italic; }
  .card ul {
    margin: 0 0 14px;
    padding: 0 0 0 22px;
  }
  .card li {
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
    margin: 6px 0;
  }

  /* TABLE */
  .tbl-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 8px 0 18px;
    border-radius: 12px;
    border: 1px solid var(--line);
  }
  .card table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    font-size: 14.5px;
    line-height: 1.5;
  }
  .card thead th {
    text-align: left;
    font-weight: 700;
    background: #F4F6FB;
    color: var(--ink);
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
  }
  .card tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    vertical-align: top;
  }
  .card tbody tr:last-child td { border-bottom: none; }
  .card tbody tr:nth-child(even) td { background: #FBFCFE; }

  /* Q/A block */
  .qa { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
  .qa:first-of-type { border-top: none; padding-top: 0; }
  .qa .q { font-weight: 700; margin: 0 0 6px; color: var(--ink); }
  .qa .a { margin: 0 0 4px; color: var(--ink); }

  /* FOOTER — переиспользуется подвал лендинга целиком */

  /* ==========================================================================
     Layout "article" — теперь целиком описан в §10 (body[data-layout="article"]).
     Прежний shell (max 1920 + clamp-паддинги, reading col 724) заменён
     полноразмерным grid из §10 (см. блок 10.8).
     ========================================================================== */

  /* ==========================================================================
     Service list — визуальная группировка блоков услуг на десктопе.
     Каждый .service-block — карточка внутри родительской .card:
     переиспользуем те же токены (--card-bg, --line, радиус 20px),
     паддинги — меньшая ступень clamp-семьи .card, тени нет
     (границы 1px var(--line) достаточно, чтобы не перегружать вложенность).
     Мобильная и планшетная вёрстка не меняется — правила только >=1280px.
     ========================================================================== */
  @media (min-width: 1280px) {
    .service-list {
      display: flex;
      flex-direction: column;
      gap: 36px;
    }
    .service-block {
      background: var(--card-bg);
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: clamp(16px, 3vw, 32px) clamp(16px, 3vw, 36px);
    }
    .service-block > *:first-child { margin-top: 0; }
    .service-block > *:last-child { margin-bottom: 0; }
  }

  /* ==========================================================================
     Layout "product" — семантические компоненты reusable-каталога услуг.
     Скоуп: body[data-layout="product"]. Композиция построена по референсу
     _ref_services_master.png (editorial-строки, без карточек-теней), но
     содержимое компонентов приходит из обычного Markdown — правил под
     конкретные названия услуг нет. Добавление/удаление услуги, изменение
     цены, длины описания, количества пунктов «Что внутри» — без правок CSS.
     ========================================================================== */

  /* Surface: снимаем внешнюю белую карточку целиком (все ширины).
     Фон страницы — нейтральный #FBFCFE, как у article-layout. */
  body[data-layout="product"] {
    background-color: #FBFCFE;
    background-image: none;
  }
  body[data-layout="product"] main {
    padding: 0 0 clamp(48px, 6vw, 96px);
  }
  body[data-layout="product"] main article.card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    max-width: none;
    width: 100%;
  }

  /* Product hero — full-bleed фон #ECEFFA, крупный H1 + lead.
     Padding-inline по той же формуле, что у article-hero. */
  body[data-layout="product"] .article-hero {
    background: #ECEFFA;
    padding: clamp(40px, 5vw, 80px) 16px;
    margin: 0;
    max-width: none;
  }
  @media (min-width: 980px) and (max-width: 1099.98px) {
    body[data-layout="product"] .article-hero {
      padding-inline: clamp(16px, 3vw, 40px);
    }
  }
  @media (min-width: 1100px) and (max-width: 1279.98px) {
    body[data-layout="product"] .article-hero {
      padding-inline: min(clamp(70px, 5.469vw, 105px), max(16px, calc(-160.4px + 18vw)));
    }
  }
  @media (min-width: 1280px) {
    body[data-layout="product"] .article-hero {
      padding-inline: clamp(16px, 5.469vw, 105px);
    }
  }
  body[data-layout="product"] .article-breadcrumb {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--muted);
  }
  body[data-layout="product"] .article-hero > h1 {
    font-size: clamp(34px, 3.4vw, 52px);
    line-height: 1.12;
    letter-spacing: -0.03em;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 16px;
    max-width: 900px;
  }
  body[data-layout="product"] .article-hero .article-lead,
  body[data-layout="product"] .card p.article-lead {
    font-size: clamp(18px, 1.35vw, 21px);
    line-height: 1.5;
    font-weight: 500;
    color: var(--ink);
    margin: 0;
    max-width: 820px;
  }

  /* Product body — reading column (formula padding, как у article).
     Скроллирующие контейнеры и tokens нейтральные — компонент-скоупы
     задают собственную типографику. */
  body[data-layout="product"] .article-body {
    padding: 0 16px;
    max-width: 100%;
    min-width: 0;
    margin: 0;
  }
  @media (min-width: 980px) and (max-width: 1099.98px) {
    body[data-layout="product"] .article-body {
      padding-inline: clamp(16px, 3vw, 40px);
    }
  }
  @media (min-width: 1100px) and (max-width: 1279.98px) {
    body[data-layout="product"] .article-body {
      padding-inline: min(clamp(70px, 5.469vw, 105px), max(16px, calc(-160.4px + 18vw)));
    }
  }
  @media (min-width: 1280px) {
    body[data-layout="product"] .article-body {
      padding-inline: clamp(16px, 5.469vw, 105px);
    }
  }

  /* product-body — контейнер под последовательность service/note/faq.
     Каждый следующий компонент отделён верхней линией `--line`. */
  body[data-layout="product"] .product-body {
    min-width: 0;
  }
  body[data-layout="product"] .product-body > * + * {
    border-top: 1px solid var(--line);
  }

  /* One service — mobile stack */
  body[data-layout="product"] .service {
    padding: clamp(28px, 5vw, 40px) 0;
    min-width: 0;
  }
  body[data-layout="product"] .service-head {
    margin: 0 0 14px;
    min-width: 0;
  }
  body[data-layout="product"] .service-title {
    font-size: clamp(22px, 5vw, 26px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
  }
  body[data-layout="product"] .service-price {
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 500;
    font-size: clamp(20px, 4.4vw, 24px);
    color: var(--ink);
    margin: 6px 0 0;
    white-space: nowrap;
  }
  body[data-layout="product"] .service-price--free {
    color: var(--brand);
    font-family: Manrope, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 600;
  }
  body[data-layout="product"] .service-price-note {
    font-family: Manrope, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 500;
    font-size: clamp(13px, 0.95vw, 14px);
    color: var(--muted);
    line-height: 1.4;
    margin: 5px 0 0;
  }
  body[data-layout="product"] .service-body {
    min-width: 0;
  }
  body[data-layout="product"] .service-body > *:first-child { margin-top: 0; }
  body[data-layout="product"] .service-body > *:last-child { margin-bottom: 0; }
  body[data-layout="product"] .service-body p {
    font-size: clamp(16px, 4.2vw, 17px);
    line-height: 1.55;
    color: var(--ink);
    margin: 0 0 12px;
    text-wrap: pretty;
  }

  /* Service inside — «Что внутри:» + список-аккордеон */
  body[data-layout="product"] .service-inside {
    margin: 14px 0;
  }
  body[data-layout="product"] .service-inside > p {
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--ink);
  }
  body[data-layout="product"] .service-inside-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  body[data-layout="product"] .si-item {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
  }
  body[data-layout="product"] .si-item:first-child { border-top: none; }
  body[data-layout="product"] .si-item.si-plain {
    padding: 10px 0 10px 0;
    color: var(--ink);
    font-size: clamp(16px, 4.2vw, 17px);
    line-height: 1.5;
  }
  body[data-layout="product"] .si-item > details { margin: 0; }
  body[data-layout="product"] .si-item > details > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 32px 12px 0;
    font-weight: 600;
    font-size: clamp(16px, 4.2vw, 17px);
    line-height: 1.4;
    color: var(--ink);
    position: relative;
  }
  body[data-layout="product"] .si-item > details > summary::-webkit-details-marker { display: none; }
  body[data-layout="product"] .si-item > details > summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 400;
    font-size: 20px;
    color: var(--muted);
    line-height: 1;
  }
  body[data-layout="product"] .si-item > details[open] > summary::after { content: "−"; }
  body[data-layout="product"] .si-item > details > .si-body {
    padding: 0 32px 14px 0;
    font-size: clamp(15px, 4vw, 16px);
    line-height: 1.55;
    color: var(--ink);
  }

  /* Free-check вариант (Ступень 0) — форма проверки и details «Что проверяем» */
  body[data-layout="product"] .check-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 14px 0;
  }
  body[data-layout="product"] .check-input {
    min-height: 50px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    font-size: 16px;
    font-weight: 500;
    font-family: inherit;
    color: var(--ink);
    width: 100%;
    box-sizing: border-box;
  }
  body[data-layout="product"] .check-input:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-color: var(--brand);
  }
  body[data-layout="product"] .check-cta {
    min-height: 50px;
    padding: 12px 20px;
    background: #0B0F17;
    color: #fff;
    border: 0;
    border-radius: 14px;
    font-size: 15.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(11,15,23,.10);
    width: 100%;
  }
  body[data-layout="product"] .check-cta:hover { opacity: .92; }
  body[data-layout="product"] .check-cta:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }
  @media (min-width: 600px) {
    body[data-layout="product"] .check-form {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: stretch;
    }
    body[data-layout="product"] .check-cta {
      width: auto;
      padding: 12px 24px;
    }
  }
  body[data-layout="product"] details.check-what {
    border-top: 1px solid var(--line);
    padding: 14px 0 0;
    margin: 14px 0 0;
  }
  body[data-layout="product"] details.check-what > summary {
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    font-size: clamp(16px, 4.2vw, 17px);
    color: var(--ink);
    padding-right: 24px;
    position: relative;
  }
  body[data-layout="product"] details.check-what > summary::-webkit-details-marker { display: none; }
  body[data-layout="product"] details.check-what > summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 0;
    font-weight: 400;
    font-size: 20px;
    color: var(--muted);
    line-height: 1;
  }
  body[data-layout="product"] details.check-what[open] > summary::after { content: "−"; }
  body[data-layout="product"] details.check-what .check-what-body ul,
  body[data-layout="product"] details.check-what .check-what-body ol {
    padding-left: 22px;
    margin: 12px 0 0;
  }
  body[data-layout="product"] details.check-what .check-what-body li {
    margin: 6px 0;
    color: var(--ink);
    font-size: clamp(15px, 4vw, 16px);
    line-height: 1.55;
  }

  /* Product-note — editorial-строка «Несколько направлений» */
  body[data-layout="product"] .product-note {
    padding: clamp(28px, 5vw, 40px) 0;
    min-width: 0;
  }
  body[data-layout="product"] .product-note-head {
    margin: 0 0 12px;
  }
  body[data-layout="product"] .product-note-head h2 {
    font-size: clamp(22px, 5vw, 26px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
  }
  body[data-layout="product"] .product-note-body {
    min-width: 0;
  }
  body[data-layout="product"] .product-note-body > *:first-child { margin-top: 0; }
  body[data-layout="product"] .product-note-body > *:last-child { margin-bottom: 0; }
  body[data-layout="product"] .product-note-body p {
    font-size: clamp(16px, 4.2vw, 17px);
    line-height: 1.55;
    color: var(--ink);
    margin: 0 0 12px;
  }

  /* Product FAQ — H2 «Частые вопросы» + accordion-вопросы */
  body[data-layout="product"] .product-faq {
    padding: clamp(28px, 5vw, 40px) 0;
    min-width: 0;
  }
  body[data-layout="product"] .product-faq h2 {
    font-size: clamp(22px, 5vw, 26px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 18px;
  }
  body[data-layout="product"] .product-faq-list {
    min-width: 0;
  }
  body[data-layout="product"] .product-faq-item {
    border-top: 1px solid var(--line);
    padding: 14px 0;
    margin: 0;
  }
  body[data-layout="product"] .product-faq-item:first-child { border-top: none; padding-top: 4px; }
  body[data-layout="product"] .product-faq-item > summary {
    list-style: none;
    cursor: pointer;
    font-weight: 700;
    font-size: clamp(16px, 4.2vw, 17px);
    line-height: 1.4;
    color: var(--ink);
    padding-right: 24px;
    position: relative;
  }
  body[data-layout="product"] .product-faq-item > summary::-webkit-details-marker { display: none; }
  body[data-layout="product"] .product-faq-item > summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 0;
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
    color: var(--muted);
  }
  body[data-layout="product"] .product-faq-item[open] > summary::after { content: "−"; }
  body[data-layout="product"] .product-faq-item .product-faq-answer {
    margin-top: 8px;
    font-size: clamp(16px, 4.2vw, 17px);
    line-height: 1.55;
    color: var(--ink);
  }
  body[data-layout="product"] .product-faq-item .product-faq-answer p {
    margin: 0 0 10px;
  }
  body[data-layout="product"] .product-faq-item .product-faq-answer > *:last-child {
    margin-bottom: 0;
  }

  /* Editorial 2-col layout — service/note/faq на ≥980 переходят в
     сетку "название/цена слева ~26%, контент справа ~74%".
     Всё разметочное расположение — только grid, никаких fixed heights. */
  @media (min-width: 980px) {
    body[data-layout="product"] .service,
    body[data-layout="product"] .product-note,
    body[data-layout="product"] .product-faq {
      display: grid;
      grid-template-columns: minmax(0, 26fr) minmax(0, 74fr);
      column-gap: clamp(24px, 3vw, 56px);
      align-items: start;
      padding: clamp(40px, 4vw, 64px) 0;
    }
    body[data-layout="product"] .service-head,
    body[data-layout="product"] .product-note-head { margin: 0; }
    body[data-layout="product"] .product-faq h2 { margin: 0; }
    body[data-layout="product"] .service-title,
    body[data-layout="product"] .product-note-head h2,
    body[data-layout="product"] .product-faq h2 {
      font-size: clamp(22px, 1.8vw, 28px);
    }
    body[data-layout="product"] .service-price {
      font-size: clamp(20px, 1.5vw, 24px);
    }
    body[data-layout="product"] .service-price--free {
      font-size: clamp(16px, 1.15vw, 18px);
    }
    body[data-layout="product"] .service-body p,
    body[data-layout="product"] .product-note-body p {
      font-size: clamp(16px, 1.15vw, 18px);
    }
    body[data-layout="product"] .si-item > details > summary,
    body[data-layout="product"] .si-item.si-plain,
    body[data-layout="product"] details.check-what > summary,
    body[data-layout="product"] .product-faq-item > summary {
      font-size: clamp(16px, 1.1vw, 17px);
    }
    body[data-layout="product"] .si-item > details > .si-body,
    body[data-layout="product"] details.check-what .check-what-body li,
    body[data-layout="product"] .product-faq-item .product-faq-answer {
      font-size: clamp(15px, 1.05vw, 16px);
    }
  }

  /* visually-hidden — доступный label для input формы проверки */
  body[data-layout="product"] .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  /* ==========================================================================
     Service-block heading — раскладка «номер + название слева, цена справа».
     Только десктоп (>=1280px). Разметка не меняется: используем sb-*-элементы.
     Сетка из трёх колонок: номер (auto), название (1fr, может сжиматься до 0
     и переносить строки внутри своей зоны), цена (fit-content(50%), не даёт
     ценовой зоне отобрать больше половины доступной ширины и позволяет
     длинной цене переноситься внутри своей зоны). Тире-разделитель скрыт.
     При отсутствии .sb-price третья колонка сжимается в 0 и название
     занимает всю доступную ширину.
     ========================================================================== */
  @media (min-width: 1280px) {
    .sb-h {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) fit-content(50%);
      column-gap: 0.4em;
      align-items: baseline;
    }
    .sb-h .sb-sep { display: none; }
    .sb-h .sb-name { min-width: 0; }
    .sb-h .sb-price {
      justify-self: end;
      text-align: right;
      min-width: 0;
    }
  }

  /* ── Shared header для лендинга (:not([data-page])), article- и product-страниц. ── */
  @media (min-width: 1280px) {
    body:not([data-page]) .site-hdr,
    body[data-layout="article"] .site-hdr,
    body[data-layout="product"] .site-hdr { background: #FBFCFE; border-bottom: 1px solid #E3E7EF; box-shadow: none; }
    body:not([data-page]) .hdr-in,
    body[data-layout="article"] .hdr-in,
    body[data-layout="product"] .hdr-in { max-width: 1920px; padding-left: clamp(16px, 5.469vw, 105px); padding-right: clamp(16px, 5.469vw, 105px); }
    body:not([data-page]) .hdr-cta,
    body[data-layout="article"] .hdr-cta,
    body[data-layout="product"] .hdr-cta { border-radius: 10px; }
  }
  /* Header <1280: нейтральная система как на desktop (без лавандового градиента) */
  @media (max-width: 1279.98px) {
    body:not([data-page]) .site-hdr,
    body[data-layout="article"] .site-hdr,
    body[data-layout="product"] .site-hdr { background: #FBFCFE; border-bottom: 1px solid #E3E7EF; box-shadow: none; }
  }

  /* Desktop nav с 1100 (по диагностике W_min 1045 + визуальный запас) — landing + article + product */
  /* 1100–1279: сетка header = сетка hero/секций (та же рампа) */
  @media (min-width: 1100px) and (max-width: 1279.98px) {
    body:not([data-page]) .hdr-nav,
    body[data-layout="article"] .hdr-nav,
    body[data-layout="product"] .hdr-nav { display: flex; }
    body:not([data-page]) .hdr-cta,
    body[data-layout="article"] .hdr-cta,
    body[data-layout="product"] .hdr-cta { display: inline-flex; border-radius: 10px; }
    body:not([data-page]) .h-mob,
    body[data-layout="article"] .h-mob,
    body[data-layout="product"] .h-mob { display: none !important; }
    body:not([data-page]) .hdr-in,
    body[data-layout="article"] .hdr-in,
    body[data-layout="product"] .hdr-in { min-height: 67px; max-width: 1920px; padding-inline: min(clamp(70px, 5.469vw, 105px), max(16px, calc(-160.4px + 18vw))); }
    body:not([data-page]) .mburger-btn,
    body:not([data-page]) .mburger-panel,
    body:not([data-page]) .mburger-scrim,
    body[data-layout="article"] .mburger-btn,
    body[data-layout="article"] .mburger-panel,
    body[data-layout="article"] .mburger-scrim,
    body[data-layout="product"] .mburger-btn,
    body[data-layout="product"] .mburger-panel,
    body[data-layout="product"] .mburger-scrim { display: none !important; }
  }

  /* ==========================================================================
     9. Внутренние страницы — фундамент reusable-компонентов
     (article-hero / article-lead / article-body / article-breadcrumb,
      article-toc, article-callout, article-faq-item, article-references,
      service-inside). Ничего из старых правил не переписывает — новые классы.
     Ниже — только собственные токены/размеры/цвета уже присутствующих
     переменных :root (--ink/--muted/--line/--brand/--card-bg).
     ========================================================================== */

  /* Breadcrumb — над H1 внутри .article-hero */
  .article-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--muted);
    margin: 0 0 12px;
  }
  .article-breadcrumb a {
    color: var(--muted);
    text-decoration: none;
  }
  .article-breadcrumb a:hover { color: var(--brand); }
  .article-breadcrumb .article-breadcrumb-sep { color: var(--line); }
  .article-breadcrumb .article-breadcrumb-current { color: var(--ink); }

  /* Hero — reusable-обёртка H1 + lead. Базовые правила: применяются везде,
     где присутствуют классы (в т.ч. на services=layout=product). §10 перебивает
     только для article-layout. */
  .article-hero {
    margin: 0 0 24px;
  }
  .article-hero > h1 { margin-top: 4px; margin-bottom: 12px; }
  .article-hero .article-lead,
  .card p.article-lead {
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink);
    margin: 0 0 16px;
  }
  @media (min-width: 980px) {
    .article-hero .article-lead,
    .card p.article-lead {
      font-size: 18px;
      line-height: 1.55;
    }
  }

  /* Article body — пассивная обёртка контента после hero (используется на всех
     layout-типах, включая services). */
  .article-body { min-width: 0; }
  .article-body > *:first-child { margin-top: 0; }
  .article-body > *:last-child { margin-bottom: 0; }

  /* Thematic break — тонкая линия-разделитель разделов внутри article-body. */
  .article-rule {
    border: 0;
    border-top: 1px solid var(--line);
    margin-block: clamp(32px, 4vw, 56px);
  }

  /* FAQ accordion — details/summary в токенах, без анимаций */
  details.article-faq-item {
    border-top: 1px solid var(--line);
    padding: 14px 0;
    margin: 0;
  }
  details.article-faq-item:first-of-type { border-top: none; padding-top: 4px; }
  details.article-faq-item > summary {
    list-style: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.4;
    color: var(--ink);
    padding-right: 24px;
    position: relative;
  }
  details.article-faq-item > summary::-webkit-details-marker { display: none; }
  details.article-faq-item > summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 0;
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
    color: var(--muted);
  }
  details.article-faq-item[open] > summary::after { content: "−"; }
  details.article-faq-item > *:not(summary) { margin-top: 8px; }

  /* References — визуал (margin/padding/border-top) см. в §10.
     Здесь только правило для первого H2 внутри секции. */
  section.article-references > h2:first-child { margin-top: 8px; }

  /* Service-inside — «Что внутри» + список внутри .service-block */
  .service-inside {
    margin: 12px 0;
    padding: 12px 16px;
    background: #F4F7FB;
    border-radius: 10px;
  }
  .service-inside > p:first-child { margin-top: 0; }
  .service-inside > ol,
  .service-inside > ul { margin-bottom: 0; }

  /* Article TOC — базовое скрытие; визуал/sticky/grid см. в §10. */
  .article-toc { display: none; }

  /* 980–1279: single reading column, max-width 760, centered.
     Card раскрывается на всю ширину, дети центрируются в 760 (полки-макет). */
  @media (min-width: 980px) and (max-width: 1279.98px) {
    body[data-layout="article"] main article.card {
      max-width: none;
      width: 100%;
    }
    body[data-layout="article"] main article.card > * {
      max-width: 760px;
      margin-inline: auto;
    }
  }

  /* ≥1280 grid (reading column + sticky TOC) и <1280 скрытие TOC — см. §10. */
  @media (max-width: 1279.98px) {
    body[data-layout="article"] main article.card > .article-toc { display: none; }
  }

  /* ==========================================================================
     10. Article layout — dedicated visual layer.
     Скоуп: `body[data-layout="article"]` — применяется ко всем article-страницам
     (what-is-geo, how-neural-cite, integrity). Services (layout=product) — вне.
     Ранее блок был скоупирован на data-page="what-is-geo" как временный gate;
     после приёмки правила распространены на весь article-layout.
     Дубли с §9 (article-hero/lead/callout/toc/references/faq/reading-col)
     удалены — §10 остаётся единственным источником этих правил.
     ========================================================================== */

  /* 10.1 Header — правила вынесены в единый landing-скоуп выше
          (body:not([data-page]), body[data-layout="article"]). */

  /* 10.2 Page surface — снимаем внешнюю карточку-документ, фон page-surface. */
  body[data-layout="article"] {
    background-color: #FBFCFE;
    background-image: none;
  }
  body[data-layout="article"] main {
    padding: 0 0 clamp(48px, 6vw, 96px);
  }
  body[data-layout="article"] main article.card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    max-width: none;
    width: 100%;
  }
  /* сбросить article-layout ≥1280 (max 1920 + clamp паддинги на .card) */
  @media (min-width: 1280px) {
    body[data-layout="article"] main article.card {
      padding-left: 0;
      padding-right: 0;
    }
    body[data-layout="article"] main article.card > * {
      max-width: none;
      margin-inline: 0;
    }
  }

  /* 10.3 Article hero — full-bleed фон, крупный H1 + lead, formula-based padding-inline. */
  body[data-layout="article"] .article-hero {
    background: #ECEFFA;
    padding: clamp(40px, 5vw, 80px) 16px;
    margin: 0 0 0;
    max-width: none;
  }
  @media (min-width: 980px) and (max-width: 1099.98px) {
    body[data-layout="article"] .article-hero {
      padding-inline: clamp(16px, 3vw, 40px);
    }
  }
  @media (min-width: 1100px) and (max-width: 1279.98px) {
    body[data-layout="article"] .article-hero {
      padding-inline: min(clamp(70px, 5.469vw, 105px), max(16px, calc(-160.4px + 18vw)));
    }
  }
  @media (min-width: 1280px) {
    body[data-layout="article"] .article-hero {
      padding-inline: clamp(16px, 5.469vw, 105px);
    }
  }
  body[data-layout="article"] .article-breadcrumb {
    margin: 0 0 16px;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--muted);
  }
  body[data-layout="article"] .article-hero > h1 {
    font-size: clamp(34px, 3.4vw, 52px);
    line-height: 1.12;
    letter-spacing: -0.03em;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 16px;
    max-width: 900px;
  }
  body[data-layout="article"] .article-hero .article-lead,
  body[data-layout="article"] .card p.article-lead {
    font-size: clamp(18px, 1.35vw, 21px);
    line-height: 1.5;
    font-weight: 500;
    color: var(--ink);
    margin: 0;
    max-width: 820px;
  }

  /* 10.4 Article body — reading column, formula-based padding-inline. */
  body[data-layout="article"] .article-body {
    padding: clamp(28px, 3vw, 48px) 16px 0;
    max-width: 100%;
    min-width: 0;
    margin: 0;
  }
  /* 980–1279: reading column max-width 760 задаётся общим правилом §9
     (`main article.card > *`). Hero сбрасываем обратно к full-bleed
     (bg #ECEFFA + собственные padding-inline). */
  @media (min-width: 980px) and (max-width: 1279.98px) {
    body[data-layout="article"] main article.card > .article-hero {
      max-width: none;
      margin-inline: 0;
    }
  }
  body[data-layout="article"] .article-body > *:first-child { margin-top: 0; }
  body[data-layout="article"] .article-body > *:last-child { margin-bottom: 0; }

  /* Типографика внутри article-body */
  body[data-layout="article"] .article-body p,
  body[data-layout="article"] .article-body li {
    font-size: clamp(17px, 1.2vw, 19px);
    line-height: 1.6;
    color: var(--ink);
    font-weight: 500;
    margin: 0 0 1em;
    text-wrap: pretty;
  }
  body[data-layout="article"] .article-body li { margin: 6px 0; }
  body[data-layout="article"] .article-body ul,
  body[data-layout="article"] .article-body ol {
    margin: 0 0 1em;
    padding-left: 24px;
  }
  body[data-layout="article"] .article-body ul li::marker { color: var(--brand); }
  body[data-layout="article"] .article-body ol li::marker { color: var(--muted); font-weight: 700; }
  body[data-layout="article"] .article-body h2 {
    font-size: clamp(26px, 2.2vw, 34px);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-weight: 800;
    color: var(--ink);
    margin: clamp(48px, 5vw, 80px) 0 clamp(16px, 1.5vw, 24px);
  }
  /* компенсация sticky header (68) при hash-навигации TOC */
  body[data-layout="article"] .article-body h2 {
    scroll-margin-top: 84px;
  }
  body[data-layout="article"] .article-body h3 {
    font-size: clamp(20px, 1.5vw, 24px);
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-weight: 700;
    color: var(--ink);
    margin: clamp(28px, 3vw, 40px) 0 12px;
  }
  body[data-layout="article"] .article-body strong { font-weight: 700; color: var(--ink); }
  body[data-layout="article"] .article-body em { font-style: italic; color: var(--muted); }
  body[data-layout="article"] .article-body a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }
  body[data-layout="article"] .article-body a:hover {
    color: #0B2E9E;
    text-decoration-thickness: 2px;
  }

  /* 10.5 Таблицы — вне карточки, header голубовато-серый, dividers, brand-акцент. */
  body[data-layout="article"] .article-body .tbl-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 12px 0 24px;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  body[data-layout="article"] .article-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: clamp(14.5px, 1vw, 16px);
    line-height: 1.5;
  }
  body[data-layout="article"] .article-body thead th {
    text-align: left;
    background: #ECEFFA;
    color: var(--ink);
    font-weight: 600;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
  }
  body[data-layout="article"] .article-body tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    vertical-align: top;
    background: transparent;
  }
  body[data-layout="article"] .article-body tbody tr:last-child td { border-bottom: none; }
  body[data-layout="article"] .article-body tbody tr:nth-child(even) td { background: transparent; }
  /* Первая ячейка (термин / параметр) — brand 600 */
  body[data-layout="article"] .article-body tbody td:first-child {
    color: var(--brand);
    font-weight: 600;
  }

  /* 10.6 Callout — без карточки, синяя вертикальная линия слева. */
  body[data-layout="article"] blockquote.article-callout {
    background: transparent;
    border-radius: 0;
    border-left: 3px solid var(--brand);
    padding: 6px 0 6px clamp(16px, 1.6vw, 24px);
    margin: clamp(24px, 3vw, 32px) 0;
    color: var(--ink);
    font-size: clamp(18px, 1.3vw, 21px);
    line-height: 1.55;
    font-weight: 600;
  }
  body[data-layout="article"] blockquote.article-callout strong { font-weight: 700; }
  /* Если внутри callout последний параграф — em / начинается с «—», подпись muted. */
  body[data-layout="article"] blockquote.article-callout p:last-child:not(:first-child) em,
  body[data-layout="article"] blockquote.article-callout p:last-child:not(:first-child) {
    color: var(--muted);
    font-weight: 500;
    font-size: clamp(15px, 1vw, 17px);
  }

  /* 10.7 References / FAQ — muted, поменьше. */
  body[data-layout="article"] section.article-references {
    margin-top: clamp(48px, 5vw, 80px);
    padding-top: 16px;
    border-top: 1px solid var(--line);
  }
  body[data-layout="article"] section.article-references p,
  body[data-layout="article"] section.article-references li {
    font-size: 15px;
    color: var(--muted);
  }
  body[data-layout="article"] details.article-faq-item > summary {
    font-size: clamp(17px, 1.2vw, 19px);
    line-height: 1.4;
    font-weight: 700;
    color: var(--ink);
  }
  body[data-layout="article"] details.article-faq-item > *:not(summary) {
    font-size: clamp(16px, 1.1vw, 18px);
    line-height: 1.55;
    color: var(--ink);
  }

  /* 10.8 TOC — sticky ≥1280, вертикальная линия слева, первый пункт brand.
          Селектор с `:has(> .article-toc)` — та же спецификация, что у старого
          правила в §9 (line ~852), чтобы гарантированно перебивать по порядку. */
  @media (min-width: 1280px) {
    body[data-layout="article"] main article.card:has(> .article-toc) {
      display: grid;
      grid-template-columns:
        [full-start] minmax(16px, 1fr)
        [content-start] minmax(0, clamp(680px, 52vw, 760px))
        [reading-end] clamp(48px, 5vw, 96px)
        [toc-start] 220px
        [content-end] minmax(16px, 1fr) [full-end];
      column-gap: 0;
      row-gap: 0;
      align-items: start;
      justify-content: stretch;
      max-width: none;
      padding-inline: 0;
    }
    body[data-layout="article"] main article.card:has(> .article-toc) > * {
      max-width: none;
      margin-inline: 0;
    }
    body[data-layout="article"] main article.card:has(> .article-toc) > .article-hero {
      grid-column: full-start / full-end;
      justify-self: stretch;
      max-width: none;
    }
    body[data-layout="article"] main article.card:has(> .article-toc) > .article-body {
      grid-column: content-start / reading-end;
      grid-row: 2;
      padding-inline: 0;
      padding-top: clamp(28px, 3vw, 48px);
      max-width: none;
      margin: 0;
      min-width: 0;
    }
    body[data-layout="article"] main article.card:has(> .article-toc) > .article-toc {
      display: block;
      grid-column: toc-start / content-end;
      grid-row: 2;
      position: sticky;
      top: 84px;
      align-self: start;
      padding-top: clamp(28px, 3vw, 48px);
      max-width: 220px;
      min-width: 0;
    }
  }
  /* <1280: скрытие TOC — базовое правило §9 (см. .article-toc { display: none } + max-width 1279.98). */

  /* TOC — визуал (вертикальная линия, первый пункт = brand, muted-заголовок). */
  body[data-layout="article"] .article-toc-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 12px;
  }
  body[data-layout="article"] .article-toc ul {
    border-left: 2px solid var(--line);
    padding-left: 0;
    margin: 0;
    list-style: none;
  }
  body[data-layout="article"] .article-toc li { margin: 0; }
  body[data-layout="article"] .article-toc a {
    display: block;
    font-size: 14.5px;
    line-height: 1.35;
    font-weight: 500;
    color: var(--muted);
    text-decoration: none;
    padding: 8px 0 8px 14px;
    margin-left: -2px;
    border-left: 2px solid transparent;
  }
  body[data-layout="article"] .article-toc a:hover {
    color: var(--brand);
    border-left-color: var(--line);
  }
  body[data-layout="article"] .article-toc li:first-child > a {
    color: var(--brand);
    font-weight: 600;
    border-left-color: var(--brand);
  }