/* ==========================================================================
   Puzzle Bot — токены дизайн-системы лендинга
   Источник: Figma «Landing» QO1EeXYIc7UBXIwZqAdw20, нода 930-59460
   (готовый лендинг целиком, 1920×8032). Пересобрано 13.08.2026 через
   Figma Plugin API: 155 привязанных переменных, все заливки, обводки и эффекты
   прочитаны из макета, а не выведены на глаз.

   Слой один и он семантический: имена говорят о роли, не о цвете.
   Тема одна — светлая. Тёмной в Figma нет, выведенный вариант удалён
   13.08 по решению: лендинг светлый целиком, поддерживать вымысел незачем.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ── Шрифт ─────────────────────────────────────────────────────────── */
  /* Figma: Settings/font-family-* */
  --font-heading: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: Geist, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Figma: H Settings/*, P Settings/* */
  --font-weight-heading: 600;        /* Semibold — E1, H1, H2, H3 regular */
  --font-weight-heading-thin: 500;   /* Medium   — H1, H2, H3 thin */
  --font-weight-body: 400;           /* Regular  — P1…P4 regular, caption, mono */
  --font-weight-body-medium: 500;    /* Medium   — P1…P4 medium */
  --font-weight-body-bold: 600;      /* Semibold — P1, P2, P4, P5 bold */

  /* ── Типографическая шкала ─────────────────────────────────────────── */
  /* Полная шкала Kit 2.0 (нода 310-257311). Парные --*--line-height /
     --*--letter-spacing — синтаксис Tailwind v4 */
  --text-e1: 56px;                   /* Figma: Extra — hero-заголовок */
  --text-e1--line-height: 60px;
  --text-e1--letter-spacing: -1.5px;

  --text-h1: 32px;
  --text-h1--line-height: 38px;
  --text-h1--letter-spacing: -0.8px;

  --text-h2: 24px;
  --text-h2--line-height: 28px;
  --text-h2--letter-spacing: -0.8px;

  --text-h3: 20px;
  --text-h3--line-height: 24px;
  --text-h3--letter-spacing: 0px;

  --text-p1: 17px;                   /* основной текст лендинга */
  --text-p1--line-height: 24px;
  --text-p1--letter-spacing: 0px;

  --text-p2: 15px;                   /* меню, кнопки M/L, подписи */
  --text-p2--line-height: 22px;
  --text-p2--letter-spacing: 0px;

  --text-p3: 13px;                   /* кнопка S, мелкие подписи */
  --text-p3--line-height: 18px;
  --text-p3--letter-spacing: 0px;

  --text-p4: 11px;                   /* мелкая служебная подпись */
  --text-p4--line-height: 14px;
  --text-p4--letter-spacing: 0px;

  --text-p5: 9px;                    /* Figma: P5 — только Bold */
  --text-p5--line-height: 12px;
  --text-p5--letter-spacing: 0px;

  --text-caption: 14px;              /* Figma: caption — разрядка 1.5 */
  --text-caption--line-height: 21px;
  --text-caption--letter-spacing: 1.5px;

  --text-mono: 15px;                 /* Figma: monospaced — размер берётся от P2 */
  --text-mono--line-height: 22px;
  --text-mono--letter-spacing: 0px;

  /* Комфортная длина строки. ⚠️ В ките нет — наше правило вёрстки.
     В ch, потому что мера должна ехать за размером шрифта, а не за пикселями */
  --measure-title: 34ch;             /* заголовки и подписи */
  --measure-text: 62ch;              /* абзацы */

  /* ── Мобильные кегли ────────────────────────────────────────────────
     21.08.2026. У коллекции Typography в ките два режима — desktop и
     mobile, — и всё, что выше, снято с desktop. Мобильные ступени
     перенесены отдельными токенами, а не режимом: тем, кто верстает,
     удобнее видеть оба значения рядом, чем искать, какой режим включён.

     Мельчает только крупное. P1–P4 в обоих режимах одинаковы: основной
     текст на телефоне не уменьшают, иначе инструкцию станет тяжело
     читать там, где её чаще всего и читают */
  --text-e1-mobile: 42px;
  --text-e1-mobile--line-height: 46px;
  --text-h1-mobile: 28px;
  --text-h1-mobile--line-height: 32px;
  --text-h2-mobile: 22px;
  --text-h2-mobile--line-height: 30px;
  /* H3 и ниже в режиме mobile не меняются — своих токенов им не нужно */

  /* Отступ под заголовком. Figma: Extra/spacing, H1…H3/spacing */
  --spacing-after-e1: 56px;
  --spacing-after-h1: 32px;
  --spacing-after-h2: 24px;
  --spacing-after-h3: 20px;

  /* ── Цвета: поверхности ────────────────────────────────────────────── */
  --color-bg-primary: #ffffff;         /* Figma: Backgrounds/Primary — фон страницы */
  --color-surface: #ffffff;            /* Figma: Basic/Surface/Berlin/Normal — карточки кейсов */
  --color-surface-hover: #f8f8f8;      /* Figma: Primary/Berlin/05 */
  --color-surface-pressed: #ededed;    /* Figma: Primary/Berlin/11 */

  /* Нейтральная шкала Berlin целиком. Ступень = процент насыщенности серого.
     01 — подложка футера, 05 — hover, 11 — разделители, 22 — границы,
     56 — границы на наведении, 100 — вторичный текст. Держим шкалу, а не
     разрозненные значения */
  /* 21.08.2026 шкала пересобрана по киту: Александр переименовал ступени
     в Figma, и та, что мы держали под именем 05 (#f8f8f8), теперь 03.
     Под именем 05 стоит новое значение #f2f2f2 — на нём в базе знаний
     фон блока кода, таблицы и обёртки картинки. Заодно перенесены ступени
     33, 78, 120 и 140, которых у нас не было: лендингу они не понадобились */
  --color-neutral-01: #fbfbfb;       /* Figma: Primary/Berlin/01 */
  --color-neutral-03: #f8f8f8;       /* Figma: Primary/Berlin/03 */
  --color-neutral-05: #f2f2f2;       /* Figma: Primary/Berlin/05 */
  --color-neutral-11: #ededed;       /* Figma: Primary/Berlin/11 */
  --color-neutral-22: #dedfdf;       /* Figma: Primary/Berlin/22 */
  --color-neutral-33: #d0d1d2;       /* Figma: Primary/Berlin/33 */
  --color-neutral-56: #b5b5b8;       /* Figma: Primary/Berlin/56 */
  --color-neutral-78: #9a9b9e;       /* Figma: Primary/Berlin/78 */
  --color-neutral-100: #808185;      /* Figma: Primary/Berlin/100 */
  --color-neutral-120: #55575c;      /* Figma: Primary/Berlin/120 */
  --color-neutral-140: #2b2c2f;      /* Figma: Primary/Berlin/140 */

  /* ── Цвета: текст ──────────────────────────────────────────────────── */
  --color-text-primary: #2b2d33;          /* Figma: Text/Primary/Normal */
  --color-text-secondary: #808185;        /* Figma: Text/Secondary/Normal */
  --color-text-secondary-hover: #55575c;  /* Figma: Text/Secondary/Hover */
  --color-text-secondary-pressed: #2b2c2f;/* Figma: Text/Secondary/Pressed */
  --color-text-tertiary: #b5b5b8;         /* Figma: Text/Tertiary/Normal — копирайт, дисклеймер */
  /* Шкала tertiary целиком перенесена 21.08.2026: по ней живут ссылки
     хлебных крошек в базе знаний и обводка поля поиска */
  --color-text-tertiary-hover: #9a9b9e;   /* Figma: Text/Tertiary/Hover */
  --color-text-tertiary-pressed: #808185; /* Figma: Text/Tertiary/Pressed */
  --color-text-on-primary: #ffffff;       /* Figma: Text/OnPrimary/Normal */
  --color-text-link: #4294ff;             /* Figma: Text/Link/Normal */
  --color-text-link-hover: #0f70dd;       /* Figma: Text/Link/Hover */
  --color-text-link-pressed: #004ec3;     /* Figma: Text/Link/Pressed */

  /* ── Цвета: бренд ──────────────────────────────────────────────────── */
  /* На готовом лендинге синий один: Primary/Main/Brand = #4294ff. Второй
     синий #268cff, из-за которого 05.08 держали два токена, на ноде 930:59460
     не встречается ни разу — hero-заголовок теперь набран Text/Primary.
     Свели к одному 13.08 */
  /* ⚠️ 21.08.2026: ссылка исправлена. Переменная Primary/Main/Brand в ките
     равна #268cff — тот самый «второй синий», который в сборке 13.08 сочли
     несуществующим. Цвет лендинга берётся не из неё: #4294ff отдают
     Basic/Active/Normal, Button/Primary/Normal, Text/Link/Normal и
     Utilitarian/Info/100. Значение верное, ошибочной была подпись */
  --color-brand: #4294ff;            /* Figma: Basic/Active/Normal */
  --color-logo: #4294ff;             /* логотип в шапке и футере */

  /* ── Цвета: границы и заливки ──────────────────────────────────────── */
  --color-border: #dedfdf;           /* Figma: Basic/Stroke (Border)/Normal */
  /* Наведение и нажатие обводки — по ним ходит поле поиска базы знаний */
  --color-border-hover: #b5b5b8;     /* Figma: Basic/Stroke (Border)/Hover */
  --color-border-pressed: #9a9b9e;   /* Figma: Basic/Stroke (Border)/Pressed */
  --color-divider: #80818529;          /* Figma: Basic/Divider — линии FAQ и колонок */
  --color-overlay: #2b2d334d;        /* Figma: Basic/Overlay/M — подложка модалок */
  /* Плотные подложки: L — просмотр картинки, XL — полноэкранный просмотр
     на телефоне, где под картинкой не должно просвечивать ничего */
  --color-overlay-l: #00000099;      /* Figma: Basic/Overlay/L */
  --color-overlay-xl: #000000cc;     /* Figma: Basic/Overlay/XL */
  --color-fill-muted: #8081855c;     /* Figma: Primary/Berlin/Opacity/26 */
  --color-fill-secondary: #78788029; /* Figma: Fills/Secondary */

  /* ── Цвета: подсказка ──────────────────────────────────────────────── */
  /* Kit 2.0, компонент Tooltip (t74DdsUCbV7JieZEdq3IsY, нода 4457:8395).
     Поверхность совпадает по значению с Text/Primary, но роль другая:
     это подложка всплывающей подсказки, и красить её текстовым токеном
     значит связать два несвязанных решения */
  --color-tooltip-surface: #2b2d33; /* Figma: Tooltip/Surface */
  --color-tooltip-text: #ffffff;    /* Figma: Tooltip/Text */

  /* ── Цвета: статусы ────────────────────────────────────────────────── */
  /* Info совпадает с брендом по значению, но роль другая: Info — это шкала
     под подложки и заливки, бренд — точечный акцент. Шкала нужна целиком:
     карточки лендинга красятся 01 (фон) + 05 (обводка) */
  --color-info-01: #f4f9ff;          /* Figma: Utilitarian/Info/01 — фон карточки-фичи */
  --color-info-05: #ebf3ff;          /* Figma: Utilitarian/Info/05 — обводка карточки, фон плитки */
  --color-info-opacity-09: #4294ff17;/* Figma: Utilitarian/Info/Opacity/09 — подложка
                                        карточки блога под курсором */
  --color-info-11: #e1eeff;          /* Figma: Utilitarian/Info/11 */
  --color-info-22: #cee3ff;          /* Figma: Utilitarian/Info/22 */
  --color-info-33: #bbd8ff;          /* Figma: Utilitarian/Info/33 */
  --color-info-56: #95c2ff;          /* Figma: Utilitarian/Info/56 */
  --color-info: #4294ff;             /* Figma: Utilitarian/Info/100 — цифры статистики */
  --color-success: #45a54d;          /* Figma: Utilitarian/Success/100 — для форм */
  --color-success-01: #f6fbf7;       /* Figma: Utilitarian/Success/01 */
  /* Ступени 05/11/22 понадобились карточке кейса «Курсы» (930:61832): подложка
     01, бейдж 11, наведение 05/22. В макете лендинга они больше нигде не
     встречаются, поэтому значения прочитаны прямо из библиотеки Kit 2.0
     (importVariableByKeyAsync), а не сняты с растра */
  --color-success-05: #ecf7ed;       /* Figma: Utilitarian/Success/05 */
  --color-success-11: #e3f2e3;       /* Figma: Utilitarian/Success/11 */
  --color-success-22: #d1e9cf;       /* Figma: Utilitarian/Success/22 */
  --color-error: #eb6959;            /* Figma: Utilitarian/Error/100 — для форм */

  /* ── Утилитарные шкалы: тёмные ступени и Warning ────────────────────
     21.08.2026, под базу знаний.

     Ступени 120 и 140 — тёмные варианты. Понадобились подсветке кода:
     текст 15px обязан давать 4.5:1 к фону, а ступень 100 на сером фоне
     блока кода (#f2f2f2) даёт 2.7–2.8. Тёмные проходят: Info/140 — 6.52,
     Success/140 — 4.72, Error/140 — 4.90.

     Шкала Warning переносится целиком и впервые: жёлтого на лендинге
     не было ни разу. Её ступень 05 — фон жёлтой карточки статьи.
     У Warning 120 и 140 в ките одинаковые (#ef7924) — так в переменных,
     это не опечатка переноса */
  --color-info-78: #6fabff;          /* Figma: Utilitarian/Info/78 */
  --color-info-120: #0f70dd;         /* Figma: Utilitarian/Info/120 */
  --color-info-140: #004ec3;         /* Figma: Utilitarian/Info/140 */
  --color-success-33: #bedfbc;       /* Figma: Utilitarian/Success/33 */
  --color-success-56: #98cc97;       /* Figma: Utilitarian/Success/56 */
  --color-success-78: #71b872;       /* Figma: Utilitarian/Success/78 */
  --color-success-120: #2c9b44;      /* Figma: Utilitarian/Success/120 */
  --color-success-140: #0a7d23;      /* Figma: Utilitarian/Success/140 */
  --color-error-01: #fff7f6;         /* Figma: Utilitarian/Error/01 */
  --color-error-05: #ffefec;         /* Figma: Utilitarian/Error/05 */
  --color-error-11: #ffe7e3;         /* Figma: Utilitarian/Error/11 */
  --color-error-22: #ffd8d1;         /* Figma: Utilitarian/Error/22 */
  --color-error-33: #ffc9bf;         /* Figma: Utilitarian/Error/33 */
  --color-error-56: #fbaa9c;         /* Figma: Utilitarian/Error/56 */
  --color-error-78: #f48a7a;         /* Figma: Utilitarian/Error/78 */
  --color-error-120: #d8483b;        /* Figma: Utilitarian/Error/120 */
  --color-error-140: #cf1c0c;        /* Figma: Utilitarian/Error/140 */
  --color-warning-01: #fffaec;       /* Figma: Utilitarian/Warning/01 */
  --color-warning-05: #fff5e2;       /* Figma: Utilitarian/Warning/05 */
  --color-warning-11: #fff0d9;       /* Figma: Utilitarian/Warning/11 */
  --color-warning-22: #ffe6c6;       /* Figma: Utilitarian/Warning/22 */
  --color-warning-33: #ffdcb3;       /* Figma: Utilitarian/Warning/33 */
  --color-warning-56: #ffc88d;       /* Figma: Utilitarian/Warning/56 */
  --color-warning-78: #ffb568;       /* Figma: Utilitarian/Warning/78 */
  --color-warning: #fca140;          /* Figma: Utilitarian/Warning/100 */
  --color-warning-120: #ef7924;      /* Figma: Utilitarian/Warning/120 */
  --color-warning-140: #ef7924;      /* Figma: Utilitarian/Warning/140 */

  /* Фоны карточек статьи. Своих значений у них нет — это ступени 05 трёх
     утилитарных шкал. Псевдоним нужен, чтобы в вёрстке стояла роль
     («карточка-предупреждение»), а не позиция в шкале: цвет тут выбирает
     автор статьи, и читать разметку будет тот, кто про шкалы не знает.
     Figma: Info Card → Info | Warning | Error → Surface.

     ⚠️ Звёздочку между косыми в комментарии не ставить: такая пара
     закрывает комментарий на месте, и следующая строка перестаёт быть
     объявлением. Один раз уже поймали — карточка осталась без фона */
  --color-callout-info: var(--color-info-05);
  --color-callout-warning: var(--color-warning-05);
  --color-callout-error: var(--color-error-05);

  /* ── Палитры сущностей ──────────────────────────────────────────────
     Каждый тип продукта в Puzzle Bot имеет свою палитру («город» в Figma).
     Три роли на палитру:
       wash (ступень 11) — заливка чипа и обводка карточки кейса;
       tint (ступень 01) — подложка-градиент внутри карточки;
       accent (ступень 100) — иконка сущности, ссылка внутри её карточки.
     ⚠️ Подпись чипа НИКОГДА не красится accent'ом: в макете и текст,
     и иконка чипа — Text/Primary. Accent слишком светлый для 17px */

  /* Шкала у каждой палитры одна и та же: 01 — подложка, 05 — поверхность,
     11 — заливка чипа, 22 — наведение, 33 — нажатие, 56 — обводка,
     100 — акцент. Ступени 22 и 33 нужны обязательно: наведение и нажатие
     чипа — это следующая ступень его же палитры, а не осветление фильтром
     (Figma 937:1383 показывает переход 11 → 22 → 33) */

  /* Чат-бот — Command (Paris). Чип hero, бейдж кейса */
  --entity-bot-tint: #f5f9fa;        /* Reserved/Command (Paris)/01 */
  --entity-bot-surface: #ebf3f7;     /* Reserved/Command (Paris)/05 */
  --entity-bot-wash: #ddeef6;        /* Reserved/Command (Paris)/11 */
  --entity-bot-wash-22: #c5e3f1;     /* Reserved/Command (Paris)/22 — наведение */
  --entity-bot-wash-33: #acd9ee;     /* Reserved/Command (Paris)/33 — нажатие */
  --entity-bot-stroke: #92d0ec;      /* Reserved/Command (Paris)/56 */
  --entity-bot-accent: #42c5f6;      /* Reserved/Command (Paris)/100 */

  /* Мини-приложение — MiniApp & History (Dublin) */
  --entity-app-tint: #f3f9ed;        /* .../01 */
  --entity-app-surface: #ecf5e2;     /* .../05 */
  --entity-app-wash: #e5f2d7;        /* .../11 */
  --entity-app-wash-22: #d2edb2;     /* .../22 */
  --entity-app-wash-33: #c2e696;     /* .../33 */
  --entity-app-stroke: #b3df78;      /* .../56 */
  --entity-app-accent: #96cf33;      /* .../100 */
  /* Entity/MiniApp/Primary — кружок с галочкой в сцене «Умных сценариев»
     (Figma 1497:7037). Это отдельная переменная кита, не ступень 100 */
  --entity-app-primary: #8bbe37;

  /* AI — London (AI). 07.09.2026 палитра переехала с имени Shop на AI:
     в Kit 2.0 London переименована, а магазину отдана отдельная Oslo.
     На лендинге этой палитрой покрашена плитка .tile--ai — то есть
     фактически она и раньше работала как AI */
  --entity-ai-tint: #fbf8fc;         /* Reserved/London (AI)/01 */
  --entity-ai-surface: #f7f1fa;      /* .../05 */
  --entity-ai-wash: #f2e5fa;         /* .../11 */
  --entity-ai-wash-22: #ead0f9;      /* .../22 */
  --entity-ai-wash-33: #e3bcf8;      /* .../33 */
  --entity-ai-stroke: #ddabf8;       /* .../56 */
  --entity-ai-accent: #d48cf9;       /* .../100 */
  --entity-ai-accent-120: #c866f6;   /* .../120 — подпись бейджа Puzzlo AI */

  /* Магазин — Oslo (Shop). Новая палитра кита: до 07.09.2026 магазин
     красился London, теперь у него свой фиолетово-синий */
  --entity-shop-tint: #f5f5fa;       /* Reserved/Oslo (Shop)/01 */
  --entity-shop-surface: #ebeaf6;    /* .../05 */
  --entity-shop-wash: #dddaf3;       /* .../11 */
  --entity-shop-wash-22: #c4bfec;    /* .../22 */
  --entity-shop-wash-33: #aba2e6;    /* .../33 */
  --entity-shop-stroke: #9484e1;     /* .../56 */
  --entity-shop-accent: #7454d6;     /* .../100 */

  /* Инлайн — Tokyo (Inline). Ступени сняты из кита 11.09.2026 через MCP,
     набор Reserved/Inline (Tokyo). В Kit 2.0 та же палитра называется
     «Inline & Carousel» — цвета совпадают, имя шире */
  --entity-inline-tint: #fbf2fa;     /* Reserved/Inline (Tokyo)/01 */
  --entity-inline-surface: #f9ebf7;  /* .../05 */
  --entity-inline-wash: #f5ddf0;     /* .../11 */
  --entity-inline-wash-22: #f0c8e7;  /* .../22 */
  --entity-inline-wash-33: #e9b3dd;  /* .../33 */
  --entity-inline-stroke: #e29ed3;   /* .../56 */
  --entity-inline-accent: #d373c0;   /* .../100 */

  /* Воронка — Bern. ⚠️ 13.08 в системе была только ступень 11: остальные
     не встречались в макете лендинга, но в ките палитра полная */
  --entity-funnel-tint: #f0faef;     /* Palette/Bern/01 */
  --entity-funnel-surface: #e1f6df;  /* Palette/Bern/05 */
  --entity-funnel-wash: #d0f0ce;     /* Palette/Bern/11 */
  --entity-funnel-wash-22: #aee5aa;  /* Palette/Bern/22 */
  --entity-funnel-wash-33: #a2d19f;  /* Palette/Bern/33 */
  --entity-funnel-stroke: #88c385;   /* Palette/Bern/56 */
  --entity-funnel-accent: #55a753;   /* Palette/Bern/100 */

  /* Геймификация — Action (Yakutsk). Accent'ом набран Link Button
     внутри оранжевой карточки сообщества */
  --entity-game-tint: #fbf8f4;       /* .../01 */
  --entity-game-surface: #faf2e8;    /* .../05 */
  --entity-game-wash: #fae9d6;       /* .../11 */
  --entity-game-wash-22: #f8dab7;    /* .../22 */
  --entity-game-wash-33: #f8cc97;    /* .../33 */
  --entity-game-stroke: #f9be74;     /* .../56 */
  --entity-game-accent: #f8a830;     /* .../100 */
  --entity-game-accent-120: #e99809; /* .../120 — наведение и нажатие на Link
                                        Button, набранный этой палитрой. Ровно
                                        как у ссылки: Link/Normal 100 → Hover 120 */

  /* Проверка подписки — Entry (Yerevan). ⚠️ Accent здесь #75a1ff (ступень 100),
     а не #548afd: 548afd — это ступень 120, на неё ссылается Entity/Entry/Primary */
  --entity-gate-tint: #f1f6fe;       /* .../01 */
  --entity-gate-surface: #e8f0fe;    /* .../05 */
  --entity-gate-wash: #dfeafd;       /* .../11 */
  --entity-gate-wash-22: #cddffc;    /* .../22 */
  --entity-gate-wash-33: #bbd3fb;    /* .../33 */
  --entity-gate-stroke: #a8c7fa;     /* .../56 */
  --entity-gate-accent: #84aff8;     /* .../100 */
  --entity-gate-pressed: #cddffc;    /* Entity/Entry/Surface/Pressed = .../22 */

  /* Резерв: палитры есть в библиотеке и встречаются внутри мокапов кабинета,
     но ни один блок лендинга ими не покрашен. Держим, чтобы новый тип
     продукта не пришлось выдумывать заново */
  --entity-scenario-wash: #efe0d5;   /* Reserved/Scenario (Brooklyn)/11 */
  --entity-scenario-wash-22: #e5cbb9;/* .../22 — прочитана из Kit 2.0 через Plugin API */
  --entity-scenario-surface: #f4eae3;/* Entity/Scenario/Surface/Normal */
  /* Manila перестала быть резервом 14.08: ею покрашена карточка кейса
     «Мероприятие» (930:60348). Ступени 05 и 22 прочитаны из Kit 2.0 через
     Plugin API — в макете лендинга состояния наведения нарисованы только
     для магазина, остальные палитры идут по тому же правилу шкалы */
  --entity-condition-tint: #eff8f8;    /* Reserved/Condition (Manila)/01 */
  --entity-condition-surface: #e2f3f2; /* .../05 */
  --entity-condition-wash: #d3edec;    /* .../11 */
  --entity-condition-wash-22: #bce0df; /* .../22 — наведение */
  --entity-api-wash: #e0f1e8;        /* Reserved/API (Bali)/11 */
  --entity-api-wash-22: #cce9da;     /* .../22 — прочитана из Kit 2.0 через Plugin API */
  --entity-carousel-surface: #f9ecf2;/* Entity/Carousel/Surface/Normal */
  --entity-payment-surface: #e3f2e3; /* Entity/Payment/Surface/Hover */
  --entity-accent-wash: #f7d5d8;     /* Palette/Nice/11 */
  --entity-accent-wash-22: #f3b5bc;  /* .../22 — наведение (из Kit 2.0) */
  --entity-accent-100: #ea3e69;      /* Palette/Nice/100 */

  /* ── Градиенты ──────────────────────────────────────────────────────
     Пять именованных стилей библиотеки + один безымянный. Все под 45°:
     gradientTransform в макете — [[0.5,-0.5,0.5],[0.5,0.5,0]], то есть
     из нижнего левого угла в верхний правый. Значения прочитаны из fills,
     не с растра: пипетка 05.08 промахнулась по второму стопу на 3 единицы */
  --gradient-pushchino: linear-gradient(to top right, #4294ff, #42c8d1); /* фирменный: обводка поля ввода, иконка «AI» */
  /* Затемнитель градиента на наведении. Чёрный с alpha 6% поверх цвета даёт
     ровно то же, что brightness(0.94) у .btn--gradient: source-over считает
     0.06·0 + 0.94·цвет. Отдельным слоем, а не фильтром — у промо-карточки
     кейсов градиент живёт только в полосе обводки, и filter на элементе
     притушил бы заодно белый фон и содержимое */
  --color-gradient-veil-hover: rgb(0 0 0 / 6%);
  --gradient-nassau:    linear-gradient(to top right, #fca140, #ffcc00); /* иконка «быстрый старт» */
  --gradient-bombay:    linear-gradient(to top right, #eb6959, #fe9b71); /* иконка «поддержка» */
  --gradient-korkino:   linear-gradient(to top right, #5ebab9, #69cb67); /* иконка «интеграции» */
  --gradient-lugansk:   linear-gradient(to top right, #45a54d, #92c73d); /* иконка «модули» */
  --gradient-violet:    linear-gradient(to top right, #b58bf8, #a862dd); /* иконка «магазин», стиля в библиотеке нет */
  /* Страница тарифов. Обоих стилей в библиотеке нет, значения из fills */
  /* Обводка бейджа «Puzzlo AI» (1308:2287). Второй конец не другой цвет,
     а прозрачность: в макете у stroke стоят стопы #a97aff → #d373c0 с
     альфой 0, а сверху общая непрозрачность 0.5. Отсюда .5 в первом
     стопе и 0 во втором — кольцо гаснет, а не меняет цвет. Диагональ
     снизу слева вверх направо: цвет держится у нижней кромки, верхний
     правый угол пустой */
  --gradient-ai-badge:  linear-gradient(45deg, rgba(169, 122, 255, .5), rgba(211, 115, 192, 0));
  --gradient-plan-pro:  linear-gradient(to bottom right, #ffe7e3, #fff6d2);  /* верх тарифной карточки «Про» */
  --gradient-slavsk:    linear-gradient(to right, #e3f2e3, #fff6d2);  /* Figma: Gradient/Light/Slavsk — плашка персональной скидки */
  /* Совместимость со старым именем: в вёрстке лендинга встречается */
  --gradient-primary: var(--gradient-pushchino);

  /* ── Цвета: кнопки ─────────────────────────────────────────────────── */
  /* Все три состояния — из Kit 2.0, компонент Button. Ничего не выведено */
  --color-button-primary: #4294ff;           /* Figma: Button/Primary/Normal */
  --color-button-primary-hover: #0f70dd;     /* Figma: Button/Primary/Hover */
  --color-button-primary-pressed: #004ec3;   /* Figma: Button/Primary/Pressed */

  --color-button-secondary: #80818526;         /* Figma: Button/Secondary/Normal */
  --color-button-secondary-hover: #80818542;   /* Figma: Button/Secondary/Hover */
  --color-button-secondary-pressed: #8081855c; /* Figma: Button/Secondary/Pressed */

  --color-button-ghost: #ffffff00;             /* Figma: Button/Ghost/Normal */
  --color-button-ghost-hover: #80818526;       /* Figma: Button/Ghost/Hover Opacity */
  --color-button-ghost-pressed: #80818542;     /* Figma: Button/Ghost/Pressed Opacity */
  --color-button-ghost-text: #2b2d33;          /* Figma: Button/Ghost/Text */

  /* Opacity — четвёртый вариант кита: заливки нет, подпись приглушена.
     ⚠️ 05.08 текст был записан как #2b2d3380 — в ките он Text/Secondary */
  --color-button-opacity-text: #808185;        /* Figma: Button/Opacity, текст Text/Secondary/Normal */

  /* Error — деструктивное действие. Есть в ките целиком, лендингу не нужно,
     но формам понадобится: без него на месте придумают свой красный */
  --color-button-error: #eb6959;               /* Figma: Button/Error/Primary/Normal */
  --color-button-error-hover: #d8483b;         /* Figma: Button/Error/Primary/Hover */
  --color-button-error-pressed: #cf1c0c;       /* Figma: Button/Error/Primary/Pressed */
  --color-button-error-secondary: #eb695917;         /* Figma: Button/Error/Secondary/Normal Opacity */
  --color-button-error-secondary-hover: #eb695929;   /* Figma: Button/Error/Secondary/Hover Opacity */
  --color-button-error-secondary-pressed: #eb695942; /* Figma: Button/Error/Secondary/Pressed Opacity */
  --color-button-error-secondary-text: #eb6959;      /* Figma: Button/Error/Secondary/Text */

  /* ── Цвета: формы ──────────────────────────────────────────────────── */
  /* У поля своя обводка, а не общий Border: имя отдельное, потому что
     менять её будут вместе с формами, а не вместе с карточками */
  --color-input-border: #dedfdf;         /* Figma: Forms/Input (stroke)/Normal */
  --color-input-border-focus: #4294ff;   /* Figma: Basic/Active/Normal */
  --color-input-border-error: #eb6959;   /* Figma: Basic/Error/Normal */
  --color-focus-error: #eb695942;        /* кольцо ошибки, spread 3 */

  /* Теги внутри поля. Figma: Span/Tags */
  --color-tag-info: #e1eeff;
  --color-tag-success: #e3f2e3;
  --color-tag-error: #ffe7e3;
  --color-tag-disabled: #ededed;

  /* Disabled — конкретная заливка, не прозрачность. Figma: Button/Disabled,
     Basic/Disabled. Текст на залитой кнопке белый, у ghost — сам этот цвет */
  --color-disabled: #d0d1d2;
  --color-skeleton: #ededed;                   /* Figma: Basic/Skeleton */

  /* ── Отступы ───────────────────────────────────────────────────────── */
  /* Figma: Spacing/*. Gap/XS и Gap/S совпадают со Spacing/XS и Spacing/S — не дублируем.

     21.08.2026 шкала переименована вслед за китом: там появились ступени
     XXXS = 2 и S = 12, и всё, что было ниже 16, съехало на позицию вниз.
     Значения при этом не изменились — переименованы только ступени, так что
     вёрстка лендинга осталась прежней. Ступень 12 держит вертикальный ритм
     базы знаний: у каждого блока статьи padding-block ровно 12 */
  --spacing-none: 0px;
  --spacing-xxxs: 2px;
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-s: 12px;
  --spacing-m: 16px;
  --spacing-l: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 64px;

  /* ── Скругления ────────────────────────────────────────────────────── */
  --radius-s: 5px;                   /* Figma: Corner/S */
  --radius-lg: 8px;                  /* Figma: rounded-lg — область клика Link Button */
  /* 21.08.2026 вернули 7: в ките Corner/M сейчас равен 7, а 10 — это Corner/L.
     Прошлая пометка «ошибка, в переменной 10» снята — сверка показала
     обратное. Ломать было нечего: в вёрстке этот токен не использовался
     ни разу, а 7px держал отдельный --radius-tag, заведённый в обход шкалы */
  --radius-m: 7px;                   /* Figma: Corner/M */
  --radius-l: 10px;                  /* Figma: Corner/L — кнопки шапки */
  --radius-xl: 20px;                 /* Figma: Corner/XL — все карточки лендинга */
  --radius-tag: var(--radius-m);     /* тег в поле (Span/Tags) и плашка иконки раздела — это и есть Corner/M */
  --radius-input: 36px;              /* карточка ввода hero (930:59505): 36/36/36/0, нижний левый угол острый под «хвост» */
  --radius-full: 9999px;             /* Figma: Corner/full — чипы, CTA, пилюли */

  /* ── Сглаживание углов ──────────────────────────────────────────────
     В макете у 85 нод стоит cornerSmoothing 1.0 — то самое «Corner smoothing
     100%, iOS» из Figma. Обычная дуга там заменена суперэллипсом: угол
     переходит в сторону плавно, без излома в точке касания.

     Правило не про радиус, а про роль объекта — проверено по макету:
       карточки, плитки и эмблемы (radius 20 — 51 нода, radius 10 — 7) → сглаживание;
       кнопки шапки (radius 10), чипы и CTA (pill), поле ввода hero (radius 36) → без.
     У pill сглаживать нечего, а элементы управления в ките рисуются дугой.

     В CSS это corner-shape из Borders Level 4. Браузеры без поддержки
     свойство игнорируют и рисуют обычный радиус — вёрстка не ломается,
     поэтому @supports не нужен.

     ⚠️ Одного corner-shape мало. Сличение профиля угла карточки тарифа
     (Figma 1307:2100) с браузерным рендером 11.09.2026: при равном радиусе
     20 браузерный squircle вдвое короче — его дуга заканчивается на 14px
     от угла, у Figma тянется на 30. Совпадение даёт superellipse(1.7) при
     радиусе, умноженном на 1.55: расхождение профиля падает с 6px до 0.3.
     Поэтому радиус со сглаживанием считается через --corner-scale, а не
     берётся из шкалы как есть. Метод повторяем: скрипт снимает по строкам
     долю прозрачного пикселя слева и сравнивает две кривые. */
  --corner-smooth-brand: superellipse(1.7);
  /* Рабочее значение идёт через переменную: база знаний гасит его у себя
     (--corner-smooth: round в kb.css), а карточкам тарифов на её страницах
     сглаживание возвращается ссылкой на --corner-smooth-brand, без копии числа */
  --corner-smooth: var(--corner-smooth-brand);
  --corner-scale: 1.55;

  /* ── Размеры ───────────────────────────────────────────────────────── */
  --size-button-xs: 22px;            /* Figma: Button/XS */
  --size-button-s: 30px;             /* Figma: Button/S */
  --size-button-m: 38px;             /* Figma: Button/M — высота кнопки в шапке */
  --size-button-l: 46px;             /* Figma: Button/L */
  --size-button-icon-s: 16px;        /* Figma: Button/Icon/S — иконка внутри Link Button */
  --size-button-icon-m: 22px;        /* Figma: Button/Icon/M — иконка в чипе и CTA */
  --size-button-icon-l: 30px;        /* Figma: Button/Icon/L — шеврон FAQ */
  --size-button-icon-xxl: 56px;      /* Figma: Button/Icon/XXL — высота hero-CTA */
  --size-button-hero: 56px;          /* CTA «Создать проект» (930:59520). ⚠️ было 76px от старого макета */
  /* Колонка числа в степпере. В макете (1307:2111) 90 — там максимум
     «10 000». На странице потолок 10 млн, а «10 000 000» занимает 96,
     и на 90 число налезало бы на плюс. 100 — те же 96 плюс место каретке */
  --size-stepper-value: 100px;
  --size-chip: 40px;                 /* Button Card (930:59525) — чип шаблона и бейдж кейса */
  /* ⚠️ Не из шкалы Button/Icon: там 16, 22, 30. Величина макета страницы
     тарифов — ею нарисованы иконки сносок и эмодзи плиток. Появится
     ступень 24 в ките — заменить на неё */
  --size-icon-note: 24px;
  --size-logo-width: 107px;          /* Figma: Header Logo 714:12308 — 106.69×22 */
  --size-logo-height: 22px;

  /* Логотип встроен в токен: mask через file:// блокируется CORS,
     а страницы открываются двойным кликом. Файл assets/logo.svg остаётся
     исходником — правится он, отсюда пересобирается */
  --logo-src: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 106.6872 22%22 width=%22106.6872%22 height=%2222%22 fill=%22none%22 role=%22img%22 aria-label=%22puzzlebot%22%3E%3Cpath fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M7.5 3.5C7.5 1.567 9.067 0 11 0C12.933 0 14.5 1.567 14.5 3.5H18.4V7.5014C18.4332 7.50047 18.4666 7.5 18.5 7.5C20.433 7.5 22 9.067 22 11C22 12.933 20.433 14.5 18.5 14.5C18.4666 14.5 18.4332 14.4995 18.4 14.4986V18.5H6.9L3.4 22V14.4986C1.51325 14.4457 0 12.8996 0 11C0 9.10045 1.51325 7.55433 3.4 7.5014V3.5H7.5ZM3.5 10C2.94772 10 2.5 10.4477 2.5 11C2.5 11.5523 2.94772 12 3.5 12H18.5C19.0523 12 19.5 11.5523 19.5 11C19.5 10.4477 19.0523 10 18.5 10H3.5Z%22 fill=%22%23000%22/%3E%3Cg transform=%22translate(30 3.0717)%22%3E%3Cg%3E%3Cpath d=%22M5.5605 8.5305C5.5605 7.7715 5.39 7.1665 5.049 6.7155C4.708 6.2535 4.202 6.0225 3.531 6.0225C3.311 6.0225 3.1075 6.0335 2.9205 6.0555C2.7335 6.0665 2.5795 6.083 2.4585 6.105V10.5435C2.6125 10.6425 2.8105 10.725 3.0525 10.791C3.3055 10.857 3.5585 10.89 3.8115 10.89C4.9775 10.89 5.5605 10.1035 5.5605 8.5305ZM8.0685 8.4645C8.0685 9.1355 7.986 9.746 7.821 10.296C7.656 10.846 7.414 11.319 7.095 11.715C6.776 12.111 6.38 12.419 5.907 12.639C5.434 12.859 4.8895 12.969 4.2735 12.969C3.9325 12.969 3.6135 12.936 3.3165 12.87C3.0195 12.804 2.7335 12.7105 2.4585 12.5895V15.8565H0V4.422C0.22 4.356 0.473 4.2955 0.759 4.2405C1.045 4.1745 1.342 4.1195 1.65 4.0755C1.969 4.0315 2.288 3.9985 2.607 3.9765C2.937 3.9435 3.2505 3.927 3.5475 3.927C4.2625 3.927 4.9005 4.037 5.4615 4.257C6.0225 4.466 6.4955 4.7685 6.8805 5.1645C7.2655 5.5495 7.557 6.0225 7.755 6.5835C7.964 7.1445 8.0685 7.7715 8.0685 8.4645Z%22 fill=%22%23000%22/%3E%3Cpath d=%22M17.3665 12.507C16.9485 12.628 16.4095 12.738 15.7495 12.837C15.0895 12.947 14.3965 13.002 13.6705 13.002C12.9335 13.002 12.3175 12.903 11.8225 12.705C11.3385 12.507 10.9535 12.232 10.6675 11.88C10.3815 11.517 10.178 11.088 10.057 10.593C9.93601 10.098 9.87551 9.5535 9.87551 8.9595V4.125H12.334V8.6625C12.334 9.4545 12.4385 10.0265 12.6475 10.3785C12.8565 10.7305 13.247 10.9065 13.819 10.9065C13.995 10.9065 14.182 10.901 14.38 10.89C14.578 10.868 14.754 10.846 14.908 10.824V4.125H17.3665V12.507Z%22 fill=%22%23000%22/%3E%3Cpath d=%22M26.1918 5.775C25.9938 5.995 25.7243 6.292 25.3833 6.666C25.0533 7.04 24.6958 7.4525 24.3108 7.9035C23.9258 8.3545 23.5353 8.8275 23.1393 9.3225C22.7543 9.8175 22.4023 10.296 22.0833 10.758H26.2743V12.804H19.0968V11.352C19.3278 10.956 19.6028 10.5325 19.9218 10.0815C20.2518 9.6195 20.5928 9.1575 20.9448 8.6955C21.3078 8.2335 21.6653 7.788 22.0173 7.359C22.3693 6.919 22.6938 6.523 22.9908 6.171H19.2948V4.125H26.1918V5.775Z%22 fill=%22%23000%22/%3E%3Cpath d=%22M34.4418 5.775C34.2438 5.995 33.9743 6.292 33.6333 6.666C33.3033 7.04 32.9458 7.4525 32.5608 7.9035C32.1758 8.3545 31.7853 8.8275 31.3893 9.3225C31.0043 9.8175 30.6523 10.296 30.3333 10.758H34.5243V12.804H27.3468V11.352C27.5778 10.956 27.8528 10.5325 28.1718 10.0815C28.5018 9.6195 28.8428 9.1575 29.1948 8.6955C29.5578 8.2335 29.9153 7.788 30.2673 7.359C30.6193 6.919 30.9438 6.523 31.2408 6.171H27.5448V4.125H34.4418V5.775Z%22 fill=%22%23000%22/%3E%3Cpath d=%22M39.6393 12.969C38.9243 12.958 38.3413 12.881 37.8903 12.738C37.4503 12.595 37.0983 12.397 36.8343 12.144C36.5813 11.88 36.4053 11.5665 36.3063 11.2035C36.2183 10.8295 36.1743 10.4115 36.1743 9.9495V0.396L38.6328 0V9.4545C38.6328 9.6745 38.6493 9.8725 38.6823 10.0485C38.7153 10.2245 38.7758 10.373 38.8638 10.494C38.9628 10.615 39.1003 10.714 39.2763 10.791C39.4523 10.868 39.6888 10.9175 39.9858 10.9395L39.6393 12.969Z%22 fill=%22%23000%22/%3E%3Cpath d=%22M40.9825 8.5305C40.9825 7.7605 41.098 7.0895 41.329 6.5175C41.571 5.9345 41.8845 5.4505 42.2695 5.0655C42.6545 4.6805 43.0945 4.389 43.5895 4.191C44.0955 3.993 44.6125 3.894 45.1405 3.894C46.3725 3.894 47.346 4.2735 48.061 5.0325C48.776 5.7805 49.1335 6.886 49.1335 8.349C49.1335 8.492 49.128 8.6515 49.117 8.8275C49.106 8.9925 49.095 9.141 49.084 9.273H43.507C43.562 9.779 43.7985 10.1805 44.2165 10.4775C44.6345 10.7745 45.1955 10.923 45.8995 10.923C46.3505 10.923 46.7905 10.8845 47.2195 10.8075C47.6595 10.7195 48.017 10.615 48.292 10.494L48.622 12.4905C48.49 12.5565 48.314 12.6225 48.094 12.6885C47.874 12.7545 47.6265 12.8095 47.3515 12.8535C47.0875 12.9085 46.8015 12.9525 46.4935 12.9855C46.1855 13.0185 45.8775 13.035 45.5695 13.035C44.7885 13.035 44.1065 12.9195 43.5235 12.6885C42.9515 12.4575 42.473 12.144 42.088 11.748C41.714 11.341 41.4335 10.8625 41.2465 10.3125C41.0705 9.7625 40.9825 9.1685 40.9825 8.5305ZM46.7575 7.59C46.7465 7.381 46.708 7.1775 46.642 6.9795C46.587 6.7815 46.4935 6.6055 46.3615 6.4515C46.2405 6.2975 46.081 6.171 45.883 6.072C45.696 5.973 45.4595 5.9235 45.1735 5.9235C44.8985 5.9235 44.662 5.973 44.464 6.072C44.266 6.16 44.101 6.281 43.969 6.435C43.837 6.589 43.7325 6.7705 43.6555 6.9795C43.5895 7.1775 43.54 7.381 43.507 7.59H46.7575Z%22 fill=%22%23000%22/%3E%3Cpath d=%22M56.5913 8.3985C56.5913 6.8145 56.0083 6.0225 54.8423 6.0225C54.5893 6.0225 54.3363 6.0555 54.0833 6.1215C53.8413 6.1875 53.6433 6.27 53.4893 6.369V10.8405C53.6103 10.8625 53.7643 10.8845 53.9513 10.9065C54.1383 10.9175 54.3418 10.923 54.5618 10.923C55.2328 10.923 55.7388 10.692 56.0798 10.23C56.4208 9.768 56.5913 9.1575 56.5913 8.3985ZM59.0993 8.4645C59.0993 9.1575 58.9948 9.7845 58.7858 10.3455C58.5878 10.9065 58.2963 11.385 57.9113 11.781C57.5263 12.177 57.0533 12.485 56.4923 12.705C55.9313 12.914 55.2933 13.0185 54.5783 13.0185C54.2813 13.0185 53.9678 13.002 53.6378 12.969C53.3188 12.947 52.9998 12.914 52.6808 12.87C52.3728 12.826 52.0758 12.7765 51.7898 12.7215C51.5038 12.6555 51.2508 12.5895 51.0308 12.5235V0.396L53.4893 0V4.323C53.7643 4.202 54.0503 4.1085 54.3473 4.0425C54.6443 3.9765 54.9633 3.9435 55.3043 3.9435C55.9203 3.9435 56.4648 4.0535 56.9378 4.2735C57.4108 4.4825 57.8068 4.785 58.1258 5.181C58.4448 5.577 58.6868 6.0555 58.8518 6.6165C59.0168 7.1665 59.0993 7.7825 59.0993 8.4645Z%22 fill=%22%23000%22/%3E%3Cpath d=%22M69.1068 8.448C69.1068 9.13 69.0078 9.757 68.8098 10.329C68.6118 10.89 68.3258 11.374 67.9518 11.781C67.5778 12.177 67.1268 12.485 66.5988 12.705C66.0818 12.925 65.4988 13.035 64.8498 13.035C64.2118 13.035 63.6288 12.925 63.1008 12.705C62.5838 12.485 62.1383 12.177 61.7643 11.781C61.3903 11.374 61.0988 10.89 60.8898 10.329C60.6808 9.757 60.5763 9.13 60.5763 8.448C60.5763 7.766 60.6808 7.1445 60.8898 6.5835C61.1098 6.0225 61.4068 5.544 61.7808 5.148C62.1658 4.752 62.6168 4.444 63.1338 4.224C63.6618 4.004 64.2338 3.894 64.8498 3.894C65.4768 3.894 66.0488 4.004 66.5658 4.224C67.0938 4.444 67.5448 4.752 67.9188 5.148C68.2928 5.544 68.5843 6.0225 68.7933 6.5835C69.0023 7.1445 69.1068 7.766 69.1068 8.448ZM66.5988 8.448C66.5988 7.689 66.4448 7.095 66.1368 6.666C65.8398 6.226 65.4108 6.006 64.8498 6.006C64.2888 6.006 63.8543 6.226 63.5463 6.666C63.2383 7.095 63.0843 7.689 63.0843 8.448C63.0843 9.207 63.2383 9.812 63.5463 10.263C63.8543 10.703 64.2888 10.923 64.8498 10.923C65.4108 10.923 65.8398 10.703 66.1368 10.263C66.4448 9.812 66.5988 9.207 66.5988 8.448Z%22 fill=%22%23000%22/%3E%3Cpath d=%22M70.9287 1.9635L73.3872 1.5675V4.125H76.3407V6.171H73.3872V9.2235C73.3872 9.7405 73.4752 10.153 73.6512 10.461C73.8382 10.769 74.2067 10.923 74.7567 10.923C75.0207 10.923 75.2902 10.901 75.5652 10.857C75.8512 10.802 76.1097 10.7305 76.3407 10.6425L76.6872 12.5565C76.3902 12.6775 76.0602 12.782 75.6972 12.87C75.3342 12.958 74.8887 13.002 74.3607 13.002C73.6897 13.002 73.1342 12.914 72.6942 12.738C72.2542 12.551 71.9022 12.298 71.6382 11.979C71.3742 11.649 71.1872 11.253 71.0772 10.791C70.9782 10.329 70.9287 9.8175 70.9287 9.2565V1.9635Z%22 fill=%22%23000%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
  /* Только знак, без начертания. Figma: Header Logo, Full=false */
  --logo-mark-src: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 22 22%22 width=%2222%22 height=%2222%22 fill=%22none%22%3E%3Cpath fill-rule=%22evenodd%22 clip-rule=%22evenodd%22 d=%22M7.5 3.5C7.5 1.567 9.067 0 11 0C12.933 0 14.5 1.567 14.5 3.5H18.4V7.5014C18.4332 7.50047 18.4666 7.5 18.5 7.5C20.433 7.5 22 9.067 22 11C22 12.933 20.433 14.5 18.5 14.5C18.4666 14.5 18.4332 14.4995 18.4 14.4986V18.5H6.9L3.4 22V14.4986C1.51325 14.4457 0 12.8996 0 11C0 9.10045 1.51325 7.55433 3.4 7.5014V3.5H7.5ZM3.5 10C2.94772 10 2.5 10.4477 2.5 11C2.5 11.5523 2.94772 12 3.5 12H18.5C19.0523 12 19.5 11.5523 19.5 11C19.5 10.4477 19.0523 10 18.5 10H3.5Z%22 fill=%22%23000%22/%3E%3C/svg%3E');
  /* Только начертание, без знака. Нужно футеру (930:62418): знак там уже
     стоит выше отдельной 3D-клавишей, и повторять его в логотипе нечем */
  --logo-word-src: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%2230%203.0717%2076.6872%2015.8565%22%20width%3D%2276.6872%22%20height%3D%2215.8565%22%20fill%3D%22none%22%3E%3Cg%20transform%3D%22translate(30%203.0717)%22%3E%20%3Cg%20id%3D%22puzzlebot%22%3E%20%3Cpath%20d%3D%22M5.5605%208.5305C5.5605%207.7715%205.39%207.1665%205.049%206.7155C4.708%206.2535%204.202%206.0225%203.531%206.0225C3.311%206.0225%203.1075%206.0335%202.9205%206.0555C2.7335%206.0665%202.5795%206.083%202.4585%206.105V10.5435C2.6125%2010.6425%202.8105%2010.725%203.0525%2010.791C3.3055%2010.857%203.5585%2010.89%203.8115%2010.89C4.9775%2010.89%205.5605%2010.1035%205.5605%208.5305ZM8.0685%208.4645C8.0685%209.1355%207.986%209.746%207.821%2010.296C7.656%2010.846%207.414%2011.319%207.095%2011.715C6.776%2012.111%206.38%2012.419%205.907%2012.639C5.434%2012.859%204.8895%2012.969%204.2735%2012.969C3.9325%2012.969%203.6135%2012.936%203.3165%2012.87C3.0195%2012.804%202.7335%2012.7105%202.4585%2012.5895V15.8565H0V4.422C0.22%204.356%200.473%204.2955%200.759%204.2405C1.045%204.1745%201.342%204.1195%201.65%204.0755C1.969%204.0315%202.288%203.9985%202.607%203.9765C2.937%203.9435%203.2505%203.927%203.5475%203.927C4.2625%203.927%204.9005%204.037%205.4615%204.257C6.0225%204.466%206.4955%204.7685%206.8805%205.1645C7.2655%205.5495%207.557%206.0225%207.755%206.5835C7.964%207.1445%208.0685%207.7715%208.0685%208.4645Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M17.3665%2012.507C16.9485%2012.628%2016.4095%2012.738%2015.7495%2012.837C15.0895%2012.947%2014.3965%2013.002%2013.6705%2013.002C12.9335%2013.002%2012.3175%2012.903%2011.8225%2012.705C11.3385%2012.507%2010.9535%2012.232%2010.6675%2011.88C10.3815%2011.517%2010.178%2011.088%2010.057%2010.593C9.93601%2010.098%209.87551%209.5535%209.87551%208.9595V4.125H12.334V8.6625C12.334%209.4545%2012.4385%2010.0265%2012.6475%2010.3785C12.8565%2010.7305%2013.247%2010.9065%2013.819%2010.9065C13.995%2010.9065%2014.182%2010.901%2014.38%2010.89C14.578%2010.868%2014.754%2010.846%2014.908%2010.824V4.125H17.3665V12.507Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M26.1918%205.775C25.9938%205.995%2025.7243%206.292%2025.3833%206.666C25.0533%207.04%2024.6958%207.4525%2024.3108%207.9035C23.9258%208.3545%2023.5353%208.8275%2023.1393%209.3225C22.7543%209.8175%2022.4023%2010.296%2022.0833%2010.758H26.2743V12.804H19.0968V11.352C19.3278%2010.956%2019.6028%2010.5325%2019.9218%2010.0815C20.2518%209.6195%2020.5928%209.1575%2020.9448%208.6955C21.3078%208.2335%2021.6653%207.788%2022.0173%207.359C22.3693%206.919%2022.6938%206.523%2022.9908%206.171H19.2948V4.125H26.1918V5.775Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M34.4418%205.775C34.2438%205.995%2033.9743%206.292%2033.6333%206.666C33.3033%207.04%2032.9458%207.4525%2032.5608%207.9035C32.1758%208.3545%2031.7853%208.8275%2031.3893%209.3225C31.0043%209.8175%2030.6523%2010.296%2030.3333%2010.758H34.5243V12.804H27.3468V11.352C27.5778%2010.956%2027.8528%2010.5325%2028.1718%2010.0815C28.5018%209.6195%2028.8428%209.1575%2029.1948%208.6955C29.5578%208.2335%2029.9153%207.788%2030.2673%207.359C30.6193%206.919%2030.9438%206.523%2031.2408%206.171H27.5448V4.125H34.4418V5.775Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M39.6393%2012.969C38.9243%2012.958%2038.3413%2012.881%2037.8903%2012.738C37.4503%2012.595%2037.0983%2012.397%2036.8343%2012.144C36.5813%2011.88%2036.4053%2011.5665%2036.3063%2011.2035C36.2183%2010.8295%2036.1743%2010.4115%2036.1743%209.9495V0.396L38.6328%200V9.4545C38.6328%209.6745%2038.6493%209.8725%2038.6823%2010.0485C38.7153%2010.2245%2038.7758%2010.373%2038.8638%2010.494C38.9628%2010.615%2039.1003%2010.714%2039.2763%2010.791C39.4523%2010.868%2039.6888%2010.9175%2039.9858%2010.9395L39.6393%2012.969Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M40.9825%208.5305C40.9825%207.7605%2041.098%207.0895%2041.329%206.5175C41.571%205.9345%2041.8845%205.4505%2042.2695%205.0655C42.6545%204.6805%2043.0945%204.389%2043.5895%204.191C44.0955%203.993%2044.6125%203.894%2045.1405%203.894C46.3725%203.894%2047.346%204.2735%2048.061%205.0325C48.776%205.7805%2049.1335%206.886%2049.1335%208.349C49.1335%208.492%2049.128%208.6515%2049.117%208.8275C49.106%208.9925%2049.095%209.141%2049.084%209.273H43.507C43.562%209.779%2043.7985%2010.1805%2044.2165%2010.4775C44.6345%2010.7745%2045.1955%2010.923%2045.8995%2010.923C46.3505%2010.923%2046.7905%2010.8845%2047.2195%2010.8075C47.6595%2010.7195%2048.017%2010.615%2048.292%2010.494L48.622%2012.4905C48.49%2012.5565%2048.314%2012.6225%2048.094%2012.6885C47.874%2012.7545%2047.6265%2012.8095%2047.3515%2012.8535C47.0875%2012.9085%2046.8015%2012.9525%2046.4935%2012.9855C46.1855%2013.0185%2045.8775%2013.035%2045.5695%2013.035C44.7885%2013.035%2044.1065%2012.9195%2043.5235%2012.6885C42.9515%2012.4575%2042.473%2012.144%2042.088%2011.748C41.714%2011.341%2041.4335%2010.8625%2041.2465%2010.3125C41.0705%209.7625%2040.9825%209.1685%2040.9825%208.5305ZM46.7575%207.59C46.7465%207.381%2046.708%207.1775%2046.642%206.9795C46.587%206.7815%2046.4935%206.6055%2046.3615%206.4515C46.2405%206.2975%2046.081%206.171%2045.883%206.072C45.696%205.973%2045.4595%205.9235%2045.1735%205.9235C44.8985%205.9235%2044.662%205.973%2044.464%206.072C44.266%206.16%2044.101%206.281%2043.969%206.435C43.837%206.589%2043.7325%206.7705%2043.6555%206.9795C43.5895%207.1775%2043.54%207.381%2043.507%207.59H46.7575Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M56.5913%208.3985C56.5913%206.8145%2056.0083%206.0225%2054.8423%206.0225C54.5893%206.0225%2054.3363%206.0555%2054.0833%206.1215C53.8413%206.1875%2053.6433%206.27%2053.4893%206.369V10.8405C53.6103%2010.8625%2053.7643%2010.8845%2053.9513%2010.9065C54.1383%2010.9175%2054.3418%2010.923%2054.5618%2010.923C55.2328%2010.923%2055.7388%2010.692%2056.0798%2010.23C56.4208%209.768%2056.5913%209.1575%2056.5913%208.3985ZM59.0993%208.4645C59.0993%209.1575%2058.9948%209.7845%2058.7858%2010.3455C58.5878%2010.9065%2058.2963%2011.385%2057.9113%2011.781C57.5263%2012.177%2057.0533%2012.485%2056.4923%2012.705C55.9313%2012.914%2055.2933%2013.0185%2054.5783%2013.0185C54.2813%2013.0185%2053.9678%2013.002%2053.6378%2012.969C53.3188%2012.947%2052.9998%2012.914%2052.6808%2012.87C52.3728%2012.826%2052.0758%2012.7765%2051.7898%2012.7215C51.5038%2012.6555%2051.2508%2012.5895%2051.0308%2012.5235V0.396L53.4893%200V4.323C53.7643%204.202%2054.0503%204.1085%2054.3473%204.0425C54.6443%203.9765%2054.9633%203.9435%2055.3043%203.9435C55.9203%203.9435%2056.4648%204.0535%2056.9378%204.2735C57.4108%204.4825%2057.8068%204.785%2058.1258%205.181C58.4448%205.577%2058.6868%206.0555%2058.8518%206.6165C59.0168%207.1665%2059.0993%207.7825%2059.0993%208.4645Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M69.1068%208.448C69.1068%209.13%2069.0078%209.757%2068.8098%2010.329C68.6118%2010.89%2068.3258%2011.374%2067.9518%2011.781C67.5778%2012.177%2067.1268%2012.485%2066.5988%2012.705C66.0818%2012.925%2065.4988%2013.035%2064.8498%2013.035C64.2118%2013.035%2063.6288%2012.925%2063.1008%2012.705C62.5838%2012.485%2062.1383%2012.177%2061.7643%2011.781C61.3903%2011.374%2061.0988%2010.89%2060.8898%2010.329C60.6808%209.757%2060.5763%209.13%2060.5763%208.448C60.5763%207.766%2060.6808%207.1445%2060.8898%206.5835C61.1098%206.0225%2061.4068%205.544%2061.7808%205.148C62.1658%204.752%2062.6168%204.444%2063.1338%204.224C63.6618%204.004%2064.2338%203.894%2064.8498%203.894C65.4768%203.894%2066.0488%204.004%2066.5658%204.224C67.0938%204.444%2067.5448%204.752%2067.9188%205.148C68.2928%205.544%2068.5843%206.0225%2068.7933%206.5835C69.0023%207.1445%2069.1068%207.766%2069.1068%208.448ZM66.5988%208.448C66.5988%207.689%2066.4448%207.095%2066.1368%206.666C65.8398%206.226%2065.4108%206.006%2064.8498%206.006C64.2888%206.006%2063.8543%206.226%2063.5463%206.666C63.2383%207.095%2063.0843%207.689%2063.0843%208.448C63.0843%209.207%2063.2383%209.812%2063.5463%2010.263C63.8543%2010.703%2064.2888%2010.923%2064.8498%2010.923C65.4108%2010.923%2065.8398%2010.703%2066.1368%2010.263C66.4448%209.812%2066.5988%209.207%2066.5988%208.448Z%22%20fill%3D%22currentColor%22%2F%3E%20%3Cpath%20d%3D%22M70.9287%201.9635L73.3872%201.5675V4.125H76.3407V6.171H73.3872V9.2235C73.3872%209.7405%2073.4752%2010.153%2073.6512%2010.461C73.8382%2010.769%2074.2067%2010.923%2074.7567%2010.923C75.0207%2010.923%2075.2902%2010.901%2075.5652%2010.857C75.8512%2010.802%2076.1097%2010.7305%2076.3407%2010.6425L76.6872%2012.5565C76.3902%2012.6775%2076.0602%2012.782%2075.6972%2012.87C75.3342%2012.958%2074.8887%2013.002%2074.3607%2013.002C73.6897%2013.002%2073.1342%2012.914%2072.6942%2012.738C72.2542%2012.551%2071.9022%2012.298%2071.6382%2011.979C71.3742%2011.649%2071.1872%2011.253%2071.0772%2010.791C70.9782%2010.329%2070.9287%209.8175%2070.9287%209.2565V1.9635Z%22%20fill%3D%22currentColor%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
  --size-header: 54px;               /* Figma: Header, замерено по ноде 714:12162 */
  /* Аватар. Шкала Ava/* из кита; в базе знаний берётся L — автор цитаты
     и автор статьи */
  --size-ava-s: 22px;                /* Figma: Ava/S */
  --size-ava-m: 30px;                /* Figma: Ava/M */
  --size-ava-l: 38px;                /* Figma: Ava/L */
  --size-ava-xl: 56px;               /* Figma: Ava/XL */
  --size-dot: 8px;                   /* Figma: Other/Dot — точка списка, точка карусели */
  --size-stroke-s: 1px;              /* Figma: Stroke/S — подчёркивание глоссария */
  --size-stroke-m: 2px;              /* Figma: Stroke/M */
  --container-landing: 1290px;       /* доминирующая ширина контента в макете 1920 */
  /* Поле от края экрана — 16 на любой ширине и на любой странице: и на
     лендинге, и на внутренних (соглашение, политика, оферта). Ступень одна,
     десктопной и мобильной версии у неё нет — имена оставлены ради
     совместимости со старой вёрсткой. Блок, которому нужно поле больше,
     набирает его внутренним паддингом поверх этого, а не вместо него */
  --page-padding-mobile: 16px;       /* Figma: Page/Padding/Mobile */
  /* Расхождение с китом осознанное: переменная Page/Padding/Desktop равна 32,
     но в макете лендинга поле от края ровно 16, и вёрстка сделана по макету */
  --page-padding-desktop: 16px;      /* замерено: отступ шапки от края в макете 1920 */

  /* ── Эффекты ───────────────────────────────────────────────────────── */
  --blur-m: 16px;                    /* Figma: blur-m — фон залипшей шапки */
  --blur-s: 8px;                     /* Figma: применён на плитках типа (797:28255).
                                        Токен в ките один (blur-m 16), но в макете
                                        радиус переопределён на 8 — сверить */

  /* Тени. Отдельных токенов теней в библиотеке нет — тень живёт эффектами
     на карточке ввода hero (930:59505). Пять слоёв с нарастающим смещением
     и размытием: у ближнего слоя тень плотная и короткая, у дальнего —
     почти прозрачная и растянутая, вместе получается мягкое «парение».
     Цвет один — #3e4260. ⚠️ 05.08 радиусы были записаны вдвое меньше
     (16 вместо 32 и так далее), 13.08 сверено с эффектами макета */
  --shadow-card:
    0 14px 32px rgba(62, 66, 96, 0.06),
    0 57px 57px rgba(62, 66, 96, 0.05),
    0 129px 78px rgba(62, 66, 96, 0.03),
    0 230px 92px rgba(62, 66, 96, 0.01),
    0 359px 101px rgba(62, 66, 96, 0);
  /* ⚠️ Выведена мной, а не из Figma: нужна для мелких приподнятых элементов,
     где макетной тени нет. Согласовать или заменить на макетную */
  --shadow-raised: 0 12px 32px -20px color-mix(in srgb, var(--color-text-primary) 45%, transparent);

  /* Плашка цены со скидкой и баннер акции на странице тарифов
     (Figma 1323:3893 и 1320:3440). Два слоя, оба чёрные — в отличие
     от --shadow-card, где цвет синеватый #3e4260 */
  --shadow-sale:
    0 2px 4px rgba(0, 0, 0, 0.10),
    0 8px 8px rgba(0, 0, 0, 0.09);

  /* Плашка согласия на cookie (Figma 1417:5372). Пять слоёв, все чёрные:
     ближний даёт кромку, дальние — «парение» над страницей. Взять
     --shadow-sale нельзя: у неё два слоя и заметно плотнее кромка */
  --shadow-cookie:
    0 2px 5px rgba(0, 0, 0, 0.07),
    0 9px 9px rgba(0, 0, 0, 0.06),
    0 19px 12px rgba(0, 0, 0, 0.04),
    0 34px 14px rgba(0, 0, 0, 0.01),
    0 53px 15px rgba(0, 0, 0, 0);

  /* Тень выпадающего списка и всплывающего окна. Два слоя, как у Dropdown
     в ките: ближний даёт кромку, дальний — мягкий ореол */
  --shadow-dropdown:
    0 2px 4px -2px color-mix(in srgb, #000 10%, transparent),
    0 4px 6px -1px color-mix(in srgb, #000 10%, transparent);

  /* ── Состояния ─────────────────────────────────────────────────────── */
  /* Кольцо фокуса в библиотеке всё-таки есть: эффект Focus/Normal —
     DROP_SHADOW spread 3, без смещения и размытия, цвет Basic/Focus/Normal.
     В макете он висит на поле ввода hero. 05.08 его не нашли и поставили
     своё 2px — 13.08 заменено на макетное */
  --color-focus: #4294ff42;          /* Figma: Basic/Focus/Normal */
  --focus-ring-width: 3px;           /* Figma: Focus/Normal, spread 3 */
  --focus-ring-offset: 0px;          /* смещения в макете нет */
  --focus-ring-color: var(--color-focus);

  /* ── Движение ──────────────────────────────────────────────────────── */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;            /* появление и скрытие мобильного меню:
                                        панель большая, на 200 ms она мигает */
  --duration-slower: 480ms;          /* следующая ступень той же шкалы (×1.5).
                                        Шапка, уезжающая по прокрутке: её ход
                                        идёт поперёк движения страницы, и на
                                        320 ms читатель его не замечал */
  --ease-brand: cubic-bezier(0.2, 0, 0, 1);

  /* ── Старые имена ───────────────────────────────────────────────────
     landing/styles.css свёрстан на именах от 05.08. Ссылки держим здесь,
     а не тянем переименование по вёрстке: блоки лендинга всё равно
     пересобираются под макет 930:59460. Удалить, когда вёрстка переедет */
  --color-badge: var(--color-brand);
  --color-info-subtle: var(--color-info-05);
  --color-info-wash: #4294ff17;
  --color-entity-command: var(--entity-bot-accent);
  --color-entity-command-stroke: var(--entity-bot-stroke);
  --color-entity-command-wash: var(--entity-bot-surface);
  --color-template-bot: var(--entity-bot-wash);
  --color-template-app: var(--entity-app-wash);
  --color-template-shop: var(--entity-shop-wash);
  --color-template-funnel: var(--entity-funnel-wash);
  --color-template-game: var(--entity-game-wash);
  --color-template-gate: var(--entity-gate-wash);
  --color-gradient-from: #4294ff;
  --color-gradient-to: #42c8d1;
  --radius-xxl: var(--radius-input);
  --size-button-icon-xl: 38px;       /* ⚠️ в переменных Figma такой ступени нет */
}


/* ==========================================================================
   Мост для shadcn/ui.
   Компоненты shadcn жёстко читают эти имена. Значения — ссылки на токены
   выше, поэтому источник правды остаётся один: блок :root.
   В разметке пишем своими именами (text-text-primary), не этими.
   ========================================================================== */
:root {
  --background: var(--color-bg-primary);
  --foreground: var(--color-text-primary);
  --card: var(--color-surface);
  --card-foreground: var(--color-text-primary);
  --popover: var(--color-surface);
  --popover-foreground: var(--color-text-primary);
  --primary: var(--color-brand);
  --primary-foreground: var(--color-text-on-primary);
  --secondary: var(--color-fill-secondary);
  --secondary-foreground: var(--color-text-primary);
  --muted: var(--color-fill-secondary);
  --muted-foreground: var(--color-text-secondary);
  --accent: var(--color-info-subtle);
  --accent-foreground: var(--color-brand);
  --destructive: var(--color-error);
  --destructive-foreground: var(--color-text-on-primary);
  --border: var(--color-border);
  --input: var(--color-border);
  --ring: var(--color-brand);
  --radius: var(--radius-l);
}

/* ==========================================================================
   Базовые примитивы. Всё, что ниже, — только на токенах.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-p1);
  line-height: var(--text-p1--line-height);
  font-weight: var(--font-weight-body);
  -webkit-font-smoothing: antialiased;
}

/* Ссылка. Figma: типографика кита, нода 842:47950 — ступени P1/P2/P3 link.
   Три вещи, и все три из кита:
     1. вес 500 (стили P1/medium, P2/medium, P3/medium), а не 400;
     2. подчёркивания нет ни в одном состоянии — textDecoration NONE везде;
     3. состояния — не осветление, а свои токены: Normal → Hover → Pressed.
   Ссылка отличается от текста цветом и весом, этого достаточно */
:where(a) {
  color: var(--color-text-link);
  font-weight: var(--font-weight-body-medium);
  text-decoration: none;
}
@media (hover: hover) {
  :where(a):hover { color: var(--color-text-link-hover); text-decoration: none; }
}
:where(a):active { color: var(--color-text-link-pressed); }

/* Кольцо фокуса. Ширина макетная (3px), а цвет — плотный бренд, не макетный
   Basic/Focus/Normal: #4294ff42 на белом даёт контраст 1.4 и как индикатор
   фокуса не работает (WCAG 1.4.11 требует 3.0). В макете кольцо лежит на
   поле ввода поверх собственной обводки и там читается, отдельно — нет */
:where(:focus-visible) {
  outline: var(--focus-ring-width) solid var(--color-brand);
  outline-offset: 2px;
}

/* ── Типографика ─────────────────────────────────────────────────────── */
/* Заголовки: у H1—H3 два веса — regular (600) и thin (500). У E1 только regular */
.e1, .h1, .h2, .h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-heading);
  margin: 0;
}
.e1 { font-size: var(--text-e1); line-height: var(--text-e1--line-height); letter-spacing: var(--text-e1--letter-spacing); }
.h1 { font-size: var(--text-h1); line-height: var(--text-h1--line-height); letter-spacing: var(--text-h1--letter-spacing); }
.h2 { font-size: var(--text-h2); line-height: var(--text-h2--line-height); letter-spacing: var(--text-h2--letter-spacing); }
.h3 { font-size: var(--text-h3); line-height: var(--text-h3--line-height); letter-spacing: var(--text-h3--letter-spacing); }
.h1--thin, .h2--thin, .h3--thin { font-weight: var(--font-weight-heading-thin); }

/* Параграфы: regular (400) по умолчанию, модификаторы medium (500) и bold (600) */
.p1, .p2, .p3, .p4, .p5, .caption {
  font-family: var(--font-body);
  font-weight: var(--font-weight-body);
  margin: 0;
}
.p1 { font-size: var(--text-p1); line-height: var(--text-p1--line-height); }
.p2 { font-size: var(--text-p2); line-height: var(--text-p2--line-height); }
.p3 { font-size: var(--text-p3); line-height: var(--text-p3--line-height); }
.p4 { font-size: var(--text-p4); line-height: var(--text-p4--line-height); }
.p5 { font-size: var(--text-p5); line-height: var(--text-p5--line-height); font-weight: var(--font-weight-body-bold); }

.p1--medium, .p2--medium, .p3--medium, .p4--medium { font-weight: var(--font-weight-body-medium); }
.p1--bold, .p2--bold, .p4--bold { font-weight: var(--font-weight-body-bold); }

.caption {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
  letter-spacing: var(--text-caption--letter-spacing);
}
.mono {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: var(--text-mono--line-height);
  letter-spacing: var(--text-mono--letter-spacing);
  /* В ките P2/monospaced идёт весом 500 (5455:8657) */
  font-weight: var(--font-weight-body-medium);
  margin: 0;
}

.text-secondary { color: var(--color-text-secondary); }
.text-brand { color: var(--color-brand); }
.text-logo { color: var(--color-logo); }
.text-link { color: var(--color-text-link); }

/* ── Кнопки ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  height: var(--size-button-m);
  padding-inline: var(--spacing-l);
  border: 0;
  border-radius: var(--radius-l);
  font-family: var(--font-body);
  font-size: var(--text-p2);
  line-height: var(--text-p2--line-height);
  font-weight: var(--font-weight-body-medium);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-brand),
              filter var(--duration-fast) var(--ease-brand);
}
/* Кнопка часто бывает ссылкой (<a class="btn">). Правило подчёркивания для
   ссылок выше на неё не должно распространяться — гасим здесь, а не в вёрстке */
.btn:where(:link, :visited, :hover, :active) { text-decoration: none; }

/* Disabled перебивает вариант: у всех залитых кнопок одна серая заливка.
   Контраст здесь заведомо низкий — WCAG 1.4.3 не распространяется на disabled */
.btn:disabled {
  background: var(--color-disabled);
  color: var(--color-text-on-primary);
  cursor: not-allowed;
}
.btn--ghost:disabled {
  background: var(--color-button-ghost);
  color: var(--color-disabled);
}

/* Primary — сплошная заливка. Figma: Button/Primary */
.btn--primary {
  background: var(--color-button-primary);
  color: var(--color-text-on-primary);
}
.btn--primary:active:not(:disabled) { background: var(--color-button-primary-pressed); }

/* Secondary — «Войти» в шапке. Figma: Button/Secondary.
   Заливка полупрозрачная (#80818526 — это 15% серого), и под ней в ките
   стоит BACKGROUND_BLUR 16. Без размытия кнопка на пёстром фоне становится
   грязным пятном: сквозь 15% серого видно всё, что под ней. Blur — часть
   компонента, а не эффект шапки: он есть у всех четырёх размеров */
.btn--secondary {
  background: var(--color-button-secondary);
  color: var(--color-text-primary);
  backdrop-filter: blur(var(--blur-m));
  -webkit-backdrop-filter: blur(var(--blur-m));
}
.btn--secondary:active:not(:disabled) { background: var(--color-button-secondary-pressed); }

/* Opacity — заливки нет, подпись приглушена. Для действий, которые должны
   быть доступны, но не звать: «Отмена» рядом с главной кнопкой.
   Figma: Button/Opacity. Наведение и нажатие берёт у ghost */
.btn--opacity {
  background: var(--color-button-ghost);
  color: var(--color-button-opacity-text);
}
.btn--opacity:active:not(:disabled) { background: var(--color-button-ghost-pressed); }

/* Error — необратимое действие: удалить, отключить, отвязать.
   Figma: Button/Error/Primary и /Secondary */
.btn--error {
  background: var(--color-button-error);
  color: var(--color-text-on-primary);
}
.btn--error:active:not(:disabled) { background: var(--color-button-error-pressed); }

.btn--error-secondary {
  background: var(--color-button-error-secondary);
  color: var(--color-button-error-secondary-text);
}
.btn--error-secondary:active:not(:disabled) { background: var(--color-button-error-secondary-pressed); }

/* Skeleton — кнопка на месте, содержимого ещё нет. Figma: Button/Skeleton:
   заливка и цвет текста одинаковые, поэтому подпись не видна */
.btn--skeleton {
  background: var(--color-skeleton);
  color: var(--color-skeleton);
  pointer-events: none;
}

/* Ghost — пункты меню в шапке. Figma: Button/Ghost */
.btn--ghost {
  background: var(--color-button-ghost);
  color: var(--color-button-ghost-text);
}
.btn--ghost:active:not(:disabled) { background: var(--color-button-ghost-pressed); }

/* Размеры. Figma: Button/XS 22, S 30, M 38 (по умолчанию), L 46.
   ⚠️ Сверено с китом 13.08 (нода 842:44442) — прошлая догадка была неверной.
   Подпись у ВСЕХ размеров одна: P2/medium 15/22. Меняются только высота,
   горизонтальный паддинг (8 / 16 / 24 / 32) и у XS — зазор 4 и скругление 5.
   Размер кнопки — это про плотность интерфейса, а не про важность текста */
.btn--xs {
  height: var(--size-button-xs);
  padding-inline: var(--spacing-xs);
  gap: var(--spacing-xxs);
  border-radius: var(--radius-s);
}
.btn--s {
  height: var(--size-button-s);
  padding-inline: var(--spacing-m);
}
.btn--l {
  height: var(--size-button-l);
  padding-inline: var(--spacing-xl);
}

/* Кнопка-иконка. Figma: Icon Button — квадрат по высоте своего размера,
   паддинги схлопнуты. Сочетается с любым вариантом: .btn--ghost.btn--icon.
   В мобильной шапке ей набраны и меню, и «назад», и переключатель языка */
.btn--icon {
  width: var(--size-button-m);
  padding-inline: 0;
  flex: none;
}
.btn--icon.btn--xs { width: var(--size-button-xs); }
.btn--icon.btn--s  { width: var(--size-button-s); }
.btn--icon.btn--l  { width: var(--size-button-l); }

/* Наведение — только там, где есть чем наводить. На тач-экране :hover
   залипает после тапа: браузер держит состояние до касания в другом месте,
   и кнопка остаётся подсвеченной уже после того, как действие отработало.
   Заметнее всего на кнопке меню в шапке. :active сюда не входит — он живёт
   ровно на время нажатия и нужен на любом вводе.
   .btn--gradient и .btn--hero объявлены ниже по файлу, их наведение
   лежит рядом с ними — тем же условием */
@media (hover: hover) {
  @media (hover: hover) {
    .btn--primary:hover:not(:disabled) { background: var(--color-button-primary-hover); }
  }
  @media (hover: hover) {
    .btn--secondary:hover:not(:disabled) { background: var(--color-button-secondary-hover); }
  }
  @media (hover: hover) {
    .btn--opacity:hover:not(:disabled) { background: var(--color-button-ghost-hover); }
  }
  @media (hover: hover) {
    .btn--error:hover:not(:disabled) { background: var(--color-button-error-hover); }
  }
  @media (hover: hover) {
    .btn--error-secondary:hover:not(:disabled) { background: var(--color-button-error-secondary-hover); }
  }
  @media (hover: hover) {
    .btn--ghost:hover:not(:disabled) { background: var(--color-button-ghost-hover); }
  }
}

/* ── Скелетон ────────────────────────────────────────────────────────── */
/* Figma: Basic/Skeleton. В ките это отдельный вариант кнопки и карточки */
.skeleton {
  /* Без display плашка на <span> схлопывается: высота к inline не применяется */
  display: block;
  background: var(--color-skeleton);
  border-radius: var(--radius-l);
  color: transparent;
  user-select: none;
  pointer-events: none;
}
/* Плашка под строку текста. Высота = интерлиньяж своей ступени.
   Figma: text_skeleton, размеры B1 24 / B2 22 / B3 18 совпадают с P1/P2/P3 */
.skeleton--b1 { height: var(--text-p1--line-height); border-radius: var(--radius-full); }
.skeleton--b2 { height: var(--text-p2--line-height); border-radius: var(--radius-full); }
.skeleton--b3 { height: var(--text-p3--line-height); border-radius: var(--radius-full); }

/* ── Карточка ────────────────────────────────────────────────────────── */
/* Единственный контейнер лендинга: скругление 20, обводка 2px, паддинг 32.
   Отличаются карточки только парой «заливка + обводка», и пара всегда из
   одной шкалы: заливка — светлая ступень, обводка — следующая за ней.
   Figma: 930:62102 (фича), 930:59857 (кейс), 930:59607 (плитка «как работает») */
.card {
  padding: var(--spacing-xl);
  border: var(--size-stroke-m) solid var(--color-border);
  border-radius: calc(var(--radius-xl) * var(--corner-scale));
  /* Сглаживание — примета карточки, а не украшение: в макете оно стоит
     у всех 20-х скруглений и ни у одного элемента управления */
  corner-shape: var(--corner-smooth);
  background: var(--color-surface);
}
/* Синяя карточка-фича: Info/01 внутри, Info/05 по контуру */
.card--tint {
  background: var(--color-info-01);
  border-color: var(--color-info-05);
}
/* Плитка «как это работает»: заливка и обводка одной ступени — контур
   не читается, карточка выглядит сплошной заливкой */
.card--plate {
  background: var(--color-info-05);
  border-color: var(--color-info-05);
}
/* Карточка кейса: белая, а тип продукта показан цветом обводки.
   Цвет задаётся --card-entity, чтобы не плодить шесть классов */
.card--entity {
  background: var(--color-surface);
  border-color: var(--card-entity, var(--color-border));
}
.card--raised { border-color: transparent; box-shadow: var(--shadow-raised); }
/* Тень макета — только у карточки ввода hero. Остальным карточкам тень
   не положена: их отделяет обводка, а не подъём */
.card--floating { border-color: transparent; box-shadow: var(--shadow-card); }

/* ── Цифра статистики ────────────────────────────────────────────────── */
/* Figma: компонент number (930:62086). Единственное место, где E1 набран
   не текстом, а цветом Info/100 — цифра работает как акцент, подпись под ней
   остаётся Text/Primary, а не вторичным серым */
.stat { display: flex; flex-direction: column; gap: var(--spacing-xs); }
.stat__value {
  font-family: var(--font-heading);
  font-size: var(--text-e1);
  line-height: var(--text-e1--line-height);
  letter-spacing: var(--text-e1--letter-spacing);
  font-weight: var(--font-weight-heading);
  color: var(--color-info);
}
.stat__label {
  font-size: var(--text-p1);
  line-height: var(--text-p1--line-height);
  color: var(--color-text-primary);
}

/* ── Текстовая ссылка ────────────────────────────────────────────────── */
/* Figma: Link Button (930:62077). P1/medium + иконка 16, зазор 4.
   Цвет по умолчанию — Text/Link, но внутри карточки сущности ссылка
   красится акцентом этой сущности: --link-color переопределяется на месте */
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xxs);
  border-radius: var(--radius-lg);
  font-size: var(--text-p1);
  line-height: var(--text-p1--line-height);
  font-weight: var(--font-weight-body-medium);
  color: var(--link-color, var(--color-text-link));
  text-decoration: none;
}
/* Подчёркивания нет ни в одном состоянии — в ките textDecoration NONE везде.
   Обратная связь идёт цветом: Normal → Hover → Pressed. Внутри цветной
   карточки состояний нет: --link-color задан вручную, и осветлять его нечем */
@media (hover: hover) {
  .link:hover { color: var(--link-color, var(--color-text-link-hover)); text-decoration: none; }
}
.link:active { color: var(--link-color, var(--color-text-link-pressed)); }
.link__icon { width: var(--size-button-icon-s); height: var(--size-button-icon-s); }

/* ── Таблица ─────────────────────────────────────────────────────────────
   ⚠️ В Figma таблицы нет: ни в макете лендинга, ни в Kit 2.0. Компонент
   собран из существующих токенов под таблицу «Цели обработки / Перечень
   данных» в Политике обработки персональных данных и в кит не заглядывает —
   заведут таблицу в Figma, сверить и поправить здесь.

   Ни одного нового значения не придумано: линия — Basic/Divider толщиной
   Stroke/M (та же пара, что у строки FAQ), поля ячейки — Spacing/M,
   подпись шапки — вес medium, как у всего кликабельного и акцентного.

   На узком экране двухколоночная таблица нечитаема, поэтому строки встают
   блоками, а название колонки печатается перед ячейкой из data-label.
   Разметка обязана его нести — без него на телефоне пропадёт смысл пары */
.table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  /* Колонки равные, а не по содержимому: авторазметка отдаёт ширину той,
     где текст длиннее, и вторая вытягивается в узкий столбик на пол-экрана */
  table-layout: fixed;
}
.table th,
.table td {
  padding: var(--spacing-m);
  border-bottom: var(--size-stroke-m) solid var(--color-divider);
  vertical-align: top;
  color: var(--color-text-primary);
}
.table th {
  font-weight: var(--font-weight-body-medium);
  border-bottom-color: var(--color-border);
}

@media (max-width: 767px) {
  /* Шапка не показывается: её подписи переезжают к ячейкам */
  .table thead { display: none; }
  .table,
  .table tbody,
  .table tr,
  .table td { display: block; }
  .table tr {
    border-bottom: var(--size-stroke-m) solid var(--color-border);
    padding-block: var(--spacing-xs);
  }
  .table td {
    padding: var(--spacing-xs) 0;
    border-bottom: 0;
  }
  .table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--spacing-xxxs);
    font-size: var(--text-p2);
    line-height: var(--text-p2--line-height);
    color: var(--color-text-secondary);
  }
}

/* ── Строка FAQ ──────────────────────────────────────────────────────── */
/* Figma: 930:62387. Разделитель — 2px Basic/Stroke, а не 1px: тонкая линия
   на 836px ширины теряется. Заголовок H2/regular, шеврон 30 */
.faq-item { border-bottom: var(--size-stroke-m) solid var(--color-border); }
/* У последней строки линии нет: в макете 930:62405 список заканчивается
   текстом, а не обводкой */
.faq-item:last-child { border-bottom: none; }
.faq-item__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-m);
  justify-content: space-between;
  padding-block: var(--spacing-l);
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  line-height: var(--text-h2--line-height);
  letter-spacing: var(--text-h2--letter-spacing);
  font-weight: var(--font-weight-heading);
  cursor: pointer;
}
/* Через родителя, а не просто по классу: правило .icon с размером 22
   лежит в файле ниже и при равном весе перебивало шеврон до 22 — в
   макете (930:62390) он 30 */
