/* ════════════════════════════════════════════════════════════════════
   «БЕРЕГ» · ЛЕНДИНГ — секции и движение.
   Подключается ПОСЛЕ tokens.css и site.css. Только для index.html.

   Опоры:
   · всё построено на токенах кабинета — сайт и продукт должны читаться
     как одна вещь;
   · продукт показывается ЖИВЫМИ макетами (класс .mk), собранными из тех
     же компонентов, что и кабинет, а не картинками: макет не устаревает
     вместе со скриншотом и весит килобайты;
   · движение служит смыслу (собрать разрозненное, провести по дню,
     показать переход) и полностью отключается по prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   1 · ПЕРВЫЙ ЭКРАН
   ════════════════════════════════════════════════════════════════════ */
.hero-sec{ position:relative; padding:clamp(36px,4.4vw,64px) 0 clamp(40px,4vw,64px); overflow:hidden; }

/* Горизонт: тонкая линия берега за первым экраном. Это единственная
   декоративная графика страницы — дальше говорит сам продукт. */
.hero-horizon{
  position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:min(1600px, 148vw); height:100%; pointer-events:none; z-index:0;
  color:var(--acc);
}
/* Первый экран собран как разворот презентации: заголовок по центру,
   под ним широкий макет кабинета. Так экран продукта получает всю ширину
   полосы (1200px) и читается по-настоящему, а плашки-выноски висят
   по краям рамки и ничего не закрывают. */
.hero-grid{ position:relative; z-index:1; }
.hero-head{ max-width:900px; margin:0 auto; text-align:center; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:6px 14px 6px 8px; border-radius:var(--r-pill);
  background:var(--surf); border:1px solid var(--line-2); box-shadow:var(--ev-1);
  font-size:var(--fs-base); color:var(--t-2); font-weight:var(--fw-medium);
}
.hero-eyebrow b{ font-weight:var(--fw-semibold); color:var(--t-1); }
.hero-eyebrow .pip{
  width:22px; height:22px; border-radius:7px; flex:none;
  display:grid; place-items:center;
  background:var(--acc-sk); color:var(--acc-ink);
}
.hero-eyebrow .pip svg{ width:13px; height:13px; }

.hero-sec h1{
  margin-top:22px; font-size:var(--fs-d1); line-height:1.05;
  letter-spacing:-.03em; max-width:19ch; margin-left:auto; margin-right:auto;
}
.hero-sec h1 em{ font-style:normal; color:var(--acc-ink); }
.hero-sub{
  margin:20px auto 0; font-size:var(--fs-lead); line-height:1.62;
  color:var(--t-3); max-width:58ch;
}
.hero-cta{ margin-top:30px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center; }
.hero-note{
  margin-top:18px; display:flex; gap:22px; flex-wrap:wrap; justify-content:center;
  font-size:var(--fs-md); color:var(--t-quiet);
}
.hero-note span{ display:inline-flex; align-items:center; gap:6px; }
.hero-note svg{ width:15px; height:15px; color:var(--acc-soft); }

/* Макет кабинета в первом экране */
.hero-stage{ position:relative; margin-top:clamp(34px,4vw,56px); }
.hero-stage .mk{ transform-origin:top center; }

/* Легенда под макетом: три мысли о том, что видно на экране.
   Раньше здесь висели плашки-выноски поверх макета — на ширине полосы
   в 1200px они неизбежно закрывали сам кабинет, а прятать продукт ради
   украшения нельзя. Легенда говорит то же самое и работает на телефоне. */
