/* keysy.css — раздел кейсов: индекс /keysy/ (фильтр + сетка карточек) и страницы кейсов /keysy/<slug>/
   (разбор .hz-case2 с панелью показателей и сценкой, «Другие кейсы»). Подключается сразу после @head:end
   (каскад site.css → mobile.css → hz.css → keysy.css, дальше hz-avito.css и hz-ui.css). Структура раздела и как
   добавить кейс — docs/site-relaunch/keysy-2026-09/README.md. История: INNER-BUILD.md §2, polish-2026-09/DECISIONS.md §2,
   SPEC-2-keysy.md (сценки настоящим контентом). Примитивы (.hz-ph, .hz-prose, .hz-panelcard, формы) — в hz.css;
   hz-seg / hz-linkcard / hz-autoplay — в hz-ui.css (он подключён позже, поэтому переопределения здесь — с двойным классом). */

/* якорные цели из-под фиксированной шапки уводит hz.css (scroll-padding-top на html + #lead) — здесь не дублируем */

/* ===== Индекс: фильтр по нише и задаче ===== */
.kc-ph{padding-bottom:clamp(28px,3vw,40px)}
.kc-list{padding:0 0 var(--hz-sec-y)}
.kc-filter{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 32px;align-items:end;
  margin:0 0 clamp(24px,3vw,36px);padding:clamp(16px,2vw,22px) 0;border-top:1px solid var(--hz-line);border-bottom:1px solid var(--hz-line)}
.kc-filter[hidden]{display:none}
.kc-filter__row{grid-column:1;display:grid;grid-template-columns:84px minmax(0,1fr);gap:8px 16px;align-items:center}
.kc-filter__label{margin:0;font-size:15px;line-height:1.3;font-weight:600;color:var(--hz-ink)}
.kc-seg.hz-seg{justify-self:start}
.kc-seg .hz-seg__btn{min-height:44px;padding:10px 14px;font-size:14px;display:inline-flex;align-items:center;gap:8px}
.kc-seg .hz-seg__btn[hidden]{display:none}
.kc-seg__n{font-size:12px;line-height:1;font-weight:600;font-variant-numeric:tabular-nums;opacity:.62}
/* значение, которое при текущем выборе другой оси даст ноль кейсов: приглушено, но доступно */
.kc-seg .hz-seg__btn[data-kf-zero]:not([aria-pressed="true"]){color:var(--hz-ink-3)}
.kc-filter__count{grid-column:2;grid-row:1 / span 2;align-self:end;margin:0;font-size:15px;line-height:1.3;
  color:var(--hz-ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ===== Карточка кейса (индекс и «Другие кейсы»): вся карточка — ссылка hz-linkcard =====
   Сетка: 1 колонка → 2 (≥768) → 3 (≥1200). Высота карточек в ряду общая, задачи прижаты к низу. */
.kc-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.kc-grid>li{display:flex;min-width:0}
.kc-grid>li[hidden]{display:none}
.kc-card.hz-linkcard{display:flex;flex-direction:column;width:100%;padding:22px 22px 20px;background:var(--hz-white);
  border:1px solid var(--hz-line);border-radius:var(--hz-radius);box-shadow:var(--hz-shadow)}
.kc-card.hz-linkcard:hover{box-shadow:var(--hz-shadow-hover)}
.kc-card__meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;font-size:14px;line-height:1.35;color:var(--hz-ink-3)}
.kc-card__niche{font-weight:600;color:var(--hz-signal-deep)}
.kc-card__client{display:block;margin-top:18px;font-weight:600;font-size:17px;line-height:1.3;color:var(--hz-ink)}
.kc-card__sub{display:block;font-weight:400;font-size:15px;color:var(--hz-ink-3)}
.kc-card__title{margin:10px 0 0;font-family:var(--hz-display);font-weight:750;font-size:clamp(26px,2.2vw,30px);line-height:1.02;
  letter-spacing:-.005em;color:var(--hz-ink);text-wrap:balance;text-decoration:underline 2px transparent;text-underline-offset:5px;
  transition:text-decoration-color .18s var(--hz-ease)}
.kc-card:hover .kc-card__title,.kc-card:focus-visible .kc-card__title{text-decoration-color:var(--hz-signal)}
/* цифра-герой: главный результат кейса */
.kc-card__hero{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--hz-line)}
.kc-card__val{font-size:clamp(52px,4.6vw,68px);color:var(--hz-signal-deep);white-space:nowrap}
.kc-card__cap{font-size:15px;line-height:1.3;color:var(--hz-ink-2)}
.kc-card__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;margin:18px 0 0}
.kc-card__facts>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:4px;min-width:0}
.kc-card__facts dt{font-size:14px;line-height:1.3;color:var(--hz-ink-3)}
.kc-card__facts dd{margin:0;font-family:var(--hz-display);font-weight:800;font-size:28px;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--hz-ink);white-space:nowrap}
/* задачи — статичные метки, не кнопки (hz-ui.css: статичное кнопками не оформляем); справа место под стрелку карточки */
.kc-card__tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:auto 0 0;padding:22px 36px 0 0}
/* задачи — бирюзовые (ось «задача»), ниша — оранжевая строка сверху (ось «ниша») */
.kc-card__tags li{font-size:13px;line-height:1.25;padding:5px 10px;border-radius:999px;background:var(--hz-teal-soft);color:var(--hz-teal)}
.hz-sec_white .kc-card.hz-linkcard{border-color:var(--hz-line)}
/* строки карточек одного ряда выравниваются общей сеткой (subgrid): цифры-герои стоят на одной линии,
   даже если заголовки разной длины. Без поддержки subgrid — обычная колонка (flex) выше. */
