/* =======================================================================
   Разделы 02–04: профили и листинг. Словарь блоков Б1…Б21.

   Оформление снято с образца «Главная - профиль организации» из Claude Design.
   Там всё инлайном (так устроен редактор макетов) — здесь те же значения
   именами, чтобы двадцать страниц не тащили копию стилей.

   Ни одного числа «на глаз»: цвета и радиусы — из tokens.css / tokens-design.css.
   ======================================================================= */

/* ---------- Полотно страницы ---------- */
body { margin: 0; background: var(--color-surface-muted); font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }
.pf-root { min-height: 100%; }
/* container-type — чтобы работали контейнерные запросы оболочки (.yg-*) и раздела,
   и чтобы эмуляция 430 px с пульта переключала раскладку по-настоящему. */
.pf-page { container-type: inline-size; background: var(--color-surface-canvas); }
.pf-page.is-mobile { max-width: 430px; margin-inline: auto; box-shadow: 0 0 0 1px var(--color-border-card); }
.pf-hero { background: var(--color-surface-canvas); }

/* ---------- Каркас страницы ---------- */
.pf-wrap { max-width: var(--content-max); margin-inline: auto; padding-inline: 24px; }
.pf-sec { padding-block: 56px; background: var(--color-surface-canvas); }
.pf-sec--soft { background: var(--color-surface-muted); border-top: 1px solid var(--color-border-card); }
.pf-sec--dark { background: var(--gradient-dark-panel); }
/* Первая секция после шапки-идентичности: сверху 40, не 56. */
.pf-sec--first { padding-block: 40px 56px; }
/* Сниппеты идут подряд по белому: разделяет линия внутри контейнера, а не двойной отступ. */
.pf-sec--snip { padding-block: 56px 0; }
.pf-sec--snip + .pf-sec--snip > .pf-wrap { padding-top: 56px; border-top: 1px solid var(--color-border-card); }

.pf-h1 { margin: 0; font: 700 30px/1.15 var(--font-ui); letter-spacing: -.025em; }
.pf-h2 { margin: 0; font: 600 28px/1.25 var(--font-ui); letter-spacing: -.02em; text-wrap: balance; }
.pf-h3 { margin: 0; font: 600 21px/1.3 var(--font-ui); letter-spacing: -.01em; }
.pf-lead { margin: 6px 0 26px; font-size: 15px; line-height: 1.5; color: var(--color-text-muted); }
.pf-lead--tight { margin-bottom: 18px; }
/* Заголовок секции и ссылка «все» в одну строку, по нижнему краю. */
.pf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.pf-head p { margin: 6px 0 0; font-size: 15px; color: var(--color-text-muted); }
.pf-more { flex: none; font: 600 14px/1 var(--font-ui); color: var(--color-action-primary); text-decoration: none; white-space: nowrap; }
.pf-more:hover { text-decoration: underline; }

/* Горизонтальная прокрутка: вкладки, чипы, меню, карусели. */
.pf-hs { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--color-dot) transparent; }
.pf-hs::-webkit-scrollbar { height: 6px; }
.pf-hs::-webkit-scrollbar-thumb { background: var(--color-dot); border-radius: 999px; }

/* Сетки. Число в имени — минимальная колонка из образца. */
.pf-grid { display: grid; gap: 12px; }
.pf-grid--258 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.pf-grid--268 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 14px; }
.pf-grid--272 { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.pf-grid--300 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.pf-grid--330 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.pf-stack { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Б1 · Шапка-идентичность, полная ---------- */
/* 160 px — нижняя граница вилки 160–200 из контракта Б1. Верхняя не нужна:
   первый экран обязан доводить до формы, а не до обложки. */
.pf-cover { height: 160px; background: var(--gradient-dark-panel); }
.pf-idrow { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
/* Отрицательный отступ — на самом аватаре, а не на строке: иначе имя лезет на обложку. */
.pf-ava {
  flex: none; width: 104px; height: 104px; margin-top: -40px; border-radius: 22px;
  background: var(--color-surface-canvas); border: 3px solid var(--color-surface-canvas);
  box-shadow: 0 4px 20px rgba(65, 94, 250, .14); display: grid; place-items: center;
  font: 700 28px/1 var(--font-ui); color: var(--color-action-primary); letter-spacing: -.02em;
  overflow: hidden;
}
.pf-idbody { flex: 1 1 320px; min-width: 0; padding-top: 16px; }
.pf-idtop { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pf-check {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: var(--radius-pill);
  background: var(--c-primary-soft); color: var(--color-action-primary); font: 600 12px/1 var(--font-ui);
}
.pf-spec { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--color-text-muted); }
/* Строка фактов — текстовая строка, не сетка карточек: см. Б1, три отвергнутых способа. */
.pf-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; font-size: 13.5px; line-height: 1.4; color: var(--color-text-muted); }
.pf-facts b { font-weight: 600; color: var(--color-text-primary); }
.pf-facts a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--color-dot); }
.pf-facts a:hover { color: var(--color-action-primary); border-color: currentColor; }
.pf-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--color-dot); }
.pf-fact-star { display: inline-flex; align-items: center; gap: 4px; }

/* ---------- Профильное меню ---------- */
/* Липнет ПОД шапкой продукта: top = её высота, z-index ниже. */
.pf-menu {
  position: sticky; top: 50px; z-index: 30; margin-top: 16px;
  background: var(--color-surface-canvas);
  border-top: 1px solid var(--color-border-card); border-bottom: 1px solid var(--color-border-card);
}
.pf-menu__in { max-width: var(--content-max); margin-inline: auto; padding-inline: 24px; display: flex; gap: 2px; }
.pf-menu a {
  flex: none; display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px;
  font: 500 13.5px/1 var(--font-ui); color: var(--color-text-muted); text-decoration: none; white-space: nowrap;
}
.pf-menu a:hover { color: var(--color-action-primary); }
.pf-menu a.is-on { font-weight: 600; color: var(--color-text-primary); box-shadow: inset 0 -3px 0 var(--color-action-primary); }

/* ---------- Б2 · Шапка-идентичность, сжатая ---------- */
.pf-slim { background: var(--color-surface-canvas); border-bottom: 1px solid var(--color-border-card); }
.pf-slim__in { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-block: 16px; }
.pf-slim__ava {
  flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: var(--gradient-marketing); color: #06231f; font: 700 17px/1 var(--font-ui);
}
.pf-slim__b { flex: 1 1 200px; min-width: 0; }
.pf-slim__b b { display: block; font: 600 17px/1.3 var(--font-ui); }
.pf-slim__b span { display: block; margin-top: 3px; font-size: 13px; color: var(--color-text-muted); }

/* ---------- Кнопки раздела ---------- */
/* Обводная кнопка карточки. margin-top:auto — правило карточек с кнопкой. */
.pf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; min-height: 44px; margin-top: auto; padding: 0 16px;
  border-radius: var(--r-sub); border: 1.5px solid var(--color-action-primary);
  background: var(--color-surface-canvas); color: var(--color-action-primary);
  cursor: pointer; font: 600 13.5px/1 var(--font-ui); text-decoration: none;
}
.pf-btn:hover { background: var(--c-primary-soft); }
.pf-btn--mute { border-color: var(--color-border-soft); color: var(--color-text-secondary); }
.pf-btn--mute:hover { background: var(--color-surface-soft); }
/* Полноширинная кнопка перехода внизу сниппета (Б7). */
.pf-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; margin-top: 14px; padding: 0 24px;
  border-radius: var(--r-control); border: 1.5px solid var(--color-border-soft);
  background: var(--color-surface-canvas); color: var(--color-text-primary);
  font: 600 14.5px/1 var(--font-ui); text-decoration: none; cursor: pointer;
}
.pf-cta:hover { border-color: var(--color-action-primary); }
.pf-cta svg { flex: none; width: 18px; height: 18px; color: var(--color-action-primary); }
/* Чип фильтра. 44 px — тап-цель продукта, значения 36 px в ядре нет. */
.pf-chip {
  flex: none; min-height: 44px; padding: 0 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-soft); background: var(--color-surface-canvas);
  color: var(--color-text-secondary); font: 500 13px/1 var(--font-ui); cursor: pointer; white-space: nowrap;
}
.pf-chip:hover { border-color: var(--color-border-hover); }
.pf-chip.is-on {
  border-color: transparent; background: var(--c-primary-soft);
  color: var(--color-action-primary); font-weight: 600; box-shadow: var(--ring-choice);
}
.pf-chips { display: flex; gap: 8px; margin-bottom: 16px; }

/* ---------- Б13 · Особенности ---------- */
.pf-feat {
  display: flex; align-items: flex-start; gap: 14px; padding: 20px;
  background: var(--color-surface-canvas); border: 1px solid var(--color-border-card); border-radius: 16px;
}
.pf-feat__ic { flex: none; width: 38px; height: 38px; border-radius: var(--r-control); background: var(--c-primary-soft); display: grid; place-items: center; }
.pf-feat b { display: block; font: 600 15.5px/1.35 var(--font-ui); }
.pf-feat b + span { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--color-text-muted); }

