/* Вёрстка страниц сканера. Значения — только из tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 var(--fs-3)/1.55 var(--font);
}
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-chip);
}

/* Отступы шага сетки — классом, а не атрибутом style: значения одни и те
   же по всем страницам, и менять их надо в одном месте. */
.mt-1 { margin-top: var(--s-1); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mt-8 { margin-top: var(--s-8); }
.center { text-align: center; }

.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- каркас --------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--w-content); margin: 0 auto; padding: 0 var(--s-5); }

/* Узкая мера строки внутри общей сетки. Секции остаются на одном левом
   краю — от знака в шапке до футера, — а текст не растягивается на 1120.
   Сужать сам контейнер нельзя: он центруется, и заголовок страницы уезжает
   от знака вбок. Сайт должен читаться как один сайт, а не как набор
   документов с разными полями. */
.measure > * { max-width: var(--w-text); }
.measure--hero > * { max-width: var(--w-hero); }
/* Рабочий документ — снимок, история, ниша, отчёт аудита. Ширина
   своя, а левый край общий: страница не должна съезжать вбок при
   переходе с главной. */
.measure--report > * { max-width: var(--w-report); }
.center > * { margin-inline: auto; }

/* Только вертикаль: шорткат `padding` обнулял бы боковые поля `.wrap`
   там, где секция и сетка — это один элемент, и текст выезжал за левый
   край на 24 пикселя, то есть левее знака в шапке. */
.section { padding-block: var(--s-section); }
.section--surface { background: var(--surface); }
.section--accent { background: var(--accent-50); }
.section + .section { border-top: 1px solid transparent; }

.section__title { font-size: var(--fs-6); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
/* Заголовок блока внутри отчёта: тот же вес, ступенью ниже. */
.section__title--sm { font-size: var(--fs-4); }
.section__lede { margin-top: var(--s-3); font-size: var(--fs-4); color: var(--muted); max-width: 62ch; }
.eyebrow {
  font-size: var(--fs-1); font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
}

.grid { display: grid; gap: var(--s-5); }
.grid--1 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s-5);
  box-shadow: var(--shadow);
}
.card__title { font-size: var(--fs-4); font-weight: 800; }
.card__text { margin-top: var(--s-2); color: var(--muted); }

/* --- шапка и футер --------------------------------------------------- */

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); padding: var(--s-5) 0;
}
.brandmark {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-weight: 800; font-size: var(--fs-4); color: var(--ink); text-decoration: none;
}
.brandmark__dot {
  width: 10px; height: 10px; border-radius: var(--r-pill);
  background: var(--accent);
}
.topbar__links { display: flex; gap: var(--s-5); font-size: var(--fs-2); }
.topbar__links a { color: var(--muted); text-decoration: none; }
.topbar__links a:hover { color: var(--accent); }

.footer {
  border-top: 1px solid var(--line);
  padding: var(--s-6) 0 var(--s-7);
  color: var(--muted);
  font-size: var(--fs-2);
}
.footer__row { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: baseline; }
.footer__note { margin-top: var(--s-4); max-width: 70ch; }

/* --- кнопки и поля --------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  border: 1px solid transparent; border-radius: var(--r-inner);
  padding: var(--s-3) var(--s-5);
  font: 600 var(--fs-3)/1.2 var(--font);
  cursor: pointer; text-decoration: none;
}
.btn--primary { background: var(--accent); color: var(--white); }
.btn--primary:hover { background: var(--accent-hover); color: var(--white); }
.btn--secondary { background: var(--white); color: var(--ink); border-color: var(--line); }
.btn--secondary:hover { border-color: var(--accent-200); color: var(--accent); }
.btn--wide { width: 100%; }
.btn[disabled] { opacity: .55; cursor: default; }

.field { display: block; }
.field__label { display: block; font-size: var(--fs-2); font-weight: 600; margin-bottom: var(--s-2); }
.field__input {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-inner);
  padding: var(--s-3) var(--s-4);
  font: 400 var(--fs-4)/1.4 var(--font); color: var(--ink); background: var(--white);
}
.field__input::placeholder { color: var(--faint); }
/* Обводка внутрь: иначе поле прыгает на фокусе. */
.field__input:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.field__input[aria-invalid="true"] { border-color: var(--red); }
.field__error { display: none; margin-top: var(--s-2); color: var(--red-strong); font-size: var(--fs-2); }
.field__error[data-shown] { display: block; }
.field__hint { margin-top: var(--s-3); font-size: var(--fs-2); color: var(--muted); }

.pill {
  display: inline-flex; align-items: center; gap: var(--s-1);
  border-radius: var(--r-pill); padding: 2px var(--s-2);
  font-size: var(--fs-1); font-weight: 600; white-space: nowrap;
}
.pill--red { background: var(--red-50); color: var(--red-strong); }
.pill--amber { background: var(--amber-50); color: var(--amber-strong); }
.pill--green { background: var(--green-50); color: var(--green-strong); }
.pill--slate { background: var(--surface); color: var(--muted); }

.chip {
  display: inline-flex; align-items: baseline; gap: var(--s-1);
  border: 1px solid var(--line); border-radius: var(--r-chip);
  padding: 1px var(--s-2); font-size: var(--fs-1); font-family: var(--mono);
  background: var(--white);
}
.chip--own { border-color: var(--green-200); background: var(--green-50); color: var(--green-strong); }
.chip--competitor { border-color: var(--red-200); background: var(--red-50); color: var(--red-strong); }
/* Маркетплейсы серые: янтарный занят одним смыслом и делить его нельзя. */
.chip--marketplace { color: var(--muted); background: var(--surface); }
.chip__fraction { font-size: var(--fs-1); opacity: .8; }

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

