/* ── reset.css ─────────────────────────────── */
/* =====================================================================
   Liga DS — minimal, polite reset.
   Global box-sizing only (universally expected). All base typography /
   color / background is scoped to .liga-root so the library never
   restyles a consumer's whole page uninvited.
   ===================================================================== */

.blog-scope *,

.blog-scope *::before,

.blog-scope *::after {
  box-sizing: border-box;
}

/* ── Поля форм — за дизайн-системою ───────────────────────────────────────
   «Потрібно, щоб поля в модалці були по дизайн-системі. Вони в нас круглі».
   Перевірено: у liga-ds радіус поля — --field-corner-field-corner (10000px),
   тобто повна пілюля; рамка --cntnr-border-default, активна --cntnr-border-active.
   Прототип у модалці мав 10px і власний фіолетовий фокус.
   Поля розсилки й пошуку вже були круглі — тепер уся форма однакова. */
/* :not([type="checkbox"]) — правила «поля модалки за ДС» писались під
   текстові поля: пілюля 10000px, min-height 48 і бічні падінги. Чекбокс під них
   потрапляв просто тому, що він теж input, і виходив прямокутником 34×16 із
   круглими краями. Його вигляд задає css/ld-checkbox.css. */
.blog-scope .field input:not([type="checkbox"]),
.blog-scope .field textarea,
.blog-scope .modal input:not([type="checkbox"]),
.blog-scope .modal .form-ui__input {
    border-radius: var(--field-corner-field-corner);
    border: 1px solid var(--cntnr-border-default);
    min-height: 48px; /* ld-input--size-xl */
    padding: 0 var(--space-200);
    font-family: var(--site-font);
    font-size: var(--typo-sizes-h350);
    color: var(--text-default);
    background: var(--cntnr-bg-primary-default);
}

.blog-scope .modal .form-ui__input {
    color: var(--text-subtlest);
}

.blog-scope #ovLead .external-form {
    background: none;
    padding-top: 12px;
}

.blog-scope #ovLead .form-ui__field label,
.blog-scope #ovLead .form-ui__checkbox span {
    font-size: 13px;
    color: var(--ink);
    font-weight: 600;
    margin-bottom: 4px;
}

.blog-scope #ovLead .form-ui__field {
    margin-bottom: 12px;
}

.blog-scope #ovLead .form-ui__bottom p:first-child {
    width: 100%;
    margin-top: 12px;
}

.blog-scope #ovLead .form-ui__bottom {
    gap: 0;
}

.blog-scope #ovLead .form-submit-button {
    width: 100%;
}

/* ── Автозаповнення браузера у формах блогу ────────────────────────────────
   Якщо вибрати підказку Chrome (ім'я, email, телефон), поле переходить у стан
   :-webkit-autofill, і браузер малює його по-своєму: власним фоном і своїм
   пріоритетом, який звичайний `color` не перебиває.

   Сайтовий core.css гасив цей фон inset-тінню й фарбував текст у БІЛИЙ — бо
   на сайті та сама форма (ExternalForms) лежить на темних промо-блоках. У
   блозі поля світлі, тож підставлене значення виходило білим по білому: поле
   виглядало порожнім, хоча значення в ньому було.

   Далі — та сама техніка, але в блогових кольорах:
   • --autofill-text підхоплює правило в core.css (там значення через var);
   • тінь у колір поля — непрозора, щоб фон Chrome не проступав на лавандовій
     смузі дайджесту, де саме поле біле;
   • transition на 9999s — щоб Chrome не анімував свій фон назад.
   Селектор із `.form-ui` потрібен для однакової ваги з core.css (блогові
   стилі підключаються після нього), а короткий — для полів поза формами
   реєстру, як-от пошук по блогу. */
.blog-scope {
    --autofill-text: var(--text-default);
}

.blog-scope .form-ui input:-webkit-autofill,
.blog-scope .form-ui input:-webkit-autofill:hover,
.blog-scope .form-ui input:-webkit-autofill:focus,
.blog-scope .form-ui textarea:-webkit-autofill,
.blog-scope .form-ui select:-webkit-autofill,
.blog-scope input:-webkit-autofill,
.blog-scope input:-webkit-autofill:hover,
.blog-scope input:-webkit-autofill:focus,
.blog-scope textarea:-webkit-autofill,
.blog-scope select:-webkit-autofill {
    -webkit-text-fill-color: var(--text-default) !important;
    caret-color: var(--text-default);
    box-shadow: 0 0 0 1000px var(--cntnr-bg-primary-default) inset !important;
    -webkit-box-shadow: 0 0 0 1000px var(--cntnr-bg-primary-default) inset !important;
    transition: background-color 9999s ease-in-out 0s;
    color: var(--text-default) !important;
}

/* Base surface — apply to the app root or <body>: <body class="liga-root"> */
.blog-scope .liga-root {
    font-family: var(--liga-font-family);
    font-size: var(--typo-sizes-h300); /* 14px — main body */
    line-height: 16px;
    color: var(--text-default);
    background-color: var(--cntnr-bg-other-page-background);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    accent-color: var(--color-primary-500);
}

/* Visible, consistent focus for keyboard users across all Liga components. */
.blog-scope :where(.liga-root) :focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .blog-scope :where(.liga-root) *,

  .blog-scope :where(.liga-root) *::before,

  .blog-scope :where(.liga-root) *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ── tokens.generated.css ─────────────────────────────── */
/* =====================================================================
   Liga DS — generated token layer.  DO NOT EDIT BY HAND.
   Source: Figma "❖ UI LIBRARY" (fileKey fOisEfYBh4z6VbkY6sOmSn)
   Regenerate: figma_export_tokens (css-vars) -> transform-tokens.mjs
   Brand axis: Liga360 (:root default) / United ([data-brand="united"]).
   ===================================================================== */

