/* =========================================================================
   INWARD LABS — inward.css
   Единственный источник стилей. Владелец: builder ("СТИЛИ").
   Соглашение по именованию: .crew/build-notes/konvenciya-imenovaniya.md
   Числа — только из замеров: .crew/build-notes/zamery-prototipa.md
   ========================================================================= */

/* =========================================================================
   БЛОК 1 — @font-face
   Единственная реально отрисованная гарнитура страницы — Jura (task-7,
   независимый негативный контроль + перепроверка reviewer). CabinetGrotesk
   объявлена в исходном CSS прототипа, но рендерит НОЛЬ глифов — не
   подключаем (мёртвый код, портировать нечего).
   Jura — вариативный шрифт: font-weight объявлен ДИАПАЗОНОМ 300 700, а не
   одним числом — иначе браузер синтезирует поддельные насыщенности
   (подтверждено прямым экспериментом task-7: 400 и 500 при декларации
   одним числом рисуются одинаково, при диапазоне — реально разной ширины).
   Unicode-range слайсы (latin/latin-ext/cyrillic/cyrillic-ext) взяты из
   исходного набора файлов прототипа (reference/source/inward-styles-extracted.css),
   каждому слайсу — свой @font-face с тем же unicode-range, что и у файла.
   ========================================================================= */