.faq-item__title .faq-item__icon {
  width: var(--size-button-icon-l);
  height: var(--size-button-icon-l);
  flex: none;
}
/* margin обнуляется здесь же: ответ набирают тегом <p>, и браузерный
   верхний отступ добавлял к паддингу заголовка ещё 17px — на тарифах
   строка стояла ниже, чем в блоке вопросов главной. Снизу 16, как в
   макете: там текстовый фрейм 40 при строке 24 */
.faq-item__text {
  margin: 0;
  padding-bottom: var(--spacing-m);
  font-size: var(--text-p1);
  line-height: var(--text-p1--line-height);
}

/* ── Разделитель ─────────────────────────────────────────────────────── */
/* Figma: 930:62246. Не сплошная линия, а градиент с прозрачными концами —
   так вертикальный разделитель между колонками не упирается в края блока */
.divider {
  border: 0;
  margin: 0;
  height: var(--size-stroke-m);
  background: linear-gradient(to right, transparent, var(--color-divider), transparent);
}
.divider--vertical {
  width: var(--size-stroke-m);
  height: auto;
  align-self: stretch;
  background: linear-gradient(to bottom, transparent, var(--color-divider), transparent);
}

/* ── Поле ввода ──────────────────────────────────────────────────────── */
/* Figma: Input, нода 842:49185. Сверено 13.08 — раньше компонент был выведен
   и не совпадал с китом ни высотой, ни обводкой, ни типографикой.
   Метрики кита: высота 38 (как кнопка M), скругление 10, паддинг 8, зазор 8,
   обводка 2px, подпись P2/regular 15/22.
   Обёртка + сам input: рамка и фокус живут на обёртке, чтобы внутрь можно
   было положить иконку, тег или кнопку — в ките всё это предусмотрено */
