/* Метаплан — вёрстка сайта.
   Подключается третьим, после colors.css и tokens.css. Собственных значений цвета,
   отступа и линии здесь нет: всё берётся из переменных. Радиус 0 и отсутствие теней —
   правило системы, а не настройка. */

:root {
  --mp-font-sans: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
  --mp-font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;

  /* Шкала для экрана из metaplan-typography.md: H1 48 / H2 34 / H3 22 / лид 18 /
     текст 16 / метка 12. Цифра-акцент 86 из раздела 07. */
  --mp-h1:      48px;
  --mp-h2:      34px;
  --mp-h3:      22px;
  --mp-lead:    18px;
  --mp-text:    16px;
  --mp-small:   14px;
  --mp-label:   12px;
  --mp-numeral: 86px;

  /* Кривая и длительности из раздела «Движение и анимация»: 200–300 мс,
     плавное затухание, без пружин и отскоков. */
  --mp-ease:      cubic-bezier(.23, 1, .32, 1);
  --mp-dur-enter: 260ms;
  --mp-dur-hover: 150ms;
  --mp-dur-press: 120ms;
}

@media (max-width: 860px) {
  :root {
    /* Шкала опускается на ступень — тем же приёмом, что и отступы в tokens.css */
    --mp-h1:      34px;
    --mp-h2:      27px;
    --mp-h3:      20px;
    --mp-numeral: 64px;
  }
}

/* ── база ──────────────────────────────────────────────────────────── */

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

html { scroll-behavior: smooth; }

body {
  background: var(--mp-ivory);
  color: var(--mp-graphite);
  font-family: var(--mp-font-sans);
  font-weight: 400;
  font-size: var(--mp-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg, picture { display: block; max-width: 100%; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; }

/* ── типографика ───────────────────────────────────────────────────── */

/* Переносы дефисом в заголовках запрещены: в Light на крупном кегле
   это читается как вордовский документ, а не как набранный титул.
   overflow-wrap оставлен — он разрывает слово только когда оно физически
   не влезает («конфіденційності» на экране 280 px), и делает это без дефиса. */
.h1, .h2, .h3 {
  font-weight: 300;
  color: var(--mp-graphite);
  hyphens: none;
  overflow-wrap: break-word;
}

.h1 { font-size: var(--mp-h1); line-height: 1.15; letter-spacing: -.02em; }
.h2 { font-size: var(--mp-h2); line-height: 1.2; }
.h3 { font-size: var(--mp-h3); line-height: 1.3; font-weight: 500; }

.lead {
  font-size: var(--mp-lead);
  line-height: 1.5;
  color: var(--mp-steel);
  max-width: 60ch;
}

.label {
  display: block;
  font-size: var(--mp-label);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mp-brass-dark);
}

.label--inline { display: inline; }

/* переносит заголовок на равные строки — вместо ручных неразрывных пробелов */
.balance { text-wrap: balance; }

.body { max-width: var(--mp-measure); }
.body + .body { margin-top: var(--mp-4); }

.mono { font-family: var(--mp-font-mono); }
.small { font-size: var(--mp-small); }

/* линейка под заголовком раздела: Графит 2 px */
.rule {
  width: var(--mp-16);
  height: var(--mp-rule);
  margin-top: var(--mp-6);
  background: var(--mp-graphite);
}
/* засечка Латунью 4 px — акцент, ставится штучно */
.rule--accent { height: var(--mp-rule-accent); background: var(--mp-brass); }

/* ── раскладка ─────────────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--mp-container);
  margin-inline: auto;
  padding-inline: var(--mp-margin);
}

.section { padding-block: var(--mp-24); }
.section--sand { background: var(--mp-sand); }
.section--dark { background: var(--mp-graphite); }
.section--tight { padding-block: var(--mp-16); }

.section__head { margin-bottom: var(--mp-16); }

/* На графите роли инвертируются — правило из tokens.css */
.on-dark { color: var(--mp-haze); }
.on-dark .h1, .on-dark .h2, .on-dark .h3 { color: var(--mp-ivory); }
.on-dark .lead { color: var(--mp-haze); }
.on-dark .label { color: var(--mp-brass); }
.on-dark .rule { background: var(--mp-steel); }
.on-dark .rule--accent { background: var(--mp-brass); }
.on-dark a:not(.btn) { color: var(--mp-link-on-dark); text-decoration-color: var(--mp-steel); }
.on-dark a:not(.btn):hover { color: var(--mp-ivory); text-decoration-color: var(--mp-brass); }
.on-dark :focus-visible { outline-color: var(--mp-focus-on-dark); }

/* уголки — фирменный паттерн, плечо со шкалы отступов */
.framed { position: relative; }
.framed::before,
.framed::after {
  content: "";
  position: absolute;
  width: var(--mp-corner-arm);
  height: var(--mp-corner-arm);
  border: var(--mp-corner-weight) solid var(--mp-brass);
  pointer-events: none;
}
.framed::before {
  top: 0;
  left: 0;
  border-right: 0;
  border-bottom: 0;
}
.framed::after {
  bottom: 0;
  right: 0;
  border-left: 0;
  border-top: 0;
}

/* ── кнопки ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--mp-control-h);
  min-width: var(--mp-hit-min);
  padding-inline: var(--mp-6);
  border: var(--mp-rule) solid transparent;
  border-radius: var(--mp-radius);
  box-shadow: var(--mp-shadow);
  font-size: var(--mp-text);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--mp-dur-hover) ease,
    color var(--mp-dur-hover) ease,
    border-color var(--mp-dur-hover) ease,
    transform var(--mp-dur-press) var(--mp-ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.98); }

/* Графит на светлом — основное целевое действие */
.btn--primary {
  background: var(--mp-graphite);
  border-color: var(--mp-graphite);
  color: var(--mp-ivory);
}
/* Слоновая кость на тёмном — то же действие в шапке */
.btn--light {
  background: var(--mp-ivory);
  border-color: var(--mp-ivory);
  color: var(--mp-graphite);
}
/* Контурная на тёмном — мессенджеры в подвале */
.btn--ghost {
  background: none;
  border-color: var(--mp-steel);
  color: var(--mp-ivory);
}
/* Контурная на светлом — каталог */
.btn--outline {
  background: none;
  border-color: var(--mp-graphite);
  color: var(--mp-graphite);
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--mp-coal); border-color: var(--mp-coal); color: var(--mp-ivory); }
  .btn--light:hover   { background: var(--mp-white); border-color: var(--mp-white); color: var(--mp-graphite); }
  .btn--ghost:hover   { background: var(--mp-ivory); border-color: var(--mp-ivory); color: var(--mp-graphite); }
  .btn--outline:hover { background: var(--mp-graphite); border-color: var(--mp-graphite); color: var(--mp-ivory); }
}

