/* Лендинг «Промпты для Авито». Все значения — только из tokens.css.
   Числом пишется единственное: брейкпоинт в @media — CSS не подставляет var() в медиазапросы. */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-milk);
  color: var(--color-ink);
  font-family: var(--font-base);
  font-size: var(--size-body);
  line-height: var(--line-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; letter-spacing: var(--track-display); line-height: var(--line-tight); }
p { margin: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.container {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

/* ── Общие элементы ───────────────────────────────────────── */

.kicker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  color: inherit;
  font-size: var(--size-kicker);
  font-weight: var(--weight-black);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
}
.kicker::before {
  width: var(--space-6);
  height: 2px;
  background: currentColor;
  content: "";
}

/* Маркерная подсветка внутри заголовка */
.accent {
  display: inline;
  padding-inline: 0.04em;
  background: linear-gradient(transparent 14%, var(--color-lime) 14%, var(--color-lime) 88%, transparent 88%);
}
.accent--blue { color: var(--color-blue); background: none; }

.btn {
  display: inline-flex;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  padding: 0 var(--space-5);
  border: var(--border-thin) solid var(--color-ink);
  border-radius: var(--radius-none);
  color: var(--color-ink);
  font-family: inherit;
  font-size: var(--size-small);
  font-weight: var(--weight-black);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  cursor: pointer;
  transition: transform var(--dur-fast) ease, background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.btn:hover, .btn:focus-visible { transform: translateY(var(--lift)); }
.btn--accent { background: var(--color-lime); }
.btn--line   { background: transparent; }
.btn--line:hover { background: var(--color-paper); }
.btn--dark   { border-color: var(--color-ink); background: var(--color-ink); color: var(--color-inverse); }
.btn--paper  { border-color: var(--color-paper); background: var(--color-paper); color: var(--color-ink); }
.btn--ghost  { border-color: currentColor; background: transparent; color: var(--color-inverse); }
.btn--ghost:hover { background: var(--color-paper); color: var(--color-ink); }
.btn--wide   { width: min(100%, 420px); justify-content: space-between; }
.btn__arrow  { font-style: normal; }

/* ── Слот: сюда встанет контент от клиента ────────────────── */

.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-5);
  border: var(--border-thin) dashed var(--color-slot-border);
  background: var(--color-slot-bg);
  color: var(--color-slot-text);
  text-align: center;
}
.slot__label {
  font-size: var(--size-kicker);
  font-weight: var(--weight-black);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
}
.slot__hint { max-width: var(--text-width); font-size: var(--size-small); line-height: var(--line-base); }
.slot--media     { aspect-ratio: var(--media-ratio); }
.slot--portrait  { aspect-ratio: var(--media-ratio-portrait); }
.slot--square    { aspect-ratio: 1; }
.slot--inline    { display: inline-flex; padding: var(--space-2) var(--space-3); }
.slot--on-dark   { border-color: var(--color-on-dark-border); background: var(--color-on-dark-bg); color: var(--color-on-dark); }

/* ── Шапка ────────────────────────────────────────────────── */