/* Высота фиксированная, а не min-height: в ките поле 38 при паддинге 8 и
   подписи с интерлиньяжем 22 — сумма даёт 42, значит высота там задана
   жёстко, а содержимое центрируется. Повторяем то же: высота 38 (ровно как
   у кнопки M, чтобы поле и кнопка совпадали в строке), паддинг только
   горизонтальный, вертикальное центрирование делает flex */
.field {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  height: var(--size-button-m);
  padding-inline: var(--spacing-xs);
  border: var(--size-stroke-m) solid var(--color-input-border);
  border-radius: var(--radius-l);
  background: var(--color-surface);
  transition: border-color var(--duration-fast) var(--ease-brand),
              box-shadow var(--duration-fast) var(--ease-brand);
}
/* Фокус у поля свой и он из кита: обводка перекрашивается в Basic/Active,
   плюс кольцо spread 3. Общее правило :focus-visible сюда не приходит —
   фокус получает внутренний input, а рисовать кольцо надо на обёртке */
.field:focus-within {
  border-color: var(--color-input-border-focus);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus);
}
/* Ошибка. Логика та же, цвет другой: обводка Basic/Error + кольцо #eb695942 */
.field--error {
  border-color: var(--color-input-border-error);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--color-focus-error);
}
/* Выключенное поле: обводка остаётся, гаснет только содержимое */
.field--disabled { pointer-events: none; }
.field--disabled .field__input,
.field--disabled .field__input::placeholder { color: var(--color-disabled); }
/* Скелетон: заливка вместо обводки, содержимого не видно */
.field--skeleton {
  background: var(--color-skeleton);
  border-color: transparent;
  pointer-events: none;
}
.field--skeleton .field__input { color: transparent; }
/* Многострочное поле — те же правила, но высота растёт от 90 (значение кита),
   и паддинг снова полный: текст начинается сверху, а не по центру */
