/* ==========================================================================
   Компоненты: шапка, подвал, кнопки, чипсы, аккордеон.
   ========================================================================== */

/* ---------- Кнопка (компонент Button, Figma 2309:957) ----------
   Модификатор варианта (цвет) — обязателен: .button--primary/--secondary/--tertiary.
   Модификатор размера — обязателен: .button--s (шапка, 18px) или .button--m (крупные CTA, 20px).
   Состояния: hover/focus-visible встроены в вариант, отдельного класса не требуют. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--height-48);
  overflow: hidden;
  white-space: nowrap;
  transition: background-image var(--transition-fast) ease;
}

.button:focus-visible {
  outline: 2px solid var(--color-text-accent);
  outline-offset: 2px;
}

/* Варианты цвета */
.button--primary {
  background-image: var(--gradient-button-primary);
  color: var(--color-text-primary);
}

.button--primary:hover,
.button--primary:focus-visible {
  background-image: var(--gradient-button-primary-hover);
}

.button--secondary {
  background-image: var(--gradient-button-secondary);
  color: var(--color-button-secondary-text);
}

.button--secondary:hover,
.button--secondary:focus-visible {
  background-image: var(--gradient-button-secondary-hover);
}

.button--tertiary {
  background-image: var(--gradient-button-tertiary);
  color: var(--color-white);
}

.button--tertiary:hover,
.button--tertiary:focus-visible {
  background-image: var(--gradient-button-tertiary-hover);
}

/* Размеры */
.button--s {
  padding: var(--button-padding-s);
  border-radius: var(--button-radius-s);
  font-size: var(--body-18l-size);
  font-weight: var(--body-18l-weight);
  line-height: var(--body-18l-line-height);
  letter-spacing: var(--body-18l-letter-spacing);
}

.button--m {
  padding: var(--button-padding-m);
  border-radius: var(--button-radius-m);
  font-size: var(--h5-size);
  font-weight: var(--h5-weight);
  line-height: var(--h5-line-height);
  letter-spacing: var(--h5-letter-spacing);
}

/* ---------- Шапка (Figma 2483:1679) ---------- */
.header {
  padding: var(--header-offset-top) var(--header-offset-x) 0;
}

.header__bar {
  display: flex;
  align-items: center;
  height: var(--header-height);
  background-color: var(--color-white);
  border-radius: var(--header-radius);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header__logo {
  flex-shrink: 0;
}

.header__nav-list {
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
}

.header__nav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--nav-item-padding);
  border-radius: var(--nav-item-radius);
  white-space: nowrap;
  color: var(--color-text-dark-accent);
  font-size: var(--body-18-size);
  font-weight: var(--body-18-weight);
  line-height: var(--body-18-compact-line-height);
  letter-spacing: var(--body-18-letter-spacing);
}

.header__auth {
  flex-shrink: 0;
  max-width: var(--width-287-97);
}

.header__auth-divider {
  color: var(--color-button-primary-divider);
}

/* ---------- Поле поиска — общее для FAQ и блога (Figma Blog / Search L 3027:1936;
   Hover 3046:15822, Focused 3046:15867) ---------- */
.search {
  display: flex;
  align-items: center;
  gap: var(--search-gap);
  height: var(--search-height);
  padding: var(--search-padding);
  background-color: var(--color-white);
  border: var(--search-border);
  border-radius: var(--search-radius);
  transition: border-color var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}

.search__icon {
  flex-shrink: 0;
  width: var(--search-icon-size);
  height: var(--search-icon-size);
}

.search__input {
  flex: 1 0 0;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  color: var(--search-text);
  font-size: var(--search-font-size);
  font-weight: var(--body-18-weight);
  line-height: var(--search-line-height);
  letter-spacing: 0;
}

.search__input::placeholder {
  color: var(--search-placeholder);
  opacity: 1;
}

/* Свой крестик вместо встроенного у type="search" */
.search__input::-webkit-search-cancel-button,
.search__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* Ховер и фокус: рамка жёлтая #ffd119; отдельного outline нет */
.search:hover,
.search:focus-within {
  border-color: var(--color-brand-300);
}

/* Focused: рамка + свечение 3px; в Hover свечения нет */
.search:focus-within {
  box-shadow: 0 0 0 3px var(--color-focus-glow);
}

/* Кнопка очистки: круг 32, фон #e9ecf0, крестик */
.search__clear {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--search-clear-size);
  height: var(--search-clear-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--color-bg-tertiary);
  cursor: pointer;
}

.search__clear:focus-visible {
  outline: 2px solid var(--color-blog-title);
  outline-offset: 2px;
}

/* Крестик виден, только когда в поле есть текст (место под него сохраняется) */
.search__input:placeholder-shown ~ .search__clear {
  visibility: hidden;
}

/* Строка поиска «Я ищу…» + поле (Blog / Search, ТЗ правок 1, п.7) — блог и FAQ.
   Поле фиксированной ширины (--blog-search-width), на узком экране сжимается. */
.blog-search {
  display: flex;
  align-items: center;
  gap: var(--blog-search-row-gap);
}

/* Подпись: Bold 28 / 125% (как заголовок карточки), клик ставит курсор в поле */
.blog-search__label {
  flex-shrink: 0;
  font-size: var(--blog-card-title-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--blog-card-title-line-height);
  letter-spacing: 0;
  color: var(--color-blog-title);
}

.blog-search .search {
  flex: 0 1 var(--blog-search-width);
  min-width: 0;
  width: var(--blog-search-width);
}

/* ---------- Тег (компонент Teg, Figma 2483:2660): размеры s и l, состояния ----------
   default / hover / active (= Selected в Figma) / focus-visible.
   Hover и focus меняют только фон — текст и иконка остаются как в default (см. компонент). */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--tag-list-gap);
}

/* Модификатор: ряд тегов со скроллом на мобильной (Figma: блог 3011:888, FAQ 3223:1517) — одна строка,
   горизонтальный скролл без полосы. Ряд уходит за правый край контента: родитель снимает правое поле
   (у блога .blog-categories, у FAQ #faq-categories), а сам ряд возвращает его внутренним отступом справа.
   Вертикальный запас 4px — под обводку фокуса (2px + offset 2), иначе overflow её обрежет. */
@media (max-width: 767px) {
  .tag-list--scroll {
    flex-wrap: nowrap;
    padding: 4px var(--mobile-page-margin) 4px 0;
    margin-block: -4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .tag-list--scroll::-webkit-scrollbar {
    display: none;
  }
}

.tag {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--tag-gap);
  border-radius: var(--tag-radius);
  background-color: var(--color-tag-bg);
  color: var(--color-tag-text);
  white-space: nowrap;
  transition: background-color var(--transition-fast) ease;
}

.tag:not(.tag--active):hover {
  background-color: var(--color-tag-bg-hover);
}

.tag--active {
  background-color: var(--color-tag-bg-active);
}

/* В Figma нет отдельного состояния Focus — акцентная обводка по токену --color-text-accent
   (тот же цвет, что и в hover ссылок/кнопок) для видимой фокус-рамки с клавиатуры. */
.tag:focus-visible {
  outline: 2px solid var(--color-text-accent);
  outline-offset: 2px;
}

/* Малый — Body/16/Medium */
.tag--s {
  padding: var(--tag-padding-s);
  font-size: var(--body-16-medium-size);
  font-weight: var(--body-16-medium-weight);
  line-height: var(--body-16-medium-line-height);
  letter-spacing: var(--body-16-medium-letter-spacing);
}

