/* ==========================================================================
   Страница «Статья блога» (blog-post.html). Макет 1920, контейнер 1280 — база без @media.
   Кадр Figma 3008:317. Область ниже обложки (тело, сайдбар, низ, «Читайте также») —
   следующие задачи (docs/pages/blog-progress.md). Обложка (.blog-cover, .cover--<slug>)
   и чип (.tag) — общие, в components.css.
   ========================================================================== */

.blog-post {
  display: block;
}

/* ---------- Хлебные крошки (3008:341): Inter Regular 16, gap 10, pt 32 ---------- */
.post-crumbs {
  padding-top: var(--post-crumbs-padding-top);
}

.post-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  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);
}

.post-crumbs__link {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast) ease;
}

/* Ховера в Figma нет — дорисован тем же акцентом, что у ссылок сайта */
.post-crumbs__link:hover {
  color: var(--color-text-accent);
}

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

/* Текущий пункт (рубрика, aria-current): цвет #2d2e30 */
.post-crumbs__link[aria-current] {
  color: var(--color-blog-title);
}

.post-crumbs__link[aria-current]:hover {
  color: var(--color-text-accent);
}

/* ---------- Шапка статьи (3008:347): pt 40, pb 48, gap 24 ---------- */
.post-head {
  padding-top: var(--post-head-padding-top);
  padding-bottom: var(--post-head-padding-bottom);
}

.post-head__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--blog-articles-gap);
}

/* Тег и мета (3008:348): gap 16. Чип — .tag--s (42px) в активной заливке #fff2c8 */
.post-head__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tag-list-gap);
}

.post-head__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;
}

/* Единственный h1 страницы: Bold 60 / 1.1, ширина 1000 */
.post-head__title {
  width: 100%;
  max-width: var(--post-title-width);
  font-size: var(--post-title-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--post-title-line-height);
  letter-spacing: 0;
  color: var(--color-blog-title);
  overflow-wrap: break-word;
}

/* Лид (description): Regular 22 / 1.5, ширина 900 */
.post-head__lead {
  width: 100%;
  max-width: var(--post-lead-width);
  font-size: var(--post-lead-size);
  line-height: var(--post-lead-line-height);
  color: var(--color-blog-text);
}

/* ---------- Обложка (3008:369): 1280×640 (2:1), радиус 32 ---------- */
.post-cover {
  width: 100%;
  aspect-ratio: var(--post-cover-aspect-ratio); /* ровно 2:1 (в Figma 1280×600 — отклонение: легенда мастера рассчитана на 2:1) */
  border-radius: var(--post-cover-radius);
}

/* Заглушка: мастер 16:9 (1280×720) обрезан по центру до 2:1 (1280×640): высота 112,5%, сдвиг -40px */
.post-cover .blog-cover__img--placeholder {
  height: 112.5%;
  transform: translateY(-5.5556%); /* -40px от высоты 720 */
}

/* ---------- Тело статьи (3008:389): сайдбар 300 + gap 80 + контент 900 ---------- */
.post-body {
  display: grid;
  grid-template-columns: var(--post-sidebar-width) var(--post-article-width);
  column-gap: var(--post-body-gap);
  padding-top: var(--post-body-padding-top);
  padding-bottom: var(--post-body-padding-bottom);
}

/* ---------- Сайдбар (3008:373): sticky, TOC + «Поделиться» ---------- */
.post-sidebar {
  position: sticky;
  top: var(--post-sidebar-top);
  grid-column: 1;
  grid-row: 1 / span 2; /* на всю высоту тела, включая низ статьи: sticky доезжает до его конца */
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--post-sidebar-gap);
}

.toc {
  display: flex;
  flex-direction: column;
  gap: var(--toc-gap);
  padding: var(--toc-padding);
  border-radius: var(--blog-card-radius);
  background-color: var(--color-white);
}

/* Заголовок TOC — кнопка аккордеона (на планшете и мобильной сворачивает список); на десктопе кнопка отключена (js/blog-post.js) и выглядит как заголовок */
.toc__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: default;
}

