/* v2 рядом с core-human (07.10, страница pages/core-human-v2): только эта страница подключает файл ("css" в
   composition.json), core-human его не видит. Каркас, шкала, цвета, карточки и иллюстрации – css/human.css; здесь
   раскладка новых секций (почему, путь, система, кейсы, ведущие). Кегли и интерлиньяжи – только токены ступеней
   (js/type-roles.js, блок D); свои переменные – --v2-*. Без обводок и линий, как на core-human */

:root {
  /* предметы пути дела: размер, как у «одного дела до конца» на core-human */
  --v2-obj: clamp(96px, 17vw, 250px);
  /* бюст из осколков в «почему не доходит»: высота на десктопе */
  --v2-bust-h: clamp(380px, 36vw, 560px);
  /* предметы «без системы / с системой» */
  --v2-cube-h: clamp(88px, 10vw, 150px);
}

/* стили текста (js/type-roles.js, блок D): одно правило на стиль и ступень, как в human.css. Слово причины, имя
   ступени, заголовки внутри секций – h3 (base.css); подписи столбцов и «учим» – .label; остальное – текст */
/* текст, ступень мелкий: описания ступеней, «учим», примечания, части системы, строка про гостей */
.way__text, .way__learn, .way__note, .sys__what, .sys__note, .leads__guests { font-family: var(--l-font-body); font-stretch: var(--l-stretch-body); font-weight: var(--l-weight-body); letter-spacing: var(--l-tracking-body); font-size: var(--l-text-small); line-height: var(--l-leading-body); }
/* надпись: когда идет ступень */
.way__when { font-family: var(--l-font-mono); font-stretch: var(--l-stretch-mono); font-weight: var(--l-note-weight); font-size: var(--l-note-size); line-height: var(--l-note-leading); letter-spacing: var(--l-note-tracking); }
/* выделение: имя части системы – вес поверх текста */
.sys__name { font-weight: var(--l-weight-strong); }

/* ─────────────── шапка ─────────────── */
/* Вторая строка заголовка v2 («система – на все следующие», 11.42em) шире, чем у core-human (10.36em), и на окнах
   16:10 встает на стеклянный шар в левой руке девушки: шар – левый край спрайта, его верх – на 2.4 % высоты спрайта,
   спрайт – 72.2 % высоты шапки при пропорции 1210×1109 (css/human.css, .opener__scene). Кегль ужимается, пока строка
   не отойдет от края спрайта на --l-s5, но не меньше 0.9 кегля core-human: тогда строка кончается там же, где строка
   core-human. Заголовок стоит от верха шапки (--hm-opener-top), а шар опускается с высотой окна на 0.25 px за px:
   на 1040 px его верх в 4 px под строкой, с 1120 px – в 24 px и больше, там кегль не трогается. На широких окнах
   средний член больше кегля core-human, и правило ничего не меняет. Только раскладка во весь кадр */
@media (width > 900px) and (aspect-ratio >= 4/3) and (height < 1120px) {
  .opener__title {
    --v2-h1-em: 11.5;      /* ширина второй строки в em (замер 07.10: 11.42) */
    --v2-h1-main: min(var(--l-display-size), 100cqi / var(--hm-h1-fit));   /* кегль core-human */
    font-size: clamp(var(--v2-h1-main) * 0.9,
      ((100vw + 100cqi) / 2 - var(--l-gutter) - var(--hm-opener-h) * 1svh * 0.722 * 1210 / 1109 - var(--l-s5)) / var(--v2-h1-em),
      var(--v2-h1-main));
  }
}
/* до 900 px: «одно дело до конца.» (7.73em) одной строкой – заголовок в три строки, а не в пять. 12ch core-human
   (--hm-h1-max) подобран под его заголовок; на 320 px строка ужимается шириной колонки */
@media (width <= 900px) { .opener__title { max-width: 8em; } }

