/* human.css — блоки библиотеки v2 (core-human), спека 18.09. Схематичная композиция:
 * раскладка готова, дизайн правит Кирилл. Только var(--l-*), литеральных цветов нет.
 * Слоты интерактивных иллюстраций помечены [data-illo="…"]: сейчас там разметка или
 * тонированная плашка, позже – иллюстрация; раскладка вокруг слота не меняется.
 * Каркас (.topbar, .stickycta, .footer, .faq) и хуки скрипта (.hero, .closing) – из blocks.css.
 * Черновик структуры 20.09 (Кирилл): без карточек и сеток в четыре столбца – ряды во всю ширину,
 * бирка слева, содержимое справа; лаконично, иерархия кеглем и воздухом. Акцент – зелёный.
 *
 * Правило страницы (Кирилл, 19.09.2026): иерархия в основном без обводок – цветом,
 * кеглем, начертанием, заливкой и воздухом. Каркасу из blocks.css линии снимает раздел
 * «без обводок» внизу файла. По правке 05.10 карточки ритма и цены получили точечную
 * линию rgba(255,255,255,.08) на тёмном фоне. Outline фокуса остаётся для доступности. */

:root {
  /* тон поверхности без линии: работает на любом фоне, светлом и тёмном.
     --hm-tint-a – плотность плашки; вторая ступень идёт от неё, пропорция держится */
  --hm-tint-a: 6%;
  --hm-tint: color-mix(in oklab, var(--l-ink) var(--hm-tint-a), transparent);
  --hm-tint-2: color-mix(in oklab, var(--l-ink) calc(var(--hm-tint-a) * 1.8333), transparent); /* 11% при 6% */
  /* ── стили текста core-human – роли в tokens.css, раздел «стили текста»; участники – раздел «стили текста» ниже.
     Здесь только подгонка главной фразы под полосу ── */
  --hm-h1-max: 12ch;
  /* на десктопе кегль заголовка ужимается до ширины полосы;
     --hm-h1-fit – ширина фразы в em (замер: «делать своё агентами» = 12.2; с 29.09 – ширина второй строки заголовка) */
  --hm-h1-fit: 13.8;  /* Кирилл, 20.09 (панель) */
  --hm-final-fit: 8.7;  /* ширина фразы финала в em, Martian Grotesk 65 % весом 240 и трекингом -0.045em (замер 01.10; 57.5 %/360 – 8.43, 65 %/570 – 9.14, 75 %/260 – 9.5, 62.5 %/700 – 9.1, 87.5 %/700 – 11.1). 06.10 при 57.5 %/360 оставлена 8.7, как в панели Кирилла: с 8.43 фраза встаёт вплотную к дворянину; кегль финала – .finale__title */
  /* ширина текстов шапки (лид и «для кого») */
  --hm-text-max: 42ch;      /* Кирилл, 23.09: стекло уже, чтобы меньше закрывать стайку в шапке */
  /* стекло под текстом шапки: размытие точек за текстом, плотность заливки бумагой,
     отступ стекла от текста. Край резкий (Кирилл, 20.09), скругление – --l-radius-l */
  --hm-glass-blur: 12px;   /* Кирилл, 20.09 (панель): 12 / 10 % / 52px */
  --hm-glass-a: 10%;
  --hm-glass-pad-col: 20px;
  --hm-opener-top: 6.5rem; /* Кирилл, 23.09: стекло у верха кадра, не по центру; отступ от шапки страницы. 24.09 вечер: было 5rem, текст чуть ниже */
  --hm-opener-h: 100;      /* высота шапки в svh: меньше – кадр 21:9 обрезается по бокам слабее */
  --hm-obj-pull: 1;        /* предметы шапки и «что можно собрать»: 1 – тянутся к курсору (Кирилл 24.09), −1 – разбегаются, как было; js/landing.js */
  --hm-cover-dim: 0.4;     /* насколько темнеет шапка, когда следующая секция закрыла её почти целиком (24.09) */
  --hm-scene-x: 90%;       /* горизонтальный сдвиг кадра шапки (v4 21:9, 23.09: девушка в правых 30 % кадра целиком, стекло накрывает часть созданий): 100 % – правый край кадра у правого края экрана; на телефоне кадр свой (≤ 700 px, ниже) */
  /* небо hero (Кирилл, 23.09: «фон секции – сложный градиент под вырезку, белого не будет»): цвета сняты
     с плейта hero-composite-v8 (небо сверху #354438 → за волосами #50594e → горизонт #74736a → земля #c29876)
     и осветлены под светлую бумагу; кайма по кудрям у вырезки серо-бирюзовая, поэтому зона головы держит
     цвет неба плейта. Тёмная тема – свои остановки ниже. Ручки – панель, группа «герой › небо» */
  --hm-sky-top: #4f5f56;     /* верх кадра, серо-бирюзовый темнее; белый текст 6:1 */
  --hm-sky-mid: #647368;     /* середина, зона головы и волос; белый текст 4.9:1 */
  --hm-sky-hor: #9a978a;     /* горизонт, светлее и теплее */
  --hm-sky-ground: #cdb99f;  /* земля под платьем, тёплый песок */
  /* точки фона (css .opener__field): статичные точки на пересечениях квадратной сетки, шаг –
     --l-grid-step из tokens.css, слой прибит к окну и лежит под всей страницей. Вместо пластины
     Хладни эстетики 1 (папка для работы над текстами, Кирилл, 22.09). Ручки – группа «точки фона»:
     прозрачность слоя · радиус точки в px · цвет · плотность, радиус точки и затухание у курсора */
  --hm-field-alpha: 0.2;              /* Кирилл, 01.10 (панель): было 0.14; 23.09 – точки на небе шапки слишком яркие, было 0.3 */
  --hm-sunk-a: 0.72;                  /* доля заливки утопленной секции над сквозным полем (22.09) */
  --hm-field-dot: 0.9;                /* Кирилл, 01.10 (панель): было 1.1 */
  --hm-field-color: var(--l-ink);
  /* волна у курсора (.dots, dotWave в js/landing.js): плотность точек в центре круга и радиус точки там же, в px.
     Кирилл, 04.10: эффект чуть заметнее, но фон остаётся фоном – было 0.25 и радиус как у поля */
  --hm-wave-alpha: 0.4;
  --hm-wave-dot: 1.6;
  /* затухание волны и шлейфа, постоянная времени в мс (Кирилл, 04.10: затухание медленнее появления, 150 мс):
     90 % гаснет за ~1 с; круги шлейфа гаснут с 0.6 этой постоянной */
  --hm-wave-fade: 450;
  /* слот иллюстрации: пропорция и минимальная высота на десктопе */
  --hm-illo-ratio: 4 / 3;
  --hm-illo-min: 350px;
  /* бюст из осколков в правом нижнем углу «как будет устроена» (24.09): высота, насколько заходит вверх под
     полосу слоёв, подъём над нижней границей секции и сдвиг вправо за край полосы; ручки --dials «анатомия, бюст».
     01.10 (Кирилл): на 15 % меньше (было clamp(340px, 38vw, 560px)) и выше – не касается низа секции. Подъём 40 px
     больше хода пружины к курсору (24 px, js/landing.js), поэтому осколки не доходят до границы и под мышью */
  --hm-giant-h: clamp(289px, 32.3vw, 476px);
  --hm-giant-up: 64px;
  --hm-giant-lift: 40px;
  --hm-giant-x: 0px;
}

/* логотип в шапке сайта на core-human: вес за заголовками. human.css грузится на все страницы, поэтому
   под :has(#hero.opener) – у остальных в tokens.css 700 */
:root:has(#hero.opener) { --l-logo-weight: var(--l-weight-head); }
/* Для core-human переполнение исправляется в самих блоках; скрытие на body из
   общего base.css не должно маскировать горизонтальный скролл. */
body:has(#hero.opener) { overflow-x: visible; }
/* имя в шапке – «HUMAN × AI Mindset» (Кирилл, 30.09). Хвост «× AI Mindset» виден, где помещается рядом с меню и
   кнопкой: до 1500 px с меню разделов он переносит пункты меню в две строки, на телефоне уже 560 px страница
   уезжает вбок. Полное имя – в бирке героя сразу под шапкой. Меню переделывает сессия A (план правок 30.09) */
@media (min-width: 901px) and (max-width: 1499px), (max-width: 559px) { .topbar__by { display: none; } }

/* тёмная тема неба hero: та же лестница плейта без осветления; кайма по кудрям на тёмном светлая,
   поэтому середина ближе к серо-зелёному неба, чем к чёрному. Два селектора – как у бумаги в tokens.css */
@media (prefers-color-scheme: dark) {
  :root:not([data-force="light"]) { --hm-sky-top: #202b27; --hm-sky-mid: #3a4740; --hm-sky-hor: #565a4f; --hm-sky-ground: #614b3a; }
}
:root[data-force="dark"] { --hm-sky-top: #202b27; --hm-sky-mid: #3a4740; --hm-sky-hor: #565a4f; --hm-sky-ground: #614b3a; }

/* ─────────────── стили текста: участники (30.09) ───────────────
   Шкала и стили – tokens.css; примитивы (h1–h3, .label, .lead, .mono, .src, .btn) – base.css, общий каркас (меню,
   подвал, FAQ) – blocks.css. Здесь элементы core-human, которые получают стиль классом блока: одно правило на
   стиль и ступень. В правилах элементов ниже типографики нет – только раскладка и цвет. Карта «стиль → ступень →
   участники» для аудита, панели и листа – js/type-roles.js: новый участник – строка и там */
/* главная фраза (h1 – base.css) и цифры карточек; ступень главная, у суммы цены – цена */
.finale__title, .pr__fig, .mk__fig, .wk__num, .pr__amount { font-family: var(--l-display-font); font-stretch: var(--l-display-stretch); font-weight: var(--l-display-weight); letter-spacing: var(--l-display-tracking); font-size: var(--l-display-size); line-height: var(--l-display-leading); }
.pr__amount { font-size: var(--l-text-price); line-height: var(--l-leading-price); }
/* заголовок пункта (h3 – base.css; формула подвала – blocks.css) и выводы – фраза, которую дочитывают */
.deal__name, .anat__name,
.last, .ctarow__text, .lim__last, .faq__ask p { font-family: var(--l-h3-font); font-stretch: var(--l-h3-stretch); font-weight: var(--l-h3-weight); font-size: var(--l-h3-size); line-height: var(--l-h3-leading); letter-spacing: var(--l-h3-tracking); }
/* текст: участники внутри чужого стиля (кнопка, цифра, вкладка) и цитаты получают его явным правилом */
.cat__name, .opener__who, .anat__what, .pr__head, .pr__unit, .wk__tab-name, .mk__rule, .wall__quote p, .proof__quote p,
.lim__group li { 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-body); line-height: var(--l-leading-body); }
/* текст, ступень мелкий: описания второго плана, которые читают */
.roles__what, .wk__teach, .wk__do, .wk__result, .rhythm__what, .person__lines li, .mk__what, .prom__note,
.pr__card--note .pr__text, .wall__more p, .finale__aside, .pchat__think { 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); }
/* текст, ступень пункт: ударные цитаты */
.wall__item--punch .wall__quote p { font-size: var(--l-text-h3); line-height: var(--l-leading-h3); }
/* бирка (.label, .shead__label – base.css) */
.rhythm__d, .pr__early { font-family: var(--l-font-label); font-stretch: var(--l-stretch-label); font-weight: var(--l-label-weight); font-size: var(--l-label-size); line-height: var(--l-label-leading); letter-spacing: var(--l-tracking-label); text-transform: var(--l-label-case); }
.pr__old { font-family: var(--l-font-body); font-stretch: var(--l-stretch-body); font-weight: var(--l-weight-strong); font-size: var(--l-text-h3); line-height: 1; letter-spacing: var(--l-tracking-body); }
/* надпись (.mono, .src – base.css; меню и подвал – blocks.css) */
.wk__when, .wk__tab-sub, .aft__tick, .rhythm__who, .mk__names, .wall__who, .wall__role, .proof__who, .proof__role, .illo__cap,
.secnav { 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); }
/* действие – .btn, base.css */
/* выделение: один модификатор веса поверх стиля (номер секции в бирке – base.css) */
.wk__result, .mk__rule, .wall__who, .proof__who { font-weight: var(--l-weight-strong); }
/* B · участники стилей (30.09, js/type-roles.js – блок add): имя карточки проекта в «кто ведёт» (h4) – заголовок пункта;
   строка про гостей, текст этапа дела и строка «почему» в «чего не будет» – текст, мелкий */
.mk__name { font-family: var(--l-h3-font); font-stretch: var(--l-h3-stretch); font-weight: var(--l-h3-weight); font-size: var(--l-h3-size); line-height: var(--l-h3-leading); letter-spacing: var(--l-h3-tracking); }
.duo__guests, .deal__text, .lim__why { 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); }

/* ─────────────── общее ─────────────── */

/* выделение тезиса (30.09): ==тезис== в JSON – зелёная заливка, про человека и его дело; ==!тезис== – оранжевая, про
   систему. Текст на заливке белый (правило 20.09); кегль, вес и семейство – от стиля вокруг. Разметку ставит build.mjs (hl).
   clone держит заливку и поля на каждой строке, когда тезис переносится */
mark.hl { background: var(--l-accent); color: var(--l-accent-ink); padding: 0 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
mark.hl--sys { background: var(--l-accent-2); color: var(--l-accent-2-ink); }

/* слот иллюстрации без содержимого: тонированная плашка и подпись, чтобы место было видно */
.illo {
  --sq-r: var(--l-radius-l);
  display: grid; place-items: center;
  width: 100%; max-width: 100%; min-width: 0;
  min-height: var(--hm-illo-min); aspect-ratio: var(--hm-illo-ratio);
  background: var(--hm-tint);
  border-radius: var(--sq-r);
  color: var(--l-ink-mute);
}
.illo__cap { text-align: center; padding: var(--l-s4); }

/* последняя строка секции: вывод, одним предложением, дисплеем */
.last {
  margin-top: var(--l-s7);
  max-width: 44rem; text-wrap: balance;
}
.last + .last { margin-top: var(--l-s4); }   /* вывод из двух строк: недели – часы и строка «после» */
.last a { white-space: nowrap; }   /* ссылка в выводе не рвется: «напиши в бота» одной строкой */


/* цепочка шагов со стрелками: путь дела, контур установки */
.path, .flow__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--l-s2) var(--l-s3); }
.path li, .flow__list li { display: inline-flex; align-items: center; gap: var(--l-s3); color: var(--l-ink-2); }
.path li + li::before, .flow__list li + li::before { content: "→"; color: var(--l-ink-mute); }
.flow { margin-top: var(--l-s7); }
.flow__head { margin-bottom: var(--l-s4); }

/* список без линий: строки разделяет воздух */
.rows > li, .rows > div { padding-block: var(--l-s2); }

/* два столбца без шапки и плашек: до конца, с чего входишь. Ряды разделяет воздух,
   бирка условия стоит внутри ряда */
.fin { display: grid; }
.fin__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--l-s3) var(--l-s6); padding-block: var(--l-s5); align-items: start; }
.fin__when { max-width: var(--l-measure); color: var(--l-ink-2); display: grid; gap: var(--l-s1); }
.fin__cap { display: block; }
@media (max-width: 620px) { .fin__row { grid-template-columns: minmax(0, 1fr); gap: var(--l-s2); padding-block: var(--l-s4); } }
/* небо «откуда стартуешь» (Кирилл, 29.09): сетка точек шапки во всю секцию, под телами и текстом. Само небо ждёт
   генерации (§4.7a документа сцен) и ляжет фоном секции под сетку. С 01.10 так же «одно дело до конца» (.deal__sky):
   фон секции прежний, тёмный, поверх – сетка */
.entry__sky, .deal__sky { position: absolute; inset: 0; z-index: 0; }
#entry > .wrap, #promise-deal > .wrap { position: relative; z-index: 1; }
#promise-deal { background-color: var(--l-bg); }   /* как у #entry: поле шапки не сквозит второй сеткой */
#entry { background-color: var(--l-bg); }   /* своя сетка: до 900 px и на окне уже 4:3 шапка не липкая, её поле прибито к окну и сквозило бы второй сеткой */

/* ─────────────── меню · черточки разделов (A, 30.09) ───────────────
   Кирилл 30.09, Р2: от 1101 px на устройствах с мышью разделы страницы – черточки у левого края по центру высоты
   (01.10: справа ложились на иллюстрации, в первую очередь на человека) вместо строки подменю шапки AIM (её прячет правило ниже; до 1100 px и на таче разделы – в меню шапки AIM).
   Черточка – в зоне 28 px шириной, длина 8–20 px по доле раздела (--secnav-len, js/landing.js), текущая светлее и толще.
   В покое черточки стоят плотно, шаг 8 px (Кирилл, 01.10: «по дефолту компактная и аккуратная»); наведение раздвигает
   их до 20 px и проявляет подписи, уход мыши собирает обратно. Зона наведения шире самой полоски на 24 px вправо и
   вверх-вниз (::before) – в узкую стопку черточек трудно попасть мышью.
   Видна, когда шапку героя закрыла следующая секция: появляется черточками и так и стоит, раскрывают ее только наведение
   или фокус с клавиатуры (Кирилл, 01.10 вечер: раскрытие на 1.5 с при первом появлении снято – лишнее). Над героем она прозрачна, но в порядке Tab и в дереве
   доступности: строка подменю AIM на этой ширине скрыта (css/human-shell.css), и с клавиатуры разделы открываются фокусом. Полоса страницы
   под героем отходит на 28 px от края, чтобы черточки не ложились на текст */
