/* Hallmark · macrostructure: Workbench · polish: HP4 Decorative-numeral · шаблон «рамка» cf- для всех кейсов
 * (D2 07.10.2026, блок в конце файла; первая страница /case/calculator/). Ниже старые формы, до переезда:
 * Hallmark · macrostructure: Workbench + Photographic interlude (/case/crm/)
 * + Map/Diagram (/case/dashboard/, .scheme) + Letter (/case/calculator/,
 * .desk--lap, .wb--letter) + Stat-Led (/case/ai-support/, .bands, .log)
 * + Split Studio (/case/ads/, .duo, .tbl) · polish: none · genre: editorial-instrument
 * theme: custom, «Ночь» главной (DESIGN.md v2, синий шёлк), перенос 28.09.2026
 * theme_axes: dark / geometric-sans Unbounded 600 шапки и 300 числа + Golos Text
 *             / warm brass accent: кнопка Telegram и шов схемы
 * grid: сетка глав главной (.how/.faq/.talk) 2fr/3fr от 64rem, край 76rem —
 *       круг 2, 28.09.2026, блок «СЕТКА ТЕЛА»; формы пяти страниц прежние
 * D2 29.09.2026 (слепой критик, K): кадры интерфейса без голубой вуали, фолд
 *       интерфейса резкой вырезкой 2x в оправе, одно главное число главы (J6),
 *       интерлюдия кадром «Ночи» и плоскость цены и связи у CRM (J7, J8),
 *       «Следующий экспонат» без пустоты над подписью
 * ───────────────────────────────────────────────────────────────────────────
 * work.css — слой страниц кейсов /case/<slug>/, надстройка над core.css.
 * Пять форм на пять страниц, ни одна не повторяет соседнюю: кадры ведут
 * (Workbench), схема ведёт (Map/Diagram), лист письма с полем-корешком
 * (Letter), цифры ведут (Stat-Led), диптих с таблицей (Split Studio).
 * Приём стыка на странице ОДИН: срез кромки у CRM и дашборда, нахлёст
 * у калькулятора, смена плоскости у ИИ и рекламы.
 * Имя не case.css: на проде вебрут один, там это имя занято старым файлом.
 * Приёмы банка §3.3: A1 A3 A5 A6 A8 B5 B7 B9 B10 B14 B17 B18 B19 F3 G3. */

/* Три токена слоя кейсов: инлайновый цвет мимо палитры — это и есть
   расползание токенов. Свет и тень кадра — смеси токенов core, новых цветов нет.
   D2 29.09.2026: прежняя тонировка multiply (белый → 74% светлоты в синий) читалась
   «голубой вуалью» (слепой критик, K 390-02, 1440-02). Теперь как у кадров кейсов
   главной (noch-tail.css .case__fr): центр кадра честный, свет лампы с угла, края
   садятся в комнату. */
:root{
  --plate-light: color-mix(in oklab, var(--paper) 12%, transparent);  /* тёплый свет с левого верхнего угла */
  --plate-shade: color-mix(in oklab, var(--night) 42%, transparent);  /* виньетка к краям кадра */
  --lens-inner:  oklch(0 0 0 / .55);   /* внутренняя грань оправы линзы (B13) */
}

/* ══ ФОН §5: база, гравировка, зерно, 0 КБ JS. Слои на обёртке, а не на фолде:
 * у кейса нет одной сцены, атмосферу держит весь лист. */
.page{position:relative; z-index:1; isolation:isolate;}
.page__bg{position:fixed; inset:0; z-index:-1; pointer-events:none;}
.page__bg i{position:absolute; inset:0; display:block;}
.page__base{
  /* шёлк «Ночи»: поле главы главной, полоса --paper 6% под 115° и зерно (noch.css .ch).
     Статично; тёплое пятно лампы сверху справа осталось, свет кадра фолда */
  background:
    var(--grain-18) 0 0 / 220px 220px,
    radial-gradient(52% 44% at 74% 12%, color-mix(in oklab,var(--glow) 9%,transparent), transparent 72%),
    linear-gradient(115deg, transparent 20%, color-mix(in oklab, var(--ink), var(--paper) 6%) 45%, transparent 70%),
    var(--ink);
  background-blend-mode:overlay, normal, normal;
}
/* гравировка-сетка и кипящее зерно старого сайта сняты: зерно уже в шёлке */
.page__etch,.page__grain{display:none;}

/* ══ ФОЛД — ПАСПОРТ ЭКСПОНАТА. Имиджевую роль несёт ПОКАЗАНИЕ: заголовок
 * в 74 знака кеглем 120px занял бы весь экран, цифра даёт полюс A1. ══════ */
.load{
  position:relative;
  padding:clamp(var(--sp-lg),5vw,72px) var(--pad) clamp(var(--sp-2xl),7vw,104px);
  display:grid; gap:clamp(var(--sp-md),3vw,var(--sp-lg));
  align-items:start;
}
.load__mark{
  margin:0; font-family:var(--ff-body); font-size:.875rem;
  line-height:1.5;
  color:var(--paper-62);
}
.load__mark a{color:var(--paper-62); text-decoration:underline;
              text-decoration-color:var(--paper-16); text-underline-offset:4px;
              display:inline-flex; align-items:center; min-height:44px;}
@media (hover:hover){ .load__mark a:hover{text-decoration-color:var(--paper);} }
.load__mark a:active{text-decoration-color:var(--paper);}
/* Разделитель рисует CSS: текстовый узел «·» линейка считает словом фолда.
   Висит на ПРЕДЫДУЩЕМ элементе — иначе на 320 уезжает в начало строки. */
.load__mark a:has(+ a)::after,.load__mark a:has(+ span)::after{
  content:"·"; color:var(--paper-38); padding-inline:var(--sp-2xs);
}

/* ПОКАЗАНИЕ, полюс A1. Цифра и единица врозь: у единицы свой уровень шкалы. */
.load__read{
  margin:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:0 var(--sp-sm);
  font-family:var(--ff-display); font-weight:300;
  /* min() по высоте: на 1366×768 кегль садится сам. Низ 72, не 56: при 56px
     на 390 показание переставало быть имиджевым носителем. */
  font-size:clamp(72px,min(12.4vw,18svh),180px); line-height:.84; letter-spacing:-.06em;
  font-variant-numeric:tabular-nums; color:var(--paper);
}
.load__unit{font-size:clamp(24px,2.4vw,34px); letter-spacing:-.02em; color:var(--paper-62);}
/* Прежнее значение зачёркнуто рукой правщика (Letter): не стрелка, она занята
   дашбордом. Толщина линии 1px, иначе на 180px читается как минус. */
.load__was{font-size:max(14px,.34em); color:var(--dim); margin-right:.1em;
           text-decoration-line:line-through; text-decoration-thickness:1px;}
/* Пара «было → стало» (дашборд): кегль ниже одиночного — при 162px «101%»
   уезжало вниз, оторванное от стрелки. */
.load__read:has(s){font-size:clamp(56px,min(9.6vw,14svh),132px); gap:0 var(--sp-2xs);}
.load__read s{text-decoration:none; color:var(--dim); font-size:max(14px,.42em);
              padding-inline:.24em; letter-spacing:0;}
/* ЯРЛЫК парой из витрины. Пара произвольная, а не «было / стало»: у CRM и ИИ
   второй канал измерения, и выдуманная пара приписала бы результат. */
.load__st{
  margin:0; display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2xs) var(--sp-sm);
  font-family:var(--ff-body); font-size:.875rem; line-height:1.5; color:var(--paper-62);
}
.load__st b{font-weight:400; color:var(--paper);}
.load__st s{
  flex:0 0 auto; width:var(--sp-md); height:1px; background:var(--paper-38);
  text-decoration:none;
}
.load__h{
  margin:0; max-width:21ch; overflow-wrap:anywhere; min-width:0;   /* гейт 51 */
  font-family:var(--ff-display); font-weight:600;
  font-size:clamp(28px,1.9vw + 17px,44px); line-height:1.12; letter-spacing:-.025em; text-wrap:balance;
  color:var(--paper);
}
/* На 320 длинное слово при 34px рвётся посреди себя и читается браком. */
@media (max-width:359px){ .load__h{font-size:26px;} }
.load__ctx{
  margin:0; max-width:46ch;
  font-family:var(--ff-body); font-size:.875rem; line-height:1.6;
  color:var(--paper-62);
}

/* КАДР АТМОСФЕРЫ: тот же файл и то же имя перехода, что в витрине лендинга.
   Края не рамкой, а растворением в фон (G3). */
.load__sc{position:relative; margin:0; min-width:0;}
.load__img{
  display:block; width:100%; height:100%; object-fit:cover;
  view-transition-name:var(--vt,vt-case-crm);   /* имя пары задаёт страница */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 100%),
                     linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 100%),
                     linear-gradient(180deg,transparent 0,#000 16%,#000 82%,transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
/* B19: на телефоне форма ДРУГАЯ — кадр полосой под текстом */
.load__sc{aspect-ratio:16/9;}
/* Кадр интерфейса (CRM, калькулятор) в фолде только в две колонки: полосой
   он читался мутным пятном, а тот же продукт стоит чётким кадром РИС. 1 ниже */
@media (max-width:999.98px){
  .load__sc--ui{display:none;}
  .load:has(.load__sc--ui)+.desk--lap{margin-top:-16px;}   /* без кадра нахлёст листа ложился в 8 px под текст */
}

/* ── ЖИВОЙ ФОЛД: свет с кадра разливается на текстовую половину, и фолд
   читается одной сценой. .amb из core, здесь точка, размер и порядок. */
.load>*,.bridge>*{position:relative; z-index:1;}
/* ⚠️ position ОБЯЗАТЕЛЕН: правило выше (0,2,0) сильнее .amb{absolute}
   из core.css (0,1,0). До правки высота .amb и .amb__glow была 0px на всех
   пяти кейсах — свет сцены в фолде не горел вовсе. */
.load .amb,.bridge .amb{position:absolute; z-index:0;}
/* пятно лампы не режется кромкой фолда: обрезка давала шов под шапкой (скачок 10 уровней на x=700) */
.load .amb{overflow:visible;}
.load .amb{--amb-at:62% 24%; --amb-size:66% 54%;}
.bridge .amb{--amb-at:78% 62%; --amb-size:52% 46%;}
/* Кадр стоит в середине прежнего дыхания breathe-scene (23.09.2026: в покое
   ноль бесконечных). Ход камеры от прокрутки — ниже, в @supports. */
@media (prefers-reduced-motion:no-preference){
  .load__img{transform:scale(1.009) translate3d(-.3%,-.2%,0);}
  /* Показание ВСТАЁТ НА МЕСТО один раз при загрузке: не счётчик от нуля,
     цифра верна с первого кадра, движется только её положение. */
  .load__read,.load__st,.load__h{transform-origin:0 100%;}   /* от левого края набора */
  .load__read{animation:read-set var(--t-scene) var(--e-out) both;}
  .load__st{animation:read-set var(--t-scene) var(--e-out) var(--d-1) both;}
  .load__h{animation:read-set var(--t-scene) var(--e-out) var(--d-2) both;}
}
/* opacity не трогает ни одна: контент не зависит от того, доехала ли
   анимация (ARCHITECTURE §3). Движется только transform. */
@keyframes read-set{
  from{transform:translate3d(0,.05em,0) scale(.972);}
  to  {transform:none;}
}
/* Линия прочерчивается от левого края — жест латунной полосы вилки цен. */
@keyframes wire-draw{from{transform:scaleX(0);} to{transform:scaleX(1);}}
/* Свет из-под кромки кадра приходит вместе с кадром, а не горит заранее. */
@keyframes glow-rise{
  from{opacity:0; transform:translate3d(0,7%,0);}
  to  {opacity:1; transform:none;}
}
/* Интерлюдия плывёт медленнее страницы: ±4% высоты при постоянном 1,09, числа
   полос главной. Свойства translate/scale, чтобы не спорить с transform. */
@keyframes scene-drift{
  from{translate:0 -4%; scale:1.09;}
  to  {translate:0 4%;  scale:1.09;}
}
@media (min-width:1000px){
  .load{
    grid-template-columns:minmax(0,1fr) minmax(0,42%);
    column-gap:clamp(var(--sp-lg),4vw,var(--sp-2xl));
    padding-right:0;                       /* кадр уходит за правое поле */
  }
  .load__mark,.load__read,.load__st,.load__h,.load__ctx{grid-column:1;}
  .load__sc{
    grid-column:2; grid-row:1/6; align-self:stretch;
    aspect-ratio:auto; min-height:clamp(320px,42vw,540px);
  }
  /* КАДР ИНТЕРФЕЙСА В ФОЛДЕ (CRM, калькулятор), D2 29.09.2026: резкая вырезка
     2x из того же скриншота, что стоит РИС. ниже, в оправе экспоната, правый
     край за полем (C3). Растворение маской по краям у интерфейса читалось
     «размытым скрином, похожим на недогрузку» (критик, K 1440-01): у экрана
     край — рамка, а не туман. Атмосферные кадры трёх других кейсов маску
     сохраняют (G3). Смысловая зона вырезки слева сверху: сводка и список. */
  .load__sc--ui{
    overflow:hidden; background:var(--ink-deep);
    border:1px solid var(--paper-16); border-right:0;
  }
  .load__sc--ui .load__img{
    -webkit-mask-image:none; mask-image:none;
    object-position:0 0;
  }
}
/* B18: по ВЫСОТЕ — на 1366×768 фолд обязан сесть целиком */
@media (min-width:1000px) and (max-height:800px){
  .load{padding-block:clamp(var(--sp-md),3vh,var(--sp-lg)) clamp(var(--sp-xl),6vh,72px);}
  .load__sc{min-height:clamp(260px,34vw,420px);}
}

/* ══ ГЛАВА: проза слева, замеры справа, числа на полях не новые ══════════ */
.wb{
  position:relative; z-index:1;
  padding:clamp(var(--sp-xl),6vw,88px) var(--pad) clamp(var(--sp-lg),5vw,72px);
  display:grid; gap:clamp(var(--sp-md),3vw,var(--sp-lg));
}
/* A8 + B14: СТОЛ — ниже фолда другая плоскость со срезанной кромкой. */
.desk{
  position:relative; z-index:2;
  margin-top:-40px; background:var(--ink-lift);
  clip-path:polygon(0 40px, 100% 0, 100% 100%, 0 100%);
  padding-top:clamp(56px,6vw,96px);
  isolation:isolate;
  display:flow-root;   /* отступ .nxt не выпадает под стол полосой другого тона (87 px на 1440) */
}
.wb__name{
  margin:0; overflow-wrap:anywhere; min-width:0;                   /* гейт 51 */
  font-family:var(--ff-display); font-weight:600;
  font-size:clamp(22px,1.2vw + 16px,32px); line-height:1.2; letter-spacing:-.02em; text-wrap:balance;
  color:var(--paper);
}
.wb__body{margin:0; display:grid; gap:var(--sp-md); min-width:0;}
.wb__body p{
  margin:0; max-width:68ch;
  font-family:var(--ff-body); font-size:1rem; line-height:1.62;
  color:color-mix(in oklab, var(--paper) 88%, transparent);
}
/* ЗАМЕРЫ НА ПОЛЯХ: на узком — лента под текстом. */
.marks{display:grid; gap:var(--sp-md); align-content:start; min-width:0;}
.mark{display:grid; gap:var(--sp-3xs); min-width:0;
      border-top:1px solid var(--paper-16); padding-top:var(--sp-2xs);}
.mark__n{
  font-family:var(--ff-display); font-weight:300; font-size:clamp(24px,2.4vw,34px); line-height:1.05;
  letter-spacing:-.035em; font-variant-numeric:tabular-nums; color:var(--paper);
}
.mark__w{
  margin:0; font-family:var(--ff-body); font-size:.875rem; line-height:1.5;
  color:var(--paper-62);
}
/* С планшета замеры идут парой в ряд: четыре в столбик давали ленту в полэкрана.
   Раскладку главы по колонкам задаёт СЕТКА ТЕЛА ниже (от 64rem). */
@media (min-width:600px){
  .marks{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--sp-lg);}
}
/* ГЛАВНОЕ ЧИСЛО ГЛАВЫ (D2 29.09.2026, J6): число, единица, рамка счёта —
   три строки, число к подписи около 6:1 на 1440. Одно на страницу ниже фолда:
   критик видел «четыре равных числа подряд, главного нет» (K 390-05), после
   T11.3 осталось одно, но кеглем цен моста (34 px) и под абзацем на 1440.
   Кегль ниже показания фолда (до 180) и тоньше призыва связи (600): главное
   число главы, а не второй фолд. Место ДО абзаца на любой ширине — ниже,
   в СЕТКЕ ТЕЛА (.wb--lead). */
.marks--lead{grid-template-columns:minmax(0,1fr);}
.mark--lead{border-top:0; padding-top:0; gap:var(--sp-xs);}
/* строкой, не флексом: пробел между числом и единицей остаётся в тексте
   («3,29 млн ₽» для скринридера и поиска), единица садится на базовую линию сама */
.mark--lead .mark__n{
  display:block;
  font-size:clamp(56px,4.4vw + 32px,104px); line-height:.9; letter-spacing:-.05em;
}
.mark__u{font-size:clamp(24px,2.4vw,34px); letter-spacing:-.02em; color:var(--paper-62);
         white-space:nowrap;}
.mark--lead .mark__w{max-width:34ch; font-size:1rem; line-height:1.5;
                     color:color-mix(in oklab, var(--paper) 88%, transparent);}

/* ══ ИНТЕРЛЮДИЯ — Photographic (CRM, D2 29.09.2026). Кадр «Ночи» полосой во
 * всю ширину, тот же, что «Как я работаю» главной: пустое кресло у торшера,
 * вечер, созвон. Смена фактуры после экранов интерфейса (критик, K: «одна
 * фактура на 8,3 экрана»). Край кадра и есть шов между историей кейса и ценой
 * (J7). Кадр без смысла для чтения (alt=""), поэтому в разметке он ПОСЛЕ
 * текста главы. Телефон и планшет: глава, затем кадр целиком. От 72rem текст
 * стоит на тёмной правой половине стены, как на главной (крем 8,8–16,8:1). ═ */
.wb.scene{padding:clamp(var(--sp-xl),6vw,88px) 0 0; gap:0;}
.scene__txt{display:grid; gap:clamp(var(--sp-md),3vw,var(--sp-lg)); padding-inline:var(--pad); min-width:0;}
.scene__ph{
  position:relative; display:block; overflow:clip; margin-top:var(--sp-xl);
  aspect-ratio:780/435; background:var(--ink-deep);
}
.scene__ph img{display:block; width:100%; height:100%; object-fit:cover;}
/* волос света по верхней кромке, как у полос главной; нижняя кромка — шов */
.scene__ph::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 1px 0 color-mix(in oklab, var(--paper) 14%, transparent);
}
@media (min-width:48rem){ .scene__ph{aspect-ratio:2.2;} }

/* ══ ПЛОСКОСТЬ ЦЕНЫ И СВЯЗИ (CRM, D2): после интерлюдии мост, связь и следующий
 * экспонат лежат на поле подвала — третья плоскость страницы после фолда
 * и стола (J7: шов главы — смена поля), связь вплотную к подвалу (J8).
 * Зерно то же, что у подвала: плоскость и подвал читаются одной главой. ═ */
.coda{position:relative; z-index:1; display:flow-root; background:var(--ink-deep);}
/* зерно отдельным слоем под содержимым, а не фоновой картинкой самой плоскости:
   картинкой поля его читал детектор контраста (impeccable мерил текст моста
   по зерну: 1,3:1 при 11,9:1 по пикселям) */
.coda::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--grain-18) 0 0 / 220px 220px; mix-blend-mode:overlay;
}

/* ══ ЛИСТ ПИСЬМА — Letter (/case/calculator/). Стык другой, чем у соседей:
 * не срез наискось, а нахлёст; из-под верхней кромки идёт свет. ═════════ */
.desk--lap{
  clip-path:none;                     /* среза нет: это и есть отличие ритма */
  /* Лист уже страницы: во всю ширину справа от меры письма оставалось
     440px пустоты (замер на 1440). 1120px убирает её. */
  margin:-56px auto 0; max-width:min(100% - 2 * clamp(0px,3vw,72px), 1120px);
  border:1px solid var(--paper-16); border-bottom:0;
  /* Глубина без единой тени (приём B14 банка: у hungry-panda массив теней
     пуст, у mkristal ноль теней и радиусов). Лист приподнят сменой цвета
     плоскости --ink-lift против --ink и светом под кромкой ниже; мягкая
     тень 40px, стоявшая здесь, — ровно «парящая карточка» из §2.2. */
}
.desk--lap::before{
  content:""; position:absolute; z-index:0; inset:0 0 auto; height:120px; pointer-events:none;
  background:radial-gradient(58% 100% at 50% 0%,
    color-mix(in oklab,var(--glow) 14%,transparent), transparent 72%);
  mix-blend-mode:screen;
}
@media (min-width:1000px){
  /* У листа свои поля: кадр не уходит за край, как у CRM, оправа замкнута
     с четырёх сторон — вложение в письме. */
  .desk--lap .plate{padding-right:var(--pad);}
  .desk--lap .plate__frame{border-right:1px solid var(--paper-16);}
  .desk--lap .plate__corner--tr,.desk--lap .plate__corner--br{display:block;}
  .desk--lap .plate__cap{padding-right:0;}
  /* ГЛАВА-ПИСЬМО: имя на поле-корешке слева и держится при прокрутке,
     проза справа мерой 64 знака. Класс удвоен: .wb:not(:has(.marks)) выше
     имеет ту же специфичность, что одиночный класс. */
  .wb.wb--letter{
    grid-template-columns:minmax(0,14rem) minmax(0,64ch);
    column-gap:clamp(var(--sp-lg),4vw,var(--sp-2xl));
  }
  .wb--letter .wb__head{
    grid-column:1; grid-row:1; position:sticky; top:var(--sp-lg); align-self:start;
    border-right:1px solid var(--paper-16); padding-right:var(--sp-md); min-height:2.4em;
  }
  /* на корешке имя ступенью h3 главной: 600 при 22–32 px в 12rem рвал «измеряется» посреди слова */
  .wb--letter .wb__name{font-size:clamp(19px,.45vw + 17px,23px); overflow-wrap:normal; hyphens:manual;}
  .wb--letter .wb__body{grid-column:2; grid-row:1;}
  .wb--letter .wb__body p{max-width:64ch;}
}
@media (max-width:767px){
  /* Кадр 3 снят только на широком: пропорция 4/5 срезала бы почти всё. */
  .plate--wide .plate__frame{aspect-ratio:16/10;}
}
/* Разборы по теме — второй уровень, тише цены: латунь копится на кнопке. */
.bridge__read{margin:0; display:flex; flex-wrap:wrap; align-items:baseline;
              gap:0 var(--sp-md);}
.bridge__read-mark{font-family:var(--ff-body); font-size:.875rem; color:var(--paper-62);}
.bridge__read-link{
  display:inline-flex; align-items:center; min-height:44px; max-width:40ch;
  font-family:var(--ff-body); font-size:.875rem; line-height:1.5; color:var(--paper);
  border-bottom:1px solid var(--paper-16);
  transition:border-color var(--t-micro) var(--e-out);
}
@media (hover:hover){ .bridge__read-link:hover{border-bottom-color:var(--paper);} }
.bridge__read-link:active{border-bottom-color:var(--paper);}

/* ══ ПРИБОРНЫЕ ПАНЕЛИ — Stat-Led (/case/ai-support/). Кадров нет (продукт
 * в закрытом боте), ведут цифры: цена ответа и протокол проверок. Стык
 * третий по счёту: ровная кромка со световой линией. ════════════════════ */
.desk--plane{clip-path:none; margin-top:0; border-top:1px solid var(--paper-16);}
.desk--plane::before{
  content:""; position:absolute; z-index:0; inset:-1px 0 auto; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent 6%,
    color-mix(in oklab,var(--glow) 64%,transparent) 42%, transparent 88%);
}
/* Две полосы: панели разного веса (7/5) и разного содержимого — прибор,
   а не пара одинаковых карточек. Цифра НАД названием (B5). */