/* ---------- Б6 · Карточка ситуации ---------- */
.pf-sit {
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px; padding: 20px;
  text-align: left; cursor: pointer; border: 1px solid var(--color-border-soft);
  border-radius: var(--r-choice); background: var(--color-surface-canvas);
  transition: border-color var(--ease-ui), transform var(--ease-ui), box-shadow var(--ease-ui);
}
.pf-sit:hover { border-color: var(--color-border-hover); transform: translateY(-1px); }
.pf-sit.is-on { border-color: transparent; background: var(--wash-choice); box-shadow: var(--ring-choice); }
.pf-sit__t { font: 600 16px/1.35 var(--font-ui); color: var(--color-text-primary); }
.pf-sit__p { font: 400 12.5px/1.45 var(--font-ui); color: var(--color-text-muted); }
.pf-sit__price {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border-radius: var(--radius-pill); background: var(--c-primary-soft);
  color: var(--color-action-primary); font: 600 12.5px/1 var(--font-ui);
}
.pf-sit__price--mute { background: var(--color-surface-control); color: var(--color-text-muted); }

/* ---------- Карточка общего вида ---------- */
.pf-card {
  display: flex; flex-direction: column; gap: 12px; padding: 20px;
  background: var(--color-surface-canvas); border: 1px solid var(--color-border-card); border-radius: 16px;
}
.pf-card__t { font: 600 17px/1.3 var(--font-ui); }
.pf-card__d { margin-top: 5px; font-size: 13.5px; line-height: 1.5; color: var(--color-text-muted); }
.pf-card__m { margin-top: 8px; font-size: 13px; color: var(--color-text-subtle); }

/* ---------- Б15 · Карточка юриста ---------- */
.pf-person { display: flex; align-items: center; gap: 13px; }
.pf-person__ava {
  flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gradient-marketing); color: #06231f; font: 700 16px/1 var(--font-ui);
}
.pf-person__b { min-width: 0; }
.pf-person__b a { display: block; font: 600 15.5px/1.3 var(--font-ui); color: var(--color-text-primary); text-decoration: none; }
.pf-person__b a:hover { color: var(--color-action-primary); }
.pf-person__b span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--color-text-muted); }
/* Строка «сейчас не принимает» вместо кнопки — Б12 на уровне карточки. */
.pf-off {
  margin-top: auto; display: flex; align-items: center; justify-content: center; min-height: 44px;
  border-radius: var(--r-sub); background: var(--color-surface-muted);
  color: var(--color-text-subtle); font: 500 13px/1 var(--font-ui);
}

/* ---------- Б21 · Как проходит работа ---------- */
.pf-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.pf-tab {
  flex: none; min-height: 44px; padding: 0 18px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-soft); background: var(--color-surface-canvas);
  color: var(--color-text-secondary); cursor: pointer;
  font: 600 13.5px/1 var(--font-ui); white-space: nowrap; transition: all var(--ease-ui);
}
.pf-tab:hover { border-color: var(--color-border-hover); }
.pf-tab.is-on { border-color: transparent; background: var(--color-text-primary); color: #fff; }
.pf-steppanel {
  display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-start; padding: 28px;
  background: var(--color-surface-soft); border: 1px solid var(--color-border-card); border-radius: 16px;
}
.pf-step__b { flex: 1 1 320px; min-width: 0; }
.pf-step__k { font: 700 12px/1 var(--font-ui); color: var(--color-action-primary); letter-spacing: .1em; }
.pf-step__b h3 { margin: 12px 0 0; }
.pf-step__b p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--color-text-secondary); max-width: 52ch; }
.pf-step__time {
  flex: 0 0 auto; padding: 18px 22px; background: var(--color-surface-canvas);
  border: 1px solid var(--color-border-card); border-radius: var(--r-choice);
}
.pf-step__time span { font-size: 12.5px; color: var(--color-text-subtle); }
.pf-step__time b { display: block; margin-top: 6px; font: 700 20px/1.15 var(--font-ui); }

/* ---------- Б8 · Кейс ---------- */
.pf-det { border: 1px solid var(--color-border-card); border-radius: 16px; background: var(--color-surface-canvas); }
/* Паддинг на summary, а не на details: иначе кликабельна только строка текста. */
.pf-det > summary { cursor: pointer; list-style: none; padding: 20px; }
.pf-det > summary::-webkit-details-marker { display: none; }
.pf-det > summary:hover { color: var(--color-action-primary); }
.pf-tag {
  display: inline-flex; padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--color-surface-chip); color: var(--color-text-muted); font: 600 11.5px/1 var(--font-ui);
}
.pf-case__t { display: block; margin-top: 10px; font: 600 16px/1.35 var(--font-ui); color: var(--color-text-primary); }
.pf-case__r { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pf-case__n { font: 700 22px/1.1 var(--font-ui); color: var(--color-action-primary); font-variant-numeric: tabular-nums; }
.pf-case__n--no { color: var(--color-text-muted); }
.pf-case__s { font-size: 13px; color: var(--color-text-muted); }
.pf-det__body { margin: 0 20px 20px; padding-top: 14px; border-top: 1px solid var(--color-border-card); font-size: 13.5px; line-height: 1.6; color: var(--color-text-muted); }

/* ---------- Б9 · Отзыв ---------- */
.pf-rev { padding: 20px; border: 1px solid var(--color-border-card); border-radius: 16px; background: var(--color-surface-canvas); }
.pf-rev__h { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.pf-rev__n { font: 600 14.5px/1 var(--font-ui); }
.pf-verified {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--c-primary-soft); color: var(--color-action-primary); font: 600 11px/1.3 var(--font-ui);
}
.pf-stars { margin-left: auto; display: inline-flex; gap: 2px; }
.pf-rev__m { margin-top: 6px; font-size: 12px; color: var(--color-text-subtle); }
.pf-rev p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--color-text-secondary); }
.pf-rev__ans {
  margin-top: 12px; padding: 13px 15px; border-radius: var(--r-control);
  background: var(--color-surface-soft); border-left: 2px solid var(--color-action-primary);
}
.pf-rev__ans b { font: 600 12.5px/1 var(--font-ui); color: var(--color-action-primary); }
.pf-rev__ans p { margin: 7px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--color-text-muted); }
/* Сводка оценок */
.pf-score { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding: 20px 22px; margin-bottom: 14px; background: var(--color-surface-soft); border: 1px solid var(--color-border-card); border-radius: 16px; }
.pf-score__v { display: flex; align-items: baseline; gap: 8px; }
.pf-score__v b { font: 700 40px/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.pf-bars { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 5px; }
.pf-bar { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--color-text-muted); }
.pf-bar > span:first-child { width: 12px; }
.pf-bar__t { flex: 1; height: 6px; border-radius: 999px; background: var(--color-border-card); overflow: hidden; }
.pf-bar__t i { display: block; height: 100%; background: var(--color-action-primary); }
.pf-bar__t i.is-low { background: var(--color-text-subtle); }
.pf-bar > span:last-child { width: 32px; text-align: right; }

/* ---------- Б17 · Вопрос-ответ ---------- */
/* Раскрывающая область — сам summary, минимум 60 px: строка текста дала бы ~22. */
.pf-qa > summary { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 14px 20px; }
.pf-qa__q { flex: 1; font: 600 15.5px/1.4 var(--font-ui); }
.pf-qa__often { flex: none; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--color-surface-chip); color: var(--color-text-muted); font: 600 11px/1.4 var(--font-ui); }
.pf-qa__a { margin: 0 20px; padding-top: 14px; border-top: 1px solid var(--color-border-card); font-size: 14px; line-height: 1.6; color: var(--color-text-secondary); }
.pf-qa__by { margin: 10px 20px 16px; font-size: 12.5px; color: var(--color-text-subtle); }

/* ---------- Б10 · Позиция услуги ---------- */
.pf-svc { padding: 20px; border: 1px solid var(--color-border-card); border-radius: 16px; background: var(--color-surface-canvas); }
.pf-svc__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pf-svc__h b { font: 600 16px/1.3 var(--font-ui); }
.pf-svc__p { font: 700 17px/1 var(--font-ui); color: var(--color-action-primary); white-space: nowrap; }
.pf-svc__k { margin-top: 12px; font: 600 12.5px/1 var(--font-ui); color: var(--color-text-muted); }
.pf-svc__k--no { color: var(--color-text-subtle); }
.pf-svc p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--color-text-secondary); }
.pf-svc p.is-no { color: var(--color-text-muted); }

/* ---------- Б11 · Похожие исполнители, карусель ---------- */
/* scroll-padding-inline обязателен при padding-inline + snap, иначе первая карточка уезжает. */
.pf-rail {
  display: flex; gap: 12px; padding: 4px 24px 12px; max-width: var(--content-max); margin-inline: auto;
  scroll-snap-type: x mandatory; scroll-padding-inline: 24px;
}
.pf-rail > * { flex: none; width: 276px; scroll-snap-align: start; }
.pf-rail .pf-card { padding: 18px; gap: 10px; }
.pf-rail .pf-card--more { border-style: dashed; border-color: var(--color-dot); }

/* ---------- Б14 · Микро-сниппет подстраницы ---------- */
.pf-micro {
  display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 16px 18px;
  background: var(--color-surface-canvas); border: 1px solid var(--color-border-card);
  border-radius: var(--r-choice); text-decoration: none; color: inherit;
}
.pf-micro:hover { border-color: var(--color-action-primary); }
.pf-micro__b { flex: 1; min-width: 0; }
.pf-micro__b b { display: block; font: 600 14.5px/1.3 var(--font-ui); color: var(--color-text-primary); }
.pf-micro__b span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--color-text-muted); }
.pf-micro svg { flex: none; width: 18px; height: 18px; color: var(--color-action-primary); }