@supports (grid-template-rows:subgrid){
  .kc-grid>li{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0}
  .kc-card.hz-linkcard{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .kc-card__tags{align-self:end}
}

.kc-in{animation:kc-in .28s var(--hz-ease) both}
@keyframes kc-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (min-width:768px){.kc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}}
@media (min-width:1200px){.kc-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  .kc-card.hz-linkcard{padding:26px 26px 22px}}

/* пустой результат фильтра */
.kc-empty{padding:clamp(24px,3vw,36px);border:1px dashed var(--hz-ink-3);border-radius:var(--hz-radius);background:var(--hz-white)}
.kc-empty[hidden]{display:none}
.kc-empty__t{margin:0;max-width:34em;font-size:clamp(18px,1.5vw,21px);line-height:1.4;color:var(--hz-ink)}
.kc-empty__act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin:18px 0 0}
.kc-empty__reset{appearance:none;border:0;background:none;padding:10px 0;min-height:44px;font:inherit;font-size:16px;
  color:var(--hz-ink-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.kc-empty__reset:hover{color:var(--hz-ink)}

/* ===== Страница кейса ===== */
.hz-case2.hz-case2_page{padding-top:clamp(28px,3.4vw,48px)}
.hz-case2__crumbs{margin:0 0 clamp(24px,3vw,40px)}
/* подзаголовки разбора на странице кейса — h2 (после h1), выглядят как прежние h3 */
.hz-case2 .hz-prose h2{font-family:var(--hz-text);font-weight:600;font-size:21px;line-height:1.3;letter-spacing:0;color:var(--hz-ink);margin:1.4em 0 .5em}
.hz-case2 .hz-prose>h2:first-child{margin-top:0}
.hz-zoom_case{border-top:1px solid var(--hz-line)}
.kc-more__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 32px;margin:0 0 clamp(24px,3vw,40px)}

/* ===== Разбор кейса ===== */
.hz-case2{padding:clamp(56px,6vw,96px) 0}
.hz-case2__top{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);
  gap:clamp(28px,3.6vw,64px);align-items:center}
/* зеркальный ряд: визуал уходит во вторую колонку */
.hz-case2_mirror .hz-case2__vis{order:2}
.hz-case2__who{margin:0;font-size:15px;line-height:1.4;color:var(--hz-ink-3);max-width:60em}
.hz-case2__title{margin:14px 0 0;max-width:12em}
/* A2-03: одиночное слово в последней строке заголовков и подписей */
.hz-case2__title,.hz-form .hz-h2,.hz-form__cardh,.hz-zoom .hz-h3,.hz-zoom__ct{text-wrap:balance}
.hz-case2__task{margin:20px 0 0}