.btn[disabled] { background: var(--mp-edge); border-color: var(--mp-edge); color: var(--mp-steel); cursor: default; }
.btn[disabled]:active { transform: none; }

/* ── ссылка «пропустити» ───────────────────────────────────────────── */

.skip {
  position: absolute;
  left: var(--mp-margin);
  top: 0;
  z-index: 10;
  padding: var(--mp-2) var(--mp-4);
  background: var(--mp-ivory);
  color: var(--mp-graphite);
  text-decoration: none;
  transform: translateY(-120%);
}
.skip:focus-visible { transform: translateY(0); }

/* ── шапка сайта ───────────────────────────────────────────────────── */

/* шапка стоит на графите: фокус берёт латунь, а не тёмную латунь — она на графите слабее */
.top :focus-visible { outline-color: var(--mp-focus-on-dark); }

.top {
  position: relative;
  background: var(--mp-graphite);
  border-bottom: var(--mp-rule-hair) solid var(--mp-coal);
}
.top__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* На очень узком экране меню переносится под логотип вместо того, чтобы
     вылезать за край: 320 px не хватает на оба в одну строку. */
  flex-wrap: wrap;
  gap: var(--mp-2) var(--mp-6);
  min-height: var(--mp-16);
  padding-block: var(--mp-4);
}
/* Полный логотип 48 px (--mp-12) задаёт высоту шапки: 48 + 16×2 отступов = 81 px.
   Меню со своими 44 px в неё вписывается. */
.top__logo { display: inline-flex; align-items: center; flex-shrink: 0; min-height: var(--mp-12); }
/* <picture> убирается из раскладки: иначе флекс-элементом становится он,
   его ширина auto, а ширина картинки считается от него — получается ноль */
.top__logo picture { display: contents; }
.top__logo img { height: var(--mp-12); width: auto; }

@media (max-width: 640px) {
  /* здесь <picture> подставляет знак — он квадратный, ширина идёт за высотой */
  .top__logo,
  .top__logo img { min-height: var(--mp-hit-min); height: var(--mp-hit-min); }
}