/* ---------- Б12 · Приём приостановлен ---------- */
.pf-pause {
  padding: 12px 14px; border-radius: var(--r-sub); background: var(--color-warning-soft);
  border: 1px solid rgba(138, 109, 26, .3); color: var(--color-warning);
  font-size: 13.5px; line-height: 1.5; margin-bottom: 22px;
}

/* ---------- Б19 · SEO-текст ---------- */
.pf-seo { font-size: 14.5px; line-height: 1.7; color: var(--color-text-secondary); }
.pf-seo p { margin: 0 0 12px; max-width: 76ch; }
.pf-seo h3 { margin: 22px 0 8px; font: 600 17px/1.35 var(--font-ui); }
.pf-seo > summary { cursor: pointer; list-style: none; font: 600 14.5px/1 var(--font-ui); color: var(--color-action-primary); min-height: 44px; display: flex; align-items: center; }
.pf-seo > summary::-webkit-details-marker { display: none; }

/* ---------- Б20 · Фильтры листинга ---------- */
.pf-filters {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 16px;
  background: var(--color-surface-canvas); border: 1px solid var(--color-border-card); border-radius: 16px;
}
.pf-sel {
  min-height: 44px; padding: 0 13px; border-radius: var(--r-sub);
  border: 1px solid var(--color-border-soft); background: var(--color-surface-canvas);
  font: 500 13.5px/1 var(--font-ui); color: var(--color-text-primary); cursor: pointer;
}
.pf-sel:focus { outline: none; border-color: var(--color-action-primary); box-shadow: 0 0 0 3px rgba(20,167,160,.16); }
.pf-applied { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.pf-applied__chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px;
  border-radius: var(--radius-pill); background: var(--c-primary-soft);
  color: var(--color-action-primary); font: 600 13px/1 var(--font-ui); border: none; cursor: pointer;
}
.pf-mobfilter { display: none; }

/* ---------- Б18 · Карточка исполнителя в листинге ---------- */
.pf-lc { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--color-surface-canvas); border: 1px solid var(--color-border-card); border-radius: 16px; }
.pf-lc:hover { border-color: var(--color-border-hover); }
/* Тело карточки — одна большая ссылка в профиль. Оформление внутри снимаем:
   иначе весь текст карточки красится и подчёркивается как ссылка. */
.pf-lc__body { flex: 1; display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit; }
.pf-lc__body, .pf-lc__body * { text-decoration: none; }
.pf-lc__body .pf-person__b b { display: block; font: 600 15.5px/1.3 var(--font-ui); color: var(--color-text-primary); }
.pf-lc__body:hover .pf-person__b b { color: var(--color-action-primary); }
.pf-lc__body .pf-person__b span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--color-text-muted); }
.pf-lc__rate { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-lc__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: auto; }
.pf-lc__acts { display: flex; gap: 8px; }
.pf-lc__acts > * { flex: 1; margin-top: 0; }
.pf-lc__marks { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-lc__mark { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--color-surface-chip); color: var(--color-text-muted); font: 500 12px/1.3 var(--font-ui); }
.pf-lc__price { font: 700 16px/1 var(--font-ui); color: var(--color-action-primary); }
.pf-pager { display: flex; justify-content: center; gap: 6px; margin-top: 20px; }
.pf-pager a, .pf-pager span {
  min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 12px; border-radius: var(--r-sub); border: 1px solid var(--color-border-soft);
  color: var(--color-text-secondary); text-decoration: none; font: 500 14px/1 var(--font-ui);
}
.pf-pager a:hover { border-color: var(--color-action-primary); color: var(--color-action-primary); }
.pf-pager .is-on { border-color: transparent; background: var(--c-primary-soft); color: var(--color-action-primary); font-weight: 600; box-shadow: var(--ring-choice); }

/* ---------- Заглушка готового компонента ---------- */
.pf-src { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--color-text-subtle); }
.pf-src code { font: 500 11.5px/1.4 var(--wb-mono, ui-monospace, monospace); }

/* ---------- Пустое состояние ---------- */
.pf-empty {
  padding: 28px 24px; text-align: center; background: var(--color-surface-soft);
  border: 1px dashed var(--color-border-soft); border-radius: 16px;
  font-size: 14px; line-height: 1.6; color: var(--color-text-muted);
}
.pf-empty b { display: block; margin-bottom: 4px; font: 600 15.5px/1.35 var(--font-ui); color: var(--color-text-primary); }

/* ---------- Подвал ---------- */
.pf-footer { background: var(--color-dark-navy); color: #fff; padding-block: 44px 28px; }
.pf-footer b { font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--color-action-primary); }
.pf-footer p { margin: 8px 0 0; max-width: 44ch; font-size: 13.5px; line-height: 1.6; color: var(--color-text-on-dark-muted); }
.pf-footer__legal { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); }
.pf-footer__legal a { font-size: 12.5px; color: var(--color-text-on-dark-muted); text-decoration: none; }
.pf-footer__legal a:hover { color: #fff; }
.pf-footer__c { margin-top: 16px; font-size: 12.5px; line-height: 1.6; color: var(--color-text-on-dark-muted); }

/* ---------- Б4 · карточка расчёта на тёмной секции ---------- */
.pf-calc { max-width: 640px; margin-inline: auto; }

/* ---------- Мобильная раскладка ----------
   Контейнерные запросы, а не медиа: иначе эмуляция 430 px с пульта
   показывала бы десктопную раскладку в узкой рамке. */
@container (max-width: 720px) {
  .pf-cover { height: 110px; }
  .pf-ava { width: 84px; height: 84px; margin-top: -32px; border-radius: 18px; font-size: 22px; }
  .pf-h1 { font-size: 24px; }
  .pf-h2 { font-size: 22px; }
  .pf-sec { padding-block: 40px; }
  .pf-sec--first { padding-block: 28px 40px; }
  .pf-sec--snip { padding-block: 40px 0; }
  .pf-sec--snip + .pf-sec--snip > .pf-wrap { padding-top: 40px; }
  .pf-wrap { padding-inline: 16px; }
  .pf-menu__in { padding-inline: 16px; }
  .pf-rail { padding-inline: 16px; scroll-padding-inline: 16px; }
  .pf-steppanel { padding: 20px; gap: 18px; }
  .pf-step__time { width: 100%; }
  /* Фильтры: одна кнопка со счётчиком и шторка — панель на узком экране не помещается. */
  .pf-filters { display: none; }
  .pf-mobfilter { display: flex; }
}

/* =======================================================================
   Карта референса — служебный вход, а не страница продукта.
   Оболочки нет намеренно: с гео-баром и шапкой она читается как часть
   продукта. Главная страница продукта появится отдельным разделом.
   ======================================================================= */
.mp {
  max-width: 760px; margin-inline: auto; padding: 56px 24px 72px;
  font-family: var(--font-ui); color: var(--color-text-primary);
}
.mp-h { padding-bottom: 26px; margin-bottom: 8px; border-bottom: 1px solid var(--color-border-card); }
.mp-logo { font: 700 15px/1 var(--font-ui); letter-spacing: -.02em; color: var(--color-action-primary); }
.mp-h h1 { margin: 12px 0 0; font: 700 32px/1.15 var(--font-ui); letter-spacing: -.025em; }
.mp-h p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--color-text-muted); }
.mp-g { padding-top: 32px; }
.mp-g h2 { margin: 0; font: 600 19px/1.3 var(--font-ui); letter-spacing: -.01em; }
.mp-g > p { margin: 5px 0 14px; font-size: 14px; line-height: 1.55; color: var(--color-text-muted); }
.mp-l { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mp-l li { border-bottom: 1px solid var(--color-border-card); display: flex; align-items: center; gap: 10px; }
.mp-l li:first-child { border-top: 1px solid var(--color-border-card); }
.mp-l a {
  flex: 1; display: flex; align-items: center; min-height: 52px;
  font: 500 15.5px/1.35 var(--font-ui); color: var(--color-text-primary); text-decoration: none;
}
.mp-l a::after { content: "→"; margin-left: auto; color: var(--color-action-primary); opacity: 0; transition: opacity var(--ease-ui); }
.mp-l li:hover a { color: var(--color-action-primary); }
.mp-l li:hover a::after { opacity: 1; }
.mp-l span {
  flex: none; padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--color-surface-chip); color: var(--color-text-muted); font: 600 11.5px/1.3 var(--font-ui);
}
.mp-f { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--color-border-card); display: flex; flex-direction: column; gap: 8px; }
.mp-f a { min-height: 44px; display: inline-flex; align-items: center; font: 600 14.5px/1 var(--font-ui); color: var(--color-action-primary); text-decoration: none; }
.mp-f a:hover { text-decoration: underline; }
.mp-f span { font-size: 13px; line-height: 1.6; color: var(--color-text-subtle); }
@media (max-width: 620px) { .mp { padding: 36px 18px 56px; } .mp-h h1 { font-size: 26px; } }

/* =======================================================================
   Б20 · Фильтры листинга. Панель с поповерами на десктопе, шторка на мобильном.
   Одно состояние на оба вида — иначе они расходятся.
   ======================================================================= */