.hz-case2__body{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(32px,4vw,72px);align-items:start;margin-top:clamp(40px,4.4vw,72px)}
.hz-case2__panel{position:sticky;top:100px}
/* зеркальный кейс зеркалится целиком: панель показателей уходит вправо */
.hz-case2_mirror .hz-case2__body{grid-template-columns:minmax(0,8fr) minmax(0,4fr)}
.hz-case2_mirror .hz-case2__panel{order:2}
.hz-case2__text{margin:0}
.hz-case2__more{margin:1.6em 0 0}
.hz-case2__more .hz-btn{text-decoration:none}
/* текстовое (не числовое) значение в панели показателей */
.hz-panelcard dd.is-text{font-family:var(--hz-text);font-weight:600;font-size:15px;line-height:1.35}

/* «Что сделали» — реальная последовательность действий, поэтому нумерация уместна */
.hz-prose .hz-steps{list-style:none;margin:0 0 1.1em;padding:0;counter-reset:hz-step}
.hz-prose .hz-steps>li{counter-increment:hz-step;display:grid;grid-template-columns:28px minmax(0,1fr);
  gap:16px;padding:14px 0;border-top:1px solid var(--hz-line);margin-top:0}
.hz-prose .hz-steps>li:last-child{border-bottom:1px solid var(--hz-line)}
.hz-prose .hz-steps>li::before{content:counter(hz-step);font-family:var(--hz-display);font-weight:750;
  font-size:24px;line-height:1.35;color:var(--hz-ink-3);font-variant-numeric:tabular-nums}

/* ===== Кейс 1: страница продавца на Авито целиком (.avm-page_narrow из hz-avito.css) ===== */
.hz-kavm{box-shadow:0 1px 2px rgba(0,0,0,.10),0 24px 48px -32px rgba(0,0,0,.35)}
/* страница продавца длинная: колонке макета — 7/12 (ширина ≈ как у .avm-page_narrow на главной), интро — сверху и липкое */
.hz-case2_tall .hz-case2__top{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
.hz-case2_tall .hz-case2__intro{position:sticky;top:120px}
/* узкий вариант: левую колонку чуть шире, чтобы «Показать номер» не упиралась в края кнопки */
@media (min-width:901px){.hz-kavm.avm-page_narrow,.hz-cs-page.avm-page_narrow{grid-template-columns:240px minmax(0,1fr)}}
.hz-kavm .avm-side__btns .avm-btn,.hz-cs-page .avm-side__btns .avm-btn{padding:0 8px}
/* поле поиска в узких колонках — одной строкой; чипы «Информации» — одной строкой, как у Авито (лишнее уходит за край) */
.hz-kavm .avm-search__field,.hz-cs .avm-search__field{white-space:nowrap;overflow:hidden}
.hz-kavm .avm-chips{flex-wrap:nowrap;overflow:hidden}
.hz-kavm .avm-chips li{flex:0 0 auto}

/* ===== Кейс 2: два столбца бюджета на общей шкале ===== */
.hz-bud{background:var(--hz-paper);border-radius:var(--hz-radius);padding:clamp(20px,2.4vw,32px)}
.hz-bud__h{margin:0;font-family:var(--hz-text);font-weight:600;font-size:17px;line-height:1.3;color:var(--hz-ink)}
.hz-bud__row{margin-top:22px}
.hz-bud__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 10px}
.hz-bud__lbl{font-size:15px;line-height:1.3;color:var(--hz-ink-3)}
.hz-bud__val{font-family:var(--hz-display);font-weight:800;font-size:clamp(34px,3.4vw,48px);line-height:.95;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--hz-ink);white-space:nowrap}
.hz-bud__track{height:28px;border-radius:4px;background:rgba(18,20,22,.07);overflow:hidden}
.hz-bud__bar{display:block;height:100%;width:calc(var(--w,1) * 100%);border-radius:4px;background:var(--hz-ink-3)}
.hz-bud__row_now .hz-bud__bar{background:var(--hz-signal)}
.hz-bud__leads{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:26px 0 0;padding-top:20px;
  border-top:1px solid var(--hz-line);font-size:16px;line-height:1.3;color:var(--hz-ink-2)}
.hz-bud__lv{font-family:var(--hz-display);font-weight:800;font-size:clamp(34px,3.4vw,48px);line-height:.95;
  letter-spacing:-.01em;color:var(--hz-signal-deep);white-space:nowrap}

/* ===== Кейс 3: сводка «7 филиалов → единый отчёт → ≈5,5 млн ₽» ===== */
.hz-sum{background:var(--hz-white);border-radius:var(--hz-radius);
  box-shadow:0 1px 2px rgba(0,0,0,.12),0 24px 48px -32px rgba(0,0,0,.35)}