.nav { display: flex; gap: var(--mp-6); }
.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--mp-hit-min);
  padding-inline: var(--mp-1);
  font-size: var(--mp-label);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mp-haze);
  text-decoration: none;
  border-bottom: var(--mp-rule) solid transparent;
  transition: color var(--mp-dur-hover) ease, border-color var(--mp-dur-hover) ease;
}
.nav__link:hover { color: var(--mp-ivory); text-decoration: none; }
.nav__link[aria-current="page"] { color: var(--mp-ivory); border-bottom-color: var(--mp-brass); }

@media (max-width: 480px) {
  .top__inner { min-height: auto; }
  .nav { gap: var(--mp-4); }
}

/* ── первый экран ──────────────────────────────────────────────────── */

.hero { position: relative; background: var(--mp-graphite); overflow: hidden; }

.hero__media { position: absolute; inset: 0; }
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; }

/* Затемнение вправо: гарантирует контраст текста, а не «на глаз».
   Само изображение при этом не двигается и не обрабатывается. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(22, 24, 26, 0) 0%,
    rgba(22, 24, 26, 0) 34%,
    rgba(22, 24, 26, .55) 58%,
    rgba(22, 24, 26, .85) 100%
  );
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mp-16);
  align-items: center;
  min-height: clamp(540px, 44vw, 720px);
  padding-block: var(--mp-24);
}
.hero__text { grid-column: 2; }
.hero__title { margin-top: var(--mp-6); }
.hero__lead { margin-top: var(--mp-6); }
/* .cta — абзац с кнопкой, общий для страниц */
.cta { margin-top: var(--mp-12); }
.hero__since {
  margin-top: var(--mp-8);
  font-size: var(--mp-small);
  color: var(--mp-haze);
}

@media (max-width: 860px) {
  /* Вертикального кадра нет — кадр показывается целиком сверху,
     текст ложится под ним на графите. Кадрирование ломает композицию. */
  .hero__media { position: static; }
  .hero__media picture { height: auto; }
  .hero__media img { height: auto; }
  .hero__scrim {
    inset: auto 0 0 0;
    height: 45%;
    background: linear-gradient(180deg, rgba(22, 24, 26, 0) 0%, var(--mp-graphite) 100%);
  }
  .hero__inner {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-block: var(--mp-12) var(--mp-16);
  }
  .hero__text { grid-column: 1; }
  /* без ограничения мера заголовка на планшете уезжает за 40 знаков */
  .hero__title { max-width: 22ch; }
}

/* ── полоса аудитории ──────────────────────────────────────────────── */

.audience { padding-block: var(--mp-12); }
.audience__text { max-width: var(--mp-measure); color: var(--mp-steel); }
.audience__text b { font-weight: 400; color: var(--mp-graphite); }

/* ── второй экран: технико-типографический ─────────────────────────── */

.spec__grid {
  display: grid;
  /* поровну: при 7/5 колонка скетча заметно уже текстовой, и горизонтальный
     кадр в ней мельчает раньше, чем экран успевает сузиться */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--mp-16);
  align-items: center;
}
.spec__lead { margin-top: var(--mp-8); }
/* У скетча настоящая альфа: фона нет, поэтому на тёмной секции он не читается
   прямоугольником и рамка ему не нужна.
   Кадр горизонтальный (1176×885), и на всю колонку он даёт 576×434 — это и шире,
   и ниже прежнего вертикального 475×528. Ограничивать ширину больше нечем:
   именно высота раньше раздувала секцию, а её тут нет. */
.spec { padding-block: var(--mp-12); }
.spec__drawing { width: 100%; }
.spec__drawing img { width: 100%; height: auto; }

@media (max-width: 860px) {
  .spec__grid { grid-template-columns: 1fr; gap: var(--mp-12); }
}

/* ── сдвоенный блок: «Знайомо?» и «Що натомість» ───────────────────── */

.ledger__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--mp-16);
}
.ledger__head { align-self: end; padding-bottom: var(--mp-6); }
.ledger__item {
  align-self: start;
  padding-block: var(--mp-6);
  border-top: var(--mp-rule-hair) solid var(--mp-edge);
}

/* Колонки различаются по весу, иначе боль и ответ весят одинаково
   и глаз не понимает, где что. Разделено средствами системы: боли
   приглушены Сталью, ответы плотные Графитом. */
.ledger__head--pain,
.ledger__item--pain { color: var(--mp-steel); }
.ledger__head--fix,
.ledger__item--fix  { color: var(--mp-graphite); }