/* Большой — иконка, Body/20 Medium, счётчик Body/18/Regular (line-height 1.2) */
.tag--l {
  padding: var(--tag-padding-l);
  font-size: var(--body-20-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--body-20-line-height);
  letter-spacing: var(--body-20-letter-spacing);
}

/* Иконка: в Figma — маска, окрашенная полупрозрачным цветом текста */
.tag__icon {
  flex-shrink: 0;
  width: var(--tag-icon-size);
  height: var(--tag-icon-size);
  background-color: var(--color-tag-icon);
  -webkit-mask: var(--icon) no-repeat 0 0 / 100% 100%;
  mask: var(--icon) no-repeat 0 0 / 100% 100%;
}

.tag__count {
  color: var(--color-tag-counter);
  font-size: var(--body-18-size);
  font-weight: var(--body-18-weight);
  line-height: var(--body-18-compact-line-height);
  letter-spacing: var(--body-18-letter-spacing);
}

/* ---------- Раздел FAQ: иконка, заголовок, подзаголовок, карточка (Figma 2485:5319) ---------- */
.faq-section {
  display: flex;
  flex-direction: column;
  gap: var(--faq-section-inner-gap);
  /* Отступ для прокрутки по клику на чипс/тег — не из Figma, шапка не зафиксирована */
  scroll-margin-top: var(--scroll-offset-top);
}

.faq-section__head {
  display: flex;
  align-items: flex-start;
  gap: var(--faq-section-head-gap);
}

.faq-section__icon {
  flex-shrink: 0;
  width: var(--faq-section-icon-size);
  height: var(--faq-section-icon-size);
}

.faq-section__heading {
  display: flex;
  flex-direction: column;
  gap: var(--faq-section-heading-gap);
  flex: 1 0 0;
  min-width: 0;
  padding-top: var(--faq-section-heading-offset);
}

.faq-section__title {
  color: var(--color-faq-section-title);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
}

.faq-section__subtitle {
  color: var(--color-faq-section-subtitle);
  font-size: var(--body-20-size);
  font-weight: var(--body-20-weight);
  line-height: var(--body-20-line-height);
  letter-spacing: var(--body-20-letter-spacing);
}

.faq-section__card {
  display: flex;
  flex-direction: column;
  gap: var(--accordion-gap);
  padding: var(--faq-section-card-padding);
  background-color: var(--color-white);
  border-radius: var(--faq-section-card-radius);
}

/* ---------- Аккордеон (компонент FAQ): вопрос + ответ ----------
   Состояние задаёт JS: aria-expanded у кнопки и класс accordion--open у пункта.
   Ответ — любое содержимое: текст, таблица, плашка, список. */
.accordion {
  /* В Figma разделитель внутри высоты пункта: закрытый пункт — 60px = 28 + 32 */
  padding-bottom: calc(var(--accordion-spacing) - var(--accordion-border-width));
  border-bottom: var(--accordion-border-width) solid var(--color-divider);
  /* Отступ для прокрутки по прямой ссылке или клику на «Спрашивают чаще всего» */
  scroll-margin-top: var(--scroll-offset-top);
}

.accordion:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.accordion__button {
  display: flex;
  align-items: center;
  gap: var(--accordion-header-gap);
  width: 100%;
  text-align: left;
  color: var(--color-accordion-title);
  font-size: var(--h2-semibold-size);
  font-weight: var(--h2-semibold-weight);
  line-height: var(--h2-semibold-line-height);
  letter-spacing: var(--h2-semibold-letter-spacing);
}

.accordion__title {
  flex: 1 0 0;
  min-width: 0;
}

/* Стрелка: в Figma — маска ChevronDown; ChevronUp у открытого = поворот на 180° */
.accordion__icon {
  flex-shrink: 0;
  width: var(--accordion-icon-size);
  height: var(--accordion-icon-size);
  background-color: var(--color-accordion-icon);
  -webkit-mask: url("../assets/icons/chevron-down.svg") no-repeat 0 0 / 100% 100%;
  mask: url("../assets/icons/chevron-down.svg") no-repeat 0 0 / 100% 100%;
  transition: transform var(--accordion-duration) ease;
}

.accordion--open .accordion__icon {
  transform: rotate(180deg);
}

/* Плавное раскрытие: строка сетки 0fr → 1fr; закрытый ответ остаётся в DOM
   (виден поисковикам), но скрыт от клавиатуры и скринридеров */
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows var(--accordion-duration) ease,
    visibility 0s linear var(--accordion-duration);
}

.accordion--open .accordion__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows var(--accordion-duration) ease,
    visibility 0s;
}

.accordion__panel-inner {
  min-height: 0;
  overflow: hidden;
}

.accordion__content {
  display: flex;
  flex-direction: column;
  gap: var(--accordion-content-gap);
  /* Вопрос → ответ: --accordion-answer-gap, если задан у страницы; иначе --accordion-spacing (в :root не объявлен,
     чтобы fallback брал --accordion-spacing того же элемента — с подменами .faq и статьи) */
  padding-top: var(--accordion-answer-gap, var(--accordion-spacing));
  padding-right: var(--accordion-content-padding-right);
  color: var(--color-accordion-text);
  font-size: var(--body-20-size);
  font-weight: var(--body-20-weight);
  line-height: var(--body-20-line-height);
  letter-spacing: var(--body-20-letter-spacing);
}

/* У последнего пункта нет разделителя — отступ снизу ответа берёт на себя контент */
.accordion:last-child .accordion__content {
  padding-bottom: var(--accordion-spacing);
}

.accordion__content a {
  color: var(--color-link);
}

/* Жирное начало абзаца: Body/20/Semi Bold, тёмным */
.accordion__content strong {
  color: var(--color-accordion-text-strong);
  font-weight: var(--body-20-semibold-weight);
}

/* Маркированный и нумерованный список в ответе (Figma 2493:6142 «Как защитить свой кошелек?») —
   между пунктами нет отдельного отступа, только межстрочный интервал текста.
   Нумерованный — тот же отступ, для шагов вида «Оплата не проходит» (текст из черновика). */
.accordion__content ul {
  list-style: disc;
  padding-left: var(--accordion-list-indent);
}

.accordion__content ol {
  list-style: decimal;
  padding-left: var(--accordion-list-indent);
}

@media (prefers-reduced-motion: reduce) {
  .accordion__icon,
  .accordion__panel,
  .accordion--open .accordion__panel {
    transition: none;
  }
}

/* ---------- Таблица в ответе: 2 колонки (Figma 2485:5576) ---------- */
.faq-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
}

.faq-table th,
.faq-table td {
  padding: var(--faq-table-row-gap) 0;
  vertical-align: top;
  text-align: left;
  font-weight: inherit;
}

/* В Figma разделитель внутри высоты строки (48px = 32 + 16) */
.faq-table tr:not(:last-child) > * {
  padding-bottom: calc(var(--faq-table-row-gap) - var(--accordion-border-width));
  border-bottom: var(--accordion-border-width) solid var(--color-divider);
}

.faq-table tr:first-child > * {
  padding-top: 0;
}

.faq-table th {
  width: calc(var(--faq-table-key-width) + var(--faq-table-gap));
  padding-right: var(--faq-table-gap);
  color: var(--color-faq-table-key);
}

.faq-table td {
  color: var(--color-faq-table-key);
}

/* Пояснение в значении — серым, как основной текст ответа */
.faq-table__note {
  color: var(--color-accordion-text);
}