.hz-sum__step{position:relative;padding:22px 24px}
.hz-sum__step+.hz-sum__step{border-top:1px solid var(--hz-line)}
.hz-sum__step+.hz-sum__step::before{content:"↓";position:absolute;top:-14px;left:24px;width:28px;height:28px;border-radius:50%;
  background:var(--hz-white);border:1px solid var(--hz-line);display:flex;align-items:center;justify-content:center;
  font:600 14px/1 var(--hz-text);color:var(--hz-ink-3)}
.hz-sum__big{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.hz-sum__n{font-family:var(--hz-display);font-weight:800;font-size:clamp(40px,4vw,56px);line-height:.9;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;color:var(--hz-ink);white-space:nowrap}
.hz-sum__step:last-child .hz-sum__n{color:var(--hz-signal-deep)}
.hz-sum__cap{font-size:15px;line-height:1.35;color:var(--hz-ink-3)}
.hz-sum__cities{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 0;padding:0;list-style:none}
.hz-sum__cities li{font-size:13px;line-height:1.2;padding:5px 10px;border-radius:999px;background:var(--hz-paper);color:var(--hz-ink-2)}
.hz-sum__h{margin:0 0 12px;font-family:var(--hz-text);font-weight:600;font-size:17px;line-height:1.3;color:var(--hz-ink)}
/* Отчёт Aveasy Zoom (сессия 2 полировки, SPEC-2-keysy §2/§4/§5): тёмная панель как .us-abx__panel на /usiliteli/.
   Это интерфейс Aveasy, не Авито: подписи — Golos, моно — только у чисел. Только значения из текста кейсов. */
.hz-zoomrep{background:var(--hz-panel);color:var(--hz-on-panel);border-radius:var(--hz-radius);padding:14px 18px 18px;
  font-family:var(--hz-text);font-size:15px;line-height:1.35;box-shadow:0 24px 48px -30px rgba(0,0,0,.5)}
.hz-zoomrep__t{margin:0 0 6px;font-size:13px;line-height:1.4;font-weight:500;color:var(--hz-on-panel-2)}
.hz-zoomrep__tbl{width:100%;border-collapse:collapse;font-size:15px;line-height:1.3}
.hz-zoomrep__tbl th,.hz-zoomrep__tbl td{padding:10px 0;border-top:1px solid var(--hz-line-panel);vertical-align:baseline}
.hz-zoomrep__tbl tbody th{text-align:left;font-weight:500;color:var(--hz-on-panel-2);padding-right:16px}
.hz-zoomrep__tbl td{text-align:right;font:700 17px/1.2 var(--hz-mono);font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--hz-on-panel)}
.hz-zoomrep__tbl td.is-text{font:600 15px/1.3 var(--hz-text);white-space:normal}
.hz-zoomrep__tbl .is-key td{font-size:22px;color:var(--hz-signal)}
.hz-zoomrep__out{margin:14px 0 0;font-size:16px;line-height:1.4;font-weight:600;color:var(--hz-on-panel)}
.hz-sum__rep{box-shadow:none}

/* ===== Сценки кейсов (case-scenes.js): шаги сверху, доска — настоящий документ, подпись под ней =====
   Сценка стоит вне .hz-prose: стили прозы (p/ul/li) ломали бы макеты Авито, а 68ch сужали бы доску. */
.hz-cs{margin:36px 0 40px;padding:clamp(16px,2vw,24px);background:var(--hz-white);
  border:1px solid var(--hz-line);border-radius:var(--hz-radius);font-family:var(--hz-text);font-size:16px;line-height:1.5}
.hz-sec_white .hz-cs{background:var(--hz-paper);border-color:transparent}
.hz-cs__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.hz-seg.hz-cs__seg{justify-self:start}
.hz-cs__side{min-width:0}
.hz-cs__board{position:relative}
.hz-cs .hz-cs__caps p{margin:16px 0 0;max-width:68ch;font-size:16px;line-height:1.5;color:var(--hz-ink-2)}
.hz-cs .hz-cs__caps b{font-weight:600;color:var(--hz-ink)}
.hz-cs__ap{margin-top:18px}
/* A2-07: кнопка паузы автопоказа — 32×32 (hz-ui.css), хит-зона расширена без изменения вида */
.hz-cs__ap .hz-autoplay__btn{position:relative}
.hz-cs__ap .hz-autoplay__btn::after{content:"";position:absolute;inset:-6px}

