/* Коммерческие посадочные страницы.
 *
 * Отдельный файл и собственный префикс `lp-` намеренно. Эти страницы
 * верстаются блоками, которых на остальном сайте нет: сравнительные
 * таблицы, числовые плашки, схемы работ. Брать под них чужие имена —
 * ровно та ошибка, из-за которой однажды пропала карточка в кабинете
 * (`.panel`) и уехала шапка блога (`page-head__inner`).
 *
 * Подключается только там, где нужен: `{% block head %}` страницы.
 *
 * Движение завязано на классы из `reveal.js` (`is-armed`, `is-seen`).
 * Без скрипта классов нет и блок просто показан — страница не зависит
 * от JavaScript.
 */

/* Зелёная подложка. Токена под неё в проекте нет: `--color-accent-wash`
   вопреки имени — почти белый нейтральный, а `--color-accent-ink` — текст
   ПОВЕРХ акцента, тоже почти белый. На них иконки в карточках оказались
   белыми по белому. Берём тот же оттенок, что у блока `.doing` на главной */
:root { --lp-tint: oklch(0.93 0.032 152); }

/* --- общая сетка раздела ------------------------------------------- */

.lp-section { padding: var(--space-9) 0; }
.lp-section--tight { padding: var(--space-8) 0; }

/* Залитая полоса: пауза в ритме страницы. Соседние полосы не ставим
   подряд — две заливки встык читаются как одна */
.lp-band { background: var(--color-surface-sunken); }
.lp-band--accent { background: var(--lp-tint); }
.lp-band--ink {
  background: var(--color-surface-inverse); color: var(--color-ink-inverse);
}
.lp-band--ink .lp-head__title,
.lp-band--ink .lp-card__title { color: var(--color-ink-inverse); }
.lp-band--ink .lp-head__sub,
.lp-band--ink .lp-card__text { color: var(--color-ink-inverse-muted); }
.lp-band--ink .lp-card { border-color: var(--color-line-inverse); background: none; }

.lp-head { max-width: 60ch; }
.lp-head__title {
  margin: var(--space-4) 0 0;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(1.6rem, 0.95rem + 2.4vw, 2.4rem);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.lp-head__sub {
  margin: var(--space-4) 0 0; max-width: 62ch;
  font-size: var(--text-md); line-height: var(--leading-normal);
  color: var(--color-ink-80);
}
.lp-head--wide { max-width: none; }
.lp-head--spaced { margin-top: var(--space-9); }
/* Содержимое во всю ширину — заголовок по центру. Прижатый влево
   заголовок над сеткой на весь экран оставляет справа пустое поле */
.lp-head--center { max-width: 64ch; margin-inline: auto; text-align: center; }
/* Каждой строке — свои поля по сторонам. Абзацу ширина задана правилом
   на `p` в общих стилях, и без этого надпись капителью центрировалась
   внутри своей узкой коробки, а не по странице */
.lp-head--center > * { margin-inline: auto; }

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

.lp-hero { padding: var(--space-8) 0 var(--space-9); }
.lp-hero__inner { display: grid; gap: var(--space-8); align-items: center; }
@media (min-width: 60rem) {
  .lp-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-9); }
}
.lp-hero__title {
  margin: var(--space-4) 0 0;
  font-size: clamp(2.1rem, 1.1rem + 3.6vw, 3.4rem);
  max-width: 18ch;
}
.lp-hero__lead {
  margin: var(--space-5) 0 0; max-width: 52ch;
  font-size: var(--text-lg); line-height: var(--leading-normal);
  color: var(--color-ink-muted);
}
.lp-hero__actions {
  margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3);
}
.lp-hero__trust {
  margin: var(--space-7) 0 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
}
.lp-hero__trust li {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: var(--text-base); color: var(--color-ink-80);
}
.lp-hero__trust .icon { width: 1rem; height: 1rem; color: var(--color-accent); }
.lp-hero__figure { min-width: 0; }

/* --- числа ---------------------------------------------------------- */