.toc__chevron {
  display: none;
}

.toc__title,
.share__title {
  font-size: var(--sidebar-label-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--sidebar-label-letter-spacing);
  text-transform: uppercase;
  color: var(--color-blog-meta);
}

.toc__list {
  display: flex;
  flex-direction: column;
  gap: var(--toc-gap);
  list-style: none;
}

.toc__link {
  font-size: var(--body-18-medium-size);
  font-weight: var(--body-18-medium-weight);
  line-height: var(--toc-item-line-height);
  letter-spacing: 0;
  color: var(--color-blog-title);
  text-decoration: underline transparent 2px;
  text-underline-offset: 4px;
  transition: color var(--transition-fast) ease, text-decoration-color var(--transition-fast) ease;
}

/* Hover (3322:11976) — акцентный цвет; активный на десктопе (3320:11951) — полоса слева (ниже), на планшете и мобильной — жёлтое подчёркивание */
.toc__link:hover {
  color: var(--color-text-accent);
}

.toc__link[aria-current] {
  text-decoration-color: var(--color-brand-300);
}

/* Десктоп ≥1280: пункты на всю ширину панели, поля 8 28, активный — border-left 2px у края панели, текст не сдвигается */
@media (min-width: 1280px) {
  .toc {
    gap: var(--toc-title-gap);
    padding: var(--toc-panel-padding-y) 0;
  }

  .toc__toggle {
    padding: 0 var(--toc-inset-x);
    box-sizing: border-box;
  }

  .toc__list {
    gap: 0;
  }

  .toc__link {
    display: block;
    padding: var(--toc-item-padding-y) var(--toc-inset-x);
    text-decoration: none;
  }

  .toc__link[aria-current] {
    text-decoration: none;
    padding-left: calc(var(--toc-inset-x) - var(--toc-active-bar));
    border-left: var(--toc-active-bar) solid var(--color-brand-300);
  }
}

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

.share-bottom {
  display: none;
}

.share {
  display: flex;
  flex-direction: column;
  gap: var(--share-gap);
}

.share__buttons {
  display: flex;
  gap: var(--share-buttons-gap);
}

.share__buttons button {
  cursor: pointer;
}

/* Плавная прокрутка к заголовку; отступ сверху — как у якорей FAQ */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

.article h2 {
  scroll-margin-top: var(--scroll-offset-top);
}

.post-body > .article {
  grid-column: 2;
}

/* ---------- Типографика тела (.article): Markdown-совместимые теги ----------
   Ритм: абзацы/списки — 24 (дорисовано), перед h2 — 56, h2 → контент — 20 (Figma 3008:389). */
.article {
  min-width: 0;
  font-size: var(--body-20-size);
  font-weight: var(--body-20-weight);
  line-height: var(--body-20-line-height);
  letter-spacing: 0; /* в блоге у абзаца tracking нет (3008:390), в отличие от FAQ */
  color: var(--color-blog-text);
  overflow-wrap: break-word;
}

.article > * + * {
  margin-top: var(--article-paragraph-gap);
}

.article h2,
.article h3 {
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
  color: var(--color-blog-title);
}

.article h2 {
  font-size: var(--article-h2-size);
  line-height: var(--article-h2-line-height);
}

.article > * + h2 {
  margin-top: var(--article-block-gap);
}

.article > h2 + * {
  margin-top: var(--article-heading-gap);
}

/* h3 — дорисовано в стиле h2: 28/35 (токены заголовка карточки) */
.article h3 {
  font-size: var(--blog-card-title-size);
  line-height: var(--blog-card-title-line-height);
}

.article > * + h3 {
  margin-top: var(--article-h3-gap-before);
}

.article > h3 + * {
  margin-top: var(--article-h3-gap-after);
}

/* Списки: маркер — кружок 10px #ffd119 (3008:394), пункты через 20 (3008:393 → 3008:396) */
.article ul > li,
.article ol > li {
  position: relative;
}

.article li + li {
  margin-top: var(--article-heading-gap);
}