@font-face {
  font-family: 'Jura';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/jura-latin.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: 'Jura';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/jura-latin-ext.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: 'Jura';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/jura-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Jura';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/jura-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* =========================================================================
   БЛОК 2 — :root ТОКЕНЫ
   Соглашение: .crew/build-notes/konvenciya-imenovaniya.md §3.
   Числа — ТОЛЬКО из .crew/build-notes/zamery-prototipa.md (замер отрисованной
   страницы, не декларация CSS, не ТЗ, не инвентарь токенов прототипа).
   Имена цветовых токенов — из словаря ролей reference/brand/brand.json
   (bg/ink/accent/divider), присвоены ПО СВОЙСТВУ, в котором значение реально
   стоит (color->ink, background->bg, border-color->divider), а не по схеме
   "на глаз" — правило 2-тер конвенции. Одно значение в двух ролях = два
   токена (пример уже найден в исходнике прототипа, не мной придуман).
   ЗАПРЕЩЕНО: аспирационная палитра brand.json.colors (роли blueOnDark/
   bgDark/dividerLight/dividerDark) — ни одно из этих значений не
   подтверждено замером живой страницы (zamery §3), поэтому ни одно из них
   не встречается ниже как литерал.
   ========================================================================= */

:root {
  /* --- цвет: базовая схема on-light (замер §3, тело страницы) --- */
  --il-color-bg: #FFFFFF;      /* фон body — getComputedStyle(body).backgroundColor */
  --il-color-ink: #111111;     /* цвет текста body — getComputedStyle(body).color */
  --il-color-accent: #23398F;  /* фирменный синий — --inward-blue, подтверждён 3 независимыми замерами (§3) */
  --il-color-divider: #D9D4C9; /* линии/рамки — border-color .inward-method__card, все 4 стороны (§1.4) */

  /* --- цвет: схема on-dark (замер §3 "текст на тёмной секции" + §1.6 кнопка .ubtn-link .ubtn) --- */
  --il-color-on-dark-ink: #F3F3F3; /* текст на тёмной секции (§3); тот же узел — цвет ДО наведения у .ubtn-link .ubtn (§1.6) */
  --il-color-on-dark-bg: #F3F3F3;  /* фон ПОСЛЕ наведения у .ubtn-link .ubtn на тёмной секции (§1.6) — то же значение, другое свойство, поэтому отдельный токен (правило 2-тер) */

  /* --- цвет: дополнительная роль, задокументирована конвенцией §3 2-тер как живой пример
     из исходника прототипа (inward-styles-extracted.css:12, --inward-on-blue-ink), не из
     шести брендовых элементов этой смены, но токен обязателен по факту находки art-director --- */
  --il-color-on-blue-ink: #F3F3F3;

  /* ВНИМАНИЕ (открытый вопрос для лида/art-director, зафиксирован в task-1 §1.6):
     четвёртый узел кнопки .vc_btn3 использует #FFFFFF (не #F3F3F3) в тех же двух ролях
     (ink на тёмном ДО наведения, bg ПОСЛЕ наведения) — токен для #FFFFFF НЕ заморожен
     здесь до решения, какой из двух узлов (.ubtn-link .ubtn / .vc_btn3) канон для
     утилиты кнопки Блока 4. Не выбираю сам. */

  /* --- типографика (замер §2, 5 типов; letter-spacing normal на всех пяти) ---
     Реально отрисованная гарнитура ВСЕЙ страницы — Jura (task-7, негативный контроль).
     Один токен семейства — приказ Босса: смена шрифта в конце смены = одна строка. */
  --il-font-semeystvo: 'Jura', 'Segoe UI', Arial, sans-serif;
  --il-font-mono: 'SFMono-Regular', Consolas, monospace; /* технические мини-подписи — эйбрау метода, номер, ссылка-узел, workspace-лейблы (:781-804,900+) — системный стек, не веб-шрифт, embedding не нужен */
  --il-font-ls: normal; /* letter-spacing на всех 5 измеренных типов — normal (=0), §2 */

  --il-font-h2: 40px;        /* заголовок секции, h2.inward-slab */
  --il-font-h2-md: 30px;     /* ТЗ Босса 02.09: кегль h2 на всех ширинах ниже 992 (планшеты и телефоны) */
  --il-font-h2-lh: 1.196;    /* 47.84px / 40px */
  --il-font-h2-ves: 500;

  --il-font-h3: 18px;        /* название карточки, h3.inward-method__name */
  --il-font-h3-lh: 1.3;      /* 23.4px / 18px */
  --il-font-h3-ves: 700;

  --il-font-body: 16px;      /* текст тела, .inward-method__text */
  --il-font-body-lh: 1.6;    /* 25.6px / 16px, совпадает с ТЗ 5.4 буквально */
  --il-font-body-ves: 400;

  --il-font-eyebrow: 10px;   /* предзаголовок, .inward-method__eyebrow */
  --il-font-eyebrow-lh: 1;   /* 10px / 10px */
  --il-font-eyebrow-ves: 700;

  --il-font-kicker: 13px;    /* мелкий текст, .inward-dept-kicker */
  --il-font-kicker-lh: 1.3;  /* 16.9px / 13px */
  --il-font-kicker-ves: 500;

  /* --- отступ и размер (замер §4, viewport 1400px канон ТЗ 5.6) --- */
  --il-space-container: 1230px; /* ПРАВКА lead 08:23, lead-konteiner.js на 1400: господствующий контейнер прототипа 1230@25 — 19 повторов против 6 у прежних 1250@15; расхождение было сквозным на всех секциях, не только в кабинете */
  --il-space-container-sm: 750px;  /* лестница контейнера прототипа, >=768px — :20 */
  --il-space-container-md: 970px;  /* >=992px — :21 */
  --il-space-container-xl: 1400px; /* >=1670px — :23, почти недостижимо в проверяемых ширинах (§4 Находка 4) */
  --il-space-bok: 85px;         /* боковой отступ от вьюпорта, (1400-1230)/2 */
  --il-space-container-pad: 25px; /* внутренний padding контейнера */
  --il-space-nav-h: 103px;      /* высота шапки .inward-nav */
  --il-space-gap: 40px;         /* токен --inward-gap прототипа */
  --il-space-gap-md: 25px;      /* токен --inward-gap-md прототипа */
  --il-space-section-y: 100px;  /* ЕДИНАЯ вертикальная отбивка секций, ПК — замер спейсера «Консультация» (100px), приказ Босса «единый стандарт», распространяю на все секции */
  --il-space-section-y-md: 80px; /* <=991px — тот же замер (80px) */

  /* --- брендовые элементы (замер §1.1-1.5; кнопки §1.6 — намеренно НЕ здесь, см. блок выше) --- */
  --il-slab-ink: var(--il-color-ink); /* дефолт индирекции: каждый узел переопределяет локально (:378,:417,:793,:932) — здесь только safety-net единого источника, найдено reviewer 07:11 */
  --il-slab-h: 7px;            /* высота полосы подчёркивания, h2.inward-slab (§1.1) */
  --il-ico-size: 18px;
  /* фирменные цвета соцсетей — ТЗ Босса 03.09, каждая иконка в цвет своего бренда */
  --il-soc-telegram: #26A5E4;
  --il-soc-whatsapp: #25D366;
  --il-soc-viber: #7360F2;
  --il-soc-facebook: #0866FF;
  --il-soc-instagram: #E4405F;
  --il-soc-linkedin: #0A66C2;         /* ТЗ Босса 02.09: единый размер иконок контактов и соцсетей (набор Bootstrap Icons, цвет через currentColor) */
  --il-slab-dolya: 28%;        /* доля синей/чёрной части (cs-/ms-семьи, обе формы), §1.1 */
  --il-slab-dolya-korot: 62%;  /* укороченная форма .inward-method__title, §1.1 */
  --il-slab-padding-b: 21px;   /* padding-bottom для cs-/ms-форм (h2.inward-slab, .inward-hero__title, .inward-price-card h2), §1.1 */
  --il-slab-padding-b-reversed: 15px; /* padding-bottom ТОЛЬКО для m-slab (h3.inward-method__name) — зазор 8px + высота 7px = 15px, ПРАВКА reviewer 06:38: 21px увёл бы 6 заголовков карточек метода на +6px, у формы свой зазор */

  --il-marker-w-metod: 9.75px; /* маркер списка метода, 18/18 узлов (§1.2) */
  --il-marker-h-metod: 13px;
  --il-marker-w-cena: 14px;    /* маркер списка цены, 8/8 узлов (§1.2) */
  --il-marker-h-cena: 14px;
  --il-marker-pad-l: 18px;     /* отступ текста от маркера — источник inward-styles-extracted.css:925, тот же узел, что даёт измеренные §1.2 размеры */
  --il-marker-top: .35em;      /* вертикальная позиция маркера — источник :932, тот же узел */

  --il-plashka-pad-v: 2px;     /* плашка-акцент .inward-solve__hl, вертикальный padding (§1.3) */
  --il-plashka-pad-h: 7px;     /* горизонтальный padding (§1.3) */
  --il-plashka-ink: #FFFFFF;   /* цвет текста плашки, §1.3 — ОТДЕЛЬНОЕ значение от --il-color-on-blue-ink (F3F3F3), это другой узел */
  --il-plashka-bg: var(--il-color-accent); /* фон плашки — тот же фирменный синий, §1.3 */

  /* --- строка-развязка "il-solve" (.inward-solve, карточки Преимуществ) — источник :1070-1080 --- */
  --il-solve-gap: 22px;         /* margin-top И padding-top, оба свойства = --sl-gap */
  --il-solve-line: #E3E3DF;     /* --sl-line — отдельный от --il-color-divider (D9D4C9) узел/значение */
  --il-solve-fs: 14px;          /* --sl-size */
  --il-solve-ves: 700;
  --il-solve-ls: .04em;

  --il-edge-cena-h: 3px;       /* кромка .inward-price-card, border-bottom, синяя (§1.4) */
  /* Средний цвет снимка в шапке. Стоит заливкой под картинкой: экран
     заполняется сразу, а не ждёт загрузки файла, и переход к фотографии
     проходит незаметно. Значение снято с самого снимка. */
  --il-hero-bg-fill: #C3C8CC;
  --il-edge-cena-side-h: 1px;  /* ПРАВКА reviewer 06:38: у .inward-price-card рамка не только снизу — top/right/left 1px rgb(217,212,201), zamery §1.4 в этом месте ошибался, отчёт не чинится (task-1 отменена), источник правды теперь :root */
  --il-edge-metod-h: 3px;      /* ТЗ Босса 03.09: кромка .il-method__card — только снизу, брендовый синий */

  --il-quote-h: 3px;           /* толщина полосы цитаты (§1.5) */
  --il-quote-pad-l: 25px;      /* отступ текста от полосы (§1.5) */
  --il-quote-lh: 1.45;         /* 23.2px/16px, §1.5 — отдельное значение от --il-font-body-lh (1.6), другой измеренный факт */

  --il-slab-gap: 4px;          /* технологический зазор между синей и чёрной частью, §1.1 (совпадает у cs-/ms-/m- форм) */
  --il-slab-h-cap: 8px;         /* cap-slab (.capabilities service h2) — источник :326 */
  --il-slab-dolya-cap: 26%;     /* :327, --il-cap-slab-a — узкая (синяя) часть, правая колонка услуг */
  --il-slab-dolya-cap-b: 74%;   /* :328, --il-cap-slab-b — широкая (чёрная) часть, ЛЕВАЯ колонка услуг (не производная от 26%, отдельная константа исходника) */

  /* --- секция «Метод» — верифицировано ДВАЖДЫ: reviewer 07:20 замером + прямой
     источник inward-styles-extracted.css:781-930 (--m-* токены секции .inward-sec4).
     Числа совпали, беру формулировку источника (она даёт и формулы, не только px). --- */
  --il-method-card-pad: 26px;       /* --m-pad */
  --il-method-cards-gap: 20px;      /* --m-card-gap */
  --il-method-top-gap: 11px;        /* .inward-method__top gap, :899 */
  --il-method-top-mb: 14px;         /* .inward-method__top margin-bottom, :900 */
  --il-method-icon-frame: 32px;     /* .inward-method__icon — квадратная рамка (приказ Босса), у нас была голая svg 15px */
  --il-method-icon-glyph: 16px;     /* .inward-method__icon svg — внутренний глиф, :909 */
  --il-method-link-mb: 16px;        /* .inward-method__link margin-bottom, :914 (финальное значение, перебивает раннее 14px :851) */
  --il-method-link-fs: 10px;        /* --m-link */
  --il-method-num-fs: 11px;         /* --m-num */
  --il-method-list-gap: 9px;        /* :919 */
  --il-method-list-pad-top: 18px;   /* :917 */
  --il-method-eyebrow-mb: 25px;     /* --m-gap-sm */
  --il-method-title-mb: 25px;       /* --m-gap-sm, h2.inward-method__title */
  --il-method-lead-mb: 40px;        /* --m-gap */
  --il-method-name-mb: 23px;        /* = var(--m-slab-h) + 16px = 7+16, :866 */
  --il-method-quote-mb: 25px;       /* --m-gap-sm, замер reviewer */

  /* --- прайс-карта — тот же замер --- */
  --il-price-card-pad-top: 34px;
  --il-price-card-pad-x: 26px;
  --il-price-card-pad-bottom: 26px;
  --il-price-card-gap: 25px;         /* gap между внутренними блоками карточки */
  --il-price-card-foot-gap: 25px;    /* gap внутри __foot */
  --il-price-card-item-pad-v: 4.7px;
  --il-price-card-item-pad-h: 25px;
  --il-price-card-item-mb: 12.8px;
  --il-tags-gap: 16px;               /* gap .il-tags, у нас не был задан */
  --il-tag-icon-size: 15px;          /* :530 */
  --il-tag-fs: 11px;                 /* :531 */
  --il-tag-ls: .06em;                /* :532 */
  --il-tag-underline-h: 1px;         /* :535 */
  --il-tag-underline-gap: 5px;       /* :536 */
  --il-tag-underline-split: 33%;     /* :539 */
  --il-slab-color-cap: #222327; /* :318, --il-cap-slab — ТРЕТИЙ отдельный "чёрный", НЕ равен --il-color-ink #111111 */
  --il-slab-padding-b-cap: 15px; /* :379 padding:0 0 15px */

  /* --- кнопки (§1.6, ЧЕТЫРЕ реальных узла — приказ лида 06:30: параметризовать,
     не схлопывать в одно число; узлы совпали до сотых у builder и reviewer
     независимо, включая перезамер .vc_btn3 `_measure8-out.json`) --- */
  --il-btn-transition: background-color .25s ease, color .25s ease; /* измерено на узлах 1 и 3 (inward-styles-extracted.css:195,582), унифицировано на все 4 — для узла 2 те же .25s (:1351, только background), для узла 4 не измерено отдельно (вне inward-styles-extracted.css), применяю тот же стандарт по приказу лида «один стандарт, никаких расхождений» */

  --il-btn-pad-v-1: 14.938px;  /* .inward-hero__btn: top/bottom (fluid clamp на 1400, см. §2 текста) */
  --il-btn-pad-h-1: 29.876px;  /* .inward-hero__btn: left/right */
  --il-btn-fs-1: 13.58px;
  --il-btn-border-1: #111111;
  --il-btn-ink-1: #111111;
  --il-btn-bg-1: transparent;
  --il-btn-hover-bg-1: #111111;
  --il-btn-hover-ink-1: var(--il-color-on-blue-ink); /* подтверждено рендером: inward-styles-extracted.css:201, computed-цвет на hover сошёлся с §1.6 */

  --il-btn-pad-v-2: 15px;      /* .inward-price-card__cta: заливка, без обводки */
  --il-btn-pad-h-2: 34px;
  --il-btn-fs-2: 14px;
  --il-btn-bg-2: #111111;
  --il-btn-ink-2: #FFFFFF;
  --il-btn-hover-bg-2: var(--il-color-on-dark-bg); /* тот же F3F3F3, что и наведение узла 3 — inward-styles-extracted.css:1355 */
  --il-btn-hover-ink-2: #111111;

  --il-btn-pad-v-3: 15px;      /* .ubtn-link .ubtn «Обсудить проект»: тёмная секция, обводка F3F3F3 */
  --il-btn-pad-h-3: 34px;
  --il-btn-fs-3: 14px;
  --il-btn-border-3: var(--il-color-on-dark-ink);
  --il-btn-ink-3: var(--il-color-on-dark-ink);
  --il-btn-bg-3: transparent;
  --il-btn-hover-bg-3: var(--il-color-on-dark-bg);
  --il-btn-hover-ink-3: #111111;

  --il-btn-pad-v-4: 18px;      /* .vc_btn3 «ЗАПИСАТЬСЯ НА КОНСУЛЬТАЦИЮ»: тёмная секция, обводка FFFFFF */
  --il-btn-pad-h-4: 35px;
  --il-btn-fs-4: 13px;
  --il-btn-ves-4: 500;         /* единственный узел с font-weight 500, не 400 — измерено */
  --il-btn-border-4: #FFFFFF;
  --il-btn-ink-4: #FFFFFF;
  --il-btn-bg-4: transparent;
  --il-btn-hover-bg-4: #FFFFFF;
  --il-btn-hover-ink-4: #111111;

  /* --- шапка (nav) — источник reference/source/inward-styles-extracted.css:26-38,91-143 ---
     Это ДЕКЛАРИРОВАННЫЕ токены прототипа (не отдельный "замер" §-раздела zamery — task-1
     покрывала только 6 брендовых элементов+типографику+сетку+цвета, не шапку/hero целиком),
     но они реально применяются и рендерятся — это конструктор страницы, не мёртвый код. */
  --il-nav-h: 103px;                 /* совпадает с --il-space-nav-h, свой токен — своя область (nav — компонент, не сетка) */
  --il-nav-inner-gap: 25px;          /* зазор между группами .il-nav__inner, замер reviewer 07:20 */
  --il-nav-gap: 46px;                /* зазор между пунктами меню, >=1200px */
  --il-nav-gap-md: 30px;             /* зазор между пунктами меню, <1200px */
  --il-nav-inset: 23px;              /* внутренний отступ левой/правой группы меню */
  --il-nav-logo-w: 250px;            /* ширина лого в шапке, десктоп */
  --il-nav-logo-w-sm: 190px;         /* ширина лого в шапке, <=767px */
  --il-nav-logo-w-panel: 270px;      /* ТЗ Босса 03.09: ширина лого в выезжающем меню */
  --il-hero-lift-md: 30px;           /* ТЗ Босса 03.09: подъём блока первого экрана на телефонах */
  --il-nav-fs: clamp(13px, 1.04vw, 15px);
  --il-nav-ves: 500;
  --il-nav-ls: normal; /* ПРАВКА reviewer 07:18: замер 1400 — у прототипа normal, не 2px (у нас пункты меню были шире, правая группа съезжала на 40px) */
  --il-nav-fade: .35s;
  --il-nav-bg-scrolled: #FFFFFF;     /* :37 --inward-nav-bg-scrolled — непрозрачный фон шапки после прокрутки, включается классом is-scrolled (JS builder-1, inward.js:52-55) */
  --il-nav-h-mobile: 80px;           /* <=991px, :27 */
  --il-nav-panel-bg: var(--il-color-bg); /* ТЗ Босса 03.09: раскрытое мобильное меню — чистый белый, тот же фон, что и у страницы (прежде здесь стоял --inward-paper #EDEEEF) */
  --il-hero-bg-fallback: #EDEEEF;    /* та же --inward-paper, :149 (background:var(--inward-paper) на .inward-hero ДО фото) — временная замена отсутствующего фото, см. Блок 7 */
  --il-nav-langs-gap: 6px;           /* ТЗ Босса 03.09: языки в шапке стоят вплотную — UA | RU */
  --il-nav-sub-w: 320px;             /* ТЗ Босса 05.09: ширина выпадающего списка услуг — пункты стоят строками, а не сжатым столбцом */
  --il-nav-sub-pad: 18px;            /* воздух над и под пунктом выпадающего списка */
  --il-nav-sub-pad-x: 24px;          /* воздух слева и справа внутри списка */
  --il-nav-sub-line: 1px;            /* толщина рамки списка и разделительных черт */
  --il-nav-sub-caret-gap: 12px;      /* ТЗ Босса 05.09: отступ от названия пункта до стрелки — примерно ширина буквы */
  --il-nav-panel-gap: 18px;          /* :135 */

  /* Блог: сетка записей, карточка, страница статьи (БЛОК 20) */
  --il-post-cover: 62.5%;            /* пропорция обложки карточки, 16:10 */
  --il-post-pad: 30px;               /* внутренний отступ карточки */
  --il-post-meta-fs: 13px;           /* мета-строка: рубрика, дата, время чтения */
  --il-post-line: 3px;               /* фирменная линия по нижнему краю карточки */
  --il-post-col: 760px;              /* ширина колонки текста статьи */
  --il-related-thumb: 96px;          /* миниатюра в блоках «схожі» и «ви читали» */
  /* Плашка согласия на файлы cookie: узкая полоса у нижнего края, поверх
     содержимого, с квадратными углами и фирменной линией сверху. */
  --il-cookie-bg: var(--il-color-bg);
  --il-cookie-line: var(--il-color-accent); /* фирменная линия по верхнему краю */
  --il-cookie-line-h: 2px;
  --il-cookie-pad-y: 16px;
  --il-cookie-pad-y-md: 14px;
  --il-cookie-gap: 24px;             /* между текстом и кнопками на ПК */
  --il-cookie-gap-md: 12px;          /* между текстом и кнопками на телефоне */
  --il-cookie-btn-gap: 10px;
  --il-cookie-fs: 14px;
  --il-cookie-fs-md: 13px;
  --il-cookie-btn-fs: 12px;
  --il-cookie-btn-pad-v: 10px;
  --il-cookie-btn-pad-h: 20px;
  --il-cookie-shadow: 0 -6px 24px rgba(17, 17, 17, .08);
  --il-cookie-z: 1080;               /* выше шапки (1000), ниже модалки Bootstrap */
  --il-post-lead-fs: 20px;           /* лид статьи — крупнее основного текста */
  /* Мета-строка статьи: подписанные поля «автор / дата / читання / рубрика».
     Число колонок — в самой сетке (4 на ПК, 2 на телефоне), потому что от него
     зависит и селектор первой ячейки ряда: два значения обязаны совпадать. */
  --il-post-meta-pad: 18px;          /* отступ содержимого ячейки от разделителя */
  --il-post-meta-row-gap: 22px;      /* расстояние между рядами на телефоне */
  --il-post-meta-label-fs: 11px;     /* подпись поля — мельче значения */
  --il-post-meta-label-ls: 1.5px;
  --il-post-meta-label-ink: #7A7B80; /* приглушённая подпись: своё значение, не --il-color-ink */
  /* Содержание статьи: рамка волосяной линией, нумерация фирменным синим,
     пункты разделены такими же линиями, углы квадратные. */
  --il-toc-pad: 28px;                /* внутренний отступ блока на ПК */
  --il-toc-pad-md: 20px;             /* внутренний отступ блока на телефоне */
  --il-toc-gap: 12px;                /* отступ строки списка сверху и снизу */
  --il-toc-num-w: 36px;              /* ширина колонки с номером */
  --il-toc-num-fs: var(--il-font-kicker); /* номер мельче текста пункта: жирные цифры Jura в 16px читались крупнее строки */
  --il-toc-title-gap: 16px;          /* от заголовка «Зміст» до списка */
  --il-toc-scroll-offset: 24px;      /* воздух между шапкой и заголовком после перехода по якорю */
  /* Таблицы в статьях: единый класс .il-table ставится при выводе на каждую
     таблицу (il_article_render). Шапка кикером с фирменной линией, зебра
     чётных строк, первая колонка как подпись строки. */
  --il-table-fs: 15px;
  --il-table-fs-md: 14px;            /* на телефоне мельче */
  --il-table-lh: 1.5;
  --il-table-pad-y: 12px;
  --il-table-pad-x: 14px;
  --il-table-pad-y-md: 10px;
  --il-table-pad-x-md: 10px;
  --il-table-head-line: 2px;         /* фирменная линия под шапкой таблицы */
  --il-table-stripe: #F6F5F2;        /* фон чётных строк: свой узел, светлее --il-color-divider */
  --il-table-label-ves: 600;         /* первая колонка — подпись строки */
  --il-post-meta-label-ves: 700;     /* подпись жирная, размер тот же */
  --il-post-meta-ico: 12px;          /* иконка подписи — без подложки и рамки */
  --il-post-meta-ico-gap: 6px;       /* между иконкой и подписью */
  --il-post-meta-value-fs: 15px;
  --il-post-meta-gap: 7px;           /* между подписью и значением */
  --il-pagination-size: 52px;        /* сторона квадрата в постраничной навигации */
  --il-pagination-gap: 10px;         /* зазор между квадратами */
  --il-pagination-arrow: 16px;       /* стрелка «назад/вперёд» */
  --il-nav-panel-pad-top: 20px;      /* :135 */
  --il-nav-panel-pad-bottom: 26px;   /* :135 */

  /* --- hero — источник :41-77,146-203 --- */
  --il-hero-min-h: 100vh;
  --il-hero-bottom: 180px;           /* отступ снизу у .il-hero__inner, >=992px */
  --il-hero-bottom-md: 70px;         /* <=991px */
  --il-hero-eyebrow-gap: 20px;       /* margin-bottom предзаголовка, >=992px */
  --il-hero-eyebrow-gap-md: 15px;    /* <=991px */
  --il-hero-eyebrow-fs: 16px;   /* ПРАВКА reviewer 07:18: замер 1400 — плоские 16px/вес 400/lh 25.6px/ls normal, не clamp(11,.97vw,14)/вес 500/4px */
  --il-hero-eyebrow-ls: normal;
  --il-hero-eyebrow-ves: 400;
  --il-hero-eyebrow-lh: 1.6;    /* = 25.6px на 16px */
  --il-hero-eyebrow-w: 280px;   /* ширина строки, замер reviewer 07:18 */
  --il-hero-title-gap: 40px;         /* = --il-space-gap, margin-bottom заголовка-картинки */
  --il-hero-title-w: clamp(260px, 39vw, 564px); /* ширина wordmark-картинки */
  --il-hero-lead-w: 560px;           /* max-width текста-лида */
  --il-hero-lead-fs: 16px;      /* ПРАВКА reviewer-1 07:05: замер прототипа на 1400 — плоские 16px, не clamp (было clamp(12px,1.04vw,15px)=14.56px на 1400, отсюда уезжал перенос строки) */
  --il-hero-lead-ls: normal;    /* ПРАВКА reviewer-1 07:05: замер — letter-spacing:normal, не .4px */
  --il-hero-lead-lh: 1.6;
}

/* Токены секции «Системная работа» (.capabilities в прототипе) — отдельный
   :root, тот же файл, просто добавлен по ходу секции (валидный CSS,
   custom-properties из разных :root сливаются). Источник :312-339. */
:root {
  /* --il-cap-muted (#5D5B54) и --il-cap-line (#AAA398) СНЯТЫ 08:26: reviewer
     подтвердил 0 использований после правки узлов на --il-color-ink (07:55) —
     сами значения мертвы и в прототипе, ни один узел их не несёт ни в одном
     цветовом свойстве (проверено прицельно). Не воскрешать без нового замера. */
  --il-cap-screen: #F8F7F3;            /* фон экрана устройства под картинкой */
  --il-cap-screen-wash: rgba(247, 246, 244, .42); /* засветка поверх картинки экрана */
  --il-cap-device-body: #20211F;
  --il-cap-device-edge: #141512;
  --il-cap-device-notch: #171815;
  --il-cap-row-h: 132px;
  --il-cap-col: 302px;
  --il-cap-gap: clamp(36px, 5vw, 86px);
  --il-cap-h-size: clamp(15px, 1.15vw, 18px);
  --il-cap-h-ls: var(--il-font-ls); /* ТЗ Босса 03.09: разрядка с заголовков снята */
  --il-cap-num-ls: .08em;
  --il-cap-p-fs: var(--il-font-body); /* ТЗ Босса 04.09: текст под услугами читается так же, как основной текст страницы */
}

/* =========================================================================
   БЛОК 2-в — :root ТОКЕНЫ: Кабинет/Workspace, Метод, Преимущества, Структура,
   Консультация. Источники: reference/source/inward-styles-extracted.css
   (.workspace-ui :595-728, .inward-solve/:has(.inward-dept-kicker) :1070-1220),
   замер reviewer 07:20-07:22 (отступы/gap/центровка), приказ лида 07:00-07:24
   (3 недостающих фона + Метод-фон + единая вертикальная отбивка).
   ========================================================================= */
:root {
  /* --- фоны-фотографии секций: cover/no-repeat, затемнение поверх --- */
  --il-cabinet-overlay: rgba(0, 0, 0, .91);     /* pawel-czerwinski-oIT3X1oPtFA, attachment fixed */
  --il-ws-vylet: 87px;                          /* выступ панели над тёмной полосой */
  --il-ws-scale-md: .85;                        /* уменьшение панели на телефонах */
  --il-ws-h-md: 620px;                          /* натуральная высота панели — база расчёта места в потоке */
  --il-ws-pad-md: 2px;                          /* малый внутренний отступ панели на телефонах */
  --il-cabinet-h: 578px;                        /* замер lead/reviewer 08:11-08:16: высота полосы на прототипе, у нас 533 (панель margin-top:-87 без явной высоты ряда сжимала строку) */
  --il-advantages-overlay: rgba(0, 0, 0, .91);
  --il-advantages-hang: 259px;                  /* замер эталона: карточки выступают ниже тёмного фона на 259px (ряд services-push-up, margin-top -120 при карточке 379) */  /* pawel-czerwinski-KfQOznwKc04, attachment scroll — подтверждено дословно источником current-page.html:1815-1820 */
  --il-consultation-overlay: rgba(0, 0, 0, .70); /* inward-cta-bg.jpg, attachment fixed */

  /* --- Метод: секционный фон (task-40, замер reviewer) --- */
  --il-method-bg-glow: rgba(35, 57, 143, .05);
  --il-method-bg-glow-size: 56%;
  --il-method-bg-shade: rgba(17, 17, 17, .05);
  --il-method-sticky-top: 0;      /* ЗАМЕР ЭТАЛОНА 02.09: липкая обёртка прилипает к верху ЭКРАНА (sticky top 0), не под шапку */
  --il-method-sticky-h: 100vh;    /* ЗАМЕР ЭТАЛОНА 02.09: обёртка высотой в экран (859 при окне 859), контент в ней по центру — 235 сверху / 235 снизу */

  /* --- Преимущества: карточка (.ult-content-box:has(.inward-solve), источник :1098-1102 + инлайн-стиль current-page.html:1832) --- */
  --il-advantage-card-bg: #FFFFFF;
  --il-advantage-card-shadow: 0 3px 50px 4px rgba(0, 0, 0, .06);
  --il-advantage-card-border: 1px solid #FFFFFF;
  --il-advantage-card-radius: 0;          /* ТЗ Босса 03.09: углы карточки без скругления */
  --il-advantage-card-pad: 45px;
  --il-advantage-card-min-h: 250px;
  --il-advantage-icon-ink: var(--il-color-accent); /* ТЗ Босса 03.09: иконка карточки в брендовом синем */
  --il-advantage-icon-size: var(--il-structure-dept-ic); /* ТЗ Босса 03.09: иконка крупнее — тот же размер, что у иконок департаментов */
  --il-advantage-title-fs: 19px;
  --il-advantage-title-ves: 600;
  --il-advantage-edge-h: 3px;             /* = --cs-edge, тот же приём что --il-edge-cena-h, отдельный узел карточки */

  /* --- Структура Inward OS (.vc_tta-panels:has(.inward-dept-kicker), источник :1192-1220) --- */
  --il-structure-dept-cols: 2;
  --il-structure-dept-gap-x: 36px;
  --il-structure-dept-gap-y: 52px;
  --il-structure-dept-ic: 45px;
  --il-structure-dept-name-fs: 19px;
  --il-structure-dept-name-ls: var(--il-font-ls); /* ТЗ Босса 03.09: разрядка с заголовков снята */
  --il-structure-dept-name-lh: 24.7px;
  --il-structure-dept-slab-h: 7px;
  --il-structure-dept-slab-a: 28%;
  --il-structure-dept-slab-gap: 16px;
  --il-structure-dept-ic-gap: 22px;
  /* ТЗ Босса 03.09: круговая схема вместо сетки департаментов — пропорции сняты
     с эталонного элемента (внешняя окружность 528, ядро 314, кружок иконки 38). */
  --il-orbit-size-base: 528px; /* замер эталона: внешняя окружность схемы */
  /* ТЗ Босса 03.09 (вторая правка): на ПК схема меньше эталона.
     Доля от базового размера — один рычаг, менять только здесь. */
  --il-orbit-lg-dolya: 0.8;
  --il-orbit-size: calc(var(--il-orbit-size-base) * var(--il-orbit-lg-dolya));
  --il-orbit-core-dolya: 59%;  /* доля ядра от круга — замер эталона (314 из 528) */
  --il-orbit-ic: var(--il-structure-dept-ic); /* ТЗ Босса 03.09: иконки крупнее */
  --il-orbit-ring-h: 2px;
  --il-orbit-name-fs: var(--il-font-eyebrow);
  --il-orbit-name-w: 150px; /* блок заголовка отдела — отдельный, в углу схемы */
  --il-orbit-size-md-name: 80px;
  --il-orbit-diag: calc(50% - 50% / 1.4142136); /* точка на диагонали окружности: 50% − R/√2 */

  /* --- Кабинет/Workspace (.workspace-ui, источник :595-728, значения — ФИНАЛЬНЫЙ
     каскад exec-блока, не промежуточные) --- */
  --il-ws-panel-bg: #f7f7f5;      /* --value-panel */
  --il-ws-blue: #2845a7;          /* --value-blue — СВОЙ узел компонента, ДРУГОЙ hex, чем --il-color-accent (#23398F), не путать */
  --il-ws-ink: #17181b;
  --il-ws-border: #c9c9c5;
  --il-ws-shadow: 0 14px 28px rgba(0, 0, 0, .2);
  --il-ws-sidebar-bg: #17181c;
  --il-ws-sidebar-border: #2f3035;
  --il-ws-sidebar-ink: #d9dae0;
  --il-ws-brand-ink: #fff;
  --il-ws-nav-label-ink: #a3a5ac;
  --il-ws-nav-ink: #F3F3F3; /* ПРАВКА reviewer 08:24: было #c0c2c8 — в исходнике объявлен с !important на этих li, но проигрывает более позднему правилу, человек его не видит; рендер обоих сайтов rgb(243,243,243) */
  --il-ws-nav-current-bg: #22242a;
  --il-ws-nav-current-border: #34363d;
  --il-ws-account-border: #32343a;
  --il-ws-account-hover-bg: #22242a;
  --il-ws-account-hover-border: #3d3f46;
  --il-ws-account-out-ink: #a3a5ac;
  --il-ws-main-bg: #f7f7f5;
  --il-ws-topbar-border: #deded9;
  --il-ws-crumb-ink: #5e6065;
  --il-ws-status-ink: #245c45;
  --il-ws-status-dot: #2d8a62;
  --il-ws-h3-ink: #151619;
  --il-ws-meta-ink: #6f7177;
  --il-ws-progress-bg: #deded9;
  --il-ws-metrics-border: #d8d8d3;
  --il-ws-metric-span-ink: #5f6166;
  --il-ws-metric-hi-bg: #e1e6f7;
  --il-ws-chart-border: #d8d8d3;
  --il-ws-chart-head-ink: #5f6166;
  --il-ws-axis-ink: #7a7c81;
  --il-ws-table-border: #d8d8d3;
  --il-ws-table-row-border: #dfdfda;
  --il-ws-table-th-bg: #eeeeea;
  --il-ws-table-th-ink: #7a7c81;
  --il-ws-table-td-ink: #25262a;
  --il-ws-table-hover-bg: #f2f4fb;
  --il-ws-tag-bg: #e4e4df;
  --il-ws-tag-ink: #42444a;
  --il-ws-tag-blue-bg: #e1e6f7;
  --il-ws-tag-blue-ink: #203a93;
  --il-ws-tag-green-bg: #dcebe3;
  --il-ws-tag-green-ink: #205e45;
  --il-ws-chart-h: 44px;
  --il-ws-anim: 1.6s;
}

/* =========================================================================
   БЛОК 3 — БАЗА И ТИПОГРАФИКА
   Bootstrap уже сброшен reboot'ом (box-sizing, margin, системный шрифт) —
   здесь ТОЛЬКО поверх него бренд-типографика, ничего из reboot не дублирую.
   Пять измеренных типов (§2 zamery-prototipa.md): заголовок секции (h2),
   название карточки (h3), текст тела, предзаголовок, мелкий текст.
   Letter-spacing — normal на всех пяти измеренных типах, токен один
   (--il-font-ls), применяется везде явно, а не по умолчанию браузера.
   ========================================================================= */

body {
  font-family: var(--il-font-semeystvo);
  background-color: var(--il-color-bg);
  color: var(--il-color-ink);
  font-size: var(--il-font-body);
  line-height: var(--il-font-body-lh);
  font-weight: var(--il-font-body-ves);
  letter-spacing: var(--il-font-ls);
}

/* ПРАВКА 07:10, operator-2: горизонтальная прокрутка на 360 — виновник il-wordmark
   (натуральная ширина 559px, без ограничения). Правило БАЗОВОГО слоя на ВСЕ img
   сборки разом, а не точечно на один узел — картинка никогда не шире своего
   контейнера, пропорции сохраняются. 100% — это относительное ограничение
   к родителю (структурное правило), не декоративный размер. */
img {
  max-width: 100%;
  height: auto;
}

/* .il-wordmark — инлайн-знак внутри заголовков (Преимущества/Цены, ОБЩЕЕ
   правило — используется дважды, чинится один раз). Замер reviewer 07:22:
   наш 559×53.84 против прото 323.84×31.19 — рендерился натуральным размером
   файла. Формула из источника (#main .inward-wordmark) — высота относительно
   em строки, ширина по реальной пропорции файла (558.926/53.846), найдено
   и подтверждено builder-1 07:34 перед уходом. */
.il-wordmark {
  --wm-h: .78em;
  display: inline-block;
  vertical-align: baseline;
  height: var(--wm-h);
  width: calc(var(--wm-h) * 558.926 / 53.846);
  margin: 0 0 -.06em .272em;
}

/* ПРАВКА reviewer 08:12: главный виновник горизонтальной прокрутки на 360 —
   этот же знак ВНУТРИ карточки цены источник задаёт ДРУГОЙ формулой, не
   общей .inward-wordmark, а отдельным классом #main h2 .inward-price-mark
   (:1375-1385): высота от 1cap строки, а не от общего em, ширина auto (сама
   тянется по интринсик-пропорции файла). Компаунд-селектор специфичнее
   одиночного .il-wordmark — переопределяет без !important. */
.il-wordmark.il-price-card__mark {
  --wm-nratio: .749;
  --wm-h: calc((1cap + 1px) / var(--wm-nratio));
  height: var(--wm-h);
  width: auto;
  vertical-align: 0;
  position: relative;
  top: -3px;
  margin: 0;
}

/* заголовок секции — h2.inward-slab и однотипные, §2 */
h2 {
  font-family: var(--il-font-semeystvo);
  font-size: var(--il-font-h2);
  line-height: var(--il-font-h2-lh);
  font-weight: var(--il-font-h2-ves);
  letter-spacing: var(--il-font-ls);
  text-transform: uppercase; /* ПРАВКА lead 08:23: замер прото — uppercase на ВСЕХ 6 замеренных h2, у нас none на 5 из 6 (капс стоял только точечно на .il-cabinet__title, где дублировался этим же значением) — единое правило вместо точечного */
}

/* название карточки — h3.inward-method__name, §2 */
h3 {
  font-family: var(--il-font-semeystvo);
  font-size: var(--il-font-h3);
  line-height: var(--il-font-h3-lh);
  font-weight: var(--il-font-h3-ves);
  letter-spacing: var(--il-font-ls);
}

/* текст тела — .inward-method__text и обычный текст, §2. Явно, а не только
   через наследование от body: некоторые компоненты Bootstrap (например
   .lead, карточки) переопределяют font-size сами — фиксируем базовый факт
   на самих тегах тоже. */
p,
li,
blockquote {
  color: var(--il-color-ink); /* ПРАВКА лид/Босс 07:39: тело текста рендерилось акцентным синим —
    явный цвет здесь же, не полагаюсь на наследование от body (тот же приём,
    что уже применён для font-size/line-height/letter-spacing в этом правиле) */
  font-size: var(--il-font-body);
  line-height: var(--il-font-body-lh);
  letter-spacing: var(--il-font-ls);
}

/* предзаголовок — .inward-method__eyebrow, §2. Не тег, а утилитный класс:
   предзаголовок — не структурный элемент HTML (не своя тег-семантика), его
   встраивают в разную разметку (span/div над заголовком). */
.il-eyebrow {
  font-family: var(--il-font-semeystvo);
  font-size: var(--il-font-eyebrow);
  line-height: var(--il-font-eyebrow-lh);
  font-weight: var(--il-font-eyebrow-ves);
  letter-spacing: var(--il-font-ls);
}

/* мелкий текст — .inward-dept-kicker, §2 */
.il-kicker {
  font-family: var(--il-font-semeystvo);
  font-size: var(--il-font-kicker);
  line-height: var(--il-font-kicker-lh);
  font-weight: var(--il-font-kicker-ves);
  letter-spacing: var(--il-font-ls);
}

/* кнопки — база, общая для ВСЕХ четырёх измеренных узлов (§1.6): uppercase
   и letter-spacing normal совпадают на всех четырёх, это и есть общий
   знаменатель. Padding/цвет/обводка/кегль — по модификаторам в Блоке 4
   (--il-btn-*-1..4), здесь их нет специально: одно число на все четыре
   узла было бы неверным по замеру. */
.il-btn {
  font-family: var(--il-font-semeystvo);
  text-transform: uppercase;
  letter-spacing: var(--il-font-ls);
  display: inline-block;
  text-align: center;
  cursor: pointer;
}

/* списки — маркер (форма/цвет/размер) описывается в Блоке 4 как брендовый
   элемент (--il-marker-*), сам текст пункта наследует body (см. p,li выше).
   Здесь только снятие браузерного маркера, чтобы место под кастомный
   ::before было чистым — это база отрисовки, а не измеренное число. */
.il-list {
  list-style: none;
  padding-left: 0;
}

/* =========================================================================
   БЛОК 4 — ШЕСТЬ БРЕНДОВЫХ УТИЛИТ (ТЗ 5.5)
   Все числа — токены Блока 2, здесь только var(). Ничего не хардкожено.
   ========================================================================= */

/* --- 1. Подчёркивание заголовка (il-slab) ---
   База = форма cs-/ms- (синий слева / чёрный справа, полная ширина, §1.1).
   Три независимых оси через CSS-переменные с локальным переопределением
   (--il-slab-h/-dolya/-ink переопределяются точечно нужным модификатором,
   остальные правила их просто читают — ни одного нового объявления цвета
   в правилах, только в :root и в самих модификаторах):
     .il-slab                       -> cs-/ms-, 7px/28%, синий слева / чёрный справа
     .il-slab.il-slab--reversed     -> m-slab (h3.inward-method__name), та же геометрия, чёрный слева / синий справа
     .il-slab.il-slab--short        -> .inward-method__title, 62% ширины
     .il-slab--cap                  -> cap-slab (.capabilities service h2, найдена критиком лида, task-8),
                                        СВОЯ высота/доля/цвет (8px/26%/#222327), комбинируется с --reversed
                                        для зеркальной левой колонки — четвёртая форма ТЗ 5.5.1, отдельная
                                        ось, не сведена в cs-/ms-/m- (zamery §1.1 явно требует не путать) */
.il-slab {
  --il-slab-ink: var(--il-color-ink); /* индирекция: cap-модификатор подменяет ТОЛЬКО эту переменную, не трогая правила */
  position: relative;
  display: table;
  padding-bottom: var(--il-slab-padding-b);
  /* ЕДИНЫЙ ШАГ ТЕМЫ под брендовым заголовком — одинаково во всех секциях */
  margin-bottom: var(--il-space-gap-md);
}
.il-slab::before,
.il-slab::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: var(--il-slab-h);
  clip-path: polygon(0 0, calc(100% - var(--il-slab-h)) 0, 100% 100%, var(--il-slab-h) 100%);
}
.il-slab::before {
  left: 0;
  width: var(--il-slab-dolya);
  background: var(--il-color-accent);
}
.il-slab::after {
  right: 0;
  left: calc(var(--il-slab-dolya) + var(--il-slab-gap));
  background: var(--il-slab-ink);
}
.il-slab--reversed {
  padding-bottom: var(--il-slab-padding-b-reversed);
}
.il-slab--reversed::before {
  background: var(--il-slab-ink);
}
.il-slab--reversed::after {
  background: var(--il-color-accent);
}
.il-slab--short::after {
  right: auto;
  width: calc(var(--il-slab-dolya-korot) - var(--il-slab-dolya) - var(--il-slab-gap));
}
/* центровка — ТОЛЬКО когда рядом стоит бутстраповская .text-center (выравнивание,
   разрешённое исключение из правила "0 визуала от Bootstrap"). display:table сам
   не реагирует на text-align, поэтому центруем margin'ом. Не трогаю базовый
   .il-slab: --reversed/--short/--cap остаются левыми (метод/сервисы), меняется
   только узел, где текст-центр явно стоит в разметке (reviewer 07:22: x=92.5
   вместо 511.3, разница 419px — заголовок "Системная работа"). */