.secnav { display: none; }
@media (min-width: 1101px) and (hover: hover) and (pointer: fine) {
  .opener ~ section .wrap { max-width: min(var(--l-max), calc(100% - 56px)); }
  .secnav {
    display: flex; flex-direction: column; align-items: flex-start;
    position: fixed; z-index: 30; left: 6px; top: 50%; translate: 0 -50%;
    padding: var(--l-s2) var(--l-s2) var(--l-s2) 0; border-radius: var(--l-radius-m);
    background: transparent;
    opacity: 0; pointer-events: none;
    transition: opacity var(--l-t-base) var(--l-ease), background-color var(--l-t-base) var(--l-ease);
  }
  body:has(.opener--covered) .secnav, .secnav:has(:focus-visible) { opacity: 1; pointer-events: auto; }
  /* зона наведения до края окна слева; под ссылками (z-index: -1 внутри панели), иначе абсолютный слой ловит клик
     вместо пунктов (баг 01.10 вечер, проверка – scripts/check-secnav-hit.mjs) */
  .secnav::before { content: ""; position: absolute; z-index: -1; inset: -24px -24px -24px -6px; }
  .secnav__item { display: flex; align-items: center; height: 8px; color: var(--l-ink-2); text-decoration: none; transition: height var(--l-t-base) var(--l-ease); }
  :is(.secnav:hover, .secnav:has(:focus-visible)) .secnav__item { height: 20px; }
  .secnav__tick { flex: none; display: grid; place-items: center start; width: 28px; height: 100%; }
  .secnav__dash { display: block; width: var(--secnav-len, 12px); height: 2px; border-radius: 1px; background: currentColor; opacity: 0.45;
    transition: opacity var(--l-t-base) var(--l-ease), height var(--l-t-base) var(--l-ease); }
  .secnav__item[aria-current] { color: var(--l-ink); }
  .secnav__item[aria-current] .secnav__dash { height: 3px; opacity: 1; }
  .secnav__label { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; padding-left: 0;
    transition: max-width var(--l-t-base) var(--l-ease), opacity var(--l-t-base) var(--l-ease), padding var(--l-t-base) var(--l-ease); }
  .secnav:hover, .secnav:has(:focus-visible) {
    background: color-mix(in oklab, var(--l-bg) 88%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  :is(.secnav:hover, .secnav:has(:focus-visible)) .secnav__label { max-width: 20em; opacity: 1; padding-left: var(--l-s3); }
  .secnav__item:hover, .secnav__item:focus-visible { color: var(--l-ink); }
  .secnav__item:hover .secnav__dash { opacity: 1; }
  .secnav__item:focus-visible { outline: none; }
  .secnav__item:focus-visible .secnav__label { text-decoration: underline; text-underline-offset: 3px; }
}

/* ─────────────── hero · шапка ─────────────── */

/* шапка на весь экран: фон – точки на пересечениях квадратной сетки (--l-grid-step), слой прибит
   к окну и лежит под всей страницей, секции скроллятся поверх; заливка «утопленных» секций
   полупрозрачна (--hm-sunk-a), точки сквозят. Текст лежит поверх на стекле. Интерактивной
   пластины Хладни здесь нет: папка для работы над текстами (Кирилл, 22.09) */
.opener {
  position: relative; min-height: calc(var(--hm-opener-h) * 1svh); display: grid; align-items: start; padding-block: var(--hm-opener-top) var(--l-s8); overflow: hidden;
  /* текст на небе без стекла (Кирилл, 23.09): только белый и зелёный; иерархия – прозрачностью белого,
     плашка ghost-кнопки – белым же. Точки поля берут чернила :root, не эти */
  --l-ink: #eaeaea;
  --l-ink-2: rgb(255 255 255 / 86%);
  --l-ink-mute: rgb(255 255 255 / 70%);
  --l-accent-text: color-mix(in oklab, var(--l-accent) 72%, white);
  --hm-tint: rgb(255 255 255 / 16%);
  --hm-tint-2: rgb(255 255 255 / 26%);
  color: var(--l-ink);
  /* небо под вырезкой v8: сверху темнее серо-бирюзовый, к низу теплее и светлее, как небо к горизонту на плейте;
     ореол за головой держит цвет каймы волос, тёплое пятно снизу справа – земля под платьем. Слои, не картинка */
  background:
    radial-gradient(70% 55% at 66% 24%, var(--hm-sky-mid) 0%, transparent 72%),
    radial-gradient(110% 60% at 76% 104%, var(--hm-sky-ground) 0%, transparent 62%),
    linear-gradient(180deg, var(--hm-sky-top) 0%, var(--hm-sky-mid) 42%, var(--hm-sky-hor) 78%, var(--hm-sky-ground) 100%);
}
/* сцена шапки (23.09): сборка Кирилла hero-composite-v1 во весь кадр под стеклом с текстом; девушка
   справа, левая треть кадра тихая – под ней и стоит текст. На узком экране кадр 960 и сдвиг к девушке */
/* слои (23.09): .opener__art без z-index – слои и текст в одном контексте наложения:
   девушка 0 < предметы 1 < текст и кнопки 2 (Кирилл, 24.09: слой под текстом, но предметы на текст не ставим) */
.opener__art { position: absolute; inset: 0; }
/* девушка – спрайт по контуру, прижата к правому краю (Кирилл, 23.09: смотрит налево, платье упирается в край
   экрана, не уходит за него); с v10 слои приходят уже отражёнными; вертикаль – доли кадра 2752×1536 из hero-layers.py */
.opener__scene { position: absolute; z-index: 0; right: 0; top: 23.05%; height: 72.2%; width: auto; }  /* доли из hero-layers.py */
/* кадр предметов (24.09): .opener__frame накрывает шапку как object-fit: cover – не меньше ширины и не меньше
   высоты арт-слоя при пропорции 2752×1536, сдвиг по --hm-scene-x как у object-position; каждый предмет – <img>
   с --x/--y/--w в процентах кадра (пишет scripts/hero-layers.py). Сдвиг от курсора – translate из js/landing.js */
.opener__art { container-type: size; }
.opener__frame { position: absolute; z-index: 1; top: 50%; left: var(--hm-scene-x); translate: calc(-1 * var(--hm-scene-x)) -50%; width: max(100cqw, calc(100cqh * 2752 / 1536)); aspect-ratio: 2752 / 1536; pointer-events: none; }
/* --hm-text-shift: предмет сходит с текста шапки вправо на узком по пропорции окне (Кирилл: 01.10 нижние три, 05.10 – все,
   планшеты альбомом), сдвиг меряет js/landing.js */
.opener__obj { position: absolute; left: calc(var(--x) + var(--hm-text-shift, 0px)); top: var(--y); width: var(--w); height: auto; will-change: translate; }
/* вход (Кирилл 30.09, Ш1 «выпустила»): до старта предметы прозрачны – ранний скрипт shell.html ставит html.js,
   js/landing.js ставит .opener.is-live и ведёт вход сам. Страховка: скрипт не дошёл – предметы проявляются через 3 с.
   При reduce и без скрипта предметы стоят сразу */
@media (prefers-reduced-motion: no-preference) {
  .js .opener:not(.is-live) .opener__obj { opacity: 0; animation: opener-failsafe 0.6s var(--l-ease) 3s forwards; }
}
@keyframes opener-failsafe { to { opacity: 1; } }
/* предметы на платье (Кирилл, 24.09 вечер): блок стоит ровно на месте спрайта девушки (те же правый край, верх и высота,
   пропорция спрайта – инлайном из hero-layers.py), поэтому предмет на ней не съезжает при любой пропорции экрана;
   исключение – сдвиг с текста (--hm-text-shift): с 01.10 шар едет вместе с нижними предметами, с 05.10 и куб на
   платье сходит с текста сам, если окно поставило его на строки */
.opener__on-girl { position: absolute; z-index: 1; right: 0; top: 23.05%; height: 72.2%; pointer-events: none; }
/* узкий экран: текст на небе сверху, кадр отдельным блоком под ним (без стекла текст поверх платья не читается).
   Кирилл, 04.10 (вариант A): блок 3:4, девушка шириной 94 % в правом нижнем углу – край платья у края экрана, мяч в
   левой руке не у края; 336 px на 390 вместо 211 в прежнем блоке 4:3. Кадр предметов – сам блок, свободные предметы
   стоят по координатам телефона (--xm --ym --wm, проценты блока, пишет scripts/hero-layers.py), два на платье – по
   своим долям спрайта, как на десктопе. Блок не шире 560 px: на 431–700 px девушка иначе вырастала бы до 600 px.
   Кирилл, 05.10: девушка стоит на нижней границе секции, как на десктопе, – под блоком нет полосы неба: нижнего
   отступа у шапки нет (правило после «max-width: 900px» ниже), блок прижат к низу и при min-height выше содержимого.
   Кирилл, 05.10 (вариант B): та же раскладка там, где во весь кадр текст шапки ложится на девушку, – до 900 px и на
   окне уже 4:3 (планшет портретом, половина экрана макбука). Порог по замеру main 05.10: доля пикселей строк на
   спрайте до 900 px – 6–34 % при любой пропорции, шире – 0–2 % от 4:3 и 1–15 % уже; 1024×768 и 1366×1024 остаются
   во весь кадр. Шире 700 px блок растёт с высотой окна – 60svh в ширину, около 80 % высоты, но не меньше 560 px;
   на телефоне потолок 560 px прежний. Границы – range-синтаксис: при дробной ширине окна между запросами нет щели */
@media (width <= 900px), (aspect-ratio < 4/3) {
  .opener__art { position: relative; inset: auto; order: 2; aspect-ratio: 3 / 4; width: min(100%, 560px); margin: var(--l-s5) 0 0 auto; align-self: end; }
  .opener__scene, .opener__on-girl { top: auto; bottom: 0; width: 94%; height: auto; }
  .opener__frame { left: 0; top: 0; translate: none; width: 100%; height: 100%; aspect-ratio: auto; }
  .opener__frame .opener__obj { left: var(--xm); top: var(--ym); width: var(--wm); }
}
@media (width > 700px) and (width <= 900px), (width > 900px) and (aspect-ratio < 4/3) { .opener__art { width: min(100%, max(560px, 60svh)); } }
/* сетка точек .dots – небо шапки, «откуда стартуешь», «одно дело до конца» (01.10) и финала (Кирилл, 29.09: «как в
   секции героя»), ручки у всех общие – группа «точки фона». Волна от курсора (Кирилл, 24.09): два слоя точек на одной сетке – ::before
   с прозрачностью --hm-field-alpha и ::after тем же цветом, в круге радиусом --wave вокруг курсора точки в сумме
   доходят до --hm-wave-alpha («более subtle», белые точки 0.95 отклонены тем же вечером; 04.10 – 0.4 вместо 0.25, и
   точка там крупнее, до --hm-wave-dot): к краю круга плотность
   сходит плавной кривой; радиус и плотность растут со скоростью курсора. С 04.10 курсор встал – гаснет только
   плотность (--hm-wave-fade), а на пути курсора остаётся лёгкий шлейф из таких же кругов. Маску рисует dotWave
   в js/landing.js слоями: --wave-mask (картинки), --wave-mask-pos и --wave-mask-size (у каждого круга свой
   прямоугольник, от левого верхнего угла слоя); без скрипта маска пустая */
.dots {
  pointer-events: none;
  --wave-mask: linear-gradient(transparent, transparent); --wave-mask-pos: 0 0; --wave-mask-size: 100% 100%; --wave-on: 0;   /* пишет js */
  --hm-wave-color: var(--hm-field-color);
}
.opener__field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }   /* у шапки слой прибит к окну */
/* точки не едут с секцией (Кирилл, 07.10: «точки не должны скроллиться ни в одной секции»): слои точек прибиты к окну,
   слой секции – окно в них (clip-path режет и fixed-потомков), сетка у всех секций совпадает с сеткой шапки */
.dots { clip-path: inset(0); }
.dots::before, .dots::after {
  content: ''; position: fixed; inset: 0;
  background-image: radial-gradient(circle, var(--hm-field-color) calc(var(--hm-field-dot) * 1px), transparent calc(var(--hm-field-dot) * 1px + 0.6px));
  background-size: var(--l-grid-step) var(--l-grid-step);
  background-position: calc(var(--l-grid-step) / 2) calc(var(--l-grid-step) / 2);
}
.dots::before { opacity: var(--hm-field-alpha); }
.dots::after {
  --hm-field-color: var(--hm-wave-color);
  /* своя точка (Кирилл, 04.10): ядро радиусом --hm-field-dot, дальше до --hm-wave-dot край мягко сходит на нет.
     Слой проявляется маской, вместе с ним проступает край – точка у курсора плавно растёт и ярчеет */
  background-image: radial-gradient(circle, var(--hm-field-color) calc(var(--hm-field-dot) * 1px), transparent calc(var(--hm-wave-dot) * 1px + 0.6px));
  /* слой поверх ::before: в ядре суммарная плотность a + b − ab = --hm-wave-alpha там, где маска полная */
  opacity: calc(var(--wave-on) * (var(--hm-wave-alpha) - var(--hm-field-alpha)) / (1 - var(--hm-field-alpha)));
  /* маска – круги головы и шлейфа (dotWave): плотность каждого и профиль по радиусу – в его градиенте */
  -webkit-mask-image: var(--wave-mask); mask-image: var(--wave-mask);
  -webkit-mask-position: var(--wave-mask-pos); mask-position: var(--wave-mask-pos);
  -webkit-mask-size: var(--wave-mask-size); mask-size: var(--wave-mask-size);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.opener__in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--l-s7); align-items: center; }
/* стекло: текст не двигается (отступ компенсирован отрицательным полем), точки под ним размыты */
.opener__text { width: fit-content; max-width: 100%; justify-self: start; }  /* стекло снято 23.09 */
.opener__eyebrow { margin-bottom: var(--l-s5); }
.opener__brand { color: var(--l-accent-text); }
.opener__dates { color: var(--l-ink); }   /* Кирилл, 06.10: даты лабы сразу за «HUMAN × AI Mindset» – их не замечали в строке фактов */
.opener__title { max-width: var(--hm-h1-max); margin-bottom: var(--l-s5); }   /* Кирилл, 29.09: строки заголовка плотно */
.opener__sub { max-width: var(--hm-text-max); margin-bottom: var(--l-s4); }
/* подзаголовок двумя абзацами: что происходит на лабе, потом формат (Кирилл, 06.10; вторая дорога – тул в open source – снята) */
.opener__sub:has(+ .opener__sub) { margin-bottom: var(--l-s2); }
.opener__who { max-width: var(--hm-text-max); margin-bottom: var(--l-s6); }
@media (width > 900px) {   /* диапазоном, как узкая раскладка: на дробной ширине 900.5 нет щели между правилами */
  .opener__in { container-type: inline-size; }
  /* 29.09: заголовок «человек, который делает своё агентами» – две строки, перенос после «который»; вторая строка
     шириной с прежний заголовок, поэтому кегль и --hm-h1-fit те же, а max-width держит перенос */
  .opener__title { max-width: 13em; text-wrap: balance; font-size: min(var(--l-display-size), calc(100cqi / var(--hm-h1-fit))); }
}
.opener__actions { margin-bottom: var(--l-s5); column-gap: var(--l-s5); }
/* строка доверия под кнопкой и фактами: цифры ai mindset на первом экране (разбор конверсии 21.09) */
.opener__trust { color: var(--l-ink-mute); }
.opener__facts-row, .finale__facts { --facts-gap: calc(2 * var(--l-s4));
  display: flex; flex-wrap: wrap; gap: var(--l-s2) var(--facts-gap); color: var(--l-ink-2); overflow: clip; }
/* факты рядом с кнопкой (Кирилл, 06.10, вместо «сначала полистать») – две строки из данных (hero.facts): когда и как,
   потом цена. Строки – отдельные списки, поэтому колонка текста не шире самой длинной из них. На телефоне кнопка во
   всю ширину (base.css), факты под ней, зазор между пунктами на ступень меньше, чтобы первая строка влезла в 390 */
.opener__facts { display: grid; row-gap: var(--l-s2); }
@media (width <= 620px) { .opener__facts-row { --facts-gap: var(--l-s5); } }
/* окно 901–1000 px: кадр предметов здесь шире всего относительно окна, и нижние предметы не успевают сойти с фактов
   справа от кнопки (scripts/check-hero.mjs, 920×690–960×720) – факты под кнопкой, как на телефоне */
@media (900px < width <= 1000px) { .opener__actions .opener__facts { flex-basis: 100%; } }
/* Кирилл, 06.10: тонкие строки шапки (факты и доверие) чисто белые – серым над сценой не хватало контраста */
.opener__facts-row, .opener__trust { color: var(--bs-core-color-white); }
.opener__facts-row:first-child li:first-child { font-weight: var(--l-weight-strong); }   /* Кирилл, 06.10: даты лабы (первый факт) жирным */
/* точка стоит в зазоре слева от пункта; у первого пункта строки она за левым краем списка и срезана (29.09: на телефоне
   строка фактов переносилась, и «·» начинала вторую строку) */
.opener__facts li, .finale__facts li { position: relative; }
.opener__facts li + li::before, .finale__facts li + li::before {
  content: "·"; position: absolute; right: 100%; width: var(--facts-gap); text-align: center; color: var(--l-ink-mute);
}
@media (width <= 900px) {
  .opener { padding-block: var(--l-s6); }
  .opener__in { gap: var(--l-s6); }
}
@media (width <= 900px), (aspect-ratio < 4/3) { .opener { padding-bottom: 0; } }   /* девушка на нижней границе секции (05.10), см. «узкий экран» выше */

/* ─────────────── recognize · узнаёшь ─────────────── */