.bands{position:relative; margin:0; view-timeline-name:--plate;
       padding:clamp(var(--sp-lg),4vw,64px) var(--pad); display:grid; gap:var(--sp-md);}
.band{
  position:relative; z-index:1; display:grid; gap:var(--sp-2xs); align-content:start;
  border:1px solid var(--paper-16); border-radius:0;      /* A5: честный ноль */
  background:var(--ink-deep); padding:clamp(var(--sp-md),3vw,var(--sp-lg));
}
.band--quiet{background:none;}                            /* вес панели разный */
.band__num{
  font-family:var(--ff-display); font-weight:300; line-height:.96; letter-spacing:-.04em;
  /* та же ступень, что у .nxt__read: 5vw и 4.6vw давали в шкале две почти
     одинаковые ступени при потолке 14 */
  font-size:clamp(40px,4.6vw,72px); font-variant-numeric:tabular-nums; color:var(--paper);
}
.band__unit{font-size:max(14px,.34em); letter-spacing:-.01em; color:var(--paper-62); margin-left:.18em;}
.band__what{margin:0; font-family:var(--ff-body); font-size:.875rem; line-height:1.6;
            color:var(--paper-62);}
@media (min-width:900px){
  .bands{grid-template-columns:7fr 5fr; column-gap:clamp(var(--sp-lg),4vw,var(--sp-2xl));
         align-items:start;}
  .bands .plate__cap{grid-column:1/-1;}
}
/* Пломба: почему кадров нет. Пунктир — язык опечатанного, а не декор.
   Ширина по содержимому: во всю ширину рамка держала 700px пустоты. */
.sealed{
  margin:0 var(--pad); padding:var(--sp-md); max-width:min(100%,68ch);
  border:1px dashed var(--paper-16); display:grid; gap:var(--sp-2xs);
}
.sealed__tag{font-family:var(--ff-body); font-size:.875rem; color:var(--paper-62);}
.sealed__say{margin:0; font-family:var(--ff-body); font-size:.9375rem;
             line-height:1.6; color:color-mix(in oklab, var(--paper) 88%, transparent);}

/* Протокол замеров: пять строк разной длины, числа на ступени 24→34.
   Ни одного нового числа — все взяты из глав выше. */
.log{position:relative; margin:0; view-timeline-name:--plate;
     padding:clamp(var(--sp-lg),4vw,64px) var(--pad); display:grid; gap:var(--sp-md);}
.log__list{margin:0; display:grid;}
.log__row{
  position:relative; z-index:1; display:grid; gap:var(--sp-3xs) clamp(var(--sp-md),3vw,var(--sp-lg));
  border-top:1px solid var(--paper-16); padding:var(--sp-sm) 0;
}
/* nowrap обязателен: «22 из 32» рвалось на две строки посреди замера. */
.log__num{
  font-family:var(--ff-display); font-weight:300; line-height:1; letter-spacing:-.035em;
  /* ступень 24→34 уже есть в шкале (.mark__n, .wb__name, .bridge__sum):
     свой кегль 40px дал бы 15-ю ступень при потолке 14 в контракте. */
  font-size:clamp(24px,2.4vw,34px); font-variant-numeric:tabular-nums; color:var(--paper);
  white-space:nowrap;
}
.log__what{margin:0; max-width:58ch; font-family:var(--ff-body); font-size:.9375rem;
           line-height:1.6; color:var(--paper-62);}
@media (min-width:760px){
  .log__row{grid-template-columns:minmax(0,15rem) minmax(0,58ch); align-items:baseline;}
}

/* ══ ДИПТИХ — Split Studio (/case/ads/). Глава делит экран: слева слова,
 * справа улика, направление чередуется. Стык тот же, что у ИИ: так задаёт
 * таблица D волны 6 — три приёма стыка на пять страниц. ═════════════════ */
.duo{
  position:relative; z-index:1;
  padding:clamp(var(--sp-xl),6vw,88px) var(--pad) clamp(var(--sp-lg),5vw,72px);
  display:grid; gap:clamp(var(--sp-md),3vw,var(--sp-lg)); align-items:start;
}
.duo>*{position:relative; z-index:1;}
.duo .amb{position:absolute; z-index:0; --amb-at:24% 46%; --amb-size:56% 62%;}
.duo__say,.duo__txt{display:grid; gap:var(--sp-md); min-width:0;}
.duo__say p{
  margin:0; max-width:62ch; font-family:var(--ff-body); font-size:1rem; line-height:1.62;
  color:color-mix(in oklab, var(--paper) 88%, transparent);
}
/* Улика — величина, а не карточка: цифра, подпись, следствие. Числа
   берутся из абзаца рядом, новых на полях не появляется. */
.duo__proof{
  display:grid; gap:var(--sp-2xs); min-width:0;
  border-top:1px solid var(--paper-16); padding-top:var(--sp-sm);
}
.proof__num{
  font-family:var(--ff-display); font-weight:300; line-height:1.02; letter-spacing:-.04em;
  font-size:clamp(24px,3.2vw,46px); font-variant-numeric:tabular-nums; color:var(--paper);
  overflow-wrap:anywhere;
}
.proof__num s{text-decoration:none; color:var(--dim); font-size:max(14px,.42em);
              padding-inline:.3em; letter-spacing:.02em;}
.proof__unit{font-size:max(14px,.42em); color:var(--paper-62); margin-left:.14em;}
.proof__what{font-family:var(--ff-body); font-size:.875rem; color:var(--paper);}
.proof__note{margin:0; max-width:44ch; font-family:var(--ff-body); font-size:.875rem;
             line-height:1.6; color:var(--paper-62);}
@media (min-width:900px){
  .duo{grid-template-columns:minmax(0,1fr) minmax(0,34%);
       column-gap:clamp(var(--sp-lg),4vw,var(--sp-2xl));}
  /* Зеркало: у второй главы улика слева, и колонки меняются местами —
     иначе проза уезжала в 468px и читалась столбиком по 50 знаков. */
  .duo--flip{grid-template-columns:minmax(0,34%) minmax(0,1fr);}
  .duo--flip .duo__say{order:2;}
  .duo--flip .duo__proof{order:1;}
}

/* Таблица «до и после» — ГЛАВНЫЙ ЭКСПОНАТ: оправа и подпись как у кадра
   CRM, носитель другой. Обёртка прокручивается и берётся с клавиатуры:
   при зуме 200% данные уезжали за правый край (WCAG 1.4.4 и 2.1.1). */
.tbl{position:relative; margin:0; view-timeline-name:--plate;
     padding:clamp(var(--sp-lg),4vw,64px) var(--pad); display:grid; gap:var(--sp-md);}
.tbl__scroll{
  position:relative; z-index:1; overflow-x:auto;
  border:1px solid var(--paper-16); border-radius:0; background:var(--ink-deep);
}
.delta{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums;}
.delta__cap{
  caption-side:top; text-align:left; padding:var(--sp-sm) var(--sp-md);
  font-family:var(--ff-body); font-size:.875rem; line-height:1.5;
  color:var(--paper-62); border-bottom:1px solid var(--paper-07);
}
.delta th,.delta td{padding:var(--sp-sm) var(--sp-md); text-align:left;
                    border-top:1px solid var(--paper-07); white-space:nowrap;}
.delta thead th{font-family:var(--ff-body); font-size:.875rem; font-weight:400; color:var(--paper-62);}
.delta tbody th{font-family:var(--ff-body); font-size:.9375rem; font-weight:400;
                color:var(--paper-62); white-space:normal;}
.delta__was{font-family:var(--ff-body); font-size:.9375rem; color:var(--paper-62);}
/* Было --paper-38: контраст 3,17:1 на фоне таблицы, ниже порога 4,5 (WCAG 1.4.3).
   62% даёт 6,94:1, а иерархия держится не светлотой, а кеглем и гарнитурой:
   «стало» идёт display-шрифтом 20–28px против моно 13–15px у «было». */
/* «Стало» крупнее и ярче, но без латуни: акцент копится на действии (A3). */
.delta__now{font-family:var(--ff-display); font-weight:300; letter-spacing:-.02em;
            font-size:clamp(20px,2vw,28px); color:var(--paper);}

/* На телефоне таблица ужимается, а не становится свитком: при исходных
   отступах свиток был шире поля на 96px при 390. Роли таблицы целы. */
@media (max-width:560px){
  .delta th,.delta td{padding:var(--sp-2xs) var(--sp-xs);}
  .delta__cap{padding:var(--sp-2xs) var(--sp-xs);}
  /* .delta__now отдельного кегля не получает: clamp(20px,2vw,28px) на 390
     сам даёт нижнюю границу 20px, а лишний литерал — 15-я ступень шкалы */
  .delta__was{font-size:.875rem;}
}
/* На 320 таблица не влезала в поле на 41px. Отступы режутся ещё раз,
   кегли не трогаются: ступеней в шкале и так 14. */
@media (max-width:360px){
  .delta th,.delta td{padding:var(--sp-3xs) var(--sp-2xs);}
}

/* Служебный слой одним правилом */
.bridge__what,.scheme__tag,.scheme__seamt,.scheme__li b,.nxt__name{
  font-family:var(--ff-body); font-size:.875rem; }

/* ══ КАДР-ЭКСПОНАТ: шесть приёмов раздела C, ни один не прячет содержимое.
 * Оправа и есть разница между иллюстрацией и экспонатом. ═════════════════ */
.plate{position:relative; margin:0; padding:clamp(var(--sp-lg),4vw,64px) var(--pad);
        view-timeline-name:--plate;}
.plate__frame{
  position:relative; overflow:hidden;
  border:1px solid var(--paper-16); border-radius:0;   /* A5: честный ноль */
  background:var(--ink-deep); line-height:0;
  /* C3. Кадрирование 16:9 при исходных 16:10: за нижнюю кромку уходит
     служебная полоса стенда с запрещёнными правилом словами. Целый кадр
     остаётся под лупой и по ссылке «открыть кадр целиком». */
  aspect-ratio:16/9;
}
.plate__frame img{
  display:block; width:100%; height:100%; border:0;
  object-fit:cover; object-position:left top;           /* смысловая зона слева */
  /* Не доехал кадр — читается alt, а не каша: у оправы line-height:0 ради
     нулевого зазора под картинкой, и альтернативный текст наезжал сам на себя
     (замер: три строки alt в 0px интерлиньяжа). */
  line-height:1.5; font-family:var(--ff-body); font-size:.875rem; color:var(--paper-62);
}
/* C2. СВЕТ И ВИНЬЕТКА слоем поверх, не фильтром: filter на кадре 2880px —
   растр на каждой перерисовке. Центр кадра остаётся честным пикселем (была
   тонировка multiply на весь кадр, критик читал её вуалью). Тот же слой
   садит в оправу кадр интерфейса в фолде (.load__sc--ui). */
.plate__frame::before,.load__sc--ui::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 90% at 0% 0%, var(--plate-light), transparent 58%),
    radial-gradient(140% 120% at 50% 45%, transparent 56%, var(--plate-shade));
  opacity:var(--plate-tint,1);
  transition:opacity var(--t-micro) var(--e-out);
}
/* C4. СВЕТ из-под кромки — приём прибора с лендинга. */
.plate__frame::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(72% 48% at 50% 104%,
    color-mix(in oklab,var(--glow) 22%,transparent), transparent 70%);
  mix-blend-mode:screen;
}
/* C6. Лупа снимает тонировку: под стеклом честный пиксель. */
.plate__frame.is-lens::before{opacity:0;}
/* C1. Уголки-засечки — приём .fig с лендинга */
.plate__corner{
  position:absolute; z-index:3; width:var(--sp-xs); height:var(--sp-xs); pointer-events:none;
  border:1px solid var(--paper-38);
}
.plate__corner--tl{top:-1px; left:-1px;  border-width:1px 0 0 1px;}
.plate__corner--tr{top:-1px; right:-1px; border-width:1px 1px 0 0;}
.plate__corner--bl{bottom:-1px; left:-1px;  border-width:0 0 1px 1px;}
.plate__corner--br{bottom:-1px; right:-1px; border-width:0 1px 1px 0;}
/* C5. ПОДПИСЬ: РИС. N с выноской (wildcard проекта) */
.plate__cap{
  display:flex; align-items:baseline; justify-content:space-between;
  flex-wrap:wrap; gap:var(--sp-2xs) var(--sp-md); margin-top:var(--sp-sm);
  font-family:var(--ff-body); font-size:.875rem; line-height:1.5;
}
.plate__no{
  margin:0; display:flex; align-items:center; gap:.75em; min-width:0;
  color:var(--paper);
}
/* Выноска гравированная, не латунная: акцент только на действии (кнопка)
   и на смысле (шов схемы). Третий укол уводил долю латуни за 3%. */
.plate__no::before{content:""; flex:0 0 auto; width:28px; height:1px; background:var(--paper-38);}
.plate__note{margin:0; min-width:0; color:var(--paper-62);}
.plate__full{
  display:inline-flex; align-items:center; gap:.4em; min-height:44px;
  color:var(--paper-62); border-bottom:1px solid var(--paper-16);
  overflow-wrap:break-word;
  transition:border-color var(--t-micro) var(--e-out), transform var(--t-press) var(--e-out);
}
@media (hover:hover){ .plate__full:hover{border-bottom-color:var(--paper); transform:translateX(2px);} }
.plate__full:active{color:var(--paper); border-bottom-color:var(--paper); transform:translateY(1px);}
/* Ссылка на полный кадр внутри вырезки фолда: поверх нижнего левого угла кадра, вне потока,
   на плашке цвета поля, чтобы читалась поверх строк таблицы. Кадр в фолде есть только от 1000 px. */
.load__full{
  position:absolute; z-index:4; left:var(--sp-sm); bottom:var(--sp-sm);
  padding:0 var(--sp-xs); color:var(--paper);
  background:color-mix(in oklab,var(--ink-deep) 88%,transparent);
  border:1px solid var(--paper-38);
}
@media (hover:hover){ .load__full:hover{border-color:var(--paper); transform:translateX(2px);} }
.load__full:active{border-color:var(--paper);}
@media (min-width:1000px){
  /* Правый край уходит за поле: приём, а не обрезка по недосмотру (C3). */
  .plate{padding-right:0;}
  /* height, а не max-height: с aspect-ratio ограничение по высоте сжимает
     и ширину, и кадр отъезжает от правого края. */
  .plate__frame{aspect-ratio:auto; height:min(72svh,720px);}
  .plate__frame{border-right:0;}
  .plate__corner--tr,.plate__corner--br{display:none;}
  .plate__cap{padding-right:var(--pad);}
}
@media (max-width:767px){
  .plate__cap{flex-direction:column;}
  .plate__no::before{width:20px;}
  /* На узком кадр снят с телефона (750×1624), и 16:9 срезал бы его почти
     целиком: там своя пропорция, а не сжатая десктопная (B19). */
  .plate__frame{aspect-ratio:4/5;}
}

/* ── ЛУПА: разметку строит js/loupe.js, здесь материал. Без скрипта кадр
   остаётся картинкой, увеличение живёт ссылкой на полный кадр.
   ⚠️ Кадр внутри оправы НЕ двигать: линза считает координаты от оправы. */

:root{--loupe-size:13.75rem;}
.is-loupe .plate__frame{cursor:zoom-in;}
.is-loupe .plate__frame.is-lens{cursor:none;}
.plate__hint{
  position:absolute; z-index:4; right:var(--sp-xs); bottom:var(--sp-xs);
  max-width:calc(100% - var(--sp-sm));
  padding:var(--sp-3xs) var(--sp-2xs);
  background:var(--ink-deep); border:1px solid var(--paper-16);
  font-family:var(--ff-body); font-size:.875rem; line-height:1.4;
  color:var(--paper-62); pointer-events:none; opacity:1;
  transition:opacity var(--t-micro) var(--e-out);
}
.plate__frame.is-lens .plate__hint{opacity:0;}
.plate__hint--touch{display:none;}
@media (hover:none){
  .plate__hint--hover{display:none;}
  .plate__hint--touch{display:inline;}
}
.loupe{
  position:absolute; left:0; top:0; z-index:5;
  width:var(--loupe-size); height:var(--loupe-size);
  margin-left:calc(var(--loupe-size) / -2); margin-top:calc(var(--loupe-size) / -2);
  transform:translate3d(-9999px,-9999px,0); will-change:transform; pointer-events:none;
}
.loupe__glass{
  position:absolute; inset:0; overflow:hidden;
  /* Оправа нейтральная: латунь копится на действии и на выноске подписи,
     третий укол здесь размывал сигнал (A3). */
  border-radius:999px; border:1px solid var(--paper-38);
  background-color:var(--ink-deep);
  box-shadow:inset 0 0 0 1px var(--lens-inner);   /* жёсткая кромка, не мягкая тень (B13) */
  opacity:0; transform:scale(.92);
  transition:opacity var(--t-press) var(--e-out), transform var(--t-press) var(--e-out);
}
.loupe__film{
  position:absolute; left:0; top:0;
  background-repeat:no-repeat; background-size:100% 100%;
  transform:translate3d(0,0,0); will-change:transform;
}
.loupe.is-on .loupe__glass{opacity:1; transform:scale(1);}
@media (max-width:767px){ :root{--loupe-size:10rem;} }

/* ══ СХЕМА — главный экспонат Map/Diagram (/case/dashboard/): кадров нет,
 * предмет витрины играет чертёж. Латунь — шов и кнопка Telegram. ════════ */
.scheme{
  position:relative; margin:0; view-timeline-name:--plate;
  padding:clamp(var(--sp-lg),4vw,64px) var(--pad);
  display:grid; gap:var(--sp-md);
}
/* Окна светлее листа, промежуток между ними и есть предмет разговора. */
.scheme__band{
  display:grid; grid-template-columns:minmax(0,1fr) 2px minmax(0,1fr);
  border:1px solid var(--paper-16); border-radius:0;      /* A5: честный ноль */
  background:var(--ink-deep);
}
.scheme__win{
  position:relative; display:grid; gap:var(--sp-2xs); align-content:start; min-width:0;
  grid-template-rows:auto auto 1fr;
  padding:clamp(var(--sp-md),3vw,var(--sp-lg));
  min-height:clamp(180px,20vw,260px);
  background:
    repeating-linear-gradient(90deg, var(--paper-07) 0 1px, transparent 1px 48px),
    var(--ink-lift);
}
/* Уровень выручки: во втором окне выше, рост видно в чертеже. */
.scheme__lvl{
  position:relative; align-self:end; margin:var(--sp-lg) calc(var(--pad) * -1) 0; height:var(--lvl,56px);
  border-top:1px solid var(--paper-38);
  background:linear-gradient(180deg, color-mix(in oklab,var(--paper) 12%,transparent), transparent);
}
/* Высота в px, не в процентах: на 390 подпись наезжала на описание. */
.scheme__lvl b{position:absolute; right:var(--sp-sm); bottom:calc(100% + var(--sp-3xs));
               font-weight:400; font-family:var(--ff-body); font-size:.875rem;
               color:var(--paper-62);}
.scheme__tag{color:var(--paper);}
.scheme__what{font-family:var(--ff-body); font-size:.875rem; line-height:1.6;
              color:var(--paper-62);}
/* ШОВ: латунь стоит ровно там, где стояла ошибка. */
.scheme__seam{position:relative; background:var(--brass);}
.scheme__seam::before{
  content:""; position:absolute; inset:-1px -18px; pointer-events:none;
  background:radial-gradient(50% 60% at 50% 50%,
    color-mix(in oklab,var(--glow) 34%,transparent), transparent 72%);
  mix-blend-mode:screen;
}
.scheme__seamt{
  position:absolute; left:50%; bottom:calc(100% + var(--sp-2xs));
  transform:translateX(-50%); color:var(--paper-62); white-space:nowrap;
}
/* Легенда: каждая ошибка начинается со своего предмета, нумерации нет. */
.scheme__leg{margin:0; padding:0; list-style:none; display:grid; gap:var(--sp-sm);}
.scheme__li{
  font-family:var(--ff-body); font-size:.875rem; line-height:1.6;
  color:var(--paper-62); border-top:1px solid var(--paper-16); padding-top:var(--sp-2xs);
}
.scheme__li b{display:block; font-weight:400; color:var(--paper);
              margin-bottom:var(--sp-3xs);}
@media (min-width:760px){
  .scheme__leg{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-lg);}
}
@media (max-width:759px){
  /* B19: на телефоне схема ДРУГАЯ — окна друг под другом, шов
     горизонтальный: два окна по 150px читались бы полосками. */
  .scheme__band{grid-template-columns:minmax(0,1fr); grid-auto-rows:auto;}
  .scheme__seam{height:2px;}
  .scheme__seam::before{inset:-18px -1px;}
  .scheme__seamt{left:auto; right:var(--pad); bottom:calc(100% + var(--sp-3xs));
                 top:auto; transform:none; z-index:2;}
}

/* ══ МОСТ К ОФФЕРУ: человек с рекламы попадает СЮДА и без блока не увидит
 * ни цены, ни «для кого». ═══════════════════════════════════════════════ */
.bridge{
  position:relative; z-index:1;
  padding:clamp(var(--sp-xl),6vw,88px) var(--pad);
  display:grid; gap:clamp(var(--sp-md),3vw,var(--sp-lg));
}
.bridge__name{
  margin:0; overflow-wrap:anywhere; min-width:0;                   /* гейт 51 */
  font-family:var(--ff-display); font-weight:600;
  font-size:clamp(22px,1.2vw + 16px,32px); line-height:1.2; letter-spacing:-.02em; text-wrap:balance;
}
/* Мост «у вас это будет так же» звучит МЫСЛЬЮ (display 20–28px): body-кеглем
   он читался продолжением главы, а не поворотом к цене. */
.bridge__you{
  margin:0; max-width:30ch; overflow-wrap:anywhere; min-width:0;
  font-family:var(--ff-body); font-weight:400;
  font-size:clamp(19px,.45vw + 17px,23px); line-height:1.4;
  color:var(--paper); text-wrap:pretty;
}
/* Снятие риска: служебная строка, а не второй абзац — две прозы про
   «дальше» подряд читаются оправданием. */
.bridge__risk{
  margin:var(--sp-2xs) 0 0; font-family:var(--ff-body); font-size:.875rem;
  line-height:1.5; color:var(--paper-62);
}
.bridge__rates{margin:0; display:grid; gap:var(--sp-md);}
.bridge__row{
  display:grid; gap:var(--sp-3xs);
  border-top:1px solid var(--paper-16); padding-top:var(--sp-sm);
}
.bridge__what{color:var(--paper-62);}
.bridge__sum{margin:0; font-family:var(--ff-display); font-weight:300;
             font-size:clamp(24px,2.4vw,34px); line-height:1.1; letter-spacing:-.03em;
             font-variant-numeric:tabular-nums;}
.bridge__cur{font-size:max(14px,.42em); color:var(--paper-62);}
.bridge__note{margin:0; max-width:56ch; font-family:var(--ff-body);
              font-size:.875rem; line-height:1.6; color:var(--paper-62);}
.bridge__go{margin:0; display:flex; flex-wrap:wrap; gap:var(--sp-sm) var(--sp-lg);}
@media (min-width:1000px){
  .bridge__rates{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-lg);}
}
/* Ссылка-действие как «Смотреть кейс» главной: Golos 600, линия появляется на наведении */
.go{
  display:inline-flex; align-items:center; gap:var(--sp-2xs); min-height:44px;
  font:600 .875rem/1 var(--ff-body); color:var(--paper);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px;
  text-decoration-color:transparent;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:text-decoration-color var(--t-micro) var(--e-out), transform var(--t-press) var(--e-out);
}
.go i{font-style:normal; color:var(--paper); display:inline-block;
      transition:transform var(--t-micro) var(--e-out);}