.blog-scope {
  --color-primary-100: #F3F2FF;
  --color-primary-200: #E5E2FF;
  --color-primary-300: #AEB1FF;
  --color-primary-400: #9486FF;
  --color-primary-500: #7267E6;
  --color-primary-600: #5048A1;
  --color-primary-800: #27234F;
  --color-primary-1000: #080620;
  --color-primary-700: #383271;
  --color-primary-900: #1B1937;
  --color-neutral-solid-100: #FFFFFF;
  --color-neutral-solid-200: #FAFAFC;
  --color-neutral-solid-300: #EFEFF5;
  --color-neutral-solid-400: #E7E7EC;
  --color-neutral-solid-500: #D6D6DE;
  --color-neutral-solid-600: #9898A3;
  --color-neutral-solid-700: #636373;
  --color-neutral-solid-800: #4B4B55;
  --color-neutral-solid-900: #25252A;
  --color-neutral-solid-1000: #151517;
  --color-dark-neutral-solid-100: #B6BDCF;
  --color-dark-neutral-solid-200: #9FA4BC;
  --color-dark-neutral-solid-300: #8C93AB;
  --color-dark-neutral-solid-400: #77809C;
  --color-dark-neutral-solid-500: #626C8B;
  --color-dark-neutral-solid-600: #515C81;
  --color-dark-neutral-solid-700: #3E4A71;
  --color-dark-neutral-solid-800: #2A365B;
  --color-dark-neutral-solid-900: #202A4C;
  --color-dark-neutral-solid-1000: #121B39;
  --color-neutral-alpha-100: #FBFBFF1A;
  --color-neutral-alpha-200: #FBFBFF33;
  --color-neutral-alpha-300: #FBFBFF4D;
  --color-neutral-alpha-400: #FBFBFF66;
  --color-neutral-alpha-500: #FBFBFF80;
  --color-neutral-alpha-600: #FBFBFF99;
  --color-neutral-alpha-700: #FBFBFFB2;
  --color-neutral-alpha-800: #FBFBFFCC;
  --color-neutral-alpha-850: #FBFBFFD9;
  --color-neutral-alpha-900: #FBFBFFE5;
  --color-dark-neutral-alpha-100: #121B391A;
  --color-dark-neutral-alpha-200: #121B3933;
  --color-dark-neutral-alpha-300: #121B394D;
  --color-dark-neutral-alpha-400: #121B3966;
  --color-dark-neutral-alpha-500: #121B3980;
  --color-dark-neutral-alpha-600: #121B3999;
  --color-dark-neutral-alpha-700: #121B39B2;
  --color-dark-neutral-alpha-800: #121B39CC;
  --color-dark-neutral-alpha-850: #121B39D9;
  --color-dark-neutral-alpha-900: #121B39E5;
  --spacings-0: 0px;
  --spacings-2: 2px;
  --spacings-4: 4px;
  --spacings-6: 6px;
  --spacings-8: 8px;
  --spacings-12: 12px;
  --spacings-16: 16px;
  --spacings-24: 24px;
  --spacings-32: 32px;
  --spacings-40: 40px;
  --spacings-48: 48px;
  --spacings-64: 64px;
  --spacings-80: 80px;
  --spacings-100: 100px;
  --spacings-20: 20px;
  --color-other-colors-red-700: #D00F3C;
  --color-other-colors-red-500: #E25C7B;
  --color-other-colors-red-900: #6E0920;
  --brand-colors-brand-primary: #7267E6;
  --color-other-colors-orange-red-500: #FE7D34;
  --color-other-colors-orange-red-300: #FFBE99;
  --color-other-colors-orange-red-700: #CB4A01;
  --color-other-colors-blue-300: #85B8FF;
  --color-other-colors-blue-500: #3388FF;
  --color-other-colors-blue-700: #0055CC;
  --color-other-colors-cool-green-500: #5DBC94;
  --color-other-colors-cool-green-700: #216E4E;
  --color-other-colors-cool-green-900: #04311F;
  --spacings-36: 36px;
  --color-other-colors-warm-yellow-300: #F9E199;
  --color-other-colors-warm-yellow-500: #F5CA4C;
  --color-other-colors-warm-yellow-700: #D6A000;
  --color-other-colors-warm-green-600: #66A726;
  --color-other-colors-warm-green-700: #51851F;
  --color-other-colors-warm-green-800: #306821;
  --color-other-colors-orange-500: #FFAB33;
  --color-other-colors-orange-700: #CC7700;
  --color-other-colors-orange-900: #5C3A0A;
  --color-other-colors-red-400: #EB8EA3;
  --color-other-colors-red-300: #F6CBD5;
  --color-other-colors-red-200: #F9DCE3;
  --color-other-colors-warm-green-500: #87C747;
  --color-other-colors-red-100: #FCF2F4;
  --color-other-colors-red-600: #D93E62;
  --color-other-colors-cool-green-300: #AAE5CC;
  --color-other-colors-cool-green-200: #D4F2E6;
  --color-other-colors-cool-green-100: #E2F8EF;
  --color-other-colors-cool-green-400: #7CD8B0;
  --color-other-colors-cool-green-600: #589E80;
  --color-other-colors-cool-green-800: #315A49;
  --color-other-colors-warm-green-400: #A3DD6B;
  --color-other-colors-warm-green-300: #B8E58C;
  --color-other-colors-warm-green-200: #DCF2C7;
  --color-other-colors-warm-green-100: #F5FBEF;
  --color-other-colors-warm-green-900: #375B14;
  --color-other-colors-orange-600: #FF9400;
  --color-other-colors-orange-400: #FFBE66;
  --color-other-colors-orange-300: #FFD9A3;
  --color-other-colors-orange-200: #FFEACD;
  --color-other-colors-orange-100: #FFF8F0;
  --color-other-colors-orange-800: #875612;
  --color-other-colors-red-1000: #470615;
  --color-other-colors-red-800: #AB0C31;
  --color-other-colors-cool-green-1000: #02180F;
  --color-other-colors-warm-green-1000: #192A09;
  --color-other-colors-blue-100: #E5F0FF;
  --color-other-colors-blue-200: #D1E4FF;
  --color-other-colors-blue-400: #66A6FF;
  --color-other-colors-blue-600: #006AFF;
  --color-other-colors-blue-800: #004099;
  --color-other-colors-blue-900: #002A66;
  --color-other-colors-blue-1000: #001533;
  --color-other-colors-orange-red-100: #FCE6DA;
  --color-other-colors-orange-red-200: #F9D3BD;
  --color-other-colors-orange-red-400: #FE9D67;
  --color-other-colors-orange-red-600: #FA5B01;
  --color-other-colors-orange-red-800: #983701;
  --color-other-colors-orange-red-900: #652601;
  --color-other-colors-orange-red-1000: #4B1C01;
  --color-other-colors-orange-1000: #372306;
  --color-other-colors-warm-yellow-100: #FDF7E5;
  --color-other-colors-warm-yellow-200: #FCF0CC;
  --color-other-colors-warm-yellow-400: #F8D97F;
  --color-other-colors-warm-yellow-600: #F2BB19;
  --color-other-colors-warm-yellow-800: #A37A00;
  --color-other-colors-warm-yellow-900: #6B5106;
  --color-other-colors-warm-yellow-1000: #3A2C03;
  --corner-radius-24: 24px;
  --corner-radius-12: 12px;
  --corner-radius-4: 4px;
  --corner-radius-8: 8px;
  --corner-radius-2: 2px;
  --corner-radius-infinity: 10000px;
  --corner-radius-16: 16px;
  --corner-radius-0: 0px;
  --shadow-z-index-eleveation-1-color: #A8A8A80D;
  --shadow-z-index-eleveation-1-blur: 25px;
  --shadow-z-index-eleveation-1-spread: 5px;
  --shadow-z-index-eleveation-2-color: #A8A8A826;
  --shadow-z-index-eleveation-2-blur: 50px;
  --shadow-z-index-eleveation-2-spread: 10px;
  --shadow-z-index-eleveation-3-color: #A8A8A840;
  --shadow-z-index-eleveation-3-blur: 64px;
  --shadow-z-index-eleveation-3-spread: 15px;
  --color-neutral-solid-150: #FCFCFD;
  --color-neutral-solid-125: #FBFBFC;
  --color-neutral-alpha-0: #FBFBFF00;
  --brand-colors-brand-secondary: #61B1CA;
  --color-neutral-solid-350: #EAEAF0;
  --color-neutral-solid-450: #E3E3E8;
  --space-0: var(--spacings-0);
  --space-025: var(--spacings-2);
  --space-050: var(--spacings-4);
  --space-075: var(--spacings-6);
  --space-100: var(--spacings-8);
  --space-150: var(--spacings-12);
  --space-200: var(--spacings-16);
  --space-250: var(--spacings-20);
  --space-300: var(--spacings-24);
  --space-400: var(--spacings-32);
  --space-500: var(--spacings-40);
  --space-600: var(--spacings-48);
  --space-800: var(--spacings-64);
  --space-1000: var(--spacings-80);
  --space-1200: var(--spacings-100);
  --text-default: var(--color-neutral-solid-900);
  --text-subtle: var(--color-neutral-solid-800);
  --text-subtlest: var(--color-neutral-solid-600);
  --text-disabled: var(--color-neutral-solid-500);
  --text-hover: var(--color-primary-400);
  --text-danger: var(--color-other-colors-red-700);
  --text-warning: var(--color-other-colors-orange-red-700);
  --text-success: var(--color-other-colors-cool-green-700);
  --text-information: var(--color-other-colors-blue-500);
  --link-default: var(--color-primary-500);
  --link-click: var(--color-primary-300);
  --link-visited: var(--color-primary-600);
  --icon-default: var(--color-neutral-solid-900);
  --icon-subtle: var(--color-neutral-solid-800);
  --icon-disabled: var(--color-neutral-solid-500);
  --icon-hover: var(--color-primary-400);
  --icon-brand: var(--brand-colors-brand-primary);
  --text-brand-liga: var(--brand-colors-brand-primary);
  --icon-danger: var(--color-other-colors-red-700);
  --icon-warning: var(--color-other-colors-orange-red-500);
  --icon-success: var(--color-other-colors-cool-green-700);
  --icon-info: var(--color-other-colors-blue-500);
  --cntnr-border-default: var(--color-primary-200);
  --cntnr-border-hover: var(--color-primary-300);
  --cntnr-border-disabled: var(--color-neutral-solid-400);
  --cntnr-border-selected: var(--color-primary-400);
  --cntnr-border-error: var(--color-other-colors-red-700);
  --cntnr-border-warning: var(--color-other-colors-orange-red-500);
  --cntnr-border-success: var(--color-other-colors-cool-green-700);
  --cntnr-border-info: var(--color-other-colors-blue-500);
  --blanket-popup-background: var(--color-dark-neutral-alpha-200);
  --skeleton-default: var(--color-neutral-alpha-300);
  --skeleton-shimmer: var(--color-neutral-solid-500);
  --cntnr-bg-primary-default: var(--color-neutral-solid-100);
  --cntnr-bg-primary-hover: var(--color-primary-100);
  --text-active: var(--color-primary-500);
  --text-click: var(--color-primary-600);
  --icon-active: var(--color-primary-500);
  --icon-click: var(--color-primary-600);
  --icon-alternative-active: var(--color-neutral-solid-100);
  --btn-bg-primary-default: var(--color-neutral-solid-1000);
  --btn-bg-primary-active: var(--color-primary-500);
  --text-alternative: var(--color-neutral-solid-100);
  --cntnr-border-alternative: var(--color-neutral-solid-900);
  --btn-bg-primary-disable: var(--color-neutral-solid-300);
  --cntnr-bg-secondary-default: var(--color-neutral-solid-200);
  --btn-bg-primary-disable-alternative: var(--color-neutral-solid-200);
  --cntnr-bg-other-page-background: var(--color-neutral-solid-300);
  --btn-bg-primary-hover: var(--color-primary-500);
  --btn-bg-primary-click-pressed: var(--color-primary-300);
  --cntnr-bg-primary-click: var(--color-primary-200);
  --icon-subtlest: var(--color-neutral-solid-600);
  --divider-divider: var(--color-primary-200);
  --status-filled-positive: var(--color-other-colors-cool-green-700);
  --status-filled-negative: var(--color-other-colors-red-700);
  --status-filled-warning: var(--color-other-colors-orange-red-500);
  --status-filled-blue: var(--color-other-colors-blue-600);
  --status-filled-passive: var(--color-dark-neutral-solid-500);
  --cntnr-bg-primary-active: var(--color-primary-200);
  --text-accent: var(--color-primary-600);
  --icon-accent: var(--color-primary-600);
  --cntnr-bg-other-readonly-elements: var(--color-neutral-solid-400);
  --btn-bg-primary-hover-for-active: var(--color-primary-600);
  --cntnr-bg-other-3-rd-level-list-element: var(--color-neutral-solid-300);
  --space-450: var(--spacings-36);
  --cntnr-border-subtlest: var(--color-neutral-solid-400);
  --highlight-bg: var(--color-primary-200);
  --cntnr-corner-biggest: var(--corner-radius-24);
  --cntnr-bg-transperent-default: var(--color-neutral-alpha-500);
  --cntnr-bg-none-default: #FFFFFF00;
  --cntnr-corner-large: var(--corner-radius-16);
  --cntnr-corner-big: var(--corner-radius-12);
  --cntnr-corner-normal: var(--corner-radius-8);
  --cntnr-corner-small: var(--corner-radius-4);
  --cntnr-corner-nano: var(--corner-radius-2);
  --cntnr-corner-none: var(--corner-radius-0);
  --cntnr-bg-transperent-hover: var(--color-neutral-alpha-600);
  --cntnr-bg-transperent-selected: var(--color-neutral-alpha-700);
  --cntnr-bg-secondary-hover: var(--color-primary-100);
  --cntnr-bg-secondary-active: var(--color-primary-200);
  --cntnr-corner-infinity: var(--corner-radius-infinity);
  --btn-bg-secondary-default: var(--color-neutral-solid-100);
  --btn-bg-secondary-active: var(--color-primary-200);
  --btn-bg-secondary-disable: var(--color-neutral-solid-300);
  --btn-bg-secondary-disable-alternative: var(--color-neutral-solid-200);
  --btn-bg-secondary-hover: var(--color-primary-500);
  --btn-bg-secondary-hover-for-active: var(--color-primary-300);
  --btn-bg-secondary-click-pressed: var(--color-primary-300);
  --btn-bg-secondary-border-default: var(--color-primary-200);
  --btn-bg-secondary-border-active: var(--color-primary-500);
  --cntnr-bg-primary-disabled: var(--color-neutral-solid-300);
  --btn-bg-danger-default: var(--color-other-colors-red-700);
  --btn-bg-danger-hover: var(--color-other-colors-red-500);
  --btn-bg-danger-active: var(--color-other-colors-red-800);
  --btn-bg-danger-disable: var(--color-neutral-solid-300);
  --btn-bg-danger-disable-alternative: var(--color-neutral-solid-200);
  --btn-bg-danger-hover-for-active: var(--color-other-colors-red-600);
  --btn-bg-danger-click-pressed: var(--color-other-colors-red-900);
  --btn-bg-danger-border-default: var(--color-other-colors-red-700);
  --btn-bg-danger-border-active: var(--color-other-colors-red-800);
  --btn-corner-corner: var(--corner-radius-infinity);
  --dropdown-stroke-default: var(--color-primary-200);
  --unique-colors-blue: var(--color-other-colors-blue-700);
  --unique-colors-green: var(--color-other-colors-warm-green-600);
  --unique-colors-yellow: var(--color-other-colors-warm-yellow-600);
  --unique-colors-marine: var(--color-other-colors-blue-400);
  --unique-colors-purple: var(--color-primary-600);
  --unique-colors-cyan: var(--color-other-colors-cool-green-500);
  --unique-colors-brown: var(--color-other-colors-orange-red-700);
  --unique-colors-lime: var(--color-other-colors-warm-green-500);
  --unique-colors-grey: var(--color-dark-neutral-solid-400);
  --unique-colors-red: var(--color-other-colors-red-500);
  --table-bg-defaulttable: var(--cntnr-bg-primary-default);
  --table-bg-zebra: var(--color-neutral-solid-125);
  --table-bg-secondarytable: var(--color-neutral-solid-300);
  --dropdown-bg-default: var(--color-neutral-solid-200);
  --field-corner-field-corner: var(--corner-radius-infinity);
  --tabs-corner-tabs-corner: var(--corner-radius-infinity);
  --dropdown-corner-dropdown-corner: var(--corner-radius-infinity);
  --cntnr-bg-other-danger-danger: var(--color-other-colors-red-100);
  --cntnr-bg-other-success: var(--color-other-colors-cool-green-100);
  --cntnr-bg-other-warning: var(--color-other-colors-orange-100);
  --cntnr-bg-other-blue: var(--color-other-colors-blue-100);
  --cntnr-bg-other-neutral: var(--color-neutral-solid-150);
  --btn-bg-transperent-hover: var(--color-neutral-alpha-0);
  --btn-bg-transperent-active: var(--color-neutral-alpha-0);
  --btn-bg-transperent-disable: var(--color-neutral-solid-300);
  --btn-bg-transperent-disable-alternative: var(--color-neutral-solid-200);
  --btn-bg-transperent-hover-for-active: var(--color-neutral-alpha-0);
  --btn-bg-transperent-click-pressed: var(--color-neutral-alpha-0);
  --cntnr-border-white: var(--color-neutral-solid-100);
  --checkbox-corner-checkbox-corner: var(--corner-radius-4);
  --chips-corner-chips-corner: var(--corner-radius-infinity);
  --tag-corner-tag-corner: var(--corner-radius-infinity);
  --table-bg-thirdtable: var(--color-neutral-solid-400);
  --cntnr-bg-other-danger-dangerhover: var(--color-other-colors-red-200);
  --table-bg-hovertable: var(--color-primary-100);
  --node-property: #0AD8B6;
  --node-business-group: #C3CF14;
  --node-central-node: #121B39;
  --node-sanction: #D00F3C;
  --node-phone: #24D366;
  --node-court: #ED7B58;
  --node-group-list-element: #B6BDCF;
  --node-email: #D007F3;
  --node-unknown: #E4E2FF;
  --node-person: #015CE5;
  --node-location: #6C2AB9;
  --node-company: #F4D20A;
  --checkbox-color-default-checkbox: var(--color-primary-500);
  --checkbox-color-hover-checkbox: var(--color-primary-400);
  --checkbox-color-selected-checkbox: var(--color-primary-600);
  --cntnr-border-active: var(--color-primary-500);
  --cntnr-bg-third-default: var(--color-neutral-solid-125);
  --cntnr-bg-third-hover: var(--color-neutral-solid-200);
  --cntnr-bg-third-selected: var(--color-neutral-solid-300);
  --status-trasperent-positive: var(--color-other-colors-cool-green-200);
  --status-trasperent-negative: var(--color-other-colors-red-200);
  --status-trasperent-passive: var(--color-neutral-solid-400);
  --status-trasperent-warning: var(--color-other-colors-orange-red-100);
  --status-trasperent-blue: var(--color-other-colors-blue-100);
  --status-trasperent-primary: var(--color-primary-200);
  --status-filled-primary: var(--color-primary-500);
  --btn-bg-danger-secondary-default: var(--color-neutral-solid-100);
  --btn-bg-danger-secondary-active: var(--color-other-colors-red-200);
  --btn-bg-danger-secondary-hover: var(--color-other-colors-red-500);
  --btn-bg-danger-secondary-hover-for-active: var(--color-other-colors-red-300);
  --btn-bg-danger-secondary-click-pressed: var(--color-other-colors-red-300);
  --btn-bg-danger-secondary-disable: var(--color-neutral-solid-300);
  --btn-bg-danger-secondary-disable-alternative: var(--color-neutral-solid-200);
  --btn-bg-transperent-danger-hover: var(--color-neutral-alpha-0);
  --btn-bg-transperent-danger-active: var(--color-neutral-alpha-0);
  --btn-bg-transperent-danger-hover-for-active: var(--color-neutral-alpha-0);
  --btn-bg-transperent-danger-click-pressed: var(--color-neutral-alpha-0);
  --btn-bg-transperent-danger-disable: var(--color-neutral-solid-300);
  --btn-bg-transperent-danger-disable-alternative: var(--color-neutral-solid-200);
  --colors-color-1: #A685E2;
  --colors-color-2: #22C0F1;
  --colors-color-3: #55E18D;
  --colors-color-4: #E8E86C;
  --colors-color-5: #FF9E58;
  --colors-color-6: #E2406A;
  --colors-color-7: #EF7BE3;
  --colors-color-8: #9360A9;
  --colors-color-9: #52ACFF;
  --colors-color-10: #58D764;
  --colors-color-11: #FBE947;
  --colors-color-12: #FF903E;
  --colors-color-13: #FF5A5A;
  --colors-color-14: #EF7BE3;
  --colors-color-15: #5A78F0;
  --colors-color-16: #72D572;
  --colors-color-17: #F5E476;
  --colors-color-18: #FF9E58;
  --colors-color-19: #F05A5A;
  --colors-color-20: #D3689A;
  --monochrome-color-21: #8E65DA;
  --monochrome-color-22: #622EC1;
  --monochrome-color-23: #421F81;
  --monochrome-color-24: #311761;
  --monochrome-color-25: #BAA0E8;
  --monochrome-color-26: #C4AEEC;
  --monochrome-color-27: #D7C9F2;
  --monochrome-color-28: #EBE4F9;
  --colors-color-21: #AEADAD;

  /* screen sizes + responsive heading sizes (desktop defaults) */
  --screen-size-1440-desktop: 1440px;
  --screen-size-1024: 1024px;
  --screen-size-1648: 1648px;
  --screen-size-768-tablet: 768px;
  --screen-size-375-mobile: 375px;
  --screen-size-1920: 1920px;
  --screen-size-2460-2k: 2460px;
  --screen-size-1280: 1280px;
  --typo-sizes-h450: 18px;
  --typo-sizes-h500: 20px;
  --typo-sizes-h600: 24px;
  --typo-sizes-h700: 29px;
  --typo-sizes-h800: 35px;
  --typo-sizes-h400: 16px;
  --typo-sizes-h300: 14px;
  --typo-sizes-h200: 12px;
  --typo-sizes-h100: 11px;
  --screen-size-auto-screen-size: 1440px;

  /* brand font family (Liga360 = Lato) */
  --liga-font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --liga-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---- United brand: primitive/value overrides only (semantics follow automatically) ---- */
.blog-scope [data-brand="united"] {
  --color-primary-100: #DBE8FF;
  --color-primary-200: #B7D1FF;
  --color-primary-300: #6EA2FF;
  --color-primary-400: #025CFF;
  --color-primary-500: #003594;
  --color-primary-600: #003085;
  --color-primary-800: #001B4A;
  --color-primary-1000: #00050F;
  --color-primary-700: #002568;
  --color-primary-900: #00102C;
  --color-neutral-solid-200: #EEF1F8;
  --color-neutral-solid-300: #E7ECF5;
  --color-neutral-solid-400: #E0E6F2;
  --color-neutral-solid-500: #D1D6E2;
  --color-neutral-solid-600: #9398A1;
  --color-neutral-solid-700: #747981;
  --color-neutral-solid-800: #454A50;
  --color-neutral-solid-900: #303438;
  --color-neutral-solid-1000: #1C1E20;
  --color-dark-neutral-solid-100: #B3BCCF;
  --color-dark-neutral-solid-200: #96A1BD;
  --color-dark-neutral-solid-300: #7887AA;
  --color-dark-neutral-solid-400: #6C7DA3;
  --color-dark-neutral-solid-500: #5D6E94;
  --color-dark-neutral-solid-600: #536284;
  --color-dark-neutral-solid-700: #4B5877;
  --color-dark-neutral-solid-800: #384259;
  --color-dark-neutral-solid-900: #252C3B;
  --color-dark-neutral-solid-1000: #13161E;
  --color-other-colors-red-700: #D60000;
  --color-other-colors-red-500: #FF585D;
  --color-other-colors-red-900: #810000;
  --brand-colors-brand-primary: #003594;
  --color-other-colors-orange-red-500: #FF9E1B;
  --color-other-colors-orange-red-300: #FFC79F;
  --color-other-colors-orange-red-700: #D65900;
  --color-other-colors-blue-300: #9FBEFF;
  --color-other-colors-blue-500: #588EFF;
  --color-other-colors-blue-700: #0045D6;
  --color-other-colors-cool-green-500: #42EA60;
  --color-other-colors-cool-green-700: #0D741F;
  --color-other-colors-cool-green-900: #042F0C;
  --color-other-colors-orange-500: #F49B35;
  --color-other-colors-orange-700: #CA710B;
  --color-other-colors-orange-900: #512D04;
  --color-other-colors-red-400: #FF8383;
  --color-other-colors-red-300: #FFACAC;
  --color-other-colors-red-200: #FFD6D6;
  --color-other-colors-red-100: #FFF1F1;
  --color-other-colors-red-600: #FF2D2D;
  --color-other-colors-cool-green-300: #9CF4AC;
  --color-other-colors-cool-green-200: #C1F8CB;
  --color-other-colors-cool-green-100: #E6FCEA;
  --color-other-colors-cool-green-400: #8FF3A1;
  --color-other-colors-cool-green-600: #15C134;
  --color-other-colors-cool-green-800: #094D15;
  --color-other-colors-orange-600: #F2870D;
  --color-other-colors-orange-400: #F9C386;
  --color-other-colors-orange-300: #FAD1A1;
  --color-other-colors-orange-200: #FCE4C9;
  --color-other-colors-orange-100: #FEF8F2;
  --color-other-colors-orange-800: #794406;
  --color-other-colors-red-1000: #2B0015;
  --color-other-colors-red-800: #AC1100;
  --color-other-colors-cool-green-1000: #04270A;
  --color-other-colors-blue-100: #E3ECFF;
  --color-other-colors-blue-200: #D6E3FF;
  --color-other-colors-blue-400: #83ABFF;
  --color-other-colors-blue-600: #2D71FF;
  --color-other-colors-blue-800: #0037AC;
  --color-other-colors-blue-900: #002981;
  --color-other-colors-blue-1000: #000E2B;
  --color-other-colors-orange-red-100: #FFE7D6;
  --color-other-colors-orange-red-200: #FFD7BA;
  --color-other-colors-orange-red-400: #FFB783;
  --color-other-colors-orange-red-600: #FF6C02;
  --color-other-colors-orange-red-800: #AC4700;
  --color-other-colors-orange-red-900: #813600;
  --color-other-colors-orange-red-1000: #562400;
  --color-other-colors-orange-1000: #281702;
  --shadow-z-index-eleveation-1-color: #9E9E9E0D;
  --shadow-z-index-eleveation-2-color: #9E9E9E26;
  --shadow-z-index-eleveation-3-color: #9E9E9E40;
  --color-neutral-solid-150: #F4F6FA;
  --brand-colors-brand-secondary: #00A3E1;
  --color-neutral-solid-350: #E2E7F0;
  --color-neutral-solid-450: #DCE1ED;
  --text-subtlest: var(--color-neutral-solid-700);
  --link-default: var(--color-primary-400);
  --link-visited: var(--color-primary-700);
  --cntnr-border-default: var(--color-neutral-solid-300);
  --btn-bg-primary-default: var(--color-primary-500);
  --btn-bg-primary-active: var(--color-primary-600);
  --cntnr-bg-other-page-background: #E8EAED;
  --btn-bg-primary-hover: var(--color-primary-400);
  --divider-divider: var(--color-neutral-solid-200);
  --cntnr-corner-biggest: var(--corner-radius-0);
  --cntnr-bg-transperent-default: var(--color-neutral-solid-125);
  --cntnr-corner-large: var(--corner-radius-0);
  --cntnr-corner-big: var(--corner-radius-0);
  --cntnr-bg-transperent-hover: var(--color-neutral-solid-200);
  --cntnr-bg-transperent-selected: var(--color-neutral-solid-300);
  --btn-bg-secondary-disable: var(--color-neutral-alpha-300);
  --btn-bg-secondary-hover: var(--color-primary-400);
  --btn-bg-secondary-border-default: var(--color-neutral-solid-900);
  --btn-corner-corner: var(--corner-radius-0);
  --unique-colors-blue: #015CE5;
  --unique-colors-green: #4CA334;
  --unique-colors-yellow: #EBCC44;
  --unique-colors-marine: #0F8BD0;
  --unique-colors-purple: #640FD0;
  --unique-colors-cyan: #0FD08B;
  --unique-colors-brown: #D0600F;
  --unique-colors-lime: #9ED00F;
  --unique-colors-grey: #626C8B;
  --unique-colors-red: #E25C7B;
  --table-bg-secondarytable: var(--color-neutral-solid-200);
  --dropdown-bg-default: var(--color-neutral-solid-125);
  --field-corner-field-corner: var(--corner-radius-0);
  --tabs-corner-tabs-corner: var(--corner-radius-0);
  --dropdown-corner-dropdown-corner: var(--corner-radius-0);
  --btn-bg-transperent-hover: var(--color-primary-100);
  --btn-bg-transperent-active: var(--color-primary-200);
  --btn-bg-transperent-hover-for-active: var(--color-primary-300);
  --btn-bg-transperent-click-pressed: var(--color-primary-300);
  --checkbox-corner-checkbox-corner: var(--corner-radius-0);
  --chips-corner-chips-corner: var(--corner-radius-2);
  --tag-corner-tag-corner: var(--corner-radius-0);
  --table-bg-thirdtable: var(--color-neutral-solid-300);
  --btn-bg-danger-secondary-hover: var(--color-other-colors-red-400);
  --btn-bg-danger-secondary-disable: var(--color-neutral-alpha-300);
  --btn-bg-transperent-danger-hover: var(--color-other-colors-red-100);
  --btn-bg-transperent-danger-active: var(--color-other-colors-red-200);
  --btn-bg-transperent-danger-hover-for-active: var(--color-other-colors-red-300);
  --btn-bg-transperent-danger-click-pressed: var(--color-other-colors-red-300);
  --colors-color-1: #5A78F0;
  --colors-color-2: #72D572;
  --colors-color-3: #F5E476;
  --colors-color-4: #FF9E58;
  --colors-color-5: #F05A5A;
  --colors-color-6: #D3689A;
  --colors-color-7: #A685E2;
  --colors-color-8: #22C0F1;
  --colors-color-9: #55E18D;
  --colors-color-10: #E8E86C;
  --colors-color-11: #FF9E58;
  --colors-color-12: #E2406A;
  --colors-color-13: #EF7BE3;
  --colors-color-14: #9360A9;
  --colors-color-15: #52ACFF;
  --colors-color-16: #58D764;
  --colors-color-17: #FBE947;
  --colors-color-18: #FF903E;
  --colors-color-19: #FF5A5A;
  --colors-color-20: #EF7BE3;
  --monochrome-color-21: #2D53EC;
  --monochrome-color-22: #1339D2;
  --monochrome-color-23: #0F2DA4;
  --monochrome-color-24: #0B2075;
  --monochrome-color-25: #7F96F3;
  --monochrome-color-26: #A3B4F7;
  --monochrome-color-27: #C8D2FA;
  --monochrome-color-28: #EDF0FD;

  /* brand font family (United = E-Ukraine) */
  --liga-font-family: 'e-Ukraine', 'E-Ukraine', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---- Responsive headings: tablet & mobile shrink H450–H800 ---- */
@media (max-width: 1023.98px) {
  .blog-scope {
    --typo-sizes-h450: 16px;
    --typo-sizes-h500: 18px;
    --typo-sizes-h600: 20px;
    --typo-sizes-h700: 24px;
    --typo-sizes-h800: 29px;
    --screen-size-auto-screen-size: 768px;
  }
}


/* ── tokens.figma.css ─────────────────────────────── */
/* ──────────────────────────────────────────────────────────────────────────
   tokens.css — pulled from Figma file pst3SX769EGBP51DywLD1x (anchor 1757:192390)
   Source of truth for all colors, spacing, radii, typography, shadows.
   Naming follows Figma variable paths (lower-cased, slashes → dashes).
   ────────────────────────────────────────────────────────────────────────── */

.blog-scope {
  /* ── Color · text ─────────────────────────────────────────────────────── */
  --text-default:      #25252a;
  --text-subtle:       #4b4b55;
  --text-subtlest:     #9898a3;
  --text-alternative:  #ffffff;
  --text-active:       #7267e6;
  --text-accent:       #5048a1;

  /* ── Color · icon ─────────────────────────────────────────────────────── */
  --icon-default:           #25252a;
  --icon-subtle:            #4b4b55;
  --icon-subtlest:          #9898a3;
  --icon-accent:            #5048a1;
  --icon-active:            #7267e6;
  --icon-alternative-active:#ffffff;

  /* ── Color · container background ─────────────────────────────────────── */
  --cntnr-bg-primary-default:    #ffffff;
  --cntnr-bg-primary-active:     #e5e2ff;
  --cntnr-bg-secondary-default:  #fafafc;
  --cntnr-bg-transparent-default:#fbfbff80;     /* 50% over white */
  --cntnr-bg-page:               #efeff5;

  /* ── Color · container border ─────────────────────────────────────────── */
  --cntnr-border-default:  #e5e2ff;
  --cntnr-border-selected: #9486ff;
  --divider:               #e5e2ff;

  /* ── Color · button ───────────────────────────────────────────────────── */
  --btn-bg-primary-default:   #151517;
  --btn-bg-primary-active:    #7267e6;
  --btn-bg-secondary-default: #ffffff;
  --btn-border-secondary:     #e5e2ff;

  /* ── Color · dropdown ─────────────────────────────────────────────────── */
  --dropdown-bg-default: #fafafc;
  --dropdown-stroke:     #e5e2ff;

  /* ── Color · semantic surface (alt aliases) ───────────────────────────── */
  --surface-default:    #ffffff;
  --surface-cta:        #151517;
  --border-default:     #e5e2ff;
  --link-default:       #7267e6;

  /* ── Color · monochrome (purple) ramp ─────────────────────────────────── */
  --color-primary-200: #e5e2ff;
  --mono-21: #8e65da;
  --mono-22: #622ec1;
  --mono-24: #311761;
  --mono-25: #baa0e8;
  --mono-26: #c4aeec;
  --mono-27: #d7c9f2;
  --mono-28: #ebe4f9;

  /* ── Spacing scale ────────────────────────────────────────────────────── */
  --space-0:    0;
  --space-025:  2px;
  --space-050:  4px;
  --space-075:  6px;
  --space-100:  8px;
  --space-150:  12px;
  --space-200:  16px;
  --space-250:  20px;
  --space-300:  24px;
  --space-400:  32px;
  --space-500:  40px;
  --space-800:  64px;
  --space-1000: 80px;

  /* short aliases (Figma "Spacing system") */
  --spacing-xs: 4px;
  --spacing-s:  8px;
  --spacing-l:  16px;

  /* ── Corner radius ────────────────────────────────────────────────────── */
  --radius-none:     0;
  --radius-small:    4px;
  --radius-normal:   8px;
  --radius-big:      12px;
  --radius-large:    16px;
  --radius-biggest:  24px;
  --radius-infinity: 10000px;     /* pill */

  --radius-150: 12px;
  --radius-300: 24px;

  --btn-radius:      var(--radius-infinity);
  --dropdown-radius: var(--radius-infinity);
  --tabs-radius:     var(--radius-infinity);

  /* ── Shadows / elevations ─────────────────────────────────────────────── */
  /* Figma "Elevations/Elevation 2": drop-shadow, color #a8a8a826, blur 50, spread 10, offset 0 0 */
  --elevation-2:  0 0 50px 10px rgba(168, 168, 168, 0.15);

  /* ── Effects ──────────────────────────────────────────────────────────── */
  --blur-glass: 16px;

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --screen-desktop:    1440px;
  --screen-tablet:     1024px;
  --screen-tablet-min: 768px;
  --screen-mobile:     375px;
  --container-max:     1280px;        /* page content frame inside 1440 */

  /* ── Typography · families ────────────────────────────────────────────── */
  --font-family-base:
    'Lato',
    -apple-system, BlinkMacSystemFont,
    'Segoe UI', Helvetica, Arial, sans-serif;

  /* ── Typography · weights ─────────────────────────────────────────────── */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ── Typography · scale (size / line-height / letter-spacing) ─────────── */
  /* H200 ─ small caption */
  --t-h200-semibold-size:   12px;
  --t-h200-semibold-lh:     15px;
  --t-h200-semibold-ls:     0.25px;

  /* H300 ─ small text */
  --t-h300-regular-size:    14px;
  --t-h300-regular-lh:      16px;
  --t-h300-regular-ls:      0.29px;

  --t-h300-paragraph-size:  14px;
  --t-h300-paragraph-lh:    20px;
  --t-h300-paragraph-ls:    0.29px;

  --t-h300-medium-size:     14px;
  --t-h300-medium-lh:       16px;
  --t-h300-medium-ls:       0.15px;

  --t-h300-bold-size:       14px;
  --t-h300-bold-lh:         16px;
  --t-h300-bold-ls:         0.15px;

  --t-h300-cta-size:        14px;
  --t-h300-cta-lh:          20px;
  --t-h300-cta-ls:          0.38px;

  --t-h300-caps-size:       14px;
  --t-h300-caps-lh:         20px;
  --t-h300-caps-ls:         0.29px;

  /* H400 ─ body */
  --t-h400-regular-size:    16px;
  --t-h400-regular-lh:      24px;
  --t-h400-regular-ls:      0.33px;

  --t-h400-paragraph-size:  16px;
  --t-h400-paragraph-lh:    24px;
  --t-h400-paragraph-ls:    0.33px;

  --t-h400-medium-size:     16px;
  --t-h400-medium-lh:       20px;
  --t-h400-medium-ls:       0.13px;

  --t-h400-bold-size:       16px;
  --t-h400-bold-lh:         24px;
  --t-h400-bold-ls:         0.13px;

  /* H450 ─ subhead */
  --t-h450-medium-size:     18px;
  --t-h450-medium-lh:       22px;
  --t-h450-medium-ls:       0.10px;

  --t-h450-bold-size:       18px;
  --t-h450-bold-lh:         22px;
  --t-h450-bold-ls:         0.10px;

  /* H500 ─ section head */
  --t-h500-medium-size:     20px;
  --t-h500-medium-lh:       24px;
  --t-h500-medium-ls:       0.06px;

  --t-h500-bold-size:       20px;
  --t-h500-bold-lh:         24px;
  --t-h500-bold-ls:         0.06px;

  /* H600 ─ display M */
  --t-h600-medium-size:     24px;
  --t-h600-medium-lh:       28px;
  --t-h600-medium-ls:       -0.02px;

  /* H700 ─ display L (page H1) */
  --t-h700-semibold-size:   29px;
  --t-h700-semibold-lh:     32px;
  --t-h700-semibold-ls:     -0.14px;

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   320ms;

  /* ── Z-index ──────────────────────────────────────────────────────────── */
  --z-sticky:   100;
  --z-dropdown: 200;
  --z-overlay:  500;
  --z-modal:    600;
  --z-tooltip:  700;
}


/* ── typography.css ─────────────────────────────── */
/* =====================================================================
   Liga DS — typography.
   The 40 published Figma text styles (H100–H800). Font SIZE references the
   responsive --typo-sizes-h* tokens (H450–H800 shrink on tablet/mobile);
   line-height / letter-spacing / case are fixed per the published style.
   Font family follows the brand (--liga-font-family: Lato / e-Ukraine).
   Each style is exposed as a .liga-typo-<name> utility class consumed by
   the Text / Heading components.
   ===================================================================== */

.blog-scope :where(.liga-typo-h100-regular),

.blog-scope :where(.liga-typo-h100-medium),

.blog-scope :where(.liga-typo-h100-semibold),

.blog-scope :where(.liga-typo-h100-caps),

.blog-scope :where(.liga-typo-h200-regular),

.blog-scope :where(.liga-typo-h200-medium),

.blog-scope :where(.liga-typo-h200-semibold),

.blog-scope :where(.liga-typo-h200-caps),

.blog-scope :where(.liga-typo-h300-regular),

.blog-scope :where(.liga-typo-h300-regular-paragraph),

.blog-scope :where(.liga-typo-h300-medium),

.blog-scope :where(.liga-typo-h300-bold),

.blog-scope :where(.liga-typo-h300-caps),

.blog-scope :where(.liga-typo-h300-cta),

.blog-scope :where(.liga-typo-h400-regular),

.blog-scope :where(.liga-typo-h400-regular-paragraph),

.blog-scope :where(.liga-typo-h400-medium),

.blog-scope :where(.liga-typo-h400-bold),

.blog-scope :where(.liga-typo-h400-caps),

.blog-scope :where(.liga-typo-h450-regular),

.blog-scope :where(.liga-typo-h450-medium),

.blog-scope :where(.liga-typo-h450-bold),

.blog-scope :where(.liga-typo-h450-caps),

.blog-scope :where(.liga-typo-h500-regular),

.blog-scope :where(.liga-typo-h500-medium),

.blog-scope :where(.liga-typo-h500-bold),

.blog-scope :where(.liga-typo-h500-caps),

.blog-scope :where(.liga-typo-h600-regular),

.blog-scope :where(.liga-typo-h600-medium),

.blog-scope :where(.liga-typo-h600-bold),

.blog-scope :where(.liga-typo-h600-caps),

.blog-scope :where(.liga-typo-h700-regular),

.blog-scope :where(.liga-typo-h700-medium),

.blog-scope :where(.liga-typo-h700-semibold),

.blog-scope :where(.liga-typo-h700-bold),

.blog-scope :where(.liga-typo-h700-caps),

.blog-scope :where(.liga-typo-h800-regular),

.blog-scope :where(.liga-typo-h800-medium),

.blog-scope :where(.liga-typo-h800-bold),

.blog-scope :where(.liga-typo-h800-caps) {
  font-family: var(--liga-font-family);
  font-style: normal;
  margin: 0;
}

/* ---- H100 (11px) ---- */
.blog-scope .liga-typo-h100-regular { font-size: var(--typo-sizes-h100); line-height: 14px; font-weight: 400; letter-spacing: 0.23px; }
.blog-scope .liga-typo-h100-medium { font-size: var(--typo-sizes-h100); line-height: 14px; font-weight: 500; letter-spacing: 0.23px; }
.blog-scope .liga-typo-h100-semibold { font-size: var(--typo-sizes-h100); line-height: 14px; font-weight: 600; letter-spacing: 0.18px; }
.blog-scope .liga-typo-h100-caps { font-size: var(--typo-sizes-h100); line-height: 11px; font-weight: 500; letter-spacing: 0.40px; text-transform: uppercase; }

/* ---- H200 (12px) ---- */
.blog-scope .liga-typo-h200-regular { font-size: var(--typo-sizes-h200); line-height: 15px; font-weight: 400; letter-spacing: 0.25px; }
.blog-scope .liga-typo-h200-medium { font-size: var(--typo-sizes-h200); line-height: 15px; font-weight: 500; letter-spacing: 0.25px; }
.blog-scope .liga-typo-h200-semibold { font-size: var(--typo-sizes-h200); line-height: 15px; font-weight: 600; letter-spacing: 0.25px; }
.blog-scope .liga-typo-h200-caps { font-size: var(--typo-sizes-h200); line-height: 15px; font-weight: 500; letter-spacing: 0.25px; text-transform: uppercase; }

/* ---- H300 (14px — main body) ---- */
.blog-scope .liga-typo-h300-regular { font-size: var(--typo-sizes-h300); line-height: 16px; font-weight: 400; letter-spacing: 0.29px; }
.blog-scope .liga-typo-h300-regular-paragraph { font-size: var(--typo-sizes-h300); line-height: 20px; font-weight: 400; letter-spacing: 0.29px; }
.blog-scope .liga-typo-h300-medium { font-size: var(--typo-sizes-h300); line-height: 16px; font-weight: 500; letter-spacing: 0.15px; }
.blog-scope .liga-typo-h300-bold { font-size: var(--typo-sizes-h300); line-height: 16px; font-weight: 700; letter-spacing: 0.15px; }
.blog-scope .liga-typo-h300-caps { font-size: var(--typo-sizes-h300); line-height: 20px; font-weight: 400; letter-spacing: 0.29px; text-transform: uppercase; }
.blog-scope .liga-typo-h300-cta { font-size: var(--typo-sizes-h300); line-height: 20px; font-weight: 700; letter-spacing: 0.38px; text-transform: uppercase; }

/* ---- H400 (16px) ---- */
.blog-scope .liga-typo-h400-regular { font-size: var(--typo-sizes-h400); line-height: 20px; font-weight: 400; letter-spacing: 0.33px; }
.blog-scope .liga-typo-h400-regular-paragraph { font-size: var(--typo-sizes-h400); line-height: 24px; font-weight: 400; letter-spacing: 0.33px; }
.blog-scope .liga-typo-h400-medium { font-size: var(--typo-sizes-h400); line-height: 20px; font-weight: 500; letter-spacing: 0.13px; }
.blog-scope .liga-typo-h400-bold { font-size: var(--typo-sizes-h400); line-height: 20px; font-weight: 700; letter-spacing: 0.13px; }
.blog-scope .liga-typo-h400-caps { font-size: var(--typo-sizes-h400); line-height: 24px; font-weight: 400; letter-spacing: 0.40px; text-transform: uppercase; }

/* ---- H450 (18px → 16) ---- */
.blog-scope .liga-typo-h450-regular { font-size: var(--typo-sizes-h450); line-height: 22px; font-weight: 400; letter-spacing: 0.35px; }
.blog-scope .liga-typo-h450-medium { font-size: var(--typo-sizes-h450); line-height: 22px; font-weight: 500; letter-spacing: 0.10px; }
.blog-scope .liga-typo-h450-bold { font-size: var(--typo-sizes-h450); line-height: 22px; font-weight: 700; letter-spacing: 0.10px; }
.blog-scope .liga-typo-h450-caps { font-size: var(--typo-sizes-h450); line-height: 24px; font-weight: 400; letter-spacing: 0.40px; text-transform: uppercase; }

/* ---- H500 (20px → 18) ---- */
.blog-scope .liga-typo-h500-regular { font-size: var(--typo-sizes-h500); line-height: 24px; font-weight: 400; letter-spacing: 0.38px; }
.blog-scope .liga-typo-h500-medium { font-size: var(--typo-sizes-h500); line-height: 24px; font-weight: 500; letter-spacing: 0.06px; }
.blog-scope .liga-typo-h500-bold { font-size: var(--typo-sizes-h500); line-height: 24px; font-weight: 700; letter-spacing: 0.06px; }
.blog-scope .liga-typo-h500-caps { font-size: var(--typo-sizes-h500); line-height: 24px; font-weight: 700; letter-spacing: 0.38px; text-transform: uppercase; }

/* ---- H600 (24px → 20) ---- */
.blog-scope .liga-typo-h600-regular { font-size: var(--typo-sizes-h600); line-height: 28px; font-weight: 400; letter-spacing: 0.42px; }
.blog-scope .liga-typo-h600-medium { font-size: var(--typo-sizes-h600); line-height: 28px; font-weight: 500; letter-spacing: -0.02px; }
.blog-scope .liga-typo-h600-bold { font-size: var(--typo-sizes-h600); line-height: 28px; font-weight: 700; letter-spacing: -0.02px; }
.blog-scope .liga-typo-h600-caps { font-size: var(--typo-sizes-h600); line-height: 28px; font-weight: 400; letter-spacing: 0.42px; text-transform: uppercase; }

/* ---- H700 (29px → 24) ---- */
.blog-scope .liga-typo-h700-regular { font-size: var(--typo-sizes-h700); line-height: 32px; font-weight: 400; letter-spacing: 0.38px; }
.blog-scope .liga-typo-h700-medium { font-size: var(--typo-sizes-h700); line-height: 32px; font-weight: 500; letter-spacing: 0.38px; }
.blog-scope .liga-typo-h700-semibold { font-size: var(--typo-sizes-h700); line-height: 32px; font-weight: 600; letter-spacing: -0.14px; }
.blog-scope .liga-typo-h700-bold { font-size: var(--typo-sizes-h700); line-height: 32px; font-weight: 700; letter-spacing: -0.14px; }
.blog-scope .liga-typo-h700-caps { font-size: var(--typo-sizes-h700); line-height: 32px; font-weight: 400; letter-spacing: -0.14px; text-transform: uppercase; }

/* ---- H800 (35px → 29) ---- */
.blog-scope .liga-typo-h800-regular { font-size: var(--typo-sizes-h800); line-height: 38px; font-weight: 400; letter-spacing: 0.04px; }
.blog-scope .liga-typo-h800-medium { font-size: var(--typo-sizes-h800); line-height: 38px; font-weight: 500; letter-spacing: 0.04px; }
.blog-scope .liga-typo-h800-bold { font-size: var(--typo-sizes-h800); line-height: 38px; font-weight: 700; letter-spacing: -0.31px; }
.blog-scope .liga-typo-h800-caps { font-size: var(--typo-sizes-h800); line-height: 38px; font-weight: 400; letter-spacing: 0.04px; text-transform: uppercase; }


/* ── site-brand.css ─────────────────────────────── */
/* =====================================================================
   site-brand.css — БРЕНД САЙТУ як третій бренд дизайн-системи.

   liga-ds багатобрендова за задумом: у tokens.generated.css є `:root`
   (Liga360 — Lato, primary-500 #7267e6) і `[data-brand="united"]`
   (United — e-Ukraine, primary-500 #003594). Блог — частина сайту
   ligazakon.net, тому додаємо третій бренд і НЕ чіпаємо ні компоненти,
   ні семантичні токени: усе йде через кілька примітивів.

   Ставиться атрибутом: <html data-brand="site">.

   Кожне значення нижче — з живого сайту, не на око:
     • шрифт        — computed font-family body/h1 на ligazakon.net → Inter
     • primary-500  — #4D479D: `.site-header .btn--primary { --btn-main }`
                      у реальному CSS сайту + найчастіший насичений фон на сторінці
     • primary-600  — #3a366b: `--btn-hover` тієї ж кнопки
     • primary-200  — #eaebfc: світла лавандова плашка з CSS сайту

   Що НЕ переозначуємо і чому:
     • --color-primary-900 у ДС = #1b1937 — це ВЖЕ колір заголовків сайту,
       збіг точний, тому лишаємо як є;
     • відступи, радіуси, нейтралі, типографічна шкала — беруться з ДС без змін;
     • кнопки — сайтові (`.btn--solid/--outline`), рішення Serg 30.07.2026,
       щоб на сторінці не було двох систем кнопок.
   ===================================================================== */

.blog-scope {
  --liga-font-family: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto,
                      Helvetica, Arial, sans-serif;

  --color-primary-500: #4D479D;   /* акцент: заповнені стани, --text-active */
  --color-primary-600: #3a366b;   /* темніший: --text-accent, ховери */
  --color-primary-200: #eaebfc;   /* світла плашка: --status-trasperent-primary,
                                     --cntnr-border-default */
  /* Чорнило: у ДС найтемніший нейтрал #25252a, на сайті текст #0E0F1B
     (computed color body на ligazakon.net). Переозначаємо примітив, щоб
     --text-default у компонентах збігався з текстом сторінки. */
  --color-neutral-solid-900: #0E0F1B;

  /* ⚠️ Курований tokens.figma.css (138 змінних, вкладення епіку) прописує частину
     СЕМАНТИЧНИХ токенів літералами, а не через var(--color-primary-*) — і тим
     розриває брендову індирекцію: без цих рядків --text-accent лишався
     ліловим #5048a1 замість акценту сайту (перевірено в браузері).
     Тому переозначаємо точково — рівно ті, що зафарбовані брендом. */
  /* tokens.figma.css задає --text-default літералом #25252a (нейтраль ДС), тому
     переозначення примітиву --color-neutral-solid-900 саме по собі не долітало:
     заголовки лишалися сірувато-чорними замість чорнила сайту #0E0F1B. */
  --text-default: var(--color-neutral-solid-900);
  --text-accent:  var(--color-primary-600);
  --text-active:  var(--color-primary-500);
  --icon-accent:  var(--color-primary-600);
  --icon-active:  var(--color-primary-500);
  --border-default:          var(--color-primary-200);
  --cntnr-border-default:    var(--color-primary-200);
  --cntnr-bg-primary-active: var(--color-primary-200);
  --cntnr-border-selected:   var(--color-primary-500);
  --cntnr-bg-page: #ffffff;       /* фон сторінок сайту білий, а не #efeff5 з ДС */
  --font-family-base: var(--liga-font-family);   /* власна змінна курованого файлу */
}

/* Фокус-обведення WCAG 2.1 AA. У ДС воно заскоуплене в `.liga-root`, якого ми
   не ставимо (базова типографіка в блозі сайтова), тому повертаємо тут — інакше
   компоненти втратили б видимий фокус з клавіатури. */
.blog-scope :where([data-brand="site"]) :focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}


/* ── site-brand-tokens.css ─────────────────────────────── */
/* site-brand-tokens.css — ЗГЕНЕРОВАНО shared/build-site-brand-tokens.py.
   Не правити руками: перегенерується.

   Токени, яким файли ДС проставили брендовий колір літералом (а не через
   var(--color-primary-*)), і тому вони не слухалися перемикання бренду.
   Тут вони перенаправлені на палітру сайту. Рішення про самі кольори —
   у site-brand.css, тут лише механічне перенаправлення.
*/

.blog-scope {
  --border-default: var(--color-primary-200);       /* світла плашка */
  --btn-bg-primary-active: var(--color-primary-500);/* акцент */
  --btn-border-secondary: var(--color-primary-200); /* світла плашка */
  --cntnr-bg-primary-active: var(--color-primary-200);/* світла плашка */
  --cntnr-border-default: var(--color-primary-200); /* світла плашка */
  --divider: var(--color-primary-200);              /* світла плашка */
  --dropdown-stroke: var(--color-primary-200);      /* світла плашка */
  --icon-accent: var(--color-primary-600);          /* темніший акцент */
  --icon-active: var(--color-primary-500);          /* акцент */
  --link-default: var(--color-primary-500);         /* акцент */
  --text-accent: var(--color-primary-600);          /* темніший акцент */
  --text-active: var(--color-primary-500);          /* акцент */
}


/* ── variables.css ─────────────────────────────── */
/* =====================================================================
   variables.css — токени UI сайту ligazakon.net для блогу.

   Рішення (Serg, 30.07.2026): блог — ЧАСТИНА сайту, тому вигляд береться з
   живого ligazakon.net, а НЕ з токенів продуктової ДС (там Lato, на сайті Inter).

   Джерела кожного значення — підтверджені, не на око:
     • computed styles живого https://ligazakon.net/ (30.07.2026)
     • css/site-chrome.css — реальний CSS хедера/футера сайту (звідти #4D479D,
       #1B1937, #eaebfc, #C2C7F8, ховери)

   ⚠️ Файл підключається ПІСЛЯ inline-<style> прототипу — інакше прототипний
   #6C4DE0/Montserrat переб'є ці значення (однакова специфічність, виграє
   останній у каскаді).

   Немає потрібного токена — це питання до дизайнера, а не привід вписати hex.
   ===================================================================== */

.blog-scope {
  /* Шрифт: Inter, локальні woff2 (assets/fonts) — див. css/font.css.
     ⛔ Не Montserrat (це прототип) і не Lato (це продуктова ДС). */
  --site-font: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Акцент і чорнило */
  --site-accent: #4D479D;         /* .btn--primary --btn-main */
  --site-accent-hover: #3a366b;   /* .btn--primary --btn-hover */
  --site-accent-soft: #625bb1;
  --site-ink: #0E0F1B;            /* computed color body */
  --site-heading: #1B1937;        /* computed color h1 + .site-footer__title */
  --site-muted: #6b6b80;
  --site-lav: #eaebfc;            /* світлий фон-плашка з site-chrome.css */
  --site-lav-2: #C2C7F8;
  /* ⚠️ Бордер контейнера — НАПІВПРОЗОРЕ ЧОРНИЛО, не лаванда (правка 05.08.2026).
     Було `#eaebfc`, тобто РІВНО той самий колір, що й --site-lav. Через це
     бордер зникав щоразу, коли елемент лягав на лавандову підкладку — так
     двічі губилися рамки (цитата, підпис до картинки), і губилися б далі.
     Значення взяте з живого ligazakon.net: computed border картки
     `.solution__cards-card` = rgba(27,25,55,.08), `.ai__content-item` = .10.
     Напівпрозоре чорнило видиме на БУДЬ-ЯКОМУ фоні, у т.ч. на градієнті —
     саме тому сайт ним і користується. */
  --site-line: rgba(27, 25, 55, .08);
  --site-bg: #ffffff;             /* computed background body */

  /* ── Фірмова графіка сайту (computed styles ligazakon.net, 05.08.2026) ────
     Головна сайту не має ЖОДНОЇ секції з пласким фоном: 11 секцій підряд, і
     кінцевий колір кожної точно дорівнює початковому кольору наступної —
     від лаванди через м'яту, рожевий і кригу назад у лаванду перед футером.
     Це і є найпомітніша ознака «одного сайту». Відтінки ланцюга: */
  --site-tint-mint: #F2FBFA;      /* .roles → .folders */
  --site-tint-pink: #FAEAFC;      /* .folders → .ai */
  --site-tint-ice:  #EEF5FF;      /* .solution → .stats */
  --site-tint-cyan: #ECFBFC;      /* .ecosystem → .section_academy */
  --site-tint-pale: #F8F7FF;      /* фон секцій ВНУТРІШНІХ сторінок (/price) */

  /* Заливка одного слова в заголовку (background-clip:text). На сайті так
     підсвічені «All-in-one», «АІ-офіс», «Одна підписка», «Покращіть». */
  --site-grad-text: linear-gradient(95deg, #967BDE .3%, #236BEB 90%);

  /* Темна поверхня сайту (.wpcf7 у секції підписки): #1B1937 → #7169E6.
     ⚠️ Кінцева зупинка 120%, а не 100%, і це не косметика: чистий #7169E6
     дає з білим текстом контраст 4.31 — нижче норми 4.5. Зупинка за межею
     кадру лишає видимим максимум ~#635CC9 (контраст 5.40). Той самий прийом
     уже стояв у .inline-cta з accent-soft 120%.
     Широкий варіант — для низьких смуг, де при 140deg видно лише темний край. */
  --site-grad-dark:      linear-gradient(140deg, #1B1937 0%, #7169E6 120%);
  --site-grad-dark-wide: linear-gradient(100deg, #1B1937 0%, #7169E6 120%);

  /* Пастельна плашка 72×72 під іконку (.solution__cards-img, .section_academy__card-icon) */
  --site-grad-tile: linear-gradient(150deg, #F8FFFF 21.87%, #ECE5FF 54.36%, #CDDFFF 86.85%);

  /* Типографіка (computed styles живого сайту) */
  /* H1 сайту плавний, не фіксований. Формула — .hero__title з теми liga360:
     від 32px до 64px між 576px і 992px вьюпорта. Взято з CSS сайту, не на око. */
  --site-h1-size: clamp(32px, calc(32px + 32 * (calc(var(--vw, 1vw) * 100) - 576px) / 416), 64px);
  --site-h1-weight: 600;
  --site-text-size: 16px;
  --site-text-weight: 400;

  /* Розкладка */
  --site-container: 1140px;       /* computed max-width .container */
  --site-radius-pill: 40px;       /* computed border-radius кнопки хедера */
  /* Радіуси — з частотного аналізу теми liga360 (найужиткованіші значення):
     20px (20×) для карток/панелей, 10px (14×) для дрібного. Не вигадані. */
  --site-radius-card: 20px;
  --site-radius-sm: 10px;
  /* Тінь-акцент сайту (site-chrome.css / тема): 0 0 15px #C2C7F8.
     Лишена для довідки — у макеті БІЛЬШЕ НЕ ВЖИВАЄТЬСЯ, див. нижче. */
  --site-shadow-accent: 0 0 15px var(--site-lav-2);

  /* ── Тіні: правило дизайн-системи ────────────────────────────────────────
     Правка Serg (31.07.2026): «у нас зазвичай бордери використовуються в таких
     елементах, а не тіні, подивись по дизайн-системі».
     Перевірено в liga-ds:
       • токени висоти є — --shadow-z-index-eleveation-1/2/3-{color,blur,spread},
         колір НЕЙТРАЛЬНО-СІРИЙ (#A8A8A8 при 5%/15%/25%), без зсуву;
       • box-shadow у компонентах ДС зустрічається ЛИШЕ у накладок (modal, menu,
         popover, select, tooltip, date-picker) і у фокус-кільцях;
       • статичні контейнери ДС тримаються на 1px solid var(--cntnr-border-default).
     Звідки була лілова тінь: я узагальнив site-chrome.css
     `.site-footer__social-link { box-shadow: 0 0 5px rgba(194,199,248,.5) }`
     (світіння на кружечку 30px) до 15px на картках — це МОЄ узагальнення,
     на сайті картки такої тіні не мають.
     Тому: статичні поверхні — без тіні (їх тримає бордер), підняття при
     наведенні й накладки — нейтральна висота ДС. */
  --ds-elevation-1: 0 0 var(--shadow-z-index-eleveation-1-blur)
                    var(--shadow-z-index-eleveation-1-spread)
                    var(--shadow-z-index-eleveation-1-color);
  --ds-elevation-2: 0 0 var(--shadow-z-index-eleveation-2-blur)
                    var(--shadow-z-index-eleveation-2-spread)
                    var(--shadow-z-index-eleveation-2-color);
  --ds-elevation-3: 0 0 var(--shadow-z-index-eleveation-3-blur)
                    var(--shadow-z-index-eleveation-3-spread)
                    var(--shadow-z-index-eleveation-3-color);

  /* Перевизначаємо змінні прототипів, щоб їхній вміст одразу читався як сайт.
     Імена --font-h/--font-b/--primary приходять з inline-<style> прототипів. */
  --font-h: var(--site-font);
  --font-b: var(--site-font);
  --primary: var(--site-accent);
  --primary-d: var(--site-accent-hover);
  --primary-rgb: 77, 71, 157;     /* #4D479D — прототип уживає rgba(var(--primary-rgb)…) */
  --ink: var(--site-ink);
  --muted: var(--site-muted);
  --lav: var(--site-lav);
  --lav-2: var(--site-lav-2);
  --line: var(--site-line);
  /* Градієнт аватарів у прототипі — на парі --violet-1/--violet-2. Переводимо
     на акцентну пару сайту, щоб аватар не був чужого відтінку.
     ⚠️ Без цього мапінгу градієнт зникав і аватар ставав прозорим. */
  --violet-1: var(--site-accent-hover);   /* #3a366b */
  --violet-2: var(--site-accent-soft);    /* #625bb1 */
  /* Статусні кольори — з ТЕМИ сайту liga360, не бутстрапні дефолти навмання:
     --green: #1e9651 і --color-warning: #ffb900 — власні змінні теми;
     danger #dc3545 і subtle-фони — ті, якими тема користується через
     bootstrap-класи alert-… та badge-…
     ⚠️ У коментарях CSS не можна писати зірочку одразу перед скісною рискою:
     ця пара закриває коментар передчасно, і наступне оголошення мовчки гине.
     Саме так тут загинув --green, і знайшлось це лише через провал контрасту
     (у .role-card.hr колір ролі виходив чорнилом замість зеленого). */
  --green: #1e9651;
  --green-bg: #d1e7dd;
  --red: #dc3545;
  --red-bg: #f8d7da;
  --yellow: #ffb900;
  --yellow-bg: #fff3cd;
  --radius: var(--site-radius-card);
  --radius-lg: var(--site-radius-card);
  /* Імена з прототипу. --shadow-s стояв на СТАТИЧНИХ поверхнях (.section,
     .faq-item, .author-card, .art-related .article-card) — у всіх є бордер
     1px var(--line), тож тінь тут зайва за правилом ДС.
     --shadow лишався на ПІДНЯТТІ (.author-card:hover, .feat-card) — там
     нейтральна висота ДС. */
  --shadow: var(--ds-elevation-1);
  --shadow-s: none;
  --white: #fff;
}


/* ── global.css ─────────────────────────────── */
/* =====================================================================
   global.css — глобальна база блогу на UI сайту.

   Постановка епіка LIGA-9364: «стилі — окремі CSS-файли для кожного блоку
   в папці css (плюс variables.css та global.css)». Це той global.css.

   Тут — тільки те, що спільне для ВСІХ сторінок блогу: шрифт, базова
   типографіка, контейнер. Все, що стосується конкретного блоку, живе у
   власному css-файлі блоку.
   ===================================================================== */

.blog-scope {
  margin: 0;
  background: var(--site-bg);
  color: var(--site-ink);
  font-family: var(--site-font);
  font-size: var(--site-text-size);
  font-weight: var(--site-text-weight);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.blog-scope h1,
 .blog-scope h2,
 .blog-scope h3,
 .blog-scope h4,
 .blog-scope h5 {
  font-family: var(--site-font);
  color: var(--heading-color, var(--site-heading));
  margin: 0 0 .5em;
}

/* ── Заголовки на ІНВЕРТОВАНИХ поверхнях ──────────────────────────────────
   Проблема (правка Serg 31.07.2026: «тёмный текст на тёмном фоне»): блок із
   фіолетовим градієнтом ставить color:#fff лише на СОБІ, а заголовок
   усередині матчиться правилом вище напряму — успадкування програє будь-якому
   правилу, що влучає в елемент. Через це h3 виходили чорнилом на темному:
   контраст 1.67–2.42 при нормі 4.5 (дефект був ще в прототипі з Jira).
   Рішення: інвертовані поверхні переозначають --heading-color на власний
   колір тексту. Нову темну поверхню — дописувати сюди, це єдине місце. */
.blog-scope .inline-cta,

.blog-scope .checklist-hdr,

.blog-scope .product-bridge,

.blog-scope .sidebar-cta,

.blog-scope .feat-card,

.blog-scope .sb-banner,

.blog-scope .deadline-box,

.blog-scope [data-surface="inverted"] {
  --heading-color: currentColor;
}

/* Кнопки (у т.ч. біла головна на темних поверхнях) — у site-buttons.css:
   одна система на весь блог, див. коментар у тому файлі. */

/* ── Хлібні крихти: одна смуга на ВСІХ сторінках ─────────────────────────
   Правки Serg (31.07 і 03.08.2026): «скрізь однакові, прикріплені зверху,
   а не всередині дивів».
   Сам вигляд крихт задає ld-breadcrumbs.css (компонент ДС) — тут лише смуга.

   Вигляд: після того як варіанти розʼїхались, зупинились на такому —
   ЛАВАНДОВА смуга на всю ширину, крихти лежать прямо на ній — без білої
   підкладки всередині. Смуга кріпиться одразу під шапкою, а не всередині
   контентних дивів: тільки так вона однакова на всіх сторінках незалежно
   від того, який у сторінки фон. */
.blog-scope .crumbs-bar {
  background: var(--color-primary-100);
  border-bottom: 1px solid var(--cntnr-border-default);
  padding: var(--space-150) 0;
}
/* Прототипне правило `.crumbs-bar` зі сторінки статті викидається в
   build-blocks.py (MIGRATED_DROP) — інакше воно вигравало б у каскаді
   (блоки підключені ПІСЛЯ global.css) і смуга там була б іншою. */

/* ── Зображення статей ───────────────────────────────────────────────────
   Обкладинка сторінки статті. Тікет вимагає hero 1200×630 — це 16:9, тому
   тримаємо співвідношення через aspect-ratio, а не фіксовану висоту:
   картинка лишається правильною на будь-якій ширині колонки. */
.blog-scope .article-hero-img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--cntnr-corner-large);
  margin-bottom: var(--space-250);
  background: var(--color-primary-200);   /* поки картинка вантажиться */
}
.blog-scope .article-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.blog-scope a { color: var(--site-accent); }

   
    /* Контейнер сайту. `.wrap` — ім'я з прототипів, `.container` — з живого сайту;
   тримаємо обидва, щоб і прототипний вміст, і реальний хром лягли в одну сітку. */
    .blog-scope .wrap,
    .blog-scope .container {
        width: 100%;
        max-width: var(--site-container);
        margin-inline: auto;
        padding-inline: 20px;
        box-sizing: border-box;
    }

.site-header {
    background-color: white;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.08);
}

.blog-scope .external-form__message--success,
.blog-scope .external-form__message--error {
    color: black;
}

.blog-scope .wpcf7 form .wpcf7-response-output {
    margin: auto !important;
}

.blog-scope .form-ui__checkbox {
    display: block;
}


.blog-scope img {
    max-width: 100%;
    height: auto;
}

/* ⚠️ <picture> не має створювати бокс у розкладці.
   Обгортка зʼявилась при переході на WebP (shared/to-webp.py):
   <picture><source …webp><img …jpg></picture>. Пастка не у WebP, а в тому,
   що правила вигляду написані як `.thumb img { height:100% }` і
   `.ld-avatar__img { height:100% }` — відсоткова висота рахується від
   БАТЬКА, а батьком раптом ставав би <picture> з висотою auto. Наслідок
   був би: обкладинки карток і аватарки схлопуються в нуль.
   display:contents прибирає лише бокс — <img> лишається дитиною .thumb,
   і жодного наявного правила чіпати не треба. Той самий прийом, що для
   .include-host у site-chrome.css. */
.blog-scope picture { display: contents; }

/* Прототипна плашка «ПРОТОТИП для ТЗ…» не має бути в превью: макет має
   виглядати як продукт (правило Serg, 20.07.2026). Знімаємо, якщо лишилась. */
.blog-scope .proto-note,
 .blog-scope .prototype-note { display: none !important; }


/* ── blog-cats.css ─────────────────────────────── */
/* =====================================================================
   blog-cats.css — стрічка категорій блогу (другий ряд хедера).

   Блок 1.1 з LIGA-9360: «Нижній — стрічка категорій блогу … Активна категорія —
   фіолетовий підкреслений таб. Категорії керуються з адмінки … при 10+
   категоріях — горизонтальний скрол стрічки». Кожен пункт — реальний лінк на
   /blog/{category-slug}/ (вимога SEO, не клієнтська фільтрація).

   Цього ряду на живому сайті НЕМА — він специфічний для блогу, тому окремий
   файл, а не правка site-chrome.css (той — реальний хром сайту, його не чіпаємо).
   ===================================================================== */

/* ТЗ: «Два ряди, sticky». Стрічка — СУСІД хедера, а не його дитина: реальний
   .site-header це flex-рядок, а його .site-header__col-menu має width:100%,
   тому при flex-wrap лого вилітало на власний рядок. Тому не чіпаємо розкладку
   сайту, а ставимо стрічку одразу під хедером і робимо її теж sticky.
   79px — висота хедера з site-chrome.css (.site-header__col-menu/-logo);
   вона однакова на всіх брейкпоінтах, у медіа-запиті змінюється лише padding. */
.blog-scope { --site-header-h: 79px; }

@media (max-height: 860px) {
    .blog-scope {
        --site-header-h: 56px;
    }
}

.blog-scope .blog-cats {
  position: sticky;
  top: var(--site-header-h);
  z-index: 999;                 /* під хедером (.site-header має 1000) */
  width: 100%;
  border-bottom: 1px solid var(--site-line);
  background: var(--site-bg);
  box-shadow: 0 1px 0 rgba(27, 25, 55, .04);
}

.blog-scope .blog-cats__row {
  display: flex;
  /* ⚠️ nowrap, і це не косметика. Тут стояв flex-wrap: wrap, який суперечив
     сусідньому overflow-x: auto — при переносі рядок ніколи не ширший за
     контейнер, тому скрол не вмикався НІКОЛИ (заміряно на 430px:
     scrollWidth == clientWidth == 430). Замість одного рядка зі скролом смуга
     розкладалась на три і виростала з 48px до 97px, а оскільки вона ще й
     sticky — накривала собою перший блок статті. Це і є «430px пливе верстка
     першого блоку» з рев'ю.
     Із nowrap працює те, що й задумувалось у коментарі вище: смуга лишається
     одним рядом, зайві категорії ховаються в горизонтальний скрол. */
  flex-wrap: nowrap;
  align-items: stretch;
  column-gap: 28px;
  width: 100%;
  max-width: var(--site-container);
  margin-inline: auto;
  padding-inline: 20px;
  box-sizing: border-box;
  /* 10+ категорій — скрол, а не перенос: стрічка лишається одним рядом */
  overflow-x: auto;
  scrollbar-width: none;
}
.blog-scope .blog-cats__row::-webkit-scrollbar { display: none; }

.blog-scope .blog-cats__item {
  flex: none;
  padding: 14px 0;
  color: var(--site-ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}

.blog-scope .blog-cats__item:hover { color: var(--site-accent); }

/* Активна — фіолетовий підкреслений таб (формулювання тікета).
   Вага та сама, що в неактивних (500, як таби ролей на головній). Тут стояло
   600, і рядок «стрибав» при перемиканні розділу (рев'ю блогу, п. 1.1):
   жирніший пункт ширшає, а рядок відцентрований — тож зсувались УСІ пункти,
   не лише активний. Активність тримають колір і підкреслення. */
.blog-scope .blog-cats__item.is-active {
  color: var(--site-accent);
  border-bottom-color: var(--site-accent);
}

/* Друга причина «стрибання» — смуга прокрутки. Розділ без матеріалів
   (порожній листинг) нижчий за екран, і смуги в нього немає; сусідній розділ
   довгий — смуга є. Вікно звужується на її ширину, а відцентрований рядок
   категорій з'їжджає на пів смуги. Резерв під смугу на сторінках блогу
   прибирає зсув; на макбуках із накладною смугою правило нічого не змінює. */
html:has(.blog-scope .blog-cats) {
  scrollbar-gutter: stable;
}


.blog-scope .blog-cats .blog-cats__row {
    max-width: 1160px;
    margin-inline: auto;
    padding-inline: 22px;
    justify-content: flex-start;
}

@media (max-width: 640px) {
  .blog-scope .blog-cats__row { column-gap: 20px; }
  .blog-scope .blog-cats__item { font-size: 14px; padding: 12px 0; }
}


/* ── Секція-картка і FAQ: спільні для статті й листингів ───────────────────
   Ці правила прийшли з blog-article.css (макет it7, art-blocks.css) і лежали
   там, бо блок FAQ був тільки на статті. Тепер «FAQ статті» дозволений і в
   секціях листингів (головна, категорія, тег, hub авторів, автор, пошук), а
   ті сторінки підключають base + listing + extra — без article.css.

   Тому правила ПЕРЕНЕСЕНІ сюди, а не скопійовані: один власник, ніякого
   розходження значень між файлами.

   Чому саме base, а не extra: base підключається ПЕРШИМ на всіх сторінках
   блогу, тож пізніші перевизначення в article.css (напр. свої відступи в
   медіа-запитах) і далі перемагають. Якби правила поїхали в extra, який
   підключається ПІСЛЯ article.css, вони б перебивали ті перевизначення. */
/* ── Відступи карток: плавно, а не стрибком ────────────────────────────────
   Рев'ю: «потрібно пофіксити цей блок, щоб при адаптиві відступи коректно
   відпрацьовували; це стосується всіх подібних блоків».

   Було: у кожної картки два фіксовані значення й один різкий стрибок на 900px
   (.section 26/32 → 20/18, .article-card 32/36 → 22/20). Між 900 і 1400px —
   саме там, де колонка статті найвужча, — падінг лишався десктопним: заміряно
   на вікні 1100px, картка секції 384px завширшки віддавала 64px із них під
   поля. А нижче 900 падінг навпаки падав одразу на 14px, і блоки «стрибали».

   Стало: один токен на весь блог — наскільки ВІДНЯТИ від десктопного падінга.
   Нуль при ≥1400px (там усі значення такі самі, як були), 14px при ≤640px,
   лінійно між ними. Кожна картка віднімає свою частку, тому пропорції між
   великою карткою, секцією й вставками лишаються ті самі, що в макеті.

   Множник у calc пишеться без одиниць (`14 * (100vw - 640px)`), бо в CSS
   довжину можна ділити на число, але не на довжину — той самий ідіом, що вже
   стоїть у падінгах шапки в css/distribute/core.css. */
.blog-scope {
  --art-pad-cut: clamp(0px, calc(14px - 14 * (100vw - 640px) / 760), 14px);
}

.blog-scope .section { background:var(--white);border:1px solid var(--line);border-radius: var(--radius);padding:calc(26px - var(--art-pad-cut) * .6) calc(32px - var(--art-pad-cut));margin-bottom:18px;box-shadow:var(--shadow-s) }
.blog-scope .section h2 { font-size:20px;font-weight:800;color:var(--ink);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:9px }
.blog-scope .section h2 .ico { font-size:21px;font-style:normal }
.blog-scope .section h3 { font-size:16px;font-weight:700;color:var(--ink);margin:20px 0 9px }
.blog-scope .section p { color:var(--site-muted);margin-bottom:12px;line-height:1.7 }
.blog-scope .section p:last-child { margin-bottom:0 }
.blog-scope .section ul,
.blog-scope .section ol { padding-left:20px;margin-bottom:12px }
.blog-scope .section ul li,
.blog-scope .section ol li { color:var(--site-muted);margin-bottom:6px;line-height:1.6 }

.blog-scope .faq-item { background:var(--white);border:1px solid var(--line);border-radius: var(--radius);margin-bottom:10px;overflow:hidden;box-shadow:var(--shadow-s) }
.blog-scope .faq-q { width:100%;text-align:left;background:none;border:none;padding:17px 20px;font-size:15px;font-weight:700;font-family:var(--font-h);color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;gap:12px }
.blog-scope .faq-q .pm { color:var(--primary);font-size:22px;flex-shrink:0;transition:.2s;line-height:1 }
.blog-scope .faq-a { max-height:0;overflow:hidden;transition:max-height .28s ease;padding:0 20px }
.blog-scope .faq-a p { padding:0 0 17px;color:var(--site-muted);font-size:14.5px;line-height:1.7 }
.blog-scope .faq-item.open .faq-a { max-height:500px }
.blog-scope .faq-item.open .pm { transform:rotate(45deg) }

/* Медіа-запит на 900px звідси прибрано цілком: падінг веде --art-pad-cut
   (див. вище), а відступ між картками — --art-block-gap (blog-article.css).
   Обидва стискаються плавно, тож окреме значення на 900px більше не потрібне. */



/* ── Підсвітка входжень у видачі пошуку ───────────────────────────────────
   <mark> ставить BlogText.Highlight у заголовку й ліді картки. Колір —
   токен дизайн-системи --highlight-bg; текст лишаємо кольором тексту, бо
   браузерний дефолт (чорне по яскраво-жовтому) вибивається з палітри. */
.blog-scope mark {
  background: var(--highlight-bg);
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
}

/* ── Модалка форми ліда: перебиваємо Bootstrap ────────────────────────────
   У core.css живе бутстрапівський `.modal { position:fixed; top:0; left:0;
   display:none; width:100%; height:100% }`. У блозі `.modal` — це вміст
   оверлея `.ov`, і бутстрап його просто ховав: заміряно, при відкритому
   оверлеї модалка мала розмір 0×0, тобто кнопка «спрацьовувала», а вікна не
   було. Специфічність тут (0,3,0) проти (0,1,0), тому перемагаємо без
   !important. Вигляд (фон, радіус, паддінги) лишається в
   blog-article.css / blog-listing.css. */
.blog-scope .ov > .modal {
  display: block;
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

/* ── Обгортка скоупу без власного боксу ───────────────────────────────────
   Оверлей форми ліда й липка мобільна панель лежать ПОЗА <main>, а стилі до
   них написані як `.blog-scope .ov` / `.blog-scope .mob-sticky` — тобто їм
   потрібен предок зі скоупом. Але сам `.blog-scope` має
   `padding-top: var(--site-header-h)` (79px) і фон, тому така обгортка
   малювала перед підвалом порожню смугу на всю ширину (заміряно в DevTools:
   1311×79).

   display:contents прибирає лише бокс — селектори від цього не залежать, бо
   елемент лишається в дереві. Той самий прийом, що для `.blog-scope picture`
   вище. */
.blog-scope-host { display: contents; }

/* ── Обгортка скоупу в превʼю бекофісу ────────────────────────────────────
   Превʼю блока (Umbraco.Community.BlockPreview) рендерить партіал без
   сторінки, а обгортку зі скоупом дописує BlogBlockPreviewEnricher. Разом зі
   скоупом блок отримував і `padding-top: var(--site-header-h)` — тобто над
   КОЖНИМ блоком у бекофісі висіла порожня смуга 79px (заміряно в симуляції
   превʼю). На сторінці цей відступ компенсує липку шапку сайту, у превʼю
   компенсувати нічого.

   Фон лишаємо: блоки статті на сайті лежать на лавандовому --lav, і в превʼю
   вони мають виглядати так само. */
.blog-scope.blog-scope-preview { padding-top: 0; }


/* ── icons.css ─────────────────────────────── */
/* icons.css — іконки дизайн-системи замість емоджі.

   Згенеровано shared/build-icons.py з ~/Liga DS/icons/svg — правити ТАМ, не тут.
   Використання:  <span class="ic ic--checklist" aria-hidden="true"></span>
   Іконка бере колір із тексту (currentColor) і розмір із рядка (1em).
   Якщо іконка несе сенс без підпису — дати їй role="img" і aria-label.

   Лежить у blog-base.css, бо його підключають ВСІ сторінки блогу. Раніше ці
   ж 35 КБ data-URI стояли двічі — і в blog-article.css, і в blog-listing.css.
   Заодно це єдиний файл, який тягне в себе бекофісний пікер іконок
   (App_Plugins/BlogPickers): там потрібні і ці маски, і токени кольорів.
*/

.blog-scope .ic {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  vertical-align: -.125em;
  background: currentColor;
  /* сама картинка приходить із .ic--* через --ic: так URI лежить у файлі один
     раз, а не двічі заради -webkit- префікса (це вдвічі менший файл). */
  -webkit-mask-image: var(--ic);
          mask-image: var(--ic);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}
/* Крупніша іконка там, де вона — самостійний акцент блока, а не значок у рядку. */
.blog-scope .ic--xl { width: 1.5em; height: 1.5em; }

/* — → Add */
.blog-scope .ic--add { --ic: url("data:image/svg+xml,<svg height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <path d=%22M11 13H5V11H11V5H13V11H19V13H13V19H11V13Z%22 fill=%22%2325252A%22/> </svg>"); }
/* 🤖 → Bot */
.blog-scope .ic--ai { --ic: url("data:image/svg+xml,<svg height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <path d=%22M4 15C3.16667 15 2.45833 14.7083 1.875 14.125C1.29167 13.5417 1 12.8333 1 12C1 11.1667 1.29167 10.4583 1.875 9.875C2.45833 9.29167 3.16667 9 4 9V7C4 6.45 4.19583 5.97917 4.5875 5.5875C4.97917 5.19583 5.45 5 6 5H9C9 4.16667 9.29167 3.45833 9.875 2.875C10.4583 2.29167 11.1667 2 12 2C12.8333 2 13.5417 2.29167 14.125 2.875C14.7083 3.45833 15 4.16667 15 5H18C18.55 5 19.0208 5.19583 19.4125 5.5875C19.8042 5.97917 20 6.45 20 7V9C20.8333 9 21.5417 9.29167 22.125 9.875C22.7083 10.4583 23 11.1667 23 12C23 12.8333 22.7083 13.5417 22.125 14.125C21.5417 14.7083 20.8333 15 20 15V19C20 19.55 19.8042 20.0208 19.4125 20.4125C19.0208 20.8042 18.55 21 18 21H6C5.45 21 4.97917 20.8042 4.5875 20.4125C4.19583 20.0208 4 19.55 4 19V15ZM9 13C9.41667 13 9.77083 12.8542 10.0625 12.5625C10.3542 12.2708 10.5 11.9167 10.5 11.5C10.5 11.0833 10.3542 10.7292 10.0625 10.4375C9.77083 10.1458 9.41667 10 9 10C8.58333 10 8.22917 10.1458 7.9375 10.4375C7.64583 10.7292 7.5 11.0833 7.5 11.5C7.5 11.9167 7.64583 12.2708 7.9375 12.5625C8.22917 12.8542 8.58333 13 9 13ZM15 13C15.4167 13 15.7708 12.8542 16.0625 12.5625C16.3542 12.2708 16.5 11.9167 16.5 11.5C16.5 11.0833 16.3542 10.7292 16.0625 10.4375C15.7708 10.1458 15.4167 10 15 10C14.5833 10 14.2292 10.1458 13.9375 10.4375C13.6458 10.7292 13.5 11.0833 13.5 11.5C13.5 11.9167 13.6458 12.2708 13.9375 12.5625C14.2292 12.8542 14.5833 13 15 13ZM8 17H16V15H8V17ZM6 19H18V7H6V19Z%22 fill=%22%2325252A%22/> </svg>"); }
/* 🚨 → ReportAlert */
.blog-scope .ic--alert { --ic: url("data:image/svg+xml,<svg height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <path d=%22M5 20V18H6.6L8.575 11.425C8.70833 10.9917 8.95417 10.6458 9.3125 10.3875C9.67083 10.1292 10.0667 10 10.5 10H13.5C13.9333 10 14.3292 10.1292 14.6875 10.3875C15.0458 10.6458 15.2917 10.9917 15.425 11.425L17.4 18H19V20H5ZM8.7 18H15.3L13.5 12H10.5L8.7 18Z%22 fill=%22%2325252A%22/> <path d=%22M1 14H6V16H1V14Z%22 fill=%22%2325252A%22/> <path d=%22M18 14H23V16H18V14Z%22 fill=%22%2325252A%22/> <path d=%22M4.41406 6L7.9496 9.53553L6.53538 10.9497L2.99985 7.41421L4.41406 6Z%22 fill=%22%2325252A%22/> <path d=%22M13 3V8L11 8V3L13 3Z%22 fill=%22%2325252A%22/> <path d=%22M20.9492 7.41406L17.4137 10.9496L15.9995 9.53538L19.535 5.99985L20.9492 7.41406Z%22 fill=%22%2325252A%22/> </svg>"); }
/* 📊 → AnalyticsPaper */
.blog-scope .ic--analytics { --ic: url("data:image/svg+xml,<svg height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <mask id=%22mask0_3_2807%22 style=%22mask-type:alpha%22 maskUnits=%22userSpaceOnUse%22 x=%220%22 y=%220%22 width=%2224%22 height=%2224%22> <rect width=%2224%22 height=%2224%22 fill=%22%23D9D9D9%22/> </mask> <g mask=%22url%28%23mask0_3_2807%29%22> <path d=%22M4 21C3.45 21 2.97917 20.8042 2.5875 20.4125C2.19583 20.0208 2 19.55 2 19V5C2 4.45 2.19583 3.97917 2.5875 3.5875C2.97917 3.19583 3.45 3 4 3H20C20.55 3 21.0208 3.19583 21.4125 3.5875C21.8042 3.97917 22 4.45 22 5V19C22 19.55 21.8042 20.0208 21.4125 20.4125C21.0208 20.8042 20.55 21 20 21H4ZM4 19H20V5H4V19ZM6 17H18V15H6V17ZM6 13H10V7H6V13ZM12 13H18V11H12V13ZM12 9H18V7H12V9Z%22 fill=%22%2325252A%22/> </g> </svg>"); }
/* 🔔 → NotificationBellOutline */
.blog-scope .ic--bell { --ic: url("data:image/svg+xml,<svg height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <mask id=%22mask0_3_3494%22 style=%22mask-type:alpha%22 maskUnits=%22userSpaceOnUse%22 x=%220%22 y=%220%22 width=%2224%22 height=%2224%22> <rect width=%2224%22 height=%2224%22 fill=%22%23D9D9D9%22/> </mask> <g mask=%22url%28%23mask0_3_3494%29%22> <path d=%22M4 19V17H6V10C6 8.61667 6.41667 7.3875 7.25 6.3125C8.08333 5.2375 9.16667 4.53333 10.5 4.2V3.5C10.5 3.08333 10.6458 2.72917 10.9375 2.4375C11.2292 2.14583 11.5833 2 12 2C12.4167 2 12.7708 2.14583 13.0625 2.4375C13.3542 2.72917 13.5 3.08333 13.5 3.5V4.2C14.8333 4.53333 15.9167 5.2375 16.75 6.3125C17.5833 7.3875 18 8.61667 18 10V17H20V19H4ZM12 22C11.45 22 10.9792 21.8042 10.5875 21.4125C10.1958 21.0208 10 20.55 10 20H14C14 20.55 13.8042 21.0208 13.4125 21.4125C13.0208 21.8042 12.55 22 12 22ZM8 17H16V10C16 8.9 15.6083 7.95833 14.825 7.175C14.0417 6.39167 13.1 6 12 6C10.9 6 9.95833 6.39167 9.175 7.175C8.39167 7.95833 8 8.9 8 10V17Z%22 fill=%22%2325252A%22/> </g> </svg>"); }
/* ✓ → Check */
.blog-scope .ic--check { --ic: url("data:image/svg+xml,<svg height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <path d=%22M9.5501 18L3.8501 12.3L5.2751 10.875L9.5501 15.15L18.7251 5.97498L20.1501 7.39998L9.5501 18Z%22 fill=%22%2325252A%22/> </svg>"); }
/* 📋 → ListBulleted */
.blog-scope .ic--checklist { --ic: url("data:image/svg+xml,<svg height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <path d=%22M9 19V17H21V19H9ZM9 13V11H21V13H9ZM9 7V5H21V7H9ZM5 20C4.45 20 3.97917 19.8042 3.5875 19.4125C3.19583 19.0208 3 18.55 3 18C3 17.45 3.19583 16.9792 3.5875 16.5875C3.97917 16.1958 4.45 16 5 16C5.55 16 6.02083 16.1958 6.4125 16.5875C6.80417 16.9792 7 17.45 7 18C7 18.55 6.80417 19.0208 6.4125 19.4125C6.02083 19.8042 5.55 20 5 20ZM5 14C4.45 14 3.97917 13.8042 3.5875 13.4125C3.19583 13.0208 3 12.55 3 12C3 11.45 3.19583 10.9792 3.5875 10.5875C3.97917 10.1958 4.45 10 5 10C5.55 10 6.02083 10.1958 6.4125 10.5875C6.80417 10.9792 7 11.45 7 12C7 12.55 6.80417 13.0208 6.4125 13.4125C6.02083 13.8042 5.55 14 5 14ZM5 8C4.45 8 3.97917 7.80417 3.5875 7.4125C3.19583 7.02083 3 6.55 3 6C3 5.45 3.19583 4.97917 3.5875 4.5875C3.97917 4.19583 4.45 4 5 4C5.55 4 6.02083 4.19583 6.4125 4.5875C6.80417 4.97917 7 5.45 7 6C7 6.55 6.80417 7.02083 6.4125 7.4125C6.02083 7.80417 5.55 8 5 8Z%22 fill=%22%2325252A%22/> </svg>"); }
/* → → ChevronRight */
.blog-scope .ic--chevron { --ic: url("data:image/svg+xml,<svg height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <path d=%22M12.6 12L8 7.4L9.4 6L15.4 12L9.4 18L8 16.6L12.6 12Z%22 fill=%22%2325252A%22/> </svg>"); }
/* — → ChevronLeft */
.blog-scope .ic--chevron-left { --ic: url("data:image/svg+xml,<svg height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <path d=%22M11.4 12L16 16.6L14.6 18L8.6 12L14.6 6L16 7.4L11.4 12Z%22 fill=%22%2325252A%22/> </svg>"); }
/* ⏰ → Alarm */
.blog-scope .ic--clock { --ic: url("data:image/svg+xml,<svg height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <mask id=%22mask0_3_3649%22 style=%22mask-type:alpha%22 maskUnits=%22userSpaceOnUse%22 x=%220%22 y=%220%22 width=%2224%22 height=%2224%22> <rect width=%2224%22 height=%2224%22 fill=%22%23D9D9D9%22/> </mask> <g mask=%22url%28%23mask0_3_3649%29%22> <path d=%22M12 22C10.75 22 9.57914 21.7625 8.48748 21.2875C7.39581 20.8125 6.44581 20.1708 5.63748 19.3625C4.82914 18.5541 4.18748 17.6041 3.71248 16.5125C3.23748 15.4208 2.99998 14.25 2.99998 13C2.99998 11.75 3.23748 10.5791 3.71248 9.48748C4.18748 8.39581 4.82914 7.44581 5.63748 6.63748C6.44581 5.82914 7.39581 5.18748 8.48748 4.71248C9.57914 4.23748 10.75 3.99998 12 3.99998C13.25 3.99998 14.4208 4.23748 15.5125 4.71248C16.6041 5.18748 17.5541 5.82914 18.3625 6.63748C19.1708 7.44581 19.8125 8.39581 20.2875 9.48748C20.7625 10.5791 21 11.75 21 13C21 14.25 20.7625 15.4208 20.2875 16.5125C19.8125 17.6041 19.1708 18.5541 18.3625 19.3625C17.5541 20.1708 16.6041 20.8125 15.5125 21.2875C14.4208 21.7625 13.25 22 12 22ZM14.8 17.2L16.2 15.8L13 12.6V7.99998H11V13.4L14.8 17.2ZM5.59998 2.34998L6.99998 3.74998L2.74998 7.99998L1.34998 6.59998L5.59998 2.34998ZM18.4 2.34998L22.65 6.59998L21.25 7.99998L17 3.74998L18.4 2.34998ZM12 20C13.95 20 15.6041 19.3208 16.9625 17.9625C18.3208 16.6041 19 14.95 19 13C19 11.05 18.3208 9.39581 16.9625 8.03748C15.6041 6.67914 13.95 5.99998 12 5.99998C10.05 5.99998 8.39581 6.67914 7.03748 8.03748C5.67914 9.39581 4.99998 11.05 4.99998 13C4.99998 14.95 5.67914 16.6041 7.03748 17.9625C8.39581 19.3208 10.05 20 12 20Z%22 fill=%22%2325252A%22/> </g> </svg>"); }
/* — → Close */
.blog-scope .ic--close { --ic: url("data:image/svg+xml,<svg height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <path d=%22M6.4 19L5 17.6L10.6 12L5 6.4L6.4 5L12 10.6L17.6 5L19 6.4L13.4 12L19 17.6L17.6 19L12 13.4L6.4 19Z%22 fill=%22%2325252A%22/> </svg>"); }
/* 💬 → Chat */
.blog-scope .ic--comments { --ic: url("data:image/svg+xml,<svg height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <mask id=%22mask0_3_2646%22 style=%22mask-type:alpha%22 maskUnits=%22userSpaceOnUse%22 x=%220%22 y=%220%22 width=%2224%22 height=%2224%22> <rect width=%2224%22 height=%2224%22 fill=%22%23D9D9D9%22/> </mask> <g mask=%22url%28%23mask0_3_2646%29%22> <path d=%22M6 14H14V12H6V14ZM6 11H18V9H6V11ZM6 8H18V6H6V8ZM2 22V4C2 3.45 2.19583 2.97917 2.5875 2.5875C2.97917 2.19583 3.45 2 4 2H20C20.55 2 21.0208 2.19583 21.4125 2.5875C21.8042 2.97917 22 3.45 22 4V16C22 16.55 21.8042 17.0208 21.4125 17.4125C21.0208 17.8042 20.55 18 20 18H6L2 22ZM5.15 16H20V4H4V17.125L5.15 16Z%22 fill=%22%2325252A%22/> </g> </svg>"); }
/* 🏢 → Company */
.blog-scope .ic--company { --ic: url("data:image/svg+xml,<svg height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <g clip-path=%22url%28%23clip0_3_3660%29%22> <mask id=%22mask0_3_3660%22 style=%22mask-type:alpha%22 maskUnits=%22userSpaceOnUse%22 x=%220%22 y=%220%22 width=%2224%22 height=%2224%22> <rect width=%2224%22 height=%2224%22 fill=%22%23D9D9D9%22/> </mask> <g mask=%22url%28%23mask0_3_3660%29%22> <path fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M6 2.35185C6 2.15753 6.1483 2 6.33123 2H18.6688C18.8517 2 19 2.15753 19 2.35185V21.6481C19 21.8425 18.8517 22 18.6688 22H14.2106C14.0276 22 13.8793 21.8425 13.8793 21.6481V17.9808H11.1276V21.6481C11.1276 21.8425 10.9793 22 10.7964 22H6.33123C6.1483 22 6 21.8425 6 21.6481V2.35185ZM10.4395 4.46154H9.06367V7.38461H10.4395V4.46154ZM10.4395 13.2308H9.06363V16.1538H10.4395V13.2308ZM9.06363 8.84615H10.4395V11.7692H9.06363V8.84615ZM11.8096 4.46154H13.1855V7.38461H11.8096V4.46154ZM13.1912 13.2308H11.8154V16.1538H13.1912V13.2308ZM11.8154 8.84615H13.1912V11.7692H11.8154V8.84615ZM15.926 4.46154H14.5502V7.38461H15.926V4.46154ZM14.5671 13.2308H15.9429V16.1538H14.5671V13.2308ZM15.9429 8.84615H14.5671V11.7692H15.9429V8.84615Z%22 fill=%22%2325252A%22/> </g> </g> <defs> <clipPath id=%22clip0_3_3660%22> <rect width=%2224%22 height=%2224%22 fill=%22white%22/> </clipPath> </defs> </svg>"); }
/* 📅 → Calendar */
.blog-scope .ic--date { --ic: url("data:image/svg+xml,<svg height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <path d=%22M5 22C4.45 22 3.97917 21.8042 3.5875 21.4125C3.19583 21.0208 3 20.55 3 20V6C3 5.45 3.19583 4.97917 3.5875 4.5875C3.97917 4.19583 4.45 4 5 4H6V2H8V4H16V2H18V4H19C19.55 4 20.0208 4.19583 20.4125 4.5875C20.8042 4.97917 21 5.45 21 6V20C21 20.55 20.8042 21.0208 20.4125 21.4125C20.0208 21.8042 19.55 22 19 22H5ZM5 20H19V10H5V20ZM5 8H19V6H5V8ZM12 14C11.7167 14 11.4792 13.9042 11.2875 13.7125C11.0958 13.5208 11 13.2833 11 13C11 12.7167 11.0958 12.4792 11.2875 12.2875C11.4792 12.0958 11.7167 12 12 12C12.2833 12 12.5208 12.0958 12.7125 12.2875C12.9042 12.4792 13 12.7167 13 13C13 13.2833 12.9042 13.5208 12.7125 13.7125C12.5208 13.9042 12.2833 14 12 14ZM8 14C7.71667 14 7.47917 13.9042 7.2875 13.7125C7.09583 13.5208 7 13.2833 7 13C7 12.7167 7.09583 12.4792 7.2875 12.2875C7.47917 12.0958 7.71667 12 8 12C8.28333 12 8.52083 12.0958 8.7125 12.2875C8.90417 12.4792 9 12.7167 9 13C9 13.2833 8.90417 13.5208 8.7125 13.7125C8.52083 13.9042 8.28333 14 8 14ZM16 14C15.7167 14 15.4792 13.9042 15.2875 13.7125C15.0958 13.5208 15 13.2833 15 13C15 12.7167 15.0958 12.4792 15.2875 12.2875C15.4792 12.0958 15.7167 12 16 12C16.2833 12 16.5208 12.0958 16.7125 12.2875C16.9042 12.4792 17 12.7167 17 13C17 13.2833 16.9042 13.5208 16.7125 13.7125C16.5208 13.9042 16.2833 14 16 14ZM12 18C11.7167 18 11.4792 17.9042 11.2875 17.7125C11.0958 17.5208 11 17.2833 11 17C11 16.7167 11.0958 16.4792 11.2875 16.2875C11.4792 16.0958 11.7167 16 12 16C12.2833 16 12.5208 16.0958 12.7125 16.2875C12.9042 16.4792 13 16.7167 13 17C13 17.2833 12.9042 17.5208 12.7125 17.7125C12.5208 17.9042 12.2833 18 12 18ZM8 18C7.71667 18 7.47917 17.9042 7.2875 17.7125C7.09583 17.5208 7 17.2833 7 17C7 16.7167 7.09583 16.4792 7.2875 16.2875C7.47917 16.0958 7.71667 16 8 16C8.28333 16 8.52083 16.0958 8.7125 16.2875C8.90417 16.4792 9 16.7167 9 17C9 17.2833 8.90417 17.5208 8.7125 17.7125C8.52083 17.9042 8.28333 18 8 18ZM16 18C15.7167 18 15.4792 17.9042 15.2875 17.7125C15.0958 17.5208 15 17.2833 15 17C15 16.7167 15.0958 16.4792 15.2875 16.2875C15.4792 16.0958 15.7167 16 16 16C16.2833 16 16.5208 16.0958 16.7125 16.2875C16.9042 16.4792 17 16.7167 17 17C17 17.2833 16.9042 17.5208 16.7125 17.7125C16.5208 17.9042 16.2833 18 16 18Z%22 fill=%22%2325252A%22/> </svg>"); }
/* 📄 → DocumentOutlined */
.blog-scope .ic--document { --ic: url("data:image/svg+xml,<svg height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <mask id=%22mask0_3_3542%22 style=%22mask-type:alpha%22 maskUnits=%22userSpaceOnUse%22 x=%220%22 y=%220%22 width=%2224%22 height=%2224%22> <rect width=%2224%22 height=%2224%22 fill=%22%23D9D9D9%22/> </mask> <g mask=%22url%28%23mask0_3_3542%29%22> <path d=%22M6 22C5.45 22 4.97917 21.8042 4.5875 21.4125C4.19583 21.0208 4 20.55 4 20V4C4 3.45 4.19583 2.97917 4.5875 2.5875C4.97917 2.19583 5.45 2 6 2H14L20 8V20C20 20.55 19.8042 21.0208 19.4125 21.4125C19.0208 21.8042 18.55 22 18 22H6ZM13 9V4H6V20H18V9H13Z%22 fill=%22%2325252A%22/> </g> </svg>"); }
/* ✅ → CheckDoneApprove */
.blog-scope .ic--done { --ic: url("data:image/svg+xml,<svg height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <path d=%22M10.6 16.6L17.65 9.55L16.25 8.15L10.6 13.8L7.75 10.95L6.35 12.35L10.6 16.6ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z%22 fill=%22%2325252A%22/> </svg>"); }
/* ℹ → Info */
.blog-scope .ic--info { --ic: url("data:image/svg+xml,<svg height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <path d=%22M11 17H13V11H11V17ZM12 9C12.2833 9 12.5208 8.90417 12.7125 8.7125C12.9042 8.52083 13 8.28333 13 8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8C11 8.28333 11.0958 8.52083 11.2875 8.7125C11.4792 8.90417 11.7167 9 12 9ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z%22 fill=%22%2325252A%22/> </svg>"); }
/* ⚖ → Balance */
.blog-scope .ic--law { --ic: url("data:image/svg+xml,<svg height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <mask id=%22mask0_3_3387%22 style=%22mask-type:alpha%22 maskUnits=%22userSpaceOnUse%22 x=%220%22 y=%220%22 width=%2224%22 height=%2224%22> <rect width=%2224%22 height=%2224%22 fill=%22%23D9D9D9%22/> </mask> <g mask=%22url%28%23mask0_3_3387%29%22> <path d=%22M2 21V19H11V7.825C10.5667 7.675 10.1917 7.44167 9.875 7.125C9.55833 6.80833 9.325 6.43333 9.175 6H6L9 13C9 13.8333 8.65833 14.5417 7.975 15.125C7.29167 15.7083 6.46667 16 5.5 16C4.53333 16 3.70833 15.7083 3.025 15.125C2.34167 14.5417 2 13.8333 2 13L5 6H3V4H9.175C9.375 3.41667 9.73333 2.9375 10.25 2.5625C10.7667 2.1875 11.35 2 12 2C12.65 2 13.2333 2.1875 13.75 2.5625C14.2667 2.9375 14.625 3.41667 14.825 4H21V6H19L22 13C22 13.8333 21.6583 14.5417 20.975 15.125C20.2917 15.7083 19.4667 16 18.5 16C17.5333 16 16.7083 15.7083 16.025 15.125C15.3417 14.5417 15 13.8333 15 13L18 6H14.825C14.675 6.43333 14.4417 6.80833 14.125 7.125C13.8083 7.44167 13.4333 7.675 13 7.825V19H22V21H2ZM16.625 13H20.375L18.5 8.65L16.625 13ZM3.625 13H7.375L5.5 8.65L3.625 13ZM12 6C12.2833 6 12.5208 5.90417 12.7125 5.7125C12.9042 5.52083 13 5.28333 13 5C13 4.71667 12.9042 4.47917 12.7125 4.2875C12.5208 4.09583 12.2833 4 12 4C11.7167 4 11.4792 4.09583 11.2875 4.2875C11.0958 4.47917 11 4.71667 11 5C11 5.28333 11.0958 5.52083 11.2875 5.7125C11.4792 5.90417 11.7167 6 12 6Z%22 fill=%22%2325252A%22/> </g> </svg>"); }
/* 🔗 → Link */
.blog-scope .ic--link { --ic: url("data:image/svg+xml,<svg height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <path d=%22M7.5 17C6.255 17 5.1939 16.5123 4.3167 15.537C3.4389 14.5623 3 13.3833 3 12C3 10.6167 3.4389 9.43733 4.3167 8.462C5.1939 7.48733 6.255 7 7.5 7H10.2C10.455 7 10.6689 7.09567 10.8417 7.287C11.0139 7.479 11.1 7.71667 11.1 8C11.1 8.28333 11.0139 8.52067 10.8417 8.712C10.6689 8.904 10.455 9 10.2 9H7.5C6.75 9 6.1125 9.29167 5.5875 9.875C5.0625 10.4583 4.8 11.1667 4.8 12C4.8 12.8333 5.0625 13.5417 5.5875 14.125C6.1125 14.7083 6.75 15 7.5 15H10.2C10.455 15 10.6689 15.0957 10.8417 15.287C11.0139 15.479 11.1 15.7167 11.1 16C11.1 16.2833 11.0139 16.5207 10.8417 16.712C10.6689 16.904 10.455 17 10.2 17H7.5ZM9.3 13C9.045 13 8.8314 12.904 8.6592 12.712C8.4864 12.5207 8.4 12.2833 8.4 12C8.4 11.7167 8.4864 11.479 8.6592 11.287C8.8314 11.0957 9.045 11 9.3 11H14.7C14.955 11 15.1689 11.0957 15.3417 11.287C15.5139 11.479 15.6 11.7167 15.6 12C15.6 12.2833 15.5139 12.5207 15.3417 12.712C15.1689 12.904 14.955 13 14.7 13H9.3ZM13.8 17C13.545 17 13.3314 16.904 13.1592 16.712C12.9864 16.5207 12.9 16.2833 12.9 16C12.9 15.7167 12.9864 15.479 13.1592 15.287C13.3314 15.0957 13.545 15 13.8 15H16.5C17.25 15 17.8875 14.7083 18.4125 14.125C18.9375 13.5417 19.2 12.8333 19.2 12C19.2 11.1667 18.9375 10.4583 18.4125 9.875C17.8875 9.29167 17.25 9 16.5 9H13.8C13.545 9 13.3314 8.904 13.1592 8.712C12.9864 8.52067 12.9 8.28333 12.9 8C12.9 7.71667 12.9864 7.479 13.1592 7.287C13.3314 7.09567 13.545 7 13.8 7H16.5C17.745 7 18.8064 7.48733 19.6842 8.462C20.5614 9.43733 21 10.6167 21 12C21 13.3833 20.5614 14.5623 19.6842 15.537C18.8064 16.5123 17.745 17 16.5 17H13.8Z%22 fill=%22%2325252A%22/> </svg>"); }
/* 📡 → ListMonitoring */
.blog-scope .ic--monitoring { --ic: url("data:image/svg+xml,<svg height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <g clip-path=%22url%28%23clip0_3_2592%29%22> <mask id=%22mask0_3_2592%22 style=%22mask-type:alpha%22 maskUnits=%22userSpaceOnUse%22 x=%220%22 y=%220%22 width=%2224%22 height=%2224%22> <rect width=%2224%22 height=%2224%22 fill=%22%23D9D9D9%22/> </mask> <g mask=%22url%28%23mask0_3_2592%29%22> <path d=%22M3 15V13H12V15H3ZM3 10V8H21V10H3ZM3 5V3H21V5H3Z%22 fill=%22%2325252A%22/> <path d=%22M13 20.5V19.5H14V16C14 15.3083 14.2083 14.6938 14.625 14.1562C15.0417 13.6187 15.5833 13.2667 16.25 13.1V12.75C16.25 12.5417 16.3229 12.3646 16.4688 12.2188C16.6146 12.0729 16.7917 12 17 12C17.2083 12 17.3854 12.0729 17.5312 12.2188C17.6771 12.3646 17.75 12.5417 17.75 12.75V13.1C18.4167 13.2667 18.9583 13.6187 19.375 14.1562C19.7917 14.6938 20 15.3083 20 16V19.5H21V20.5H13ZM17 22C16.725 22 16.4896 21.9021 16.2937 21.7062C16.0979 21.5104 16 21.275 16 21H18C18 21.275 17.9021 21.5104 17.7063 21.7062C17.5104 21.9021 17.275 22 17 22Z%22 fill=%22%2325252A%22/> </g> </g> <defs> <clipPath id=%22clip0_3_2592%22> <rect width=%2224%22 height=%2224%22 fill=%22white%22/> </clipPath> </defs> </svg>"); }
/* ❌ → CancelOutline */
.blog-scope .ic--no { --ic: url("data:image/svg+xml,<svg height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <mask id=%22mask0_3_3958%22 style=%22mask-type:alpha%22 maskUnits=%22userSpaceOnUse%22 x=%220%22 y=%220%22 width=%2224%22 height=%2224%22> <rect width=%2224%22 height=%2224%22 fill=%22%23D9D9D9%22/> </mask> <g mask=%22url%28%23mask0_3_3958%29%22> <path d=%22M8.4 17L12 13.4L15.6 17L17 15.6L13.4 12L17 8.4L15.6 7L12 10.6L8.4 7L7 8.4L10.6 12L7 15.6L8.4 17ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z%22 fill=%22%2325252A%22/> </g> </svg>"); }
/* 👥 → GroupUsers */
.blog-scope .ic--people { --ic: url("data:image/svg+xml,<svg height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <mask id=%22mask0_3_2759%22 style=%22mask-type:alpha%22 maskUnits=%22userSpaceOnUse%22 x=%220%22 y=%220%22 width=%2224%22 height=%2224%22> <rect width=%2224%22 height=%2224%22 fill=%22%23D9D9D9%22/> </mask> <g mask=%22url%28%23mask0_3_2759%29%22> <path d=%22M1 18C0.716667 18 0.479167 17.9042 0.2875 17.7125C0.0958333 17.5208 0 17.2833 0 17V16.425C0 15.7083 0.366667 15.125 1.1 14.675C1.83333 14.225 2.8 14 4 14C4.21667 14 4.425 14.0042 4.625 14.0125C4.825 14.0208 5.01667 14.0417 5.2 14.075C4.96667 14.425 4.79167 14.7917 4.675 15.175C4.55833 15.5583 4.5 15.9583 4.5 16.375V18H1ZM7 18C6.71667 18 6.47917 17.9042 6.2875 17.7125C6.09583 17.5208 6 17.2833 6 17V16.375C6 15.8417 6.14583 15.3542 6.4375 14.9125C6.72917 14.4708 7.14167 14.0833 7.675 13.75C8.20833 13.4167 8.84583 13.1667 9.5875 13C10.3292 12.8333 11.1333 12.75 12 12.75C12.8833 12.75 13.6958 12.8333 14.4375 13C15.1792 13.1667 15.8167 13.4167 16.35 13.75C16.8833 14.0833 17.2917 14.4708 17.575 14.9125C17.8583 15.3542 18 15.8417 18 16.375V17C18 17.2833 17.9042 17.5208 17.7125 17.7125C17.5208 17.9042 17.2833 18 17 18H7ZM19.5 18V16.375C19.5 15.9417 19.4458 15.5333 19.3375 15.15C19.2292 14.7667 19.0667 14.4083 18.85 14.075C19.0333 14.0417 19.2208 14.0208 19.4125 14.0125C19.6042 14.0042 19.8 14 20 14C21.2 14 22.1667 14.2208 22.9 14.6625C23.6333 15.1042 24 15.6917 24 16.425V17C24 17.2833 23.9042 17.5208 23.7125 17.7125C23.5208 17.9042 23.2833 18 23 18H19.5ZM8.125 16H15.9C15.7333 15.6667 15.2708 15.375 14.5125 15.125C13.7542 14.875 12.9167 14.75 12 14.75C11.0833 14.75 10.2458 14.875 9.4875 15.125C8.72917 15.375 8.275 15.6667 8.125 16ZM4 13C3.45 13 2.97917 12.8042 2.5875 12.4125C2.19583 12.0208 2 11.55 2 11C2 10.4333 2.19583 9.95833 2.5875 9.575C2.97917 9.19167 3.45 9 4 9C4.56667 9 5.04167 9.19167 5.425 9.575C5.80833 9.95833 6 10.4333 6 11C6 11.55 5.80833 12.0208 5.425 12.4125C5.04167 12.8042 4.56667 13 4 13ZM20 13C19.45 13 18.9792 12.8042 18.5875 12.4125C18.1958 12.0208 18 11.55 18 11C18 10.4333 18.1958 9.95833 18.5875 9.575C18.9792 9.19167 19.45 9 20 9C20.5667 9 21.0417 9.19167 21.425 9.575C21.8083 9.95833 22 10.4333 22 11C22 11.55 21.8083 12.0208 21.425 12.4125C21.0417 12.8042 20.5667 13 20 13ZM12 12C11.1667 12 10.4583 11.7083 9.875 11.125C9.29167 10.5417 9 9.83333 9 9C9 8.15 9.29167 7.4375 9.875 6.8625C10.4583 6.2875 11.1667 6 12 6C12.85 6 13.5625 6.2875 14.1375 6.8625C14.7125 7.4375 15 8.15 15 9C15 9.83333 14.7125 10.5417 14.1375 11.125C13.5625 11.7083 12.85 12 12 12ZM12 10C12.2833 10 12.5208 9.90417 12.7125 9.7125C12.9042 9.52083 13 9.28333 13 9C13 8.71667 12.9042 8.47917 12.7125 8.2875C12.5208 8.09583 12.2833 8 12 8C11.7167 8 11.4792 8.09583 11.2875 8.2875C11.0958 8.47917 11 8.71667 11 9C11 9.28333 11.0958 9.52083 11.2875 9.7125C11.4792 9.90417 11.7167 10 12 10Z%22 fill=%22%2325252A%22/> </g> </svg>"); }
/* 👤 → AccountCircle */
.blog-scope .ic--person { --ic: url("data:image/svg+xml,<svg height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <mask id=%22mask0_3_2753%22 style=%22mask-type:alpha%22 maskUnits=%22userSpaceOnUse%22 x=%220%22 y=%220%22 width=%2224%22 height=%2224%22> <rect width=%2224%22 height=%2224%22 fill=%22%23D9D9D9%22/> </mask> <g mask=%22url%28%23mask0_3_2753%29%22> <path d=%22M5.85 17.1C6.7 16.45 7.65 15.9375 8.7 15.5625C9.75 15.1875 10.85 15 12 15C13.15 15 14.25 15.1875 15.3 15.5625C16.35 15.9375 17.3 16.45 18.15 17.1C18.7333 16.4167 19.1875 15.6417 19.5125 14.775C19.8375 13.9083 20 12.9833 20 12C20 9.78333 19.2208 7.89583 17.6625 6.3375C16.1042 4.77917 14.2167 4 12 4C9.78333 4 7.89583 4.77917 6.3375 6.3375C4.77917 7.89583 4 9.78333 4 12C4 12.9833 4.1625 13.9083 4.4875 14.775C4.8125 15.6417 5.26667 16.4167 5.85 17.1ZM12 13C11.0167 13 10.1875 12.6625 9.5125 11.9875C8.8375 11.3125 8.5 10.4833 8.5 9.5C8.5 8.51667 8.8375 7.6875 9.5125 7.0125C10.1875 6.3375 11.0167 6 12 6C12.9833 6 13.8125 6.3375 14.4875 7.0125C15.1625 7.6875 15.5 8.51667 15.5 9.5C15.5 10.4833 15.1625 11.3125 14.4875 11.9875C13.8125 12.6625 12.9833 13 12 13ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C12.8833 20 13.7167 19.8708 14.5 19.6125C15.2833 19.3542 16 18.9833 16.65 18.5C16 18.0167 15.2833 17.6458 14.5 17.3875C13.7167 17.1292 12.8833 17 12 17C11.1167 17 10.2833 17.1292 9.5 17.3875C8.71667 17.6458 8 18.0167 7.35 18.5C8 18.9833 8.71667 19.3542 9.5 19.6125C10.2833 19.8708 11.1167 20 12 20ZM12 11C12.4333 11 12.7917 10.8583 13.075 10.575C13.3583 10.2917 13.5 9.93333 13.5 9.5C13.5 9.06667 13.3583 8.70833 13.075 8.425C12.7917 8.14167 12.4333 8 12 8C11.5667 8 11.2083 8.14167 10.925 8.425C10.6417 8.70833 10.5 9.06667 10.5 9.5C10.5 9.93333 10.6417 10.2917 10.925 10.575C11.2083 10.8583 11.5667 11 12 11Z%22 fill=%22%2325252A%22/> </g> </svg>"); }
/* 📌 → PinObjectsOutline */
.blog-scope .ic--pin { --ic: url("data:image/svg+xml,<svg height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <mask id=%22mask0_3_3407%22 style=%22mask-type:alpha%22 maskUnits=%22userSpaceOnUse%22 x=%220%22 y=%220%22 width=%2224%22 height=%2224%22> <rect width=%2224%22 height=%2224%22 fill=%22%23D9D9D9%22/> </mask> <g mask=%22url%28%23mask0_3_3407%29%22> <path d=%22M16 12L18 14V16H13V22H12H11V16H6V14L8 12V5H7V3H17V5H16V12ZM8.85 14H15.15L14 12.85V5H10V12.85L8.85 14Z%22 fill=%22%2325252A%22/> </g> </svg>"); }
/* ❓ → QuestionHelp */
.blog-scope .ic--question { --ic: url("data:image/svg+xml,<svg height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <path d=%22M11.95 18C12.3 18 12.5958 17.8792 12.8375 17.6375C13.0792 17.3958 13.2 17.1 13.2 16.75C13.2 16.4 13.0792 16.1042 12.8375 15.8625C12.5958 15.6208 12.3 15.5 11.95 15.5C11.6 15.5 11.3042 15.6208 11.0625 15.8625C10.8208 16.1042 10.7 16.4 10.7 16.75C10.7 17.1 10.8208 17.3958 11.0625 17.6375C11.3042 17.8792 11.6 18 11.95 18ZM11.05 14.15H12.9C12.9 13.6 12.9625 13.1667 13.0875 12.85C13.2125 12.5333 13.5667 12.1 14.15 11.55C14.5833 11.1167 14.925 10.7042 15.175 10.3125C15.425 9.92083 15.55 9.45 15.55 8.9C15.55 7.96667 15.2083 7.25 14.525 6.75C13.8417 6.25 13.0333 6 12.1 6C11.15 6 10.3792 6.25 9.7875 6.75C9.19583 7.25 8.78333 7.85 8.55 8.55L10.2 9.2C10.2833 8.9 10.4708 8.575 10.7625 8.225C11.0542 7.875 11.5 7.7 12.1 7.7C12.6333 7.7 13.0333 7.84583 13.3 8.1375C13.5667 8.42917 13.7 8.75 13.7 9.1C13.7 9.43333 13.6 9.74583 13.4 10.0375C13.2 10.3292 12.95 10.6 12.65 10.85C11.9167 11.5 11.4667 11.9917 11.3 12.325C11.1333 12.6583 11.05 13.2667 11.05 14.15ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z%22 fill=%22%2325252A%22/> </svg>"); }
/* 🔴 → ErrorFilled */
.blog-scope .ic--risk { --ic: url("data:image/svg+xml,<svg height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <path d=%22M12 1.97461C12.2667 1.97461 12.5254 2.02064 12.7754 2.1123C13.0252 2.20394 13.2416 2.34998 13.4248 2.5498L21.4502 10.5752C21.65 10.7584 21.796 10.9748 21.8877 11.2246C21.9794 11.4746 22.0254 11.7333 22.0254 12C22.0254 12.2667 21.9794 12.521 21.8877 12.7627C21.796 13.0042 21.6501 13.2249 21.4502 13.4248L13.4248 21.4502C13.2416 21.6333 13.0252 21.7751 12.7754 21.875C12.5254 21.975 12.2667 22.0254 12 22.0254C11.7334 22.0254 11.4789 21.975 11.2373 21.875C10.9958 21.775 10.7751 21.6334 10.5752 21.4502L2.5498 13.4248C2.36662 13.2249 2.22496 13.0042 2.125 12.7627C2.025 12.521 1.97461 12.2667 1.97461 12C1.97461 11.7333 2.025 11.4746 2.125 11.2246C2.22495 10.9748 2.36666 10.7584 2.5498 10.5752L10.5752 2.5498C10.7751 2.34993 10.9958 2.20396 11.2373 2.1123C11.4789 2.02065 11.7334 1.97462 12 1.97461ZM12 14.5C11.7167 14.5 11.4788 14.5954 11.2871 14.7871C11.0954 14.9788 11 15.2167 11 15.5C11 15.7833 11.0954 16.0212 11.2871 16.2129C11.4788 16.4046 11.7167 16.5 12 16.5C12.2833 16.5 12.5212 16.4046 12.7129 16.2129C12.9046 16.0212 13 15.7833 13 15.5C13 15.2167 12.9046 14.9788 12.7129 14.7871C12.5212 14.5954 12.2833 14.5 12 14.5ZM11 13.5H13V7.5H11V13.5Z%22 fill=%22%2325252A%22/> </svg>"); }
/* 🔍 → Search */
.blog-scope .ic--search { --ic: url("data:image/svg+xml,<svg height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <path d=%22M19.6 21L13.3 14.7C12.8 15.1 12.225 15.4167 11.575 15.65C10.925 15.8833 10.2333 16 9.5 16C7.68333 16 6.14583 15.3708 4.8875 14.1125C3.62917 12.8542 3 11.3167 3 9.5C3 7.68333 3.62917 6.14583 4.8875 4.8875C6.14583 3.62917 7.68333 3 9.5 3C11.3167 3 12.8542 3.62917 14.1125 4.8875C15.3708 6.14583 16 7.68333 16 9.5C16 10.2333 15.8833 10.925 15.65 11.575C15.4167 12.225 15.1 12.8 14.7 13.3L21 19.6L19.6 21ZM9.5 14C10.75 14 11.8125 13.5625 12.6875 12.6875C13.5625 11.8125 14 10.75 14 9.5C14 8.25 13.5625 7.1875 12.6875 6.3125C11.8125 5.4375 10.75 5 9.5 5C8.25 5 7.1875 5.4375 6.3125 6.3125C5.4375 7.1875 5 8.25 5 9.5C5 10.75 5.4375 11.8125 6.3125 12.6875C7.1875 13.5625 8.25 14 9.5 14Z%22 fill=%22%2325252A%22/> </svg>"); }
/* 👁 → Eye */
.blog-scope .ic--views { --ic: url("data:image/svg+xml,<svg height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <path d=%22M12 16C13.25 16 14.3125 15.5625 15.1875 14.6875C16.0625 13.8125 16.5 12.75 16.5 11.5C16.5 10.25 16.0625 9.1875 15.1875 8.3125C14.3125 7.4375 13.25 7 12 7C10.75 7 9.6875 7.4375 8.8125 8.3125C7.9375 9.1875 7.5 10.25 7.5 11.5C7.5 12.75 7.9375 13.8125 8.8125 14.6875C9.6875 15.5625 10.75 16 12 16ZM12 14.2C11.25 14.2 10.6125 13.9375 10.0875 13.4125C9.5625 12.8875 9.3 12.25 9.3 11.5C9.3 10.75 9.5625 10.1125 10.0875 9.5875C10.6125 9.0625 11.25 8.8 12 8.8C12.75 8.8 13.3875 9.0625 13.9125 9.5875C14.4375 10.1125 14.7 10.75 14.7 11.5C14.7 12.25 14.4375 12.8875 13.9125 13.4125C13.3875 13.9375 12.75 14.2 12 14.2ZM12 19C9.56667 19 7.35 18.3208 5.35 16.9625C3.35 15.6042 1.9 13.7833 1 11.5C1.9 9.21667 3.35 7.39583 5.35 6.0375C7.35 4.67917 9.56667 4 12 4C14.4333 4 16.65 4.67917 18.65 6.0375C20.65 7.39583 22.1 9.21667 23 11.5C22.1 13.7833 20.65 15.6042 18.65 16.9625C16.65 18.3208 14.4333 19 12 19ZM12 17C13.8833 17 15.6125 16.5042 17.1875 15.5125C18.7625 14.5208 19.9667 13.1833 20.8 11.5C19.9667 9.81667 18.7625 8.47917 17.1875 7.4875C15.6125 6.49583 13.8833 6 12 6C10.1167 6 8.3875 6.49583 6.8125 7.4875C5.2375 8.47917 4.03333 9.81667 3.2 11.5C4.03333 13.1833 5.2375 14.5208 6.8125 15.5125C8.3875 16.5042 10.1167 17 12 17Z%22 fill=%22%2325252A%22/> </svg>"); }
/* ⚠ → WarningOutline */
.blog-scope .ic--warning { --ic: url("data:image/svg+xml,<svg height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22> <g clip-path=%22url%28%23clip0_148_894%29%22> <mask id=%22mask0_148_894%22 style=%22mask-type:alpha%22 maskUnits=%22userSpaceOnUse%22 x=%220%22 y=%220%22 width=%2224%22 height=%2224%22> <rect width=%2224%22 height=%2224%22 fill=%22%23D9D9D9%22/> </mask> <g mask=%22url%28%23mask0_148_894%29%22> <path d=%22M2.73445 21C1.96412 21 1.48306 20.1656 1.86902 19.499L11.1346 3.49482C11.5197 2.82954 12.4803 2.82954 12.8654 3.49483L22.131 19.499C22.5169 20.1656 22.0359 21 21.2656 21H2.73445ZM4.45 19H19.55L12 6L4.45 19ZM12 18C12.2833 18 12.5208 17.9042 12.7125 17.7125C12.9042 17.5208 13 17.2833 13 17C13 16.7167 12.9042 16.4792 12.7125 16.2875C12.5208 16.0958 12.2833 16 12 16C11.7167 16 11.4792 16.0958 11.2875 16.2875C11.0958 16.4792 11 16.7167 11 17C11 17.2833 11.0958 17.5208 11.2875 17.7125C11.4792 17.9042 11.7167 18 12 18ZM11 15H13V10H11V15Z%22 fill=%22%2325252A%22/> </g> </g> <defs> <clipPath id=%22clip0_148_894%22> <rect width=%2224%22 height=%2224%22 fill=%22white%22/> </clipPath> </defs> </svg>"); }