.article ul > li {
  padding-left: var(--article-list-indent);
}

.article ul > li::before {
  content: "";
  position: absolute;
  top: calc((var(--body-20-line-height) - var(--article-bullet-size)) / 2);
  left: 0;
  width: var(--article-bullet-size);
  height: var(--article-bullet-size);
  border-radius: 50%;
  background-color: var(--color-brand-300);
}

/* Нумерованный — дорисовано: номер Semi Bold #2d2e30 */
.article ol {
  counter-reset: article-ol;
}

.article ol > li {
  padding-left: var(--article-ol-indent);
  counter-increment: article-ol;
}

.article ol > li::before {
  content: counter(article-ol) ".";
  position: absolute;
  top: 0;
  left: 0;
  font-weight: var(--font-weight-semibold);
  color: var(--color-blog-title);
}

/* Инлайн */
.article strong,
.article b {
  font-weight: var(--font-weight-bold);
  color: var(--color-blog-title);
}

.article em,
.article i {
  font-style: italic;
}

.article s,
.article del {
  text-decoration: line-through;
}

.article u {
  text-decoration: underline;
  text-underline-offset: var(--article-link-underline-offset);
}

/* Ссылка (дорисовано: цвет --color-link, подчёркивание, на hover убирается) */
.article a:not(.btn-link, .store-btn) {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: var(--article-link-underline-offset);
  transition: text-decoration-color var(--transition-fast) ease;
}

.article a:not(.btn-link, .store-btn):hover {
  text-decoration-color: transparent;
}

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

/* Цитата (дорисовано): полоса #ffd119, Medium 24 */
.article blockquote {
  padding: var(--article-quote-padding);
  border-left: var(--article-quote-border) solid var(--color-brand-300);
  font-size: var(--article-quote-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--article-quote-line-height);
  color: var(--color-blog-title);
}

.article blockquote cite {
  display: block;
  margin-top: var(--article-heading-gap);
  font-size: var(--blog-meta-size);
  font-style: normal;
  font-weight: var(--font-weight-regular);
  line-height: var(--body-18l-line-height);
  color: var(--color-blog-meta);
}

/* Картинка с подписью (дорисовано) */
.article > * + figure,
.article > figure + *,
.article > * + .article__actions {
  margin-top: var(--article-figure-gap);
}

.article figure img {
  width: 100%;
  height: auto;
  border-radius: var(--blog-cover-radius);
}

/* Заглушка: квадратная иллюстрация — 16:9 на фоне цвета рубрики, в проде убрать класс */
.article figure img.article__img--placeholder {
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background-color: var(--color-cover-replenish);
}

.article figcaption {
  margin-top: var(--article-caption-gap);
  font-size: var(--blog-meta-size);
  line-height: var(--body-18l-line-height);
  color: var(--color-blog-meta);
}

/* Ряд кнопок-ссылок (.btn-link — components.css) */
.article__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--article-actions-gap);
}

/* ---------- Блоки статьи (кадр 3008:317). Все блоки — через 56 (--article-block-gap), как «Что понадобится» → «Пошаговая инструкция» ---------- */
.article > .callout,
.article > .app-cta,
.article > .callout + *,
.article > .app-cta + * {
  margin-top: var(--article-block-gap);
}

/* ---------- Шаг (Blog / Step 3028:1923): <ol class="steps"><li class="step">. Номер — CSS counter, считает шаги внутри одного .steps ---------- */
.article > h2 + .steps {
  margin-top: var(--article-paragraph-gap); /* 3008:402: h2 → Шаг 1 через 24 (не 20, как у прочих h2) */
}

.steps {
  display: flex;
  flex-direction: column;
  gap: var(--article-paragraph-gap); /* 3008:402: шаг → шаг через 24 (356 → 380) */
  counter-reset: step;
  list-style: none;
  padding: 0;
}