/* одного цвета мало: ответы дополнительно поднимаются белой карточкой.
   align-self: stretch держит колонку сплошной, когда строки разной высоты */
.ledger__head--fix,
.ledger__item--fix {
  align-self: stretch;
  background: var(--mp-white);
  padding-inline: var(--mp-8);
}
.ledger__head--fix {
  display: flex;
  align-items: flex-end;
  padding-top: var(--mp-8);
}
.ledger__item--fix:last-child { padding-bottom: var(--mp-8); }

/* Пункт стоит против пункта: строка сетки задаётся явно, поэтому
   в разметке сначала идут все боли, затем все ответы — так блок
   правильно читается на телефоне, когда колонка одна. */
@media (min-width: 861px) {
  .ledger__grid > :nth-child(1)  { grid-area: 1 / 1; }
  .ledger__grid > :nth-child(2)  { grid-area: 2 / 1; }
  .ledger__grid > :nth-child(3)  { grid-area: 3 / 1; }
  .ledger__grid > :nth-child(4)  { grid-area: 4 / 1; }
  .ledger__grid > :nth-child(5)  { grid-area: 5 / 1; }
  .ledger__grid > :nth-child(6)  { grid-area: 6 / 1; }
  .ledger__grid > :nth-child(7)  { grid-area: 1 / 2; }
  .ledger__grid > :nth-child(8)  { grid-area: 2 / 2; }
  .ledger__grid > :nth-child(9)  { grid-area: 3 / 2; }
  .ledger__grid > :nth-child(10) { grid-area: 4 / 2; }
  .ledger__grid > :nth-child(11) { grid-area: 5 / 2; }
  .ledger__grid > :nth-child(12) { grid-area: 6 / 2; }
}

@media (max-width: 860px) {
  .ledger__grid { grid-template-columns: 1fr; }
  .ledger__head { padding-top: var(--mp-12); }
  .ledger__grid > :nth-child(1) { padding-top: 0; }
}

/* закрывающая строка: латунная засечка сверху, под ней плотный текст.
   Один и тот же приём в «Знайомо?» и в «Про компанію» — это система,
   а не разовое украшение. На всю ширину: строка отвечает на обе колонки. */
.closer { margin-top: var(--mp-16); }
.closer .rule { margin-top: 0; margin-bottom: var(--mp-6); }
.about__col .closer { margin-top: var(--mp-12); }

/* ── про компанію ──────────────────────────────────────────────────── */

.about__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--mp-16);
}
.about__col > * + * { margin-top: var(--mp-8); }
/* wrap — на вырост: сейчас строка укладывается и на 320 px, но третий бренд
   без него начал бы сжимать названия, а не переноситься. */
.about__brands { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--mp-3); }
.about__dash { color: var(--mp-haze); }   /* Сталь на графите — 3,1:1, не проходит */
/* Точка между брендами, а не запятая: запятая села бы на базовую линию вплотную
   к подчёркиванию ссылки. Тем же Дымком, что и тире, — разделители не спорят
   с названиями.
   Точка живёт в псевдоэлементе самого бренда, а не отдельным элементом: иначе
   при переносе на 320 px она оставалась бы висеть в конце строки, а название
   уезжало без неё. Заодно разметка симметричная — четвёртый бренд добавляется
   одной строкой, про разделитель помнить не нужно. */
.about__brand + .about__brand::before {
  content: "·";
  margin-right: var(--mp-3);
  color: var(--mp-haze);
}

.figure {
  align-self: start;
  padding-top: var(--mp-6);
}
/* засечка Латунью — 64 px, не на всю ширину: правило раздела 07 */
.figure::before {
  content: "";
  display: block;
  width: var(--mp-16);
  height: var(--mp-rule-accent);
  margin-bottom: var(--mp-6);
  background: var(--mp-brass);
}
.figure__over {
  display: block;
  font-size: var(--mp-label);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mp-haze);
}
.figure__value {
  display: block;
  margin-block: var(--mp-2);
  font-size: var(--mp-numeral);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--mp-brass);
}
.figure__caption { display: block; color: var(--mp-haze); }

@media (max-width: 860px) {
  .about__grid { grid-template-columns: 1fr; gap: var(--mp-12); }
}

/* ── форма ─────────────────────────────────────────────────────────── */

.form { max-width: 760px; }
.form__intro { margin-top: var(--mp-8); }
.form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mp-6);
  margin-top: var(--mp-12);
}
.form__foot { margin-top: var(--mp-12); }
.form__submit { margin-top: var(--mp-8); }
.form__note { margin-top: var(--mp-4); font-size: var(--mp-small); color: var(--mp-steel); }