@media (hover:hover) and (pointer:fine){
  .go:hover{text-decoration-color:currentColor;}
  .go:hover i{transform:translateX(3px);}
}
.go:active{transform:translateY(1px);}
.go:active i{transform:translateX(3px);}
/* восьмое состояние описано, хотя в макете не встречается */
.go[aria-disabled="true"],.way__btn[aria-disabled="true"],.plate__full[aria-disabled="true"]{
  opacity:.55; cursor:not-allowed; pointer-events:none;
}

/* ══ СВЯЗЬ: формы нет (раздел F) — согласие и его версия живут в одном
 * месте, пять копий это пять мест расхождения. ══════════════════════════ */
/* низ короче верха (D2): дальше не новая глава, а табличка и «Следующий
   экспонат» той же плоскости; 88 + 72 над табличкой критик читал пустотой */
.talk{position:relative; z-index:1; padding:clamp(var(--sp-xl),6vw,88px) var(--pad) clamp(var(--sp-lg),4vw,56px);
      display:grid; gap:clamp(var(--sp-md),3vw,var(--sp-lg));}
.talk__h{margin:0; max-width:24ch; overflow-wrap:anywhere; min-width:0;
         font-family:var(--ff-display); font-weight:600;
         font-size:clamp(40px,4vw + 22px,88px); line-height:1.08; letter-spacing:-.03em; text-wrap:balance;}  /* J8: призыв крупнее всего ниже фолда, токен --text-call главной */
.talk__lead{margin:0; max-width:62ch; font-family:var(--ff-body);
            font-size:1rem; line-height:1.62;
            color:color-mix(in oklab, var(--paper) 88%, transparent);}
/* Кто отвечает — тише каналов: канал это действие, это обещание рядом */
.talk__own{margin:0; max-width:62ch; font-family:var(--ff-body);
           font-size:.9375rem; line-height:1.6; color:var(--paper-62);}
.ways{margin:0; padding:0; list-style:none; display:grid; gap:var(--sp-md);}
@media (min-width:760px){ .ways{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-lg);} }
.way{display:grid; gap:var(--sp-2xs); align-content:start;
     border-top:1px solid var(--paper-16); padding-top:var(--sp-sm);}
.way__k{margin:0; font-family:var(--ff-body); font-size:.875rem; color:var(--paper-62);}
.way__v{margin:0; font-family:var(--ff-body); font-weight:600;
        font-size:clamp(19px,.45vw + 17px,23px); line-height:1.3;
        overflow-wrap:anywhere;}
.way__p{margin:0; font-family:var(--ff-body); font-size:.875rem; line-height:1.6;
        color:var(--paper-62);}
.way__go{margin:var(--sp-2xs) 0 0;}
/* Telegram: главная кнопка страницы, та же латунная пилюля, что .go на главной; письмо тише, по линии */
.way__btn{
  display:inline-flex; align-items:center; gap:var(--sp-xs);
  min-height:52px; padding:0 var(--sp-md);
  border:1px solid var(--brass); border-radius:999px;
  background:var(--brass); color:var(--night);
  font:600 1rem/1 var(--ff-body); white-space:nowrap;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:transform var(--t-micro) var(--e-out), border-color var(--t-micro) var(--e-out);
}
.way__btn--quiet{border-color:var(--line); background:none; color:var(--paper);}
.way__arw i{font-style:normal; display:inline-block;
            transition:transform var(--t-micro) var(--e-out);}
@media (hover:hover) and (pointer:fine){
  .way__btn--quiet:hover{border-color:var(--dim);}
  .way__btn:hover .way__arw i{transform:translateX(3px);}
}
.way__btn:active{transform:scale(.97); transition-duration:var(--t-press);}
.way__btn:focus-visible{outline-offset:3px;}

/* ══ ТАБЛИЧКА ЭКСПОНАТА: номер, имя, владелец, месяц и год. ══════════════ */
.stamp{
  margin:clamp(var(--sp-md),3vw,var(--sp-xl)) var(--pad) 0;
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2xs) var(--sp-xs);
  font-family:var(--ff-body); font-size:.875rem;   line-height:1.5; color:var(--paper-62);
}
/* Капс только на номере: 52 знака подряд читаются медленнее (impeccable). */
.stamp b{font-weight:400; color:var(--paper);}
.stamp i{flex:0 0 auto; width:var(--sp-md); height:1px; background:var(--paper-38);}

/* ══ СЛЕДУЮЩИЙ ЭКСПОНАТ: не список, а ОДИН кадром — уходят не в каталог,
 * а в работу. Кольцо идёт в порядке витрины. ════════════════════════════ */
.nxt{
  position:relative; z-index:1; display:block;
  margin:0 var(--pad) clamp(var(--sp-xl),6vw,88px);
  border-top:1px solid var(--paper-16); padding-top:var(--sp-md);
}
/* Подпись у верхней кромки кадра, а не по центру его высоты: по центру над
   «Следующим экспонатом» стояло поле без содержимого, и вместе с отступами
   связи и таблички критик читал его «пустотой на полэкрана» (K 1440-07). */
.nxt__in{display:grid; gap:var(--sp-md); align-items:start;}
.nxt__k{margin:0; font-family:var(--ff-body); font-size:.875rem; color:var(--paper-62);}
.nxt__read{margin:0; overflow-wrap:anywhere; min-width:0;
           font-family:var(--ff-display); font-weight:300;
           font-size:clamp(40px,4.6vw,72px); line-height:.96; letter-spacing:-.045em;
           font-variant-numeric:tabular-nums;}
.nxt__read s{text-decoration:none; color:var(--paper-38); padding-inline:.12em;}
.nxt__read span{font-size:max(14px,.42em); letter-spacing:-.02em; color:var(--paper-62);}
.nxt__name{margin:0; color:var(--paper);}
.nxt__go{margin:var(--sp-2xs) 0 0;}
/* Фон по эталону оправы .plate__frame: кадр может не заполнить рамку целиком
   (см. ниже про contain), и под ним обязана лежать плоскость сцены, а не
   просвет страницы. */
.nxt__sc{margin:0; overflow:hidden; border:1px solid var(--paper-07); aspect-ratio:16/10;
         background:var(--ink-deep);}
.nxt__sc img{display:block; width:100%; height:100%; object-fit:cover; object-position:0 0;   /* смысловая зона снимка слева сверху */
             /* --t-micro, не --t-scene: на 1100 мс кадр «липнет» после ухода
                курсора. Бюджет наведения 240 мс. */
             transition:transform var(--t-micro) var(--e-out);}
/* ⚠️ Тот же закон, что у .vw__img в board.css, и по той же причине: кольцо
   «Следующий экспонат» показывает те же пять кадров витрины, а три из них
   шире рамки 16/10 — реклама 2,27:1, ИИ 2,54:1, дашборд 2,88:1. cover срезал
   у них края вместе с подписями посреди слова. Класс стоит в разметке трёх
   страниц (ads, ai-support, calculator — у них в карточке широкий кадр), на
   двух остальных кадр 4:3 и он честно заполняет рамку обрезкой по высоте. */
.nxt__sc img.is-wide{object-fit:contain; object-position:50% 50%;}
@media (min-width:760px){
  .nxt__in{grid-template-columns:minmax(0,1fr) minmax(0,38%);}
}
@media (hover:hover){
  .nxt:hover .nxt__sc img{transform:scale(1.02);}      /* B10: движение, не перекраска */
  .nxt:hover .go{text-decoration-color:currentColor;}
  .nxt:hover .go i{transform:translateX(3px);}
}
.nxt:active .nxt__sc img{transform:scale(1.005);}

/* ══ СЕТКА ТЕЛА (круг 2, 28.09.2026) — сетка глав главной (.how/.faq/.talk,
 * noch-tail.css): от 64rem две колонки 2:3, зазор 40, правый край на 76rem
 * от поля, всё прижато влево. Шапка главы слева, текст справа. На 1440:
 * шапка x=40, текст x=550, край 1256 (было: текст 40…710, правая половина
 * пустая по нескольку экранов). Блок стоит после компонентов намеренно:
 * при равной специфичности перекрывает их правила порядком.
 * Не трогает: фолд-паспорт (принят), кадр .plate CRM (уходит за правое
 * поле, C3), лист письма калькулятора (корешок и мера 64 знака — это и есть
 * устройство страницы Letter). 1920: пустота справа как на главной, ждёт
 * решения владельца по главной. ═════════════════════════════════════════ */
.desk,.coda{--grid-w:76rem; --grid-gap:40px;}   /* .coda — соседка стола на CRM (D2), сетка та же */
@media (min-width:64rem){
  .wb,.duo,.duo--flip,.bridge{
    grid-template-columns:minmax(0,2fr) minmax(0,3fr);
    column-gap:var(--grid-gap);
    max-width:calc(var(--grid-w) + 2 * var(--pad));
  }
  /* ГЛАВА: замеры на полях — полосой под текстом в его же колонке */
  .wb__head{grid-column:1; grid-row:1;}
  .wb__body{grid-column:2; grid-row:1;}
  .marks{grid-column:2; grid-row:2;}
  /* ДИПТИХ (Split Studio): слева шапка и улика, справа слова. Улика встаёт
     под шапку, а не под текст: у «Что сделал» один абзац, и полосой под ним
     она оставила бы левую колонку пустой. Строка 1fr забирает высоту текста,
     шапка и улика идут вплотную. */
  .duo,.duo--flip{grid-template-rows:auto 1fr;}
  .duo__say{display:contents;}
  .duo__say>*{position:relative; z-index:1;}      /* над светом .amb, как было у обёртки */
  .duo__say>.wb__name{grid-column:1; grid-row:1;}
  .duo__txt{grid-column:2; grid-row:1 / span 2;}
  .duo__proof,.duo--flip .duo__proof{grid-column:1; grid-row:2;}
  /* МОСТ: «у вас это будет так же» и шапка слева, цены на линиях справа
     списком, как «Сколько это стоит» главной */
  .bridge{grid-template-rows:auto 1fr;}
  .bridge__you{grid-column:1; grid-row:1;}
  .bridge__name{grid-column:1; grid-row:2;}
  .bridge__rates{grid-column:2; grid-row:1 / span 2; grid-template-columns:minmax(0,1fr);}
  .bridge__go,.bridge__read{grid-column:2;}
  /* ШИРОКИЕ ЭКСПОНАТЫ во всю ширину сетки; строки протокола на её же линиях */
  .bands,.log,.tbl,.scheme,.talk{max-width:calc(var(--grid-w) + 2 * var(--pad));}
  /* подпись кадра кончается на правом краю сетки, а не у кромки окна:
     у .plate правого поля нет (кадр уходит за край), его несёт сама подпись */
  .plate__cap{max-width:calc(var(--grid-w) + var(--pad));}
  .bands .plate__cap,.log .plate__cap,.tbl .plate__cap,.scheme .plate__cap{padding-right:0;}
  .log__row{grid-template-columns:minmax(0,2fr) minmax(0,3fr); column-gap:var(--grid-gap);}
  /* ПЛОМБА — пояснение к экспонату, стоит в колонке текста */
  .sealed{
    margin-left:calc(var(--pad) + (min(100% - 2 * var(--pad), var(--grid-w)) - var(--grid-gap)) * .4 + var(--grid-gap));
    max-width:calc((min(100% - 2 * var(--pad), var(--grid-w)) - var(--grid-gap)) * .6);
  }
  /* СВЯЗЬ: призыв во всю ширину (J8), каналы на линиях сетки */
  .ways{grid-template-columns:minmax(0,2fr) minmax(0,3fr); column-gap:var(--grid-gap);}
  .nxt{max-width:var(--grid-w);}
  .nxt__in{grid-template-columns:minmax(0,2fr) minmax(0,3fr); column-gap:var(--grid-gap);}
  /* ГЛАВНОЕ ЧИСЛО (D2): первой строкой колонки текста, абзац под ним.
     До D2 здесь действовало общее правило замеров, и число стояло ПОД абзацем. */
  .wb--lead .marks{grid-row:1;}
  .wb--lead .wb__body{grid-row:2;}
  /* ИНТЕРЛЮДИЯ: полоса во всю ширину, глава внутри на линиях сетки */
  .wb.scene{grid-template-columns:minmax(0,1fr); max-width:none;}
  .scene__txt{grid-template-columns:minmax(0,2fr) minmax(0,3fr); column-gap:var(--grid-gap);
              max-width:calc(var(--grid-w) + 2 * var(--pad));}
}
/* От 72rem глава на стене кадра: правая тёмная половина над креслом.
   Кадр 2,4:1 (как призыв главной): срез по 4% сверху и снизу, спинка кресла
   ниже текста, торшер у левого края цел. 2:1 растил страницу на 120 px. */
@media (min-width:72rem){
  .wb.scene{padding:0;}
  .wb.scene>*{grid-area:1/1;}
  .scene__ph{margin-top:0; aspect-ratio:2.4; max-height:80svh;}
  .scene__ph img{object-position:0% 50%;}
  .scene__txt{
    position:relative; z-index:1; align-self:start; justify-self:end;
    width:min(35rem,43%); max-width:none;
    grid-template-columns:minmax(0,1fr); row-gap:var(--sp-md);
    padding:clamp(48px,3vw + 12px,88px) var(--pad) var(--sp-2xl) 0;
  }
  .scene__txt>.wb__body{grid-column:1; grid-row:2;}
}

/* ══ ВТОРОЙ ДВИГАТЕЛЬ: прокрутка. Только усиление поверх рабочего
 * состояния: нет поддержки или reduce-motion — страница в дошедшем виде. ═ */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* Ход камеры фолда (amb-drift на .load__sc) снят в D2 29.09.2026: кейфреймов
       amb-drift нет ни в одном файле с переезда на «Ночь», правило было мёртвым.
       Ход камеры остался у интерлюдии: кадр плывёт медленнее страницы, как полосы
       главной (band-drift, noch-tail.css), и в любой точке прокрутки законченный:
       движется только положение, прозрачность не трогается. overflow:clip у
       .scene__ph, а не hidden: hidden делает рамку контейнером прокрутки,
       и анонимный view() на картинке внутри неё стоял бы. */
    .scene__ph img{
      animation:scene-drift linear both;
      animation-timeline:view(); animation-range:cover 0% cover 100%;
    }
    /* Кадр собирается на въезде: свет из-под кромки, следом выноска подписи.
       ⚠️ Таймлайн ИМЕНОВАННЫЙ: внутри .plate__frame с overflow:hidden
       анонимный view() неактивен, свет горел на полную с первого кадра. */
    .plate__frame::after{
      animation:glow-rise linear both;
      animation-timeline:--plate; animation-range:entry 18% entry 90%;
    }
    /* Бюджет 23.09.2026: не больше 8 ЭКЗЕМПЛЯРОВ от прокрутки на странице,
       считая ::before/::after. Стоимость: 1 (интерлюдия .scene) + 2 на каждый
       кадр .plate: CRM 1 + 2×2 = 5, калькулятор 2×3 = 6. Три чёрточки таблички
       .stamp i отсюда сняты: они давали +3 на каждой странице (калькулятор
       был 10), а в покое и так стоят дорисованными — вид не меняется. */
    .plate__no::before{
      animation:wire-draw linear both; transform-origin:left center;
      animation-timeline:view(); animation-range:entry 38% entry 94%;
    }
  }
}

/* ══ ЛЕСЕНКА ВЪЕЗДА (B17): утилита .rise в core.css, здесь ступени. ══════
   Аудит моушена 06.09: пять строк протокола въезжали одним блоком, хотя
   читаются по очереди. Ступени те же, что у замеров CRM — новых чисел нет. */
.mark:nth-child(2){--rise-a:4%;  --rise-b:94%;}
.mark:nth-child(3){--rise-a:8%;  --rise-b:98%;}
.mark:nth-child(4){--rise-a:12%; --rise-b:100%;}
.way:nth-child(2){--rise-a:4%;   --rise-b:94%;}
.bridge__row:nth-child(2){--rise-a:4%; --rise-b:94%;}
.log__row:nth-child(2){--rise-a:4%;  --rise-b:94%;}
.log__row:nth-child(3){--rise-a:8%;  --rise-b:98%;}
.log__row:nth-child(4){--rise-a:12%; --rise-b:100%;}
.log__row:nth-child(5){--rise-a:16%; --rise-b:100%;}

/* ══ Контраст и настройки системы ═══════════════════════════════════════════ */
@media (prefers-contrast:more){
  .page__etch,.page__grain{display:none;}
  .load__ctx,.wb__body p,.mark__w,.way__p,.bridge__note,.plate__note{color:var(--paper);}
  .plate__frame::before{opacity:.06;}
}
@media (prefers-reduced-motion:reduce){
  /* «меньше и мягче», а не «ничего»: слежение лупы 1:1 остаётся, это прямая
     манипуляция, а не декор. */
  .loupe__glass{transition:opacity var(--t-press) linear; transform:none;}
  .loupe.is-on .loupe__glass{transform:none;}
  .plate__hint{transition:none;}
  .nxt__sc img,.go i,.way__arw i{transform:none !important; transition:none !important;}
}


/* Hallmark · macrostructure: Workbench · polish: HP4 Decorative-numeral
 * · genre: atmospheric · theme: custom «Ночь» (DESIGN.md v2), макет C+ владельца 07.10.2026
 * · nav: шапка подстраниц core.css · footer: Ft6 подвал core.css
 * ═══════════════════════════════════════════════════════════════════════════════════
 * ШАБЛОН КЕЙСА «РАМКА» (cf-), D2 07.10.2026. Единый вид шести страниц кейсов по скрину 7
 * владельца и макету C+.
 * Старые формы выше (Workbench, Letter, Stat-Led, Split Studio, Map/Diagram) НЕ тронуты:
 * страницы ads, crm, dashboard, ai-support живут на них до своего переезда. Новый слой
 * ничего из старого не переопределяет, кроме одной связки .nxt.cf-next (кольцо кейсов).
 * Порядок страницы: герой (текст + кадр в рамке с выносками) → сцена (дуэль ИЛИ одно число)
 * → три карточки → полоса фактов → свёрнутое «Подробнее» → призыв #talk.
 * Движение: всё конечное. Секундомеры и выноски проигрываются один раз, наклон и свет за
 * курсором только у мыши, на тач-экране кадр стоит ровно. reduce: сразу итоговый кадр.
 * Новый цвет один: --cf-alarm (приглушённый красный плашки «Ошибки», утверждён владельцем
 * в C+). Остальное смеси токенов core.css. Радиус бинарный (A5): 24 у плоскостей, пилюля
 * у органов. Трекинг по уровням шкалы (A6): −3% у H1, −2% у чисел, 0 у текста. */
.cf{
  --cf-w:90rem;                                            /* ширина блоков = ширине героя, ровный правый край */
  --cf-r:24px;                                             /* плоскости: рамка, табло, карточки */
  --cf-panel:color-mix(in oklab, var(--paper) 4.5%, transparent);
  --cf-edge:color-mix(in oklab, var(--paper) 13%, transparent);
  /* АКЦЕНТ ОДНИМ БЛОКОМ: сменить акцент шаблона = поменять эти три строки (template-spec.md,
     «Как сменить акцент»). Ниже по слою латунь только через них, литералов акцента нет. */
  /* 20.10.2026: латунь снята, слой на «Ночи 2» (noch2-tokens.css на <html class="n2">, мост имён core.css
     в case-n2.css). Страница на шаблоне cf- обязана подключать оба файла, иначе акцент пустой. */
  --cf-accent:var(--accent);                               /* «Закат»: кнопка, табло-победитель, метки, слово H1 */
  --cf-on-accent:var(--on-accent);                         /* текст и знаки на акцентной заливке */
  --cf-light:var(--lit);                                   /* свет лампы: ореол под кадром, кромка рамки, свет у призыва */
  --cf-cold:var(--moon);                                   /* холодный свет: только дорожка ручного расчёта в дуэли */
  --t-cf-show:600ms;                                       /* разовые сцены: выноска, линия, плашка */
  --cf-air:clamp(64px,7.5vw,120px);                         /* воздух между крупными блоками: 64 на 390, 108 на 1440 */
  --cf-air-s:clamp(48px,4.5vw,64px);                        /* под кадром и стендом: не больше 64 */
  --cf-fs-s:clamp(14px,13.25px + .125vw,15px);              /* подписи и пометки: 14 на телефоне, 15 на 1440, мельче нет */
  --cf-shade:color-mix(in oklch, var(--night) 45%, black);  /* тень с синим подтоном вместо нулевой хромы */
  --cf-sheen:color-mix(in oklab, var(--paper) 16%, transparent); /* свет за курсором на кадре */
  position:relative; z-index:1;
}
.cf>*{position:relative;}
/* сброс без веса (:where): иначе .cf ul (0,1,1) перебивал отступы .cf-cards и .cf-facts */
:where(.cf) :where(h1,h2,h3,p,ul,ol,figure){margin:0;}
:where(.cf) :where(ul,ol){padding:0; list-style:none;}

/* ── ГЕРОЙ: текст слева, кадр справа (от 1000 px), на узком кадр под текстом ── */
.cf-hero{
  display:grid; gap:var(--sp-lg); align-items:center; isolation:isolate;
  padding:clamp(var(--sp-md),4vw,56px) var(--pad) 0;
  max-width:calc(90rem + 2 * var(--pad));   /* герой шире сетки глав: кадр уходит к правому полю (C+) */
}
@media (min-width:1000px){
  .cf-hero{--cf-gap:clamp(40px,5vw,72px); grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--cf-gap);}
  .cf-hero--solo{grid-template-columns:minmax(0,1fr);}
}
.cf-hero__txt{display:grid; gap:var(--sp-md); align-content:center;}
.cf-eye{font:400 var(--cf-fs-s)/1.5 var(--ff-body); color:var(--dim);}
.cf-eye a{text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px;
          display:inline-flex; align-items:center; min-height:44px;
          transition:text-decoration-color var(--t-micro) var(--e-out);}
@media (hover:hover) and (pointer:fine){ .cf-eye a:hover{text-decoration-color:var(--paper);} }
.cf-eye a:active{color:var(--paper);}
.cf-eye span{margin-inline:.45em; color:var(--line);}
.cf-h1{
  font-family:var(--ff-display); font-weight:600;
  font-size:clamp(28px,1.9vw + 20px,52px); line-height:1.1; letter-spacing:-.03em;
  text-wrap:balance; overflow-wrap:anywhere; max-width:16ch;
}
/* результат в заголовке («2 минуты»): латунь и линия, которая один раз прочерчивается под ним (C+) */
.cf-h1 em{
  font-style:normal; color:var(--cf-accent);
  background:linear-gradient(var(--cf-accent),var(--cf-accent)) 0 100% / 100% 3px no-repeat;
  padding-bottom:.06em;
  animation:cf-draw var(--t-cf-show) var(--e-out) .5s both;
}
@keyframes cf-draw{from{background-size:0 3px;} to{background-size:100% 3px;}}
.cf-lede{font:400 18px/1.55 var(--ff-body); color:var(--dim); max-width:46ch; text-wrap:pretty;}

/* ГИГАНТСКАЯ ЦИФРА (HP4): ключевое число страницы, не украшение (калькулятор: «2» минуты).
   Латунь сверху гаснет к низу. На широком цифра стоит в просвете между текстом и кадром,
   правой четвертью уходит за кадр: контур «2» в Unbounded 300 занимает .047–.723em от
   левого края, поэтому левый край коробки = край кадра − .54em. Для цифры другой формы
   на своей странице сдвиг подбирается заново (template-spec.md). Мышь сдвигает её на ±13 px
   (case-frame.js), тач и reduce: стоит. */
.cf-glyph{
  position:absolute; z-index:-1; top:0;
  left:calc(var(--pad) + (100% - 2 * var(--pad) - var(--cf-gap,0px)) * 5 / 12 + var(--cf-gap,0px) - var(--cf-glyph-in,.54em));
  font:300 clamp(220px,34vw + 80px,500px)/1 var(--ff-display);
  color:color-mix(in oklab, var(--cf-accent) 14%, transparent);
  pointer-events:none; user-select:none;
  transform:translate3d(var(--gx,0px),var(--gy,0px),0);
  transition:transform var(--t-cf-show) var(--e-out);
}
/* 20.10.2026: градиент по буквам снят (impeccable gradient-text), цифра ровным светом акцента 14% */
@media (max-width:999.98px){ .cf-glyph{left:auto; right:calc(var(--pad) - .1em); top:auto; bottom:-.25em;} }
/* планшет: справа от заголовка пусто, цифра встаёт туда, а не за кадр */
@media (min-width:560px) and (max-width:999.98px){ .cf-glyph{top:0; bottom:auto; right:calc(var(--pad) - .05em);} }