/* ---------- Таблицы на подложке (Figma 2485:5589 «Какие комиссии в сервисе?») ----------
   Обёртка .faq-tables — жёлтая подложка, внутри таблицы в ряд. */
.faq-tables {
  display: flex;
  align-items: flex-start;
  gap: var(--faq-tables-gap);
  padding: var(--faq-tables-padding);
  background-color: var(--color-faq-tables-bg);
  border-radius: var(--faq-tables-radius);
}

.faq-tables > .faq-table {
  flex: 1 0 0;
  min-width: 0;
}

/* Модификатор: подпись CAPTION/16, значение справа полужирным,
   у последней строки нижний отступ остаётся (в Figma pb 16 без разделителя) */
.faq-table--values caption {
  padding-bottom: var(--faq-tables-caption-gap);
  text-align: left;
  text-transform: uppercase;
  color: var(--color-faq-table-key);
  font-size: var(--caption-16-size);
  font-weight: var(--caption-16-weight);
  line-height: var(--caption-16-line-height);
  letter-spacing: var(--caption-16-letter-spacing);
}

/* Без переноса: в Figma подложка 931px, у нас 908px (правый отступ карточки = левому),
   и «Перевод другому человеку» иначе уходит на 2 строки. Значения короткие и прижаты
   вправо, поэтому длинное название свободно заходит в колонку значения */
.faq-table--values th {
  width: auto;
  white-space: nowrap;
}

.faq-table--values td {
  width: var(--faq-table-value-width);
  text-align: right;
  font-weight: var(--body-20-semibold-weight);
}

.faq-table--values tr:last-child > * {
  padding-bottom: var(--faq-table-row-gap);
}

/* Модификатор: значение произвольной ширины, прижато вправо (2493:5865 «Для чего нужна карта USD?») —
   в отличие от .faq-table--values, колонка значения не фиксированной ширины */
.faq-table--wide td {
  width: auto;
  white-space: nowrap;
}

/* ---------- Плашка-примечание в ответе (Figma 2493:5911 «Оплата») ---------- */
.faq-note {
  padding: var(--faq-note-padding);
  background-color: var(--color-faq-note-bg);
  border-radius: var(--faq-note-radius);
  color: var(--color-faq-note-text);
  font-size: var(--body-20-size);
  font-weight: var(--body-20-weight);
  line-height: var(--body-20-line-height);
  letter-spacing: var(--body-20-letter-spacing);
}

/* ---------- Блок «Не нашли ответ?» (Figma 2493:6333) ---------- */
.faq-cta {
  padding: var(--faq-cta-offset-top) 0 var(--faq-cta-offset-bottom);
}

.faq-cta__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--faq-cta-padding);
  background-image: var(--gradient-faq-cta-bg);
  border-radius: var(--faq-cta-radius);
}

.faq-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--faq-cta-content-gap);
  width: var(--faq-cta-content-width);
}

.faq-cta__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--faq-cta-text-gap);
  text-align: center;
}

.faq-cta__title {
  color: var(--color-faq-cta-title);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
}

.faq-cta__subtitle {
  color: var(--color-faq-cta-text);
  font-size: var(--body-20-size);
  font-weight: var(--body-20-weight);
  line-height: var(--body-20-line-height);
  letter-spacing: var(--body-20-letter-spacing);
}

.faq-cta__actions {
  display: flex;
  gap: var(--faq-cta-actions-gap);
}

/* ---------- Подвал (Figma 2483:1797, компонент Footer 2) ---------- */
.footer {
  padding: 0 var(--footer-offset-x);
}

.footer__bar {
  display: flex;
  flex-direction: column;
  gap: var(--footer-gap);
  padding: var(--footer-padding-y) 0;
  background-color: var(--color-white);
  border-radius: var(--footer-radius);
}

.footer__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--footer-columns-gap);
}

/* Общая типографика: Body/18/Regular, серый */
.footer__text,
.footer__link,
.footer__bottom {
  color: var(--color-text-secondary);
  font-size: var(--body-18-size);
  font-weight: var(--body-18-weight);
  letter-spacing: var(--body-18-letter-spacing);
}

/* О компании */
.footer__about {
  display: flex;
  flex-direction: column;
  gap: var(--footer-about-gap);
  flex-shrink: 0;
  width: var(--footer-about-width);
}

.footer__about-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--footer-about-text-gap);
}

.footer__text {
  line-height: var(--body-18-line-height);
}

.footer__text + .footer__text {
  margin-top: var(--footer-paragraph-gap);
}

.footer__address {
  width: var(--footer-address-width);
  font-style: normal;
}

.footer__social {
  display: flex;
  align-items: center;
  gap: var(--footer-social-gap);
}

.footer__social-link {
  display: block;
  width: var(--footer-social-size);
  height: var(--footer-social-size);
}

/* Колонки ссылок */
.footer__nav {
  display: flex;
  align-items: flex-start;
  gap: var(--footer-nav-gap);
  flex: 1 0 0;
  min-width: 0;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--footer-col-gap);
  flex-shrink: 0;
}

.footer__col--contacts {
  width: var(--footer-contacts-width);
}

.footer__col--official {
  flex: 1 0 0;
  min-width: 0;
}

.footer__title {
  color: var(--color-black);
  font-size: var(--body-18-semibold-size);
  font-weight: var(--body-18-semibold-weight);
  line-height: var(--body-18-semibold-line-height);
  letter-spacing: var(--body-18-semibold-letter-spacing);
}

.footer__groups {
  display: flex;
  flex-direction: column;
  gap: var(--footer-group-gap);
}

.footer__group {
  display: flex;
  flex-direction: column;
  gap: var(--footer-list-gap);
}

.footer__subtitle {
  color: var(--color-black);
  font-size: var(--body-18-medium-size);
  font-weight: var(--body-18-medium-weight);
  line-height: var(--body-18-medium-line-height);
  letter-spacing: var(--body-18-medium-letter-spacing);
}

.footer__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--footer-list-gap);
}

.footer__link {
  display: flex;
  align-items: center;
  gap: var(--footer-link-icon-gap);
  line-height: var(--body-18-compact-line-height);
  transition: color var(--transition-fast) ease;
}

/* Hover/focus — компонент Link, состояние Hover (Figma 2613:2061) */
.footer__link:hover,
.footer__link:focus-visible {
  color: var(--color-text-accent);
}

/* Иконка у ссылки: в Figma — маска, окрашенная Icons/Secondary (Hover — Icons/Accent) */
.footer__link-icon {
  flex-shrink: 0;
  width: var(--footer-link-icon-size);
  height: var(--footer-link-icon-size);
  background-color: var(--color-icon-secondary);
  -webkit-mask: var(--icon) no-repeat 0 0 / 100% 100%;
  mask: var(--icon) no-repeat 0 0 / 100% 100%;
  transition: background-color var(--transition-fast) ease;
}

.footer__link:hover .footer__link-icon,
.footer__link:focus-visible .footer__link-icon {
  background-color: var(--color-text-accent);
}

.footer__link-icon--telegram {
  --icon: url("../assets/icons/telegram.svg");
}

.footer__link-icon--mail {
  --icon: url("../assets/icons/mail.svg");
}

/* Нижняя строка */
.footer__bottom {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  line-height: var(--body-18-line-height);
}

.footer__license {
  white-space: pre;
}