.lp-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: var(--border-thin) solid var(--color-line-soft);
  background: var(--color-milk);
}
.lp-header__inner {
  display: flex;
  min-height: var(--header-height);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.lp-header__logo {
  font-size: var(--size-small);
  font-weight: var(--weight-black);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
}
.lp-nav { display: flex; align-items: center; gap: var(--space-6); }
.lp-nav__link {
  color: var(--color-muted);
  font-size: var(--size-small);
  font-weight: var(--weight-semi);
  transition: color var(--dur-fast) ease;
}
.lp-nav__link:hover { color: var(--color-ink); }
.lp-header .btn { min-height: 46px; }

/* ── Секции ───────────────────────────────────────────────── */

.section { padding: var(--space-10) 0; }
.section--paper { background: var(--color-paper); }
.section--milk  { background: var(--color-milk); }
.section--dark  { background: var(--color-dark); color: var(--color-inverse); }
.section--tight { padding: var(--space-9) 0; }

.section-head {
  display: grid;
  margin-bottom: var(--space-8);
  grid-template-columns: 1.2fr 0.8fr;
  align-items: end;
  gap: var(--space-8);
}
.section-head .kicker { grid-column: 1 / -1; margin-bottom: 0; }
.section-head h2 { font-size: var(--size-h2); font-weight: var(--weight-semi); letter-spacing: -0.065em; }
.section-head__note { max-width: 470px; color: var(--color-muted); line-height: 1.7; }
.section--dark .section-head__note { color: var(--color-on-dark-muted); }

/* ── Экран 1: оффер ───────────────────────────────────────── */

.hero { position: relative; overflow: hidden; padding: var(--space-9) 0 var(--space-10); }
.hero::before {
  position: absolute;
  top: var(--space-8);
  right: 5%;
  width: 24vw;
  height: 24vw;
  border: var(--border-thin) solid var(--color-line-soft);
  border-radius: 50%;
  content: "";
}
.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(390px, 0.88fr);
  align-items: center;
  gap: var(--space-8);
}
.hero h1 {
  max-width: 840px;
  font-size: var(--size-display);
  font-weight: var(--weight-bold);
  letter-spacing: -0.075em;
  line-height: var(--line-display);
}
.hero__lead {
  max-width: var(--text-width);
  margin-top: var(--space-7);
  color: var(--color-muted);
  font-size: var(--size-lead);
  line-height: var(--line-lead);
}
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-7); }
.hero__route {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
  color: var(--color-muted);
  font-size: var(--size-kicker);
  font-weight: var(--weight-black);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.hero__route i { color: var(--color-ink); font-style: normal; }
.hero__route span:last-child { color: var(--color-blue); }

/* Карточка-превью с жёсткой тенью */
.promo-card {
  border: var(--border-thin) solid var(--color-ink);
  background: var(--color-paper);
  box-shadow: var(--shadow-hard);
  transition: transform 240ms ease, box-shadow 240ms ease;
}
.promo-card:hover { transform: translate(-5px, -5px); box-shadow: var(--shadow-hard-hover); }
.promo-card__media { border-bottom: var(--border-thin) solid var(--color-ink); }
.promo-card__media .slot { border: 0; }
.promo-card__content { padding: var(--space-6); }
.promo-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.promo-card__tags span {
  padding: var(--space-1) var(--space-2);
  border: var(--border-thin) solid var(--color-line);
  font-size: 9px;
  font-weight: var(--weight-black);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.promo-card__tags span:first-child { border-color: var(--color-ink); background: var(--color-lime); }
.promo-card__title { margin-top: var(--space-6); font-size: var(--size-h3); font-weight: var(--weight-bold); letter-spacing: var(--track-tight); line-height: var(--line-tight); }
.promo-card__note { margin-top: var(--space-2); color: var(--color-muted); font-size: var(--size-small); }
.promo-card dl {
  display: grid;
  margin: var(--space-6) 0 0;
  padding-top: var(--space-5);
  border-top: var(--border-thin) solid var(--color-line);
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.promo-card dt { font-size: var(--size-h4); font-weight: var(--weight-black); }
.promo-card dd { margin: var(--space-1) 0 0; color: var(--color-muted); font-size: 9px; letter-spacing: var(--track-caps); text-transform: uppercase; }

/* ── Что получишь ─────────────────────────────────────────── */

.benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: var(--border-thin) solid var(--color-ink); }
.benefit {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-7);
  border-right: var(--border-thin) solid var(--color-ink);
  border-bottom: var(--border-thin) solid var(--color-ink);
}
.benefit:nth-child(2n) { border-right: 0; }
.benefit__num { font-size: var(--size-kicker); font-weight: var(--weight-black); letter-spacing: var(--track-kicker); text-transform: uppercase; }
.benefit h3 { font-size: var(--size-h4); font-weight: var(--weight-black); letter-spacing: var(--track-tight); }
.benefit p { color: var(--color-muted); line-height: 1.7; }
/* Подсветка бежит за прокруткой: лаймовой становится карточка у середины экрана.
   Класс вешает scripts.js, он же ставит на сетку data-zhivaya */
.benefit { transition: background var(--dur-slow) var(--ease-out); }
.benefit--aktivna { background: var(--color-lime); }
.benefit--aktivna p { color: var(--color-ink); opacity: 0.75; }

/* Пока скрипт не отработал (или отключён JS) — лайм по диагонали, как было */
.benefits:not([data-zhivaya]) .benefit:nth-child(2),
.benefits:not([data-zhivaya]) .benefit:nth-child(3) { background: var(--color-lime); }
.benefits:not([data-zhivaya]) .benefit:nth-child(2) p,
.benefits:not([data-zhivaya]) .benefit:nth-child(3) p { color: var(--color-ink); opacity: 0.75; }

/* ── Разрывная плашка ─────────────────────────────────────── */

.band { padding: var(--space-10) 0; color: var(--color-inverse); background: var(--color-dark); }
.band--blue { background: var(--color-blue); }
.band h2 {
  max-width: 1160px;
  margin: var(--space-8) 0;
  font-size: var(--size-band);
  font-weight: var(--weight-semi);
  letter-spacing: -0.075em;
  line-height: 0.9;
}
.band__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.band__actions .btn { min-width: 320px; }

/* ── Состав продукта ──────────────────────────────────────── */

.inside__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-8); align-items: start; }
.inside-list { border-top: var(--border-thin) solid var(--color-ink); }
.inside-item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: var(--border-thin) solid var(--color-line);
}
.inside-item__num { color: var(--color-muted); font-size: var(--size-kicker); font-weight: var(--weight-black); letter-spacing: var(--track-kicker); }
.inside-item h3 { font-size: var(--size-h4); font-weight: var(--weight-black); letter-spacing: var(--track-tight); }
.inside-item p { margin-top: var(--space-2); color: var(--color-muted); font-size: var(--size-small); line-height: 1.7; }
.inside__demo { border: var(--border-thin) solid var(--color-ink); background: var(--color-paper); box-shadow: var(--shadow-hard-sm); }
.inside__demo .slot { border: 0; }
.inside__demo-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); border-top: var(--border-thin) solid var(--color-ink); }
.inside__demo-foot span { color: var(--color-muted); font-size: var(--size-small); }