/* ─────────────── точки фона через одну ─────────────── */
/* Синк 07.10: секции одного тона сливались (Аня), точки – через одну (Кирилл). С точками шапка, путь, «кому подходит»,
   «что собрали», цена, вопросы и финал; без них – «почему», система, каталог (бумага целиком), ведущие, «не обещаем».
   Слой – тот же .dots, что у шапки и пути: прибит к окну, ручки «точки фона» общие, волна у курсора – [data-dots-wave]
   в js/landing.js. Секции включаются в content.json страницы (dots), core-human без ключа слоя не получает.
   z-index −1: секция – контекст наложения (human.css, «сквозное поле»), слой ложится над ее заливкой и под всем
   содержимым, поэтому .wrap и фигуры поднимать не нужно; сплошные плашки точки закрывают */
.secdots { position: absolute; inset: 0; z-index: -1; }
/* разделы сплошные: поле шапки (.opener__field) гаснет только во весь кадр (human.css, .opener--covered); уже 900 px
   и на окнах уже 4:3 оно стоит под всей страницей и сквозило бы в прозрачные и утопленные разделы – чередования не было
   бы, а в утопленных с точками сетка шла бы дважды. Тон – --hm-under, тот же, что виден во весь кадр */
body:has(#hero.opener) .section { background: var(--hm-under); }

/* ─────────────── почему свое не доходит до людей ─────────────── */
/* Строка – карточка: слово, «как бывает» тише, «что делаем» с зелёной меткой. Столбцы подписаны сверху, на телефоне
   подписи стоят в каждой карточке. Бюст справа внизу, низ срезан краем секции */
.why { overflow: clip; }
.why > .wrap { position: relative; z-index: 1; }
.why__grid { display: grid; gap: var(--l-s2); }
.why__cols, .why__row { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) minmax(0, 1.2fr); column-gap: var(--l-s5); }
.why__cols { padding-inline: var(--l-s5); color: var(--l-ink-mute); }
.why__cols .why__col--pain { grid-column: 2; }
.why__cols .why__col--fix { grid-column: 3; }
.why__list { display: grid; gap: var(--l-s2); }
.why__row { align-items: baseline; padding: var(--l-s4) var(--l-s5); border-radius: var(--l-radius-m); background: var(--hm-plate, var(--hm-tint)); }
.why__word { margin: 0; }
.why__pain { color: var(--l-ink-mute); }
.why__fix { position: relative; padding-left: var(--l-s4); color: var(--l-ink); }
.why__fix::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--l-ok); }
/* подписи «как бывает / что делаем» в карточке: на телефоне видны, шире – только для экранного диктора (подписи
   столбцов сверху у него скрыты), как .vh в base.css */
.why__tag { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.why__art { display: none; margin: 0; }
@media (min-width: 1024px) {
  .why__grid { max-width: calc(100% - var(--v2-bust-h) * 0.633 - var(--l-s5)); }   /* бюст 405×640, шириной 0.633 высоты: строки не заходят под осколки */
  .why__art {
    display: block; position: absolute; z-index: 0; pointer-events: none;
    right: max(var(--l-gutter), (100vw - var(--l-max)) / 2 - var(--l-s6)); bottom: calc(var(--v2-bust-h) * -0.06);
  }
  .why__bust { display: block; height: var(--v2-bust-h); width: auto; max-width: none; will-change: translate; }
}
@media (max-width: 700px) {
  .why__cols { display: none; }
  .why__row { grid-template-columns: minmax(0, 1fr); row-gap: var(--l-s3); padding: var(--l-s4); }
  .why__tag { position: static; display: block; width: auto; height: auto; margin: 0 0 var(--l-s1); overflow: visible; clip-path: none; white-space: normal; color: var(--l-ink-mute); }
  .why__fix { padding-left: 0; }
  .why__fix::before { content: none; }
  .why__fix .why__tag { color: var(--l-accent-text); }
}

/* ─────────────── от идеи до людей за три недели ─────────────── */
/* Пять ступеней – предметы «одного дела до конца» с core-human, тексты видны сразу. Сетка точек во всю секцию,
   с волной у курсора (js/landing.js, [data-pull-sky]). Ниже условие «доведено» и неделя – ритм дней и ряд людей */
.way__sky { position: absolute; inset: 0; z-index: 0; }
.way > .wrap { position: relative; z-index: 1; }
.way__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--l-s5) var(--l-s5); }
.way__step { display: grid; align-content: start; gap: var(--l-s3); min-width: 0; }
.way__obj {
  display: block; width: min(var(--v2-obj), 100%); height: auto; will-change: translate;
  margin: calc(min(var(--v2-obj), 100%) * -0.08) 0 calc(min(var(--v2-obj), 100%) * -0.06) calc(min(var(--v2-obj), 100%) * -0.145);
}
.way__body { display: grid; gap: var(--l-s2); align-content: start; }
.way__when { color: var(--l-ink-mute); }
.way__step:nth-child(n + 2):nth-child(-n + 4) .way__when { color: var(--l-accent-text); }   /* три недели лабы – зелёным */
.way__name { margin: 0; }
.way__step:last-child .way__name { color: var(--l-accent-text); }
.way__text { color: var(--l-ink-2); text-wrap: pretty; }
.way__learn { margin-top: var(--l-s2); color: var(--l-ink-mute); text-wrap: pretty; }
.way__cap { display: block; margin-bottom: var(--l-s1); color: var(--l-accent-2-text); }