.hero { padding: var(--s-7) 0 var(--s-section); }
.hero__title {
  font-size: var(--fs-7); font-weight: 800; line-height: 1.1; letter-spacing: -.025em;
  max-width: 16ch;
}
.hero__sub { margin-top: var(--s-4); font-size: var(--fs-4); color: var(--muted); max-width: 62ch; }

.scanner {
  margin-top: var(--s-6);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--s-5);
  box-shadow: var(--shadow-raised);
  position: relative;
}
.scanner__field { position: relative; }   /* якорь списка подсказок аудита */
.scanner__submit { margin-top: var(--s-3); }

.suggest {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + var(--s-1));
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-inner); box-shadow: var(--shadow-raised);
  overflow: hidden;
}
.suggest[hidden] { display: none; }
.suggest__item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); cursor: pointer;
}
.suggest__item:hover { background: var(--surface); }
.suggest__item[aria-selected="true"] { background: var(--accent-50); }
.suggest__logo, .suggest__mono {
  width: 20px; height: 20px; border-radius: var(--r-chip); flex: none;
  display: grid; place-items: center;
  background: var(--surface); color: var(--muted);
  font-size: var(--fs-1); font-weight: 700;
}
.suggest__name { font-size: var(--fs-3); }
.suggest__domain { margin-left: auto; font-family: var(--mono); font-size: var(--fs-2); color: var(--muted); }
.suggest__item--raw .suggest__name { color: var(--muted); }

.sources {
  margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-2);
  align-items: center; font-size: var(--fs-2); color: var(--muted);
}

/* --- иллюстрация выдачи ---------------------------------------------- */

.serp {
  border: 1px solid var(--line); border-radius: var(--r-inner);
  background: var(--white); padding: var(--s-3); display: grid; gap: var(--s-2);
  /* Одна высота у трёх иллюстраций: иначе заголовки карточек стоят на
     разных уровнях, и ряд читается как случайный. */
  min-height: 92px; align-content: start;
}
.serp__row { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-1); }
.serp__tag {
  font-size: 10px; font-weight: 700; letter-spacing: .04em;
  border-radius: var(--r-chip); padding: 0 var(--s-1);
  background: var(--surface); color: var(--muted); flex: none;
}
.serp__tag--ad { background: var(--amber-50); color: var(--amber-strong); }
.serp__domain { font-family: var(--mono); }
.serp__row--own .serp__domain { color: var(--green-strong); font-weight: 600; }
.serp__row--rival .serp__domain { color: var(--red-strong); }
.serp__bar { height: 4px; border-radius: var(--r-pill); background: var(--line); flex: 1; }
.serp__divider { height: 1px; background: var(--line); }

/* --- плитки «откуда цифры» -------------------------------------------- */

.tile {
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--white); padding: var(--s-5); box-shadow: var(--shadow);
  border-top: 3px solid var(--line);
}
.tile--measured { border-top-color: var(--green); }
.tile__mark { font-size: var(--fs-1); font-weight: 700; color: var(--muted); }
.tile--measured .tile__mark { color: var(--green-strong); }
.tile__title { margin-top: var(--s-2); font-size: var(--fs-4); font-weight: 800; }
.tile__text { margin-top: var(--s-2); font-size: var(--fs-2); color: var(--muted); }

.step__no {
  width: 28px; height: 28px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--accent-50); color: var(--accent); font-weight: 800; font-size: var(--fs-2);
}

/* --- возражения ------------------------------------------------------- */

.faq { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 0; }
.faq__q {
  cursor: pointer; padding: var(--s-4) var(--s-5); font-weight: 600;
  display: flex; gap: var(--s-3); align-items: baseline; list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; margin-left: auto; color: var(--muted); font-weight: 400; }
.faq__item[open] .faq__q::after { content: "−"; }
.faq__a { padding: 0 var(--s-5) var(--s-4); color: var(--muted); max-width: 68ch; }

/* --- ожидание --------------------------------------------------------- */

.stages { display: grid; gap: var(--s-3); }
.stage { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-3); }
.stage__mark {
  width: 20px; height: 20px; flex: none; border-radius: var(--r-pill);
  border: 2px solid var(--line); display: grid; place-items: center;
}
.stage--done .stage__mark { border-color: var(--green); background: var(--green); color: var(--white); }
.stage--done .stage__mark::before { content: "✓"; font-size: 11px; font-weight: 700; line-height: 1; }
.stage--running .stage__mark {
  border-color: var(--accent-200); border-top-color: var(--accent);
  animation: spin 1s linear infinite;
}
.stage--pending { color: var(--muted); }
.stage__counter { color: var(--muted); font-size: var(--fs-2); font-variant-numeric: tabular-nums; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .stage--running .stage__mark { animation: none; }
}

.bar { height: 6px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; margin-top: var(--s-5); }
.bar__fill {
  height: 100%; min-width: 4%; border-radius: var(--r-pill);
  background: var(--accent); transition: width .4s ease;
}
/* Счётчика с сервера нет — полоса не притворяется процентами. */
.bar--indeterminate .bar__fill {
  width: 30%; animation: slide 1.6s ease-in-out infinite;
}
@keyframes slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(333%); }
}
@media (prefers-reduced-motion: reduce) {
  .bar--indeterminate .bar__fill { animation: none; width: 100%; opacity: .35; }
}