/* ---------- Обложка записи (Blog / Hero → Обложка, Cover 3015:1094) ----------
   Общая для Hero, карточек ленты и статьи (перенесено из blog.css в задаче 8): размер задаёт контейнер, не сама картинка. */
.blog-cover {
  position: relative;
  flex-shrink: 0;
  width: var(--blog-hero-cover-width);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--blog-cover-radius);
}

.blog-cover .blog-cover__media {
  position: absolute;
  inset: 0;
  transition: transform var(--blog-cover-hover-duration) ease-out;
}

/* Прод: <img> 2400×1350 WebP, вписывается в 16:9 без правок CSS (для 2:1 и 1:1 — свой aspect-ratio у контейнера) */
.blog-cover__img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

/* Заглушка: квадратная иллюстрация 1350×1350 по центру цветного фона (.cover--<slug>).
   В проде этот класс убирается. */
.blog-cover__img--placeholder {
  object-fit: contain;
}

/* ---------- Плейсхолдеры обложек (Cover 3015:1094) ----------
   Цвет фона рубрики; иллюстрация — в центре, квадрат по высоте обложки. */
.cover {
  position: relative;
  overflow: hidden;
  background-color: var(--color-cover-replenish);
}

.cover__illustration {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  aspect-ratio: 1;
  max-width: none;
  transform: translate(-50%, -50%);
}

.cover--replenish { background-color: var(--color-cover-replenish); }
.cover--cards-qr  { background-color: var(--color-cover-cards-qr); }
.cover--usdt      { background-color: var(--color-cover-usdt); }
.cover--foreign   { background-color: var(--color-cover-foreign); }
.cover--security  { background-color: var(--color-cover-security); }
.cover--guides    { background-color: var(--color-cover-guides); }
.cover--news      { background-color: var(--color-cover-news); }
.cover--business  { background-color: var(--color-cover-business); }
.cover--digest    { background-color: var(--color-cover-digest); }

/* ---------- Кнопка-ссылка (Blog / Pill button 3028:2203, вариант Pill) ----------
   <a class="btn-link btn-link--white|yellow|dark|accent">. Модификатор цвета обязателен.
   White — как в Figma (белая, рамка #e9ecf0, текст #2d2e30); остальные цвета дорисованы по палитре макета.
   Hover/focus-visible — по образцу .button: смена заливки, фокус — обводка --color-text-accent. */
.btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-link-height);
  padding: var(--btn-link-padding);
  border: 1px solid transparent;
  border-radius: var(--tag-radius);
  font-size: var(--btn-link-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--btn-link-line-height);
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--transition-fast) ease, border-color var(--transition-fast) ease, filter var(--transition-fast) ease;
}

.btn-link:focus-visible {
  outline: 2px solid var(--color-text-accent);
  outline-offset: 2px;
}

/* Круглая кнопка (TG, VK в «Поделиться»): ширина = высота */
.btn-link--circle {
  width: var(--btn-link-height);
  padding: 0;
}

.btn-link--white {
  background-color: var(--color-white);
  border-color: var(--color-bg-tertiary);
  color: var(--color-blog-title);
}

.btn-link--white:hover,
.btn-link--white:focus-visible {
  background-color: var(--color-tag-bg-hover);
}

.btn-link--yellow {
  background-color: var(--color-brand-300);
  border-color: var(--color-brand-300);
  color: var(--color-blog-title);
}

.btn-link--yellow:hover,
.btn-link--yellow:focus-visible {
  filter: brightness(1.06);
}

.btn-link--dark {
  background-color: var(--color-blog-title);
  border-color: var(--color-blog-title);
  color: var(--color-white);
}

.btn-link--dark:hover,
.btn-link--dark:focus-visible {
  background-color: var(--color-black);
  border-color: var(--color-black);
}

/* Акцент #d69500: тёмный текст (белый даёт контраст < 3) */
.btn-link--accent {
  background-color: var(--color-text-accent);
  border-color: var(--color-text-accent);
  color: var(--color-blog-title);
}

.btn-link--accent:hover,
.btn-link--accent:focus-visible {
  filter: brightness(1.1);
}

/* ==========================================================================
   Карточка записи блога и тег на обложке — общие для ленты (blog.html) и «Читайте также» (blog-post.html).
   Перенесено из css/pages/blog.css в задаче 12 без изменений значений.
   ========================================================================== */
/* Meta (Hero и карточка): Inter Regular 16, line-height normal (19px), без letter-spacing */
.blog-hero__meta,
.blog-card__meta {
  display: flex;
  align-items: center;
  gap: var(--blog-meta-gap);
  font-size: var(--blog-meta-size);
  line-height: var(--blog-meta-line-height);
  color: var(--color-blog-meta);
  white-space: nowrap;
}

/* Тег рубрики на обложке (ТЗ правок 1, п.5): белый, слева сверху 16/16, ссылка на рубрику.
   Лежит поверх растянутой ссылки карточки (z-index выше её ::after), поэтому клик по нему
   открывает рубрику, по остальной карточке — статью. Сиблинг .blog-cover__media — не масштабируется при ховере.
   Ховера в ТЗ нет; только видимый :focus-visible. */
.cover-tag {
  position: absolute;
  z-index: 2; /* выше растянутой ссылки карточки (::after, z-index 1) */
  top: var(--cover-tag-offset);
  left: var(--cover-tag-offset);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cover-tag-padding);
  border-radius: var(--tag-radius);
  background-color: var(--color-white);
  color: var(--color-blog-title);
  font-size: var(--cover-tag-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--cover-tag-line-height);
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
}

.cover-tag:focus-visible {
  outline: 2px solid var(--color-blog-title);
  outline-offset: 2px;
}

/* Ховер/фокус карточек (ТЗ правок 1, п.2): Hero, карточки сетки, позже «Читайте также».
   Масштабируется слой .blog-cover__media (фон-заглушка + img), а не сам img, как в ТЗ — осознанное
   отличие: у заглушки фон задан на слое. Контейнер .blog-cover с overflow hidden обрезает увеличение.
   Тег .cover-tag — сиблинг слоя, при ховере не масштабируется.
   Фокус: единая тёмная обводка на карточке по :has(:focus-visible) (не :focus-within — клик мышью
   обводки не оставляет). Outline рисуется снаружи, overflow hidden карточки его не обрезает.
   У Hero обводка на обложке (радиус 24 от неё же): на всей карточке она бы упиралась в текст у скруглённых углов. */
.blog-hero__card:has(:focus-visible) .blog-cover,
.blog-card:has(:focus-visible) {
  outline: 2px solid var(--color-blog-title);
  outline-offset: 4px;
}
/* ---------- Blog / Card (3027:1150): обложка 16:9 + текст 257, белая, radius 24 ---------- */
.blog-card {
  position: relative; /* для растянутой ссылки */
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--blog-card-radius);
  background-color: var(--color-white);
}

.blog-card .blog-cover {
  width: 100%;
  height: var(--blog-card-cover-height);
  aspect-ratio: auto;
  border-radius: 0; /* скругление даёт сама карточка */
}

.blog-card__text {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--blog-card-text-gap);
  height: var(--blog-card-text-height);
  padding: var(--blog-card-text-padding);
  overflow: hidden;
}

/* общие стили меты — в правиле «.blog-hero__meta, .blog-card__meta» выше; здесь только отличие */
.blog-card__meta {
  flex-shrink: 0;
}