.lf-wrap { margin-bottom: 16px; }
.lf-f { position: relative; }
.lf-pop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 25; min-width: 232px;
  padding: 6px; background: var(--color-surface-canvas);
  border: 1px solid var(--color-border-card); border-radius: var(--r-control);
  box-shadow: 0 12px 34px -12px rgba(17, 17, 27, .28);
  display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto;
}
.lf-o {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px;
  border: none; border-radius: var(--r-sub); background: none; cursor: pointer;
  font: 500 13.5px/1.3 var(--font-ui); color: var(--color-text-secondary); text-align: left;
}
.lf-o:hover { background: var(--color-surface-soft); }
.lf-o svg { margin-left: auto; flex: none; color: var(--color-action-primary); opacity: 0; }
.lf-o.is-on { color: var(--color-action-primary); font-weight: 600; background: var(--c-primary-soft); }
.lf-o.is-on svg { opacity: 1; }
.lf-more {
  min-height: 44px; padding: 0 14px; border: 1px dashed var(--color-border-soft);
  border-radius: var(--r-sub); background: none; cursor: pointer;
  font: 500 13.5px/1 var(--font-ui); color: var(--color-text-muted); white-space: nowrap;
}
.lf-more:hover { border-color: var(--color-action-primary); color: var(--color-action-primary); }
.lf-reset {
  flex: none; min-height: 44px; padding: 0 12px; border: none; background: none; cursor: pointer;
  font: 600 13px/1 var(--font-ui); color: var(--color-text-muted); text-decoration: underline;
  white-space: nowrap;
}
.lf-reset:hover { color: var(--color-action-primary); }
.pf-applied__chip span:last-child { font-size: 15px; line-height: 1; opacity: .7; }

/* Мобильная шторка: панель на 430 px не помещается, а боковой колонки нет по контракту. */
.lf-mob { display: none; align-items: center; min-height: 44px; padding: 0; border: none; background: none; cursor: pointer; }
.lf-scrim { position: fixed; inset: 0; z-index: 80; background: var(--color-backdrop); display: flex; align-items: flex-end; }
.lf-sheet {
  width: 100%; max-height: 88vh; display: flex; flex-direction: column;
  background: var(--color-surface-canvas);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-card);
}
.lf-sheet__h { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--color-border-card); }
.lf-sheet__h b { flex: 1; font: 600 17px/1.3 var(--font-ui); }
.lf-sheet__b { flex: 1; overflow-y: auto; padding: 6px 12px 12px; }
.lf-sg { padding-top: 14px; }
.lf-sg__h { font-family: var(--wb-mono, monospace); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-subtle); padding: 0 10px 6px; }
.lf-sheet__f { display: flex; gap: 10px; padding: 12px 16px 16px; border-top: 1px solid var(--color-border-card); }

/* =======================================================================
   Б22 · Веб-истории. Только платный тариф, полоса под шапкой профиля.
   Высота нарочно скромная: ниже стоит форма, которая обязана попасть
   в первый экран (контракт Б3).
   ======================================================================= */
/* Полоса нарочно низкая: ниже стоит форма, которая по контракту Б3 обязана
   попасть в первый экран на 1440×900. Каждый лишний пиксель здесь выталкивает её. */
