/* onas.css — стили страницы «О нас» /o-nas/: шапка с профилем магазина (.avm), факты-строка, сцена ролей,
   цитата руководителя, путь компании, цифры кейсов, ссылки на статьи.
   Подключается ТОЛЬКО на o-nas/index.html сразу после @head:end
   (каскад site.css → mobile.css → hz.css → onas.css → hz-ui.css → hz-avito.css).
   Спецификация: docs/site-relaunch/redesign-2026-09/INNER-BUILD.md §3; полировка 24.09 —
   docs/site-relaunch/polish-2026-09/DECISIONS.md §3. Примитивы (.hz-ph, .hz-rows, .hz-lead, формы .hz-form__*)
   живут в hz.css, интерактив (.hz-seg, .hz-autoplay, .hz-linkcard) — в hz-ui.css, макет Авито (.avm-*) —
   в hz-avito.css. Варианты общих компонентов здесь — только через свои классы .hz-ab-*
   (специфичность выше, т. к. hz-ui.css и hz-avito.css подключены позже). */

/* #lead: отступ якоря — общий (hz.css scroll-padding + посадка заголовка в header.html, M2 24.09.2026) */

/* Warm introduction, cool timeline and lifted results retain the existing grid. */
.hz-ph{background:linear-gradient(115deg,var(--hz-signal-soft),var(--hz-paper) 70%)}
.hz-ph .hz-facts b{color:var(--hz-signal-deep)}
.hz-way{background:var(--hz-teal-soft)}
.hz-way .hz-way__t{color:var(--hz-teal)}