/* --- отчёт ------------------------------------------------------------ */

.report { padding-bottom: var(--s-section); }
.report__head {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  justify-content: space-between; align-items: flex-start;
  padding: var(--s-5) 0 var(--s-6);
}
.report__brand { font-size: var(--fs-5); font-weight: 800; }
.report__domain { font-family: var(--mono); font-size: var(--fs-2); color: var(--muted); }
.report__meta { font-size: var(--fs-1); color: var(--muted); text-align: right; }

.verdict {
  border-radius: var(--r-card); padding: var(--s-5);
  border: 1px solid var(--line); background: var(--white);
}
.verdict--red { background: var(--red-50); border-color: var(--red-200); }
.verdict--amber { background: var(--amber-50); border-color: var(--amber-200); }
.verdict--green { background: var(--green-50); border-color: var(--green-200); }
.verdict--slate { background: var(--white); border-color: var(--line); }

.verdict__chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: rgba(255, 255, 255, .72); border-radius: var(--r-pill);
  padding: var(--s-1) var(--s-3); font-size: var(--fs-1); color: var(--ink);
}
.verdict__dot { width: 8px; height: 8px; border-radius: var(--r-pill); flex: none; }
.verdict--red .verdict__dot { background: var(--red); }
.verdict--amber .verdict__dot { background: var(--amber); }
.verdict--green .verdict__dot { background: var(--green); }
.verdict--slate .verdict__dot { background: var(--faint); }

/* Отдельной строкой, а не хвостом за чипом достоверности: слово и значок
   несут вердикт наравне с цветом. */
.verdict__word { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-4); font-weight: 700; font-size: var(--fs-2); }
.verdict--red .verdict__word { color: var(--red-strong); }
.verdict--amber .verdict__word { color: var(--amber-strong); }
.verdict--green .verdict__word { color: var(--green-strong); }
.verdict--slate .verdict__word { color: var(--muted); }