/* ── Цена ─────────────────────────────────────────────────── */

.price__grid { display: grid; grid-template-columns: 1fr 0.85fr; gap: var(--space-8); align-items: center; }
.price__list { display: grid; gap: var(--space-4); }
.price__list li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: var(--border-thin) solid var(--color-on-dark-line); }
.price__list i { color: var(--color-lime); font-style: normal; font-weight: var(--weight-black); }
.price__list b { font-weight: var(--weight-black); }
.price__list p { color: var(--color-on-dark-muted); font-size: var(--size-small); }
.price__card { padding: var(--space-7); border: var(--border-thin) solid var(--color-lime); background: var(--color-dark-soft); }
.price__updated { color: var(--color-on-dark-dim); font-size: var(--size-kicker); font-weight: var(--weight-black); letter-spacing: var(--track-caps); text-transform: uppercase; }
.price__row { display: flex; align-items: baseline; gap: var(--space-5); margin: var(--space-5) 0; }
.price__now { font-size: var(--size-price); font-weight: var(--weight-bold); letter-spacing: var(--track-display); line-height: 1; }
.price__old { color: var(--color-price-old); font-size: var(--size-h3); font-weight: var(--weight-semi); text-decoration: line-through; }
.price__card .btn { width: 100%; }
.price__fine { margin-top: var(--space-4); color: var(--color-on-dark-faint); font-size: var(--size-small); text-align: center; }

/* ── Карусели: отзывы и бонусы ────────────────────────────── */

.rail__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-7); }
.rail__nav { display: flex; gap: var(--space-2); }
.rail__btn {
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  border: var(--border-thin) solid var(--color-ink);
  background: transparent;
  color: var(--color-ink);
  font-family: inherit;
  font-size: var(--size-h4);
  cursor: pointer;
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}
.rail__btn:hover { background: var(--color-lime); }
.section--dark .rail__btn { border-color: var(--color-on-dark-border); color: var(--color-inverse); }
.section--dark .rail__btn:hover { border-color: var(--color-lime); background: var(--color-lime); color: var(--color-ink); }
.rail__track {
  display: grid;
  align-items: stretch;
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--grid-min-sm), 1fr);
  gap: var(--space-5);
  overflow-x: auto;
  padding-bottom: var(--space-4);
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.rail__track--wide { grid-auto-columns: minmax(var(--grid-min-md), 1fr); }
/* Карточки в ряду одной высоты: обложка держит пропорцию, подпись добирает остаток.
   Без этого соседние карточки разъезжаются по длине подписи */
