/* ===========================================================================
   СВОЙ ДОМ — дизайн-система портала.

   Токены взяты из утверждённого макета главной v2: светлый фон #F5F6F3,
   тёмный текст #090C16, синий акцент #0B5CFF, тёплый акцент #D44727,
   границы #DCE2ED. Значения извлечены из исходника, а не назначены заново.

   Требования истории соблюдены:
     * крупная типографика, заметная шапка, читаемый подвал;
     * интерактивные цели не меньше 44 px;
     * статус обозначается не только цветом, но и текстом;
     * анимация сообщает изменение, а не задерживает результат;
     * поддержаны reduced motion и видимый фокус.
   =========================================================================== */

:root {
  /* Палитра */
  --bg: #f5f6f3;
  --surface: #ffffff;
  --surface-alt: #eceee9;
  --ink: #090c16;
  --ink-soft: #3d4657;
  /* Приглушённый цвет затемнён: прежний (#6b7688) давал контраст 4.23
   на фоне страницы при нужных 4.5. Такой текст читается хуже на солнце
   и на дешёвых экранах. Новый даёт 4.59. */
  --muted: #667085;
  --line: #dce2ed;
  --line-strong: #c3ccdd;
  --blue: #0b5cff;
  --blue-dark: #0a49c9;
  --blue-soft: #e8efff;
  --orange: #d44727;
  --orange-soft: #fdeee9;
  --green: #1f7a4d;
  --green-soft: #e6f4ec;
  --amber: #9a6206;
  --amber-soft: #fdf3e0;
  --red: #b3261e;
  --red-soft: #fdecea;
  --footer-bg: #0d1220;

  /* Типографика */
  --font: Roboto, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Roboto", "Segoe UI", system-ui, sans-serif;
  --text-xs: 0.8125rem;   /* 13px — только служебные подписи */
  --text-sm: 0.875rem;    /* 14px — минимальный вторичный текст */
  --text-base: 1.0625rem; /* 17px — основной текст */
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.9375rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3.25rem;

  /* Сетка и радиусы */
  /* Рабочая ширина макета — 1440 px: на мониторах 1600+ страница не
     растягивается на всю ширину, а на 1440 занимает её целиком. */
  --container: 1440px;
  --gap: 1.25rem;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Тени */
  --shadow-sm: 0 1px 2px rgba(9, 12, 22, .06), 0 1px 3px rgba(9, 12, 22, .04);
  --shadow: 0 4px 16px rgba(9, 12, 22, .08);
  --shadow-lg: 0 18px 48px rgba(9, 12, 22, .14);

  /* Минимальная интерактивная цель по проектному стандарту */
  --target: 44px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.55;
  overflow-x: clip;
}

/* --- Типографика ---------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.12;
  margin: 0 0 .6em;
  letter-spacing: -.015em;
}
h1 { font-size: clamp(2rem, 4.2vw, var(--text-4xl)); }
h2 { font-size: clamp(1.5rem, 2.8vw, var(--text-3xl)); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 1em; padding-left: 1.35em; }
li { margin-bottom: .35em; }
code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .92em;
  background: var(--surface-alt);
  padding: .12em .4em;
  border-radius: 5px;
}
strong { font-weight: 700; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media (max-width: 720px) { .container { padding: 0 1rem; } }

.portal { display: flex; flex-direction: column; min-height: 100vh; }
.main { flex: 1; padding-top: 1.75rem; padding-bottom: 4rem; }

/* --- Иконки --------------------------------------------------------------- */

.icon { width: 1.25em; height: 1.25em; fill: currentColor; flex: 0 0 auto; }

/* --- Верхняя строка ------------------------------------------------------ */