.lp-stats {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.lp-stat {
  padding: var(--space-5); border: var(--border); border-radius: var(--radius-md);
  background: var(--color-surface);
}
.lp-stat__n {
  display: block; font-family: var(--font-display);
  font-size: clamp(2rem, 1.2rem + 2.4vw, 2.8rem);
  line-height: 1; letter-spacing: var(--tracking-tight);
  color: var(--color-accent);
}
.lp-stat__text {
  margin: var(--space-3) 0 0; font-size: var(--text-base);
  line-height: var(--leading-normal); color: var(--color-ink-80);
}
.lp-stat__source {
  margin: var(--space-2) 0 0; font-family: var(--font-mono);
  font-size: var(--text-xs); color: var(--color-ink-muted);
}

/* --- карточки ------------------------------------------------------- */

.lp-grid {
  margin: var(--space-6) 0 0; padding: 0; list-style: none;
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
/* Ровно две колонки, а не «сколько влезет»: на `auto-fit` четыре карточки
   вставали тремя и одной */
@media (min-width: 44rem) { .lp-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Шесть карточек ложатся тремя и тремя. На `auto-fit` получалось
   четыре сверху и две снизу — ряд с дырой справа */
@media (min-width: 44rem) { .lp-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .lp-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp-card {
  padding: var(--space-5); border: var(--border); border-radius: var(--radius-md);
  background: var(--color-surface);
  display: grid; align-content: start; gap: var(--space-3);
}
.lp-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm);
  background: var(--color-accent); color: var(--color-accent-ink);
}
.lp-card__icon .icon,
.lp-card__icon > svg { width: 1.25rem; height: 1.25rem; stroke-width: 1.75; }
.lp-card__title {
  margin: 0; font-family: var(--font-display); font-size: var(--text-base);
  font-weight: var(--weight-medium); line-height: var(--leading-snug);
}
.lp-card__text {
  margin: 0; font-size: var(--text-base); line-height: var(--leading-normal);
  color: var(--color-ink-80);
}
.lp-card__meta {
  margin: 0; font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-ink-faint);
}

/* --- порядок работ -------------------------------------------------- */

.lp-flow { margin: var(--space-6) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-5); }
/* Пять шагов стоят в ряд только там, где влезают все пять. Промежуточной
   раскладки нет намеренно: 3 + 2 — тот же ряд с дырой */
@media (min-width: 72rem) {
  .lp-flow--five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5); }
}
@media (min-width: 60rem) {
  .lp-flow:not(.lp-flow--five) { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-6); }
}
.lp-step { position: relative; padding-top: var(--space-5); border-top: var(--border-strong); }
.lp-step__n {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide); color: var(--color-accent);
}
.lp-step__title {
  margin: var(--space-3) 0 0; font-family: var(--font-display);
  font-size: var(--text-base); font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}
.lp-step__text {
  margin: var(--space-2) 0 0; font-size: var(--text-base);
  line-height: var(--leading-normal); color: var(--color-ink-80);
}
.lp-step__meta {
  margin: var(--space-3) 0 0; font-family: var(--font-mono);
  font-size: var(--text-xs); color: var(--color-ink-muted);
}

/* --- таблицы -------------------------------------------------------- */

/* Таблица шире экрана прокручивается внутри своей обёртки. Горизонтальной
   прокрутки у страницы быть не должно ни на одном экране */
/* Таблица оформлена карточкой, как блоки вокруг: без рамки её текст
   начинался от самого края и секция казалась сдвинутой влево */
.lp-table-wrap {
  margin: var(--space-6) 0 0; overflow-x: auto;
  border: var(--border); border-radius: var(--radius-md);
  background: var(--color-surface);
}
.lp-table {
  width: 100%; min-width: 34rem; border-collapse: collapse;
  font-size: var(--text-base);
}
.lp-table th, .lp-table td {
  padding: var(--space-4) var(--space-5); text-align: left; vertical-align: top;
  border-bottom: var(--border);
}
.lp-table thead th {
  font-family: var(--font-mono); font-size: var(--text-xs);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--color-ink);
  background: var(--color-surface-sunken);
  border-bottom: var(--border-strong);
}
.lp-table tbody th {
  font-family: var(--font-display); font-weight: var(--weight-medium);
  color: var(--color-ink);
}
.lp-table td { color: var(--color-ink-80); }
/* Чередование строк: длинную строку глазом ведёт полоса, а не линейка */
.lp-table tbody tr:nth-child(even) th,
.lp-table tbody tr:nth-child(even) td {
  background: color-mix(in oklab, var(--color-surface-sunken) 55%, transparent);
}
.lp-table tbody tr:last-child th, .lp-table tbody tr:last-child td { border-bottom: 0; }
.lp-table__mark { color: var(--color-accent); }
.lp-table__mark .icon,
.lp-table__mark > svg { width: 1rem; height: 1rem; vertical-align: -0.15em; }
.lp-table__none { color: var(--color-ink-faint); }
.lp-table__note {
  margin: var(--space-4) auto 0; max-width: 70ch; text-align: center;
  font-size: var(--text-sm); color: var(--color-ink-muted);
}