.recog { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--l-s6) var(--l-s7); position: relative; }
.recog__head { margin-bottom: var(--l-s4); }
.recog__list { display: grid; gap: var(--l-s3); }
.recog__list li { color: var(--l-ink-2); }
.recog__mark { margin-left: 0.1em; }                                    /* глиф после шапки колонки (Кирилл, 20.09): стена и ступор */
.recog__mark--orange { color: var(--l-accent-2); }   /* у обеих колонок оранжевый: красного на странице больше нет (Кирилл, 01.10) */
/* стекло под колонками, как под текстом шапки: отступ компенсирован отрицательным полем, текст не двигается */
.recog__col {
  padding: var(--hm-glass-pad-col); margin: calc(-1 * var(--hm-glass-pad-col));
  background: color-mix(in oklab, var(--l-bg) var(--hm-glass-a), transparent);
  -webkit-backdrop-filter: blur(var(--hm-glass-blur)); backdrop-filter: blur(var(--hm-glass-blur));
  border-radius: var(--l-radius-l);
}
@media (max-width: 620px) { .recog { grid-template-columns: minmax(0, 1fr); } }
/* стекло не шире экрана: пока полоса упирается в края (уже --l-max + 2×20 px), поле стекла по бокам – поле страницы;
   иначе 20 px вылезали за край на 8 px и страница ездила вбок (29.09) */
@media (max-width: 1340px) { .recog__col { padding-inline: var(--l-gutter); margin-inline: calc(-1 * var(--l-gutter)); } }

/* ─────────────── roles · кто приходит ─────────────── */