/* ── КАДР В РАМКЕ: кромка-градиент, тень в комнату, тёплый ореол лампы под кадром ── */
.cf-shot{container:shot / inline-size; display:grid; gap:var(--sp-sm); min-width:0;}
.cf-shot__stage{position:relative; perspective:1500px;}
.cf-shot__stage::before{                                   /* свет лампы из-под кадра */
  content:""; position:absolute; z-index:-1; inset:-14% -10%; pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in oklab, var(--cf-light) 20%, transparent), transparent 72%);
}
.cf-shot__tilt{
  position:relative; border-radius:var(--cf-r); transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform var(--t-micro) var(--e-out);
}
.cf-shot__tilt::after{                                     /* тень на столе, без размытия кадра */
  content:""; position:absolute; z-index:-1; left:10%; right:10%; bottom:-22px; height:32px;
  background:radial-gradient(closest-side, color-mix(in oklab, var(--cf-shade) 60%, transparent), transparent); filter:blur(6px);
  pointer-events:none;
}
.cf-shot__frame,.cf-step__fr{                             /* та же рамка у кадров ленты (ниже): одна кромка и тень на странице */
  position:relative; overflow:hidden; border-radius:var(--cf-r);
  border:1px solid transparent;
  background:
    linear-gradient(var(--ink-deep),var(--ink-deep)) padding-box,
    linear-gradient(160deg, color-mix(in oklab, var(--cf-accent) 55%, transparent),
                    color-mix(in oklab, var(--paper) 14%, transparent) 40%,
                    color-mix(in oklab, var(--paper) 6%, transparent)) border-box;
  box-shadow:
    0 2px 8px color-mix(in oklab, var(--cf-shade) 40%, transparent),
    0 40px 90px -20px color-mix(in oklab, var(--cf-shade) 65%, transparent),
    0 24px 120px color-mix(in oklab, var(--cf-light) 16%, transparent);
}
.cf-shot__img{display:block; width:100%; height:auto;}
/* внутреннее свечение сверху и свет за курсором: слоями поверх, не фильтром */
.cf-shot__frame::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120% 60% at 50% 0, color-mix(in oklab, var(--paper) 10%, transparent), transparent 60%);
}
.cf-shot__spot{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), var(--cf-sheen), transparent 42%);
  transition:opacity var(--t-scene) var(--e-out);
}
.cf-shot.is-hover .cf-shot__spot{opacity:1;}

/* метки на кадре: номер у того места интерфейса, о котором выноска */
.cf-pin{
  position:absolute; z-index:2; left:var(--x); top:var(--y);
  width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--cf-accent); color:var(--cf-on-accent); font:600 14px/1 var(--ff-body);
  box-shadow:0 0 0 2px var(--night), 0 4px 12px color-mix(in oklab, var(--cf-shade) 40%, transparent);
}
/* номер меткой из data-n, а не текстом: декоративная цифра не идёт ни в счёт слов, ни скринридеру */
.cf-pin::before,.cf-note b::before{content:attr(data-n);}
@media (max-width:559.98px){ .cf-pin{left:var(--mx,var(--x)); top:var(--my,var(--y));} }

/* «Увеличить»: в строке подписи, а не поверх кадра (на телефоне закрывал метку 3 и кнопку
   формы). Ссылка на полный кадр, скрипт открывает его в <dialog> поверх страницы */
.cf-shot__zoom{
  flex:none; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px;
  border-radius:999px; border:1px solid var(--cf-edge);
  background:none; color:var(--paper);
  font:600 var(--cf-fs-s)/1 var(--ff-body);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:transform var(--t-press) var(--e-out), border-color var(--t-micro) var(--e-out);
}
.cf-shot__zoom svg{flex:none;}
.cf-shot__zoom{margin-left:auto;}                          /* подпись кадра может быть только для скринридера: кнопка всё равно справа */
@media (hover:hover) and (pointer:fine){ .cf-shot__zoom:hover{border-color:var(--paper); transform:translateY(-2px);} }
.cf-shot__zoom:active{transform:scale(.97); transition-duration:var(--t-press);}

.cf-shot__cap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-2xs) var(--sp-md);
              font:400 var(--cf-fs-s)/1.5 var(--ff-body); color:var(--dim); padding-top:var(--sp-xs);}

/* ВЫНОСКИ. Узко (рамка < 640 px): нумерованный список под кадром, номер равен метке на кадре.
   Широко: карточки на пустых полях самого скриншота, у своей метки (C+). */
.cf-notes{display:grid; gap:var(--sp-2xs); counter-reset:none;}
.cf-note{
  display:grid; grid-template-columns:26px minmax(0,1fr); gap:var(--sp-xs); align-items:start;
  font:400 16px/1.45 var(--ff-body); color:var(--paper);
}
.cf-note b{
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--cf-accent); color:var(--cf-accent); font:600 14px/1 var(--ff-body);
}
@container shot (min-width:640px){
  .cf-notes{position:absolute; inset:0; z-index:4; pointer-events:none; display:block;}
  .cf-note{
    position:absolute; top:var(--ny); width:19%; transform:translateY(-50%);
    grid-template-columns:minmax(0,1fr);
    padding:8px 12px; border-radius:16px;
    background:color-mix(in oklab, var(--night) 92%, transparent);
    border:1px solid color-mix(in oklab, var(--paper) 26%, transparent);
    box-shadow:0 6px 16px color-mix(in oklab, var(--cf-shade) 42%, transparent);
    font-size:var(--cf-fs-s); line-height:1.35;
    animation:cf-pop var(--t-scene) var(--e-out) both;
  }
  .cf-note b{display:none;}
  .cf-note--l{left:1.2%;}
  .cf-note--r{right:1.2%;}
  /* аудит моушена 07.10: было 1,1/1,4/1,7 с, текст на кадре прятался до двух секунд */
  .cf-note:nth-child(1){animation-delay:.6s;}
  .cf-note:nth-child(2){animation-delay:.72s;}
  .cf-note:nth-child(3){animation-delay:.84s;}
}
@keyframes cf-pop{from{opacity:0; transform:translateY(-50%) scale(.92);} to{opacity:1; transform:translateY(-50%);}}

/* полный кадр поверх страницы */
.cf-zoom{
  width:min(96vw,1500px); max-width:none; max-height:94svh; padding:0; overflow:auto;
  border:1px solid var(--cf-edge); border-radius:var(--cf-r);
  background:var(--ink-deep); color:var(--paper);
}
.cf-zoom::backdrop{background:color-mix(in oklab, var(--cf-shade) 78%, transparent);}
/* вход 200 мс: кадр вырастает из почти полного, а не возникает рывком; выход мгновенный */
.cf-zoom[open]{animation:cf-zoom-in var(--t-micro) var(--e-out);}
.cf-zoom[open]::backdrop{animation:cf-fade var(--t-micro) var(--e-out);}
@keyframes cf-zoom-in{from{opacity:0; transform:scale(.97);} to{opacity:1; transform:none;}}
@keyframes cf-fade{from{opacity:0;} to{opacity:1;}}
.cf-zoom img{display:block; width:100%; height:auto;}
.cf-zoom__x{
  position:sticky; top:12px; float:right; margin:12px 12px -56px 0; z-index:1;
  min-height:44px; padding:0 20px; border-radius:999px; cursor:pointer;
  border:1px solid var(--cf-edge); background:var(--night); color:var(--paper);
  font:600 var(--cf-fs-s)/1 var(--ff-body);
  transition:transform var(--t-press) var(--e-out), border-color var(--t-micro) var(--e-out);
}
@media (hover:hover) and (pointer:fine){ .cf-zoom__x:hover{border-color:var(--paper);} }
.cf-zoom__x:active{transform:scale(.97);}

/* ── ЛЕНТА КАДРОВ: шаги продукта после кадра первого экрана (калькулятор: «Детали», «Расчёт», «КП»).
   Экраны перерисованы вёрсткой
   на учебных числах, кадр в той же рамке, что в герое. От 700 px две колонки ступенькой: второй кадр
   справа ниже на --cf-step, третий под первым; уже один под другим. Внутри экрана свой контейнер:
   уже 520 px экран показывает главное (.cf-ui__wide и невыбранные варианты уходят), шрифт не мельчает.
   Появление один раз при входе в экран (case-frame.js: .is-wait → .is-in); без скрипта, без
   IntersectionObserver и при reduce кадры стоят сразу. Разметка: template-spec.md, «Лента кадров». */
.cf-lenta{
  margin:var(--cf-air-s) var(--pad) 0; max-width:var(--cf-w);
  --cf-step:clamp(48px,8.4vw,120px);                       /* ступенька второго кадра (макет: 120 на 1440) */
  /* ПАЛИТРА ЭКРАНОВ ПРОДУКТА одним блоком: светлые, как в самом калькуляторе. От палитры сайта
     не зависит, смена латуни её не трогает. Ниже по блоку цвета экранов только через эти девять. */
  --ui-page:oklch(96.7% .006 265);                          /* фон экрана */
  --ui-card:oklch(99.5% .005 265);                          /* карточки, панель шагов: белый с тенью синего продукта (не нулевая хрома) */
  --ui-line:oklch(91.4% .014 258);                          /* линии и обводки */
  --ui-ink:oklch(24.5% .039 264);                           /* текст */
  --ui-mute:oklch(45% .032 260);                            /* подписи; на 4 пункта темнее продукта: тонкие цифры по пикселям давали 4,48:1 */
  --ui-act:oklch(49.8% .196 265);                           /* активный шаг, выбранное, кнопка */
  --ui-on-act:var(--ui-card);                               /* текст на активном */
  --ui-warn:oklch(97% .03 84);                              /* блок «Уточните у клиента» */
  --ui-warn-ink:color-mix(in oklab, var(--accent) 46%, var(--shade)); /* его текст и счётчик; 20.10 снят латунный тон (hue 69, К7), теперь от «Заката» */
}
.cf-lenta__row{display:grid; gap:var(--sp-lg); align-items:start;}
@media (min-width:700px){
  /* вторая строка 1fr: высокий второй кадр (на две строки) растит её, а не первую, и третий кадр
     встаёт ровно на --sp-xl под первым, без дыры */
  .cf-lenta__row{grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto 1fr; column-gap:var(--sp-lg); row-gap:var(--sp-xl);}
  .cf-step--det{grid-column:1; grid-row:1;}
  .cf-step--rs{grid-column:2; grid-row:1 / span 2; margin-top:var(--cf-step);}
  .cf-step--kp{grid-column:1; grid-row:2;}
}
.cf-step{display:grid; gap:var(--sp-sm); min-width:0;}
/* рамка героя без тёплого ореола: свет лампы один на странице, под кадром первого экрана
   (impeccable dark-glow: с ореолом у трёх кадров ленты было 4 находки вместо 1) */
.cf-step__fr{box-shadow:0 2px 8px color-mix(in oklab, var(--cf-shade) 40%, transparent),
                        0 40px 90px -20px color-mix(in oklab, var(--cf-shade) 65%, transparent);}
.cf-step__cap{font:400 18px/1.4 var(--ff-body); color:var(--dim); max-width:24em; text-wrap:pretty;}
.cf-lenta__src{display:block; margin-top:var(--sp-2xs); font:400 var(--cf-fs-s)/1.5 var(--ff-body); color:var(--dim);} /* оговорка про цены на кадрах: строкой под подписью последнего кадра, вплотную к ленте, а не над дуэлью */
/* появление: прячет только скрипт и только то, что ниже экрана при загрузке (видимое не мигает).
   --d ставит скрипт: 0 / 80 / 160 мс только кадрам, вошедшим вместе; одиночный кадр без задержки */
.cf-step.is-wait{opacity:0; transform:perspective(1400px) translateY(28px) rotateX(10deg);}
/* стенд приходит из лёгкой перспективы и выпрямляется один раз; reduce: плоско сразу */
.cf-step.is-in{animation:cf-tilt-in var(--t-cf-show) var(--e-out) var(--d,0ms) both; transform-origin:50% 100%;}
@keyframes cf-tilt-in{from{opacity:0; transform:perspective(1400px) translateY(28px) rotateX(10deg);} to{opacity:1; transform:none;}}
@keyframes cf-rise{from{opacity:0; transform:translateY(28px);} to{opacity:1; transform:none;}}

/* экран продукта: свой язык (карточки, синий активный шаг), числа из 10-calculator-stand-numbers.md */
.cf-ui{container:ui / inline-size; background:var(--ui-page); color:var(--ui-ink); font:400 15px/1.47 var(--ff-body);}
.cf-ui b{font-weight:600;}
.cf-ui svg{flex:none;}
.cf-ui :where(dl,dd){margin:0;}
.cf-ui__bar{display:flex; flex-wrap:wrap; align-items:center; gap:4px; padding:10px 14px;
            background:var(--ui-card); border-bottom:1px solid var(--ui-line); color:var(--ui-mute); font:600 14px/1.4 var(--ff-body);}
.cf-ui__mb{display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:2px 10px; border-radius:8px;}
.cf-ui__mb.is-done{color:var(--ui-ink);}
.cf-ui__mb.is-on{background:var(--ui-act); color:var(--ui-on-act);}
.cf-ui__in{display:grid; gap:14px; padding:20px; align-items:start;}
.cf-ui__side{display:grid; gap:14px; justify-items:start;}
.cf-ui__card{min-width:0; padding:16px 18px; background:var(--ui-card); border:1px solid var(--ui-line); border-radius:10px;}
.cf-ui__hd{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; margin-bottom:8px; font-size:16px; line-height:1.4;}
.cf-ui__hd span{font-size:14px; color:var(--ui-mute);}
.cf-ui__fine{margin-top:4px; font-size:14px; line-height:1.4; color:var(--ui-mute);}
.cf-ui__opt{display:grid; gap:6px; padding:10px 0; border-top:1px solid var(--ui-line);}
.cf-ui__opt dt{color:var(--ui-mute);}
.cf-ui__opt dd,.cf-ui__chs{display:flex; flex-wrap:wrap; gap:6px;}
.cf-ui__ch{display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:3px 11px; white-space:nowrap;
           border:1px solid var(--ui-line); border-radius:8px; background:var(--ui-card); font-size:14px; line-height:1.4;}
.cf-ui__ch.is-pick{border-color:var(--ui-act); font-weight:600;
                   background:color-mix(in oklab, var(--ui-act) 10%, var(--ui-card)); color:color-mix(in oklab, var(--ui-act) 82%, var(--ui-ink));}
.cf-ui__ask{padding:14px 16px; border-radius:10px; background:var(--ui-warn); color:var(--ui-warn-ink);
            border:1px solid color-mix(in oklab, var(--ui-warn-ink) 30%, var(--ui-warn));}
.cf-ui__ask p{display:flex; align-items:center; gap:8px; margin-bottom:8px; font-weight:600;}
.cf-ui__ask p b{display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:999px;
                background:var(--ui-warn-ink); color:var(--ui-warn); font-size:14px;}
.cf-ui__ask ul{padding-left:18px; list-style:disc;}
.cf-ui__ask li+li{margin-top:4px;}
.cf-ui__btn{display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 16px; border-radius:8px;
            background:var(--ui-act); color:var(--ui-on-act); font:600 15px/1 var(--ff-body);}
.cf-ui__tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.cf-ui__tag{display:inline-flex; align-items:center; min-height:26px; padding:2px 10px; border-radius:999px; white-space:nowrap; font-size:14px; font-weight:600;
            background:color-mix(in oklab, var(--ui-act) 10%, var(--ui-card)); color:color-mix(in oklab, var(--ui-act) 82%, var(--ui-ink));}
.cf-ui__cat,.cf-ui__tot{margin-top:14px; padding-top:12px; border-top:1px solid var(--ui-line);}
.cf-ui__k{margin-bottom:6px; color:var(--ui-mute);}
.cf-ui__tot .cf-ui__k{margin-bottom:0;}
.cf-ui__k+.cf-ui__chs+.cf-ui__k{margin-top:12px;}
.cf-ui__cats{display:flex; gap:6px;}
.cf-ui__cats span{display:inline-grid; place-items:center; width:34px; height:34px; border:1px solid var(--ui-line); border-radius:8px; font-weight:600;}
.cf-ui__cats .is-pick{border-color:var(--ui-act); background:var(--ui-act); color:var(--ui-on-act);}
.cf-ui__sum{margin-top:2px; font:600 38px/1.1 var(--ff-body); letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap;}
.cf-ui__sec{border-top:1px solid var(--ui-line);}
.cf-ui__sec:first-child{border-top:0;}
.cf-ui__sh{display:grid; grid-template-columns:22px minmax(0,1fr) auto auto; align-items:baseline; gap:10px; padding:8px 0;}
.cf-ui__sh>:nth-child(2){min-width:0; overflow-wrap:anywhere; hyphens:auto;}
.cf-ui__no,.cf-ui__n{color:var(--ui-mute); font-variant-numeric:tabular-nums;}
.cf-ui__n{font-size:14px; white-space:nowrap;}
.cf-ui__sh b,.cf-ui__kps b{font-variant-numeric:tabular-nums; white-space:nowrap;}
.cf-ui__sec.is-open .cf-ui__sh{color:var(--ui-act);}
.cf-ui__sec.is-open .cf-ui__sh b{color:var(--ui-ink);}
.cf-ui__lns{margin:0 0 10px 32px;}
.cf-ui__ln{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; padding:6px 0; border-top:1px dashed var(--ui-line);}
.cf-ui__ln>:nth-child(2){grid-column:1; color:var(--ui-mute); font-size:14px; font-variant-numeric:tabular-nums; white-space:nowrap;}
.cf-ui__ln>:nth-child(3){grid-column:2; grid-row:1 / span 2; align-self:center; font-variant-numeric:tabular-nums; white-space:nowrap;}
.cf-ui__ed{color:var(--ui-ink); border-bottom:1px dashed var(--ui-act);}   /* цена, которую менеджер может поменять */
.cf-ui__act{display:flex; justify-content:flex-end; margin-top:12px;}
.cf-ui__kps li{display:grid; grid-template-columns:18px minmax(0,1fr) auto; align-items:center; gap:10px; padding:6px 0; border-top:1px solid var(--ui-line);}
.cf-ui__cbx{display:inline-grid; place-items:center; width:18px; height:18px; border-radius:4px; background:var(--ui-act); color:var(--ui-on-act);}
.cf-ui__all{display:flex; justify-content:space-between; gap:12px; padding-top:10px; border-top:1px solid var(--ui-line); font-weight:600;}
.cf-ui__share{display:flex; align-items:center; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid var(--ui-line); color:var(--ui-mute);}
.cf-ui__share svg{color:var(--ui-act);}
@container ui (min-width:600px){
  .cf-ui__opt{grid-template-columns:116px minmax(0,1fr); align-items:center;}
  .cf-ui__in--dt{grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
  .cf-ui__in--kp{grid-template-columns:minmax(0,6fr) minmax(0,5fr);}
}
@container ui (min-width:760px){ .cf-ui__in--rs{grid-template-columns:minmax(0,5fr) minmax(0,7fr);} }
/* узкий экран (телефон, планшет и ноутбук до ~1150 px в две колонки): только главное каждого шага.
   «Детали»: выбранные варианты строкой и вопросы клиенту; «Расчёт»: категория, итог и раскрытый раздел
   с ценами; «КП»: скидка, НДС, к оплате. Сводка по разделам и нарисованные кнопки уходят. */
@container ui (max-width:519.98px){
  .cf-ui__bar{padding:8px; gap:2px;}
  .cf-ui__mb{padding:2px 7px;}                              /* четыре шага в одну строку на 390 */
  .cf-ui__in{padding:12px; gap:12px;}
  .cf-ui__n{display:none;}
  .cf-ui__in--rs .cf-ui__tags{margin-top:0;}               /* шапка товара ушла: она в «Деталях» прямо выше */
  .cf-ui__wide,.cf-ui__opt .cf-ui__ch:not(.is-pick),.cf-ui__sec:not(.is-open){display:none;}
  .cf-ui__sec{border-top:0;}                                /* виден один раскрытый раздел: линия над ним лишняя */
  .cf-ui__opt{grid-template-columns:auto minmax(0,1fr); align-items:center; column-gap:12px; padding:8px 0;}
  .cf-ui__opt dd{justify-content:flex-end;}
}
@container ui (max-width:420px){
  .cf-ui__sh{grid-template-columns:22px minmax(0,1fr) auto;}
  .cf-ui__n{grid-column:2; grid-row:2;}
  .cf-ui__lns{margin-left:0;}
  .cf-ui__ln>:nth-child(2){white-space:normal;}
}
/* 320: шаги без стрелок и галочек, пройденный шаг отличает цвет текста */
@container ui (max-width:329.98px){ .cf-ui__bar svg{display:none;} .cf-ui__bar{gap:0;} }
@media (prefers-reduced-motion:reduce){ .cf-step.is-wait{opacity:1; transform:none;} .cf-step.is-in{animation:none; transform:none;} }
@media print{ .cf-step.is-wait{opacity:1; transform:none;} }

/* ── СЦЕНА: дуэль ИЛИ одно крупное число. Одна на странице (J6). ── */
.cf-scene{
  margin:var(--cf-air-s) var(--pad) 0;
  max-width:var(--cf-w); display:grid; gap:var(--sp-md);
}
.cf-scene__t{font:600 16px/1.4 var(--ff-body); color:var(--dim);}

/* ДУЭЛЬ «ДВЕ ЛАМПЫ» — сигнатура страницы (20.10.2026, «Ночь 2»). Один расчёт на общей шкале
   времени 0–30 минут, две дорожки в честном масштабе (2 к 30). Ручная дорожка в холодном
   лунном свете (--cf-cold), калькулятор в тёплом (--cf-light). Калькулятор финиширует через
   0,3 с: над панелью итога зажигается лампа, и «около 2 минут» встаёт крупно, пока ручной
   секундомер ещё 4 секунды ползёт рядом. На 30:00 ручной гаснет в призрак (B11), вспыхивает
   «Ошибки». Один раз при въезде, без цикла и без перехвата прокрутки; «Ещё раз» повторяет.
   Разметка = финальный кадр: без скрипта, при reduce и при печати стоит итог.
   Состояния ставит case-frame.js: .is-live (старт с нулей), .is-done (калькулятор готов),
   .cf-lane.is-flag (плашка), .is-end (ручной дошёл). */
.cf-duel__head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--sp-2xs) var(--sp-md);}
.cf-duel__note{font:400 var(--cf-fs-s)/1.5 var(--ff-body); color:var(--dim);}
.cf-duel__stage{
  --rp:clamp(20px,3vw,44px);                               /* поле дорожек = начало и конец шкалы у обеих */
  container:duel / inline-size;
  position:relative; isolation:isolate; overflow:hidden;
  display:grid;
  border-radius:var(--cf-r); border:1px solid var(--cf-edge);
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--surface) 82%, transparent), color-mix(in oklab, var(--bg) 55%, transparent));
}
.cf-duel__race{position:relative; display:grid; min-width:0;}