.il-slab.text-center {
  margin-left: auto;
  margin-right: auto;
}
.il-slab--cap {
  --il-slab-h: var(--il-slab-h-cap);
  --il-slab-dolya: var(--il-slab-dolya-cap);
  --il-slab-ink: var(--il-slab-color-cap);
  padding-bottom: var(--il-slab-padding-b-cap);
}
/* модификатор для тёмных секций (приказ Босса 07:24: «есть ещё сине-белые
   подчёркивания в секции "Что получает ваш бизнес"») — та же пара синий/акцент
   слева, но вторая половина светлая (--il-color-on-dark-ink), а не чёрная.
   Индирекция та же: меняется только цвет-переменная, ни одного нового правила. */
.il-slab--on-dark {
  --il-slab-ink: var(--il-color-on-dark-ink);
}

/* === СТАНДАРТ ОТСТУПОВ ТЕМЫ ===============================================
   Один класс, один шаг. Ставится ВТОРЫМ классом к любому блоку, который
   формирует вертикальный ритм. Отступ отдаётся только вниз — шаги не
   складываются, симметрия одинаковая во всех секциях. */
.il-stack {
  margin-bottom: var(--il-space-gap-md);
}

/* --- 2. Маркер списка (il-marker-list) ---
   Один и тот же SVG (ТЗ 5.5.2), два реальных размера по контексту (§1.2) —
   расхождение с ТЗ 5.5.2 («один маркер 14×14») зафиксировано лидом/art-director
   отдельно, здесь оба варианта намеренно, не схлопываю в один. */
.il-marker-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.il-marker-list > li {
  position: relative;
  padding-left: var(--il-marker-pad-l);
}
.il-marker-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--il-marker-top);
  background: url('../images/inward-mark-on-light.svg') no-repeat center / contain;
}
.il-marker-list--metod > li::before {
  width: var(--il-marker-w-metod);
  height: var(--il-marker-h-metod);
}
.il-marker-list--cena > li::before {
  width: var(--il-marker-w-cena);
  height: var(--il-marker-h-cena);
  top: calc(var(--il-price-card-item-pad-v) + .25em); /* :1369 — своя формула у карточки цены, не общий --il-marker-top */
}

/* --- 3. Плашка-акцент (il-plate) — §1.3, совпадает с ТЗ 5.5.3 точно --- */
.il-plate {
  display: inline-block;
  padding: var(--il-plashka-pad-v) var(--il-plashka-pad-h);
  background: var(--il-plashka-bg);
  color: var(--il-plashka-ink);
}

/* --- 3-б. Строка-развязка (il-solve) — карточки «Преимущества», источник
   :1070-1080. Класс на HTML не .il-plate (тот подошёл бы для .il-solve__hl
   один-в-один, но builder-1 использует свою пару классов) — дублирую те же
   токены на il-solve__hl напрямую, приём как для hero__title/advantage__title. */
.il-solve {
  margin-top: var(--il-solve-gap);
  padding-top: var(--il-solve-gap);
  border-top: 1px solid var(--il-solve-line);
  text-align: center; /* ПРАВКА lead/reviewer 07:22-07:23: у нас был left (start) */
}
.il-solve span {
  display: block;
  color: var(--il-color-ink);
  font-size: var(--il-solve-fs);
  font-weight: var(--il-solve-ves);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--il-solve-ls);
}
.il-solve__hl {
  display: inline-block;
  padding: var(--il-plashka-pad-v) var(--il-plashka-pad-h);
  background: var(--il-plashka-bg);
  color: var(--il-plashka-ink);
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
}

/* --- 4. Нижняя кромка карточки (il-edge) — ДВЕ разные семьи, §1.4 ---
   Не один брендовый элемент с двумя написаниями CSS, а два разных приёма
   (находка zamery §1.4) — два отдельных модификатора, не сведены в один. */
.il-edge--cena {
  border-top: var(--il-edge-cena-side-h) solid var(--il-color-divider);
  border-right: var(--il-edge-cena-side-h) solid var(--il-color-divider);
  border-left: var(--il-edge-cena-side-h) solid var(--il-color-divider);
  border-bottom: var(--il-edge-cena-h) solid var(--il-color-accent);
}

/* --- Карточка цены (.il-price-card) — источник :1324-1446, замер reviewer 07:20 --- */
.il-price-card {
  display: flex;
  flex-direction: column;
  gap: var(--il-price-card-gap);
  padding: var(--il-price-card-pad-top) var(--il-price-card-pad-x) var(--il-price-card-pad-bottom);
  background: #FFFFFF;
}
.il-price-card__title {
  display: table;
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;
  text-align: center;
  min-width: 0; /* ПРАВКА lead 08:20: флекс-элемент .il-price-card по умолчанию даёт min-width:auto — вместе с nowrap это и не пускало сжаться, корень вылета на 360/1024, не картинка */
}
@media (max-width: 575.98px) {
  /* ПРАВКА lead 08:20: первопричина вылета на 360 — не картинка (её max-width:100%
     считался уже ОТ раздутого nowrap-бокса), а сам заголовок: display:table +
     white-space:nowrap никогда не сжимался и не переносился. На ПК (где и
     измерено 1 в 1) оставляю nowrap как есть, переношу только на телефоне. */
  .il-price-card__title {
    display: block;
    white-space: normal;
  }
}
.il-price-card__lead {
  /* шаг между блоками карточки задаёт её собственный gap — свой отступ не нужен */
  margin: 0;
}
.il-price-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.il-price-card__item {
  position: relative;
  margin-left: 0;
  padding: var(--il-price-card-item-pad-v) 0 var(--il-price-card-item-pad-v) var(--il-price-card-item-pad-h);
  border-bottom: 1px solid var(--il-color-divider);
  list-style: none;
}
.il-price-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between; /* ПРАВКА reviewer 07:20: кнопка стояла слева (705 вместо 1084) — тут она сама уходит к правому краю */
  gap: var(--il-price-card-foot-gap);
  padding-top: var(--il-price-card-foot-gap);
}
@media (max-width: 575.98px) {
  /* ПРАВКА reviewer 08:12: узкий телефон — сумма+период (44px цифры) и кнопка
     не помещаются в одну строку без переноса (nowrap по умолчанию у flex
     не даёт сжаться меньше content-width), кнопка вылезала на 56px за
     правый край. Только адаптация мобильного, ПК-раскладка (space-between
     в одну строку) не трогается — приказ Босса разрешает мобильный перенос. */
  .il-price-card__foot {
    flex-wrap: wrap;
    row-gap: var(--il-price-card-foot-gap);
  }
}
.il-price-card__amount {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--il-color-ink);
}
.il-price-card__sum {
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
}
.il-price-card__cur {
  font-size: 20px;
  font-weight: 700;
}
.il-price-card__period {
  font-size: 16px;
  font-weight: 400;
}
.il-edge--metod {
  border: none;
  border-bottom: var(--il-edge-metod-h) solid var(--il-color-accent);
}

/* --- 5. Цитата (il-quote) — §1.5, совпадает с ТЗ 5.5.5 точно --- */
.il-quote {
  border-left: var(--il-quote-h) solid var(--il-color-accent);
  padding-left: var(--il-quote-pad-l);
  /* ЕДИНЫЙ ШАГ ТЕМЫ: воздух сверху И снизу цитаты, одинаковый во всех секциях */
  margin: calc(var(--il-space-gap) + var(--il-space-gap-md)) 0;
  font-size: var(--il-font-body);
  line-height: var(--il-quote-lh);
  letter-spacing: var(--il-font-ls);
}

/* внутри карточки вертикальный шаг задаёт её собственный gap — свои отступы у детей не нужны */
.il-price-card > *,
.il-price-card > .il-stack {
  margin-top: 0;
  margin-bottom: 0;
}

/* --- 6. Кнопки (il-btn, база в Блоке 3) — ЧЕТЫРЕ модификатора, §1.6.
   Приказ лида 06:30: параметризовать, не схлопывать. Каждый модификатор —
   отдельный набор чисел, ни одного общего "стандартного" padding/цвета. */
.il-btn {
  background: none;
  border: none;
  border-radius: 0;
  text-decoration: none;
  transition: var(--il-btn-transition);
}
/* имена модификаторов — ФАКТИЧЕСКИЕ классы из build/index.html (сверено с
   разметкой builder-1), не порядковые номера: .il-btn--1..4 внутри токенов
   :root — только внутренний счёт замера, наружу смотрят эти три + одна
   ожидающая (см. примечание у cabinet ниже). */

/* = узел 1: .inward-hero__btn, hero:56 */
.il-btn--outline-dark {
  padding: var(--il-btn-pad-v-1) var(--il-btn-pad-h-1);
  font-size: var(--il-btn-fs-1);
  color: var(--il-btn-ink-1);
  background-color: var(--il-btn-bg-1);
  border: 1px solid var(--il-btn-border-1);
}
.il-btn--outline-dark:hover,
.il-btn--outline-dark:focus {
  background-color: var(--il-btn-hover-bg-1);
  border-color: var(--il-btn-hover-bg-1);
  color: var(--il-btn-hover-ink-1);
}

/* = узел 2: .inward-price-card__cta, price-card:605. У builder-1 класс
   `il-btn--dark` встречается ДВАЖДЫ (price-card:605 И cabinet:255) для двух
   РАЗНЫХ по замеру узлов (залитая/контурная) — сузил селектор до карточки
   цены явно, чтобы не покрасить оба одинаково. Вопрос про cabinet:255 ушёл
   builder-1 письмом, там пока без стиля (не гадаю на видимость текста). */
.il-btn--dark.il-price-card__cta {
  padding: var(--il-btn-pad-v-2) var(--il-btn-pad-h-2);
  font-size: var(--il-btn-fs-2);
  color: var(--il-btn-ink-2);
  background-color: var(--il-btn-bg-2);
}
.il-btn--dark.il-price-card__cta:hover,
.il-btn--dark.il-price-card__cta:focus {
  background-color: var(--il-btn-hover-bg-2);
  color: var(--il-btn-hover-ink-2);
}

/* = узел 3: .ubtn-link .ubtn «Обсудить проект», тёмная секция .il-cabinet
   (подтверждено builder-1 06:43: dark-mode ряд, фото+rgba(0,0,0,.91)).
   builder-1 назначил ТОТ ЖЕ класс `il-btn--outline-light`, что и у узла 4
   (consultation) — это два разных измеренных узла с разными числами,
   поэтому различаю СЕКЦИЕЙ-предком, а не классом (по указанию builder-1
   "делай пятым модификатором со своими числами"). */
.il-cabinet .il-btn--outline-light {
  padding: var(--il-btn-pad-v-3) var(--il-btn-pad-h-3);
  font-size: var(--il-btn-fs-3);
  color: var(--il-btn-ink-3);
  background-color: var(--il-btn-bg-3);
  border: 1px solid var(--il-btn-border-3);
}
.il-cabinet .il-btn--outline-light:hover,
.il-cabinet .il-btn--outline-light:focus {
  background-color: var(--il-btn-hover-bg-3);
  color: var(--il-btn-hover-ink-3);
}

/* = узел 4: .vc_btn3 «ЗАПИСАТЬСЯ НА КОНСУЛЬТАЦИЮ», секция .il-consultation */
.il-consultation .il-btn--outline-light {
  padding: var(--il-btn-pad-v-4) var(--il-btn-pad-h-4);
  font-size: var(--il-btn-fs-4);
  font-weight: var(--il-btn-ves-4);
  color: var(--il-btn-ink-4);
  background-color: var(--il-btn-bg-4);
  border: 1px solid var(--il-btn-border-4);
}
.il-consultation .il-btn--outline-light:hover,
.il-consultation .il-btn--outline-light:focus {
  background-color: var(--il-btn-hover-bg-4);
  color: var(--il-btn-hover-ink-4);
}

/* =========================================================================
   БЛОК 5 — СЕТКА: переопределение лестницы .container Bootstrap
   Bootstrap даёт свои max-width на своих брейкпоинтах (576/768/992/1200/1400).
   Прототип живёт на СВОЕЙ лестнице (768/992/1270/1670 — inward-styles-
   extracted.css:85-88). Бутстрап красит только "разметку" (лид 06:44) —
   что означает и его СОБСТВЕННЫЕ ширины контейнера, это тоже "вид", а не
   поведение. Перекрываем той же селектор-специфичностью, позже по каскаду
   (наш inward.css подключён последним), поэтому !important не нужен.
   ========================================================================= */
.container {
  padding-left: var(--il-space-container-pad);
  padding-right: var(--il-space-container-pad);
}
@media (min-width: 768px) {
  .container { max-width: var(--il-space-container-sm); }
}
@media (min-width: 992px) {
  .container { max-width: var(--il-space-container-md); }
}
@media (min-width: 1270px) {
  .container { max-width: var(--il-space-container); }
}
@media (min-width: 1670px) {
  .container { max-width: var(--il-space-container-xl); }
}

/* ЕДИНАЯ вертикальная отбивка секций (приказ Босса 07:24: «отступов нигде нет
   сверху и снизу секций», «единый стандарт»/«много воздуха») — одна шкала
   токенов на всю страницу, не число в каждой секции. Источник — замер
   спейсера секции «Консультация» (100px ПК / 80px планшет+мобильный),
   распространяю на все секции ниже шапки+hero (у hero своя геометрия
   на 100vh, ей эта отбивка не нужна). */
.il-services,
.il-cabinet,
.il-method,
.il-advantages,
.il-structure,
.il-pricing,
.il-consultation {
  padding-top: var(--il-space-section-y);
  padding-bottom: var(--il-space-section-y);
}
@media (max-width: 991.98px) {
  .il-services,
  .il-cabinet,
  .il-method,
  .il-advantages,
  .il-structure,
  .il-pricing,
  .il-consultation {
    padding-top: var(--il-space-section-y-md);
    padding-bottom: var(--il-space-section-y-md);
  }
}

/* ПРАВКА tester/lead 08:00-08:24 (Б-6): якорное меню (#il-services и т.д.) кладёт
   верх секции ровно на y=0 — шапка фиксированная (--il-nav-h), верхние 103px
   заголовка съедены под неё. lead 08:24 предложил html{scroll-padding-top}
   вместо перечисления целей поимённо — один узел на всю страницу, накрывает
   и якоря меню, и обычный вход в секцию прокруткой (scrollIntoView/поиск
   браузера), а не только явно перечисленные id. */
html {
  scroll-padding-top: var(--il-nav-h);
}

/* =========================================================================
   БЛОК 6 — ШАПКА (секция 1 по порядку лида)
   Источник: reference/source/inward-styles-extracted.css:91-143.
   ПЕРЕПИСАНО 06:54 под новую разметку builder-1: своя .il-nav__inner (flex:
   left-group / brand-по-центру / right-group), .il-nav__panel — мобильная
   панель ПЛОСКИМ списком <a> (не <li>), .il-nav__toggler с тремя span-ами
   .il-nav__toggler-bar. Никакого Bootstrap navbar/collapse в разметке нет —
   открытие/закрытие панели даёт inward.js классом is-open (builder-1).
   ========================================================================= */