.verdict__title { margin-top: var(--s-2); font-size: var(--fs-5); font-weight: 800; line-height: 1.25; }
.verdict__hero {
  margin-top: var(--s-3); font-size: var(--fs-7); font-weight: 800;
  letter-spacing: normal; line-height: 1.05;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.verdict--red .verdict__hero { color: var(--red-strong); }
.verdict--amber .verdict__hero { color: var(--amber-strong); }
.verdict__sub { margin-top: var(--s-2); color: var(--muted); font-size: var(--fs-2); }
.verdict__note { margin-top: var(--s-4); max-width: 62ch; }
.verdict__defense {
  margin-top: var(--s-3); font-size: var(--fs-3); font-variant-numeric: tabular-nums;
}

.block-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px solid var(--line);
}
.block-row__title { font-size: var(--fs-4); font-weight: 700; }
.block-row__text { margin-top: var(--s-1); font-size: var(--fs-2); color: var(--muted); max-width: 52ch; }
.block-row__money { font-size: var(--fs-4); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* --- таблица запросов -------------------------------------------------- */

.table { width: 100%; border-collapse: collapse; font-size: var(--fs-2); }
.table th, .table td { padding: var(--s-3) var(--s-2); border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { text-align: left; font-size: var(--fs-1); color: var(--muted); font-weight: 600; white-space: nowrap; }
.table th.is-num, .table td.is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table__sort { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.table__sort[aria-sort="descending"]::after { content: " ↓"; }
.table__sort[aria-sort="ascending"]::after { content: " ↑"; }
.table__phrase { font-family: var(--mono); }
.table__chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.table tfoot td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--line); }
.table__caption { margin-top: var(--s-3); font-size: var(--fs-1); color: var(--muted); }

/* --- квитанция снимка --------------------------------------------------- */

.receipt { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.receipt__head { padding: var(--s-4) var(--s-5); border-bottom: 1px dashed var(--line); }
.receipt__phrase { font-family: var(--mono); font-size: var(--fs-4); }
.receipt__meta { margin-top: var(--s-1); font-size: var(--fs-1); color: var(--muted); }
.receipt__body { padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-4); }
.receipt__group + .receipt__group { border-top: 1px dashed var(--line); padding-top: var(--s-4); }
.receipt__label { font-size: var(--fs-1); color: var(--muted); font-weight: 600; }
.receipt__list { margin-top: var(--s-2); display: grid; gap: var(--s-1); }
.receipt__line { display: flex; align-items: baseline; gap: var(--s-2); font-family: var(--mono); font-size: var(--fs-2); }
.receipt__foot {
  padding: var(--s-3) var(--s-5); border-top: 1px dashed var(--line);
  display: flex; justify-content: space-between; gap: var(--s-3);
  font-size: var(--fs-1); color: var(--muted);
}
.receipt__more { margin-top: var(--s-4); }
.receipt__more summary { cursor: pointer; font-size: var(--fs-2); color: var(--accent); }

/* --- конкуренты --------------------------------------------------------- */

.rival { display: grid; grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.rival:last-child { border-bottom: 0; }
.rival__domain { font-family: var(--mono); }
.rival__count { font-size: var(--fs-2); color: var(--muted); font-variant-numeric: tabular-nums; }
.rival__bar { grid-column: 1 / -1; height: 4px; border-radius: var(--r-pill); background: var(--line); }
.rival__fill { height: 100%; border-radius: var(--r-pill); background: var(--red); }
.rival__fill--marketplace { background: var(--faint); }

/* --- как посчитано ------------------------------------------------------ */

.how { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.how > summary { cursor: pointer; padding: var(--s-4) var(--s-5); font-weight: 600; }
.how__body { padding: 0 var(--s-5) var(--s-5); }
.how__group + .how__group { margin-top: var(--s-4); }
.how__line { display: flex; gap: var(--s-3); align-items: baseline; padding: var(--s-1) 0; font-size: var(--fs-2); }
.how__dot { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--faint); flex: none; }
.how__dot--measured { background: var(--green); }

/* --- почта и поделиться -------------------------------------------------- */

.mailbox {
  background: var(--accent-50); border: 1px solid var(--accent-200);
  border-radius: var(--r-card); padding: var(--s-5);
}
.mailbox--sent { background: var(--green-50); border-color: var(--green-200); }
.mailbox__row { display: flex; gap: var(--s-3); margin-top: var(--s-3); }
.mailbox__row .field__input { flex: 1; }
.mailbox__legal { margin-top: var(--s-3); font-size: var(--fs-1); color: var(--muted); }

.share { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.share__url {
  flex: 1; min-width: 220px; font-family: var(--mono); font-size: var(--fs-2);
  border: 1px solid var(--line); border-radius: var(--r-inner);
  padding: var(--s-2) var(--s-3); background: var(--surface); color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* --- инструмент: форма проверки --------------------------------------- */

.scanner__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.scanner__grid .field__label { display: block; }

/* --- витрина живых снимков --------------------------------------------- */

.showcase { display: flex; flex-direction: column; }
.showcase__query { font-size: var(--fs-4); font-weight: 600; }
.showcase__meta { margin-top: var(--s-1); font-size: var(--fs-1); color: var(--muted); }
.showcase__count { margin-top: var(--s-3); font-size: var(--fs-3); font-weight: 600; }
.showcase__list { margin-top: var(--s-2); display: grid; gap: 2px; font-size: var(--fs-2); color: var(--muted); }
.showcase p:last-child { margin-top: auto; }

/* --- объявление в снимке ------------------------------------------------ */

.ads { display: grid; gap: var(--s-3); }
.ad {
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--white); padding: var(--s-4) var(--s-5);
  box-shadow: var(--shadow);
}
.ad--own { border-color: var(--green-200); background: var(--green-50); }
.ad__head { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.ad__pos {
  width: 22px; height: 22px; flex: none; border-radius: var(--r-chip);
  display: grid; place-items: center; background: var(--surface);
  color: var(--muted); font-size: var(--fs-1); font-weight: 700;
}
.ad__domain { font-size: var(--fs-3); font-weight: 600; }
.ad__title { margin-top: var(--s-3); font-size: var(--fs-4); color: var(--accent); }
.ad__text { margin-top: var(--s-1); color: var(--ink); }
.ad__url { margin-top: var(--s-1); font-size: var(--fs-1); color: var(--muted);
  overflow-wrap: anywhere; }
.ad__rotate { margin-top: var(--s-2); font-size: var(--fs-2); color: var(--muted); }
.ad__facts { margin-top: var(--s-3); display: grid; gap: var(--s-1); }
.ad__facts > div {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2);
  font-size: var(--fs-2);
}
/* `dt` — настоящие реквизиты снимка, `.ad__facts-k` — та же плашка,
   нарисованная на лендинге: там она картинка, и списком быть не может. */
.ad__facts dt, .ad__facts-k { color: var(--muted); min-width: 96px; }
.ad__facts dd { margin: 0; }
/* Источник факта пишется словом: «из ссылки объявления» и «с сайта
   рекламодателя» — разные утверждения, и различать их оттенком нельзя. */
.ad__source { color: var(--muted); font-size: var(--fs-1); }

/* --- таймлайн истории запроса ------------------------------------------- */

.timeline { display: grid; gap: var(--s-1); }
.timeline__item {
  display: flex; gap: var(--s-4); align-items: baseline;
  padding: var(--s-2) 0; border-bottom: 1px solid var(--line);
}
.timeline__item:last-child { border-bottom: 0; }
.timeline__time { flex: none; font-size: var(--fs-2); font-variant-numeric: tabular-nums; }
.timeline__ads { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.timeline__empty { font-size: var(--fs-2); color: var(--muted); }

/* --- состояния ----------------------------------------------------------- */

.notice {
  border-radius: var(--r-inner); padding: var(--s-4);
  border: 1px solid var(--amber-200); background: var(--amber-50);
  color: var(--amber-strong); font-size: var(--fs-2);
}
.notice--error { border-color: var(--red-200); background: var(--red-50); color: var(--red-strong); }
.notice__title { font-weight: 700; }
.notice ul { margin-top: var(--s-2); display: grid; gap: var(--s-1); }
.notice li { padding-left: var(--s-4); position: relative; }
.notice li::before { content: "•"; position: absolute; left: var(--s-1); }

.blank { text-align: center; padding: var(--s-8) var(--s-5); }
.blank__icon { width: 40px; height: 40px; margin: 0 auto var(--s-4); color: var(--faint); }
.blank__title { font-size: var(--fs-5); font-weight: 800; }
.blank__text { margin-top: var(--s-2); color: var(--muted); max-width: 52ch; margin-inline: auto; }
.blank__action { margin-top: var(--s-5); }
/* Код ошибки читает саппорт, значит это текст: --faint здесь не проходит
   AA и остаётся только на плейсхолдере. */
.blank__code { margin-top: var(--s-4); font-family: var(--mono); font-size: var(--fs-1); color: var(--muted); }

.stack { display: grid; gap: var(--s-5); }
.stack--tight { gap: var(--s-3); }
.stack--wide { gap: var(--s-6); }

/* --- мобильная ------------------------------------------------------------ */

@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .wrap { padding: 0 var(--s-4); }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .scanner__grid { grid-template-columns: 1fr; }
  .timeline__item { flex-direction: column; gap: var(--s-1); }
  .hero__title { max-width: none; }
  .hero__sub { font-size: var(--fs-3); }
  .report__head { flex-direction: column; }
  .report__meta { text-align: left; }
  .verdict__hero { font-size: var(--fs-7); }
  .block-row { flex-direction: column; gap: var(--s-2); }
  .block-row__money { text-align: left; }
  .mailbox__row { flex-direction: column; }
  .topbar__links { gap: var(--s-4); }

  /* Таблица запросов превращается в карточки: фраза, под ней частотность
     и деньги, ниже чипы конкурентов. */
  .table, .table tbody, .table tfoot, .table tr, .table td { display: block; width: 100%; }
  .table thead { display: none; }
  .table tr {
    border: 1px solid var(--line); border-radius: var(--r-inner);
    padding: var(--s-3); margin-bottom: var(--s-3);
  }
  .table td { border: 0; padding: var(--s-1) 0; text-align: left; }
  .table td.is-num { text-align: left; }
  .table td[data-label]::before {
    content: attr(data-label) " ";
    color: var(--muted); font-size: var(--fs-1);
  }
  .table td.table__cell--phrase::before { content: none; }
  .table tfoot tr { border-color: var(--ink); }
}

/* Дописать в конец web/static/app.css. Значения — только из tokens.css.
   Блоки, помеченные ПРАВКА, переопределяют существующие правила выше:
   каскад отработает сам, править старое правило не нужно. */

/* --- шапка: липкая, с размытием ------------------------------------- */
.topbar-shell {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(226, 232, 240, .9);
}
/* ПРАВКА: шапка стала ниже — вертикаль отдана первому экрану. */
.topbar-shell .topbar { padding: var(--s-4) 0; }
.brandmark__logo { display: block; flex: none; }
.topbar__links {
  align-items: center; gap: var(--s-2);
}
.topbar__links a {
  padding: 6px 10px; border-radius: var(--r-chip);
  transition: background var(--dur-1) ease, color var(--dur-1) ease;
}
.topbar__links a:hover { color: var(--ink); background: var(--surface); }

/* --- первый экран: во весь экран, на белом с точечной сеткой ---------- */
.hero--center {
  position: relative; overflow: hidden;
  /* Первый экран занимает вьюпорт целиком за вычетом шапки. `svh` вместо
     `vh`: на телефоне адресная строка то появляется, то уезжает, и на
     `vh` экран прыгал бы при каждой прокрутке. */
  min-height: calc(100svh - 64px);
  display: grid; align-items: center;
  padding: var(--s-7) 0 var(--s-8);
  background: var(--white);
  text-align: center;
}
/* Текстура — точечная сетка под мягкой радиальной маской, без градиента:
   она читается как бумага и не спорит с текстом. */
.hero--center::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--dot-grid);
  background-size: var(--dot-grid-size);
  opacity: .7;
  mask-image: var(--dot-grid-mask);
  -webkit-mask-image: var(--dot-grid-mask);
}
.hero--center > .wrap { position: relative; }
/* ПРАВКА: заголовок первого экрана центрируется и дышит шире 16ch. */
.hero--center .hero__title {
  max-width: 22ch; margin-inline: auto;
  line-height: 1.08; letter-spacing: -.03em; text-wrap: balance;
}
.hero--center .hero__sub { margin-inline: auto; text-wrap: pretty; }
.hero--center .scanner { text-align: left; margin-inline: auto; }

/* --- карточка формы -------------------------------------------------- */
/* Решение владельца 14.08.2026: градиента в карточке проверки нет — ни в
   заливке, ни в рамке. Белое поле, одна линия границы и мягкая тень:
   форма и так единственный приподнятый объект на экране. */
.scanner {
  position: relative;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow-form);
  max-width: var(--w-hero);
}
/* Запрос и кнопка в одну строку; регион и домен — вторым ярусом. */
.scanner__row { display: flex; gap: var(--s-3); align-items: stretch; }
.scanner__row .field__input { flex: 1; min-width: 0; padding: 14px var(--s-4); }
/* ПРАВКА: кнопка больше не во всю ширину — она конец строки поиска. */
.scanner__row .scanner__submit {
  flex: none; width: auto; margin-top: 0;
  padding: 14px var(--s-6); white-space: nowrap;
}
.scanner .scanner__grid {
  margin-top: var(--s-4); padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.scanner .scanner__grid .field__input {
  /* Только цвет: шорткат `background` сбрасывает и повтор, и положение, и
     размер — стрелка селекта размножалась плиткой по всему полю. */
  background-color: var(--surface); font-size: var(--fs-3);
}
.field__input {
  transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.field__input:hover { border-color: var(--accent-200); }
/* Кольцо вместо прыжка рамки. */
.field__input:focus,
.field__input:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-50);
}
.field__input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px var(--red-50); }