.st-sec { padding-block: 14px 0; background: var(--color-surface-canvas); }
.st-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.st-head h2 { margin: 0; font: 600 17px/1.3 var(--font-ui); letter-spacing: -.01em; }
.st-head span { font-size: 13px; color: var(--color-text-muted); }
.st-rail { display: flex; gap: 10px; padding-bottom: 4px; }
.st-card {
  position: relative; flex: none; width: 112px; height: 104px; padding: 10px 11px 11px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  border: none; border-radius: var(--r-choice); cursor: pointer; text-align: left; overflow: hidden;
  background: var(--gradient-dark-panel); color: #fff;
  box-shadow: inset 0 0 0 2px var(--color-action-primary), 0 6px 18px -12px rgba(17, 17, 27, .5);
  transition: transform var(--ease-ui);
}
.st-card:hover { transform: translateY(-2px); }
/* Просмотренная — без кольца, как в любых историях. */
.st-card.is-seen { box-shadow: inset 0 0 0 1px var(--color-border-soft), 0 6px 18px -12px rgba(17, 17, 27, .5); opacity: .82; }
/* Киккер — одна строка: на второй он съедает строку у самого названия. */
.st-card__k { font: 600 10px/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.st-card__t { font: 600 13px/1.28 var(--font-ui); text-wrap: balance; }

.st-view { position: fixed; inset: 0; z-index: 90; background: rgba(8, 14, 16, .82); display: flex; align-items: center; justify-content: center; padding: 16px; }
.st-view__in {
  position: relative; width: 100%; max-width: 400px; height: min(720px, 88vh);
  display: flex; flex-direction: column; padding: 14px;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--gradient-dark-panel); color: #fff; box-shadow: 0 24px 70px rgba(0,0,0,.5);
}
/* Градиент к низу светлеет, и кнопка на нём терялась. Затемняем подошву. */
.st-view__in::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8, 14, 16, .62) 0%, rgba(8, 14, 16, .12) 42%, transparent 70%);
}
.st-bars, .st-view__h, .st-slide, .st-view__f { position: relative; z-index: 2; }
.st-bars { display: flex; gap: 4px; }
.st-bars i { flex: 1; height: 3px; border-radius: 999px; background: rgba(255,255,255,.28); }
.st-bars i.is-done { background: #fff; }
.st-bars i.is-now { background: #fff; opacity: .85; }
.st-view__h { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.st-view__k { flex: 1; font: 600 11px/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.st-x { width: 36px; height: 36px; flex: none; border: none; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 21px; line-height: 1; cursor: pointer; }
.st-slide { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 8px 6px 20px; }
.st-slide__k { font: 700 12px/1.2 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: #42e3b4; }
.st-slide__t { margin: 0; font: 600 25px/1.35 var(--font-ui); letter-spacing: -.015em; text-wrap: balance; }
/* Тап-зоны под текстом, но над фоном: кнопка внизу остаётся кликабельной. */
.st-tap { position: absolute; top: 60px; bottom: 96px; width: 34%; cursor: pointer; }
.st-tap--prev { left: 0; }
.st-tap--next { right: 0; }
.st-view__f { position: relative; z-index: 2; }
.st-view__f .btn-primary { min-height: 50px; border-radius: var(--r-control); }

@container (max-width: 720px) {
  /* На узком экране строка фильтров не помещается и даёт боковую прокрутку —
     вместо неё одна кнопка и шторка снизу. */
  /* Порядок на узком экране: фильтры слева, отложенное справа. */
  .lf-mob { display: inline-flex; align-items: center; order: 1; flex: 1; min-width: 0; }
  .lst-favbtn { order: 2; }
  .lf-mob__in {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; min-height: 38px; padding: 0 16px;
    border: 1px solid var(--color-border-soft); border-radius: 999px;
    background: var(--color-surface-canvas);
    font: 600 14.5px/1 var(--font-ui); color: var(--color-text-primary);
  }
  .lf-mob__n { min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 999px; background: var(--color-action-primary); color: #fff; font-size: 12px; }
  .st-card { width: 100px; height: 96px; }
  .st-slide__t { font-size: 21px; }
}

/* В разделе 01 выезжающие панели обрезаны рамкой стенда (.wb-frame, overflow:hidden).
   Здесь рамки нет: убранная за правый край панель растягивала страницу и давала
   горизонтальную прокрутку. На настоящей странице это панели уровня окна. */
.pf-root .yg-menu, .pf-root .yg-dd, .pf-root .yg-dd-back,
.pf-root .yg-topsheet, .pf-root .yg-topsheet-scrim,
.pf-root .yg-back, .pf-root .bot-screen,
.pf-root .pplx-zone, .pf-root .pplx-scrim { position: fixed; }
/* Виджет прижат к нижней кромке: он и так висит поверх контента, и воздух под ним
   только отнимает экран. Боковые отступы оставляем — полоса не должна касаться краёв. */
.pf-root .pplx-zone { padding: 10px 10px 2px; }

/* =======================================================================
   Листинг: липкая полоса фильтров, плотность выдачи, топы, быстрый профиль,
   соседние подборки и теги. Раздел 04.
   ======================================================================= */
/* Липкая строка — только фильтры. Сортировка и плотность стоят отдельно, над выдачей:
   «чем сузить выборку» и «как её показать» — разные вопросы, в одном ряду им тесно. */
.lst-sticky {
  position: sticky; top: 50px; z-index: 25; padding-block: 1px;
  background: var(--color-surface-canvas); border-bottom: 1px solid var(--color-border-card);
}
.lst-bar { display: flex; align-items: center; gap: 6px; }
.lst-bar__filters { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; }
/* Тап-цель — вся кнопка (44 px), видимая пилюля внутри ниже: строка выглядит
   компактнее, но палец не промахивается. Так же устроены сердце и мобильная кнопка. */
.lf-f__b {
  min-height: 44px; padding: 0; border: none; background: none; cursor: pointer;
  display: inline-flex; align-items: center; white-space: nowrap; flex: none;
}
.lf-f__in {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--color-border-soft);
  background: var(--color-surface-canvas);
  transition: border-color var(--ease-ui), background var(--ease-ui), box-shadow var(--ease-ui);
}
.lf-f__b:hover .lf-f__in { border-color: var(--color-border-hover); }
.lf-f__b.is-on .lf-f__in { border-color: transparent; background: var(--wash-choice); box-shadow: var(--ring-choice); }
.lf-f__l { font: 500 13.5px/1 var(--font-ui); color: var(--color-text-secondary); }
.lf-f__b.is-on .lf-f__l { color: var(--color-action-primary); }
.lf-f__v { font: 700 13.5px/1 var(--font-ui); color: var(--color-text-primary); max-width: 176px; overflow: hidden; text-overflow: ellipsis; }
.lf-f__b.is-on .lf-f__v { color: var(--color-action-primary); }
.lf-f__v:empty { display: none; }
.lf-f__c { flex: none; color: var(--color-text-subtle); }

/* Строка результата: счёт слева, сортировка и плотность справа. */
.lst-res { position: relative; margin-bottom: 12px; }
.lst-res__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 46px; }
.lst-res__tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.lst-cols { display: flex; gap: 2px; flex: none; padding: 0; background: var(--color-surface-control); border-radius: 999px; }
.lst-cols button {
  width: 44px; height: 44px; display: grid; place-items: center; border: none; border-radius: 999px;
  background: none; color: var(--color-text-muted); cursor: pointer;
}
.lst-cols button.is-on { background: var(--color-surface-canvas); color: var(--color-action-primary); box-shadow: var(--shadow-button); }

/* Раскрытый список: одна панель, без своего @click.outside — см. комментарий в pages.py. */
.lst-drop {
  margin-top: 6px; border: 1px solid var(--color-border-card); border-radius: var(--r-control);
  background: var(--color-surface-canvas); box-shadow: 0 16px 40px -18px rgba(17, 17, 27, .34);
  padding: 10px 12px 12px;
}
.lst-res .lst-drop { position: absolute; top: 100%; right: 0; z-index: 24; min-width: 330px; }
.lst-drop__h {
  display: flex; align-items: center; gap: 10px; padding-bottom: 8px; margin-bottom: 6px;
  border-bottom: 1px solid var(--color-border-card);
  font: 600 15px/1 var(--font-ui); color: var(--color-text-primary);
}
.lst-drop__h .yg-x { margin-left: auto; width: 36px; height: 36px; font-size: 19px; }

/* Верхний SEO — ровно четыре строки, остальное под раскрытием. */
/* Верх — три строки: он не должен отодвигать выдачу. Низ длиннее, там место есть. */
.lst-seo__body { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* Длинный нижний текст показывает больше — но тоже не весь. */
.lst-seo--long .lst-seo__body { -webkit-line-clamp: 8; }
.lst-seo.is-open .lst-seo__body { display: block; overflow: visible; }
.lst-seo__body p { margin: 0 0 10px; }
.lst-seomore {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; min-height: 44px; margin-top: 4px; padding: 0;
  border: none; background: none; cursor: pointer;
  font: 600 14px/1 var(--font-ui); color: var(--color-action-primary);
}
.lst-seomore:hover span { text-decoration: underline; }
.lst-chev { transition: transform var(--ease-ui); }
.lst-seo.is-open .lst-chev { transform: rotate(180deg); }

/* Два режима выдачи: список — одна длинная карточка в ряд, сетка — четыре
   на десктопе и две на узком экране. Переключатель живёт над выдачей. */
.lst-grid1 { grid-template-columns: 1fr; row-gap: 10px; }
.lst-grid1 .pf-lc { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 18px; }
.lst-grid1 .lst-lc__top { flex: 0 0 100%; }
.lst-grid1 .pf-lc__body { flex: 1 1 420px; min-width: 0; }
/* В строке раскладка задана сеткой, а не переносами флекса: перенос ставил цену
   и кнопки куда попало. Цена держит правый край и в один, и в два ряда. */
.lst-grid1 .lst-main {
  display: grid; align-items: center; gap: 8px 18px;
  grid-template-columns: minmax(230px, 1fr) auto auto;
  grid-template-areas: "who rate foot" "marks plus foot";
}
.lst-grid1 .pf-person__b { grid-area: who; min-width: 0; }
.lst-grid1 .pf-person__b b,
.lst-grid1 .pf-person__b span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.lst-grid1 .pf-lc__rate { grid-area: rate; flex-wrap: nowrap; white-space: nowrap; }
.lst-grid1 .pf-lc__marks { grid-area: marks; flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.lst-grid1 .lst-plus { grid-area: plus; flex-direction: row; gap: 18px; padding: 0; background: none; white-space: nowrap; }
.lst-grid1 .pf-lc__foot {
  grid-area: foot; flex-direction: column; align-items: flex-end; justify-self: end;
  gap: 2px; margin: 0; white-space: nowrap;
}
.lst-grid1 .pf-lc__acts { flex: 0 0 232px; flex-direction: column; }

.lst-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lst-grid4 .pf-lc { padding: 14px; gap: 10px; }
.lst-grid4 .pf-lc__body { flex-direction: column; gap: 10px; }
.lst-grid4 .lst-thumb { width: 44px; height: 44px; font-size: 14px; }
.lst-grid4 .pf-lc__acts { flex-direction: column; }
.lst-grid4 .pf-lc__marks { display: none; }

/* Изображение сниппета. Фото исполнителей нет — держим цветной плашкой с инициалами,
   это честнее серого прямоугольника и не притворяется фотографией. */
.lst-thumb {
  flex: none; width: 56px; height: 56px; border-radius: var(--r-choice);
  display: grid; place-items: center; color: #06231f;
  font: 700 17px/1 var(--font-ui); background: var(--gradient-marketing);
}
.lst-thumb--1 { background: linear-gradient(220deg, #42e3b4 -10%, #147595 100%); color: #fff; }
.lst-thumb--2 { background: linear-gradient(140deg, #2d9ce6 0%, #0d1320 130%); color: #fff; }
.lst-thumb--3 { background: linear-gradient(300deg, #13aaa1 0%, #3da9c5 100%); color: #fff; }
.pf-lc__body { flex-direction: row; align-items: flex-start; gap: 14px; text-align: left;
  border: none; background: none; padding: 0; cursor: pointer; font: inherit; }
.lst-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }

/* Купленный топ: видно, что позиция оплачена, и он даёт больше сведений. */
.lst-resp { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--color-action-primary); }

/* Быстрый профиль — нижняя шторка. Выдача под ней остаётся на месте. */
.qp-scrim { position: fixed; inset: 0; z-index: 85; background: var(--color-backdrop); display: flex; align-items: flex-end; justify-content: center; }
.qp {
  width: 100%; max-width: 640px; max-height: 90vh; display: flex; flex-direction: column;
  background: var(--color-surface-canvas);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-card);
}
.qp { transition: transform 180ms var(--ease-standard); }
.qp__drag { padding: 10px 0 4px; cursor: grab; touch-action: none; }
.qp__drag:active { cursor: grabbing; }
.qp__grip { display: block; width: 44px; height: 4px; margin: 0 auto; border-radius: 999px; background: var(--color-border-soft); }
.qp__head { display: flex; align-items: center; gap: 14px; padding: 10px 20px 14px; border-bottom: 1px solid var(--color-border-card); }
.qp__b { flex: 1; min-width: 0; }
.qp__b b { display: block; font: 600 18px/1.3 var(--font-ui); }
.qp__b span { display: block; margin-top: 3px; font-size: 13px; color: var(--color-text-muted); }
.qp__body { flex: 1; overflow-y: auto; padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 14px; }
.qp__about { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--color-text-secondary); }
.qp__acts { display: flex; gap: 10px; flex-wrap: wrap; }
.qp__acts .btn { min-height: 52px; border-radius: var(--r-control); }

/* Соседние подборки и теги — перелинковка, ради которой листинг и существует. */
.lst-nears { display: flex; gap: 12px; padding-bottom: 6px; scroll-behavior: smooth; }
.lst-near {
  flex: none; width: 268px; display: flex; flex-direction: column; text-decoration: none;
  border: 1px solid var(--color-border-card); border-radius: 16px; overflow: hidden;
  background: var(--color-surface-canvas); color: inherit;
}

.lst-near__img { height: 92px; background: var(--gradient-dark-panel); display: grid; place-items: center; color: rgba(255,255,255,.85); }
.lst-near__img--1 { background: linear-gradient(220deg, #42e3b4 -10%, #147595 100%); }
.lst-near__img--2 { background: linear-gradient(140deg, #2d9ce6 0%, #0d1320 130%); }
.lst-near__img--3 { background: linear-gradient(300deg, #13aaa1 0%, #3da9c5 100%); }
.lst-tags {
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto);
  grid-auto-columns: max-content; gap: 8px; padding-bottom: 6px;
}
.lst-tag {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: var(--radius-pill); border: 1px solid var(--color-border-soft);
  background: var(--color-surface-canvas); color: var(--color-text-secondary);
  font: 500 13.5px/1 var(--font-ui); text-decoration: none;
}
.lst-tag:hover { border-color: var(--color-action-primary); color: var(--color-action-primary); }

@container (max-width: 720px) {
  /* Эти правила намеренно стоят ПОСЛЕ базовых: объявленные выше по файлу
     они перебивались базовыми при равной специфичности и не срабатывали. */
  .lst-sticky { padding-block: 1px; }
  .lst-bar__filters { display: none; }
  /* Сортировка и переключатель режима остаются над выдачей: в шторке лежат
     фильтры и та же сортировка, а режим выдачи там не место — он про показ. */
  /* Сортировка занимает остаток строки и сжимается: без min-width:0 на кнопке
     и внутренней пилюле её содержимое выпихивало переключатель за экран. */
  /* Кнопка сортировки здесь НЕ обёрнута в .lf-f (обёртка есть только у фильтров),
     поэтому сжимать надо саму кнопку — иначе она распирает ряд и выпихивает
     переключатель режима за экран. */
  .lst-res__tools { display: flex; flex-wrap: nowrap; gap: 8px; margin-left: 0; width: 100%; min-width: 0; }
  .lst-res__tools .lf-f__b { flex: 1 1 0; width: auto; min-width: 0; }
  .lst-res__tools .lf-f__in { width: 100%; min-width: 0; justify-content: space-between; }
  .lst-res__tools .lf-f__l { flex: none; }
  .lst-res__tools .lf-f__v { min-width: 0; max-width: none; overflow: hidden; text-overflow: ellipsis; }
  .lst-res .lst-drop { position: static; min-width: 0; }
  .lst-tools { flex-wrap: wrap; }
  .lst-cols { margin-left: 0; }
  .lst-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  /* На узкой сетке плашка топа и сердце в одну строку не влезают — переносим,
     а не обрезаем подпись: терять «Топ размещения» нельзя, за него платят. */
  .lst-grid4 .lst-lc__top { flex-wrap: wrap; row-gap: 4px; }
  .lst-grid4 .lst-fav { margin-left: 0; }
  /* Режим «список» на узком экране складывается в столбец. Переопределять надо
     ИМЕННО сетку строки: раскладка задана grid-областями, и flex-direction её
     не трогает — на этом карточка уезжала за экран на настоящем телефоне. */
  /* nowrap обязателен: в колонке `flex: 0 0 100%` у верхней строки требует
     100% ВЫСОТЫ, и остальное содержимое переносится во вторую колонку — карточка
     уезжает за экран. Именно так она и ломалась на настоящем телефоне. */
  .lst-grid1 .pf-lc { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .lst-grid1 .lst-lc__top { flex: none; }
  .lst-grid1 .pf-lc__body { flex: 0 0 auto; min-width: 0; }
  .lst-grid1 .lst-main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "who" "rate" "marks" "plus" "foot";
    gap: 8px;
  }
  .lst-grid1 .pf-person__b b,
  .lst-grid1 .pf-person__b span { white-space: normal; }
  .lst-grid1 .pf-lc__rate { flex-wrap: wrap; white-space: normal; }
  .lst-grid1 .pf-lc__marks { flex-wrap: wrap; overflow: visible; }
  .lst-grid1 .lst-plus { flex-direction: column; gap: 5px; white-space: normal; }
  .lst-grid1 .pf-lc__foot {
    justify-self: stretch; flex-direction: row; align-items: baseline; justify-content: space-between;
  }
  .lst-grid1 .pf-lc__acts { flex: 1 1 auto; flex-direction: row; }
  .qp { max-width: none; }
}

/* ---------- Отбивки листинга ---------- */
/* Между текстом и фильтрами, фильтрами и выдачей было слишком много воздуха. */
.lst-sticky + .pf-sec { padding-top: 16px; }
.pf-sec--first:has(.lst-seo) { padding-block: 32px 18px; }
/* Между сниппетами в один ряд расстояние заметнее — сжимаем именно его. */
.pf-grid--330 .pf-lc + .pf-lc, .pf-grid--330 { row-gap: 10px; }

/* ---------- Шеврон гармошки вопрос-ответ ---------- */
.pf-qa__chev { flex: none; color: var(--color-text-subtle); transition: transform var(--ease-ui); }
.pf-qa[open] .pf-qa__chev { transform: rotate(180deg); color: var(--color-action-primary); }

/* ---------- Теги: не список ссылок, а приятная россыпь ---------- */
.pf-sec--tags { background: var(--color-surface-canvas); }
.lst-tag {
  gap: 8px; border-color: transparent;
  background: linear-gradient(var(--color-surface-canvas), var(--color-surface-canvas)) padding-box,
              linear-gradient(120deg, rgba(20,167,160,.35), rgba(45,156,230,.28)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(17,17,27,.03);
  transition: transform var(--ease-ui), box-shadow var(--ease-ui), color var(--ease-ui);
}
.lst-tag svg { flex: none; color: var(--color-action-primary); opacity: .75; }
.lst-tag:hover {
  transform: translateY(-1px); color: var(--color-action-primary);
  box-shadow: 0 8px 20px -12px rgba(20,167,160,.85);
}
.lst-tag:hover svg { opacity: 1; }

/* ---------- Поповер фильтра с поиском ---------- */
.lf-pop__search {
  display: flex; align-items: center; gap: 8px; margin: 2px 2px 6px; padding: 0 10px;
  min-height: 44px; border: 1px solid var(--color-border-soft); border-radius: var(--r-sub);
  background: var(--color-surface-soft);
}
.lf-pop__search svg { flex: none; color: var(--color-text-subtle); }
.lf-pop__search input {
  flex: 1; min-width: 0; border: none; outline: none; background: none;
  font: 400 13.5px/1 var(--font-ui); color: var(--color-text-primary);
}
.lf-pop__list { display: flex; flex-direction: column; gap: 2px; max-height: 244px; overflow-y: auto; }
.lf-pop__none { padding: 14px 10px; font-size: 13px; color: var(--color-text-subtle); text-align: center; }
.lf-f__v--full { max-width: 168px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-pop--sort { min-width: 262px; }
.lf-f--sort .lf-f__b { max-width: 300px; }
/* Применённые условия читаются как строка, а не как ещё один ряд кнопок. */
.pf-applied { margin-top: 10px; }
.pf-applied__k { font: 600 12px/1 var(--font-ui); color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Вопрос-ответ: заметнее и аккуратнее ---------- */
.pf-qa { transition: border-color var(--ease-ui), box-shadow var(--ease-ui); }
.pf-qa > summary { min-height: 68px; padding: 16px 22px; }
.pf-qa:hover { border-color: var(--color-border-hover); }
.pf-qa[open] {
  border-color: transparent;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-action-primary) 42%, transparent),
              0 10px 26px -18px rgba(17, 17, 27, .5);
}
.pf-qa__q { font: 600 16px/1.45 var(--font-ui); }
.pf-qa[open] .pf-qa__q { color: var(--color-action-primary); }
.pf-qa__a {
  margin: 0 22px; padding: 16px 0 4px; border-top: 1px solid var(--color-border-card);
  font-size: 14.5px; line-height: 1.65;
}
.pf-qa__by { margin: 8px 22px 18px; }

/* ---------- Карусели подборок ---------- */
.lst-rail { position: relative; }
.lst-arrow {
  position: absolute; top: 46px; z-index: 3; width: 44px; height: 44px;
  display: none; place-items: center; border-radius: 50%;
  border: 1px solid var(--color-border-card); background: var(--color-surface-canvas);
  color: var(--color-text-secondary); cursor: pointer; box-shadow: 0 6px 18px -8px rgba(17,17,27,.32);
}
.lst-arrow:hover { border-color: var(--color-action-primary); color: var(--color-action-primary); }
/* Стрелки живут в поле, а не поверх карточек. */
.lst-arrow--prev { left: -26px; }
.lst-arrow--next { right: -26px; }
@container (min-width: 900px) { .lst-arrow { display: grid; } }

/* Карточки подборок описаны ниже, одним блоком. */

/* Раскладка вариантов в общей панели. Объявлено в конце намеренно: базовое
   правило .lf-pop__list идёт ниже по файлу и иначе перебивает модификаторы. */
.lst-drop .lf-pop__list { max-height: 260px; }
.lst-drop .lf-pop__list--2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2px 10px; }
.lst-drop .lf-pop__list--3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 2px 10px; }
.lst-drop .lf-pop__search { max-width: 340px; }

/* ---------- Избранное: работает без входа в аккаунт ---------- */
.lst-lc__top { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: -6px; }
.lst-lc__top .lst-top { margin: 0; }
.lst-fav {
  flex: none; margin-left: auto; width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--color-border-card); border-radius: 50%;
  background: var(--color-surface-canvas); color: var(--color-text-subtle); cursor: pointer;
  transition: color var(--ease-ui), border-color var(--ease-ui), transform var(--ease-ui);
}
.lst-fav:hover { color: var(--color-error); border-color: var(--color-error); }
.lst-fav.is-on { color: var(--color-error); border-color: transparent; background: var(--color-error-soft); }
.lst-fav.is-on svg { fill: currentColor; }
.lst-fav--lg { width: 44px; height: 44px; margin: 0; }
/* Вход в отложенное — в липкой строке, иконкой без подписи: сердце понятно и так,
   а место в прилипшей строке дороже слова. Счётчик — маленькой пилюлей поверх. */
.lst-favbtn {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border: none; background: none; padding: 0; cursor: pointer;
}
.lst-favbtn__in {
  position: relative; width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid var(--color-border-soft); border-radius: 999px;
  background: var(--color-surface-canvas); color: var(--color-text-muted);
  transition: color var(--ease-ui), border-color var(--ease-ui), background var(--ease-ui);
}
.lst-favbtn:hover:not(:disabled) .lst-favbtn__in { border-color: var(--color-error); color: var(--color-error); }
.lst-favbtn:disabled { opacity: .5; cursor: not-allowed; }
.lst-favbtn.is-on .lst-favbtn__in { border-color: transparent; background: var(--color-error-soft); color: var(--color-error); }
.lst-favbtn.is-on svg { fill: currentColor; }
.lst-favbtn svg { width: 17px; height: 17px; }
.lst-favbtn__n {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--color-error); color: #fff; font: 700 10px/1 var(--font-ui);
  border: 2px solid var(--color-surface-canvas);
}

/* ---------- Топ: за него платят, и это видно ---------- */
.pf-lc.is-top {
  border-color: transparent;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-action-primary) 55%, transparent),
              0 12px 30px -20px rgba(20, 167, 160, .95);
}
.lst-top {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px;
  border-radius: var(--radius-pill); background: var(--grad-cta);
  color: #fff; font: 700 11px/1.3 var(--font-ui); letter-spacing: .02em;
}
.lst-plus {
  display: flex; flex-direction: column; gap: 5px; padding: 10px 12px;
  border-radius: var(--r-sub); background: var(--c-primary-soft);
}
.lst-plus__i { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px/1.3 var(--font-ui); color: var(--color-action-primary); }
.lst-plus__i svg { flex: none; }

/* ---------- Карточки подборок ---------- */
.lst-near { width: 268px; border-radius: 18px; overflow: hidden; background: var(--color-surface-canvas); }
.lst-near__img {
  position: relative; height: 96px; display: grid; place-items: center;
  color: rgba(255, 255, 255, .92);
}
/* Мягкий блик поверх градиента — плоская заливка читалась как заглушка. */
.lst-near__img::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 22% 8%, rgba(255,255,255,.26), transparent 62%);
}
.lst-near__img svg { position: relative; z-index: 1; width: 26px; height: 26px; opacity: .92; }
.lst-near__tag {
  position: absolute; z-index: 2; left: 12px; bottom: 12px; padding: 4px 10px;
  border-radius: var(--radius-pill); background: rgba(9, 16, 18, .38);
  backdrop-filter: blur(6px); color: #fff;
  font: 700 10.5px/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
}
.lst-near__b { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 14px; }
.lst-near__b b { font: 600 15.5px/1.32 var(--font-ui); letter-spacing: -.01em; text-wrap: balance; }
.lst-near__b > span { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--color-text-muted); }
.lst-near__go {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--color-border-card);
  font: 600 13.5px/1 var(--font-ui); color: var(--color-action-primary);
}
.lst-near__go svg {
  flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 50%;
  background: var(--c-primary-soft); transition: transform var(--ease-ui), background var(--ease-ui);
}
.lst-near:hover { border-color: color-mix(in srgb, var(--color-action-primary) 45%, transparent); }
.lst-near:hover .lst-near__go svg { transform: translateX(3px); background: var(--wash-choice); }

/* ---------- Пред-профиль платного размещения ---------- */
.qp.is-paid { max-width: 720px; }
.qp__cover { height: 84px; margin: -4px 0 -34px; background: var(--gradient-dark-panel); }
.qp.is-paid .qp__head { position: relative; }
.qp.is-paid .lst-thumb { width: 68px; height: 68px; font-size: 20px; border: 3px solid var(--color-surface-canvas); }
.qp-paid {
  padding: 16px 18px; border-radius: var(--r-choice);
  background: var(--color-surface-soft); border: 1px solid var(--color-border-card);
  display: flex; flex-direction: column; gap: 10px;
}
.qp-paid__k {
  display: inline-flex; align-items: center; gap: 7px;
  font: 700 11px/1.3 var(--font-ui); letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-action-primary);
}
.qp-paid__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 8px 14px; }
.qp-feat { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.45; color: var(--color-text-secondary); }
.qp-feat svg { flex: none; margin-top: 1px; color: var(--color-action-primary); }
.qp-sec { font: 600 13px/1 var(--font-ui); color: var(--color-text-muted); margin-top: 4px; }
.qp-case {
  display: flex; flex-direction: column; gap: 3px; padding: 12px 14px;
  background: var(--color-surface-canvas); border: 1px solid var(--color-border-card); border-radius: var(--r-sub);
}
.qp-case b { font: 700 18px/1.15 var(--font-ui); color: var(--color-action-primary); font-variant-numeric: tabular-nums; }
.qp-case span { font-size: 12.5px; color: var(--color-text-muted); }
.qp-sits { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 8px; }
.qp-sit {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 14px;
  border: 1px solid var(--color-border-soft); border-radius: var(--r-choice);
  background: var(--color-surface-canvas); cursor: pointer; text-align: left;
  font: 600 14px/1.35 var(--font-ui); color: var(--color-text-primary);
}
.qp-sit:hover { border-color: var(--color-action-primary); }
.qp-sit__p {
  padding: 4px 10px; border-radius: var(--radius-pill); background: var(--c-primary-soft);
  color: var(--color-action-primary); font: 600 12px/1 var(--font-ui);
}
.qp-resp { display: inline-flex; align-items: center; gap: 7px; font: 600 12.5px/1.3 var(--font-ui); color: var(--color-action-primary); }

/* ---------- Подборки: премиальные заметнее, обычные спокойнее ---------- */
.lst-near.is-prem {
  border-color: transparent;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-action-primary) 50%, transparent),
              0 12px 30px -20px rgba(20, 167, 160, .9);
}
.lst-near.is-prem .lst-near__b b { color: var(--color-text-primary); }
.lst-near__tag--prem { background: var(--grad-cta); display: inline-flex; align-items: center; gap: 5px; }