/* пять ролей в ряд: номер, имя дисплеем, сценарий мелким; без карточек и обводок (Кирилл, 22.09) */
/* «кто приходит» – тёмный островок (data-force="dark" переключает токены), поле под ним закрыто */
.section--dark { background: var(--l-bg); color: var(--l-ink); }
.section--dark .roles__n { color: var(--l-accent-text); }
.roles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--l-s6) var(--l-s5); }
.roles__item { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--l-s2); align-content: start; }   /* дорожка по колонке: длинное имя роли («предприниматель» шире колонки на 1024–1440) не растягивает портрет */
/* портреты ролей (23.09): сборки Кирилла 4:5 по грудь; карточка без поля portrait остаётся текстовой */
.roles__portrait { aspect-ratio: 4 / 5; margin-bottom: var(--l-s3); border-radius: var(--l-radius-m); overflow: hidden; }
.roles__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.roles__n { color: var(--l-ink-mute); }
.roles__name {
  /* ширина – общая заголовочная (--l-stretch-display); своя была при 270 % (7741713), снята 05.10 */
  font-size: min(var(--l-h3-size), 21px);
  line-height: 1.15;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  white-space: nowrap;
}
.roles__what { color: var(--l-ink-2); }
@media (min-width: 901px) and (max-width: 1260px) { .roles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* На телефоне роли листаются внутри секции: две карточки на обычном экране,
   полторы на узком. Прокрутка списка не расширяет страницу. */
@media (max-width: 700px) {
  .roles {
    display: grid; grid-auto-flow: column; grid-auto-columns: 48%;
    grid-template-columns: none; gap: var(--l-s3); width: 100%;
    overflow-x: auto; overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .roles::-webkit-scrollbar { display: none; }
  .roles:focus-visible { outline: var(--l-focus) solid var(--l-accent); outline-offset: 2px; }
  .roles__item { scroll-snap-align: start; min-width: 0; }
  .roles__name { white-space: normal; }
  .roles__portrait img { object-fit: cover; }
}
@media (max-width: 380px) { .roles { grid-auto-columns: 64%; } }

/* ─────────────── catalogue · что собирается ─────────────── */

/* четыре ряда «где живёт»: бирка слева, названия медиумов текут строкой дисплеем.
   Без карточек, иконок и примеров (Кирилл, 20.09): достаточно назвать */
/* правая половина секции: с 900 px текст держится в левых 58 %, справа кисть (Кирилл, 24.09; сцены §4.3),
   крупная, прибита к низу окна: фигура нулевой высоты с position: fixed; bottom: 0 и не двигается при скролле вовсе
   (Кирилл, 01.10: «как в главной секции» – до того была sticky и уезжала вверх с концом секции). Видимую часть режет
   clip-path секции: сверху секция въезжает и открывает кисть, снизу конец секции уходит вверх, и следующая секция
   наезжает на кисть. overflow: clip fixed-потомков не режет, clip-path режет. Сцена – контейнер в единицах cqw своей ширины:
   кисть на всю ширину сцены (в картинке ладонь ≈ 50 % ширины, кончики пальцев вверху), предмет над ней своим
   слоем, размером с ладонь, не касается пальцев (data-obj – под смену по ховеру), тень на ладонь – эллипс.
   Уже 900 px (Кирилл, 04.10) кисть так же прибита к низу окна, справа, 35 % ширины; список и строка под ним – слева
   от неё. Появляется, когда список доходит до кисти (.cat--inview из js), предметы зовёт прокрутка (.cat--scroll) */
#catalogue { overflow: clip; clip-path: inset(0); padding-bottom: 0; }
#catalogue > .wrap { position: relative; padding-bottom: var(--l-section-y); }
.cat__illo { position: fixed; inset: auto 0 0; height: 0; margin: 0; pointer-events: none; }
.cat__stage { --cat-drop: 20px; display: block; position: absolute; bottom: 0; container-type: inline-size; margin: 0;
  transition: opacity var(--l-t-base) var(--l-ease-out), translate var(--l-t-base) var(--l-ease-out); }
.cat--scroll:not(.cat--inview) .cat__stage { opacity: 0; translate: 0 24px; }
.cat__hand { display: block; width: 100%; height: auto; margin-top: 72cqw; transform: scaleX(-1); }   /* 24.09: предмет чуть ниже (было 78); рука отражена (Кирилл) – ладонь почти по центру сцены, тень под предметами симметрична, раскладка не меняется; вернуть – убрать transform */
/* предметы над ладонью (24.09): --cat-x --cat-y --cat-w в cqw сцены ставит js/landing.js, --cat-drop опускает всю
   композицию (Кирилл, 24.09: на 20 px) – в покое додекаэдр, по ховеру
   на позиции каталога предметы копятся вокруг него и уменьшаются (раскладка там же); без js – додекаэдр по значениям ниже.
   Свойства зарегистрированы, чтобы переход шёл по числам и тень росла и уменьшалась вместе с предметом;
   имена с префиксом cat-: регистрация глобальна, а --x --y --w в процентах держат предметы героя и рубрикатор */
@property --cat-x { syntax: '<number>'; inherits: false; initial-value: 16; }
@property --cat-y { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --cat-w { syntax: '<number>'; inherits: false; initial-value: 68; }
.cat__obj {
  position: absolute; left: calc(var(--cat-x) * 1cqw); top: calc(var(--cat-y) * 1cqw + var(--cat-drop)); width: calc(var(--cat-w) * 1cqw); height: auto;
  will-change: translate;   /* сдвиг от курсора – translate из js/landing.js, как в шапке */
  filter: drop-shadow(0 calc(var(--cat-w) * 0.09cqw) calc(var(--cat-w) * 0.12cqw) rgb(0 0 0 / 22%));
  transition: opacity 0.35s var(--l-ease);
}
.cat__obj:not(.is-on) { opacity: 0; }
#catalogue.cat--pick { cursor: pointer; }   /* курсор над предметом, когда их больше одного: клик по додекаэдру – к исходному, по другому – убрать его */
/* тяжёлый металл: трогается не сразу, в конце чуть проскакивает и садится; прежние стартуют с задержкой (js) */
.cat__stage--live .cat__obj {
  --cat-move: 0.95s cubic-bezier(0.45, 0.05, 0.2, 1.12);
  transition: --cat-x var(--cat-move), --cat-y var(--cat-move), --cat-w var(--cat-move), opacity 0.5s var(--l-ease);
}
@media (prefers-reduced-motion: reduce) {
  .cat__stage--live .cat__obj { transition: opacity 0.5s var(--l-ease); }
}
.cat__shadow { position: absolute; left: 32cqw; top: 134cqw; width: 36cqw; height: 13cqw; border-radius: 50%; background: radial-gradient(ellipse at center, rgb(0 0 0 / 36%), transparent 70%); filter: blur(4px); }
@media (width >= 900px) {
  #catalogue .shead, #catalogue .cat, #catalogue .last { max-width: 58%; }
  .cat__stage { right: max(var(--l-gutter), calc((100% - var(--l-max)) / 2 + var(--l-gutter) + 4vw)); width: min(34vw, 48vh, 520px); }   /* 24.09: на 4vw левее края полосы */  /* 24.09: ещё на 30 % крупнее; на 13" упирается в высоту экрана */
}
/* зазор до кисти не меньше 3vw: предметы выходят за левый край сцены на 8cqw = 2.8vw (js/landing.js, X0) */
@media (width < 900px) {
  #catalogue .cat, #catalogue .last { max-width: calc(100% - 35vw - max(var(--l-s3), 3vw)); }
  .cat__stage { right: var(--l-gutter); width: 35vw; }
}

.cat { display: grid; }
/* Кирилл, 27.09: бирка над группой пунктов – колонка под бирки (11rem) отдана пунктам, пункты крупнее,
   чтобы иллюстрация не перетягивала внимание. Было: бирка слева, пункты кеглем h3 */
.cat__row { display: grid; gap: var(--l-s3); padding-block: var(--l-s5); }
.cat__row + .cat__row { margin-top: var(--l-s2); }
.cat__list { display: flex; flex-wrap: wrap; gap: var(--l-s2) var(--l-s6); }
/* иконки приложений после слова – настоящие иконки мака (Кирилл, 22.09: плоские глифы не смотрятся).
   png 128 px в assets/icons/apps/: из бандлов установленных приложений (Telegram, Raycast, Obsidian,
   Safari, Figma, Claude, ChatGPT, App Store, Terminal, Finder, iPhone Mirroring) и артворк App Store,
   запечённый в ту же форму (Slack, Discord, Chrome, Firefox, Canva, Cursor); Antigravity – своя плитка с надписью, логотипа в открытых источниках нет */
/* 24.09: иконки на 30 % меньше (Кирилл) – font-size 0.7 уменьшает всё внутри разом, включая надпись
   на плитке; отступ и vertical-align пересчитаны, чтобы зазор до слова и центр иконки остались прежними */
.ico { display: inline-grid; place-items: center; font-size: 0.7em; width: 1.6em; height: 1.6em; margin-left: 0.29em; vertical-align: -0.23em; }
.ico + .ico { margin-left: 0; }
.ico img { width: 100%; height: 100%; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.18)); }
.ico b { width: 81%; height: 81%; display: grid; place-items: center; border-radius: 22.5%; background: linear-gradient(160deg, #4a4d52, #1f2125); color: #fff; font: 700 0.5em/1 var(--l-font-mono); letter-spacing: -0.02em; box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.18); }
/* 24.09: логотипы в списке каталога скрыты (Кирилл: «пока не удаляем, а скрываем»). Разметка остаётся –
   js/landing.js по .ico--<id> привязывает предметы над ладонью к позициям; вернуть – удалить это правило */
.cat__name .ico { display: none; }
/* пункт и предмет вместе (Кирилл 30.09, К1): пункт, чей предмет стоит над ладонью, залит зелёным, как тезис (mark.hl);
   курсор над предметом делает его пункты глубже. Поля заливки съедены отрицательным отступом – строка не едет.
   Отметки ставит и снимает js/landing.js */
.cat__name { margin-inline: -0.15em; padding-inline: 0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-color var(--l-t-base) var(--l-ease), color var(--l-t-base) var(--l-ease); }
.cat__name.is-picked { background: var(--l-accent); color: var(--l-accent-ink); }
.cat__name.is-hot { background: color-mix(in oklab, var(--l-accent) 84%, black); }   /* темнее, не светлее: чернила белые, контраст растёт */
@media (hover: none) { .cat__name { cursor: pointer; -webkit-tap-highlight-color: transparent; } }
@media (max-width: 620px) {
  .cat__row { gap: var(--l-s2); padding-block: var(--l-s4); }
  .cat__list { gap: var(--l-s1) var(--l-s4); }
}

/* ─────────────── promise · что унесёшь: два экрана ─────────────── */

/* Кирилл 21.09: блок был слишком плотным – два экрана, дубли сняты (виды дела и пункты про
   систему повторяют шапку и метод). Экран 1 – восемь частей системы, экран 2 – путь дела на всю
   ширину, «люди» внизу цветом «прошло».
   Кирилл 24.09: восемь частей – окном чата, как основной интерфейс работы с системой: слева список
   чатов (восемь частей), справа переписка выбранного – вопрос пузырём, ответ списком приёмов модуля. В поле можно
   написать и отправить: пузырь встаёт в переписку, под ним пульсирует звезда Claude (Кирилл 24.09).
   Переключает js/landing.js ([data-pchat]); без скрипта все восемь ответов лежат в окне подряд.
   Обводок нет: окно, список и поле ввода держатся на оттенках (--l-bg-card, --hm-tint) */
.prom__note { margin-top: var(--l-s5); max-width: var(--l-measure); }
.prom__note + .prom__note { margin-top: var(--l-s3); }
.pchat {
  --pchat-side: 336px;        /* ширина списка чатов (30.09: +64 под метафору модуля – «безопасность и доверие» не режется) */
  --pchat-side-bg: color-mix(in oklab, var(--l-bg), var(--l-ink) 5%);   /* список чатов; сплошной – --l-bg-card у страницы полупрозрачный */
  --pchat-main: color-mix(in oklab, var(--l-bg), var(--l-ink) 8.5%);     /* правая панель светлее списка, как в приложении */
  --pchat-step: 70ms;         /* ответ «печатается»: шаг между строками */
  display: grid; grid-template-columns: var(--pchat-side) minmax(0, 1fr);
  /* Кирилл 25.09: окно сразу высокое, как после нескольких отправленных сообщений – пропорция со скриншота
     1645 × 768. Это нижняя граница: длинная переписка тянет окно выше, поэтому clip, не hidden – у hidden
     окно становится контейнером прокрутки и aspect-ratio обрезал бы содержимое вместо того, чтобы расти */
  aspect-ratio: 1645 / 768;
  background: var(--pchat-side-bg); border-radius: var(--l-radius-l); overflow: clip;
  box-shadow: 0 40px 90px -40px rgb(0 0 0 / 0.55);
}
.pchat__side { display: flex; flex-direction: column; gap: var(--l-s3); padding: var(--l-s4) var(--l-s3) var(--l-s5); min-width: 0; }
.pchat__dots { display: flex; gap: 8px; padding: 2px var(--l-s2) var(--l-s2); }
.pchat__dots i { width: 12px; height: 12px; border-radius: 50%; background: var(--l-accent-2); }
.pchat__dots i + i { background: var(--l-accent); }   /* Кирилл, 01.10: две кнопки, оранжевая и зеленая */
.pchat__list { display: flex; flex-direction: column; gap: 2px; }
.pchat__item {
  display: flex; align-items: center; gap: var(--l-s2); width: 100%; padding: 5px var(--l-s3) 5px var(--l-s2);
  border: 0; border-radius: var(--l-radius-m); background: transparent; appearance: none;
  color: var(--l-ink-2); font: inherit; text-align: left; cursor: pointer;
  transition: background var(--l-t-hover) var(--l-ease), color var(--l-t-hover) var(--l-ease);
}
.pchat__item:hover { background: var(--hm-tint); color: var(--l-ink); }
.pchat__item[aria-selected="true"] { background: var(--hm-tint-2); color: var(--l-ink); }
.pchat__item:focus-visible { outline: 2px solid var(--l-accent-2); outline-offset: -2px; }
/* метафора модуля вместо номера (30.09): металлический предмет 28 px; у открытого – ярче и крупнее, остальные притушены */
.pchat__meta { flex: none; width: 28px; height: 28px; object-fit: contain; transition: opacity var(--l-t-base) var(--l-ease), scale var(--l-t-base) var(--l-ease); }
.pchat--live .pchat__item:not([aria-selected="true"]) .pchat__meta { opacity: 0.55; scale: 0.86; }
.pchat__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pchat__main { display: flex; flex-direction: column; gap: var(--l-s5); padding: var(--l-s6) var(--l-s6) var(--l-s5); background: var(--pchat-main); min-width: 0; }
.pchat__log { display: grid; gap: var(--l-s6); flex: 1; }
.pchat__panel { display: flex; flex-direction: column; gap: var(--l-s5); }
.pchat__ask {
  align-self: flex-end; max-width: 80%; padding: var(--l-s2) var(--l-s4);
  background: var(--hm-tint-2); border-radius: 14px; color: var(--l-ink);
}
/* ответ без аватара агента (Кирилл, 01.10: «уберем, тогда список сдвинется левее»; с 30.09 стоял бюст из каталога) */
.pchat__answer { display: flex; gap: var(--l-s4); align-items: flex-start; }
.pchat__lines { display: grid; gap: var(--l-s3); max-width: var(--l-measure); }
.pchat__lines li { position: relative; padding-left: var(--l-s4); color: var(--l-ink-2); }
.pchat__lines li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 4px; height: 4px; border-radius: 50%; background: var(--l-ink-mute); }
.pchat__input {
  display: flex; align-items: flex-end; gap: var(--l-s2); min-height: 52px;
  padding: var(--l-s2) var(--l-s2) var(--l-s2) var(--l-s4); background: var(--pchat-side-bg); border-radius: 14px;
  transition: background var(--l-t-hover) var(--l-ease);
}
.pchat__input:focus-within { background: color-mix(in oklab, var(--pchat-side-bg), var(--l-bg) 60%); }   /* фокус – тоном темнее, обводок в блоке нет */
.pchat__field {
  flex: 1; min-width: 0; max-height: 160px; padding: 3px 0 9px; border: 0; background: transparent; resize: none; outline: none;
  color: var(--l-ink); font: inherit; font-size: var(--l-field-size); line-height: var(--l-leading-body); caret-color: var(--l-accent-2);
}
.pchat__field::placeholder { color: var(--l-ink-mute); opacity: 1; }   /* строка поднята на 3 px (padding поля 3/9): строчные без выносных оптически садятся на дно (Кирилл 24.09) */
/* кнопка стоит у нижней строки поля, центр – на центре этой строки: 9 px – нижний отступ поля, 1lh – строка поля
   (шрифт, кегль поля и интерлиньяж те же). Без поправки центр садился на 4–5 px ниже текста (Кирилл, 01.10: «чуть-чуть выше») */
.pchat__send {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; appearance: none;
  margin-bottom: calc(9px + (1lh - 32px) / 2); font: inherit; font-size: var(--l-field-size); line-height: var(--l-leading-body);
  background: var(--l-accent-2); color: var(--l-accent-2-ink); cursor: pointer; transition: background var(--l-t-hover) var(--l-ease), opacity var(--l-t-hover) var(--l-ease);
}
.pchat__send:disabled { background: var(--hm-tint-2); color: var(--l-ink); opacity: 0.5; cursor: default; }
.pchat__send:focus-visible { outline: 2px solid var(--l-accent-2); outline-offset: 2px; }
/* отправленное: пузырь справа в ленте. Над полем пульсирует металлическая звезда Claude (из каталога) и счётчик
   секунд с подписью «твой агент сможет работать часами автономно» – прибиты к полю, как «Thinking…» в Claude Code
   (Кирилл 25.09); агент думает, ответа нет. Зазор до поля меньше общего шага колонки – строка держится за поле */
.pchat__ask--sent { animation: pchat-in 420ms var(--l-ease) both; }
.pchat__think { align-self: flex-start; display: flex; align-items: center; gap: var(--l-s3); margin-bottom: calc(var(--l-s2) - var(--l-s5)); padding-left: var(--l-s2); color: var(--l-ink-mute); }
.pchat__think[hidden] { display: none; }
.pchat__think-ico { width: 26px; height: auto; animation: pchat-pulse 1.6s ease-in-out infinite; }   /* как «3s · Thinking…» в Claude Code, но звезда своя */
@keyframes pchat-pulse { 0%, 100% { scale: 0.84; opacity: 0.7; } 50% { scale: 1.04; opacity: 1; } }
/* своей прокрутки у ленты нет (30.09: двойной скролл): без скрипта окно растёт по переписке, в закреплённом окне
   лишнее срезается, к отправленному лента докручивается программно (hidden, не clip: clip запрещает и программную) */
.pchat__log { overflow: hidden; }
/* со скриптом: ответы лежат в одной клетке, окно высотой по самому длинному и не прыгает при переключении */
.pchat--live .pchat__log { grid-template-areas: "one"; }
.pchat--live .pchat__panel { grid-area: one; }
.pchat--live .pchat__panel[hidden] { display: flex; visibility: hidden; }
/* смена ответа: прежний уходит вверх с затуханием, новый – вопрос, строки по одной; назад (.is-back) –
   зеркально, сверху. --pchat-lead ставит js, когда прежний ещё уходит */
.pchat--live .pchat__panel.is-in .pchat__ask,
.pchat--live .pchat__panel.is-in .pchat__lines li { animation: pchat-in 420ms var(--l-ease) both; animation-delay: calc(var(--pchat-lead, 0ms) + var(--i, 0) * var(--pchat-step)); }
.pchat--live .pchat__panel.is-in.is-back :is(.pchat__ask, .pchat__lines li) { animation-name: pchat-in-back; }
.pchat--live .pchat__panel.is-out { animation: pchat-out 200ms var(--l-ease) both; pointer-events: none; }
.pchat--live .pchat__panel.is-out.is-back { animation-name: pchat-out-back; }
@keyframes pchat-in { from { opacity: 0; translate: 0 6px; } }
@keyframes pchat-in-back { from { opacity: 0; translate: 0 -6px; } }
@keyframes pchat-out { to { opacity: 0; translate: 0 -10px; } }
@keyframes pchat-out-back { to { opacity: 0; translate: 0 10px; } }
@media (prefers-reduced-motion: reduce) {
  .pchat--live .pchat__panel.is-in :is(.pchat__ask, .pchat__lines li), .pchat--live .pchat__panel.is-out, .pchat__ask--sent, .pchat__think-ico { animation: none; }
}
/* скроллителлинг (Кирилл 30.09, Х1 · Т2): закреплено только окно чата, заголовок секции уходит потоком. Трек – высота
   окна плюс шаг прокрутки на модуль (--pchat-n ставит js), пока трек идёт через экран, окно стоит, модуль сменяет
   прокрутка страницы. Класс трека ставит js/landing.js, если самый длинный ответ помещается в окно; иначе ответы
   стоят подряд, как без скрипта */
/* окно стоит посередине между закреплённой шапкой и низом экрана (Кирилл, 01.10; вечером – окно проваливалось под
   шапку на 1280 × 720 и телефоне): высоту шапки пишет js в --l-bar-h, без скрипта – 0. Поля сверху и снизу равны, не
   меньше --pchat-gap. Проверка – scripts/check-pchat-header.mjs */
.pchat-track {
  --pchat-gap: var(--l-s5);
  --pchat-bar: var(--l-bar-h, 0px);
  --pchat-cta: 0px;           /* до 900 px снизу стоит липкая кнопка «занять место» – окно заканчивается над ней */
  --pchat-h: min(calc(100svh - var(--pchat-bar) - 2 * var(--pchat-gap) - var(--pchat-cta)), 680px);
  --pchat-top: calc(var(--pchat-bar) + (100svh - var(--pchat-bar) - var(--pchat-cta) - var(--pchat-h)) / 2);
  --pchat-step-y: 50svh;      /* прокрутка на один модуль */
}
@media (max-width: 900px) { .pchat-track { --pchat-cta: calc(72px + env(safe-area-inset-bottom)); } }
.pchat-track--scrolly { height: calc(var(--pchat-h) + var(--pchat-n, 8) * var(--pchat-step-y)); }
.pchat-track--scrolly .pchat { position: sticky; top: var(--pchat-top); height: var(--pchat-h); aspect-ratio: auto; grid-template-rows: minmax(0, 1fr); }
.pchat-track--scrolly .pchat__main { min-height: 0; }
.pchat-track--scrolly .pchat__log { min-height: 0; }
.pchat-track--scrolly .pchat__panel { align-self: start; }   /* высота ответа по содержимому: длиннее окна – js докручивает ленту прокруткой страницы */
/* ответ длиннее окна едет внутри него: край ленты, за которым ещё есть текст, растворяется (--pchat-fade-* ставит js) */
.pchat-track--scrolly .pchat__log--drift {
  -webkit-mask-image: linear-gradient(transparent, #000 var(--pchat-fade-t, 0px), #000 calc(100% - var(--pchat-fade-b, 0px)), transparent);
  mask-image: linear-gradient(transparent, #000 var(--pchat-fade-t, 0px), #000 calc(100% - var(--pchat-fade-b, 0px)), transparent);
}
/* узкий экран (Т2, Кирилл 30.09): то же закреплённое окно, модули – лентой с прокруткой над перепиской, лента сама
   доезжает до открытого; поля ввода, строки «думает» и точек окна нет – иначе самый длинный ответ не помещается */
@media (max-width: 760px) {
  .pchat { grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; }
  .pchat-track { --pchat-gap: var(--l-s4); --pchat-h: calc(100svh - var(--pchat-bar) - 2 * var(--pchat-gap) - var(--pchat-cta)); }   /* окно во весь экран под шапкой, без потолка 680 */
  .pchat-track--scrolly .pchat { grid-template-rows: auto minmax(0, 1fr); }
  .pchat__side { padding: var(--l-s3) var(--l-s3) var(--l-s2); gap: var(--l-s2); }
  .pchat__dots, .pchat__input, .pchat .pchat__think { display: none; }
  .pchat__list { flex-direction: row; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin: 0 calc(-1 * var(--l-s3)); padding: 0 var(--l-s3) var(--l-s2); }
  .pchat__list::-webkit-scrollbar { display: none; }
  .pchat__item { width: auto; flex: none; scroll-snap-align: start; gap: var(--l-s2); padding: 4px var(--l-s3) 4px var(--l-s2); }
  /* зона нажатия 44 px при видимых 32 (Кирилл, 02.10: «увеличь зону тапа, но не визуальный размер»): прозрачные поля
     по 6 px сверху и снизу. Лента с прокруткой режет все за своим краем – сверху ей 6 px поля за счет отрицательного
     отступа, снизу хватает своих 8 */
  .pchat__list { margin-top: -6px; padding-top: 6px; }
  .pchat__item { position: relative; }
  .pchat__item::after { content: ""; position: absolute; inset: -6px 0; }
  .pchat__meta { width: 24px; height: 24px; }
  .pchat__title { overflow: visible; }
  .pchat__main { padding: var(--l-s5) var(--l-s4) var(--l-s4); }
  .pchat__ask { max-width: 90%; }
  .pchat__lines { gap: var(--l-s2); }
  .pchat--live .pchat__panel[hidden] { display: none; }   /* высота по текущему ответу: под коротким не остаётся пустоты */
}
/* путь дела: пять шагов в ряд, имя под предметом, под ним строка «что происходит», «люди» цветом «прошло» (шаги ровно,
   без ступеней – Кирилл 21.09; номера сняты 30.09, порядок держат предметы).
   Над каждым словом свой предмет лестницы (Кирилл 24.09): шар становится изделием, с каждым шагом сложнее.
   Холст 512 у всех пяти общий и уже выровнен по оптическому размеру (scripts/deal-objects.py), поэтому размер
   один на все; тело занимает середину холста, сдвиг на 14,5 % ставит его левый край по краю слова.
   Предметы слегка тянутся к курсору, радиус меньше, чем в шапке и каталоге (Кирилл 24.09).
   Уже 1024px шаги идут списком: предмет слева, имя и строка справа (до 01.10 – уже 760px; с видимой строкой шага
   в ряду из пяти она на планшете переносилась по слову и ложилась на руки мужчины). */
.deal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--l-s4) var(--deal-gap); }
#promise-deal { --deal-obj: clamp(96px, 17vw, 250px); --deal-gap: var(--l-s5); }
.deal__step { display: grid; gap: var(--l-s2); align-content: start; }
.deal__obj { display: block; width: var(--deal-obj); height: auto; margin: calc(var(--deal-obj) * -0.08) 0 calc(var(--deal-obj) * -0.06) calc(var(--deal-obj) * -0.145); will-change: translate; }   /* сдвиг полем, не translate: translate занят притяжением к курсору (js/landing.js) */
.deal__name { color: var(--l-ink-2); }
.deal__step:last-child .deal__name { color: var(--l-accent-text); }
.deal__text { margin-top: calc(var(--l-s1) - var(--l-s2)); color: var(--l-ink-2); text-wrap: pretty; }   /* к имени ближе, чем имя к предмету */
/* строка шага по наведению (Кирилл 30.09, артефакт B, Д1): соседи гаснут, у наведённого проявляется строка. Место под
   строку занято всегда, поэтому ряд не прыгает. Только мышь и широкий экран, на тач-экране строка видна сразу */
@media (hover: hover) and (pointer: fine) and (width >= 1024px) {   /* границы диапазоном: при дробной ширине окна (масштаб) между 1023 и 1024 нет щели */
  .deal__step, .deal__text { transition: opacity var(--l-t-hover) var(--l-ease-out); }
  .deal__text { opacity: 0; }
  .deal:has(.deal__step:is(:hover, :focus-visible)) .deal__step:not(:hover, :focus-visible) { opacity: 0.4; }
  .deal__step:is(:hover, :focus-visible) .deal__text { opacity: 1; }
}
/* мужчина под пятым шагом (Кирилл 24.09, геометрия – соседняя сессия иллюстраций): смотрит вверх влево на
   «людей» как на готовую вещь, ладони раскрыты под рядом. Всё в долях O – ширины картинки предмета, она же
   min(--deal-obj, колонка). Центр тела на холсте 512 – центр картинки: по x колонка + 0,355 O (сдвиг −0,145),
   по y верх ряда + 0,42 O (поле −0,08). Глаз – на 0,74 O правее центра и на 0,54 O ниже (Кирилл 24.09: при 0,74 по
   диагонали взгляд попадал в низ предмета, на картине он положе 45°), в спрайте глаз на 74,1 % × 8,3 %, спрайт
   шириной 2,03 O и высотой 1,879 O: отсюда поля −0,409 O слева и 0,804 O сверху. Чтобы колонка
   мужчины совпадала с колонкой ряда, полоса секции – та же сетка в пять колонок, ряд – её подсетка.
   Спрайт стоит в потоке и тянет последнюю строку сетки (1fr), поэтому низ секции – прямой срез кадра на
   уровне бёдер; справа он выходит за экран, секция обрезает. Уже 1024px ряд становится списком, и линия
   взгляда не держится – мужчины там нет. */
.deal__man { display: none; }
@media (width >= 1024px) {
  #promise-deal { padding-bottom: 0; overflow: clip; }
  #promise-deal > .wrap { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; column-gap: var(--deal-gap);
    /* место под голову: затылок на 1,375 O правее левого края колонки, то есть на 0,375 O за её правым краем.
       Где поле за полосой уже (узкий десктоп, полоса во весь экран), ряд сужается справа, иначе лицо уходит за экран */
    padding-right: calc(var(--l-gutter) + max(0px, var(--deal-obj) * 0.375 + 8px - (100vw - min(100vw, var(--l-max))) / 2 - var(--l-gutter))); }
  #promise-deal > .wrap > :not(.deal__man) { grid-column: 1 / -1; }   /* строки явно: иначе автораскладка обходит клетку мужчины */
  #promise-deal .shead { grid-row: 1; }
  .deal { grid-row: 2; }
  #promise-deal .last { grid-row: 3; }
  .deal { grid-template-columns: subgrid; }
  .deal, #promise-deal .last { position: relative; z-index: 1; }
  /* строка «людей» кончается до лица и над руками: нос – на ~0,9 O от левого края колонки, ладони – на 1,48 O ниже
     верха ряда (O – как у .deal__man; непрозрачное в спрайте над полосой строки начинается с 36 % высоты) */
  .deal__step:last-child .deal__text { max-width: calc(min(var(--deal-obj), 100%) * 0.85); }
  .deal__man {
    --o: min(var(--deal-obj), 100%);   /* 100 % – ширина колонки: у элемента сетки и ширина, и поля считаются от неё */
    display: block; grid-column: 5; grid-row: 2 / 5; align-self: start; justify-self: start;
    /* уже 1280px строка «людей» идёт в четыре строки и ложится на ладони: мужчина опускается до 16 px (на 1024 – 15,
       взгляд уходит ниже на 0,09 O); замер – расстояние от низа строки до 36 % высоты спрайта, 01.10: от +2 до +42 px */
    --deal-drop: clamp(0px, (1280px - 100vw) * 0.06, 16px);
    width: calc(var(--o) * 2.03); max-width: none; margin: calc(var(--o) * 0.804 + var(--deal-drop)) 0 0 calc(var(--o) * -0.409);
    pointer-events: none; user-select: none;
  }
}
@media (width < 1024px) {
  .deal { --deal-obj: 112px; grid-template-columns: 1fr; gap: var(--l-s5) 0; }   /* 24 px между шагами: заголовок шага не садится на текст прошлого (Кирилл, 04.10) */
  .deal__step { grid-template-columns: calc(var(--deal-obj) * 0.72) 1fr; grid-template-rows: auto auto; align-content: center; column-gap: var(--l-s4); row-gap: 0; }   /* колонка по телу: холст шире и заходит под текст пустым краем */
  .deal__obj { grid-row: 1 / 3; align-self: center; margin-block: 0; margin-left: calc(var(--deal-obj) * -0.06); }   /* край тела – по полю текста, а не в 3 px от края экрана (02.10) */
  .deal__name { align-self: end; }
  .deal__text { align-self: start; }
}

/* ─────────────── anatomy · как устроена система ─────────────── */

/* слои слева: шесть имён сверху вниз, от агента (Кирилл, 24.09 вечер: было стопкой снизу вверх, номера читались
   обратным отсчётом 6…1), выбранный слой оранжевой заливкой
   (оранжевый = система, см. tokens.css); справа – его
   описание. Наведение и клик выбирают слой (js/landing.js, [data-anat]); без скрипта описания
   лежат стопкой справа. На узком экране – аккордеон: описание под именем */
/* седьмой ряд 1fr забирает лишнюю высоту: описание тянется через него, поэтому в размер шести рядов
   с именами оно не входит (spanning-элемент через fr-трек не участвует в intrinsic sizing) – стопка
   слева не разъезжается, каким бы высоким ни был срез справа (Кирилл, 22.09). Скрипт держит
   min-height по самому высокому описанию, чтобы секция не прыгала при ховере */
.anat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); grid-template-rows: repeat(6, auto) minmax(0, 1fr); gap: var(--l-s2) var(--l-s8); align-items: start; }
.anat__item { display: contents; }
.anat__name {
  display: flex; gap: var(--l-s3); align-items: baseline; width: 100%; text-align: left;
  padding: var(--l-s4) var(--l-s5); background: var(--hm-plate, var(--hm-tint)); border-radius: var(--l-radius-m);
  color: var(--l-ink); cursor: pointer;
  border: 0; appearance: none;
  transition: background var(--l-t-hover) var(--l-ease), color var(--l-t-hover) var(--l-ease);
}
.anat__name[aria-expanded="true"] { background: var(--l-accent-2); color: var(--l-accent-2-ink); }
.anat__name[aria-expanded="true"] .anat__n { color: inherit; opacity: 0.7; }
.anat__n { color: var(--l-accent-2-text); flex: none; min-width: 1.4em; }
.anat__have { margin-left: auto; color: var(--l-ink-mute); }
.anat__name[aria-expanded="true"] .anat__have { color: inherit; opacity: 0.7; }
/* пластины: слои въезжают снизу один за другим, когда секция в кадре (js/landing.js добавляет is-in;
   без скрипта и при reduced-motion стоят сразу). Задержка по номеру слоя – агент первым */