.hero-legend{
  display:grid; gap:var(--gap); margin-top:22px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.hero-legend li{ display:flex; gap:12px; align-items:flex-start; }
.hero-legend .ic-wrap{
  width:32px; height:32px; flex:none; border-radius:10px; display:grid; place-items:center;
  background:var(--acc-sk); color:var(--acc-ink);
}
.hero-legend .ic-wrap.warm{ background:var(--warn-sk); color:var(--warn-ink); }
.hero-legend .ic-wrap svg{ width:17px; height:17px; }
.hero-legend span:last-child{ font-size:var(--fs-md); color:var(--t-3); line-height:1.55; }
.hero-legend b{ color:var(--t-1); font-weight:var(--fw-semibold); }
@media (max-width:820px){ .hero-legend{ grid-template-columns:1fr; gap:14px; } }

/* ════════════════════════════════════════════════════════════════════
   2 · ПОЛОСА ОПОР
   ════════════════════════════════════════════════════════════════════ */
.trust{
  display:grid; gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--r-3); overflow:hidden;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.trust-i{ background:var(--surf); padding:20px 22px; }
.trust-n{
  font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:var(--fw-bold);
  color:var(--t-1); line-height:1.1;
}
.trust-c{ margin-top:5px; font-size:var(--fs-md); color:var(--t-3); line-height:1.5; }
@media (max-width:860px){ .trust{ grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* ════════════════════════════════════════════════════════════════════
   3 · ГДЕ СЕЙЧАС ЖИВЁТ ПРАКТИКА — четыре места сходятся в одно
   ════════════════════════════════════════════════════════════════════ */
.mess{
  position:relative; display:grid; gap:var(--gap);
  grid-template-columns:repeat(5,minmax(0,1fr));
  margin-bottom:14px;
}
.mess-card{
  background:var(--surf); border:1px solid var(--line); border-radius:var(--r-3);
  box-shadow:var(--ev-1); padding:18px 20px; min-height:112px;
  display:flex; flex-direction:column; gap:9px; justify-content:flex-start;
}
.mess-card .ic-wrap{
  width:32px; height:32px; border-radius:10px; display:grid; place-items:center;
  background:var(--surf-2); color:var(--t-3);
}
.mess-card .ic-wrap svg{ width:17px; height:17px; }
.mess-t{ font-size:var(--fs-md); font-weight:var(--fw-semibold); color:var(--t-1); }
.mess-p{ font-size:var(--fs-base); color:var(--t-4); line-height:1.5; }
/* Лёгкий разнобой — «стопка бумаг», а не сетка */
.js-motion .mess-card{ transition:transform var(--dur-rv) var(--ease-rv); }
.js-motion .mess-card:nth-child(1){ transform:rotate(-1.6deg) translateY(6px); }
.js-motion .mess-card:nth-child(2){ transform:rotate(1.2deg); }
.js-motion .mess-card:nth-child(3){ transform:rotate(-.8deg) translateY(9px); }
.js-motion .mess-card:nth-child(4){ transform:rotate(1.8deg) translateY(3px); }
.js-motion .mess-card:nth-child(5){ transform:rotate(-1.1deg) translateY(7px); }
.js-motion .mess.is-in .mess-card{ transform:none; }

.mess-arrow{
  display:grid; place-items:center; padding:8px 0 4px;
  color:var(--acc-soft);
}
.mess-arrow svg{ width:26px; height:26px; }
.mess-out{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:22px 26px; border-radius:var(--r-3);
  background:linear-gradient(140deg, var(--acc-sk-2), var(--surf) 62%);
  border:1px solid var(--acc-bd);
}
.mess-out .brand-mark{ width:42px; height:42px; border-radius:13px; font-size:var(--fs-xl); }
.mess-out-t{ font-family:var(--font-display); font-size:var(--fs-xl); font-weight:var(--fw-bold); color:var(--t-1); }
.mess-out-p{ font-size:var(--fs-md); color:var(--t-3); margin-top:2px; }
.mess-out .btn{ margin-left:auto; }
@media (max-width:1040px){ .mess{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:640px){ .mess{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .mess-out .btn{ margin-left:0; width:100%; justify-content:center; } }

/* ════════════════════════════════════════════════════════════════════
   4 · ЦИФРЫ С ИСТОЧНИКАМИ
   ════════════════════════════════════════════════════════════════════ */
.figs{ display:grid; gap:var(--gap); grid-template-columns:repeat(3,minmax(0,1fr)); }
.fig{ padding:26px 28px; display:flex; flex-direction:column; height:100%; }
.fig-n{
  font-family:var(--font-display); font-weight:var(--fw-extrabold);
  font-size:clamp(34px,3.6vw,46px); line-height:1; color:var(--acc-ink);
  letter-spacing:-.02em;
}
.fig-n small{ font-size:.55em; font-weight:var(--fw-bold); letter-spacing:0; }
.fig-t{ margin-top:12px; font-size:var(--fs-lg); font-weight:var(--fw-semibold); color:var(--t-1); line-height:1.35; }
.fig-p{ margin-top:8px; font-size:var(--fs-md); color:var(--t-3); line-height:1.6; flex:1; }
.fig-src{
  margin-top:16px; padding-top:12px; border-top:1px solid var(--line);
  font-size:var(--fs-sm); color:var(--t-4);
}
@media (max-width:900px){ .figs{ grid-template-columns:1fr; } }

/* ════════════════════════════════════════════════════════════════════
   5 · ТРИ СТОРОНЫ ПРОДУКТА
   ════════════════════════════════════════════════════════════════════ */
.sides{ display:grid; gap:var(--gap); grid-template-columns:repeat(3,minmax(0,1fr)); }
.side{ padding:28px 28px 26px; display:flex; flex-direction:column; }
.side-ic{
  width:44px; height:44px; border-radius:var(--r-2); display:grid; place-items:center;
  background:var(--acc-sk); color:var(--acc-ink); margin-bottom:18px;
}
.side-ic svg{ width:22px; height:22px; }
.side h3{ font-size:var(--fs-d3); line-height:1.2; }
.side p{ margin-top:10px; font-size:var(--fs-md); color:var(--t-3); line-height:1.62; }
.side ul{ margin-top:16px; display:flex; flex-direction:column; gap:8px; }
.side li{
  position:relative; padding-left:20px;
  font-size:var(--fs-md); color:var(--t-2); line-height:1.5;
}
.side li::before{
  content:""; position:absolute; left:4px; top:8px;
  width:6px; height:6px; border-radius:50%; background:var(--acc-soft);
}
@media (max-width:900px){ .sides{ grid-template-columns:1fr; } }

/* ════════════════════════════════════════════════════════════════════
   6 · ПРЕЗЕНТАЦИЯ КАБИНЕТА — рельс разделов + колода слайдов
        (механика подсмотрена у mindbox.ru, наполнение и стиль — наши)
   ════════════════════════════════════════════════════════════════════ */
.deck-wrap{ display:grid; gap:clamp(20px,2.4vw,34px); grid-template-columns:250px minmax(0,1fr); align-items:start; }

.rail{ position:sticky; top:92px; display:flex; flex-direction:column; gap:2px; }
.rail-btn{
  display:flex; align-items:baseline; gap:10px; width:100%;
  padding:11px 14px; border:0; border-radius:var(--r-1);
  background:none; text-align:left; cursor:pointer;
  transition:background var(--dur-1) var(--ease);
}
.rail-btn:hover{ background:var(--surf-2); }
.rail-btn.is-on{ background:var(--surf); box-shadow:var(--ev-1); }
.rail-t{ font-size:var(--fs-md); font-weight:var(--fw-semibold); color:var(--t-3); }
.rail-btn.is-on .rail-t{ color:var(--acc-ink); }
.rail-n{ margin-left:auto; font-size:var(--fs-sm); color:var(--t-quiet); }
.rail-d{ display:block; margin-top:3px; font-size:var(--fs-sm); font-weight:var(--fw-normal); color:var(--t-quiet); line-height:1.4; }

.deck{
  display:flex; gap:var(--gap); overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 4px 18px; margin:-4px -4px 0;
  scrollbar-width:thin; scroll-behavior:smooth;
}
.deck::-webkit-scrollbar{ height:6px; }
.deck::-webkit-scrollbar-thumb{ background:var(--line-3); border-radius:3px; }
.deck::-webkit-scrollbar-track{ background:transparent; }
.slide{
  flex:0 0 min(600px, 86%); scroll-snap-align:start;
  background:var(--surf); border:1px solid var(--line); border-radius:var(--r-3);
  box-shadow:var(--ev-2); padding:26px 26px 0; overflow:hidden;
  display:flex; flex-direction:column;
  transition:box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.slide:hover{ box-shadow:var(--ev-3); border-color:var(--line-2); }
.slide-chip{
  align-self:flex-start;
  padding:4px 11px; border-radius:var(--r-pill);
  background:var(--acc-sk); color:var(--acc-ink);
  font-size:var(--fs-xs); font-weight:var(--fw-bold);
  letter-spacing:var(--ls-caps); text-transform:uppercase;
}
.slide h3{ margin-top:16px; font-size:var(--fs-2xl); line-height:1.22; }
.slide p{ margin-top:10px; font-size:var(--fs-md); color:var(--t-3); line-height:1.6; min-height:66px; }
.slide-shot{
  margin-top:22px; margin-left:-26px; margin-right:-26px;
  padding:22px 26px 0;
  background:linear-gradient(180deg, var(--surf-2), rgba(241,246,251,0));
  border-top:1px solid var(--line);
}
.deck-stage{ position:relative; }
/* Полупрозрачная подсказка: сразу видно, что колода листается */
.deck-hint{
  position:absolute; top:44%; right:12px; z-index:3;
  display:flex; align-items:center; gap:6px;
  padding:9px 11px 9px 14px; border-radius:var(--r-pill);
  border:1px solid var(--line-3); background:color-mix(in srgb, var(--surf) 80%, transparent);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  color:var(--t-2); font-size:var(--fs-sm); box-shadow:var(--ev-2); cursor:pointer;
  animation:hintNudge 2.6s var(--ease) infinite;
  transition:opacity var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
             border-color var(--dur-2) var(--ease);
}
.deck-hint svg{ width:16px; height:16px; }
.deck-hint:hover{ color:var(--acc-ink); border-color:var(--acc-bd); }
.deck-hint.is-off{ opacity:0; pointer-events:none; }
@keyframes hintNudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(5px); } }
@media (prefers-reduced-motion:reduce){ .deck-hint{ animation:none; } }

.deck-foot{ display:flex; align-items:center; gap:10px; margin-top:6px; }
.deck-prog{ flex:1; height:3px; border-radius:2px; background:var(--surf-3); overflow:hidden; }
.deck-prog i{ display:block; height:100%; background:var(--acc); border-radius:2px; transition:width var(--dur-3) var(--ease); }
.deck-nav{ display:flex; gap:6px; }
.deck-nav button{
  width:36px; height:36px; display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:var(--r-1);
  background:var(--surf); color:var(--t-3); box-shadow:var(--ev-1);
  transition:color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.deck-nav button:hover:not(:disabled){ color:var(--acc-ink); border-color:var(--acc-bd); }
.deck-nav button:disabled{ opacity:.4; cursor:default; }
.deck-nav svg{ width:18px; height:18px; }
.deck-count{ font-size:var(--fs-sm); color:var(--t-quiet); font-variant-numeric:tabular-nums; }

@media (max-width:960px){
  .deck-wrap{ grid-template-columns:minmax(0,1fr); }
  .rail{
    position:static; flex-direction:row; gap:6px; overflow-x:auto;
    padding-bottom:8px; margin-bottom:4px;
  }
  /* Пилюля должна быть по ширине текста: базовое правило растягивает
     кнопку на всю строку, и в ряд помещался ровно один раздел. */
  .rail-btn{ flex:0 0 auto; width:auto; padding:8px 14px;
             border:1px solid var(--line); border-radius:var(--r-pill); }
  .rail-t{ white-space:nowrap; }
  .rail-btn.is-on{ border-color:var(--acc-bd); background:var(--acc-sk); box-shadow:none; }
  .rail-d, .rail-n{ display:none; }
  .slide{ flex-basis:min(560px, 92%); }
}

/* ════════════════════════════════════════════════════════════════════
   7 · ОДИН РАБОЧИЙ ДЕНЬ — вертикальный маршрут
   ════════════════════════════════════════════════════════════════════ */
.day{ position:relative; display:grid; gap:clamp(24px,3vw,40px); grid-template-columns:minmax(0,1fr); }
.day-line{
  position:absolute; left:19px; top:12px; bottom:32px; width:2px;
  background:var(--surf-3); border-radius:2px; overflow:hidden;
}
.day-line i{ display:block; width:100%; height:0; background:var(--acc); transition:height 240ms linear; }
.day-step{ position:relative; padding-left:60px; }
.day-dot{
  position:absolute; left:8px; top:2px;
  width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--surf); border:2px solid var(--surf-3); color:var(--t-4);
  font-size:var(--fs-sm); font-weight:var(--fw-bold);
  transition:border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
             background var(--dur-2) var(--ease);
}
.day-step.is-on .day-dot{ border-color:var(--acc); color:var(--on-acc); background:var(--acc); }
.day-time{
  font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--t-quiet);
}
.day-step.is-on .day-time{ color:var(--acc-ink); }
.day-step h3{ margin-top:7px; font-size:var(--fs-d3); line-height:1.25; }
.day-step p{ margin-top:9px; font-size:var(--fs-md); color:var(--t-3); line-height:1.62; max-width:52ch; }
.day-cite{
  max-width:58ch; margin-top:14px; padding:12px 16px; border-radius:var(--r-2);
  background:var(--surf-2); border-left:3px solid var(--acc-soft);
  font-size:var(--fs-md); color:var(--t-2); line-height:1.55;
}
/* Маршрут всегда в одну колонку: линия дня должна читаться как линия,
   а не как две параллельные колонки. На широком экране растёт не число
   колонок, а воздух между шагами. */
@media (min-width:900px){
  .day{ gap:clamp(30px,3.4vw,46px); }
  .day-step{ padding-left:72px; }
  .day-line{ left:19px; }
}

/* ════════════════════════════════════════════════════════════════════
   8 · КАРТОЧКА КЛИЕНТА — вкладки
   ════════════════════════════════════════════════════════════════════ */
.cardx{ display:grid; gap:clamp(22px,2.6vw,36px); grid-template-columns:minmax(0,1fr); }
@media (min-width:1000px){ .cardx{ grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); align-items:start; } }
.cx-tabs{ display:flex; flex-direction:column; gap:2px; }
.cx-tab{
  display:flex; align-items:flex-start; gap:13px; width:100%; text-align:left;
  padding:13px 15px; border:0; border-radius:var(--r-2); background:none; cursor:pointer;
  transition:background var(--dur-1) var(--ease);
}
.cx-tab:hover{ background:var(--surf-2); }
.cx-tab.is-on{ background:var(--surf); box-shadow:var(--ev-2); }
.cx-tab .ic-wrap{
  width:32px; height:32px; flex:none; border-radius:10px; display:grid; place-items:center;
  background:var(--surf-2); color:var(--t-3);
}
.cx-tab.is-on .ic-wrap{ background:var(--acc-sk); color:var(--acc-ink); }
.cx-tab .ic-wrap svg{ width:17px; height:17px; }
.cx-t{ font-size:var(--fs-md); font-weight:var(--fw-semibold); color:var(--t-2); }
.cx-tab.is-on .cx-t{ color:var(--t-1); }
.cx-d{ display:block; margin-top:3px; font-size:var(--fs-sm); color:var(--t-quiet); line-height:1.45; font-weight:var(--fw-normal); }

/* На узком экране восемь вкладок столбиком — это стена в полтора экрана
   до того, как человек увидит хоть одну. Сворачиваем их в ленту, как
   рельс разделов выше: сам пример при этом сразу на виду. */
@media (max-width:999px){
  .cx-tabs{
    flex-direction:row; gap:6px; overflow-x:auto;
    padding-bottom:8px; margin-bottom:4px;
  }
  .cx-tab{
    flex:0 0 auto; width:auto; padding:8px 14px;
    border:1px solid var(--line); border-radius:var(--r-pill);
  }
  .cx-tab.is-on{ background:var(--acc-sk); border-color:var(--acc-bd); box-shadow:none; }
  .cx-tab .ic-wrap{ width:22px; height:22px; border-radius:7px; }
  .cx-tab .ic-wrap svg{ width:13px; height:13px; }
  .cx-t{ white-space:nowrap; }
  .cx-d{ display:none; }
}

/* ════════════════════════════════════════════════════════════════════
   9 · СТРАНИЦА КЛИЕНТА — телефон
   ════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════
   7 · ИСТОРИЯ ОДНОГО ДНЯ — сцена закрепляется, прокрутка ведёт рассказ
   ════════════════════════════════════════════════════════════════════ */
.story{ position:relative; }
.story-frame{ position:relative; }
.story-scene{
  display:grid; gap:clamp(20px,3vw,40px); align-items:center;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:900px){ .story-scene{ grid-template-columns:minmax(0,330px) minmax(0,1fr); } }
.story-scene + .story-scene{ margin-top:clamp(34px,5vw,64px); }
.story-time{
  font-size:var(--fs-sm); font-weight:var(--fw-bold); letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--acc-ink);
}
.story-cap h3{ margin-top:10px; font-size:var(--fs-2xl); line-height:1.22; }
.story-cap p{ margin-top:10px; font-size:var(--fs-md); color:var(--t-3); line-height:1.6; }
.story-shot{ display:grid; place-items:center; }
.story-shot .mk{ width:100%; }
.story-foot{ display:none; }

/* С движением: экран один, сцены сменяют друг друга по мере прокрутки */
.js-motion .story{ height:calc(100vh + 4 * 80vh); }
.js-motion .story-stage{
  position:sticky; top:0; height:100vh; display:grid; align-content:center; overflow:hidden;
}
.js-motion .story-frame{ min-height:min(620px, 70vh); }
.js-motion .story-scene{
  position:absolute; inset:0; margin:0; opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(12px);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility 0s linear .28s;
}
.js-motion .story-scene.is-on{
  opacity:1; visibility:visible; transform:none; pointer-events:auto; transition-delay:0s;
}
.js-motion .story-foot{ display:flex; align-items:center; gap:14px; margin-top:26px; }
.story-num{ font-size:var(--fs-sm); color:var(--t-quiet); font-variant-numeric:tabular-nums; }
.story-prog{ flex:1; display:flex; gap:6px; }
.story-prog i{
  flex:1; display:block; height:3px; border-radius:2px;
  background:var(--surf-3); overflow:hidden;
}
.story-prog b{ display:block; height:100%; width:0; background:var(--acc); border-radius:2px; }
.story-skip{
  border:1px solid var(--line-3); background:var(--surf); color:var(--t-3);
  border-radius:var(--r-pill); padding:7px 14px; font-size:var(--fs-sm); cursor:pointer;
  transition:color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.story-skip:hover{ color:var(--acc-ink); border-color:var(--acc-bd); }
/* Телефон — самая высокая сцена: подгоняем под высоту окна */
@media (max-height:900px){ .js-motion .story-shot .phone{ transform:scale(.86); transform-origin:center; } }
@media (max-height:780px){ .js-motion .story-shot .phone{ transform:scale(.76); transform-origin:center; } }
/* На узких экранах закрепление мешает: сцены просто идут подряд */
@media (max-width:899px){
  .js-motion .story{ height:auto; }
  .js-motion .story-stage{ position:static; height:auto; overflow:visible; }
  .js-motion .story-scene{ position:static; opacity:1; transform:none; pointer-events:auto; }
  .js-motion .story-scene + .story-scene{ margin-top:clamp(34px,5vw,64px); }
  .js-motion .story-foot{ display:none; }
}

.clientp{ display:grid; gap:clamp(26px,3vw,48px); grid-template-columns:minmax(0,1fr); align-items:start; }
@media (min-width:960px){ .clientp{ grid-template-columns:minmax(0,1fr) 320px; } }
.phone{
  width:300px; max-width:100%; margin:0 auto;
  border-radius:38px; padding:11px;
  background:linear-gradient(160deg, #26364F, var(--ink));
  box-shadow:var(--ev-5);
}
.phone-scr{
  border-radius:28px; overflow:hidden; background:var(--bg);
  height:568px; position:relative;
}
.phone-notch{
  position:absolute; left:50%; top:8px; transform:translateX(-50%);
  width:96px; height:22px; border-radius:12px; background:var(--ink); z-index:4;
}
.phone-in{ height:100%; overflow:hidden; padding:38px 14px 14px; }
.pf-brand{
  display:flex; align-items:center; gap:9px; padding:0 2px 12px;
}
.pf-mark{
  width:26px; height:26px; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(160deg, var(--acc-soft), var(--acc-d)); color:var(--on-acc);
  font-family:var(--font-display); font-weight:800; font-size:var(--fs-base);
}
.pf-alias{ font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; color:var(--t-1); }
.pf-sub{ font-size:var(--fs-xs); color:var(--t-4); }
.pf-card{
  background:var(--surf); border:1px solid var(--line); border-radius:var(--r-2);
  box-shadow:var(--ev-1); padding:14px; margin-bottom:9px;
}
.pf-lab{
  font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--t-4);
}
.pf-h{ margin-top:7px; font-size:var(--fs-md); font-weight:var(--fw-semibold); color:var(--t-1); line-height:1.35; }
.pf-p{ margin-top:6px; font-size:var(--fs-base); color:var(--t-3); line-height:1.5; }
.pf-task{ display:flex; align-items:flex-start; gap:9px; padding:8px 0; border-top:1px solid var(--line); }
.pf-task:first-of-type{ border-top:0; }
.pf-box{
  width:17px; height:17px; flex:none; margin-top:1px; border-radius:5px;
  border:1.5px solid var(--control-off); background:var(--surf);
  display:grid; place-items:center; color:transparent;
  transition:background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.pf-box svg{ width:11px; height:11px; }
.pf-task.is-done .pf-box{ background:var(--acc); border-color:var(--acc); color:var(--on-acc); }
.pf-task span{ font-size:var(--fs-base); color:var(--t-2); line-height:1.45; }
.pf-task.is-done span{ color:var(--t-4); text-decoration:line-through; }
.pf-btn{
  margin-top:10px; width:100%; padding:9px; border-radius:var(--r-1);
  background:var(--acc); color:var(--on-acc); border:0;
  font-size:var(--fs-base); font-weight:var(--fw-semibold); text-align:center;
}

/* ── «Маяк»: макет диалога + что умеет ─────────────────────────── */
.mayak{ display:grid; gap:clamp(26px,3vw,44px); grid-template-columns:minmax(0,1fr); align-items:start; }
@media (min-width:960px){ .mayak{ grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); } }
.mayak .mk-page{ padding:18px; }

.cp-points{ display:flex; flex-direction:column; gap:18px; margin-top:8px; }
.cp-point{ display:flex; gap:14px; }
.cp-point .ic-wrap{
  width:38px; height:38px; flex:none; border-radius:var(--r-2); display:grid; place-items:center;
  background:var(--acc-sk); color:var(--acc-ink);
}
.cp-point .ic-wrap svg{ width:19px; height:19px; }
.cp-point h4{ font-size:var(--fs-lg); }
.cp-point p{ margin-top:5px; font-size:var(--fs-md); color:var(--t-3); line-height:1.6; }

/* ════════════════════════════════════════════════════════════════════
   10 · СЕТКА-БЕНТО (задания, бланки, финансы, помощник)
   ════════════════════════════════════════════════════════════════════ */
.bento-l{ display:grid; gap:var(--gap); grid-template-columns:repeat(6,minmax(0,1fr)); }
.bento-l > *{ min-width:0; }
.sp-2{ grid-column:span 2; } .sp-3{ grid-column:span 3; }
.sp-4{ grid-column:span 4; } .sp-6{ grid-column:span 6; }
@media (max-width:900px){
  .bento-l{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sp-2,.sp-3,.sp-4,.sp-6{ grid-column:span 2; }
}
.tile{ padding:26px 28px; display:flex; flex-direction:column; }
.tile-ic{
  width:42px; height:42px; border-radius:var(--r-2); display:grid; place-items:center;
  background:var(--acc-sk); color:var(--acc-ink); margin-bottom:16px;
}
.tile-ic svg{ width:21px; height:21px; }
.tile-ic-warm{ background:var(--warn-sk); color:var(--warn-ink); }
.tile h3{ font-size:var(--fs-xl); line-height:1.28; }
.tile p{ margin-top:9px; font-size:var(--fs-md); color:var(--t-3); line-height:1.62; }
.tile-ink{ background:var(--ink); border-color:transparent; }
.tile-ink h3{ color:var(--t-inv); }
.tile-ink p{ color:rgba(234,241,249,.72); }
.tile-ink p b{ color:var(--t-inv); font-weight:var(--fw-semibold); }
.tile-ink .tile-ic{ background:rgba(255,255,255,.10); color:var(--acc-bright); }
.tile-foot{ margin-top:auto; padding-top:18px; }

/* Бланк — «лист бумаги» */
.sheet{
  margin-top:20px; background:var(--surf); border:1px solid var(--line);
  border-radius:var(--r-2); box-shadow:var(--ev-2); padding:16px 18px;
  position:relative; overflow:hidden;
}
.sheet::after{
  content:""; position:absolute; right:-30px; top:-30px; width:110px; height:110px;
  background:radial-gradient(circle at 30% 70%, var(--acc-sk), transparent 70%);
}
.sheet-t{ font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; color:var(--t-1); }
.sheet-grid{ margin-top:12px; display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.sheet-grid > *{ background:var(--surf); padding:7px 9px; font-size:var(--fs-xs); color:var(--t-3); }
.sheet-grid .h{ background:var(--surf-2); color:var(--t-4); font-weight:var(--fw-semibold); text-transform:uppercase; letter-spacing:.06em; }
.sheet-line{ height:8px; border-radius:4px; background:var(--surf-3); }

/* ════════════════════════════════════════════════════════════════════
   11 · ТАБЛИЦА СРАВНЕНИЯ
   ════════════════════════════════════════════════════════════════════ */
.cmp-scroll{
  position:relative;
  overflow-x:auto; border-radius:var(--r-3); border:1px solid var(--line);
  background:var(--surf); box-shadow:var(--ev-2);
}
/* Подсказка про боковую прокрутку — только там, где таблица правда
   не помещается: молча обрезанная таблица читается как сломанная. */
.cmp-swipe{ display:none; margin-bottom:10px; font-size:var(--fs-sm); color:var(--t-quiet); }
@media (max-width:820px){ .cmp-swipe{ display:block; } }
table.cmp{ width:100%; border-collapse:collapse; min-width:760px; }
.cmp th, .cmp td{ padding:15px 18px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top; }
.cmp thead th{
  font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:var(--ls-caps);
  /* --t-4 на подложке --surf-2 даёт 4,19:1 — ниже нормы; --t-3 даёт 4,6 */
  text-transform:uppercase; color:var(--t-3); background:var(--surf-2);
  position:sticky; top:0; z-index:1;
}
.cmp tbody th{ font-size:var(--fs-md); font-weight:var(--fw-semibold); color:var(--t-1); width:26%; }
.cmp td{ font-size:var(--fs-md); color:var(--t-3); line-height:1.5; }
.cmp .col-us{ background:var(--acc-sk); color:var(--t-2); }
.cmp thead .col-us{ background:var(--acc); color:var(--on-acc); }
.cmp tr:last-child th, .cmp tr:last-child td{ border-bottom:0; }
.cmp-note{ margin-top:14px; font-size:var(--fs-sm); color:var(--t-quiet); line-height:1.6; }

/* ════════════════════════════════════════════════════════════════════
   12 · КОМУ ПОДХОДИТ / НЕ ПОДХОДИТ
   ════════════════════════════════════════════════════════════════════ */
.fit{ display:grid; gap:var(--gap); grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:820px){ .fit{ grid-template-columns:1fr; } }
.fit-card{ padding:26px 28px; }
.fit-card h3{ font-size:var(--fs-xl); display:flex; align-items:center; gap:10px; }
.fit-card h3 svg{ width:20px; height:20px; }
.fit-yes h3{ color:var(--acc-ink); }
.fit-no h3{ color:var(--t-2); }
.fit-card ul{ margin-top:18px; display:flex; flex-direction:column; gap:12px; }
.fit-card li{ position:relative; padding-left:26px; font-size:var(--fs-md); color:var(--t-2); line-height:1.55; }
.fit-card li svg{ position:absolute; left:0; top:2px; width:17px; height:17px; }
.fit-yes li svg{ color:var(--acc); }
.fit-no li svg{ color:var(--t-4); }

/* ════════════════════════════════════════════════════════════════════
   13 · ЦЕНА
   ════════════════════════════════════════════════════════════════════ */
.plans{ display:grid; gap:var(--gap); grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
@media (max-width:820px){ .plans{ grid-template-columns:1fr; } }
.plan{ padding:30px 32px; display:flex; flex-direction:column; height:100%; }
.plan-name{ font-family:var(--font-display); font-size:var(--fs-xl); font-weight:var(--fw-bold); color:var(--t-1); }
.plan-price{
  margin-top:14px; font-family:var(--font-display); font-weight:var(--fw-extrabold);
  font-size:clamp(34px,3.6vw,46px); line-height:1; color:var(--t-1); letter-spacing:-.02em;
}
.plan-price span{ font-size:var(--fs-lg); font-weight:var(--fw-semibold); color:var(--t-3); letter-spacing:0; }
.plan-note{ margin-top:9px; font-size:var(--fs-md); color:var(--t-3); line-height:1.55; }
.plan ul{ margin:22px 0 26px; display:flex; flex-direction:column; gap:11px; }
.plan li{ position:relative; padding-left:26px; font-size:var(--fs-md); color:var(--t-2); line-height:1.5; }
.plan li svg{ position:absolute; left:0; top:2px; width:17px; height:17px; color:var(--acc); }
.plan .btn{ margin-top:auto; }
.plan-accent{
  background:linear-gradient(160deg, var(--acc), var(--acc-d));
  border-color:transparent; color:#fff; box-shadow:var(--ev-brand);
}
.plan-accent .plan-name, .plan-accent .plan-price{ color:#fff; }
.plan-accent .plan-price span, .plan-accent .plan-note{ color:rgba(255,255,255,.82); }
.plan-accent li{ color:rgba(255,255,255,.94); }
.plan-accent li svg{ color:#fff; }
.plan-badge{
  align-self:flex-start; margin-bottom:14px;
  padding:4px 11px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.18); color:#fff;
  font-size:var(--fs-xs); font-weight:var(--fw-bold);
  letter-spacing:var(--ls-caps); text-transform:uppercase;
}
.price-after{
  margin-top:var(--gap); padding:20px 24px; border-radius:var(--r-3);
  background:var(--surf-2); border:1px solid var(--line);
  font-size:var(--fs-md); color:var(--t-2); line-height:1.65;
}
.price-after b{ color:var(--t-1); }

/* ════════════════════════════════════════════════════════════════════
   14 · АВТОРЫ И ЦИТАТА
   ════════════════════════════════════════════════════════════════════ */
.quote{
  padding:clamp(28px,3.4vw,44px); border-radius:var(--r-4);
  background:var(--surf); border:1px solid var(--line); box-shadow:var(--ev-2);
  position:relative;
}
.quote p{
  font-family:var(--font-display); font-weight:var(--fw-medium);
  font-size:clamp(19px,2.1vw,27px); line-height:1.42; color:var(--t-1);
  letter-spacing:-.01em; max-width:34ch;
}
.quote cite{ display:block; margin-top:20px; font-style:normal; font-size:var(--fs-md); color:var(--t-3); }
.authors{ display:grid; gap:var(--gap); grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:var(--gap); }
@media (max-width:760px){ .authors{ grid-template-columns:1fr; } }
.author{ padding:24px 26px; display:flex; gap:16px; }
.author-ph{
  width:52px; height:52px; flex:none; border-radius:16px;
  display:grid; place-items:center;
  background:var(--acc-sk); color:var(--acc-ink);
  font-family:var(--font-display); font-weight:800; font-size:var(--fs-xl);
}
.author-n{ font-family:var(--font-display); font-size:var(--fs-lg); font-weight:var(--fw-bold); color:var(--t-1); }
.author-r{ margin-top:2px; font-size:var(--fs-md); color:var(--t-3); }
.author-b{ margin-top:9px; font-size:var(--fs-md); color:var(--t-2); line-height:1.6; }

/* ════════════════════════════════════════════════════════════════════
   15 · ВОПРОСЫ
   ════════════════════════════════════════════════════════════════════ */
.faq{ display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
@media (max-width:880px){ .faq{ grid-template-columns:1fr; } }
.faq details{
  background:var(--surf); border:1px solid var(--line); border-radius:var(--r-2);
  transition:box-shadow var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.faq details[open]{ box-shadow:var(--ev-2); border-color:var(--line-2); }
.faq summary{
  list-style:none; cursor:pointer; padding:18px 48px 18px 22px; position:relative;
  font-size:var(--fs-body); font-weight:var(--fw-semibold); color:var(--t-1); line-height:1.45;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:22px; top:24px;
  width:9px; height:9px; border-right:2px solid var(--t-4); border-bottom:2px solid var(--t-4);
  transform:rotate(45deg); transition:transform var(--dur-2) var(--ease);
}
.faq details[open] summary::after{ transform:rotate(-135deg) translate(-3px,-3px); }
.faq-body{ padding:0 22px 20px; font-size:var(--fs-md); color:var(--t-2); line-height:1.68; }

/* ════════════════════════════════════════════════════════════════════
   16 · ФИНАЛЬНЫЙ ПРИЗЫВ И ФОРМА
   ════════════════════════════════════════════════════════════════════ */
.final{
  border-radius:var(--r-4); overflow:hidden;
  background:
    radial-gradient(760px 400px at 88% 8%, rgba(140,187,236,.20), transparent 62%),
    linear-gradient(150deg, var(--ink), #1B2E4B);
  color:var(--t-inv);
  display:grid; gap:clamp(28px,3vw,52px); grid-template-columns:minmax(0,1fr);
  padding:clamp(30px,3.6vw,54px);
}
@media (min-width:940px){ .final{ grid-template-columns:minmax(0,1fr) 400px; align-items:start; } }
.final h2{ color:var(--t-inv); font-size:var(--fs-d2); line-height:1.12; max-width:16ch; }
.final-lead{ margin-top:16px; font-size:var(--fs-lead); color:rgba(234,241,249,.76); line-height:1.6; max-width:48ch; }
.final-list{ margin-top:26px; display:flex; flex-direction:column; gap:12px; }
.final-list li{ position:relative; padding-left:26px; font-size:var(--fs-md); color:rgba(234,241,249,.86); line-height:1.5; }
.final-list li svg{ position:absolute; left:0; top:2px; width:17px; height:17px; color:var(--acc-bright); }
.final-form{
  background:var(--surf); border-radius:var(--r-3); padding:26px;
  box-shadow:var(--ev-5); color:var(--t-2);
}
.final-form h3{ font-size:var(--fs-xl); }
.final-form .field{ margin-top:14px; }
.form-ok{
  margin-top:16px; padding:14px 16px; border-radius:var(--r-2);
  background:var(--acc-sk); color:var(--acc-ink);
  font-size:var(--fs-md); line-height:1.55; font-weight:var(--fw-medium);
}
.form-err{
  margin-top:16px; padding:14px 16px; border-radius:var(--r-2);
  background:var(--warn-sk); color:var(--warn-ink);
  font-size:var(--fs-md); line-height:1.55;
}
.form-err a{ color:var(--warn-ink); text-decoration:underline; }
.final-note{ margin-top:14px; font-size:var(--fs-sm); color:var(--t-3); line-height:1.55; }

/* ════════════════════════════════════════════════════════════════════
   17 · ЖИВЫЕ МАКЕТЫ КАБИНЕТА (.mk)
   Не скриншоты, а разметка на тех же токенах, что и приложение.
   Плюсы: не устаревает от смены шрифта, весит килобайты, читается
   на любой ширине и доступна скринридеру как «изображение с подписью»
   (роль img + aria-label на контейнере).
   Кегли внутри макета намеренно МЕНЬШЕ кабинетных: это уменьшенная
   копия экрана, а не интерфейс — здесь шкала --fs-* не действует.
   ════════════════════════════════════════════════════════════════════ */
.mk{
  border-radius:var(--r-3); border:1px solid var(--line-2);
  background:var(--surf); box-shadow:var(--ev-4); overflow:hidden;
}
.mk-sm{ box-shadow:var(--ev-2); border-radius:var(--r-2); }

.mk-bar{
  display:flex; align-items:center; gap:8px; height:32px; padding:0 12px;
  background:var(--surf-2); border-bottom:1px solid var(--line);
}
.mk-dots{ display:flex; gap:5px; flex:none; }
.mk-dots i{ width:8px; height:8px; border-radius:50%; background:var(--surf-3); }
.mk-url{
  flex:1; height:19px; border-radius:6px; background:var(--surf);
  border:1px solid var(--line); display:flex; align-items:center; gap:5px;
  padding:0 8px; font-size:10px; color:var(--t-4); min-width:0;
}
.mk-url svg{ width:10px; height:10px; flex:none; color:var(--acc-soft); }

.mk-body{ display:flex; background:var(--bg); min-height:280px; }
.mk-side{
  width:134px; flex:none; background:var(--surf); border-right:1px solid var(--line);
  padding:10px 8px 12px; display:flex; flex-direction:column;
}
.mk-logo{ display:flex; align-items:center; gap:7px; padding:2px 4px 12px; }
.mk-logo i{
  width:22px; height:22px; flex:none; border-radius:7px; display:grid; place-items:center;
  background:linear-gradient(160deg, var(--acc-soft), var(--acc-d)); color:var(--on-acc);
  font-family:var(--font-display); font-weight:800; font-size:11px; font-style:normal;
}
.mk-logo b{ font-family:var(--font-display); font-size:11px; font-weight:800; color:var(--t-1); display:block; line-height:1.1; }
.mk-logo s{ display:block; text-decoration:none; font-size:7px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--t-4); white-space:nowrap; }
.mk-nav{ display:flex; flex-direction:column; gap:1px; }
.mk-nav a{
  display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:7px;
  font-size:11px; color:var(--t-3); position:relative;
}
.mk-nav a svg{ width:13px; height:13px; flex:none; color:var(--t-4); }
.mk-nav a.is-on{ background:var(--acc-sk); color:var(--acc-ink); font-weight:var(--fw-semibold); }
.mk-nav a.is-on svg{ color:var(--acc-ink); }
.mk-nav .gr{
  margin:9px 8px 3px; font-size:7px; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--t-4);
}

.mk-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.mk-top{
  display:flex; align-items:center; gap:8px; padding:8px 14px;
  border-bottom:1px solid var(--line); background:rgba(244,248,252,.7);
}
.mk-chip{
  display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:var(--r-pill);
  background:var(--surf); border:1px solid var(--line-2); font-size:10px; color:var(--t-3);
}
.mk-chip.warm{ background:var(--warn-sk); border-color:transparent; color:var(--warn-ink); }
.mk-chip svg{ width:10px; height:10px; }
.mk-search{
  margin-left:auto; display:flex; align-items:center; gap:6px; min-width:120px;
  padding:4px 9px; border-radius:8px; background:var(--surf); border:1px solid var(--line-2);
  font-size:10px; color:var(--t-4);
}
.mk-search svg{ width:11px; height:11px; }
.mk-page{ padding:13px 14px 16px; display:flex; flex-direction:column; gap:9px; flex:1; }
.mk-h1{ font-family:var(--font-display); font-size:15px; font-weight:800; color:var(--t-1); line-height:1.15; letter-spacing:-.02em; }
.mk-sub{ font-size:10px; color:var(--t-4); margin-top:2px; }
.mk-head{ display:flex; align-items:flex-end; gap:8px; }
.mk-head .mk-btn{ margin-left:auto; }
.mk-btn{
  display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:8px;
  background:var(--acc); color:var(--on-acc); font-size:10px; font-weight:var(--fw-semibold);
  box-shadow:var(--ev-brand); flex:none;
}
.mk-btn svg{ width:11px; height:11px; }
.mk-btn-g{ background:var(--surf); color:var(--t-2); border:1px solid var(--line-2); box-shadow:none; }

.mk-kpis{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.mk-kpi{ background:var(--surf); border:1px solid var(--line); border-radius:10px; padding:9px 10px; box-shadow:var(--ev-1); }
.mk-kpi-l{ font-size:8px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--t-4); }
.mk-kpi-n{ font-family:var(--font-display); font-size:19px; font-weight:800; color:var(--t-1); line-height:1; margin-top:5px; font-variant-numeric:tabular-nums; }
.mk-kpi-n.warm{ color:var(--warn-ink); }
.mk-kpi-c{ font-size:9px; color:var(--t-4); margin-top:4px; }

.mk-cols{ display:grid; gap:8px; grid-template-columns:1.55fr 1fr; align-items:start; }
.mk-cols-e{ grid-template-columns:1fr 1fr; }
.mk-card{ background:var(--surf); border:1px solid var(--line); border-radius:11px; padding:10px 12px; box-shadow:var(--ev-1); }
.mk-l{ font-size:8px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--t-4); display:flex; align-items:center; }
.mk-l span{ margin-left:auto; font-weight:600; letter-spacing:0; text-transform:none; font-size:9px; }
.mk-row{ display:flex; align-items:center; gap:8px; padding:7px 0; border-top:1px solid var(--line); }
.mk-row:first-of-type{ border-top:0; padding-top:9px; }
.mk-av{
  width:21px; height:21px; flex:none; border-radius:7px; display:grid; place-items:center;
  background:var(--acc-sk); color:var(--acc-ink); font-size:9px; font-weight:700;
}
.mk-av.warm{ background:var(--warn-sk); color:var(--warn-ink); }
.mk-row > span{ min-width:0; }
.mk-nm{ display:block; font-size:11px; font-weight:var(--fw-semibold); color:var(--t-1); line-height:1.25; }
.mk-mt{ display:block; font-size:9px; color:var(--t-4); margin-top:1px; line-height:1.35; }
.mk-tail{ margin-left:auto; display:flex; align-items:center; gap:6px; font-size:9px; color:var(--t-3); flex:none; }
.mk-tail svg{ width:11px; height:11px; color:var(--t-4); }
.mk-st{ display:inline-flex; align-items:center; gap:5px; font-size:9px; color:var(--t-3); }
.mk-st i{ width:6px; height:6px; border-radius:50%; background:var(--neutral); flex:none; }
.mk-st.ok i{ background:var(--acc); }
.mk-st.warn i{ background:var(--warn-bright); }
.mk-st.bad i{ background:var(--danger); }
.mk-num{ font-variant-numeric:tabular-nums; font-size:10px; font-weight:var(--fw-semibold); color:var(--t-1); }

.mk-acc{
  background:linear-gradient(160deg, var(--acc), var(--acc-d)); color:#fff;
  border-radius:11px; padding:11px 12px; box-shadow:var(--ev-brand);
}
.mk-acc .mk-l{ color:rgba(255,255,255,.7); }
.mk-acc-n{ font-family:var(--font-display); font-size:20px; font-weight:800; line-height:1; margin-top:6px; font-variant-numeric:tabular-nums; }
.mk-acc-c{ font-size:9px; color:rgba(255,255,255,.8); margin-top:4px; }
.mk-track{ height:5px; border-radius:3px; background:rgba(255,255,255,.26); margin-top:10px; overflow:hidden; }
.mk-track i{ display:block; height:100%; background:#fff; border-radius:3px; width:0; }
.mk-acc .mk-row{ border-color:rgba(255,255,255,.18); font-size:10px; }
.mk-acc .mk-nm{ color:#fff; font-weight:var(--fw-medium); font-size:10px; }
.mk-acc .mk-num{ color:#fff; }

/* ── Календарь недели ── */
.mk-cal{ display:grid; grid-template-columns:26px repeat(5,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.mk-cal > *{ background:var(--surf); min-height:19px; padding:3px 4px; font-size:8px; color:var(--t-4); }
.mk-cal .hd{ background:var(--surf-2); font-weight:700; text-align:center; color:var(--t-3); font-size:8px; }
.mk-cal .hr{ text-align:right; color:var(--t-4); font-size:7px; padding-top:2px; }
.mk-ev{
  background:var(--acc-sk) !important; border-left:2px solid var(--acc);
  color:var(--acc-ink); font-weight:600; font-size:8px; line-height:1.25; border-radius:3px;
}
.mk-ev.pale{ background:var(--surf-2) !important; border-left-color:var(--control-off); color:var(--t-4); font-weight:500; }
.mk-ev.warm{ background:var(--warn-sk) !important; border-left-color:var(--warn-bright); color:var(--warn-ink); }

/* ── Вкладки карточки клиента ── */
.mk-tabs{ display:flex; gap:3px; border-bottom:1px solid var(--line); padding:0 0 7px; overflow:hidden; }
.mk-tabs span{ padding:4px 8px; border-radius:6px; font-size:9px; color:var(--t-4); white-space:nowrap; }
.mk-tabs span.is-on{ background:var(--acc-sk); color:var(--acc-ink); font-weight:600; }

/* ── Схема случая: связка блоков ── */
.mk-flow{ display:flex; flex-direction:column; gap:5px; }
.mk-flow-i{
  border:1px solid var(--line); border-left:3px solid var(--acc-soft); border-radius:7px;
  padding:6px 9px; background:var(--surf);
}
.mk-flow-i b{ display:block; font-size:8px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--t-4); }
.mk-flow-i span{ font-size:10px; color:var(--t-2); line-height:1.35; }
.mk-flow-a{ display:grid; place-items:center; color:var(--acc-soft); height:9px; }
.mk-flow-a svg{ width:11px; height:11px; }

/* ── Поддерживающий цикл ── */
.mk-cycle{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.mk-cycle div{
  border:1px solid var(--line); border-radius:8px; padding:7px 8px; background:var(--surf);
  font-size:9px; color:var(--t-2); line-height:1.35; position:relative;
}
.mk-cycle div b{ display:block; font-size:8px; color:var(--t-4); font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:2px; }

/* ── Строки библиотеки техник ── */
.mk-lib{ display:flex; flex-direction:column; }
.mk-lib .mk-row .ic{
  width:21px; height:21px; flex:none; border-radius:7px; display:grid; place-items:center;
  background:var(--surf-2); color:var(--t-3);
}
.mk-lib .mk-row .ic svg{ width:12px; height:12px; }

/* ── Помощник «Маяк» ── */
.mk-chat{ display:flex; flex-direction:column; gap:7px; }
.mk-msg{ max-width:88%; padding:7px 10px; border-radius:11px; font-size:10px; line-height:1.45; }
.mk-msg.you{ align-self:flex-end; background:var(--acc); color:#fff; border-bottom-right-radius:4px; }
.mk-msg.bot{ background:var(--surf-2); color:var(--t-2); border-bottom-left-radius:4px; border:1px solid var(--line); }
.mk-msg b{ font-weight:var(--fw-semibold); color:inherit; }
.mk-prev{
  margin-top:6px; padding:7px 9px; border-radius:8px; background:var(--surf);
  border:1px dashed var(--acc-bd); font-size:9px; color:var(--t-3); line-height:1.4;
}
.mk-prev b{ color:var(--acc-ink); }

/* ── Ведение встречи ── */
.mk-timer{
  display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px;
  background:var(--ink); color:var(--t-inv);
}
.mk-timer .t{ font-family:var(--font-display); font-size:15px; font-weight:800; font-variant-numeric:tabular-nums; }
.mk-timer .c{ font-size:9px; color:rgba(234,241,249,.66); }
.mk-timer .rec{ width:7px; height:7px; border-radius:50%; background:var(--danger); flex:none; }

/* ── Деньги ── */
.mk-money{ display:flex; flex-direction:column; }
.mk-money .mk-row .amt{ margin-left:auto; font-size:10px; font-weight:700; color:var(--t-1); font-variant-numeric:tabular-nums; }
.mk-money .mk-row.wait{ background:var(--warn-sk); margin:0 -12px; padding-left:12px; padding-right:12px; }

/* ── Тесты: шкала ── */
.mk-scale{ display:flex; align-items:flex-end; gap:3px; height:38px; margin-top:8px; }
.mk-scale i{ flex:1; background:var(--acc-sk-2); border-radius:2px 2px 0 0; }
.mk-scale i.on{ background:var(--acc); }

/* Подпись под макетом */
.mk-cap{ margin-top:10px; font-size:var(--fs-sm); color:var(--t-quiet); line-height:1.5; }

@media (max-width:560px){
  .mk-side{ display:none; }
  .mk-kpis{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mk-cols{ grid-template-columns:1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   18 · ДВИЖЕНИЕ
   Сборка макета в первом экране: элементы приезжают по очереди —
   это показывает, что кабинет собирается из частей, а не «просто картинка».
   ════════════════════════════════════════════════════════════════════ */
@keyframes mkRise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes mkFade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-7px); } }
@keyframes pulseDot{
  0%{ box-shadow:0 0 0 0 rgba(201,138,46,.5); }
  70%{ box-shadow:0 0 0 7px rgba(201,138,46,0); }
  100%{ box-shadow:0 0 0 0 rgba(201,138,46,0); }
}
@keyframes barGrow{ from{ width:0; } }
@keyframes drawLine{ to{ stroke-dashoffset:0; } }

.js-motion .hero-stage .mk-kpi,
.js-motion .hero-stage .mk-card,
.js-motion .hero-stage .mk-acc{
  opacity:0; animation:mkRise .62s var(--ease-rv) forwards;
  animation-delay:calc(240ms + var(--i,0) * 90ms);
}
.js-motion .hero-stage .mk-side{ opacity:0; animation:mkFade .5s var(--ease) .1s forwards; }
.hero-stage .mk-track i{ width:62%; }
.js-motion .hero-stage .mk-track i{ animation:barGrow 1.5s var(--ease-rv) .9s backwards; }
.mk-kpi-n.warm::after{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:var(--warn-bright); margin-left:6px; vertical-align:middle;
  animation:pulseDot 2.6s ease-out 1.6s infinite;
}
.hero-horizon path{ stroke-dasharray:1400; stroke-dashoffset:0; }
.js-motion .hero-horizon path{ stroke-dashoffset:1400; animation:drawLine 2.6s var(--ease-rv) .2s forwards; }

/* Бегущая строка техник — тихая, медленная, останавливается по наведению */
.ticker{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.ticker-in{ display:flex; gap:10px; width:max-content; animation:tick 64s linear infinite; }
.ticker:hover .ticker-in{ animation-play-state:paused; }
@keyframes tick{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.ticker .tag{ flex:none; }

@media (prefers-reduced-motion: reduce){
  .js-motion .hero-stage .mk-kpi,
  .js-motion .hero-stage .mk-card,
  .js-motion .hero-stage .mk-acc,
  .js-motion .hero-stage .mk-side{ opacity:1 !important; animation:none !important; }
  .js-motion .hero-stage .mk-track i{ animation:none; }
  .js-motion .hero-horizon path{ stroke-dashoffset:0; animation:none; }
  .ticker-in{ animation:none; }
  .mk-kpi-n.warm::after{ animation:none; }
}

/* ════════════════════════════════════════════════════════════════════
   19 · СХЕМЫ И ДИАГРАММЫ
   Рисунки, которые объясняют устройство продукта быстрее абзаца.
   Все — разметка и SVG на токенах кабинета: масштабируются, читаются
   в тёмной секции, не весят ничего и правятся текстом.
   ════════════════════════════════════════════════════════════════════ */

/* ── Схема «одна запись — четыре следствия» ── */
.onerec{
  display:grid; gap:var(--gap); align-items:center;
  grid-template-columns:minmax(0,1fr);
  padding:clamp(22px,2.6vw,34px);
  border-radius:var(--r-3); border:1px solid var(--acc-bd);
  background:linear-gradient(150deg, var(--acc-sk), var(--surf) 58%);
}
@media (min-width:900px){ .onerec{ grid-template-columns:250px 56px minmax(0,1fr); } }
.onerec-src{
  background:var(--surf); border:1px solid var(--line-2); border-radius:var(--r-2);
  box-shadow:var(--ev-2); padding:16px 18px;
}
.onerec-lab{
  font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--acc-ink);
}
.onerec-src h4{ margin-top:8px; font-size:var(--fs-xl); }
.onerec-src p{ margin-top:6px; font-size:var(--fs-base); color:var(--t-3); line-height:1.5; }
/* Веер связей: пропорции у SVG вытянутые (52×120), и квадратный размер
   сминал его в закорючку — задаём высоту честно. */
.onerec-fan{ display:grid; place-items:center; color:var(--acc-soft); align-self:stretch; }
.onerec-fan svg{ width:52px; height:min(150px, 100%); }
@media (max-width:899px){
  .onerec-fan{ align-self:auto; }
  .onerec-fan svg{ transform:rotate(90deg); width:44px; height:44px; }
}
.onerec-out{ display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:560px){ .onerec-out{ grid-template-columns:1fr; } }
.onerec-i{
  display:flex; gap:11px; align-items:flex-start;
  background:var(--surf); border:1px solid var(--line); border-radius:var(--r-2);
  padding:12px 14px; box-shadow:var(--ev-1);
}
.onerec-i .ic-wrap{
  width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center;
  background:var(--acc-sk); color:var(--acc-ink);
}
.onerec-i .ic-wrap svg{ width:16px; height:16px; }
.onerec-i b{ display:block; font-size:var(--fs-md); color:var(--t-1); font-weight:var(--fw-semibold); }
.onerec-i span{ display:block; margin-top:2px; font-size:var(--fs-sm); color:var(--t-3); line-height:1.45; }

/* ── Удержание: 16 встреч протокола против 3—5 реальных ── */
.retain{ padding:clamp(22px,2.6vw,32px); }
.retain-row{ display:flex; flex-direction:column; gap:18px; }
.retain-line{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.retain-cap{ min-width:190px; font-size:var(--fs-md); color:var(--t-2); font-weight:var(--fw-semibold); }
.retain-dots{ display:flex; gap:5px; flex-wrap:wrap; }
.retain-dots i{
  width:16px; height:16px; border-radius:5px; display:block;
  background:var(--surf-3); border:1px solid var(--line);
}
.retain-dots i.on{ background:var(--acc); border-color:transparent; }
.retain-dots i.gone{ background:var(--surf-2); border-style:dashed; }
.retain-note{
  margin-top:18px; padding-top:16px; border-top:1px solid var(--line);
  font-size:var(--fs-md); color:var(--t-2); line-height:1.65;
}
.retain-note b{ color:var(--t-1); }

/* ── Что видит терапевт и что уходит клиенту ── */
.split{ display:grid; gap:var(--gap); grid-template-columns:minmax(0,1fr); }
@media (min-width:860px){ .split{ grid-template-columns:minmax(0,1fr) 74px minmax(0,1fr); align-items:stretch; } }
.split-col{ display:flex; flex-direction:column; }
.split-col ul{ flex:1; }
.split-col{ padding:22px 24px; }
.split-col h4{ font-size:var(--fs-lg); display:flex; align-items:center; gap:9px; }
.split-col h4 svg{ width:18px; height:18px; }
.split-mine h4{ color:var(--t-1); }
.split-mine h4 svg{ color:var(--t-3); }
.split-theirs{ border-color:var(--acc-bd); background:linear-gradient(160deg, var(--acc-sk), var(--surf) 62%); }
.split-theirs h4{ color:var(--acc-ink); }
.split-theirs h4 svg{ color:var(--acc-ink); }
.split-col ul{ margin-top:14px; display:flex; flex-direction:column; gap:9px; }
.split-col li{ font-size:var(--fs-md); color:var(--t-2); line-height:1.5; padding-left:18px; position:relative; }
.split-col li::before{
  content:""; position:absolute; left:2px; top:8px; width:6px; height:6px; border-radius:50%;
  background:var(--control-off);
}
.split-theirs li::before{ background:var(--acc-soft); }
.split-gate{ display:grid; place-items:center; gap:6px; color:var(--acc-soft); }
.split-gate svg{ width:26px; height:26px; }
.split-gate span{
  font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--t-4); text-align:center;
}
@media (max-width:859px){ .split-gate svg{ transform:rotate(90deg); } }

/* ── Категория: не CRM и не МИС ── */
.cat{ display:grid; gap:var(--gap); grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px){ .cat{ grid-template-columns:1fr; } }
.cat-i{ padding:24px 26px; position:relative; }
.cat-i .cat-k{
  font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--t-4);
}
.cat-i h4{ margin-top:9px; font-size:var(--fs-xl); }
.cat-i p{ margin-top:8px; font-size:var(--fs-md); color:var(--t-3); line-height:1.6; }
.cat-us{
  border-color:transparent;
  background:linear-gradient(160deg, var(--acc), var(--acc-d));
  box-shadow:var(--ev-brand);
}
.cat-us .cat-k{ color:rgba(255,255,255,.72); }
.cat-us h4{ color:#fff; }
.cat-us p{ color:rgba(255,255,255,.9); }

/* ── Крупное утверждение между секциями ── */
.claim{
  padding:clamp(30px,3.6vw,52px) clamp(24px,3vw,44px);
  border-radius:var(--r-4); text-align:center;
  background:var(--surf); border:1px solid var(--line); box-shadow:var(--ev-2);
}
.claim p{
  font-family:var(--font-display); font-weight:var(--fw-bold);
  font-size:clamp(21px,2.6vw,34px); line-height:1.3; color:var(--t-1);
  letter-spacing:-.02em; max-width:22ch; margin:0 auto;
}
.claim p em{ font-style:normal; color:var(--acc-ink); }
.claim span{
  display:block; margin-top:16px; font-size:var(--fs-md); color:var(--t-3);
  line-height:1.6; max-width:52ch; margin-left:auto; margin-right:auto;
}

/* ── Экономика подписки ── */
.econ{ display:grid; gap:var(--gap); grid-template-columns:minmax(0,1fr); align-items:stretch; }
@media (min-width:860px){ .econ{ grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); } }
.econ-bars{ padding:24px 26px; display:flex; flex-direction:column; gap:20px; justify-content:center; }
.econ-b-cap{ display:flex; align-items:baseline; gap:10px; font-size:var(--fs-md); color:var(--t-2); }
.econ-b-cap b{ font-family:var(--font-display); font-size:var(--fs-2xl); font-weight:var(--fw-bold); color:var(--t-1); }
.econ-b-cap span{ margin-left:auto; font-size:var(--fs-sm); color:var(--t-quiet); }
.econ-bar{ height:14px; border-radius:7px; background:var(--surf-3); margin-top:8px; overflow:hidden; }
.econ-bar i{ display:block; height:100%; border-radius:7px; background:var(--acc); }
.econ-bar.is-small i{ background:var(--acc-soft); }
.econ-out{ padding:24px 26px; display:flex; flex-direction:column; justify-content:center; }
.econ-out p{ font-size:var(--fs-body); color:var(--t-2); line-height:1.65; }
.econ-out b{ color:var(--t-1); }

/* ── Чего мы не обещаем ── */
.nopromise{ display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:820px){ .nopromise{ grid-template-columns:1fr; } }
.nopromise li{
  display:flex; gap:12px; align-items:flex-start;
  padding:16px 18px; border-radius:var(--r-2);
  background:var(--surf); border:1px solid var(--line);
}
.nopromise li svg{ width:17px; height:17px; flex:none; margin-top:2px; color:var(--t-4); }
.nopromise b{ display:block; font-size:var(--fs-md); color:var(--t-1); font-weight:var(--fw-semibold); }
.nopromise span{ display:block; margin-top:3px; font-size:var(--fs-md); color:var(--t-3); line-height:1.55; }

/* ── Пометка «данные вымышлены» ── */
.demo-note{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 13px; border-radius:var(--r-pill);
  background:var(--surf-2); border:1px solid var(--line);
  font-size:var(--fs-sm); color:var(--t-quiet);
}
.demo-note svg{ width:14px; height:14px; color:var(--t-4); flex:none; }
.demo-note-c{ display:flex; justify-content:center; margin-top:18px; }

/* Появление точек удержания — по очереди, как капли */
@keyframes dotIn{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:none; } }
.js-motion .retain.is-in .retain-dots i{
  opacity:0; animation:dotIn .34s var(--spring) forwards;
  animation-delay:calc(var(--d, 0) * 55ms);
}
.js-motion .econ.is-in .econ-bar i{ animation:barGrow 1.1s var(--ease-rv) .15s backwards; }
@media (prefers-reduced-motion: reduce){
  .js-motion .retain.is-in .retain-dots i{ opacity:1; animation:none; }
  .js-motion .econ.is-in .econ-bar i{ animation:none; }
}

/* ════════════════════════════════════════════════════════════════════
   20 · ДОВОДКА ВИДА
   Мелочи, из которых складывается ощущение сделанной вещи: свет на
   поверхностях, мягкие края у прокруток, ритм между актами страницы,
   понятная позиция в длинном тексте.
   ════════════════════════════════════════════════════════════════════ */

/* ── Плашка-удостоверение над заголовком ── */
.hero-eyebrow{ padding:7px 16px 7px 7px; gap:11px; }
.hero-eyebrow .pip{
  width:26px; height:26px; border-radius:9px;
  background:linear-gradient(160deg, var(--acc-soft), var(--acc-d));
  color:var(--on-acc);
  font-family:var(--font-display); font-weight:800; font-size:var(--fs-base);
  box-shadow:0 3px 9px rgba(53,119,200,.34), inset 0 1px 0 rgba(255,255,255,.3);
}
.hero-eyebrow b{ color:var(--t-1); font-weight:var(--fw-semibold); }

/* ── Свет за макетом первого экрана: он выглядит поднятым над страницей ── */
.hero-stage::before{
  content:""; position:absolute; z-index:-1;
  left:6%; right:6%; top:12%; bottom:-6%;
  background:radial-gradient(60% 55% at 50% 45%, rgba(53,119,200,.20), transparent 72%);
  filter:blur(38px); pointer-events:none;
}
.hero-stage{ isolation:isolate; }

/* ── Карточки: подъём и угловой свет при наведении ──
      Один приём на все плитки, вместо разнобоя эффектов. */
@media (hover: hover){
  .tile, .fig, .side, .cat-i, .mess-card, .author, .onerec-i, .nopromise li{
    transition:transform var(--dur-2) var(--ease),
               box-shadow var(--dur-2) var(--ease),
               border-color var(--dur-2) var(--ease);
  }
  .tile:hover, .fig:hover, .side:hover, .cat-i:hover,
  .author:hover, .onerec-i:hover, .nopromise li:hover{
    transform:translateY(-3px);
    box-shadow:var(--ev-3);
    border-color:var(--line-2);
  }
  .mess-card:hover{ box-shadow:var(--ev-2); }
  .cat-us:hover{ box-shadow:0 10px 30px rgba(53,119,200,.34); border-color:transparent; }
  .tile-ink:hover{ border-color:rgba(255,255,255,.16); }

  /* Свет, входящий из правого верхнего угла */
  .tile, .fig, .side, .cat-i{ position:relative; isolation:isolate; }
  .tile::after, .fig::after, .side::after, .cat-i::after{
    content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
    background:radial-gradient(120% 100% at 100% 0%, var(--acc-sk), transparent 58%);
    opacity:0; transition:opacity var(--dur-3) var(--ease); pointer-events:none;
  }
  .tile:hover::after, .fig:hover::after, .side:hover::after, .cat-i:hover::after{ opacity:1; }
  .tile-ink::after, .cat-us::after{
    background:radial-gradient(120% 100% at 100% 0%, rgba(255,255,255,.10), transparent 58%);
  }
}

/* ── Колода: мягкие края вместо среза по границе ── */
.deck{
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 26px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 26px), transparent 100%);
}
@media (max-width:960px){
  .deck{ -webkit-mask-image:none; mask-image:none; }
}

/* ── Волна между актами страницы ── */
.wave-div{
  display:block; width:100%; height:44px; color:var(--acc);
  opacity:.13; margin:0; pointer-events:none;
}
.wave-div svg{ display:block; width:100%; height:100%; }

/* ── Полоса прочитанного: где я в длинной странице ── */
.progress{
  position:fixed; left:0; top:0; height:2px; z-index:70;
  background:linear-gradient(90deg, var(--acc-soft), var(--acc));
  width:0; transition:width 90ms linear; pointer-events:none;
}

/* ── Кнопка «наверх»: страница длинная, возвращаться пешком долго ── */
.totop{
  position:fixed; right:22px; bottom:22px; z-index:65;
  width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--surf); color:var(--acc-ink);
  border:1px solid var(--line-2); box-shadow:var(--ev-3);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease),
             visibility var(--dur-2);
}
.totop.is-on{ opacity:1; visibility:visible; transform:none; }
.totop:hover{ color:var(--acc); border-color:var(--acc-bd); }
.totop svg{ width:20px; height:20px; }
@media (max-width:600px){ .totop{ right:14px; bottom:14px; width:40px; height:40px; } }

/* ── Первая кнопка чуть богаче: она принимает главное решение страницы ── */
.btn-primary{
  background:linear-gradient(170deg, var(--acc-soft) -20%, var(--acc) 45%, var(--acc-d) 130%);
  box-shadow:0 6px 18px rgba(53,119,200,.28), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary:hover{
  background:linear-gradient(170deg, var(--acc) -20%, var(--acc-h) 55%, var(--acc-d) 130%);
  box-shadow:0 8px 22px rgba(53,119,200,.34), inset 0 1px 0 rgba(255,255,255,.2);
}

/* ── Ширина строки в лидах и абзацах: читается спокойнее ── */
.sec-lead, .fig-p, .side p, .tile p, .cat-i p{ max-width:62ch; }
.claim span{ max-width:56ch; }

@media (prefers-reduced-motion: reduce){
  .progress{ transition:none; }
  .totop{ transition:none; }
  .tile:hover, .fig:hover, .side:hover, .cat-i:hover,
  .author:hover, .onerec-i:hover, .nopromise li:hover{ transform:none; }
}

/* ── Балансировка строк в крупном тексте ──
   Заголовок из двух строк не должен разваливаться на «длинная строка +
   два слова», а у абзаца не должно оставаться слова-сироты на последней
   строке. Браузеры без поддержки просто игнорируют свойство. */
.hero-sec h1, .sec h2, .claim p, .slide h3, .side h3, .cat-i h4,
.fig-t, .day-step h3, .plan-name, .quote p{
  text-wrap:balance;
}
.hero-sub, .sec-lead, .fig-p, .tile p, .side p, .cat-i p,
.faq-body, .retain-note, .econ-out p, .author-b{
  text-wrap:pretty;
}
.hero-sub{ max-width:56ch; }