.rail__item {
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  border: var(--border-thin) solid var(--color-ink);
  background: var(--color-paper);
}
.rail__item .video { flex: none; }
.rail__caption { flex: 1; }
/* Карточка остаётся светлой и на тёмной секции — значит и текст в ней чернильный,
   иначе подпись под видео сливается с фоном карточки */
.section--dark .rail__item { color: var(--color-ink); }
.rail__item .slot { border: 0; }
.rail__caption { padding: var(--space-4); border-top: var(--border-thin) solid var(--color-ink); font-size: var(--size-small); font-weight: var(--weight-semi); }
.rail__caption span { display: block; margin-top: var(--space-1); color: var(--color-muted); font-size: var(--size-small); font-weight: var(--weight-regular); }

/* ── Автор ────────────────────────────────────────────────── */

.author__quote {
  max-width: 1160px;
  margin: var(--space-8) 0;
  font-size: var(--size-band);
  font-style: italic;
  font-weight: var(--weight-semi);
  letter-spacing: -0.055em;
  line-height: 1.02;
}
.author__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-top: var(--space-6);
  border-top: var(--border-thin) solid var(--color-on-dark-line);
}
.author__card { display: flex; align-items: center; gap: var(--space-5); }
/* Фото небольшое — размер задан жёстко, чтобы оно никогда не растягивалось под колонку */
.author__photo {
  width: 128px;
  height: 128px;
  flex: none;
  border: var(--border-thin) solid var(--color-ink);
  box-shadow: var(--shadow-hard-sm);
  object-fit: cover;
}
.author__sign { font-size: var(--size-small); opacity: 0.75; }
.author__name { margin-top: var(--space-1); font-size: var(--size-h4); font-weight: var(--weight-black); }
.author__role { margin-top: var(--space-1); font-size: var(--size-small); opacity: 0.75; }

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

.lp-footer { padding: var(--space-8) 0; border-top: var(--border-thin) solid var(--color-line); background: var(--color-milk); }
.lp-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--grid-min-sm), 1fr)); gap: var(--space-6); }
.lp-footer h4 { margin-bottom: var(--space-4); font-size: var(--size-kicker); font-weight: var(--weight-black); letter-spacing: var(--track-kicker); text-transform: uppercase; }
.lp-footer p, .lp-footer li { color: var(--color-muted); font-size: var(--size-small); line-height: 1.9; }
.lp-footer a:hover { color: var(--color-ink); }
.lp-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-7); padding-top: var(--space-5); border-top: var(--border-thin) solid var(--color-line); color: var(--color-muted); font-size: var(--size-small); }

/* ── Липкая кнопка ────────────────────────────────────────── */

.sticky-cta {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 50;
  box-shadow: var(--shadow-hard-sm);
}
.sticky-cta[hidden] { display: none; }

.promo-card__links a:hover { border-color: var(--color-ink); background: var(--color-lime); }

/* ── Видео: обложка-фасад, плеер подключается по клику ────── */

.video { position: relative; display: block; width: 100%; overflow: hidden; background: var(--color-ink); }
.video__cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
  transition: filter var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.video:hover .video__cover { filter: grayscale(0) contrast(1); transform: scale(1.03); }
.video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.video__play::before {
  display: flex;
  width: 74px;
  height: 74px;
  align-items: center;
  justify-content: center;
  border: var(--border-thin) solid var(--color-ink);
  background: var(--color-lime);
  color: var(--color-ink);
  content: "▶";
  font-size: var(--size-h4);
  transition: transform var(--dur-fast) ease;
}
.video__play:hover::before { transform: scale(1.08); }
.video__badge {
  position: absolute;
  right: var(--space-3);
  bottom: var(--space-3);
  padding: var(--space-1) var(--space-2);
  background: var(--color-ink);
  color: var(--color-inverse);
  font-size: 9px;
  font-weight: var(--weight-black);
  letter-spacing: var(--track-caps);
}
.video iframe { width: 100%; height: 100%; border: 0; }
.video--ratio { aspect-ratio: var(--media-ratio); }
/* Слот-заглушка занимает всю площадь пропорции, а не липнет к верху */
.video > .slot { height: 100%; }
.video--portrait { aspect-ratio: 3 / 4; }