.field--area {
  height: auto;
  min-height: 90px;
  padding: var(--spacing-xs);
  align-items: flex-start;
}
.field--pill { border-radius: var(--radius-full); padding-inline: var(--spacing-m); }
.field--raised { box-shadow: var(--shadow-raised); }

/* Тег внутри поля. Figma: Span/Tags — высота 22, скругление 7, паддинг 4.
   Подпись всегда Text/Primary: цвет тега говорит о статусе, а не текст */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xxs);
  height: var(--size-button-xs);
  padding-inline: var(--spacing-xxs);
  border-radius: var(--radius-tag);
  background: var(--color-tag-info);
  color: var(--color-text-primary);
  font-size: var(--text-p2);
  line-height: var(--text-p2--line-height);
}
.tag--success  { background: var(--color-tag-success); }
.tag--error    { background: var(--color-tag-error); }
.tag--disabled { background: var(--color-tag-disabled); color: var(--color-text-secondary); }
.tag--skeleton { background: var(--color-skeleton); color: transparent; }

/* Карточка ввода hero (930:59505) — главный объект первого экрана.
   Три приметы, и все три обязательны: обводка 4px градиентом Pushchino,
   скругление 36 с острым нижним левым углом (оттуда растёт «хвост» реплики)
   и пятислойная тень. Градиент по границе делается двумя фонами:
   белый по padding-box перекрывает градиент по border-box */
.input-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
  padding: var(--spacing-m);
  border: 4px solid transparent;
  border-radius: var(--radius-input) var(--radius-input) var(--radius-input) 0;
  background:
    linear-gradient(var(--color-surface), var(--color-surface)) padding-box,
    var(--gradient-pushchino) border-box;
  box-shadow: var(--shadow-card);
}
.field__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-p2);
  line-height: var(--text-p2--line-height);
}
/* Плейсхолдер — Text/Secondary: он подсказка, а не значение */
.field__input::placeholder { color: var(--color-text-secondary); }

/* ── Чип ─────────────────────────────────────────────────────────────── */
/* Figma: Button Card (930:59525). Один компонент на две роли: выбор шаблона
   под полем ввода и метка типа продукта на карточке кейса. Заливка — wash
   палитры сущности, а текст и иконка всегда Text/Primary: accent'ы палитр
   (#47c2e1, #92c73d) на своём же фоне дают контраст ниже 2 и не читаются.
   Цвет передаётся через --chip-wash, вариантов-классов шесть */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  height: var(--size-chip);
  padding-inline: var(--spacing-m);
  border: 0;
  border-radius: var(--radius-full);
  background: var(--chip-wash, var(--color-fill-secondary));
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-p1);
  line-height: var(--text-p1--line-height);
  font-weight: var(--font-weight-body-medium);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-brand);
}
/* Наведение и нажатие — соседние ступени той же палитры (Figma 937:1383:
   11 → 22 → 33), а не осветление фильтром. Фильтр менял бы и цвет подписи,
   и на разных палитрах давал бы разный шаг */
@media (hover: hover) {
  .chip:hover { background: var(--chip-wash-22, var(--color-button-secondary-hover)); }
}
.chip:active,
.chip[aria-pressed="true"] { background: var(--chip-wash-33, var(--color-button-secondary-pressed)); }
.chip:disabled { background: var(--color-disabled); color: var(--color-text-on-primary); cursor: not-allowed; }
.chip__icon { width: var(--size-button-icon-m); height: var(--size-button-icon-m); flex: none; }

.chip--bot    { --chip-wash: var(--entity-bot-wash);    --chip-wash-22: var(--entity-bot-wash-22);    --chip-wash-33: var(--entity-bot-wash-33); }
.chip--app    { --chip-wash: var(--entity-app-wash);    --chip-wash-22: var(--entity-app-wash-22);    --chip-wash-33: var(--entity-app-wash-33); }
.chip--shop   { --chip-wash: var(--entity-shop-wash);   --chip-wash-22: var(--entity-shop-wash-22);   --chip-wash-33: var(--entity-shop-wash-33); }
.chip--funnel { --chip-wash: var(--entity-funnel-wash); --chip-wash-22: var(--entity-funnel-wash-22); --chip-wash-33: var(--entity-funnel-wash-33); }
.chip--game   { --chip-wash: var(--entity-game-wash);   --chip-wash-22: var(--entity-game-wash-22);   --chip-wash-33: var(--entity-game-wash-33); }
.chip--gate   { --chip-wash: var(--entity-gate-wash);   --chip-wash-22: var(--entity-gate-wash-22);   --chip-wash-33: var(--entity-gate-wash-33); }

/* Тот же чип как ярлык на верхней кромке карточки кейса (930:59861):
   верхние углы срезаны, нижние — скругление карточки. Курсора нет */
.chip--tab {
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  cursor: default;
}
.chip--tab:active { filter: none; }
@media (hover: hover) {
  .chip--tab:hover { filter: none; }
}


/* ══ Компоненты страницы тарифов ══════════════════════════════════════════
   Figma «Landing» QO1EeXYIc7UBXIwZqAdw20, нода 1327:4221 (07.09.2026).
   Все размеры сняты через Plugin API, не с растра.

   Ни одного нового цвета: после сверки с Kit 2.0 выяснилось, что вся
   палитра страницы уже есть в токенах. Новыми оказались только два
   градиента и тень — они объявлены выше, в общем списке.               */

/* ── Сегментированный переключатель ──────────────────────────────────────
   Figma 1311:2323 (период) и 1311:2345 (валюта). В макете зовётся
   «Button Card», но с .chip у него общего только скругление: чип — метка
   и выбор шаблона, а это переключатель одного из двух.

   Группа прозрачная с обводкой, активный сегмент — заливка. Не наоборот:
   в макете у неактивного сегмента заливка скрыта, а не белая.

   Разметка — role="radiogroup" с кнопками role="radio": так стрелки и
   переход табом работают без единой строки скрипта. */
.segmented {
  display: inline-flex;
  align-items: center;
  border: var(--size-stroke-m) solid var(--entity-bot-wash);
  border-radius: var(--radius-full);
}
.segmented__item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-m);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: var(--text-p1);
  line-height: var(--text-p1--line-height);
  font-weight: var(--font-weight-body-medium);
  cursor: pointer;
}
.segmented__item[aria-checked="true"] { background: var(--entity-bot-wash); }
.segmented__item:active { background: var(--entity-bot-wash-22); }
@media (hover: hover) {
  .segmented__item:hover { background: var(--entity-bot-surface); }
  /* Ступенью выше, чем у неактивного: обратная связь должна быть заметна
     и на уже выбранном сегменте.
     ⚠️ В макете здесь #d6eff5 — это СТАРОЕ значение Paris/11, слой рисовался
     до обновления кита. Взято по правилу шкалы: наведение — ступень 22 */
  .segmented__item[aria-checked="true"]:hover { background: var(--entity-bot-wash-22); }
}
.segmented__item:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-brand);
  outline-offset: var(--focus-ring-offset);
}
/* Вложенная пилюля: «автоплатёж −10%» внутри сегмента «Месяц». Сегмент
   с ней прижимается справа — пилюля набирает поле сама. Скрытая пилюля
   поля не набирает: за неё отвечает :not([hidden]) в селекторе, иначе
   сегмент «Месяц» остаётся перекошенным влево при годе и валюте МИР */
.segmented__item:has(.segmented__pill:not([hidden])) { padding: var(--spacing-xxxs) var(--spacing-xxs) var(--spacing-xxxs) var(--spacing-m); }
.segmented__pill {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--spacing-s);
  min-height: 36px;
  border-radius: var(--radius-full);
  background: var(--entity-bot-surface);
}
/* На выбранном сегменте пилюля не своим цветом, а полупрозрачным белым:
   под ней уже лежит заливка сегмента, и ступень 05 на ступени 11 даёт
   грязь. В макете там ровно белый с непрозрачностью 0.5 */
.segmented__item[aria-checked="true"] .segmented__pill {
  background: rgb(255 255 255 / .5);
}
/* display здесь сильнее атрибута hidden — без этой строки скрипт ставит
   hidden, а пилюля остаётся на месте. Проверено живьём 11.09.2026:
   «автоплатёж −10%» висел и на годе, и в долларах */
.segmented__pill[hidden] { display: none; }
/* Выгодный сегмент — «12 месяцев» с самой большой скидкой. Figma 1460:5402
   (не выбран) и 1463:5416 (выбран): вместо Paris палитра Dublin, та же
   шкала ступеней. Обводку сегмента рисует страница, которой она нужна, —
   модификатор отдаёт ей цвет через --segmented-stroke. Пилюля на выбранном
   остаётся белой 50%: правило выше весомее этого */
.segmented__item--promo { --segmented-stroke: var(--entity-app-stroke); }
.segmented__item--promo .segmented__pill { background: var(--entity-app-surface); }
.segmented__item--promo[aria-checked="true"] {
  --segmented-stroke: var(--entity-app-wash);
  background: var(--entity-app-wash);
}
.segmented__item--promo:active { background: var(--entity-app-wash-22); }
@media (hover: hover) {
  .segmented__item.segmented__item--promo:hover { background: var(--entity-app-surface); }
  .segmented__item--promo[aria-checked="true"]:hover { background: var(--entity-app-wash-22); }
}

/* ── Тарифная карточка ───────────────────────────────────────────────────
   Figma 1307:1978 / 1307:2048 / 1307:2100, 402×456.

   Обводки две: у карточки и у её верхней части, тем же цветом. Верхняя
   часть — самостоятельная скруглённая карточка, её нижние углы загнуты
   внутрь, и этим блок покупки отделён от списка лимитов.

   Сверху и по бокам линия при этом одна: в Figma обе обводки стоят
   OUTSIDE и ложатся друг на друга.
   В CSS border всегда рисуется внутрь, поэтому верхняя часть вытянута
   отрицательным полем на толщину канта — её рамка накрывает рамку
   карточки ровно, радиус к радиусу. Без этого сдвига радиусы расходятся
   на толщину канта и в углу появляется двойная дуга, которой в макете нет.

   Цвет обводки идёт через --plan-border, чтобы вариант менял одну строку,
   а не пять правил. */
.plan-card {
  --plan-border: var(--color-divider);
  /* Поле карточки. Переменной, а не числом: в ряду из трёх на планшете
     его ужимает страница — см. адаптив тарифов в styles.css */
  --plan-pad: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  border: var(--size-stroke-m) solid var(--plan-border);
  border-radius: calc((var(--radius-xl) + var(--size-stroke-m)) * var(--corner-scale));
  corner-shape: var(--corner-smooth);
  background: var(--color-bg-primary);
}
.plan-card__top {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
  padding: var(--plan-pad);
  /* Наружу на толщину канта — рамка в рамку, см. комментарий выше */
  margin: calc(var(--size-stroke-m) * -1);
  margin-block-end: 0;
  border: var(--size-stroke-m) solid var(--plan-border);
  border-radius: calc((var(--radius-xl) + var(--size-stroke-m)) * var(--corner-scale));
  corner-shape: var(--corner-smooth);
  /* Бейдж «Puzzlo AI» позиционируется от неё */
  position: relative;
}
/* Поля у содержимого обнуляются здесь, а не в разметке: компонент не
   должен зависеть от того, каким тегом его набрали. Заголовок бывает h2
   на странице и div на витрине, у первого браузерный margin есть,
   у второго нет — и зазоры разъезжаются на 37px */
.plan-card__top > *,
.plan-card__list > *,
.info-tile > *,
.sale-banner > *,
.note-row { margin: 0; }

.plan-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  line-height: var(--text-h2--line-height);
  letter-spacing: var(--text-h2--letter-spacing);
  font-weight: var(--font-weight-heading);
}
.plan-card__desc {
  font-size: var(--text-p1);
  line-height: var(--text-p1--line-height);
}
/* Цена и подпись выровнены по нижней кромке, а не по центру: в макете
   подпись в две строки, и по центру она уводит цену вверх.

   Перенос — на случай «Про»: цена там считается по степперам, и на десяти
   миллионах пользователей это 490 000 ₽ — рядом с подписью такое в строку
   не встаёт. Ширину карточки при этом не трогаем: подпись просто уходит
   под цену. Делает это сам flex-wrap, без замера в скрипте — в неразрывной
   цене переносить нечего, и пара «цена + подпись» перестаёт влезать сама.
   space-between держит подпись справа, пока строка одна, и отпускает её
   влево, когда она осталась на второй одна */
.plan-card__price-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-m);
}
.plan-card__price {
  font-family: var(--font-heading);
  font-size: var(--text-e1);
  line-height: var(--text-e1--line-height);
  letter-spacing: var(--text-e1--letter-spacing);
  font-weight: var(--font-weight-heading);
}
/* Подпись справа от цены: «1490 ₽ без автоплатежа», «Тариф с рекламой».
   По правому краю — она уравновешивает цену, а не тянется за ней */
.plan-card__note {
  /* Одной строкой всегда: рядом с ценой её ломать некрасиво, а под ценой
     ширины карточки хватает. Не помещается — price.js уводит её вниз
     целиком, во всех трёх карточках сразу */
  white-space: nowrap;
  font-size: var(--text-p2);
  line-height: var(--text-p2--line-height);
  color: var(--color-text-secondary);
  text-align: right;
}
/* Кнопка на всю ширину карточки. .btn--hero сюда не годится: он вместе
   с размером 56 жёстко ставит и брендовую заливку, а у бесплатного тарифа
   кнопка вторичная. Поэтому размер здесь свой, а цвет по-прежнему
   выбирает .btn--primary или .btn--secondary.
   Паддинги симметричные, в отличие от hero: там справа стоит иконка,
   здесь подпись по центру */
.plan-card__cta {
  width: 100%;
  /* Подпись в одну строку. Ею же меряется минимальная ширина карточки:
     ряд скорее уедет в горизонтальный скролл, чем разорвёт кнопку */
  white-space: nowrap;
  /* Плюсом к общему gap 16: в макете кнопка в отдельной обёртке
     с отступом сверху, до цены выходит 32 */
  margin-block-start: var(--spacing-m);
  height: var(--size-button-hero);
  justify-content: center;
  padding-inline: var(--spacing-l);
  border-radius: var(--radius-full);
  font-size: var(--text-p1);
  line-height: var(--text-p1--line-height);
}
.plan-card__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
  padding: var(--spacing-l) var(--plan-pad);
}
/* Название лимита и значение одного веса — в макете значение не выделено */
.plan-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-m);
  font-size: var(--text-p1);
  line-height: var(--text-p1--line-height);
  font-weight: var(--font-weight-body-medium);
}
/* Значение переносу не подлежит: в узкой карточке «1 000» ломается на
   «1» и «000» — по разрядам, ровно там, где стоит неразрывный пробел
   из toLocaleString. Переносится пусть название слева, оно из слов */
.plan-card__row > span:last-child { white-space: nowrap; }
/* Лимита в тарифе нет вовсе — строка гаснет целиком, а не только прочерк:
   иначе «AI кредитов» читается как доступная возможность */
.plan-card__row--off { color: var(--color-text-tertiary); }

/* Три варианта карточки. Отличаются парой «обводка + фон верха», как и
   .card: заливка и обводка всегда соседние ступени одной шкалы.
   У бесплатного и старта цвет лежит внизу и гаснет в белый на 140px —
   в макете это прямоугольник 402×140, прижатый к нижней кромке верхней
   части (1314:2832), в CSS хватает одной точки остановки. У «Про»
   градиент диагональный и на всю высоту */
.plan-card--free  { --plan-border: var(--color-divider); }
.plan-card--free  .plan-card__top {
  background: linear-gradient(0deg, var(--color-neutral-03), var(--color-bg-primary) 140px);
}
.plan-card--start { --plan-border: var(--entity-bot-wash); }
.plan-card--start .plan-card__top {
  background: linear-gradient(0deg, var(--entity-condition-tint), var(--color-bg-primary) 140px);
}
.plan-card--pro   { --plan-border: var(--entity-game-wash); }
.plan-card--pro   .plan-card__top { background: var(--gradient-plan-pro); }
/* Четвёртый вариант понадобился старой сетке: там тарифов четыре, и в
   кабинете они покрашены серым, зелёным, мятным и оранжевым (Figma
   2711:13370). Зелёного среди трёх выше не было — остальные три
   совпали с кабинетом как есть */
.plan-card--creative { --plan-border: var(--entity-app-wash); }
.plan-card--creative .plan-card__top {
  background: linear-gradient(0deg, var(--entity-app-tint), var(--color-bg-primary) 140px);
}

/* Заголовок и бейдж «Puzzlo AI» — одной строкой. В макете бейдж висит в
   углу, но висящий он на узкой карточке накрывает заголовок, а уезжая
   под него — прыгает по вертикали от ширины экрана. В строке он стоит на
   одном уровне с заголовком на любой ширине и сам входит в минимальную
   ширину карточки, из-за которой ряд уходит в скролл */
.plan-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-s);
  /* Высота бейджа, даже когда бейджа нет: у бесплатного тарифа его нет,
     и без этой строки заголовок там стоит на 12px выше, а за ним уезжает
     вверх и всё остальное — цены в ряду перестают быть на одной линии */
  min-height: var(--size-chip);
}
.plan-card__head > * { margin: 0; }
/* Бейдж стоит в углу карточки, в 8 от обеих кромок. Не position: absolute:
   вынутый из потока, он перестаёт держать место, и длинное название тарифа
   уезжает под него. Вместо этого бейдж остаётся элементом строки, а в угол
   его выносят отрицательные поля — ровно на столько, сколько карточка
   отступает сверх восьми. Поле карточки меняется по ступеням адаптива,
   и вылет идёт за ним сам. Кант в вылете тоже учтён: восемь меряются
   от внешней кромки карточки, а поле начинается за обводкой */
.plan-card__badge {
  flex: none;
  align-self: flex-start;
  margin-block-start: calc((var(--plan-pad) - var(--spacing-xs) + var(--size-stroke-m)) * -1);
  margin-inline-end: calc((var(--plan-pad) - var(--spacing-xs) + var(--size-stroke-m)) * -1);
}

/* Плашка цены со скидкой (.price-plate, Figma 1323:3893) снята 11.09.2026:
   в макете она выключена, Александр переделывает её заново. Вернётся
   отдельным блоком по новому макету — старый в git, коммит найдётся
   по имени класса. */

/* ── Таблица различий тарифов ────────────────────────────────────────────
   Четырнадцать строк на четыре тарифа под карточками страницы /price.
   Тег table, а не сетка из div: строк много, и scope даёт скринридеру
   заголовки строк и колонок без единого aria-атрибута.

   Ширины колонок не заданы: браузер сам отдаёт первой столько, сколько
   просит самое длинное название строки, а остальные делит по содержимому.
   Фиксировать нечего — числа в ячейках короткие. */
.limits-table {
  width: 100%;
  /* separate, а не collapse: со схлопнутыми границами скругление у строки
     не рисуется вовсе — углы срезает соседняя ячейка */
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-p1);
  line-height: var(--text-p1--line-height);
}
.limits-table th,
.limits-table td {
  padding: var(--spacing-m);
  text-align: center;
  vertical-align: middle;
}
/* Заголовок колонки — имя тарифа, он же заголовок карточки выше */
.limits-table thead th {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
  font-weight: var(--font-weight-heading);
}
.limits-table th[scope="row"] {
  text-align: start;
  font-weight: var(--font-weight-body-medium);
}
/* Полоска через строку: на четырнадцати строках глаз иначе съезжает на
   соседнюю, пока ведёт от названия к колонке тарифа. Голубой — первая
   ступень Info, ею же залиты карточки-фичи; скругление по общему
   правилу кита, радиус со шкалой и сглаженный угол.

   Фон кладётся на ячейки, а не на строку: у tr фон рисуется, а радиус
   нет — скруглять приходится крайние ячейки */