.way__done, .way__week { margin-top: var(--l-s8); }
.way__head { margin: 0 0 var(--l-s4); }
.way__kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--l-s3); }
.way__kind { display: grid; align-content: start; gap: var(--l-s3); padding: var(--l-s5); border-radius: var(--l-radius-m); background: var(--hm-plate, var(--hm-tint)); }
.way__kind-name { color: var(--l-accent-text); }
.way__note { margin-top: var(--l-s4); max-width: var(--l-measure); color: var(--l-ink-mute); }
.way__intro { max-width: var(--l-measure); margin-bottom: var(--l-s5); color: var(--l-ink-2); }
.way__week .rhythm__d { margin: 0; }

@media (max-width: 1023px) {
  /* ступени списком: предмет слева, текст справа (как «одно дело до конца» на core-human) */
  .way__steps { --v2-obj: 112px; grid-template-columns: minmax(0, 1fr); gap: var(--l-s5); }
  .way__step { grid-template-columns: calc(var(--v2-obj) * 0.72) minmax(0, 1fr); column-gap: var(--l-s4); align-items: start; }
  .way__obj { width: var(--v2-obj); margin: calc(var(--v2-obj) * -0.06) 0 0 calc(var(--v2-obj) * -0.06); }
}
@media (max-width: 620px) { .way__kinds { grid-template-columns: minmax(0, 1fr); } }   /* на планшете три условия – в ряд */

/* ─────────────── система: чтобы агент работал надежно ─────────────── */
/* Один пример – два столбца: слева «без системы» (прозрачный, текст тише), справа «с системой» (карточка тоном,
   зелёные метки). Пары строк стоят на одном уровне: строки – подсетка общей сетки. Над столбцами кубы «откуда
   стартуешь»: пустой каркас и куб с наполнением, тянутся к курсору */
.sys__case { margin-bottom: var(--l-s4); color: var(--l-ink-mute); }
.sys__cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: var(--l-s3); }
.sys__cmp::before, .sys__cmp::after { content: ""; grid-row: 1 / 3; border-radius: var(--l-radius-l); }
.sys__cmp::before { grid-column: 1; background: color-mix(in srgb, var(--l-bg-sunk) 70%, var(--hm-under, transparent)); }
.sys__cmp::after { grid-column: 2; background: var(--hm-plate, var(--hm-tint)); }
.sys__side { position: relative; z-index: 1; grid-row: 1; display: grid; justify-items: start; gap: var(--l-s3); padding: var(--l-s5) var(--l-s5) var(--l-s4); }
.sys__side--no { grid-column: 1; }
.sys__side--yes { grid-column: 2; }
.sys__obj { display: block; height: var(--v2-cube-h); width: auto; will-change: translate; }
.sys__head { margin: 0; }
.sys__side--no .sys__head { color: var(--l-ink-2); }
.sys__side--yes .sys__head { color: var(--l-accent-text); }
.sys__rows { position: relative; z-index: 1; grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: subgrid; padding-bottom: var(--l-s4); }
.sys__row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
.sys__no, .sys__yes { position: relative; padding: var(--l-s2) var(--l-s5) var(--l-s2) calc(var(--l-s5) + var(--l-s4)); text-wrap: pretty; }
.sys__no { color: var(--l-ink-mute); }
.sys__yes { color: var(--l-ink); }
.sys__no::before, .sys__yes::before { content: ""; position: absolute; left: var(--l-s5); top: calc(var(--l-s2) + 0.55em); width: 8px; height: 8px; border-radius: 50%; }
.sys__no::before { background: var(--l-accent-2); }
.sys__yes::before { background: var(--l-ok); }