/* --- строка доверия под формой -------------------------------------- */
.sources { justify-content: center; gap: var(--s-2) var(--s-4); }
.sources__live {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: rgba(255, 255, 255, .7);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 6px var(--s-4);
}
.sources__live::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--r-pill);
  background: var(--green); animation: livedot 2.4s ease-in-out infinite;
}
.sources__more {
  font-weight: 600; text-decoration: none;
  border-bottom: 1px solid var(--accent-200); padding-bottom: 1px;
  transition: border-color var(--dur-1) ease;
}
.sources__more:hover { border-color: var(--accent); }
@keyframes livedot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.82); }
}

/* --- кнопки ---------------------------------------------------------- */
/* ПРАВКА: primary — заливка градиентом того же синего плюс своя тень. */
.btn--primary {
  background: var(--grad-btn); box-shadow: var(--shadow-btn);
  transition: transform var(--dur-1) ease, box-shadow var(--dur-1) ease,
              filter var(--dur-1) ease;
}
.btn--primary:hover {
  background: var(--grad-btn); filter: saturate(115%) brightness(.97);
  transform: translateY(-1px);
}
.btn--primary:active { transform: translateY(0); }
.btn--secondary {
  transition: border-color var(--dur-1) ease, color var(--dur-1) ease,
              background var(--dur-1) ease;
}
.btn--secondary:hover { background: var(--accent-50); }