/* дорожка: подпись и плашка строкой, секундомер, шкала на всю ширину */
.cf-lane{
  position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
  column-gap:var(--sp-sm); padding:clamp(20px,2.4vw,32px) var(--rp) clamp(18px,2vw,26px);
}
.cf-lane + .cf-lane{border-top:1px solid var(--line-soft);}
.cf-lane::before{                                          /* свет дорожки: холодная луна у ручной, тёплая лампа у калькулятора */
  content:""; position:absolute; z-index:-1; inset:0; pointer-events:none;
  background:radial-gradient(70% 120% at 0 0, color-mix(in oklab, var(--cf-cold) 13%, transparent), transparent 70%);
  transition:opacity var(--t-cf-show) var(--e-out);
}
.cf-lane--win::before{background:radial-gradient(60% 110% at 0 0, var(--ember-1), transparent 70%);}
.cf-lane__k{font:400 16px/1.4 var(--ff-body); color:var(--dim); min-width:0;}
.cf-lane__v{
  grid-column:1 / -1; margin-top:var(--sp-2xs);
  font:300 clamp(40px,2.6vw + 20px,64px)/1 var(--ff-display); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:var(--paper);
  transition:color var(--t-cf-show) var(--e-out);
}
.cf-lane--hand .cf-lane__v{color:var(--ghost);}            /* финал: ручной погас в призрак, тем же кеглем (B11) */
.cf-lane--win .cf-lane__v{color:var(--cf-accent);}
.cf-lane__s{grid-column:1 / -1; margin-top:var(--sp-3xs); font:400 16px/1.4 var(--ff-body); color:var(--dim);}

/* шкала: риска на каждую минуту, длинная на каждые пять, полоса и огонёк на её конце */
.cf-rail{                                                 /* риски рисуются фоном самой шкалы: минута тонкой, пять минут длинной */
  --tick:color-mix(in srgb, var(--paper) 22%, transparent);
  grid-column:1 / -1; position:relative; height:26px; margin-top:var(--sp-sm);
  background:
    linear-gradient(var(--line-strong),var(--line-strong)) 100% 0 / 1px 12px no-repeat,
    repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px calc(100% / 6)) 0 0 / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, var(--tick) 0 1px, transparent 1px calc(100% / 30)) 0 6px / 100% 6px no-repeat;
}
.cf-rail__bar{position:absolute; left:0; right:0; bottom:0; height:6px; border-radius:999px; background:var(--fill-q); overflow:hidden;}
.cf-rail__bar i{
  display:block; height:100%; width:100%; border-radius:inherit; transform-origin:0 50%;
  transform:scaleX(var(--p,1)); background:color-mix(in oklab, var(--cf-cold) 62%, var(--bg));
}
.cf-lane--win .cf-rail__bar i{background:var(--cf-accent);}
.cf-rail__tip{                                             /* огонёк на конце полосы: коробка во всю шкалу едет transform'ом */
  position:absolute; left:0; bottom:-3px; width:100%; height:12px; pointer-events:none;   /* (аудит моушена 20.10: было left, раскладка на каждом кадре) */
  transform:translateX(calc(var(--p,0) * 100%));
  transition:opacity var(--t-micro) var(--e-out);
}
.cf-rail__tip::before{
  content:""; position:absolute; left:-6px; top:0; width:12px; height:12px; border-radius:50%;
  background:var(--cf-accent); box-shadow:0 0 0 4px var(--ember-0), 0 0 22px 4px var(--ember-0);
}

/* плашка итога: «КП готово» заливкой акцента, «Ошибки» приглушённым красным; кольцо один раз */
.cf-flag{
  position:relative; grid-column:2; grid-row:1; justify-self:end;
  display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px;
  background:var(--cf-accent); color:var(--cf-on-accent); font:600 var(--cf-fs-s)/1 var(--ff-body); white-space:nowrap;
  transition:opacity var(--t-micro) var(--e-out), transform var(--t-scene) var(--e-out);
}
.cf-flag::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;}

/* огонёк ручной дорожки: холодный, идёт на конце полосы только во время прогона */
.cf-rail__tip--cold{opacity:0;}
.cf-rail__tip--cold::before{background:var(--cf-cold); box-shadow:0 0 0 4px color-mix(in srgb, var(--cf-cold) 26%, transparent);}

/* ИТОГ: панель под лампой, крупно «около 2 минут» — ключевое число страницы */
.cf-duel__fin{
  position:relative; z-index:1; display:grid; align-content:center; gap:var(--sp-xs);
  padding:clamp(24px,3vw,44px) var(--rp) clamp(28px,3.4vw,48px);
  border-top:1px solid var(--line-soft);
}
.cf-duel__fin::before{                                     /* лампа над итогом */
  content:""; position:absolute; z-index:-1; inset:0; pointer-events:none;
  background:                                               /* конус сверху: горячая середина, мягкий край, не пятно */
    linear-gradient(90deg, transparent 18%, var(--edge-warm) 42%, var(--edge-warm) 58%, transparent 82%) 0 0 / 100% 1px no-repeat,
    radial-gradient(34% 26% at 50% 0, var(--ember-0), transparent 100%),
    radial-gradient(70% 80% at 50% 0, var(--ember-1), transparent 74%);
  transition:opacity var(--t-cf-show) var(--e-out);
}
.cf-duel__big{
  display:flex; flex-wrap:wrap; align-items:baseline; column-gap:clamp(8px,.16em,32px); margin:0;
  font:300 clamp(88px,15cqi,208px)/.86 var(--ff-display); letter-spacing:-.04em; color:var(--cf-accent);
  font-variant-numeric:tabular-nums;
}
.cf-duel__big small{font:400 24px/1.2 var(--ff-body); letter-spacing:0; color:var(--paper);}
.cf-duel__big b{font-weight:300; display:inline-block; transform-origin:50% 100%;}
.cf-duel__line{                                            /* линия под числом прочерчивается один раз */
  display:block; height:2px; max-width:14rem; background:var(--cf-accent); transform-origin:0 50%;
  transition:transform var(--t-cf-show) var(--e-out) .15s;
}
@media (max-width:359.98px){                               /* 320: подпись дорожки и плашка не помещаются в строку, плашка ниже */
  .cf-lane{grid-template-columns:minmax(0,1fr);}
  .cf-flag{grid-column:1; grid-row:auto; justify-self:start; margin-top:var(--sp-2xs);}
}
@media (min-width:1000px){                                  /* итог рядом с дорожками: лампа горит, пока ручной ещё идёт */
  .cf-duel__stage{grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
  .cf-duel__fin{border-top:0; border-left:1px solid var(--line-soft); padding-left:clamp(28px,3.4vw,56px);}
}

/* ── ход сцены (только со скриптом и без reduce) ── */
.cf-duel.is-live .cf-lane__v{color:var(--paper);}
.cf-duel.is-live .cf-lane--win .cf-lane__v{color:var(--cf-accent);}
.cf-duel.is-live:not(.is-end) .cf-rail__tip--cold{opacity:1;}
.cf-duel.is-live .cf-lane:not(.is-flag) .cf-flag{opacity:0; transform:scale(.85); visibility:hidden;}
.cf-duel.is-live .cf-lane.is-flag .cf-flag::after{animation:cf-ring var(--t-cf-show) var(--e-out) .1s 1 both;}
.cf-duel.is-live:not(.is-done) .cf-lane--win .cf-rail__tip{opacity:0;}
.cf-duel.is-live:not(.is-done) .cf-lane--win::before{opacity:.35;}
.cf-duel.is-live.is-end .cf-lane--hand .cf-lane__v{color:var(--ghost);}
.cf-duel.is-live.is-end .cf-lane--hand::before{opacity:0;}
.cf-duel.is-live:not(.is-done) .cf-duel__fin::before{opacity:0;}
.cf-duel.is-live:not(.is-done) .cf-duel__big{opacity:.14;}
.cf-duel.is-live:not(.is-done) .cf-duel__big b{transform:translateY(.12em) scale(.9);}
.cf-duel.is-live:not(.is-done) .cf-duel__line{transform:scaleX(0);}
.cf-duel.is-live .cf-duel__big{transition:opacity var(--t-cf-show) var(--e-out);}
.cf-duel.is-live .cf-duel__big b{transition:transform var(--t-cf-show) var(--e-out);}
.cf-duel.is-live.is-done .cf-lane--win .cf-rail__tip::before{animation:cf-spark var(--t-cf-show) var(--e-out) 1 both;}
@keyframes cf-spark{from{box-shadow:0 0 0 0 var(--cf-accent), 0 0 0 0 var(--ember-0);} to{box-shadow:0 0 0 4px var(--ember-0), 0 0 22px 4px var(--ember-0);}}
@keyframes cf-ring{from{box-shadow:0 0 0 0 color-mix(in oklab, var(--cf-accent) 55%, transparent);} to{box-shadow:0 0 0 18px transparent;}}

.cf-duel__foot{display:flex; justify-content:flex-end;}
.cf-replay{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 20px; cursor:pointer;
  border-radius:999px; border:1px solid var(--line-strong); background:none; color:var(--paper);
  font:600 16px/1 var(--ff-body);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:transform var(--t-press) var(--e-out), border-color var(--t-micro) var(--e-out), background-color var(--t-micro) var(--e-out);
}
.cf-replay svg{transition:transform var(--t-scene) var(--e-out);}
.cf-replay[hidden]{display:none;}
.cf-replay:disabled,.cf-btn[aria-disabled="true"],.cf-shot__zoom[aria-disabled="true"]{opacity:.55; cursor:not-allowed; pointer-events:none;}
@media (hover:hover) and (pointer:fine){
  .cf-replay:hover{border-color:var(--paper);}
  .cf-replay:hover svg{transform:rotate(-90deg);}          /* одно движение: стрелка доворачивается назад */
}
.cf-replay:active{transform:scale(.97); background:var(--press);}

/* Вариант «одно число» (ИИ, CRM, дашборд, база): число, единица, подпись, рамка счёта (J6).
   Линия под числом прочерчивается один раз при въезде (.is-in ставит case-frame.js). */
.cf-stat{
  padding:clamp(28px,4vw,48px) clamp(20px,3vw,40px); border-radius:var(--cf-r);
  background:var(--cf-panel); border:1px solid var(--cf-edge);
  gap:var(--sp-xs);
}
.cf-stat__n{font:300 clamp(72px,6vw + 32px,160px)/.95 var(--ff-display); letter-spacing:-.02em;
            font-variant-numeric:tabular-nums; color:var(--cf-accent); overflow-wrap:anywhere;}
.cf-stat__n small{font-size:24px; letter-spacing:-.02em; color:var(--paper); margin-left:.12em;}
.cf-stat__n::after{
  content:""; display:block; height:2px; margin-top:var(--sp-sm); max-width:12rem;
  background:var(--cf-accent); transform-origin:0 50%;
}
.cf-stat.is-live:not(.is-in) .cf-stat__n::after{transform:scaleX(0);}
.cf-stat.is-live.is-in .cf-stat__n::after{transform:scaleX(1); transition:transform var(--t-cf-show) var(--e-out);}
.cf-stat__k{font:600 18px/1.35 var(--ff-body); max-width:30ch;}
.cf-stat__src{font:400 var(--cf-fs-s)/1.5 var(--ff-body); color:var(--dim);}

/* ── ТРИ КАРТОЧКИ: было, что сделал, результат. Подъём только у мыши, текст не прячется ── */
.cf-cards{
  margin:clamp(48px,6vw,72px) var(--pad) 0; max-width:var(--cf-w);
  display:grid; gap:var(--sp-md);
}
@media (min-width:900px){
  .cf-cards{grid-template-columns:repeat(3,minmax(0,1fr));}
  /* две карточки: разная ширина 5/7, а не две трети ряда с дырой справа */
  .cf-cards:has(> :nth-child(2):last-child){grid-template-columns:minmax(0,5fr) minmax(0,7fr);}
}
.cf-card{
  position:relative; overflow:hidden; display:grid; gap:var(--sp-xs); align-content:start;
  padding:clamp(24px,2.4vw,32px) clamp(20px,2.2vw,28px);
  border-radius:var(--cf-r); background:var(--cf-panel); border:1px solid var(--cf-edge);
  transition:transform var(--t-scene) var(--e-out);
}
@media (hover:hover) and (pointer:fine){ .cf-card:hover{transform:translateY(-4px);} }   /* одно движение (гейт 13) */
.cf-card__k{font:600 16px/1.3 var(--ff-display); letter-spacing:-.01em; color:var(--paper);}
.cf-card p{font:400 16px/1.55 var(--ff-body); color:color-mix(in oklab, var(--paper) 88%, var(--dim));}

/* ── ПОЛОСА ФАКТОВ: число + подпись пилюлей, без иконок ── */
.cf-facts{margin:var(--sp-lg) var(--pad) 0; max-width:var(--cf-w); display:flex; flex-wrap:wrap; gap:var(--sp-xs);}
.cf-fact{
  display:inline-flex; align-items:baseline; gap:10px; padding:12px 20px; border-radius:999px;
  border:1px solid var(--cf-edge); font:400 16px/1.35 var(--ff-body); color:var(--dim);
}
.cf-fact b{font:300 24px/1 var(--ff-display); letter-spacing:-.02em; color:var(--paper);}

/* ── «ПОДРОБНЕЕ»: <details> без скрипта, закрыт по умолчанию ── */
.cf-more{margin:var(--sp-lg) var(--pad) 0; max-width:var(--cf-w); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.cf-more summary{
  display:flex; align-items:center; gap:var(--sp-xs); min-height:56px; cursor:pointer; list-style:none;
  font:600 16px/1.3 var(--ff-body); color:var(--paper);
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:color var(--t-micro) var(--e-out);
}
.cf-more summary::-webkit-details-marker{display:none;}
.cf-more summary::after{                                   /* плюс, который становится минусом */
  content:""; width:12px; height:12px; margin-left:auto; flex:none;
  background:linear-gradient(currentColor,currentColor) center/12px 1.5px no-repeat,
             linear-gradient(currentColor,currentColor) center/1.5px 12px no-repeat;
  transition:transform var(--t-micro) var(--e-out);
}
.cf-more[open] summary::after{transform:rotate(45deg);}
@media (hover:hover) and (pointer:fine){ .cf-more summary:hover::after{transform:scale(1.2);} .cf-more[open] summary:hover::after{transform:rotate(45deg) scale(1.2);} }
.cf-more summary:active{color:var(--dim);}
.cf-more__in{display:grid; gap:var(--sp-sm); padding:0 0 var(--sp-md); max-width:64ch;
             font:400 16px/1.6 var(--ff-body); color:color-mix(in oklab, var(--paper) 88%, var(--dim));}
.cf-more__in h3{margin:var(--sp-xs) 0 0; font:600 var(--cf-fs-s)/1.4 var(--ff-body); color:var(--dim);}
.cf-more__in ul{display:grid; gap:var(--sp-3xs);}
.cf-more__in a{display:inline-flex; align-items:center; min-height:44px; color:var(--paper);
               text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px;
               transition:text-decoration-color var(--t-micro) var(--e-out);}
@media (hover:hover) and (pointer:fine){ .cf-more__in a:hover{text-decoration-color:var(--paper);} }
.cf-more__in a:active{color:var(--dim);}

/* ── ПРИЗЫВ #talk: крупнее всего ниже первого экрана (J8), свет лампы слева снизу ── */
.cf-call{
  margin-top:calc(var(--cf-air) - clamp(56px,7vw,96px)); padding:clamp(56px,7vw,96px) var(--pad) clamp(64px,8vw,112px);
  display:grid; gap:var(--sp-md); justify-items:start; overflow:hidden;
}
.cf-call::before{
  content:""; position:absolute; z-index:-1; left:-8%; bottom:-30%; width:60%; height:130%; pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in oklab, var(--cf-light) 16%, transparent), transparent 70%);
}
.cf-call__h{font:600 clamp(30px,2.4vw + 18px,54px)/1.12 var(--ff-display); letter-spacing:-.03em;
            max-width:18ch; text-wrap:balance; overflow-wrap:anywhere; min-width:0; outline-offset:6px;}
.cf-call__p{font:400 18px/1.55 var(--ff-body); color:var(--dim); max-width:46ch;}
.cf-call__go{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-sm) var(--sp-lg); margin-top:var(--sp-xs);}
.cf-btn{
  display:inline-flex; align-items:center; gap:12px; min-height:56px; padding:0 32px;
  border-radius:999px; background:var(--cf-accent); color:var(--cf-on-accent);
  font:600 16px/1 var(--ff-body); white-space:nowrap;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  transition:transform var(--t-micro) var(--e-out);
}
.cf-btn i{font-style:normal; display:inline-block; transition:transform var(--t-micro) var(--e-out);}
@media (hover:hover) and (pointer:fine){
  .cf-btn:hover i{transform:translateX(4px);}            /* одно движение: стрелка (гейт 13) */
}
.cf-btn:active{transform:scale(.97); transition-duration:var(--t-press);}
.cf-btn:focus-visible{outline-offset:4px;}
/* кольцо кейсов: та же ссылка .nxt, что ищет интеграция, только строкой у кнопки */
.nxt.cf-next{
  display:inline-flex; align-items:center; gap:8px; margin:0; padding:0; border:0; max-width:none;
  min-height:44px; color:var(--paper); font:400 16px/1.4 var(--ff-body);
}
.cf-next span{color:var(--dim);}
.cf-next b{font-weight:600; text-decoration:underline; text-decoration-color:var(--line); text-underline-offset:4px;
           transition:text-decoration-color var(--t-micro) var(--e-out);}
.cf-next i{font-style:normal; display:inline-block; transition:transform var(--t-micro) var(--e-out);}
@media (hover:hover) and (pointer:fine){
  .cf-next:hover b{text-decoration-color:var(--paper);}
  .cf-next:hover i{transform:translateX(3px);}
}
.cf-next:active{transform:translateY(1px);}

/* ── ГЛАВЫ:
   три главы (01)/(02)/(03) в один ряд, без пустой колонки; на узком столбиком. Текст главы 18 на 390,
   24 на 1440, межстрочный 1.35. «Детали» компактной плашкой: пары «ярлык: значение» строкой. ── */
.cf-chs{margin:var(--cf-air) var(--pad) 0; max-width:var(--cf-w); display:grid; gap:clamp(32px,4vw,48px);}
.cf-chs__row{display:grid; gap:clamp(32px,3.4vw,48px);}
@media (min-width:900px){ .cf-chs__row{grid-template-columns:repeat(3,minmax(0,1fr));} }
.cf-ch{display:grid; gap:var(--sp-sm); align-content:start; min-width:0;}
.cf-ch__k{display:flex; align-items:baseline; gap:var(--sp-xs); flex-wrap:wrap;}
.cf-ch__n{font:300 24px/1 var(--ff-display); letter-spacing:-.02em; color:var(--cf-accent); font-variant-numeric:tabular-nums;}
.cf-ch__h{font:600 18px/1.3 var(--ff-display); letter-spacing:-.01em; color:var(--paper);}
.cf-ch__t{font:400 clamp(18px,.6vw + 15.4px,24px)/1.35 var(--ff-body); color:var(--paper); max-width:26ch; text-wrap:pretty;}
.cf-spec{display:grid; gap:var(--sp-2xs); padding:var(--sp-sm) 20px; border-radius:16px; border:1px solid var(--line-strong);
         font:400 clamp(18px,.6vw + 15.4px,24px)/1.35 var(--ff-body); color:var(--paper);}
.cf-spec div{display:flex; flex-wrap:wrap; gap:0 .4em; align-items:baseline;}
.cf-spec dt{color:var(--dim);}
.cf-spec dt::after{content:":";}
.cf-spec dd{margin:0;}
.cf-chs .cf-more{margin:0; max-width:none;}

/* ── ВЫНОСКА: подсказка менеджеру «Уточните у клиента» вынута из экрана «Детали» крупнее
   и наезжает на правый край кадра; в экране на её месте пустой пунктирный след. Только когда экран
   в две колонки (контейнер шага от 600 px); уже выноски нет, блок стоит в экране как был. ── */
.cf-step--det{container:det / inline-size; position:relative;}
.cf-pull{display:none;}
@media (min-width:700px){ @container det (min-width:600px){
  .cf-step--det .cf-ui__ask{border-style:dashed; background:none;}
  .cf-step--det .cf-ui__ask > *{visibility:hidden;}
  .cf-pull{
    display:block; position:absolute; z-index:3; top:22%; right:max(-4%,-16px); width:min(56%,420px);  /* наезд на край кадра не больше 16 px: до соседнего кадра остаётся зазор */
    padding:20px 22px 22px; border-radius:16px;
    background:var(--ui-warn); color:var(--ui-warn-ink);
    font:400 17px/1.45 var(--ff-body);
    box-shadow:0 2px 6px color-mix(in oklab, var(--cf-shade) 30%, transparent),
               0 28px 60px -12px color-mix(in oklab, var(--cf-shade) 70%, transparent),
               0 0 0 1px color-mix(in oklab, var(--ui-warn-ink) 22%, transparent);
    transform:rotate(-1.5deg);
  }
  .cf-pull p{display:flex; align-items:center; gap:10px; margin:0 0 10px; font-weight:600; font-size:19px;}
  .cf-pull p b{display:inline-grid; place-items:center; min-width:26px; height:26px; padding:0 7px; border-radius:999px;
               background:var(--ui-warn-ink); color:var(--ui-warn); font-size:15px;}
  .cf-pull ul{margin:0; padding-left:20px; list-style:disc;}
  .cf-pull li+li{margin-top:6px;}
  .cf-step--det.is-in .cf-pull{animation:cf-pull-in var(--t-cf-show) var(--e-out) calc(var(--d,0ms) + 200ms) both;}
} }
@keyframes cf-pull-in{from{opacity:0; transform:translate(-14px,10px) rotate(0deg) scale(.96);} to{opacity:1; transform:rotate(-1.5deg);}}
@media (prefers-reduced-motion:reduce){ .cf-step--det.is-in .cf-pull{animation:none;} }

/* ── ВХОД ПЕРВОГО ЭКРАНА (20.10.2026): один раз при загрузке, 0–900 мс, только CSS.
   Две ступени (B17): ярлык, заголовок, лид поднимаются по очереди за 600 мс; кадр въезжает
   из лёгкого наклона, и под ним зажигается лампа; выноски садятся последними. Заливка
   анимации только backwards: после входа наклон за курсором (case-frame.js) снова свой.
   Кадр не прозрачный ни в один момент (LCP картинка, прозрачность задержала бы его). reduce: стоит сразу. */
@media (prefers-reduced-motion:no-preference){
  .cf-hero .cf-eye{animation:cf-up var(--t-cf-show) var(--e-out) backwards;}
  .cf-hero .cf-h1{animation:cf-up var(--t-cf-show) var(--e-out) 80ms backwards;}
  .cf-hero .cf-lede{animation:cf-up var(--t-cf-show) var(--e-out) 200ms backwards;}
  .cf-hero .cf-shot__tilt{animation:cf-frame-in var(--t-cf-show) var(--e-out) 120ms backwards;}
  .cf-hero .cf-shot__stage::before{animation:cf-fade var(--t-cf-show) var(--e-out) 200ms backwards;}
  .cf-hero .cf-glyph{animation:cf-fade var(--t-cf-show) var(--e-out) 100ms backwards;}
}
@keyframes cf-up{from{opacity:0; transform:translateY(18px);}}
@keyframes cf-frame-in{from{transform:translateY(32px) rotateX(7deg) scale(.985);}}

/* ── ПОЯВЛЕНИЕ БЛОКОВ НИЖЕ: .cf [data-rise] прячется, только если при загрузке лежит ниже 88% экрана,
   и поднимается один раз (case-frame.js, тот же механизм, что у ленты). Без скрипта, при reduce
   и при печати блоки стоят сразу. Прокрутку не держит: это класс на входе, а не таймлайн. */
.cf [data-rise].is-wait{opacity:0; transform:translateY(24px);}
.cf [data-rise].is-in{animation:cf-rise var(--t-cf-show) var(--e-out) var(--d,0ms) both;}
@media (prefers-reduced-motion:reduce){ .cf [data-rise].is-wait{opacity:1; transform:none;} .cf [data-rise].is-in{animation:none;} }
@media print{ .cf [data-rise].is-wait{opacity:1; transform:none;} }

/* ── почва для перехода между страницами: имена у заголовка и главного кадра (само правило
   перехода и пары на главной ставятся отдельным шагом) ── */
.cf-hero .cf-h1{view-transition-name:case-title;}
.cf-hero .cf-shot__frame{view-transition-name:case-frame;}