/* Сравнение двух пакетов. Таблица, в которой обе колонки выглядят
   одинаково, заставляет читателя сравнивать строку за строкой — здесь
   платный столбец выделен подложкой и полным цветом текста, а
   бесплатный приглушён: разницу видно до чтения */
.lp-table--compare thead th:last-child {
  background: var(--color-accent); color: var(--color-accent-ink);
  border-bottom-color: var(--color-accent);
}
.lp-table--compare tbody td:last-child {
  background: var(--lp-tint); color: var(--color-ink);
}
.lp-table--compare tbody tr:nth-child(even) td:last-child {
  background: color-mix(in oklab, var(--lp-tint) 92%, var(--color-accent));
}
.lp-table--compare tbody td:nth-child(2) { color: var(--color-ink-muted); }
.lp-table__head {
  display: block; font-family: var(--font-display); font-size: var(--text-base);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-normal);
  text-transform: none;
}
.lp-table__head-note {
  display: block; margin-top: var(--space-1); font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
}
.lp-table--compare thead th:nth-child(2) .lp-table__head-note { color: var(--color-ink-muted); }
/* Чего в бесплатной проверке нет: знаком, а не словами */
.lp-table__no { display: inline-flex; width: 1rem; height: 1rem;
                margin-right: 0.35rem; vertical-align: -0.15em; color: var(--color-ink-faint); }
.lp-table__no > svg { width: 1rem; height: 1rem; }

/* --- перечень с галочками ------------------------------------------- */

.lp-check { margin: var(--space-5) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
@media (min-width: 48rem) { .lp-check--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-6); } }
.lp-check li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: 0.65rem; align-items: start;
  font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-ink-80); }
.lp-check .icon { width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; color: var(--color-accent); }
.lp-check b { color: var(--color-ink); font-family: var(--font-display); font-weight: var(--weight-medium); }

/* --- текст рядом с графикой ----------------------------------------- */

.lp-split { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 60rem) {
  .lp-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-9); }
  .lp-split--figure-first .lp-split__figure { order: -1; }
}
.lp-split__figure { min-width: 0; }
.lp-split__text p {
  margin: var(--space-4) 0 0; max-width: 56ch;
  font-size: var(--text-md); line-height: var(--leading-normal); color: var(--color-ink-80);
}

/* Подпись к схеме: что именно нарисовано и откуда числа */
.lp-figure { margin: 0; }
.lp-figure svg { width: 100%; height: auto; display: block; }
.lp-figure__note {
  margin: var(--space-4) 0 0; font-size: var(--text-sm);
  line-height: var(--leading-normal); color: var(--color-ink-muted);
}

/* --- полосы долей --------------------------------------------------- */

.lp-bars { margin: var(--space-6) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.lp-bar { display: grid; grid-template-columns: minmax(5rem, 8rem) minmax(0, 1fr) 3rem; gap: var(--space-4); align-items: center; }
.lp-bar__name { font-family: var(--font-display); font-size: var(--text-sm); }
.lp-bar__track { position: relative; height: 0.5rem; background: var(--color-line); border-radius: var(--radius-full); }
.lp-bar__fill {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--radius-full);
  background: var(--color-accent); width: var(--w);
  transition: width var(--duration) var(--ease);
}
.lp-bar__value { font-family: var(--font-mono); font-size: var(--text-sm); text-align: right; }
.is-armed .lp-bar__fill { width: 0; }
.is-seen .lp-bar__fill { width: var(--w); }

/* --- врезки --------------------------------------------------------- */

.lp-note {
  margin: var(--space-6) 0 0; padding: var(--space-5);
  border-left: 2px solid var(--color-accent); background: var(--color-surface-sunken);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.lp-note--warn { border-left-color: var(--color-signal); background: var(--color-signal-wash); }
.lp-note__label {
  margin: 0; font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink-faint);
}
.lp-note p { margin: var(--space-3) 0 0; max-width: 64ch; font-size: var(--text-base);
  line-height: var(--leading-normal); color: var(--color-ink-80); }
.lp-note b { color: var(--color-ink); }

/* --- пилюли --------------------------------------------------------- */