.il-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--il-nav-h);
  background-color: transparent;
  font-family: var(--il-font-semeystvo);
  transition: background-color var(--il-nav-fade) ease;
}
.il-nav.is-scrolled {
  background-color: var(--il-nav-bg-scrolled); /* :97 .inward-nav.is-scrolled — класс ставит inward.js после порога прокрутки, здесь только вид */
}
.il-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--il-nav-inner-gap); /* ПРАВКА reviewer 07:20: замер 1400 — 25px, у нас не был задан вовсе */
  height: var(--il-nav-h);
}
.il-nav__brand {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
  margin: 0;
  padding: 0;
}
.il-nav__brand img {
  display: block;
  width: var(--il-nav-logo-w);
  height: auto;
}
.il-nav__group {
  display: flex;
  align-items: center;
  gap: var(--il-nav-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 0 0 auto;
}
.il-nav__group--left {
  padding-left: var(--il-nav-inset);
}
.il-nav__group--right {
  padding-right: var(--il-nav-inset);
}
.il-nav__group li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.il-nav__group a {
  display: inline-block;
  padding: 2px 0;
  font-family: var(--il-font-semeystvo);
  font-size: var(--il-nav-fs);
  font-weight: var(--il-nav-ves);
  letter-spacing: var(--il-nav-ls);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--il-color-ink);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.il-nav__group a:hover,
.il-nav__group a.is-active {
  color: var(--il-color-ink);
  border-bottom-color: var(--il-color-ink);
  text-decoration: none;
}

/* бургер — 3 готовых span'а от builder-1, просто красим их */
.il-nav__toggler {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  gap: 5px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.il-nav__toggler-bar {
  display: block;
  width: 26px;
  height: 1px;
  background-color: var(--il-color-ink);
}

/* мобильная панель — плоский список <a>, вид как .inward-nav__panel прототипа */
/* ТЗ Босса 02.09: бургер открывает не раскрытие вниз, а ПАНЕЛЬ НА ВСЮ ВЫСОТУ ЭКРАНА,
   выезжающую слева направо. Панель всегда в потоке (не display:none), скрыта сдвигом —
   так работает переход; закрытая панель убрана и от курсора, и от клавиатуры. */
.il-nav__panel {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /* ТЗ Босса 03.09: логотип вверху, пункты и кнопка в теле, соцсети подвалом внизу */
  justify-content: space-between;
  gap: 0;
  /* отступы ушли на зоны — их заливка идёт во всю ширину панели */
  padding: 0;
  background: var(--il-nav-panel-bg);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--il-nav-fade) ease, visibility var(--il-nav-fade);
}
.il-nav__panel a {
  font-family: var(--il-font-semeystvo);
  font-size: var(--il-nav-fs);
  font-weight: var(--il-nav-ves);
  letter-spacing: var(--il-nav-ls);
  text-transform: uppercase;
  color: var(--il-color-ink);
  text-decoration: none;
}
/* ТЗ Босса 03.09: языки в шапке — одной группой, вплотную, через разделитель:
   UA | RU. Своих цветов и кеглей нет — берут их у соседних пунктов меню. */
.il-nav__langs {
  display: flex;
  align-items: center;
  gap: var(--il-nav-langs-gap);
  /* правая группа шапки разложена справа налево (direction: rtl) — внутри группы
     языков возвращаем обычное направление, иначе UA и RU меняются местами */
  direction: ltr;
}
.il-nav__langs a + a::before {
  content: "|";
  margin-right: var(--il-nav-langs-gap);
}

/* ТЗ Босса 03.09: три зоны — белая шапка с логотипом, тело с меню и кнопкой,
   подвал с иконками; тело и подвал одного оттенка, поэтому видно две зоны. */
.il-nav__panel .il-nav__brand {
  padding: calc(var(--il-nav-panel-pad-top) * 2 + var(--il-space-gap)) var(--il-space-container-pad) var(--il-space-gap-md);
}
/* логотип в меню крупнее — берём десктопную ширину того же токена */
.il-nav__panel .il-nav__brand img {
  width: var(--il-nav-logo-w-panel);
  height: auto;
}
.il-nav__panel-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: var(--il-nav-panel-gap);
  padding: var(--il-space-gap-md) var(--il-space-container-pad);
}
/* пункты меню — с иконками и крупнее, единый шаг отступа */
.il-nav__panel-links {
  display: grid;
  gap: var(--il-nav-panel-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.il-nav__panel-links a {
  display: flex;
  align-items: center;
  gap: var(--il-nav-panel-gap);
  font-size: var(--il-font-h3);
}
/* номер телефона — не пункт меню: стоит с кнопкой и центрируется в остатке высоты */
.il-nav__panel-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--il-nav-panel-gap);
}
.il-nav__panel .il-nav__panel-tel {
  display: flex;
  align-items: center;
  gap: var(--il-nav-panel-gap);
  font-size: var(--il-font-h3);
}
.il-nav__panel-tel .il-footer__ico {
  color: var(--il-color-accent);
}
/* соцсети подвалом: тот же набор иконок, что в подвале сайта, но на светлом фоне */
.il-nav__panel .il-footer__socials {
  gap: var(--il-space-gap-md);
  margin-bottom: 0;
  padding: var(--il-space-gap-md) var(--il-space-container-pad) var(--il-nav-panel-pad-bottom);
}
/* иконки пунктов меню — брендовый синий */
.il-nav__panel-links .il-footer__ico {
  color: var(--il-color-accent);
}
/* иконки соцсетей — каждая в цвет своего бренда */
.il-nav__panel .il-footer__soc--telegram { color: var(--il-soc-telegram); }
.il-nav__panel .il-footer__soc--whatsapp { color: var(--il-soc-whatsapp); }
.il-nav__panel .il-footer__soc--viber { color: var(--il-soc-viber); }
.il-nav__panel .il-footer__soc--facebook { color: var(--il-soc-facebook); }
.il-nav__panel .il-footer__soc--instagram { color: var(--il-soc-instagram); }
.il-nav__panel .il-footer__soc--linkedin { color: var(--il-soc-linkedin); }
.il-nav__panel .il-btn {
  align-self: flex-start;
}
/* ТЗ Босса 05.09: пункт-родитель («Услуги») с дочерними пунктами. Раскрытие —
   готовые компоненты Bootstrap: dropdown в строке шапки и collapse в панели,
   вместе со своей стрелкой (.dropdown-toggle::after). Своего вида здесь не
   заводим — только то, без чего чужой компонент не встаёт в готовую шапку. */
/* ТЗ Босса 05.09: выпадающий список услуг. Углы квадратные, как везде на сайте;
   список стоит ровно под шапкой и не наезжает на неё; подложка сплошная — без
   неё пункты ложатся поверх заголовка страницы и текст не читается. */
.il-nav__group .dropdown {
  /* пункт занимает всю высоту шапки, поэтому список открывается ровно
     от её нижнего края, а не от строки текста */
  position: relative;
  display: flex;
  align-items: center;
  height: var(--il-nav-h);
}
.il-nav__group .dropdown-menu {
  top: 100%;
  /* сдвиг влево на внутренний отступ: текст первого пункта встаёт ровно
     под текстом родителя */
  left: calc((var(--il-nav-sub-pad-x) + var(--il-nav-sub-line)) * -1);
  min-width: var(--il-nav-sub-w);
  margin: 0;
  padding: 0 var(--il-nav-sub-pad-x);
  background-color: var(--il-nav-bg-scrolled);
  border: var(--il-nav-sub-line) solid var(--il-color-divider);
  border-radius: 0;
  box-shadow: none;
}
/* правило .il-nav__group a выше сильнее, чем .dropdown-item, и сбивает пункту
   ширину и отступы — задаём их здесь: пункт занимает строку целиком */
.il-nav__group .dropdown-menu a {
  display: block;
  padding: var(--il-nav-sub-pad) 0;
  border-bottom: 0;
}
/* рамка фокуса нужна тем, кто ходит по меню с клавиатуры, но после клика мышью
   она читается как лишняя коробка вокруг пункта — стандартное разделение
   :focus и :focus-visible */
.il-nav__group .dropdown-toggle:focus:not(:focus-visible) {
  outline: none;
}
/* разделительная черта между пунктами — тем же цветом, что и все линии сайта */
.il-nav__group .dropdown-menu li + li a {
  border-top: var(--il-nav-sub-line) solid var(--il-color-divider);
}
/* ТЗ Босса 05.09: у пунктов выпадающего списка наведения нет совсем — ни
   подчёркивания из шапки, ни заливки и смены цвета от компонента */
.il-nav__group .dropdown-menu a:hover,
.il-nav__group .dropdown-menu a:focus,
.il-nav__group .dropdown-menu a:active {
  color: var(--il-color-ink);
  background-color: transparent;
  border-bottom: 0;
}
/* стрелка смотрит вниз у закрытого списка и вверх у раскрытого */
.il-nav__group .dropdown-toggle::after,
.il-nav__panel-links .dropdown-toggle::after {
  transition: transform .2s ease;
}
/* стрелка в строке шапки отодвинута от названия — вплотную она читалась
   как часть слова — и покрашена фирменным синим: компонент рисует её границей,
   поэтому цвет задаётся border-top-color, иначе она берёт цвет текста */
.il-nav__group .dropdown-toggle::after {
  margin-left: var(--il-nav-sub-caret-gap);
  border-top-color: var(--il-color-accent);
}
.il-nav__group .dropdown-toggle[aria-expanded="true"]::after,
.il-nav__panel-links .dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}
/* вложенный список в панели: тот же шаг отступа, что между пунктами меню,
   со сдвигом вправо — видно, что пункты дочерние */
/* ТЗ Босса 05.09: дочерние пункты стоят на уровне родителя — сдвига вправо нет */
.il-nav__panel-links ul {
  margin: var(--il-nav-panel-gap) 0 0;
  padding-left: 0;
}
.il-nav__panel-links ul li + li {
  margin-top: var(--il-nav-panel-gap);
}

.il-nav.is-open .il-nav__panel {
  transform: translateX(0);
  visibility: visible;
}
/* бургер остаётся НАД панелью и служит крестиком закрытия — отдельного элемента не заводим */
.il-nav__toggler {
  position: relative;
  z-index: 2;
}
.il-nav.is-open {
  height: auto;
  background: var(--il-nav-panel-bg);
}
/* ПРАВКА 05.09: после переименования раздела в «Inward Journal» правая группа
   шапки стала длиннее и на 1200–1280 упиралась в край экрана. Меньший зазор
   между пунктами включается раньше — своих значений не добавилось. */
@media (max-width: 1279.98px) {
  :root { --il-nav-gap: var(--il-nav-gap-md); }
}
@media (max-width: 991.98px) {
  :root { --il-nav-h: var(--il-nav-h-mobile); }
  .il-nav__group { display: none; }
  .il-nav__toggler { display: flex; }
}
@media (max-width: 767.98px) {
  :root { --il-nav-logo-w: var(--il-nav-logo-w-sm); }
}

/* =========================================================================
   БЛОК 7 — HERO (секция 2)
   Источник: :41-77,146-203. Фон-фото ПОДКЛЮЧЁН (07:03): файл довезён лидом,
   имя буквально совпадает с --inward-hero-bg исходника — pawel-czerwinski-
   T5VUBvCYqKk-unsplash.jpg, cover/50% 50%, светлый налив rgba(242,242,242,.8)
   поверх (--il-hero-bg-fallback ниже — резервный цвет ДО загрузки фото/если
   путь когда-то сломается, не основной слой).
   ========================================================================= */
.il-hero {
  position: relative;
  display: block;
  width: 100%;
  /* ПРАВКА БОССА 02.09: секция сдвинута вверх на высоту шапки (margin ниже), поэтому
     100vh давали экран МИНУС шапка - внизу оставалась светлая полоса, а блок с текстом
     уезжал вверх вместе с секцией. Компенсируем тем же существующим токеном шапки. */
  min-height: calc(var(--il-hero-min-h) + var(--il-nav-h));
  overflow: hidden;
  background: var(--il-hero-bg-fallback);
  padding: 0;
  margin: calc(var(--il-nav-h) * -1) 0 0; /* ФИКС: .il-nav position:fixed убран из потока, без этого он наезжает на контент
    (найдено builder-1/operator) — сдвигаем hero вверх под прозрачную шапку (как и задумано:
    шапка плавает НАД hero), все секции ПОСЛЕ hero остаются на месте, т.к. это правка только hero */
}
.il-hero__bg {
  position: absolute;
  inset: 0;
  background-color: var(--il-hero-bg-fill);
  /* Один и тот же снимок в двух форматах: современный весит вчетверо
     меньше и грузится быстрее, а строка выше остаётся запасной для
     браузеров, которые новый формат не понимают. Вид не меняется. */
  background-image: url('../images/pawel-czerwinski-T5VUBvCYqKk-unsplash.jpg');
  background-image: -webkit-image-set(url('../images/pawel-czerwinski-T5VUBvCYqKk-unsplash.webp') type('image/webp'), url('../images/pawel-czerwinski-T5VUBvCYqKk-unsplash.jpg') type('image/jpeg'));
  background-image: image-set(url('../images/pawel-czerwinski-T5VUBvCYqKk-unsplash.webp') type('image/webp'), url('../images/pawel-czerwinski-T5VUBvCYqKk-unsplash.jpg') type('image/jpeg')); /* ИСПРАВЛЕНО task-38: это ФОТО (белая волнистая скульптура), не SVG-узор — имя файла цитируется буквально в исходнике :46 --inward-hero-bg, файл довезён 06:56, inward-curves.svg НЕ для hero (см. task-40, секция «Метод») */
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: scroll;
}
.il-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(242, 242, 242, .8);
}
.il-hero__inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--il-hero-bottom);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.il-hero__eyebrow {
  margin: 0 0 var(--il-hero-eyebrow-gap) 0;
  padding: 0;
  max-width: var(--il-hero-eyebrow-w);
  font-family: var(--il-font-semeystvo);
  font-size: var(--il-hero-eyebrow-fs);
  font-weight: var(--il-hero-eyebrow-ves);
  line-height: var(--il-hero-eyebrow-lh);
  letter-spacing: var(--il-hero-eyebrow-ls);
  text-transform: uppercase;
  color: var(--il-color-ink);
}
/* подчёркивание под wordmark — форма cs- (базовая, синий слева/чёрный справа),
   измерена лично на этом же узле (zamery §1.1, строка .inward-hero__title,
   546px/28.00%/100.00%) — не m-slab и не cap-slab, класс `il-slab` на HTML
   не проставлен, поэтому дублирую те же правила прямо на .il-hero__title
   (тот же приём, что для .il-service__name — избегаю правки чужой разметки
   ради одной утилиты). */
.il-hero__title {
  --il-slab-ink: var(--il-color-ink);
  position: relative;
  display: table;
  margin: 0 0 var(--il-hero-title-gap) 0;
  padding: 0 0 var(--il-slab-padding-b);
  line-height: 0;
}
.il-hero__title::before,
.il-hero__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: var(--il-slab-h);
  clip-path: polygon(0 0, calc(100% - var(--il-slab-h)) 0, 100% 100%, var(--il-slab-h) 100%);
}
.il-hero__title::before {
  left: 0;
  width: var(--il-slab-dolya);
  background: var(--il-color-accent);
}
.il-hero__title::after {
  right: 0;
  left: calc(var(--il-slab-dolya) + var(--il-slab-gap));
  background: var(--il-slab-ink);
}
.il-hero__title img {
  display: block;
  width: var(--il-hero-title-w);
  max-width: 100%;
  height: auto;
}
.il-hero__lead {
  margin: 0 0 var(--il-space-gap) 0;
  padding: 0;
  max-width: var(--il-hero-lead-w);
  font-family: var(--il-font-semeystvo);
  font-size: var(--il-hero-lead-fs);
  font-weight: var(--il-nav-ves);
  line-height: var(--il-hero-lead-lh);
  letter-spacing: var(--il-hero-lead-ls);
  text-transform: uppercase;
  color: var(--il-color-ink);
}
@media (max-width: 991.98px) {
  :root {
    --il-hero-bottom: var(--il-hero-bottom-md);
    --il-hero-eyebrow-gap: var(--il-hero-eyebrow-gap-md);
  }
  .il-hero {
    display: flex;
    /* ТЗ Босса 02.09: на мобильных блок с названием, текстом и кнопкой стоит БЛИЖЕ К НИЗУ,
       а не по центру. Отступ снизу — существующий мобильный токен, своих чисел нет. */
    align-items: flex-end;
    /* отступ снизу — ЕДИНАЯ отбивка секций плюс подъём блока по ТЗ Босса 03.09 */
    padding-bottom: calc(var(--il-space-section-y) + var(--il-hero-lift-md));
  }
  .il-hero__inner {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
  }
}

/* =========================================================================
   БЛОК 8 — «СИСТЕМНАЯ РАБОТА» (секция 3, .capabilities в прототипе)
   Источник: :311-524. Фон секции — transparent (наследует белый body, своей
   заливки нет). Отступ снизу шапки: секция начинается СРАЗУ (nav position:
   fixed, из потока исключён) — padding-top не нужен здесь дополнительно,
   так как секция не первая под hero (hero сам top:0, а не под шапкой).
   ========================================================================= */
.il-services {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* padding-top/bottom НЕ здесь — задаётся единой отбивкой секций (Блок 5),
     найдено критиком: это правило той же специфичности стояло ПОЗЖЕ в каскаде
     и молча перебивало 100/80px на 40px только у этой секции */
  background: transparent;
  color: var(--il-color-ink);
}
/* ТЗ Босса 02.09 (скрин image3): зазор «линия бренда -> текст» РАВЕН зазору
   «текст -> верх смартфона». Оба берут один существующий токен отбивки. */
.il-services .il-slab {
  margin-bottom: var(--il-space-gap);
}
.il-services__lead {
  max-width: 700px;
  margin: 0 auto var(--il-space-gap);
  color: var(--il-color-ink); /* ПРАВКА reviewer 07:55: замер прото узел-в-узел = rgb(17,17,17), не --il-cap-muted */
}
.il-services__system {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(270px, 1fr) var(--il-cap-col) minmax(270px, 1fr);
  column-gap: var(--il-cap-gap);
  align-items: center;
}
.il-services__list {
  display: grid;
  grid-template-rows: repeat(2, minmax(var(--il-cap-row-h), auto));
  margin: 0;
  padding: 0;
  list-style: none;
}
.il-service {
  position: relative;
  display: flex;
  align-items: center;
}
.il-service__copy {
  appearance: none;
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  z-index: 1;
  padding: 16px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-family: var(--il-font-semeystvo);
  text-align: inherit;
  cursor: pointer;
}
.il-service__meta {
  display: flex;
  align-items: baseline;
  gap: 11px;
  margin-bottom: 8px;
}
.il-service__number {
  flex: none;
  color: var(--il-color-accent);
  font-family: var(--il-font-semeystvo);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--il-cap-num-ls);
}
/* название услуги — своя форма подчёркивания cap-slab (найдена критиком лида,
   task-8), правая колонка = база, левая = --reversed. Класс на HTML не
   проставлен (h3, не h2, без il-slab) — дублирую правила на .il-service__name,
   тот же приём, что у .il-hero__title. */
.il-service__name {
  --il-slab-h: var(--il-slab-h-cap);
  --il-slab-dolya: var(--il-slab-dolya-cap);
  --il-slab-ink: var(--il-slab-color-cap);
  position: relative;
  margin: 0;
  padding: 0 0 var(--il-slab-padding-b-cap);
  font-family: var(--il-font-semeystvo);
  font-size: var(--il-cap-h-size);
  font-weight: 700;
  letter-spacing: var(--il-cap-h-ls);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--il-color-ink);
}
.il-service__name::before,
.il-service__name::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: var(--il-slab-h);
  clip-path: polygon(0 0, calc(100% - var(--il-slab-h)) 0, 100% 100%, var(--il-slab-h) 100%);
}
.il-service__name::before {
  left: 0;
  width: var(--il-slab-dolya);
  background: var(--il-color-accent);
}
.il-service__name::after {
  right: 0;
  left: calc(var(--il-slab-dolya) + var(--il-slab-gap));
  background: var(--il-slab-ink);
}
/* левая колонка — зеркально (чёрная часть ШИРОКАЯ 74% слева, синяя узкая справа —
   источник :400-404, --il-cap-slab-b:74% НЕ производная от 26%, отдельная константа) */
.il-services__list--left .il-service__name::before {
  width: var(--il-slab-dolya-cap-b);
  background: var(--il-slab-color-cap);
}
.il-services__list--left .il-service__name::after {
  left: calc(var(--il-slab-dolya-cap-b) + var(--il-slab-gap));
  background: var(--il-color-accent);
}
.il-service__text {
  max-width: 465px;
  margin: 0;
  color: var(--il-color-ink); /* ПРАВКА reviewer 07:55: замер прото узел-в-узел = rgb(17,17,17), не --il-cap-muted */
  font-family: var(--il-font-semeystvo);
  font-size: var(--il-cap-p-fs);
  line-height: var(--il-font-body-lh);
  text-transform: none;
}
.il-services__list--left .il-service {
  text-align: right;
}
.il-services__list--left .il-service__meta {
  justify-content: flex-end;
}
.il-services__list--left .il-service__text {
  margin-left: auto;
}

/* устройство-мокап по центру */
.il-device-wrap {
  position: relative;
  display: grid;
  place-items: center;
  min-height: calc(var(--il-cap-row-h) * 2);
}
.il-device-shadow {
  position: absolute;
  bottom: 17px;
  width: 72%;
  height: 22px;
  border-radius: 50%;
  background: rgba(17, 18, 15, .18);
  filter: blur(12px);
}
.il-device {
  position: relative;
  z-index: 1;
  width: min(100%, var(--il-cap-col));
  aspect-ratio: 302 / 610;
  padding: 10px;
  border: 1px solid var(--il-cap-device-edge);
  border-radius: 44px;
  background: var(--il-cap-device-body);
  box-shadow: 0 2px 0 #55554F inset, 0 26px 46px rgba(23, 22, 18, .22);
}
.il-device::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 3;
  width: 74px;
  height: 20px;
  border-radius: 20px;
  background: var(--il-cap-device-notch);
  transform: translateX(-50%);
}
.il-device__screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 35px;
  background-color: var(--il-cap-screen);
  background-image: url('../images/inward-office-background.webp');
  background-position: 68% center;
  background-size: cover;
}
.il-device__screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--il-cap-screen-wash);
  pointer-events: none;
}
.il-device__topbar {
  position: relative;
  z-index: 1;
  height: 58px;
  padding: 32px 18px 0;
  display: flex;
  justify-content: space-between;
  color: #3F403E;
  font-family: var(--il-font-semeystvo);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--il-cap-num-ls);
}
.il-device__landing {
  position: relative;
  z-index: 1;
  height: calc(100% - 58px);
  padding: 34px 22px 27px;
  display: grid;
  grid-template-rows: 1fr auto;
  text-align: center;
}
.il-device__brand {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(-8px);
}
.il-device__mark {
  display: block;
  width: 86px;
  height: auto;
  margin: 0 auto 22px;
}
.il-device__product {
  margin: 0;
  color: var(--il-color-ink); /* ПРАВКА reviewer 07:55: #222327 (--il-slab-color-cap) на прототипе на этом узле не найден вовсе */
  font-family: var(--il-font-semeystvo);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1;
  text-transform: uppercase;
}
.il-device__definition {
  margin: 0;
  padding-top: 15px;
  border-top: 1px solid rgba(34, 35, 39, .55);
  color: var(--il-color-ink); /* ПРАВКА reviewer 07:55: замер узел-в-узел = rgb(17,17,17), не хардкод #30312F (граница не трогаю — не флагована, не измерял) */
  font-family: var(--il-font-semeystvo);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.46;
  text-transform: none;
}
@media (max-width: 1199.98px) {
  :root { --il-cap-row-h: 142px; --il-cap-gap: 30px; --il-cap-col: 260px; }
}
@media (max-width: 991.98px) {
  /* ТЗ Босса 02.09: кегль заголовков секций ниже 992 — один токен на все h2 */
  :root { --il-font-h2: var(--il-font-h2-md); }
  .il-services__system {
    grid-template-columns: 1fr;
    gap: 0;
  }
  /* ТЗ Босса 02.09: макет смартфона убирается на планшетах и телефонах */
  .il-device-wrap {
    display: none;
  }
  .il-device {
    width: min(78vw, 290px);
  }
  .il-services__list {
    grid-template-rows: none;
    /* ТЗ Босса 02.09: на планшетах (md, 768-991) услуги по 2 в ряд */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--il-cap-gap);
    row-gap: 0;
  }
  .il-services__list--left {
    order: 2;
  }
  .il-services__list--right {
    order: 3;
  }
  .il-service {
    min-height: 116px;
    text-align: left !important;
  }
  .il-service__meta {
    justify-content: flex-start !important;
  }
  .il-service__text {
    max-width: 620px;
    margin-left: 0 !important;
  }
  .il-services__list--left .il-service__text {
    margin-left: 0;
  }
}