/* Кейс 1: одна страница продавца на всех шагах (высота доски = высота страницы, шаги не прыгают).
   Шаги 0–1 — документ поверх затемнённой страницы (дети доски: 1 страница, 2 затемнение, 3 отчёт, 4 окно региона);
   шаг 2 — затемнение уходит, в профиле появляется Рязань (.v0 → .v1). */
.hz-cs-page{box-shadow:0 1px 2px rgba(0,0,0,.10),0 24px 48px -32px rgba(0,0,0,.35)}
.hz-cs-doc .v1,.hz-cs-doc[data-step="2"] .v0{display:none}
.hz-cs-doc[data-step="2"] .v1{display:inline}
.hz-cs-doc__veil{position:absolute;inset:0;border-radius:12px;background:rgba(18,20,22,.55);transition:opacity .35s var(--hz-ease)}
.hz-cs-doc[data-step="2"] .hz-cs-doc__veil{opacity:0}
.hz-cs-doc__layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;visibility:hidden;transition:opacity .35s var(--hz-ease),visibility 0s linear .35s}
.hz-cs-doc__layer>*{width:100%;max-width:520px}
.hz-cs-doc[data-step="0"]>.hz-cs-doc__layer:nth-child(3),
.hz-cs-doc[data-step="1"]>.hz-cs-doc__layer:nth-child(4){opacity:1;visibility:visible;transition:opacity .35s var(--hz-ease),visibility 0s}
.hz-cs-doc .hz-zoomrep{box-shadow:0 24px 60px -20px rgba(0,0,0,.6)}
/* окно выбора региона Авито (.avm — только его типографика) */
.hz-cs-doc__layer>.hz-avreg{max-width:420px;box-shadow:0 24px 60px -20px rgba(0,0,0,.5)}
.hz-avreg{padding:20px 0}
.hz-avreg__h{margin:0;padding:0 20px;font-size:21px;line-height:1.25;font-weight:700}
.hz-avreg .avm-search{padding:14px 20px 8px}
.hz-avreg__list{margin:0;padding:0;list-style:none}
.hz-avreg__list li{position:relative;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;font-size:15px;line-height:1.3;color:var(--avm-ink)}
.hz-avreg__list li span{color:var(--avm-muted)}
.hz-avreg__list li.is-cur::after{content:"";margin-left:auto;width:20px;height:20px;flex:0 0 auto;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300AAFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center/20px}
.hz-avreg__list li.is-on{font-weight:700;background:var(--avm-grey)}
.hz-avreg__list li.is-on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 2px 2px 0;background:var(--avm-ink)}
.hz-avreg__foot{padding:14px 20px 0}
.hz-avreg__foot .avm-btn{width:100%}

/* Кейс 2: правая часть страницы продавца; состояние карточек — по шагу доски.
   Приглушение повторяет .avm-card_off из hz-avito.css: движок сценки меняет только data-step, классы карточкам не ставит.
   Статусная строка (дата / «Снято с публикации» / пометка) — три строки в одной ячейке, высота карточки не прыгает. */
.hz-cs-cat__shop{padding:20px 20px 0;box-shadow:0 1px 2px rgba(0,0,0,.10),0 24px 48px -32px rgba(0,0,0,.35)}
.hz-cs-cat .avm-card{display:grid;grid-template-columns:minmax(0,1fr);align-content:start}
.hz-cs-cat .avm-card__meta,.hz-cs-cat .avm-card__off,.hz-cs-cat .avm-card__mark{grid-row:4;grid-column:1;transition:opacity .35s var(--hz-ease)}
.hz-cs-cat .avm-card__off,.hz-cs-cat .avm-card__mark{opacity:0;visibility:hidden}
.hz-cs-cat .avm-card__pic{transition:opacity .35s var(--hz-ease),filter .35s var(--hz-ease)}
.hz-cs-cat:not([data-step="0"]) .is-out .avm-card__meta,
.hz-cs-cat[data-step="2"] .avm-card:not(.is-out) .avm-card__meta{opacity:0;visibility:hidden}
.hz-cs-cat:not([data-step="0"]) .is-out .avm-card__off,
.hz-cs-cat[data-step="2"] .avm-card:not(.is-out) .avm-card__mark{opacity:1;visibility:visible}
.hz-cs-cat:not([data-step="0"]) .is-out .avm-card__pic{opacity:.5;filter:grayscale(.65)}
.hz-cs-cat:not([data-step="0"]) .is-out .avm-card__title span,
.hz-cs-cat:not([data-step="0"]) .is-out .avm-card__geo{color:var(--avm-muted)}
.hz-cs-cat:not([data-step="0"]) .is-out .avm-fav{opacity:.4}