@media (prefers-reduced-motion: no-preference) {
  .anat:not(.is-in) .anat__name { opacity: 0; transform: translateY(28px); }
  .anat__name { transition: opacity var(--l-t-slow) var(--l-ease-out), transform var(--l-t-slow) var(--l-ease-out), background var(--l-t-hover) var(--l-ease), color var(--l-t-hover) var(--l-ease); transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s; }
}
.anat__name { grid-column: 1; }   /* имена в первой колонке по порядку, ряды 1–6; описание справа занимает все ряды */
.anat__body { grid-column: 2; grid-row: 1 / span 7; display: grid; gap: var(--l-s4); align-content: start; padding-block: var(--l-s3); }
.anat__body[hidden] { display: none; }
.anat__without { color: var(--l-ink-2); display: grid; gap: var(--l-s1); }
.anat__cap { display: block; }
/* срез харнеса под описанием слоя: реальные строки из ~/.claude, кодом, на тёмной «бумаге» (Кирилл, 22.09: «добавить мяса») */
.spec {
  margin: 0; padding: var(--l-s4) var(--l-s5); border-radius: var(--l-radius-m);
  background: var(--l-bg); color: var(--l-ink);
  font-family: var(--l-font-code); font-stretch: var(--l-stretch-code); font-size: var(--l-text-small); line-height: 1.55; letter-spacing: 0;
  white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: auto; tab-size: 4;
}
.anat__spec { margin-top: var(--l-s2); }
.anat__src { margin-top: calc(-1 * var(--l-s2)); }
/* бюст (Кирилл через соседнюю сессию, 24.09): в правом нижнем углу, в одном ряду с итоговой строкой, лицом к ней.
   Слоям места над ним нет – справа до низа полосы стоит самое высокое описание, – поэтому бюст встаёт третьим
   рядом сетки секции и растит его: итоговая строка слева сверху, бюст справа почти до нижнего края секции (поле снизу
   он съедает, кроме --hm-giant-lift). Вверх заходит на --hm-giant-up в зазор под описанием, за текст – z-index ниже. Уже 761px – нет */
.anat__giant { display: none; }
@media (min-width: 761px) {
  #anatomy { overflow: clip; }
  #anatomy > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--l-s6); }
  #anatomy > .wrap > :not(.anat__giant) { grid-column: 1 / -1; position: relative; z-index: 1; }
  #anatomy .last { grid-column: 1; grid-row: 3; align-self: start; }
  .anat__giant {
    display: grid; aspect-ratio: 405 / 640; grid-column: 2; grid-row: 3; align-self: end;
    height: var(--hm-giant-h); width: auto; max-width: none;
    margin: calc(-1 * var(--hm-giant-up)) calc(-1 * var(--hm-giant-x)) calc(var(--hm-giant-lift) - var(--l-section-y)) 0;
    pointer-events: none; user-select: none;
  }
}
/* бюст собирается по слою (А3, Кирилл 01.10; C): шесть слоев осколков друг на друге, слой k – осколки, которые
   появляются на шаге k. Выбранный слой N (кнопка с aria-expanded, js «анатомия харнеса») прячет слои старше N; без
   скрипта и до выбора видно все. Слой 1 – около 60 % бюста, каждый следующий – около 8 %, дальше от ядра */
.anat__shard { grid-area: 1 / 1; width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) { .anat__shard { transition: opacity 0.45s ease; } }
#anatomy:has(.anat__item[data-layer="1"] > .anat__name[aria-expanded="true"]) .anat__shard:nth-child(n + 2) { opacity: 0; }
#anatomy:has(.anat__item[data-layer="2"] > .anat__name[aria-expanded="true"]) .anat__shard:nth-child(n + 3) { opacity: 0; }
#anatomy:has(.anat__item[data-layer="3"] > .anat__name[aria-expanded="true"]) .anat__shard:nth-child(n + 4) { opacity: 0; }
#anatomy:has(.anat__item[data-layer="4"] > .anat__name[aria-expanded="true"]) .anat__shard:nth-child(n + 5) { opacity: 0; }
#anatomy:has(.anat__item[data-layer="5"] > .anat__name[aria-expanded="true"]) .anat__shard:nth-child(n + 6) { opacity: 0; }
/* 761–900: слои аккордеоном, описание под именем – зазора под ним нет, бюст встаёт рядом с итоговой строкой */
@media (min-width: 761px) and (max-width: 900px) { .anat__giant { margin-top: 0; } }
@media (max-width: 900px) {
  .anat { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: var(--l-s2); min-height: 0 !important; }
  .anat__item { display: grid; gap: var(--l-s2); }
  .anat__body { grid-column: auto; grid-row: auto; padding: var(--l-s2) var(--l-s5) var(--l-s4); }
}

/* ─────────────── weeks · программа: ряд недель и общее ─────────────── */

/* ряд недель (25.09): кадр во всю ширину секции, низ кадра – низ секции; высоту задаёт слой людей (width/height
   в разметке). Широкий кадр 1440 × 640, до 700 px – узкий 700 × 440, ничего не режется. Тела – проценты кадра из
   scripts/weeks-rail.py, сдвиг от курсора – translate */
#weeks { overflow: clip; padding-bottom: 0; }
#weeks .last { color: #eaeaea; }
#weeks > .wrap { padding-bottom: var(--l-s4); }
.wk-rail { margin: 0; pointer-events: none; }
.wk-rail__frame { position: relative; display: block; }
.wk-rail__frame--narrow { display: none; }
@media (max-width: 700px) {
  .wk-rail__frame--wide { display: none; }
  .wk-rail__frame--narrow { display: block; }
}
.wk-rail__people { display: block; width: 100%; height: auto; }
.wk-rail__body { position: absolute; height: auto; will-change: translate; }
.wk-rail__body[data-motion="sway"] { will-change: rotate; }   /* звезда на пальце: только поворот вокруг острия, transform-origin в разметке */

/* недели, ритм и «после» – общее для разметки гармошки (blocks/weeks-garmoshka.html): подписи, «учим» и «делаешь»,
   итог недели, день ритма, кто ведет */
.wk__when { color: var(--l-ink-mute); }
.wk__teach, .wk__do { color: var(--l-ink-2); display: grid; gap: var(--l-s1); }
/* «учим» открыт всегда, как «делаешь» (Кирилл, 29.09; с 21.09 до этого был свёрнут до бирки «учим +») */
.wk__cap { display: block; }
.wk__cap--teach { color: var(--l-accent-2-text); }
.wk__cap--do { color: var(--l-accent-text); }
.wk__result { color: var(--l-ink); display: flex; gap: var(--l-s2); align-items: baseline; }
.wk__ok { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--l-ok); transform: translateY(-1px); }
.rhythm__d { margin: 0; }
.rhythm__what { color: var(--l-ink-2); }
.rhythm__h { display: flex; gap: 4px; min-height: 14px; align-self: center; }   /* квадратик = час занятий в этот день; половинка = 30 минут (Кирилл, 22.09) */
.rhythm__h i { display: block; width: 14px; height: 14px; border-radius: 3px; background: var(--l-accent); }
.rhythm__h i.is-half { width: 7px; }
/* кто ведёт день: аватарка Кирилла или Саши, у куратора и гостя – буква на пластине (идея из r4 Алекса, h09) */
.rhythm__who { display: flex; gap: var(--l-s2); align-items: center; color: var(--l-ink-2); }
.rhythm__ava { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.rhythm__ava--mark { display: grid; place-items: center; background: color-mix(in oklab, var(--l-accent) 22%, var(--l-bg)); color: var(--l-ink); font-family: var(--l-font-display); font-stretch: var(--l-stretch-display); font-weight: 600; font-size: var(--l-text-small); line-height: 1; }
.aft__text { color: var(--l-ink-2); max-width: var(--l-measure); }

/* ─────────────── guides · кто ведёт ─────────────── */

/* две колонки, человек и его проекты (Кирилл 30.09, артефакт B, Г1; было две секции: «кто ведёт» и «что кирилл
   довёл»). Сверху шапка человека, под ней бирка колонки и карточки. У кирилла – продукты 2 × 2 с иконкой слева, медиа
   (каналы и журналус, агент продаж, колода, скиллы), у саши – шесть карточек и строка про гостей под ними (вариант
   «б»). Поля внутри карточек плотные (Кирилл 30.09: на скринах были слишком большие) – 16 px.
   Ряды сеток не тянутся до общего низа колонок: растянутый ряд давал пустые верхи карточек. Оттенки как у цены, без обводок.
   01.10 (Кирилл, правки из Eagle: «практически все получилось неаккуратно»): у колонок общие ряды – человек, бирка,
   подпись, карточки (subgrid), поэтому карточки обоих начинаются с одного уровня; фото – в правом верхнем углу шапки;
   иконки продуктов – над названием; у саши крупные платформа и apps, sonic particles и myth trace – меньше, в ряд.
   Уже 900 px колонки встают друг под другом: саша сразу за своей шапкой, после карточек кирилла */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); gap: 0 var(--l-s6); }
.duo__col { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; min-width: 0; }
.duo__col > * { min-width: 0; }
.duo__work { grid-row: 4; }
.duo__more { display: none; margin-top: var(--l-s4); }
.duo__more[hidden] { display: none; }
.duo__guests { margin-top: var(--l-s5); color: var(--l-ink-2); max-width: var(--l-measure); }
.person { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: var(--l-s4); align-items: start; margin-bottom: var(--l-s6); }
.person__photo { --sq-r: var(--l-radius-m); grid-column: 2; grid-row: 1; width: 96px; height: 96px; object-fit: cover; border-radius: var(--l-radius-m); }
.person__body { grid-column: 1; grid-row: 1; }
.person__body { display: grid; gap: var(--l-s3); }
.person__lines { display: grid; gap: var(--l-s2); }
.person__lines li { color: var(--l-ink-2); }
.person__role a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }   /* Кирилл, 24.09: «ссылку на сайт сделать ссылкой» */
.person__role a:hover { color: var(--l-accent-text); }
.mk-cap { margin-bottom: var(--l-s2); }
.mk-src { margin-bottom: var(--l-s3); color: var(--l-ink-mute); }
.mk + .mk-src { margin-top: var(--l-s5); }
.mk { display: grid; gap: var(--l-s2); grid-template-columns: repeat(6, minmax(0, 1fr)); }
.mk--products { grid-template-areas: "p1 p1 p1 p2 p2 p2" "p3 p3 p3 p4 p4 p4"; }
.mk--media { grid-template-areas: "m2 m2 m2 m2 m1 m1" "m3 m3 m3 m3 m3 m3" "m4 m4 m4 m4 m4 m4" "m5 m5 m5 m5 m5 m5"; }
.mk--sasha { grid-template-areas: "s1 s1 s1 s1 s1 s1" "s2 s2 s2 s2 s2 s2" "s3 s3 s3 s4 s4 s4" "s5 s5 s5 s5 s5 s5" "s6 s6 s6 s6 s6 s6"; }
.mk__card {
  display: flex; flex-direction: column; min-width: 0; overflow: clip;
  border-radius: var(--l-radius-l); background: color-mix(in oklab, var(--l-bg), var(--l-ink) 6%);
}
.mk__body { display: flex; flex-direction: column; gap: var(--l-s2); margin-top: auto; padding: var(--l-s4); }
/* продукты: иконка приложения отдельным блоком, справа с отступом – карточка с названием и текстом (Кирилл, 30.09 – иконки
   вместо скриншотов; 01.10 – иконка отделена от текста и крупнее, 64 px). Между колонками сетки шаг шире отступа иконки –
   иконка читается со своей карточкой, не с соседней. Исходники квадратные в край, форму даёт маска – суперэллипс n = 5,
   контур иконок iOS. Он нарочно другой, чем у плашек сайта (k = 2.4, css/base.css): иконка читается как приложение.
   filter на картинке не ставить – маска его срезает */
.mk--products { column-gap: var(--l-s5); }
.mk__app { display: flex; align-items: flex-start; gap: var(--l-s3); min-width: 0; }
.mk__app .mk__card { flex: 1 1 0; align-self: stretch; }
.mk__app .mk__body { gap: var(--l-s1); margin-top: 0; }
/* в колонке уже 600 px карточка рядом с иконкой сжимается до 150–200 px – продукты встают по одному в строку.
   Порог по ширине колонки, не экрана: на 901–1390 колонка узкая, на 701–900 колонка во всю ширину и снова две в ряд */
.duo__work { container-type: inline-size; }
@container (width < 600px) {
  .mk--products { grid-template-columns: minmax(0, 1fr); grid-template-areas: "p1" "p2" "p3" "p4"; }
}
.mk__icon {
  --mk-squircle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M100 50L99.9 68.8L99.7 74.8L99.3 79.1L98.8 82.6L98.1 85.4L97.2 87.9L96.2 90L94.9 91.9L93.5 93.5L91.9 94.9L90 96.2L87.9 97.2L85.4 98.1L82.6 98.8L79.1 99.3L74.8 99.7L68.8 99.9L50 100L31.2 99.9L25.2 99.7L20.9 99.3L17.4 98.8L14.6 98.1L12.1 97.2L10 96.2L8.1 94.9L6.5 93.5L5.1 91.9L3.8 90L2.8 87.9L1.9 85.4L1.2 82.6L0.7 79.1L0.3 74.8L0.1 68.8L0 50L0.1 31.2L0.3 25.2L0.7 20.9L1.2 17.4L1.9 14.6L2.8 12.1L3.8 10L5.1 8.1L6.5 6.5L8.1 5.1L10 3.8L12.1 2.8L14.6 1.9L17.4 1.2L20.9 0.7L25.2 0.3L31.2 0.1L50 0L68.8 0.1L74.8 0.3L79.1 0.7L82.6 1.2L85.4 1.9L87.9 2.8L90 3.8L91.9 5.1L93.5 6.5L94.9 8.1L96.2 10L97.2 12.1L98.1 14.6L98.8 17.4L99.3 20.9L99.7 25.2L99.9 31.2Z'/%3E%3C/svg%3E");
  display: block; flex: none; width: 64px; aspect-ratio: 1;
  transition: translate var(--l-t-hover) var(--l-ease-out);
}
.mk__icon img {
  display: block; width: 100%; height: 100%;
  -webkit-mask: var(--mk-squircle) center / 100% 100% no-repeat; mask: var(--mk-squircle) center / 100% 100% no-repeat;
}
.mk__app:hover .mk__icon { translate: 0 -2px; }
.mk__name a { color: inherit; text-decoration: none; }
.mk__name a:hover { color: var(--l-accent-text); }
.mk__what { color: var(--l-ink-2); max-width: var(--l-measure); }
/* рациональные числа: колода из пяти графиков канала (Кирилл, 30.09: «пишем про конвейер, а показываем одну картинку»).
   Листы стопкой, задние выглядывают справа-сверху, пятый лежит точно под четвёртым. Передний уходит влево и встаёт
   в конец, стопка подаёт следующий: движение в одну сторону читается как конвейер (js/landing.js). Лист вписан в слот
   по высоте или по ширине, что меньше: контейнерные единицы. Штрихи сверху – такт автолистания */
.mk__deck {
  --dx: 12px; --dy: 9px; --ds: 0.04;                          /* сдвиг и уменьшение листа на шаг вглубь */
  --pad: var(--l-s4); --top: calc(var(--l-s4) + 3px + var(--l-s3));   /* сверху штрихи и зазор под ними */
  --deck-t: 2800ms;                                           /* показ одного графика */
  position: relative; display: block; flex: none; width: 100%; aspect-ratio: 3 / 4;   /* высота своя: у контейнера size высота
     только из min-height даёт 100cqh = 0 (было, пока колода стояла на два ряда сетки) */
  container-type: size; padding: 0; border: 0; background: none; cursor: pointer; text-align: left;
}
.mk__deck:focus-visible { outline: var(--l-focus) solid var(--l-accent); outline-offset: -3px; }   /* карточка режет выступающее */
.mk__sheet, .mk__ticks {
  --sh: min(calc(100cqh - var(--top) - 3 * var(--dy) - var(--pad)), calc((100cqw - 2 * var(--pad) - 3 * var(--dx)) * 1040 / 720));
  --sw: calc(var(--sh) * 720 / 1040);
  --x0: calc((100cqw - var(--sw) - 3 * var(--dx)) / 2);
}
.mk__sheet {
  --k: min(var(--d), 3);                                      /* глубина на экране: 4-й и 5-й лежат в одном месте */
  position: absolute; left: var(--x0); bottom: var(--pad); z-index: calc(10 - var(--d));
  width: var(--sw); height: var(--sh); border-radius: var(--l-radius-s); background: #fbfaf7;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2), 0 10px 24px -10px rgb(0 0 0 / 0.5);
  transform-origin: 100% 0;
  transform: translate(calc(var(--k) * var(--dx)), calc(var(--k) * var(--dy) * -1)) scale(calc(1 - var(--k) * var(--ds)));
  filter: brightness(calc(1 - var(--k) * 0.1)); opacity: clamp(0, 4 - var(--d), 1);
  transition: transform calc(var(--l-t-base) * 1.25) var(--l-ease-out), filter calc(var(--l-t-base) * 1.25) var(--l-ease-out),
    opacity calc(var(--l-t-base) * 1.25) var(--l-ease-out);
}
.mk__sheet.is-out { z-index: 20; transform: translate(-60%, 0) rotate(-4deg); opacity: 0; transition-duration: var(--l-t-base); }
.mk__sheet.is-reset { transition: none; }
.mk__ticks { position: absolute; top: var(--l-s4); left: var(--x0); display: flex; gap: 4px; width: calc(var(--sw) + 3 * var(--dx)); }
.mk__tick { flex: 1; height: 3px; overflow: hidden; border-radius: 2px; background: color-mix(in oklab, var(--l-ink) 18%, transparent); }
.mk__tick > span { display: block; height: 100%; background: var(--l-ink-2); transform: scaleX(0); transform-origin: 0 0; }
.mk__tick.is-done > span, .mk__deck.is-manual .mk__tick.is-now > span { transform: none; }
.mk__tick.is-run > span { animation: mk-tick var(--deck-t) linear forwards; }
.mk__deck.is-paused .mk__tick > span { animation-play-state: paused; }
@keyframes mk-tick { to { transform: none; } }
/* колода слева, текст справа по низу: карточка во всю ширину колонки, высота – по колоде */
.mk--media .mk__card:has(.mk__deck) { flex-direction: row; align-items: flex-end; }
.mk--media .mk__card:has(.mk__deck) .mk__deck { width: 42%; }
.mk--media .mk__card:has(.mk__deck) .mk__body { flex: 1 1 0; margin-top: 0; }
/* каналы и журналус: аватарки крупно (у каналов веером), цифра дисплеем */
.mk__avas { --mk-ava: clamp(44px, 3.6vw, 56px); display: flex; padding: var(--l-s4) var(--l-s4) 0; }
.mk__ava { position: relative; z-index: calc(20 - var(--i, 0)); width: var(--mk-ava); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px color-mix(in oklab, var(--l-bg), var(--l-ink) 6%); }
.mk__ava + .mk__ava { margin-left: calc(var(--mk-ava) * -0.28); }
.mk__fig + .mk__what { margin-top: calc(-1 * var(--l-s1)); }
.mk__names { color: var(--l-ink-mute); }
.mk__names span + span::before { content: " · "; }
/* агент продаж: заголовок и текст сверху, под ними цепочка шагов из его же текста, прижата к низу карточки.
   «да» кирилла – не шаг цепочки, а правило нижней строкой: оно стоит перед каждой отправкой клиенту и в канал
   (Кирилл 25.09: «да» последним шагом выглядело нелогично; зелёную подложку убрал; заголовок под схемой смотрелся странно) */