/* =========================================================================
   БЛОК 9 — «ЧТО ПОЛУЧАЕТ ВАШ БИЗНЕС» (Кабинет клиента, секция .il-cabinet)
   Источник фото: current-page.html:1812-1816 — pawel-czerwinski-oIT3X1oPtFA-
   unsplash.jpg, attachment fixed, затемнение rgba(0,0,0,.91). Приказ Босса
   07:27: тёмный фон ставим ПЕРВЫМ действием, до типографики — быстрее всего
   даёт секции видимость.
   ========================================================================= */
.il-cabinet {
  position: relative;
  isolation: isolate; /* ПРАВКА lead 08:15: панель выглядела притушенной "будто под плёнкой" — гарантирую СВОЙ, замкнутый стек для .il-cabinet__bg/::after/.container, не завязанный на auto-порядок предков */
  overflow: visible; /* ПРАВКА лид 07:52, замер DOM 1400: панель кабинета выступает НАД/ПОД тёмной полосой на 87/45px — hidden физически не пускал её наружу, корень жалобы Босса «дашборд не как окно» */
  /* ПРАВКА Босса 05.09: у ряда этой секции зазор больше стандартного, и его
     отрицательные поля не укладываются во внутренний отступ контейнера — ряд
     вылезал за экран и давал 2px горизонтальной прокрутки на ширинах чуть выше
     992px. Приём из документации Bootstrap (Gutters — Horizontal gutters):
     обрезаем у родителя. Именно clip по горизонтали: hidden перевёл бы
     вертикальную ось в auto и срезал выступ панели над полосой. */
  overflow-x: clip;
  padding-top: 0;    /* эта секция не входит в единую отбивку 100px — высота полосы = 578px по замеру, задаёт её колонка с текстом, не padding */
  padding-bottom: 0;
  /* ПРАВКА БОССА 02.09: секция опускается ниже на СТАНДАРТ отбивки — воздух между
     телефоном и панелью. margin двигает секцию ЦЕЛИКОМ (фон + панель), поэтому панель
     сохраняет свой выступ над тёмной полосой и не уезжает внутрь чёрного. */
  margin-top: var(--il-space-section-y);
  color: var(--il-color-on-dark-ink);
}
.il-cabinet .row {
  align-items: center;   /* п.6: правая колонка (текст) по центру полосы, а не прижата к верху */
  --bs-gutter-x: 69px;   /* п.4: зазор панель→текст 69px по замеру (600→669), было 24px дефолтным гаттером Bootstrap */
  min-height: var(--il-cabinet-h); /* ПРАВКА lead 08:16: без явной высоты ряд сжимался до 533 (620 панели − 87 отрицательного margin-top) — задаю высоту ряда напрямую, тогда тот же -87 сверху при неизменных 620 высоты панели сам даёт нужные 45px снизу */
}
.il-cabinet .row > .col-lg-6:first-child {
  /* ПРАВКА reviewer/lead 08:24 — регрессия от min-height выше: align-items:center
     (нужен ТОЛЬКО правой, текстовой колонке) стал ДОПОЛНИТЕЛЬНО центрировать и
     ПАНЕЛЬ внутри выросшего до 578 ряда, добавляя ~22px сверху и снизу поверх
     margin-top:-87 — вылет ужался 87→65 и 45→22. Панель считает свои отступы
     САМА через margin-top на .il-workspace, ей нужен flex-start, не center. */
  align-self: flex-start;
}
@media (max-width: 991.98px) {
  .il-cabinet {
    margin-top: var(--il-space-section-y-md);
  }
  /* ТЗ Босса 02.09: на планшетах и телефонах у секции появляются отступы сверху и снизу */
  .il-cabinet {
    padding-top: var(--il-space-section-y-md);
    padding-bottom: var(--il-space-section-y-md);
  }
  .il-cabinet .row {
    --bs-gutter-x: 40px; /* п.7: <992 остаётся замеренный зазор, но панель уже не выступает */
    min-height: auto; /* на мобильном панель не поднята отрицательным margin — фиксированная высота ряда не нужна */
  }
  .il-cabinet .row > .col-lg-6:first-child {
    align-self: auto;
  }
}
.il-cabinet__bg {
  /* РЕШЕНИЕ БОССА 02.09 (отменяет правку lead 08:23-08:24): фон секции идёт
     ВО ВСЮ ШИРИНУ ОКНА, а не по контейнеру. Замер прототипа показывал у кабинета
     контейнер 1230@25 (в отличие от трёх других тёмных секций, где фото полное) —
     Босс это решение отменил: эталон для ЭТОЙ секции — полная ширина окна.
     Растяжка через inset:0 по самой секции: секция — блок во всю ширину body,
     поэтому ни 100vw (прибавляет ширину полосы прокрутки и даёт горизонтальный
     скролл вопреки критерию приёмки 4), ни центровка left/transform не нужны. */
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../images/pawel-czerwinski-oIT3X1oPtFA-unsplash.jpg');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.il-cabinet__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0; /* ПРАВКА lead 08:15: было auto — явное значение внутри изолированного стека .il-cabinet, чтобы не оставлять браузеру домысливать порядок */
  background: var(--il-cabinet-overlay);
}
.il-cabinet .container {
  position: relative;
  z-index: 2; /* было 1 — поднимаю с запасом над bg/::after (оба явные 0) внутри isolate-стека .il-cabinet */
}
@media (max-width: 991.98px) {
  /* приказ Босса 07:00: параллакс (fixed) ломает мобильный скролл — на узких
     экранах переводим в обычную прокрутку фона вместе со страницей */
  .il-cabinet__bg {
    background-attachment: scroll;
  }
}
.il-cabinet__lead {
  color: var(--il-color-on-dark-ink);
  /* ТЗ Босса 02.09: полная симметрия — один и тот же отступ между всеми блоками секции */
  margin: 0 0 var(--il-space-gap);
}
.il-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--il-tags-gap);
  margin: 0 0 var(--il-space-gap) 0;
  padding: 0;
  list-style: none;
  font-family: var(--il-font-semeystvo);
}
.il-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--il-tag-fs);
  font-weight: 600;
  letter-spacing: var(--il-tag-ls);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--il-color-on-dark-ink);
  white-space: nowrap;
}
.il-tag__label {
  padding-bottom: var(--il-tag-underline-gap);
  background-image: linear-gradient(
    to right,
    var(--il-color-on-dark-ink) 0, var(--il-color-on-dark-ink) var(--il-tag-underline-split),
    var(--il-color-accent) var(--il-tag-underline-split), var(--il-color-accent) 100%
  );
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% var(--il-tag-underline-h);
}
.il-tag i {
  font-size: var(--il-tag-icon-size);
  line-height: 1;
  color: var(--il-color-on-dark-ink);
}
.il-cabinet .il-tags {
  margin-bottom: var(--il-space-gap);
}
.il-cabinet__title {
  text-transform: uppercase; /* приказ Босса 07:41: заголовок капсом, как и теги над ним */
  color: #FFFFFF;            /* замер лид 07:52: #FFFFFF, не --il-color-on-dark-ink (F3F3F3) — этот узел отдельный */
  /* ТЗ Босса 02.09: брендовое подчёркивание как на других заголовках — padding .il-slab
     держит полосу, поэтому обнуление снято. Отступ снизу — общий токен (симметрия). */
  margin: 0 0 var(--il-space-gap) 0;
}
/* ТЗ Босса 02.09: подчёркивание заголовка ВКЛЮЧЕНО — копия того же брендового элемента,
   что на других заголовках (на тёмном работает модификатор .il-slab--on-dark).
   Прежнее отключение по замеру прототипа отменено прямым требованием заказчика. */
.il-cabinet__lead {
  max-width: 431px; /* замер лид 07:53: у прототипа абзац ломается в 6 строк на этой ширине, у нас была натуральная 583 (4 строки) */
}

/* =========================================================================
   БЛОК 10 — «ИКОНКА В ФИРМЕННОЙ ОПРАВЕ» (il-ico) — ОБЩИЙ компонент
   (приказ Босса/лида 07:30: один класс на все секции, не по одному на карточку).
   Источник: :898-913 — квадратная рамка 32px, глиф 16px по центру, обводка
   divider, цвет accent; при наведении на карточку — заливка accent, глиф белый.
   ========================================================================= */
.il-ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--il-method-icon-frame);
  height: var(--il-method-icon-frame);
  color: var(--il-color-accent);
  border: 1px solid var(--il-color-divider);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.il-ico svg {
  width: var(--il-method-icon-glyph);
  height: var(--il-method-icon-glyph);
}

/* =========================================================================
   БЛОК 11 — МЕТОД (секция .il-method, «этапы работы»/6 карточек)
   Источник: :781-930 (--m-* секции .inward-sec4) + task-40 (фон).
   ========================================================================= */
.il-method {
  position: relative;
  background-color: #FFFFFF;
  background-image:
    linear-gradient(var(--il-method-bg-shade), var(--il-method-bg-shade)),
    radial-gradient(circle at 100% 0%, var(--il-method-bg-glow) 0%, transparent var(--il-method-bg-glow-size)),
    url('../images/inward-curves.svg');
  background-repeat: no-repeat, no-repeat, no-repeat;
  /* ЗАМЕР ЭТАЛОНА 02.09: линии ФИКСИРОВАНЫ к экрану (attachment fixed на всех слоях),
     размер слоёв auto/auto/cover — было scroll+cover, линии уезжали вместе с секцией. */
  background-attachment: fixed, fixed, fixed;
  background-size: auto, auto, cover;
  background-position: center, center, center;
}
/* ПРАВКА tester/lead 08:00-08:02 (Б-3): .row в этой секции — align-items-start
   (утилита Bootstrap в разметке builder-1), поэтому колонка-родитель
   .il-method__head высотой ТОЛЬКО по своему контенту (388px), а не по всей
   высоте ряда (2727px, задаёт вторая колонка с картами) — sticky внутри
   короткого родителя даёт всего ~40px хода и тут же отпускает. Растягиваю
   ИМЕННО первую колонку этого ряда на всю высоту ряда, не трогая саму
   утилиту align-items-start (вторая колонка с картами её не использует). */
.il-method .row > .col-lg-6:first-child {
  align-self: stretch;
}
.il-method__head {
  position: sticky;
  top: var(--il-method-sticky-top);
  /* ЗАМЕР ЭТАЛОНА 02.09: обёртка растянута на экран и центрирует контент по вертикали
     (flex + justify-content:center), поэтому текст стоит по центру ЭКРАНА, а не прижат к верху. */
  min-height: var(--il-method-sticky-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 991.98px) {
  .il-method .row > .col-lg-6:first-child {
    align-self: auto;
  }
  .il-method__head {
    position: static;
    /* ТЗ Босса 03.09: без липкой колонки высота в экран давала пустоту после текста */
    min-height: 0;
  }
}
.il-method__eyebrow {
  display: block;
  margin-bottom: var(--il-method-eyebrow-mb);
  color: var(--il-color-accent);
  font-family: var(--il-font-mono);
  font-size: var(--il-method-link-fs);
  font-weight: 700;
  line-height: 1;
  letter-spacing: normal;
  text-transform: uppercase;
}
.il-method__title {
  margin-bottom: var(--il-space-gap-md);
}
.il-method__quote {
  margin-bottom: var(--il-space-gap-md);
}
.il-method__lead {
  margin: 0 0 var(--il-method-lead-mb) 0;
}
.il-method__cards {
  display: grid;
  gap: var(--il-method-cards-gap);
}
.il-method__card {
  padding: var(--il-method-card-pad);
  background: #FFFFFF;
  transition: border-color .3s ease;
}
.il-method__top {
  display: flex;
  align-items: center;
  gap: var(--il-method-top-gap);
  margin-bottom: var(--il-method-top-mb);
}
.il-method__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--il-method-icon-frame);
  height: var(--il-method-icon-frame);
  color: var(--il-color-accent);
  border: 1px solid var(--il-color-divider);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.il-method__icon svg {
  width: var(--il-method-icon-glyph);
  height: var(--il-method-icon-glyph);
}
.il-method__card:hover .il-method__icon {
  color: #FFFFFF;
  background: var(--il-color-accent);
  border-color: var(--il-color-accent);
}
.il-method__num {
  margin: 0;
  color: var(--il-color-ink);
  font-family: var(--il-font-mono);
  font-size: var(--il-method-num-fs);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .1em;
}
.il-method__link {
  display: block;
  margin-bottom: var(--il-method-link-mb);
  color: var(--il-color-accent);
  font-family: var(--il-font-mono);
  font-size: var(--il-method-link-fs);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.il-method__name {
  margin-bottom: var(--il-method-name-mb);
  text-transform: uppercase; /* ТЗ Босса 03.09: заголовки карточек метода капсом */
}
.il-method__text {
  margin: 0;
}
.il-method__list {
  margin: var(--il-method-list-pad-top) 0 0 0;
  padding-top: var(--il-method-list-pad-top);
  border-top: 1px solid var(--il-color-divider);
  display: grid;
  gap: var(--il-method-list-gap);
}

/* =========================================================================
   БЛОК 12 — ПРЕИМУЩЕСТВА (.il-advantages) — тёмная секция, срочный приоритет
   Босса (20 минут). Фон: pawel-czerwinski-KfQOznwKc04-unsplash.jpg, cover,
   attachment scroll, затемнение --il-advantages-overlay. Источник карточки:
   :1098-1102 + инлайн-стиль current-page.html:1832.
   ========================================================================= */
.il-advantages {
  position: relative;
  /* ПРАВКА БОССА 02.09: hidden физически не пускал карточки за кромку секции.
     Тот же приём, что лид уже применил к .il-cabinet для панели кабинета. */
  overflow: visible;
  color: var(--il-color-on-dark-ink);
}
.il-advantages__bg {
  position: absolute;
  /* фон кончается ВЫШЕ низа секции: на отбивку + вылет карточек (эталон) */
  inset: 0 0 calc(var(--il-space-section-y) + var(--il-advantages-hang)) 0;
  z-index: 0;
  background-image: url('../images/pawel-czerwinski-KfQOznwKc04-unsplash.jpg');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: scroll;
}
.il-advantages__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--il-advantages-overlay);
}
.il-advantages > .container {
  position: relative;
  z-index: 1;
}
.il-advantages__eyebrow,
.il-advantages__lead {
  color: var(--il-color-on-dark-ink);
}
.il-advantages__title {
  color: #FFFFFF;
  margin-bottom: var(--il-space-gap);
}
.il-advantage {
  /* ПРАВКА lead 08:20 (брак по прямому определению Босса): прототип держит
     этот .row классом vc_row-o-equal-height — карточки одной высоты. Ряд
     (Bootstrap .row) по умолчанию уже align-items:stretch, колонки и так
     растянуты вровень; не хватало только заполнить колонку самой карточкой. */
  height: 100%;
  background: var(--il-advantage-card-bg);
  box-shadow: var(--il-advantage-card-shadow);
  border: var(--il-advantage-card-border);
  border-radius: var(--il-advantage-card-radius);
  border-bottom: var(--il-advantage-edge-h) solid var(--il-color-accent);
  padding: var(--il-advantage-card-pad);
  min-height: var(--il-advantage-card-min-h);
  color: var(--il-color-ink);
  margin-bottom: var(--il-space-gap-md);
}
.il-advantage__icon {
  display: block;
  margin-bottom: var(--il-space-gap-md);
  text-align: center;
  color: var(--il-advantage-icon-ink);
}
.il-advantage__icon svg {
  width: var(--il-advantage-icon-size);
  height: var(--il-advantage-icon-size);
}
.il-advantage__title {
  --il-slab-ink: var(--il-color-ink);
  position: relative;
  display: table;
  margin: 0 auto var(--il-method-name-mb);
  padding: 0 0 var(--il-slab-padding-b);
  font-size: var(--il-advantage-title-fs);
  font-weight: var(--il-advantage-title-ves);
  text-align: center;
  text-transform: uppercase; /* ТЗ Босса 03.09: заголовки карточек капсом */
}
.il-advantage__title::before,
.il-advantage__title::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: var(--il-slab-h);
  clip-path: polygon(0 0, calc(100% - var(--il-slab-h)) 0, 100% 100%, var(--il-slab-h) 100%);
}
.il-advantage__title::before {
  left: 0;
  width: var(--il-slab-dolya);
  background: var(--il-color-accent);
}
.il-advantage__title::after {
  right: 0;
  left: calc(var(--il-slab-dolya) + var(--il-slab-gap));
  background: var(--il-color-ink);
}
.il-advantage__text {
  margin: 0;
}

/* =========================================================================
   БЛОК 13 — СТРУКТУРА INWARD OS (.il-structure)
   Источник: :1192-1220 (--dl-* секции .vc_tta-panels:has(.inward-dept-kicker)).
   Светлая секция: статистика (dl) + сетка 2×2 департаментов с иконками.
   ========================================================================= */
.il-structure__title {
  margin-bottom: var(--il-space-gap);
}
.il-structure__accent {
  color: var(--il-color-accent);
}
.il-structure__lead {
  margin-bottom: var(--il-space-gap);
}
.il-stats {
  margin-top: 0;
  margin-bottom: 0; /* сброс браузерного margin у <dl>, ГОРИЗОНТАЛЬНЫЙ margin Bootstrap .row (отрицательный гаттер) не трогаю — найдено критиком, margin:0 сбивал выравнивание по левому краю */
}
.il-stats__number {
  margin: 0;
  color: var(--il-color-ink);
  font-family: var(--il-font-semeystvo);
  font-size: 50px;
  font-weight: 500;
  line-height: 1.1;
}
.il-stats__label {
  margin: 0;
  color: var(--il-color-ink);
  font-size: 13px;
  letter-spacing: 2px;
}
.il-depts {
  display: grid;
  grid-template-columns: repeat(var(--il-structure-dept-cols), minmax(0, 1fr));
  column-gap: var(--il-structure-dept-gap-x);
  row-gap: var(--il-structure-dept-gap-y);
  margin: 0;
  padding: 0;
  list-style: none;
}
.il-dept {
  /* найдено критиком: HTML несёт ещё и бутстраповский .col-sm-6 (width:50%
     + padding-gutter) поверх моей grid-колонки — вдвое режет ширину и
     наезжают друг на друга названия. Сетку здесь держит .il-depts (grid),
     Bootstrap-остатки на самом li снимаю. */
  width: auto;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.il-dept__ic {
  width: var(--il-structure-dept-ic);
  height: var(--il-structure-dept-ic);
  margin-bottom: var(--il-structure-dept-ic-gap);
  color: var(--il-color-accent);
}
.il-dept__kicker {
  display: block;
}
.il-dept__name {
  /* ПРАВКА reviewer 08:38: display:table не переносил "Технического" на вторую
     строку даже с max-width:100% (родитель 137px, узел рендерился 164px) —
     источник (:1261 #main ... .inward-dept-name{display:block}) сам не
     table, а block, и явно объявляет --dl-name-lines:2 (:1221) — подпись
     ПРЕДНАЗНАЧЕНА переноситься на 2 строки на узких колонках. width:fit-content
     даёт то же самопрятание по ширине текста, что раньше давал table (нужно
     для подчёркивания ::before/::after ниже, оно шириной в текст, не в
     колонку), но при этом обычный перенос слов работает как у block. */
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding-bottom: calc(var(--il-structure-dept-slab-h) + var(--il-structure-dept-slab-gap));
  font-size: var(--il-structure-dept-name-fs);
  letter-spacing: var(--il-structure-dept-name-ls);
  line-height: var(--il-structure-dept-name-lh);
  color: var(--il-color-ink);
}
.il-dept__name::before,
.il-dept__name::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: var(--il-structure-dept-slab-h);
  clip-path: polygon(0 0, calc(100% - var(--il-structure-dept-slab-h)) 0, 100% 100%, var(--il-structure-dept-slab-h) 100%);
}
.il-dept__name::before {
  left: 0;
  width: var(--il-structure-dept-slab-a);
  background: var(--il-color-accent);
}
.il-dept__name::after {
  right: 0;
  left: calc(var(--il-structure-dept-slab-a) + 4px);
  background: var(--il-color-ink);
}

/* =========================================================================
   БЛОК 14 — КОНСУЛЬТАЦИЯ (.il-consultation) — тёмная секция, срочный
   приоритет Босса. Фон: inward-cta-bg.jpg, cover/50% 50%, attachment fixed,
   затемнение --il-consultation-overlay (.70). Кнопка уже одета (Блок 4, узел 4).
   ========================================================================= */
.il-consultation {
  position: relative;
  overflow: hidden;
  color: var(--il-color-on-dark-ink);
}
.il-consultation__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../images/inward-cta-bg.jpg');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.il-consultation__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--il-consultation-overlay);
}
.il-consultation > .container {
  position: relative;
  z-index: 1;
}
@media (max-width: 991.98px) {
  .il-consultation__bg {
    background-attachment: scroll;
  }
}
.il-consultation__title,
.il-consultation__lead {
  color: var(--il-color-on-dark-ink);
}

/* =========================================================================
   БЛОК 15 — WORKSPACE (дашборд «Кабинет клиента», .il-workspace)
   Источник: reference/source/inward-styles-extracted.css:595-728 (финальный
   каскад exec-блока — новая разметка account/ava/acc-txt/out, НЕ старая
   manager/person/avatar). 32 класса разметки, было 0 правил. Приказ Босса:
   выглядит и работает как настоящая панель на любом экране.
   ========================================================================= */