/* --- карточки -------------------------------------------------------- */
.card {
  transition: transform var(--dur-2) ease, box-shadow var(--dur-2) ease,
              border-color var(--dur-2) ease;
}
.card--lift:hover {
  transform: translateY(-3px);
  border-color: var(--accent-200); box-shadow: var(--shadow-hover);
}
/* Заголовок раздела с уходящей линейкой: рифма для внутренних экранов. */
.section__title--rule { display: flex; align-items: baseline; gap: var(--s-3); }
.section__title--rule::after {
  content: ""; height: 1px; flex: 1; background: var(--grad-rule);
}

/* --- витрина живых снимков ------------------------------------------- */
.showcase--featured {
  grid-column: span 2;
  flex-direction: row; gap: var(--s-5); justify-content: space-between;
}
.showcase--featured .showcase__count {
  font-size: var(--fs-6); font-weight: 800; line-height: 1;
  letter-spacing: -.02em; margin-top: var(--s-4);
}
.showcase--featured .showcase__unit {
  margin-top: var(--s-1); font-size: var(--fs-2); color: var(--muted);
}
.showcase--featured .serp { flex: none; width: 52%; }
.showcase__chips { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-1); }
.showcase--pending {
  justify-content: center;
  border-style: dashed; box-shadow: none;
  background: linear-gradient(180deg, var(--white), var(--surface));
}
.showcase--pending .showcase__count {
  display: flex; align-items: center; gap: var(--s-2);
}
.showcase--pending .showcase__count::before {
  content: ""; width: 8px; height: 8px; border-radius: var(--r-pill);
  background: var(--accent); animation: livedot 1.4s ease-in-out infinite;
}
@media (max-width: 900px) {
  .showcase--featured { grid-column: span 2; flex-direction: column; }
  .showcase--featured .serp { width: auto; }
}
@media (max-width: 640px) {
  .showcase--featured { grid-column: auto; }
  .scanner__row { flex-direction: column; }
  .scanner__row .scanner__submit { width: 100%; }
}

/* --- иллюстрация выдачи: полосы получают направление ------------------ */
.serp__bar { background: linear-gradient(90deg, var(--accent-200), var(--line)); }
.serp__row--own .serp__bar { background: linear-gradient(90deg, var(--green-200), var(--line)); }

