/* Калькулятор визы. Грузится только на своей странице (extra_css во frontmatter).
   Цвета и шрифты берутся из переменных сайта — на visa.ru это циан на тёмно-синем,
   на danangvisarun.com янтарь на графите, ни одного своего цвета здесь нет. */

.vcalc {
  margin: 2.5rem 0;
  padding: 1.5rem;
  border: 1px solid var(--color-border-strong, rgba(255, 255, 255, .22));
  border-radius: 14px;
  background: var(--color-surface, #1f1f1f);
}

.vcalc__form {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  align-items: end;
}

.vcalc__field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.vcalc__label {
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--color-text-soft, #c8c4bc);
}

.vcalc__control {
  width: 100%;
  padding: .65rem .75rem;
  font: inherit;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 1rem;
  color: var(--color-text, #f5f5f5);
  background: var(--color-bg, #141414);
  border: 1px solid var(--color-border-strong, rgba(255, 255, 255, .22));
  border-radius: 8px;
}

.vcalc__control:focus-visible {
  outline: 2px solid var(--color-accent, #ff8c00);
  outline-offset: 2px;
}

.vcalc__hint {
  font-size: .75rem;
  color: var(--color-muted, #7a7570);
}

.vcalc__submit {
  padding: .7rem 1.4rem;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--color-bg, #141414);
  background: var(--color-accent, #ff8c00);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}

.vcalc__submit:hover { background: var(--color-accent-soft, #ffa940); }

.vcalc__result { margin-top: 1.75rem; }

.vcalc__warn {
  margin: 0 0 1rem;
  padding: .6rem .8rem;
  font-size: .875rem;
  color: var(--color-text, #f5f5f5);
  border-left: 3px solid var(--color-accent, #ff8c00);
  background: var(--color-surface-warm, rgba(255, 255, 255, .04));
}

.vcalc__verdict {
  margin: 0 0 .35rem;
  font-family: var(--font-display, Georgia, serif);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--color-text, #f5f5f5);
}

.vcalc__intro {
  margin: 0 0 1.1rem;
  font-size: .9375rem;
  color: var(--color-text-soft, #c8c4bc);
}

.vcalc__plans {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.vcalc__plan {
  padding: 1rem 1.1rem;
  border: 1px solid var(--color-border, rgba(255, 255, 255, .1));
  border-radius: 10px;
  background: var(--color-bg, #141414);
  /* Даёт .vcalc__rows знать ширину именно карточки, а не вьюпорта — на
     1440px в двухколоночном calc_hero карточка уже сама по себе узкая
     из-за sticky-сайдбара слева, media-запрос по вьюпорту это не видит. */
  container-type: inline-size;
}

.vcalc__plan-name {
  margin: 0;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text, #f5f5f5);
}

.vcalc__plan-badge {
  margin: .3rem 0 0;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-accent, #ff8c00);
}

.vcalc__rows {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .35rem .75rem;
  margin: .9rem 0 0;
  font-size: .875rem;
}

.vcalc__rows dt {
  margin: 0;
  color: var(--color-text-soft, #c8c4bc);
}

.vcalc__rows dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
  color: var(--color-text, #f5f5f5);
  font-variant-numeric: tabular-nums;
}

/* Длинное значение (например «$0 — за штамп на границе не платят») в
   узкой карточке сжимает 1fr-колонку подписи, и она переносится на три
   строки. Контейнер уже карточки, а не вьюпорта (.vcalc__plan выше) —
   ниже порога подпись и значение встают друг под другом. */
@container (max-width: 26rem) {
  .vcalc__rows {
    grid-template-columns: 1fr;
    gap: 0 .75rem;
  }

  .vcalc__rows dd {
    margin: 0 0 .5rem;
    text-align: left;
  }
}

.vcalc__notes {
  margin: 1.25rem 0 0;
  padding-left: 1.1rem;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--color-text-soft, #c8c4bc);
}

.vcalc__notes li { margin: .3rem 0; }

.vcalc__cta-lead {
  margin: 1.25rem 0 .85rem;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--color-text, #f5f5f5);
}

.vcalc__cta {
  display: inline-block;
  padding: .75rem 1.5rem;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: .9375rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--color-bg, #141414);
  background: var(--color-accent, #ff8c00);
  border-radius: 8px;
}

.vcalc__cta:hover { background: var(--color-accent-soft, #ffa940); }

/* Тот же цвет текста, но правилом посильнее, и это не дубль по невнимательности.
   Ниже по каскаду стоит `.landing__body a { color: var(--lp-accent) }` со
   специфичностью 0,2,0 — он перебивал одноклассовое правило выше и красил
   надпись в цвет её же подложки, от кнопки оставался пустой прямоугольник.
   Повторяется ровно одно свойство, проигравшее борьбу; фон и геометрия — нет. */
.landing__body a.vcalc__cta { color: var(--color-bg, #141414); }

/* Строки «что мы сделаем за вас» под полями расчёта. На 1440 форма занимает
   402 px, а карточка ответа рядом — 811 px, и разница простаивала пустотой;
   блок встаёт именно в неё, поэтому высота страницы не растёт. Разметку
   собирает visa-calc.js. */
.vcalc__promise {
  margin: .25rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, .14));
}

.vcalc__promise-title {
  margin: 0 0 .55rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-muted, #7a7570);
}

.vcalc__promise-list {
  display: grid;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--color-text-soft, #c8c4bc);
}

.vcalc__promise-list li {
  position: relative;
  padding-left: 1.35rem;
}

.vcalc__promise-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--color-accent, #ff8c00);
}

.vcalc__cta-note {
  margin: .7rem 0 0;
  font-size: .875rem;
  color: var(--color-muted, #7a7570);
}

/* Серверный дубль ответа (шорткод visa-answers): тот же справочник без
   JavaScript. Цвета берутся из переменных сайта, своих здесь тоже нет. */

.visa-answers { margin: 2rem 0 0; }

.visa-answers__item {
  margin: 0 0 .9rem;
  line-height: 1.65;
}

.visa-answers__asof {
  margin: 1.75rem 0 .6rem;
  font-size: .875rem;
  color: var(--color-text-soft, #c8c4bc);
}

/* Таблица шире узкого экрана — везём её в своей прокрутке, чтобы она не
   растягивала страницу целиком. */
.visa-answers__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-border-strong, rgba(255, 255, 255, .22));
  border-radius: 12px;
}

/* Плотность. Двадцать девять строк — самый высокий объект страницы после
   самого расчёта, и на прежних .55rem/.875rem справочник разворачивался
   в полтора экрана однотипной сетки. */
.visa-answers__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .8125rem;
  line-height: 1.45;
}

.visa-answers__table caption {
  padding: .7rem .85rem;
  text-align: left;
  font-size: .8125rem;
  color: var(--color-text-soft, #c8c4bc);
}

/* `white-space: nowrap` висел на ВСЕХ ячейках сразу, поэтому min-content
   таблицы не влезал в свою колонку и боковая прокрутка появлялась уже на
   десктопе. Длинным ячейкам («90 дней за 12 месяцев», «14 марта 2028»)
   перенос разрешён, коротким числовым он не нужен — им nowrap оставлен
   отдельным правилом ниже. */
.visa-answers__table th,
.visa-answers__table td {
  padding: .35rem .7rem;
  text-align: left;
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, .12));
}

.visa-answers__table td:nth-child(2),
.visa-answers__table td:nth-child(5),
.visa-answers__table td:nth-child(6) { white-space: nowrap; }

.visa-answers__table thead th {
  font-weight: 700;
  color: var(--color-text, #f5f5f5);
}

.visa-answers__table tbody th { font-weight: 600; }

.visa-answers__foot {
  margin: .85rem 0 0;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--color-text-soft, #c8c4bc);
}

/* Ответ словами. Все 25 абзацев лежат в HTML как лежали — их читает
   ИИ-краулер, который JS не исполняет, — но человеку по умолчанию открыта
   таблица: идущие подряд однотипные абзацы её попросту заслоняли. */
.visa-answers__more {
  margin: 1.25rem 0 0;
  border-top: 1px solid var(--color-border, rgba(255, 255, 255, .12));
}

.visa-answers__more > summary {
  padding: .85rem 0;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: .9375rem;
  font-weight: 600;
  color: var(--color-text-soft, #c8c4bc);
  cursor: pointer;
}

.visa-answers__more > summary:hover { color: var(--color-text, #f5f5f5); }
.visa-answers__more[open] > summary { color: var(--color-text, #f5f5f5); }
.visa-answers__more .visa-answers__item:first-of-type { margin-top: .4rem; }

@media (max-width: 480px) {
  .vcalc { padding: 1.1rem; }
  .vcalc__verdict { font-size: 1.25rem; }
}

/* Шесть колонок в 335 px не живут ни при каком переносе, поэтому на телефоне
   таблица остаётся таблицей, но название страны залипает у левого края:
   строка читается при боковой прокрутке, а сама прокрутка заперта внутри
   обёртки и на страницу не выходит. */
@media (max-width: 700px) {
  .visa-answers__table th,
  .visa-answers__table td { white-space: nowrap; }

  .visa-answers__table tbody th {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--color-surface, #1B2742);
  }

  .visa-answers__table thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--color-surface, #1B2742);
  }
}

/* ============================================================
   Первый экран страницы-калькулятора: герой и расчёт в две колонки.
   Включается двумя метками — `calc_hero: true` во фронтматтере
   (класс .landing--calc на статье) и модификатор .vcalc--split на
   самом блоке расчёта. Без них ни одна посадочная не меняется.
   Структура взята с danangvisarun.com/apply-e-visa-vietnam, цвета —
   свои: только переменные темы, ни одного числа-цвета здесь нет.
   ============================================================ */

/* Герой. Общий герой посадочной — две колонки под текст и картинку,
   у калькулятора картинки нет, и правая половина стояла пустой.
   Сводим в одну колонку и кладём на панель со скруглением. */
.landing--calc .landing__hero {
  grid-template-columns: 1fr;
  padding: clamp(1.1rem, 3vw, 1.9rem);
  border: 1px solid var(--color-border, rgba(255, 255, 255, .1));
  border-radius: 20px;
  background: linear-gradient(155deg,
    var(--color-surface, #1B2742) 0%,
    var(--color-bg, #0E1525) 78%);
}

/* Ряд доверия подтягивается вплотную к герою — в образце он читается
   как часть первого экрана, а не как отдельный следующий блок. */
.landing--calc .landing__trust {
  margin-top: .9rem;
  border-radius: 20px;
}

@media (min-width: 900px) {
  .landing--calc .landing__lead { max-width: 62ch; }
  .landing--calc .landing__points {
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: .7rem 1.75rem;
  }
}

/* Хлебные крошки на телефоне вставали в две строки над H1 и отжимали расчёт
   вниз, не давая взамен ничего: путь /услуги/ здесь и без них очевиден. */
@media (max-width: 700px) {
  .landing--calc .landing__crumbs { display: none; }

  /* Четыре плитки доверия складывались в четыре этажа. Одна строка с боковой
     прокруткой читается тем же взглядом и не разрывает путь «ответ → дверь». */
  .landing--calc .landing__trust {
    display: flex;
    gap: .6rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .landing--calc .landing__trust-item {
    flex: 0 0 auto;
    min-width: 8.5rem;
  }
}

/* Пять строк «откуда → какой переход» и единственный кадр страницы стоят
   рядом: это соседи по фактуре, а друг под другом они дают лишний экран
   прокрутки и пустую половину справа. */
.visa-route {
  display: grid;
  gap: 1.25rem 1.75rem;
  align-items: start;
  margin: 1.5rem 0;
}

@media (min-width: 900px) {
  .visa-route { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

.visa-route__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
}

.visa-route__table th,
.visa-route__table td {
  padding: .45rem .85rem .45rem 0;
  text-align: left;
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, .12));
}

.visa-shot {
  margin: 0;
  max-width: 36rem;
}

.visa-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}

.visa-shot figcaption {
  margin: .6rem 0 0;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--color-text-soft, #c8c4bc);
}

/* Проза остаётся в своей колонке для чтения, а блок расчёта выходит на
   всю ширину посадочной — в 68ch две колонки просто не помещаются. */
/* Герой и расчёт читаются как один объект первого экрана, а не как два блока
   подряд: между ними 44 px вместо общих 88 px, иначе кнопка «Посчитать» не
   влезает в 900 px на десктопе. Воздух между остальными блоками не тронут. */
.landing__body--calc { max-width: none; margin-top: 2rem; }
.landing__body--calc > p,
.landing__body--calc > ul,
.landing__body--calc > ol,
.landing__body--calc > blockquote { max-width: 68ch; }

/* Сам расчёт: внешняя рамка снимается, карточками становятся поля и
   ответ по отдельности. */
.vcalc--split {
  padding: 0;
  border: 0;
  background: none;
}

.vcalc--split .vcalc__form,
.vcalc--split .vcalc__result {
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
  border: 1px solid var(--color-border-strong, rgba(255, 255, 255, .22));
  border-radius: 16px;
  background: var(--color-surface, #1f1f1f);
}

.vcalc--split .vcalc__form {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: .8rem;
}

.vcalc--split .vcalc__result { margin-top: 1rem; }

@media (min-width: 1000px) {
  /* Слева поля, справа ответ. align-items: start обязателен: без него
     колонки растягиваются на высоту строки и sticky не за что зацепить. */
  .vcalc--split {
    display: grid;
    grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
  }

  /* Залипание ограничено высотой самого блока расчёта: оба элемента —
     ячейки одной строки грида, поэтому ниже неё карточка не уедет и на
     следующие секции не наползёт. Отступ сверху — под липкую шапку сайта. */
  .vcalc--split .vcalc__form,
  .vcalc--split .vcalc__result {
    position: sticky;
    top: calc(var(--header-h, 4rem) + 1rem);
  }

  .vcalc--split .vcalc__result { margin-top: 0; }
}

/* ============================================================
   Бумажная тема калькулятора (2026-09-23). Страница переодета в тот же
   вид, что статьи блога (blog.css): светлый лист, заголовки Source Sans
   жирным, текст Source Serif, циан — только в кнопках и тонких кромках,
   тёмная шапка и подвал сайта не меняются. Тёмный градиентный вариант
   Сергей забраковал: «выглядит как ИИ-слоп». Правила ограничены классом
   .landing--calc (calc_hero: true), остальные посадочные не трогаются.
   ============================================================ */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/source-serif-var.subset.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/fonts/source-sans-var.subset.woff2') format('woff2-variations');
}

/* Палитра листа — те же значения, что у блога (blog.css, TOKENS). Переменные
   сайта переопределены на самой статье, поэтому всё, что выше в этом файле
   и в landing.css читает var(--color-*), само перекрашивается в светлое. */
.landing--calc {
  --cp-paper: #FBFCFD;
  --cp-paper-2: #EFF3F7;
  --cp-white: #FFFFFF;
  --cp-ink: #16202E;
  --cp-body: #39434F;
  --cp-quiet: #6B7688;
  --cp-rule: #DEE5EC;
  --cp-rule-strong: #C9D3DE;
  --cp-accent: #22D3EE;
  --cp-accent-ink: #0E7490;
  --cp-accent-wash: #DFF6FB;
  --cp-on-accent: #06323B;
  --cp-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --cp-sans: 'Source Sans 3', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;

  --color-bg: var(--cp-paper);
  --color-surface: var(--cp-white);
  --color-surface-warm: var(--cp-paper-2);
  --color-text: var(--cp-ink);
  --color-text-soft: var(--cp-body);
  --color-muted: var(--cp-quiet);
  --color-border: var(--cp-rule);
  --color-border-strong: var(--cp-rule-strong);
  --color-accent: var(--cp-accent);
  --color-accent-soft: #67E8F9;
  --font-sans: var(--cp-sans);
  --font-display: var(--cp-sans);
  --font-mono: var(--cp-sans);

  /* Текстовый акцент на белом — тёмный циан (AA), яркий остаётся заливкам. */
  --lp-accent: var(--cp-accent-ink);
  --lp-accent-soft: var(--cp-accent-ink);
  --lp-card: var(--cp-paper-2);

  font-family: var(--cp-sans);
  color: var(--cp-body);
}

body:has(.landing--calc) { background: #FBFCFD; }
body:has(.landing--calc)::before { display: none; }
/* Шапка сайта полупрозрачная: над светлым листом она серела. Как в блоге — ровный тёмно-синий. */
body:has(.landing--calc) .site-header { background: #0E1525; }
.landing--calc ::selection { background: rgba(34, 211, 238, .22); color: #16202E; }

/* ---------- крошки: как в статье, капсом через косую ---------- */
.landing--calc .landing__crumbs {
  gap: 0;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cp-quiet);
}
.landing--calc .landing__crumbs a { color: var(--cp-quiet); border-bottom: 0; }
.landing--calc .landing__crumbs a:hover { color: var(--cp-accent-ink); }
.landing--calc .landing__crumbs > span[aria-hidden] { font-size: 0; }
.landing--calc .landing__crumbs > span[aria-hidden]::before {
  content: "/";
  margin: 0 7px;
  font-size: .72rem;
  color: var(--cp-rule-strong);
}
.landing--calc .landing__crumbs-current { color: var(--cp-ink); }

/* ---------- герой: без панели и градиента, шапка статьи ---------- */
.landing--calc .landing__hero {
  padding: 0 0 1.5rem;
  border: 0;
  border-bottom: 1px solid var(--cp-rule);
  border-radius: 0;
  background: none;
}
.landing--calc .landing__kicker {
  padding: 0;
  border: 0;
  border-radius: 0;
  margin: 0 0 15px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--cp-accent-ink);
}
.landing--calc .landing__title {
  font-family: var(--cp-sans);
  font-weight: 800;
  font-size: clamp(1.875rem, 1.15rem + 3.1vw, 2.75rem);
  line-height: 1.12;
  letter-spacing: -.021em;
  color: var(--cp-ink);
  margin: 0 0 .5em;
}
.landing--calc .landing__lead {
  font-family: var(--cp-serif);
  font-style: italic;
  font-size: clamp(1.25rem, 1.12rem + .55vw, 1.4375rem);
  line-height: 1.5;
  color: var(--cp-body);
  margin: 0;
  max-width: 58ch;
}

/* Расчёт стоит внутри прозы (засечки), но сам он — интерфейс: весь на гротеске. */
.landing--calc .vcalc { font-family: var(--cp-sans); }
/* Общие правила прозы (.landing__body h3 / ul) давали заголовкам ответа
   30 px пустоты сверху, а спискам — лишний отступ и чужие поля. */
.landing--calc .vcalc .vcalc__verdict,
.landing--calc .vcalc .vcalc__plan-name { margin-top: 0; }
.landing--calc .vcalc .vcalc__promise-list { padding-left: 0; margin: 0; }
.landing--calc .vcalc .vcalc__notes { margin: 1.25rem 0 0; }

/* ---------- блок расчёта: карточки как «Виза под ключ» в статье ---------- */
.landing--calc .vcalc--split .vcalc__form,
.landing--calc .vcalc--split .vcalc__result {
  border: 1px solid var(--cp-rule);
  border-radius: 14px;
  background: var(--cp-white);
  box-shadow: 0 2px 12px rgba(22, 32, 46, .05);
}
/* Циановая кромка сверху — тенью, а не ::before: у формы на десктопе
   position: sticky, и абсолютная полоска потребовала бы его перебить. */
.landing--calc .vcalc--split .vcalc__form {
  box-shadow: inset 0 3px 0 var(--cp-accent), 0 2px 12px rgba(22, 32, 46, .05);
}

.landing--calc .vcalc__label { color: var(--cp-ink); font-weight: 600; }
.landing--calc .vcalc__hint { color: var(--cp-quiet); }
.landing--calc .vcalc__control {
  color: var(--cp-ink);
  background: var(--cp-white);
  border-color: var(--cp-rule-strong);
}
.landing--calc .vcalc__control:hover { border-color: var(--cp-quiet); }
.landing--calc .vcalc__control:focus-visible { outline-color: var(--cp-accent-ink); }

.landing--calc .vcalc__submit,
.landing--calc .vcalc__cta,
.landing--calc .landing__body a.vcalc__cta,
.landing--calc .landing__btn--primary {
  color: var(--cp-on-accent);
  background: var(--cp-accent);
  border-color: var(--cp-accent);
  border-radius: 10px;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.landing--calc .vcalc__submit:hover,
.landing--calc .vcalc__cta:hover,
.landing--calc .landing__body a.vcalc__cta:hover,
.landing--calc .landing__btn--primary:hover {
  color: var(--cp-on-accent);
  background: var(--cp-accent);
  border-color: var(--cp-accent);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(34, 211, 238, .32);
}
.landing--calc .landing__btn--ghost { border-radius: 10px; }

.landing--calc .vcalc__verdict {
  font-family: var(--cp-sans);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -.01em;
  color: var(--cp-ink);
}
.landing--calc .vcalc__intro { color: var(--cp-quiet); }
.landing--calc .vcalc__warn {
  color: var(--cp-ink);
  background: var(--cp-accent-wash);
  border-left-color: var(--cp-accent);
  border-radius: 0 8px 8px 0;
}
.landing--calc .vcalc__plan {
  border-color: var(--cp-rule);
  background: var(--cp-paper-2);
}
.landing--calc .vcalc__plan--free {
  background: var(--cp-white);
  border-left: 3px solid var(--cp-accent);
}
.landing--calc .vcalc__plan-name { font-weight: 800; color: var(--cp-ink); }
.landing--calc .vcalc__plan-badge { color: var(--cp-accent-ink); }
.landing--calc .vcalc__rows dt { color: var(--cp-quiet); }
.landing--calc .vcalc__rows dd { color: var(--cp-ink); }
.landing--calc .vcalc__notes { color: var(--cp-body); }
.landing--calc .vcalc__notes li::marker { color: var(--cp-accent-ink); }
.landing--calc .vcalc__cta-lead { color: var(--cp-ink); }
.landing--calc .vcalc__cta-note { color: var(--cp-quiet); }
.landing--calc .vcalc__promise { border-top-color: var(--cp-rule); }
.landing--calc .vcalc__promise-title {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .09em;
  color: var(--cp-quiet);
}
.landing--calc .vcalc__promise-list { color: var(--cp-body); }

/* ---------- ряд цифр ---------- */
.landing--calc .landing__trust {
  background: var(--cp-rule);
  border-color: var(--cp-rule);
  border-radius: 14px;
}
.landing--calc .landing__trust-item { background: var(--cp-white); }
.landing--calc .landing__trust-value {
  font-family: var(--cp-sans);
  font-weight: 800;
  color: var(--cp-ink);
}
.landing--calc .landing__trust-label { color: var(--cp-quiet); }

/* ---------- проза: засечки, как тело статьи ---------- */
.landing--calc .landing__body {
  font-family: var(--cp-serif);
  font-size: clamp(1.0625rem, 1.02rem + .25vw, 1.1875rem);
  line-height: 1.62;
  color: var(--cp-body);
}
.landing--calc .landing__body > h2,
.landing--calc .landing__section-title {
  font-family: var(--cp-sans);
  font-weight: 700;
  font-size: clamp(1.4375rem, 1.24rem + .85vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--cp-ink);
}
.landing--calc .landing__section-title::after { content: none; }
.landing--calc .landing__body strong { color: var(--cp-ink); font-weight: 700; }
.landing--calc .landing__body a { color: var(--cp-accent-ink); text-underline-offset: 2px; }
.landing--calc .landing__body a:hover { color: var(--cp-accent-ink); text-decoration-thickness: 2px; }
.landing--calc .landing__body code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  background: var(--cp-paper-2);
  color: var(--cp-ink);
}

/* ---------- справочник и таблица переходов: таблицы статьи ---------- */
.landing--calc .visa-answers__scroll {
  border-color: var(--cp-rule);
  border-radius: 10px;
  background: var(--cp-white);
}
.landing--calc .visa-answers__table,
.landing--calc .visa-route__table { font-family: var(--cp-sans); color: var(--cp-body); }
.landing--calc .visa-answers__table caption { color: var(--cp-quiet); }
.landing--calc .visa-answers__table thead th,
.landing--calc .visa-route__table thead th {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--cp-quiet);
}
.landing--calc .visa-answers__table th,
.landing--calc .visa-answers__table td,
.landing--calc .visa-route__table th,
.landing--calc .visa-route__table td { border-color: var(--cp-rule); }
.landing--calc .visa-answers__table tbody th,
.landing--calc .visa-route__table tbody th { color: var(--cp-ink); font-weight: 600; }
.landing--calc .visa-answers__table tbody tr:hover { background: var(--cp-paper); }
.landing--calc .visa-answers__asof,
.landing--calc .visa-answers__foot,
.landing--calc .visa-shot figcaption { font-family: var(--cp-sans); color: var(--cp-quiet); }
.landing--calc .visa-shot img { border-radius: 6px; }
.landing--calc .visa-answers__more { border-top-color: var(--cp-rule); }
.landing--calc .visa-answers__more > summary { font-family: var(--cp-sans); color: var(--cp-body); }
.landing--calc .visa-answers__more > summary:hover,
.landing--calc .visa-answers__more[open] > summary { color: var(--cp-accent-ink); }

@media (max-width: 700px) {
  .landing--calc .visa-answers__table tbody th,
  .landing--calc .visa-answers__table thead th:first-child { background: var(--cp-white); }
}

/* ---------- вопросы: плашки с кромкой, как FAQ статьи ---------- */
.landing--calc .landing__faq-list {
  display: grid;
  gap: 10px;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.landing--calc .landing__q,
.landing--calc .landing__q:last-child {
  background: var(--cp-paper-2);
  border: 1px solid var(--cp-rule);
  border-left: 3px solid var(--cp-accent);
  border-radius: 10px;
  transition: background .2s ease, border-color .2s ease;
}
.landing--calc .landing__q:hover { border-color: var(--cp-accent); }
.landing--calc .landing__q[open] {
  background: var(--cp-white);
  box-shadow: 0 2px 12px rgba(22, 32, 46, .06);
}
.landing--calc .landing__q > summary {
  font-family: var(--cp-sans);
  color: var(--cp-ink);
}
.landing--calc .landing__q > summary:hover { color: var(--cp-accent-ink); }
.landing--calc .landing__a {
  font-family: var(--cp-serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--cp-body);
}
.landing--calc .landing__a a { color: var(--cp-accent-ink); }

/* ---------- финал и «куда дальше» ---------- */
.landing--calc .landing__final {
  border: 1px solid var(--cp-rule);
  border-radius: 16px;
  background: var(--cp-paper-2);
}
.landing--calc .landing__final-lead {
  font-family: var(--cp-serif);
  font-size: clamp(1.0625rem, 1.02rem + .25vw, 1.1875rem);
  color: var(--cp-body);
}
.landing--calc .landing__next { border-top-color: var(--cp-rule); }
.landing--calc .landing__next-title {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .09em;
  color: var(--cp-quiet);
}
.landing--calc .landing__next a {
  font-weight: 600;
  color: var(--cp-ink);
  border-bottom-color: var(--cp-rule);
}
.landing--calc .landing__next a:hover { color: var(--cp-accent-ink); border-bottom-color: var(--cp-accent); }