.mk__card--gate .mk__body { margin-top: 0; padding-bottom: 0; }
.mk__gate { margin-top: auto; padding: var(--l-s4); }
.mk__rule { display: flex; align-items: center; gap: 0.55em; margin-top: var(--l-s3); color: var(--l-accent-text); }
.mk__rule::before {
  content: "✓"; display: grid; place-items: center; flex: none; width: 1.5em; height: 1.5em; border-radius: 50%;
  background: var(--l-accent); color: var(--l-accent-ink); font-size: 0.85em; font-weight: 700;
}
.mk__gate .mk__steps { padding: 0; }
.mk__steps { display: flex; flex-wrap: wrap; align-content: flex-start; gap: var(--l-s2) 0; margin: 0; padding: var(--l-s4) var(--l-s4) 0; list-style: none; }
.mk__steps li {
  position: relative; margin-right: 1.8em; padding: 0.35em 0.85em; border-radius: 999px;
  background: color-mix(in oklab, var(--l-bg), var(--l-ink) 12%); color: var(--l-ink);
}
.mk__steps li:not(:last-child)::after { content: "→"; position: absolute; left: calc(100% + 0.4em); color: var(--l-ink-mute); }
.mk__steps li:last-child { margin-right: 0; }
/* скиллы кирилла карточкой (Кирилл 30.09): с 01.10 вместо цифры – девять тегов со слэшем, как команды, в тонкой
   оранжевой рамке; каждый – ссылка на папку скилла. Рамка в покое полупрозрачная, под курсором или фокусом – полным
   цветом и с легкой заливкой (Кирилл, 01.10; как чипы скиллов на kirill.green, .ledger-badge в css/custom.css сайта).
   Скругление – как у кнопок (--l-btn-radius), поля плотнее (Кирилл, 01.10 вечер: с 4 px теги выбивались прямоугольниками) */
.mk__tags { display: flex; flex-wrap: wrap; gap: var(--l-s2); margin: var(--l-s1) 0 var(--l-s2); padding: 0; list-style: none; }
.mk__tags a {
  display: block; padding: 0.2em 0.55em; border: 1px solid color-mix(in oklab, var(--l-accent-2) 35%, transparent); border-radius: var(--l-btn-radius);
  color: var(--l-ink); text-decoration: none;
  transition: background-color var(--l-t-hover) var(--l-ease-out), border-color var(--l-t-hover) var(--l-ease-out);
}
.mk__tags a:is(:hover, :focus-visible) { border-color: var(--l-accent-2); background: color-mix(in oklab, var(--l-accent-2) 12%, transparent); }
/* карточки саши: крупные (big) – платформа, apps и marketing {sprint}, во всю ширину колонки, поле больше; у apps ряд
   воксельных иконок семейства, как на apps.aimindset.org, на всю ширину карточки (Кирилл, 01.10: «в три раза больше» –
   до 192 px в высоту; на 1440 ряд упирается в ширину карточки: 133 px, вдвое больше прежних 64). sonic particles и myth trace – меньше, в один ряд, картинка в край
   сверху в одной пропорции 16 : 9 (кадр частиц обрезан по краям). У крупной картинка в своей пропорции – обложка
   спринта 1200 × 630 целиком, с надписями по краям. Текст прижат к низу */
.mk__pic { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.mk__vox { display: flex; flex-wrap: wrap; gap: var(--l-s2); padding: var(--l-s4) var(--l-s4) 0; }
.mk__vox img { width: auto; height: 48px; }
.mk__card--big .mk__body { padding: var(--l-s5); }
.mk__card--big .mk__pic { aspect-ratio: auto; }
/* иконки одной высоты, ряд на всю ширину карточки: высота – ширина ряда без зазоров, деленная на 3.92 – сумму
   пропорций (ширина / высота по viewBox) пяти иконок apps-*.svg. Поменялся набор – пересчитать */
.mk__card--big .mk__vox { container-type: inline-size; flex-wrap: nowrap; justify-content: space-between; gap: var(--l-s3); padding: var(--l-s5) var(--l-s5) 0; }
.mk__card--big .mk__vox img { height: min(192px, (100cqi - 4 * var(--l-s3)) / 3.92); }
@media (max-width: 900px) {
  .duo { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: var(--l-s7); }
  .duo__col { display: flex; flex-direction: column; grid-row: auto; }
}
@media (max-width: 700px) {
  .duo__more:not([hidden]) { display: inline-flex; }
  [data-duo-work="kirya"].is-collapsed > :is(.mk-src, .mk--media) { display: none; }
  [data-duo-work="sasha"].is-collapsed .mk--sasha { grid-template-areas: "s1"; }
  [data-duo-work="sasha"].is-collapsed .mk--sasha > :not(:first-child),
  [data-duo-work="sasha"].is-collapsed > .duo__guests { display: none; }
  .mk { grid-template-columns: minmax(0, 1fr); }
  .mk--media { grid-template-areas: "m2" "m1" "m3" "m4" "m5"; }
  .mk--products { grid-template-areas: "p1" "p2" "p3" "p4"; }   /* до 700 px продукты по одному в строку: на 624–700 колонка шире 600 px, контейнерный порог выше не срабатывает, и области в шесть столбцов давали неявные колонки (07.10) */
  .mk--media .mk__card:has(.mk__deck) { flex-direction: column; align-items: stretch; }
  .mk--media .mk__card:has(.mk__deck) .mk__deck { width: 100%; }
  .mk--sasha { grid-template-areas: "s1" "s2" "s3" "s4" "s5" "s6"; }
  /* телефон: колода в родной пропорции графика, задние листы выглядывают только сверху – передний шире и читается */
  .mk__deck { --dx: 0px; --dy: 7px; --ds: 0.03; --pad: var(--l-s3); --top: calc(var(--l-s3) + 3px + var(--l-s3)); flex: none; min-height: 0; aspect-ratio: 1080 / 1560; }
  .mk__ticks { top: var(--l-s3); }
}
@media (max-width: 620px) {
  .person { grid-template-columns: minmax(0, 1fr) 72px; gap: var(--l-s3); }
  .person__photo { width: 72px; height: 72px; }
}

/* ─────────────── weeks-garmoshka · программа гармошкой ───────────────
   Программа на core-human (Кирилл 02.10 выбрал ее вместо календаря Н2 и полки; эскиз Саши –
   code/landings/lab/after-timeline.html, вариант 2); разметка – blocks/weeks-garmoshka.html, поведение – js/landing.js. Восемь отрезков:
   подготовка, три недели, demo day, чек-ины, обновления харнеса, «дальше». Раскладки:
   – база (без скрипта, его ошибка, «уменьшить движение» уже 1200 px): строки, все раскрыты;
   – от 1200 px с .is-live: колонки одной сетки, открытая – 9fr, закрытые – 1fr; доли ставит скрипт, переход – здесь.
     Окно вмещает гармошку – колонки открывает прокрутка (скроллителлинг гармошки, ниже);
     Текст открытой колонки фиксированной ширины (доля 9/16 ширины сетки за вычетом зазоров, cqw), поэтому на ходу
     не переливается; тексты закрытых колонок стоят в раскладке невидимыми, и высота ряда – самый высокий текст,
     одна при любой открытой колонке, страница под курсором не прыгает;
   – уже 1200 px с .is-live: строки свернуты до шапки, скрипт раскрывает их по прокрутке.
   Зоны – заливкой, как в Н2: подготовка оранжевая (ставится система), недели зеленые, demo day ярче, обновления
   харнеса светло-оранжевые, «дальше» тает вправо. Дорожки внизу колонок – полосами, подписи видны в открытой */
.gm {
  --gm-gap: 4px;
  --gm-pad: 14px;
  --gm-open: 9;                                                          /* доля открытой колонки; закрытые – 1, всего 9 + 7 */
  --gm-sys: color-mix(in srgb, var(--l-accent-2) 16%, var(--hm-under, transparent));
  --gm-wk: color-mix(in srgb, var(--l-accent) 12%, var(--hm-under, transparent));
  --gm-demo: color-mix(in srgb, var(--l-accent) 24%, var(--hm-under, transparent));
  --gm-upd: color-mix(in srgb, var(--l-accent-2) 9%, var(--hm-under, transparent));
  --gm-long: color-mix(in oklab, var(--l-ink) 42%, transparent);        /* дорожка платформы: тише зеленого */
  --gm-older: color-mix(in oklab, var(--l-ink) 26%, transparent);       /* сообщество: фон, который был и будет */
  display: grid; gap: var(--gm-gap);
}
.gm__col { --gm-bg: var(--hm-plate, var(--hm-tint)); border-radius: var(--l-radius-s); background: var(--gm-bg); }
.gm__col--prep { --gm-bg: var(--gm-sys); }
.gm__col--lab { --gm-bg: var(--gm-wk); }
.gm__col--demo { --gm-bg: var(--gm-demo); }
.gm__col--harness { --gm-bg: var(--gm-upd); }
.gm__col--on { background: linear-gradient(to right, var(--hm-plate, var(--hm-tint)), var(--hm-under, transparent)); }
/* шапка отрезка: номер, имя, даты. Кнопка без своего оформления; рамка фокуса – на всей колонке */
.gm__head {
  display: grid; grid-template-columns: minmax(3rem, max-content) minmax(0, 1fr); align-items: baseline; gap: var(--l-s1) var(--l-s3); width: 100%;
  margin: 0; padding: var(--l-s3) var(--gm-pad); border: 0; border-radius: inherit; background: none; text-align: left; cursor: default;
}
.gm__head:focus-visible { outline: 0; }
.gm__col:has(.gm__head:focus-visible) { outline: var(--l-focus) solid var(--l-accent); outline-offset: 2px; }
.gm__num { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--l-s3); color: var(--l-accent-text); }
.gm__col--prep .gm__num { color: var(--l-accent-2-text); }
.gm__col--harness .gm__num, .gm__col--on .gm__num { color: var(--l-ink-mute); }
.gm__n { display: inline-flex; align-items: center; gap: 6px; }
/* события: demo day – зеленый ромб, чек-ин – зеленая точка, конец 60 дней – оранжевая точка (как в Н2) */
.gm__ev { display: block; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--l-accent); }
.gm__ev--d60 { width: 8px; height: 8px; background: var(--l-accent-2); }
.gm__ev--demo { width: 14px; height: 14px; margin: 0 4px; border-radius: 2px; rotate: 45deg; }
.gm__spine { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--l-s3); }
.gm__name { color: var(--l-ink); }
.gm__sub { color: var(--l-ink-mute); }
.gm__dates { display: block; }   /* Кирилл, 06.10: даты лабы – первой строкой заголовка программы */
/* текст отрезка: в строке под шапкой, сворачивается сеткой 1fr → 0fr */
.gm__fold { display: grid; grid-template-rows: 1fr; }
.gm__body { min-height: 0; overflow: hidden; padding: 0 var(--gm-pad); }
.gm__body > * { max-width: var(--l-measure); margin: 0 0 var(--l-s3); }
.gm__body > :last-child { margin-bottom: var(--gm-pad); }
.gm__when, .gm__title { display: none; }   /* в строке их повторяет шапка */
.gm .aft__head { margin-top: var(--l-s4); }
.gm .aft__head:first-child { margin-top: 0; }
.gm__rails { display: none; }
.gm__glabel { margin: var(--l-s5) 0 var(--l-s1); color: var(--l-ink-mute); }
.gm__glabel--sprint { color: var(--l-accent-text); }
/* смена раскладки и раскрытие строк, проскочивших выше экрана, – без переходов (js/landing.js, на два кадра) */
.gm--still, .gm--still *, .gm__col--snap, .gm__col--snap * { transition: none !important; }

/* скроллителлинг гармошки (Кирилл 02.10): от 1200 px прокрутка страницы открывает отрезки по порядку. Трек – заголовок
   с гармошкой плюс шаг прокрутки на отрезок (::after); --gm-n и высоту закрепленного --gm-h ставит js/landing.js. Пока
   трек идет через экран, блок стоит посередине между шапкой страницы (--l-bar-h) и низом окна, после последнего
   отрезка уходит вверх и открывает ритм недели. Окно ниже заголовка с гармошкой (.gm-track--short) – закреплена одна
   гармошка, заголовок уходит потоком; не помещается и она – классов нет, колонки открывает наведение */
.gm-track {
  --gm-bar: var(--l-bar-h, 0px);
  --gm-pin-gap: var(--l-s5);  /* наименьшее поле над закрепленным блоком и под ним */
  --gm-step-y: 50svh;         /* прокрутка на один отрезок, как у окна харнеса */
  --gm-top: calc(var(--gm-bar) + max(var(--gm-pin-gap), (100svh - var(--gm-bar) - var(--gm-h, 0px)) / 2));
}
.gm-track--scrolly::after { content: ""; display: block; height: calc(var(--gm-n, 8) * var(--gm-step-y)); }
.gm-track--scrolly .gm-stick { position: sticky; top: var(--gm-top); }
.gm-track--scrolly.gm-track--short .gm-stick { display: contents; }
.gm-track--scrolly.gm-track--short .gm { position: sticky; top: var(--gm-top); }

/* уже 1200 px со скриптом: строки свернуты, раскрываются по прокрутке и по нажатию */
@media (width < 1200px) {
  .gm.is-live .gm__head { cursor: pointer; }
  .gm.is-live .gm__fold { transition: grid-template-rows var(--l-t-slow) var(--l-ease-out); }
  .gm.is-live .gm__body { transition: opacity var(--l-t-slow) var(--l-ease) 80ms, visibility 0s; }
  .gm.is-live .gm__col:not(.is-open) .gm__fold { grid-template-rows: 0fr; }
  .gm.is-live .gm__col:not(.is-open) .gm__body { opacity: 0; visibility: hidden; transition: opacity var(--l-t-base) var(--l-ease), visibility 0s linear var(--l-t-slow); }
}