/* Пилюли стоят под заголовком по центру — и сами идут по центру */
.lp-pills { margin: var(--space-6) 0 0; padding: 0; list-style: none;
            display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.lp-pill {
  display: inline-block; padding: 0.35rem 0.75rem; border: var(--border);
  border-radius: var(--radius-full); font-size: var(--text-xs);
  color: var(--color-ink-muted); background: var(--color-surface);
}
.lp-pill { color: var(--color-ink-80); }
a.lp-pill:hover { border-color: var(--color-accent); color: var(--color-accent);
                  background: var(--lp-tint); }

/* --- тарифы --------------------------------------------------------- */

.lp-plans { margin: var(--space-6) 0 0; padding: 0; list-style: none;
  display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.lp-plan { padding: var(--space-5); border: var(--border); border-radius: var(--radius-md);
  background: var(--color-surface); display: flex; flex-direction: column; gap: var(--space-3); }
/* Кнопка прижата к низу карточки: тарифы разной длины, а ряд кнопок
   должен стоять на одной линии */
.lp-plan__action { margin-top: auto; padding-top: var(--space-5); }
.lp-plan__action .button { width: 100%; }
/* Обведённая кнопка: действие второго порядка, которое всё же надо видеть */
.button.lp-outline { background: none; border: 1px solid var(--color-line-strong);
                     color: var(--color-ink); }
.button.lp-outline:hover { border-color: var(--color-accent); color: var(--color-accent); }
.lp-plan--featured { border-color: var(--color-accent); box-shadow: var(--shadow-sm); }
.lp-plan__name { margin: 0; font-family: var(--font-display); font-size: var(--text-base);
  font-weight: var(--weight-medium); }
.lp-plan__price { margin: 0; font-family: var(--font-display);
  font-size: var(--text-2xl); line-height: 1; letter-spacing: var(--tracking-tight); }
.lp-plan__period { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-faint); }
.lp-plan__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.lp-plan__list li { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 0.5rem;
  font-size: var(--text-base); color: var(--color-ink-80); }
.lp-plan__list .icon { width: 1rem; height: 1rem; margin-top: 0.15rem; color: var(--color-accent); }

/* --- вопросы -------------------------------------------------------- */

.lp-faq { margin: var(--space-6) 0 0; border-top: var(--border); }
.lp-faq__item { border-bottom: var(--border); }
.lp-faq__q {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--text-md);
  line-height: var(--leading-snug);
}
.lp-faq__q::-webkit-details-marker { display: none; }
.lp-faq__sign { flex: none; color: var(--color-accent); font-family: var(--font-mono); }
.lp-faq__item[open] .lp-faq__sign { transform: rotate(45deg); }
.lp-faq__a { margin: 0 0 var(--space-5); max-width: 72ch; font-size: var(--text-base);
  line-height: var(--leading-normal); color: var(--color-ink-80); }

/* --- заключительный призыв ------------------------------------------ */

.lp-cta { padding: var(--space-9) 0; background: var(--color-surface-inverse); color: var(--color-ink-inverse); }
.lp-cta__inner { display: grid; gap: var(--space-6); }
@media (min-width: 60rem) {
  .lp-cta__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
}
.lp-cta__title { margin: 0; font-family: var(--font-display);
  font-size: clamp(1.6rem, 1rem + 2.2vw, 2.4rem); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight); max-width: 20ch; }
.lp-cta__text { margin: var(--space-4) 0 0; max-width: 48ch; font-size: var(--text-md);
  line-height: var(--leading-normal); color: var(--color-ink-inverse-muted); }
.lp-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* --- появление при прокрутке ---------------------------------------- */

.is-armed.lp-reveal { opacity: 0; transform: translateY(0.75rem); }
.is-seen.lp-reveal { opacity: 1; transform: none;
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .is-armed.lp-reveal { opacity: 1; transform: none; }
  .is-armed .lp-bar__fill { width: var(--w); }
}

/* Пара снимков рядом — та же мысль, что в статьях: один вопрос, заданный
   дважды, сравнивают, а не листают */
.lp-shots { display: grid; gap: var(--space-4); margin: var(--space-6) 0 0; }
.lp-shots figure { margin: 0; }
.lp-shots img { width: 100%; height: auto; display: block;
                border: var(--border); border-radius: var(--radius-md); }
.lp-shots figcaption { margin-top: var(--space-3); font-size: var(--text-sm);
                       line-height: var(--leading-normal); color: var(--color-ink-muted); }