/* Кейс 3: отчёт по филиалам; числа только в итоговой строке, по городам — словами */
.hz-zoomrep__tbl_3 thead th{padding:4px 0 8px;border-top:0;font-size:12px;line-height:1.3;font-weight:500;color:var(--hz-on-panel-2);text-align:left}
.hz-zoomrep__tbl_3 th:nth-child(n+2),.hz-zoomrep__tbl_3 td{width:28%}
.hz-zoomrep__tbl_3 td{text-align:left;font:500 14px/1.3 var(--hz-text);white-space:nowrap}
.hz-cs-fil tbody th,.hz-cs-fil tbody td{transition:color .35s var(--hz-ease)}
.hz-cs-fil .is-pilot th,.hz-cs-fil .is-pilot td{color:var(--hz-on-panel)}
.hz-cs-fil .is-new th,.hz-cs-fil .is-new td{color:rgba(244,244,241,.4)}
.hz-cs-fil[data-step="3"] .is-new th,.hz-cs-fil[data-step="3"] .is-new td{color:var(--hz-on-panel)}
.hz-cs-fil .v1,.hz-cs-fil[data-step="3"] .v0{display:none}
.hz-cs-fil[data-step="3"] .v1{display:inline}
.hz-zoomrep__note,.hz-zoomrep__cut,.hz-zoomrep__sum{margin:12px 0 0;font-size:14px;line-height:1.45;color:var(--hz-on-panel-2);
  transition:opacity .35s var(--hz-ease),visibility .35s}
.hz-zoomrep__cut{color:var(--hz-on-panel)}
.hz-zoomrep__flag{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:3px;background:var(--hz-signal);color:var(--hz-ink);
  font-size:12px;line-height:1.35;font-weight:700;vertical-align:1px}
.hz-zoomrep__sum{padding-top:12px;border-top:1px solid var(--hz-line-panel);font-size:15px;color:var(--hz-on-panel)}
.hz-zoomrep__sum b{font:700 16px/1.2 var(--hz-mono);font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap}
.hz-cs-fil[data-step="0"] .hz-zoomrep__note,
.hz-cs-fil[data-step="0"] .hz-zoomrep__cut,.hz-cs-fil[data-step="1"] .hz-zoomrep__cut,
.hz-cs-fil:not([data-step="3"]) .hz-zoomrep__sum{opacity:0;visibility:hidden}

/* ===== Полоса про Aveasy Zoom ===== */
.hz-zoom .hz-lead{margin-top:16px}
.hz-zoom .hz-zoom__card{display:block;max-width:560px;margin:20px 0 0;padding:20px 60px 20px 22px;background:var(--hz-paper);
  border:1px solid var(--hz-line);border-radius:var(--hz-radius)}
.hz-zoom .hz-zoom__card::after{top:50%;bottom:auto;right:22px;transform:translateY(-50%)}
.hz-zoom .hz-zoom__card:hover::after{transform:translate(4px,-50%)}
.hz-zoom__ct{display:block;font-family:var(--hz-display);font-weight:750;font-size:26px;line-height:1.05;color:var(--hz-ink)}
.hz-zoom__cs{display:block;margin-top:6px;font-size:15px;line-height:1.4;color:var(--hz-ink-3)}
.hz-zoom__act{margin:20px 0 0}