/* от 1200 px со скриптом: колонки. Сетка: строка подписей групп и строка колонок; колонки ложатся по порядку */
@media (width >= 1200px) {
  .gm.is-live {
    container-type: inline-size;
    grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 9fr) repeat(3, minmax(0, 1fr));
    grid-template-rows: [grp] auto [col] auto;
    row-gap: 0;
    transition: grid-template-columns var(--l-t-slow) var(--l-ease-out);
  }
  .gm.is-live .gm__glabel { grid-row: grp; min-width: 0; margin: 0; padding: 0 var(--gm-pad) var(--l-s2); white-space: nowrap; }
  .gm.is-live .gm__glabel--sprint { grid-column: 2 / 6; }
  .gm.is-live .gm__glabel--after { grid-column: 6 / -1; }
  .gm.is-live .gm__col {
    grid-row: col; position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; cursor: pointer;
    transition: box-shadow var(--l-t-hover) var(--l-ease);
  }
  .gm.is-live .gm__col:not(.is-open):hover { box-shadow: inset 0 0 0 100vmax var(--hm-tint); }   /* заливка поверх фона колонки */
  .gm.is-live .gm__head { position: relative; flex: none; display: block; padding: var(--gm-pad) var(--gm-pad) 0; cursor: pointer; }
  .gm.is-live .gm__num { flex-direction: column; align-items: flex-start; gap: 2px; white-space: nowrap; }
  /* корешок: имя отрезка вертикально под номером, пока колонка закрыта */
  .gm.is-live .gm__spine { position: absolute; top: calc(100% + var(--l-s3)); left: var(--gm-pad); display: block; writing-mode: vertical-rl; white-space: nowrap; transition: opacity var(--l-t-base) var(--l-ease); }
  .gm.is-live .gm__sub { display: none; }   /* даты – в тексте открытой колонки */
  .gm.is-live .gm__col.is-open .gm__spine { opacity: 0; }
  .gm.is-live .gm__fold { display: block; flex: 1 0 auto; }
  .gm.is-live .gm__body {
    width: min(34rem + 2 * var(--gm-pad), (100cqw - 7 * var(--gm-gap)) * var(--gm-open) / (var(--gm-open) + 7));
    overflow: visible; padding-top: var(--l-s4); opacity: 0; visibility: hidden; translate: 0 6px;
    transition: opacity var(--l-t-hover) var(--l-ease), translate var(--l-t-base) var(--l-ease), visibility 0s linear var(--l-t-hover);
  }
  .gm.is-live .gm__col.is-open .gm__body {
    opacity: 1; visibility: visible; translate: 0 0;
    transition: opacity var(--l-t-base) var(--l-ease) 140ms, translate var(--l-t-slow) var(--l-ease-out) 140ms, visibility 0s;
  }
  .gm.is-live :is(.gm__when, .gm__title) { display: block; }
  /* дорожки: что с тобой в этот отрезок. Полоса по всей ширине колонки, соседние колонки дают одну дорожку с зазорами */
  .gm.is-live .gm__rails { display: grid; margin-top: auto; padding: var(--l-s4) 0 var(--gm-pad); }
  .gm__rail { position: relative; height: 24px; }
  .gm__rail i { position: absolute; inset: auto 0 4px; height: 6px; background: var(--gm-rc); }
  .gm__rail em { position: absolute; left: var(--gm-pad); bottom: 14px; font-style: normal; white-space: nowrap; color: var(--l-ink-2); opacity: 0; transition: opacity var(--l-t-hover) var(--l-ease); }
  .gm.is-live .gm__col.is-open .gm__rail em { opacity: 1; transition: opacity var(--l-t-base) var(--l-ease) 140ms; }
  .gm__rail--calls { display: none; }   /* чек-ины показаны точками у номеров */
  .gm__rail--harness { --gm-rc: var(--l-accent-2); }
  .gm__rail--harness i { height: 10px; }
  .gm__rail--forever { --gm-rc: var(--gm-long); }
  .gm__rail--always { --gm-rc: var(--gm-older); }
  /* обновления харнеса – с demo day, платформа – с недели 01, сообщество было до лабы и остается после */
  :is(.gm__col--prep, .gm__col--lab) .gm__rail--harness > *, .gm__col--prep .gm__rail--forever > * { display: none; }
  .gm__col--demo .gm__rail--harness i, .gm__col--lab[data-k="w1"] .gm__rail--forever i { border-radius: 999px 0 0 999px; }
  .gm__col--prep .gm__rail--always i { background: linear-gradient(to right, transparent, var(--gm-rc)); }
  .gm__col--on .gm__rail i { background: linear-gradient(to right, var(--gm-rc), transparent); }
}

