/* ───────────────────────── тема: бумага, олива, антиква ───────────────── */
:root {
  --sc-canvas:      #F2EFE5;
  --sc-surface:     #FBFAF5;
  --sc-ink:         #2B2927;
  --sc-ink-soft:    #6E6963;
  --sc-accent:      #5E624B;
  --sc-accent-ink:  #F5F3EA;
  --sc-font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist", system-ui, sans-serif;
  --sc-track-tight:  -0.018em;
  --sc-track-snug:   -0.01em;
  --sc-leading-none: 1.04;
  --sc-maxw: 88rem;
  --sc-r-sm: 8px; --sc-r-md: 14px; --sc-r-lg: 24px;
  --sc-shadow-color: 75 18% 22%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.10), 0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.08);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.10), 0 10px 22px -6px hsl(var(--sc-shadow-color) / 0.16);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.08), 0 22px 44px -10px hsl(var(--sc-shadow-color) / 0.20), 0 50px 90px -30px hsl(var(--sc-shadow-color) / 0.18);
  --sc-edge: inset 0 1px 0 rgba(255,255,255,0.75);
  --sc-ink-page:      #2B2927;   /* чернила бумаги: нужны там, где секция переопределила --sc-ink на ночные */
  --sc-ink-soft-page: #6E6963;
  --night:      #182019;
  --night-ink:  #F2EFE5;
  --night-soft: #B7B5A4;
  --amber:      #F0B55A;
}
/* на больших экранах страница растёт целиком, а не тонет в полях */
@media (min-width: 1800px) { html { font-size: 18px; } }
@media (min-width: 2300px) { html { font-size: 20px; } }
@media (min-width: 2900px) { html { font-size: 23px; } }
.sc-grain { opacity: 0.035; }
.sc-display { font-weight: 400; }
.sc-display em { font-style: italic; font-weight: 400; }
.h2 { font-size: clamp(2.2rem, 1.4rem + 2.8vw, 3.8rem); }
.h3 { font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); letter-spacing: var(--sc-track-snug); }
main { position: relative; }
figure { margin: 0; }
p { margin: 0; }
.paint { mix-blend-mode: multiply; }   /* картины на бумаге: бумага на бумаге даёт бумагу */

/* ───────────────────────── тексты: слова для появления через motion ─────── */
.lv-w { display: inline-block; white-space: nowrap; will-change: transform, opacity, filter; }

/* ───────────────────────── развилка: ночь и бумага ────────────────────── */
html.is-try, html.is-try body { overflow: hidden; }
.fork { width: min(64rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); margin: auto; padding: 0; border: 0; border-radius: var(--sc-r-lg);
  background: var(--sc-surface); color: var(--sc-ink-page); box-shadow: var(--sc-e3); overflow: hidden; overscroll-behavior: contain; }
.fork::backdrop { background: rgba(28, 30, 22, 0.46); backdrop-filter: blur(6px); }
.fork[open] { animation: fork-in 420ms var(--sc-ease-out) both; }
.fork[open]::backdrop { animation: fork-veil 320ms ease-out both; }
@keyframes fork-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fork-veil { from { opacity: 0; } to { opacity: 1; } }
.fork__grid { display: grid; grid-template-columns: 11fr 10fr; min-height: 31rem; }
.fork__x { position: absolute; z-index: 2; top: 1.1rem; right: 1.1rem; width: 2.4rem; height: 2.4rem; padding: 0; border: 0; border-radius: 50%;
  background: color-mix(in oklab, var(--sc-surface) 70%, transparent); color: var(--sc-ink-soft-page); cursor: pointer; display: grid; place-items: center;
  transition: background-color var(--sc-d-fast), color var(--sc-d-fast); }
.fork__x:hover { background: var(--sc-surface); color: var(--sc-ink-page); }
.fork__x svg { width: 1rem; height: 1rem; }
/* ночь: окошко с лампой, текст сверху вровень с бумагой, лампа внизу на свету */
.fork__night { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-start; gap: .9rem;
  padding: 3.6rem 2.8rem 2.6rem; color: var(--night-ink); background: var(--night); isolation: isolate; }