/* Переключатель площадок */
.video-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.video-tabs button {
  padding: var(--space-2) var(--space-3);
  border: var(--border-thin) solid var(--color-line);
  background: transparent;
  color: var(--color-ink);
  font-family: inherit;
  font-size: var(--size-small);
  font-weight: var(--weight-black);
  cursor: pointer;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.video-tabs button:hover { border-color: var(--color-ink); background: var(--color-lime); }
.video-tabs button[aria-pressed="true"] { border-color: var(--color-ink); background: var(--color-lime); }

/* ── Правки после первой сборки ───────────────────────────── */
/* Якорь не должен уезжать под липкую шапку */
section[id], main[id] { scroll-margin-top: var(--header-height); }
/* Заголовок карусели живёт по тем же правилам, что и заголовок секции */
.rail__head h2 { font-size: var(--size-h2); font-weight: var(--weight-semi); letter-spacing: -0.065em; }
/* Лаймовая подсветка на тёмном фоне: текст внутри остаётся чернильным */
.section--dark .accent, .band .accent { color: var(--color-ink); }
.band--blue .accent--blue { color: var(--color-lime); }
/* Слот с ссылкой на оплату внутри карточки цены */
.price__slot { margin-top: var(--space-4); }
/* На синем фоне слот теряется — рамку делаем плотнее */
.band--blue .slot--on-dark { border-color: var(--color-paper); }

/* Ссылка-пустышка: видно, что адрес ещё не подставлен */
[data-slot-link] { text-decoration: underline dashed; text-underline-offset: 4px; }
/* Превью продукта не должно быть выше списка состава — иначе под списком дыра */
/* height: auto обязателен — иначе атрибут height у <img> перебивает aspect-ratio */
.inside__demo-shot { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; }
.inside__grid { grid-template-columns: 1.15fr 0.85fr; }
/* Заголовок карусели оставляет место стрелкам справа */
.rail__head h2 { max-width: 900px; }
.rail__head > div:first-child { flex: 1 1 auto; min-width: 0; }
/* На кнопке пунктир не нужен — рядом стоит явный слот */
.btn[data-slot-link] { text-decoration: none; }

/* ── Адаптив ──────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .hero__grid, .inside__grid, .price__grid { grid-template-columns: 1fr; }
  .promo-card, .inside__demo { width: min(760px, 100%); justify-self: start; }
  .section-head { grid-template-columns: 1fr; gap: var(--space-5); align-items: start; }
  .section { padding: var(--space-9) 0; }
  .band { padding: var(--space-9) 0; }
}

@media (max-width: 760px) {
  .hero { padding-top: var(--space-7); }
  .hero::before { display: none; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn, .band__actions .btn { width: 100%; min-width: 0; }
  .benefits { grid-template-columns: 1fr; }
  .benefit { padding: var(--space-6) var(--space-5); border-right: 0; }
  /* Столбик без скрипта: лайм на второй и четвёртой */
  .benefits:not([data-zhivaya]) .benefit:nth-child(3) { background: transparent; }
  .benefits:not([data-zhivaya]) .benefit:nth-child(3) p { color: var(--color-muted); opacity: 1; }
  .benefits:not([data-zhivaya]) .benefit:nth-child(4) { background: var(--color-lime); }
  .benefits:not([data-zhivaya]) .benefit:nth-child(4) p { color: var(--color-ink); opacity: 0.75; }
  .promo-card, .inside__demo { box-shadow: 7px 7px 0 var(--color-ink); }
  .lp-nav { display: none; }
  .price__card { padding: var(--space-5); }
  .sticky-cta { right: var(--space-4); left: var(--space-4); bottom: var(--space-4); }
}

/* Ссылки на площадки под превью-видео */
.promo-card__links { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }
.promo-card__links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border-thin) solid var(--color-line);
  font-size: var(--size-small);
  font-weight: var(--weight-black);
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}