/* ритм недели под гармошкой: шесть карточек дня */
.gm-days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--l-s2); }
.gm-days__head { margin: var(--l-s7) 0 var(--l-s4); }
.gm-day { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: start; gap: var(--l-s2) var(--l-s3); padding: var(--l-s4); border-radius: var(--l-radius-m); background: var(--hm-plate, var(--hm-tint)); }
/* Тонкая граница отделяет карточки ритма и цены от тёмной страницы. */
.gm-day, .pr__card--main { border: 1px solid rgba(255, 255, 255, .08); }
.gm-day :is(.rhythm__who, .rhythm__what) { grid-column: 1 / -1; }
.gm-day .rhythm__what { margin: 0; }
.gm-days + .last { margin-top: var(--l-s7); }
@media (width < 1024px) { .gm-days { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (width < 701px) {
  .gm-days {
    grid-auto-flow: column; grid-auto-columns: 48%; grid-template-columns: none;
    width: 100%; overflow-x: auto; overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .gm-days::-webkit-scrollbar { display: none; }
  .gm-days:focus-visible { outline: var(--l-focus) solid var(--l-accent); outline-offset: 2px; }
  .gm-day { min-width: 0; scroll-snap-align: start; }
}
@media (width < 381px) { .gm-days { grid-auto-columns: 64%; } }

/* стили текста (js/type-roles.js): номер и имя отрезка – заголовок пункта; даты и подписи дорожек – надпись */
.gm__num, .gm__name { font-family: var(--l-h3-font); font-stretch: var(--l-h3-stretch); font-weight: var(--l-h3-weight); font-size: var(--l-h3-size); line-height: var(--l-h3-leading); letter-spacing: var(--l-h3-tracking); }
.gm__sub, .gm__rail em { 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); text-transform: none; }

/* ─────────────── entry · с чего входишь ─────────────── */

/* три входа – три колонки, в каждой ситуация и что с ней делаем (Кирилл, 24.09 вечер: были строками);
   число колонок – по числу входов. На узком экране – снова столбиком */
.fin--cols { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--l-s8); }
.fin--cols .fin__row { grid-template-columns: minmax(0, 1fr); gap: var(--l-s3); align-content: start; }
@media (max-width: 760px) { .fin--cols { grid-auto-flow: row; gap: 0; } }
/* откуда стартуешь (Кирилл 29.09): над каждой строкой тело, на одно измерение больше предыдущего – рамка, куб,
   тессеракт. Высота у всех одна, ширина своя, левый край тела – по краю текста (scripts/entry-objects.py режет по
   контуру). Тела слегка тянутся к курсору, как лестница дела (js/landing.js) */
.fin__obj { display: block; height: var(--entry-obj, clamp(120px, 12vw, 180px)); width: auto; margin-bottom: var(--l-s3); will-change: translate; }
@media (max-width: 760px) { #entry { --entry-obj: 112px; } }

/* ─────────────── limits · чего не будет ─────────────── */

/* переверстка 25.09 (Кирилл: «давай ещё переверстаем», вслед за ценой карточками), 30.09 – Л2 из артефакта B:
   три слоя сверху вниз. «мы не обещаем» – пять карточек с оранжевым крестом, у каждой строка «почему»;
   «лаба не подходит, если» – четыре карточки ниже и тише (вариант «а»); вывод – широкая карточка, оранжевым.
   Оттенки карточек те же, что у цены: фон + чернила, без обводок; под ними сетка точек, поэтому непрозрачные */
.lim { display: grid; gap: var(--l-s7); }
.lim__head { margin-bottom: var(--l-s4); padding-inline: var(--l-s2); }
.lim__list { display: grid; gap: var(--l-s3); }
.lim__group--1 .lim__list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
@media (min-width: 768px) {   /* без гармошки пять карточек – три и две, без сироты в последнем ряду */
  .lim__group--1 .lim__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lim__group--1 li { grid-column: span 2; }
  .lim__group--1 li:nth-child(n + 4) { grid-column: span 3; }
}
.lim__group--1 li {
  position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--l-s3);
  padding: var(--l-s4); color: var(--l-ink); text-wrap: pretty;
}
.lim__group--1 li::after {   /* заливка карточки отдельным слоем: её верх двигается, текст – нет */
  content: ""; position: absolute; inset: var(--lim-lift, 0px) 0 0; z-index: -1;
  border-radius: var(--l-radius-l); background: color-mix(in oklab, var(--l-bg), var(--l-ink) 6%);
}
.lim__t { display: flex; flex-direction: column; gap: var(--l-s3); min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.lim__t::before { content: "×"; font-family: var(--l-font-body); font-stretch: var(--l-stretch-body); font-weight: 400; font-size: 0.8em; line-height: 1; color: var(--l-accent-2-text); }
.lim__why { color: var(--l-ink-2); }
/* Пять пунктов остаются сеткой 3+2 и на широком экране: длинные заголовки
   не помещаются в сжатых flex-карточках и создают горизонтальный скролл. */
.lim__group--2 .lim__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lim__group--2 li {
  padding: var(--l-s4); border-radius: var(--l-radius-l);
  background: color-mix(in oklab, var(--l-bg), var(--l-ink) 4%);
  color: var(--l-ink); text-wrap: pretty; min-width: 0; overflow-wrap: anywhere; hyphens: auto;   /* текст белый, как у карточек сверху; тише только фон (Кирилл, 01.10) */
}
@media (max-width: 700px) { body:has(#hero.opener) #limits { display: none; } }
.lim__last {
  padding: var(--l-s6); border-radius: var(--l-radius-l);
  background: color-mix(in oklab, var(--l-bg), var(--l-accent-2) 7%); color: var(--l-accent-2-text);
  text-wrap: balance;
}
@media (max-width: 1023px) { .lim__group--2 .lim__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .lim__group--2 .lim__list { grid-template-columns: minmax(0, 1fr); }
  .lim__last { padding: var(--l-s5) var(--l-s4); }
}

/* ─────────────── price · сколько стоит ─────────────── */

/* без карточки: сумма дисплеем, ранняя цена цветом «прошло», кнопка; справа – что входит и условия */
/* сколько стоит (Кирилл 25.09): вместо двух списков – плитка карточек разного размера, по мотивам цены у Алекса
   (code/landings-alex, css/aim-atlas.css: цена карточкой, «что входит» ячейками), но в своей эстетике – карточки
   на оттенках, без обводок. Цена – слева на высоту трёх рядов, «что входит» – пять карточек с опорной цифрой
   из текста (цифра наверху, текст прижат к низу), условия – две карточки тише, у возврата цифра «100 %».
   Места – grid-template-areas: p – цена, i1…i5 – что входит, n1…n2 – условия (подпись «что входит» снята, Кирилл 29.09);
   область каждой карточке пишет шаблон из номера (blocks/price.html). Меняется число пунктов в price.json –
   поправить области здесь */
/* тон карточки – доля подмеса (--pr-k) к фону: чернил, у возврата – зелёного. Под курсором доля × 5/3, как у отзывов
   6 → 10 % (Кирилл, 01.10: «насколько светлее – зависит от исходного»): тихая карточка светлеет чуть, яркая – заметнее */
.pr {
  --pr-hover: calc(5 / 3);
  display: grid; gap: var(--l-s3);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "p p p p p i1 i1 i1 i1 i1 i1 i1"
    "p p p p p i2 i2 i2 i2 i3 i3 i3"
    "i4 i4 i4 i4 i4 i4 i5 i5 i5 i5 i5 i5"
    "n1 n1 n1 n1 n1 n1 n2 n2 n2 n2 n2 n2";
}
.pr__card {
  --pr-k: 6%; --pr-tint: var(--l-ink);
  display: flex; flex-direction: column; gap: var(--l-s4); min-width: 0; min-height: 190px; container-type: inline-size;
  padding: var(--l-s5); border-radius: var(--l-radius-l); background: color-mix(in oklab, var(--l-bg), var(--pr-tint) var(--pr-k));
}
@media (hover: hover) {
  .pr__card { transition: background-color var(--l-t-hover) var(--l-ease-out); }
  .pr__card:hover { background: color-mix(in oklab, var(--l-bg), var(--pr-tint) calc(var(--pr-k) * var(--pr-hover))); }
}
.pr__card--main { --pr-k: 10%; grid-area: p; justify-content: space-between; align-items: flex-start; gap: var(--l-s7); padding: var(--l-s6); }
.pr__tag { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--l-s4); }
/* даты в карточке цены (06.10): место решения – когда идет лаба, видно рядом с ценой; стиль – заголовок пункта */
.pr__when { font-family: var(--l-h3-font); font-stretch: var(--l-h3-stretch); font-weight: var(--l-h3-weight); font-size: var(--l-h3-size); line-height: var(--l-h3-leading); letter-spacing: var(--l-h3-tracking); color: var(--l-ink); }
.pr__old { color: var(--l-ink-2); }
.pr__old s { position: relative; display: inline-block; text-decoration: none; white-space: nowrap; }
.pr__old s::after { content: ""; position: absolute; inset-inline: -.08em; top: 43%; height: 3px; background: color-mix(in srgb, var(--l-ink-mute) 70%, var(--bs-color-ink)); pointer-events: none; }
.pr__card--note { --pr-k: 2.5%; min-height: 0; }
.pr__card--sure { --pr-k: 9%; --pr-tint: var(--l-accent); }
.pr__card--sure .pr__fig { color: var(--l-accent-text); }
.pr__card--sure .pr__unit { color: var(--l-accent-text); }   /* «возврат» зелёным, как «100 %» (Кирилл, 29.09) */
.pr__early { color: var(--l-accent-text); padding: 6px 12px; border-radius: 999px; background: color-mix(in oklab, var(--l-accent), transparent 86%); }
.pr__purchase { display: flex; flex-direction: column; align-items: flex-start; gap: var(--l-s4); margin-top: auto; }
.pr__after-payment { max-width: 34ch; color: var(--l-ink-2); font-size: var(--l-text-small); line-height: var(--l-leading-body); }
.pr__fig {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem;
  color: var(--l-ink); font-size: min(var(--l-display-size), 16cqi); overflow-wrap: anywhere;
}
.pr__unit { color: var(--l-ink-2); }
.pr__text { margin-top: auto; color: var(--l-ink-2); }
.pr__card--i2 { justify-content: center; gap: var(--l-s2); }
.pr__card--i2 .pr__text { margin-top: 0; }
.pr__card--i2 .pr__fig-core, .pr__card--i4 .pr__fig-core, .pr__card--i5 .pr__fig-core { white-space: nowrap; }
.pr__card--i2 .pr__fig { font-size: min(var(--l-display-size), 9cqi); }
.pr__card--note .pr__text { color: var(--l-ink-mute); }
.pr__head { color: var(--l-ink); }
.pr__card--note .pr__head + .pr__text { margin-top: 0; }
.pr__card--sure .pr__text a { color: var(--l-ink-2); text-decoration: underline; text-underline-offset: 0.16em; }
.pr__card--sure .pr__text a:hover, .pr__card--sure .pr__text a:focus-visible { color: var(--l-ink); }
.pr__support-term { position: relative; display: inline-block; color: var(--l-ink); text-decoration: underline dotted; text-underline-offset: 0.16em; cursor: help; outline-offset: 3px; }
.pr__support-tip { position: absolute; z-index: 3; top: calc(100% + var(--l-s2)); left: 0; width: min(24rem, 60vw); padding: var(--l-s3); border: 1px solid var(--l-ink-mute); border-radius: var(--l-radius-s); background: var(--l-bg); color: var(--l-ink); font-size: var(--l-text-small); line-height: var(--l-leading-body); box-shadow: 0 12px 32px rgb(0 0 0 / 30%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--l-t-hover) var(--l-ease-out), visibility var(--l-t-hover) var(--l-ease-out); }
.pr__support-term:hover .pr__support-tip, .pr__support-term:focus .pr__support-tip { opacity: 1; visibility: visible; }
.pr__card--i2:has(.pr__support-term:hover, .pr__support-term:focus) { z-index: 2; }
.pr__support-footnote { display: none; }
@media (max-width: 1023px) {
  .pr__support-tip { left: auto; right: 0; }
  .pr {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      "p p p p p p" "i1 i1 i1 i1 i1 i1" "i2 i2 i2 i3 i3 i3"
      "i4 i4 i4 i5 i5 i5" "n1 n1 n1 n2 n2 n2";
  }
  .pr__card--main { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: var(--l-s5) var(--l-s6); }
  .pr__purchase { margin-top: 0; }
}
@media (max-width: 700px) {
  .pr { grid-template-columns: minmax(0, 1fr); grid-template-areas: "p" "i1" "i2" "i3" "i4" "i5" "n1" "n2"; }
  .pr__card { min-height: 0; padding: var(--l-s4); }
  .pr__card--main, .pr__card--main:hover { flex-direction: column; align-items: flex-start; gap: var(--l-s7); padding: var(--l-s5) 0; border: 0; background: transparent; }
  .pr__amount { font-size: min(var(--l-text-price), 20vw); }
  .pr__purchase { width: 100%; }
  .pr__after-payment { width: 100%; max-width: none; }
  .pr__text { margin-top: 0; }
  .pr__support-term { color: inherit; text-decoration: none; cursor: text; }
  .pr__support-tip { display: none; }
  .pr__support-footnote { display: block; padding-block: var(--l-s4); color: var(--l-ink-mute); font-size: var(--l-text-small); line-height: var(--l-leading-body); }
  .pr__support-footnote p { max-width: 70ch; }
}
@media (max-width: 374px) {
  .pr__after-payment { font-stretch: 90%; }
}
@media (max-width: 340px) {
  .pr__after-payment { font-size: 13px; font-stretch: 70%; }
}

/* ─────────────── cta-row · кнопка в потоке ─────────────── */

/* три точки входа между шапкой и ценой (разбор конверсии 21.09, принят Кириллом): после каталога –
   в бота подобрать дело, после «до конца» и после «что довёл» – занять место. Полоса без
   плашки: текст слева, кнопки справа; на узком – столбиком */
.ctarow { padding-block: var(--l-s6); }
.ctarow__in { display: flex; flex-wrap: wrap; gap: var(--l-s4) var(--l-s7); align-items: center; justify-content: space-between; }
.ctarow__text { max-width: 44rem; text-wrap: balance; }
.ctarow__actions { flex: none; }
@media (max-width: 620px) { .ctarow__in { display: grid; } .ctarow__actions .btn { width: 100%; } }

/* ─────────────── proof · три отзыва над ценой ─────────────── */

/* по одному на мотив портрета: пересобрал систему · собрал для команды · гуманитарий справился.
   Три колонки без плашек, цитата, автор под ней; ссылка на стену остальных. На core-human с 25.09 не стоит (стена отзывов),
   роли – как у стены */
.proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--l-s6) var(--l-s7); }
/* отзывы на стекле, как колонки recognize: отступ компенсирован отрицательным полем, сетка не двигается */
.proof__item {
  display: grid; gap: var(--l-s3); align-content: start;
  padding: var(--hm-glass-pad-col); margin: calc(-1 * var(--hm-glass-pad-col));
  background: color-mix(in oklab, var(--l-bg) var(--hm-glass-a), transparent);
  -webkit-backdrop-filter: blur(var(--hm-glass-blur)); backdrop-filter: blur(var(--hm-glass-blur));
  border-radius: var(--l-radius-l);
}
.proof__who { margin-top: var(--l-s2); }
.proof__role { color: var(--l-ink-2); }
.proof__more { margin-top: var(--l-s6); }
.proof__more a { color: var(--l-ink-2); }
@media (max-width: 900px) { .proof { grid-template-columns: minmax(0, 1fr); } }

/* ─────────────── voices · стена ─────────────── */

/* карточки разного размера (Кирилл, 25.09: «более яркие и внятные или более длинные – карточками большего размера»):
   сетка 12 колонок, ширина – поле size в voices.json (xl 8 · l 6 · m 4 · s 3), порядок 19.09 складывается в ровные ряды.
   Заливка тоном, как карточки «что кирилл довёл»; стекло 22.09 на тёмной теме почти не читалось */
.wall { display: grid; gap: var(--l-s3); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.wall__item {
  position: relative; display: flex; flex-direction: column; gap: var(--l-s2); min-width: 0; padding: var(--l-s5);
  grid-column: span 4; border-radius: var(--l-radius-l); background: color-mix(in oklab, var(--l-bg), var(--l-ink) 6%);
}
/* под курсором карточка на тон светлее, 6 → 10 % чернил (Кирилл, 30.09, артефакт B). Только мышь: на тач-экране
   :hover залипает после касания. Карточка не ссылка, поэтому курсор обычный */
@media (hover: hover) {
  .wall__item { transition: background-color var(--l-t-hover) var(--l-ease-out); }
  .wall__item:hover { background: color-mix(in oklab, var(--l-bg), var(--l-ink) 10%); }
}
.wall__item--xl { grid-column: span 8; }
.wall__item--l { grid-column: span 6; }
.wall__item--s { grid-column: span 3; }
/* длинные и содержательные – шире; короткие яркие – ролью «текст, крупный» (Кирилл 25.09: текстовым шрифтом, но крупно).
   До 30.09 у цитат было четыре кегля (×1, ×1.2, ×1.35, ×1.6), с ролями – два */
.wall__item > :is(.wall__more, .wall__link) { margin-top: auto; padding-top: var(--l-s2); }
/* Кирилл, 20.09: кавычек нет ни в тексте, ни знаком – цитату выдают карточка и подпись */
/* аватарка (Кирилл, 20.09): фото, где есть, иначе инициалы на утопленном фоне */
.wall__head { display: flex; align-items: flex-start; gap: var(--l-s3); margin-bottom: var(--l-s2); }  /* автор над цитатой, аватарка по верхнему краю подписи (Кирилл, 20–21.09) */
.wall__role { color: var(--l-ink-2); }  /* имя и роль на шаг меньше цитаты (Кирилл, 21.09) */
.faq__ask { margin-top: var(--l-s6); display: flex; flex-wrap: wrap; gap: var(--l-s4); align-items: center; }
.faq__ask p { color: var(--l-ink-2); }
.wall__ava { flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--l-bg-sunk); color: var(--l-ink-2); font-family: var(--l-font-mono); font-stretch: var(--l-stretch-mono); font-size: var(--l-text-label); }
.wall__ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* инициалы без фото – шесть заливок по кругу, все замешаны из зелёного и оранжевого бренда с бумагой (Кирилл, 22.09) */
.wall__item:nth-child(6n+1) .wall__ava { background: color-mix(in oklab, var(--l-accent) 22%, var(--l-bg)); color: var(--l-ink); }
.wall__item:nth-child(6n+2) .wall__ava { background: color-mix(in oklab, var(--l-accent-2) 22%, var(--l-bg)); color: var(--l-ink); }
.wall__item:nth-child(6n+3) .wall__ava { background: color-mix(in oklab, var(--l-accent) 12%, color-mix(in oklab, var(--l-accent-2) 12%, var(--l-bg))); color: var(--l-ink); }
.wall__item:nth-child(6n+4) .wall__ava { background: color-mix(in oklab, var(--l-accent) 40%, var(--l-bg)); color: var(--l-ink); }
.wall__item:nth-child(6n+5) .wall__ava { background: color-mix(in oklab, var(--l-accent-2) 40%, var(--l-bg)); color: var(--l-ink); }
.wall__item:nth-child(6n+6) .wall__ava { background: color-mix(in oklab, var(--l-accent-2) 8%, color-mix(in oklab, var(--l-ink) 10%, var(--l-bg))); color: var(--l-ink); }
.wall__head .wall__who { margin-top: 0; }
.wall__more summary { cursor: pointer; color: var(--l-ink-2); list-style: none; }
.wall__more summary::before { content: "+ "; color: var(--l-ink-mute); }
.wall__more[open] summary::before { content: "– "; }
.wall__more p { margin-top: var(--l-s3); color: var(--l-ink-2); }
.wall__who { margin-top: var(--l-s2); }
.wall__link a { color: var(--l-ink-2); }
.wall__src { margin-top: var(--l-s3); }
/* стена свёрнута до восьми карточек, остальные по кнопке (js/landing.js, [data-wall]) */
.wall__item[hidden] { display: none; }
@media (max-width: 700px) {
  .wall__item--teaser { max-height: clamp(8rem, 18svh, 11rem); overflow: clip; mask-image: linear-gradient(#000 72%, transparent); }
}
.wall__toggle { margin-top: var(--l-s2); }
.wall__toggle button[hidden] { display: none; }
/* планшет: широкие – во всю строку, остальные по две; плотная укладка закрывает дыры */
@media (max-width: 1023px) {
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
  .wall__item, .wall__item--s, .wall__item--m { grid-column: span 1; }
  .wall__item--l, .wall__item--xl { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .wall { grid-template-columns: minmax(0, 1fr); }
}

/* ─────────────── faq · вопросы (C, 01.10) ───────────────
   Фигура – человек в вопросительной позе, без предмета, смотрит на список (Кирилл, 01.10, v2). Телефон и планшет: маленькая над списком, по центру (М3).
   От 1200 px – колонка справа от списка (список ограничен 52rem, раньше места нет). Фигура прибита к низу окна, как
   кисть каталога (Кирилл, 01.10 вечер: «люди у нас плавать не должны» – до того была sticky под шапкой, уезжала с
   концом секции и тянулась к курсору): position: fixed; bottom: 0, вопросы прокручиваются мимо. Видимую часть режет
   clip-path секции – секция въезжает и открывает фигуру, в конце следующая секция наезжает на нее (overflow: clip
   fixed-потомков не режет). Место по горизонтали – середина правой колонки сетки: полоса .wrap после героя
   min(--l-max, 100% − 56px) (human.css, «.opener ~ section .wrap»), минус поля, 52rem списка и зазор. Каркас .faq не трогаю, только #faq. */
#faq { --hm-faq-fig-w: 440px; --hm-faq-fig-w-sm: 220px; }
#faq .faq__fig { display: block; width: min(var(--hm-faq-fig-w-sm), 52vw); height: auto; margin: 0 auto var(--l-s5);
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); }   /* кадр режет фигуру снизу – край гаснет */
@media (min-width: 1200px) {
  #faq { overflow: clip; clip-path: inset(0); }
  #faq > .wrap { display: grid; grid-template-columns: minmax(0, 52rem) minmax(0, 1fr); column-gap: var(--l-s7); }
  #faq > .wrap > * { grid-column: 1; }
  #faq .faq__fig {
    --faq-band: min(var(--l-max), 100% - 56px);
    --faq-col: calc(var(--faq-band) - 2 * var(--l-gutter) - 52rem - var(--l-s7));
    --faq-fig-w: min(var(--faq-col), var(--hm-faq-fig-w), 48svh);   /* на низком экране фигура не выше ~2/3 окна */
    position: fixed; bottom: 0; margin: 0; width: var(--faq-fig-w);
    right: calc((100% - var(--faq-band)) / 2 + var(--l-gutter) + (var(--faq-col) - var(--faq-fig-w)) / 2);
  }
}

/* ─────────────── final · финал ─────────────── */

/* Кирилл, 25.09: гигант и дворянин стоят по центру, тексты и кнопки их не перекрывают. Текст – слева в небе над
   кадром: небо продлено вверх цветом верха слоя неба (--hm-final-sky, #09161b), голова гиганта поднимается в эту полосу
   справа от текста. Кнопка и «задать вопрос» заходят в левый верхний угол кадра – левее 45 % ширины гиганта нет выше
   17.7 % высоты кадра (final-layout-v1.json), заход – не больше 13 % высоты: min(7.5rem, 7vw). Слои снизу вверх: небо и
   дюны, гигант (плывёт за курсором, js), дюны и дворянин. До 700 px кадр узкий, 4:5 по центру дворянина, текст над ним. */
.finale { --hm-final-sky: #09161b; position: relative; overflow: hidden; padding-block: var(--l-s9) 0;
  background: linear-gradient(to bottom, var(--l-bg), var(--hm-final-sky) var(--l-s9)) var(--hm-final-sky); }
.finale__in { position: relative; z-index: 3; display: grid; gap: var(--l-s5); justify-items: start; text-align: left; }
.finale__title { max-width: none; }  /* Кирилл, 20.09: кегль как у h1 шапки, в одну строку */
@media (min-width: 720px) { .finale__title { white-space: nowrap; } }
.finale__eyebrow { margin-bottom: calc(var(--l-s3) * -1); }   /* бирка «human · лаба ai mindset» над заголовком, как в шапке */
.finale__facts { justify-content: flex-start; }
.footer__formula { max-width: none; }  /* Кирилл, 20.09: в одну строку */
.footer__dates { color: var(--l-ink-2); }   /* 06.10: даты – вторая строка формулы, в ее размер */
.finale__actions { justify-content: flex-start; }
.finale__scene { position: relative; margin: calc(-1 * min(7.5rem, 7vw)) 0 0; aspect-ratio: 2752 / 1536; pointer-events: none; }
.finale__scene picture { display: contents; }
.finale__layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.finale__layer--sky { mask-image: linear-gradient(to bottom, transparent, #000 6%); }   /* верх неба тает в полосу, шва нет */
.finale__layer--giant { will-change: translate; }
/* Кирилл, 02.10: гигант шире кадра – крылья целиком, слой выходит за края сцены на bleed_px кадра (scripts/final-scene.py
   пишет --bleed-* в style img), секция обрезает. Сдвиг за курсором (40 px кадра) меньше запаса – ровный край не виден */
.finale__layer--giant { left: var(--bleed-x, 0%); width: var(--bleed-w, 100%); max-width: none; }   /* max-width – сброс img из base.css */
@media (max-width: 700px) { .finale__layer--giant { left: var(--bleed-x-n, 0%); width: var(--bleed-w-n, 100%); } }
/* сетка точек на небе финала (Кирилл, 29.09), как в шапке: во всю секцию – полоса неба над кадром и небо кадра. Слои:
   небо кадра < точки 1 < гигант и передний план с дворянином 2 < текст 3. Сверху точки проявляются вместе
   с переходом фона страницы в небо (--l-s9, как градиент .finale) */
.finale__dots { position: absolute; inset: 0; z-index: 1;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--l-s9)); mask-image: linear-gradient(to bottom, transparent, #000 var(--l-s9)); }
.finale__layer--giant, .finale__layer--front { z-index: 2; }
@media (max-width: 700px) { .finale__scene { margin-top: var(--l-s5); aspect-ratio: 1229 / 1536; } }
/* Кирилл, 25.09 (вечер): подвал ниже – текст и кнопки в левом нижнем углу кадра, полосы неба над кадром нет.
   Заголовок Lebowski в одну строку занимает ~29 % ширины и кончается левее дворянина (45 %). Затемнение из угла
   Кирилл убрал (25.09). Уже 1024 px блоку в углу тесно – текст над кадром. */
@media (min-width: 1024px) {
  .finale { padding-top: var(--l-s7); }
  .finale__in { position: absolute; inset: auto 0 var(--l-s6); z-index: 3; }
  /* 30.09: Martian шире Lebowski – в одну строку кеглем h1 заголовок заходил на дворянина (48 % кадра).
     Кегль – h1 шапки, пока фраза кончается до 42 % ширины: левый край полосы + ширина фразы в em
     (--hm-final-fit, ручка «ширина фразы финала»). Сдвинул ширину или вес шрифта – подправь ручку */
  .finale__title { font-size: min(var(--l-display-size), calc((42vw - max(0px, (100vw - var(--l-max)) / 2) - var(--l-gutter)) / var(--hm-final-fit))); }
  .finale__scene { margin-top: 0; }
  /* Кирилл, 25.09: мелкие строки белым, как заголовок – серые терялись на песке */
  .finale__in :is(.finale__eyebrow, .finale__facts, .finale__aside, .finale__aside a) { color: #fff; }
  .finale__facts li + li::before { color: #fff; }
}

/* ─────────────── без обводок ─────────────── */
/* Каркас и примитивы приходят из base.css и blocks.css с линиями. На этой странице
   (узнаётся по шапке .opener) линии снимаются: поверхность – только заливка,
   кнопка – только заливка, каркас – без волосяных линий, вопросы – без разделителей. */
body:has(#hero.opener) .card { --sq-line: transparent; }
body:has(#hero.opener) .btn { --btn-line: transparent; }
body:has(#hero.opener) .btn--primary:hover { --btn-line: transparent; }
body:has(#hero.opener) .btn--ghost { --btn-bg: var(--hm-tint); --btn-ink: var(--l-ink); }
body:has(#hero.opener) .btn--ghost:hover { --btn-bg: var(--hm-tint-2); --btn-line: transparent; }
body:has(#hero.opener) .topbar { border-bottom: 0; }
/* сквозное поле: всё содержимое выше холста (z-index 0), утопленные секции сквозят,
   каталог и финал со своими руками закрывают поле целиком */
body:has(#hero.opener) .section, body:has(#hero.opener) .footer, body:has(#hero.opener) .closing { position: relative; z-index: 1; }
body:has(#hero.opener) .section--sunk { background: color-mix(in oklab, var(--l-bg-sunk) calc(var(--hm-sunk-a) * 100%), transparent); }
body:has(#hero.opener) #catalogue { background: var(--l-bg-sunk); }
/* плашки сплошные (Кирилл, 07.10: «плашки давай сделаем непрозрачными» – точки фона сквозили сквозь тон).
   Тон тот же, что у --hm-tint, только смешан с фоном секции под плашкой: --hm-under – фон секции
   без поля точек (утопленная – бумага с плотностью --hm-sunk-a над страницей, каталог – бумага целиком).
   Смесь в srgb совпадает с прежним наложением полупрозрачного тона, поэтому цвет плашек не меняется – пропадают точки.
   Кнопки, стекло под колонками «узнаешь себя» и бирки остаются полупрозрачными */
body:has(#hero.opener) .section { --hm-under: var(--l-bg); --hm-plate: color-mix(in srgb, var(--l-ink) var(--hm-tint-a), var(--hm-under)); }
body:has(#hero.opener) .section--sunk { --hm-under: color-mix(in srgb, var(--l-bg-sunk) calc(var(--hm-sunk-a) * 100%), var(--l-bg)); }
body:has(#hero.opener) #catalogue { --hm-under: var(--l-bg-sunk); }
body:has(#hero.opener) .finale { background-color: var(--l-bg); }
@media (max-width: 900px) { html:has(.stickycta) { scroll-padding-bottom: 88px; } }   /* якорь не прячется под липкой кнопкой (A4, старые варианты); у core-human ее нет с 02.10 */
body:has(#hero.opener) .section--hair, body:has(#hero.opener) .footer { border-top: 0; }
/* шапка закреплена (Кирилл, 24.09): при скролле не уходит вверх, следующая секция наезжает на неё.
   sticky в пределах <main>; когда следующая секция закрыла её целиком, js ставит .opener--covered
   и шапка гаснет – дальше сквозь утопленные секции снова видно поле точек, не небо. --pin-top
   считает js: высота липкой шапки страницы, чтобы герой не сдвигался при скролле вовсе; в низком
   окне меньше, чтобы низ текста героя оставался виден. Окно до 900 px и уже 4:3
   (кадр отдельным блоком, шапка выше экрана) остаются в потоке. Секция после шапки непрозрачна,
   без точек (Кирилл, 24.09: точки на ней убрать).
   Затемнение при наезде: ::after поверх всей шапки, чёрный с прозрачностью --cover × --hm-cover-dim;
   --cover (0…1) – доля шапки, которую уже закрыла следующая секция, считает js на скролле */
@media (width > 900px) and (aspect-ratio >= 4/3) {
  body:has(#hero.opener) .opener { position: sticky; top: var(--pin-top, 0px); z-index: 0; --cover: 0; }
  body:has(#hero.opener) .opener::after {
    content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: #0a0a0a; opacity: calc(var(--cover) * var(--hm-cover-dim));
  }
  body:has(#hero.opener) .opener--covered { visibility: hidden; }
}
@media (width > 700px) { body:has(#hero.opener) #hero.opener + .section { background-color: var(--l-bg); } }
body:has(#hero.opener) .faq { border-top: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--l-s2); max-width: 52rem; }
body:has(#hero.opener) .faq { gap: var(--l-s2); }
body:has(#hero.opener) .faq__item { min-width: 0; border-bottom: 0; }
body:has(#hero.opener) .faq__q {
  padding-block: var(--l-s2); padding-right: var(--l-s4);
  font-family: var(--l-font-body); font-stretch: var(--l-stretch-body);
  font-weight: var(--l-weight-strong); letter-spacing: var(--l-tracking-body);
  font-size: calc(var(--l-h3-size) * .42); line-height: 1.35;
}
@media (max-width: 700px) { body:has(#hero.opener) .faq__q { font-size: 14px; } }
body:has(#hero.opener) .faq__q::after { flex: none; margin-left: var(--l-s2); }
body:has(#hero.opener) .faq__a { padding-bottom: var(--l-s5); }
body:has(#hero.opener) .faq__ask p { color: var(--l-ink); }   /* как .faq__q (Кирилл, 22.09) */