.fork__art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 60%; transform: scale(1.22); transform-origin: 60% 60%; }   /* картина крупнее блока: её бумажная кромка за краем */
.fork__veil { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(24,32,25,.90) 0%, rgba(24,32,25,.72) 48%, rgba(24,32,25,.22) 100%); }
.fork__k { margin: 0; font-size: var(--sc-t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--night-soft); }
.fork__h { margin: 0; font-size: clamp(2rem, 1.4rem + 1.8vw, 3rem); line-height: 1.04; letter-spacing: var(--sc-track-tight); }
.fork__p { margin: 0; max-width: 26rem; font-size: var(--sc-t-base); line-height: 1.45; color: var(--night-soft); }
.fork__act { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-top: .6rem; }
.fork__night .btn { background: var(--night-ink); color: var(--night); box-shadow: 0 8px 24px -8px rgba(0,0,0,.6); }
.fork__night .btn:hover { background: #fff; }
.fork__meta { font-size: var(--sc-t-xs); color: var(--night-soft); }
/* бумага: текст сверху, вход прижат к низу */
.fork__paper { display: flex; flex-direction: column; gap: .9rem; padding: 3.6rem 3rem 2.6rem; }
.fork__paper .fork__k { color: var(--sc-ink-soft-page); }
.fork__paper .fork__p { color: var(--sc-ink-soft-page); }
.fork__paper .fork__meta { color: var(--sc-ink-soft-page); }
.fork__paper .btn--ghost { background: transparent; }
.fork__ul { margin: .4rem 0 0; padding: 0; list-style: none; display: grid; gap: .55rem; font-size: var(--sc-t-sm); color: var(--sc-ink-page); }
.fork__ul li { display: flex; gap: .7rem; align-items: baseline; }
.fork__ul li::before { content: ""; flex: none; width: .95rem; height: 1px; background: var(--sc-hairline-strong); transform: translateY(-.28em); }
.fork__in { margin: auto 0 0; padding-top: 1.6rem; font-size: var(--sc-t-sm); color: var(--sc-ink-soft-page); }
.fork__in a { color: var(--sc-ink-page); text-underline-offset: .2em; }
@media (max-width: 860px) and (orientation: portrait) {
  .fork { width: calc(100% - 1rem); margin-bottom: .5rem; max-height: calc(100dvh - 1rem); overflow: auto; }
  .fork__grid { grid-template-columns: 1fr; min-height: 0; }
  .fork__night { min-height: 21rem; padding: 2.4rem 1.5rem 1.8rem; }
  .fork__art { object-position: 60% 30%; }
  .fork__paper { padding: 2rem 1.5rem 1.6rem; }
  .fork__in { padding-top: 1.2rem; }
  .fork__x { background: rgba(24,32,25,.45); color: var(--night-ink); }
}
@media (prefers-reduced-motion: reduce) { .fork[open], .fork[open]::backdrop { animation: none; } }

/* ───────────────────────── кнопки ─────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.6rem; border-radius: var(--sc-r-sm);
  font-weight: 500; font-size: var(--sc-t-sm); line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast), box-shadow var(--sc-d-fast), border-color var(--sc-d-fast);
}
.btn--primary { background: var(--sc-accent); color: var(--sc-accent-ink); box-shadow: var(--sc-e1), inset 0 1px 0 rgba(255,255,255,0.18); }
.btn--primary:hover { background: #4E523D; box-shadow: var(--sc-e2), inset 0 1px 0 rgba(255,255,255,0.18); }
.btn--ghost { background: var(--sc-surface); color: var(--sc-ink); border-color: var(--sc-hairline-strong); box-shadow: var(--sc-e1); }
.btn--ghost:hover { border-color: color-mix(in oklab, var(--sc-ink) 40%, transparent); }
.btn--lg { padding: 1.1rem 1.9rem; font-size: var(--sc-t-base); }
.btn--sm { padding: .62rem 1.05rem; }
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-1px); } }
.btn:active { transform: translateY(1px); }

/* ───────────────────────── окно приложения ─────────────────────────────── */
.win {
  background: var(--sc-surface); color: var(--sc-ink); border-radius: var(--sc-r-md);
  border: 1px solid color-mix(in oklab, var(--sc-ink) 9%, transparent);
  box-shadow: var(--sc-e3), var(--sc-edge); font-size: .86rem; line-height: 1.45; overflow: hidden;
}
.win__bar { display: flex; align-items: center; gap: .8rem; padding: .7rem 1rem; border-bottom: 1px solid var(--sc-hairline); background: color-mix(in oklab, var(--sc-ink) 2.5%, var(--sc-surface)); }
.win__dots { display: inline-flex; gap: 5px; }
.win__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--sc-hairline-strong); }
.win__title { font-weight: 500; }
.win__meta { margin-left: auto; color: var(--sc-ink-soft); font-size: .78rem; }
.win__body { padding: 1.1rem 1.2rem; }
.win__input { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0 1.2rem 1.1rem; padding: .6rem .5rem .6rem .9rem; border-radius: 10px; border: 1px solid var(--sc-hairline-strong); color: var(--sc-ink-soft); }
.win__input b { font-weight: 500; color: var(--sc-accent-ink); background: var(--sc-accent); padding: .4rem .8rem; border-radius: 6px; font-size: .78rem; }
.bub { padding: .6rem .8rem; border-radius: 12px; max-width: 86%; margin-bottom: .55rem; }
.bub--in { background: color-mix(in oklab, var(--sc-ink) 6%, transparent); border-bottom-left-radius: 4px; }
.bub--out { background: color-mix(in oklab, var(--sc-accent) 14%, transparent); margin-left: auto; border-bottom-right-radius: 4px; }
.bub time { display: block; font-size: .68rem; color: var(--sc-ink-soft); margin-top: .25rem; }
.typing { display: inline-flex; gap: 4px; padding: .55rem .7rem; border-radius: 12px; background: color-mix(in oklab, var(--sc-accent) 14%, transparent); margin: 0 0 .55rem auto; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--sc-accent); opacity: .5; animation: blink 1.1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .18s; } .typing i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.chat__status { display: flex; align-items: center; gap: .5rem; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: #4A4E3A; margin-top: .2rem; }
.chat__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sc-accent); }
.badge { padding: .12rem .5rem; border-radius: 999px; background: color-mix(in oklab, var(--amber) 30%, transparent); color: #6B4A12; font-size: .72rem; }
.k { display: flex; align-items: center; gap: .5rem; font-size: .74rem; color: var(--sc-ink-soft); margin-bottom: .55rem; }
.k b { font-weight: 500; font-size: .84rem; color: var(--sc-ink); }
.k .r { margin-left: auto; }
.q { font-weight: 500; font-size: .95rem; margin-bottom: .5rem; }
.ctx p { color: var(--sc-ink-soft); margin-bottom: .3rem; }
.ctx b { color: var(--sc-ink); font-weight: 500; }
.opts { display: flex; gap: .4rem; flex-wrap: wrap; margin: .6rem 0; }
.opt { padding: .35rem .65rem; border-radius: 999px; border: 1px solid var(--sc-hairline-strong); background: var(--sc-surface); font-size: .76rem; color: var(--sc-ink); }
.opt--yes { background: var(--sc-accent); color: var(--sc-accent-ink); border-color: transparent; }
.compose { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: 8px; border: 1px solid var(--sc-hairline-strong); color: var(--sc-ink-soft); font-size: .76rem; }
.compose b { color: var(--sc-accent); font-weight: 500; }
.ans { padding: .6rem .8rem; border-radius: 8px; background: color-mix(in oklab, var(--sc-ink) 5%, transparent); margin-bottom: .5rem; }
.ans b { display: block; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; color: var(--sc-ink-soft); margin-bottom: .15rem; font-weight: 500; }
.ans--sent { background: color-mix(in oklab, var(--sc-accent) 14%, transparent); }
.diff { margin: .5rem 0; padding: .55rem .75rem; border-radius: 8px; background: color-mix(in oklab, #7BAA6A 22%, transparent); color: #2E4A28; font-size: .76rem; }
.diff p { margin: 0 0 .15rem; }
.acts { display: flex; gap: .45rem; justify-content: flex-end; }

/* ───────────────────────── шапка ──────────────────────────────────────── */
.bar { position: fixed; inset-inline: 0; top: 0; z-index: var(--sc-z-chrome); padding: 12px var(--sc-gutter); pointer-events: none; }
.bar__inner { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: var(--sc-maxw); margin-inline: auto; padding: .45rem .55rem .45rem 1rem; pointer-events: auto; }
.bar__inner::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--sc-r-pill);
  background: color-mix(in oklab, var(--sc-canvas) 80%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--sc-hairline); box-shadow: var(--sc-e2), var(--sc-edge);
  opacity: 0; clip-path: inset(0 0 round var(--sc-r-pill));
  transition: opacity 260ms var(--sc-ease-out), clip-path 520ms var(--sc-ease-drawer);
}
.bar.is-shrunk .bar__inner::before { opacity: 1; clip-path: inset(0 var(--bar-shift, 0px) round var(--sc-r-pill)); }
/* открытая шторка — лист, а не стекло: сквозь 80% бумаги просвечивал текст страницы */
.bar.is-open .bar__inner::before { opacity: 1; background: color-mix(in oklab, var(--sc-canvas) 97%, transparent); }
.bar__mark { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--sc-ink); font-family: var(--sc-font-display); font-size: 1.35rem; letter-spacing: -0.01em; }
.bar__dot { width: .62rem; height: .62rem; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px color-mix(in oklab, var(--amber) 22%, transparent); }
.bar__nav { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; gap: 1.6rem; }
.bar__nav a { text-decoration: none; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); transition: color var(--sc-d-fast); }
.bar__nav a:hover { color: var(--sc-ink); }
/* переключатель языка: последний пункт разделов, отбит волосяной линией */
.bar__nav .bar__lang { padding-left: 1.6rem; border-left: 1px solid var(--sc-hairline-strong); letter-spacing: .04em; }
/* узкий десктоп: по центру разделам с языком тесно рядом с длинной русской
   кнопкой, поэтому они встают вплотную к ней и едут вместе с ней при сжатии */