/* Blog / Article title 28: Bold 28 / 1.25, без letter-spacing; Hover — #D69500 на всю карточку */
.blog-card__title {
  display: -webkit-box;
  flex-shrink: 0;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--blog-card-title-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--blog-card-title-line-height);
  letter-spacing: 0;
  color: var(--color-blog-title);
  overflow-wrap: break-word;
  transition: color var(--transition-fast) ease;
}

.blog-card__link::after {
  content: "";
  position: absolute;
  z-index: 1; /* выше обложки и анонса; тег .cover-tag — z-index 2 */
  inset: 0;
}

.blog-card__link:focus-visible {
  outline: none;
}


/* Анонс (3027:1102): занимает остаток высоты, нижний край уходит в прозрачность маской */
.blog-card__lead {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  font-size: var(--blog-card-lead-size);
  line-height: var(--blog-card-lead-line-height);
  color: var(--color-blog-text);
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
  mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

/* Hover (3035:2182): заголовок #D69500, обложка +3% (Cover inset -1.5%/-1.65%) */
.blog-card:hover .blog-card__title {
  color: var(--color-blog-card-hover-title);
}

.blog-card:hover .blog-cover .blog-cover__media {
  transform: scale(var(--blog-cover-hover-scale));
}

/* ==========================================================================
   Шапка и подвал — планшет 768 (Figma Header / Adaptive 3027:2193, Footer / Adaptive 3027:2299).
   Бургер вне планшета скрыт. Меню по бургеру в Figma не нарисовано — дорисовано:
   белая карточка под баром, пункты колонкой (docs/open-questions.md).
   ========================================================================== */
.header__burger {
  display: none;
}

/* «Вход / Регистрация» внутри меню — только на мобильной (в баре на 375 кнопки нет), см. блок «Мобильная 375» ниже */
.header__nav-auth {
  display: none;
}

/* Бургер и меню — планшет и мобильная (до 1279) */
@media (max-width: 1279px) {
  .header {
    position: relative;
    padding-bottom: var(--header-offset-top); /* Figma: 12 сверху и снизу, высота 96 */
  }

  .header__bar {
    padding: var(--tablet-header-padding);
    border-radius: var(--header-radius);
  }

  .header__inner {
    max-width: none;
  }

  .header__logo img {
    width: auto;
    height: var(--tablet-header-logo-height);
  }

  .header__auth {
    margin-left: auto;
    margin-right: var(--tablet-header-actions-gap);
  }

  .header__burger {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--tablet-burger-size);
    height: var(--tablet-burger-size);
    padding: 0;
    border: 0;
    border-radius: var(--tablet-burger-radius);
    background-color: var(--color-bg-secondary);
    cursor: pointer;
    transition: background-color var(--transition-fast) ease;
  }

  .header__burger:hover {
    background-color: var(--color-bg-tertiary);
  }

  .header__burger:focus-visible {
    outline: 2px solid var(--color-text-accent);
    outline-offset: 2px;
  }

  /* Меню скрыто, пока бургер не нажат */
  .header__nav {
    display: none;
  }

  .header--menu-open .header__nav {
    position: absolute;
    z-index: 10;
    top: calc(100% + 8px);
    right: var(--header-offset-x);
    left: var(--header-offset-x);
    display: block;
    padding: 12px;
    border-radius: var(--header-radius);
    background-color: var(--color-white);
  }

  .header--menu-open .header__nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .header--menu-open .header__nav-link {
    justify-content: flex-start;
  }

}

/* Подвал на планшете */
@media (min-width: 768px) and (max-width: 1279px) {
  /* Карточка 24, колонки в ряд, описание 15 */
  .footer {
    padding: 20px var(--footer-offset-x);
  }

  .footer__bar {
    gap: var(--tablet-footer-gap);
    padding: var(--tablet-footer-padding);
    border-radius: var(--tablet-footer-radius);
  }

  .footer__inner {
    flex-direction: column;
    gap: var(--tablet-footer-gap);
  }

  .footer__about {
    gap: var(--tablet-footer-about-gap);
    width: auto;
  }

  .footer__about-text {
    gap: var(--tablet-footer-about-gap);
  }

  .footer__about-text img {
    width: auto;
    height: var(--tablet-header-logo-height);
  }

  .footer__about-text > div {
    display: flex;
    flex-direction: column;
    gap: var(--tablet-footer-about-gap);
  }

  .footer__about .footer__text {
    margin-top: 0;
    font-size: var(--tablet-footer-text-size);
    line-height: var(--tablet-footer-text-line-height);
    letter-spacing: 0;
  }

  .footer__address {
    width: auto;
  }

  .footer__nav {
    flex: none;
    width: 100%;
    gap: var(--tablet-footer-nav-gap);
  }

  /* В Figma длинные ссылки обрезаются рамкой колонки — у нас переносятся */
  .footer__link {
    overflow-wrap: anywhere;
  }

  .footer__bottom {
    padding-top: 20px;
    border-top: 1px solid var(--color-bg-tertiary);
    font-size: var(--tablet-footer-bottom-size);
    line-height: normal;
    letter-spacing: 0;
  }
}

/* Мета карточки записи на планшете: 14 (у Hero ленты остаётся 16) — Figma 3011:651, 3027:1856 */
@media (min-width: 768px) and (max-width: 1279px) {
  .blog-card__meta {
    font-size: var(--tablet-card-meta-size);
    line-height: var(--tablet-card-meta-line-height);
  }
}

/* ==========================================================================
   Мобильная 375 (Figma: Header / Adaptive 3027:2223, Footer / Adaptive 3027:2674).
   Значения — токены --mobile-* (css/tokens.css); совпадающие с планшетом (радиус подвала 24, текст 15/23,
   gap 16, подпись 14) берутся из --tablet-footer-*. Бургер и меню — общие с планшетом (блок выше).
   ========================================================================== */
@media (max-width: 767px) {
  /* Шапка: бар 56, padding 12, логотип 179×25; кнопки «Вход / Регистрация» в баре нет — она в меню */
  .header__bar {
    padding: var(--mobile-header-padding);
  }

  .header__logo img {
    height: var(--mobile-header-logo-height);
  }

  .header__auth {
    display: none;
  }

  .header--menu-open .header__nav-auth {
    display: block;
    margin-top: var(--mobile-menu-auth-gap);
  }

  .header__nav-auth .button {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: none;
  }

  /* Подвал: карточка 24, всё в одну колонку, колонки ссылок друг под другом */
  .footer {
    padding: var(--footer-offset-x);
  }

  .footer__bar {
    gap: var(--mobile-footer-gap);
    padding: var(--mobile-footer-padding);
    border-radius: var(--tablet-footer-radius);
  }

  .footer__inner {
    flex-direction: column;
    gap: var(--mobile-footer-gap);
  }

  .footer__about {
    gap: var(--tablet-footer-about-gap);
    width: auto;
  }

  .footer__about-text {
    gap: var(--tablet-footer-about-gap);
  }

  .footer__about-text img {
    width: auto;
    height: var(--mobile-footer-logo-height);
  }

  .footer__about-text > div {
    display: flex;
    flex-direction: column;
    gap: var(--tablet-footer-about-gap);
  }

  .footer__about .footer__text {
    margin-top: 0;
    font-size: var(--tablet-footer-text-size);
    line-height: var(--tablet-footer-text-line-height);
    letter-spacing: 0;
  }

  .footer__address {
    width: auto;
  }

  .footer__nav {
    flex: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: var(--mobile-footer-nav-gap);
  }

  .footer__col--contacts {
    width: auto;
  }

  .footer__col--official {
    flex: none;
  }

  /* В Figma длинные ссылки обрезаются рамкой колонки — у нас переносятся */
  .footer__link {
    overflow-wrap: anywhere;
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--mobile-footer-bottom-gap);
    padding-top: 20px;
    border-top: 1px solid var(--color-bg-tertiary);
    font-size: var(--tablet-footer-bottom-size);
    line-height: normal;
    letter-spacing: 0;
  }

  /* Лицензия переносится на две строки (Figma 3027:2349: 319×34); на десктопе — одна строка с двойным пробелом (pre) */
  .footer__license {
    white-space: normal;
  }
}