/* .article ol > li (нумерованный список) здесь не действует: своя вёрстка шага */
.article .steps > .step {
  display: flex;
  align-items: center;
  gap: var(--step-gap);
  padding: var(--step-padding);
  margin-top: 0;
  background-color: var(--color-white);
  border-radius: var(--blog-card-radius);
  counter-increment: step;
}

.article .steps > .step::before {
  content: none;
}

/* Без скриншота (в Figma варианта нет — дорисовано): правой колонки нет, отступы как слева */
.article .steps > .step--no-image {
  padding: var(--step-padding-no-image);
}

.step__body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--step-text-gap);
  min-width: 0;
}

/* Круг-номер 48, #ffd119, Inter Bold 20 */
.step__body::before {
  content: counter(step);
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--step-number-size);
  height: var(--step-number-size);
  border-radius: 50%;
  background-color: var(--color-brand-300);
  font-size: var(--body-20-bold-size);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-blog-title);
}

.article .step__title {
  width: 100%;
  font-size: var(--h2-semibold-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--step-title-line-height);
  letter-spacing: 0;
  color: var(--color-blog-title);
}

.step__text {
  width: 100%;
  font-size: var(--body-18-size);
  font-weight: var(--body-18-weight);
  line-height: var(--body-18-line-height);
  letter-spacing: 0;
  color: var(--color-blog-text);
}

/* Скриншот 220×300: плашка-заглушка с подписью или <img class="step__media"> (object-fit: cover) */
.step__media {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--step-media-width);
  height: var(--step-media-height);
  overflow: hidden;
  border: 1px solid var(--color-bg-tertiary);
  border-radius: var(--blog-card-radius);
  background-color: var(--color-bg-secondary);
  text-align: center;
  font-size: var(--step-media-label-size);
  font-weight: var(--font-weight-medium);
  line-height: var(--step-media-label-line-height);
  color: var(--color-blog-meta);
}

img.step__media {
  display: block;
  object-fit: cover;
}

/* ---------- Плашка (Blog / Callout 3028:2045): aside, жёлтый фон, значок «!», заголовок + текст ---------- */
.callout {
  display: flex;
  align-items: flex-start;
  gap: var(--callout-gap);
  padding: var(--callout-padding);
  border-radius: var(--blog-card-radius);
  background-color: var(--color-brand-50);
}

.callout__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: var(--callout-icon-size);
  height: var(--callout-icon-size);
  border-radius: 50%;
  background-color: var(--color-brand-300);
  font-size: var(--body-20-bold-size);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-blog-title);
}

.callout__body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: var(--callout-text-gap);
  min-width: 0;
}

.callout__title {
  font-size: var(--body-20-semibold-size);
  font-weight: var(--font-weight-semibold);
  line-height: var(--h5-line-height);
  letter-spacing: 0;
  color: var(--color-blog-title);
}

.callout__text {
  font-size: var(--body-18-size);
  font-weight: var(--body-18-weight);
  line-height: var(--body-18-line-height);
  letter-spacing: 0;
  color: var(--color-blog-text);
}

/* ---------- Таблица комиссий (3008:444): <table>, 2 колонки, шапка #e9ecf0, строки белые, разделитель 1px ---------- */
.article-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--body-18-size);
  line-height: var(--body-18-compact-line-height);
  letter-spacing: 0;
}

.article-table th,
.article-table td {
  padding: var(--article-table-cell-y) var(--article-table-col-gap) var(--article-table-cell-y) var(--article-table-cell-x);
  text-align: left;
  vertical-align: top;
  color: var(--color-blog-title);
  font-weight: var(--font-weight-semibold);
}

/* Вторая колонка: 260 + правый отступ 32; левый отступ берёт gap 24 первой колонки */
.article-table th:last-child,
.article-table td:last-child {
  width: calc(var(--article-table-value-width) + var(--article-table-cell-x));
  padding-right: var(--article-table-cell-x);
  padding-left: 0;
}

.article-table thead th {
  background-color: var(--color-bg-tertiary);
}

.article-table tbody th,
.article-table tbody td {
  border-top: var(--article-table-row-gap) solid var(--color-bg-tertiary);
  background-color: var(--color-white);
}