@media (min-width: 861px) and (max-width: 1080px) {
  html[lang="ru"] .bar__nav { position: static; translate: none; margin-left: auto; gap: 1.2rem; transition: transform 520ms var(--sc-ease-drawer); }
  html[lang="ru"] .bar__nav .bar__lang { padding-left: 1.2rem; }
  html[lang="ru"] .bar.is-shrunk .bar__nav { transform: translateX(calc(var(--bar-shift, 0px) * -1)); }
}
.bar__menu-nav .bar__lang { margin-top: .35rem; border-top: 1px solid var(--sc-hairline); border-radius: 0; color: var(--sc-ink-soft); }
.bar__mark, .bar__cta { transition: transform 520ms var(--sc-ease-drawer); }
.bar.is-shrunk .bar__mark { transform: translateX(var(--bar-shift, 0px)); }
.bar.is-shrunk .bar__cta  { transform: translateX(calc(var(--bar-shift, 0px) * -1)); }
/* Телефон: у Vestris в шапке остаются только знак и бургер, а разделы и кнопка
   переезжают в шторку. Пилюля шапки при этом не заводит второй компонент —
   она сама вырастает в лист: та же подложка, тот же блюр, другой радиус. */
.sc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.bar__burger { display: none; position: relative; width: 2.4rem; height: 2.4rem; padding: 0; border: 1px solid var(--sc-hairline-strong); border-radius: 10px;
  background: color-mix(in oklab, var(--sc-surface) 75%, transparent); color: var(--sc-ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* палец попадает по 46 px, хотя нарисована кнопка 38 */
.bar__burger::after { content: ""; position: absolute; inset: -4px; }
.bar__burger-i, .bar__burger-i::before, .bar__burger-i::after { position: absolute; left: 50%; width: 1.05rem; height: 1.5px; margin-left: -.525rem; border-radius: 2px; background: currentColor; }
.bar__burger-i { top: 50%; margin-top: -.75px; transition: background-color 160ms var(--sc-ease-out); }
.bar__burger-i::before, .bar__burger-i::after { content: ""; left: 0; margin-left: 0; transition: transform 320ms var(--sc-ease-drawer); }
.bar__burger-i::before { top: -5px; } .bar__burger-i::after { top: 5px; }
.bar.is-open .bar__burger-i { background: transparent; }
.bar.is-open .bar__burger-i::before { transform: translateY(5px) rotate(45deg); }
.bar.is-open .bar__burger-i::after  { transform: translateY(-5px) rotate(-45deg); }
/* шторка: строка сетки 0fr → 1fr, поэтому высота едет сама и без замеров */
.bar__menu { display: none; flex-basis: 100%; grid-template-rows: 0fr; transition: grid-template-rows 380ms var(--sc-ease-drawer), visibility 380ms; visibility: hidden; }
.bar__menu-in { overflow: hidden; min-height: 0; }
.bar.is-open .bar__menu { grid-template-rows: 1fr; visibility: visible; }
.bar__menu-nav { display: grid; padding: .9rem .35rem .2rem; }
.bar__menu-nav a { padding: .72rem .55rem; border-radius: 8px; text-decoration: none; color: var(--sc-ink); font-size: var(--sc-t-base); }
.bar__menu-nav a:active { background: color-mix(in oklab, var(--sc-ink) 6%, transparent); }
.bar__menu .btn { margin: .55rem .35rem .35rem; }
/* Телефон: шапка не кладёт бумажную плиту поперёк экрана — подложку получают
   только знак и бургер, между ними видна страница. Плита остаётся ровно там,
   где она и есть шапка: листом открытой шторки. Знак и бургер держат свою
   подложку с блюром, потому что под шапкой проезжают ночная панель и картины:
   без неё чернила знака и линии бургера тонут в краске. */
@media (max-width: 860px) {
  .bar { padding: max(8px, env(safe-area-inset-top)) var(--sc-gutter) 8px; }
  .bar__nav, .bar__cta { display: none; }
  .bar__burger { display: block; }
  .bar__menu { display: grid; }
  /* перенос строк нужен шторке, но gap: 1rem от него добавлял пустую строку
     под знаком: шапка была на 16 px выше, чем выглядела */
  .bar__inner { flex-wrap: wrap; row-gap: 0; padding: .3rem .38rem; }
  /* is-shrunk сильнее по специфичности, чем голый .bar__inner::before:
     без него при прокрутке на телефоне вылезала плита на всю ширину */
  .bar__inner::before, .bar.is-shrunk .bar__inner::before { opacity: 0; }
  .bar.is-open .bar__inner::before { opacity: 1; border-radius: 18px; clip-path: inset(0 round 18px); }
  .bar.is-open .bar__mark, .bar.is-open .bar__cta { transform: none; }

  .bar__mark { position: relative; isolation: isolate; font-size: 1.15rem; margin-left: -.35rem; padding: .34rem .85rem .34rem .6rem; border-radius: var(--sc-r-pill); }
  .bar__mark::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: var(--sc-r-pill);
    background: color-mix(in oklab, var(--sc-canvas) 84%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border: 1px solid var(--sc-hairline);
    opacity: 0; transition: opacity 260ms var(--sc-ease-out);
  }
  .bar.is-shrunk .bar__mark::before { opacity: 1; }
  .bar.is-open .bar__mark::before { opacity: 0; }
  .bar__dot { width: .52rem; height: .52rem; box-shadow: 0 0 0 2px color-mix(in oklab, var(--amber) 20%, transparent); }

  .bar__burger { width: 2.15rem; height: 2.15rem; border-radius: 9px; border-color: var(--sc-hairline);
    background: color-mix(in oklab, var(--sc-canvas) 84%, transparent);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .bar__burger::after { inset: -5px; }
  /* только толщина и длина линий: сдвиг margin-left принадлежит средней
     палочке, у крайних он свой (left: 0) и трогать его нельзя */
  .bar__burger-i { width: .95rem; margin-left: -.475rem; height: 1.4px; margin-top: -.7px; }
  .bar__burger-i::before, .bar__burger-i::after { width: .95rem; height: 1.4px; }
}

/* ───────────────────────── 1 · открытие: hero и окно продукта под одним небом ── */
/* Один акт на hero и панель: листва входит из-за краёв экрана и отстаёт от
   страницы через оба блока, как у Vestris. Кромка панели видна на первом
   экране и тянет скролл. Картинки обрезаны краем экрана, не краем картинки:
   их край совпадает с краем окна, а к верху и низу листва сходит на бумагу. */
.opening { position: relative; overflow-x: clip; padding-bottom: var(--sc-section); }
/* Листва входит из-за краёв экрана и лежит поверх панели, как у Vestris, но под
   текстом hero и за окном ОС: докуда бы ветка ни дотянулась, она уходит за
   кадр интерфейса, а не наползает на него. Параллакс: CSS-анимация по таймлайну скролла, её ведёт композитор
   синхронно со страницей. Никакого JS и сглаживания: свой ритм у слоя читался
   как дёрганье рядом с нативным скроллом. --lag: сколько слой отдаёт странице
   на первых 2400px прокрутки (720px = едет на 70% скорости). */
.opening__bush { position: absolute; z-index: 2; pointer-events: none; height: auto; }
.opening__bush--l { left: -2vw; top: 4.5rem; width: clamp(190px, 26.5vw, 570px); --lag: 720px; }
.opening__bush--r { right: 0; top: 13rem; width: clamp(170px, 24vw, 520px); --lag: 480px; }
@supports (animation-timeline: scroll()) {
  .opening__bush { animation: bush-lag linear both; animation-timeline: scroll(root block); animation-range: 0px 2400px; will-change: transform; }
  @keyframes bush-lag { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, var(--lag), 0); } }
}
.hero { position: relative; z-index: 3; display: grid; place-items: center; padding: 7.5rem 0 3.25rem; }
.hero__inner { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.6rem; max-width: 72rem; }
.hero__title { position: relative; width: fit-content; font-size: clamp(2.5rem, 1.4rem + 4vw, 5rem); line-height: 1.06; max-width: 16em; padding-inline: .8em; }
.hero__title .paren { position: absolute; top: 50%; translate: 0 -50%; color: var(--sc-ink-soft); opacity: .5; font-size: 1.15em; line-height: 1; }
.hero__title .paren:first-child { left: 0; } .hero__title .paren:last-child { right: 0; }
.hero__lede { color: var(--sc-ink-soft); max-width: 44ch; font-size: clamp(1rem, .95rem + .35vw, 1.2rem); }
@media (max-width: 860px) {
  .hero { padding-top: 6.5rem; }
  .hero__title { font-size: clamp(2.1rem, 1.2rem + 5.4vw, 3rem); max-width: 14ch; padding-inline: 0; }
  .hero__title .paren { display: none; }
  .opening__bush { z-index: 0; }
  .opening__bush--l { width: 35vw; left: -17vw; top: 5rem; --lag: 420px; }
  .opening__bush--r { width: 34vw; right: -12vw; top: 50vh; --lag: 300px; }
  .win--console .win__meta { display: none; }
  .hero__lede { padding-inline: 1.2rem; }
}

@media (min-width: 861px) and (max-height: 820px) { .hero { padding: 6.25rem 0 2.25rem; } .hero__inner { gap: 1.2rem; } }

/* ───────────────────────── 2 · продукт: окно оператора на ночном небе ──── */
/* Панель без своего z-index: иначе она стала бы стопкой слоёв и окно ОС
   внутри неё не смогло бы подняться над листвой. Порядок в акте:
   панель с небом (auto, по порядку в разметке) → листва (2) → окно ОС (3).
   Листва лежит на небе панели, но уходит ЗА окно, как у Vestris: интерфейс —
   предмет поверх мира, а не в его гуще. */
.wash { position: relative; display: grid; place-items: center; padding: clamp(2rem, 4vw, 3.5rem) 0; width: min(100% - 2 * var(--sc-gutter), 78rem); margin-inline: auto; min-height: min(50vw, 39rem); border-radius: var(--sc-r-lg); overflow: hidden; background: #3A4868; box-shadow: var(--sc-e2); }
.wash__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sec-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; margin-bottom: clamp(1.5rem, 3vw, 3rem); }
.sec-head .sc-lede { color: var(--sc-ink-soft); max-width: 52ch; }
.opening .sec-head { position: relative; z-index: 1; margin: clamp(2.5rem, 4vw, 4rem) auto 0; }
/* Окно ОС: матовое стекло поверх неба, три точки и заголовок, как рамка
   скриншота у Vestris. Появляется через motion (inView + animate), см. скрипт. */
.os { position: relative; z-index: 3; width: min(54rem, 94%); padding: .45rem; border-radius: 18px;
  background: color-mix(in srgb, #FBFAF5 42%, transparent); border: 1px solid rgba(255,255,255,.42);
  box-shadow: var(--sc-e3), inset 0 1px 0 rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(22px) saturate(1.1); backdrop-filter: blur(22px) saturate(1.1); }
.os__bar { position: relative; display: flex; align-items: center; height: 2rem; padding: 0 .55rem; }
.os__dots { display: inline-flex; gap: 6px; }
.os__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(43,41,39,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.os__title { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font-size: .7rem; letter-spacing: .01em; color: rgba(43,41,39,.62); background: rgba(255,255,255,.38); padding: .18rem .75rem; border-radius: 999px; white-space: nowrap; }
.os .win { box-shadow: 0 1px 2px rgba(20,20,10,.06); border-color: rgba(43,41,39,.1); border-radius: 12px; }
/* окно оператора: диалоги слева, переписка справа */
.win--console { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: 16rem minmax(0, 1fr); font-size: .78rem; line-height: 1.4; text-align: left; }
.con__list { min-width: 0; border-right: 1px solid var(--sc-hairline); background: color-mix(in oklab, var(--sc-ink) 2%, var(--sc-surface)); padding-bottom: .3rem; }
.con__head { display: flex; align-items: baseline; gap: .5rem; padding: .74rem 1rem; border-bottom: 1px solid var(--sc-hairline); font-size: .92rem; }
.con__head b { font-weight: 600; }
.con__count { color: var(--sc-ink-soft); font-size: .7rem; }
.con__search { margin: .7rem 1rem .6rem; padding: .4rem .7rem; border-radius: 8px; border: 1px solid var(--sc-hairline-strong); color: color-mix(in oklab, var(--sc-ink-soft) 65%, transparent); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.con__tabs { display: flex; gap: .9rem; padding: 0 1rem .5rem; font-size: .72rem; color: var(--sc-ink-soft); border-bottom: 1px solid var(--sc-hairline); }
.con__tabs .is-on { color: var(--sc-ink); font-weight: 500; text-decoration: underline; text-underline-offset: .5rem; text-decoration-thickness: 2px; }
.con__items { list-style: none; margin: 0; padding: .3rem 0 0; }
.con__item { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); gap: .6rem; align-items: start; padding: .5rem 1rem; }
.con__item.is-active { background: color-mix(in oklab, var(--sc-accent) 12%, transparent); box-shadow: inset 3px 0 0 var(--sc-accent); }
.con__item > div { min-width: 0; }
.con__ava { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--c, var(--sc-accent)); color: #fff; font: 600 .7rem/1 var(--sc-font-text); font-style: normal; }
.con__row { display: flex; justify-content: space-between; gap: .5rem; }
.con__row b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.con__row time { color: var(--sc-ink-soft); font-size: .68rem; flex: none; }
.con__item p { color: var(--sc-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .74rem; }
.con__wait { display: block; color: #B0751C; font-size: .68rem; margin-top: .12rem; }
.con__chat { display: flex; flex-direction: column; min-width: 0; }
.con__status { display: inline-flex; align-items: center; gap: .45rem; font-weight: 500; }
.con__status i { width: 7px; height: 7px; border-radius: 50%; background: var(--sc-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-accent) 20%, transparent); }
.con__body { flex: 1; padding: .9rem 1.2rem .4rem; display: flex; flex-direction: column; }
.con__day { align-self: center; font-size: .66rem; color: var(--sc-ink-soft); background: color-mix(in oklab, var(--sc-ink) 5%, transparent); padding: .2rem .6rem; border-radius: 999px; margin-bottom: .7rem; }
.bub__who { display: block; font-size: .66rem; color: var(--sc-accent); margin-bottom: .15rem; font-weight: 500; }
.win--console .bub { max-width: 80%; }
.con__mode { display: inline-flex; gap: .2rem; margin: .2rem 1.2rem .45rem; padding: .16rem; border-radius: 999px; background: color-mix(in oklab, var(--sc-ink) 5%, transparent); font-size: .7rem; color: var(--sc-ink-soft); align-self: flex-start; }
.con__mode span { padding: .26rem .7rem; border-radius: 999px; }
.con__mode .is-on { background: var(--sc-surface); color: var(--sc-ink); box-shadow: var(--sc-e1); }
.win--console .win__input { margin: 0 1.2rem 1.1rem; }
@media (max-width: 860px) {
  .opening { padding-bottom: calc(var(--sc-section) * .7); }
  /* Небо — рама окна, а не кант: у Vestris на телефоне карточка интерфейса
     стоит в картине с полями, а не враспор. Поля даёт сама панель. */
  .wash { padding: 2.4rem 1.1rem; width: calc(100% - 2 * var(--sc-gutter)); }
  .os { width: 100%; padding: .3rem; border-radius: 14px; }
  .os__bar { height: 1.7rem; }
  .os .win { border-radius: 10px; }
  .win--console { grid-template-columns: minmax(0, 1fr); font-size: .76rem; }
  .con__list, .con__mode { display: none; }
}

/* ───────────────────────── 3 · пик: окошко лавки ночью ─────────────────── */
/* стейдж изолирован по z-index, поэтому multiply нужна бумага прямо под ним */
.counter__stage { display: grid; align-items: center; padding-top: 4rem; background: var(--sc-canvas); }
.counter__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 5rem); align-items: center; max-width: 96rem; }
/* шаги лежат стопкой в одной ячейке грида: контейнер тянется по самому
   высокому, поэтому текст не вылезает и соседние блоки не прыгают */
.steps { list-style: none; margin: 0; padding: 0; display: grid; }
.step { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; gap: 1rem; max-width: 36rem; }
.step__k { font-size: var(--sc-t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.step .sc-body { color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.5; }
/* ширина картины завязана на svh, поэтому карточку меряем по самой картине:
   .frame — контейнер, всё внутри в cqw/em и масштабируется вместе с ней */
.frame { position: relative; width: 100%; max-width: min(46rem, 70svh); margin-inline: auto; container-type: inline-size; }
.frame__bg { display: block; width: 100%; height: auto; }
.frame__glow { position: absolute; z-index: 1; left: var(--lamp-x); top: var(--lamp-y); width: 55%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,190,90,.30), rgba(255,170,60,.10) 40%, transparent 70%); mix-blend-mode: screen;
  opacity: calc(.2 + var(--sc-p, 0) * .8); }
.frame__cards { position: absolute; inset: 0; z-index: 2; }
/* окно ОС в проёме. Якорь по верхней кромке: карточки разной высоты, и при
   якоре по низу шапка прыгала на всю разницу */
/* низ окна стоит на подоконнике, высота — по содержимому карточки:
   коробка фиксированной высоты обязана быть в рост самой большой из трёх
   и поэтому уезжала на крышу */
/* 31% подобраны так, чтобы центр окна совпал с центром картины: сетка
   центрирует картину, и при более низкой посадке окно уезжало вниз от
   текстовой колонки тем сильнее, чем крупнее экран */
.frame__cards .os { position: absolute; left: 50%; bottom: 31%; translate: -50% 0; width: 62cqw; padding: .7cqw; border-radius: 2.2cqw; }
.frame__cards .os__bar { height: 4.2cqw; padding: 0 1.1cqw; }
.frame__cards .os__dots { gap: .8cqw; }
.frame__cards .os__dots i { width: 1.4cqw; height: 1.4cqw; }
.frame__cards .os__title { font-size: 1.75cqw; padding: .28cqw 1.5cqw; }
/* картина ночная: светлое матовое стекло из секции 2 даёт на ней 1:1 по
   контрасту, поэтому здесь рамка окна тёмная, а заголовок светлый */
.frame__cards .os { color: var(--night-ink); background: color-mix(in srgb, var(--night) 52%, transparent); border-color: rgba(255,255,255,.20); box-shadow: var(--sc-e3), inset 0 1px 0 rgba(255,255,255,.16); }
.frame__cards .os__dots i { background: rgba(242,239,229,.30); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.frame__cards .os__title { color: rgba(242,239,229,.88); background: color-mix(in srgb, var(--night) 40%, transparent); }
.frame__cards .os .win { border-radius: 1.6cqw; }
.card { font-size: clamp(.5rem, 2.35cqw, .82rem); box-shadow: 0 22px 44px -14px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.2), var(--sc-edge); }
/* внутренности — в em от кегля карточки, иначе при масштабировании поедут */
/* тело на всю высоту окна: строка действий прижата к нижней кромке,
   как композер в окне оператора, — пустота внизу перестаёт читаться дырой */
.card .win__body { display: flex; flex-direction: column; height: 100%; padding: 1.25em 1.4em; }
.card .compose, .card .acts, .card .chat__status { margin-top: auto; }
.card .chat__status { font-size: .85em; }
.card .k { font-size: .9em; gap: .6em; margin-bottom: .67em; }
.card .k b { font-size: 1.14em; }
.card .badge { font-size: .88em; padding: .15em .6em; }
.card .q { font-size: 1.16em; margin-bottom: .6em; }
.card .ctx p { margin-bottom: .37em; }
.card .opts { gap: .5em; margin: .73em 0; }
.card .opt { font-size: .93em; padding: .43em .8em; }
.card .compose { font-size: .93em; gap: .73em; padding: .61em .85em; border-radius: .6em; }
.card .ans { padding: .73em .98em; margin-bottom: .61em; border-radius: .6em; }
.card .ans b { font-size: .83em; margin-bottom: .18em; }
.card .diff { font-size: .93em; padding: .67em .91em; margin: .61em 0; border-radius: .6em; }
.card .diff p { margin-bottom: .19em; }
.card .acts { gap: .55em; }
/* режем содержимое по ширине картины, а не вьюпорта: низкое широкое окно
   сжимает картину так же, как узкий телефон */
/* узкая картина заставляет текст переноситься сильнее, поэтому окну там
   отдаём больше высоты и одновременно режем необязательное */
@container (max-width: 34rem) { .card .ctx { display: none; } .card--kb .diff p:nth-child(n+4) { display: none; } }
/* мотылёк садится на лампу, а на узкой картине окно её закрывает: уводим
   кнопки из-под точки посадки, она у правой кромки окна */
@container (max-width: 34rem) { .card .acts { justify-content: flex-start; } }
@container (max-width: 26rem) { .card--kb .diff p:nth-child(n+3) { display: none; } .card--q .opts { display: none; } .card .k .r { display: none; } }
@media (max-width: 860px) {
  .counter__stage { padding-top: 4.2rem; align-items: start; }
  .counter__grid { grid-template-columns: 1fr; gap: .6rem; align-items: start; }
  .frame { max-width: min(100%, 48svh); order: -1; }
  .step { gap: .5rem; }
  .step .h3 { font-size: 1.4rem; }
  .step .sc-body { font-size: var(--sc-t-sm); }
}

/* ───────────────────────── 4 · аналитика на рассветном небе ───────────── */
.product { padding-top: var(--sc-section); }
.sc-wrap--wide { max-width: 96rem; }
.skybox { position: relative; overflow: hidden; border-radius: var(--sc-r-lg); aspect-ratio: 16 / 10; min-height: 34rem; background: #CBD7E0; box-shadow: var(--sc-e3); }
.skybox__bg, .skybox__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.skybox__bush { position: absolute; z-index: 2; pointer-events: none; height: auto; }
.skybox__bush--l { left: -4%; bottom: -8%; width: clamp(160px, 20vw, 360px); }
.skybox__bush--r { right: -5%; top: -10%; width: clamp(150px, 18vw, 320px); transform: scaleX(-1); }
/* Аналитика живёт в той же рамке ОС, что и окно оператора: рамка держит
   положение в картинке и порядок слоёв (листва на картинке, но за интерфейсом),
   панель внутри — обычное окно приложения. */
.os--panel { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(62rem, 88%); }
.panel { width: 100%; }
.panel__range { margin-left: auto; display: inline-flex; gap: 2px; padding: 2px; border-radius: 6px; background: color-mix(in oklab, var(--sc-ink) 5%, transparent); font-size: .74rem; }
.panel__range span { padding: .2rem .55rem; border-radius: 4px; color: var(--sc-ink-soft); }
.panel__range .on { background: var(--sc-surface); color: var(--sc-ink); box-shadow: var(--sc-e1); }
.panel__body { display: grid; grid-template-columns: 1.05fr 1fr; gap: 1.1rem 2rem; padding: 1.2rem 1.4rem 1.3rem; }
.panel__hero { display: flex; align-items: baseline; gap: .7rem; grid-column: 1 / -1; }
.panel__num { font-family: var(--sc-font-display); font-size: 3.2rem; line-height: 1; letter-spacing: -0.02em; }
.panel__cap { color: var(--sc-ink-soft); }
.seg { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.seg li { display: grid; grid-template-columns: 9.5rem 1fr 2.6rem; align-items: center; gap: .7rem; }
.seg__bar { height: 6px; border-radius: 3px; background: color-mix(in oklab, var(--sc-ink) 8%, transparent); overflow: hidden; }
.seg__bar i { display: block; height: 100%; background: var(--sc-accent); border-radius: 3px; transform-origin: 0 50%; transform: scaleX(0); transition: transform 1100ms var(--sc-ease-out) 200ms; }
.seg.sc-in .seg__bar i { transform: scaleX(var(--w)); }
.seg b { font-weight: 500; text-align: right; }
.panel__sec { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--sc-ink-soft); margin-top: .4rem; }
.rows, .touch { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.rows li { display: grid; grid-template-columns: 1fr auto auto; gap: .7rem; align-items: center; padding: .5rem .7rem; border-radius: 8px; background: color-mix(in oklab, var(--sc-ink) 4%, transparent); }
.st { font-size: .72rem; padding: .15rem .5rem; border-radius: 999px; background: color-mix(in oklab, var(--sc-ink) 8%, transparent); color: var(--sc-ink-soft); }
.st--open { background: color-mix(in oklab, var(--amber) 28%, transparent); color: #6B4A12; }
.wait { color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.touch li { color: var(--sc-ink-soft); line-height: 1.45; }
.touch b { color: var(--sc-ink); font-weight: 500; }
.panel__bridge { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem .9rem; border-radius: 8px; background: color-mix(in oklab, var(--sc-accent) 12%, transparent); }
.panel__bridge a { color: var(--sc-accent); font-weight: 500; text-decoration: none; }
.panel__bridge a:hover { text-decoration: underline; }
/* Пока картинка узкая, её высота считается от ширины, и рамка с панелью в неё
   не влезает — как раньше окно ОС не влезало в .wash. На таких экранах панель
   встаёт в поток по центру, а картинка растёт под неё. */
@media (max-width: 1100px) {
  .skybox { aspect-ratio: auto; min-height: 0; display: grid; place-items: center; padding: clamp(1.4rem, 3vw, 2.4rem) 0; }
  .os--panel { position: static; translate: none; }
}
/* Цена стоит под кадром на бумаге отдельным тактом: заголовок в дисплейной
   гарнитуре держит её как самостоятельный блок, а не подпись к картинке. */
.price { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(1.6rem, 4vw, 4rem); margin-top: clamp(2.6rem, 5vw, 4.5rem); scroll-margin-top: 7rem; }
.price > div:first-child { max-width: 46rem; }
.price .sc-body { max-width: 62ch; color: var(--sc-ink-soft); line-height: 1.55; }
.price__line { font-family: var(--sc-font-display); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); line-height: 1.2; margin-bottom: .7rem; }
.price__acts { display: flex; justify-content: flex-end; gap: .7rem; flex-wrap: wrap; }
@media (max-width: 860px) {
  .skybox { border-radius: 18px; padding: 1.2rem 1.1rem; }
  .os--panel { width: 100%; } .panel { font-size: .8rem; }
  .panel__body { grid-template-columns: 1fr; gap: .9rem; padding: 1rem; }
  .panel__num { font-size: 2.6rem; }
  .touch, .panel__sec--touch { display: none; }
  .seg li { grid-template-columns: 8rem 1fr 2.4rem; }
  .skybox__bush--l { width: 36vw; } .skybox__bush--r { width: 32vw; }
  .price { grid-template-columns: 1fr; gap: 1.2rem; }
  .price__acts { justify-content: flex-start; }
}

/* ───────────────────────── 5 · сбой и диктовка ─────────────────────────── */
.incident__grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(2rem, 5vw, 6rem); align-items: stretch; }
.incident .sc-stack { display: flex; flex-direction: column; }
.fact { display: flex; align-items: baseline; gap: .9rem; padding-top: .6rem; color: var(--sc-ink-soft); max-width: 30rem; }
.fact b { font-family: var(--sc-font-display); font-weight: 400; font-size: 3.2rem; line-height: 1; color: var(--sc-ink); }
/* факт садится на низ колонки вровень с низом окна, а не висит в воздухе */
.incident .sc-stack > .fact { margin-top: auto; padding-top: 1.4rem; border-top: 1px solid var(--sc-hairline-strong); max-width: none; }
/* окно ОС на бумаге: неба под ним нет, поэтому вместо стекла плотная подложка */
.os--paper { width: 100%; background: color-mix(in oklab, var(--sc-ink) 4%, var(--sc-surface)); border-color: color-mix(in oklab, var(--sc-ink) 8%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
.os--paper .os__title { background: color-mix(in oklab, var(--sc-ink) 4%, var(--sc-surface)); }
/* диктовка: тот же композер, что в окне оператора, но со строкой уже набранной */
.say { padding: 1rem 1.1rem 1.1rem; }
.say .con__mode { margin: 0 0 .5rem; }
/* кнопка переносится под строку сама, когда тексту остаётся меньше 16rem */
.say__input { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem 1rem; margin: 0; padding: .7rem .55rem .7rem 1rem; border-radius: 10px; border: 1px solid color-mix(in oklab, var(--sc-accent) 45%, transparent); background: color-mix(in oklab, var(--sc-accent) 5%, var(--sc-surface)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc-accent) 10%, transparent); }
.say__input span { flex: 1 1 16rem; font-size: .92rem; line-height: 1.45; }
.say__input span::after { content: ""; display: inline-block; width: 1px; height: 1.05em; margin-left: .12em; vertical-align: -.16em; background: var(--sc-accent); }
.say__input b { flex: none; margin-left: auto; font-weight: 500; color: var(--sc-accent-ink); background: var(--sc-accent); padding: .45rem .9rem; border-radius: 6px; font-size: .78rem; }
.dictwin__applied { display: flex; align-items: center; gap: .55rem; margin: 0; padding: .55rem 1.1rem; border-block: 1px solid var(--sc-hairline); background: color-mix(in oklab, var(--amber) 9%, transparent); font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: #6B4A12; }
.dictwin__applied::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px color-mix(in oklab, var(--amber) 24%, transparent); }
.dictwin__out { display: grid; grid-template-columns: 1fr 1fr; }
.thr { min-width: 0; padding: 1rem 1.1rem 1.1rem; }
.thr + .thr { border-left: 1px solid var(--sc-hairline); }
.thr__who { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem; font-size: .78rem; color: var(--sc-ink-soft); }
.thr__who b { font-weight: 500; color: var(--sc-ink); }
.thr__who time { margin-left: auto; font-size: .7rem; }
.thr .bub { max-width: 100%; font-size: .8rem; }
/* Lenis ведёт прокрутку сам, поэтому родное плавное доведение из
   scrollcraft.css нужно снять: иначе каждый кадр библиотеки браузер
   анимировал бы ещё раз — сглаживание поверх сглаживания. */
html.lenis { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.kicker { font-size: var(--sc-t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink-soft); }
@media (max-width: 1100px) { .dictwin__out { grid-template-columns: 1fr; } .thr + .thr { border-left: 0; border-top: 1px solid var(--sc-hairline); } }
/* .con__mode на узких экранах прячется вместе со списком диалогов, но в диктовке
   он единственный говорит, что строка идёт ассистенту, — возвращаем */
@media (max-width: 860px) { .incident__grid { grid-template-columns: 1fr; } .fact b { font-size: 2.6rem; } .incident .sc-stack > .fact { margin-top: 0; } .say .con__mode { display: inline-flex; } }

/* ───────────────────────── 6 · FAQ ────────────────────────────────────── */
.faq__title { text-align: center; margin: 0 auto 2.4rem; max-width: 20ch; }
.faq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 auto; max-width: 64rem; }
.faq__grid > div { border-top: 1px solid var(--sc-hairline-strong); }
.faq details { padding: 1rem 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; font-weight: 500; font-size: var(--sc-t-base); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sc-font-display); font-size: 1.4rem; line-height: 1; color: var(--sc-ink-soft); transition: transform var(--sc-d-base) var(--sc-ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq dd { margin: .6rem 0 0; color: var(--sc-ink-soft); max-width: 42ch; }
@media (max-width: 860px) { .faq__grid { grid-template-columns: 1fr; } }

/* ───────────────────────── 7 · финал: лавка ночью, картина на бумаге ───── */
/* Якорь #try. Пин длится 1.4 экрана, и прыжок на верх секции — это ровно
   та точка, где метки ещё не открылись: кикер, кнопка и сноска зажигаются
   на 5–10% хода, то есть кнопка, ради которой пришли по CTA, стоит на нуле
   прозрачности. Отрицательный scroll-margin-top уводит посадку вглубь пина:
   ход равен (1.4-1)vh, нужная доля от него — 0.208vh. Считает сам браузер,
   поэтому это переживает и его повторный доскролл к якорю после раскладки,
   который затирал поправку из скрипта. */
.close { --sc-ink: var(--night-ink); --sc-ink-soft: var(--night-soft); color: var(--sc-ink); scroll-margin-top: -20.8svh; }
.close__stage { display: grid; align-items: end; background: var(--sc-canvas); }
/* Картина шириной во весь экран и прижата к низу: слева, справа и снизу
   краска доходит до кромки кадра. При object-fit: contain на широком и низком
   экране (1920×800) картинка вписывалась по высоте и оставляла бумажные полосы
   по бокам; теперь лишнее уходит вверх за край сцены (у неё overflow: clip). */
/* Коробка картины: на десктопе она лежит на всей сцене, и всё внутри стоит
   ровно там же, где стояло. На телефоне коробка становится нижней строкой
   сетки, и вуаль низа со свечением едут вместе с картиной. */
.close__art-box { position: absolute; inset: 0; margin: 0; }
.close__art { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
.close__bloom { position: absolute; left: var(--win-x, 60%); top: var(--win-y, 70%); width: 34vw; max-width: 30rem; aspect-ratio: 1; translate: -50% -50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,196,110,.5), rgba(255,176,70,.14) 42%, transparent 70%); mix-blend-mode: screen;
  opacity: var(--sc-p, 0); transform: scale(calc(.6 + var(--sc-p, 0) * .4)); }
/* Вуаль под текст запечена в картину по краске (см. build-a.py): в CSS она
   ложилась бы и на бумагу над аркой и давала мутный угол с чёткой кромкой.
   Мобильный кадр несёт свою запечённую вуаль сверху, CSS-дубля больше нет. */
/* Низ: картина темнеет к футеру, как у Vestris, а не режется плашкой */
.close__fade { position: absolute; inset-inline: 0; bottom: 0; height: 42%; pointer-events: none; background: linear-gradient(180deg, transparent 0%, rgba(14,26,46,.28) 45%, rgba(14,26,46,.78) 100%); }
/* Текст стоит от низа кадра, а не от кромки картины: картина закрывает низ
   экрана целиком, а высота блока меняется от переносов заголовка — при отсчёте
   сверху кнопка уезжала под футер. */
.close__copy { position: absolute; left: var(--sc-gutter); right: auto; bottom: clamp(3.5rem, 8vh, 6.5rem); max-width: 38rem; text-align: left; display: flex; flex-direction: column; align-items: flex-start; gap: 1.3rem; z-index: 2; }
/* Подпись стоит у самой кромки арки: там сквозь мазок видна бумага, поэтому
   ей нужна своя тень, как заголовку. */
.close__k { font-size: var(--sc-t-xs); letter-spacing: .1em; text-transform: uppercase; color: #E6E3D4; text-shadow: 0 1px 10px rgba(10,18,32,.8), 0 0 3px rgba(10,18,32,.6); }
.close__title { font-size: clamp(2.2rem, 1.4rem + 3.2vw, 4.4rem); max-width: 11.6em; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.close__acts { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
/* кнопка финала горит как лампа в окне лавки: тот же янтарь, что у огонька */
.close .btn--primary { background: var(--amber); color: #2A1D06; border-color: color-mix(in srgb, var(--amber) 70%, #fff);
  box-shadow: 0 10px 30px -8px rgba(240,181,90,.5), 0 0 44px -12px rgba(255,196,110,.45), inset 0 1px 0 rgba(255,255,255,.35); }
.close .btn--primary:hover { background: #F7C775; box-shadow: 0 12px 34px -8px rgba(240,181,90,.62), 0 0 56px -12px rgba(255,196,110,.55), inset 0 1px 0 rgba(255,255,255,.35); }
.close__note { font-size: var(--sc-t-sm); color: #EDEADB; padding: .6rem .9rem; border-radius: var(--sc-r-sm); background: rgba(16, 24, 20, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.foot { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem var(--sc-gutter); background: transparent; border-top: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: var(--sc-t-xs); color: var(--night-soft); }
.foot .bar__mark { color: var(--night-ink); font-size: 1.15rem; }
/* Телефон: другая сборка того же акта. Раньше кадр 16:9 клали `cover` и
   поднимали на 131% — сгенерированная кромка уезжала за верх экрана, и на
   стыке с бумагой оставалась резкая линия. Теперь у телефона свой портретный
   кадр (955×1039), он лежит шириной во весь экран в нижней строке сцены и
   входит в страницу собственной кромкой, как на десктопе. Текст стоит над ним
   на бумаге — чернилами, без ореолов и вуалей, — а футер остаётся на картине. */
@media (max-width: 860px) and (orientation: portrait) {
  .close__stage { grid-template-rows: minmax(0, 1fr) auto; align-items: stretch; }
  .close__art-box { position: relative; inset: auto; grid-row: 2; }
  /* Предел высоты срабатывает на широком портрете (планшет) и на низком
     экране. Кадр там режется с обоих концов поровну: сверху уходит только
     белое поле над кромкой — она сама, бумага под multiply и так невидима, —
     а снизу трава, и окошко с лампой остаётся выше футера. На телефонах
     предел не достаётся: картина 0.92:1 ниже 64svh на всех размерах. */
  .close__art { position: static; display: block; width: 100%; height: auto; max-height: 64svh; object-fit: cover; object-position: 50% 50%; }
  .close__fade { height: 46%; }
  .close__copy { position: static; grid-row: 1; align-self: end; max-width: none;
    margin: 0 var(--sc-gutter) clamp(1.4rem, 4vh, 2.4rem); gap: 1rem; }
  .close__copy, .close__title { color: var(--sc-ink-page); text-shadow: none; }
  .close__k { color: var(--sc-ink-soft-page); text-shadow: none; }
  .close__title { font-size: clamp(1.7rem, .9rem + 3.6vw, 2.6rem); max-width: none; }
  .close__acts { flex-direction: column; align-items: stretch; gap: .8rem; width: 100%; }
  .close__acts .btn { width: 100%; }
  .close__note { color: var(--sc-ink-soft-page); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
  .foot { gap: .1rem .9rem; flex-wrap: wrap; padding: .6rem var(--sc-gutter) max(.7rem, env(safe-area-inset-bottom)); line-height: 1.3; }
  .foot .bar__mark { font-size: 1rem; }
}

/* ───────────────────────── мотылёк: летит по странице на свет ──────────── */
.moth-fx { position: fixed; left: 0; top: 0; z-index: 40; width: clamp(44px, 5vw, 84px); pointer-events: none; opacity: 0; will-change: transform, opacity; transition: opacity 320ms var(--sc-ease-out); }
.moth-fx img { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 10px rgba(20,20,10,.28)); }
.moth-fx.is-on { opacity: 1; }
.moth-fx.is-landed img { animation: breathe 2.8s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.93); } }