@media (max-width:900px){
  .kc-filter{grid-template-columns:minmax(0,1fr)}
  .kc-filter__row{grid-template-columns:minmax(0,1fr)}
  .kc-filter__count{grid-column:1;grid-row:auto}
  .hz-case2__top{grid-template-columns:minmax(0,1fr)}
  .hz-case2_mirror .hz-case2__vis{order:0}
  .hz-case2__panel{position:static}
  .hz-case2_mirror .hz-case2__body{grid-template-columns:minmax(0,1fr)}
  .hz-case2__body{grid-template-columns:minmax(0,1fr)}
  .hz-case2_mirror .hz-case2__panel{order:0}
  .hz-case2__body{margin-top:clamp(28px,7vw,40px)}
  .hz-case2__vis{max-width:560px}
  .hz-case2_tall .hz-case2__top{grid-template-columns:minmax(0,1fr)}
  .hz-case2_tall .hz-case2__intro{position:static}
  /* страница кейса: на телефоне и планшете сначала h1 и суть, потом макет Авито */
  .hz-case2_page .hz-case2__intro{order:-1}
  /* планшет: макет страницы продавца шире, левая колонка 240px — «Показать номер» не обрезается (было и до 24.09) */
  .hz-case2_page .hz-case2__vis{max-width:720px}
}
@media (min-width:601px) and (max-width:900px){
  .hz-kavm.avm-page_narrow,.hz-cs-page.avm-page_narrow{grid-template-columns:240px minmax(0,1fr)}
}
@media (max-width:600px){
  .hz-seg.hz-cs__seg{display:flex;justify-self:stretch}
  .hz-cs__seg .hz-seg__btn{flex:1 1 auto;text-align:center}
  /* в сценке кейса 1 строка «Владивосток, Рязань» — суть шага «Филиал»: на телефоне не прячем (hz-avito.css её скрывает) */
  .hz-cs-page .avm-side__line_muted{display:block}
  .hz-zoomrep{padding:12px 14px 14px}
  .hz-zoomrep__tbl_3 td{padding-left:8px;font-size:13px}
  .hz-zoomrep__tbl_3 thead th:nth-child(n+2){padding-left:8px}
  .hz-zoomrep__tbl_3 tbody th{font-size:13px;padding-right:0}
  .hz-cs-cat__shop{padding:16px 16px 0}
  /* на телефоне профиль «Метрикс» — 2×2 (6 карточек дали бы экран с лишним), чипы «Информации» — одной строкой, как у Авито */
  .hz-kavm .avm-grid .avm-card:nth-child(n+5){display:none}
  /* отчёт GlobalDrive: фиксированные колонки — смена «—» на «подключён» не меняет переносы и высоту */
  .hz-zoomrep__tbl_3{table-layout:fixed}
  .hz-zoomrep__tbl_3 th:nth-child(2),.hz-zoomrep__tbl_3 td:nth-child(2){width:29%}
  .hz-zoomrep__tbl_3 th:nth-child(3),.hz-zoomrep__tbl_3 td:nth-child(3){width:30%}
  .hz-zoomrep__tbl_3 thead th{font-size:11px}
  .hz-sum__step{padding:20px 18px}
  .hz-sum__step+.hz-sum__step::before{left:18px}
}
/* A2-05: на ≤359 плашка отчёта Aveasy Zoom в сценке 1 уже макета — цифры вылезали за край */
@media (max-width:359px){
  .hz-cs-doc__layer{padding:10px}
  .hz-cs-doc .hz-zoomrep{padding:10px 12px}
  .hz-cs-doc .hz-zoomrep__tbl td{font-size:15px}
  .hz-cs-doc .hz-zoomrep__tbl tbody th{padding-right:8px}
}
@media (prefers-reduced-motion:reduce){
  .kc-card__title,.hz-cs-doc__layer,.hz-cs-doc__veil,.hz-cs-cat .avm-card__meta,.hz-cs-cat .avm-card__off,.hz-cs-cat .avm-card__mark,.hz-cs-cat .avm-card__pic,
  .hz-cs-fil tbody th,.hz-cs-fil tbody td,.hz-zoomrep__note,.hz-zoomrep__cut,.hz-zoomrep__sum{transition:none}
  .kc-in{animation:none}
}

/* A2: peach catalogue, white cards, teal results; no changes inside Avito. */
.kc-ph,.kc-list{background:var(--hz-signal-soft)}
.kc-filter .hz-seg{background:var(--hz-white)}
.kc-card.hz-linkcard{border-top:3px solid var(--hz-signal)}
.kc-card__val{color:var(--hz-teal);font-weight:850;font-size:clamp(56px,5vw,74px)}
.kc-card__facts dd{color:var(--hz-signal-deep)}
.hz-case2_page{background:var(--hz-white)}
.hz-case2__panel.hz-panelcard{box-shadow:inset 0 3px 0 var(--hz-teal),var(--hz-shadow)}
.hz-case2__text h2{border-left:4px solid var(--hz-signal);padding-left:12px}
.hz-zoom{background:var(--hz-teal-soft)}
.kc-more{background:var(--hz-signal-soft)}