/* --- финальный блок -------------------------------------------------- */
.cta {
  position: relative; overflow: hidden;
  border-radius: var(--r-card); padding: var(--s-8) var(--s-5);
  text-align: center;
  background: var(--grad-cta); box-shadow: var(--shadow-cta);
}
.cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
      linear-gradient(to right, rgba(255, 255, 255, .07) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(620px 260px at 50% 0%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(620px 260px at 50% 0%, #000, transparent 75%);
}
.cta > * { position: relative; }
.cta .section__title { color: var(--white); margin-inline: auto; max-width: 24ch; }
.cta .field__hint { color: rgba(255, 255, 255, .78); }
/* На синем primary становится белой: акцентная кнопка на акцентном фоне
   не читается. */
.cta .btn--primary {
  background: var(--white); color: var(--accent-hover);
  box-shadow: 0 12px 26px -14px rgba(15, 23, 42, .6);
}
.cta .btn--primary:hover { background: var(--white); color: var(--accent-900); }

/* --- вердикт: значок в круге ---------------------------------------- */
.verdict { position: relative; overflow: hidden; }
.verdict--green { background: linear-gradient(135deg, var(--green-50) 0%, var(--white) 78%); }
.verdict--amber { background: linear-gradient(135deg, var(--amber-50) 0%, var(--white) 78%); }
.verdict--red { background: linear-gradient(135deg, var(--red-50) 0%, var(--white) 78%); }
.verdict__body { display: flex; gap: var(--s-4); align-items: flex-start; position: relative; }
.verdict__mark {
  flex: none; width: 36px; height: 36px; border-radius: var(--r-pill);
  display: grid; place-items: center; color: var(--white);
}
.verdict--green .verdict__mark { background: var(--green); box-shadow: 0 8px 18px -10px rgba(21, 128, 61, .9); }
.verdict--amber .verdict__mark { background: var(--amber); box-shadow: 0 8px 18px -10px rgba(180, 83, 9, .9); }
.verdict--red .verdict__mark { background: var(--red); box-shadow: 0 8px 18px -10px rgba(220, 38, 38, .9); }
/* Значок переехал в круг — из строки слова его убираем, слово остаётся. */
.verdict__word > svg { display: none; }

/* --- объявление: реквизиты в отдельной плашке ----------------------- */
.ad { transition: border-color var(--dur-2) ease, box-shadow var(--dur-2) ease; }
.ad:hover { border-color: var(--accent-200); box-shadow: var(--shadow-hover); }
.ad__facts {
  margin-top: var(--s-4); padding: 14px var(--s-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-inner); gap: var(--s-1);
}
.ad--own { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--green-50) 0%, var(--white) 60%); }
.ad--own::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--green), var(--green-200));
}
.ad--own .ad__facts { background: rgba(255, 255, 255, .7); border-color: var(--green-200); }
.ad__title { font-weight: 500; }
/* ПРАВКА: плашки получают границу — на цветной подложке заливки мало. */
.pill { padding: 3px var(--s-3); border: 1px solid transparent; }
.pill--green { border-color: var(--green-200); }
.pill--amber { border-color: var(--amber-200); }
.pill--red { border-color: var(--red-200); }
.pill--slate { border-color: var(--line); }

/* --- квитанция и таблицы -------------------------------------------- */
.receipt { position: relative; overflow: hidden; }
.receipt::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(238, 243, 254, .7) 0%,
                              rgba(255, 255, 255, 0) 42%);
}
.receipt > * { position: relative; }
.table tbody tr { transition: background var(--dur-1) ease; }
.table tbody tr:hover { background: var(--surface); }
.table thead tr, .table tfoot tr { background: var(--surface); }

/* --- таймлайн: линия и точки ---------------------------------------- */
.timeline { padding-left: var(--s-1); border-left: 1px solid var(--line); }
.timeline__item { position: relative; padding-left: var(--s-5); }
.timeline__item::before {
  content: ""; position: absolute; left: -4px; top: 19px;
  width: 7px; height: 7px; border-radius: var(--r-pill);
  background: var(--faint); box-shadow: 0 0 0 3px var(--surface);
}
.timeline__item:first-child::before {
  background: var(--accent); box-shadow: 0 0 0 3px var(--accent-50);
}

/* --- ожидание и деградация ------------------------------------------ */
.bar__fill { background: linear-gradient(90deg, var(--accent-200), var(--accent)); }
.notice { background: linear-gradient(135deg, var(--amber-50), var(--white) 92%); }
.notice--error { background: linear-gradient(135deg, var(--red-50), var(--white) 92%); }
.notice__title { display: flex; align-items: center; gap: var(--s-2); }

/* --- вопросы: маркер знает своё состояние --------------------------- */
.faq { overflow: hidden; box-shadow: var(--shadow); }
.faq__q { transition: background var(--dur-1) ease; }
.faq__q:hover { background: var(--surface); }
.faq__q::after {
  color: var(--faint);
  transition: transform var(--dur-1) ease, color var(--dur-1) ease;
}
.faq__item[open] .faq__q::after { color: var(--accent); transform: rotate(180deg); }

/* --- появление секций ----------------------------------------------- */
[data-reveal] {
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
[data-reveal].is-out { opacity: 0; transform: translateY(14px); }

@media (prefers-reduced-motion: reduce) {
  .sources__live::before,
  .showcase--pending .showcase__count::before { animation: none; }
  [data-reveal], [data-reveal].is-out { opacity: 1; transform: none; transition: none; }
  .btn--primary:hover, .card--lift:hover { transform: none; }
}

/* --- первый экран на телефоне ---------------------------------------- */
/* Экран у телефона один, и он должен вместить весь путь до кнопки:
   заголовок, объяснение, поле, регион, свой сайт. Поэтому здесь плотнее
   всё, что можно уплотнить без потери читаемости, а поля региона и своего
   сайта остаются в две колонки — они короткие. */
@media (max-width: 640px) {
  .hero--center { padding: var(--s-5) 0 var(--s-6); }
  .hero--center .hero__title { font-size: 30px; line-height: 1.06; }
  .hero--center .hero__sub {
    margin-top: var(--s-3); font-size: 14px; line-height: 1.45;
  }
  .hero--center .scanner { margin-top: var(--s-5); padding: var(--s-4); }
  /* Метка «ваш сайт» переносится на две строки — поля равняем по низу,
     иначе они встают ступенькой. */
  .scanner__grid { grid-template-columns: 1fr 1fr; gap: var(--s-2); align-items: end; }
  .scanner .scanner__grid { margin-top: var(--s-3); padding-top: var(--s-3); }
  .scanner .field__label { margin-bottom: var(--s-1); }
  .scanner .scanner__grid .field__input { padding: 10px var(--s-3); }
  .scanner .field__hint { margin-top: var(--s-2); font-size: var(--fs-1); }
  .sources { margin-top: var(--s-4); font-size: var(--fs-1); }
  .sources__live { padding: 5px var(--s-3); text-align: left; }
}

/* --- личное: недавние проверки и закреплённые запросы ----------------- */
/* Блок стоит под формой на главной и читается как список, а не как второй
   экран: человек пришёл проверить запрос, а не разбираться в интерфейсе. */
.mine {
  /* Первый экран центрован, и блок обязан встать по той же оси, что
     карточка формы: сдвиг в тридцать пикселей читается как ошибка вёрстки. */
  text-align: left; margin-inline: auto;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--white); padding: var(--s-5); box-shadow: var(--shadow);
}
.mine__title { font-size: var(--fs-2); font-weight: 700; color: var(--muted); }
.mine__list { margin-top: var(--s-3); display: grid; gap: var(--s-1); }
.mine__row {
  display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-2) 0; border-bottom: 1px solid var(--line);
  font-size: var(--fs-2);
}
.mine__row:last-child { border-bottom: 0; }
.mine__query { font-size: var(--fs-3); text-decoration: none; }
.mine__query:hover { text-decoration: underline; }
.mine__meta { color: var(--muted); font-size: var(--fs-1); }
.mine__verdict { margin-left: auto; color: var(--ink); white-space: nowrap; }
.mine__note { margin-top: var(--s-4); font-size: var(--fs-1); color: var(--muted); }

