/* ==========================================================================
   Токены из Figma (get_variable_defs, узел 2483:1678 — страница FAQ)
   В комментарии — исходное имя переменной в Figma.
   ========================================================================== */

:root {
  /* ---------- Цвета: бренд ---------- */
  --color-brand-300: #ffd119;       /* Bg/Brend/300 🚩, Bg/Button/Primary 🚩/Enable */
  --color-brand-50: #fff2c8;        /* Bg/Brend/50 2 */
  --color-brand-25: #fffcf1;        /* Bg/Brend/25 */

  /* ---------- Цвета: базовые ---------- */
  --color-white: #ffffff;           /* White, 🎨 PALETTE/Basic/White, Main palette 🎨/White,
                                       Text/Text/White, Icons/White accent */
  --color-black: #161513;           /* Black */
  --color-contrast: #000000;        /* Bg/Neutral/Contrast 4 */
  --color-gray-800: #191b23;        /* Main palette 🎨/Gray/800 */

  /* ---------- Цвета: текст ---------- */
  --color-text-primary: #211e1d;    /* Text/Text/Primary */
  --color-text-dark-accent: #161514;/* Text/Text/Dark accent */
  --color-text-secondary: #837f7f;  /* Text/Text/Secondary, Icons/Secondary */
  --color-text-accent: #d69500;     /* Text/Text/Accent */
  --color-text-gray: #787889;       /* Gray | Text | Elements */

  /* ---------- Цвета: фоны ---------- */
  --color-bg-secondary: #f6f7f8;    /* Bg/Neutral/Secondary */
  --color-bg-tertiary: #e9ecf0;     /* Bg/Neutral/Tertiary */

  /* ---------- Цвета: по назначению (ссылки на базовые) ---------- */
  --color-button-primary: var(--color-brand-300);
  --color-icon-secondary: var(--color-text-secondary);

  /* ---------- Градиенты ---------- */
  /* Компонент Button (2309:957): Primary/Secondary/Tertiary × Enable/Hover.
     Secondary = светлая (белая) заливка, Tertiary = тёмная — как в Figma.
     Значения — из набора вариантов Button: угол -12.23deg у всех. В Figma у размера M угол чуть другой
     (-11.57deg primary, -11.14deg secondary/tertiary) — решено не разделять, разница ≈1° незаметна. */
  --gradient-button-primary: linear-gradient(-12.23deg, #ffd119 32.125%, #fee066 85.37%); /* Enable, шапка 2483:1679 */
  --gradient-button-primary-hover: linear-gradient(-12.23deg, #ffd83a 32.125%, #ffea94 85.37%);
  --gradient-button-secondary: linear-gradient(-12.23deg, rgba(255, 255, 255, 0.6) 32.125%, rgba(255, 255, 255, 0.85) 85.37%); /* 2309:966 */
  --gradient-button-secondary-hover: linear-gradient(-12.23deg, rgba(255, 255, 255, 0.7) 32.125%, rgba(255, 255, 255, 0.95) 85.37%); /* 2309:968 */
  --gradient-button-tertiary: linear-gradient(-12.23deg, rgba(0, 0, 0, 0.7) 32.125%, rgba(0, 0, 0, 0.9) 85.37%); /* 2493:6629 */
  --gradient-button-tertiary-hover: linear-gradient(-12.23deg, rgba(0, 0, 0, 0.8) 32.125%, rgb(0, 0, 0) 85.37%); /* 2493:6631 */
  --color-button-secondary-text: #4e4313;

  /* Кнопки сторов .store-btn и ряд .store-list (components.css). Высота на 768 / 375 — 48 (подмена ниже, в блоках
     планшета и мобильной статьи; у карты на 768 — 52, card.css) */
  --store-btn-height: 52px;
  --store-btn-padding: 9px 16px;
  --store-btn-radius: 12px;         /* radius/l в Figma */
  --store-list-gap: 12px;           /* 12 / 8 / 8 */

  /* Разделитель «/» в кнопке «Вход / Регистрация» — в Figma без переменной */
  --color-button-primary-divider: #ffeca1;

  /* ---------- Типографика: семейство и начертания ---------- */
  --font-family: "Inter", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* letter-spacing: в Figma -1 и 7 — это проценты. Подтверждено в
     get_design_context шапки: 18px × -1% = -0.18px. */
  --letter-spacing-tight: -0.01em;
  --letter-spacing-caption: 0.07em;

  /* line-height: Figma рендерит текст с высотой строки, округлённой до целого px
     (подтверждено на подвале: 18 × 1.2 = 21.6 → 22, 18 × 1.6 = 28.8 → 29).
     Поэтому все line-height — округлённые px; в комментарии — исходный расчёт. */

  /* Heading/H1 • Bold */
  --h1-size: 40px;
  --h1-weight: var(--font-weight-bold);
  --h1-line-height: 47px;          /* 40 × 1.17 = 46.8 */
  --h1-letter-spacing: var(--letter-spacing-tight);

  /* Heading/H2 • Bold */
  --h2-size: 32px;
  --h2-weight: var(--font-weight-bold);
  --h2-line-height: 37px;          /* 32 × 1.17 = 37.44 */
  --h2-letter-spacing: var(--letter-spacing-tight);

  /* Heading/H2 • Semi Bold */
  --h2-semibold-size: 24px;
  --h2-semibold-weight: var(--font-weight-semibold);
  --h2-semibold-line-height: 28px; /* 24 × 1.17 = 28.08 */
  --h2-semibold-letter-spacing: var(--letter-spacing-tight);

  /* Heading/H5 • Mediium */
  --h5-size: 20px;
  --h5-weight: var(--font-weight-medium);
  --h5-line-height: 24px;          /* 20 × 1.2 */
  --h5-letter-spacing: 0;

  /* Body/20/Bold */
  --body-20-bold-size: 20px;
  --body-20-bold-weight: var(--font-weight-bold);
  --body-20-bold-line-height: 26px; /* 20 × 1.3 */
  --body-20-bold-letter-spacing: var(--letter-spacing-tight);

  /* Body/20/Semi Bold */
  --body-20-semibold-size: 20px;
  --body-20-semibold-weight: var(--font-weight-semibold);
  --body-20-semibold-line-height: 32px; /* 20 × 1.6 */
  --body-20-semibold-letter-spacing: var(--letter-spacing-tight);

  /* Body/20/Regular */
  --body-20-size: 20px;
  --body-20-weight: var(--font-weight-regular);
  --body-20-line-height: 32px;     /* 20 × 1.6 */
  --body-20-letter-spacing: var(--letter-spacing-tight);

  /* Body/18/Semi Bold */
  --body-18-semibold-size: 18px;
  --body-18-semibold-weight: var(--font-weight-semibold);
  --body-18-semibold-line-height: 22px; /* 18 × 1.2 = 21.6 */
  --body-18-semibold-letter-spacing: var(--letter-spacing-tight);

  /* Body/18/Medium */
  --body-18-medium-size: 18px;
  --body-18-medium-weight: var(--font-weight-medium);
  --body-18-medium-line-height: 22px; /* 18 × 1.2 = 21.6 */
  --body-18-medium-letter-spacing: var(--letter-spacing-tight);

  /* Body/18/Regular */
  --body-18-size: 18px;
  --body-18-weight: var(--font-weight-regular);
  --body-18-line-height: 29px;     /* 18 × 1.6 = 28.8 */
  --body-18-letter-spacing: var(--letter-spacing-tight);

  /* Body/18/Regular в шапке и ссылках подвала — line-height 1.2, а не 1.6 */
  --body-18-compact-line-height: 22px; /* 18 × 1.2 = 21.6 */

  /* Body/18 L/Regular */
  --body-18l-size: 18px;
  --body-18l-weight: var(--font-weight-regular);
  --body-18l-line-height: 24px;    /* в Figma задано в px */
  --body-18l-letter-spacing: 0;

  /* Body/16/Medium */
  --body-16-medium-size: 16px;
  --body-16-medium-weight: var(--font-weight-medium);
  --body-16-medium-line-height: 26px; /* 16 × 1.6 = 25.6 */
  --body-16-medium-letter-spacing: var(--letter-spacing-tight);

  /* CAPTION/16 */
  --caption-16-size: 16px;
  --caption-16-weight: var(--font-weight-semibold);
  --caption-16-line-height: 26px;  /* 16 × 1.6 = 25.6 */
  --caption-16-letter-spacing: var(--letter-spacing-caption);

  /* ---------- Размеры ---------- */
  --width-287-97: 287.97px;         /* width/287_97 */
  --height-48: 48px;                /* height/48 */

  /* ---------- Сетка (из CLAUDE.md, не переменная Figma) ---------- */
  --container-width: 1280px;

  /* Отступ от низа шапки до первого блока страницы — единый для FAQ, блога, статьи (Figma: «Новости» 3187:13 / 3188:366 / 3188:865,
     FAQ вариант А 3086:7626): 1920 — 64, 768 — 32 (@media планшета), 375 — 16 (@media мобильной) */
  --page-offset-top: 64px;

  /* ---------- Шапка (2483:1679, значения без переменных в Figma) ---------- */
  --header-offset-top: 24px;
  --header-offset-x: 20px;
  --header-height: 100px;
  --header-radius: 20px;
  --nav-gap: 8px;
  --nav-item-padding: 10px 24px;
  --nav-item-radius: 10px;

  /* ---------- Кнопка (компонент Button, 2309:957): размеры S и M ---------- */
  --button-padding-s: 10px 20px;
  --button-radius-s: 9px;
  --button-padding-m: 15px 30px;
  --button-radius-m: 10px;
  /* Переход для hover — не из Figma */
  --transition-fast: 200ms;
  /* Отступ при прокрутке к разделу/вопросу по ссылке — не из Figma (шапка не зафиксирована,
     но без отступа якорь упирается в самый верх экрана) */
  --scroll-offset-top: 32px;

  /* ---------- Поле поиска — общее для FAQ и блога (Figma Blog / Search L 3027:1936).
     FAQ-макет 2483:2730 (70px, без рамки) заменён по правке 11 из fixes.md ---------- */
  --search-height: 64px;
  --search-padding: 0 24px;
  --search-radius: 16px;
  --search-gap: 14px;               /* иконка → текст */
  --search-icon-size: 22px;
  --search-border: 1px solid var(--color-bg-tertiary); /* #e9ecf0 */
  --search-font-size: 18px;         /* Inter Regular */
  --search-line-height: 22px;
  --search-clear-size: 32px;        /* кнопка очистки: круг #e9ecf0 */
  --search-text: var(--color-blog-title);
  --search-placeholder: var(--color-blog-meta); /* #6a6e75 */
  --color-focus-glow: rgba(255, 209, 25, 0.2); /* свечение Focused: #ffd119 на 20%, 3046:15867 */

  /* ---------- FAQ: Section 1 (2483:2505) — обёртка hero, тегов, чипсов и разделов ---------- */
  --faq-section-gap: 64px;          /* между блоками внутри Section 1 */

  /* ---------- FAQ: Hero (2483:2666, значения без переменных в Figma) ---------- */
  --faq-top-gap: 40px;              /* заголовок → теги → строка поиска (3086:7626) */
  --color-faq-hero-title: #313132;

  /* ---------- Тег (компонент Teg, значения без переменных в Figma) ---------- */
  --tag-radius: 100px;
  --tag-gap: 10px;                  /* иконка → текст → счётчик (большой тег) */
  --tag-padding-s: 8px 16px;        /* «Спрашивают чаще всего» 2483:2745 */
  --tag-padding-l: 15px 30px;       /* чипсы категорий 2485:4714 */
  --tag-icon-size: 24px;
  --tag-list-gap: 16px;             /* между тегами по горизонтали и вертикали */
  --color-tag-text: #44474b;
  --color-tag-icon: rgba(68, 71, 75, 0.4);
  --color-tag-counter: rgba(68, 71, 75, 0.6);
  --color-tag-bg: var(--color-bg-tertiary);
  --color-tag-bg-active: var(--color-brand-50);
  --color-tag-bg-hover: var(--color-brand-25);

  /* ---------- FAQ: раздел с вопросами (эталон 2485:5319, значения без переменных в Figma) ---------- */
  --faq-section-inner-gap: 32px;    /* заголовок раздела → карточка */
  --faq-section-head-gap: 16px;     /* иконка → текст */
  --faq-section-icon-size: 44px;
  --faq-section-heading-offset: 4px;/* текст ниже верха иконки */
  --faq-section-heading-gap: 8px;   /* заголовок → подзаголовок */
  /* В Figma вопросы шириной 1111px вылезают за правый отступ; по решению —
     справа отступ как слева (96px) */
  --faq-section-card-padding: 56px 96px;
  --faq-section-card-radius: 14px;
  --color-faq-section-title: #44474b;
  --color-faq-section-subtitle: #778187;

  /* ---------- Аккордеон (компонент FAQ, 2485:5233 / 2485:5308) ---------- */
  --accordion-gap: 32px;            /* между вопросами */
  --accordion-spacing: 32px;        /* заголовок → ответ, ответ → разделитель */
  --accordion-header-gap: 32px;     /* текст вопроса → стрелка */
  --accordion-icon-size: 24px;
  --accordion-content-gap: 16px;    /* между блоками ответа */
  --accordion-content-padding-right: 180px;
  /* --accordion-answer-gap (вопрос → ответ) в :root не объявлен: по умолчанию = --accordion-spacing (fallback в
     components.css); задаётся у страницы, где отступы разные (card.html на 375: 16, снизу 32) */
  --accordion-border-width: 1px;
  --accordion-duration: 300ms;      /* анимация — не из Figma */
  --color-accordion-title: #313132;
  --color-accordion-text: #778187;
  --color-accordion-icon: #8b8e90;
  --color-accordion-text-strong: #313132; /* жирное начало абзаца («Себе:», 2485:5446) */
  --color-divider: #e2e2e2;
  --accordion-list-indent: 30px;    /* маркированный список в ответе, 2493:6142 «Безопасность» */

  /* ---------- Таблица в ответе, 2 колонки (2485:5576) ---------- */
  --faq-table-key-width: 203.326px;
  --faq-table-gap: 32px;            /* между колонками */
  --faq-table-row-gap: 16px;        /* текст → разделитель → следующая строка */
  --color-faq-table-key: #313132;
  --color-link: var(--color-text-accent);

  /* ---------- Таблицы на подложке: «Какие комиссии в сервисе?» (2485:5589) ---------- */
  --faq-tables-padding: 24px;
  --faq-tables-radius: 14px;
  --faq-tables-gap: 48px;           /* между таблицами */
  --faq-tables-caption-gap: 24px;   /* подпись таблицы → строки */
  --faq-table-value-width: 120px;   /* правая колонка со значением */
  --color-faq-tables-bg: var(--color-brand-25);

  /* ---------- Плашка-примечание в ответе, жёлтая подложка (2493:5911 «Оплата») ---------- */
  --faq-note-padding: 24px;
  --faq-note-radius: 14px;
  --color-faq-note-bg: var(--color-brand-25);
  --color-faq-note-text: #313132;

  /* ---------- Блок «Не нашли ответ?» (2493:6333) ---------- */
  --faq-cta-offset-top: 36px;
  --faq-cta-offset-bottom: 72px;
  --faq-cta-padding: 64px 110px;
  --faq-cta-radius: 20px;
  --faq-cta-content-width: 750px;
  --faq-cta-content-gap: 48px;      /* текст → кнопки */
  --faq-cta-text-gap: 32px;         /* заголовок → подзаголовок */
  --faq-cta-actions-gap: 24px;      /* между кнопками */
  --gradient-faq-cta-bg: linear-gradient(35.77deg, #ffd119 8.4922%, #ffe371 93.341%);
  --color-faq-cta-title: #413503;
  --color-faq-cta-text: rgba(65, 53, 3, 0.6);

  /* ---------- Подвал (2483:1797, значения без переменных в Figma) ---------- */
  --footer-offset-x: 20px;          /* Background: inset 0 20px */
  --footer-radius: 20px;
  --footer-padding-y: 48px;
  --footer-gap: 56px;               /* между контентом и нижней строкой */
  --footer-columns-gap: 120px;      /* между блоком о компании и колонками */
  --footer-about-width: 391px;
  --footer-about-gap: 32px;         /* текст → соцсети */
  --footer-about-text-gap: 24px;    /* логотип → описание → адрес */
  --footer-paragraph-gap: 14px;     /* между абзацами описания */
  --footer-address-width: 297px;
  --footer-social-gap: 20px;
  --footer-social-size: 44px;
  --footer-nav-gap: 72px;           /* между колонками ссылок */
  --footer-col-gap: 32px;           /* заголовок колонки → ссылки */
  --footer-contacts-width: 208.333px;
  --footer-group-gap: 24px;         /* между группами в «Контактах» */
  --footer-list-gap: 16px;          /* между ссылками, подзаголовок → ссылки */
  --footer-link-icon-gap: 12px;
  --footer-link-icon-size: 16px;
}

/* ==========================================================================
   Блог (кадр 3007:10 «Блог — список статей», компоненты 3027:1091).
   Совпадающие с общими значения — через существующие токены:
   #44474b = --color-tag-text, #e9ecf0 = --color-bg-tertiary, #f6f7f8 = --color-bg-secondary,
   #ffd119 = --color-brand-300, #fff2c8 = --color-brand-50, #d69500 = --color-text-accent.
   ========================================================================== */
:root {
  --color-blog-title: #2d2e30;      /* заголовки карточек, цифры пагинации */
  --color-blog-text: var(--color-tag-text);  /* анонс, #44474b */
  --color-blog-meta: #6a6e75;       /* мета, плейсхолдер поиска */
  --color-blog-card-hover-title: var(--color-text-accent); /* 3031:2144 */

  /* Вертикальный ритм ленты (кадр 3007:10) */
  --blog-hero-padding-top: var(--page-offset-top); /* шапка кончается на y=124, Hero на y=188 */
  --blog-hero-padding-bottom: 96px; /* Hero 405 → конец секции (549 всего) */
  --blog-hero-gap: 56px;            /* текст → обложка, 3027:1661 */
  --blog-hero-text-gap: 20px;       /* meta → заголовок → анонс */
  --blog-hero-text-padding-right: 40px;
  --blog-hero-lead-line-height: 31px; /* 20 × 1.55 */
  --blog-hero-cover-width: 720px;   /* обложка Hero 720×405 */
  --blog-cover-radius: 24px;
  --blog-cover-hover-scale: 1.03;   /* Hover 3035:2125: Cover inset -1.5% */
  --blog-cover-hover-duration: 300ms; /* не из Figma */
  --cover-tag-offset: 16px;         /* тег на обложке: слева/сверху (ТЗ правок 1, п.5) */
  --cover-tag-size: 14px;           /* Inter Medium 14 */
  --cover-tag-line-height: 18px;    /* 14 × 1.3 = 18.2 */
  --cover-tag-padding: 7px 14px;    /* высота 32 */
  --blog-categories-gap: 12px;      /* между чипсами рубрик, 3007:79 (в FAQ — 16) */
  --blog-articles-gap: 24px;        /* чипсы → поиск → сетка */
  /* Строка поиска блога (само поле — общий компонент, --search-*) */
  --blog-search-width: 509px;       /* поле фиксированной ширины, десктоп (строка не тянется) */
  --blog-search-row-gap: 10px;      /* подпись «Я ищу…» → поле */
  --blog-search-offset: 24px;       /* + --blog-articles-gap 24 = 48 от чипсов до поиска */
  /* Сетка статей (3007:176) и Blog / Card (3027:1150) */
  --blog-grid-padding-top: 24px;    /* внутри кадра сетки карточки начинаются на y=24 */
  --blog-grid-column-gap: 32px;
  --blog-grid-row-gap: 56px;        /* ряды через 665 = 609 + 56 */
  --blog-card-radius: 24px;
  --blog-meta-size: 16px;           /* мета «дата · время чтения», Hero и карточка: Inter Regular */
  --blog-meta-line-height: 19px;    /* normal */
  --blog-meta-gap: 10px;            /* дата · точка · время чтения */
  --blog-card-cover-height: 352px;  /* 624×352, в Figma высота фиксирована (16:9 даёт 351) */
  --blog-card-text-height: 257px;   /* блок текста фиксирован, анонс обрезается фейдом */
  --blog-card-text-padding: 28px 32px 32px;
  --blog-card-text-gap: 12px;
  --blog-card-title-size: 28px;     /* Blog / Article title 28 (3031:2132): Bold, 1.25 */
  --blog-card-title-line-height: 35px;
  --blog-card-lead-size: 18px;      /* Regular 18 / 1.55 = 27.9 */
  --blog-card-lead-line-height: 28px;
  --blog-pagination-padding-top: 64px;
  --blog-pagination-padding-bottom: 120px;
  --blog-page-button-size: 52px;    /* Blog / Page button L (3027:2007); M 48 и S 40 — задачи планшет/мобильная */
  --blog-page-button-radius: 12px;
  --blog-page-button-gap: 8px;      /* Blog / Pagination L (3027:2084) */
  --blog-page-button-font-size: 18px; /* Inter SemiBold 18, line-height normal ≈ 22px */
  --blog-page-button-line-height: 22px;
  --blog-page-button-icon-size: 20px;

  /* Фон обложек-плейсхолдеров (Cover 3015:1094); в проде цвет внутри картинки */
  --color-cover-replenish: #ffd119; /* = --color-brand-300 */
  --color-cover-cards-qr: #ffe27a;
  --color-cover-usdt: #e9ecf0;      /* = --color-bg-tertiary */
  --color-cover-foreign: #fff2c8;   /* = --color-brand-50 */
  --color-cover-security: #dce3ec;
  --color-cover-guides: #ffefb0;
  --color-cover-news: #2d2e30;      /* = --color-blog-title */
  --color-cover-business: #c9ced6;
  --color-cover-digest: var(--color-cover-guides); /* временно, цвет дорисует дизайнер */
}

/* ==========================================================================
   Статья блога (кадр 3008:317): крошки 3008:341, шапка 3008:347, обложка 3008:369.
   Совпавшие значения — существующие токены: мета/крошки 16px/19px, gap 10 и цвета —
   --blog-meta-*, --color-blog-meta/-title; gap 16 чип→мета — --tag-list-gap;
   gap 24 в шапке — --blog-articles-gap; лид #44474b — --color-blog-text.
   ========================================================================== */
:root {
  --post-crumbs-padding-top: var(--page-offset-top); /* 3008:341: от шапки до крошек */
  --post-head-padding-top: 40px;    /* 3008:347 */
  --post-head-padding-bottom: 48px; /* до обложки */
  --post-title-size: 60px;          /* Inter Bold 60 / 1.1, без letter-spacing */
  --post-title-line-height: 66px;
  --post-title-width: 1000px;
  --post-lead-size: 22px;           /* Inter Regular 22 / 1.5 */
  --post-lead-line-height: 33px;
  --post-lead-width: 900px;
  --post-cover-radius: 32px;        /* обложка статьи 1280×640 (2:1, по легенде мастер-обложки 3015:1046; в кадре 3008:370 — 1280×600, срезало главный объект) */
  --post-cover-aspect-ratio: 2 / 1; /* мастер 16:9 → обрезка по центру, поля 75px (2400) сверху/снизу */
}

/* ==========================================================================
   Тело статьи (кадр 3008:317, «Контент» 3008:389) и кнопка-ссылка (Pill button 3028:2203).
   Существующие токены: абзац/пункты — --body-20-* (20/32), цвет текста — --color-blog-text
   (#44474b), заголовки — --color-blog-title (#2d2e30), h3 — --blog-card-title-* (28/35),
   маркер — --color-brand-300, ссылка — --color-link, мета/подписи — --blog-meta-*,
   радиус картинки — --blog-cover-radius, радиус кнопки 100 — --tag-radius.
   ========================================================================== */
:root {
  --post-body-padding-top: 72px;    /* обложка кончается на y=1184, «Контент» на y=1256 */
  --post-body-padding-bottom: 0;    /* в Figma тело кончается низом статьи; 120 до «Читайте также» даёт секция (--related-padding-y) */
  --post-sidebar-width: 300px;      /* сайдбар — задача 11 */
  --post-body-gap: 80px;            /* сайдбар x=320 → контент x=700 */
  --post-article-width: 900px;
  --article-h2-size: 36px;          /* 3008:392: Inter Bold 36 / 1.2 */
  --article-h2-line-height: 43px;   /* 36 × 1.2 = 43.2 */
  --article-block-gap: 56px;        /* между блоками «Контента» (3008:389), перед h2 */
  --article-heading-gap: 20px;      /* h2 → первый элемент; пункт → пункт */
  --article-paragraph-gap: 24px;    /* абзац → абзац/список/цитата: в Figma нет, по gap 24 «Пошаговой инструкции» */
  --article-h3-gap-before: 40px;    /* дорисовано: перед h3 */
  --article-h3-gap-after: 16px;     /* дорисовано: после h3 */
  --article-bullet-size: 10px;      /* маркер-кружок 3008:394, #ffd119 */
  --article-list-indent: 26px;      /* кружок 10 + gap 16 */
  --article-ol-indent: 32px;        /* дорисовано: место под номер */
  --article-quote-size: 24px;       /* дорисовано: цитата, Medium 24 */
  --article-quote-line-height: 36px;
  --article-quote-border: 4px;
  --article-quote-padding: 4px 0 4px 32px;
  --article-caption-gap: 12px;      /* = --blog-card-text-gap */
  --article-figure-gap: 40px;       /* дорисовано: до и после картинки/кнопок */
  --article-link-underline-offset: 3px;
  --article-actions-gap: 12px;      /* дорисовано: между кнопками-ссылками */

  /* Кнопка-ссылка .btn-link (Blog / Pill button 3028:2203, Pill: 44, паддинг 16, Semi Bold 14) */
  --btn-link-height: 44px;
  --btn-link-padding: 0 16px;
  --btn-link-size: 14px;
  --btn-link-line-height: 17px;     /* normal */
}

/* ==========================================================================
   Блоки статьи (кадр 3008:317, «Контент» 3008:389): Шаг 3028:1923, Плашка 3028:2045,
   Таблица комиссий 3008:444, Частые вопросы 3008:460, App CTA 3028:2133.
   Существующие токены (значение совпало): радиус 24 — --blog-card-radius; отступ между блоками 56 —
   --article-block-gap; шаг → шаг и h2 → шаги 24 — --article-paragraph-gap; круг-номер 48 — --height-48;
   значок плашки 44 — --faq-section-icon-size; h2-отступ 20 — --article-heading-gap; цвета — #ffd119
   --color-brand-300, #fff2c8 --color-brand-50, #e9ecf0 --color-bg-tertiary, #f6f7f8 --color-bg-secondary,
   #2d2e30 --color-blog-title, #44474b --color-blog-text, #6a6e75 --color-blog-meta.
   ========================================================================== */
:root {
  /* Шаг .step */
  --step-padding: 28px 28px 28px 32px;
  --step-padding-no-image: 28px 32px; /* без скриншота (дорисовано): справа 32, как слева */
  --step-gap: 40px;                 /* текст → скриншот */
  --step-text-gap: 14px;            /* номер → заголовок → текст */
  --step-number-size: var(--height-48);
  --step-title-line-height: 31px;   /* 24 × 1.3 = 31.2 */
  --step-media-width: 220px;
  --step-media-height: 300px;
  --step-media-label-size: 14px;    /* Inter Medium 14, normal */
  --step-media-label-line-height: 17px;

  /* Плашка .callout */
  --callout-padding: 28px;
  --callout-gap: 20px;              /* значок → текст */
  --callout-icon-size: var(--faq-section-icon-size);
  --callout-text-gap: 6px;          /* заголовок → текст */

  /* Таблица комиссий .article-table */
  --article-table-cell-y: 18px;     /* строка 58 = 18 + 22 + 18 */
  --article-table-cell-x: 32px;
  --article-table-col-gap: 24px;    /* «Операция» → «Комиссия» */
  --article-table-value-width: 260px;
  --article-table-row-gap: 1px;     /* разделитель строк, цвет #e9ecf0 */

  /* Частые вопросы в статье: h2 → пункты и пункт → пункт */
  --article-faq-gap: 16px;

  /* App CTA .app-cta */
  --app-cta-padding: 40px;
  --app-cta-gap: 20px;
  --app-cta-title-line-height: 38px; /* 32 × 1.2 = 38.4, без letter-spacing */
  --app-cta-stores-gap: 12px;
}

/* ==========================================================================
   Сайдбар статьи (3008:373): TOC 3028:2085 и «Поделиться» 3008:380.
   Совпавшие значения — существующие: радиус 24 (--blog-card-radius), цвета (--color-blog-*),
   шрифт пунктов 18/500 (--body-18-medium-*), кнопки 44 (--btn-link-height).
   ========================================================================== */
:root {
  --post-sidebar-top: var(--scroll-offset-top); /* sticky: отступ от верха окна (шапка не липкая) */
  --post-sidebar-gap: 32px;         /* TOC → «Поделиться» */
  --toc-padding: 28px;
  --toc-gap: 16px;                  /* заголовок и пункты */
  --toc-item-line-height: 25px;     /* 18 × 1.4 = 25,2 */
  --toc-panel-padding-y: 28px;      /* десктоп ≥1280: панель 28 сверху/снизу, 0 по бокам */
  --toc-inset-x: 28px;              /* поля заголовка и пунктов */
  --toc-title-gap: 16px;            /* заголовок → первый пункт */
  --toc-item-padding-y: 8px;        /* TOC Item 3320:11955 */
  --toc-active-bar: 2px;            /* полоса активного пункта (Active 3320:11951) */
  --sidebar-label-size: 14px;       /* «СОДЕРЖАНИЕ», «ПОДЕЛИТЬСЯ»: Semi Bold 14 */
  --sidebar-label-letter-spacing: 0.08em; /* 1,12px при 14px; --letter-spacing-caption (0.07em) не совпадает */
  --share-gap: 12px;                /* подпись → кнопки */
  --share-buttons-gap: 10px;
}

/* ==========================================================================
   Низ статьи (3008:513) и «Читайте также» (3008:539, Related card 3027:1774).
   Совпавшие значения — существующие: отступ перед низом 56 (--article-block-gap), зазор карточек 32
   (--blog-grid-column-gap), радиус 24, текст меты 16/19 (--blog-meta-*), заголовок 40 (--h1-*), цвета (--color-blog-*).
   ========================================================================== */
:root {
  --post-bottom-padding-top: 28px;  /* граница 1px #e9ecf0 → теги и «Полезно?» */
  --post-tags-gap: 10px;            /* между тегами внизу статьи (в ленте --tag-list-gap = 16) */
  --helpful-gap: 12px;              /* «Статья была полезной?» → кнопки */
  --related-padding-y: 120px;       /* секция «Читайте также» сверху и снизу */
  --related-heading-gap: 32px;      /* заголовок → карточки */
  --related-cover-height: 228px;    /* обложка 405×228 (16:9) */
  --related-text-height: 141px;     /* 24 + 19 + 12 + 2 строки заголовка + 28 */
  --related-text-padding: 24px 28px 28px;
  --related-title-size: 22px;       /* Blog / Article title 22: Bold, 1.25 */
  --related-title-line-height: 27.5px;
  --related-all-size: 18px;         /* «Все статьи →»: Semi Bold 18 */
}

/* ==========================================================================
   Планшет 768 (Figma: лента 3011:523, статья 3012:782; контент 688, поля 40).
   Диапазон (min-width: 768px) and (max-width: 1279px); мобильная 375 — отдельной задачей.
   Значения существующих токенов блога/шапки/подвала подменяются в @media ниже,
   новые — с префиксом --tablet-*. Десктоп (1920) не затрагивается.
   ========================================================================== */
:root {
  --tablet-page-margin: 40px;       /* поля страницы, контент 688 */
  --tablet-burger-size: 44px;       /* Header / Adaptive 3027:2193: кнопка-бургер */
  --tablet-burger-radius: 12px;
  --tablet-header-actions-gap: 12px; /* Вход / Регистрация → бургер */
  --tablet-header-logo-height: 32px; /* логотип 231×32 */
  --tablet-header-padding: 0 20px 0 28px; /* Bar: pl 28, pr 20 */
  --tablet-hero-title-size: 36px;   /* Hero: Bold 36 / 1.2 */
  --tablet-hero-title-line-height: 43px;
  --tablet-hero-lead-size: 18px;    /* 18 / 1.55 */
  --tablet-card-meta-size: 14px;    /* мета карточки 14 (у Hero 16) */
  --tablet-card-meta-line-height: 17px;
  --tablet-empty-size: 17px;        /* «Ничего не найдено»: 17 / 160% */
  --tablet-empty-line-height: 27px;
  --tablet-footer-padding: 48px 36px 40px; /* Footer / Adaptive 3027:2299: Card */
  --tablet-footer-radius: 24px;
  --tablet-footer-gap: 32px;
  --tablet-footer-about-gap: 16px;
  --tablet-footer-text-size: 15px;  /* описание и адрес: 15 / 1.5 */
  --tablet-footer-text-line-height: 23px;
  --tablet-footer-nav-gap: 32px;
  --tablet-footer-bottom-size: 14px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  :root {
    /* Шапка (Header / Adaptive): отступы 12, бар 72 */
    --page-offset-top: 32px;
    --header-offset-top: 12px;
    --header-offset-x: 12px;
    --header-height: 72px;
    /* Подвал */
    --footer-offset-x: 20px;
    /* Hero (3011:539): колонкой, обложка сверху на всю ширину контента */
    --blog-hero-padding-bottom: 64px;
    --blog-hero-gap: 24px;
    --blog-hero-text-gap: 16px;
    --blog-hero-text-padding-right: 0px;
    --blog-hero-lead-line-height: 28px;
    --blog-hero-cover-width: 100%;
    --blog-meta-gap: 8px;
    /* Теги, поиск (3050:17202): отступ от тегов 40, до сетки 36 */
    --blog-categories-gap: 10px;
    --blog-search-offset: 16px;
    --blog-search-width: 100%;
    --search-height: 56px;
    --search-padding: 0 20px;
    --search-radius: 14px;
    --search-gap: 12px;
    --search-icon-size: 20px;
    --search-font-size: 16px;
    --search-line-height: 19px;
    /* Сетка и карточка (3011:651): 2 колонки 332, радиус 20, текст 211 */
    --blog-grid-padding-top: 12px;
    --blog-grid-column-gap: 24px;
    --blog-grid-row-gap: 40px;
    --blog-card-radius: 20px;
    --blog-card-cover-height: 187px;
    --blog-card-text-height: 211px;
    --blog-card-text-padding: 20px 20px 24px;
    --blog-card-text-gap: 10px;
    --blog-card-title-size: 22px;
    --blog-card-title-line-height: 27.5px;
    --blog-card-lead-size: 16px;
    --blog-card-lead-line-height: 25px;
    /* Пагинатор (3011:778): кнопки 48, отступы 56 / 80 */
    --blog-pagination-padding-top: 56px;
    --blog-pagination-padding-bottom: 80px;
    --blog-page-button-size: 48px;
    --blog-page-button-gap: 6px;
    --blog-page-button-font-size: 16px;
    --blog-page-button-line-height: 19px;
    --blog-page-button-icon-size: 18px;
  }
}

/* ==========================================================================
   Планшет 768 — статья (Figma 3012:782). Подмена существующих токенов статьи в @media,
   новые — --tablet-*. Десктоп не затрагивается.
   ========================================================================== */
:root {
  --tablet-crumbs-size: 14px;       /* крошки 14 / normal (17) */
  --tablet-crumbs-line-height: 17px;
  --tablet-post-head-gap: 20px;     /* чип → h1 → лид */
  --tablet-post-top-gap: 14px;      /* чип → мета */
  --tablet-post-title-size: 44px;   /* h1: Bold 44 / 1.15 */
  --tablet-post-title-line-height: 51px;
  --tablet-post-lead-size: 20px;    /* лид 20 / 1.5 */
  --tablet-post-lead-line-height: 30px;
  --tablet-article-size: 18px;      /* абзац и пункты 18 / 1.6 */
  --tablet-article-line-height: 29px;
  --tablet-bullet-offset: 14px;     /* кружок → текст пункта */
  --tablet-steps-gap: 16px;         /* шаг → шаг и h2 → шаг */
  --tablet-step-title-size: 21px;   /* заголовок шага: Semi Bold 21 / 1.3 */
  --tablet-step-number-size: 18px;
  --tablet-step-text-size: 16px;    /* текст шага 16 / 1.6 */
  --tablet-step-text-line-height: 26px;
  --tablet-step-media-radius: 16px;
  --tablet-step-media-label-size: 13px;
  --tablet-step-media-label-line-height: 16px;
  --tablet-callout-title-size: 18px;
  --tablet-callout-text-size: 16px;
  --tablet-callout-text-line-height: 26px;
  --tablet-callout-icon-font-size: 16px;
  --tablet-table-size: 16px;        /* таблица: 16 / normal (19) */
  --tablet-table-line-height: 19px;
  --tablet-faq-answer-padding-right: 80px;
  --tablet-app-cta-padding: 36px 32px;
  --tablet-app-cta-title-size: 28px;
  --tablet-app-cta-text-size: 17px;
  --tablet-app-cta-text-line-height: 27px;
  --tablet-toc-title-size: 17px;    /* TOC-аккордеон: заголовок 17 Semi Bold */
  --tablet-toc-link-size: 16px;
  --tablet-toc-chevron-size: 20px;
  --tablet-quote-size: 20px;
  --tablet-related-title-size: 32px;
  --tablet-related-title-line-height: 39px;
  --tablet-related-gap: 20px;       /* между карточками «Читайте также» */
  --tablet-helpful-size: 15px;
}

@media (min-width: 768px) and (max-width: 1279px) {
  :root {
    --post-head-padding-top: 28px;
    --post-head-padding-bottom: 36px;
    --post-title-width: 100%;
    --post-lead-width: 100%;
    --post-cover-radius: 28px;
    --post-body-padding-top: 48px;
    --post-sidebar-gap: 48px;
    --article-h2-size: 30px;
    --article-h2-line-height: 36px;
    --article-block-gap: 48px;
    --article-heading-gap: 16px;
    --article-paragraph-gap: 20px;    /* дорисовано: в Figma абзац → абзац нет */
    --article-bullet-size: 8px;
    --article-list-indent: 22px;
    --article-quote-size: 20px;
    --article-quote-line-height: 30px;
    --article-quote-padding: 4px 0 4px 24px;
    --article-faq-gap: 12px;
    --article-table-cell-y: 16px;
    --article-table-cell-x: 24px;
    --article-table-col-gap: 20px;
    --article-table-value-width: 200px;
    --step-padding: 24px;
    --step-padding-no-image: 24px;
    --step-gap: 28px;
    --step-text-gap: 12px;
    --step-number-size: 44px;
    --step-title-line-height: 27px;
    --step-media-width: 180px;
    --step-media-height: 240px;
    --callout-padding: 24px;
    --callout-gap: 16px;
    --callout-icon-size: 40px;
    --app-cta-gap: 16px;
    --app-cta-title-line-height: 34px;
    --store-btn-height: 48px;
    --store-list-gap: 8px;
    --toc-padding: 20px;
    --toc-gap: 14px;
    --toc-item-line-height: 22px;
    --share-buttons-gap: 8px;
    --post-bottom-padding-top: 24px;
    --post-tags-gap: 8px;
    --helpful-gap: 10px;
    --related-padding-y: 80px;
    --related-heading-gap: 20px;
    --related-cover-height: 188px;
    --related-text-height: 123px;
    --related-text-padding: 20px 20px 24px;
    --related-title-size: 20px;
    --related-title-line-height: 26px;
    --related-all-size: 15px;
  }
}

/* ==========================================================================
   Мобильная 375 (Figma: лента 3011:851, статья 3012:1080; поля 16, контент 343).
   Диапазон max-width: 767px. Существующие токены подменяются в @media ниже,
   значения, совпадающие с планшетом, повторены явно (планшетный @media на мобильной не действует).
   Новые — с префиксом --mobile-*. Планшет и десктоп не затрагиваются.
   ========================================================================== */
:root {
  --mobile-page-margin: 16px;       /* поля страницы, контент 343 */
  --mobile-header-padding: 0 12px;  /* Header / Adaptive 3027:2223: Bar px 12 */
  --mobile-header-logo-height: 24.8px; /* логотип 179,18×24,8 */
  --mobile-hero-title-size: 26px;   /* Hero 3027:1717: Bold 26 / 1.2 */
  --mobile-hero-title-line-height: 31px; /* 26 × 1.2 = 31.2 */
  --mobile-footer-padding: 32px 20px 28px; /* Footer / Adaptive 3027:2674: Card */
  --mobile-footer-gap: 32px;
  --mobile-footer-nav-gap: 28px;    /* между колонками ссылок */
  --mobile-footer-logo-height: 28px; /* логотип 202,3×28 */
  --mobile-footer-bottom-gap: 8px;  /* копирайт → лицензия */
  --mobile-menu-auth-gap: 8px;      /* пункты меню → «Вход / Регистрация» (дорисовано) */

  /* Статья 375 (Figma 3012:1080) */
  --mobile-post-title-size: 32px;   /* h1: Bold 32 / 1.15 */
  --mobile-post-title-line-height: 37px; /* 32 × 1.15 = 36,8 */
  --mobile-post-lead-size: 17px;    /* лид 17 / 1.5 */
  --mobile-post-lead-line-height: 26px; /* 17 × 1.5 = 25,5 */
  --mobile-post-top-gap: 10px;      /* чип → мета (колонкой) */
  --mobile-article-size: 16px;      /* абзац и пункты 16 / 1.6 */
  --mobile-article-line-height: 26px; /* 16 × 1.6 = 25,6 */
  --mobile-body-s-size: 15px;       /* текст шага, плашки, App CTA: 15 / 1.6 */
  --mobile-body-s-line-height: 24px; /* 15 × 1.6 */
  --mobile-step-title-size: 19px;   /* заголовок шага: Semi Bold 19 / 1.3 */
  --mobile-table-label-size: 14px;  /* таблица комиссий карточками: операция 14, значение 16 */
  --mobile-table-label-line-height: 17px; /* normal */
  --mobile-table-value-size: 16px;  /* значение: Semi Bold 16 / normal */
  --mobile-table-value-line-height: 19px;
  --mobile-table-text-gap: 4px;     /* операция → значение */
  --mobile-app-cta-padding: 28px 20px;
  --mobile-app-cta-title-size: 24px; /* Bold 24 / 1.2 */
  --mobile-related-list-gap: 12px;  /* Related card 3027:1903: горизонтальная карточка 343×112 */
  --mobile-related-card-padding: 12px 14px 12px 12px;
  --mobile-related-card-gap: 14px;
  --mobile-related-card-radius: 16px;
  --mobile-related-thumb-size: 88px;
  --mobile-related-thumb-radius: 12px;
  --mobile-related-text-gap: 6px;   /* рубрика → заголовок */
  --mobile-related-label-size: 12px; /* рубрика: Semi Bold 12 */
  --mobile-related-title-size: 16px; /* Bold 16 / 1.3 */
  --mobile-related-title-line-height: 21px; /* 16 × 1.3 = 20,8 */
}

@media (max-width: 767px) {
  :root {
    /* Шапка (Header / Adaptive): отступы 8, бар 56 */
    --page-offset-top: 16px;
    --header-offset-top: 8px;
    --header-offset-x: 8px;
    --header-height: 56px;
    /* Подвал: отступы 8 со всех сторон */
    --footer-offset-x: 8px;
    /* Hero (3011:865): колонкой, обложка 343×193 */
    --blog-hero-padding-bottom: 40px;
    --blog-hero-gap: 16px;
    --blog-hero-text-gap: 12px;
    --blog-hero-text-padding-right: 0px;
    --blog-hero-lead-line-height: 25px; /* 16 × 1.55 = 24,8 */
    --blog-hero-cover-width: 100%;
    --blog-cover-radius: 20px;
    --cover-tag-offset: 12px;
    --blog-meta-gap: 8px;
    --blog-meta-size: 14px;           /* мета Hero и карточки 14 / normal */
    --blog-meta-line-height: 17px;
    /* Чипсы (3011:888): горизонтальный скролл, gap 8; поиск (3011:971): подпись над полем 52 */
    --blog-categories-gap: 8px;
    --blog-articles-gap: 16px;
    --blog-search-offset: 8px;
    --blog-search-row-gap: 16px;
    --blog-search-width: 100%;
    --search-height: 52px;
    --search-padding: 0 20px;
    --search-radius: 14px;
    --search-gap: 12px;
    --search-icon-size: 20px;
    --search-font-size: 16px;
    --search-line-height: 19px;
    /* Сетка и карточка (3011:977, 3027:1452): одна колонка 343, обложка 193, текст 186 */
    --blog-grid-padding-top: 8px;
    --blog-grid-column-gap: 0px;
    --blog-grid-row-gap: 24px;
    --blog-card-radius: 20px;
    --blog-card-cover-height: 193px;
    --blog-card-text-height: 186px;
    --blog-card-text-padding: 20px 20px 24px;
    --blog-card-text-gap: 10px;
    --blog-card-title-size: 22px;
    --blog-card-title-line-height: 27.5px;
    --blog-card-lead-size: 16px;
    --blog-card-lead-line-height: 25px;
    /* Пагинатор (3011:1105): кнопки 40, отступы 40 / 56 */
    --blog-pagination-padding-top: 40px;
    --blog-pagination-padding-bottom: 56px;
    --blog-page-button-size: 40px;
    --blog-page-button-gap: 6px;
    --blog-page-button-font-size: 16px;
    --blog-page-button-line-height: 19px;
    --blog-page-button-icon-size: 18px;
  }
}

/* Мобильная 375 — статья (Figma 3012:1080). Подмена токенов статьи; значения, совпадающие с планшетом, повторены явно */
@media (max-width: 767px) {
  :root {
    --post-head-padding-top: 16px;
    --post-head-padding-bottom: 24px;
    --post-title-width: 100%;
    --post-lead-width: 100%;
    --post-cover-radius: 20px;
    --post-cover-aspect-ratio: 343 / 200; /* по Figma: 343×200 (на десктопе и планшете — 2:1) */
    --post-body-padding-top: 28px;
    --post-sidebar-gap: 40px;
    --article-h2-size: 26px;
    --article-h2-line-height: 31px;   /* 26 × 1.2 = 31,2 */
    --article-block-gap: 40px;
    --article-heading-gap: 16px;
    --article-paragraph-gap: 16px;    /* дорисовано: в Figma абзац → абзац нет */
    --article-bullet-size: 8px;
    --article-list-indent: 22px;
    --article-quote-size: 20px;
    --article-quote-line-height: 30px;
    --article-quote-padding: 4px 0 4px 24px;
    --article-faq-gap: 12px;
    --article-table-cell-y: 16px;
    --article-table-cell-x: 20px;
    --step-padding: 24px;
    --step-padding-no-image: 24px;
    --step-gap: 20px;                 /* текст → скриншот (колонкой) */
    --step-text-gap: 12px;
    --step-number-size: 44px;
    --step-title-line-height: 25px;   /* 19 × 1.3 = 24,7 */
    --step-media-width: 100%;
    --step-media-height: 180px;
    --callout-padding: 24px;
    --callout-gap: 16px;
    --callout-icon-size: 40px;
    --app-cta-gap: 16px;
    --app-cta-title-line-height: 29px; /* 24 × 1.2 = 28,8 */
    --app-cta-stores-gap: 10px;
    --store-btn-height: 48px;
    --store-list-gap: 8px;
    --toc-padding: 20px;
    --toc-gap: 14px;
    --toc-item-line-height: 22px;
    --share-buttons-gap: 8px;
    --post-bottom-padding-top: 24px;
    --post-tags-gap: 8px;
    --helpful-gap: 10px;
    --related-padding-y: 56px;
    --related-heading-gap: 20px;
    --related-all-size: 15px;
  }
}

/* ==========================================================================
   FAQ (faq.html) — планшет 768 (Figma 3221:767) и мобильная 375 (3223:1491), заметки 3086:7673.
   Токены компонентов (аккордеон, карточка раздела, таблицы, CTA) подменяются только внутри .faq:
   .accordion и --accordion-* использует ещё блок «Частые вопросы» статьи блога (blog-post.css), его не трогаем.
   Новые значения — --tablet-faq-page-* / --mobile-faq-page-* (--tablet-faq-* занят блоком статьи).
   ========================================================================== */
:root {
  --tablet-faq-page-title-line-height: 42px;   /* h1 36 × 1.17 = 42,12 (размер — --tablet-hero-title-size) */
  --tablet-faq-page-head-gap: 12px;            /* h1 → подзаголовок; на 375 — 8 */
  --tablet-faq-page-toolbar-gap: 20px;         /* строка поиска → «Не нашли ответ?» */
  --tablet-faq-page-heading-size: 30px;        /* Heading 3 Tablet: Bold 30 / 1.17 */
  --tablet-faq-page-heading-line-height: 35px; /* 30 × 1.17 = 35,1 */
  --tablet-faq-page-question-size: 22px;       /* FAQ Tablet: вопрос Semi Bold 22 / 1.17 */
  --tablet-faq-page-question-line-height: 26px; /* 22 × 1.17 = 25,74 */
  --mobile-faq-page-head-gap: 8px;
  --mobile-faq-page-heading-line-height: 30px; /* Heading 3 Mobile и CTA: 26 × 1.17 = 30,42 (размер — --mobile-hero-title-size) */
  --mobile-faq-page-question-size: 20px;       /* FAQ Mobile: вопрос Semi Bold 20 / 1.17 */
  --mobile-faq-page-question-line-height: 23px; /* 20 × 1.17 = 23,4 */
  --mobile-faq-page-contact-line-height: 19px; /* «Не нашли ответ? Напишите в Telegram»: Medium 16 / normal */
}

/* Планшет и мобильная: Teg M в ряду тегов — иконка 16, иконка → текст 8 */
@media (max-width: 1279px) {
  .faq {
    --tag-icon-size: 16px;
    --tag-gap: 8px;
    --accordion-content-padding-right: 0px;
    --faq-cta-content-width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .faq {
    --faq-section-gap: 48px;          /* верх → раздел → раздел */
    --faq-top-gap: 32px;              /* заголовок → теги → поиск */
    --faq-section-inner-gap: 24px;    /* Heading 3 → карточка */
    --faq-section-card-padding: 40px 32px;
    --accordion-gap: 28px;
    --accordion-spacing: 24px;
    --accordion-header-gap: 24px;
    /* «Не нашли ответ?» (3221:1555): секция 32 / 64 (32 = 48 шага разделов − 16), карточка 48 / 40 */
    --faq-cta-offset-top: 16px;
    --faq-cta-offset-bottom: 64px;
    --faq-cta-padding: 48px 40px;
    --faq-cta-content-gap: 32px;
    --faq-cta-text-gap: 16px;
    --faq-cta-actions-gap: 16px;
  }
}

@media (max-width: 767px) {
  .faq {
    --faq-section-gap: 40px;
    --faq-top-gap: 24px;
    --faq-section-inner-gap: 20px;
    --faq-section-head-gap: 12px;     /* иконка → текст */
    --faq-section-card-padding: 24px 16px;
    --accordion-gap: 24px;
    --accordion-spacing: 20px;
    --accordion-header-gap: 16px;
    /* Таблицы: ключ 112, колонки через 16; комиссии колонкой через 32, подложка 20 / 16 (карта USD — 24 / 16) */
    --faq-table-key-width: 112px;
    --faq-table-gap: 16px;
    --faq-tables-gap: 32px;
    --faq-tables-padding: 20px 16px;
    --faq-note-padding: 24px 16px;
    /* «Не нашли ответ?» (3223:2284): секция 24 / 48 (24 = 40 − 16), карточка 32 / 20, кнопки колонкой */
    --faq-cta-offset-top: 8px;
    --faq-cta-offset-bottom: 48px;
    --faq-cta-padding: 32px 20px;
    --faq-cta-content-gap: 24px;
    --faq-cta-text-gap: 12px;
    --faq-cta-actions-gap: 12px;
  }
}

/* ==========================================================================
   Панели — страницы из белых панелей на сером фоне: «Международная карта» (card.html), позже главная.
   Figma: карта 2311:1322 / 3228:2795 / 3230:3314, правила адаптива карты 3230:13560 и главной 3157:9600.
   Панель: белая, radius 20 на всех ширинах (на 1920 — фон-инстанс «Background» 1880 с отступом 20).
   Отступ от шапки до первой панели — общий --page-offset-top (64 / 32 / 16).
   ========================================================================== */
:root {
  --panel-offset-x: var(--header-offset-x); /* от края экрана: 20 / 12 / 8 — как у бара шапки */
  --panel-gap: 24px;                /* между панелями: 24 / 12 / 8 */
  --panel-radius: 20px;
  --panel-padding-y: 96px;          /* вертикальные поля секции: 96 / 64 / 40 */
  /* Поля по бокам: на 1920 контент 1280 по центру панели (поля > 28). 28 — как на планшете — действуют,
     только когда окно уже 1336: контент сужается, а не прилипает к краю панели (дорисовано, в Figma нет) */
  --panel-padding-x: 28px;          /* 28 / 28 / 16 → контент 1280 / 688 / 327 */
  --panel-heading-gap: 48px;        /* заголовок секции → контент: 48 / 32 / 24 (на 1920 — 48 для всех страниц, решение 06.10) */
  --panel-bare-padding-top: 96px;   /* .panel--bare (без белой панели): 96 / 64 / 24 */
}

/* Планшет 768 (3228:2795) */
@media (min-width: 768px) and (max-width: 1279px) {
  :root {
    --panel-gap: 12px;
    --panel-padding-y: 64px;
    --panel-heading-gap: 32px;
    --panel-bare-padding-top: 64px;
  }
}

/* Мобильная 375 (3230:3314) */
@media (max-width: 767px) {
  :root {
    --panel-gap: 8px;
    --panel-padding-y: 40px;
    --panel-padding-x: 16px;
    --panel-heading-gap: 24px;
    --panel-bare-padding-top: 24px;
  }
}

/* ==========================================================================
   Строка курсов .rates / .rate (компонент «Главная / Курс», Size=M 3104:818 и Size=S 3155:8279).
   Figma: карта 3212:11921 / 3228:2813 / 3230:3328. 1920 и 768 — Size=M, 375 — Size=S (подмена в @media).
   ========================================================================== */
:root {
  --rates-gap: 20px;                /* между пунктами: 20 / 20 / 12 */
  --rates-speed: 42;                /* px/с: 42 / 42 / 34 (решение 06.10, +20 % к прежней); JS ставит --rates-duration */
  --rates-duration: 40s;            /* запасное значение без JS; с JS = ширина половины ленты / --rates-speed */
  --rate-padding: 14px 20px;        /* Size=S: 10 16 10 14 */
  --rate-radius: 14px;
  --rate-gap: 14px;                 /* иконка → текст: 14 / 10 */
  --rate-icon-size: 56px;           /* круг: 56 / 44 */
  --rate-icon-bg: linear-gradient(180deg, #ffd119 14.394%, #ffffff 215%);
  --rate-text-gap: 4px;             /* значение → подпись: 4 / 2 */
  --rate-value-size: 25px;          /* Inter Bold 25 / 1.2: 25 / 20 */
  --rate-value-line-height: 30px;
  --rate-label-size: 13px;          /* Inter Regular 13 / 1.2: 13 / 12 */
  --rate-label-line-height: 16px;   /* 13 × 1.2 = 15.6 */
  --color-rate-text: var(--color-tag-text); /* #44474b */
  --color-rate-label: rgba(68, 71, 75, 0.6);
  --rate-marker-size: 5px;          /* жёлтая точка перед подписью, отступ 7 */
  --rate-marker-gap: 7px;
}

@media (max-width: 767px) {
  :root {
    --rates-gap: 12px;
    --rates-speed: 34;
    --rate-padding: 10px 16px 10px 14px;
    --rate-gap: 10px;
    --rate-icon-size: 44px;
    --rate-text-gap: 2px;
    --rate-value-size: 20px;
    --rate-value-line-height: 24px;
    --rate-label-size: 12px;
    --rate-label-line-height: 14px;  /* 12 × 1.2 = 14.4 */
  }
}

/* ==========================================================================
   «Международная карта» — Hero (Figma 2311:5024 / 3228:2797 / 3230:3316)
   ========================================================================== */
:root {
  --color-card-hero-title: #313132;
  --color-card-hero-muted: #778187; /* надзаголовок и подзаголовок */
  --card-hero-padding: 41px var(--panel-padding-x);  /* 1920: панель 781 = 41 + 699 + 41; 768: 48 28 24; 375: 32 16 24 */
  --card-hero-min-height: 699px;    /* контейнер на 1920 */
  --card-hero-columns-gap: 40px;    /* 1920: между колонками 620 + 620; 768/375: текст → картинка 40 / 24 */
  --card-hero-overline-size: 32px;  /* Regular 32 / 1.17: 32 / 24 / 20 */
  --card-hero-overline-line-height: 37px;
  --card-hero-overline-gap: 20px;
  --card-hero-title-size: 50px;     /* Bold 50 / 1.17: 50 / 44 / 32 */
  --card-hero-title-line-height: 58px;
  --card-hero-stack-gap: 32px;      /* заголовок → текст → кнопка: 32 / 32 / 24 */
  --card-hero-lead-size: 20px;      /* Regular 20 / 1.6: 20 / 18 / 16 */
  --card-hero-lead-line-height: 32px;
  --card-hero-lead-width: 428px;    /* на 768 и 375 — на всю ширину */
  --card-hero-media-height: auto;   /* блок картинки: колонка / 500 / 320 */
  --card-hero-image-size: 549px;    /* 549 / 439.2 / 274.5 */
}

@media (min-width: 768px) and (max-width: 1279px) {
  :root {
    --card-hero-padding: 48px var(--panel-padding-x) 24px;
    --card-hero-overline-size: 24px;
    --card-hero-overline-line-height: 28px;  /* 24 × 1.17 = 28.08 */
    --card-hero-title-size: 44px;
    --card-hero-title-line-height: 51px;     /* 44 × 1.17 = 51.48 */
    --card-hero-lead-size: 18px;
    --card-hero-lead-line-height: 29px;      /* 18 × 1.6 = 28.8 */
    --card-hero-lead-width: none;
    --card-hero-media-height: 500px;
    --card-hero-image-size: 439.2px;
  }
}

@media (max-width: 767px) {
  :root {
    --card-hero-padding: 32px var(--panel-padding-x) 24px;
    --card-hero-columns-gap: 24px;
    --card-hero-overline-size: 20px;
    --card-hero-overline-line-height: 23px;  /* 20 × 1.17 = 23.4 */
    --card-hero-title-size: 32px;
    --card-hero-title-line-height: 37px;     /* 32 × 1.17 = 37.44 */
    --card-hero-stack-gap: 24px;
    --card-hero-lead-size: 16px;
    --card-hero-lead-line-height: 26px;      /* 16 × 1.6 = 25.6 */
    --card-hero-lead-width: none;
    --card-hero-media-height: 320px;
    --card-hero-image-size: 274.5px;
  }
}

/* ==========================================================================
   «Международная карта» — заголовок секции .card-heading (секции 3, 5, 7: 2394:3401 / 3228:2828 / 3230:3343).
   H2 Bold + подзаголовок Regular, по центру. Отступ заголовок → контент — --panel-heading-gap.
   ========================================================================== */
:root {
  --color-card-heading-title: var(--color-faq-hero-title);     /* #313132 */
  --color-card-heading-lead: var(--color-faq-section-subtitle); /* #778187 */
  --card-heading-title-size: var(--h1-size);                    /* Heading/H1 Bold: 40 / 32 / 26 */
  --card-heading-title-line-height: var(--h1-line-height);      /* 47 / 37 / 30 */
  --card-heading-lead-size: 32px;                               /* Heading/H2 Regular: 32 / 20 / 16 */
  --card-heading-lead-line-height: 37px;                        /* 32 × 1.17 = 37.44 */
  --card-heading-gap: 16px;                                     /* 16 / 12 / 8 */
}

@media (min-width: 768px) and (max-width: 1279px) {
  :root {
    --card-heading-title-size: 32px;
    --card-heading-title-line-height: 37px;  /* 32 × 1.17 = 37.44 */
    --card-heading-lead-size: 20px;
    --card-heading-lead-line-height: 23px;   /* 20 × 1.17 = 23.4 */
    --card-heading-gap: 12px;
  }
}

@media (max-width: 767px) {
  :root {
    --card-heading-title-size: 26px;
    --card-heading-title-line-height: 30px;  /* 26 × 1.17 = 30.42 */
    --card-heading-lead-size: 16px;
    --card-heading-lead-line-height: 19px;   /* 16 × 1.17 = 18.72 */
    --card-heading-gap: 8px;
  }
}

/* ==========================================================================
   «Международная карта» — «Подписки, покупки и поездки» (2394:3399 / 3228:2826 / 3230:3341).
   Карточки .use-card (Block text L): серая и жёлтая; пункты .use-item (Icon item) — одинаковые на всех ширинах.
   ========================================================================== */
:root {
  --card-uses-gap: 48px;                   /* между карточками: 48 (в ряд) / 20 / 16 (столбиком) */
  --color-use-card-gray: #e2e8f0;
  --color-use-card-title: var(--color-tag-text);            /* #44474b, серая карточка */
  --color-use-card-text: var(--color-faq-section-subtitle); /* #778187, серая карточка */
  --color-use-card-yellow-text: var(--color-button-secondary-text); /* #4e4313, весь текст жёлтой карточки */
  --use-card-radius: 20px;
  --use-card-padding: 48px;                /* 48 / 40 40 340 / 32 20 290 — снизу место под картинку */
  --use-card-min-height: 828px;            /* только 1920; на 768 и 375 высота по содержимому */
  --use-card-gap: 32px;                    /* текст → список: 32 / 24 / 20 */
  --use-card-text-gap: 32px;               /* заголовок → текст: 32 / 16 / 12 */
  --use-card-title-size: 32px;             /* Bold / 1.17: 32 / 26 / 24 */
  --use-card-title-line-height: 37px;
  --use-card-text-size: 20px;              /* Regular / 1.6: 20 / 18 / 16 */
  --use-card-text-line-height: 32px;
  /* Картинка (Pic / 4, Pic / 3): рамка 530×501, выходит за низ на 185, по центру +15; на 375 — 300×283.585, −10, по центру */
  --use-card-pic-width: 530px;
  --use-card-pic-height: 501px;
  --use-card-pic-bottom: -185px;
  --use-card-pic-shift: 15px;
  /* Пункт */
  --use-item-gap: 16px;                    /* значок → текст и между пунктами */
  --use-item-icon-size: 44px;
  --use-item-glyph-size: 24px;
  --use-item-text-gap: 10px;
  --color-use-item-icon-bg: #ffd95d;       /* серая карточка: круг #ffd95d, значок белый */
  --color-use-item-icon: var(--color-white);
  --color-use-item-icon-bg-yellow: var(--color-brand-50); /* жёлтая карточка: круг #fff2c8, значок #fec200 */
  --color-use-item-icon-yellow: #fec200;
}

@media (min-width: 768px) and (max-width: 1279px) {
  :root {
    --card-uses-gap: 20px;
    --use-card-padding: 40px 40px 340px;
    --use-card-min-height: 0;
    --use-card-gap: 24px;
    --use-card-text-gap: 16px;
    --use-card-title-size: 26px;
    --use-card-title-line-height: 30px;    /* 26 × 1.17 = 30.42 */
    --use-card-text-size: 18px;
    --use-card-text-line-height: 29px;     /* 18 × 1.6 = 28.8 */
  }
}

@media (max-width: 767px) {
  :root {
    --card-uses-gap: 16px;
    --use-card-padding: 32px 20px 290px;
    --use-card-min-height: 0;
    --use-card-gap: 20px;
    --use-card-text-gap: 12px;
    --use-card-title-size: 24px;
    --use-card-title-line-height: 28px;    /* 24 × 1.17 = 28.08 */
    --use-card-text-size: 16px;
    --use-card-text-line-height: 26px;     /* 16 × 1.6 = 25.6 */
    --use-card-pic-width: 300px;
    --use-card-pic-height: 283.585px;
    --use-card-pic-bottom: -10px;
    --use-card-pic-shift: 0px;
  }
}

/* ==========================================================================
   Промо-блок .promo (css/components.css): цветной блок, текст слева, картинка справа.
   Figma: «Пополняйте рублями» 2425:9966 / 3228:2852 / 3230:3366; сверено с «Франшизой» главной
   3147:9787 / 3156:683 / 3157:1215 и «Выпустите карту в два клика» 2558:1922 / 3228:2895 / 3230:3400 (задача 5).
   ========================================================================== */
:root {
  --promo-radius: 20px;
  --promo-padding-x: 96px;            /* 96 / 40 / 20 */
  --promo-gap: 40px;                  /* колонки 524 + 40 + 524 / 344 + 24 + 240 / столбиком */
  --promo-min-height: 0px;            /* 768: 428 (у «Пополняйте» и «Франшизы»); на 1920 высоту задаёт текст */
  --promo-body-padding: 96px 0;       /* колонка текста: 96 / 48 / 32 0 24 */
  --promo-title-size: 32px;           /* Heading/H2 Bold / 1.17: 32 / 26 / 24 */
  --promo-title-line-height: 37px;
  --promo-title-gap: 24px;            /* заголовок → текст → плашка/кнопка: 24 / 16 / 16 */
  --promo-text-size: 20px;            /* Body Regular / 1.6: 20 / 18 / 16 */
  --promo-text-line-height: 32px;
  --promo-media-width: auto;          /* колонка картинки: половина / 240 / вся ширина */
  --promo-media-height: auto;         /* 375: окно 300 под текстом */
  --promo-media-offset: 52px;         /* отступ телефона сверху: 52 / 40 / 0 */
  --promo-image-width: 405px;         /* телефон 405×822 / 240×487 / 230×467 */
  --promo-action-gap: var(--promo-title-gap); /* текст → кнопка; у «Два клика» больше (32 / 32 / 16) */
  /* .promo--media-free: картинка ставится от блока (не от колонки); значения — у экземпляра */
  --promo-image-top: auto;
  --promo-image-right: auto;
  --promo-image-bottom: auto;
  --promo-image-left: auto;
  /* Серый вариант («Пополняйте рублями») */
  --color-promo-gray: #e2e8f0;
  --color-promo-gray-title: var(--color-tag-text);            /* #44474b */
  --color-promo-gray-text: var(--color-faq-section-subtitle); /* #778187 */
  /* Жёлтый вариант («Два клика» 2558:1922, «Франшиза» главной): градиент как у «Не нашли ответ?» FAQ, угол — по ширине */
  --color-promo-yellow-from: var(--color-brand-300);         /* #ffd119, 18.57 % */
  --color-promo-yellow-to: #ffe371;                          /* 75.629 % */
  --color-promo-yellow-title: var(--color-faq-cta-title);    /* #413503 */
  --color-promo-yellow-text: var(--color-faq-cta-text);      /* rgba(65, 53, 3, 0.6) */
  --promo-yellow-angle: 109.58deg;                           /* 109.58 / 104.58 / 94.34 */
}

@media (min-width: 768px) and (max-width: 1279px) {
  :root {
    --promo-padding-x: 40px;
    --promo-gap: 24px;
    --promo-min-height: 428px;
    --promo-body-padding: 48px 0;
    --promo-title-size: 26px;
    --promo-title-line-height: 30px;   /* 26 × 1.17 = 30.42 */
    --promo-title-gap: 16px;
    --promo-text-size: 18px;
    --promo-text-line-height: 29px;    /* 18 × 1.6 = 28.8 */
    --promo-media-width: 240px;
    --promo-media-offset: 40px;
    --promo-image-width: 240px;
    --promo-yellow-angle: 104.58deg;
  }
}

@media (max-width: 767px) {
  :root {
    --promo-padding-x: 20px;
    --promo-gap: 0px;
    --promo-body-padding: 32px 0 24px;
    --promo-title-size: 24px;
    --promo-title-line-height: 28px;   /* 24 × 1.17 = 28.08 */
    --promo-title-gap: 16px;
    --promo-text-size: 16px;
    --promo-text-line-height: 26px;    /* 16 × 1.6 = 25.6 */
    --promo-media-width: 100%;
    --promo-media-height: 300px;
    --promo-media-offset: 0px;
    --promo-image-width: 230px;
    --promo-yellow-angle: 94.34deg;
  }
}

/* ==========================================================================
   «Международная карта» — финальный CTA «Выпустите международную карту Алтын» (секция 8: 2517:10432 / 3228:2922 /
   3230:3426). Панель с жёлтым фоном: на ≥1280 — SVG 2517:10479 (градиент + два белых свечения), ниже — линейный
   градиент. Колонки 620 + 40 + 620 / колонкой. Картинка Pic — готовая выгрузка из Figma на каждую ширину.
   ========================================================================== */
:root {
  --card-cta-padding: 64px var(--panel-padding-x);   /* 64 / 48 28 / 32 16 40 */
  --card-cta-gap: 40px;                 /* между колонками; 768 / 375 — текст → картинка 24 / 16 */
  --card-cta-min-height: 526px;         /* 1920: колонка текста 526, текст по центру высоты */
  --card-cta-body-padding: 0px;         /* 768 / 375: 8 сверху и снизу (Left-column) */
  --card-cta-body-gap: 48px;            /* кнопка → сторы: 48 / 32 / 24 */
  --card-cta-content-gap: 32px;         /* заголовок → текст → кнопка: 32 / 24 / 16 */
  --card-cta-title-size: 40px;          /* Bold / 1.17: 40 / 32 / 26 */
  --card-cta-title-line-height: 47px;
  --card-cta-text-size: 20px;           /* Regular / 1.6: 20 / 18 / 16 */
  --card-cta-text-line-height: 32px;
  --card-cta-text-width: 428px;         /* 1920; 768 / 375 — на всю ширину */
  --card-cta-media-height: auto;        /* 768: блок 440, 375: 356 (картинка по центру) */
  --card-cta-pic-width: 614px;          /* Pic 586 + монета за рамкой 28 / 528 / 327 */
  --card-cta-pic-overflow: 28px;        /* выступ монеты справа — не влияет на центровку рамки 586 */
  --color-card-cta-from: var(--color-brand-300);   /* #ffd119 */
  --color-card-cta-to: var(--color-promo-yellow-to); /* #ffe371 */
}

@media (min-width: 768px) and (max-width: 1279px) {
  :root {
    --card-cta-padding: 48px var(--panel-padding-x);
    --card-cta-gap: 24px;
    --card-cta-min-height: 0px;
    --card-cta-body-padding: 8px;
    --card-cta-body-gap: 32px;
    --card-cta-content-gap: 24px;
    --card-cta-title-size: 32px;
    --card-cta-title-line-height: 37px;   /* 32 × 1.17 = 37.44 */
    --card-cta-text-size: 18px;
    --card-cta-text-line-height: 29px;    /* 18 × 1.6 = 28.8 */
    --card-cta-text-width: 100%;
    --card-cta-media-height: 440px;
    --card-cta-pic-width: 528px;
    --card-cta-pic-overflow: 0px;
  }
}

@media (max-width: 767px) {
  :root {
    --card-cta-padding: 32px var(--panel-padding-x) 40px;
    --card-cta-gap: 16px;
    --card-cta-min-height: 0px;
    --card-cta-body-padding: 8px;
    --card-cta-body-gap: 24px;
    --card-cta-content-gap: 16px;
    --card-cta-title-size: 26px;
    --card-cta-title-line-height: 30px;   /* 26 × 1.17 = 30.42 */
    --card-cta-text-size: 16px;
    --card-cta-text-line-height: 26px;    /* 16 × 1.6 = 25.6 */
    --card-cta-text-width: 100%;
    --card-cta-media-height: auto;
    --card-cta-pic-width: 327px;
    --card-cta-pic-overflow: 0px;
  }
}

/* ==========================================================================
   «Международная карта» — «Вопросы и ответы» (секция 7: 2438:11409 / 3228:2911 / 3230:3415).
   Секция .panel--bare (без белой панели), белая только карточка .card-faq__card; аккордеон — общий .accordion,
   его токены подменяются внутри .card-faq (как .faq на faq.html). На 1920 значения аккордеона — по умолчанию.
   ========================================================================== */
:root {
  --card-faq-card-padding: 56px 96px;  /* 56 96 / 32 / 20 16; у последнего вопроса снизу тоже 32 (без разделителя) */
  --card-faq-card-radius: var(--faq-section-card-radius); /* 14 */
  --card-faq-gap: 32px;                /* между вопросами: 32 / 24 / 16 */
  --card-faq-header-gap: 32px;         /* вопрос → стрелка: 32 / 32 / 16 */
  --card-faq-answer-gap: 32px;         /* вопрос → ответ: 32 / 32 / 16 (снизу у вопроса — всегда 32) */
  --card-faq-question-size: var(--h2-semibold-size);               /* Semi Bold / 1.17: 24 / 24 / 20 */
  --card-faq-question-line-height: var(--h2-semibold-line-height);
  --card-faq-answer-size: var(--body-20-size);                     /* Regular / 1.6: 20 / 20 / 16 */
  --card-faq-answer-line-height: var(--body-20-line-height);
  --card-faq-answer-padding-right: 180px;                          /* 180 / 180 / 0 */
}

@media (min-width: 768px) and (max-width: 1279px) {
  :root {
    --card-faq-card-padding: 32px;
    --card-faq-gap: 24px;
  }
}

@media (max-width: 767px) {
  :root {
    --card-faq-card-padding: 20px 16px;
    --card-faq-gap: 16px;
    --card-faq-header-gap: 16px;
    --card-faq-answer-gap: 16px;
    --card-faq-question-size: 20px;
    --card-faq-question-line-height: 23px; /* 20 × 1.17 = 23.4 */
    --card-faq-answer-size: 16px;
    --card-faq-answer-line-height: 26px;   /* 16 × 1.6 = 25.6 */
    --card-faq-answer-padding-right: 0px;
  }
}

/* ==========================================================================
   «Международная карта» — «Выпустите карту в два клика» (секция 6: 2558:1922 / 3228:2895 / 3230:3400).
   Экземпляр .promo.promo--yellow.promo--media-free с модификатором .promo--issue (css/pages/card.css).
   Картинка «Pic / 12» (видимый слой «Алтын»): рамка 585×584 / 330×329.4 / 300×299.5, слой шире рамки на 1.78 %
   справа и выше/ниже на 10.53 % → WebP 595.4 / 335.9 / 305.3 в ширину. Положение — от блока.
   ========================================================================== */
:root {
  --card-issue-min-height: 479px;      /* 1920: блок 479, текст по центру высоты; 768 и 375 — высоту задаёт текст */
  --card-issue-body-padding: 52px 0;   /* 52 / 48 / 32 0 0 */
  --card-issue-title-size: 30px;       /* Bold / 1.3: 30 / 26 / 24 */
  --card-issue-title-line-height: 39px;
  --card-issue-title-gap: 24px;        /* заголовок → текст: 24 / 24 / 16 */
  --card-issue-action-gap: 32px;       /* текст → кнопка: 32 / 32 / 16 */
  --card-issue-text-size: 18px;        /* Regular / 1.6: 18 / 16 / 16 */
  --card-issue-text-line-height: 29px; /* 18 × 1.6 = 28.8 */
  --card-issue-media-width: auto;      /* колонка картинки: 524 (половина) / 280 / окно 290 под текстом */
  --card-issue-media-height: auto;
  --card-issue-image-width: 595.4px;   /* 595.4 / 335.9 / 305.3 */
  --card-issue-image-top: calc(50% - 289px);   /* рамка: центр на 64.5 ниже середины блока (top 12), слой выше на 61.5 */
  --card-issue-image-right: 35.1px;            /* рамка right 45.5, слой шире на 10.4 */
  --card-issue-image-bottom: auto;
  --card-issue-image-left: auto;
}

@media (min-width: 768px) and (max-width: 1279px) {
  :root {
    --card-issue-min-height: 0px;      /* блок 352 = 48 + 256 + 48 */
    --card-issue-body-padding: 48px 0;
    --card-issue-title-size: 26px;
    --card-issue-title-line-height: 34px; /* 26 × 1.3 = 33.8 */
    --card-issue-action-gap: 32px;
    --card-issue-text-size: 16px;
    --card-issue-text-line-height: 26px;  /* 16 × 1.6 = 25.6 */
    --card-issue-media-width: 280px;   /* колонки 304 + 24 + 280 */
    --card-issue-image-width: 335.9px;
    --card-issue-image-top: calc(50% - 199.4px); /* рамка 329.4 по центру высоты, слой выше на 34.7 */
    --card-issue-image-right: -5.9px;            /* рамка прижата вправо, слой шире на 5.9 */
  }
}

@media (max-width: 767px) {
  :root {
    --card-issue-min-height: 0px;      /* блок 574 = 284 текст + 290 окно */
    --card-issue-body-padding: 32px 0 0;
    --card-issue-title-size: 24px;
    --card-issue-title-line-height: 31px; /* 24 × 1.3 = 31.2 */
    --card-issue-title-gap: 16px;
    --card-issue-action-gap: 16px;
    --card-issue-text-size: 16px;
    --card-issue-text-line-height: 26px;
    --card-issue-media-width: 100%;
    --card-issue-media-height: 290px;  /* нижнее поле блока 290 */
    --card-issue-image-width: 305.3px;
    --card-issue-image-top: auto;
    --card-issue-image-right: auto;
    --card-issue-image-bottom: -63.1px;          /* рамка выходит за низ на 31.5, слой ниже ещё на 31.6 */
    --card-issue-image-left: calc(50% - 150px);  /* рамка 300 по центру блока */
  }
}

/* ==========================================================================
   Плашка .plate (css/components.css): Semi Bold-заголовок + текст, Body/18 / 1.2.
   Figma: «Пополняйте с запасом» 3231:14213 / 3228:2859 / 3230:3373 (вариант --light на промо),
   «Лимиты» в «ТОП-5» 2428:10328 (по умолчанию).
   ========================================================================== */
:root {
  --plate-padding: 16px 24px;
  --plate-radius: 20px;
  --plate-gap: 8px;
  --plate-font-size: 18px;            /* в промо на 768 и 375 — 16 (подмена в .promo) */
  --plate-line-height: var(--body-18-compact-line-height); /* 22 = 18 × 1.2 */
  --color-plate-bg: var(--color-brand-50);                 /* #fff2c8 */
  --color-plate-text: var(--color-button-secondary-text);  /* #4e4313 */
  /* --light: белый градиент на цветном фоне; угол в Figma зависит от пропорций плашки: 104° / 99° / 97° */
  --plate-light-angle: 103.93deg;
  --color-plate-light-text: var(--color-tag-text);          /* #44474b */
}

@media (min-width: 768px) and (max-width: 1279px) {
  :root {
    --plate-light-angle: 98.78deg;
  }
}

@media (max-width: 767px) {
  :root {
    --plate-light-angle: 97.34deg;
  }
}

/* ==========================================================================
   Карусель .carousel (css/components.css + js/carousel.js). Figma: «ТОП-5» карты 2428:10332 / 3228:2874 / 3230:3387.
   Видно 3 / 2 / 1 карточки (на 375 — карточка 280 и край следующей). Стрелки — только 1920 (≥1280).
   ========================================================================== */
:root {
  --carousel-gap: 24px;                 /* между карточками: 24 / 24 / 12 */
  --carousel-item-width: calc((100% - 2 * var(--carousel-gap)) / 3); /* 3 в ряд ≈ 410.7 при 1280 / 2 в ряд 332 / 280 */
  /* Стрелки — компонент «Nav arrows» 3297:3937 (вправо 3296:3912, влево 3297:3936): круг 56 — фон кнопки,
     шеврон ChevronRight / ChevronLeft Size=L 24 — mask-image; в круге шеврон не по центру: x 18 / 14, y 16 */
  --carousel-arrow-size: 56px;
  --carousel-arrow-gap: 23px;           /* от края ряда до стрелки — снаружи (1920: стрелки на −79 и 1303) */
  --carousel-arrow-icon-size: 24px;
  --carousel-arrow-icon-top: 16px;
  --carousel-arrow-icon-prev-x: 14px;
  --carousel-arrow-icon-next-x: 18px;
  --color-carousel-arrow-bg: #ecf0f6;
  --color-carousel-arrow-icon: var(--color-text-secondary); /* #837f7f */
  --carousel-dots-offset: 40px;         /* ряд → точки */
  --carousel-dot-size: 12px;
  --carousel-dot-active-width: 28px;    /* активная — капсула 28×12 */
  --carousel-dots-gap: 13px;
  --color-carousel-dot: var(--color-promo-gray);                 /* #e2e8f0 */
  --color-carousel-dot-active: var(--color-faq-section-subtitle); /* #778187 */
}

@media (min-width: 768px) and (max-width: 1279px) {
  :root {
    --carousel-item-width: calc((100% - var(--carousel-gap)) / 2);
  }
}

@media (max-width: 767px) {
  :root {
    --carousel-gap: 12px;
    --carousel-item-width: 280px;
  }
}

/* ==========================================================================
   Карточка .feature-card — Block M (набор 2381:2345): Size Desktop / Tablet / Mobile — подменой токенов,
   Color — модификаторами --light / --yellow / --slate. Картинка — в нижней области от --feature-card-pic-top.
   ========================================================================== */
:root {
  --feature-card-height: 455px;         /* 455 / 440 / 400; ширина — от карусели (410.7 / 332 / 280) */
  --feature-card-padding: 32px 48px;    /* 32 48 / 28 24 / 24 20 */
  --feature-card-gap: 20px;             /* заголовок → текст: 20 / 12 / 12 */
  --feature-card-radius: 20px;
  --feature-card-title-size: 32px;      /* Bold / 1.17: 32 / 26 / 24 */
  --feature-card-title-line-height: 37px;
  --feature-card-text-size: 16px;       /* Body/16 / 1.6 на всех ширинах */
  --feature-card-text-line-height: 26px;
  --feature-card-pic-top: 187px;        /* верх области картинки: 187 / 190 / 178 */
  --feature-card-pic-size: 271px;       /* рамка картинки: 271 / 240 / 210 */
  --feature-card-pic-size-narrow: 234px;   /* десктоп, карточка уже 406 (ряд сужен под стрелки, 1280–1455) */
  --feature-card-pic-size-narrower: 208px; /* десктоп, карточка уже 396 */
  --color-feature-card-light: var(--color-bg-secondary);   /* #f6f7f8 */
  --color-feature-card-yellow: var(--color-brand-300);     /* #ffd119 */
  --color-feature-card-slate: var(--color-promo-gray);     /* #e2e8f0 */
  --color-feature-card-text: var(--color-tag-text);        /* #44474b — светлая и серая */
  --color-feature-card-yellow-text: var(--color-button-secondary-text); /* #4e4313 */
}

@media (min-width: 768px) and (max-width: 1279px) {
  :root {
    --feature-card-height: 440px;
    --feature-card-padding: 28px 24px;
    --feature-card-gap: 12px;
    --feature-card-title-size: 26px;
    --feature-card-title-line-height: 30px; /* 26 × 1.17 = 30.42 */
    --feature-card-pic-top: 190px;
    --feature-card-pic-size: 240px;
  }
}

@media (max-width: 767px) {
  :root {
    --feature-card-height: 400px;
    --feature-card-padding: 24px 20px;
    --feature-card-gap: 12px;
    --feature-card-title-size: 24px;
    --feature-card-title-line-height: 28px; /* 24 × 1.17 = 28.08 */
    --feature-card-pic-top: 178px;
    --feature-card-pic-size: 210px;
  }
}

/* ==========================================================================
   Главная — Hero «Кошелек Алтын» (Figma 3099:49 / 3156:623 / 3157:1155)
   Высота панели не задана — поля + контент (на 1920: 57 + 667 + 57 = 781, как в макете).
   ========================================================================== */
:root {
  --color-home-hero-title: var(--color-card-hero-title);  /* #313132 */
  --color-home-hero-muted: var(--color-card-hero-muted);  /* #778187: надзаголовок и подзаголовок */
  /* Фон: два жёлтых угла поверх белого; углы градиентов — из кадра каждой ширины */
  --home-hero-bg:
    linear-gradient(-21.58deg, rgba(255, 255, 255, 0) 67.642%, rgba(255, 209, 25, 0.15) 111.1%),
    linear-gradient(154.54deg, rgba(255, 255, 255, 0) 56.603%, rgba(255, 209, 25, 0.15) 107.18%),
    var(--color-white);
  --home-hero-padding: 56px var(--panel-padding-x); /* 1920: 56 сверху/снизу (макет 57 — округлено к кратному 8); 768: 48 28 24; 375: 32 16 24 */
  --home-hero-columns-gap: 40px;    /* 1920: минимум между колонками (в макете space-between); 768/375: текст → картинка 40 / 24 */
  --home-hero-text-width: 576px;    /* колонка текста (трек grid) на 1920; на 768 и 375 — на всю ширину */
  --home-hero-text-gap: 32px;       /* заголовок → подзаголовок → кнопка: 32 / 24 / 24 (макет 375: 20) */
  --home-hero-heading-gap: 24px;    /* надзаголовок → заголовок: 24 / 16 / 16 (макет 20 / 16 / 12) */
  --home-hero-overline-size: 32px;  /* Regular: 32 / 1.17, 24 / 1.2, 20 / 1.2 */
  --home-hero-overline-line-height: 37px;  /* 32 × 1.17 = 37.44 */
  --home-hero-title-size: 50px;     /* Bold: 50 / 1.17, 44 / 1.15, 32 / 1.15 */
  --home-hero-title-line-height: 58px;     /* 50 × 1.17 = 58.5 */
  --home-hero-lead-size: 20px;      /* Regular 1.6: 20 / 18 / 16 */
  --home-hero-lead-line-height: 32px;
  --home-hero-lead-width: 460px;    /* на 768 и 375 — на всю ширину */
  --home-hero-art-width: 654.6px;   /* иллюстрация 654.6 × 667.09: 1920 (сжимается по колонке на 1280–1440) / ×0.8 / ×0.5 */
}

@media (min-width: 768px) and (max-width: 1279px) {
  :root {
    --home-hero-bg:
      linear-gradient(-50.64deg, rgba(255, 255, 255, 0) 67.642%, rgba(255, 209, 25, 0.15) 111.1%),
      linear-gradient(124.27deg, rgba(255, 255, 255, 0) 56.603%, rgba(255, 209, 25, 0.15) 107.18%),
      var(--color-white);
    --home-hero-padding: 48px var(--panel-padding-x) 24px;
    --home-hero-text-width: minmax(0, 1fr);
    --home-hero-text-gap: 24px;
    --home-hero-heading-gap: 16px;
    --home-hero-overline-size: 24px;
    --home-hero-overline-line-height: 29px;  /* 24 × 1.2 = 28.8 */
    --home-hero-title-size: 44px;
    --home-hero-title-line-height: 51px;     /* 44 × 1.15 = 50.6 */
    --home-hero-lead-size: 18px;
    --home-hero-lead-line-height: 29px;      /* 18 × 1.6 = 28.8 */
    --home-hero-lead-width: none;
    --home-hero-art-width: 523.68px;
  }
}

@media (max-width: 767px) {
  :root {
    --home-hero-bg:
      linear-gradient(-64.23deg, rgba(255, 255, 255, 0) 67.642%, rgba(255, 209, 25, 0.15) 111.1%),
      linear-gradient(111.85deg, rgba(255, 255, 255, 0) 56.603%, rgba(255, 209, 25, 0.15) 107.18%),
      var(--color-white);
    --home-hero-padding: 32px var(--panel-padding-x) 24px;
    --home-hero-columns-gap: 24px;
    --home-hero-text-width: minmax(0, 1fr);
    --home-hero-text-gap: 24px;
    --home-hero-heading-gap: 16px;
    --home-hero-overline-size: 20px;
    --home-hero-overline-line-height: 24px;  /* 20 × 1.2 */
    --home-hero-title-size: 32px;
    --home-hero-title-line-height: 37px;     /* 32 × 1.15 = 36.8 */
    --home-hero-lead-size: 16px;
    --home-hero-lead-line-height: 26px;      /* 16 × 1.6 = 25.6 */
    --home-hero-lead-width: none;
    --home-hero-art-width: 327.3px;
  }
}

/* ==========================================================================
   Главная · 3 «Лицензия и регулирование» (3099:57 / 3156:649 / 3157:1181). Размеры 1920 / 768 / 375.
   ========================================================================== */
:root {
  --home-license-columns-gap: 40px; /* 1920: минимум между колонками (в макете space-between); 768/375: текст → картинка 32 / 24 */
  --home-license-text-gap: 24px;    /* заголовок → подзаголовок → карточка → кнопка: 24 / 24 / 24 (макет 375: 20) */
  --home-license-title-size: 40px;  /* Bold: 40 / 1.17, 32 / 1.2, 26 / 1.2 */
  --home-license-title-line-height: 47px;  /* 40 × 1.17 = 46.8 */
  --home-license-lead-size: 20px;   /* Regular 1.6: 20 / 18 / 16 */
  --home-license-lead-line-height: 32px;
  --home-license-card-padding: 32px 64px;  /* 768: 32 56; 375: 24 48 (макет 30 64 / 28 56 28 32 / 20 44 20 20 — округлено к кратному 8) */
  --home-license-card-size: 18px;   /* Regular 1.6: 18 / 18 / 16 */
  --home-license-card-line-height: 29px;   /* 18 × 1.6 = 28.8 */
  --home-license-arrow-size: 56px;  /* жёлтый круг (с белой обводкой 10), выступает за плашку на --home-license-arrow-overhang */
  --home-license-arrow-overhang: 24px;  /* макет 26 */
  --home-license-art-width: 624.76px;      /* 1920 (сжимается по колонке на 1280–1400) / 440 / 300 */
  --color-home-license-card: #f6f7f8;
  --color-home-license-arrow: #ffd119;
}

@media (min-width: 768px) and (max-width: 1279px) {
  :root {
    --home-license-columns-gap: 32px;
    --home-license-title-size: 32px;
    --home-license-title-line-height: 38px;  /* 32 × 1.2 = 38.4 */
    --home-license-lead-size: 18px;
    --home-license-lead-line-height: 29px;
    --home-license-card-padding: 32px 56px 32px 32px;
    --home-license-art-width: 440px;
  }
}

@media (max-width: 767px) {
  :root {
    --home-license-columns-gap: 24px;
    --home-license-text-gap: 24px;
    --home-license-title-size: 26px;
    --home-license-title-line-height: 31px;  /* 26 × 1.2 = 31.2 */
    --home-license-lead-size: 16px;
    --home-license-lead-line-height: 26px;   /* 16 × 1.6 = 25.6 */
    --home-license-card-padding: 24px 48px 24px 24px;
    --home-license-card-size: 16px;
    --home-license-card-line-height: 26px;
    --home-license-art-width: 300px;
  }
}

/* ==========================================================================
   Главная · 4 «Полезная информация о карте» (3101:63 / 3156:661 / 3157:1193). Карточка — .feature-card (components.css)
   с подменой своих токенов в .home-benefits (css/pages/index.css). Размеры 1920 / 768 / 375.
   ========================================================================== */
:root {
  --home-benefits-grid-gap: 48px;            /* между карточками: 48 / 24 / 16 (макет 768: 20) */
  --home-benefits-title-size: 40px;          /* H2 Bold: 40 / 1.17, 32 / 1.2, 26 / 1.2 */
  --home-benefits-title-line-height: 47px;   /* 40 × 1.17 = 46.8 */
  --home-benefits-card-height-l: 450px;      /* карточки 1–2: 450 / 480 (первая на всю ширину) и 440 / 400 */
  --home-benefits-card-height-m: 500px;      /* карточки 3–5: 500 / 440 / 400 */
  --home-benefits-card-padding: 48px 40px 0; /* 48 40 / 32 24 / 32 24 (макет 375: 28 20) */
  --home-benefits-card-gap: 16px;            /* заголовок → текст: 16 / 16 / 16 (макет 768 и 375: 12) */
  --home-benefits-card-title-size: 32px;     /* Bold: 32 / 1.17, 24 / 1.2, 22 / 1.2 */
  --home-benefits-card-title-line-height: 37px;  /* 32 × 1.17 = 37.44 */
  --home-benefits-card-text-size: 18px;      /* Regular: 18 / 1.6, 16 / 1.5, 16 / 1.5 */
  --home-benefits-card-text-line-height: 29px;   /* 18 × 1.6 = 28.8 */
  --home-benefits-art-4-narrow: 284px;       /* десктоп 1280–1329: картинка карточки 4 при заголовке в 3 строки (в Figma нет; макет 306.67) */
}

@media (min-width: 768px) and (max-width: 1279px) {
  :root {
    --home-benefits-grid-gap: 24px;
    --home-benefits-title-size: 32px;
    --home-benefits-title-line-height: 38px;  /* 32 × 1.2 = 38.4 */
    --home-benefits-card-height-l: 480px;
    --home-benefits-card-height-m: 440px;
    --home-benefits-card-padding: 32px 24px 0;
    --home-benefits-card-title-size: 24px;
    --home-benefits-card-title-line-height: 29px;  /* 24 × 1.2 = 28.8 */
    --home-benefits-card-text-size: 16px;
    --home-benefits-card-text-line-height: 24px;   /* 16 × 1.5 */
  }
}

@media (max-width: 767px) {
  :root {
    --home-benefits-grid-gap: 16px;
    --home-benefits-title-size: 26px;
    --home-benefits-title-line-height: 31px;  /* 26 × 1.2 = 31.2 */
    --home-benefits-card-height-l: 400px;
    --home-benefits-card-height-m: 400px;
    --home-benefits-card-padding: 32px 24px 0;
    --home-benefits-card-title-size: 22px;
    --home-benefits-card-title-line-height: 26px;  /* 22 × 1.2 = 26.4 */
    --home-benefits-card-text-size: 16px;
    --home-benefits-card-text-line-height: 24px;
  }
}

/* ==========================================================================
   Движение (пачка 10). Значения — по видео-образцу altyn.one; с сайтом не сверены (хост был недоступен,
   docs/open-questions.md). Появление — js/reveal.js + components.css; параллакс Hero — js/parallax.js.
   ========================================================================== */
:root {
  --reveal-duration: 0.86s;             /* появление блока: прозрачность 0→1 и подъём; 0.6 → 0.72 → 0.86 (дважды +20 %, Asya 06.10) */
  --reveal-distance: 24px;
  --reveal-stagger: 0.14s;              /* 0.1 → 0.12 → 0.14 (дважды +20 %, Asya 06.10); шаг между элементами внутри [data-reveal-stagger] и в первом экране */
  --reveal-easing: cubic-bezier(0.22, 1, 0.36, 1); /* ease-out */
  --parallax-max: 20px;                 /* сдвиг слоя с data-depth="1" при курсоре у края секции */
  --parallax-ease: 0.08;                /* доля пути к цели за кадр (плавное догоняние) */
}

/* ==========================================================================
   Главная · 5 «B2B-решения» (3102:65 / 3156:671 / 3157:1203). Заголовок — токены --home-benefits-title-* (те же размеры),
   теги — .tag--l на 1920 и размер s на ≤1279 (index.css), промо «Франшиза» — общий .promo.promo--yellow без подмен.
   ========================================================================== */
:root {
  --home-b2b-tags-width: 1100px;   /* ряд тегов 1100 на 1920 (3 × 3); на 768 / 375 — вся ширина */
  --home-b2b-tags-gap: 16px;       /* между тегами: 16 / 8 / 8 */
}

@media (max-width: 1279px) {
  :root {
    --home-b2b-tags-width: 100%;
    --home-b2b-tags-gap: 8px;
  }
}