/* ── широкий экран по высоте (B18): на 1366×768 кадр и заголовок садятся целиком ── */
@media (min-width:1000px) and (max-height:800px){ .cf-hero{padding-top:var(--sp-sm);} }

/* ── настройки системы ── */
@media (prefers-contrast:more){
  .cf-lede,.cf-lane__s,.cf-lane__k,.cf-duel__note,.cf-shot__cap,.cf-card p,.cf-fact,.cf-more__in{color:var(--paper);}
  .cf-glyph{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .cf-shot__tilt,.cf-glyph{transform:none !important; transition:none;}
  .cf-shot__spot{display:none;}
  .cf-card,.cf-btn,.cf-btn i,.cf-next i,.cf-flag,.cf-more summary::after,.cf-replay svg,.cf-lane__v,.cf-lane::before,.cf-duel__fin::before,.cf-duel__line{transition:none !important;}
  .cf-card:hover,.cf-btn:hover{transform:none;}
}

/* ══ R3: ЧЕТЫРЕ КЕЙСА НА ШАБЛОНЕ (ads, crm, dashboard, events), перенос 21.10.2026 ══════════════════════
 * Hallmark · macrostructure: Stat-Led · кейсы r3 (claude-design/CASE-*-r3.dc.html): паспорт с ключевым
 * числом, одна сцена-сигнатура, полоса «Было → Сделал → Стало», паспорт-строка, «Подробнее», призыв.
 * Всё под .cf--r3 на <main>: калькулятор этого класса не несёт, его рисунок не меняется (crm и ai-support на слое r5 ниже).
 * Токены: «Ночь 2» напрямую (--surface --mute --ghost --line-strong --shade --bg) и акцент шаблона
 * (--cf-accent --cf-on-accent). Свои только кегли r3, воздух и моушен-токены сцены ниже, одним блоком.
 * Движение: каждая сцена один раз при въезде (case-frame.js, раздел 6), повтор кнопкой;
 * без скрипта и при reduce стоит итог из разметки. Прокрутку ничто не держит. */
.cf--r3{
  --r3-h1:clamp(32px,4.1vw,59px);
  --r3-key:clamp(60px,8.2vw,118px);
  --r3-cta:clamp(26px,3vw,43px);
  --r3-lead:clamp(18px,1.45vw,21px);
  --r3-mid:clamp(20px,1.7vw,24px);
  --r3-fact:clamp(28px,2.5vw,36px);
  --r3-ch:clamp(19px,1.9vw,27px);             /* текст главы: 27 на 1440, 19 на 390 */
  --r3-lab:clamp(17px,1.4vw,20px);
  --r3-s:15px;                                /* нижняя ступень; 14 на телефоне, мельче нет */
  --r3-air:clamp(64px,6.7vw,96px);            /* воздух между крупными блоками: 96 на 1440, 64 на 390 */
  --r3-sig:1400ms;                            /* сигнатура сцены */
  --r3-run:550ms;                             /* огонёк полосы, два отрезка */
  --r3-io:cubic-bezier(.65,0,.35,1);          /* ход сигнатуры: разгон и торможение */
  --r3-ember:color-mix(in srgb, var(--cf-accent) 24%, transparent);
  --r3-fill:color-mix(in srgb, var(--paper) 5%, transparent);
  --r3-ghost:color-mix(in oklab, var(--paper) 56%, var(--bg));   /* клиент над H1 и «было»: как на артборде, 5,6:1 к полю */
  font-size:17px; line-height:1.55;
}
@media (max-width:760px){ .cf--r3{--r3-s:14px; --r3-air:64px;} }
.cf--r3 b,.cf--r3 strong{font-weight:600;}

/* ── паспорт: клиент притухшим, H1, ключевое число справа (J5, J6) ── */
.cf--r3 .cf-pass{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:0 64px; align-items:end;
  padding:48px var(--pad) 64px;
}
.cf-who{grid-column:1 / -1; font:600 var(--r3-h1)/1.04 var(--ff-display); letter-spacing:-.03em; color:var(--r3-ghost); text-wrap:balance;}
.cf--r3 .cf-h1{grid-column:1 / -1; font-size:var(--r3-h1); line-height:1.04; max-width:none;}
.cf--r3 .cf-pass--key .cf-h1{grid-column:1;}
.cf--r3 .cf-lede{grid-column:1; margin-top:28px; max-width:30em; font-size:var(--r3-lead); line-height:1.45;}
.cf-key{grid-column:2; grid-row:2 / span 2; justify-self:start; display:grid; gap:12px; padding-bottom:6px;}
.cf-key__n{font:300 var(--r3-key)/.92 var(--ff-display); letter-spacing:-.045em; white-space:nowrap;}
.cf-key--long .cf-key__n{font-size:clamp(44px,5vw,72px);}
.cf-key__u{font-size:var(--r3-lab); line-height:1.35;}
.cf-key__f{font-size:var(--r3-s); line-height:1.3; color:var(--cf-accent);}
@media (prefers-reduced-motion:no-preference){
  .cf-hero .cf-who{animation:cf-up var(--t-cf-show) var(--e-out) backwards;}
  .cf-hero .cf-key{animation:cf-up var(--t-cf-show) var(--e-out) 280ms backwards;}
}
@media (max-width:760px){
  .cf--r3 .cf-pass{grid-template-columns:minmax(0,1fr); padding:36px var(--pad) 48px;}
  .cf-key{grid-column:1; grid-row:auto; margin-top:36px;}
  .cf--r3 .cf-lede{margin-top:20px;}
}

/* ── сцена: центральный блок, под ним подпись и «Показать ещё раз» ── */
.cf-r3s{margin:0 var(--pad); max-width:var(--cf-w); perspective:1600px;}
.cf-cap{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 24px; margin-top:12px;
        font-size:var(--r3-s); line-height:1.4; color:var(--mute);}
.cf-again{display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:0 4px; border:0; background:none; cursor:pointer;
          font:400 var(--r3-s)/1.3 var(--ff-body); color:var(--dim);
          touch-action:manipulation; -webkit-tap-highlight-color:transparent;
          transition:color var(--t-micro) var(--e-out);}
.cf-again[hidden]{display:none;}
.cf-again svg{transition:transform var(--t-cf-show) var(--e-out);}
@media (hover:hover) and (pointer:fine){ .cf-again:hover{color:var(--paper);} .cf-again:hover svg{transform:rotate(-200deg);} }
.cf-again:active svg{transform:rotate(-260deg) scale(.9);}
/* вход стенда из перспективы (CRM, база): один раз при въезде, без движения сразу плоско */
.cf-r3s.is-arm:not(.is-seen) .cf-tilt{transform:rotateX(10deg) translateZ(-60px);}
.cf-r3s.is-arm .cf-tilt{transform-origin:50% 0; transition:transform 900ms var(--e-out);}
/* на телефоне стенд высокий (карточки столбиком), наклон выносил его низ на подпись и кнопку повтора: без наклона */
@media (max-width:759px){.cf-r3s.is-arm:not(.is-seen) .cf-tilt{transform:none;}}

/* одометр: колонка цифр уезжает на итог (--n); итог стоит в разметке, до хода видно «было» */
.cf-odo{display:inline-flex; align-items:flex-start;}
.cf-od{display:inline-block; height:1em; overflow:hidden; line-height:1;}
.cf-od>span{display:flex; flex-direction:column; transform:translateY(calc(var(--n) * -1em));}
.cf-od i{display:block; height:1em; font-style:normal; line-height:1;}
.cf-od-s{display:inline-block; white-space:pre; line-height:1;}
.cf-r3s.is-arm:not(.is-go) .cf-od>span{transform:none;}
.cf-r3s.is-arm.is-go .cf-od>span{transition:transform var(--r3-sig) var(--r3-io) calc(var(--k) * 70ms);}

/* ── РЕКЛАМА: столб-отвес опускается от 6 796 до 1 650 ₽, пунктир «было» остаётся ── */
.cf-drop{position:relative; display:grid; grid-template-columns:120px 150px minmax(0,1fr); gap:0 56px; align-items:end;
         height:520px; padding-top:32px; margin:0;}
.cf-drop__sc{position:relative; height:100%;}
.cf-drop__sc span{position:absolute; right:0; font-size:var(--r3-s); color:var(--mute); transform:translateY(50%); white-space:nowrap;}
.cf-drop__sc span::after{content:""; position:absolute; right:-20px; top:50%; width:12px; height:1px; background:var(--line-strong);}
.cf-col{position:relative; height:100%; --h:.2357; --h0:.9709;}
.cf-col__track{position:absolute; inset:0; border-radius:6px; background:var(--r3-fill);}
.cf-col__ghost{position:absolute; left:-10px; right:-10px; bottom:0; height:calc(var(--h0) * 100%); border-top:1.5px dashed var(--line-strong);}
.cf-col__ghost i{position:absolute; left:calc(100% + 16px); top:-10px; font-style:normal; font-size:var(--r3-s); line-height:1.3; color:var(--mute); white-space:nowrap;}
.cf-col__fill{position:absolute; left:0; right:0; bottom:0; height:100%; border-radius:6px; background:var(--cf-accent);
              transform-origin:bottom; transform:scaleY(var(--h));
              box-shadow:0 0 0 1px var(--cf-accent), 0 -24px 90px 10px var(--r3-ember);}
.cf-r3s.is-arm:not(.is-go) .cf-col__fill{transform:scaleY(var(--h0));}
.cf-r3s.is-arm.is-go .cf-col__fill{transition:transform var(--r3-sig) var(--r3-io);}
.cf-big{align-self:start; padding-top:40px;}
.cf-big__n{display:flex; align-items:flex-start; gap:.12em; font:300 clamp(80px,12.2vw,176px)/1 var(--ff-display); letter-spacing:-.055em;}
@media (max-width:400px){ .cf-big__n{font-size:min(80px, calc((100vw - 2 * var(--pad)) / 4.5));} }   /* 320: «1 650 ₽» в 280 px */
.cf-big__u{margin-top:18px; font-size:var(--r3-mid); line-height:1.3;}
.cf-big__u s,.cf-sb__u s{color:var(--mute); text-decoration-thickness:1.5px;}
.cf-big__f{margin-top:10px; font-size:var(--r3-s); line-height:1.3; color:var(--cf-accent);}
.cf-pairs{display:flex; flex-wrap:wrap; gap:16px 56px; margin:40px 0 0; padding-top:24px; border-top:1px solid var(--line);}
.cf-pairs dt{font-size:var(--r3-s); line-height:1.4; color:var(--mute);}
.cf-pairs dd{margin:8px 0 0; font:600 var(--r3-mid)/1.3 var(--ff-body); font-variant-numeric:tabular-nums;}
.cf-pairs dd span{color:var(--mute); font-weight:400;}
@media (max-width:760px){
  .cf-drop{grid-template-columns:54px 64px minmax(0,1fr); gap:0 22px; height:auto; padding-top:0;}
  .cf-drop__sc,.cf-col{height:340px;}
  .cf-drop__sc span:nth-child(even){display:none;}
  .cf-drop__sc span::after{right:-14px; width:8px;}
  .cf-col__ghost i{display:none;}
  .cf-big{grid-column:1 / -1; margin-top:36px; padding-top:0;}
  .cf-pairs{gap:16px 32px;}
  /* 23.10.2026: на телефоне столб лёг полосой во всю ширину (было: столб 64 px в левых 40 %, справа пусто, «1 650 ₽» под
     графиком в 340 px). Та же сигнатура по оси X: полоса сжимается от пунктира «было» к 1 650, шкала под ней. */
  .cf-drop{display:flex; flex-direction:column; align-items:stretch; height:auto;}
  .cf-col{order:1; height:44px;}
  .cf-drop__sc{order:2; height:22px; margin-top:12px;}
  .cf-big{order:3; margin-top:28px;}
  .cf-drop__sc span{bottom:auto !important; top:0; right:auto; transform:translateX(-50%);}   /* inline bottom:% задан под вертикальную шкалу */
  .cf-drop__sc span:nth-child(1){left:0; transform:none;}
  .cf-drop__sc span:nth-child(3){left:28.571%;}
  .cf-drop__sc span:nth-child(5){left:57.143%;}
  .cf-drop__sc span:nth-child(7){left:85.714%;}
  .cf-drop__sc span::after{right:auto; left:50%; top:-8px; width:1px; height:6px;}
  .cf-drop__sc span:nth-child(1)::after{left:0;}
  .cf-col__ghost{left:0; right:auto; top:-8px; bottom:-8px; height:auto; width:calc(var(--h0) * 100%); border-top:0; border-right:1.5px dashed var(--line-strong);}
  .cf-col__fill{transform-origin:left; transform:scaleX(var(--h)); box-shadow:0 0 0 1px var(--cf-accent), 24px 0 60px 4px var(--r3-ember);}
  .cf-r3s.is-arm:not(.is-go) .cf-col__fill{transform:scaleX(var(--h0));}
}

/* ── ДАШБОРД: «было 60 %» зачёркивается, линия выпрямляется к 101 % ── */
.cf-sp{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:32px 72px; align-items:start;}
.cf-sp__was{position:relative; display:inline-block; font:300 clamp(72px,9.4vw,136px)/1 var(--ff-display); letter-spacing:-.05em; color:var(--r3-ghost);}
.cf-sp__was::after{content:""; position:absolute; left:-4%; right:-4%; top:52%; height:3px; background:var(--r3-ghost); transform-origin:left;}
.cf-r3s.is-arm:not(.is-go) .cf-sp__was::after{transform:scaleX(0);}
.cf-r3s.is-arm.is-go .cf-sp__was::after{transition:transform var(--t-cf-show) var(--e-out);}
.cf-sp__now{display:flex; align-items:flex-start; gap:.02em; margin-top:8px; font:600 clamp(72px,9.4vw,136px)/1 var(--ff-display); letter-spacing:-.05em;}
.cf-sp__u{margin-top:22px; font-size:var(--r3-lab); line-height:1.35;}
.cf-sp__f{margin-top:8px; font-size:var(--r3-s); line-height:1.3; color:var(--cf-accent);}
.cf-ln{position:relative; margin:-24px 0 0;}
.cf-ln::before{content:""; position:absolute; z-index:-1; right:4%; top:6%; width:70%; height:60%; border-radius:50%;
               background:radial-gradient(closest-side, var(--r3-ember), transparent); pointer-events:none;}
.cf-ln svg{display:block; width:100%; height:auto; overflow:visible;}
.cf-ln .gl{stroke:var(--line); stroke-width:1;}
.cf-ln .tx{fill:var(--mute); font:400 14px var(--ff-body);}
.cf-ln .tx--a{fill:var(--cf-accent); font-weight:600; font-size:16px;}
.cf-ln .gh{stroke:var(--line-strong); stroke-width:2; stroke-dasharray:6 7;}
.cf-ln .lv{stroke:var(--cf-accent); stroke-width:4; stroke-linecap:round; transform-box:view-box; transform-origin:80px 140px;
           transform:rotate(-.651deg); filter:drop-shadow(0 0 10px var(--r3-ember));}
.cf-ln .p0{fill:var(--paper);}
.cf-ln .p1{fill:var(--cf-accent); transform-box:view-box;}
.cf-ln .lb{transform-box:view-box;}
.cf-r3s.is-arm:not(.is-go) .cf-ln .lv{transform:rotate(24.44deg) scaleX(1.0983);}
.cf-r3s.is-arm:not(.is-go) .cf-ln .p1,.cf-r3s.is-arm:not(.is-go) .cf-ln .lb{transform:translateY(205px);}
.cf-r3s.is-arm:not(.is-go) .cf-ln .lb{opacity:0;}
.cf-r3s.is-arm.is-go .cf-ln .lv,.cf-r3s.is-arm.is-go .cf-ln .p1{transition:transform var(--r3-sig) var(--r3-io) 300ms;}
.cf-r3s.is-arm.is-go .cf-ln .lb{transition:transform var(--r3-sig) var(--r3-io) 300ms, opacity var(--t-cf-show) var(--e-out) 1100ms;}
@media (max-width:760px){
  .cf-sp{grid-template-columns:minmax(0,1fr); gap:28px;}
  .cf-ln::before{display:none;}
  .cf-ln .tx{font-size:27px;} .cf-ln .tx--a{font-size:29px;}
}
@media (max-width:360px){ .cf-ln .tx{font-size:30px;} .cf-ln .tx--a{font-size:32px;} }

/* ── БАЗА ПЛОЩАДОК: поиск, фильтры, карточки по три в ряд без дыр (последняя тянется на остаток);
   переезд при фильтре FLIP через transform (case-frame.js), высота сетки не анимируется ── */
.cf-sd{padding:28px; border-radius:24px; background:var(--surface);}
.cf-sd__top{display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center;}
.cf-q{flex:1 1 320px; display:flex; align-items:center; gap:12px; min-height:52px; padding:0 18px; border-radius:14px;
      box-shadow:inset 0 0 0 1px var(--line-strong); color:var(--mute); transition:box-shadow var(--t-micro) var(--e-out);}
.cf-q:focus-within{box-shadow:inset 0 0 0 1.5px var(--cf-accent);}
.cf-q input{flex:1; min-width:0; height:50px; border:0; background:transparent; color:var(--paper); font:400 16px var(--ff-body); outline:none;}
.cf-q input::placeholder{color:var(--mute);}
.cf-q input::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none;}   /* синий крестик браузера мимо палитры; сброс у кнопки «Сбросить фильтры» */
.cf-tabs{display:inline-flex; padding:4px; border-radius:14px; box-shadow:inset 0 0 0 1px var(--line);}
.cf-tabs button,.cf-chip{border:0; background:none; cursor:pointer; font:400 15px/1.2 var(--ff-body); color:var(--dim);
                         touch-action:manipulation; -webkit-tap-highlight-color:transparent;}
.cf-tabs button{min-height:44px; padding:0 18px; border-radius:10px;
                transition:background-color var(--t-micro) var(--e-out), color var(--t-micro) var(--e-out), transform var(--t-micro) var(--e-out);}
.cf-tabs button[aria-pressed="true"]{background:var(--r3-fill); color:var(--paper); font-weight:600; box-shadow:inset 0 0 0 1px var(--line-strong);}
.cf-tabs button:active{transform:scale(.96);}
.cf-fl{display:flex; flex-wrap:wrap; align-items:center; gap:10px 28px; margin:22px 0 20px;}
.cf-fg{display:flex; flex-wrap:wrap; align-items:center; gap:8px;}
.cf-fg[hidden]{display:none;}
.cf-fg__k{margin-right:4px; font-size:var(--r3-s); color:var(--mute);}
.cf-chip{min-height:44px; padding:0 14px; border-radius:10px; box-shadow:inset 0 0 0 1px var(--line-strong);
         transition:background-color var(--t-micro) var(--e-out), color var(--t-micro) var(--e-out), box-shadow var(--t-micro) var(--e-out), transform var(--t-micro) var(--e-out);}
.cf-chip[aria-pressed="true"]{background:var(--cf-accent); color:var(--cf-on-accent); font-weight:600; box-shadow:none;}
@media (hover:hover) and (pointer:fine){ .cf-chip[aria-pressed="false"]:hover{color:var(--paper); box-shadow:inset 0 0 0 1px var(--paper);} }
.cf-chip:active{transform:scale(.95);}
/* самопоказ: перед включением фильтр загорается и «нажимается», как под пальцем */
.cf-chip.is-hint{color:var(--paper); background:color-mix(in srgb, var(--cf-accent) 18%, transparent);
                 box-shadow:inset 0 0 0 2px var(--cf-accent), 0 0 0 5px color-mix(in srgb, var(--cf-accent) 45%, transparent), 0 0 36px 8px color-mix(in srgb, var(--cf-accent) 40%, transparent);}
.cf-chip.is-press{transform:scale(.92); color:var(--paper); background:color-mix(in srgb, var(--cf-accent) 34%, transparent);
                  box-shadow:inset 0 0 0 2px var(--cf-accent), 0 0 0 3px var(--r3-ember);}
.cf-cnt{margin-left:auto; font-size:15px; color:var(--dim); font-variant-numeric:tabular-nums;}
.cf-cnt[hidden]{display:none;}
.cf-cnt b{color:var(--paper);}
.cf-vgw{container:vg / inline-size;}
.cf-vgw[hidden],.cf-vc[hidden],.cf-empty[hidden],.cf-cg[hidden],.cf-cg li[hidden]{display:none;}
.cf-vg{position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;
       grid-auto-rows:calc((100cqw - 40px) / 3 * 2 / 3);}
@container vg (max-width:820px){ .cf-vg{grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; grid-auto-rows:calc((100cqw - 16px) / 2 * 2 / 3);} }
@container vg (max-width:560px){ .cf-vg{grid-template-columns:minmax(0,1fr); gap:14px; grid-auto-rows:calc(100cqw * 2 / 3);} }
.cf-vc{position:relative; z-index:1; overflow:hidden; border-radius:18px; background:var(--bg);}
.cf-vc.is-off{opacity:.24; filter:grayscale(1);}   /* не подошла под фильтр: гаснет на своём месте, высота сетки та же (22.10) */
.cf-vc{transition:opacity var(--t-micro) var(--e-out);}   /* ответ на нажатие фильтра: 200 мс; серый без перехода, плавная только прозрачность (improve-animations, 22.10) */
.cf-vc img{display:block; width:100%; height:100%; object-fit:cover; transition:transform var(--t-cf-show) var(--e-out);}
@media (hover:hover) and (pointer:fine){ .cf-vc:hover img{transform:scale(1.04);} }
.cf-vc__t{position:absolute; left:0; right:0; bottom:0; padding:72px 24px 20px; text-shadow:0 1px 12px var(--shade);
          background:linear-gradient(to top, color-mix(in srgb, var(--shade) 94%, transparent) 0%, color-mix(in srgb, var(--shade) 82%, transparent) 55%, transparent);
          font-size:var(--r3-lab); line-height:1.35; color:var(--dim);}
.cf-vc__t b{display:block; margin-bottom:2px; font:600 clamp(19px,1.7vw,24px)/1.3 var(--ff-body); color:var(--paper);}
@container vg (max-width:560px){
  .cf-vc{border-radius:12px;}
  .cf-vc__t{padding:48px 16px 14px; font-size:var(--r3-s);}
  .cf-vc__t b{font-size:18px;}
}
.cf-empty{padding:28px 0 8px; font-size:var(--r3-mid); line-height:1.4; color:var(--dim);}
.cf-empty .cf-chip{margin-top:16px;}
.cf-cg{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;}
.cf-cg li{padding:22px 20px; border-radius:16px; box-shadow:inset 0 0 0 1px var(--line);}
.cf-cg b{display:block; font-size:17px;}
.cf-cg span{font-size:var(--r3-s); color:var(--mute);}
@media (max-width:760px){
  .cf-sd{padding:16px; border-radius:20px;}
  .cf-fl{gap:10px 16px;}
  .cf-cnt{margin-left:0;}
  .cf-cg{grid-template-columns:minmax(0,1fr);}
}

/* ── ПОЛОСА «Было → Сделал → Стало» (r3): огонёк «Закат» один раз бежит по линии до «Стало» (2 × 550 мс),
   та загорается. От 900 px в один ряд, уже 900 столбиком с линией слева. Без скрипта и при reduce сразу итог. ── */
.cf-chs--sb{--gp:clamp(16px,1.7vw,24px); margin-top:48px; gap:0;}
.cf-chs--sb .cf-chs__row{position:relative; gap:16px; padding:0 0 0 26px;}
@media (min-width:900px){
  .cf-chs--sb .cf-chs__row{grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1.3fr); gap:var(--gp); padding:34px 0 0;}
}
.cf-chs--sb .cf-ch{position:relative; display:grid; align-content:start; gap:14px; padding:26px 28px 30px; border-radius:20px;
                   background:var(--surface); box-shadow:inset 0 0 0 1px var(--line);}