.article-table tbody th {
  font-weight: var(--font-weight-regular);
  color: var(--color-blog-text);
}

.article-table thead th:first-child { border-top-left-radius: var(--blog-card-radius); }
.article-table thead th:last-child { border-top-right-radius: var(--blog-card-radius); }
.article-table tbody tr:last-child > :first-child { border-bottom-left-radius: var(--blog-card-radius); }
.article-table tbody tr:last-child > :last-child { border-bottom-right-radius: var(--blog-card-radius); }

/* ---------- Частые вопросы (3008:460): h2 + .accordion из components.css; h2 → пункты и пункт → пункт через 16 ---------- */
.article > h2 + .faq-list {
  margin-top: var(--article-faq-gap);
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--article-faq-gap);
}

/* В Figma у последнего пункта тоже есть разделитель (на странице FAQ — нет) */
.faq-list .accordion:last-child {
  padding-bottom: calc(var(--accordion-spacing) - var(--accordion-border-width));
  border-bottom: var(--accordion-border-width) solid var(--color-divider);
}

.article .faq-list .accordion:last-child .accordion__content {
  padding-bottom: 0;
}

/* h3 пункта — оболочка для кнопки: не наследует размеры h3 статьи (.article h3) */
.article .accordion h3 {
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* ---------- App CTA (Blog / App CTA 3028:2133): жёлтая плашка, заголовок, текст, кнопки сторов ---------- */
.app-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--app-cta-gap);
  padding: var(--app-cta-padding);
  border-radius: var(--blog-card-radius);
  background-color: var(--color-brand-300);
  color: var(--color-blog-title);
}

.app-cta__title {
  font-size: var(--h2-size);
  font-weight: var(--font-weight-bold);
  line-height: var(--app-cta-title-line-height);
  letter-spacing: 0;
}

.app-cta__text {
  font-size: var(--body-18-size);
  font-weight: var(--body-18-weight);
  line-height: var(--body-18-line-height);
  letter-spacing: 0;
}

.app-cta__stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--app-cta-stores-gap);
}

/* Кнопки сторов .store-btn — общий компонент (css/components.css) */

/* ---------- Низ статьи (3008:513): граница, теги слева, «Полезно?» справа ---------- */
.post-bottom {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--article-paragraph-gap);
  margin-top: var(--article-block-gap);
  padding-top: var(--post-bottom-padding-top);
  border-top: 1px solid var(--color-bg-tertiary);
}

.post-bottom .tag-list {
  justify-content: flex-start;
  gap: var(--post-tags-gap);
}

.helpful {
  display: flex;
  align-items: center;
  gap: var(--helpful-gap);
}

.helpful__question {
  font-size: var(--blog-meta-size);
  color: var(--color-blog-meta);
  white-space: nowrap;
}

/* Состояние после ответа — в Figma нет, дорисовано: выбранная кнопка жёлтая, обе заблокированы, вопрос меняется на «Спасибо» */
.helpful .btn-link {
  cursor: pointer;
}

.helpful .btn-link:disabled {
  cursor: default;
}

.helpful .btn-link:disabled:not([aria-pressed="true"]) {
  color: var(--color-blog-meta);
}

.helpful .btn-link[aria-pressed="true"] {
  background-color: var(--color-brand-300);
  border-color: var(--color-brand-300);
}

/* ---------- «Читайте также» (3008:539): Related card 3027:1774 на общей .blog-card ---------- */
.related {
  padding: var(--related-padding-y) 0;
}

.related__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--article-paragraph-gap);
  margin-bottom: var(--related-heading-gap);
}

.related__title {
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--h1-line-height);
  letter-spacing: 0;
  color: var(--color-blog-title);
}

.related__all {
  font-size: var(--related-all-size);
  font-weight: var(--font-weight-semibold);
  color: var(--color-blog-title);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast) ease;
}

.related__all:hover {
  color: var(--color-text-accent);
}

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

.related__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--blog-grid-column-gap);
  list-style: none;
}