.limits-table tbody tr:nth-child(odd) :is(th, td) {
  background: var(--color-info-01);
}
.limits-table tbody tr:nth-child(odd) :is(th, td):first-child {
  border-start-start-radius: calc(var(--radius-m) * var(--corner-scale));
  border-end-start-radius: calc(var(--radius-m) * var(--corner-scale));
}
.limits-table tbody tr:nth-child(odd) :is(th, td):last-child {
  border-start-end-radius: calc(var(--radius-m) * var(--corner-scale));
  border-end-end-radius: calc(var(--radius-m) * var(--corner-scale));
}
.limits-table tbody tr:nth-child(odd) :is(th, td) { corner-shape: var(--corner-smooth); }
/* Возможности нет — прочерк в приглушённом цвете, а не красный крестик:
   ряд крестов читается как список ошибок, а не как список отличий */
.limits-table__off { color: var(--color-text-tertiary); }
/* Центруется полем, а не display: inline-block: базовый .icon объявлен
   ниже в этом файле и своим display: block перебивает любой другой —
   иконка вставала к левому краю ячейки, а не по центру колонки */
.limits-table__yes {
  width: var(--size-button-icon-s);
  height: var(--size-button-icon-s);
  margin-inline: auto;
  color: var(--color-brand);
}

/* ── Степпер лимита ──────────────────────────────────────────────────────
   Figma 1307:2127 и 1307:2121. Минус нейтральный, плюс — брендовый:
   увеличить лимит это действие, уменьшить — откат. */
.stepper {
  display: inline-flex;
  align-items: center;
}
/* Ширина фиксированная и число по центру — так минусы стоят под минусами,
   а плюсы под плюсами, сколько бы разрядов ни было в строке. Значение
   макета (1307:2111): 90 при кнопках 24 даёт колонку 138 */
.stepper__value {
  inline-size: var(--size-stepper-value);
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
}
/* Поле ввода, а не подпись: число можно набрать руками, если нужного
   значения кнопками добираться долго. Пока не в фокусе — неотличимо от
   текста, рамка появляется по клику */
.stepper__value:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-brand);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-m);
}

.stepper__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--spacing-l);
  height: var(--spacing-l);
  flex: none;
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
}
.stepper__btn .icon {
  width: var(--size-button-icon-s);
  height: var(--size-button-icon-s);
}
/* Обе кнопки брендовые: уменьшить лимит — такое же действие, как
   увеличить, и серый минус читался как «недоступно» даже там, где он
   работает. Настоящая недоступность видна по погашенной кнопке ниже */
.stepper__btn--minus,
.stepper__btn--plus { background: var(--color-button-primary); color: var(--color-text-on-primary); }
.stepper__btn:disabled {
  background: var(--color-neutral-11);
  color: var(--color-text-secondary);
  opacity: .4;
  cursor: default;
}
.stepper__btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-brand);
  outline-offset: var(--focus-ring-offset);
}

/* ── Бейдж Puzzlo AI ─────────────────────────────────────────────────────
   Figma 1308:2287. Обводка градиентом тем же приёмом, что у .input-card:
   два фона и border-box — иначе градиент в border не положить.
   ⚠️ Подпись #c866f6 на белом даёт 3.66 при норме 4.5 для 17px. Значение
   макета, в известные проблемы записано. */
/* Подпись бейджа одним элементом: gap раскладки стоит между иконкой и
   текстом, и если разбить текст на два узла, зазор появится ещё и
   посреди «Puzzlo AI» */
.ai-badge__text { white-space: nowrap; }
.ai-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-height: var(--size-chip);
  padding-inline: var(--spacing-s);
  border: var(--size-stroke-s) solid transparent;
  border-radius: var(--radius-full);
  background:
    linear-gradient(var(--color-bg-primary), var(--color-bg-primary)) padding-box,
    var(--gradient-ai-badge) border-box;
  color: var(--entity-ai-accent-120);
  font-size: var(--text-p1);
  line-height: var(--text-p1--line-height);
  font-weight: var(--font-weight-body-medium);
}

/* ── Баннер акции ────────────────────────────────────────────────────────
   Figma 1320:3440. Живёт на странице только когда скидка идёт: нет
   скидки — блока нет в разметке, а не спрятан. Собирается инклюдом. */
.sale-banner {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
  padding: var(--spacing-xl);
  border: var(--size-stroke-m) solid var(--entity-app-wash-22);
  border-radius: calc(var(--radius-xl) * var(--corner-scale));
  corner-shape: var(--corner-smooth);
  background: var(--entity-app-wash);
  box-shadow: var(--shadow-sale);
}
.sale-banner__title {
  font-family: var(--font-heading);
  font-size: var(--text-h2);
  line-height: var(--text-h2--line-height);
  letter-spacing: var(--text-h2--letter-spacing);
  font-weight: var(--font-weight-heading);
  flex: none;
}
.sale-banner__text {
  font-size: var(--text-p1);
  line-height: var(--text-p1--line-height);
}

/* ── Строка-сноска с иконкой ─────────────────────────────────────────────
   Figma 1323:4204. Пояснение под блоком, а не предупреждение: иконка
   нейтрального цвета, рамки нет. */
.note-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--text-p1);
  line-height: var(--text-p1--line-height);
}
.note-row .icon {
  width: var(--size-icon-note);
  height: var(--size-icon-note);
  flex: none;
  color: var(--color-text-secondary);
}

/* ── Плитка с эмодзи ─────────────────────────────────────────────────────
   Figma 1314:2704. Ряд таких плиток разделяют .divider--vertical.
   Эмодзи текстом, а не картинкой: четыре картинки ради четырёх символов —
   это четыре запроса на пустом месте. */
.info-tile {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
  padding: var(--spacing-xl);
}
.info-tile__head {
  display: flex;
  align-items: center;
  gap: var(--spacing-m);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
  font-weight: var(--font-weight-heading);
}
.info-tile__emoji {
  width: var(--size-icon-note);
  height: var(--size-icon-note);
  flex: none;
  font-size: var(--text-h3);
  line-height: var(--size-icon-note);
  text-align: center;
}
.info-tile__body {
  display: flex;
  gap: var(--spacing-m);
  font-size: var(--text-p1);
  line-height: var(--text-p1--line-height);
  color: var(--color-text-secondary);
}
/* Текст встаёт под заголовком, а не под эмодзи: пустышка той же ширины
   держит колонку без grid и без магических отступов */
.info-tile__body::before {
  content: "";
  width: var(--size-icon-note);
  flex: none;
}

/* ── Иконки ──────────────────────────────────────────────────────────────
   Один набор на весь сайт. До 23.08.2026 иконки лежали в двух местах:
   три штуки в landing/styles.css, шестнадцать в kb/kb.css, — и оттуда уже
   расползлись дублями: --icon-x и --icon-close оказались байт в байт одной
   картинкой под разными именами, --icon-anchor и --icon-link — одним
   рисунком в двух выгрузках. Третья страница завела бы третий набор.

   Рисунок встроен data-URI, а не подключён файлом, по той же причине,
   что и логотип: mask через file:// блокируется CORS, а страницы проекта
   открываются двойным кликом. Заливка из путей вырезана — маске она
   не нужна, цвет даёт currentColor.

   Размер по умолчанию — Button/Icon/M (22). Блоку, которому нужен другой,
   его задаёт своё правило: иконка не знает, куда её поставили. */