.il-workspace {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  width: 560px;         /* замер лид 07:52: было 588 (натуральная ширина колонки) */
  max-width: 100%;
  min-height: 620px;
  margin-top: calc(var(--il-ws-vylet) * -1);    /* замер лид 07:52: панель выше верха тёмной полосы на величину выступа */
  overflow: hidden;
  color: var(--il-ws-ink);
  background: var(--il-ws-panel-bg);
  border: 1px solid var(--il-ws-border);
  border-top: 5px solid var(--il-ws-blue);
  box-shadow: var(--il-ws-shadow);
}
@media (max-width: 991.98px) {
  .il-workspace {
    width: 100%;
    margin-top: 0; /* п.7 лид 07:52: <992 панель не выступает за полосу */
  }
}
@media (max-width: 900px) {
  .il-workspace {
    grid-template-columns: 92px minmax(0, 1fr);
  }
}
/* ТЗ Босса 02.09: на телефонах панель НЕ перестраивается в мобильное приложение —
   сохраняет вид ПК/планшета (боковая колонка + содержимое), просто уменьшается,
   уходит ПОД кнопку и частью выступает за нижнюю кромку тёмной секции как декор. */

/* --- сайдбар --- */
.il-workspace__sidebar {
  display: flex;
  flex-direction: column;
  padding: 22px 14px;
  color: var(--il-ws-sidebar-ink);
  background: var(--il-ws-sidebar-bg);
  border-right: 1px solid var(--il-ws-sidebar-border);
}
.il-workspace__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 32px;
  color: var(--il-ws-brand-ink);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  white-space: nowrap;
}
.il-workspace__mark {
  width: 17px;
  height: 19px;
  object-fit: contain;
  flex: 0 0 auto;
}
.il-workspace__nav-label {
  margin: 0 0 10px 9px;
  color: var(--il-ws-nav-label-ink);
  font-family: var(--il-font-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.il-workspace__nav {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.il-workspace__nav li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px;
  color: var(--il-ws-nav-ink);
  font-size: 12px;
  font-weight: 620;
  border: 1px solid transparent;
  line-height: 1.2;
}
.il-workspace__nav li svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  opacity: .85;
}
.il-workspace__nav-txt {
  min-width: 0; /* ПРАВКА лид 07:43: «Согласования» обрезался — flex-ребёнок без min-width:0 не переносится, держит натуральную ширину строки */
  flex: 1 1 auto;
  overflow-wrap: break-word;
}
.il-workspace__nav li.is-current {
  color: #fff;
  background: var(--il-ws-nav-current-bg);
  border-color: var(--il-ws-nav-current-border);
}
.il-workspace__nav li.is-current svg {
  opacity: 1;
  color: var(--il-ws-blue);
}
.il-workspace__manager {
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid var(--il-ws-account-border);
}
.il-workspace__account {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 7px;
  color: var(--il-ws-sidebar-ink);
  text-decoration: none;
  border: 1px solid var(--il-ws-account-border);
}
.il-workspace__account:hover,
.il-workspace__account:focus {
  color: #fff;
  background: var(--il-ws-account-hover-bg);
  border-color: var(--il-ws-account-hover-border);
  text-decoration: none;
}
.il-workspace__ava {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
  background: var(--il-ws-blue);
}
.il-workspace__ava svg {
  width: 13px;
  height: 13px;
}
.il-workspace__acc-txt {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 10px;
  line-height: 1.25;
}
.il-workspace__out {
  flex: 0 0 auto;
  color: var(--il-ws-account-out-ink);
}
.il-workspace__out svg {
  width: 13px;
  height: 13px;
  display: block;
}
.il-workspace__account:hover .il-workspace__out {
  color: #fff;
}

/* --- главная панель --- */
.il-workspace__main {
  min-width: 0;
  background: var(--il-ws-main-bg);
}
.il-workspace__topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 58px;
  padding: 0 20px;
  border-bottom: 1px solid var(--il-ws-topbar-border);
}
.il-workspace__crumb {
  color: var(--il-ws-crumb-ink);
  font-size: 11px;
  font-weight: 650;
}
.il-workspace__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--il-ws-status-ink);
  font-size: 10px;
  font-weight: 750;
}
.il-workspace__status::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--il-ws-status-dot);
  border-radius: 50%;
}
.il-workspace__content {
  padding: 22px 20px 24px;
}
.il-workspace__eyebrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}
.il-workspace__eyebrow span {
  color: var(--il-ws-crumb-ink);
  font-family: var(--il-font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
}
#il-workspace-title {
  margin: 0;
  color: var(--il-ws-h3-ink);
  font-size: 25px;
  line-height: 1.08;
  letter-spacing: -.04em;
}
.il-workspace__progress-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--il-space-gap-md);
  margin-top: 25px;
  color: var(--il-ws-meta-ink);
  font-size: 11px;
}
.il-workspace__progress {
  display: block;
  width: 100%;
  height: 5px;
  margin-top: 7px;
  overflow: hidden;
  appearance: none;
  border: 0;
  background: var(--il-ws-progress-bg);
}
.il-workspace__progress::-webkit-progress-bar {
  background: var(--il-ws-progress-bg);
}
.il-workspace__progress::-webkit-progress-value {
  background: var(--il-ws-blue);
}
.il-workspace__progress::-moz-progress-bar {
  background: var(--il-ws-blue);
}
.il-workspace__metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 22px;
  border: 1px solid var(--il-ws-metrics-border);
}
.il-workspace__metric {
  padding: 10px 8px;
  border-left: 1px solid var(--il-ws-metrics-border);
}
.il-workspace__metric:first-child {
  border-left: 0;
}
.il-workspace__metric strong,
.il-workspace__metric span {
  display: block;
}
.il-workspace__metric strong {
  font-size: 17px;
  line-height: 1;
  color: var(--il-ws-h3-ink);
}
.il-workspace__metric span {
  margin-top: 5px;
  color: var(--il-ws-metric-span-ink);
  font-size: 9px;
}
.il-workspace__metric--hi {
  background: var(--il-ws-metric-hi-bg);
}
.il-workspace__metric--hi strong {
  color: var(--il-ws-blue);
}
.il-workspace__metric:hover {
  background: #f0f0ec;
}
.il-workspace__chart-wrap {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--il-ws-chart-border);
}
.il-workspace__chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.il-workspace__chart-head strong {
  font-size: 11px;
  color: var(--il-ws-h3-ink);
}
.il-workspace__chart-head span {
  color: var(--il-ws-chart-head-ink);
  font-size: 9px;
}
.il-workspace__chart {
  display: block;
  width: 100%;
  height: var(--il-ws-chart-h);
}
.il-workspace__line {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: il-ws-draw var(--il-ws-anim) ease-out forwards;
}
@keyframes il-ws-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .il-workspace__line {
    animation: none;
    stroke-dashoffset: 0;
  }
}
.il-workspace__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--il-ws-axis-ink);
  font-family: var(--il-font-mono);
  font-size: 8px;
  line-height: 1;
  letter-spacing: .06em;
}
.il-workspace__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 8px;
}
.il-workspace__section-head strong {
  font-size: 12px;
  color: var(--il-ws-h3-ink);
}
.il-workspace__section-head span {
  color: var(--il-ws-chart-head-ink);
  font-size: 10px;
}
.il-workspace__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: 1px solid var(--il-ws-table-border);
}
.il-workspace__table th,
.il-workspace__table td {
  padding: 8px 9px;
  text-align: left;
  border-bottom: 1px solid var(--il-ws-table-row-border);
}
.il-workspace__table tr:last-child td {
  border-bottom: 0;
}
.il-workspace__table th {
  color: var(--il-ws-table-th-ink);
  background: var(--il-ws-table-th-bg);
  font-family: var(--il-font-mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.il-workspace__table td {
  color: var(--il-ws-table-td-ink);
  font-size: 11px;
  line-height: 1.35;
}
.il-workspace__table th:first-child,
.il-workspace__table td:first-child {
  width: 50%;
}
.il-workspace__table th:nth-child(2),
.il-workspace__table td:nth-child(2) {
  width: 24%;
}
.il-workspace__table tbody tr:hover td {
  background: var(--il-ws-table-hover-bg);
}
.il-workspace__tag {
  display: inline-block;
  padding: 4px 5px;
  color: var(--il-ws-tag-ink);
  background: var(--il-ws-tag-bg);
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
}
.il-workspace__tag--blue {
  color: var(--il-ws-tag-blue-ink);
  background: var(--il-ws-tag-blue-bg);
}
.il-workspace__tag--green {
  color: var(--il-ws-tag-green-ink);
  background: var(--il-ws-tag-green-bg);
}

@media (max-width: 767.98px) {
  /* на тёмном стандартный отступ до предзаголовка */
  .il-cabinet .il-tags {
    margin-top: var(--il-space-section-y-md);
  }
  /* шапка внутри панели — в одну строку */
  .il-workspace__topbar,
  .il-workspace__eyebrow {
    white-space: nowrap;
  }
  .il-workspace__crumb,
  .il-workspace__eyebrow span {
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* панель уменьшена и укорочена: компактный брендовый блок на стыке секций */
  .il-workspace {
    width: 100%;
    transform: scale(var(--il-ws-scale-md));
    transform-origin: top center;
    min-height: 0;
    /* панель заканчивается на графике — он последний видимый блок */
    max-height: calc(var(--il-space-section-y-md) * 5 / var(--il-ws-scale-md));
    overflow: hidden;
    margin-top: calc(var(--il-space-section-y-md) * -2);
    margin-bottom: calc(var(--il-space-section-y-md) * 5 * (1 - 1 / var(--il-ws-scale-md)));
  }
  /* сайдбар: вертикальные отступы и весь ритм — родные, как в дизайне.
     Ужимается ТОЛЬКО горизонталь, чтобы слова перестали обрезаться.
     Ширина и размеры блоков НЕ тронуты. */
  .il-workspace__sidebar {
    padding-right: 0;
    padding-left: var(--il-ws-pad-md);
  }
  .il-workspace__brand {
    gap: var(--il-ws-pad-md);
  }
  .il-workspace__nav-label {
    margin-left: 0;
  }
  .il-workspace__nav li {
    gap: var(--il-ws-pad-md);
    padding-right: 0;
    padding-left: var(--il-ws-pad-md);
  }
  /* кнопка «Аккаунт» на телефонах убрана — она растягивала сайдбар */
  .il-workspace__manager {
    display: none;
  }
  /* шрифты внутри панели — самый мелкий существующий кегль, чтобы обе колонки влезли */
  .il-workspace__crumb,
  .il-workspace__status,
  .il-workspace__nav,
  .il-workspace__nav li,
  .il-workspace__brand,
  .il-workspace__nav-label,
  .il-workspace__eyebrow,
  .il-workspace__progress-meta,
  .il-workspace__content {
    font-size: var(--il-font-eyebrow);
  }
  /* ТЗ Босса 02.09: заголовок панели на телефонах — 16px */
  #il-workspace-title {
    font-size: var(--il-font-body);   /* 16px */
    text-transform: uppercase;
    white-space: nowrap;
  }
}

/* --- Круговая схема департаментов (.il-orbit) — ТЗ Босса 03.09 --- */
.il-orbit {
  position: relative;
  width: min(100%, var(--il-orbit-size));
  aspect-ratio: 1;
  margin: var(--il-space-section-y) auto;
  border: var(--il-orbit-ring-h) solid var(--il-color-divider);
  border-radius: 50%;
}
.il-orbit__core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--il-orbit-core-dolya);
  height: var(--il-orbit-core-dolya);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--il-space-gap-md);
  padding: var(--il-space-gap-md);
  text-align: center;
  color: var(--il-color-on-dark-ink);
  background: var(--il-slab-color-cap);
  border-radius: 50%;
}
.il-orbit__title {
  color: var(--il-color-on-dark-ink);
  font-family: var(--il-font-semeystvo);
  font-size: var(--il-font-h3);
  font-weight: var(--il-font-h3-ves);
  line-height: var(--il-font-h3-lh);
  letter-spacing: var(--il-font-ls);
  text-transform: uppercase;
}
.il-orbit__text {
  margin: 0;
  color: var(--il-color-on-dark-ink);
  font-size: var(--il-font-kicker);
  line-height: var(--il-font-kicker-lh);
}
.il-orbit__ring {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.il-orbit__item {
  position: absolute;
  inset: 0;
}
.il-orbit__ic {
  position: absolute;
  transform: translate(-50%, -50%);
}
.il-orbit__label {
  position: absolute;
  display: flex;
  flex-direction: column;
  white-space: nowrap;   /* название отдела — одной строкой */
}
/* ТЗ Босса 03.09: иконки стоят на самой окружности, по диагоналям */
.il-orbit__item--1 .il-orbit__ic,
.il-orbit__item--4 .il-orbit__ic {
  left: var(--il-orbit-diag);
}
.il-orbit__item--2 .il-orbit__ic,
.il-orbit__item--3 .il-orbit__ic {
  left: calc(100% - var(--il-orbit-diag));
}
.il-orbit__item--1 .il-orbit__ic,
.il-orbit__item--2 .il-orbit__ic {
  top: var(--il-orbit-diag);
}
.il-orbit__item--3 .il-orbit__ic,
.il-orbit__item--4 .il-orbit__ic {
  top: calc(100% - var(--il-orbit-diag));
}
/* блок заголовка — ОТДЕЛЬНЫЙ: верхние стоят ВЫШЕ круга, нижние НИЖЕ, окружности не касаются */
.il-orbit__item--1 .il-orbit__label,
.il-orbit__item--2 .il-orbit__label {
  bottom: calc(100% + var(--il-space-gap));
}
.il-orbit__item--3 .il-orbit__label,
.il-orbit__item--4 .il-orbit__label {
  top: calc(100% + var(--il-space-gap));
}
.il-orbit__item--1 .il-orbit__label,
.il-orbit__item--4 .il-orbit__label {
  left: 0;
}
.il-orbit__item--2 .il-orbit__label,
.il-orbit__item--3 .il-orbit__label {
  right: 0;
  align-items: flex-end;
  text-align: right;
}
.il-orbit__ic {
  display: grid;
  place-items: center;
  width: var(--il-orbit-ic);
  height: var(--il-orbit-ic);
  color: var(--il-color-ink);
  background: var(--il-color-bg);
  border: var(--il-orbit-ring-h) solid var(--il-color-divider);
  border-radius: 50%;
}
.il-orbit__svg {
  width: var(--il-ico-size);
  height: var(--il-ico-size);
}
@media (max-width: 991.98px) {
  /* тот же вид, что на ПК: заголовки над и под кругом, просто мельче — чтобы
     две подписи в ряд гарантированно влезали в ширину экрана */
  .il-orbit {
    /* уменьшение схемы — только для ПК: планшеты и телефоны держат базовый размер,
       на них круг и так ограничен шириной контейнера (min(100%, …)) */
    --il-orbit-size: var(--il-orbit-size-base);
    /* сверху и снизу — отбивка секции плюс место под вынесенные заголовки */
    margin: calc(var(--il-space-section-y-md) + var(--il-space-gap)) auto;
  }
  .il-orbit .il-dept__name {
    font-size: var(--il-font-kicker);
    line-height: var(--il-font-kicker-lh);
  }
  .il-orbit__ic {
    width: var(--il-ico-size);
    height: var(--il-ico-size);
  }
  .il-orbit__svg {
    width: var(--il-font-eyebrow);
    height: var(--il-font-eyebrow);
  }
}

/* =========================================================================
   БЛОК 16 — FAQ (.il-faq, аккордеон) + ПОДВАЛ (.il-footer)
   builder-1 07:58: снял accordion-*/accordion-item/-button/-body/-collapse с
   разметки (P10 чист), оставил только data-bs-toggle/target/parent + .collapse
   для поведения JS. Селекторы ниже без accordion-* сегмента — только свои il-.
   ========================================================================= */
.il-faq__title {
  margin-bottom: var(--il-method-title-mb);
}
/* ТЗ Босса 03.09: заголовок вопросов стоит вровень с заголовком цены —
   тот же верхний отступ, что внутри карточки цены */
.il-faq__title {
  margin-top: var(--il-price-card-pad-top);
}
.il-faq__item {
  background: none;
  border: 0;
  border-top: 1px solid var(--il-color-divider);
  border-radius: 0;
}
.il-faq__item:last-child {
  border-bottom: 1px solid var(--il-color-divider);
}
.il-faq__head {
  margin: 0;
}
.il-faq__btn {
  display: flex;
  align-items: center;
  gap: var(--il-method-cards-gap);
  width: 100%;
  /* тот же вертикальный шаг, что у строки перечня в карточке цены — единый вид */
  padding: var(--il-price-card-item-pad-v) 0;
  background: none;
  color: var(--il-color-ink);
  font-family: var(--il-font-semeystvo);
  font-size: var(--il-font-body);
  font-weight: var(--il-font-body-ves);
  text-align: left;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.il-faq__btn:focus {
  box-shadow: none;
}
.il-faq__btn::after {
  content: "+";
  order: 2;
  margin-left: auto;
  width: auto;
  height: auto;
  background-image: none;
  color: var(--il-color-accent);
  font-size: 20px;
  line-height: 1;
  transform: none;
  transition: transform .25s ease;
}
.il-faq__btn:not(.collapsed)::after {
  content: "\2212"; /* минус, тот же приём +/- вместо шеврона */
}
.il-faq__ic {
  order: 0;
  flex: 0 0 auto;
  width: var(--il-ico-size);
  height: var(--il-ico-size);
  color: var(--il-color-accent);
}
.il-faq__q {
  order: 1;
  flex: 1 1 auto;
}
.il-faq__body {
  padding: 0 0 var(--il-method-eyebrow-mb);
  color: var(--il-color-ink);
}

/* --- подвал --- */
/* фон тёмный: вывод из имени ассета (inward-logo-on-dark.svg — "on-dark"
   вариант ставится только на тёмный фон, тот же принцип уже подтверждён
   на hero-wordmark/advantages-wordmark в этой же сборке), прямого замера
   подвала не было — если Босс увидит светлый подвал в прототипе, откатить. */
.il-footer {
  padding: var(--il-space-gap) 0;
  background: var(--il-color-ink);
  text-align: center;
}
.il-footer__logo {
  display: inline-block;
  margin-bottom: var(--il-space-gap-md);
}
/* размер логотипа подвала — тот же токен, что у логотипа шапки (в разметке размеров нет) */
.il-footer__logo img {
  width: var(--il-nav-logo-w);
  height: auto;
}
.il-footer__copy {
  margin: 0;
  color: var(--il-color-on-dark-ink);
  font-size: var(--il-font-kicker);
}
/* ТЗ Босса 02.09: контакты и соцсети в подвале. Иконки — Bootstrap Icons, инлайном,
   цвет наследуется от текста (currentColor), поэтому тёмный фон подвала обслуживается
   тем же токеном, что и остальной текст на тёмном. Размеры и отступы — существующие токены. */
.il-footer__ico {
  width: var(--il-ico-size);
  height: var(--il-ico-size);
  flex: none;
}
.il-footer__contacts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--il-space-gap-md);
  margin: 0 0 var(--il-space-gap-md);
  padding: 0;
  list-style: none;
}
.il-footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--il-space-gap-md);
  color: var(--il-color-on-dark-ink);
  font-size: var(--il-font-body);
  text-decoration: none;
}
.il-footer__link:hover,
.il-footer__link:focus {
  color: var(--il-color-accent);
}
.il-footer__socials {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--il-space-gap-md);
  margin-bottom: var(--il-space-gap-md);
}
.il-footer__soc {
  display: inline-flex;
  color: var(--il-color-on-dark-ink);
}
.il-footer__soc:hover,
.il-footer__soc:focus {
  color: var(--il-color-accent);
}

/* =========================================================================
   БЛОК 17 — ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ (js-reveal) + ПАРАЛЛАКС (js-parallax)
   Найдено критиком: inward.js честно ставит is-visible/--il-parallax-shift,
   но в CSS не было ни одного правила-потребителя — эффекты объявлены и
   ничего не делают (безопасный no-op, не ломает видимость контента, но
   заявленной техники прокрутки на странице физически нет). Упрощённая,
   но настоящая версия четырёх типов, а не точная копия чужого JS-плагина
   (Splitting.js для charsAnimInLong в бандл не входит).
   ========================================================================= */
.js-reveal {
  opacity: 0;
  transition: opacity .6s ease, transform .6s ease;
}
.js-reveal.is-visible {
  opacity: 1;
}
/* ПРАВКА tester/lead 08:12: .is-visible и [data-reveal="..."] весили одинаково
   (0,2,0), а ниже по файлу побеждали типы — элемент проявлялся, но НАВСЕГДА
   оставался смещён (10 узлов на 24px, 1 на 12px, между соседями появлялся
   лишний зазор). Поднимаю вес компаунд-селектором (0,3,0) — конечное
   transform:none выигрывает у любого типа независимо от порядка в файле. */