.topbar {
  background: var(--ink);
  color: #eef1f7;
  font-size: var(--text-sm);
}
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 42px;
}
.audience-switch { display: flex; gap: .25rem; }
.audience-item {
  color: #c3cade; padding: .35rem .85rem; border-radius: var(--radius-pill);
}
.audience-item:hover { color: #fff; text-decoration: none; }
.audience-item.is-active { background: #ffffff1f; color: #fff; font-weight: 600; }
.topbar-right { display: flex; align-items: center; gap: 1rem; }
.topbar-region { display: inline-flex; align-items: center; gap: .4rem; color: #c3cade; }
.topbar-link, .topbar-user { color: #eef1f7; }
.topbar-link:hover { color: #fff; }
.inline-form { display: inline; margin: 0; }
.link-button {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: #c3cade; font: inherit; text-decoration: underline;
}
.link-button:hover { color: #fff; }

/* --- Шапка --------------------------------------------------------------- */

.header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.header-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem;
  padding-top: .85rem;
  padding-bottom: .85rem;
}
@media (max-width: 1080px) {
  .header-inner { grid-template-columns: auto minmax(0, 1fr); }
  .search { grid-column: 1 / -1; order: 3; }
}

.logo { display: inline-flex; align-items: center; gap: .7rem; color: var(--ink); }
.logo:hover { text-decoration: none; }
.logo-mark { width: 40px; height: 40px; color: var(--blue); }
.logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.logo-title {
  font-family: var(--font-display);
  font-size: 1.5rem; font-weight: 900; letter-spacing: .04em;
  /* Название проекта приходит из одного места в обычном регистре,
     а начертание логотипа задаётся здесь. */
  text-transform: uppercase;
}
.logo-sub {
  font-size: var(--text-xs); color: var(--muted);
  max-width: 22ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.logo-inverse { color: #fff; }
.logo-inverse .logo-mark { color: #fff; }
@media (max-width: 900px) { .logo-sub { display: none; } }

.search { position: relative; display: flex; align-items: center; }
.search-icon {
  position: absolute; left: 1rem; width: 1.15rem; height: 1.15rem;
  color: var(--muted); pointer-events: none;
}
.search input {
  width: 100%;
  min-height: var(--target);
  padding: .7rem 8.5rem .7rem 2.9rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}
.search input::placeholder { color: var(--muted); }
.search input:focus { background: #fff; border-color: var(--blue); }

/* --- Выпадающая форма поиска ---------------------------------------------
   Открывается при наведении и при вводе. Внутри — совпадения, разделы,
   популярные задачи и реклама. Реклама помечена словом «Реклама» до
   взаимодействия: иначе пользователь примет её за результат поиска. */

.search-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + .4rem);
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgb(9 12 22 / 14%);
  max-height: min(70vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.search-panel[hidden] { display: none; }
.search-panel-inner { padding: .9rem 1rem 1rem; }
.search-panel-hint { margin: 0; color: var(--muted); font-size: var(--text-sm); }

.search-group { margin-bottom: .9rem; }
.search-group:last-child { margin-bottom: 0; }
.search-group-title {
  margin: 0 0 .4rem; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
}
.search-list { list-style: none; margin: 0; padding: 0; }
.search-list li { margin: 0; }
.search-list a {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .45rem .5rem; border-radius: var(--radius-sm);
  color: var(--ink); text-decoration: none;
}
.search-list a:hover, .search-list a:focus-visible { background: var(--bg); }
.search-list .search-item-title { font-weight: 600; }
.search-list .search-item-note {
  color: var(--muted); font-size: var(--text-sm); margin-left: auto;
  white-space: nowrap;
}
/* Разные типы подсказок подписаны: пользователь должен понимать, что он
   выбирает — услугу, предложение или материал. */
.search-item-kind {
  flex: 0 0 auto; font-size: var(--text-xs);
  color: var(--muted); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 0 .35rem;
}
.search-sections { display: flex; flex-wrap: wrap; gap: .35rem; }
.search-sections a {
  font-size: var(--text-sm); padding: .3rem .6rem;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  color: var(--ink-soft); text-decoration: none;
}
.search-sections a:hover { border-color: var(--blue); color: var(--blue); }

/* Рекламный блок. Полоса слева и слово «Реклама» — обязательная маркировка,
   а не украшение: её отсутствие вводило бы в заблуждение. */
.search-ad {
  border-left: 3px solid var(--blue);
  background: var(--blue-soft);
  border-radius: var(--radius-sm);
  padding: .5rem .6rem; margin-bottom: .4rem;
}
.search-ad-mark {
  font-size: var(--text-xs); color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.search-ad a { color: var(--ink); text-decoration: none; font-weight: 600; }
.search-ad a:hover { text-decoration: underline; }
.search-ad-note { margin: .15rem 0 0; font-size: var(--text-sm); color: var(--ink-soft); }

@media (max-width: 900px) {
  /* На узком экране панель занимает всю ширину и не должна уезжать
     за край: место для подсказок ограничено. */
  .search-panel { left: -.5rem; right: -.5rem; }
}
@media (max-width: 560px) {
  .search input { padding-right: 1rem; }
  .search-submit { display: none; }
}

.header-actions { display: flex; align-items: center; gap: .5rem; min-width: 0; }
/* На узком экране в шапке остаётся только необходимое: вход в кабинет
   и кнопка меню. Иначе шапка вылезает за экран и появляется
   горизонтальная прокрутка. Остальные действия доступны в меню и подвале. */
@media (max-width: 840px) {
  .header-actions > .icon-button:not(.menu-toggle) { display: none; }
  .header-actions .btn-primary { display: none; }
  .account-menu-panel { right: 0; left: auto; }
}
@media (max-width: 480px) {
  /* Стрелка вниз занимает место, которое нужнее названию кабинета. */
  .account-menu .btn .icon:last-child { display: none; }
  .header-inner { gap: .5rem; }
  /* Логотип уступает место действиям: бренд остаётся узнаваемым по знаку
     и первой части названия, а кнопки должны помещаться целиком. */
  .header-inner { grid-template-columns: minmax(0, auto) minmax(0, 1fr); }
  .logo { gap: .45rem; min-width: 0; }
  .logo-mark { width: 32px; height: 32px; }
  .logo-title { font-size: 1.15rem; letter-spacing: .02em; }
  .logo-text { min-width: 0; }
}
@media (max-width: 340px) {
  /* Самые узкие экраны: знак бренда остаётся, название уходит в меню.
     Лучше потерять подпись, чем часть кнопок за краем экрана. */
  .logo-title { display: none; }
}
.icon-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--target); min-height: var(--target);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
}
.icon-button:hover { background: var(--bg); color: var(--ink); }
.menu-toggle { display: none; }
@media (max-width: 1080px) { .menu-toggle { display: inline-flex; } }

/* --- Основная навигация -------------------------------------------------- */

.main-nav { border-top: 1px solid var(--line); background: var(--surface); }
.nav-inner {
  display: flex; gap: 1.75rem; align-items: center;
  overflow-x: auto; scrollbar-width: none;
}
.nav-inner::-webkit-scrollbar { display: none; }
.nav-link {
  display: inline-flex; align-items: center;
  min-height: var(--target); padding: .25rem 0;
  color: var(--ink); font-size: 1.0625rem; font-weight: 600;
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.nav-link:hover { color: var(--blue); text-decoration: none; }
.nav-link.is-active { border-bottom-color: var(--blue); }
.nav-link-accent { margin-left: auto; color: var(--blue); }
@media (max-width: 1080px) {
  .main-nav { display: none; }
  .main-nav.is-open { display: block; }
  .nav-inner { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 1rem 1rem; }
  .nav-link { border-bottom: 1px solid var(--line); }
  .nav-link-accent { margin-left: 0; }
}

/* --- Кнопки --------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: var(--target); padding: .6rem 1.4rem;
  font: inherit; font-weight: 600; line-height: 1.2;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; text-align: center; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dark); }

/* Кнопка поиска стоит внутри поля со скруглением-пилюлей. Правило идёт
   после общего `.btn`: одинаковые по весу селекторы разрешаются порядком,
   и раньше общее правило перебивало скругление кнопки. */
.search-submit {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  min-height: 34px; padding: .35rem 1.2rem;
  border-radius: var(--radius-pill);
}
.btn-accent { background: var(--orange); color: #fff; }
.btn-accent:hover { background: #b93b1e; }
.btn-outline { background: var(--surface); color: var(--blue); border-color: var(--blue); }
.btn-outline:hover { background: var(--blue-soft); }
.btn-quiet {
  background: var(--surface); color: var(--ink); border-color: var(--line);
}
.btn-quiet:hover { background: var(--bg); }
.btn-ghost { background: transparent; color: var(--ink-soft); padding-inline: .75rem; }
.btn-ghost:hover { background: var(--surface-alt); }
.btn-sm { min-height: 36px; padding: .35rem .9rem; font-size: var(--text-sm); }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }

/* --- Карточки и блоки ---------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.35rem;
}
.card-flush { padding: 0; overflow: hidden; }
.card-hover:hover { box-shadow: var(--shadow); border-color: var(--line-strong); }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin-bottom: 2rem;
}
.panel-head {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1rem; margin-bottom: 1.35rem;
}
.panel-head h2, .panel-head h3 { margin-bottom: .15rem; }
.panel-lead { color: var(--muted); margin: 0; max-width: 68ch; }

.section { margin-bottom: 2.75rem; }
.section-head { margin-bottom: 1.25rem; }
.section-head h2 { margin-bottom: .3rem; }
.section-head p { color: var(--muted); margin: 0; max-width: 72ch; }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* На телефоне любая многоколоночная раскладка становится одноколоночной.
   Правило с !important нужно потому, что часть страниц задаёт пропорции
   колонок прямо в разметке: без него такие блоки вылезают за экран и
   появляется горизонтальная прокрутка. */
@media (max-width: 780px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr) !important; }
  .field-row { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 700px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .panel { padding: 1.25rem; }
}

/* --- Первый экран --------------------------------------------------------
   Оболочка первого экрана — простая колонка. Двухколоночная раскладка
   живёт внутри неё, в ``.hero-grid``: раньше обе были сетками, и вложенная
   получала не всю ширину, а долю внешней. Из-за этого первый экран
   схлопывался в узкую полосу. */

.hero {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 0; align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  margin-bottom: 2rem;
}
.hero-copy h1 { margin-bottom: .75rem; }
.hero-lead { font-size: var(--text-lg); color: var(--ink-soft); max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.5rem; }
.hero-visual {
  border-radius: var(--radius);
  background: linear-gradient(145deg, #dfe7f5, #c9d6ec);
  min-height: 320px;
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 1.25rem;
  position: relative; overflow: hidden;
}
/* Фотография первого экрана. Она лежит под подсказкой, поэтому затемнение
   обязательно: текст должен читаться на любом снимке. Явные слои заданы
   намеренно: без них псевдоэлемент затемнения рисуется поверх фотографии. */
.hero-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.hero-visual::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(200deg, rgba(9, 12, 22, .05) 40%, rgba(9, 12, 22, .35));
}
.hero-note { position: relative; z-index: 2; }
.hero-note {
  background: var(--surface); border-radius: var(--radius);
  padding: 1rem 1.15rem; max-width: 300px; box-shadow: var(--shadow);
}
.hero-note h3 { font-size: var(--text-lg); margin-bottom: .35rem; }
.hero-note p { font-size: var(--text-sm); color: var(--muted); margin: 0; }
@media (max-width: 940px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding: 1.6rem; }
  .hero-visual { min-height: 200px; }
}

/* --- Сценарии (карточки направлений) ------------------------------------- */

.scenario-card {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 1.5rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.35rem;
  color: inherit; min-height: 180px;
}
.scenario-card:hover { text-decoration: none; border-color: var(--blue); box-shadow: var(--shadow); }
.scenario-card h3 { font-size: var(--text-xl); margin-bottom: .3rem; }
.scenario-card p { color: var(--muted); margin: 0; font-size: var(--text-sm); }
.scenario-card .arrow {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--blue-soft); color: var(--blue);
  display: inline-flex; align-items: center; justify-content: center;
}
.scenario-card:hover .arrow { background: var(--blue); color: #fff; }

/* --- Реклама -------------------------------------------------------------- */

.ad-slot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem;
  justify-content: space-between;
  background: linear-gradient(100deg, var(--surface-alt), #e2e7f0);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.35rem 1.6rem;
  margin-bottom: 1.75rem;
}
.ad-label {
  display: inline-block; font-size: var(--text-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  margin-bottom: .35rem;
}
.ad-slot h2 { font-size: var(--text-2xl); margin: 0; }
.ad-note { font-size: var(--text-xs); color: var(--muted); width: 100%; margin: 0; }

/* Баннерные зоны каталога. Реклама стоит отдельной зоной, а не в потоке
   результатов, и подпись «Пример рекламного размещения» (.ad-label) идёт
   первым элементом зоны — до картинки и ссылки. Так пометка встречается
   раньше, чем человек начинает читать предложение. */

/* Вертикальная зона под фильтрами: ширина колонки фильтров (280 px),
   высота до 400 px. */
.ad-slot-vertical {
  /* Сетка вместо строки базового .ad-slot: в узкой колонке картинка,
     заголовок и подпись встают друг под другом. */
  display: grid; align-content: start; gap: .55rem;
  align-items: stretch; justify-content: stretch;
  /* Нижний отступ не нужен: расстояние между блоками колонки даёт gap
     .catalog-side. С базовым margin-bottom между фильтрами и зоной
     получался бы двойной разрыв. */
  margin-bottom: 0;
  padding: 1rem;
  /* Картинка с явными width/height не должна расширять колонку: без
     min-width она вылезала бы за 280 px и давала горизонтальную прокрутку. */
  min-width: 0;
}
.ad-slot-vertical .ad-slot-image {
  /* 205 px, а не 250: вместе с подписью, заголовком в две строки и нижней
     строкой партнёра зона укладывается в заданные 400 px. С 250 px она
     вырастала до 438 px. */
  display: block; width: 100%; height: 205px;
  /* Фотография заполняет блок без искажений: пропорции файла и блока
     не совпадают. Отступ от края — фон, пока файл не загрузился. */
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--surface-alt);
}
.ad-slot-vertical .ad-slot-title { font-size: var(--text-lg); margin: 0; }
.ad-slot-vertical .ad-slot-note { font-size: var(--text-xs); color: var(--muted); margin: 0; }

/* Горизонтальная зона под результатами: во всю ширину правой колонки,
   высота 150 px — в заданных границах 120–160 px. */
.ad-slot-wide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center; gap: 1.25rem;
  /* Фотография прижата к краю плашки, поэтому внутренние поля переезжают
     на текстовую часть. Скругление обрезает картинку по форме плашки. */
  padding: 0;
  overflow: hidden;
  min-height: 150px;
  min-width: 0;
  margin-bottom: 0;
}
/* Две колонки только у предложения с изображением: без картинки вторая
   колонка осталась бы пустой рамкой. Картинка стоит справа, а текст слева,
   поэтому в разметке она идёт последней — так ссылка не опережает пометку
   о рекламе. */
.ad-slot-wide.has-media { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
.ad-slot-wide .ad-slot-image {
  display: block; width: 100%; height: 150px;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--surface-alt);
}
.ad-slot-wide .ad-slot-body { display: grid; gap: .3rem; padding: 1rem 1.35rem; min-width: 0; }
.ad-slot-wide .ad-slot-title { font-size: var(--text-xl); margin: 0; }
.ad-slot-wide .ad-slot-note { font-size: var(--text-sm); color: var(--muted); margin: 0; }

@media (max-width: 900px) {
  /* На телефоне колонки нет: вертикальная зона встала бы между фильтрами
     и результатами и заняла почти весь первый экран. Реклама остаётся
     под списком, то есть после полезного результата. */
  .ad-slot-vertical { display: none; }
}
@media (max-width: 700px) {
  /* Горизонтальной зоне на узком экране двух колонок не хватает:
     картинка встаёт сверху во всю ширину, текст под ней. */
  .ad-slot-wide.has-media { grid-template-columns: minmax(0, 1fr); }
  .ad-slot-wide .ad-slot-image { width: 100%; height: 140px; }
  .ad-slot-wide .ad-slot-body { padding: .9rem 1rem 1.1rem; }
}

/* --- Метки и статусы ----------------------------------------------------- */

.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .6rem; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: 600;
  background: var(--surface-alt); color: var(--ink-soft);
  border: 1px solid var(--line);
}
.badge-ok { background: var(--green-soft); color: var(--green); border-color: #bfe0cd; }
.badge-info { background: var(--blue-soft); color: var(--blue-dark); border-color: #c5d8ff; }
.badge-warn { background: var(--amber-soft); color: var(--amber); border-color: #f0dcb4; }
.badge-danger { background: var(--red-soft); color: var(--red); border-color: #f3c9c5; }
.badge-ad { background: #fff3d6; color: #8a5a00; border-color: #f0d79b; }
/* Пометка демонстрационных данных. Цвет намеренно отличается от статусов:
   это не состояние записи, а указание на её происхождение. */
.badge-demo {
  background: #efe6ff; color: #5b32a8; border-color: #d8c8f7;
}
/* Статус всегда подписан словом: цвет не является единственным обозначением. */
.badge::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; opacity: .7; }
.badge-plain::before { display: none; }

.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 34px; padding: .3rem .85rem;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink-soft); font-size: var(--text-sm);
  cursor: pointer;
}
.chip:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }
.chip.is-active { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* --- Интерактивный дом --------------------------------------------------- */

.house-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 1.75rem;
}
.house-layout {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem;
}
@media (max-width: 940px) { .house-layout { grid-template-columns: minmax(0, 1fr); } }

.house-map { display: grid; gap: .5rem; align-content: start; }
.house-hotspot {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  width: 100%; min-height: var(--target);
  padding: .6rem 1rem; text-align: left;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-sm); cursor: pointer; font: inherit;
  color: var(--ink);
}
.house-hotspot:hover { border-color: var(--blue); background: var(--blue-soft); }
.house-hotspot.is-active {
  border-color: var(--orange); background: var(--orange-soft); font-weight: 600;
}
.house-hotspot .hotspot-title { font-weight: 600; }
.house-hotspot .hotspot-meta { font-size: var(--text-xs); color: var(--muted); }

.house-detail { border-left: 1px solid var(--line); padding-left: 2rem; }
@media (max-width: 940px) { .house-detail { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 1.25rem; } }
.house-detail h3 { margin-bottom: .35rem; }
.house-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0 1.1rem; }
.house-link {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: inherit; margin-bottom: .5rem; background: var(--surface);
}
.house-link:hover { border-color: var(--blue); text-decoration: none; }
.house-link strong { display: block; }
.house-link span.meta { font-size: var(--text-xs); color: var(--muted); }

.house-scheme {
  background: var(--blue-soft);
  border-radius: var(--radius);
  padding: 1rem;
  display: grid; gap: .5rem;
}
.house-scheme svg { width: 100%; height: auto; }
.scheme-part { fill: #cfdcf7; stroke: #9db6e8; stroke-width: 1.2; transition: fill .2s ease; }
.scheme-part.is-active { fill: #f6c9b8; stroke: var(--orange); stroke-width: 2; }

/* --- Калькулятор --------------------------------------------------------- */

.calc-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 2rem; }
@media (max-width: 940px) { .calc-layout { grid-template-columns: minmax(0, 1fr); } }

.calc-form { display: grid; gap: 1rem; }
.field { display: grid; gap: .4rem; }
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--ink-soft); }
.field .hint { font-size: var(--text-xs); color: var(--muted); }
.input, .select, .textarea {
  width: 100%; min-height: var(--target);
  padding: .65rem .9rem; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.textarea { min-height: 8rem; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--blue); outline-offset: 0; }
.input[type="range"] { padding: 0; min-height: 28px; }
.field-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 700px) { .field-row { grid-template-columns: minmax(0, 1fr); } }
.field-error { color: var(--red); font-size: var(--text-sm); }

.calc-result {
  background: var(--blue); color: #fff;
  border-radius: var(--radius); padding: 1.6rem;
  align-self: start;
}
.calc-result h3 { color: #fff; margin-bottom: .5rem; }
.calc-result .result-row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: .7rem 0; border-bottom: 1px solid #ffffff33;
}
.calc-result .result-row:last-of-type { border-bottom: 0; }
.calc-result .result-value { font-weight: 700; font-size: var(--text-lg); }
.calc-result .btn-outline { border-color: #fff; color: #fff; background: transparent; }
.calc-result .btn-outline:hover { background: #ffffff22; }
.calc-assumptions {
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #ffffff33;
  font-size: var(--text-sm); color: #e5ecff;
}
.calc-assumptions ul { padding-left: 1.1rem; margin: .4rem 0 0; }

/* --- Материалы и товары -------------------------------------------------- */

.material-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  min-height: 210px; display: flex; align-items: flex-end;
  padding: 1.25rem; color: #fff; border: 1px solid var(--line);
}
.material-card::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(9,12,22,.05) 30%, rgba(9,12,22,.78));
}
.material-card > * { position: relative; z-index: 2; }
/* Фотография плитки лежит под затемнением: заголовок читается на любом снимке. */
.material-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.material-card h3 { color: #fff; margin: 0; font-size: var(--text-xl); }
.material-card .arrow {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%;
  background: #ffffff; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.material-tone-1 { background: linear-gradient(140deg, #6b4f32, #a8814f); }
.material-tone-2 { background: linear-gradient(140deg, #4a4f5c, #8d8f96); }
.material-tone-3 { background: linear-gradient(140deg, #2f5d3a, #6f9c5c); }

/* --- Карточки каталога --------------------------------------------------- */

.listing {
  /* `min(310px, 100%)` вместо жёстких 310px: на экране уже 310 пикселей
     колонка сжимается по ширине контейнера. С жёстким минимумом карточка
     вылезала за экран и появлялась горизонтальная прокрутка. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
  gap: var(--gap);
}
.item-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.item-card:hover { box-shadow: var(--shadow); border-color: var(--line-strong); }
.item-media {
  aspect-ratio: 16 / 10; background: linear-gradient(140deg, #dde4f0, #c7d2e6);
  display: flex; align-items: center; justify-content: center;
  color: #6a7793; font-size: var(--text-sm); position: relative;
  overflow: hidden;
}
/* Фотография заполняет блок, сохраняя пропорции: карточки в сетке
   выравниваются по высоте независимо от исходного размера файла. */
.item-media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.item-media-marks {
  position: absolute; top: .6rem; left: .6rem; right: .6rem;
  display: flex; flex-wrap: wrap; gap: .35rem; z-index: 1;
}
.item-media-marks .badge {
  background: #ffffffeb;
  backdrop-filter: blur(2px);
}

/* Обложка материала внутри карточки с отступами. */
.card-cover {
  margin: -1.35rem -1.35rem 1rem;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--surface-alt);
}
.card-cover img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) {
  .card-cover { margin: -1.25rem -1.25rem 1rem; }
}

/* Крупное изображение на странице предложения. */
.offer-photo {
  border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 16 / 9; background: var(--surface-alt);
  margin-bottom: 1.25rem;
}
.offer-photo img { width: 100%; height: 100%; object-fit: cover; }
.media-credit {
  font-size: var(--text-xs); color: var(--muted);
  margin: .4rem 0 0;
}
.item-body { padding: 1.1rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.item-title { font-size: 1.15rem; font-weight: 700; margin: 0; }
.item-sub { color: var(--muted); font-size: var(--text-sm); margin: 0; }
.item-meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: var(--text-sm); color: var(--muted); }
.item-price { font-size: var(--text-xl); font-weight: 800; margin-top: auto; }
.item-price small { display: block; font-size: var(--text-xs); font-weight: 500; color: var(--muted); }
.item-actions { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 1.1rem 1.1rem; }

/* --- Каталог: боковые фильтры и два вида списка --------------------------- */

.catalog-layout {
  display: grid;
  /* Первая колонка сжимается по содержимому (minmax(0, 280px)), вторая
     забирает остаток. Жёсткий минимум здесь не нужен: на узком экране сетка
     становится одноколоночной и горизонтальная прокрутка не появляется. */
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
  margin-bottom: var(--gap);
}
.catalog-side { display: grid; gap: 1rem; min-width: 0; }
.catalog-results { display: grid; gap: .75rem; min-width: 0; }

/* Панель фильтров. Раскрытие через details: свёрнутый блок экономит первый
   экран на телефоне. На широком экране сводка скрыта, а тело показывается
   явно — без этого браузер спрятал бы фильтры вместе с закрытым details. */
.filter-panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem;
}
.filter-panel-summary {
  display: none; align-items: center; justify-content: space-between; gap: .5rem;
  min-height: var(--target); cursor: pointer; font-weight: 700; color: var(--ink);
}
.filter-panel-summary::-webkit-details-marker { display: none; }
.filter-panel-summary::after { content: "▾"; color: var(--muted); font-weight: 400; }
.filter-panel[open] > .filter-panel-summary::after { content: "▴"; }

/* «gap» без display: объявление display в стилях перебило бы правило браузера
   «details:not([open]) > * { display: none }», и блок не сворачивался бы
   на узком экране. Раскрытое состояние задаётся явно для каждой ширины. */
.filter-panel-body { gap: 1rem; }
@media (min-width: 901px) {
  /* На широком экране фильтры видны всегда, хотя details закрыт: сводка
     скрыта, а содержимое показано двумя правилами. Первое снимает hiding
     через ::details-content (Chrome, Safari), второе — старый способ
     «display: none» у потомков (Firefox). Без обоих фильтры пришлось бы
     раскрывать щелчком на мониторе, где места достаточно. */
  .filter-panel::details-content { content-visibility: visible; }
  .filter-panel > .filter-panel-body { display: grid; }
}
@media (max-width: 900px) {
  .filter-panel[open] > .filter-panel-body { display: grid; }
}

.filter-group { display: grid; gap: .4rem; min-width: 0; }
.filter-label { font-size: var(--text-sm); font-weight: 600; color: var(--ink-soft); }
/* fieldset по умолчанию рисует рамку и отступы: у блока цены они лишние. */
.filter-price { border: 0; padding: 0; margin: 0; }
.filter-price .hint { font-size: var(--text-xs); color: var(--muted); margin: 0; }
.filter-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem;
}
/* Поля не должны расширять колонку: у input своя минимальная ширина,
   и на узком экране она выталкивала бы панель за край. */
.filter-row .input, .filter-group .input, .filter-group .select { min-width: 0; }
.filter-check {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: var(--text-sm); color: var(--ink-soft); cursor: pointer;
}
.filter-check input {
  flex: none; width: 1.05rem; height: 1.05rem; margin-top: .15rem;
  accent-color: var(--blue);
}
.filter-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter-actions .btn { flex: 1 1 auto; }

/* Соседние разделы: тот же уровень дерева, что и открытый. */
.side-nav {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem;
}
.side-nav-title { font-size: var(--text-sm); color: var(--muted); margin-bottom: .6rem; }
.side-nav-list { list-style: none; display: grid; gap: .15rem; padding: 0; margin: 0; }
.side-nav-list a, .side-nav-current {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  min-height: var(--target); padding: .4rem .6rem;
  border-radius: var(--radius-sm); font-size: var(--text-sm); color: inherit;
}
.side-nav-list a:hover { background: var(--bg); color: var(--blue); text-decoration: none; }
.side-nav-current { background: var(--blue-soft); color: var(--blue-dark); font-weight: 600; }
.side-nav-count { flex: none; font-size: var(--text-xs); color: var(--muted); }

.results-head {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: flex-start; justify-content: space-between;
}
.results-head h1 { margin-bottom: .25rem; }
.results-count { margin: 0; font-size: var(--text-sm); color: var(--ink-soft); }
.results-subtitle { margin: .35rem 0 0; font-size: var(--text-lg); }

.view-switch {
  display: inline-flex; flex: none; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.view-switch-btn {
  display: inline-flex; align-items: center; min-height: var(--target);
  padding: .45rem .9rem; font-size: var(--text-sm); color: var(--ink-soft);
}
.view-switch-btn + .view-switch-btn { border-left: 1px solid var(--line); }
.view-switch-btn:hover { background: var(--bg); color: var(--blue); text-decoration: none; }
.view-switch-btn.is-active { background: var(--blue); color: #fff; font-weight: 600; }

/* Вид «списком»: карточка в одну строку — изображение 220px слева,
   содержимое справа, цена в правом верхнем углу. Разметку карточки менять
   нельзя (она общая для всего портала), поэтому вид переключается классами. */
.listing.is-list { grid-template-columns: minmax(0, 1fr); }
.listing.is-list .item-card {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-rows: auto auto;
}
.listing.is-list .item-media {
  grid-column: 1; grid-row: 1 / span 2;
  aspect-ratio: auto; min-height: 160px;
}
.listing.is-list .item-body {
  grid-column: 2; grid-row: 1;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: .35rem 1.5rem; align-content: start;
}
.listing.is-list .item-body > * { min-width: 0; overflow-wrap: anywhere; }
.listing.is-list .item-body > .flex-between { grid-column: 1; grid-row: 1; }
.listing.is-list .item-body > .item-title { grid-column: 1; grid-row: 2; }
.listing.is-list .item-body > .item-sub { grid-column: 1; grid-row: 3; }
.listing.is-list .item-body > .item-meta { grid-column: 1; grid-row: 4; }
.listing.is-list .item-body > .badge { grid-column: 1; grid-row: 5; justify-self: start; }
.listing.is-list .item-body > .item-price {
  grid-column: 2; grid-row: 1 / span 3;
  align-self: start; margin-top: 0; text-align: right; white-space: nowrap;
}
.listing.is-list .item-actions { grid-column: 2; grid-row: 2; padding-top: 0; }

@media (max-width: 900px) {
  .catalog-layout { grid-template-columns: minmax(0, 1fr); }
  .filter-panel-summary { display: flex; }
}
@media (max-width: 700px) {
  /* На телефоне строка из картинки и текста не читается: изображение
     возвращается наверх и получает обычные пропорции. */
  .listing.is-list .item-card { grid-template-columns: minmax(0, 1fr); }
  .listing.is-list .item-media {
    grid-column: 1; grid-row: 1; aspect-ratio: 16 / 10; min-height: 0;
  }
  .listing.is-list .item-body { grid-column: 1; grid-row: 2; }
  .listing.is-list .item-actions { grid-column: 1; grid-row: 3; padding-top: .75rem; }
}

/* --- Меню учётной записи -------------------------------------------------- */

.account-menu { position: relative; }
.account-menu-panel {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 60;
  min-width: 280px; max-width: min(360px, 92vw);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: .6rem; display: grid; gap: .05rem;
}
.account-menu-panel[hidden] { display: none; }
.account-menu-head {
  display: grid; padding: .5rem .65rem .65rem;
  border-bottom: 1px solid var(--line); margin-bottom: .35rem;
}
.account-menu-head .muted { font-size: var(--text-xs); overflow-wrap: anywhere; }
.account-menu-panel a,
.account-menu-exit {
  display: flex; align-items: center; min-height: var(--target);
  padding: .45rem .65rem; border-radius: var(--radius-sm);
  color: var(--ink-soft); font-size: var(--text-sm); font-weight: 600;
  border: 0; background: none; font-family: inherit; cursor: pointer;
  text-align: left; width: 100%;
}
.account-menu-panel a:hover,
.account-menu-exit:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.account-menu-sep { border-top: 1px solid var(--line); margin: .4rem 0; }
.account-menu-label {
  padding: .3rem .65rem; font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
}
.account-menu-exit { color: #a8452a; }

/* --- Первый экран: ситуации и действия -----------------------------------
   Пользователь выбирает свою ситуацию и сразу видит четыре действия.
   Карточка отвечает на три вопроса: что произойдёт, сколько это стоит
   и на чём основан ориентир. */

.hero-grid {
  display: grid; gap: 2.5rem;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
}
@media (max-width: 980px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }

.hero-stats {
  display: flex; flex-wrap: wrap; gap: 1.75rem;
  list-style: none; margin: 1.25rem 0 0; padding: 0;
}
.hero-stats li { display: grid; }
.hero-stat-value { font-size: var(--text-xl); font-weight: 800; line-height: 1.1; }
.hero-stat-label { font-size: var(--text-xs); color: var(--muted); }

.hero-scenarios { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }

.hero-tabs {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  margin-bottom: 1.5rem;
}
.hero-tab {
  display: grid; gap: .15rem; padding: .85rem 1rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--ink);
  border-bottom: 3px solid transparent;
}
.hero-tab:hover { border-color: var(--blue); text-decoration: none; }
.hero-tab.is-active {
  border-color: var(--blue); border-bottom-color: var(--blue);
  background: var(--blue-soft);
}
.hero-tab-title { font-size: 1.0625rem; font-weight: 700; }
.hero-tab-caption { font-size: var(--text-xs); color: var(--muted); }

.hero-panel[hidden] { display: none; }
.hero-panel-lead {
  color: var(--ink-soft); font-size: var(--text-lg);
  max-width: 92ch; margin: 0 0 1.25rem;
}

.action-grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}
.action-card {
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.15rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.action-card:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); }
.action-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
}
.action-value { font-size: var(--text-sm); font-weight: 800; color: var(--blue-dark); white-space: nowrap; }
.action-card h3 { font-size: var(--text-lg); margin: 0; }
.action-card h3 a { color: var(--ink); }
.action-card h3 a:hover { color: var(--blue); text-decoration: none; }
.action-note { margin: 0; color: var(--ink-soft); font-size: var(--text-sm); }
/* Источник ориентира показывается всегда: цифра без основания — обещание. */
.action-basis {
  margin: 0; font-size: var(--text-xs); color: var(--muted);
  border-left: 2px solid var(--line); padding-left: .6rem;
}
.action-foot {
  margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
}
.action-go {
  display: inline-flex; align-items: center; gap: .3rem;
  font-weight: 700; font-size: var(--text-sm); color: var(--blue);
}
.action-go .icon { width: 1rem; height: 1rem; }
.action-more { font-size: var(--text-xs); color: var(--muted); }
.action-more:hover { color: var(--blue); }

.hero-facts {
  display: grid; gap: .75rem 1.5rem; list-style: none; margin: 1.25rem 0 0; padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
.hero-facts li {
  display: grid; gap: .1rem; padding-top: .65rem; border-top: 2px solid var(--blue-soft);
}
.hero-fact-title { font-size: var(--text-xs); color: var(--muted); }
.hero-fact-value { font-weight: 700; }

/* --- Мега-меню ------------------------------------------------------------ */

.megamenu { border-top: 1px solid var(--line); background: var(--surface); position: relative; }
.megamenu-inner { display: flex; align-items: center; }
.megamenu-list {
  display: flex; align-items: center; gap: 1.6rem;
  list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none;
}
.megamenu-list::-webkit-scrollbar { display: none; }
.megamenu-link {
  display: inline-flex; align-items: center; gap: .3rem;
  min-height: var(--target); padding: .25rem 0;
  color: var(--ink); font-size: 1.0625rem; font-weight: 600;
  border: 0; background: none; cursor: pointer; font-family: inherit;
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.megamenu-link:hover { color: var(--blue); text-decoration: none; }
.megamenu-link.is-active { border-bottom-color: var(--blue); }
.megamenu-item-all { margin-left: auto; }
.megamenu-toggle[aria-expanded="true"] { color: var(--blue); border-bottom-color: var(--blue); }
.megamenu-toggle .icon { transition: transform .18s ease; }
.megamenu-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

.megamenu-panel {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 50;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 3px solid var(--blue);
  box-shadow: var(--shadow-lg);
  padding: 1.75rem 0 2rem;
  max-height: min(78vh, 900px); overflow-y: auto;
}
.megamenu-panel[hidden] { display: none; }
.megamenu-panel-head {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 1rem; margin-bottom: 1.35rem;
}
.megamenu-panel-lead { margin: 0; color: var(--muted); }

.megamenu-grid {
  display: grid; gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.megamenu-col { min-width: 0; }
.megamenu-col-head {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: 1.15rem; font-weight: 800; color: var(--ink);
  margin-bottom: .35rem;
}
.megamenu-col-head:hover { color: var(--blue); text-decoration: none; }
.megamenu-col-note { color: var(--muted); font-size: var(--text-sm); margin: 0 0 .85rem; }
.megamenu-group { margin-bottom: .85rem; }
.megamenu-group-title {
  display: block; font-weight: 700; font-size: var(--text-sm);
  color: var(--blue-dark); margin-bottom: .3rem;
}
.megamenu-group ul { list-style: none; margin: 0; padding: 0; }
.megamenu-group li { margin: 0; }
.megamenu-group a {
  display: flex; align-items: center; gap: .4rem;
  padding: .3rem 0; color: var(--ink-soft); font-size: var(--text-sm);
  min-height: 30px;
}
.megamenu-group a:hover { color: var(--blue); }
.megamenu-more a { color: var(--blue); font-weight: 600; }
.megamenu-col-all {
  display: inline-block; margin-top: .35rem;
  font-size: var(--text-sm); font-weight: 600; color: var(--blue);
}

/* Значки разделов: рисуются фоном, чтобы не грузить отдельные файлы. */
.megamenu-icon {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 6px;
  background: var(--blue-soft); position: relative;
}
.megamenu-icon::after {
  content: ""; position: absolute; inset: 6px; border-radius: 3px;
  background: var(--blue);
}

@media (max-width: 1080px) {
  .megamenu-list { gap: 0; flex-direction: column; align-items: stretch; }
  .megamenu { display: none; }
  .megamenu.is-open { display: block; }
  .megamenu-inner { display: block; padding: .5rem 1rem 1rem; }
  .megamenu-link { border-bottom: 1px solid var(--line); width: 100%; }
  .megamenu-item-all { margin-left: 0; }
  .megamenu-panel { position: static; box-shadow: none; border-bottom: 0; max-height: none; padding: 1rem 0; }
  .megamenu-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Глубокий подвал ----------------------------------------------------- */

/* Индекс портала: блоки разделов, внутри блока — колонки.
   Блоки делают список из 18 колонок читаемым: пользователь ищет не «всё
   подряд», а близкую по смыслу группу. */
.footer-index { padding: 2rem 0; border-bottom: 1px solid #232c40; display: grid; gap: 2rem; }
.footer-block { display: grid; gap: .85rem; }
.footer-block-title {
  color: #7fa8ff; font-size: var(--text-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; margin: 0;
}
.footer-block-cols {
  display: grid; gap: 1.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(215px, 100%), 1fr));
}
.footer-expand {
  display: inline-flex; align-items: center; gap: .3rem;
  margin-top: .35rem; padding: 0; border: 0; background: none;
  color: #7fa8ff; font: inherit; font-size: var(--text-xs);
  font-weight: 600; cursor: pointer;
}
.footer-expand:hover { color: #fff; }
.footer-expand .icon { width: 1rem; height: 1rem; transition: transform .18s ease; }
.footer-expand[aria-expanded="true"] .icon { transform: rotate(180deg); }

.footer { background: var(--footer-bg); color: #c9d1e0; margin-top: 3rem; padding: 3rem 0 2rem; }
.footer a { color: #c9d1e0; }
.footer a:hover { color: #fff; text-decoration: none; }
.footer h3 { color: #fff; font-size: 1.0625rem; margin: 0 0 .6rem; }

.footer-top {
  display: grid; gap: 2.5rem;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 1.4fr);
  padding-bottom: 2rem; border-bottom: 1px solid #232c40;
}
@media (max-width: 900px) { .footer-top { grid-template-columns: minmax(0, 1fr); } }

.footer-brand { display: grid; gap: .75rem; align-content: start; }
.footer-tagline { color: #8d97ad; margin: 0; font-size: var(--text-sm); max-width: 52ch; }
.footer-stats { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: .5rem; }
.footer-stats > div { display: grid; }
.footer-stat-value { font-size: var(--text-xl); font-weight: 800; color: #fff; line-height: 1.1; }
.footer-stat-label { font-size: var(--text-xs); color: #8d97ad; }

.footer-highlights ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .35rem;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}
.footer-highlights a {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--text-sm); padding: .3rem 0; min-height: 32px;
}
.footer-highlights .icon { width: 1rem; height: 1rem; color: var(--blue); }

/* Колонки разделов: их много, поэтому сетка плотная и адаптивная. */
.footer-grid {
  display: grid; gap: 1.75rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  padding: 2rem 0; border-bottom: 1px solid #232c40;
}
.footer-col { min-width: 0; }
/* Заголовок колонки — ссылка на раздел: переход к разделу из подвала. */
.footer-col h4 {
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
  color: #fff; font-size: 1rem; font-weight: 700; margin: 0 0 .5rem;
}
.footer-col h4 a { color: #fff; }
.footer-col h4 a:hover { color: #7fa8ff; }
.footer-groups {
  display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem;
}
.footer-groups a {
  font-size: var(--text-xs); padding: .15rem .5rem;
  border: 1px solid #2c3548; border-radius: var(--radius-pill);
  background: #ffffff0f;
}
.footer-groups a:hover { background: #ffffff1f; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin: 0; }
.footer-col ul a {
  display: block; padding: .22rem 0; font-size: var(--text-sm);
  color: #aab4c7; min-height: 26px;
}
.footer-col ul a:hover { color: #fff; }
.footer-col-all {
  display: inline-block; margin-top: .5rem;
  font-size: var(--text-xs); font-weight: 600; color: #7fa8ff;
}

.footer-service {
  display: grid; gap: 1.75rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  padding: 2rem 0; border-bottom: 1px solid #232c40;
}
.footer-service-block ul { list-style: none; margin: 0; padding: 0; }
.footer-service-block ul a {
  display: block; padding: .22rem 0; font-size: var(--text-sm); min-height: 26px;
}

.footer-legal { padding-top: 1.75rem; display: grid; gap: 1.25rem; }
.footer-legal-row { display: grid; gap: .85rem; font-size: var(--text-sm); color: #8d97ad; }
.footer-legal-row p { margin: 0; max-width: 110ch; }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.footer-legal-links a { font-size: var(--text-sm); color: #aab4c7; }

/* --- Страницы разделов и услуг ------------------------------------------ */

.section-hero {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 2rem; margin-bottom: 2rem;
}
.section-hero h1 { margin-bottom: .4rem; }
.section-hero .lead { color: var(--ink-soft); font-size: var(--text-lg); max-width: 78ch; }
.section-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }

.group-grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}
.group-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.35rem;
}
.group-card h3 { font-size: var(--text-lg); margin-bottom: .3rem; }
.group-card .note { color: var(--muted); font-size: var(--text-sm); margin-bottom: .75rem; }
.group-card ul { list-style: none; margin: 0; padding: 0; }
.group-card li { margin: 0; }
.group-card li a {
  display: block; padding: .35rem 0; color: var(--ink-soft);
  border-bottom: 1px solid var(--line); min-height: 34px;
}
.group-card li:last-child a { border-bottom: 0; }
.group-card li a:hover { color: var(--blue); }
.group-card li a .service-desc {
  display: block; font-size: var(--text-xs); color: var(--muted);
}
.group-card .group-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
}

.section-list {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.section-chip {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink);
}
.section-chip:hover { border-color: var(--blue); text-decoration: none; }
.section-chip .count { margin-left: auto; font-size: var(--text-sm); color: var(--muted); }

.quick-actions { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.quick-action {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 1rem 1.15rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink);
}
.quick-action:hover { border-color: var(--blue); box-shadow: var(--shadow-sm); text-decoration: none; }
.quick-action strong { display: block; }
.quick-action .hint { font-size: var(--text-xs); color: var(--muted); }

/* --- Карта портала ------------------------------------------------------- */

.sitemap-grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.sitemap-section h3 { font-size: 1.15rem; margin-bottom: .2rem; }
.sitemap-section .note { color: var(--muted); font-size: var(--text-sm); margin-bottom: .6rem; }
.sitemap-section ul { list-style: none; margin: 0 0 .6rem; padding: 0; }
.sitemap-section ul a { display: block; padding: .2rem 0; font-size: var(--text-sm); min-height: 26px; }
.sitemap-group-title {
  font-weight: 700; font-size: var(--text-xs); text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); margin: .75rem 0 .25rem;
}

/* --- Админ-панель -------------------------------------------------------- */

.admin-layout {
  display: grid; gap: var(--gap);
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 980px) { .admin-layout { grid-template-columns: minmax(0, 1fr); } }

.admin-nav {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.15rem; position: sticky; top: 1rem;
}
.admin-nav-head { border-bottom: 1px solid var(--line); padding-bottom: .75rem; margin-bottom: .75rem; }
.admin-role { display: grid; margin-top: .5rem; }
.admin-role strong { font-size: 1.1rem; }
.admin-nav ul { list-style: none; margin: 0; padding: 0; }
.admin-nav li { margin: 0; }
.admin-nav ul a {
  display: block; padding: .5rem .65rem; border-radius: var(--radius-sm);
  color: var(--ink-soft); font-weight: 600; min-height: var(--target);
  display: flex; align-items: center;
}
.admin-nav ul a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.admin-nav ul a.is-active { background: var(--blue-soft); color: var(--blue-dark); }
.admin-nav-foot { border-top: 1px solid var(--line); padding-top: .75rem; margin-top: .75rem; display: grid; gap: .6rem; }
.admin-nav-foot p { font-size: var(--text-xs); margin: 0; }

.admin-main { display: grid; gap: var(--gap); min-width: 0; }
.admin-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.admin-head h1 { margin-bottom: .35rem; }
.admin-block { display: grid; gap: .85rem; }
.admin-block h2 { margin: 0; }

.stat-grid {
  display: grid; gap: .85rem;
  grid-template-columns: repeat(auto-fit, minmax(min(165px, 100%), 1fr));
}
.stat-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.15rem; display: grid; gap: .1rem;
}
.stat-card-warn { border-color: #e8c48a; background: #fffaf1; }
.stat-value { font-size: 1.85rem; font-weight: 800; line-height: 1.1; }
.stat-title { font-weight: 600; font-size: var(--text-sm); }
.stat-hint { font-size: var(--text-xs); color: var(--muted); }

.bar-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .4rem; }
.bar-list li { display: grid; grid-template-columns: minmax(90px, 40%) minmax(60px, 1fr) auto; gap: .6rem; align-items: center; }
.bar-label { font-size: var(--text-xs); color: var(--ink-soft); overflow-wrap: anywhere; }
.bar-track { background: var(--surface-2); border-radius: var(--radius-pill); height: 8px; overflow: hidden; }
.bar-fill { display: block; height: 100%; background: var(--blue); }
.bar-value { font-size: var(--text-xs); font-weight: 700; min-width: 2ch; text-align: right; }

.table-scroll { overflow-x: auto; }
.inline-form { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.inline-form select { padding: .3rem .4rem; font-size: var(--text-xs); }
.stack-form { display: grid; gap: .35rem; min-width: 190px; }
.stack-form select, .stack-form input, .stack-form textarea {
  padding: .35rem .45rem; font-size: var(--text-xs); width: 100%;
}
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.check-list li { font-size: var(--text-xs); }
.check-ok { color: #1c7a4a; }
.check-ok::before { content: "✓ "; font-weight: 700; }
.check-no { color: #a8452a; }
.check-no::before { content: "✕ "; font-weight: 700; }
.details { font-size: var(--text-xs); overflow-wrap: anywhere; white-space: pre-wrap; }
.role-details { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .6rem .85rem; margin-bottom: .6rem; }
.role-details summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; }

/* --- Отзывы -------------------------------------------------------------- */

/* Оценка в карточке организации: число отзывов стоит рядом, потому что
   оценка без него ничего не значит. */
.card-rating {
  display: flex; align-items: baseline; gap: .45rem;
  margin: .35rem 0 .5rem;
}
.card-foot {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .5rem;
  margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--line);
}

.rating-big { display: flex; align-items: baseline; gap: .4rem; justify-content: flex-end; }
.rating-value { font-size: 2.4rem; font-weight: 800; line-height: 1; }
.rating-scale { font-size: var(--text-xs); color: var(--muted); }
.rating-inline { display: inline-flex; align-items: baseline; gap: .25rem; }

.star { color: var(--line); font-size: 1.05rem; line-height: 1; }
.star-on { color: #e8a33d; }
.review-rating { display: inline-flex; gap: .05rem; margin-right: .35rem; }

.review {
  border-top: 1px solid var(--line); padding: 1.25rem 0;
}
.review:first-of-type { border-top: 0; }
.review-head {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .5rem; margin-bottom: .4rem;
}
.review-title { font-size: var(--text-lg); margin: 0 0 .35rem; }
.review-work { font-size: var(--text-xs); color: var(--muted); margin: 0 0 .6rem; }
.review-body { margin: 0 0 .6rem; color: var(--ink-soft); white-space: pre-line; }
.review-pros { margin: 0 0 .3rem; font-size: var(--text-sm); color: #1c7a4a; }
.review-cons { margin: 0 0 .5rem; font-size: var(--text-sm); color: #a8452a; }

/* Оценки по критериям: общая оценка без разбивки ничего не объясняет. */
.review-criteria {
  display: flex; flex-wrap: wrap; gap: .3rem .75rem;
  list-style: none; margin: .5rem 0; padding: 0;
  font-size: var(--text-xs); color: var(--muted);
}
.review-criteria li {
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: .1rem .55rem;
}

.review-reply {
  background: var(--surface-2); border-left: 3px solid var(--blue);
  border-radius: var(--radius-sm); padding: .7rem .9rem; margin: .6rem 0;
  font-size: var(--text-sm);
}
.review-reply p { margin: .25rem 0 0; }
.review-foot {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .5rem;
  border-top: 1px solid var(--line); padding-top: .6rem; margin-top: .5rem;
}

.review-form-wrap {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .75rem 1rem; margin-bottom: .75rem;
}
.review-form-wrap summary {
  cursor: pointer; font-weight: 600; min-height: var(--target);
  display: flex; align-items: center;
}

/* --- Переключатели настроек ---------------------------------------------- */

/* Строка настройки: флажок и подпись рядом, область нажатия — вся строка. */
.switch-row {
  display: flex; align-items: flex-start; gap: .6rem;
  cursor: pointer; padding: .35rem 0;
}
.switch-row input { margin-top: .25rem; flex: 0 0 auto; }
.check-list-plain { list-style: none; padding-left: 0; }

/* --- Заявки, ожидающие ответа --------------------------------------------
   В таблице из десятков строк иначе не видно, какая именно ждёт решения.
   От скорости ответа зависит выбор клиента, поэтому такие строки выделены. */

.row-waiting { background: #fffaf0; }
.row-waiting > td:first-child { box-shadow: inset 3px 0 0 #d9822b; }
.waiting-note { color: #b45309; font-weight: 600; }

/* --- Лента действий партнёра ---------------------------------------------
   Каждый пункт отвечает на три вопроса: что случилось, почему это важно
   и что сделать. Без третьего пункта список выглядит как набор напоминаний. */

.attention-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.attention-item {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: .75rem;
  padding: .85rem 1rem; border: 1px solid var(--line);
  border-left-width: 4px; border-radius: var(--radius);
  background: var(--surface);
}
/* Срочность задана явно: заявка без ответа важнее нового отзыва. */
.attention-item.urgency-1 { border-left-color: #c0392b; }
.attention-item.urgency-2 { border-left-color: #d9822b; }
.attention-item.urgency-3 { border-left-color: var(--blue); }
.attention-item.urgency-4 { border-left-color: var(--line); }
.attention-main { min-width: 0; flex: 1 1 320px; }
.attention-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.attention-detail { margin: .3rem 0 0; font-size: var(--text-sm); }
.attention-why {
  margin: .35rem 0 0; font-size: var(--text-xs); color: var(--muted);
  border-left: 2px solid var(--line); padding-left: .6rem;
}
.attention-action { flex: 0 0 auto; }

/* --- Панель фильтров ------------------------------------------------------
   Поля фильтра стоят в строку, а не столбиком: список из четырёх фильтров
   занимал почти экран и отодвигал результат. Класс использовался в разметке
   без описания, поэтому страницы с фильтрами выглядели растянутыми. */

.filter-bar {
  display: grid; gap: 1rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  align-items: end;
}
.filter-bar .field { display: grid; gap: .3rem; min-width: 0; }
.filter-bar .field label { font-size: var(--text-xs); font-weight: 600; color: var(--ink-soft); }
.filter-bar .field input,
.filter-bar .field select { width: 100%; }
.field-actions {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
}
@media (max-width: 780px) {
  .filter-bar { grid-template-columns: minmax(0, 1fr); }
}

/* --- Сравнение цен по услуге ---------------------------------------------- */

/* Группа — одна единица измерения. Цены за разные единицы в один ряд не
   ставятся, поэтому группы разделены заголовком. */
.price-group { margin-bottom: 1.4rem; }
.price-unit { font-size: var(--text-lg); margin-bottom: .3rem; }
.price-spread { margin: 0 0 .7rem; font-size: var(--text-sm); }
.price-needs { font-size: var(--text-base); margin: 1rem 0 .3rem; color: var(--muted); }
.plain-list { list-style: none; padding-left: 0; margin: 0; }
.plain-list li { padding: .25rem 0; font-size: var(--text-sm); border-bottom: 1px solid var(--line); }
.plain-list li:last-child { border-bottom: 0; }

/* --- Сравнение организаций ------------------------------------------------ */

/* Способ получения значения выводится прямо в заголовке критерия: без него
   таблица выглядит как рейтинг ради рейтинга. */
.criterion-note {
  font-weight: 400; font-size: var(--text-xs); color: var(--muted);
  max-width: 34ch; margin-top: .2rem;
}
.compare-table th { vertical-align: top; text-align: left; }
.compare-table thead th { white-space: nowrap; }
.compare-table td { vertical-align: top; }
/* Лучшее значение по числовому критерию. Подсветка есть только там, где
   «лучше» имеет однозначный смысл. */
.compare-best { background: #eef7f0; font-weight: 700; }
.link-button {
  border: 0; background: none; padding: 0; margin-top: .2rem;
  color: var(--blue); font: inherit; font-size: var(--text-xs);
  font-weight: 600; cursor: pointer; text-decoration: underline;
}
.link-button:hover { color: var(--blue-dark); }

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

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table.data { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
/* Таблицы, у которых нет обёртки для прокрутки, могут вылезти за экран на
   телефоне: широкая таблица растягивает страницу и появляется горизонтальная
   прокрутка всего документа. Правило ниже ограничивает таблицу её блоком,
   а прокрутка остаётся внутри — на любой странице, включая новые. */
.table-wrap > table.data,
.panel > table.data,
.panel > table,
section > table.data {
  display: block; overflow-x: auto; max-width: 100%;
}
table.data th, table.data td {
  padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.data th { background: var(--bg); font-weight: 700; white-space: nowrap; }
table.data tr:last-child td { border-bottom: 0; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* На узком экране таблица превращается в карточки строк. */
@media (max-width: 760px) {
  table.data thead { display: none; }
  table.data tr { display: block; border-bottom: 1px solid var(--line); padding: .5rem 0; }
  table.data td { display: grid; grid-template-columns: 45% 1fr; gap: .5rem; border: 0; }
  table.data td::before {
    content: attr(data-label); font-weight: 600; color: var(--muted);
  }
}

/* --- Формы и служебные блоки --------------------------------------------- */

.form-card { max-width: 520px; margin: 0 auto; }
.form-card .field { margin-bottom: 1rem; }
.form-note { font-size: var(--text-sm); color: var(--muted); }

.alert {
  border: 1px solid var(--line); border-left: 4px solid var(--blue);
  background: var(--surface); border-radius: var(--radius-sm);
  padding: 1rem 1.15rem; margin-bottom: 1.25rem;
}
.alert h3, .alert h4 { margin-bottom: .3rem; }
.alert p:last-child { margin-bottom: 0; }
.alert-warn { border-left-color: var(--amber); background: var(--amber-soft); }
.alert-danger { border-left-color: var(--red); background: var(--red-soft); }
.alert-ok { border-left-color: var(--green); background: var(--green-soft); }
.alert-info { border-left-color: var(--blue); background: var(--blue-soft); }
.alert-honest { border-left-color: var(--orange); background: var(--orange-soft); }

.flash {
  margin-top: 1rem; padding: .85rem 1.15rem; border-radius: var(--radius-sm);
  background: var(--blue-soft); border: 1px solid #c5d8ff; color: var(--blue-dark);
}
.flash-ok { background: var(--green-soft); border-color: #bfe0cd; color: var(--green); }
.flash-warn { background: var(--amber-soft); border-color: #f0dcb4; color: var(--amber); }
.flash-danger { background: var(--red-soft); border-color: #f3c9c5; color: var(--red); }

.empty-state {
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  padding: 2rem 1.5rem; text-align: center; background: var(--surface);
}
.empty-state h3 { margin-bottom: .4rem; }
.empty-state p { color: var(--muted); max-width: 56ch; margin: 0 auto .9rem; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 1rem; }
.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem;
}
.stat-value { font-size: var(--text-2xl); font-weight: 800; line-height: 1.1; }
.stat-label { color: var(--muted); font-size: var(--text-sm); }

.progress {
  height: 10px; border-radius: var(--radius-pill);
  background: var(--surface-alt); overflow: hidden;
}
.progress span { display: block; height: 100%; background: var(--blue); border-radius: inherit; }
.progress-lg { height: 14px; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li {
  position: relative; padding: 0 0 1.15rem 1.9rem; border-left: 2px solid var(--line);
  margin-left: .45rem;
}
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: -8px; top: .35rem;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--line-strong);
}
.timeline li.is-done::before { border-color: var(--green); background: var(--green); }
.timeline li.is-active::before { border-color: var(--blue); background: var(--blue); }
.timeline .step-title { font-weight: 700; }
.timeline .step-meta { font-size: var(--text-sm); color: var(--muted); }

.tabs { display: flex; flex-wrap: wrap; gap: .4rem; border-bottom: 1px solid var(--line); margin-bottom: 1.35rem; }
.tab {
  min-height: var(--target); padding: .5rem 1rem; color: var(--ink-soft);
  border-bottom: 3px solid transparent; font-weight: 600;
}
.tab:hover { color: var(--blue); text-decoration: none; }
.tab.is-active { color: var(--blue); border-bottom-color: var(--blue); }

.breadcrumbs { font-size: var(--text-sm); color: var(--muted); margin-bottom: .9rem; }
.breadcrumbs-list {
  /* Список без маркеров: путь читается как строка, а не как перечень. */
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  list-style: none; margin: 0; padding: 0;
}
.breadcrumbs-item { display: inline-flex; align-items: center; gap: .35rem; }
.breadcrumbs-item + .breadcrumbs-item::before {
  content: "/"; color: var(--line-strong);
}
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--blue); }
.breadcrumbs [aria-current="page"] { color: var(--ink-soft); font-weight: 600; }

/* --- История цены --------------------------------------------------------
   Рост и падение показываются разным цветом: по ряду значений направление
   нужно считывать с одного взгляда, а не сравнивать числа глазами. */

.price-up { color: #b93b1e; font-weight: 600; }
.price-down { color: #1c7a45; font-weight: 600; }

/* --- SEO-блок: узкий баннер и вводный текст ------------------------------
   Баннер объясняет, что это за категория, и не занимает пол-экрана до
   полезного содержимого. Вводный текст отвечает на вопрос «что здесь есть»
   и написан для человека, а не для поискового робота. */

.seo-lead { margin-bottom: 1.25rem; }
.seo-banner {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .85rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius);
}
.seo-banner figure { margin: 0; flex: 1 1 320px; min-width: 0; }
.seo-banner-image {
  /* Баннеры бывают двух видов: узкий 3:1 и главное изображение 16:9.
     Картинка вписывается по ширине полосы, а высота ограничена, чтобы
     полоса не заняла весь первый экран. Раньше здесь стояли жёсткие
     120×68 — широкий баннер сжимался в маленький прямоугольник посреди
     пустой полосы. */
  display: block; width: 100%; height: auto;
  max-height: 200px; object-fit: cover; border-radius: var(--radius-sm);
}
.seo-banner figcaption { margin-top: .35rem; }
.seo-banner-body { flex: 1 1 260px; min-width: 0; }
.seo-banner-title { margin: 0; font-weight: 700; font-size: var(--text-base); }
.seo-banner-text {
  margin: .15rem 0 0; color: var(--ink-soft); font-size: var(--text-sm);
}
.seo-banner-action { flex: 0 0 auto; }
.seo-intro {
  /* Ширина строки ограничена: длинный текст на всю ширину 1440 пикселей
     читать тяжело. */
  max-width: 78ch; margin: .75rem 0 0;
  color: var(--ink-soft); font-size: var(--text-base); line-height: 1.6;
}

@media (max-width: 720px) {
  /* Картинка остаётся во всю ширину и на узком экране: уменьшать её
     до значка незачем, полоса и так одна на страницу. */
  .seo-banner-image { max-height: 160px; }
  .seo-banner-action { width: 100%; }
}

/* Переход по страницам каталога.
   Отступ снизу обязателен: в правом нижнем углу постоянно висит кнопка
   помощника, и переход оказывался под ней — нажать «Следующая» было
   нельзя. */
.pagination {
  display: flex;
  gap: .5rem;
  justify-content: center;
  margin-top: 1.75rem;
  margin-bottom: 4.5rem;
}

/* Переход по страницам длинного списка.
   Подпись о том, где находится человек, стоит слева, кнопки — справа:
   так видно и место в списке, и куда идти дальше, не разыскивая кнопки.

   ПОЧЕМУ ЕСТЬ ОТСТУП СНИЗУ
   В правом нижнем углу постоянно висит кнопка помощника. Ссылки перехода
   стоят в том же углу, и кнопка «Следующая» оказывалась под ней: нажать
   её было нельзя. Отступ сдвигает переход выше кнопки помощника. */
.pager {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.5rem;
  margin-bottom: 4.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

.pager-note { margin: 0; font-size: var(--text-sm); color: var(--muted); }

.pager-links { display: flex; gap: .5rem; }

.aside-note { font-size: var(--text-sm); color: var(--muted); }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.75rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.75rem; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.text-right { text-align: right; }
.text-center { text-align: center; }

/* --- Статьи и материалы -------------------------------------------------- */

.article-body { max-width: 72ch; }
.article-body h3, .article-body h4 { margin-top: 1.75rem; }
.article-body blockquote {
  margin: 1.25rem 0; padding: .9rem 1.15rem;
  background: var(--surface-alt); border-left: 4px solid var(--blue);
  border-radius: var(--radius-sm);
}
.article-body blockquote p { margin: 0; }
.article-body ul { margin-bottom: 1.25rem; }

/* --- Подвал ---------------------------------------------------------------
   Стили глубокого подвала объявлены выше, в разделе «Глубокий подвал».
   Прежний короткий вариант удалён: он перекрывал новые правила, потому что
   стоял позже в файле. */

/* --- Помощник и уведомления ---------------------------------------------- */

.assistant {
  position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 45;
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: var(--target); padding: .6rem 1.15rem;
  background: var(--ink); color: #fff; border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg); font-weight: 600;
}
.assistant:hover { color: #fff; text-decoration: none; background: #1b2233; }

.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%) translateY(120%);
  background: var(--ink); color: #fff; padding: .8rem 1.35rem;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  z-index: 60; max-width: min(560px, 92vw); text-align: center;
  transition: transform .22s ease;
}
.toast.is-visible { transform: translateX(-50%) translateY(0); }

/* --- Печать -------------------------------------------------------------- */

@media print {
  .topbar, .header, .footer, .assistant, .ad-slot, .toast { display: none !important; }
  body { background: #fff; }
}

/* --- Уважение к настройкам пользователя ---------------------------------- */

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

/* --- Основной текст страницы и вопросы -----------------------------------
   Основной текст раскрывает тему после первого экрана. Ширина строки
   ограничена: длинный абзац на всю ширину читать тяжело. */

.seo-content { margin: 1.5rem 0; max-width: 78ch; }
.seo-content h2 { margin-bottom: .6rem; }
.seo-content p { color: var(--ink-soft); line-height: 1.65; margin: .6rem 0; }
.seo-outline {
  margin: 0 0 .9rem; padding-left: 1.1rem;
  color: var(--ink-soft); font-size: var(--text-sm);
}
.seo-outline li { margin: .2rem 0; }

.seo-faq { margin: 1.5rem 0; max-width: 78ch; }
.seo-question {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: .6rem .8rem; margin-bottom: .4rem; background: var(--surface);
}
.seo-question summary {
  cursor: pointer; font-weight: 600; color: var(--ink);
}
.seo-question summary:hover { color: var(--blue); }
.seo-question p { margin: .5rem 0 0; color: var(--ink-soft); line-height: 1.6; }

/* --- Первый экран: разделы карточками ------------------------------------
   Первый экран показывает разделы с изображениями: по картинке человек
   понимает, о чём раздел, быстрее, чем по названию. Сетка два на три
   помещается на экран и не превращается в длинный список. */

.hero-kicker {
  margin: 0 0 .5rem; font-size: var(--text-sm); font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--blue);
}
.hero-tiles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem; align-content: start;
}
.hero-tile {
  display: flex; flex-direction: column; gap: .35rem;
  padding: .5rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  color: inherit; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.hero-tile:hover, .hero-tile:focus-visible {
  transform: translateY(-2px); border-color: var(--blue);
  box-shadow: 0 8px 22px rgba(15, 23, 42, .1);
}
.hero-tile-photo, .hero-tile-blank {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: var(--radius-sm);
  background: var(--surface-2, #eef2f6);
}
.hero-tile-title { font-weight: 700; font-size: var(--text-sm); line-height: 1.25; }
.hero-tile-caption {
  font-size: var(--text-xs); color: var(--muted); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Сторисы: быстрый вход под конкретный вопрос -------------------------- */

.stories { margin: 1.25rem 0; }
.stories-row {
  display: flex; gap: .9rem; margin: 0; padding: .25rem 0 .5rem;
  list-style: none; overflow-x: auto; scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.story { flex: 0 0 auto; scroll-snap-align: start; }
.story-link {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  width: 92px; text-decoration: none; color: inherit;
}
.story-ring {
  display: grid; place-items: center; width: 76px; height: 76px;
  border-radius: 50%; padding: 3px;
  background: linear-gradient(135deg, var(--blue), #7cb8ff);
}
.story-photo, .story-blank {
  width: 70px; height: 70px; border-radius: 50%;
  object-fit: cover; background: var(--surface-2, #eef2f6);
}
.story-link:hover .story-ring, .story-link:focus-visible .story-ring {
  background: linear-gradient(135deg, #1c62d6, var(--blue));
}
.story-title {
  font-size: var(--text-xs); text-align: center; line-height: 1.25;
  color: var(--ink-soft);
}

/* --- Карусель предложений ------------------------------------------------- */

.carousel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.carousel-controls { display: flex; gap: .4rem; }
.carousel-button {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); cursor: pointer;
}
.carousel-button:hover, .carousel-button:focus-visible {
  border-color: var(--blue); color: var(--blue);
}
.carousel-button:disabled { opacity: .4; cursor: default; }
.carousel-track {
  display: flex; gap: 1rem; margin: 0; padding: .25rem .25rem 1rem;
  list-style: none; overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.carousel-item {
  flex: 0 0 clamp(240px, 30%, 320px); scroll-snap-align: start;
}
.carousel-item > * { height: 100%; }

/* --- Разделы портала карточками ------------------------------------------- */

.section-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
}
.section-card {
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); color: inherit; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.section-card:hover, .section-card:focus-visible {
  transform: translateY(-3px); border-color: var(--blue);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
}
.section-media { display: block; }
.section-photo, .section-blank {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover; background: var(--surface-2, #eef2f6);
}
.section-body { display: flex; flex-direction: column; gap: .35rem; padding: .85rem 1rem 1rem; }
.section-title { font-weight: 700; font-size: var(--text-base); }
.section-caption { font-size: var(--text-sm); color: var(--muted); line-height: 1.45; }
.section-go {
  display: inline-flex; align-items: center; gap: .3rem; margin-top: .35rem;
  font-size: var(--text-sm); font-weight: 600; color: var(--blue);
}

@media (max-width: 900px) {
  .hero-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .hero-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .hero-tile-caption { display: none; }
  .carousel-item { flex: 0 0 78%; }
}

/* Ряд дополнительных видов снимка раздела.
   ЗАЧЕМ
   В полосе баннера показывается один вид снимка. Генератор готовит
   шесть: как выглядит, как делается, что получается. Ряд показывает
   остальные: это нагляднее ещё одного текста про раздел.
   ПОЧЕМУ СЕТКА, А НЕ ЛЕНТА
   Видов немного (до четырёх), и все должны быть видны сразу: лента
   спрятала бы половину за краем. */
.section-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.section-shot {
  margin: 0;
  display: grid;
  gap: .5rem;
}

.section-shot-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}

.section-shot figcaption {
  font-size: var(--text-sm);
  color: var(--muted);
}

@media (max-width: 640px) {
  .section-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
  }
}