/* ==========================================================================
   Панели (Figma: «Международная карта» 2311:1322 / 3228:2795 / 3230:3314; правила 3230:13560).
   main.panels — колонка панелей с отступом от шапки --page-offset-top; section.panel — белая карточка
   с полями, внутри .container (1280 / 688 / 327). Значения — токены --panel-* (css/tokens.css), адаптив — подменой токенов.
   Общие для card.html и будущей главной.
   ========================================================================== */
.panels {
  display: flex;
  flex-direction: column;
  gap: var(--panel-gap);
  /* Снизу — тот же промежуток, что между панелями: до подвала 24 / 12 / 8 (+ поле подвала 0 / 20 / 8 = 24 / 32 / 16, Figma) */
  padding: var(--page-offset-top) var(--panel-offset-x) var(--panel-gap);
}

.panel {
  padding: var(--panel-padding-y) var(--panel-padding-x);
  background-color: var(--color-white);
  border-radius: var(--panel-radius);
}

/* Секция без белой панели (на сером фоне страницы): те же боковые поля, сверху — --panel-bare-padding-top
   (96 / 64 / 24), снизу — как у панели. «Вопросы и ответы» карты (2438:11409). */
.panel--bare {
  padding-top: var(--panel-bare-padding-top);
  background-color: transparent;
}

/* ==========================================================================
   Строка курсов — бегущая строка под первым экраном (компонент «Главная / Курс», Figma 3104:818 / 3155:8279;
   на карте 3212:11921 / 3228:2813 / 3230:3328). Во всю ширину экрана, без панели: внутри main.panels
   отрицательные поля на --panel-offset-x. Трек — два одинаковых списка (второй aria-hidden), сдвиг на −50%
   даёт бесшовный цикл; у каждого списка справа поле = промежутку. Пауза при наведении и фокусе.
   js/rates.js дополняет первый список копиями пунктов (aria-hidden, data-rates-clone), пока половина трека
   не станет шире экрана, и ставит --rates-duration = ширина половины / --rates-speed (скорость постоянная).
   prefers-reduced-motion — без анимации, первый список листается горизонтально, копии скрыты.
   Размеры Size=M / Size=S — подменой токенов --rate-* (css/tokens.css).
   ========================================================================== */
.rates {
  margin-inline: calc(-1 * var(--panel-offset-x));
  overflow: hidden;
}

.rates__track {
  display: flex;
  width: max-content;
  animation: rates-marquee var(--rates-duration) linear infinite;
}

.rates:hover .rates__track,
.rates:focus-within .rates__track {
  animation-play-state: paused;
}

.rates__list {
  display: flex;
  gap: var(--rates-gap);
  padding-right: var(--rates-gap);
}

@keyframes rates-marquee {
  to {
    transform: translateX(-50%);
  }
}

.rate {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--rate-gap);
  padding: var(--rate-padding);
  border-radius: var(--rate-radius);
  background-color: var(--color-white);
  color: var(--color-rate-text);
  white-space: nowrap;
}

/* Значок: белый, mask-image на локальный .svg (assets/icons/rates/); размер — по Figma: $ и ₽ 22, карта 22×18, остальные 24 */
.rate__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--rate-icon-size);
  height: var(--rate-icon-size);
  border-radius: 50%;
  background-image: var(--rate-icon-bg);
}

.rate__icon::before {
  content: "";
  width: var(--rate-glyph-width, 24px);
  height: var(--rate-glyph-height, 24px);
  background-color: var(--color-white);
  -webkit-mask: var(--rate-glyph) center / contain no-repeat;
  mask: var(--rate-glyph) center / contain no-repeat;
}

.rate__icon--usd { --rate-glyph: url("../assets/icons/rates/currency-usd.svg"); --rate-glyph-width: 22px; --rate-glyph-height: 22px; }
.rate__icon--rub { --rate-glyph: url("../assets/icons/rates/currency-rub.svg"); --rate-glyph-width: 22px; --rate-glyph-height: 22px; }
.rate__icon--in { --rate-glyph: url("../assets/icons/rates/arrow-down.svg"); }
.rate__icon--out { --rate-glyph: url("../assets/icons/rates/arrow-up.svg"); }
.rate__icon--qr { --rate-glyph: url("../assets/icons/rates/qr.svg"); }
.rate__icon--card { --rate-glyph: url("../assets/icons/rates/card.svg"); --rate-glyph-width: 22px; --rate-glyph-height: 18px; }

.rate__text {
  display: flex;
  flex-direction: column;
  gap: var(--rate-text-gap);
}

.rate__value {
  font-size: var(--rate-value-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--rate-value-line-height);
  letter-spacing: var(--letter-spacing-tight);
}

.rate__label {
  display: flex;
  align-items: center;
  gap: var(--rate-marker-gap);
  font-size: var(--rate-label-size);
  line-height: var(--rate-label-line-height);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-rate-label);
  /* «->» — стрелка через лигатуру Inter (calt), как в Figma; при letter-spacing браузер её отключает без явного включения */
  font-feature-settings: "calt" 1;
}

.rate__label::before {
  content: "";
  flex-shrink: 0;
  width: var(--rate-marker-size);
  height: var(--rate-marker-size);
  border-radius: 50%;
  background-color: var(--color-brand-300);
}

@media (prefers-reduced-motion: reduce) {
  .rates {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .rates::-webkit-scrollbar {
    display: none;
  }

  .rates__track {
    animation: none;
  }

  .rates__list[aria-hidden="true"],
  .rates [data-rates-clone] {
    display: none;
  }
}

/* ==========================================================================
   Промо-блок .promo — цветной блок: текст слева, картинка справа (Figma: «Пополняйте рублями» 2425:9966 /
   3228:2852 / 3230:3366; та же схема — «Франшиза» главной 3147:9787 и «Два клика» карты 2558:1922).
   Модификатор цвета обязателен: .promo--gray или .promo--yellow. Картинка по умолчанию — телефон
   в колонке справа с отступом сверху, низ срезан краем блока; высоту блока задаёт колонка текста.
   1920: колонки поровну через 40; 768: текст + колонка 240 через 24, высота не меньше 428;
   ≤767: столбиком — текст, под ним окно 300 с телефоном по центру. Значения — токены --promo-* (tokens.css).
   .promo--media-free — картинка ставится от блока (--promo-image-top/-right/-bottom/-left), может выходить за
   колонку; что выходит за блок — срезается.
   ========================================================================== */
.promo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--promo-gap);
  min-height: var(--promo-min-height);
  padding-inline: var(--promo-padding-x);
  overflow: hidden;
  border-radius: var(--promo-radius);
  letter-spacing: var(--letter-spacing-tight);
}

.promo--gray {
  --color-promo-title: var(--color-promo-gray-title);
  --color-promo-text: var(--color-promo-gray-text);
  background-color: var(--color-promo-gray);
}