.js-reveal.is-visible[data-reveal] {
  transform: none;
}
.js-reveal[data-reveal="fadeInUp"],
.js-reveal[data-reveal="charsAnimInLong"] {
  transform: translateY(24px);
}
.js-reveal[data-reveal="fadeInUpShort"] {
  transform: translateY(12px);
}
.js-reveal[data-reveal="fadeInDown"] {
  transform: translateY(-24px);
}
@media (prefers-reduced-motion: reduce) {
  .js-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


/* ТЗ Босса 02.09: на телефонах (ниже md) услуги идут в один ряд — граница Bootstrap, своих чисел нет */
@media (max-width: 767.98px) {
  .il-services__list {
    grid-template-columns: minmax(0, 1fr);
  }
  /* ТЗ Босса 03.09: в один столбец левой колонки нет — подчёркивание у всех
     блоков одинаковое, синяя часть слева, тёмная справа (зеркальность снята). */
  .il-services__list--left .il-service__name::before {
    width: var(--il-slab-dolya);
    background: var(--il-color-accent);
  }
  .il-services__list--left .il-service__name::after {
    left: calc(var(--il-slab-dolya) + var(--il-slab-gap));
    background: var(--il-slab-ink);
  }
  /* текст стоит вплотную к своему заголовку — блок читается как одно целое */
  .il-service__meta {
    margin-bottom: 0;
  }
}


/* =========================================================================
   БЛОК 9 — ФОРМА ЗАЯВКИ В ПОПАПЕ (ТЗ Босса 03.09)
   Окно собрано на штатной модалке Bootstrap 5; здесь только фирменный вид.
   Кнопка отправки НЕ получает своих цветов — она носит существующий узел
   .il-btn--outline-dark (Блок 6), меняется только ширина.
   Числа — токенами, как и во всём файле; ни одного значения внутри правил.
   ========================================================================= */

:root {
  --il-form-win-w: 460px;          /* ширина окна формы */
  --il-form-win-pad: 26px;         /* внутренние поля окна */
  --il-form-logo-w: 148px;         /* ширина логотипа в окне */
  --il-form-logo-mb: 16px;         /* логотип → заголовок */
  --il-form-title-fs: 22px;        /* заголовок окна */
  --il-form-title-mb: 18px;        /* заголовок → первое поле */
  --il-form-field-pad-v: 11px;     /* высота поля задаётся вертикальным padding */
  --il-form-field-fs: 14px;        /* кегль введённого текста */
  --il-form-line: 1px;             /* линия поля в покое */
  --il-form-line-focus: 2px;       /* линия поля в фокусе */
  --il-form-field-mb: 10px;        /* шаг между полями */
  --il-form-msg-h: 56px;           /* высота поля сообщения */
  --il-form-submit-mt: 16px;       /* поля → кнопка */
  --il-form-response-mt: 12px;     /* кнопка → сообщение об отправке */
  --il-form-note-fs: 10px;         /* микроподпись под кнопкой и плейсхолдеры */
  --il-form-note-ls: .12em;        /* разрядка микроподписи */
  --il-form-note-mt: 12px;
  --il-form-close-size: 16px;      /* крестик закрытия */
  --il-form-blur: 6px;             /* сила размытия подложки: фон читается, но уходит на второй план */
  --il-form-blur-sat: 106%;        /* лёгкий подъём насыщенности под стеклом */
  --il-form-muted-alpha: .55;      /* приглушённый текст = основное чернило с прозрачностью */
}

/* --- подложка: только размытие, без затемнения --- */
.il-form-modal {
  backdrop-filter: blur(var(--il-form-blur)) saturate(var(--il-form-blur-sat));
  -webkit-backdrop-filter: blur(var(--il-form-blur)) saturate(var(--il-form-blur-sat));
}
.modal-backdrop.show {
  opacity: 0; /* слой остаётся кликабельным (закрытие по клику вне окна), но не темнит */
}

/* --- окно --- */
.il-form-modal .modal-dialog {
  max-width: var(--il-form-win-w);
}
.il-form-modal .modal-content {
  background-color: var(--il-color-bg);
  border: var(--il-edge-cena-side-h) solid var(--il-color-divider);
  border-bottom: var(--il-edge-cena-h) solid var(--il-color-accent);
  border-radius: 0;
  padding: var(--il-form-win-pad);
  text-align: center;
}

.il-form__close {
  position: absolute;
  top: var(--il-form-win-pad);
  right: var(--il-form-win-pad);
  width: var(--il-form-close-size);
  height: var(--il-form-close-size);
  padding: 0;
  border: none;
  background: none;
  color: var(--il-color-ink);
  cursor: pointer;
  transition: var(--il-btn-transition);
}
.il-form__close:hover,
.il-form__close:focus {
  color: var(--il-color-accent);
}
.il-form__close svg {
  display: block;
  width: 100%;
  height: 100%;
}

.il-form__logo {
  display: block;
  width: var(--il-form-logo-w);
  height: auto;
  margin: 0 auto var(--il-form-logo-mb);
}

.il-form__title {
  font-family: var(--il-font-semeystvo);
  font-size: var(--il-form-title-fs);
  line-height: var(--il-font-h2-lh);
  font-weight: var(--il-font-h2-ves);
  text-transform: uppercase;
  margin: 0 auto var(--il-form-title-mb);
}

/* --- поля --- */
.il-form__field {
  margin-bottom: var(--il-form-field-mb);
}
.il-form__input {
  width: 100%;
  font-family: var(--il-font-semeystvo);
  font-size: var(--il-form-field-fs);
  line-height: var(--il-font-body-lh);
  color: var(--il-color-ink);
  text-align: left;
  background: none;
  border: none;
  border-radius: 0;
  border-bottom: var(--il-form-line) solid var(--il-color-divider);
  padding: var(--il-form-field-pad-v) 0;
  outline: none;
  transition: border-color .25s ease, border-width .25s ease;
}
.il-form__input::placeholder {
  font-family: var(--il-font-mono);
  font-size: var(--il-form-note-fs);
  text-transform: uppercase;
  letter-spacing: var(--il-form-note-ls);
  color: var(--il-color-ink);
  opacity: var(--il-form-muted-alpha);
}
.il-form__input:hover {
  border-bottom-color: var(--il-color-ink);
}
.il-form__input:focus {
  border-bottom-color: var(--il-color-accent);
  border-bottom-width: var(--il-form-line-focus);
  padding-bottom: calc(var(--il-form-field-pad-v) - (var(--il-form-line-focus) - var(--il-form-line)));
}
textarea.il-form__input {
  height: var(--il-form-msg-h);
  resize: none;
}

/* --- кнопка: цвета берёт у .il-btn--outline-dark, здесь только ширина и шаг --- */
.il-form__submit {
  display: block;
  width: 100%;
  margin-top: var(--il-form-submit-mt);
}

.il-form__note {
  font-family: var(--il-font-mono);
  font-size: var(--il-form-note-fs);
  text-transform: uppercase;
  letter-spacing: var(--il-form-note-ls);
  color: var(--il-color-ink);
  opacity: var(--il-form-muted-alpha);
  margin: var(--il-form-note-mt) 0 0;
}

/* Contact Form 7 оборачивает строки шаблона в <p> — свой вертикальный шаг у них
   не нужен, ритм окна задают токены выше. */
.il-form .wpcf7-form > p {
  margin: 0;
}
.il-form .wpcf7-response-output {
  margin: var(--il-form-response-mt) 0 0;
}

/* сообщения Contact Form 7 — тем же шрифтом, без своих цветов и рамок */
.il-form .wpcf7-response-output,
.il-form .wpcf7-not-valid-tip {
  font-family: var(--il-font-semeystvo);
  font-size: var(--il-form-note-fs);
  text-align: left;
}

@media (max-width: 575.98px) {
  .il-form-modal .modal-content {
    padding: var(--il-space-container-pad);
  }
}


/* =========================================================================
   БЛОК 10 — МЕССЕНДЖЕР В КОНТАКТНОЙ СТРОКЕ (ТЗ Босса 04.09)
   Иконка Telegram стоит перед телефоном: в подвале и в мобильном меню.
   Размер и цвет берёт у соседней иконки телефона, своих чисел нет.
   ========================================================================= */
.il-footer__link--tg svg {
  width: var(--il-ico-size);
  height: var(--il-ico-size);
  flex: none;
}
.il-nav__panel-tel--tg svg {
  width: var(--il-ico-size);
  height: var(--il-ico-size);
  flex: none;
  color: var(--il-color-accent);
}

/* =========================================================================
   БЛОК 11 — ЦИФРЫ В ЦЕНЕ (ТЗ Босса 04.09)
   У Jura ноль нарисован с точкой внутри — в крупной цене это читается как
   помеха. Подключаем близкий по духу технический шрифт ТОЛЬКО на цифры
   (unicode-range 0-9): буквы по-прежнему рисует Jura, меняются лишь цифры.
   ========================================================================= */
@font-face {
  font-family: 'IL Digits';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/exo2-digits-v2.woff2') format('woff2');
  unicode-range: U+0030-0039;
}
.il-price-card__sum {
  font-family: 'IL Digits', var(--il-font-semeystvo);
}

/* =========================================================================
   БЛОК 12 — ЦЕНА В ОДНУ СТРОКУ (аудит 04.09, п.2)
   «від $2 000 / місяць» ломалось на две-три строки: сумма содержит пробел
   как разделитель разрядов, и flex-строка рвала её по этому пробелу.
   Запрещаем перенос внутри суммы и чуть уменьшаем кегль, чтобы строка
   помещалась рядом с кнопкой. Раскладка блока не меняется.
   ========================================================================= */
:root {
  --il-price-sum-fs: 38px;
  --il-price-sum-fs-sm: 32px;
}
.il-price-card__amount {
  white-space: nowrap;
}
.il-price-card__sum {
  font-size: var(--il-price-sum-fs);
}
@media (max-width: 575.98px) {
  .il-price-card__sum {
    font-size: var(--il-price-sum-fs-sm);
  }
}
/* =========================================================================
   БЛОК 13 — ПЕРВЫЙ ЭКРАН ВНУТРЕННЕЙ СТРАНИЦЫ (кандидат в inward.css)

   Единственный новый компонент внутренних страниц. Все значения — токены
   темы из Блока 2; собственных чисел только четыре, и все они вынесены
   в :root ниже, как и принято в этом файле.

   Заголовок первого экрана несёт брендовую утилиту .il-slab, поэтому здесь
   НЕ задаются ни padding-bottom, ни margin-bottom: зазор между текстом и
   полосой (--il-slab-padding-b) и шаг под заголовком (--il-space-gap-md)
   приходят из .il-slab — ровно те же, что у заголовков главной.
   ========================================================================= */
:root {
  /* Контент сидит в нижней части экрана, как в hero главной: сверху воздуха
     больше, снизу — ровный отступ, не впритык к краю секции. */
  --il-page-hero-pad-top: 260px;
  --il-page-hero-pad-bottom: 90px;
  --il-page-hero-pad-top-md: 150px;
  --il-page-hero-pad-bottom-md: 60px;

  --il-page-hero-title-fs: 42px;      /* замер референса */
  --il-page-hero-title-fs-md: 30px;
  --il-page-hero-crumb-sep: 10px;     /* зазор между звеньями хлебных крошек */

  /* Крошки на мобильном идут одной строкой с горизонтальной прокруткой.
     Системный скроллбар на телефоне прячется, поэтому индикатор свой:
     тонкая дорожка и ползунок в брендовом синем, оба с квадратными углами
     и ровно по ширине контейнера. */
  --il-page-hero-crumb-bar: 2px;      /* толщина индикатора прокрутки */
  --il-page-hero-crumb-bar-gap: 12px; /* зазор между строкой крошек и индикатором */
  --il-page-hero-crumb-bar-track: var(--il-color-divider);
  --il-page-hero-crumb-bar-thumb: var(--il-color-accent);
}

.il-page-hero {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background: var(--il-hero-bg-fallback);
  /* шапка прозрачная и вынута из потока — компенсируем её высоту, как в .il-hero */
  padding: calc(var(--il-page-hero-pad-top) + var(--il-nav-h)) 0 var(--il-page-hero-pad-bottom);
  margin: calc(var(--il-nav-h) * -1) 0 0;
}
.il-page-hero__bg {
  position: absolute;
  inset: 0;
  background-color: var(--il-hero-bg-fill);
  /* См. пояснение у .il-hero__bg: тот же снимок, лёгкий формат вперёд. */
  background-image: url('../images/pawel-czerwinski-T5VUBvCYqKk-unsplash.jpg');
  background-image: -webkit-image-set(url('../images/pawel-czerwinski-T5VUBvCYqKk-unsplash.webp') type('image/webp'), url('../images/pawel-czerwinski-T5VUBvCYqKk-unsplash.jpg') type('image/jpeg'));
  background-image: image-set(url('../images/pawel-czerwinski-T5VUBvCYqKk-unsplash.webp') type('image/webp'), url('../images/pawel-czerwinski-T5VUBvCYqKk-unsplash.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.il-page-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(242, 242, 242, .8); /* та же вуаль, что у .il-hero__bg::after */
}
.il-page-hero__inner {
  position: relative;
  z-index: 2;
}
.il-page-hero__title {
  font-family: var(--il-font-semeystvo);
  font-size: var(--il-page-hero-title-fs);
  font-weight: var(--il-font-h2-ves);
  line-height: var(--il-font-h2-lh);
  letter-spacing: var(--il-font-ls);
  text-transform: uppercase;
  color: var(--il-color-ink);
}
.il-page-hero__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--il-page-hero-crumb-sep);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--il-font-semeystvo);
  font-size: var(--il-font-kicker);
  font-weight: var(--il-font-kicker-ves);
  line-height: var(--il-font-kicker-lh);
  letter-spacing: var(--il-font-ls);
  color: var(--il-color-ink);
}
.il-page-hero__crumbs li {
  display: flex;
  align-items: center;
  gap: var(--il-page-hero-crumb-sep);
}
.il-page-hero__crumbs li + li::before {
  content: "\2022";
  color: var(--il-color-accent);
}
.il-page-hero__crumbs a {
  color: inherit;
  text-decoration: none;
}
.il-page-hero__crumbs a:hover {
  color: var(--il-color-accent);
}
/* Индикатор прокрутки крошек: по умолчанию его нет — ни на ПК, ни на мобильном
   там, где строка помещается целиком. Показ включает медиазапрос ниже вместе
   с классом .is-scrollable, который ставит скрипт. */
.il-page-hero__crumbs-bar {
  display: none;
}
@media (max-width: 991.98px) {
  .il-page-hero {
    padding: calc(var(--il-page-hero-pad-top-md) + var(--il-nav-h)) 0 var(--il-page-hero-pad-bottom-md);
  }
  .il-page-hero__title {
    font-size: var(--il-page-hero-title-fs-md);
  }
  /* Одна строка вместо переноса: длинные крошки уезжают вбок, а не вниз.
     Область прокрутки совпадает с содержимым .container, поэтому крошки
     остаются в тех же полях, что и заголовок. Системный скроллбар скрыт —
     ход показывает собственный индикатор .il-page-hero__crumbs-bar. */
  .il-page-hero__crumbs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .il-page-hero__crumbs > li {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .il-page-hero__crumbs::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .il-page-hero__crumbs.is-scrollable + .il-page-hero__crumbs-bar {
    display: block;
    position: relative;
    overflow: hidden;
    height: var(--il-page-hero-crumb-bar);
    margin-top: var(--il-page-hero-crumb-bar-gap);
    background: var(--il-page-hero-crumb-bar-track);
  }
  .il-page-hero__crumbs-thumb {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: var(--il-page-hero-crumb-bar-thumb);
  }
}

/* =========================================================================
   БЛОК 14 — ЯЗЫКИ В ВЫЕЗЖАЮЩЕМ МЕНЮ (ТЗ Босса 04.09)
   Вид один в один с шапкой на ПК: та же утилита .il-nav__langs, поэтому
   разделитель и зазор берутся оттуда. Здесь только положение внутри панели:
   строка идёт под пунктами меню, после неё — отбивка до контактов.
   ========================================================================= */
:root {
  --il-nav-panel-langs-gap: var(--il-space-gap-md); /* отбивка после строки языков */
}
.il-nav__panel-langs {
  margin: var(--il-nav-panel-gap) 0 var(--il-nav-panel-langs-gap);
  font-size: var(--il-font-h3);
}

/* =========================================================================
   БЛОК 15 — КОНТАКТЫ В ВЫЕЗЖАЮЩЕМ МЕНЮ И ЦВЕТ TELEGRAM (ТЗ Босса 04.09)
   1. Иконка Telegram и телефон стоят одной строкой — так же, как в подвале.
   2. Иконка Telegram узнаётся по фирменному цвету мессенджера (--il-soc-telegram),
      и в подвале, и в меню. Токен уже был в Блоке 2, здесь только применение.
   3. Ряд соцсетей внизу временно скрыт: ссылок на остальные сети пока нет.
      Разметка остаётся на месте — включается снятием одного правила.
   ========================================================================= */
.il-nav__panel-contacts {
  display: flex;
  align-items: center;
  gap: var(--il-nav-panel-gap);
}
/* специфичность: цвет иконок в панели задан правилом `.il-nav__panel-tel
   .il-footer__ico` (два класса), поэтому здесь тоже два класса — иначе не
   перебивает, проверено на живой странице */
.il-nav__panel-tel--tg .il-footer__ico,
.il-nav__panel-tel--tg svg,
.il-footer__link--tg .il-footer__ico,
.il-footer__link--tg svg {
  color: var(--il-soc-telegram);
}
/* =========================================================================
   БЛОК 16 — ВРЕМЕННЫЙ ВЫКЛЮЧАТЕЛЬ РЯДА СОЦСЕТЕЙ (ТЗ Босса 04.09)

   ЗАЧЕМ ЭТО ЗДЕСЬ
   Один и тот же ряд иконок соцсетей стоит в трёх местах сайта:
     1) подвал                — template-parts/_footer-body.php
     2) выезжающее меню       — template-parts/_header-nav.php
     3) страница «Контакты»   — template-parts/section-contacts-intro.php
   Ссылок на все сети, кроме Telegram, пока нет, поэтому ряд временно скрыт
   в пунктах 2 и 3. В подвале ряд оставлен: там сейчас работает Telegram.

   КАК ОТКРЫТЬ ИКОНКИ, КОГДА ССЫЛКИ ПОЯВЯТСЯ
     Шаг 1. Удалить правило ниже целиком (четыре строки от селекторов до
            закрывающей скобки). Иконки сразу появятся и в выезжающем меню,
            и на странице «Контакты».
     Шаг 2. В админке «Настройки Inward Labs» → блок соцсетей: заполнить
            ссылки и включить галочку показа у нужных сетей. Набор иконок и
            их видимость задаются ТОЛЬКО там, в разметке ничего не правится.

   ЕСЛИ НУЖНО ОТКРЫТЬ ТОЛЬКО В ОДНОМ МЕСТЕ — удалить одну строку селектора:
     .il-nav__panel .il-footer__socials  — открывает в выезжающем меню
     .il-contacts__socials               — открывает на странице «Контакты»

   ВАЖНО: разметку не удалять. Иконки выводятся из настроек темы, поэтому
   после снятия правила порядок и состав ряда везде одинаковый.
   ========================================================================= */
.il-nav__panel .il-footer__socials,
.il-contacts__socials {
  display: none;
}

/* =========================================================================
   БЛОК 18 — НОУТБУК НА СТРАНИЦАХ УСЛУГ (ТЗ Босса 04.09)
   Тот же макет устройства, что на главной, в другой форме: на главной телефон,
   на страницах услуг — ноутбук. Экран, фон, логотип и подпись не меняются,
   меняются только пропорции корпуса и содержимое экрана (показатели и график
   рисуются теми же классами, что дашборд в секции «Кабинет»).
   Модификатор ставится из поля страницы, разметка одна и та же.
   ========================================================================= */
:root {
  --il-laptop-w: 620px;            /* ширина корпуса на ПК */
  --il-laptop-radius: 14px;        /* скругление корпуса */
  --il-laptop-screen-radius: 6px;
  --il-laptop-base-h: 14px;        /* высота основания */
  --il-laptop-base-w: 118%;        /* основание шире экрана */
  --il-laptop-foot-h: 5px;         /* выступ-подставка под основанием */
  --il-laptop-cam: 5px;            /* глазок камеры */
}
/* Ноутбук шире телефона, поэтому центральная колонка секции под него
   расширяется: боковые списки услуг сужаются, сетка та же.
   Только на ПК: ниже 992 действует общая одноколоночная сетка секции
   (правило объявлено позже медиазапроса и без этой рамки перебивало его). */
@media (min-width: 992px) {
  .il-services__system:has(.il-device--laptop) {
    grid-template-columns: minmax(220px, 1fr) var(--il-laptop-w) minmax(220px, 1fr);
  }
}
.il-device-wrap--laptop {
  width: 100%;
}
.il-device--laptop {
  width: min(100%, var(--il-laptop-w));
  aspect-ratio: 16 / 10;
  padding: 12px 12px 16px;
  border-radius: var(--il-laptop-radius);
  margin-bottom: calc(var(--il-laptop-base-h) + var(--il-laptop-foot-h));
}
/* вместо выреза телефона — глазок камеры */
.il-device--laptop::before {
  top: 5px;
  width: var(--il-laptop-cam);
  height: var(--il-laptop-cam);
  border-radius: 50%;
}
/* основание с подставкой */
.il-device--laptop::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: var(--il-laptop-base-w);
  height: var(--il-laptop-base-h);
  transform: translateX(-50%);
  border-radius: 0 0 var(--il-laptop-radius) var(--il-laptop-radius);
  background: var(--il-cap-device-body);
  box-shadow: 0 2px 0 #55554F inset, 0 18px 30px rgba(23, 22, 18, .18);
}
.il-device--laptop .il-device__screen {
  border-radius: var(--il-laptop-screen-radius);
}
.il-device--laptop .il-device__topbar {
  height: 34px;
  padding: 12px 16px 0;
}
/* Содержимое экрана — точная копия телефона: логотип по центру, под ним
   название продукта и подпись. Отличаются только размеры под широкий экран. */
.il-device--laptop .il-device__landing {
  height: calc(100% - 34px);
  padding: 26px 48px 24px;
}
/* Пропорция как в телефоне: знак занимает около 14% высоты экрана.
   У ноутбука экран ниже, поэтому знак меньше, а не больше. */