/* ===== Шапка: лид слева, профиль магазина справа (на телефоне — после лида) ===== */
.hz-ab-top{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:32px clamp(32px,4vw,64px);align-items:center}
.hz-ab-top__shop{min-width:0}
.hz-ab-shop.avm{border:1px solid var(--hz-line);box-shadow:0 12px 32px rgba(18,20,22,.08)}
.hz-ab-shop .avm-head__ava svg{width:22px;height:22px}
/* категории магазина — серые чипы, как фильтры на странице продавца */
.hz-ab-cats{display:flex;gap:6px;margin:0;padding:0 16px 10px;list-style:none;overflow:hidden;white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.hz-ab-cats li{flex:0 0 auto;padding:7px 12px;border-radius:10px;background:var(--avm-grey);font-size:13px;line-height:1.2;color:var(--avm-ink)}
.hz-ab-cats li.is-on{background:var(--avm-black);color:#fff}
.hz-ab-shop .hz-ab-shop__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 12px;padding:6px 16px 16px}
.hz-ab-shop .avm-card__title{margin-top:8px}
.hz-ab-shop .avm-card__title>span{font-size:13px;min-height:2.6em}
.hz-ab-shop .avm-card__meta{font-size:13px;margin-top:2px}

/* ===== Факты-строка под лидом (как в hero главной, но на бумаге) ===== */
.hz-facts{display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:clamp(32px,4vw,52px) 0 0;padding-top:20px;
  border-top:1px solid var(--hz-line)}
.hz-facts li{flex:1 1 0;min-width:150px;padding:0 24px 0 0;margin-right:24px;border-right:1px solid var(--hz-line);
  font-size:14px;line-height:1.35;color:var(--hz-ink-3)}
.hz-facts li:last-child{border-right:0;margin-right:0;padding-right:0}
.hz-facts b{display:block;margin-bottom:6px;font-family:var(--hz-display);font-weight:800;font-size:36px;
  line-height:1;letter-spacing:-.015em;color:var(--hz-ink);font-variant-numeric:tabular-nums}

/* ===== Кто работает в вашем кабинете: сцена одного магазина ===== */
.hz-roles__lead{margin:16px 0 0}
.hz-ab-scene{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px clamp(32px,4vw,64px);
  align-items:start;margin:clamp(32px,4vw,48px) 0 0}
.hz-ab-scene__side{min-width:0}
.hz-ab-seg.hz-seg[hidden],.hz-ab-ap.hz-autoplay[hidden]{display:none}
.hz-ab-seg.hz-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.hz-ab-seg .hz-seg__btn{font-size:14px;text-align:center}
.hz-ab-ap{margin:14px 0 0}
.hz-roles__list{margin:24px 0 0}
.hz-roles__row{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.hz-roles__row[hidden]{display:none}
.hz-roles__n{margin:0;font-family:var(--hz-display);font-weight:750;font-size:clamp(26px,2.4vw,32px);
  line-height:1;letter-spacing:-.005em;color:var(--hz-ink)}
.hz-roles__d{margin:0;font-size:17px;line-height:1.55;color:var(--hz-ink-2);max-width:32em}
/* в режиме сцены подпись одна — без разделителей списка */
.is-scene .hz-roles__list>*{border-top:0;border-bottom:0;padding:0}

/* макет: страница продавца целиком (.avm-page_narrow из hz-avito.css) + строка отчёта под ним.
   onas.css подключён ДО hz-avito.css — переопределения только с префиксом .hz-ab-mock (специфичность выше). */
.hz-ab-scene__stage{min-width:0}
.hz-ab-mock.avm{border:1px solid var(--hz-line)}
.hz-ab-mock .avm-side__ava svg{width:40px;height:40px}
/* зазор под кольцом подсветки имени (зона cover), чтобы оно не наезжало на строку «Компания» */
.hz-ab-mock .avm-side__name{margin-bottom:8px}
/* «Показать номер» упиралась текстом в края зелёной кнопки (в колонке 220px её доля — ≈120px при тексте ≈119px):
   как на /keysy/ (keysy.css .hz-kavm) — левая колонка 240px и поля кнопок 8px. На ≤900 кнопки и так
   стоят столбиком (hz-avito.css), на ≤600 — в ряд на всю ширину. 25.09.2026 */
@media (min-width:901px){.hz-ab-mock.avm-page_narrow{grid-template-columns:240px minmax(0,1fr)}}
.hz-ab-mock .avm-side__btns .avm-btn{padding:0 8px}
/* страница продавца заметно выше подписи роли — на десктопе подпись едет рядом с макетом (шапка 76px) */
@media (min-width:1181px){.hz-ab-scene__side{position:sticky;top:100px}}
/* уже ~1180 колонка макета становится уже 600px и страница продавца мнётся (вкладки режутся, поиск в две строки):
   сцену ставим в одну колонку, макет — не шире 720px, как узкий вариант на стенде */
@media (max-width:1180px){
  .hz-ab-scene{grid-template-columns:minmax(0,1fr)}
  .hz-ab-scene__stage{max-width:720px}
}

/* зона «text» — обёртка заголовка и города первой карточки: без лишнего отступа внутри подсветки */
.hz-ab-mock .avm-card__title{margin-top:10px}
.hz-ab-mock .avm-main .avm-grid{padding-bottom:16px}
.hz-ab-bid{margin:0;display:inline-block;padding:4px 10px;border-radius:8px;background:var(--avm-grey);
  font-size:13px;line-height:1.3;color:var(--avm-ink)}
.hz-ab-report{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin:12px 0 0;padding:14px 16px;
  background:var(--hz-white);border:1px solid var(--hz-line);border-radius:var(--hz-radius);
  font-size:15px;line-height:1.4;color:var(--hz-ink-2)}
.hz-ab-report b{font-weight:600;color:var(--hz-ink)}
/* Выбранная роль выделена обводкой; текст остальных зон остаётся контрастным. */
.hz-ab-z{border-radius:8px;transition:opacity .25s var(--hz-ease),box-shadow .25s var(--hz-ease)}
.is-scene .hz-ab-z{opacity:1}
/* кольцо — outline с отступом, а не двойная тень: у тени белый слой не закрывал тёмный в скруглённых углах (серая дуга) */
.is-scene .hz-ab-z.is-lit{opacity:1;outline:2px solid var(--hz-ink);outline-offset:6px}
.is-scene .avm-card__pic.hz-ab-z{border-radius:var(--avm-r)}
.is-scene .avm-side__ava.hz-ab-z{border-radius:50%}
.is-scene .hz-ab-report.hz-ab-z.is-lit{border-color:var(--hz-ink);box-shadow:0 0 0 1px var(--hz-ink);outline:0}
/* «Продвинуто» (текстовая зона promo): кольцо по ширине слова, а не всей карточки, и с меньшим отступом —
   раньше при offset 6px оно задевало хвосты букв строки города выше и выходило за колонку карточки.
   Строке — чуть больше воздуха сверху во всех карточках, чтобы ряд оставался ровным. 25.09.2026 */
.hz-ab-mock .avm-card__meta{margin-top:8px}
.hz-ab-mock .avm-card__meta.hz-ab-z{width:fit-content;border-radius:4px}
.is-scene :is(.avm-card__meta,.hz-ab-bid).hz-ab-z.is-lit{outline-offset:3px}

/* ===== Цитата руководителя: компактный blockquote под сценой ===== */
.hz-ab-quote{margin:clamp(40px,5vw,64px) 0 0;padding:4px 0 4px clamp(20px,2vw,28px);border-left:3px solid var(--hz-signal);max-width:46em}
.hz-ab-quote p{margin:0;font-family:var(--hz-display);font-weight:750;font-size:clamp(24px,2.4vw,32px);
  line-height:1.08;letter-spacing:-.005em;color:var(--hz-ink);text-wrap:balance}
.hz-ab-quote__by{display:flex;flex-wrap:wrap;gap:2px 12px;align-items:baseline;margin:14px 0 0}
.hz-ab-quote__by b{font-weight:600;font-size:16px;line-height:1.4;color:var(--hz-ink)}
.hz-ab-quote__by span{font-size:15px;line-height:1.4;color:var(--hz-ink-3)}

/* ===== Как мы к этому пришли: ось с точками на бумаге (компактно) ===== */
.hz-way.hz-sec{padding:clamp(56px,5vw,80px) 0}
.hz-way__h2{margin-bottom:clamp(24px,3vw,40px)}
.hz-way__steps{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.hz-way__step{position:relative;display:flex;flex-direction:column;
  padding:20px clamp(20px,2.4vw,40px) 0 0;border-top:1px solid var(--hz-line)}
.hz-way__step::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;
  background:var(--hz-signal)}
.hz-way__t{margin:0 0 8px;font-family:var(--hz-display);font-weight:750;font-size:clamp(22px,2vw,28px);
  line-height:1.05;letter-spacing:-.005em;color:var(--hz-ink)}
.hz-way__g{margin:0;font-size:16px;line-height:1.5;color:var(--hz-ink-2)}

/* ===== Цифры из кейсов: строка целиком — карточка-ссылка ===== */
.hz-nums__lead{margin:16px 0 0}
.hz-nums__list{margin:clamp(28px,3vw,44px) 0 0}
.hz-nums__list.hz-rows>*{padding:0;border:0}
.hz-nums__list>li+li{margin-top:10px}
.hz-nums__row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(20px,2.4vw,32px);row-gap:10px;align-items:baseline;text-decoration:none;color:inherit}
.hz-nums__row.hz-linkcard{display:grid;padding:20px 56px 20px 20px;border:1px solid var(--hz-line);border-radius:var(--hz-radius);background:var(--hz-signal-soft);box-shadow:var(--hz-shadow)}
.hz-nums__row.hz-linkcard:hover{box-shadow:var(--hz-shadow-hover);border-color:var(--hz-signal-deep)}
.hz-nums__row.hz-linkcard::after{top:50%;bottom:auto;margin-top:-10px}
.hz-nums__row.hz-linkcard:hover::after{transform:translateX(4px)}
.hz-nums__name{grid-column:span 3}
.hz-nums__nm{display:inline-block;font-family:var(--hz-display);font-weight:750;font-size:28px;line-height:1;
  letter-spacing:-.005em}
.hz-nums__niche{grid-column:span 4;font-size:15px;line-height:1.4;color:var(--hz-ink-3)}
.hz-nums__num{grid-column:span 3;display:flex;align-items:baseline;gap:12px}
.hz-nums__val{font-size:clamp(40px,4vw,56px);color:var(--hz-signal-deep);white-space:nowrap}
.hz-nums__cap{font-size:14px;line-height:1.3;color:var(--hz-ink-3)}
.hz-nums__second{grid-column:span 2;font-size:15px;line-height:1.4;color:var(--hz-ink-2);
  font-variant-numeric:tabular-nums}
.hz-nums__act{margin:clamp(24px,2.6vw,36px) 0 0}

/* ===== Материалы блога: три строки-ссылки с названием и стрелкой ===== */
.hz-ab-reads__h{margin:0;font-size:15px;line-height:1.4;font-weight:600;color:var(--hz-ink-3)}
.hz-ab-reads__list{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--hz-line)}
.hz-ab-reads__list li{border-bottom:1px solid var(--hz-line)}
.hz-ab-read.hz-linkcard{padding:16px 48px 16px 0;font-size:18px;line-height:1.35;font-weight:600;color:var(--hz-ink)}
.hz-ab-read.hz-linkcard::after{top:50%;bottom:auto;right:8px;margin-top:-10px}
.hz-ab-read.hz-linkcard:hover{transform:none;box-shadow:none;color:var(--hz-signal-deep)}