/* Related card — .blog-card без анонса: обложка 228, текст 141, заголовок 22 */
.blog-card--related .blog-cover {
  height: var(--related-cover-height);
}

.blog-card--related .blog-card__text {
  height: var(--related-text-height);
  padding: var(--related-text-padding);
}

.blog-card--related .blog-card__title {
  font-size: var(--related-title-size);
  line-height: var(--related-title-line-height);
}

/* Название рубрики в Related card — только на мобильной (375), см. блок «Мобильная 375» ниже */
.blog-card--related .blog-card__category {
  display: none;
}

/* ==========================================================================
   Планшет и мобильная (до 1279): общая структура. Значения — токены в @media в css/tokens.css
   (подмена --post-*, --article-*, --step-*, --callout-*, --related-* и т.д.), здесь — то, чего токенами не выразить.
   Десктоп не затрагивается.
   ========================================================================== */
@media (max-width: 1279px) {
  /* Тело: одна колонка, TOC-аккордеон сверху, «Поделиться» уходит в низ статьи */
  .post-body {
    display: block;
  }

  .post-sidebar {
    position: static;
    margin-bottom: var(--post-sidebar-gap);
  }

  .post-sidebar .share {
    display: none;
  }

  .toc__toggle {
    cursor: pointer;
  }

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

  .toc__chevron {
    display: block;
    flex-shrink: 0;
    width: var(--tablet-toc-chevron-size);
    height: var(--tablet-toc-chevron-size);
    transition: transform var(--transition-fast) ease;
  }

  .toc__toggle[aria-expanded="false"] .toc__chevron {
    transform: rotate(180deg);
  }

  .toc__toggle[aria-expanded="false"] + .toc__list {
    display: none;
  }

  .toc__title {
    font-size: var(--tablet-toc-title-size);
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-blog-title);
  }

  .toc__link {
    font-size: var(--tablet-toc-link-size);
    color: var(--color-blog-text);
  }

  .article blockquote {
    font-size: var(--article-quote-size);
    line-height: var(--article-quote-line-height);
  }

  /* Шаги: подряд через 16, h2 → шаг 16 */
  .article > h2 + .steps {
    margin-top: var(--tablet-steps-gap);
  }

  .steps {
    gap: var(--tablet-steps-gap);
  }

  .step__body::before {
    font-size: var(--tablet-step-number-size);
  }

  .step__media {
    border-radius: var(--tablet-step-media-radius);
    font-size: var(--tablet-step-media-label-size);
    line-height: var(--tablet-step-media-label-line-height);
  }

  /* Плашка */
  .callout__icon {
    font-size: var(--tablet-callout-icon-font-size);
  }

  .callout__title {
    font-size: var(--tablet-callout-title-size);
    line-height: normal;
  }

  /* Низ статьи: колонкой — теги, «Поделиться», «Полезно?» */
  .post-bottom {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
  }

  .share-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--share-buttons-gap);
  }

  .helpful__question {
    font-size: var(--tablet-helpful-size);
  }

  /* «Читайте также»: заголовок и ссылка по центру */
  .related__head {
    align-items: center;
  }
}