.icon {
  display: block;
  width: var(--size-button-icon-m);
  height: var(--size-button-icon-m);
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

.icon--menu { -webkit-mask-image: var(--icon-menu); mask-image: var(--icon-menu); }
  /* крестик: закрытое меню в шапке и закрытие панели в справке — одна иконка */
.icon--close { -webkit-mask-image: var(--icon-close); mask-image: var(--icon-close); }
  /* галочка: «возможность есть» в таблице различий тарифов. Парного
     крестика нет намеренно — отсутствие там показано прочерком */
.icon--check { -webkit-mask-image: var(--icon-check); mask-image: var(--icon-check); }
  /* цепь: копирование ссылки и кнопка якоря у заголовка */
.icon--link { -webkit-mask-image: var(--icon-link); mask-image: var(--icon-link); }
.icon--caret { -webkit-mask-image: var(--icon-caret-right); mask-image: var(--icon-caret-right); }
.icon--chevron { -webkit-mask-image: var(--icon-chevron); mask-image: var(--icon-chevron); }
.icon--copy { -webkit-mask-image: var(--icon-copy); mask-image: var(--icon-copy); }
.icon--arrow-up-right { -webkit-mask-image: var(--icon-arrow-up-right); mask-image: var(--icon-arrow-up-right); }
.icon--search { -webkit-mask-image: var(--icon-search); mask-image: var(--icon-search); }
.icon--thumbs-up { -webkit-mask-image: var(--icon-thumbs-up); mask-image: var(--icon-thumbs-up); }
.icon--thumbs-down { -webkit-mask-image: var(--icon-thumbs-down); mask-image: var(--icon-thumbs-down); }
.icon--x-circle { -webkit-mask-image: var(--icon-x-circle); mask-image: var(--icon-x-circle); }
.icon--book { -webkit-mask-image: var(--icon-book); mask-image: var(--icon-book); }

/* Страница тарифов. Кружок «i» и карта стоят в сносках под карточками,
   минус и плюс — в степпере лимита, искра — в бейдже Puzzlo AI,
   глобус — в сегменте «МИР» переключателя валюты.
   Флага РФ здесь нет намеренно: он цветной, маской его не покрасить —
   лежит инлайновым <svg> в разметке переключателя */
.icon--info { -webkit-mask-image: var(--icon-info); mask-image: var(--icon-info); }
.icon--credit-card { -webkit-mask-image: var(--icon-credit-card); mask-image: var(--icon-credit-card); }
.icon--minus { -webkit-mask-image: var(--icon-minus); mask-image: var(--icon-minus); }
.icon--plus { -webkit-mask-image: var(--icon-plus); mask-image: var(--icon-plus); }
.icon--sparkle { -webkit-mask-image: var(--icon-sparkle); mask-image: var(--icon-sparkle); }
.icon--globe { -webkit-mask-image: var(--icon-globe); mask-image: var(--icon-globe); }

/* Печенье — плашка согласия на cookie */
.icon--cookie { -webkit-mask-image: var(--icon-cookie); mask-image: var(--icon-cookie); }

/* Знаки разделов базы знаний. Каждому разделу — свой: читатель узнаёт
   раздел по нему быстрее, чем по названию */
.icon--section-start { -webkit-mask-image: var(--icon-section-start); mask-image: var(--icon-section-start); }
.icon--section-posting { -webkit-mask-image: var(--icon-section-posting); mask-image: var(--icon-section-posting); }
.icon--section-constructor { -webkit-mask-image: var(--icon-section-constructor); mask-image: var(--icon-section-constructor); }
.icon--section-shop { -webkit-mask-image: var(--icon-section-shop); mask-image: var(--icon-section-shop); }

/* Знаки главной страницы справки. Логотипы мессенджеров подключены такой
   же маской, как остальные знаки: в карточке они чёрные, а не фирменных
   цветов, — цвет держит текст карточки, а не бренд */
.icon--telegram { -webkit-mask-image: var(--icon-telegram); mask-image: var(--icon-telegram); }
.icon--max { -webkit-mask-image: var(--icon-max); mask-image: var(--icon-max); }
.icon--text-aa { -webkit-mask-image: var(--icon-text-aa); mask-image: var(--icon-text-aa); }
.icon--users-four { -webkit-mask-image: var(--icon-users-four); mask-image: var(--icon-users-four); }
.icon--headset { -webkit-mask-image: var(--icon-headset); mask-image: var(--icon-headset); }
.icon--flask { -webkit-mask-image: var(--icon-flask); mask-image: var(--icon-flask); }
/* Вкладки блога и просмотры статьи. Постинг берёт section-posting:
   рисунок тот же. У конструктора и Puzzlo AI знаки свои: в макете вкладок
   (1522:11125, 1522:11140) кружки и контурная звезда, а знак раздела и
   залитая звезда — другой рисунок */
.icon--circles-four { -webkit-mask-image: var(--icon-circles-four); mask-image: var(--icon-circles-four); }
.icon--sparkle-outline { -webkit-mask-image: var(--icon-sparkle-outline); mask-image: var(--icon-sparkle-outline); }
.icon--users { -webkit-mask-image: var(--icon-users); mask-image: var(--icon-users); }
.icon--chat-dots { -webkit-mask-image: var(--icon-chat-dots); mask-image: var(--icon-chat-dots); }
.icon--robot { -webkit-mask-image: var(--icon-robot); mask-image: var(--icon-robot); }
.icon--device-tablet { -webkit-mask-image: var(--icon-device-tablet); mask-image: var(--icon-device-tablet); }
.icon--brackets-curly { -webkit-mask-image: var(--icon-brackets-curly); mask-image: var(--icon-brackets-curly); }
.icon--eye { -webkit-mask-image: var(--icon-eye); mask-image: var(--icon-eye); }

/* Рисунки. --icon-play класса не имеет намеренно: он висит прямо на кадре
   превью видео, отдельного элемента под треугольник там нет */
:root {
  --icon-menu: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M4 7h16M4 12h16M4 17h16%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3C/svg%3E');
  --icon-close: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M4 4l16 16M20 4L4 20%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3C/svg%3E');
  --icon-check: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M4 12.5l5.5 5.5L20 6%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E');
  --icon-link: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cg transform=%22translate(0.7486 1.75)%22%3E%3Cpath d=%22M6.57618 10.0463C6.6461 10.116 6.70157 10.1988 6.73943 10.29C6.77728 10.3811 6.79677 10.4789 6.79677 10.5776C6.79677 10.6763 6.77728 10.774 6.73943 10.8652C6.70157 10.9564 6.6461 11.0392 6.57618 11.1088L6.25618 11.4288C5.91649 11.7698 5.51258 12.04 5.0678 12.2239C4.62303 12.4078 4.14621 12.5016 3.66493 12.5001C2.94013 12.5003 2.23156 12.2856 1.62884 11.883C1.02612 11.4804 0.556351 10.9082 0.278954 10.2386C0.00155643 9.56894 -0.071 8.8321 0.0704639 8.12125C0.211928 7.4104 0.561055 6.75747 1.07368 6.24509L3.24555 4.07321C3.70751 3.61132 4.28453 3.2813 4.91687 3.11731C5.54921 2.95332 6.2139 2.96132 6.84211 3.14049C7.47032 3.31966 8.03922 3.66348 8.48992 4.13637C8.94062 4.60925 9.25674 5.194 9.40555 5.83009C9.4302 5.9268 9.43529 6.02746 9.42054 6.12617C9.40578 6.22488 9.37147 6.31965 9.31962 6.40493C9.26777 6.49021 9.19942 6.56428 9.11858 6.62281C9.03773 6.68133 8.94602 6.72313 8.84881 6.74576C8.75161 6.76839 8.65086 6.77138 8.55248 6.75458C8.4541 6.73777 8.36007 6.7015 8.27589 6.64789C8.1917 6.59427 8.11907 6.52439 8.06224 6.44235C8.00541 6.3603 7.96553 6.26774 7.94493 6.17009C7.85662 5.79461 7.66964 5.44952 7.4033 5.17051C7.13696 4.8915 6.80093 4.68869 6.42996 4.58304C6.05899 4.4774 5.66653 4.47275 5.29315 4.56958C4.91978 4.66641 4.57905 4.86121 4.30618 5.13384L2.1343 7.30571C1.83156 7.60821 1.62532 7.99369 1.54167 8.41341C1.45802 8.83312 1.50071 9.26822 1.66435 9.66367C1.82799 10.0591 2.10522 10.3972 2.46099 10.635C2.81676 10.8729 3.23508 11 3.66305 11.0001C3.94741 11.0009 4.22911 10.9453 4.49184 10.8365C4.75457 10.7277 4.99311 10.5679 5.19368 10.3663L5.51305 10.0463C5.58274 9.97632 5.66557 9.92076 5.7568 9.88286C5.84802 9.84495 5.94583 9.82543 6.04461 9.82543C6.1434 9.82543 6.24121 9.84495 6.33243 9.88286C6.42365 9.92076 6.50649 9.97632 6.57618 10.0463ZM13.4293 1.07321C12.7419 0.386033 11.8097 0 10.8377 0C9.86576 0 8.93358 0.386033 8.24618 1.07321L7.9268 1.39259C7.78591 1.53348 7.70675 1.72458 7.70675 1.92384C7.70675 2.12309 7.78591 2.31419 7.9268 2.45509C8.0677 2.59598 8.25879 2.67514 8.45805 2.67514C8.65731 2.67514 8.84841 2.59598 8.9893 2.45509L9.3093 2.13509C9.71542 1.72897 10.2662 1.50082 10.8406 1.50082C11.4149 1.50082 11.9657 1.72897 12.3718 2.13509C12.7779 2.5412 13.0061 3.09201 13.0061 3.66634C13.0061 4.24067 12.7779 4.79147 12.3718 5.19759L10.1962 7.36634C9.99566 7.56797 9.75711 7.72781 9.49438 7.8366C9.23164 7.94539 8.94992 8.00096 8.66555 8.00009C8.17774 7.99974 7.70434 7.83461 7.32214 7.53149C6.93994 7.22836 6.67135 6.80501 6.55993 6.33009C6.51484 6.13631 6.39462 5.96839 6.22572 5.86325C6.05682 5.75811 5.85308 5.72437 5.6593 5.76946C5.46553 5.81455 5.2976 5.93476 5.19246 6.10366C5.08733 6.27256 5.05359 6.47631 5.09868 6.67009C5.28687 7.47438 5.74124 8.19152 6.38811 8.7052C7.03498 9.21889 7.83641 9.49899 8.66243 9.50009H8.66555C9.14706 9.5014 9.62405 9.40724 10.0689 9.22304C10.5138 9.03885 10.9178 8.76827 11.2574 8.42696L13.4293 6.25509C13.7696 5.91487 14.0395 5.51094 14.2237 5.06638C14.4079 4.62183 14.5027 4.14534 14.5027 3.66415C14.5027 3.18295 14.4079 2.70647 14.2237 2.26191C14.0395 1.81736 13.7696 1.41343 13.4293 1.07321Z%22 fill=%22%23000%22/%3E%3C/g%3E%3C/svg%3E');
  --icon-caret-right: url('data:image/svg+xml,%3Csvg width=%2216%22 height=%2216%22 viewBox=%220 0 16 16%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M11.53 8.53L6.53 13.53C6.39 13.67 6.2 13.75 6 13.75C5.8 13.75 5.61 13.67 5.47 13.53C5.33 13.39 5.25 13.2 5.25 13C5.25 12.8 5.33 12.61 5.47 12.47L9.94 8L5.47 3.53C5.4 3.46 5.34 3.38 5.31 3.29C5.27 3.2 5.25 3.1 5.25 3C5.25 2.9 5.27 2.8 5.31 2.71C5.34 2.62 5.4 2.54 5.47 2.47C5.54 2.4 5.62 2.34 5.71 2.31C5.8 2.27 5.9 2.25 6 2.25C6.1 2.25 6.2 2.27 6.29 2.31C6.38 2.34 6.46 2.4 6.53 2.47L11.53 7.47C11.6 7.54 11.66 7.62 11.69 7.71C11.73 7.8 11.75 7.9 11.75 8C11.75 8.1 11.73 8.2 11.69 8.29C11.66 8.38 11.6 8.46 11.53 8.53Z%22/%3E%3C/svg%3E');
  --icon-chevron: url('data:image/svg+xml,%3Csvg width=%2222%22 height=%2222%22 viewBox=%220 0 22 22%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M15.85 11.73L8.98 18.6C8.79 18.8 8.52 18.91 8.25 18.91C7.98 18.91 7.71 18.8 7.52 18.6C7.33 18.41 7.22 18.15 7.22 17.87C7.22 17.6 7.33 17.34 7.52 17.14L13.66 11L7.52 4.85C7.42 4.76 7.35 4.65 7.3 4.52C7.24 4.39 7.22 4.26 7.22 4.12C7.22 3.99 7.24 3.85 7.3 3.73C7.35 3.6 7.42 3.49 7.52 3.39C7.62 3.3 7.73 3.22 7.86 3.17C7.98 3.12 8.12 3.09 8.25 3.09C8.39 3.09 8.52 3.12 8.65 3.17C8.77 3.22 8.89 3.3 8.98 3.39L15.86 10.27C15.95 10.36 16.03 10.48 16.08 10.6C16.13 10.73 16.16 10.86 16.16 11C16.16 11.14 16.13 11.27 16.08 11.4C16.03 11.52 15.95 11.63 15.85 11.73Z%22/%3E%3C/svg%3E');
  --icon-copy: url('data:image/svg+xml,%3Csvg width=%2216%22 height=%2216%22 viewBox=%220 0 16 16%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M13.78 3.72L11.28 1.22C11.21 1.15 11.13 1.09 11.04 1.06C10.95 1.02 10.85 1 10.75 1H5.75C5.42 1 5.1 1.13 4.87 1.37C4.63 1.6 4.5 1.92 4.5 2.25V3.5H3.5C3.17 3.5 2.85 3.63 2.62 3.87C2.38 4.1 2.25 4.42 2.25 4.75V13.5C2.25 13.83 2.38 14.15 2.62 14.38C2.85 14.62 3.17 14.75 3.5 14.75H10.25C10.58 14.75 10.9 14.62 11.13 14.38C11.37 14.15 11.5 13.83 11.5 13.5V12.25H12.75C13.08 12.25 13.4 12.12 13.63 11.88C13.87 11.65 14 11.33 14 11V4.25C14 4.15 13.98 4.05 13.94 3.96C13.91 3.87 13.85 3.79 13.78 3.72ZM10 13.25H3.75V5H7.94L10 7.06V13.25ZM12.5 10.75H11.5V6.75C11.5 6.65 11.48 6.55 11.44 6.46C11.41 6.37 11.35 6.29 11.28 6.22L8.78 3.72C8.71 3.65 8.63 3.59 8.54 3.56C8.45 3.52 8.35 3.5 8.25 3.5H6V2.5H10.44L12.5 4.56V10.75ZM9 9C9 9.2 8.92 9.39 8.78 9.53C8.64 9.67 8.45 9.75 8.25 9.75H5.5C5.3 9.75 5.11 9.67 4.97 9.53C4.83 9.39 4.75 9.2 4.75 9C4.75 8.8 4.83 8.61 4.97 8.47C5.11 8.33 5.3 8.25 5.5 8.25H8.25C8.45 8.25 8.64 8.33 8.78 8.47C8.92 8.61 9 8.8 9 9ZM9 11.5C9 11.7 8.92 11.89 8.78 12.03C8.64 12.17 8.45 12.25 8.25 12.25H5.5C5.3 12.25 5.11 12.17 4.97 12.03C4.83 11.89 4.75 11.7 4.75 11.5C4.75 11.3 4.83 11.11 4.97 10.97C5.11 10.83 5.3 10.75 5.5 10.75H8.25C8.45 10.75 8.64 10.83 8.78 10.97C8.92 11.11 9 11.3 9 11.5Z%22/%3E%3C/svg%3E');
  --icon-arrow-up-right: url('data:image/svg+xml,%3Csvg width=%2222%22 height=%2222%22 viewBox=%220 0 22 22%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M17.53 5.5V14.44C17.53 14.71 17.42 14.97 17.23 15.17C17.04 15.36 16.77 15.47 16.5 15.47C16.23 15.47 15.96 15.36 15.77 15.17C15.58 14.97 15.47 14.71 15.47 14.44V7.99L6.23 17.23C6.04 17.42 5.77 17.53 5.5 17.53C5.23 17.53 4.96 17.42 4.77 17.23C4.58 17.04 4.47 16.77 4.47 16.5C4.47 16.23 4.58 15.96 4.77 15.77L14.01 6.53H7.56C7.29 6.53 7.03 6.42 6.83 6.23C6.64 6.04 6.53 5.77 6.53 5.5C6.53 5.23 6.64 4.96 6.83 4.77C7.03 4.58 7.29 4.47 7.56 4.47H16.5C16.77 4.47 17.04 4.58 17.23 4.77C17.42 4.96 17.53 5.23 17.53 5.5Z%22/%3E%3C/svg%3E');
  --icon-search: url('data:image/svg+xml,%3Csvg width=%2222%22 height=%2222%22 viewBox=%220 0 22 22%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M19.98 18.52L15.9 14.44C17.12 12.84 17.69 10.84 17.5 8.84C17.3 6.84 16.35 4.99 14.84 3.67C13.33 2.34 11.37 1.64 9.36 1.71C7.35 1.77 5.44 2.6 4.02 4.02C2.6 5.44 1.77 7.35 1.71 9.36C1.64 11.37 2.34 13.33 3.67 14.84C4.99 16.35 6.84 17.3 8.84 17.5C10.84 17.69 12.84 17.12 14.44 15.9L18.52 19.98C18.62 20.08 18.73 20.16 18.86 20.21C18.98 20.26 19.12 20.29 19.25 20.29C19.39 20.29 19.52 20.26 19.65 20.21C19.77 20.16 19.89 20.08 19.98 19.98C20.08 19.89 20.16 19.77 20.21 19.65C20.26 19.52 20.29 19.39 20.29 19.25C20.29 19.12 20.26 18.98 20.21 18.86C20.16 18.73 20.08 18.62 19.98 18.52L19.98 18.52ZM3.78 9.62C3.78 8.47 4.12 7.34 4.77 6.38C5.41 5.42 6.32 4.67 7.39 4.23C8.46 3.78 9.63 3.67 10.77 3.89C11.9 4.12 12.94 4.68 13.76 5.49C14.57 6.31 15.13 7.35 15.36 8.48C15.58 9.62 15.47 10.79 15.02 11.86C14.58 12.93 13.83 13.84 12.87 14.48C11.91 15.13 10.78 15.47 9.63 15.47C8.08 15.47 6.59 14.85 5.49 13.76C4.4 12.66 3.78 11.17 3.78 9.62Z%22/%3E%3C/svg%3E');
  --icon-thumbs-up: url('data:image/svg+xml,%3Csvg width=%2222%22 height=%2222%22 viewBox=%220 0 22 22%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M20.37 6.66C20.14 6.4 19.86 6.2 19.55 6.06C19.24 5.92 18.9 5.84 18.56 5.84H14.09V4.81C14.09 3.81 13.69 2.85 12.99 2.14C12.28 1.43 11.32 1.03 10.31 1.03C10.12 1.03 9.93 1.08 9.77 1.19C9.61 1.29 9.48 1.43 9.39 1.6L6.24 7.91H2.75C2.29 7.91 1.86 8.09 1.53 8.41C1.21 8.73 1.03 9.17 1.03 9.63V17.19C1.03 17.64 1.21 18.08 1.53 18.4C1.86 18.73 2.29 18.91 2.75 18.91H17.53C18.12 18.91 18.68 18.69 19.12 18.3C19.56 17.92 19.85 17.38 19.92 16.8L20.95 8.55C20.99 8.21 20.96 7.87 20.86 7.54C20.76 7.21 20.59 6.91 20.37 6.66ZM3.09 9.97H5.84V16.84H3.09V9.97ZM18.91 8.29L17.88 16.54C17.86 16.63 17.82 16.7 17.76 16.76C17.7 16.81 17.62 16.84 17.53 16.84H7.91V9.18L10.9 3.2C11.23 3.32 11.52 3.54 11.72 3.83C11.92 4.12 12.03 4.46 12.03 4.81V6.88C12.03 7.15 12.14 7.41 12.33 7.6C12.53 7.8 12.79 7.91 13.06 7.91H18.56C18.61 7.91 18.66 7.92 18.7 7.94C18.75 7.96 18.79 7.98 18.82 8.02C18.85 8.06 18.88 8.1 18.89 8.15C18.91 8.19 18.91 8.24 18.91 8.29Z%22/%3E%3C/svg%3E');
  --icon-thumbs-down: url('data:image/svg+xml,%3Csvg width=%2222%22 height=%2222%22 viewBox=%220 0 22 22%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M20.95 13.45L19.92 5.2C19.85 4.62 19.56 4.08 19.12 3.7C18.68 3.31 18.12 3.09 17.53 3.09H2.75C2.29 3.09 1.86 3.27 1.53 3.6C1.21 3.92 1.03 4.36 1.03 4.81V12.38C1.03 12.6 1.08 12.82 1.16 13.03C1.25 13.24 1.38 13.43 1.53 13.59C1.69 13.75 1.88 13.88 2.09 13.96C2.3 14.05 2.52 14.09 2.75 14.09H6.24L9.39 20.4C9.48 20.57 9.61 20.71 9.77 20.81C9.93 20.92 10.12 20.97 10.31 20.97C11.32 20.97 12.28 20.57 12.99 19.86C13.69 19.15 14.09 18.19 14.09 17.19V16.16H18.56C18.9 16.16 19.24 16.08 19.55 15.94C19.86 15.8 20.14 15.6 20.37 15.34C20.59 15.09 20.76 14.79 20.86 14.46C20.96 14.13 20.99 13.79 20.95 13.45ZM5.84 12.03H3.09V5.16H5.84V12.03ZM18.82 13.98C18.79 14.01 18.75 14.04 18.7 14.06C18.66 14.08 18.61 14.09 18.56 14.09H13.06C12.79 14.09 12.53 14.2 12.33 14.4C12.14 14.59 12.03 14.85 12.03 15.13V17.19C12.03 17.54 11.92 17.89 11.72 18.17C11.52 18.46 11.23 18.68 10.9 18.8L7.91 12.82V5.16H17.53C17.62 5.16 17.7 5.19 17.76 5.24C17.82 5.3 17.86 5.37 17.88 5.46L18.91 13.71C18.91 13.76 18.91 13.81 18.89 13.85C18.88 13.9 18.85 13.94 18.82 13.98Z%22/%3E%3C/svg%3E');
  --icon-x-circle: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Cg transform=%22translate(1.5 1.5)%22%3E%3Cpath d=%22M6.5 0C5.21 0 3.96 0.38 2.89 1.10C1.82 1.81 0.99 2.82 0.49 4.01C0.00 5.20 -0.13 6.51 0.12 7.77C0.38 9.03 0.99 10.19 1.90 11.10C2.81 12.01 3.97 12.62 5.23 12.88C6.49 13.13 7.80 13.00 8.99 12.51C10.18 12.01 11.19 11.18 11.90 10.11C12.62 9.04 13 7.79 13 6.5C13.00 4.78 12.31 3.12 11.09 1.91C9.88 0.69 8.22 0.00 6.5 0ZM8.85 8.15C8.90 8.19 8.94 8.25 8.96 8.31C8.99 8.37 9.00 8.43 9.00 8.5C9.00 8.57 8.99 8.63 8.96 8.69C8.94 8.75 8.90 8.81 8.85 8.85C8.81 8.90 8.75 8.94 8.69 8.96C8.63 8.99 8.57 9.00 8.5 9.00C8.43 9.00 8.37 8.99 8.31 8.96C8.25 8.94 8.19 8.90 8.15 8.85L6.5 7.21L4.85 8.85C4.81 8.90 4.75 8.94 4.69 8.96C4.63 8.99 4.57 9.00 4.5 9.00C4.43 9.00 4.37 8.99 4.31 8.96C4.25 8.94 4.19 8.90 4.15 8.85C4.10 8.81 4.06 8.75 4.04 8.69C4.01 8.63 4.00 8.57 4.00 8.5C4.00 8.43 4.01 8.37 4.04 8.31C4.06 8.25 4.10 8.19 4.15 8.15L5.79 6.5L4.15 4.85C4.05 4.76 4.00 4.63 4.00 4.5C4.00 4.37 4.05 4.24 4.15 4.15C4.24 4.05 4.37 4.00 4.5 4.00C4.63 4.00 4.76 4.05 4.85 4.15L6.5 5.79L8.15 4.15C8.19 4.10 8.25 4.06 8.31 4.04C8.37 4.01 8.43 4.00 8.5 4.00C8.57 4.00 8.63 4.01 8.69 4.04C8.75 4.06 8.81 4.10 8.85 4.15C8.90 4.19 8.94 4.25 8.96 4.31C8.99 4.37 9.00 4.43 9.00 4.5C9.00 4.57 8.99 4.63 8.96 4.69C8.94 4.75 8.90 4.81 8.85 4.85L7.21 6.5L8.85 8.15Z%22/%3E%3C/g%3E%3C/svg%3E');
  --icon-play: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M19.5 10.27L8.5 3.5C8.27 3.36 8 3.28 7.73 3.28C7.46 3.28 7.19 3.35 6.96 3.49C6.72 3.62 6.53 3.82 6.39 4.05C6.26 4.29 6.19 4.55 6.19 4.83V18.38C6.19 18.65 6.26 18.92 6.39 19.15C6.53 19.39 6.72 19.58 6.96 19.72C7.19 19.85 7.46 19.92 7.73 19.92C8 19.92 8.27 19.85 8.5 19.71L19.5 12.94C19.72 12.8 19.91 12.61 20.04 12.38C20.17 12.15 20.24 11.89 20.24 11.62C20.24 11.35 20.17 11.09 20.04 10.86C19.91 10.63 19.72 10.44 19.5 10.3Z%22/%3E%3C/svg%3E');
  --icon-book: url('data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2022%2022%22%3E%3Cg%20transform=%22translate%283.094%201.719%29%22%3E%3Cpath%20d=%22M14.7812%200H3.09375C2.27324%200%201.48633%200.325948%200.906138%200.906138C0.325948%201.48633%200%202.27324%200%203.09375V17.5312C0%2017.8048%200.108649%2018.0671%200.302046%2018.2605C0.495443%2018.4539%200.757745%2018.5625%201.03125%2018.5625H13.4062C13.6798%2018.5625%2013.9421%2018.4539%2014.1355%2018.2605C14.3289%2018.0671%2014.4375%2017.8048%2014.4375%2017.5312C14.4375%2017.2577%2014.3289%2016.9954%2014.1355%2016.802C13.9421%2016.6086%2013.6798%2016.5%2013.4062%2016.5H2.0625V16.1562C2.0625%2015.8827%202.17115%2015.6204%202.36455%2015.427C2.55794%2015.2336%202.82025%2015.125%203.09375%2015.125H14.7812C15.0548%2015.125%2015.3171%2015.0164%2015.5105%2014.823C15.7039%2014.6296%2015.8125%2014.3673%2015.8125%2014.0938V1.03125C15.8125%200.757745%2015.7039%200.495443%2015.5105%200.302046C15.3171%200.108649%2015.0548%200%2014.7812%200ZM7.21875%202.0625H10.3125V7.13281L9.4093%206.41008C9.22639%206.26364%208.99907%206.18385%208.76477%206.18385C8.53046%206.18385%208.30314%206.26364%208.12023%206.41008L7.21875%207.13281V2.0625ZM13.75%2013.0625H3.09375C2.74238%2013.0618%202.39353%2013.1217%202.0625%2013.2395V3.09375C2.0625%202.82025%202.17115%202.55794%202.36455%202.36455C2.55794%202.17115%202.82025%202.0625%203.09375%202.0625H5.15625V9.28125C5.15621%209.47556%205.21106%209.66592%205.3145%209.83041C5.41793%209.9949%205.56572%2010.1268%205.74086%2010.211C5.91599%2010.2951%206.11134%2010.3281%206.3044%2010.3061C6.49745%2010.284%206.68035%2010.2079%206.83203%2010.0865L8.76477%208.53961L10.6992%2010.0865C10.8509%2010.2079%2011.0338%2010.284%2011.2269%2010.3061C11.4199%2010.3281%2011.6153%2010.2951%2011.7904%2010.211C11.9655%2010.1268%2012.1133%209.9949%2012.2168%209.83041C12.3202%209.66592%2012.375%209.47556%2012.375%209.28125V2.0625H13.75V13.0625Z%22/%3E%3C/g%3E%3C/svg%3E');
  --icon-section-start: url('data:image/svg+xml,%3Csvg width=%2216%22 height=%2216%22 viewBox=%220 0 16 16%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M15.13 2.59C15.06 2.49 14.97 2.4 14.86 2.34C14.75 2.28 14.63 2.25 14.5 2.25H9.5C9.36 2.25 9.22 2.29 9.09 2.37C8.97 2.45 8.88 2.56 8.82 2.69L8.33 3.75H1.75C1.6 3.75 1.46 3.79 1.34 3.87C1.22 3.95 1.12 4.06 1.06 4.2C1.01 4.33 0.99 4.48 1.01 4.62C1.03 4.76 1.1 4.9 1.19 5L3.24 7.25L1.19 9.5C1.1 9.6 1.03 9.74 1.01 9.88C0.99 10.02 1.01 10.17 1.06 10.3C1.12 10.44 1.22 10.55 1.34 10.63C1.46 10.71 1.6 10.75 1.75 10.75H6.32C6.46 10.75 6.6 10.71 6.72 10.63C6.84 10.55 6.94 10.44 7 10.31L7.48 9.25H10.83L8.82 13.69C8.73 13.87 8.73 14.08 8.8 14.26C8.86 14.45 9.01 14.6 9.19 14.68C9.37 14.77 9.57 14.77 9.76 14.7C9.95 14.63 10.1 14.49 10.18 14.31L15.18 3.31C15.23 3.2 15.26 3.07 15.25 2.95C15.24 2.82 15.2 2.7 15.13 2.59ZM3.45 9.25L4.8 7.75C4.93 7.62 5 7.44 5 7.25C5 7.06 4.93 6.88 4.8 6.75L3.45 5.25H7.65L5.83 9.25H3.45ZM11.52 7.75H8.16L9.98 3.75H13.33L11.52 7.75Z%22/%3E%3C/svg%3E');
  --icon-section-posting: url('data:image/svg+xml,%3Csvg width=%2216%22 height=%2216%22 viewBox=%220 0 16 16%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M14.38 1.62C14.23 1.46 14.03 1.35 13.82 1.29C13.6 1.23 13.37 1.24 13.16 1.3L13.15 1.3L1.15 4.94C0.91 5.01 0.69 5.15 0.53 5.35C0.37 5.54 0.28 5.78 0.25 6.04C0.23 6.29 0.29 6.54 0.42 6.76C0.54 6.98 0.73 7.16 0.96 7.27L6.19 9.81L8.73 15.04C8.83 15.25 8.99 15.43 9.19 15.56C9.39 15.69 9.62 15.75 9.86 15.75C9.89 15.75 9.93 15.75 9.97 15.75C10.22 15.73 10.46 15.63 10.66 15.47C10.85 15.31 10.99 15.09 11.06 14.85L14.7 2.85C14.7 2.85 14.7 2.84 14.7 2.84C14.76 2.63 14.77 2.4 14.71 2.18C14.65 1.97 14.54 1.77 14.38 1.62ZM9.81 13.82L7.66 9.4L10.53 6.53C10.6 6.46 10.66 6.38 10.7 6.29C10.73 6.2 10.75 6.1 10.75 6C10.75 5.9 10.73 5.8 10.7 5.71C10.66 5.62 10.6 5.54 10.53 5.47C10.46 5.4 10.38 5.34 10.29 5.3C10.2 5.27 10.1 5.25 10 5.25C9.9 5.25 9.81 5.27 9.72 5.3C9.62 5.34 9.54 5.4 9.47 5.47L6.6 8.34L2.18 6.19L13.13 2.88L9.81 13.82Z%22/%3E%3C/svg%3E');
  --icon-section-constructor: url('data:image/svg+xml,%3Csvg width=%2216%22 height=%2216%22 viewBox=%220 0 16 16%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M6.25 2.25H3.5C3.17 2.25 2.85 2.38 2.62 2.62C2.38 2.85 2.25 3.17 2.25 3.5V6.25C2.25 6.58 2.38 6.9 2.62 7.13C2.85 7.37 3.17 7.5 3.5 7.5H6.25C6.58 7.5 6.9 7.37 7.13 7.13C7.37 6.9 7.5 6.58 7.5 6.25V3.5C7.5 3.17 7.37 2.85 7.13 2.62C6.9 2.38 6.58 2.25 6.25 2.25ZM6 6H3.75V3.75H6V6ZM12.5 2.25H9.75C9.42 2.25 9.1 2.38 8.87 2.62C8.63 2.85 8.5 3.17 8.5 3.5V6.25C8.5 6.58 8.63 6.9 8.87 7.13C9.1 7.37 9.42 7.5 9.75 7.5H12.5C12.83 7.5 13.15 7.37 13.38 7.13C13.62 6.9 13.75 6.58 13.75 6.25V3.5C13.75 3.17 13.62 2.85 13.38 2.62C13.15 2.38 12.83 2.25 12.5 2.25ZM12.25 6H10V3.75H12.25V6ZM6.25 8.5H3.5C3.17 8.5 2.85 8.63 2.62 8.87C2.38 9.1 2.25 9.42 2.25 9.75V12.5C2.25 12.83 2.38 13.15 2.62 13.38C2.85 13.62 3.17 13.75 3.5 13.75H6.25C6.58 13.75 6.9 13.62 7.13 13.38C7.37 13.15 7.5 12.83 7.5 12.5V9.75C7.5 9.42 7.37 9.1 7.13 8.87C6.9 8.63 6.58 8.5 6.25 8.5ZM6 12.25H3.75V10H6V12.25ZM12.5 8.5H9.75C9.42 8.5 9.1 8.63 8.87 8.87C8.63 9.1 8.5 9.42 8.5 9.75V12.5C8.5 12.83 8.63 13.15 8.87 13.38C9.1 13.62 9.42 13.75 9.75 13.75H12.5C12.83 13.75 13.15 13.62 13.38 13.38C13.62 13.15 13.75 12.83 13.75 12.5V9.75C13.75 9.42 13.62 9.1 13.38 8.87C13.15 8.63 12.83 8.5 12.5 8.5ZM12.25 12.25H10V10H12.25V12.25Z%22/%3E%3C/svg%3E');
  --icon-section-shop: url('data:image/svg+xml,%3Csvg width=%2216%22 height=%2216%22 viewBox=%220 0 16 16%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M15.1 4.05C15.03 3.95 14.94 3.88 14.83 3.83C14.73 3.78 14.62 3.75 14.5 3.75H3.76L3.22 1.8C3.18 1.64 3.08 1.5 2.95 1.4C2.82 1.3 2.66 1.25 2.5 1.25H1.25C1.05 1.25 0.86 1.33 0.72 1.47C0.58 1.61 0.5 1.8 0.5 2C0.5 2.2 0.58 2.39 0.72 2.53C0.86 2.67 1.05 2.75 1.25 2.75H1.93L4.07 10.47C4.18 10.84 4.4 11.16 4.7 11.39C5.01 11.62 5.38 11.75 5.76 11.75H11.94C12.32 11.75 12.69 11.62 13 11.39C13.3 11.16 13.52 10.84 13.63 10.47L15.23 4.7C15.26 4.59 15.26 4.47 15.24 4.36C15.22 4.24 15.17 4.14 15.1 4.05ZM12.18 10.07C12.16 10.12 12.13 10.16 12.09 10.2C12.04 10.23 11.99 10.25 11.94 10.25H5.76C5.71 10.25 5.65 10.23 5.61 10.2C5.57 10.17 5.53 10.12 5.52 10.07L4.18 5.25H13.51L12.18 10.07ZM6.75 13.75C6.75 14 6.68 14.24 6.54 14.44C6.4 14.65 6.21 14.81 5.98 14.9C5.75 15 5.5 15.02 5.26 14.98C5.01 14.93 4.79 14.81 4.62 14.63C4.44 14.46 4.32 14.24 4.27 13.99C4.23 13.75 4.25 13.5 4.35 13.27C4.44 13.04 4.6 12.85 4.81 12.71C5.01 12.57 5.25 12.5 5.5 12.5C5.83 12.5 6.15 12.63 6.38 12.87C6.62 13.1 6.75 13.42 6.75 13.75ZM13.25 13.75C13.25 14 13.18 14.24 13.04 14.44C12.9 14.65 12.71 14.81 12.48 14.9C12.25 15 12 15.02 11.76 14.98C11.51 14.93 11.29 14.81 11.12 14.63C10.94 14.46 10.82 14.24 10.77 13.99C10.73 13.75 10.75 13.5 10.85 13.27C10.94 13.04 11.1 12.85 11.31 12.71C11.51 12.57 11.75 12.5 12 12.5C12.33 12.5 12.65 12.63 12.88 12.87C13.12 13.1 13.25 13.42 13.25 13.75Z%22/%3E%3C/svg%3E');
  --icon-telegram: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 22 22%22%3E%3Cpath transform=%22translate(1.87 3.44)%22 d=%22M1.25 6.51C6.15 4.38 9.42 2.97 11.06 2.29C15.72 0.35 16.69 0.01 17.32 0C17.46 -0 17.77 0.03 17.98 0.2C18.15 0.33 18.19 0.52 18.21 0.65C18.24 0.78 18.26 1.08 18.24 1.31C17.99 3.97 16.9 10.42 16.34 13.39C16.1 14.65 15.64 15.08 15.19 15.12C14.21 15.21 13.47 14.47 12.53 13.85C11.05 12.88 10.21 12.28 8.78 11.33C7.12 10.24 8.19 9.64 9.14 8.66C9.39 8.4 13.69 4.49 13.77 4.13C13.78 4.09 13.79 3.92 13.69 3.84C13.59 3.75 13.45 3.78 13.34 3.8C13.2 3.84 10.83 5.4 6.26 8.49C5.58 8.95 4.98 9.17 4.43 9.16C3.83 9.15 2.68 8.82 1.82 8.54C0.77 8.2 -0.07 8.02 0 7.44C0.04 7.14 0.46 6.83 1.25 6.51Z%22/%3E%3C/svg%3E');
  --icon-max: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 22 22%22%3E%3Cpath transform=%22translate(2.02 2.06)%22 d=%22M9.17 17.82C7.41 17.82 6.59 17.57 5.17 16.54C4.27 17.7 1.41 18.6 1.29 17.05C1.29 15.89 1.03 14.91 0.74 13.84C0.39 12.52 0 11.05 0 8.92C0 3.83 4.18 0 9.12 0C14.07 0 17.95 4.02 17.95 8.96C17.97 13.83 14.04 17.8 9.17 17.82ZM9.24 4.4C6.83 4.27 4.96 5.94 4.54 8.56C4.2 10.72 4.81 13.36 5.32 13.49C5.57 13.55 6.2 13.05 6.59 12.66C7.23 13.1 7.98 13.37 8.77 13.43C11.26 13.55 13.4 11.65 13.56 9.16C13.66 6.66 11.74 4.55 9.24 4.4V4.4Z%22/%3E%3C/svg%3E');
  --icon-text-aa: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 22 22%22%3E%3Cpath transform=%22translate(0.35 3.78)%22 d=%22M7.46 0.59C7.37 0.42 7.24 0.27 7.08 0.16C6.91 0.06 6.72 0 6.52 0C6.33 0 6.14 0.06 5.97 0.16C5.8 0.27 5.67 0.42 5.59 0.59L0.09 12.28C-0.02 12.53 -0.03 12.81 0.06 13.06C0.16 13.31 0.35 13.52 0.59 13.63C0.84 13.75 1.12 13.76 1.37 13.67C1.63 13.59 1.84 13.4 1.96 13.16L3.3 10.31H9.75L11.09 13.16C11.21 13.41 11.42 13.6 11.67 13.69C11.93 13.78 12.21 13.77 12.46 13.65C12.71 13.54 12.9 13.33 12.99 13.07C13.09 12.81 13.07 12.53 12.96 12.28L7.46 0.59ZM4.27 8.25L6.52 3.45L8.78 8.25H4.27ZM16.84 3.44C15.65 3.44 14.71 3.77 14.05 4.42C13.94 4.52 13.86 4.63 13.8 4.76C13.74 4.89 13.71 5.02 13.71 5.16C13.7 5.3 13.73 5.44 13.78 5.57C13.83 5.7 13.91 5.82 14.01 5.92C14.1 6.02 14.22 6.09 14.35 6.15C14.48 6.2 14.62 6.22 14.76 6.22C14.9 6.22 15.04 6.19 15.16 6.13C15.29 6.07 15.4 5.99 15.5 5.89C15.76 5.63 16.21 5.5 16.84 5.5C17.78 5.5 18.55 6.11 18.55 6.87V7.25C18.02 7 17.43 6.87 16.84 6.88C14.75 6.88 13.05 8.42 13.05 10.31C13.05 12.21 14.75 13.75 16.84 13.75C17.49 13.75 18.14 13.59 18.73 13.29C18.85 13.47 19.03 13.61 19.24 13.69C19.44 13.76 19.67 13.77 19.88 13.71C20.09 13.64 20.28 13.51 20.41 13.33C20.54 13.16 20.62 12.94 20.62 12.72V6.88C20.62 4.98 18.92 3.44 16.84 3.44ZM16.84 11.69C15.89 11.69 15.12 11.07 15.12 10.31C15.12 9.55 15.89 8.94 16.84 8.94C17.78 8.94 18.55 9.55 18.55 10.31C18.55 11.07 17.78 11.69 16.84 11.69Z%22/%3E%3C/svg%3E');
  --icon-users-four: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 22 22%22%3E%3Cpath transform=%22translate(1.72 1.72)%22 d=%22M0.41 8.73C0.52 8.82 0.64 8.87 0.77 8.91C0.91 8.94 1.04 8.95 1.18 8.93C1.31 8.91 1.44 8.87 1.56 8.8C1.67 8.73 1.77 8.64 1.86 8.53C2.24 8.02 2.74 7.6 3.31 7.31C3.88 7.03 4.52 6.88 5.16 6.88C5.8 6.88 6.43 7.03 7 7.31C7.57 7.6 8.07 8.02 8.46 8.53C8.62 8.75 8.87 8.89 9.14 8.93C9.41 8.97 9.68 8.9 9.9 8.73C9.98 8.68 10.05 8.61 10.11 8.53C10.49 8.02 10.99 7.6 11.56 7.31C12.13 7.03 12.77 6.88 13.41 6.88C14.05 6.88 14.68 7.03 15.25 7.31C15.82 7.6 16.32 8.02 16.71 8.53C16.79 8.64 16.89 8.73 17.01 8.8C17.12 8.87 17.25 8.92 17.39 8.94C17.52 8.96 17.66 8.95 17.79 8.92C17.92 8.89 18.05 8.83 18.16 8.75C18.27 8.66 18.36 8.56 18.43 8.44C18.5 8.32 18.54 8.19 18.56 8.06C18.58 7.92 18.57 7.79 18.53 7.65C18.5 7.52 18.44 7.4 18.36 7.29C17.78 6.52 17.04 5.9 16.18 5.47C16.56 4.95 16.78 4.35 16.83 3.72C16.88 3.08 16.76 2.45 16.47 1.88C16.18 1.32 15.75 0.84 15.2 0.51C14.66 0.18 14.04 0 13.41 0C12.77 0 12.15 0.18 11.61 0.51C11.07 0.84 10.63 1.32 10.34 1.88C10.05 2.45 9.93 3.08 9.98 3.72C10.03 4.35 10.26 4.95 10.63 5.47C10.14 5.71 9.69 6.02 9.28 6.39C8.87 6.02 8.42 5.71 7.93 5.47C8.31 4.95 8.53 4.35 8.58 3.71C8.63 3.08 8.51 2.45 8.22 1.88C7.93 1.32 7.5 0.84 6.95 0.51C6.41 0.18 5.79 0 5.16 0C4.52 0 3.9 0.18 3.36 0.51C2.82 0.84 2.38 1.32 2.09 1.88C1.8 2.45 1.68 3.08 1.73 3.71C1.78 4.35 2.01 4.95 2.38 5.47C1.52 5.9 0.78 6.52 0.21 7.29C0.04 7.51 -0.03 7.78 0.01 8.05C0.05 8.32 0.19 8.57 0.41 8.73ZM13.41 2.07C13.68 2.07 13.94 2.15 14.17 2.3C14.4 2.45 14.57 2.66 14.68 2.91C14.78 3.17 14.81 3.44 14.75 3.71C14.7 3.98 14.57 4.22 14.38 4.41C14.19 4.61 13.94 4.74 13.67 4.79C13.41 4.84 13.13 4.82 12.88 4.71C12.63 4.61 12.41 4.43 12.26 4.2C12.11 3.98 12.03 3.71 12.03 3.44C12.03 3.08 12.18 2.73 12.43 2.47C12.69 2.21 13.04 2.07 13.41 2.07ZM5.16 2.07C5.43 2.07 5.69 2.15 5.92 2.3C6.15 2.45 6.32 2.66 6.43 2.91C6.53 3.17 6.56 3.44 6.5 3.71C6.45 3.98 6.32 4.22 6.13 4.41C5.94 4.61 5.69 4.74 5.42 4.79C5.16 4.84 4.88 4.82 4.63 4.71C4.38 4.61 4.16 4.43 4.01 4.2C3.86 3.98 3.78 3.71 3.78 3.44C3.78 3.08 3.93 2.73 4.18 2.47C4.44 2.21 4.79 2.07 5.16 2.07ZM16.18 15.09C16.56 14.58 16.78 13.97 16.83 13.34C16.88 12.71 16.76 12.07 16.47 11.51C16.18 10.94 15.75 10.46 15.2 10.13C14.66 9.8 14.04 9.62 13.41 9.62C12.77 9.62 12.15 9.8 11.61 10.13C11.07 10.46 10.63 10.94 10.34 11.51C10.05 12.07 9.93 12.71 9.98 13.34C10.03 13.97 10.26 14.58 10.63 15.09C10.14 15.34 9.69 15.65 9.28 16.01C8.87 15.65 8.42 15.34 7.93 15.09C8.31 14.58 8.53 13.97 8.58 13.34C8.63 12.71 8.51 12.07 8.22 11.51C7.93 10.94 7.5 10.46 6.95 10.13C6.41 9.8 5.79 9.62 5.16 9.62C4.52 9.62 3.9 9.8 3.36 10.13C2.82 10.46 2.38 10.94 2.09 11.51C1.8 12.07 1.68 12.71 1.73 13.34C1.78 13.97 2.01 14.58 2.38 15.09C1.52 15.52 0.78 16.15 0.21 16.91C0.04 17.13 -0.03 17.41 0.01 17.68C0.05 17.95 0.19 18.19 0.41 18.36C0.63 18.52 0.91 18.59 1.18 18.56C1.45 18.52 1.69 18.37 1.86 18.15C2.24 17.64 2.74 17.23 3.31 16.94C3.88 16.65 4.52 16.5 5.16 16.5C5.8 16.5 6.43 16.65 7 16.94C7.57 17.23 8.07 17.64 8.46 18.15C8.62 18.37 8.87 18.52 9.14 18.56C9.41 18.59 9.68 18.52 9.9 18.36C9.98 18.3 10.05 18.23 10.11 18.15C10.49 17.64 10.99 17.23 11.56 16.94C12.13 16.65 12.77 16.5 13.41 16.5C14.05 16.5 14.68 16.65 15.25 16.94C15.82 17.23 16.32 17.64 16.71 18.15C16.79 18.26 16.89 18.36 17.01 18.43C17.12 18.5 17.25 18.55 17.39 18.57C17.52 18.59 17.66 18.58 17.79 18.55C17.92 18.51 18.05 18.45 18.16 18.37C18.27 18.29 18.36 18.19 18.43 18.07C18.5 17.95 18.54 17.82 18.56 17.68C18.58 17.55 18.57 17.41 18.53 17.28C18.5 17.15 18.44 17.02 18.36 16.92C17.78 16.15 17.04 15.52 16.18 15.09ZM5.16 11.69C5.43 11.69 5.69 11.77 5.92 11.92C6.15 12.07 6.32 12.29 6.43 12.54C6.53 12.79 6.56 13.07 6.5 13.33C6.45 13.6 6.32 13.85 6.13 14.04C5.94 14.23 5.69 14.36 5.42 14.41C5.16 14.47 4.88 14.44 4.63 14.34C4.38 14.23 4.16 14.06 4.01 13.83C3.86 13.6 3.78 13.34 3.78 13.07C3.78 12.7 3.93 12.35 4.18 12.09C4.44 11.84 4.79 11.69 5.16 11.69ZM13.41 11.69C13.68 11.69 13.94 11.77 14.17 11.92C14.4 12.07 14.57 12.29 14.68 12.54C14.78 12.79 14.81 13.07 14.75 13.33C14.7 13.6 14.57 13.85 14.38 14.04C14.19 14.23 13.94 14.36 13.67 14.41C13.41 14.47 13.13 14.44 12.88 14.34C12.63 14.23 12.41 14.06 12.26 13.83C12.11 13.6 12.03 13.34 12.03 13.07C12.03 12.7 12.18 12.35 12.43 12.09C12.69 11.84 13.04 11.69 13.41 11.69Z%22/%3E%3C/svg%3E');
  --icon-headset: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 22 22%22%3E%3Cpath transform=%22translate(1.72 1.71)%22 d=%22M15.88 2.74C14.58 1.44 12.92 0.55 11.12 0.18C9.32 -0.18 7.45 -1.48e-05 5.75 0.7C4.05 1.4 2.59 2.59 1.57 4.12C0.55 5.65 0 7.45 0 9.29V14.1C0 14.74 0.25 15.35 0.7 15.8C1.16 16.25 1.77 16.5 2.41 16.5H3.78C4.42 16.5 5.03 16.25 5.48 15.8C5.93 15.35 6.19 14.74 6.19 14.1V10.66C6.19 10.02 5.93 9.41 5.48 8.96C5.03 8.51 4.42 8.25 3.78 8.25H2.13C2.38 6.54 3.24 4.97 4.56 3.83C5.87 2.69 7.55 2.07 9.28 2.07H9.34C11.06 2.07 12.73 2.7 14.03 3.84C15.34 4.98 16.19 6.54 16.43 8.25H14.78C14.14 8.25 13.53 8.51 13.08 8.96C12.63 9.41 12.38 10.02 12.38 10.66V14.1C12.38 14.74 12.63 15.35 13.08 15.8C13.53 16.25 14.14 16.5 14.78 16.5H16.47C16.39 16.89 16.18 17.24 15.87 17.49C15.56 17.74 15.18 17.88 14.78 17.88H9.97C9.7 17.88 9.43 17.99 9.24 18.18C9.05 18.37 8.94 18.64 8.94 18.91C8.94 19.18 9.05 19.45 9.24 19.64C9.43 19.83 9.7 19.94 9.97 19.94H14.78C15.78 19.94 16.74 19.54 17.45 18.83C18.16 18.12 18.56 17.16 18.56 16.16V9.29C18.57 8.07 18.33 6.87 17.87 5.75C17.41 4.62 16.73 3.6 15.88 2.74ZM3.78 10.32C3.87 10.32 3.96 10.35 4.02 10.42C4.09 10.48 4.12 10.57 4.12 10.66V14.1C4.12 14.19 4.09 14.28 4.02 14.34C3.96 14.41 3.87 14.44 3.78 14.44H2.41C2.32 14.44 2.23 14.41 2.16 14.34C2.1 14.28 2.06 14.19 2.06 14.1V10.32H3.78ZM14.44 14.1V10.66C14.44 10.57 14.47 10.48 14.54 10.42C14.6 10.35 14.69 10.32 14.78 10.32H16.5V14.44H14.78C14.69 14.44 14.6 14.41 14.54 14.34C14.47 14.28 14.44 14.19 14.44 14.1Z%22/%3E%3C/svg%3E');
  --icon-flask: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 22 22%22%3E%3Cpath transform=%22translate(2.41 1.72)%22 d=%22M16.94 15.27L11.69 6.51V2.06H12.03C12.3 2.06 12.57 1.95 12.76 1.76C12.95 1.57 13.06 1.3 13.06 1.03C13.06 0.76 12.95 0.5 12.76 0.3C12.57 0.11 12.3 0 12.03 0H5.16C4.88 0 4.62 0.11 4.43 0.3C4.23 0.5 4.13 0.76 4.13 1.03C4.13 1.3 4.23 1.57 4.43 1.76C4.62 1.95 4.88 2.06 5.16 2.06H5.5V6.51L0.24 15.27C0.09 15.53 0 15.83 0 16.13C-0 16.44 0.07 16.74 0.22 17C0.37 17.27 0.59 17.49 0.85 17.64C1.12 17.79 1.41 17.88 1.72 17.88H15.47C15.77 17.88 16.07 17.79 16.33 17.64C16.6 17.49 16.81 17.27 16.96 17C17.11 16.74 17.19 16.44 17.19 16.13C17.18 15.83 17.1 15.53 16.94 15.27ZM9.63 2.06V6.8C9.63 6.99 9.68 7.17 9.77 7.33L12.79 12.36C11.86 12.44 10.63 12.25 9.06 11.45C7.86 10.85 6.7 10.48 5.6 10.36L7.42 7.33C7.51 7.17 7.56 6.99 7.56 6.8V2.06H9.63ZM2.33 15.81L4.38 12.39C5.5 12.3 6.76 12.6 8.13 13.3C9.82 14.15 11.25 14.44 12.42 14.44C12.93 14.44 13.43 14.38 13.93 14.27L14.86 15.81H2.33Z%22/%3E%3C/svg%3E');
  /* Вкладки блога (Figma 1522:11100) и просмотры статьи (1518:10082) */
  --icon-circles-four: url('data:image/svg+xml,%3Csvg width=%2218%22 height=%2218%22 viewBox=%220 0 18 18%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M5.48 2.53C4.9 2.53 4.33 2.7 3.84 3.03C3.36 3.35 2.98 3.81 2.76 4.35C2.53 4.89 2.47 5.49 2.59 6.06C2.7 6.63 2.98 7.16 3.4 7.57C3.81 7.99 4.34 8.27 4.91 8.38C5.48 8.49 6.07 8.44 6.61 8.21C7.15 7.99 7.62 7.61 7.94 7.13C8.26 6.64 8.44 6.07 8.44 5.48C8.44 4.7 8.13 3.95 7.57 3.4C7.02 2.84 6.27 2.53 5.48 2.53ZM5.48 6.75C5.23 6.75 4.99 6.68 4.78 6.54C4.57 6.4 4.41 6.2 4.32 5.97C4.22 5.74 4.19 5.48 4.24 5.24C4.29 4.99 4.41 4.77 4.59 4.59C4.77 4.41 4.99 4.29 5.24 4.24C5.48 4.19 5.74 4.22 5.97 4.32C6.2 4.41 6.4 4.57 6.54 4.78C6.68 4.99 6.75 5.23 6.75 5.48C6.75 5.82 6.62 6.14 6.38 6.38C6.14 6.62 5.82 6.75 5.48 6.75ZM12.52 8.44C13.1 8.44 13.67 8.26 14.16 7.94C14.64 7.62 15.02 7.15 15.24 6.61C15.47 6.07 15.53 5.48 15.41 4.91C15.3 4.34 15.02 3.81 14.6 3.4C14.19 2.98 13.66 2.7 13.09 2.59C12.52 2.47 11.93 2.53 11.39 2.76C10.85 2.98 10.38 3.36 10.06 3.84C9.74 4.33 9.56 4.9 9.56 5.48C9.56 6.27 9.87 7.02 10.43 7.57C10.98 8.13 11.73 8.44 12.52 8.44ZM12.52 4.22C12.77 4.22 13.01 4.29 13.22 4.43C13.43 4.57 13.59 4.77 13.68 5C13.78 5.23 13.81 5.49 13.76 5.73C13.71 5.98 13.59 6.2 13.41 6.38C13.23 6.56 13.01 6.68 12.76 6.73C12.52 6.77 12.26 6.75 12.03 6.65C11.8 6.56 11.6 6.4 11.46 6.19C11.32 5.98 11.25 5.73 11.25 5.48C11.25 5.15 11.38 4.83 11.62 4.59C11.86 4.35 12.18 4.22 12.52 4.22ZM5.48 9.56C4.9 9.56 4.33 9.74 3.84 10.06C3.36 10.38 2.98 10.85 2.76 11.39C2.53 11.93 2.47 12.52 2.59 13.09C2.7 13.66 2.98 14.19 3.4 14.6C3.81 15.02 4.34 15.3 4.91 15.41C5.48 15.53 6.07 15.47 6.61 15.24C7.15 15.02 7.62 14.64 7.94 14.16C8.26 13.67 8.44 13.1 8.44 12.52C8.44 11.73 8.13 10.98 7.57 10.43C7.02 9.87 6.27 9.56 5.48 9.56ZM5.48 13.78C5.23 13.78 4.99 13.71 4.78 13.57C4.57 13.43 4.41 13.23 4.32 13C4.22 12.77 4.19 12.51 4.24 12.27C4.29 12.02 4.41 11.8 4.59 11.62C4.77 11.44 4.99 11.32 5.24 11.27C5.48 11.23 5.74 11.25 5.97 11.35C6.2 11.44 6.4 11.6 6.54 11.81C6.68 12.02 6.75 12.27 6.75 12.52C6.75 12.85 6.62 13.17 6.38 13.41C6.14 13.65 5.82 13.78 5.48 13.78ZM12.52 9.56C11.93 9.56 11.36 9.74 10.88 10.06C10.39 10.38 10.01 10.85 9.79 11.39C9.56 11.93 9.51 12.52 9.62 13.09C9.73 13.66 10.01 14.19 10.43 14.6C10.84 15.02 11.37 15.3 11.94 15.41C12.51 15.53 13.11 15.47 13.65 15.24C14.19 15.02 14.65 14.64 14.97 14.16C15.3 13.67 15.47 13.1 15.47 12.52C15.47 11.73 15.16 10.98 14.6 10.43C14.05 9.87 13.3 9.56 12.52 9.56ZM12.52 13.78C12.27 13.78 12.02 13.71 11.81 13.57C11.6 13.43 11.44 13.23 11.35 13C11.25 12.77 11.23 12.51 11.27 12.27C11.32 12.02 11.44 11.8 11.62 11.62C11.8 11.44 12.02 11.32 12.27 11.27C12.51 11.23 12.77 11.25 13 11.35C13.23 11.44 13.43 11.6 13.57 11.81C13.71 12.02 13.78 12.27 13.78 12.52C13.78 12.85 13.65 13.17 13.41 13.41C13.17 13.65 12.85 13.78 12.52 13.78Z%22/%3E%3C/svg%3E');
  --icon-sparkle-outline: url('data:image/svg+xml,%3Csvg width=%2218%22 height=%2218%22 viewBox=%220 0 18 18%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M13.99 8.81L10.48 7.52L9.19 4.01C9.09 3.74 8.91 3.51 8.68 3.34C8.44 3.18 8.16 3.09 7.88 3.09C7.59 3.09 7.31 3.18 7.07 3.34C6.84 3.51 6.66 3.74 6.56 4.01L5.27 7.52L1.76 8.81C1.49 8.91 1.26 9.09 1.09 9.32C0.93 9.56 0.84 9.84 0.84 10.12C0.84 10.41 0.93 10.69 1.09 10.93C1.26 11.16 1.49 11.34 1.76 11.44L5.26 12.73L6.56 16.24C6.66 16.51 6.84 16.74 7.07 16.91C7.31 17.07 7.59 17.16 7.88 17.16C8.16 17.16 8.44 17.07 8.68 16.91C8.91 16.74 9.09 16.51 9.19 16.24L10.48 12.73L13.99 11.44C14.26 11.34 14.49 11.16 14.66 10.93C14.82 10.69 14.91 10.41 14.91 10.12C14.91 9.84 14.82 9.56 14.66 9.32C14.49 9.09 14.26 8.91 13.99 8.81ZM9.54 11.28C9.42 11.33 9.32 11.39 9.23 11.48C9.14 11.56 9.08 11.67 9.04 11.78L7.88 14.93L6.72 11.78C6.67 11.67 6.61 11.56 6.52 11.48C6.44 11.39 6.33 11.33 6.22 11.28L3.07 10.12L6.22 8.97C6.33 8.92 6.44 8.86 6.52 8.77C6.61 8.69 6.67 8.58 6.72 8.47L7.88 5.32L9.03 8.47C9.08 8.58 9.14 8.69 9.23 8.77C9.31 8.86 9.42 8.92 9.53 8.97L12.68 10.12L9.54 11.28ZM9.84 2.81C9.84 2.59 9.93 2.37 10.09 2.22C10.25 2.06 10.46 1.97 10.69 1.97H11.53V1.12C11.53 0.9 11.62 0.69 11.78 0.53C11.94 0.37 12.15 0.28 12.38 0.28C12.6 0.28 12.81 0.37 12.97 0.53C13.13 0.69 13.22 0.9 13.22 1.12V1.97H14.06C14.29 1.97 14.5 2.06 14.66 2.22C14.82 2.37 14.91 2.59 14.91 2.81C14.91 3.04 14.82 3.25 14.66 3.41C14.5 3.57 14.29 3.66 14.06 3.66H13.22V4.5C13.22 4.72 13.13 4.94 12.97 5.1C12.81 5.25 12.6 5.34 12.38 5.34C12.15 5.34 11.94 5.25 11.78 5.1C11.62 4.94 11.53 4.72 11.53 4.5V3.66H10.69C10.46 3.66 10.25 3.57 10.09 3.41C9.93 3.25 9.84 3.04 9.84 2.81ZM17.72 6.19C17.72 6.41 17.63 6.63 17.47 6.78C17.31 6.94 17.1 7.03 16.88 7.03H16.59V7.31C16.59 7.54 16.5 7.75 16.35 7.91C16.19 8.07 15.97 8.16 15.75 8.16C15.53 8.16 15.31 8.07 15.15 7.91C15 7.75 14.91 7.54 14.91 7.31V7.03H14.62C14.4 7.03 14.19 6.94 14.03 6.78C13.87 6.63 13.78 6.41 13.78 6.19C13.78 5.96 13.87 5.75 14.03 5.59C14.19 5.43 14.4 5.34 14.62 5.34H14.91V5.06C14.91 4.84 15 4.62 15.15 4.47C15.31 4.31 15.53 4.22 15.75 4.22C15.97 4.22 16.19 4.31 16.35 4.47C16.5 4.62 16.59 4.84 16.59 5.06V5.34H16.88C17.1 5.34 17.31 5.43 17.47 5.59C17.63 5.75 17.72 5.96 17.72 6.19Z%22/%3E%3C/svg%3E');
  --icon-users: url('data:image/svg+xml,%3Csvg width=%2218%22 height=%2218%22 viewBox=%220 0 18 18%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M8.80 11.03C9.50 10.44 10.01 9.64 10.25 8.75C10.49 7.86 10.45 6.91 10.13 6.04C9.81 5.18 9.24 4.43 8.48 3.90C7.73 3.37 6.82 3.09 5.90 3.09C4.98 3.09 4.08 3.37 3.32 3.90C2.56 4.43 1.99 5.18 1.67 6.04C1.36 6.91 1.32 7.86 1.55 8.75C1.79 9.64 2.30 10.44 3.01 11.03C1.90 11.53 0.95 12.30 0.23 13.28C0.10 13.46 0.04 13.69 0.08 13.91C0.11 14.13 0.23 14.33 0.41 14.46C0.59 14.59 0.82 14.65 1.04 14.61C1.26 14.58 1.46 14.46 1.59 14.28C2.09 13.60 2.73 13.05 3.48 12.67C4.23 12.29 5.06 12.09 5.90 12.09C6.74 12.09 7.57 12.29 8.32 12.67C9.07 13.05 9.72 13.60 10.21 14.28C10.35 14.46 10.54 14.58 10.77 14.61C10.99 14.65 11.21 14.59 11.39 14.46C11.57 14.33 11.69 14.13 11.73 13.91C11.76 13.69 11.71 13.46 11.57 13.28C10.86 12.30 9.90 11.53 8.80 11.03ZM3.09 7.59C3.09 7.03 3.25 6.49 3.56 6.03C3.87 5.56 4.31 5.20 4.82 4.99C5.34 4.78 5.90 4.72 6.45 4.83C7.00 4.94 7.50 5.21 7.89 5.60C8.28 5.99 8.55 6.49 8.66 7.04C8.77 7.59 8.71 8.15 8.50 8.67C8.29 9.18 7.93 9.62 7.46 9.93C7.00 10.24 6.46 10.40 5.90 10.40C5.16 10.40 4.44 10.10 3.91 9.58C3.39 9.05 3.09 8.33 3.09 7.59ZM17.58 14.46C17.49 14.52 17.39 14.57 17.28 14.60C17.17 14.62 17.06 14.63 16.95 14.61C16.84 14.59 16.74 14.56 16.64 14.50C16.55 14.44 16.47 14.36 16.40 14.28C15.90 13.60 15.25 13.05 14.50 12.67C13.76 12.29 12.93 12.09 12.09 12.09C11.87 12.09 11.65 12.00 11.49 11.84C11.33 11.68 11.25 11.47 11.25 11.25C11.25 11.02 11.33 10.81 11.49 10.65C11.65 10.49 11.87 10.40 12.09 10.40C12.49 10.40 12.88 10.31 13.25 10.15C13.61 9.98 13.94 9.74 14.20 9.44C14.46 9.14 14.66 8.79 14.78 8.41C14.89 8.02 14.92 7.62 14.87 7.22C14.82 6.83 14.68 6.45 14.47 6.11C14.26 5.77 13.98 5.48 13.65 5.25C13.32 5.03 12.94 4.88 12.55 4.82C12.15 4.75 11.75 4.77 11.36 4.87C11.26 4.90 11.14 4.91 11.03 4.90C10.92 4.88 10.81 4.85 10.71 4.79C10.62 4.74 10.53 4.66 10.46 4.58C10.39 4.49 10.34 4.38 10.31 4.28C10.29 4.17 10.28 4.05 10.29 3.94C10.31 3.83 10.35 3.72 10.40 3.63C10.46 3.53 10.54 3.45 10.63 3.38C10.72 3.31 10.82 3.27 10.93 3.24C11.92 2.98 12.97 3.06 13.90 3.47C14.84 3.89 15.60 4.61 16.08 5.51C16.55 6.42 16.70 7.46 16.50 8.46C16.30 9.47 15.77 10.37 14.98 11.03C16.09 11.53 17.04 12.30 17.76 13.28C17.89 13.46 17.95 13.68 17.91 13.91C17.88 14.13 17.76 14.32 17.58 14.46Z%22/%3E%3C/svg%3E');
  --icon-chat-dots: url('data:image/svg+xml,%3Csvg width=%2218%22 height=%2218%22 viewBox=%220 0 18 18%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M9.28 1.40C7.34 1.40 5.48 2.17 4.11 3.55C2.74 4.92 1.97 6.77 1.96 8.71V14.62C1.96 14.99 2.11 15.35 2.38 15.61C2.64 15.88 3.00 16.03 3.37 16.03H9.28C11.22 16.03 13.08 15.26 14.45 13.88C15.82 12.51 16.59 10.65 16.59 8.71C16.59 6.77 15.82 4.91 14.45 3.54C13.08 2.17 11.22 1.40 9.28 1.40ZM9.28 14.34H3.65V8.71C3.65 7.60 3.98 6.51 4.60 5.59C5.22 4.66 6.10 3.94 7.12 3.52C8.15 3.09 9.28 2.98 10.37 3.20C11.46 3.41 12.47 3.95 13.25 4.74C14.04 5.52 14.58 6.53 14.79 7.62C15.01 8.71 14.90 9.84 14.47 10.87C14.05 11.89 13.33 12.77 12.40 13.39C11.48 14.01 10.39 14.34 9.28 14.34ZM8.71 9C8.71 9.22 8.65 9.44 8.52 9.62C8.40 9.81 8.22 9.95 8.02 10.03C7.81 10.12 7.59 10.14 7.37 10.10C7.15 10.06 6.95 9.95 6.79 9.79C6.64 9.63 6.53 9.43 6.49 9.21C6.44 9.00 6.46 8.77 6.55 8.56C6.63 8.36 6.78 8.18 6.96 8.06C7.15 7.94 7.37 7.87 7.59 7.87C7.89 7.87 8.17 7.99 8.38 8.20C8.60 8.41 8.71 8.70 8.71 9ZM12.09 9C12.09 9.22 12.02 9.44 11.90 9.62C11.78 9.81 11.60 9.95 11.39 10.03C11.19 10.12 10.96 10.14 10.74 10.10C10.53 10.06 10.33 9.95 10.17 9.79C10.01 9.63 9.90 9.43 9.86 9.21C9.82 9.00 9.84 8.77 9.92 8.56C10.01 8.36 10.15 8.18 10.34 8.06C10.52 7.94 10.74 7.87 10.96 7.87C11.26 7.87 11.55 7.99 11.76 8.20C11.97 8.41 12.09 8.70 12.09 9Z%22/%3E%3C/svg%3E');
  --icon-robot: url('data:image/svg+xml,%3Csvg width=%2218%22 height=%2218%22 viewBox=%220 0 18 18%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M5.06 7.31C5.06 7.09 5.12 6.87 5.25 6.68C5.37 6.50 5.55 6.35 5.75 6.27C5.96 6.18 6.18 6.16 6.40 6.20C6.62 6.25 6.82 6.35 6.98 6.51C7.14 6.67 7.24 6.87 7.29 7.09C7.33 7.31 7.31 7.53 7.22 7.74C7.14 7.94 6.99 8.12 6.81 8.24C6.62 8.37 6.41 8.43 6.18 8.43C5.88 8.43 5.60 8.31 5.39 8.10C5.18 7.89 5.06 7.61 5.06 7.31ZM11.81 8.43C12.03 8.43 12.25 8.37 12.43 8.24C12.62 8.12 12.76 7.94 12.85 7.74C12.93 7.53 12.95 7.31 12.91 7.09C12.87 6.87 12.76 6.67 12.60 6.51C12.45 6.35 12.25 6.25 12.03 6.20C11.81 6.16 11.58 6.18 11.38 6.27C11.17 6.35 11.00 6.50 10.87 6.68C10.75 6.87 10.68 7.09 10.68 7.31C10.68 7.61 10.80 7.89 11.01 8.10C11.22 8.31 11.51 8.43 11.81 8.43ZM16.59 5.62V13.5C16.59 14.17 16.32 14.81 15.85 15.28C15.37 15.76 14.73 16.03 14.06 16.03H3.93C3.26 16.03 2.62 15.76 2.14 15.28C1.67 14.81 1.40 14.17 1.40 13.5V5.62C1.40 4.95 1.67 4.30 2.14 3.83C2.62 3.36 3.26 3.09 3.93 3.09H8.15V1.12C8.15 0.90 8.24 0.68 8.40 0.52C8.56 0.37 8.77 0.28 9 0.28C9.22 0.28 9.43 0.37 9.59 0.52C9.75 0.68 9.84 0.90 9.84 1.12V3.09H14.06C14.73 3.09 15.37 3.36 15.85 3.83C16.32 4.30 16.59 4.95 16.59 5.62ZM14.90 5.62C14.90 5.40 14.81 5.18 14.65 5.02C14.50 4.87 14.28 4.78 14.06 4.78H3.93C3.71 4.78 3.49 4.87 3.34 5.02C3.18 5.18 3.09 5.40 3.09 5.62V13.5C3.09 13.72 3.18 13.93 3.34 14.09C3.49 14.25 3.71 14.34 3.93 14.34H14.06C14.28 14.34 14.50 14.25 14.65 14.09C14.81 13.93 14.90 13.72 14.90 13.5V5.62ZM14.06 11.39C14.06 11.95 13.84 12.48 13.44 12.88C13.04 13.27 12.51 13.5 11.95 13.5H6.04C5.48 13.5 4.95 13.27 4.55 12.88C4.15 12.48 3.93 11.95 3.93 11.39C3.93 10.83 4.15 10.29 4.55 9.89C4.95 9.50 5.48 9.28 6.04 9.28H11.95C12.51 9.28 13.04 9.50 13.44 9.89C13.84 10.29 14.06 10.83 14.06 11.39ZM8.43 10.96V11.81H9.56V10.96H8.43ZM6.04 11.81H6.75V10.96H6.04C5.93 10.96 5.82 11.01 5.74 11.09C5.66 11.17 5.62 11.27 5.62 11.39C5.62 11.50 5.66 11.60 5.74 11.68C5.82 11.76 5.93 11.81 6.04 11.81ZM12.37 11.39C12.37 11.27 12.33 11.17 12.25 11.09C12.17 11.01 12.06 10.96 11.95 10.96H11.25V11.81H11.95C12.06 11.81 12.17 11.76 12.25 11.68C12.33 11.60 12.37 11.50 12.37 11.39Z%22/%3E%3C/svg%3E');
  --icon-device-tablet: url('data:image/svg+xml,%3Csvg width=%2218%22 height=%2218%22 viewBox=%220 0 18 18%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M13.5 1.40H4.5C3.97 1.40 3.47 1.61 3.10 1.98C2.73 2.35 2.53 2.85 2.53 3.37V14.62C2.53 14.88 2.58 15.13 2.68 15.37C2.78 15.61 2.92 15.83 3.10 16.01C3.29 16.19 3.50 16.34 3.74 16.44C3.98 16.54 4.24 16.59 4.5 16.59H13.5C13.75 16.59 14.01 16.54 14.25 16.44C14.49 16.34 14.70 16.19 14.89 16.01C15.07 15.83 15.21 15.61 15.31 15.37C15.41 15.13 15.46 14.88 15.46 14.62V3.37C15.46 2.85 15.26 2.35 14.89 1.98C14.52 1.61 14.02 1.40 13.5 1.40ZM13.78 14.62C13.78 14.69 13.75 14.77 13.69 14.82C13.64 14.87 13.57 14.90 13.5 14.90H4.5C4.42 14.90 4.35 14.87 4.30 14.82C4.24 14.77 4.21 14.69 4.21 14.62V3.37C4.21 3.30 4.24 3.22 4.30 3.17C4.35 3.12 4.42 3.09 4.5 3.09H13.5C13.57 3.09 13.64 3.12 13.69 3.17C13.75 3.22 13.78 3.30 13.78 3.37V14.62ZM12.09 5.06C12.09 5.28 12.00 5.50 11.84 5.65C11.68 5.81 11.47 5.90 11.25 5.90H6.75C6.52 5.90 6.31 5.81 6.15 5.65C5.99 5.50 5.90 5.28 5.90 5.06C5.90 4.83 5.99 4.62 6.15 4.46C6.31 4.30 6.52 4.21 6.75 4.21H11.25C11.47 4.21 11.68 4.30 11.84 4.46C12.00 4.62 12.09 4.83 12.09 5.06Z%22/%3E%3C/svg%3E');
  --icon-brackets-curly: url('data:image/svg+xml,%3Csvg width=%2218%22 height=%2218%22 viewBox=%220 0 18 18%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M3.85 8.40C3.74 8.61 3.61 8.82 3.44 9C3.61 9.17 3.74 9.38 3.85 9.59C4.21 10.35 4.21 11.23 4.21 12.09C4.21 13.91 4.34 14.34 5.62 14.34C5.84 14.34 6.06 14.43 6.22 14.59C6.37 14.74 6.46 14.96 6.46 15.18C6.46 15.41 6.37 15.62 6.22 15.78C6.06 15.94 5.84 16.03 5.62 16.03C4.27 16.03 3.36 15.54 2.89 14.58C2.53 13.83 2.53 12.94 2.53 12.09C2.53 10.26 2.40 9.84 1.12 9.84C0.90 9.84 0.68 9.75 0.52 9.59C0.37 9.43 0.28 9.22 0.28 9C0.28 8.77 0.37 8.56 0.52 8.40C0.68 8.24 0.90 8.15 1.12 8.15C2.40 8.15 2.53 7.73 2.53 5.90C2.53 5.05 2.53 4.16 2.89 3.41C3.36 2.45 4.27 1.96 5.62 1.96C5.84 1.96 6.06 2.05 6.22 2.21C6.37 2.37 6.46 2.58 6.46 2.81C6.46 3.03 6.37 3.25 6.22 3.40C6.06 3.56 5.84 3.65 5.62 3.65C4.34 3.65 4.21 4.08 4.21 5.90C4.21 6.76 4.21 7.64 3.85 8.40ZM16.87 8.15C15.59 8.15 15.46 7.73 15.46 5.90C15.46 5.05 15.46 4.16 15.10 3.41C14.63 2.45 13.72 1.96 12.37 1.96C12.15 1.96 11.93 2.05 11.77 2.21C11.62 2.37 11.53 2.58 11.53 2.81C11.53 3.03 11.62 3.25 11.77 3.40C11.93 3.56 12.15 3.65 12.37 3.65C13.65 3.65 13.78 4.08 13.78 5.90C13.78 6.76 13.78 7.64 14.14 8.40C14.25 8.62 14.39 8.82 14.55 9C14.39 9.17 14.25 9.38 14.15 9.59C13.78 10.35 13.78 11.23 13.78 12.09C13.78 13.91 13.65 14.34 12.37 14.34C12.15 14.34 11.93 14.43 11.77 14.59C11.62 14.74 11.53 14.96 11.53 15.18C11.53 15.41 11.62 15.62 11.77 15.78C11.93 15.94 12.15 16.03 12.37 16.03C13.72 16.03 14.63 15.54 15.10 14.58C15.46 13.83 15.46 12.94 15.46 12.09C15.46 10.26 15.59 9.84 16.87 9.84C17.09 9.84 17.31 9.75 17.47 9.59C17.62 9.43 17.71 9.22 17.71 9C17.71 8.77 17.62 8.56 17.47 8.40C17.31 8.24 17.09 8.15 16.87 8.15Z%22/%3E%3C/svg%3E');
  --icon-eye: url('data:image/svg+xml,%3Csvg width=%2218%22 height=%2218%22 viewBox=%220 0 18 18%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M17.64 8.65C17.62 8.60 17.00 7.23 15.64 5.87C13.82 4.05 11.53 3.09 9 3.09C6.46 3.09 4.17 4.05 2.35 5.87C0.99 7.23 0.37 8.60 0.35 8.65C0.30 8.76 0.27 8.88 0.27 9.00C0.27 9.11 0.30 9.23 0.35 9.34C0.37 9.40 0.99 10.76 2.35 12.12C4.17 13.94 6.46 14.90 9 14.90C11.53 14.90 13.82 13.94 15.64 12.12C17.00 10.76 17.62 9.40 17.64 9.34C17.69 9.23 17.71 9.11 17.71 9.00C17.72 8.88 17.69 8.76 17.64 8.65ZM14.40 10.97C12.90 12.46 11.08 13.21 9 13.21C6.91 13.21 5.09 12.46 3.59 10.97C2.99 10.39 2.48 9.72 2.07 9C2.48 8.27 2.99 7.61 3.59 7.02C5.10 5.53 6.91 4.78 9 4.78C11.08 4.78 12.89 5.53 14.40 7.02C15.00 7.61 15.51 8.27 15.92 9C15.51 9.72 15.00 10.39 14.40 10.97L14.40 10.97ZM9 5.90C8.38 5.90 7.78 6.08 7.28 6.42C6.77 6.76 6.37 7.25 6.14 7.81C5.90 8.38 5.84 9.00 5.96 9.60C6.08 10.20 6.37 10.75 6.81 11.18C7.24 11.62 7.79 11.91 8.39 12.03C8.99 12.15 9.61 12.09 10.18 11.85C10.74 11.62 11.23 11.22 11.57 10.71C11.91 10.21 12.09 9.61 12.09 9C12.09 8.17 11.76 7.39 11.18 6.81C10.60 6.23 9.82 5.90 9 5.90ZM9 10.40C8.72 10.40 8.44 10.32 8.21 10.16C7.98 10.01 7.80 9.79 7.70 9.53C7.59 9.28 7.56 8.99 7.62 8.72C7.67 8.45 7.80 8.20 8.00 8.00C8.20 7.80 8.45 7.67 8.72 7.62C8.99 7.56 9.28 7.59 9.53 7.70C9.79 7.80 10.01 7.98 10.16 8.21C10.32 8.44 10.40 8.72 10.40 9C10.40 9.37 10.25 9.73 9.99 9.99C9.73 10.25 9.37 10.40 9 10.40Z%22/%3E%3C/svg%3E');

  /* Страница тарифов, 07.09.2026. Шеврон строки FAQ не заводится:
     --icon-chevron уже есть и это он же */
  --icon-info: url('data:image/svg+xml,%3Csvg width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M10.12 7.88C10.12 7.58 10.21 7.29 10.38 7.04C10.54 6.79 10.78 6.6 11.05 6.49C11.33 6.38 11.63 6.35 11.92 6.4C12.21 6.46 12.48 6.6 12.69 6.81C12.9 7.02 13.04 7.29 13.1 7.58C13.15 7.87 13.12 8.17 13.01 8.45C12.9 8.72 12.71 8.96 12.46 9.12C12.21 9.29 11.92 9.38 11.62 9.38C11.23 9.38 10.85 9.22 10.56 8.94C10.28 8.65 10.12 8.27 10.12 7.88ZM22.12 12C22.12 14 21.53 15.96 20.42 17.63C19.31 19.29 17.72 20.59 15.87 21.35C14.02 22.12 11.99 22.32 10.02 21.93C8.06 21.54 6.26 20.58 4.84 19.16C3.42 17.74 2.46 15.94 2.07 13.98C1.68 12.01 1.88 9.98 2.65 8.13C3.41 6.28 4.71 4.69 6.37 3.58C8.04 2.47 10 1.88 12 1.88C14.68 1.88 17.26 2.95 19.16 4.84C21.05 6.74 22.12 9.32 22.12 12ZM19.88 12C19.88 10.44 19.41 8.92 18.55 7.62C17.68 6.33 16.45 5.32 15.01 4.72C13.57 4.13 11.99 3.97 10.46 4.28C8.94 4.58 7.53 5.33 6.43 6.43C5.33 7.53 4.58 8.94 4.28 10.46C3.97 11.99 4.13 13.57 4.72 15.01C5.32 16.45 6.33 17.68 7.62 18.55C8.92 19.41 10.44 19.88 12 19.88C14.09 19.87 16.09 19.04 17.57 17.57C19.04 16.09 19.87 14.09 19.88 12ZM13.12 15.44V12.38C13.12 11.88 12.93 11.4 12.58 11.05C12.22 10.7 11.75 10.5 11.25 10.5C10.98 10.5 10.73 10.59 10.52 10.76C10.32 10.94 10.18 11.17 10.14 11.43C10.09 11.7 10.14 11.97 10.28 12.2C10.41 12.42 10.62 12.6 10.88 12.69V15.75C10.88 16.25 11.07 16.72 11.42 17.08C11.78 17.43 12.25 17.62 12.75 17.62C13.02 17.63 13.27 17.53 13.48 17.36C13.68 17.19 13.82 16.95 13.86 16.69C13.91 16.43 13.86 16.16 13.72 15.93C13.59 15.7 13.38 15.53 13.12 15.44Z%22/%3E%3C/svg%3E');
  --icon-credit-card: url('data:image/svg+xml,%3Csvg width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M21 4.12H3C2.5 4.12 2.03 4.32 1.67 4.67C1.32 5.03 1.12 5.5 1.12 6V18C1.12 18.5 1.32 18.97 1.67 19.33C2.03 19.68 2.5 19.88 3 19.88H21C21.5 19.88 21.97 19.68 22.33 19.33C22.68 18.97 22.88 18.5 22.88 18V6C22.88 5.5 22.68 5.03 22.33 4.67C21.97 4.32 21.5 4.12 21 4.12ZM20.62 6.38V8.25H3.38V6.38H20.62ZM3.38 17.62V10.5H20.62V17.62H3.38ZM19.5 15.38C19.5 15.67 19.38 15.96 19.17 16.17C18.96 16.38 18.67 16.5 18.38 16.5H15.38C15.08 16.5 14.79 16.38 14.58 16.17C14.37 15.96 14.25 15.67 14.25 15.38C14.25 15.08 14.37 14.79 14.58 14.58C14.79 14.37 15.08 14.25 15.38 14.25H18.38C18.67 14.25 18.96 14.37 19.17 14.58C19.38 14.79 19.5 15.08 19.5 15.38ZM13.12 15.38C13.12 15.67 13.01 15.96 12.8 16.17C12.58 16.38 12.3 16.5 12 16.5H10.88C10.58 16.5 10.29 16.38 10.08 16.17C9.87 15.96 9.75 15.67 9.75 15.38C9.75 15.08 9.87 14.79 10.08 14.58C10.29 14.37 10.58 14.25 10.88 14.25H12C12.3 14.25 12.58 14.37 12.8 14.58C13.01 14.79 13.12 15.08 13.12 15.38Z%22/%3E%3C/svg%3E');
  --icon-minus: url('data:image/svg+xml,%3Csvg width=%2216%22 height=%2216%22 viewBox=%220 0 16 16%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M14.25 8C14.25 8.2 14.17 8.39 14.03 8.53C13.89 8.67 13.7 8.75 13.5 8.75H2.5C2.3 8.75 2.11 8.67 1.97 8.53C1.83 8.39 1.75 8.2 1.75 8C1.75 7.8 1.83 7.61 1.97 7.47C2.11 7.33 2.3 7.25 2.5 7.25H13.5C13.7 7.25 13.89 7.33 14.03 7.47C14.17 7.61 14.25 7.8 14.25 8Z%22/%3E%3C/svg%3E');
  --icon-plus: url('data:image/svg+xml,%3Csvg width=%2216%22 height=%2216%22 viewBox=%220 0 16 16%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M14.25 8C14.25 8.2 14.17 8.39 14.03 8.53C13.89 8.67 13.7 8.75 13.5 8.75H8.75V13.5C8.75 13.7 8.67 13.89 8.53 14.03C8.39 14.17 8.2 14.25 8 14.25C7.8 14.25 7.61 14.17 7.47 14.03C7.33 13.89 7.25 13.7 7.25 13.5V8.75H2.5C2.3 8.75 2.11 8.67 1.97 8.53C1.83 8.39 1.75 8.2 1.75 8C1.75 7.8 1.83 7.61 1.97 7.47C2.11 7.33 2.3 7.25 2.5 7.25H7.25V2.5C7.25 2.3 7.33 2.11 7.47 1.97C7.61 1.83 7.8 1.75 8 1.75C8.2 1.75 8.39 1.83 8.53 1.97C8.67 2.11 8.75 2.3 8.75 2.5V7.25H13.5C13.7 7.25 13.89 7.33 14.03 7.47C14.17 7.61 14.25 7.8 14.25 8Z%22/%3E%3C/svg%3E');
  --icon-sparkle: url('data:image/svg+xml,%3Csvg width=%2222%22 height=%2222%22 viewBox=%220 0 22 22%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M17.87 12.38C17.88 12.66 17.79 12.93 17.63 13.16C17.47 13.39 17.24 13.56 16.98 13.66L12.55 15.3L10.91 19.73C10.82 20 10.64 20.22 10.41 20.38C10.18 20.54 9.91 20.63 9.63 20.63C9.35 20.63 9.08 20.54 8.85 20.38C8.62 20.22 8.44 20 8.35 19.73L6.7 15.3L2.27 13.66C2 13.57 1.78 13.39 1.62 13.16C1.46 12.93 1.37 12.66 1.37 12.38C1.37 12.1 1.46 11.83 1.62 11.6C1.78 11.37 2 11.19 2.27 11.1L6.7 9.45L8.34 5.02C8.43 4.75 8.61 4.53 8.84 4.37C9.07 4.21 9.34 4.12 9.62 4.12C9.9 4.12 10.17 4.21 10.4 4.37C10.63 4.53 10.81 4.75 10.9 5.02L12.55 9.45L16.98 11.09C17.25 11.18 17.47 11.36 17.63 11.59C17.79 11.82 17.88 12.09 17.87 12.38ZM13.06 4.12H14.44V5.5C14.44 5.68 14.51 5.86 14.64 5.99C14.77 6.12 14.94 6.19 15.12 6.19C15.31 6.19 15.48 6.12 15.61 5.99C15.74 5.86 15.81 5.68 15.81 5.5V4.12H17.19C17.37 4.12 17.54 4.05 17.67 3.92C17.8 3.79 17.87 3.62 17.87 3.44C17.87 3.26 17.8 3.08 17.67 2.95C17.54 2.82 17.37 2.75 17.19 2.75H15.81V1.38C15.81 1.19 15.74 1.02 15.61 0.89C15.48 0.76 15.31 0.69 15.12 0.69C14.94 0.69 14.77 0.76 14.64 0.89C14.51 1.02 14.44 1.19 14.44 1.38V2.75H13.06C12.88 2.75 12.7 2.82 12.58 2.95C12.45 3.08 12.37 3.26 12.37 3.44C12.37 3.62 12.45 3.79 12.58 3.92C12.7 4.05 12.88 4.12 13.06 4.12ZM20.62 6.88H19.94V6.19C19.94 6.01 19.86 5.83 19.74 5.7C19.61 5.57 19.43 5.5 19.25 5.5C19.07 5.5 18.89 5.57 18.76 5.7C18.63 5.83 18.56 6.01 18.56 6.19V6.88H17.87C17.69 6.88 17.52 6.95 17.39 7.08C17.26 7.21 17.19 7.38 17.19 7.56C17.19 7.74 17.26 7.92 17.39 8.05C17.52 8.18 17.69 8.25 17.87 8.25H18.56V8.94C18.56 9.12 18.63 9.29 18.76 9.42C18.89 9.55 19.07 9.62 19.25 9.62C19.43 9.62 19.61 9.55 19.74 9.42C19.86 9.29 19.94 9.12 19.94 8.94V8.25H20.62C20.81 8.25 20.98 8.18 21.11 8.05C21.24 7.92 21.31 7.74 21.31 7.56C21.31 7.38 21.24 7.21 21.11 7.08C20.98 6.95 20.81 6.88 20.62 6.88Z%22/%3E%3C/svg%3E');
  --icon-globe: url('data:image/svg+xml,%3Csvg width=%2222%22 height=%2222%22 viewBox=%220 0 22 22%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M11 1.72C9.16 1.72 7.37 2.26 5.84 3.28C4.32 4.3 3.13 5.75 2.43 7.45C1.72 9.14 1.54 11.01 1.9 12.81C2.26 14.61 3.14 16.26 4.44 17.56C5.74 18.86 7.39 19.74 9.19 20.1C10.99 20.46 12.86 20.28 14.55 19.57C16.25 18.87 17.7 17.68 18.72 16.16C19.74 14.63 20.28 12.84 20.28 11C20.28 8.54 19.3 6.18 17.56 4.44C15.82 2.7 13.46 1.72 11 1.72ZM18.22 11C18.22 11.79 18.09 12.57 17.83 13.32L14.35 11.17C14.15 11.05 13.92 10.96 13.68 10.93L11.72 10.67C11.42 10.63 11.11 10.67 10.83 10.79C10.55 10.91 10.3 11.1 10.12 11.34H9.77L9.53 10.86C9.42 10.63 9.25 10.42 9.05 10.26C8.84 10.1 8.6 9.99 8.35 9.93L8.12 9.88L8.46 9.28H9.7C9.99 9.28 10.27 9.21 10.53 9.07L11.58 8.49C11.7 8.42 11.8 8.34 11.9 8.26L14.22 6.17C14.4 6 14.54 5.8 14.64 5.57C14.74 5.35 14.79 5.1 14.78 4.85C15.83 5.5 16.7 6.4 17.3 7.48C17.9 8.56 18.22 9.77 18.22 11ZM12.1 3.87L12.63 4.82L10.55 6.7L9.61 7.22H8.26C7.96 7.22 7.66 7.3 7.4 7.45C7.14 7.6 6.92 7.82 6.77 8.08L6.38 8.76L5.82 7.24L6.67 5.23C7.44 4.65 8.31 4.23 9.24 4C10.18 3.77 11.15 3.72 12.1 3.87ZM3.78 11C3.78 10.22 3.91 9.44 4.16 8.7L4.82 10.47C4.92 10.74 5.09 10.98 5.31 11.17C5.53 11.36 5.79 11.49 6.07 11.55L7.75 11.91L8.01 12.44C8.12 12.67 8.28 12.87 8.49 13.03C8.69 13.19 8.92 13.3 9.17 13.36L8.74 14.32C8.61 14.62 8.56 14.96 8.62 15.3C8.67 15.63 8.82 15.94 9.05 16.18L9.07 16.2L10.63 17.81L10.55 18.2C8.72 18.09 7 17.28 5.74 15.94C4.48 14.6 3.78 12.84 3.78 11ZM12.69 18.02C12.74 17.75 12.72 17.48 12.65 17.22C12.57 16.97 12.44 16.73 12.26 16.53L12.24 16.51L10.72 14.94L11.7 12.75L13.33 12.97L16.89 15.16C15.88 16.59 14.39 17.6 12.69 18.02Z%22/%3E%3C/svg%3E');

  /* Печенье — плашка согласия на cookie, 11.09.2026. Figma 1417:5373,
     тот же Phosphor, что и остальной набор */
  --icon-cookie: url('data:image/svg+xml,%3Csvg width=%2222%22 height=%2222%22 viewBox=%220 0 22 22%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M14.38 13.81C14.57 14 14.7 14.25 14.75 14.51C14.81 14.78 14.78 15.06 14.68 15.31C14.57 15.56 14.4 15.77 14.17 15.93C13.94 16.08 13.68 16.16 13.41 16.16C13.13 16.16 12.87 16.08 12.64 15.93C12.42 15.77 12.24 15.56 12.14 15.31C12.03 15.06 12 14.78 12.06 14.51C12.11 14.25 12.24 14 12.43 13.81C12.69 13.55 13.04 13.41 13.41 13.41C13.77 13.41 14.12 13.55 14.38 13.81ZM6.93 13.12C6.74 13.31 6.61 13.56 6.56 13.83C6.5 14.09 6.53 14.37 6.64 14.62C6.74 14.87 6.92 15.09 7.14 15.24C7.37 15.39 7.63 15.47 7.91 15.47C8.18 15.47 8.44 15.39 8.67 15.24C8.9 15.09 9.07 14.87 9.18 14.62C9.28 14.37 9.31 14.09 9.25 13.83C9.2 13.56 9.07 13.31 8.88 13.12C8.62 12.86 8.27 12.72 7.91 12.72C7.54 12.72 7.19 12.86 6.93 13.12ZM8.19 10.25C8.38 10.06 8.51 9.82 8.57 9.55C8.62 9.28 8.59 9.01 8.49 8.75C8.39 8.5 8.21 8.29 7.98 8.14C7.76 7.99 7.49 7.91 7.22 7.91C6.95 7.91 6.68 7.99 6.45 8.14C6.23 8.29 6.05 8.5 5.95 8.75C5.84 9.01 5.82 9.28 5.87 9.55C5.92 9.82 6.05 10.06 6.25 10.25C6.5 10.51 6.85 10.66 7.22 10.66C7.58 10.66 7.93 10.51 8.19 10.25ZM12.32 9.68C12.12 9.49 11.88 9.36 11.61 9.31C11.34 9.25 11.07 9.28 10.82 9.39C10.57 9.49 10.35 9.67 10.2 9.89C10.05 10.12 9.97 10.38 9.97 10.66C9.97 10.93 10.05 11.19 10.2 11.42C10.35 11.65 10.57 11.82 10.82 11.93C11.07 12.03 11.34 12.06 11.61 12C11.88 11.95 12.12 11.82 12.32 11.63C12.57 11.37 12.72 11.02 12.72 10.66C12.72 10.29 12.57 9.94 12.32 9.68ZM20.28 11C20.28 12.84 19.74 14.63 18.72 16.16C17.7 17.68 16.25 18.87 14.55 19.57C12.86 20.28 10.99 20.46 9.19 20.1C7.39 19.74 5.74 18.86 4.44 17.56C3.14 16.26 2.26 14.61 1.9 12.81C1.54 11.01 1.72 9.14 2.43 7.45C3.13 5.75 4.32 4.3 5.84 3.28C7.37 2.26 9.16 1.72 11 1.72C11.27 1.72 11.54 1.83 11.73 2.02C11.92 2.21 12.03 2.48 12.03 2.75C12.03 3.57 12.36 4.36 12.94 4.94C13.52 5.52 14.3 5.84 15.12 5.84C15.4 5.84 15.66 5.95 15.85 6.15C16.05 6.34 16.16 6.6 16.16 6.88C16.16 7.7 16.48 8.48 17.06 9.06C17.64 9.64 18.43 9.97 19.25 9.97C19.52 9.97 19.79 10.08 19.98 10.27C20.17 10.46 20.28 10.73 20.28 11ZM18.16 11.92C17.17 11.7 16.26 11.2 15.55 10.47C14.85 9.74 14.37 8.82 14.18 7.82C13.18 7.63 12.26 7.15 11.53 6.45C10.8 5.74 10.3 4.83 10.08 3.84C8.75 4.01 7.48 4.55 6.44 5.41C5.39 6.26 4.61 7.39 4.17 8.67C3.73 9.94 3.67 11.32 3.97 12.63C4.28 13.95 4.94 15.15 5.9 16.1C6.85 17.06 8.05 17.73 9.37 18.03C10.68 18.34 12.06 18.27 13.33 17.83C14.61 17.4 15.74 16.61 16.59 15.57C17.45 14.52 17.99 13.26 18.16 11.92L18.16 11.92Z%22/%3E%3C/svg%3E');
}

/* ── Логотип ─────────────────────────────────────────────────────────── */
/* SVG подключён маской, а не <img>: через <img> currentColor не наследуется
   и логотип получается чёрным. Маска красится токеном, файл остаётся один.
   Путь в url() резолвится относительно этого CSS, поэтому работает из любой
   папки, которая его подключает */
.logo {
  display: block;
  width: var(--size-logo-width);
  height: var(--size-logo-height);
  background-color: var(--color-logo);
  -webkit-mask: var(--logo-src) no-repeat center / contain;
  mask: var(--logo-src) no-repeat center / contain;
}

/* Знак без начертания. Figma: Header Logo, свойство Full=false — так логотип
   выглядит в мобильной шапке, где он стоит по центру между кнопками.
   Отдельная маска, а не обрезка полной: обрезкой знак съезжает с центра */
.logo--mark {
  width: var(--size-button-icon-m);
  height: var(--size-button-icon-m);
  -webkit-mask-image: var(--logo-mark-src);
  mask-image: var(--logo-mark-src);
}

/* Начертание без знака. Зеркальный случай: в футере (930:62418) знак уже
   стоит выше 3D-клавишей, второй раз он там лишний. Ширину задаёт тот,
   кто ставит: у маски своя пропорция, contain впишет её в любой бокс */
.logo--word {
  -webkit-mask-image: var(--logo-word-src);
  mask-image: var(--logo-word-src);
}

/* ── Бейдж ───────────────────────────────────────────────────────────── */
/* Figma: Badge/Primary — некликабельная метка. На лендинге 930:59460 роль
   метки забрал .chip--tab; бейдж остаётся для форм и кабинета */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  height: var(--size-button-s);
  padding-inline: var(--spacing-m);
  border-radius: var(--radius-full);
  background: var(--color-info-05);
  color: var(--color-brand);
  font-size: var(--text-p2);
  line-height: var(--text-p2--line-height);
  font-weight: var(--font-weight-body-medium);
}