/* ---------- Подвал карточки подборки: «отложить» и переход ---------- */
.lst-near__go {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--color-border-card);
}
/* Кнопка одна и та же у всех карточек: отличается только состоянием, не наличием. */
.lst-near__fav {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px 0 8px;
  margin: 0 0 0 -8px; border: none; border-radius: 999px; background: none;
  color: var(--color-text-muted); cursor: pointer; font: 600 12.5px/1 var(--font-ui);
}
/* Иконка не должна быть целью клика: попадание по ней уводило событие
   в родительскую ссылку карточки вместо кнопки. */
.lst-near__fav svg { flex: none; pointer-events: none; }
.lst-near__fav span { pointer-events: none; }
.lst-near__fav:hover { color: var(--color-error); }
.lst-near__fav.is-on { color: var(--color-error); }
.lst-near__fav.is-on svg { fill: currentColor; }
.lst-near__more {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 13px/1 var(--font-ui); color: var(--color-action-primary);
}
.lst-near__more { pointer-events: none; }
.lst-near__more svg {
  flex: none; width: 28px; height: 28px; padding: 6px; border-radius: 50%;
  background: var(--c-primary-soft); transition: transform var(--ease-ui), background var(--ease-ui);
}
.lst-near:hover .lst-near__more svg { transform: translateX(3px); background: var(--wash-choice); }