/* ── згода на обробку даних ────────────────────────────────────────── */

.consent {
  max-width: 60ch;
  padding: var(--mp-3) var(--mp-4);
  /* прозрачная засечка держит место: при ошибке она перекрашивается,
     и строка не прыгает вбок */
  border-left: var(--mp-rule-accent) solid transparent;
}
.consent.is-invalid {
  background: var(--mp-brick-tint);
  border-left-color: var(--mp-brick);
}

.consent__label {
  display: flex;
  align-items: flex-start;
  gap: var(--mp-3);
  /* нажатие ловит вся строка, а не только квадрат; min-height держит
     44 px даже когда текст согласия умещается в одну строку */
  min-height: var(--mp-hit-min);
  cursor: pointer;
}

.consent__box {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  appearance: none;
  background: var(--mp-white);
  border: var(--mp-rule-hair) solid var(--mp-edge);
  border-radius: var(--mp-radius);
  cursor: pointer;
  transition: background-color var(--mp-dur-hover) ease, border-color var(--mp-dur-hover) ease;
}
/* квадрат 20 px, зона нажатия 44×44 — требование к контролам из токенов */
.consent__box::before {
  content: "";
  position: absolute;
  inset: calc((var(--mp-hit-min) - 20px) / -2);
}
.consent__box:hover { border-color: var(--mp-haze); }
.consent__box:checked {
  background: var(--mp-graphite);
  border-color: var(--mp-graphite);
}
.consent__box:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--mp-ivory);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.consent.is-invalid .consent__box { border-color: var(--mp-brick); }

.consent__text {
  font-size: var(--mp-small);
  line-height: 1.5;
  /* Графит, а не Сталь: на плашке ошибки Сталь даёт 4,47 — ниже порога */
  color: var(--mp-graphite);
}
/* Латунь тёмная на плашке ошибки — 4,3. В этом состоянии ссылка уходит
   в Графит, а подчёркивание берёт Кирпич, чтобы связать её с ошибкой. */
.consent.is-invalid .consent__text a {
  color: var(--mp-graphite);
  text-decoration-color: var(--mp-brick);
}

.field { display: flex; flex-direction: column; gap: var(--mp-2); }
.field--wide { grid-column: 1 / -1; }
.field__label {
  display: block;
  min-height: 34px;   /* две строки подписи: ряд не разъезжается, если одна из них длинная */
  font-size: var(--mp-label);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mp-steel);
}
.field__optional { font-weight: 400; letter-spacing: .06em; text-transform: none; color: var(--mp-haze); }

.field__control {
  width: 100%;
  min-height: var(--mp-control-h);
  padding: var(--mp-2) var(--mp-3);
  background: var(--mp-white);
  border: var(--mp-rule-hair) solid var(--mp-edge);
  border-left: var(--mp-rule-accent) solid var(--mp-edge);
  border-radius: var(--mp-radius);
  font-family: inherit;
  font-size: var(--mp-text);
  line-height: 1.5;
  color: var(--mp-graphite);
  transition: border-color var(--mp-dur-hover) ease, background-color var(--mp-dur-hover) ease;
}
.field__control:hover { border-color: var(--mp-haze); }
.field__control::placeholder { color: var(--mp-haze); }