.promo--yellow {
  --color-promo-title: var(--color-promo-yellow-title);
  --color-promo-text: var(--color-promo-yellow-text);
  background-image: linear-gradient(var(--promo-yellow-angle), var(--color-promo-yellow-from) 18.57%, var(--color-promo-yellow-to) 75.629%);
}

.promo__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--promo-title-gap);
  padding: var(--promo-body-padding);
}

.promo__title {
  font-size: var(--promo-title-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--promo-title-line-height);
  color: var(--color-promo-title);
}

.promo__text {
  font-size: var(--promo-text-size);
  line-height: var(--promo-text-line-height);
  color: var(--color-promo-text);
}

/* Кнопка после текста: отступ --promo-action-gap (по умолчанию = --promo-title-gap) */
.promo__body > .button {
  margin-top: calc(var(--promo-action-gap) - var(--promo-title-gap));
}

/* Колонка картинки не растягивает блок: телефон абсолютный, прижат вправо, срезается краем блока */
.promo__media {
  position: relative;
  width: var(--promo-media-width);
  height: var(--promo-media-height);
}

.promo__image {
  position: absolute;
  top: var(--promo-media-offset);
  right: 0;
  width: var(--promo-image-width);
  max-width: none;
  height: auto;
}

/* Картинка от блока: колонка остаётся в сетке (держит ширину/окно), картинка позиционируется относительно .promo */
.promo--media-free {
  position: relative;
}

.promo--media-free .promo__media {
  position: static;
}

.promo--media-free .promo__image {
  top: var(--promo-image-top);
  right: var(--promo-image-right);
  bottom: var(--promo-image-bottom);
  left: var(--promo-image-left);
  transform: none; /* ≤767 у телефона по умолчанию центровка через translate — здесь положение задают токены */
}

@media (min-width: 768px) and (max-width: 1279px) {
  .promo {
    grid-template-columns: 1fr var(--promo-media-width);
  }

  /* Плашка в промо на 768 и 375 — 16 / 1.2 */
  .promo .plate {
    --plate-font-size: 16px;
    --plate-line-height: 19px;         /* 16 × 1.2 = 19.2 */
  }
}

@media (max-width: 767px) {
  .promo {
    grid-template-columns: 1fr;
  }

  .promo__image {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  .promo .plate {
    --plate-font-size: 16px;
    --plate-line-height: 19px;
  }
}

/* Кнопка промо на всю ширину на ≤767 (Франшиза главной 3157:1222): модификатор на .button внутри .promo__body.
   Без модификатора кнопка по ширине текста на всех ширинах (card.html — «Выпустить карту»). */
@media (max-width: 767px) {
  .promo__body > .promo__action--full {
    align-self: stretch;
  }
}

/* ==========================================================================
   Плашка .plate — заголовок Semi Bold + текст Regular, Body/18 / 1.2 (Figma: «Лимиты» 2428:10328 — по умолчанию,
   фон #fff2c8; «Пополняйте с запасом» 3231:14213 — .plate--light, белый градиент на цветном фоне).
   Разметка: div.plate > p.plate__title + p.plate__text. Значения — токены --plate-* (tokens.css).
   ========================================================================== */
.plate {
  display: flex;
  flex-direction: column;
  gap: var(--plate-gap);
  width: 100%;
  padding: var(--plate-padding);
  border-radius: var(--plate-radius);
  background-color: var(--color-plate-bg);
  color: var(--color-plate-text);
  font-size: var(--plate-font-size);
  line-height: var(--plate-line-height);
  letter-spacing: var(--letter-spacing-tight);
}

.plate--light {
  --color-plate-text: var(--color-plate-light-text);
  background: linear-gradient(var(--plate-light-angle), rgba(255, 255, 255, 0.7) 26.155%, rgba(255, 241, 204, 0) 335.6%);
}

.plate__title {
  font-weight: var(--font-weight-semibold);
}

/* ==========================================================================
   Карусель .carousel (js/carousel.js; Figma «ТОП-5» карты 2428:10332 / 3228:2874 / 3230:3387).
   Основа — нативная прокрутка ленты со scroll-snap: свайп и трекпад работают без JS.
   JS считает позиции (карточек − видимых + 1), строит точки, включает стрелки; если позиция одна —
   стрелки и точки скрыты. На краях стрелка неактивна (aria-disabled, opacity 0.4 — вид дорисован).
   Стрелки — только ≥1280, снаружи ряда на --carousel-arrow-gap; если места до края панели не хватает,
   страница уменьшает зазор и сужает ряд через --carousel-inset (см. css/pages/card.css) — стрелки не ложатся на карточки.
   Разметка: div.carousel[data-carousel][role=region] > .carousel__viewport >
   (button.carousel__arrow--prev, ul.carousel__track > li.carousel__item, button.carousel__arrow--next) + div.carousel__dots.
   ========================================================================== */
.carousel__viewport {
  position: relative;
  margin-inline: var(--carousel-inset, 0px); /* сужение ряда, когда стрелкам не хватает места снаружи (задаёт страница) */
}

.carousel__track {
  position: relative;
  display: flex;
  gap: var(--carousel-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

.carousel__track:focus-visible {
  outline: 2px solid var(--color-text-accent);
  outline-offset: 4px;
}

.carousel__item {
  flex: 0 0 var(--carousel-item-width);
  scroll-snap-align: start;
}

/* Стрелка — «Nav arrows» (Figma 3297:3937): круг — фон кнопки, шеврон 24 — mask-image (assets/icons/chevron-*.svg) */
.carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  width: var(--carousel-arrow-size);
  height: var(--carousel-arrow-size);
  border-radius: 50%;
  background-color: var(--color-carousel-arrow-bg);
  transform: translateY(-50%);
  transition: opacity var(--transition-fast) ease;
}

.carousel__arrow::before {
  content: "";
  position: absolute;
  top: var(--carousel-arrow-icon-top);
  left: var(--carousel-arrow-icon-x);
  width: var(--carousel-arrow-icon-size);
  height: var(--carousel-arrow-icon-size);
  background-color: var(--color-carousel-arrow-icon);
  -webkit-mask: var(--carousel-arrow-icon) center / contain no-repeat;
  mask: var(--carousel-arrow-icon) center / contain no-repeat;
}

/* Снаружи ряда на --carousel-arrow-gap */
.carousel__arrow--prev {
  left: calc(-1 * (var(--carousel-arrow-size) + var(--carousel-arrow-gap)));
  --carousel-arrow-icon: url("../assets/icons/chevron-left.svg");
  --carousel-arrow-icon-x: var(--carousel-arrow-icon-prev-x);
}

.carousel__arrow--next {
  right: calc(-1 * (var(--carousel-arrow-size) + var(--carousel-arrow-gap)));
  --carousel-arrow-icon: url("../assets/icons/chevron-right.svg");
  --carousel-arrow-icon-x: var(--carousel-arrow-icon-next-x);
}

.carousel__arrow[aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
}

.carousel__arrow:focus-visible,
.carousel__dot:focus-visible {
  outline: 2px solid var(--color-text-accent);
  outline-offset: 2px;
}

.carousel__arrow[hidden],
.carousel__dots[hidden] {
  display: none;
}

.carousel__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--carousel-dots-gap);
  margin-top: var(--carousel-dots-offset);
}