/* Заливка градиентом и скругление-pill — отдельные модификаторы, чтобы
   их можно было сочетать с любым размером. Figma: Gradient/Dark/Pushchino */
.btn--gradient {
  background: var(--gradient-pushchino);
  color: var(--color-text-on-primary);
}
.btn--gradient:active:not(:disabled) { filter: brightness(0.88); }
@media (hover: hover) {
  .btn--gradient:hover:not(:disabled) { filter: brightness(0.94); }
}
.btn--pill { border-radius: var(--radius-full); }

/* Hero-CTA «Создать проект» (930:59520). ⚠️ Изменился против 05.08: было
   76px с градиентом и H2, стало 56px, сплошной Button/Primary и P1/medium.
   Паддинги несимметричные — 32 слева, 24 справа: справа стоит иконка,
   её оптический вес добирает недостающие 8px */
.btn--hero {
  height: var(--size-button-hero);
  padding-left: var(--spacing-xl);
  padding-right: var(--spacing-l);
  border-radius: var(--radius-full);
  background: var(--color-button-primary);
  color: var(--color-text-on-primary);
  font-size: var(--text-p1);
  line-height: var(--text-p1--line-height);
  font-weight: var(--font-weight-body-medium);
}
.btn--hero:active:not(:disabled) { background: var(--color-button-primary-pressed); }
@media (hover: hover) {
  .btn--hero:hover:not(:disabled) { background: var(--color-button-primary-hover); }
}

/* ── Шапка ───────────────────────────────────────────────────────────── */
/* Figma 714:12162 — 1920×54, отступ 16 по краям, кнопки 38px с шагом 4 */
.header {
  display: flex;
  align-items: center;
  height: var(--size-header);
  padding-inline: var(--page-padding-desktop);
  background: color-mix(in srgb, var(--color-bg-primary), transparent 20%);
  backdrop-filter: blur(var(--blur-m));
  -webkit-backdrop-filter: blur(var(--blur-m));
}
.header__nav { display: flex; gap: var(--spacing-xxs); margin-inline: auto; }
.header__right { display: flex; gap: var(--spacing-xxs); align-items: center; }

/* ── Контейнер ───────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-landing);
  margin-inline: auto;
  padding-inline: var(--page-padding-mobile);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}