/* ==========================================================================
   Планшет 768 (Figma 3012:782): поля 40, размеры текста, две карточки «Читайте также».
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1279px) {
  .blog-post .container {
    padding-inline: var(--tablet-page-margin);
  }

  /* Крошки и шапка статьи */
  .post-crumbs__list {
    font-size: var(--tablet-crumbs-size);
    line-height: var(--tablet-crumbs-line-height);
  }

  .post-head__inner {
    gap: var(--tablet-post-head-gap);
  }

  .post-head__top {
    gap: var(--tablet-post-top-gap);
  }

  .post-head__meta {
    font-size: var(--tablet-card-meta-size);
    line-height: var(--tablet-card-meta-line-height);
  }

  .post-head__title {
    font-size: var(--tablet-post-title-size);
    line-height: var(--tablet-post-title-line-height);
  }

  .post-head__lead {
    font-size: var(--tablet-post-lead-size);
    line-height: var(--tablet-post-lead-line-height);
  }

  /* Типографика тела: абзац и пункты 18 / 1.6 */
  .article {
    font-size: var(--tablet-article-size);
    line-height: var(--tablet-article-line-height);
  }

  .article ul > li::before {
    top: calc((var(--tablet-article-line-height) - var(--article-bullet-size)) / 2);
  }

  .article .step__title {
    font-size: var(--tablet-step-title-size);
  }

  .step__text {
    font-size: var(--tablet-step-text-size);
    line-height: var(--tablet-step-text-line-height);
  }

  .callout__text {
    font-size: var(--tablet-callout-text-size);
    line-height: var(--tablet-callout-text-line-height);
  }

  /* Таблица комиссий: 16 / normal, строка 51 */
  .article-table {
    font-size: var(--tablet-table-size);
    line-height: var(--tablet-table-line-height);
  }

  /* Частые вопросы: ответ с правым отступом 80 */
  .faq-list .accordion__content {
    padding-right: var(--tablet-faq-answer-padding-right);
  }

  /* App CTA */
  .app-cta {
    padding: var(--tablet-app-cta-padding);
  }

  .app-cta__title {
    font-size: var(--tablet-app-cta-title-size);
  }

  .app-cta__text {
    font-size: var(--tablet-app-cta-text-size);
    line-height: var(--tablet-app-cta-text-line-height);
  }

  /* «Читайте также»: две карточки в ряд, третья скрыта */
  .related__title {
    font-size: var(--tablet-related-title-size);
    line-height: var(--tablet-related-title-line-height);
  }

  .related__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tablet-related-gap);
  }

  .related__list > li:nth-child(n + 3) {
    display: none;
  }
}

/* ==========================================================================
   Мобильная 375 (Figma 3012:1080): поля 16, контент 343. Значения — токены в @media в css/tokens.css
   (--mobile-*, подмена --post-*, --article-*, …), здесь — раскладка. Отступ над первым блоком — --page-offset-top (пачка 8).
   ========================================================================== */