/* ===== «Как это будет» в левой колонке формы ===== */
.hz-how{list-style:none;margin:clamp(28px,3vw,44px) 0 0;padding:0;max-width:34em;
  border-top:1px solid var(--hz-line-panel)}
.hz-how li{padding:12px 0;border-bottom:1px solid var(--hz-line-panel);font-size:16px;line-height:1.45;
  color:var(--hz-on-panel-2)}
/* контакты идут следом — их собственная верхняя линия удвоила бы разделитель */
.hz-how+.hz-form__contacts{border-top:0}

@media (max-width:900px){
  .hz-ab-top{grid-template-columns:minmax(0,1fr)}
  .hz-ab-scene{grid-template-columns:minmax(0,1fr)}
  .hz-facts li{flex:1 1 40%;margin:0 0 16px;padding:0 12px 0 0;border-right:0}
  .hz-facts b{font-size:30px}
  .hz-roles__d{font-size:16px}
  .hz-way__steps{grid-template-columns:minmax(0,1fr)}
  .hz-way__step{padding:0 0 22px 22px;border-top:0;border-left:1px solid var(--hz-line)}
  .hz-way__step::before{left:-4px;top:7px}
  .hz-way__step:last-child{border-left-color:transparent;padding-bottom:0}
  .hz-nums__row{grid-template-columns:minmax(0,1fr);row-gap:8px}
  .hz-nums__name,.hz-nums__niche,.hz-nums__num,.hz-nums__second{grid-column:1}
  .hz-nums__val{font-size:clamp(40px,11vw,52px)}
  .hz-nums__row.hz-linkcard::after{top:auto;bottom:18px;margin-top:0}
}
@media (max-width:600px){
  .hz-ab-shop .hz-ab-shop__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 10px}
  .is-scene .hz-ab-z.is-lit{outline-offset:4px}
  .hz-ab-seg .hz-seg__btn{padding:9px 8px}
  .hz-ab-ap .hz-autoplay__bar{max-width:120px}
  .hz-ab-read.hz-linkcard{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .hz-ab-z{transition:none}
  .hz-nums__row.hz-linkcard:hover::after{transform:none}
}

/* A2: the introduction and the timeline now read as distinct colour fields. */
.hz-ph{background:var(--hz-signal-soft)}
.hz-facts b{color:var(--hz-signal-deep);font-size:clamp(36px,3.6vw,52px);font-weight:850}
.hz-way{background:var(--hz-teal-soft)}
.hz-way__t{color:var(--hz-teal)}
.hz-way__step::before{width:11px;height:11px;box-shadow:0 0 0 5px var(--hz-white)}
.hz-nums__row.hz-linkcard{background:var(--hz-white);border-top:3px solid var(--hz-signal)}
.hz-nums__val{color:var(--hz-teal);font-weight:850}
.hz-ab-report{background:var(--hz-teal-soft);border-color:var(--hz-teal)}
.hz-ab-report b{color:var(--hz-teal)}
.hz-ab-reads{background:var(--hz-signal-soft)}