.il-device--laptop .il-device__mark {
  width: 62px;
  margin-bottom: 14px;
}
.il-device--laptop .il-device__product {
  font-size: 19px;
}
/* панель показателей и графика внутри экрана */
.il-device__panel {
  align-self: end;
  text-align: left;
}
.il-device__metrics {
  margin-bottom: 8px;
}
.il-device__chart-wrap {
  margin-top: 0;
  background: rgba(255, 255, 255, .78);
}
@media (max-width: 991.98px) {
  .il-device--laptop .il-device__landing { padding: 14px 16px 16px; }
  .il-device--laptop .il-device__mark { width: 44px; }
  .il-device--laptop .il-device__product { font-size: 15px; }
}

/* =========================================================================
   БЛОК 19 — БЛОК КОНТАКТОВ: ЕДИНЫЙ СТАНДАРТ (ТЗ Босса 04.09)
   Один и тот же список контактов стоит в подвале и на странице «Контакты».
   Разметка и размеры общие (.il-footer__contacts / .il-footer__link),
   меняется только цвет: в подвале фон тёмный, на странице — светлый.
   Строка графика работы — тот же элемент, но не ссылка.
   ========================================================================= */
.il-contacts__list {
  justify-content: flex-start; /* в подвале по центру, на странице — по левому краю */
  text-align: left;
}
.il-contacts__list .il-footer__link {
  color: var(--il-color-ink);
}
.il-contacts__list .il-footer__link:hover,
.il-contacts__list .il-footer__link:focus {
  color: var(--il-color-accent);
}
/* строка графика: не ссылка, поэтому курсор обычный и наведение не меняет цвет */
.il-footer__link--schedule {
  cursor: default;
}
.il-contacts__list .il-footer__link--schedule:hover {
  color: var(--il-color-ink);
}

/* =========================================================================
   БЛОК 20 — БЛОГ (ТЗ Босса 05.09)
   Список записей, страница статьи и блоки «схожі» / «ви вже читали».
   Все размеры — токенами БЛОКА 2, цвета и линии — теми же, что на услугах.
   Сетка своя (grid), брендовые заголовки — уже готовым .il-slab.
   ========================================================================= */
.il-posts {
  padding: var(--il-space-section-y) 0;
}
/* короткое вступление раздела: колонка той же ширины, что текст статьи */
.il-posts__intro {
  max-width: var(--il-post-col);
  margin: 0 0 var(--il-space-gap);
}
.il-posts__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--il-space-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.il-post {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--il-color-divider);
  /* фирменная линия по нижнему краю карточки */
  border-bottom: var(--il-post-line) solid var(--il-color-accent);
  background: var(--il-color-bg);
}
.il-post__cover {
  position: relative;
  display: block;
  padding-top: var(--il-post-cover);
  overflow: hidden;
  background: var(--il-color-divider);
}
.il-post__cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.il-post__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--il-space-gap-md);
  padding: var(--il-post-pad);
}
.il-post__cat,
.il-post__meta,
.il-related__cat,
.il-related__meta {
  font-size: var(--il-post-meta-fs);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.il-post__cat {
  color: var(--il-color-accent);
  text-decoration: none;
}
.il-post__title {
  margin: 0;
  font-size: var(--il-font-h3);
  line-height: var(--il-font-h3-lh);
  font-weight: var(--il-font-h3-ves);
}
.il-post__title a,
.il-related__name a {
  color: var(--il-color-ink);
  text-decoration: none;
}
.il-post__text {
  margin: 0;
}
.il-post__meta {
  display: flex;
  gap: var(--il-space-gap-md);
  margin-top: auto;
  padding-top: var(--il-space-gap-md);
  border-top: 1px solid var(--il-color-divider);
}
/* кнопка карточки — тот же .il-btn, что и во всех секциях сайта */
.il-post__more {
  align-self: flex-start;
}
/* постраничная навигация: ряд квадратов, текущая страница залита фирменным
   синим, стрелки — такие же квадраты, неактивная сторона гасится */
.il-posts__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--il-space-gap-md);
  margin-top: var(--il-space-gap);
}
.il-pagination {
  display: flex;
  align-items: center;
  gap: var(--il-pagination-gap);
}
.il-pagination__list {
  display: flex;
  gap: var(--il-pagination-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.il-pagination__step,
.il-pagination .page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--il-pagination-size);
  height: var(--il-pagination-size);
  border: 1px solid var(--il-color-divider);
  font-family: var(--il-font-semeystvo);
  font-size: var(--il-post-meta-fs);
  letter-spacing: 1px;
  color: var(--il-color-ink);
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.il-pagination a.page-numbers:hover,
.il-pagination__step:hover {
  border-color: var(--il-color-accent);
  color: var(--il-color-accent);
}
.il-pagination .page-numbers.current {
  border-color: var(--il-color-accent);
  background-color: var(--il-color-accent);
  color: var(--il-color-on-blue-ink);
}
/* многоточие между далёкими страницами: рамка не нужна */
.il-pagination .page-numbers.dots {
  width: auto;
  border: 0;
}
.il-pagination__step svg {
  width: var(--il-pagination-arrow);
  height: var(--il-pagination-arrow);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}
.il-pagination__step.is-disabled {
  border-color: var(--il-color-divider);
  color: var(--il-color-divider);
}
.il-pagination__counter {
  margin: 0;
  font-size: var(--il-post-meta-fs);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* развёрнутый текст раздела: под записями — сначала статьи, потом описание.
   Ширина колонки ограничена — читать длинный текст во всю полосу неудобно. */
.il-seotext {
  padding: 0 0 var(--il-space-section-y);
}
.il-seotext__cols {
  display: grid;
  grid-template-columns: minmax(0, var(--il-post-col));
  gap: var(--il-space-gap);
  padding-top: var(--il-space-gap);
  border-top: 1px solid var(--il-color-divider);
}
.il-seotext__main > *:first-child {
  margin-top: 0;
}
/* заголовок раздела между первым экраном и сеткой: по центру полосы, с той же
   фирменной полосой, что у заголовков секций сайта. Отбивка сверху и снизу —
   стандартная секционная. */
.il-posts-intro {
  padding: var(--il-space-section-y) 0;
  text-align: center;
}
/* заголовок стоит в секции один — собственный нижний отступ ему не нужен */
.il-posts-intro__title:last-child {
  margin-bottom: 0;
}
.il-posts-intro__text {
  max-width: var(--il-post-col);
  margin: 0 auto;
}
/* отбивку между заголовком и сеткой уже дала эта секция */
.il-posts-intro + .il-posts {
  padding-top: 0;
}
@media (max-width: 991.98px) {
  .il-seotext__cols {
    grid-template-columns: minmax(0, 1fr);
  }
  .il-posts-intro {
    padding: var(--il-space-section-y-md) 0;
  }
}

/* ---- страница статьи ---- */
.il-article {
  padding: var(--il-space-section-y) 0;
}
.il-article__inner {
  max-width: var(--il-post-col);
  margin: 0 auto;
}
/* Мета-строка статьи — подписанные поля, а не ряд слов подряд.
   Разделители фирменные: тонкая линия слева у каждой ячейки, кроме первой
   в ряду, и такая же линия по нижнему краю всего блока. */
.il-article__meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* пара к :nth-child(4n + 1) ниже */
  row-gap: var(--il-post-meta-row-gap);
  margin: 0;
  padding-bottom: var(--il-space-gap-md);
  border-bottom: 1px solid var(--il-color-divider);
}
.il-article__meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--il-post-meta-gap);
  padding-left: var(--il-post-meta-pad);
  border-left: 1px solid var(--il-color-divider);
}
/* первая ячейка ряда идёт без разделителя, чтобы линия не липла к краю колонки */
.il-article__meta-item:nth-child(4n + 1) {
  padding-left: 0;
  border-left: 0;
}
.il-article__meta-label {
  display: flex;
  align-items: center;
  gap: var(--il-post-meta-ico-gap);
  font-size: var(--il-post-meta-label-fs);
  font-weight: var(--il-post-meta-label-ves);
  line-height: var(--il-font-kicker-lh);
  letter-spacing: var(--il-post-meta-label-ls);
  text-transform: uppercase;
  color: var(--il-post-meta-label-ink);
}
/* иконка идёт в цвет подписи и не сжимается, когда подпись переносится */
.il-article__meta-label svg {
  flex: 0 0 auto;
  width: var(--il-post-meta-ico);
  height: var(--il-post-meta-ico);
}
.il-article__meta-value {
  margin: 0;
  font-size: var(--il-post-meta-value-fs);
  line-height: var(--il-font-kicker-lh);
  color: var(--il-color-ink);
}
/* рубрика в мета-строке читается как остальные значения, отличает её только
   фирменный синий: размер и регистр наследует у соседей по ряду */
.il-article__meta-value .il-post__cat {
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: none;
}
.il-article__cover {
  margin: var(--il-space-gap) 0;
}
.il-article__cover img {
  display: block;
  width: 100%;
  height: auto;
}
/* Содержание: собирается из заголовков статьи (см. il_article_render) */
.il-toc {
  margin: 0 0 var(--il-space-gap);
  padding: var(--il-toc-pad);
  border: 1px solid var(--il-color-divider);
}
.il-toc__title {
  margin: 0 0 var(--il-toc-title-gap);
  font-size: var(--il-post-meta-label-fs);
  font-weight: var(--il-post-meta-label-ves);
  line-height: var(--il-font-kicker-lh);
  letter-spacing: var(--il-post-meta-label-ls);
  text-transform: uppercase;
  color: var(--il-post-meta-label-ink);
}
.il-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: il-toc;
}
.il-toc__item {
  display: flex;
  align-items: baseline;
  padding: var(--il-toc-gap) 0;
  border-top: 1px solid var(--il-color-divider);
  counter-increment: il-toc;
}
.il-toc__item:first-child {
  padding-top: 0;
  border-top: 0;
}
.il-toc__item:last-child {
  padding-bottom: 0;
}
.il-toc__item::before {
  content: counter(il-toc, decimal-leading-zero);
  flex: 0 0 var(--il-toc-num-w);
  font-size: var(--il-toc-num-fs);
  font-weight: var(--il-post-meta-label-ves);
  font-variant-numeric: tabular-nums;
  color: var(--il-color-accent);
}
.il-toc__link {
  color: var(--il-color-ink);
  text-decoration: none;
}
.il-toc__link:hover {
  color: var(--il-color-accent);
}
/* Таблица статьи прокручивается внутри своей колонки: страница остаётся
   шириной экрана, шапка и бургер на месте. Полоса прокрутки та же, что у
   хлебных крошек на мобильном: тонкая, квадратная, в фирменных цветах. */
.il-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--il-page-hero-crumb-bar-thumb) var(--il-page-hero-crumb-bar-track);
}
.il-table-scroll::-webkit-scrollbar {
  height: var(--il-page-hero-crumb-bar);
}
.il-table-scroll::-webkit-scrollbar-track {
  background: var(--il-page-hero-crumb-bar-track);
}
.il-table-scroll::-webkit-scrollbar-thumb {
  background: var(--il-page-hero-crumb-bar-thumb);
}
/* Таблица статьи: один стандарт для всех таблиц через класс .il-table.
   Сбрасываем рамки библиотеки блоков WordPress и рисуем свои линии. */
.il-article__body figure {
  margin: 0 0 var(--il-space-gap-md);
}
.il-table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  font-size: var(--il-table-fs);
  line-height: var(--il-table-lh);
}
.il-table caption {
  caption-side: top;
  padding: 0 0 var(--il-toc-title-gap);
  text-align: left;
  font-size: var(--il-post-meta-label-fs);
  font-weight: var(--il-post-meta-label-ves);
  letter-spacing: var(--il-post-meta-label-ls);
  text-transform: uppercase;
  color: var(--il-post-meta-label-ink);
}
.il-table th,
.il-table td {
  padding: var(--il-table-pad-y) var(--il-table-pad-x);
  border: 0;
  text-align: left;
  vertical-align: top;
}
.il-table thead th {
  font-size: var(--il-post-meta-label-fs);
  font-weight: var(--il-post-meta-label-ves);
  line-height: var(--il-font-kicker-lh);
  letter-spacing: var(--il-post-meta-label-ls);
  text-transform: uppercase;
  color: var(--il-post-meta-label-ink);
  border-bottom: var(--il-table-head-line) solid var(--il-color-accent);
}
.il-table tbody th,
.il-table tbody td {
  border-bottom: 1px solid var(--il-color-divider);
}
.il-table tbody tr:nth-child(even) {
  background: var(--il-table-stripe);
}
.il-table tbody td:first-child,
.il-table tbody th:first-child {
  font-weight: var(--il-table-label-ves);
  color: var(--il-color-ink);
}
.il-table p {
  margin: 0;
}
/* переход по якорю останавливается ниже фиксированной шапки */
.il-article__body h2,
.il-article__body h3 {
  scroll-margin-top: calc(var(--il-nav-h) + var(--il-toc-scroll-offset));
}
.il-article__lead {
  font-size: var(--il-post-lead-fs);
  line-height: 1.55;
}
/* подзаголовки внутри текста получают фирменную полосу без участия редактора */
.il-seotext__main h2,
.il-article__body h2 {
  --il-slab-ink: var(--il-color-ink);
  --il-slab-h: var(--il-slab-h-cap);
  --il-slab-dolya: var(--il-slab-dolya-cap);
  position: relative;
  display: table;
  margin: var(--il-space-gap) 0 var(--il-space-gap-md);
  padding-bottom: var(--il-slab-padding-b-cap);
  font-size: var(--il-font-h2-md);
}
.il-seotext__main h2::before,
.il-seotext__main h2::after,
.il-article__body h2::before,
.il-article__body h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: var(--il-slab-h);
  clip-path: polygon(0 0, calc(100% - var(--il-slab-h)) 0, 100% 100%, var(--il-slab-h) 100%);
}
.il-seotext__main h2::before,
.il-article__body h2::before {
  left: 0;
  width: var(--il-slab-dolya);
  background: var(--il-color-accent);
}
.il-seotext__main h2::after,
.il-article__body h2::after {
  right: 0;
  left: calc(var(--il-slab-dolya) + var(--il-slab-gap));
  background: var(--il-slab-color-cap);
}
.il-seotext__main h3,
.il-article__body h3 {
  margin: var(--il-space-gap-md) 0 10px;
}
.il-article__body ul,
.il-article__body ol,
.il-seotext__main ul,
.il-seotext__main ol {
  padding-left: var(--il-space-gap-md);
}
.il-article__body blockquote,
.il-seotext__main blockquote {
  margin: var(--il-space-gap) 0;
  padding-left: var(--il-space-gap-md);
  border-left: 2px solid var(--il-color-accent);
}
.il-article__body img,
.il-seotext__main img {
  max-width: 100%;
  height: auto;
}
.il-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--il-space-gap-md);
  margin-top: var(--il-space-gap);
}
.il-article__tag {
  padding: 6px 14px;
  border: 1px solid var(--il-color-divider);
  font-size: var(--il-post-meta-fs);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--il-color-ink);
  text-decoration: none;
}
.il-article__tag:hover {
  border-color: var(--il-color-accent);
  color: var(--il-color-accent);
}
.il-article__cta {
  margin-top: var(--il-space-gap);
  padding-top: var(--il-space-gap);
  border-top: 1px solid var(--il-color-divider);
  text-align: center;
}

/* ---- «схожі статті» и «ви вже читали»: две колонки в один экран ---- */
.il-related {
  padding-bottom: var(--il-space-section-y);
}
.il-related__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--il-space-gap);
  padding-top: var(--il-space-gap);
  border-top: 1px solid var(--il-color-divider);
}
.il-related__col + .il-related__col {
  padding-left: var(--il-space-gap);
  border-left: 1px solid var(--il-color-divider);
}
.il-related__list {
  display: grid;
  gap: var(--il-space-gap-md);
  margin: 0;
  padding: 0;
  list-style: none;
}
.il-related__item {
  display: grid;
  grid-template-columns: var(--il-related-thumb) 1fr;
  gap: var(--il-space-gap-md);
  align-items: start;
  padding-bottom: var(--il-space-gap-md);
  border-bottom: 1px solid var(--il-color-divider);
}
.il-related__item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.il-related__thumb {
  display: block;
  width: var(--il-related-thumb);
  height: var(--il-related-thumb);
  object-fit: cover;
  background: var(--il-color-divider);
}
.il-related__cat {
  display: block;
  margin-bottom: 6px;
  color: var(--il-color-accent);
  text-decoration: none;
}
.il-related__name {
  margin: 0;
  font-size: var(--il-font-body);
  line-height: 1.35;
  font-weight: var(--il-font-h3-ves);
}
.il-related__meta {
  margin-top: 6px;
}
/* колонка истории чтения собирается на стороне браузера: до этого она скрыта,
   чтобы не мигал пустой блок */
.il-related__col[hidden] {
  display: none;
}

@media (max-width: 991.98px) {
  .il-posts__grid { grid-template-columns: repeat(2, 1fr); }
  .il-posts,
  .il-article { padding: var(--il-space-section-y-md) 0; }
  .il-seotext,
  .il-related { padding-bottom: var(--il-space-section-y-md); }
}
@media (max-width: 767.98px) {
  /* Мета-строка встаёт в две колонки по два ряда: подписи держат смысл, а
     значения перестают выглядеть цепочкой слов подряд. */
  .il-toc { padding: var(--il-toc-pad-md); }
  .il-table { font-size: var(--il-table-fs-md); }
  .il-table th,
  .il-table td { padding: var(--il-table-pad-y-md) var(--il-table-pad-x-md); }
  .il-article__meta { grid-template-columns: repeat(2, 1fr); } /* пара к :nth-child(2n + 1) */
  .il-article__meta-item {
    padding-left: var(--il-post-meta-pad);
    border-left: 1px solid var(--il-color-divider);
  }
  .il-article__meta-item:nth-child(2n + 1) {
    padding-left: 0;
    border-left: 0;
  }
  .il-related__cols { grid-template-columns: 1fr; }
  .il-related__col + .il-related__col {
    padding-top: var(--il-space-gap-md);
    padding-left: 0;
    border-top: 1px solid var(--il-color-divider);
    border-left: 0;
  }
}
@media (max-width: 575.98px) {
  .il-posts__grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   БЛОК 22 — ПЛАШКА СОГЛАСИЯ НА ФАЙЛЫ COOKIE
   Узкая полоса у нижнего края экрана: содержимое страницы видно, отрисовку
   не задерживает. Углы квадратные, линия и главная кнопка — в цвет логотипа.
   ========================================================================= */
/* На телефонах тот же снимок в меньшем разрешении: экрану больше не нужно,
   а весит он вчетверо меньше и приходит заметно раньше. Порядок строк тот же,
   что и у полной версии: сначала запасной вариант, затем лёгкий формат. */
@media (max-width: 767.98px) {
  .il-hero__bg,
  .il-page-hero__bg {
    background-image: url('../images/pawel-czerwinski-T5VUBvCYqKk-unsplash-1200.jpg');
    background-image: -webkit-image-set(url('../images/pawel-czerwinski-T5VUBvCYqKk-unsplash-1200.webp') type('image/webp'), url('../images/pawel-czerwinski-T5VUBvCYqKk-unsplash-1200.jpg') type('image/jpeg'));
    background-image: image-set(url('../images/pawel-czerwinski-T5VUBvCYqKk-unsplash-1200.webp') type('image/webp'), url('../images/pawel-czerwinski-T5VUBvCYqKk-unsplash-1200.jpg') type('image/jpeg'));
  }
}

/* Тем, кто уже ответил на вопрос о cookie, плашка не показывается вовсе:
   признак ставится скриптом в шапке страницы до первой отрисовки. */
.il-consent-answered .il-cookie { display: none; }

.il-cookie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--il-cookie-z);
  background: var(--il-cookie-bg);
  border-top: var(--il-cookie-line-h) solid var(--il-cookie-line);
  box-shadow: var(--il-cookie-shadow);
}
.il-cookie__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--il-cookie-gap);
  padding-top: var(--il-cookie-pad-y);
  padding-bottom: var(--il-cookie-pad-y);
}
.il-cookie__text {
  margin: 0;
  font-size: var(--il-cookie-fs);
  line-height: var(--il-font-kicker-lh);
  color: var(--il-color-ink);
}
.il-cookie__link {
  color: var(--il-color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.il-cookie__actions {
  display: flex;
  flex: 0 0 auto;
  gap: var(--il-cookie-btn-gap);
}
/* кнопки повторяют шрифт и регистр брендовых кнопок сайта */
.il-cookie__btn {
  padding: var(--il-cookie-btn-pad-v) var(--il-cookie-btn-pad-h);
  border: 1px solid var(--il-color-ink);
  border-radius: 0;
  font-family: var(--il-font-semeystvo);
  font-size: var(--il-cookie-btn-fs);
  font-weight: var(--il-font-kicker-ves);
  letter-spacing: var(--il-post-meta-label-ls);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--il-btn-transition, .25s ease), color var(--il-btn-transition, .25s ease), border-color var(--il-btn-transition, .25s ease);
}
.il-cookie__btn--ghost {
  background: transparent;
  color: var(--il-color-ink);
}
.il-cookie__btn--ghost:hover {
  background: var(--il-color-ink);
  color: var(--il-color-on-blue-ink);
}
.il-cookie__btn--solid {
  background: var(--il-color-accent);
  border-color: var(--il-color-accent);
  color: var(--il-color-on-blue-ink);
}
.il-cookie__btn--solid:hover {
  background: var(--il-color-ink);
  border-color: var(--il-color-ink);
}
@media (max-width: 767.98px) {
  /* На телефоне текст и кнопки идут в столбец, кнопки делят ширину пополам:
     полоса остаётся низкой и не закрывает содержимое страницы. */
  .il-cookie__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--il-cookie-gap-md);
    padding-top: var(--il-cookie-pad-y-md);
    padding-bottom: var(--il-cookie-pad-y-md);
  }
  .il-cookie__text {
    font-size: var(--il-cookie-fs-md);
  }
  .il-cookie__btn {
    flex: 1 1 0;
  }
}