@media (max-width: 767px) {
  .blog-post .container {
    padding-inline: var(--mobile-page-margin);
  }

  /* Крошки (3012:1094): только «← Блог» (ссылка назад в ленту); цепочка Главная / Блог / Рубрика остаётся в разметке для BreadcrumbList */
  .post-crumbs__list > li:not(:nth-child(3)) {
    display: none;
  }

  .post-crumbs__list > li:nth-child(3) a::before {
    content: "\2190\00a0";
  }

  /* Шапка статьи (3012:1096): чип и мета колонкой, h1 32, лид 17 */
  .post-head__inner {
    gap: var(--tag-list-gap);
  }

  .post-head__top {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--mobile-post-top-gap);
  }

  .post-head__title {
    font-size: var(--mobile-post-title-size);
    line-height: var(--mobile-post-title-line-height);
  }

  .post-head__lead {
    font-size: var(--mobile-post-lead-size);
    line-height: var(--mobile-post-lead-line-height);
  }

  /* Обложка 343×200: иллюстрация-заглушка по высоте обложки (200), без сдвига под 2:1 */
  .post-cover .blog-cover__img--placeholder {
    height: 100%;
    transform: none;
  }

  /* Типографика тела: абзац и пункты 16 / 1.6 */
  .article {
    font-size: var(--mobile-article-size);
    line-height: var(--mobile-article-line-height);
  }

  .article ul > li::before {
    top: calc((var(--mobile-article-line-height) - var(--article-bullet-size)) / 2);
  }

  /* Шаг (3028:2007): колонкой — текст, под ним скриншот на всю ширину карточки */
  .article .steps > .step {
    flex-direction: column;
    align-items: stretch;
  }

  .article .step__title {
    font-size: var(--mobile-step-title-size);
  }

  .step__text {
    font-size: var(--mobile-body-s-size);
    line-height: var(--mobile-body-s-line-height);
  }

  /* Плашка */
  .callout__text {
    font-size: var(--mobile-body-s-size);
    line-height: var(--mobile-body-s-line-height);
  }

  /* Таблица комиссий (3012:1181): карточки-строки — операция (14) над значением (16 Semi Bold). Строки заголовка в Figma нет:
     thead остаётся в DOM (скринридеры, SEO), визуально скрыт */
  .article-table {
    display: block;
    overflow: hidden;
    border-radius: var(--blog-card-radius);
    background-color: var(--color-bg-tertiary);
  }

  .article-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .article-table tbody {
    display: flex;
    flex-direction: column;
    gap: var(--article-table-row-gap);
  }

  .article-table tbody tr {
    display: flex;
    flex-direction: column;
    gap: var(--mobile-table-text-gap);
    padding: var(--article-table-cell-y) var(--article-table-cell-x);
    background-color: var(--color-white);
  }

  .article-table tbody :is(th, td):is(:first-child, :last-child) {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    line-height: normal;
  }

  .article-table tbody tr:last-child > :first-child,
  .article-table tbody tr:last-child > :last-child {
    border-radius: 0;
  }

  .article-table tbody th:first-child {
    font-size: var(--mobile-table-label-size);
    line-height: var(--mobile-table-label-line-height);
    font-weight: var(--font-weight-regular);
    color: var(--color-blog-meta);
  }

  .article-table tbody td:last-child {
    font-size: var(--mobile-table-value-size);
    line-height: var(--mobile-table-value-line-height);
    font-weight: var(--font-weight-semibold);
    color: var(--color-blog-title);
  }

  /* Частые вопросы: ответ с правым отступом 32 */
  .faq-list .accordion__content {
    padding-right: var(--accordion-spacing);
  }

  /* App CTA (3028:2185): padding 28/20, кнопки сторов 2 в ряд (146.5×48) */
  .app-cta {
    padding: var(--mobile-app-cta-padding);
  }

  .app-cta__title {
    font-size: var(--mobile-app-cta-title-size);
  }

  .app-cta__text {
    font-size: var(--mobile-body-s-size);
    line-height: var(--mobile-body-s-line-height);
  }

  .app-cta__stores {
    align-items: flex-start;
    width: 100%;
  }

  .app-cta .store-btn {
    flex: 0 0 calc((100% - var(--app-cta-stores-gap)) / 2);
    min-width: 0;
  }

  /* Логотип вписывается в кнопку: Google Play (121) шире её внутренней ширины (114,5) — в Figma он обрезался */
  .app-cta .store-btn img {
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
    height: auto;
  }

  /* Читайте также (3012:1274): все три записи вертикальным списком, горизонтальные карточки 343×112 */
  .related__title {
    font-size: var(--article-h2-size);
    line-height: var(--article-h2-line-height);
  }

  .related__list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--mobile-related-list-gap);
  }

  .blog-card--related {
    flex-direction: row;
    align-items: center;
    gap: var(--mobile-related-card-gap);
    height: auto;
    padding: var(--mobile-related-card-padding);
    border-radius: var(--mobile-related-card-radius);
  }

  /* Превью 88×88 (1:1, object-fit: cover) вместо обложки 16:9; тег на обложке и мета заменены названием рубрики текстом */
  .blog-card--related .blog-cover {
    width: var(--mobile-related-thumb-size);
    height: var(--mobile-related-thumb-size);
    border-radius: var(--mobile-related-thumb-radius);
  }

  .blog-card--related .cover-tag,
  .blog-card--related .blog-card__meta {
    display: none;
  }

  .blog-card--related .blog-card__text {
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    padding: 0;
    gap: var(--mobile-related-text-gap);
  }

  .blog-card--related .blog-card__category {
    display: block;
    font-size: var(--mobile-related-label-size);
    font-weight: var(--font-weight-semibold);
    line-height: normal;
    color: var(--color-blog-meta);
  }

  .blog-card--related .blog-card__title {
    -webkit-line-clamp: 3;
    font-size: var(--mobile-related-title-size);
    line-height: var(--mobile-related-title-line-height);
  }
}