.cf-chs--sb .cf-ch>*{position:relative;}
.cf-chs--sb .cf-ch__k{gap:10px; flex-wrap:nowrap;}
.cf-chs--sb .cf-ch__n{font:600 var(--r3-lab)/1.3 var(--ff-body); letter-spacing:0;}
.cf-chs--sb .cf-ch__h{font:400 var(--r3-lab)/1.3 var(--ff-body); letter-spacing:0;}
.cf-chs--sb .cf-ch__t{font-size:var(--r3-ch); line-height:1.35; max-width:none;}
.cf-chs--sb .cf-ch--was{background:color-mix(in srgb, var(--surface) 40%, var(--bg));
                        box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--paper) 7%, transparent);
                        color:color-mix(in oklab, var(--dim) 80%, var(--bg));}
.cf-chs--sb .cf-ch--was .cf-ch__h,.cf-chs--sb .cf-ch--was .cf-ch__t{color:inherit;}
.cf-chs--sb .cf-ch--was .cf-ch__n{color:var(--mute);}
.cf-sb__nd{position:absolute !important; top:26px; left:-26px; width:10px; height:10px; border-radius:50%; background:var(--bg);
           box-shadow:inset 0 0 0 1.5px var(--line-strong);
           transition:background-color var(--t-cf-show) var(--e-out) calc(2 * var(--r3-run)), box-shadow var(--t-cf-show) var(--e-out) calc(2 * var(--r3-run));}
.cf-sb__seg{position:absolute !important; top:31px; left:-22px; width:2px; height:calc(100% + 16px); border-radius:2px; background:var(--line);}
.cf-sb__fire{position:absolute; inset:0; border-radius:inherit; transform-origin:50% 0;
             background:linear-gradient(180deg, color-mix(in srgb, var(--cf-accent) 35%, transparent), var(--cf-accent));}
.cf-sb__run{position:absolute; inset:0;}
.cf-sb__dot{position:absolute; left:50%; bottom:-5px; width:10px; height:10px; margin-left:-5px; border-radius:50%; background:var(--cf-accent);
            box-shadow:0 0 0 4px var(--r3-ember), 0 0 26px 6px var(--r3-ember);}
.cf-chs--sb .cf-ch:nth-child(1) .cf-sb__dot{opacity:0;}
@media (min-width:900px){
  .cf-sb__nd{top:-30px; left:28px;}
  .cf-sb__seg{top:-26px; left:33px; width:calc(100% + var(--gp)); height:2px;}
  .cf-sb__fire{transform-origin:0 50%; background:linear-gradient(90deg, color-mix(in srgb, var(--cf-accent) 35%, transparent), var(--cf-accent));}
  .cf-sb__dot{left:auto; right:-5px; top:50%; bottom:auto; margin:-5px 0 0;}
}
@media (min-width:900px) and (max-width:1100px){
  .cf-chs--sb .cf-ch{padding:22px 20px 26px;}
  .cf-sb__nd{left:20px;} .cf-sb__seg{left:25px;}
}
@media (max-width:899.98px){ .cf-chs--sb .cf-ch{padding:22px 20px 24px;} }
.cf-chs--sb .cf-ch--now::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
                                background:color-mix(in srgb, var(--cf-accent) 9%, transparent);
                                box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cf-accent) 60%, transparent), 0 28px 90px -36px color-mix(in srgb, var(--cf-accent) 60%, transparent);
                                transition:opacity var(--t-cf-show) var(--e-out) calc(2 * var(--r3-run));}
.cf-chs--sb .cf-ch--now .cf-sb__nd{background:var(--cf-accent); box-shadow:0 0 0 4px var(--r3-ember);}
.cf-sb__big{font:300 clamp(40px,4.2vw,60px)/1 var(--ff-display); letter-spacing:-.045em; color:var(--paper); text-shadow:0 0 40px var(--r3-ember);
            transition:color var(--t-cf-show) var(--e-out) calc(2 * var(--r3-run)), text-shadow var(--t-cf-show) var(--e-out) calc(2 * var(--r3-run));}
.cf-sb__big--long{font-size:clamp(28px,2.8vw,40px); letter-spacing:-.035em;}
.cf-sb__u{margin-top:-6px; font-size:var(--r3-lab); line-height:1.35; color:var(--dim);}
/* 23.10.2026, реклама: на телефоне «1 650 ₽, было 6 796 ₽» уже стоит у крупной цифры сцены экраном выше, в «Стало» второй раз не повторяем */
@media (max-width:760px){ .cf-sb--dup{display:none;} }
.cf-sb__facts{display:flex; flex-wrap:wrap; gap:16px 40px;}
.cf-sb__fact b{display:block; font:600 var(--r3-fact)/1 var(--ff-display); letter-spacing:-.03em;}
.cf-sb__fact span{display:block; margin-top:8px; font-size:var(--r3-lab); line-height:1.35; color:var(--dim);}
/* до въезда: линия холодная, «Стало» не горит */
.cf-chs--sb.is-arm:not(.is-go) .cf-sb__fire{transform:scaleY(0);}
.cf-chs--sb.is-arm:not(.is-go) .cf-sb__run{transform:translateY(-100%);}
@media (min-width:900px){
  .cf-chs--sb.is-arm:not(.is-go) .cf-sb__fire{transform:scaleX(0);}
  .cf-chs--sb.is-arm:not(.is-go) .cf-sb__run{transform:translateX(-100%);}
}
.cf-chs--sb.is-arm:not(.is-go) .cf-sb__dot{opacity:0;}
.cf-chs--sb.is-arm:not(.is-go) .cf-ch--now::before{opacity:0;}
.cf-chs--sb.is-arm:not(.is-go) .cf-ch--now .cf-sb__nd{background:var(--bg); box-shadow:inset 0 0 0 1.5px var(--line-strong);}
.cf-chs--sb.is-arm:not(.is-go) .cf-sb__big{color:var(--dim); text-shadow:0 0 0 transparent;}
/* пробег: первый отрезок разгоняется, второй тормозит; скорость на стыке у обеих кривых 4, рывка нет */
.cf-chs--sb.is-arm.is-go .cf-ch:nth-child(1) .cf-sb__fire,.cf-chs--sb.is-arm.is-go .cf-ch:nth-child(1) .cf-sb__run{transition:transform var(--r3-run) cubic-bezier(.6,0,.9,.6);}
.cf-chs--sb.is-arm.is-go .cf-ch:nth-child(2) .cf-sb__fire,.cf-chs--sb.is-arm.is-go .cf-ch:nth-child(2) .cf-sb__run{transition:transform var(--r3-run) cubic-bezier(.1,.4,.4,1) var(--r3-run);}
.cf-chs--sb.is-arm.is-go .cf-ch:nth-child(1) .cf-sb__dot{animation:cf-blink calc(var(--r3-run) + 80ms) linear both;}
.cf-chs--sb.is-arm.is-go .cf-ch:nth-child(2) .cf-sb__dot{transition:opacity 80ms linear var(--r3-run);}
@keyframes cf-blink{0%,92%{opacity:1;} 100%{opacity:0;}}

/* ── паспорт строкой, «Подробнее», призыв с карточкой Telegram, следующий кейс ── */
.cf-pp{margin:40px var(--pad) 0; max-width:var(--cf-w); padding:18px 0; border-top:1px solid var(--line);
       font:400 16px/1.6 var(--ff-body); color:var(--dim);}
.cf--r3 .cf-more{margin:0 var(--pad);}
.cf--r3 .cf-more summary{min-height:72px; padding:14px 0; font:400 var(--r3-mid)/1.3 var(--ff-body);}
.cf--r3 .cf-more__in{max-width:34em; padding:4px 0 36px; font-size:var(--r3-lab); line-height:1.5; color:var(--dim);}
.cf--r3 .cf-call{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:32px 64px; align-items:end; justify-items:stretch;
                 margin:0; padding:var(--r3-air) var(--pad) 0; max-width:calc(var(--cf-w) + 2 * var(--pad)); overflow:visible;}
.cf--r3 .cf-call::before{display:none;}
.cf--r3 .cf-call__h{font:600 var(--r3-cta)/1.12 var(--ff-display); letter-spacing:-.025em; max-width:none;}
.cf-tg{position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px 20px;
       padding:24px 24px 24px 28px; border-radius:24px; background:var(--surface); color:var(--paper); text-decoration:none;
       touch-action:manipulation; -webkit-tap-highlight-color:transparent;
       transition:transform var(--t-micro) var(--e-out), box-shadow var(--t-micro) var(--e-out);}
.cf-tg__k{font-size:var(--r3-s); color:var(--dim);}
.cf-tg__v{grid-column:1; font-size:22px; line-height:1.3; font-weight:600;}
.cf-tg__go{grid-column:2; grid-row:1 / span 2; display:grid; place-items:center; width:64px; height:64px; border-radius:50%;
           background:var(--cf-accent); color:var(--cf-on-accent); transition:transform var(--t-micro) var(--e-out);}
@media (hover:hover) and (pointer:fine){
  .cf-tg:hover{transform:translateY(-2px); box-shadow:0 18px 40px -24px var(--cf-accent);}
  .cf-tg:hover .cf-tg__go{transform:translateX(4px);}
}
.cf-tg:active{transform:scale(.985); transition-duration:var(--t-press);}
.cf-tg:active .cf-tg__go{transform:scale(.92);}
.cf-tg:focus-visible{outline-offset:4px;}
.cf-call__nx{grid-column:1 / -1; margin-top:40px; padding:24px 0 16px; border-top:1px solid var(--line);}
.cf--r3 .nxt.cf-next{display:flex; align-items:baseline; gap:8px 16px; width:100%;}
.cf--r3 .cf-next span{font-size:15px; color:var(--mute);}
.cf--r3 .cf-next span{flex:none;}
.cf--r3 .cf-next b{margin-left:auto; min-width:0; text-align:right; font:600 var(--r3-mid)/1.3 var(--ff-body); text-decoration:none;}
.cf--r3 .cf-next i{flex:none;}
.cf--r3 + .end{padding-top:48px;}
@media (max-width:760px){
  .cf-pp{margin-top:32px;}
  .cf--r3 .cf-call{grid-template-columns:minmax(0,1fr);}
  .cf-call__nx{margin-top:24px;}
  .cf--r3 + .end{padding-top:32px;}
}
/* ══ R5: CRM и ИИ-помощник, пара экранов (перенос 21.10.2026) ═════════════════════════════════════════
 * Hallmark · macrostructure: Split Studio · кейсы crm (claude-design/CASE-CRM-r5.dc.html) и ai-support
 * (CASE-AI-r2-a.dc.html): паспорт строкой над H1, пара «экран + телефон» на общей высоте, нить события между ними.
 * Всё под .cf--r5 на <main>: у соседних кейсов этого класса нет, их рисунок не меняется.
 * Сцена [data-steps] (case-frame.js 6в): .is-arm без шага = исходное положение, шаги копятся классами .s1….s7.
 * Разметка = итог: без скрипта и при reduce всё стоит сразу (условия «скрыть» только под .is-arm).
 * Телефон 300 px на обеих страницах (решение владельца «ну че телефон то такой широкий?»), до 1100: ИИ 290 в паре, CRM под таблицей 340. */
.cf--r5{--r5-tel:300px; --r5-px:24px; --r5-row:66px; --r5-plane:color-mix(in srgb, var(--surface) 70%, var(--bg));
        --r5-hl:color-mix(in srgb, var(--cf-accent) 22%, transparent); --r5-hlt:2500ms; --r5-thr:760ms;}
@media (max-width:1100px){ .cf--r5{--r5-tel:290px;} }
.cf5-nob{white-space:nowrap;}
/* запасные шрифты с подогнанной шириной: пока Unbounded и Golos грузятся (font-display:swap), H1 и лид в системном
   шрифте были на строку короче, и сцена прыгала на 61 px (CLS 0,022–0,029 холодной загрузки). Ширины сняты canvas'ом:
   Unbounded 600 / Arial Bold = 1,31, 300 / Arial = 1,32; Golos 400 / Arial = 1,06, 600 / Arial Bold = 1,01. Жирный
   берётся настоящим начертанием: синтетический жирный ширину знаков не меняет, и строка опять выходила короче. Только для .cf--r5, соседние страницы не задеты */