/* =======================================================================
   ДИЗАЙН-ПРОГОН ЛИСТИНГА (Claude Design, проект «Дизайн листинга юристов»,
   2026-09-01). Перенесены ТОЛЬКО значения оформления: типографика, радиусы,
   тени, цвета и отбивки. Структура, разметка и поведение не менялись —
   сравнение шло построчным diff с копией `profile.css` в том же проекте.
   Одно отклонение от макета: высота липкой строки. Макет даёт 64 px,
   мы держим 47 — её компактность заказчик отдельно требовал в четырёх кругах.
   ======================================================================= */

/* ---------- Ось листинга шире профильной: 1200 / 32, как маркетинговая ---------- */
.lst-page .pf-wrap { max-width: var(--container-max); padding-inline: 32px; }
.lst-page .pf-sec { padding-block: 64px; }
.lst-page .pf-sec--first { padding-block: 44px 22px; }
/* Между липкой строкой и выдачей 64 px было провалом — секция начинается сразу. */
.lst-page .lst-sticky + .pf-sec { padding-top: 22px; }
.lst-page .pf-sec--soft { background: var(--color-surface-soft); border-top: 1px solid var(--color-hairline); }
.lst-page .pf-sec + .pf-sec { border-top: 1px solid var(--color-hairline); }
.lst-page .pf-h2 { font: 600 30px/1.2 var(--font-ui); letter-spacing: -.025em; }
.lst-page .pf-lead { margin: 8px 0 26px; font-size: 15px; line-height: 1.5; }

/* ---------- Шапка страницы: крошки, крупный H1, факты ---------- */
.lst-crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font: 500 12.5px/1 var(--font-ui); color: var(--color-text-subtle); }
.lst-crumbs a { color: var(--color-text-subtle); text-decoration: none; }
.lst-crumbs a:hover { color: var(--color-action-primary); }
.lst-crumbs span:last-child { color: var(--color-text-muted); }
.lst-h1 { margin: 0 0 12px; font: 700 40px/1.1 var(--font-ui); letter-spacing: -.035em; text-wrap: balance; }
.lst-facts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.lst-fact {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-card); color: var(--color-text-muted); font: 500 12.5px/1 var(--font-ui);
}
.lst-fact--on { border-color: transparent; background: var(--c-primary-soft); color: var(--color-action-primary); font-weight: 600; }
.lst-page .lst-seo { max-width: 846px; font-size: 15px; line-height: 1.65; color: var(--color-text-secondary); }
.lst-page .lst-seo--long { line-height: 1.7; }
.lst-page .lst-seo__body h3 { margin: 0 0 8px; font: 600 19px/1.3 var(--font-ui); letter-spacing: -.015em; }
.lst-page .lst-seo__body p { margin: 0 0 22px; }