select.field__control {
  appearance: none;
  padding-right: var(--mp-8);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mp-steel) 50%),
    linear-gradient(135deg, var(--mp-steel) 50%, transparent 50%);
  background-position: right var(--mp-4) center, right calc(var(--mp-4) - 5px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.field__error { display: none; font-size: var(--mp-small); line-height: 1.4; color: var(--mp-brick); }

.field.is-invalid .field__control { background: var(--mp-brick-tint); border-color: var(--mp-brick); }
.field.is-invalid .field__error { display: block; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__status { margin-top: var(--mp-6); font-size: var(--mp-small); color: var(--mp-brick); max-width: 60ch; }
.form__status:empty { display: none; }

@media (max-width: 640px) {
  /* два поля в ряд на телефоне не помещаются — колонка одна */
  .form__grid { grid-template-columns: 1fr; }
}

.done {
  max-width: 60ch;
  padding: var(--mp-8);
  background: var(--mp-white);
  border-left: var(--mp-rule-accent) solid var(--mp-moss);
}
.done b { font-weight: 500; }

/* ── карточка бренду ───────────────────────────────────────────────── */

.card {
  background: var(--mp-white);
  border: var(--mp-rule-hair) solid var(--mp-edge);
  padding: var(--mp-16);
}
/* Бренды идут списком: второй добавляется записью, а не переверсткой */
.cards { display: grid; gap: var(--mp-12); }
/* блочный: у инлайнового изображения вертикальные поля попадают в лайн-бокс
   и слот перестаёт быть ровно 44 px */
.card__logo { display: block; height: 44px; width: auto; }
/* Словесный знак равняется по кеглю букв, а не по габариту файла: у Liebherr
   буквы занимают всю высоту SVG, у FRANKE — 42 %, остальное красная плашка.
   По высоте файла они разъехались бы вдвое. 44 × 0,42 ≈ 18 — так у обоих
   знаков одинаковый рост букв и почти одинаковая ширина (145 против 135).
   Слот остаётся 44 px, разницу добирают внутренние отступы: внешние схлопнулись
   бы с отступом сетки, и текст под логотипами встал бы на разной высоте. */
.card__logo--word { padding-block: 13px; }
.card__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--mp-16);
  margin-top: var(--mp-12);
}
.card__body > * + * { margin-top: var(--mp-6); }
/* каталог отделён волосяной линией — тем же приёмом, что строки в ведомости */
.card__aside { border-left: var(--mp-rule-hair) solid var(--mp-edge); padding-left: var(--mp-8); }
.card__note { margin-top: var(--mp-3); font-size: var(--mp-small); color: var(--mp-steel); }
.card__aside .cta { margin-top: var(--mp-8); }

@media (max-width: 860px) {
  .card { padding: var(--mp-8); }
  .card__grid { grid-template-columns: 1fr; gap: var(--mp-12); }
  .card__aside { border-left: 0; padding-left: 0; border-top: var(--mp-rule-hair) solid var(--mp-edge); padding-top: var(--mp-8); }
}

/* ── подвал ────────────────────────────────────────────────────────── */

.foot { background: var(--mp-graphite); border-top: var(--mp-rule-hair) solid var(--mp-coal); }
.foot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--mp-16);
  padding-block: var(--mp-16);
}
.foot__actions { display: flex; flex-wrap: wrap; gap: var(--mp-4); margin-top: var(--mp-6); }
.on-dark a.foot__contact {
  display: inline-block;
  margin-top: var(--mp-6);
  font-size: var(--mp-lead);
  color: var(--mp-ivory);
  text-decoration: none;
}
.on-dark a.foot__contact:hover { color: var(--mp-brass); text-decoration: none; }
.foot__filter { margin-top: var(--mp-6); max-width: 44ch; }
.foot__logo img { height: 44px; width: auto; }
.foot__legal { margin-top: var(--mp-8); font-size: var(--mp-small); }
.foot__legal > * + * { margin-top: var(--mp-2); }

.foot__bar {
  border-top: var(--mp-rule-hair) solid var(--mp-coal);
  padding-block: var(--mp-6);
  font-size: var(--mp-small);
}

@media (max-width: 860px) {
  .foot__grid { grid-template-columns: 1fr; gap: var(--mp-12); }
}

/* ── документная страница (політика, 404) ──────────────────────────── */

/* в юридическом тексте длинные адреса и почта: на узком экране
   переносим их, иначе строка вылезает за край */
.doc { max-width: var(--mp-measure); overflow-wrap: break-word; }
.doc > * + * { margin-top: var(--mp-6); }
.doc__sub { font-size: var(--mp-h3); font-weight: 500; margin-top: var(--mp-12); }
.doc__meta { font-size: var(--mp-small); color: var(--mp-steel); }
.doc__list { padding-left: var(--mp-6); list-style: disc; }
.doc__list li + li { margin-top: var(--mp-2); }

.placeholder > * + * { margin-top: var(--mp-4); }
.placeholder {
  padding: var(--mp-8);
  background: var(--mp-brass-tint);
  border-left: var(--mp-rule-accent) solid var(--mp-brass);
}

.err__code {
  font-family: var(--mp-font-mono);
  font-size: var(--mp-numeral);
  font-weight: 400;
  line-height: 1;
  color: var(--mp-brass);
}

/* ── появление блоков при скролле ──────────────────────────────────── */
/* Класс .js ставится инлайн-скриптом: без JS блоки видны сразу. */

.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--mp-dur-enter) var(--mp-ease),
    transform var(--mp-dur-enter) var(--mp-ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* ── системная настройка «меньше движения» ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}