@font-face{font-family:"R5 Unbounded FB"; font-weight:100 499; src:local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica"), local("Roboto"); size-adjust:132%;}
@font-face{font-family:"R5 Unbounded FB"; font-weight:500 900; src:local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Helvetica-Bold"), local("Roboto Bold"); size-adjust:131%;}
@font-face{font-family:"R5 Golos FB"; font-weight:100 499; src:local("Arial"), local("ArialMT"), local("Helvetica Neue"), local("Helvetica"), local("Roboto"); size-adjust:106%;}
@font-face{font-family:"R5 Golos FB"; font-weight:500 900; src:local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Helvetica-Bold"), local("Roboto Bold"); size-adjust:101%;}
.cf--r5{--ff-display:"Unbounded", "R5 Unbounded FB", "Golos Text", system-ui, sans-serif; --ff-body:"Golos Text", "R5 Golos FB", system-ui, -apple-system, "Segoe UI", sans-serif;}

/* ── паспорт: строка мелко над H1; у CRM число «2–3 с» на базовой линии последней строки H1 ── */
.cf--r5 .cf-pass{grid-template-columns:minmax(0,7fr) minmax(0,5fr); grid-template-areas:"who who" "h1 lead"; gap:0 64px; align-items:start;
                 padding:40px var(--pad) 64px;}
.cf--r5 .cf-who{grid-area:who; grid-column:auto; margin-bottom:24px; font:400 16px/1.5 var(--ff-body); letter-spacing:0; color:var(--mute);}
.cf--r5 .cf-h1{grid-area:h1; grid-column:auto; max-width:14em; letter-spacing:-.03em; text-wrap:balance;}
.cf--r5 .cf-lede{grid-area:lead; grid-column:auto; align-self:end; margin-top:0; max-width:26em;}
.cf--r5 .cf-pass--r5n{grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"who who" "h1 n" "lead sub";}
.cf--r5 .cf-pass--r5n .cf-h1{align-self:last baseline; max-width:15em;}
.cf--r5 .cf-pass--r5n .cf-lede{align-self:start; margin-top:28px; max-width:30em;}
.cf5-n{grid-area:n; align-self:last baseline; margin:0; font:300 var(--r3-key)/.92 var(--ff-display); letter-spacing:-.045em; white-space:nowrap;}
.cf5-sub{grid-area:sub; display:grid; align-content:start; gap:8px; margin-top:28px; max-width:22rem;}
@media (prefers-reduced-motion:no-preference){
  .cf-hero .cf5-n,.cf-hero .cf5-sub{animation:cf-up var(--t-cf-show) var(--e-out) 280ms backwards;}
}
@media (max-width:900px){
  .cf--r5 .cf-pass--r5{grid-template-columns:minmax(0,1fr); grid-template-areas:"who" "h1" "lead";}
  .cf--r5 .cf-pass--r5 .cf-lede{margin-top:24px;}
}
@media (max-width:760px){
  .cf--r5 .cf-pass{padding:28px var(--pad) 40px;}
  .cf--r5 .cf-pass--r5n{grid-template-columns:minmax(0,1fr); grid-template-areas:"who" "h1" "lead" "n" "sub"; padding-bottom:40px;}
  .cf--r5 .cf-who{margin-bottom:16px; font-size:15px;}
  .cf--r5 .cf-lede,.cf--r5 .cf-pass--r5n .cf-lede{margin-top:20px;}
  .cf--r5 .cf-pass--r5n .cf-h1{align-self:auto;}
  .cf5-n{align-self:auto; margin-top:24px;}   /* у эталона 36 и 48 под паспортом: на 390×664 начало таблицы не входило в первый экран (К20) */
  .cf5-sub{margin-top:12px;}
}
@media (max-width:360px){ .cf--r5{--r3-h1:28px;} }

/* ── пара экранов ── */
.cf--r5 .cf-r3s{perspective:none; gap:0;}
.cf5-duo{position:relative; display:grid; align-items:stretch;}
.cf5-duo>*{min-width:0;}
.cf5-duo--crm{grid-template-columns:minmax(0,1fr) var(--r5-tel); gap:0 64px;}
.cf5-duo--ai{grid-template-columns:var(--r5-tel) minmax(0,1fr); gap:0 96px;}
@media (max-width:1100px){ .cf5-duo--ai{gap:0 64px;} }
.cf5-thr-v{display:none; pointer-events:none;}   /* вертикальная нить: ни клика, ни тапа не перехватывает */
.cf--r5 .cf-cap{margin-top:12px;}

/* телефон, нарисованный вёрсткой: форма Telegram без логотипа */
.cf5-tel{position:relative; display:grid; grid-template-rows:auto minmax(0,1fr) auto; padding:10px; border-radius:40px; background:var(--shade);
         box-shadow:inset 0 0 0 1.5px var(--line-strong), 0 40px 80px -40px var(--shade);}
.cf5-tel>*{background:var(--r5-plane);}
.cf5-tel__h{display:flex; align-items:center; gap:10px; padding:16px 14px 12px; border-radius:30px 30px 0 0; border-bottom:1px solid var(--line); color:var(--dim);}
.cf5-tel__av{display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:50%; background:color-mix(in srgb, var(--moon) 40%, var(--surface));
             color:var(--paper); font-size:14px; font-weight:600;}
.cf5-tel__n{display:grid; line-height:1.3;}
.cf5-tel__n b{color:var(--paper); font-size:16px;}
.cf5-tel__n small{font-size:14px; color:var(--mute);}
.cf5-tel__c{display:flex; flex-direction:column; justify-content:flex-end; gap:12px; padding:14px;}
.cf5-tel__in{display:flex; align-items:center; gap:10px; padding:12px 14px 14px; border-radius:0 0 30px 30px; border-top:1px solid var(--line);
             font-size:15px; color:var(--mute);}
.cf5-tel__in span{flex:1;}
.cf5-bub{position:relative; display:grid; gap:3px; max-width:100%; margin:0; padding:10px 12px 22px; border-radius:16px 16px 16px 5px;
         background:var(--surface); font-size:15px; line-height:1.35; color:var(--paper);}
.cf5-bub b{font-size:15px;}
.cf5-bub__m{color:var(--dim);}
.cf5-bub__st{display:inline-flex; align-items:center; gap:6px; margin-top:5px; font-weight:600;}
.cf5-bub__st>span{display:inline-flex; align-items:center; gap:6px;}
.cf5-bub .cf5-on5,.cf5-bub--old .cf5-bub__st{color:var(--cf-accent);}
.cf5-bub__tm{position:absolute; right:12px; bottom:5px; display:inline-flex; align-items:center; gap:3px; font-size:13px; line-height:1; color:var(--mute);}
.cf5-bub--old{opacity:.7; padding-bottom:10px;}
.cf5-bub--old .cf5-bub__st{color:var(--dim);}
.cf5-kb{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-top:6px;}
.cf5-kb__b{display:grid; place-items:center; min-height:40px; padding:0 3px; border-radius:10px; text-align:center; line-height:1.3;
           background:color-mix(in srgb, var(--surface) 70%, var(--paper) 9%); font-size:14px; font-weight:600;}
.cf5-kb__acc{grid-column:1 / -1;}
.cf5-msg{display:grid;}
@media (min-width:901px){ .cf5-crm .cf5-tel__c{padding:14px 12px;} }   /* телефон 300/290 (у эталона 320/340): «Сделаю сегодня» в одну строку */

/* ── CRM: планировщик ── */
.cf5-pl{--cols:52px 128px minmax(0,1fr) 128px 232px; container:cf5pl / inline-size; position:relative; display:flex; flex-direction:column;
        border-radius:24px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--line), 0 40px 90px -50px var(--shade);}
.cf5-pl__h{display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:18px var(--r5-px);}
.cf5-pl__t{font:600 20px/1.2 var(--ff-display); letter-spacing:-.02em;}
.cf5-pl__tabs{margin-left:auto; display:flex; gap:2px; padding:3px; border-radius:10px; background:var(--r3-fill); font-size:15px;}
.cf5-pl__tab{padding:5px 12px; border-radius:7px; color:var(--mute);}
.cf5-pl__tab.is-on{background:color-mix(in srgb, var(--paper) 12%, transparent); color:var(--paper);}
.cf5-pl__hd,.cf5-r{display:grid; grid-template-columns:var(--cols); align-items:center; gap:0 16px; padding-left:var(--r5-px); padding-right:var(--r5-px);}
.cf5-pl__hd{min-height:40px; border-top:1px solid var(--line); font-size:14px; color:var(--mute);}
.cf5-pl__g{margin:0; padding:14px var(--r5-px) 8px; border-top:1px solid var(--line); font-size:15px; font-weight:600; color:var(--dim);}
.cf5-r{min-height:var(--r5-row); padding-top:11px; padding-bottom:11px; border-top:1px solid var(--line); font-size:16px; line-height:1.3;}
.cf5-r__t{color:var(--dim); font-variant-numeric:tabular-nums;}
.cf5-r__ck{display:grid; gap:2px;}
.cf5-r__c{color:var(--paper);}
.cf5-r__k{font-size:14px; line-height:1.3; color:var(--mute);}
.cf5-r__w{display:grid; justify-items:start; gap:3px;}
.cf5-r__ps{display:contents;}
.cf5-r__s,.cf5-r__p{position:relative;}
.cf5-r__s{white-space:nowrap;}
.cf5-s{display:inline-flex; align-items:center; gap:8px; color:var(--paper);}
.cf5-s::before{content:""; flex:none; width:7px; height:7px; border-radius:50%; background:currentColor;}
.cf5-s--plan,.cf5-s--done{color:var(--mute);}
.cf5-s--plan::before,.cf5-s--wait::before{background:transparent; box-shadow:inset 0 0 0 1.5px currentColor;}
.cf5-s--wait{color:var(--cf-accent);}
.cf5-s--ok{color:var(--cf-accent); font-weight:600;}
.cf5-s--ok::before{display:none;}
.cf5-pay{display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 9px 0 8px; border-radius:7px; font-size:14px; line-height:1; white-space:nowrap;}
.cf5-pay--ok{background:color-mix(in srgb, var(--paper) 9%, transparent); color:var(--dim);}
.cf5-pay--wait{padding:0 9px; box-shadow:inset 0 0 0 1px var(--line-strong); color:var(--paper);}
.cf5-chip{display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:6px; background:color-mix(in srgb, var(--cf-accent) 16%, transparent);
          color:var(--cf-accent); font-size:14px; line-height:1; white-space:nowrap;}
.cf5-r--new .cf5-r__s{justify-self:start; margin:-3px -8px; padding:3px 8px; border-radius:6px;}
.cf5-pl__f{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; margin-top:auto; padding:14px var(--r5-px) 16px;
           border-top:1px solid var(--line); font-size:15px; color:var(--mute);}
.cf5-sy>span,.cf5-lk{display:inline-flex; align-items:center; gap:8px;}
.cf5-nb{position:relative;}
.cf5-nw{display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:1fr;}
.cf5-nw>.cf5-r{min-height:0; overflow:hidden; padding-top:11px; padding-bottom:10px;}
@container cf5pl (max-width:900px){
  .cf5-pl__hd{display:none;}
  .cf5-r{grid-template-columns:48px minmax(0,1fr); grid-template-areas:"t ck" "t w" "t ps"; gap:4px 12px; align-items:start; min-height:0;
         padding-top:12px; padding-bottom:12px;}
  .cf5-nw>.cf5-r{padding-top:12px; padding-bottom:12px;}
  .cf5-r__t{grid-area:t;}
  .cf5-r__ck{grid-area:ck; display:flex; flex-wrap:wrap; align-items:baseline; gap:0 8px;}
  .cf5-r__c{font-weight:600;}
  .cf5-r__w{grid-area:w; display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px;}
  .cf5-r__ps{grid-area:ps; display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:2px;}
  .cf5-r__s,.cf5-r__wt{white-space:normal; min-width:0;}
  .cf5-r__p:has(.cf5-pay--none){display:none;}
  .cf5-r--new .cf5-r__s{flex-basis:100%;}   /* статус новой строки своей строкой в обоих состояниях: высота не прыгает */
}

/* нить CRM: от края таблицы до рамки телефона по середине новой строки, порт на каждом конце */
.cf5-thr{position:absolute; z-index:2; left:100%; top:50%; width:64px; height:2px; margin-top:-1px; background:var(--line-strong); pointer-events:none;}
.cf5-thr::before,.cf5-thr::after{content:""; position:absolute; top:-3px; width:8px; height:8px; border-radius:50%; background:var(--bg);
                                 box-shadow:inset 0 0 0 1.5px var(--line-strong);
                                 transition:background-color var(--t-micro) var(--e-out), box-shadow var(--t-micro) var(--e-out);}
.cf5-thr::before{left:-4px;} .cf5-thr::after{right:-4px;}
.cf5-thr__d{position:absolute; left:-5px; top:-4px; width:10px; height:10px; border-radius:50%; background:var(--cf-accent);
            box-shadow:0 0 0 4px var(--r3-ember), 0 0 24px 6px var(--r3-ember); opacity:0;}
.cf5-crm:not(.is-arm) .cf5-thr,.cf5-crm.s2 .cf5-thr,.cf5-crm:not(.is-arm) .cf5-thr-v,.cf5-crm.s2 .cf5-thr-v{background:color-mix(in srgb, var(--cf-accent) 55%, transparent);}
.cf5-crm:not(.is-arm) .cf5-thr::before,.cf5-crm:not(.is-arm) .cf5-thr::after,
.cf5-crm.s2 .cf5-thr::before,.cf5-crm.s2 .cf5-thr::after{background:var(--cf-accent); box-shadow:0 0 0 3px var(--r3-ember);}
.cf5-crm.is-arm.s2 .cf5-thr .cf5-thr__d{animation:cf5-run-r var(--r5-thr) var(--r3-io) 1 both;}
.cf5-crm.is-arm.s5 .cf5-thr .cf5-thr__d{animation:cf5-run-l var(--r5-thr) var(--r3-io) 1 both;}
@keyframes cf5-run-r{0%{opacity:0; transform:translateX(0);} 12%,88%{opacity:1;} 100%{opacity:0; transform:translateX(64px);}}
@keyframes cf5-run-l{0%{opacity:0; transform:translateX(64px);} 12%,88%{opacity:1;} 100%{opacity:0; transform:translateX(0);}}
@keyframes cf5-run-d{0%{opacity:0; transform:translateY(0);} 12%,88%{opacity:1;} 100%{opacity:0; transform:translateY(48px);}}
@keyframes cf5-run-u{0%{opacity:0; transform:translateY(48px);} 12%,88%{opacity:1;} 100%{opacity:0; transform:translateY(0);}}

/* шаги CRM: s1 строка у всех · s2 нить · s3 сообщение · s4 «Принял» · s5 статус у всех · s6 оплата из ВМС */
.cf5-st:not(.is-arm) .cf5-off5,.cf5-st.s5 .cf5-off5,.cf5-st:not(.is-arm) .cf5-off6,.cf5-st.s6 .cf5-off6{display:none !important;}
.cf5-st.is-arm:not(.s5) .cf5-on5,.cf5-st.is-arm:not(.s6) .cf5-on6{display:none !important;}
.cf5-st.is-arm.s5 .cf5-on5,.cf5-st.is-arm.s6 .cf5-on6{animation:cf5-fi var(--t-cf-show) var(--e-out) 1 both;}
@keyframes cf5-fi{from{opacity:0;}}
/* строка не раскрывается из нуля, а проявляется на своём месте: высота таблицы и телефона в серии не меняется (CLS, К11) */
.cf5-crm.is-arm:not(.s1) .cf5-nw>.cf5-r>*{opacity:0; transform:translateY(-8px);}
.cf5-crm.is-arm.s1 .cf5-nw>.cf5-r>*{transition:opacity var(--t-cf-show) var(--e-out), transform var(--t-cf-show) var(--e-out);}
.cf5-crm.is-arm.s1 .cf5-nw>.cf5-r{animation:cf5-hl var(--r5-hlt) var(--e-out) 1 both;}
.cf5-crm.is-arm.s5 .cf5-r--new .cf5-r__s{animation:cf5-hl var(--r5-hlt) var(--e-out) 1 both;}
@keyframes cf5-hl{0%,24%{background-color:var(--r5-hl);} 100%{background-color:transparent;}}
.cf5-crm.is-arm:not(.s3) .cf5-msg{opacity:0; transform:translateY(14px);}
.cf5-crm.is-arm.s3 .cf5-msg{transition:opacity var(--t-cf-show) var(--e-out), transform var(--t-cf-show) var(--e-out);}
.cf5-crm.is-arm.s4 .cf5-kb__acc{background:var(--cf-accent); color:var(--cf-on-accent); animation:cf5-press 300ms var(--e-out) 1 both;}
/* после «Принял» кнопка уходит, а сообщения съезжают на её место сдвигом (transform): раскладка стоит, CLS 0 */
.cf5-crm:not(.is-arm) .cf5-kb__acc,.cf5-crm.s5 .cf5-kb__acc{visibility:hidden;}
.cf5-crm:not(.is-arm) .cf5-tel .cf5-bub,.cf5-crm.s5 .cf5-tel .cf5-bub{transform:translateY(46px);}
.cf5-crm.is-arm.s5 .cf5-tel .cf5-bub{transition:transform var(--t-cf-show) var(--e-out);}
@keyframes cf5-press{40%{transform:scale(.96);}}

/* до 1100: таблица во всю ширину, телефон под ней, нить вертикальная от низа таблицы */
@media (max-width:1100px){
  .cf5-duo--crm{grid-template-columns:minmax(0,1fr);}
  .cf5-crm .cf5-thr{display:none;}
  .cf5-crm .cf5-thr-v{position:relative; display:block; justify-self:center; width:2px; height:48px; background:var(--line-strong);}
  .cf5-thr-v .cf5-thr__d{left:-4px; top:-5px;}
  .cf5-crm.is-arm.s2 .cf5-thr-v .cf5-thr__d{animation:cf5-run-d var(--r5-thr) var(--r3-io) 1 both;}
  .cf5-crm.is-arm.s5 .cf5-thr-v .cf5-thr__d{animation:cf5-run-u var(--r5-thr) var(--r3-io) 1 both;}
  .cf5-duo--crm .cf5-tel{justify-self:center; width:100%; max-width:340px;}   /* телефон под таблицей 340, как в CASE-CRM-r5 (решение владельца 21.10: «делай 340»); рядом с таблицей (от 1101) 300 */
}
@media (max-width:760px){
  .cf--r5{--r5-px:16px;}
  .cf5-pl__h{gap:10px; padding-top:16px; padding-bottom:14px;}
  .cf5-pl__t{font-size:17px;}
  .cf5-pl__tabs{font-size:14px;}
  .cf5-pl__tab{padding:4px 9px;}
  .cf5-r{font-size:15px;}
}

/* ── ИИ: телефон клиента и база знаний ── */
@media (min-width:901px){ .cf5-duo--ai>.cf5-tel{aspect-ratio:300 / 640; align-self:start;} }
.cf5-ai .cf5-tel__h{gap:10px;}
.cf5-ai .cf5-tel__av{width:36px; height:36px;}
.cf5-tel__dots{flex:none; margin-left:auto;}
.cf5-typ{color:var(--moon) !important;}
.cf5-ai .cf5-tel__c{gap:10px;}
.cf5-day{align-self:center; padding:3px 10px; border-radius:10px; background:var(--r3-fill); font-size:13px; color:var(--mute);}
.cf5-ai .cf5-bub{display:block; max-width:88%; padding:9px 12px 20px; font-size:15px; line-height:1.45; opacity:1;}
.cf5-ai .cf5-bub--old{color:var(--dim);}
.cf5-bub--out{align-self:flex-end; border-radius:16px 16px 5px 16px; background:color-mix(in srgb, var(--moon) 30%, var(--surface));}
.cf5-ai .cf5-bub__tm{right:10px; bottom:4px;}
.cf5-bub--out .cf5-bub__tm{color:color-mix(in srgb, var(--paper) 75%, var(--moon));}
.cf5-typ-b{position:absolute; left:0; top:0; display:inline-flex; gap:5px; padding:13px 14px; border-radius:16px 16px 16px 5px;
           background:var(--surface); visibility:visible;}
.cf5-typ-b i{width:7px; height:7px; border-radius:50%; background:var(--mute); animation:cf5-tdot 1s var(--r3-io) 2;}
.cf5-typ-b i:nth-child(2){animation-delay:.15s;} .cf5-typ-b i:nth-child(3){animation-delay:.3s;}
@keyframes cf5-tdot{0%,60%,100%{opacity:.35; transform:translateY(0);} 30%{opacity:1; transform:translateY(-3px);}}
.cf5-ai .cf5-bub--ans{width:88%;}
@media (max-width:1100px){ .cf5-ai .cf5-bub{max-width:92%;} .cf5-ai .cf5-bub--ans{width:92%;} }
/* подсветка цитаты: заливка «Закат» на всю высоту строки, тёмный текст; не полоса снизу */
.cf5-mk{margin:0 -2px; padding:2px; border-radius:5px; color:inherit;
        background:linear-gradient(var(--cf-accent), var(--cf-accent)) no-repeat 0 0 / 0% 100%;
        -webkit-box-decoration-break:clone; box-decoration-break:clone;}
.cf5-ai:not(.is-arm) .cf5-mk,.cf5-ai.s3 .cf5-mk--a,.cf5-ai.s5 .cf5-mk--b{background-size:100% 100%; color:var(--cf-on-accent);}
.cf5-ai.is-arm.s3 .cf5-mk--a,.cf5-ai.is-arm.s5 .cf5-mk--b{transition:background-size var(--t-cf-show) var(--e-out), color 200ms var(--e-out) 160ms;}

.cf5-bz{container:cf5bz / inline-size; display:flex; flex-direction:column; border-radius:24px; background:var(--surface);
        box-shadow:inset 0 0 0 1px var(--line), 0 40px 90px -50px var(--shade);}
.cf5-bz__h{display:grid; justify-items:start; gap:14px; padding:18px 24px;}
.cf5-bz__t{display:inline-flex; flex-wrap:wrap; align-items:center; gap:2px 10px; margin:0; font:600 20px/1.2 var(--ff-display); letter-spacing:-.02em;}
.cf5-bz__t svg{color:var(--dim);}
.cf5-bz__src{font:400 15px/1.35 var(--ff-body); letter-spacing:0; color:var(--mute);}
.cf5-nv{display:flex; flex-wrap:wrap; gap:2px; margin:0; padding:3px; border-radius:10px; background:var(--r3-fill); font-size:14px; list-style:none;}
.cf5-nv li{display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:7px; color:var(--mute); white-space:nowrap;}
.cf5-nv b{font-weight:400; font-variant-numeric:tabular-nums;}
.cf5-nv .is-on{background:color-mix(in srgb, var(--paper) 12%, transparent); color:var(--paper);}
.cf5-nv .is-on b{font-weight:600;}
.cf5-nv__lk{display:inline-flex;}
.cf5-bz__s{display:grid; gap:6px; padding:22px 24px 18px; border-top:1px solid var(--line);}
.cf5-bz__st{display:flex; align-items:baseline; gap:14px; margin:0; font:600 26px/1.15 var(--ff-display); letter-spacing:-.025em;}
.cf5-bz__st span{color:var(--r3-ghost); font-weight:300; font-variant-numeric:tabular-nums;}
.cf5-bz__sd{margin:0; font-size:var(--r3-s); color:var(--mute);}
.cf5-bz__l{margin:0; padding:0; list-style:none;}
.cf5-q{position:relative; display:grid; grid-template-columns:52px minmax(0,1fr) 112px; align-items:center; gap:0 16px; min-height:64px;
       padding:12px 24px; border-top:1px solid var(--line); font-size:17px; line-height:1.4;}
.cf5-q__n{color:var(--mute); font-size:15px; font-variant-numeric:tabular-nums;}
.cf5-q__b{justify-self:end;}
.cf5-q--hit::before{content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
                    background:color-mix(in srgb, var(--cf-accent) 8%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--cf-accent) 55%, transparent);}
.cf5-q--hit>*{position:relative;}
.cf5-ai:not(.is-arm) .cf5-q--hit::before,.cf5-ai.s5 .cf5-q--hit::before{opacity:1;}
.cf5-ai:not(.is-arm) .cf5-q--hit .cf5-q__n,.cf5-ai.s5 .cf5-q--hit .cf5-q__n{color:var(--cf-accent); font-weight:600;}
.cf5-ai.is-arm.s5 .cf5-q--hit::before{transition:opacity var(--t-cf-show) var(--e-out);}
.cf5-badge{display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px 0 8px; border-radius:7px; background:var(--cf-accent);
           color:var(--cf-on-accent); font-size:14px; font-weight:600; line-height:1; white-space:nowrap;}
.cf5-ai.is-arm:not(.s6) .cf5-badge{opacity:0; transform:scale(.92);}
.cf5-ai.is-arm.s6 .cf5-badge{transition:opacity 240ms var(--e-out), transform 300ms var(--e-out);}
.cf5-bz__f{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; margin-top:auto; padding:14px 24px 16px;
           border-top:1px solid var(--line); font-size:15px; color:var(--mute);}
@container cf5bz (max-width:620px){
  .cf5-bz__h,.cf5-bz__s,.cf5-q,.cf5-bz__f{padding-left:16px; padding-right:16px;}
  .cf5-nv .cf5-nv__t,.cf5-nv__lk{display:none;}
  .cf5-nv li{padding:5px 9px;}
  .cf5-bz__src{flex-basis:100%; padding-left:30px;}
  .cf5-q{grid-template-columns:44px minmax(0,1fr); grid-template-areas:"n t" "n b"; gap:8px 10px; align-items:start;}
  .cf5-q__n{grid-area:n; padding-top:2px;}
  .cf5-q__t{grid-area:t;}
  .cf5-q__b{grid-area:b; justify-self:start;}
  .cf5-q__b:empty{display:none;}
  .cf5-bz__st{font-size:22px;}
}

/* шаги ИИ: s1 печатает · s2 ответ по словам · s3 подсветка · s4 нить · s5 строка в базе · s6 «по базе» */
.cf5-ai:not(.is-arm) .cf5-on1,.cf5-ai.is-arm:not(.s1) .cf5-on1,.cf5-ai.s2 .cf5-on1{display:none !important;}
.cf5-ai.is-arm.s1:not(.s2) .cf5-off1{display:none !important;}
/* место ответа занято с самого начала: «печатает» стоит поверх него, ответ проявляется по словам; ничто не толкает соседей */
.cf5-ai.is-arm:not(.s2) .cf5-bub--ans{visibility:hidden;}
.cf5-ai.is-arm.s1 .cf5-typ-b,.cf5-ai.is-arm.s2 .cf5-bub--ans{animation:cf5-bi 360ms var(--e-out) 1 both;}
@keyframes cf5-bi{from{opacity:0; transform:translateY(8px);}}
.cf5-ai.is-arm.s2:not(.s3) .cf5-w{animation:cf5-wi 1ms steps(1,end) calc(var(--k) * 70ms) 1 both;}
@keyframes cf5-wi{from{visibility:hidden;} to{visibility:visible;}}

/* нить ИИ: от правого края подсвеченной строки ответа до той же строки в базе. Путь меряет скрипт по живой раскладке
   (case-frame.js 6г); без скрипта ту же кривую кладёт привязка к якорям (anchor), где браузер её знает */
.cf5-thr-n{display:none;}
.cf5-ai .cf5-thp{display:block; position:absolute; inset:0; z-index:3; width:100%; height:100%; overflow:visible; pointer-events:none;}
.cf5-thp__p{fill:none; stroke:color-mix(in srgb, var(--cf-accent) 70%, transparent); stroke-width:2; stroke-linecap:round; stroke-dasharray:1 1; stroke-dashoffset:0;}
.cf5-ai.is-arm:not(.s4) .cf5-thp__p{stroke-dashoffset:1;}
.cf5-ai.is-arm.s4 .cf5-thp__p{transition:stroke-dashoffset var(--r5-thr) var(--r3-io);}
.cf5-thr__o{position:absolute; z-index:4; left:0; top:0; display:none; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%;
            background:var(--cf-accent); box-shadow:0 0 0 3px var(--r3-ember); pointer-events:none;}
.cf5-duo.is-meas .cf5-thr__o{display:block;}
.cf5-ai.is-arm:not(.s4) .cf5-thr__o{opacity:0;}
.cf5-ai.is-arm.s4 .cf5-thr__o--b{transition:opacity 200ms var(--e-out) var(--r5-thr);}
.cf5-thr__run{position:absolute; z-index:4; left:0; top:0; display:none; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%;
              background:var(--cf-accent); box-shadow:0 0 0 4px var(--r3-ember), 0 0 24px 6px var(--r3-ember); opacity:0; pointer-events:none;
              offset-rotate:0deg; offset-anchor:50% 50%;}
.cf5-duo.is-meas .cf5-thr__run{display:block;}
.cf5-ai.is-arm.s4:not(.s5) .cf5-thr__run{animation:cf5-run var(--r5-thr) var(--r3-io) 1 both;}
@keyframes cf5-run{0%{offset-distance:0%; opacity:0;} 12%,88%{opacity:1;} 100%{offset-distance:100%; opacity:0;}}
@supports (anchor-name:--a){
  .cf5-ai .cf5-mk--a{anchor-name:--cf5-a;}
  .cf5-ai .cf5-mk--b{anchor-name:--cf5-b;}
  .cf5-ai .cf5-bz{anchor-name:--cf5-z;}
  .cf5-ai .cf5-duo:not(.is-js) .cf5-thr-n{display:block; position:absolute; z-index:3; pointer-events:none;
     left:calc(anchor(--cf5-a right) + 1px); right:anchor(--cf5-z left); top:anchor(--cf5-b center); bottom:anchor(--cf5-a center);}
  .cf5-thr-n svg{display:block; width:100%; height:100%; overflow:visible;}
  .cf5-thr-n path{fill:none; stroke:color-mix(in srgb, var(--cf-accent) 70%, transparent); stroke-width:2; stroke-linecap:round;}
}
@media (max-width:900px){
  .cf5-duo--ai{grid-template-columns:minmax(0,1fr);}
  .cf5-duo--ai>.cf5-tel{justify-self:center; width:100%; max-width:380px;}
  .cf5-ai .cf5-thp,.cf5-ai .cf5-thr-n,.cf5-ai .cf5-duo:not(.is-js) .cf5-thr-n,.cf5-duo.is-meas .cf5-thr__o,.cf5-duo.is-meas .cf5-thr__run{display:none;}
  .cf5-ai .cf5-thr-v{position:relative; display:block; justify-self:center; width:2px; height:48px; background:var(--line-strong);}
  .cf5-ai .cf5-thr-v .cf5-thr__d{left:-4px; top:-5px;}
  .cf5-ai:not(.is-arm) .cf5-thr-v,.cf5-ai.s4 .cf5-thr-v{background:color-mix(in srgb, var(--cf-accent) 55%, transparent);}
  .cf5-ai.is-arm.s4 .cf5-thr-v .cf5-thr__d{animation:cf5-run-d var(--r5-thr) var(--r3-io) 1 both;}
}
@media (max-width:760px){
  .cf5-ai .cf5-tel{padding:8px; border-radius:34px;}
  .cf5-ai .cf5-tel__h{border-radius:26px 26px 0 0;}
  .cf5-ai .cf5-tel__in{border-radius:0 0 26px 26px;}
  .cf5-ai .cf5-tel__c{padding:12px;}
}
/* низкий телефон (390×664): вопрос клиента обязан стоять в первом экране, приветствие бота и «Сегодня» уходят */
@media (max-width:760px) and (max-height:740px){ .cf5-ai .cf5-day,.cf5-ai .cf5-bub--old{display:none;} }
/* подпись под сценой ИИ: слева «Покажу вживую», справа оговорка и повтор */
.cf5-cap{margin-top:16px !important;}
.cf5-cap__live{margin:0; font-size:var(--r3-lab); line-height:1.35; color:var(--paper);}
.cf5-cap__r{display:flex; flex-wrap:wrap; align-items:center; gap:4px 24px;}
.cf5-cap__r p{margin:0;}

/* ── главы: CRM в ряд от 761, ИИ два плюс один на 761–900 (как на эталонах) ── */
.cf--r5 .cf5-sb--ai{margin-top:var(--r3-air);}
.cf5-sb__t{margin:0; font-size:var(--r3-lab); line-height:1.4; color:var(--paper);}
.cf5-sb__f{margin:0; padding-top:14px; border-top:1px solid var(--line); font-size:var(--r3-s); line-height:1.4; color:var(--dim);}
.cf5-sb__f b{color:var(--paper);}
@media (min-width:761px) and (max-width:899.98px){
  .cf5-sb .cf-chs__row{padding:34px 0 0; gap:var(--gp);}
  .cf5-sb--crm .cf-chs__row{grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1.3fr);}
  .cf5-sb .cf-ch{padding:22px 20px 26px;}
  .cf5-sb .cf-sb__nd{top:-30px; left:20px;}
  .cf5-sb .cf-sb__seg{top:-26px; left:25px; width:calc(100% + var(--gp)); height:2px;}
  .cf5-sb .cf-sb__fire{transform-origin:0 50%; background:linear-gradient(90deg, color-mix(in srgb, var(--cf-accent) 35%, transparent), var(--cf-accent));}
  .cf5-sb .cf-sb__dot{left:auto; right:-5px; top:50%; bottom:auto; margin:-5px 0 0;}
  .cf5-sb.is-arm:not(.is-go) .cf-sb__fire{transform:scaleX(0);}
  .cf5-sb.is-arm:not(.is-go) .cf-sb__run{transform:translateX(-100%);}
}
@media (min-width:761px) and (max-width:900px){
  .cf5-sb--ai .cf-chs__row{grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:34px 0 0; gap:var(--gp);}
  .cf5-sb--ai .cf-ch--now{grid-column:1 / -1;}
  .cf5-sb--ai .cf-ch:nth-child(2) .cf-sb__seg{display:none;}
  .cf5-sb--ai .cf-ch{padding:22px 20px 26px;}
}
@media (min-width:901px){ .cf5-sb--ai .cf-chs__row{grid-template-columns:minmax(0,.85fr) minmax(0,1.1fr) minmax(0,1.45fr);} }
@media (max-width:760px){ .cf--r5 .cf5-sb--crm{margin-top:40px;} .cf--r5 .cf5-sb--ai{margin-top:56px;} }   /* зазор подпись сцены → главы ≤72 (К5): у ИИ с 64 было 76–77 */

/* «Подробнее» сразу под главами (строки-паспорта нет), в «Как я это проверял» итог 11 из 11 первой строкой */
.cf--r5 .cf-more{margin-top:40px;}
@media (max-width:760px){ .cf--r5 .cf-more{margin-top:32px;} }

@media (prefers-reduced-motion:reduce){
  .cf--r3 *,.cf--r3 *::before,.cf--r3 *::after{transition-duration:1ms !important; animation-duration:1ms !important; transition-delay:0ms !important; animation-delay:0ms !important;}
}

/* 23.10.2026, разбор с телефона п. 9: база знаний ИИ на ≤767 показывает 4 строки из 6 (05.3, на которую опирается ответ, в них),
   остальные за кнопкой «Ещё 2 строки». Кнопку ставит case-frame.js (data-fold), без скрипта видны все строки. ≥768 как было */
.cf5-more-b{display:none;}
@media (max-width:767px){
  .cf5-bz__l.is-fold>li:nth-child(n+5){display:none;}
  .cf5-more-b{display:flex; align-items:center; gap:10px; width:100%; min-height:48px; margin:0; padding:0 16px; border:0; border-top:1px solid var(--line);
              background:none; color:var(--paper); font:600 15px/1.3 var(--ff-body); text-align:left; cursor:pointer;}
  .cf5-more-b::after{content:"+"; font-size:18px; line-height:1; color:var(--cf-accent);}
  .cf5-more-b[aria-expanded="true"]::after{content:"\2212";}
  .cf5-more-b:active{background:color-mix(in srgb, var(--paper) 8%, transparent);}
  .cf5-more-b:focus-visible{outline:2px solid var(--paper); outline-offset:-2px;}
}