@media (min-width: 48rem) {
  .lp-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
}

/* Снимки экрана ассистента тёмные, и во всю колонку они забивают страницу.
   Уменьшаем, обрезаем в одинаковую рамку (сами снимки разной высоты, и без
   обрезки низ у них разъезжается) и слегка приближаем на наведении —
   столько, чтобы прочитать имена, не уходя со страницы */
.lp-shots--small { max-width: 44rem; margin-inline: auto; }
.lp-shots--small .lp-shots__frame {
  display: block; overflow: hidden; aspect-ratio: 4 / 5;
  border: var(--border); border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}
.lp-shots--small img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  border: 0; border-radius: 0;
  transition: transform var(--duration) var(--ease);
}
.lp-shots--small figure:hover img,
.lp-shots--small figure:focus-within img { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .lp-shots--small img { transition: none; }
  .lp-shots--small figure:hover img { transform: none; }
}

/* Куда идти дальше. Ссылка внутри сноски — это и перелинковка, и
   следующий шаг покупателя; мелкой подписи под таблицей он не замечает,
   поэтому здесь она размером с кнопку и с рамкой */
.lp-next { margin: var(--space-6) auto 0; max-width: 62rem; display: grid; gap: var(--space-4); }
@media (min-width: 48rem) {
  .lp-next { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}
.lp-next__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5); border: var(--border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-ink);
  font-family: var(--font-display); font-size: var(--text-md);
  transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
}
.lp-next__item:hover { border-color: var(--color-accent); color: var(--color-accent); }
.lp-next__item .icon { flex: none; color: var(--color-accent); }
.lp-next__note {
  display: block; margin-top: var(--space-2); font-family: var(--font-text);
  font-size: var(--text-sm); line-height: var(--leading-normal);
  color: var(--color-ink-muted);
}

/* --- макет ответа ассистента ----------------------------------------- */

/* Не скриншот: настоящий ответ меняется от запроса к запросу, и снимок
   устарел бы к утру. Здесь показана форма ответа — вопрос, названные
   компании, источники под ними */
.lp-mock {
  padding: var(--space-5); border: var(--border); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-md);
}
.lp-mock__bar {
  display: flex; align-items: center; gap: var(--space-3);
  padding-bottom: var(--space-4); border-bottom: var(--border);
}
.lp-mock__engine {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-ink-faint);
}
.lp-mock__q {
  margin: var(--space-4) 0 0; font-family: var(--font-display);
  font-size: var(--text-md); line-height: var(--leading-snug);
}
.lp-mock__a {
  margin: var(--space-4) 0 0; font-size: var(--text-base);
  line-height: var(--leading-loose); color: var(--color-ink-80);
}
.lp-mock__name {
  color: var(--color-ink); font-family: var(--font-display);
  font-weight: var(--weight-medium);
}
.lp-mock__you {
  color: var(--color-you); font-family: var(--font-display);
  font-weight: var(--weight-medium);
  box-shadow: inset 0 -0.42em 0 var(--color-you-wash);
}
.lp-mock__sources {
  margin: var(--space-5) 0 0; padding: var(--space-4) 0 0; border-top: var(--border);
  display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none;
}
.lp-mock__source {
  padding: 0.2rem 0.55rem; border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-muted);
}
.lp-mock__source--own { background: var(--lp-tint); color: var(--color-accent); }
.lp-mock__foot {
  margin: var(--space-4) 0 0; font-size: var(--text-sm); color: var(--color-ink-muted);
}

/* --- плашка с результатом -------------------------------------------- */

/* Не скриншот отчёта, а его форма: заголовок, строки с долями, подпись.
   Настоящий отчёт открыт целиком на /sample-report — здесь показано,
   как он устроен */
.lp-panel {
  padding: var(--space-5); border: var(--border); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-md);
}
.lp-panel__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); padding-bottom: var(--space-4); border-bottom: var(--border);
}
.lp-panel__title {
  margin: 0; font-family: var(--font-display); font-size: var(--text-base);
  font-weight: var(--weight-medium);
}
.lp-panel__meta {
  margin: 0; font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--color-ink-faint);
}
.lp-panel__foot {
  margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: var(--border);
  font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-ink-muted);
}
/* Нулевая доля: не ошибка вёрстки, а находка отчёта — её видно */
.lp-bar--zero .lp-bar__value { color: var(--color-signal); }
.lp-bar--zero .lp-bar__track { background: var(--color-signal-wash); }