.sys__parts-head { margin: var(--l-s8) 0 var(--l-s4); }
.sys__parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--l-s3); }
.sys__part { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--l-s3); row-gap: var(--l-s1); align-items: start; padding: var(--l-s4); border-radius: var(--l-radius-m); background: var(--hm-plate, var(--hm-tint)); }
.sys__ico { grid-row: 1 / 3; width: 48px; height: 48px; object-fit: contain; }
.sys__name { color: var(--l-ink); }
.sys__what { color: var(--l-ink-2); }
.sys__note { margin-top: var(--l-s4); max-width: var(--l-measure); color: var(--l-ink-mute); }
#promise .last { margin-top: var(--l-s6); }
@media (max-width: 1023px) { .sys__parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  /* телефон: в столбцах по 150 px строка рвалась на четыре. Сверху легенда – два куба с подписями, ниже пары
     карточками: строка «без системы» над строкой «с системой», метки того же цвета, что в легенде */
  .sys__cmp { row-gap: var(--l-s2); }
  .sys__cmp::before, .sys__cmp::after { grid-row: 1; }
  .sys__side { padding: var(--l-s4) var(--l-s3) var(--l-s3); }
  .sys__rows { grid-template-columns: minmax(0, 1fr); gap: var(--l-s2); padding-bottom: 0; }
  .sys__row { grid-template-columns: minmax(0, 1fr); padding-block: var(--l-s2); border-radius: var(--l-radius-m); background: var(--hm-plate, var(--hm-tint)); }
  .sys__no, .sys__yes { padding: var(--l-s1) var(--l-s3) var(--l-s1) calc(var(--l-s3) + var(--l-s4)); }
  .sys__no::before, .sys__yes::before { left: var(--l-s3); top: calc(var(--l-s1) + 0.55em); }
  .sys__parts { grid-template-columns: minmax(0, 1fr); }
}

/* ─────────────── что собрали участники прошлых лаб ─────────────── */
/* Карточки и сетка – .wall core-human. Сверху дело, под ним отрывок поста, автор и ссылка – внизу карточки */
.cases__item { gap: var(--l-s3); }
.cases__what { margin: 0; text-wrap: balance; }
.cases__quote p { color: var(--l-ink-2); }
.cases__who { margin: auto 0 0; padding-top: var(--l-s3); }
.cases__item > .wall__link { margin-top: 0; padding-top: 0; }

/* ─────────────── кто ведет ─────────────── */
/* .duo, .person, .mk – css/human.css. У саши два дела, сетка на две строки вместо шести. Порог – 700 px, как у .mk:
   до него сетка в шесть столбцов, и области в один столбец сжали бы карточки до шестой части ширины */
.leads__sasha { grid-template-areas: "s1 s1 s1 s1 s1 s1" "s2 s2 s2 s2 s2 s2"; }
@media (max-width: 700px) { .leads__sasha { grid-template-areas: "s1" "s2"; } }
/* иконка продукта внутри карточки, справа в строке названия, вдвое меньше, чем у core-human (Кирилл, 08.10). Иконка больше
   не стоит между карточками – шаг между колонками тот же, что между строками */
.leads .mk--products { column-gap: var(--l-s2); }
.leads__head { display: flex; align-items: center; justify-content: space-between; gap: var(--l-s3); }
.leads__head .mk__name { min-width: 0; }
.leads .mk__icon { width: 32px; }
#guides .last { margin-top: var(--l-s7); }
.leads__guests { margin-top: var(--l-s3); max-width: var(--l-measure); color: var(--l-ink-2); }