.carousel__dot {
  width: var(--carousel-dot-size);
  height: var(--carousel-dot-size);
  border-radius: calc(var(--carousel-dot-size) / 2);
  background-color: var(--color-carousel-dot);
  transition: width var(--transition-fast) ease, background-color var(--transition-fast) ease;
}

.carousel__dot[aria-current="true"] {
  width: var(--carousel-dot-active-width);
  background-color: var(--color-carousel-dot-active);
}

@media (max-width: 1279px) {
  .carousel__arrow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__dot,
  .carousel__arrow {
    transition: none;
  }
}

/* ==========================================================================
   Карточка .feature-card — Block M (набор 2381:2345). Текст по центру, картинка в нижней области,
   выходит за неё и обрезается карточкой. Цвет — модификатор (обязателен): --light / --yellow / --slate.
   Разметка: article.feature-card > h3.feature-card__title + p.feature-card__text +
   div.feature-card__pic > div.feature-card__frame > img. Рамка — квадрат --feature-card-pic-size (271 / 240 / 210)
   по центру, прижата к низу карточки, одна для всех карточек. Картинка — компонент «Pic / N» (526×526) в WebP
   с запасом 64 слева, справа и сверху (рисунок выходит за квадрат): файл 654×590 в масштабе 526,
   поэтому img шире рамки на 654/526 и сдвинут на 64/526 влево и вверх.
   ========================================================================== */
.feature-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--feature-card-gap);
  height: var(--feature-card-height);
  padding: var(--feature-card-padding);
  overflow: hidden;
  border-radius: var(--feature-card-radius);
  color: var(--color-feature-card-text);
  text-align: center;
  letter-spacing: var(--letter-spacing-tight);
  isolation: isolate;
}

.feature-card--light { background-color: var(--color-feature-card-light); }
.feature-card--slate { background-color: var(--color-feature-card-slate); }

.feature-card--yellow {
  --color-feature-card-text: var(--color-feature-card-yellow-text);
  background-color: var(--color-feature-card-yellow);
}

.feature-card__title,
.feature-card__text {
  position: relative;
  z-index: 2;
}

.feature-card__title {
  font-size: var(--feature-card-title-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--feature-card-title-line-height);
}

.feature-card__text {
  font-size: var(--feature-card-text-size);
  line-height: var(--feature-card-text-line-height);
}

.feature-card__pic {
  position: absolute;
  inset: var(--feature-card-pic-top) 0 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
}

.feature-card__frame {
  position: relative;
  flex-shrink: 0;
  width: var(--feature-card-pic-size);
  height: var(--feature-card-pic-size);
}

.feature-card__frame img {
  position: absolute;
  top: calc(-64 / 526 * 100%);
  left: calc(-64 / 526 * 100%);
  width: calc(654 / 526 * 100%);
  max-width: none;
  height: auto;
}

/* Десктоп 1280–1455: ряд карусели сужен под стрелки (--carousel-inset), карточка уже 410.7 — заголовок уходит
   в 3 строки и наезжает на картинку. Картинку уменьшаем по ширине карточки (решение Asya 06.10, в Figma таких
   ширин нет): карточка уже 406 — 234, уже 396 — 208 (в запросах — ширина без полей 48 + 48: 310 / 300);
   зазор текст → картинка ≥ 6, как в Figma на 1920. */
@media (min-width: 1280px) {
  .feature-card {
    container-type: inline-size;
  }

  @container (max-width: 310px) {
    .feature-card__frame {
      width: var(--feature-card-pic-size-narrow);
      height: var(--feature-card-pic-size-narrow);
    }
  }

  @container (max-width: 300px) {
    .feature-card__frame {
      width: var(--feature-card-pic-size-narrower);
      height: var(--feature-card-pic-size-narrower);
    }
  }
}

/* ==========================================================================
   Появление контента (js/reveal.js; токены --reveal-*). Правила разметки — docs/components.md.
   Прячем только при работающем JS (.reveal-js на <html> ставит inline-строка в <head>) и только на экране
   без prefers-reduced-motion. Показанное состояние — .is-revealed на блоке / контейнере; .reveal-done снимает
   переходы появления, чтобы собственные переходы компонентов (hover и т. п.) работали как раньше.
   ========================================================================== */
@media screen and (prefers-reduced-motion: no-preference) {
  .reveal-js [data-reveal]:not([data-reveal="load"]):not(.is-revealed),
  .reveal-js [data-reveal-stagger]:not(.is-revealed) > * {
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance), 0);
  }

  .reveal-js [data-reveal-stagger="fade"]:not(.is-revealed) > * {
    transform: none;
  }

  .reveal-js [data-reveal].is-revealed:not(.reveal-done),
  .reveal-js [data-reveal-stagger].is-revealed:not(.reveal-done) > * {
    transition:
      opacity var(--reveal-duration) var(--reveal-easing),
      transform var(--reveal-duration) var(--reveal-easing);
    transition-delay: calc(var(--reveal-i, 0) * var(--reveal-stagger));
  }

  /* Первый экран: анимация сразу при загрузке, порядок — --reveal-i; backwards — после окончания стили не держит */
  .reveal-js [data-reveal="load"] {
    animation: reveal-in var(--reveal-duration) var(--reveal-easing) backwards;
    animation-delay: calc(var(--reveal-i, 0) * var(--reveal-stagger));
  }

  /* LCP-картинки (основа Hero, обложки блога и статьи) — только подъём, без прозрачности */
  .reveal-js [data-reveal="load"][data-reveal-lift] {
    animation-name: reveal-lift;
  }
}

@keyframes reveal-in {
  from {
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance), 0);
  }
}

@keyframes reveal-lift {
  from {
    transform: translate3d(0, var(--reveal-distance), 0);
  }
}

/* ==========================================================================
   Кнопки сторов .store-btn (App Store, Google Play, RuStore, Telegram): тёмная #2d2e30 или .store-btn--light
   (белая — Telegram в App CTA статьи). Логотип — <img> (SVG из Figma); Telegram на тёмной кнопке —
   telegram-dark.svg (белая надпись). Высота --store-btn-height 52 / 48 / 48 (у карты на 768 — 52, подмена в card.css).
   Ряд кнопок — .store-list (ul > li > a): промежуток --store-list-gap 12 / 8 / 8, на ≤767 — столбиком на всю
   ширину, логотип по центру («Выпустите международную карту» 2517:10432). Блог использует свой .app-cta__stores.
   ========================================================================== */
.store-btn {
  display: inline-flex;
  align-items: center;
  height: var(--store-btn-height);
  padding: var(--store-btn-padding);
  border-radius: var(--store-btn-radius);
  background-color: var(--color-blog-title);
  transition: background-color var(--transition-fast) ease;
}

.store-btn--light {
  background-color: var(--color-white);
}

/* Ховера в Figma нет — дорисован; фокус — тёмная обводка (на жёлтом акцентная #d69500 сливается) */
.store-btn:hover,
.store-btn:focus-visible {
  background-color: var(--color-black);
}

.store-btn--light:hover,
.store-btn--light:focus-visible {
  background-color: var(--color-tag-bg-hover);
}

.store-btn:focus-visible {
  outline: 2px solid var(--color-blog-title);
  outline-offset: 2px;
}

.store-btn img {
  display: block;
  flex-shrink: 0;
}

.store-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--store-list-gap);
}

.store-list > li {
  display: flex;
}

@media (max-width: 767px) {
  .store-list {
    flex-direction: column;
    align-items: stretch;
  }

  .store-list .store-btn {
    justify-content: center;
    width: 100%;
  }
}