/* ---------- Липкая строка: матовое стекло вместо плотного фона ---------- */
.lst-page .lst-sticky {
  background: color-mix(in srgb, var(--color-surface-canvas) 94%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--color-hairline); border-bottom: 1px solid var(--color-hairline);
}
.lst-page .lf-f__l { color: inherit; opacity: .72; }
.lst-page .lf-f__c { opacity: .5; color: inherit; }
.lst-page .lf-f__in { border-color: var(--color-border-card); }

/* ---------- Карточка выдачи ---------- */
.lst-page .pf-lc {
  padding: 22px 24px; border-radius: 20px; gap: 14px;
  border: 1px solid var(--color-border-card); box-shadow: 0 1px 2px rgba(17, 17, 27, .03);
  transition: box-shadow var(--ease-ui), border-color var(--ease-ui);
}
.lst-page .pf-lc:hover { box-shadow: 0 18px 40px -28px rgba(17, 17, 27, .5); }
.lst-page .pf-lc.is-top {
  border-color: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(20, 167, 160, .55), 0 18px 44px -28px rgba(20, 167, 160, .95);
}
.lst-page .lst-thumb { width: 64px; height: 64px; border-radius: 18px; font: 700 19px/1 var(--font-ui); }
.lst-page .lst-grid4 .lst-thumb { width: 48px; height: 48px; border-radius: 14px; font-size: 15px; }
.lst-page .lst-grid1 .pf-person__b b { font: 600 19px/1.25 var(--font-ui); letter-spacing: -.02em; }
.lst-page .lst-grid1 .pf-person__b span { margin-top: 5px; font-size: 13.5px; line-height: 1.45; }
.lst-page .lst-grid4 .pf-lc { padding: 16px; border-radius: 18px; gap: 12px; }
.lst-page .pf-lc__mark { padding: 5px 11px; border-radius: var(--radius-pill); background: var(--color-surface-chip); font: 500 12px/1.3 var(--font-ui); }
.lst-page .lst-plus { padding: 11px 14px; border-radius: var(--r-control); background: var(--wash-choice); gap: 22px; }
.lst-page .pf-lc__foot { gap: 3px; }
.lst-page .pf-lc__foot .pf-card__m { font-size: 12.5px; color: var(--color-text-subtle); }
.lst-page .pf-lc__price { font: 700 20px/1 var(--font-ui); letter-spacing: -.02em; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.lst-page .lst-grid4 .pf-lc__price { font-size: 17px; }
/* Заявка — главное действие, поэтому она залита градиентом, а не обведена. */
.lst-page .pf-lc__acts .pf-btn:not(.pf-btn--mute) {
  min-height: 46px; border: none; border-radius: var(--r-control); color: #fff;
  background: var(--grad-cta); box-shadow: var(--sh-cta); font: 600 14.5px/1 var(--font-ui);
}
.lst-page .pf-lc__acts .pf-btn:not(.pf-btn--mute):hover { box-shadow: var(--sh-cta-hover); background: var(--grad-cta); }
.lst-page .pf-btn--mute {
  min-height: 46px; border: 1px solid var(--color-border-soft); border-radius: var(--r-control);
  color: var(--color-text-secondary); font: 600 14.5px/1 var(--font-ui);
}
.lst-page .pf-btn--mute:hover { border-color: var(--color-action-primary); color: var(--color-action-primary); background: var(--color-surface-canvas); }
/* Макет даёт сердцу 40 px, оставляем 44: это пол тап-цели, и разницу в 4 px
   глазом не видно, а промах пальцем — видно. */
.lst-page .lst-fav { border-color: var(--color-border-card); color: var(--color-text-subtle); }
.lst-page .lst-fav.is-on { border-color: transparent; background: var(--color-error-soft); color: var(--color-error); }
.lst-page .pf-empty { padding: 40px 28px; border-radius: 20px; background: var(--color-surface-canvas); }
.lst-page .pf-empty b { margin-bottom: 6px; font: 600 18px/1.35 var(--font-ui); }
.lst-page .pf-pager { gap: 8px; margin-top: 28px; }
.lst-page .pf-pager a, .lst-page .pf-pager span { border-radius: var(--r-control); font-size: 14px; }

/* ---------- Вопрос-ответ ---------- */
.lst-page .pf-qa { border-radius: 18px; }
.lst-page .pf-qa > summary { min-height: 72px; padding: 18px 24px; gap: 16px; }
.lst-page .pf-qa__q { font: 600 16.5px/1.45 var(--font-ui); letter-spacing: -.01em; }
.lst-page .pf-qa[open] { box-shadow: inset 0 0 0 1.5px rgba(20, 167, 160, .42), 0 14px 34px -24px rgba(17, 17, 27, .5); }
.lst-page .pf-qa__a { margin: 0 24px; padding: 16px 0 20px; border-top: 1px solid var(--color-hairline); font-size: 14.5px; line-height: 1.7; }
.lst-page .pf-stack { gap: 10px; max-width: 1000px; }

/* ---------- Карусели подборок ---------- */
.lst-page .lst-nears { gap: 16px; padding-bottom: 8px; }
.lst-page .lst-near {
  width: 300px; border-radius: 22px; border-color: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(20, 167, 160, .35), 0 18px 40px -26px rgba(20, 167, 160, .55);
}
.lst-page .lst-near:hover {
  transform: none;
  box-shadow: inset 0 0 0 1.5px rgba(20, 167, 160, .7), 0 26px 54px -24px rgba(20, 167, 160, .7);
}
.lst-page .lst-near.is-prem { box-shadow: inset 0 0 0 1.5px rgba(20, 167, 160, .55), 0 18px 44px -28px rgba(20, 167, 160, .95); }
.lst-page .lst-near__img {
  height: 150px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  padding: 16px 18px; place-items: initial;
}
/* Тёмная вуаль поверх градиента: на ней читаются и число, и ярлык. */
.lst-page .lst-near__img::after {
  background: linear-gradient(to top, rgba(4, 14, 17, .72) 0%, rgba(4, 14, 17, .14) 58%, rgba(255, 255, 255, .20) 100%);
}
.lst-near__num { position: relative; z-index: 2; font: 700 38px/1 var(--font-ui); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.lst-near__unit { position: relative; z-index: 2; font: 600 12px/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.82); }
.lst-near__ic {
  position: absolute; z-index: 2; top: 14px; right: 16px; width: 38px; height: 38px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .24); backdrop-filter: blur(8px);
}
.lst-page .lst-near__tag {
  left: 16px; top: 16px; bottom: auto; padding: 6px 12px; letter-spacing: .1em;
  background: rgba(4, 14, 17, .42); border: 1px solid rgba(255, 255, 255, .18); font-size: 10.5px;
}
.lst-page .lst-near__tag--prem { background: var(--grad-cta); border-color: transparent; box-shadow: 0 8px 18px -10px rgba(20,167,160,.9); }
.lst-page .lst-near__b { gap: 7px; padding: 18px 20px 16px; }
.lst-page .lst-near__b b { font: 600 17px/1.32 var(--font-ui); letter-spacing: -.02em; }
.lst-page .lst-near__b > span { font-size: 13px; line-height: 1.5; }
.lst-page .lst-near__go { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--color-hairline); font: 600 14px/1 var(--font-ui); color: var(--color-text-primary); }
/* Стрелка перехода — залитый круг: карточка получает одно ясное действие. */
.lst-page .lst-near__more svg {
  width: 34px; height: 34px; padding: 8px; color: #fff;
  background: var(--grad-cta); box-shadow: 0 8px 18px -8px rgba(20, 167, 160, .75);
}
.lst-page .lst-near:hover .lst-near__more svg { background: var(--grad-cta); transform: translateX(3px); }
.lst-page .lst-arrow { width: 48px; height: 48px; top: 52px; border-color: var(--color-border-card); box-shadow: 0 10px 26px -12px rgba(17, 17, 27, .34); }
.lst-page .lst-arrow--prev { left: -24px; }
.lst-page .lst-arrow--next { right: -24px; }

/* ---------- Теги ---------- */
.lst-page .lst-tags { gap: 10px; padding-bottom: 8px; }
.lst-page .lst-tag { gap: 9px; padding: 0 18px; font: 500 13.5px/1 var(--font-ui); }
.lst-page .lst-tag svg { opacity: .75; }

/* Кромка над подвалом — тот же градиент действия, что и на карточках форм. */
.ftr { position: relative; }
.ftr::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--grad-topline); }

@container (max-width: 720px) {
  .lst-page .pf-wrap { padding-inline: 16px; }
  .lst-page .pf-sec { padding-block: 40px; }
  .lst-page .pf-sec--first { padding-block: 28px 16px; }
  .lst-h1 { font-size: 28px; letter-spacing: -.03em; }
  .lst-page .pf-h2 { font-size: 23px; }
  .lst-page .pf-lc { padding: 16px; }
  .lst-page .lst-thumb { width: 52px; height: 52px; font-size: 16px; }
  .lst-page .lst-grid1 .pf-person__b b { font-size: 17px; }
  .lst-page .pf-qa > summary { min-height: 64px; padding: 14px 18px; }
  .lst-page .pf-qa__q { font-size: 15.5px; }
  .lst-page .pf-qa__a { margin: 0 18px; }
  .lst-page .lst-near { width: 268px; }
  .lst-page .lst-near__img { height: 128px; }
  .lst-near__num { font-size: 32px; }
}