/* --- звёздочка ------------------------------------------------------- */
.star {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 6px var(--s-3); font: inherit; font-size: var(--fs-1);
  color: var(--muted); background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  cursor: pointer;
  transition: border-color var(--dur-1) ease, color var(--dur-1) ease,
              background var(--dur-1) ease;
}
.star:hover { border-color: var(--accent-200); color: var(--accent); }
.star:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.star--on {
  color: var(--amber-strong); border-color: var(--amber-200);
  background: var(--amber-50);
}
.star--on .star__mark { fill: currentColor; }
.star[disabled] { opacity: .55; cursor: default; }
.star__error { text-align: right; }

/* --- обновление снимка на странице запроса --------------------------- */
.refresh {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  margin-top: var(--s-5);
}
.refresh__hint { font-size: var(--fs-2); color: var(--muted); }

/* --- личный дифф ------------------------------------------------------ */
.card--mine { border-color: var(--accent-200); background: var(--accent-50); }
.card__note { margin-top: var(--s-4); font-size: var(--fs-1); color: var(--muted); }

/* --- витрина ниш ------------------------------------------------------ */
.niche-card {
  display: flex; flex-direction: column; text-decoration: none;
  color: inherit;
}
.niche-card__name { font-size: var(--fs-4); font-weight: 700; }
.niche-card__count {
  margin-top: var(--s-3); font-size: var(--fs-6); font-weight: 800;
  line-height: 1; letter-spacing: -.02em;
}
.niche-card__unit { margin-top: var(--s-1); font-size: var(--fs-2); color: var(--muted); }
.niche-card__fact { margin-top: var(--s-3); font-size: var(--fs-2); color: var(--accent); }

/* --- срез ниши: три числа сверху ------------------------------------- */
.stat {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5);
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--white); padding: var(--s-5); box-shadow: var(--shadow);
}
.stat__value { font-size: var(--fs-6); font-weight: 800; line-height: 1; }
.stat__label { margin-top: var(--s-2); font-size: var(--fs-1); color: var(--muted); }

@media (max-width: 640px) {
  .stat { grid-template-columns: 1fr; gap: var(--s-4); }
  .mine__verdict { margin-left: 0; }
}

/* --- раздел «Задачи» -------------------------------------------------- */
/* Первый экран индекса без формы: между ним и карточками иначе остаётся
   пустая полоса в две сотни пикселей. */
.hero--tight { padding-bottom: var(--s-6); }
/* За плотным первым экраном сразу идёт содержание, и полная
   секционная пауза читается как пропущенный блок. */
.hero--tight + .section { padding-top: var(--s-6); }
/* Заголовок карточки — ссылка, но подчёркивание из трёх строк подряд
   утяжеляет список. Подчёркиваем под курсором, как везде на сайте. */
.card__title a { text-decoration: none; }
.card__title a:hover { text-decoration: underline; }

/* --- выбор региона --------------------------------------------------- */
/* Селект остаётся нативным — свой писать нечего, этот работает с
   клавиатуры и с экранным диктором. Но системная отрисовка даёт другую
   высоту, свой фон и свои стрелки, и рядом с соседним полем это читается
   как чужой элемент. Поэтому оформление наше, поведение — браузерное.
   Адрес картинки одной строкой: перенос со слэшем оставляет в URL отступы
   следующей строки, и стрелка превращается в битую картинку. */
select.field__input {
  appearance: none;
  padding-right: var(--s-7);
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  background-size: 12px 8px;
  background-image: var(--chevron);
  cursor: pointer;
}
select.field__input:hover { background-color: var(--white); }

/* --- шапка на узком экране ------------------------------------------- */
/* Ссылок в шапке стало три, и на телефоне «О данных» ломался посередине и
   уезжал за край. Каждая ссылка неразрывна, а тесно им — переносим всю
   строку под знак. */
.topbar__links a { white-space: nowrap; }
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; row-gap: var(--s-2); }
  .topbar__links { gap: var(--s-4); font-size: var(--fs-1); }
}