/* ChiPro - сайт. Токены взяты из приложения КОДАМИ (контракт оформления зафиксирован,
   память design-contract-locked): Manrope в display-заголовках, Inter в тексте,
   #089981/#F23645 направление, #2563EB симуляция, #E04F3F live. Подбирать на глаз нельзя.

   🔴 Igor msg 2238: акцент САЙТА = цвет Live (#E04F3F), а не синий. Синий в продукте означает
   СИМУЛЯЦИЮ, и красить им витрину было неверно: сайт продаёт живой сервис. Все акценты берут
   --c-accent; синий остаётся только там, где он и должен быть - на элементах симулятора. */
:root{
  --c-blue:#2563EB; --c-blue-l:#EEF4FF;
  --c-accent:#E04F3F; --c-accent-l:rgba(224,79,63,.10); --c-accent-sh:rgba(224,79,63,.18);
  /* accent/blue-ink - те же цвета для МЕЛКОГО текста, доведённые до контраста 4.5:1 (a11y). */
  --c-accent-ink:#C8412F; --c-blue-ink:#2563EB;
  --c-green:#089981; --c-green-ink:#067A68; --c-green-l:#E4F3EF; --c-green-line:#B7DED5;
  --c-red:#F23645;   --c-red-ink:#C92F3B;   --c-red-l:#FDE8EA;   --c-red-line:#F5BEC4;
  --c-live:#E04F3F;  --c-live-soft:rgba(224,79,63,.12); --c-live-line:rgba(224,79,63,.32);
  --c-orange:#F59E0B; --c-orange-l:#FEF3C7;

  --bg:#FFFFFF; --surface:#FFFFFF; --surface2:#F5F7FA; --inset:#F5F7FA;
  --ink:#111827; --ink2:#6B7280; --ink3:#6B7280; --line:#E5E7EB;
  /* чернила ЛОГОТИПА: на белом слово и слэш чёрные, на тёмном белые (правило Igor 09.09).
     Отдельно от --ink: интерфейсные чернила приглушены, логотипу они не годятся. */
  --logo-ink:#000000;
  --shadow-card:0 8px 24px rgba(0,0,0,.08);

  --font-ui:'Inter',-apple-system,system-ui,'Segoe UI',sans-serif;
  --font-display:'Manrope','Inter',-apple-system,sans-serif;
  --rad-card:24px; --rad-btn:20px; --rad-tag:16px;
  --wrap:1120px; --gutter:clamp(16px,4vw,32px);
  --t:.2s cubic-bezier(.4,0,.2,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0F1115; --surface:#171A21; --surface2:#1E222B; --inset:#1E222B;
    --ink:#F3F4F6; --ink2:#8B93A7; --ink3:#8B93A7; --line:rgba(255,255,255,.09);
    --logo-ink:#FFFFFF;
    --c-green-l:#18332E; --c-green-line:#24594F; --c-green-ink:#3CB9A4;
    --c-red-l:#351F25;   --c-red-line:#6A313A;   --c-red-ink:#FF747E;
    --c-blue-l:rgba(37,99,235,.18); --c-orange-l:rgba(245,158,11,.16);
    --c-live-soft:rgba(224,79,63,.22); --c-live-line:rgba(224,79,63,.40);
    --c-accent-l:rgba(224,79,63,.18); --c-accent-sh:rgba(224,79,63,.26);
    --shadow-card:0 8px 24px rgba(0,0,0,.35);
    --c-accent-ink:#EC6A5A; --c-blue-ink:#6B9BFF;
  }
}
:root[data-theme="dark"]{
  --bg:#0F1115; --surface:#171A21; --surface2:#1E222B; --inset:#1E222B;
  --ink:#F3F4F6; --ink2:#8B93A7; --ink3:#8B93A7; --line:rgba(255,255,255,.09);
  --logo-ink:#FFFFFF;
  --c-green-l:#18332E; --c-green-line:#24594F; --c-green-ink:#3CB9A4;
  --c-red-l:#351F25;   --c-red-line:#6A313A;   --c-red-ink:#FF747E;
  --c-blue-l:rgba(37,99,235,.18); --c-orange-l:rgba(245,158,11,.16);
  --c-live-soft:rgba(224,79,63,.22); --c-live-line:rgba(224,79,63,.40);
  --c-accent-l:rgba(224,79,63,.18); --c-accent-sh:rgba(224,79,63,.26);
  --shadow-card:0 8px 24px rgba(0,0,0,.35);
  --c-accent-ink:#EC6A5A; --c-blue-ink:#6B9BFF;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-block-start:76px;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{animation:none!important;transition:none!important;} }
body{font-family:var(--font-ui);background:var(--bg);color:var(--ink);
  font-size:15px;line-height:21px;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
h1,h2,h3{font-family:var(--font-display);font-weight:700;letter-spacing:-.018em;}
a{color:inherit;text-decoration:none;}
svg{display:block;}
.num{font-variant-numeric:tabular-nums;}
.wrap{max-inline-size:var(--wrap);margin-inline:auto;padding-inline:var(--gutter);}
.eyebrow{font-size:10px;line-height:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink3);}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px;border-radius:6px;}
.skip{position:absolute;inset-block-start:-60px;inset-inline-start:12px;background:var(--ink);color:var(--bg);
  padding:10px 16px;border-radius:12px;z-index:100;transition:inset-block-start var(--t);}
.skip:focus{inset-block-start:12px;}

/* ===== ШАПКА ===== */
.hdr{position:sticky;inset-block-start:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-block-end:1px solid var(--line);}
.hdr .in{display:flex;align-items:center;gap:26px;block-size:64px;}
.brand{display:flex;align-items:center;}
/* логотип ChiPro: утверждённый горизонтальный локап целиком (знак + надпись кривыми).
   Пропорции мастер-файла 688.96:120.17 не трогаем - высота задана, ширина посчитана из неё. */
.brand .lg{inline-size:149px;block-size:26px;flex:0 0 auto;color:var(--logo-ink);}
.fcol .brand .lg{inline-size:137px;block-size:24px;}
.nav{display:flex;gap:22px;margin-inline-start:auto;font-size:14px;font-weight:500;color:var(--ink2);}
.nav a{transition:color var(--t);} .nav a:hover{color:var(--ink);}
.hdr .act{display:flex;align-items:center;gap:10px;margin-inline-start:auto;}
.nav + .act{margin-inline-start:0;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:var(--rad-btn);font-size:14px;font-weight:600;
  border:1px solid transparent;cursor:pointer;transition:transform .12s ease,opacity var(--t),background var(--t);white-space:nowrap;}
.btn:active{transform:scale(.98);}
.btn.pri{background:var(--c-accent);color:#fff;}
.btn.pri:hover{opacity:.9;}
.btn.sec{background:transparent;color:var(--ink);border-color:var(--line);}
.btn.sec:hover{background:var(--surface2);}
.btn.lg{padding:15px 26px;font-size:16px;}
.thm{inline-size:38px;block-size:38px;border-radius:12px;border:1px solid var(--line);
  background:transparent;color:var(--ink2);display:grid;place-content:center;cursor:pointer;font-size:15px;}
.thm:hover{color:var(--ink);background:var(--surface2);}
.ti{inline-size:19px;block-size:19px;flex:0 0 auto;}      /* значок темы: луна или солнце */
.nav a.on{color:var(--ink);font-weight:600;}                      /* активный раздел при прокрутке */

/* бургер и мобильное меню (Igor msg 2239): до 900px шапка = логотип + «Открыть» + бургер */
.burger{display:none;inline-size:40px;block-size:40px;border-radius:12px;border:1px solid var(--line);
  background:transparent;cursor:pointer;padding:11px 10px;flex-direction:column;justify-content:space-between;}
.burger span{display:block;block-size:2px;inline-size:100%;background:var(--ink);border-radius:2px;
  transition:transform var(--t),opacity var(--t);}
body.menu-on .burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.menu-on .burger span:nth-child(2){opacity:0;}
body.menu-on .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobcta{display:none;}
/* 13.08 (Igor, разбор верхней навигации): в шапке не было входа вовсе - вернувшийся платящий
   пользователь не понимал, куда нажать. «Войти» - текстовая ссылка, а не вторая кнопка: главное
   действие в шапке должно оставаться одно. Вошедшего /login сам уводит в кабинет. */
.navlogin{font-size:14px;font-weight:500;color:var(--ink2);padding:8px 4px;white-space:nowrap;}
.navlogin:hover{color:var(--ink);}
.ld2 .navlogin{color:var(--text-secondary);}
.ld2 .navlogin:hover{color:var(--text-primary);}
.mscrim{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.34);opacity:0;transition:opacity var(--t);}
body.menu-on .mscrim{opacity:1;}
.mmenu{position:fixed;z-index:70;inset-block-start:64px;inset-inline:12px;padding:10px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-card);
  box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:2px;
  transform:translateY(-8px);opacity:0;transition:opacity var(--t),transform var(--t);}
body.menu-on .mmenu{transform:none;opacity:1;pointer-events:auto;}
/* 🔴 20.08 (Igor: «нажимаю Проверить на /verify - открывается Личный кабинет»).
   Закрытое меню оставалось КЛИКАБЕЛЬНЫМ поверх страницы: атрибут `hidden` даёт display:none
   только из стилей браузера, а `.mmenu{display:flex}` их перебивает - прозрачная панель висела
   сверху (z-index 70) и ловила тапы, отправляя в свой первый пункт. Плюс окно в 200 мс между
   снятием класса и простановкой `hidden` при закрытии - там же.
   Лечим двумя независимыми способами: атрибут снова работает, и до открытия панель не берёт
   события вовсе. */
.mmenu[hidden],.mscrim[hidden]{display:none;}
.mmenu,.mscrim{pointer-events:none;}
body.menu-on .mscrim{pointer-events:auto;}
.mmenu a{padding:14px 16px;border-radius:16px;font-size:16px;font-weight:500;color:var(--ink2);}
.mmenu a.on{background:var(--c-accent-l);color:var(--c-accent-ink);font-weight:600;}
.mmenu a:active{background:var(--surface2);}
/* разделитель - отдельной линией на контейнере, а не рамкой кнопки: border на самой кнопке
   выглядел подчёркиванием, а обводка фокуса Safari дорисовывала вокруг него прямоугольник */
.mmenu .msep{block-size:1px;background:var(--line);margin:8px 10px 6px;}
.mthm{background:transparent;color:var(--ink2);font:inherit;font-size:16px;font-weight:500;cursor:pointer;
  display:flex;align-items:center;gap:12px;padding:14px 16px;border:0;border-radius:16px;text-align:start;}
.mthm:active{color:var(--ink);background:var(--surface2);}
/* Safari на iOS оставляет кольцо фокуса после ТАПА. Гасим его для указателя, для клавиатуры
   (:focus-visible) оставляем - и скругляем, чтобы оно совпадало с формой элемента. */
.mmenu,.mmenu a,.mthm,.burger{-webkit-tap-highlight-color:transparent;}
.mthm:focus:not(:focus-visible),.mmenu a:focus:not(:focus-visible),.burger:focus:not(:focus-visible){outline:none;}
.mthm:focus-visible,.mmenu a:focus-visible{outline:2px solid var(--c-accent);outline-offset:-2px;border-radius:16px;}

@media(max-width:900px){
  .nav{display:none;}
  .burger{display:flex;}
  .deskcta{display:none;}
  .mobcta{display:inline-flex;padding:11px 16px;}
  .thm{display:none;}                                             /* тема переехала внутрь меню */
  .hdr .in{gap:12px;}
  .nav + .act{margin-inline-start:auto;}   /* .nav скрыт, но остаётся в DOM - без этого группа
                                              кнопок прилипала к логотипу, а справа зияла пустота */
}
@media(min-width:901px){ .mmenu,.mscrim{display:none!important;} }
/* На совсем узких телефонах (SE и подобные) логотип чуть мельче - надпись теперь часть
   рисунка и отдельно не прячется: резать мастер-файл нельзя (правило Igor 09.09). */
@media(max-width:360px){ .hdr .brand .lg{inline-size:126px;block-size:22px;} }

/* ===== ГЕРОЙ ===== */
.hero{padding-block:clamp(44px,7vw,84px) clamp(36px,6vw,64px);}
.hero .in{display:grid;gap:clamp(32px,5vw,56px);grid-template-columns:1fr;align-items:center;}
@media(min-width:940px){ .hero .in{grid-template-columns:1.05fr .95fr;} }
.hero h1{font-size:clamp(32px,5.4vw,52px);line-height:1.08;letter-spacing:-.028em;}
.hero .lead{margin-block-start:18px;font-size:clamp(16px,1.6vw,18px);line-height:1.55;color:var(--ink2);max-inline-size:52ch;}
.hero .cta{margin-block-start:28px;display:flex;flex-wrap:wrap;gap:12px;}
.hero .fine{margin-block-start:14px;font-size:12px;line-height:17px;color:var(--ink3);}
.trust{margin-block-start:26px;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:12px;color:var(--ink2);}
.trust span{display:flex;align-items:center;gap:7px;}
.trust i{inline-size:5px;block-size:5px;border-radius:50%;background:var(--c-green);display:block;}

/* карточка сигнала - тот же язык, что в приложении и в канале */
.shot{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-card);
  box-shadow:var(--shadow-card);padding:18px 18px 16px;max-inline-size:440px;inline-size:100%;margin-inline:auto;}
.shot .top{display:flex;align-items:center;gap:10px;}
.shot .sym{font-size:14px;line-height:18px;font-weight:600;text-transform:uppercase;}
.pill{font-size:10px;line-height:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 9px;border-radius:var(--rad-tag);}
.pill.long{background:var(--c-green-l);color:var(--c-green-ink);border:1px solid var(--c-green-line);}
/* 🐞 29.07: класса .pill.short не было вовсе - на витрине стоял только LONG-пример, и SHORT
   рисовался голым текстом без подложки (видно на пломбе #0063). Токены те же, что у направления. */
.pill.short{background:var(--c-red-l);color:var(--c-red-ink);border:1px solid var(--c-red-line);}
.pill.q{background:var(--c-accent-l);color:var(--c-accent-ink);margin-inline-start:auto;border:1px solid transparent;}
.shot .px{margin-block-start:12px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
.shot .px b{font-size:24px;line-height:28px;font-weight:700;letter-spacing:-.012em;}
.shot .px s{font-size:12px;color:var(--c-green-ink);text-decoration:none;font-weight:600;}
.shot .cv{margin-block-start:12px;border-radius:14px;overflow:hidden;background:var(--inset);}
.shot .grid3{margin-block-start:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.shot .kv{background:var(--inset);border-radius:14px;padding:10px 11px;}
.shot .kv .k{font-size:10px;line-height:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);}
.shot .kv .v{margin-block-start:5px;font-size:14px;line-height:18px;font-weight:600;}
.shot .seal{margin-block-start:12px;padding:10px 12px;border-radius:14px;background:var(--c-accent-l);
  font-size:11px;line-height:16px;color:var(--ink2);overflow-wrap:break-word;}
.shot .seal b{color:var(--ink);font-weight:600;}
.shot .seal code{font-family:ui-monospace,Menlo,Consolas,monospace;word-break:break-all;}

/* ===== СЕКЦИИ ===== */
section{padding-block:clamp(44px,6vw,76px);}
section.alt{background:var(--surface2);}
.shead{max-inline-size:64ch;}
.shead h2{margin-block-start:10px;font-size:clamp(24px,3.2vw,34px);line-height:1.15;}
.shead p{margin-block-start:12px;font-size:16px;line-height:24px;color:var(--ink2);}
.cards{margin-block-start:32px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-card);
  padding:22px 22px 24px;box-shadow:var(--shadow-card);}
.card .n{inline-size:30px;block-size:30px;border-radius:10px;background:var(--inset);color:var(--ink2);
  display:grid;place-content:center;font-size:13px;font-weight:700;}
.card h3{margin-block-start:14px;font-size:17px;line-height:22px;font-weight:600;letter-spacing:normal;font-family:var(--font-ui);}
.card p{margin-block-start:8px;font-size:14px;line-height:21px;color:var(--ink2);}

/* ===== БЛОКИ ТЕКСТА Igor msg 2237 ===== */
.wide{margin-block-start:16px;font-size:16px;line-height:25px;color:var(--ink2);max-inline-size:74ch;}
.sub{margin-block-start:34px;font-size:19px;line-height:26px;font-weight:600;
  font-family:var(--font-ui);letter-spacing:normal;}
.lbl{font-size:14px;line-height:20px;font-weight:600;color:var(--ink);}
.twocol{margin-block-start:28px;display:grid;gap:20px;grid-template-columns:1fr;align-items:start;}
@media(min-width:840px){ .twocol{grid-template-columns:1fr 1fr;gap:32px;} }
.blist{margin-block-start:12px;display:flex;flex-direction:column;gap:10px;list-style:none;}
.blist li{position:relative;padding-inline-start:20px;font-size:15px;line-height:23px;color:var(--ink2);}
.blist li::before{content:"";position:absolute;inset-inline-start:2px;inset-block-start:9px;
  inline-size:6px;block-size:6px;border-radius:50%;background:var(--c-accent);}
.blist li b{color:var(--ink);font-weight:600;}
.note{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-card);
  padding:22px 24px;box-shadow:var(--shadow-card);}
.note p{font-size:15px;line-height:23px;color:var(--ink2);}
.note p + p{margin-block-start:12px;}
.note .btn{margin-block-start:18px;}
.pull{margin-block-start:22px;padding-inline-start:16px;border-inline-start:3px solid var(--c-accent);
  font-size:17px;line-height:26px;font-weight:600;color:var(--ink);max-inline-size:60ch;}

/* риск/прибыль: стоп 0,2-0,3 ATR против цели ~1 ATR */
.rrviz{margin-block-start:24px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rad-card);padding:22px 24px;box-shadow:var(--shadow-card);max-inline-size:640px;}
.rrow{display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:14px;}
.rrow + .rrow{margin-block-start:14px;}
.rk{font-size:13px;font-weight:600;color:var(--ink2);}
.rbar{block-size:14px;border-radius:7px;background:var(--inset);display:block;overflow:hidden;}
.rbar i{display:block;block-size:100%;border-radius:7px;}
.rbar.stop i{background:var(--c-red);}   /* НЕ .risk: это имя занято плашкой риск-дисклеймера в подвале */
.rbar.goal i{background:var(--c-green);}
.rv{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;}
.rres{margin-block-start:18px;padding-block-start:16px;border-block-start:1px solid var(--line);
  font-size:14px;color:var(--ink2);}
.rres b{color:var(--ink);font-size:16px;}

/* безубыточный Win Rate */
.mtable{margin-block-start:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rad-card);padding:6px 20px 16px;box-shadow:var(--shadow-card);}
.mrow{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-block:12px;
  font-size:15px;color:var(--ink2);}
.mrow + .mrow{border-block-start:1px solid var(--line);}
.mrow b{font-size:17px;color:var(--ink);font-weight:700;}
.mcap{margin-block-start:10px;font-size:11px;line-height:15px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink3);}
.exbox{margin-block-start:24px;background:var(--c-accent-l);border-radius:var(--rad-card);
  padding:20px 24px;max-inline-size:760px;}
.exbox .blist li::before{background:var(--c-accent);}

/* пломбы */
.sealbox{margin-block-start:30px;display:grid;gap:16px;grid-template-columns:1fr;}
@media(min-width:840px){ .sealbox{grid-template-columns:1fr 1fr;} }
.sealcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-card);padding:20px 22px;box-shadow:var(--shadow-card);}
.sealcard .st{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;}
.sealcard .st i{inline-size:8px;block-size:8px;border-radius:50%;display:block;}
.sealcard .mono{margin-block-start:12px;font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:12px;line-height:19px;color:var(--ink2);word-break:break-all;background:var(--inset);
  border-radius:12px;padding:11px 12px;}
.sealcard .mono b{color:var(--ink);}
.sealnote{margin-block-start:16px;font-size:13px;line-height:20px;color:var(--ink2);}

/* статистика */
.tiers{margin-block-start:30px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.tier{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-card);padding:22px;box-shadow:var(--shadow-card);}
.tier .tn{font-size:17px;line-height:22px;font-weight:600;}
.tier .td{margin-block-start:4px;font-size:13px;color:var(--ink2);}
.tier .big{margin-block-start:16px;font-size:36px;line-height:40px;font-weight:700;letter-spacing:-.02em;font-family:var(--font-display);}
.tier .big small{font-size:20px;}
.tier .bl{font-size:12px;color:var(--ink3);margin-block-start:2px;}
.tier .row{margin-block-start:16px;padding-block-start:14px;border-block-start:1px solid var(--line);
  display:flex;justify-content:space-between;font-size:13px;}
.tier .row.tight{margin-block-start:8px;padding-block-start:8px;border:0;}
.tier .row span{color:var(--ink2);}
.disc{margin-block-start:20px;font-size:12px;line-height:18px;color:var(--ink3);max-inline-size:76ch;}

/* тарифы */
.plans{margin-block-start:32px;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));align-items:start;}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-card);padding:24px;box-shadow:var(--shadow-card);position:relative;}
.plan.best{border-color:var(--c-accent);box-shadow:0 8px 24px var(--c-accent-sh);}
.plan .tag{position:absolute;inset-block-start:-11px;inset-inline-start:24px;background:var(--c-accent);color:#fff;
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:var(--rad-tag);}
.plan .pn{font-size:17px;line-height:22px;font-weight:600;}
.plan .pp{margin-block-start:14px;font-size:30px;line-height:36px;font-weight:700;font-family:var(--font-display);letter-spacing:-.02em;}
.plan .pp small{font-size:14px;font-weight:600;color:var(--ink2);font-family:var(--font-ui);letter-spacing:normal;}
.plan .ps{margin-block-start:6px;font-size:13px;line-height:19px;color:var(--ink2);min-block-size:38px;}
.plan ul{margin-block-start:18px;display:flex;flex-direction:column;gap:9px;list-style:none;}
.plan li{display:flex;gap:9px;font-size:14px;line-height:20px;color:var(--ink2);}
.plan li b{color:var(--ink);font-weight:600;}
.plan li i{color:var(--c-green);font-style:normal;flex:0 0 auto;}
.plan li.no i{color:var(--ink3);} .plan li.no{color:var(--ink3);}
.plan .btn{margin-block-start:22px;inline-size:100%;}
.paynote{margin-block-start:20px;font-size:12px;line-height:18px;color:var(--ink3);max-inline-size:76ch;}

/* FAQ */
.faq{margin-block-start:28px;max-inline-size:800px;}
.faq details{border-block-end:1px solid var(--line);}
.faq summary{list-style:none;cursor:pointer;padding-block:18px;display:flex;align-items:center;gap:14px;
  font-size:16px;line-height:23px;font-weight:600;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";margin-inline-start:auto;font-size:20px;color:var(--ink3);font-weight:400;transition:transform var(--t);}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq .ans{padding-block-end:20px;font-size:15px;line-height:23px;color:var(--ink2);max-inline-size:70ch;}

/* низ */
.final{text-align:center;}
.final h2{font-size:clamp(24px,3.4vw,36px);line-height:1.12;}
.final p{margin-block-start:14px;font-size:16px;line-height:24px;color:var(--ink2);}
.final .cta{margin-block-start:26px;display:flex;justify-content:center;flex-wrap:wrap;gap:12px;}
footer{border-block-start:1px solid var(--line);padding-block:40px 48px;background:var(--surface2);}
.fgrid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.fcol h2{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);font-family:var(--font-ui);}
.fcol a,.fcol p{display:block;margin-block-start:10px;font-size:14px;line-height:20px;color:var(--ink2);}
.fcol a:hover{color:var(--ink);}
/* 🐞 13.08 (Igor, скрин): предупреждение о риске было жёлтой плашкой (--c-orange-l) - чужой для
   сайта цвет, а в тёмной теме поверх светлого фона ложился светлый текст (#C9CFDB), и читать его
   было нельзя. Плашка переведена на токены темы: поверхность, тонкая рамка и акцентная полоса
   слева цветом бренда. Контраст теперь верный в обеих темах по построению, а не подбором. */
.risk{margin-block-start:30px;padding:16px 18px;border-radius:16px;background:var(--surface2);
  border:1px solid var(--line);border-inline-start:3px solid var(--c-accent-ink);
  font-size:12px;line-height:19px;color:var(--ink2);}
.risk b{color:var(--ink);}
.copy{margin-block-start:22px;font-size:12px;color:var(--ink3);}
.ph{background:var(--c-orange-l);border-radius:6px;padding:0 5px;color:var(--ink);font-weight:600;}

/* ===== ЮРИДИЧЕСКИЕ СТРАНИЦЫ ===== */
.doc{padding-block:clamp(32px,5vw,56px) clamp(48px,7vw,84px);}
.doc .back{font-size:13px;color:var(--ink2);display:inline-flex;gap:7px;align-items:center;}
.doc .back:hover{color:var(--ink);}
.docbody{margin-block-start:22px;max-inline-size:74ch;}
.docbody h1{font-size:clamp(26px,3.6vw,36px);line-height:1.15;}
.docbody h2{margin-block-start:34px;font-size:21px;line-height:27px;}
.docbody h3{margin-block-start:24px;font-size:17px;line-height:23px;font-family:var(--font-ui);font-weight:600;letter-spacing:normal;}
.docbody p{margin-block-start:14px;font-size:15px;line-height:24px;color:var(--ink2);}
.docbody ul,.docbody ol{margin-block-start:12px;padding-inline-start:22px;}
.docbody li{margin-block-start:8px;font-size:15px;line-height:24px;color:var(--ink2);}
.docbody strong{color:var(--ink);font-weight:600;}
.docbody code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;background:var(--inset);
  border-radius:6px;padding:1px 5px;}
.docbody hr{margin-block:26px;border:0;border-block-start:1px solid var(--line);}
.docbody .tablewrap{margin-block-start:16px;overflow-x:auto;}
.docbody table{border-collapse:collapse;min-inline-size:100%;font-size:14px;}
.docbody th,.docbody td{border:1px solid var(--line);padding:9px 12px;text-align:start;vertical-align:top;color:var(--ink2);}
.docbody th{color:var(--ink);font-weight:600;background:var(--surface2);}
.docnote{margin-block-start:30px;padding:16px 18px;border-radius:18px;background:var(--c-orange-l);
  font-size:13px;line-height:20px;color:var(--ink2);}
.docnote b{color:var(--ink);}

/* ===== КАРТОЧКИ ПРОДУКТА (Igor 29.07: на сайте должно быть ровно то, что в приложении и канале)
   Оформление берёт токены темы, поэтому карточки одинаково живут в светлой и тёмной. Цвета
   направления (#089981/#F23645) и Live (#E04F3F) - фиксированные: это контракт оформления. */
.shotwrap{max-inline-size:440px;inline-size:100%;margin-inline:auto;}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-card);
  box-shadow:var(--shadow-card);padding:16px 16px 14px;}
.pchead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pchead .spacer{flex:1 1 auto;}
.pcsym{font-family:var(--font-display);font-size:20px;line-height:24px;font-weight:800;letter-spacing:-.01em;}
.pcnum{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--ink3);}
.pctf{font-size:10px;line-height:13px;font-weight:700;letter-spacing:.05em;padding:5px 8px;
  border-radius:var(--rad-tag);background:var(--surface2);color:var(--ink2);border:1px solid var(--line);}
.pcstatus{margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;font-size:10px;
  line-height:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 9px;
  border-radius:var(--rad-tag);background:var(--surface2);color:var(--ink2);border:1px solid var(--line);}
.pcstatus i{inline-size:7px;block-size:7px;border-radius:50%;background:var(--ink3);}
.pcstatus.zone{color:var(--c-green-ink);background:var(--c-green-l);border-color:var(--c-green-line);}
.pcstatus.zone i{background:var(--c-green);}
.pcstatus.near{color:var(--c-orange);background:var(--c-orange-l);border-color:transparent;}
.pcstatus.near i{background:var(--c-orange);}
.pcstats{margin-block-start:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
  padding-block-end:12px;border-block-end:1px solid var(--line);}
.pcstats .k{display:block;font-size:9px;line-height:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink3);}
.pcstats b{display:block;margin-block-start:4px;font-size:14px;line-height:18px;font-weight:700;}
.pcstats b.up{color:var(--c-green-ink);} .pcstats b.down{color:var(--c-red-ink);}
.pcchart{position:relative;margin-block:12px;border-radius:14px;overflow:hidden;background:var(--inset);}
.pcwrap{position:relative;display:block;}
.pclab{position:absolute;inset-inline-end:8px;transform:translateY(-50%);
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;line-height:14px;
  padding:2px 6px;border-radius:8px;background:var(--surface);color:var(--ink2);
  border:1px solid var(--line);white-space:nowrap;}
.pcfoot{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.pcfoot .k{display:block;font-size:9px;line-height:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink3);}
.pcfoot b{display:block;margin-block-start:4px;font-size:15px;line-height:19px;font-weight:700;}
.pcticker{margin-block-start:6px;font-family:var(--font-display);font-size:26px;line-height:30px;
  font-weight:800;letter-spacing:-.015em;}
.pccap{font-size:12px;line-height:18px;color:var(--ink2);font-family:ui-monospace,Menlo,Consolas,monospace;}
.pcbrand{margin-block-start:10px;padding-block-start:10px;border-block-start:1px solid var(--line);
  display:flex;justify-content:space-between;font-size:11px;color:var(--ink3);}
.pcbrand span:first-child{color:var(--c-accent-ink);font-weight:600;}
.pcard.seal{text-align:center;}
.pcard.seal .slock{color:var(--ink3);display:flex;justify-content:center;}  /* svg{display:block} глобально - центрируем контейнером */
.pcard.seal .slock svg{inline-size:26px;block-size:26px;}
.pcard.seal .stitle{margin-block-start:6px;font-size:12px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink2);}
.pcard.seal .ssub{margin-block:6px 14px;font-size:12px;color:var(--ink3);}
.pcard.seal .srow{display:flex;align-items:center;gap:9px;padding-block:9px;
  border-block-start:1px solid var(--line);text-align:start;}
.pcard.seal .srow .num{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--ink2);}
.pcard.seal .srow code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;
  color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pcard.reveal .stitle{font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink2);}
.pcard.reveal .rrow{margin-block-start:10px;display:flex;gap:9px;align-items:flex-start;}
.pcard.reveal .rrow .num{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--ink2);}
.pcard.reveal .rrow code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;
  line-height:16px;color:var(--c-accent-ink);overflow-wrap:anywhere;}
.pcard.reveal .rnote{margin-block-start:12px;font-size:12px;color:var(--ink3);}
.lbl.mt{margin-block-start:28px;}

/* --- экран согласий перед созданием аккаунта (00_internal_screens §1) --- */
.consent label{display:flex;gap:11px;align-items:flex-start;margin-block:14px;cursor:pointer;
  font-size:14.5px;line-height:1.5;}
.consent input[type=checkbox]{flex:none;inline-size:18px;block-size:18px;margin-block-start:3px;
  accent-color:var(--c-accent);}
.consent .btn{margin-block-start:10px;}

/* ============================== ЛЕНДИНГ (landing.html, ТЗ 31.07) ==============================
   Слой поверх токенов: те же цвета/шрифты/радиусы, больше воздуха и крупнее заголовки.
   Ничего из этого не трогает существующие страницы: все секции лендинга начинаются с .ld */
section[class^="ld"]{padding-block:clamp(64px,9vw,128px);}
.center{text-align:center;}
.shead.big h2{font-size:clamp(30px,4.6vw,46px);line-height:1.1;letter-spacing:-.025em;}
.shead.big{max-inline-size:70ch;}
.shead.big.center{margin-inline:auto;}
.shead.big .pull{margin-block-start:20px;}

/* --- герой --- */
.ldhero{padding-block:clamp(56px,8vw,110px) clamp(48px,7vw,90px);}
.ldhero .in{display:grid;gap:clamp(36px,5vw,64px);grid-template-columns:1fr;align-items:center;}
@media(min-width:960px){ .ldhero .in{grid-template-columns:1.04fr .96fr;} }
.ldhero h1{font-size:clamp(34px,5.8vw,60px);line-height:1.06;letter-spacing:-.03em;}
.ldhero .acc{color:var(--c-accent);}
.ldhero .lead{margin-block-start:20px;font-size:clamp(16px,1.7vw,19px);line-height:1.6;color:var(--ink2);max-inline-size:54ch;}
.ldhero .cta{margin-block-start:30px;display:flex;flex-wrap:wrap;gap:12px;}
/* сцена: настоящая карточка приложения, за ней - карточка канала */
.ldstage{position:relative;max-inline-size:480px;inline-size:100%;margin-inline:auto;}
.ldstage .front{position:relative;z-index:2;}
.ldstage .back{position:absolute;inset-block-start:-26px;inset-inline-end:-34px;z-index:1;
  transform:rotate(3deg) scale(.94);opacity:.55;filter:saturate(.9);pointer-events:none;}
@media(max-width:959px){ .ldstage .back,.ldstage .glow,.ldstage .spark{display:none;} }   /* на телефоне - одна карточка, без наслоения и декора (декор распирал страницу) */

/* --- сплит «без/с» (экраны 2 и 19) --- */
.duo{margin-block-start:40px;display:grid;gap:20px;grid-template-columns:1fr;align-items:stretch;}
@media(min-width:880px){ .duo{grid-template-columns:1fr 1fr;gap:28px;} }
.pane{border-radius:var(--rad-card);padding:26px 26px 28px;border:1px solid var(--line);}
.pane.chaos{background:var(--surface2);}
section.alt .pane.chaos{background:var(--bg);}
.pane.calm{background:var(--surface);box-shadow:var(--shadow-card);border-color:var(--c-accent-sh);}
.pane .pt{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3);}
.pane .pt.on{color:var(--c-accent-ink);}
.pane .blist,.pane .chain{margin-block-start:18px;}
.pane .pn2{margin-block-start:18px;font-size:13px;line-height:20px;color:var(--ink3);}
/* хаос чужих окон - абстрактные рамки, не интерфейс ChiPro */
.mess{margin-block-start:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.mess i{display:block;block-size:34px;border-radius:8px;border:1px dashed var(--line);background:var(--inset);}
.mess i:nth-child(2n){block-size:46px;} .mess i:nth-child(3n){opacity:.6;}

/* --- вертикальная цепочка этапов (экраны 3, 14, 19) --- */
.chain{margin-block-start:36px;list-style:none;display:flex;flex-direction:column;align-items:center;max-inline-size:520px;margin-inline:auto;}
.chain li{background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:11px 22px;font-size:15px;line-height:21px;font-weight:500;color:var(--ink);text-align:center;}
.chain li + li{margin-block-start:26px;position:relative;}
.chain li + li::before{content:"";position:absolute;inset-block-start:-27px;inset-inline-start:50%;
  transform:translateX(-50%);block-size:28px;inline-size:2px;
  background:linear-gradient(var(--line) 60%,transparent 0) 0 0/2px 7px repeat-y;}
.chain li.hot{background:var(--c-accent);border-color:var(--c-accent);color:#fff;font-weight:600;box-shadow:0 8px 24px var(--c-accent-sh);}
.chain li.you{background:var(--ink);border-color:var(--ink);color:var(--bg);font-weight:600;}
.chain.small{align-items:stretch;margin-inline:0;max-inline-size:none;}
.chain.small li{padding:9px 16px;font-size:13.5px;line-height:19px;border-radius:14px;text-align:start;}
.chain.small li + li{margin-block-start:16px;}
.chain.small li + li::before{inset-block-start:-17px;block-size:18px;inset-inline-start:24px;transform:none;}
.chain.small.ok li{border-color:var(--c-green-line);background:var(--c-green-l);color:var(--c-green-ink);}
.chain.long{max-inline-size:560px;}

/* --- сетки карточек --- */
.cards.four{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-block-start:44px;}
.cards.three{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-block-start:44px;}
.cards + .pull,.duo + .pull{margin-block-start:36px;}

/* --- анатомия карточки (экран 4) --- */
.anat{margin-block-start:48px;display:grid;gap:24px;grid-template-columns:1fr;align-items:center;justify-items:center;}
@media(min-width:960px){ .anat{grid-template-columns:1fr auto 1fr;}
  .anat .tags.l{justify-items:end;} .anat .tags.r{justify-items:start;} }
.tags{list-style:none;display:grid;gap:14px;}
.tags li{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:9px 18px;
  font-size:13.5px;font-weight:600;color:var(--ink2);box-shadow:var(--shadow-card);white-space:nowrap;}
@media(max-width:959px){ .tags{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;
  max-inline-size:100%;padding-block:4px;} .tags li{box-shadow:none;} }
.undershot{margin-block-start:26px;text-align:center;font-size:15px;color:var(--ink2);}

/* --- воронка (экран 5) --- */
.funnel{margin-block-start:44px;text-align:center;}
.funnel .ft{font-size:15px;font-weight:600;color:var(--ink2);}
.fnk{margin-block:14px 12px;display:flex;flex-direction:column;align-items:center;gap:7px;}
.fnk span{display:block;block-size:9px;border-radius:6px;background:var(--c-accent-l);}
.fnk span:nth-child(1){inline-size:min(300px,64vw);}
.fnk span:nth-child(2){inline-size:min(190px,44vw);}
.fnk span:nth-child(3){inline-size:min(100px,26vw);background:var(--c-accent);}
.funnel .fm{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-accent-ink);}
.fout{margin-block-start:18px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.fout span{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:10px 18px;
  font-size:14px;font-weight:600;box-shadow:var(--shadow-card);display:inline-flex;align-items:center;gap:8px;}
.fout span::before{content:"";inline-size:8px;block-size:8px;border-radius:50%;background:var(--c-accent);}

/* --- тёмная полоса: переход к главе 2 (ТЗ: «фон постепенно становится темнее») ---
   Внутри просто действуют токены тёмной темы, поэтому все компоненты живут без доработок;
   в тёмной теме полоса сливается со страницей - так и задумано. */
.band{--bg:#0F1115;--surface:#171A21;--surface2:#1E222B;--inset:#1E222B;
  --ink:#F3F4F6;--ink2:#8B93A7;--ink3:#8B93A7;--line:rgba(255,255,255,.09);
  --c-accent-ink:#EC6A5A;--c-blue-ink:#6B9BFF;
  --c-green-l:#18332E;--c-green-line:#24594F;--c-green-ink:#3CB9A4;
  --c-red-l:#351F25;--c-red-line:#6A313A;--c-red-ink:#FF747E;
  --c-accent-l:rgba(224,79,63,.18);--c-accent-sh:rgba(224,79,63,.26);
  --c-live-soft:rgba(224,79,63,.22);--c-live-line:rgba(224,79,63,.40);
  --shadow-card:0 8px 24px rgba(0,0,0,.35);
  background:var(--bg);color:var(--ink);}
.ldbridge{padding-block-end:clamp(40px,6vw,72px);}
.ldbridge .bcap{font-size:14px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink3);}
.ldbridge .bline{margin-block-start:16px;font-size:clamp(24px,3.6vw,38px);line-height:1.18;
  letter-spacing:-.022em;max-inline-size:26ch;margin-inline:auto;}
.ldbridge .shotwrap{margin-block-start:44px;}
.shotwrap.grow{max-inline-size:560px;}
.ldbridge .btn{margin-block-start:36px;}

/* --- точность направления (экран 6) --- */
.ldproof{padding-block-start:clamp(40px,6vw,72px);}
.proof{margin-block-start:44px;display:grid;gap:36px;grid-template-columns:1fr;align-items:center;}
@media(min-width:900px){ .proof{grid-template-columns:auto 1fr;gap:64px;} }
.pstat{display:flex;flex-direction:column;gap:8px;}
.pstat .pk{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);}
.pstat .pv{font-family:var(--font-display);font-size:clamp(64px,11vw,124px);line-height:.95;
  font-weight:700;letter-spacing:-.04em;color:var(--c-accent);}
.pstat .pl{font-size:13px;line-height:19px;color:var(--ink3);max-inline-size:26ch;}
.ptxt p{font-size:16px;line-height:25px;color:var(--ink2);max-inline-size:56ch;}
.ptxt p + p{margin-block-start:14px;}
.ptxt .pull{margin-block-start:22px;}

/* --- контекст цифр (экран 8) --- */
.ctx{margin-block-start:40px;}
.kvgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.kvgrid .kv{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px 18px;}
.kvgrid .kv b{display:block;font-size:15px;font-weight:600;}
.kvgrid .kv span{display:block;margin-block-start:5px;font-size:13px;line-height:19px;color:var(--ink2);}
.ctx .pull{margin-block-start:32px;}

/* --- симулятор: единственное место с синим (контракт: синий = симуляция) --- */
.eyebrow.sim{color:var(--c-blue-ink);}
.blist.sim li::before{background:var(--c-blue);}
.btn.sim{background:var(--c-blue);color:#fff;margin-block-start:18px;}
.btn.sim:hover{opacity:.9;}

/* --- финал главы 2 --- */
.chips{margin-block-start:32px;display:flex;flex-wrap:wrap;gap:10px;list-style:none;}
.chips li{background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:10px 18px;font-size:14px;font-weight:500;color:var(--ink2);}
.ldtrust .cta{margin-block-start:32px;display:flex;flex-wrap:wrap;gap:12px;}
.ldtrust .pull{margin-block-start:36px;}

/* --- три колонки (экран 15) --- */
.tri{margin-block-start:44px;display:grid;gap:32px;grid-template-columns:1fr;}
@media(min-width:900px){ .tri{grid-template-columns:1fr 1fr 1fr;gap:0;}
  .tri .tcol{padding-inline:32px;border-inline-start:1px solid var(--line);}
  .tri .tcol:first-child{padding-inline-start:0;border-inline-start:0;} }
.tri h3{font-size:19px;line-height:25px;}
.tri .blist{margin-block-start:16px;}

/* --- прочее --- */
.ldfree .cta,.ldfinal .cta{margin-block-start:36px;display:flex;flex-wrap:wrap;gap:12px;}
.ldfinal{text-align:center;padding-block:clamp(80px,12vw,160px);}
.ldfinal h2{font-size:clamp(32px,5.2vw,54px);line-height:1.08;letter-spacing:-.028em;}
.ldfinal .lead{margin-block-start:20px;font-size:clamp(16px,1.7vw,18px);line-height:1.6;
  color:var(--ink2);max-inline-size:62ch;margin-inline:auto;}
.ldfinal .lead b{color:var(--ink);}
.ldfinal .cta{justify-content:center;}
.ldfinal .disc{margin-inline:auto;}
.ldday .pull,.ldwhere .wide{margin-block-start:36px;}
.paynote{margin-block-start:24px;}

/* --- ЛЕНДИНГ: движение (ТЗ: только функциональные анимации; появление, лёгкое смещение) ---
   Все скрытые стартовые состояния живут под .ldjs: класс ставит скрипт, и он НЕ ставится при
   prefers-reduced-motion - без JS и при reduce страница полностью видима без анимаций. */
.ldjs .ldrv{opacity:0;translate:0 22px;transition:opacity .7s ease,translate .7s ease;}
.ldjs .ldrv.in{opacity:1;translate:0 0;}


/* фон героя: мягкое свечение + тонкая линия графика, медленный дрейф (ТЗ, экран 1) */
.ldstage .glow{position:absolute;inset:-12% -18%;z-index:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,var(--c-accent-l),transparent 72%);
  animation:ldglow 16s ease-in-out infinite alternate;}
.ldstage .spark{position:absolute;inset-block-start:-64px;inset-inline-end:-72px;z-index:0;
  inline-size:96%;color:var(--ink3);opacity:.10;pointer-events:none;
  animation:ldspark 38s linear infinite alternate;}
@keyframes ldglow{from{transform:translate3d(-3%,2%,0) scale(.96);}to{transform:translate3d(3%,-2%,0) scale(1.05);}}
@keyframes ldspark{from{transform:translateX(-2%);}to{transform:translateX(4%);}}

/* цепочки: узлы загораются сверху вниз; финальный акцент - «Уведомление» */
.ldjs .chain li{opacity:0;translate:0 12px;transition:opacity .5s ease,translate .5s ease;}
.ldjs .chain li{transition-delay:calc(var(--i,0)*.22s);}
.ldjs .chain.go li{opacity:1;translate:0 0;}
.ldjs .chain.go li.hot{animation:ldhot 1.5s ease 1.5s 2;}
@keyframes ldhot{0%,100%{box-shadow:0 8px 24px var(--c-accent-sh);}
  50%{box-shadow:0 0 0 10px var(--c-accent-l),0 8px 24px var(--c-accent-sh);}}

/* экран 19: окна чужих сервисов перетекают в сторону панели ChiPro */
.mess.flow i{transition:opacity .9s ease,transform .9s ease;}
.mess.flow i:nth-child(1){transition-delay:.05s;} .mess.flow i:nth-child(2){transition-delay:.2s;}
.mess.flow i:nth-child(3){transition-delay:.35s;} .mess.flow i:nth-child(4){transition-delay:.5s;}
.mess.flow i:nth-child(5){transition-delay:.65s;} .mess.flow i:nth-child(6){transition-delay:.8s;}
.mess.flow.go i{opacity:.18;transform:translateX(46px) scale(.85);}

/* переход глав: карточка растёт при прокрутке (ТЗ, экран 5→6).
   🔴 Было на animation-timeline: view() - это Chrome/Edge, в Safari и Firefox сцена не работала.
   Теперь рост считает скрипт (--p) в секции «СЦЕНЫ ГЛАВ 2-3» ниже: одинаково во всех браузерах. */

/* лёгкий подъём карточек при наведении (ТЗ: увеличение карточек при наведении) */
@media(hover:hover){
  .card,.plan,.kvgrid .kv,.pane.calm,.fout span{transition:transform .25s ease,box-shadow .25s ease;}
  .card:hover,.kvgrid .kv:hover,.fout span:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);}
  .plan:hover{transform:translateY(-4px);}
  .pane.calm:hover{transform:translateY(-3px);}
}

/* мини-лента внутри панели «С ChiPro» (экран 2) */
.pane .shotwrap.mini{margin:18px 0 4px;max-inline-size:380px;}
.pane .shotwrap.mini .pcard{box-shadow:none;}

/* кнопки героя - в одну строку на десктопе */
.ldhero .cta .btn.lg{padding:14px 22px;font-size:15px;}

/* --- экран 10: история модели --- */
.ldhist .cta{margin-block-start:32px;display:flex;flex-wrap:wrap;gap:12px;}
.ldhist .pull{margin-block-start:32px;}

/* ================== СЦЕНЫ ГЛАВ 2-3 (визуальные концепции ТЗ дизайнера) ==================
   Прогресс прокрутки лежит в переменной --p (0..1), её ставит скрипт лендинга. Значение по
   умолчанию 1 = финальное состояние: без JS и при prefers-reduced-motion страница просто
   показывает результат, ничего не пропадает. Scroll-driven animations браузера НЕ используем -
   они есть только в Chrome, а сцены обязаны работать везде (Igor 31.07). */
[data-prog]{--p:1;}

/* --- переход к главе 2: карточки сходятся в одну, она растёт, загорается Reach Rate --- */
.mrgstage{position:relative;margin-block-start:56px;}
.mrgset{position:absolute;inset-block-start:0;inset-inline:0;display:flex;justify-content:center;
  pointer-events:none;z-index:1;}
.mrgset .mrgc{position:absolute;inline-size:min(262px,68vw);
  transform:translate3d(calc((1 - var(--p)) * var(--dx,0px)),calc((1 - var(--p)) * var(--dy,0px)),0)
            scale(calc(1 - .22 * var(--p)));
  opacity:calc((1 - var(--p) * 1.5) * .95);}
.mrgset .mrgc:nth-child(1){--dx:-352px;--dy:54px;}
.mrgset .mrgc:nth-child(2){--dx:0px;--dy:-52px;}
.mrgset .mrgc:nth-child(3){--dx:352px;--dy:54px;}
.mrgset .pcard{box-shadow:var(--shadow-card);}
/* итоговая карточка проявляется во второй половине пути - иначе четыре карточки наложились бы */
.ldbridge .shotwrap.grow{position:relative;z-index:2;
  transform:scale(calc(.84 + .16 * var(--p)));opacity:calc(var(--p) * 2 - .5);}
.rrflash{position:absolute;inset-block-end:-14px;inset-inline-start:50%;translate:-50% 0;
  display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;
  background:var(--c-accent);color:#fff;font-size:12px;line-height:16px;white-space:nowrap;
  box-shadow:0 8px 24px var(--c-accent-sh);opacity:calc((var(--p) - .72) * 4);}
.rrflash b{font-weight:700;}
@media(max-width:879px){ .mrgset{display:none;} .ldbridge .shotwrap.grow{transform:none;opacity:1;} }

/* --- экран 6: график «разворачивается», следом появляется Reach Rate --- */
.unroll{margin-block-start:30px;clip-path:inset(0 0 calc((1 - var(--p)) * 100%) 0);
  opacity:calc(.2 + .8 * var(--p));}
.bigchart{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-card);
  padding:16px 18px;box-shadow:var(--shadow-card);}
.bchead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.bclv{margin-inline-start:auto;font-size:12px;color:var(--ink3);}
.bcbody{margin-block-start:12px;}
.bcbody .pcwrap{position:relative;}

/* --- экран 13: отдельные сервисы сходятся в одно рабочее пространство --- */
.merge2{margin-block-start:40px;display:grid;gap:24px;grid-template-columns:1fr;align-items:center;}
@media(min-width:900px){ .merge2{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:36px;} }
.svc{list-style:none;display:flex;flex-wrap:wrap;gap:10px;}
.svc li{padding:9px 14px;border-radius:14px;border:1px dashed var(--line);color:var(--ink3);
  font-size:13px;line-height:18px;background:var(--surface);
  transform:translateX(calc(var(--p) * 34px)) scale(calc(1 - .08 * var(--p)));
  opacity:calc(1 - .72 * var(--p));}
.wsp{border:1px solid var(--line);border-radius:var(--rad-card);background:var(--surface2);
  overflow:hidden;box-shadow:var(--shadow-card);}
.wsptop{display:flex;align-items:center;gap:6px;padding:10px 14px;
  border-block-end:1px solid var(--line);background:var(--surface);}
.wsptop i{inline-size:8px;block-size:8px;border-radius:50%;background:var(--line);}
.wsptop span{margin-inline-start:8px;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink3);}
.wspbody{padding:16px;display:grid;gap:14px;}
.wspbody.two{grid-template-columns:1fr;}
@media(min-width:820px){ .wspbody.two{grid-template-columns:1.05fr .95fr;align-items:start;} }
.fstack{display:grid;gap:14px;}

/* --- экран 14: метка «одна сделка» идёт по цепочке --- */
/* 🔴 container-type:size схлопывает высоту блока (size-containment) - позицию бегунка считаем
   процентами от высоты .pathwrap, это работает без контейнерных запросов. */
.pathwrap{position:relative;}
.runner{position:absolute;inset-inline-end:calc(50% - 330px);display:inline-flex;
  align-items:center;gap:8px;padding:7px 13px;border-radius:999px;background:var(--c-accent-l);
  color:var(--c-accent-ink);font-size:12px;line-height:16px;font-weight:600;white-space:nowrap;
  inset-block-start:calc(var(--p) * (100% - 34px));}
.runner i{inline-size:8px;block-size:8px;border-radius:50%;background:var(--c-accent);}
@media(max-width:1023px){ .runner{display:none;} }

/* --- экран 15: одна и та же сделка проходит три раздела, внимание идёт за ней --- */
.tri{position:relative;}
.trirun{position:absolute;inset-block-start:-34px;display:inline-flex;
  align-items:center;gap:8px;padding:6px 13px;border-radius:999px;background:var(--c-accent);
  color:#fff;font-size:11.5px;line-height:16px;font-weight:600;white-space:nowrap;z-index:1;
  box-shadow:0 8px 24px var(--c-accent-sh);
  inset-inline-start:calc(var(--p) * (100% - 210px));}
.trirun i{inline-size:7px;block-size:7px;border-radius:50%;background:#fff;}
.tri .tcol{transition:opacity .4s ease;}
/* ⚠ первым ребёнком .tri идёт бегунок, поэтому колонки - это nth-of-type 2, 3 и 4 */
.tri[data-stage="0"] .tcol:nth-of-type(3),
.tri[data-stage="0"] .tcol:nth-of-type(4),
.tri[data-stage="1"] .tcol:nth-of-type(2),
.tri[data-stage="1"] .tcol:nth-of-type(4),
.tri[data-stage="2"] .tcol:nth-of-type(2),
.tri[data-stage="2"] .tcol:nth-of-type(3){opacity:.45;}
@media(max-width:899px){ .trirun{display:none;} .tri .tcol{opacity:1;} }

/* --- экран 16: активная карточка превращается в завершённую, вокруг появляются разделы --- */
.afterstage{margin-block-start:36px;display:grid;gap:24px;grid-template-columns:1fr;
  align-items:start;}
@media(min-width:900px){ .afterstage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;} }
.astack{position:relative;}
/* смена быстрая: если карточки долго держатся вместе, тексты наезжают друг на друга */
.astack .acard.live{opacity:calc(2.7 - var(--p) * 5);}
.astack .acard.done{position:absolute;inset-block-start:0;inset-inline:0;
  opacity:calc(var(--p) * 5 - 2.3);}
.around{list-style:none;display:flex;flex-wrap:wrap;gap:10px;}
.around li{padding:8px 14px;border-radius:999px;border:1px solid var(--line);
  background:var(--surface);font-size:12.5px;line-height:17px;color:var(--ink2);
  opacity:calc((var(--p) - .25) * 2);transform:translateY(calc((1 - var(--p)) * 10px));}
.aside{display:grid;gap:18px;}
.pcard.done .pcstats{grid-template-columns:repeat(3,1fr);}
.pcard.done .pcfoot{grid-template-columns:repeat(2,1fr);}
.pcard.jrn .stitle{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink3);}
.jrow{display:flex;align-items:center;gap:10px;margin-block-start:12px;font-size:13px;
  line-height:18px;}
.jrow .num{font-size:12px;color:var(--ink3);}
.jsym{font-weight:700;}
.jout{margin-inline-start:auto;font-size:11.5px;}
.jout.ok{color:var(--c-green-ink);} .jout.no{color:var(--ink3);}

/* --- экран 17: параметры риска (поля приложения) --- */
.riskstage{margin-block-start:36px;max-inline-size:520px;}
.pcard.risk .rrows{margin-block-start:6px;}
.rr{display:flex;align-items:baseline;gap:12px;padding-block:9px;
  border-block-end:1px solid var(--line);}
.rr:last-child{border-block-end:0;}
.rr .k{flex:0 0 42%;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink3);}
.rr b{font-size:13.5px;line-height:19px;font-weight:600;}
.rr b.soft{color:var(--ink3);font-weight:500;}

/* --- экран 18: один продукт, несколько способов работы --- */
.frames{margin-block-start:40px;display:grid;gap:24px;grid-template-columns:1fr;align-items:end;}
@media(min-width:900px){ .frames{grid-template-columns:1.25fr .75fr 1fr;gap:28px;} }
.frm{margin:0;}
.frm .fbody{border:1px solid var(--line);border-radius:18px;background:var(--surface2);padding:14px;}
.frm .ftop{display:flex;align-items:center;gap:6px;padding:9px 12px;border:1px solid var(--line);
  border-block-end:0;border-start-start-radius:18px;border-start-end-radius:18px;
  background:var(--surface);}
.frm .ftop i{inline-size:8px;block-size:8px;border-radius:50%;background:var(--line);}
.frm .ftop span{margin-inline-start:8px;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink3);}
.frm.desk .fbody{border-start-start-radius:0;border-start-end-radius:0;}
.frm.phone .fbody{border-radius:26px;padding:12px;max-inline-size:280px;margin-inline:auto;}
.frm figcaption{margin-block-start:12px;text-align:center;font-size:12px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);}
.frm .pcard{box-shadow:none;}
/* на телефоне рамка «телефон» не нужна - пользователь и так смотрит с телефона, а три одинаковые
   карточки подряд превращаются в простыню */
@media(max-width:899px){ .frm.phone{display:none;} }

/* --- экран 20 и финал: рабочее пространство целиком --- */
.freeview,.finalspace{margin-block-start:36px;}
.finalspace{transform:scale(calc(.94 + .06 * var(--p)));opacity:calc(.55 + .45 * var(--p));}
.ldfinal .wsp{text-align:start;}

/* ============ ТЕЛЕФОН ============
   🔴 iPhone/Safari 31.07 (Igor): сцены, привязанные к прокрутке, на телефоне застревали
   на середине - ярлыки бледные, колонка приглушена, карточка ещё не проявилась и на её месте
   пустота. Палец пролетает экран мгновенно, следить за ним бессмысленно. Поэтому на узком
   экране скрипт проигрывает сцену целиком по появлению блока (см. landing.html), а CSS
   остаётся прежним. Здесь - только то, что на телефоне обязано лежать иначе. */
@media(max-width:899px){
  /* колонки экрана 15 подсвечиваются по прокрутке - на телефоне все три равны */
  .tri .tcol{opacity:1!important;}
  /* бейдж Reach Rate на телефоне стоит ПОД карточкой, а не наезжает на её нижнюю строку */
  .rrflash{position:static!important;translate:none!important;margin-block-start:16px;
    align-self:center;}
  .ldbridge .shotwrap.grow{display:flex;flex-direction:column;align-items:center;}
}

/* экран 4: подписи к карточке переносятся по строкам, а не уезжают за край экрана
   (было: горизонтальная прокрутка - на телефоне читалось как обрезанный блок) */
@media(max-width:959px){
  .tags{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;overflow:visible;
    max-inline-size:100%;}
}

/* экран 2: «окна чужих сервисов» - с шапкой и парой строк содержимого, иначе пустые
   пунктирные прямоугольники читаются как незагрузившиеся картинки (Igor, iPhone) */
.mess i{background-image:linear-gradient(var(--line),var(--line)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20' preserveAspectRatio='none'%3E%3Cpolyline points='0,16 7,11 14,14 21,6 28,9 35,3 42,7 49,2 60,5' fill='none' stroke='%239CA3AF' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:100% 7px,calc(100% - 18px) calc(100% - 22px);
  background-position:0 0,9px 15px;background-repeat:no-repeat;}

/* ================== ЖИВЫЕ БЛОКИ ==================
   🔴 Igor, iPhone 31.07: «на экране ничего не происходит». Одноразовые появления при
   прокрутке на телефоне не читаются как жизнь. Ниже - постоянное, но сдержанное движение
   ТОЛЬКО в иллюстративных блоках (хаос без ChiPro, воронка отбора, цепочка анализа, фон
   героя). Тексты, карточки с данными и кнопки не двигаются: стиль-ТЗ запрещает мельтешение.
   При prefers-reduced-motion всё это гасится глобальным сбросом в начале файла. */

/* смена карточки в живом hero: старая уходит вниз, новая проявляется */
.ldstage .front{transition:opacity .24s ease,transform .24s ease;}
.ldstage .front.swap{opacity:0;transform:translateY(8px);}

/* экран 2: «десятки открытых графиков, постоянное переключение» - окна оживают по очереди,
   как будто в них что-то происходит и внимание прыгает между ними */
.mess i{animation:ldwin 6s ease-in-out infinite;}
.mess i:nth-child(2){animation-delay:.5s;} .mess i:nth-child(3){animation-delay:1.1s;}
.mess i:nth-child(4){animation-delay:1.7s;} .mess i:nth-child(5){animation-delay:2.3s;}
.mess i:nth-child(6){animation-delay:2.9s;} .mess i:nth-child(7){animation-delay:3.5s;}
.mess i:nth-child(8){animation-delay:4.1s;} .mess i:nth-child(9){animation-delay:4.7s;}
@keyframes ldwin{
  0%,72%,100%{border-color:var(--line);background-color:var(--inset);transform:none;}
  78%{border-color:var(--c-accent-l);background-color:var(--surface);transform:translateY(-2px);}
  86%{border-color:var(--line);background-color:var(--inset);transform:none;}
}

/* экран 5: воронка отбора - поток идёт сверху вниз, отобранные возможности загораются
   по очереди (ТЗ: «тысячи движений рынка -> ChiPro анализирует -> три возможности») */
.fout span{animation:ldpick 5.1s ease-in-out infinite;}
.fout span:nth-child(2){animation-delay:1.7s;} .fout span:nth-child(3){animation-delay:3.4s;}
@keyframes ldpick{
  0%,60%,100%{box-shadow:none;border-color:var(--line);}
  22%{box-shadow:0 8px 24px var(--c-accent-sh);border-color:var(--c-accent);}
  42%{box-shadow:none;border-color:var(--line);}
}
.fout span::before{animation:lddot 5.1s ease-in-out infinite;}
.fout span:nth-child(2)::before{animation-delay:1.7s;}
.fout span:nth-child(3)::before{animation-delay:3.4s;}
@keyframes lddot{0%,60%,100%{transform:scale(1);}22%{transform:scale(1.6);}}

/* экраны 3 и 14: по цепочке анализа постоянно идёт импульс сверху вниз - видно, что система
   работает в фоне, а не нарисована один раз */
.ldjs .chain.go li{animation:ldpulse 6s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .28s);}
@keyframes ldpulse{
  0%,26%,100%{box-shadow:none;}
  8%{box-shadow:0 0 0 6px var(--c-accent-l);}
  18%{box-shadow:none;}
}
.ldjs .chain.go li.hot{animation:ldhotloop 6s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * .28s);}
@keyframes ldhotloop{
  0%,26%,100%{box-shadow:0 8px 24px var(--c-accent-sh);}
  8%{box-shadow:0 0 0 12px var(--c-accent-l),0 8px 24px var(--c-accent-sh);}
}

/* экран 19: окна чужих сервисов утекают в сторону ChiPro не один раз, а по кругу */
.mess.flow.go i{animation:ldflowaway 7s ease-in-out infinite;}
.mess.flow.go i:nth-child(2){animation-delay:.3s;} .mess.flow.go i:nth-child(3){animation-delay:.6s;}
.mess.flow.go i:nth-child(4){animation-delay:.9s;} .mess.flow.go i:nth-child(5){animation-delay:1.2s;}
.mess.flow.go i:nth-child(6){animation-delay:1.5s;}
@keyframes ldflowaway{
  0%{opacity:1;transform:none;}
  45%{opacity:.14;transform:translateX(52px) scale(.82);}
  70%{opacity:.14;transform:translateX(52px) scale(.82);}
  100%{opacity:1;transform:none;}
}

/* фон героя: график живее дрейфует (ТЗ, экран 1: «на фоне медленно движутся графики») */
.ldstage .spark{animation:ldspark2 26s ease-in-out infinite alternate;}
@keyframes ldspark2{
  from{transform:translate3d(-3%,4px,0) scale(1);}
  to{transform:translate3d(5%,-6px,0) scale(1.04);}
}

/* ================== РИСОВАННЫЕ СЦЕНЫ (SVG) ==================
   Igor 31.07: «понаставлял примитивов». Пунктирные плашки заменяются векторными сценами -
   окна графиков со свечами, лента уведомлений, курсор. Цвета берутся токенами (SVG лежит
   в разметке, не картинкой), поэтому сцена живёт в обеих темах и остаётся резкой на любом
   экране. Движение - ниже; при prefers-reduced-motion гаснет глобальным сбросом. */
.scene{inline-size:100%;block-size:auto;margin-block-start:18px;display:block;overflow:visible;}

/* статус «В ЗОНЕ ВХОДА» на карточке пульсирует ровно так же, как в приложении
   (.vx .st-zone .pd, keyframes pulse 1.7s) - на витрине карточка обязана вести себя как живая */
.pcstatus.zone i{animation:pulse 1.7s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 currentColor;}70%{box-shadow:0 0 0 6px transparent;}100%{}}

/* --- экран 2: как выглядит работа без ChiPro --- */
.chaos-scene .win rect{fill:var(--surface);stroke:var(--line);stroke-width:1.2;}
.chaos-scene .win .bar{fill:var(--inset);}
.chaos-scene .win .dot{fill:var(--line);stroke:none;}
.chaos-scene .candles path{stroke-width:5;stroke-linecap:round;fill:none;}
.chaos-scene .candles .up{stroke:var(--c-green);}
.chaos-scene .candles .dn{stroke:var(--c-red);}
.chaos-scene .toast rect{fill:var(--surface);stroke:var(--line);stroke-width:1.2;}
.chaos-scene .toast .line{fill:var(--ink3);stroke:none;opacity:.45;}
.chaos-scene .toast .line.s{opacity:.28;}
.chaos-scene .toast .mark{fill:var(--c-accent);stroke:none;}
.chaos-scene .cursor{fill:var(--ink);stroke:var(--bg);stroke-width:1.2;}

/* окна перекрывают друг друга и по очереди выходят вперёд - «постоянное переключение» */
.chaos-scene .win{transform-box:fill-box;transform-origin:center;
  animation:ldswitch 9s ease-in-out infinite;}
.chaos-scene .w2{animation-delay:2.25s;} .chaos-scene .w3{animation-delay:4.5s;}
.chaos-scene .w4{animation-delay:6.75s;}
@keyframes ldswitch{
  0%,22%,100%{opacity:.55;transform:scale(.985);}
  6%{opacity:1;transform:scale(1.015);}
  16%{opacity:1;transform:scale(1);}
}
/* уведомления приходят одно за другим и никуда не деваются */
.chaos-scene .toast{animation:ldtoast 6s ease-in-out infinite;}
.chaos-scene .t2{animation-delay:.9s;} .chaos-scene .t3{animation-delay:1.8s;}
@keyframes ldtoast{
  0%,72%,100%{opacity:.3;transform:translateX(10px);}
  10%{opacity:1;transform:translateX(0);}
  60%{opacity:.75;transform:translateX(0);}
}
/* курсор мечется между окнами - «часы анализа» */
.chaos-scene .cursor{animation:ldcursor 9s cubic-bezier(.6,0,.3,1) infinite;}
@keyframes ldcursor{
  0%{transform:translate(180px,150px);}
  12%{transform:translate(180px,150px);}
  25%{transform:translate(330px,86px);}
  37%{transform:translate(330px,86px);}
  50%{transform:translate(404px,220px);}
  62%{transform:translate(404px,220px);}
  75%{transform:translate(200px,300px);}
  88%{transform:translate(200px,300px);}
  100%{transform:translate(180px,150px);}
}

/* --- экран 13: отдельные сервисы затягивает в одно рабочее пространство --- */
.tools-scene{max-inline-size:420px;margin-inline:auto;}
.tools-scene .tool rect{fill:var(--surface);stroke:var(--line);stroke-width:1.2;}
.tools-scene .tool .bar{fill:var(--inset);}
.tools-scene .tool .dot{fill:var(--line);stroke:none;}
.tools-scene .tool text{fill:var(--ink2);font-family:var(--font-ui);font-size:12px;font-weight:600;}
.tools-scene .tool .line{fill:var(--ink3);stroke:none;opacity:.4;}
.tools-scene .tool .line.s{opacity:.25;}
.tools-scene .tool{transform-box:fill-box;transform-origin:center;
  animation:ldsuck 7s ease-in-out infinite;animation-delay:var(--d,0s);}
@keyframes ldsuck{
  0%,8%{opacity:1;transform:none;}
  46%{opacity:.22;transform:translate(78px,26px) scale(.72);}
  62%{opacity:.22;transform:translate(78px,26px) scale(.72);}
  84%,100%{opacity:1;transform:none;}
}
.tools-scene .arrow{fill:none;stroke:var(--c-accent);stroke-width:1.6;opacity:.35;
  stroke-dasharray:6 8;animation:ldarrow 1.6s linear infinite;animation-delay:var(--d,0s);}
@keyframes ldarrow{to{stroke-dashoffset:-28;}}

/* --- экран 19: окна утекают в единый интерфейс справа --- */
.flow-scene{max-inline-size:320px;}
.flow-scene .fw rect{fill:var(--surface);stroke:var(--line);stroke-width:1.1;}
.flow-scene .fw .bar{fill:var(--inset);}
.flow-scene .candles path{stroke-width:3.4;stroke-linecap:round;}
.flow-scene .candles .up{stroke:var(--c-green);}
.flow-scene .candles .dn{stroke:var(--c-red);}
.flow-scene .fw{transform-box:fill-box;transform-origin:center;
  animation:ldsweep 8s ease-in-out infinite;animation-delay:var(--d,0s);}
@keyframes ldsweep{
  0%,6%{opacity:1;transform:none;}
  44%{opacity:.22;transform:translateX(96px) scale(.78);}
  66%{opacity:.22;transform:translateX(96px) scale(.78);}
  88%,100%{opacity:1;transform:none;}
}

/* --- экран 5: отбор (ситуации заходят -> сито -> лишнее отсеивается -> проходит сигнал) ---
   Логика Igor 31.07: «графики собираются, отметаются, а годное попадает как сигнал». */
.sieve-scene{margin-block:18px 12px;max-inline-size:600px;margin-inline:auto;}
.sieve-scene .cand rect{fill:var(--surface);stroke:var(--line);stroke-width:1.1;}
.sieve-scene .candles path{stroke-width:3.2;stroke-linecap:round;}
.sieve-scene .candles .up{stroke:var(--c-green);}
.sieve-scene .candles .dn{stroke:var(--c-red);}
.sieve-scene .mesh{stroke:var(--c-accent);stroke-width:2;opacity:.5;
  stroke-dasharray:14 10;animation:ldmesh 2.4s linear infinite;}
.sieve-scene .mesh.d{opacity:.28;stroke-dasharray:8 14;animation-direction:reverse;}
@keyframes ldmesh{to{stroke-dashoffset:-24;}}

/* верхний ряд: ситуации подходят к отбору волной */
.sieve-scene .cand{transform-box:fill-box;transform-origin:center;
  animation:ldcome 6.4s ease-in-out infinite;animation-delay:var(--d,0s);}
/* ⚠ ни одна фаза не должна быть пустой: на статичном взгляде пустая сцена читается как баг,
   поэтому минимальная непрозрачность - не ноль, а призрак */
@keyframes ldcome{
  0%{opacity:.22;transform:translateY(-14px);}
  14%{opacity:1;transform:none;}
  62%{opacity:1;transform:none;}
  78%{opacity:.3;transform:translateY(16px) scale(.93);}
  90%,100%{opacity:.22;transform:translateY(-14px);}
}
/* нижний ряд: отсеянное падает и гаснет */
.sieve-scene .cand[class*="r"]{animation-name:lddrop2;}
@keyframes lddrop2{
  0%,10%{opacity:.18;transform:translateY(-18px) scale(.95);}
  30%{opacity:.9;transform:none;}
  56%{opacity:.55;transform:translateY(18px) rotate(-3deg);}
  78%,100%{opacity:.18;transform:translateY(40px) rotate(-6deg) scale(.88);}
}
/* прошедший отбор превращается в сигнал */
.sieve-scene .passed rect{fill:var(--surface);stroke:var(--c-accent);stroke-width:1.6;}
.sieve-scene .passed .pd{fill:var(--c-accent);}
.sieve-scene .passed text{fill:var(--ink);font-family:var(--font-ui);font-size:13px;
  font-weight:700;}
.sieve-scene .passed .ln{fill:var(--ink3);opacity:.45;}
.sieve-scene .passed .ln.s{opacity:.28;}
.sieve-scene .passed{transform-box:fill-box;transform-origin:center;
  animation:ldpassed 6.4s ease-in-out infinite;}
@keyframes ldpassed{
  0%,36%{opacity:.2;transform:translateY(-12px) scale(.95);}
  56%{opacity:1;transform:none;}
  94%{opacity:1;transform:none;}
  100%{opacity:.2;transform:scale(.97);}
}

/* мобильные варианты сцен: на телефоне отдельная композиция, а не сжатый десктоп
   (Igor 31.07: «для мобильной версии нужна другая вёрстка, чтобы логика соблюдалась») */
.scene.mob{display:none;}
@media(max-width:719px){
  .scene.mob{display:block;}
  .scene:not(.mob){display:none;}
  .sieve-scene.mob{max-inline-size:none;}
  .tools-scene.mob{max-inline-size:none;}
}

/* --- экран 6: сцена «как приходит сигнал» (механика из онбординга приложения) --- */
.story{margin-block-start:30px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rad-card);padding:16px 18px 12px;box-shadow:var(--shadow-card);}
.sthead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-block-end:8px;}
.stnum{margin-inline-start:auto;font-size:12px;color:var(--ink3);}
.stchart{display:block;inline-size:100%;block-size:auto;}
.stchart text{font-family:var(--font-ui);}
/* бары появляются по одному, как в онбординге (ocnd) */
.stbar{opacity:0;transform:translateY(7px);transition:opacity .26s ease,transform .26s ease;}
.stbar.on{opacity:1;transform:none;}
.stln{opacity:0;transition:opacity .5s ease;}
.stln.on{opacity:1;}
.stmk{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;
  transition:opacity .3s ease,transform .38s cubic-bezier(.3,1.6,.4,1);}
.stmk.on{opacity:1;transform:scale(1);}
.stview{transition:transform .5s cubic-bezier(.3,.7,.25,1);will-change:transform;}
.stmsg{min-block-size:24px;margin-block-start:8px;text-align:center;font-size:13.5px;
  font-weight:600;color:var(--ink3);}
.stmsg .acc{color:var(--c-accent-ink);} .stmsg .ok{color:var(--c-green-ink);}
.stmsg .far{color:#6682FF;}
@media(max-width:719px){
  .story{padding:12px 12px 10px;}
  .stchart{min-block-size:200px;}
}

/* свечи в сценах: фитиль линией, тело прямоугольником - как на настоящем графике */
.scene .up .wick,.scene .up .body{stroke:var(--c-green);fill:var(--c-green);}
.scene .dn .wick,.scene .dn .body{stroke:var(--c-red);fill:var(--c-red);}
.scene .wick{stroke-width:1.4;fill:none;stroke-linecap:round;}
.scene .body{stroke:none;}

/* ================================================================================
   РЕДИЗАЙН ЛЕНДИНГА (.ld2) - ТЗ 02.08, docs/plans/landing_redesign_tz_2026-08-02.md.
   Премиальный тёмный fintech. Два смысловых цвета (решение Igor 02.08):
   оранжевый #E04F3F - возможность и действие; синий #002FED - система и доказательства.
   Тема только тёмная, поэтому переключатель темы на этой странице спрятан.
   ================================================================================ */
body.ld2{
  /* токены ТЗ п.1.2 (оранжевый заменён на фирменный Live по решению Igor) */
  --bg-primary:#08090D; --bg-secondary:#0D0F15; --bg-tertiary:#12151D;
  --bg-elevated:#171A23; --bg-deep:#06070A;
  --text-primary:#F5F6F8; --text-secondary:#A3A7B2; --text-muted:#707580;
  --border-default:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.14);
  --orange:#E04F3F; --orange-soft:rgba(224,79,63,.13); --orange-line:rgba(224,79,63,.30);
  --orange-glow:rgba(224,79,63,.22);
  --brand-blue:#002FED; --brand-blue-light:#6682FF; --brand-blue-soft:rgba(0,47,237,.13);
  --brand-blue-surface:rgba(0,47,237,.20); --brand-blue-line:rgba(0,47,237,.34);
  --brand-blue-glow:rgba(0,47,237,.24);
  /* мост к общим токенам: живые карточки (.pcard) и шапка перекрашиваются сами */
  --bg:var(--bg-primary); --surface:var(--bg-tertiary); --surface2:var(--bg-elevated);
  --inset:#0D1017; --ink:var(--text-primary); --ink2:var(--text-secondary);
  --ink3:var(--text-muted); --line:var(--border-default);
  --c-accent:var(--orange); --c-accent-ink:#EC6A5A;
  --c-accent-l:var(--orange-soft); --c-accent-sh:var(--orange-glow);
  --c-blue-ink:var(--brand-blue-light); --c-blue-l:var(--brand-blue-soft);
  --c-green-l:#122B27; --c-green-line:#1F4E45; --c-green-ink:#3CB9A4;
  --c-red-l:#331F25; --c-red-line:#5E2E36; --c-red-ink:#FF747E;
  --c-live-soft:rgba(224,79,63,.22); --c-live-line:rgba(224,79,63,.40);
  --shadow-card:0 18px 48px rgba(0,0,0,.22);
  background:var(--bg-primary); color:var(--text-primary);
}
/* ---- общий каркас ---- */
.ld2 .wrap{max-inline-size:1240px;}
.ld2 main section{padding-block:144px;}
/* 🐞 13.08 (Igor: «переход по меню открывает раздел, но с большой пустотой сверху»):
   `scroll-padding-block-start:76px` отводит место под липкую шапку, а секция сверху имеет
   СВОЙ отступ 144/112/88 px - они складывались, и заголовок раздела оказывался на 150-220 px
   ниже шапки. Отрицательный scroll-margin гасит собственный отступ секции: к шапке
   выравнивается ПЕРВАЯ СТРОКА раздела, а не его невидимая граница. */
.ld2 main section[id]{scroll-margin-block-start:calc(24px + 73px - 76px - 144px);}
.ld2 main section#top{scroll-margin-block-start:0;}          /* первый экран и так наверху */
.ld2 .thm,.ld2 .mthm,.ld2 .msep{display:none;}     /* тема одна - тёмная */
.ld2 h1,.ld2 h2,.ld2 h3{font-family:var(--font-display);}
.ld2 h2{font-size:clamp(44px,4vw,60px);line-height:1.05;font-weight:620;
  letter-spacing:-.045em;max-inline-size:900px;}
.ld2 h3{font-size:28px;line-height:1.18;font-weight:600;letter-spacing:-.025em;}
.ld2 p{font-size:18px;line-height:1.65;}
.ld2 .l2head{margin-block-end:56px;}
.ld2 .l2head p:not(.l2label){margin-block-start:18px;color:var(--text-secondary);
  max-inline-size:680px;}
.ld2 .l2head.center{text-align:center;}
.ld2 .l2head.center h2,.ld2 .l2head.center p:not(.l2label){margin-inline:auto;}
.ld2 .l2label{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-muted);margin-block-end:16px;}
.ld2 .l2label.blue{color:var(--brand-blue-light);}
.ld2 .l2note{font-size:14px;line-height:1.55;color:var(--text-muted);margin-block-start:32px;}
.ld2 .l2note.center{text-align:center;}
.ld2 .l2note a{color:var(--brand-blue-light);}
.ld2 .center{text-align:center;}

/* ---- кнопки ---- */
.l2btn{display:inline-flex;align-items:center;justify-content:center;block-size:52px;
  padding-inline:26px;border-radius:12px;font-size:15px;font-weight:600;letter-spacing:-.01em;
  transition:filter var(--t),background var(--t),border-color var(--t);}
.l2btn.pri{background:var(--orange);color:#fff;}
.l2btn.pri:hover{filter:brightness(1.08);}
.l2btn.sec{border:1px solid var(--border-strong);color:var(--text-primary);}
.l2btn.sec:hover{background:rgba(255,255,255,.05);}
.l2btn.sm{block-size:42px;padding-inline:18px;font-size:14px;border-radius:10px;}

/* ---- фирменная скобка (ТЗ п.6) - на странице не более 5-6 ---- */
.brk-b,.brk-o{position:relative;padding-inline-start:24px;}
.brk-b::before,.brk-o::before{content:"";position:absolute;inset-inline-start:0;
  inset-block:8px;inline-size:4px;border-radius:0 4px 4px 0;}
.brk-b::before{background:var(--brand-blue);
  box-shadow:0 0 18px color-mix(in srgb,var(--brand-blue) 24%,transparent);}
.brk-o::before{background:var(--orange);
  box-shadow:0 0 18px color-mix(in srgb,var(--orange) 24%,transparent);}
.brk-b.large::before,.brk-o.large::before{inset-block:20px;inline-size:5px;
  border-radius:0 5px 5px 0;}

/* ---- glass (ТЗ п.7) ---- */
.ld2 .glass-p{background:rgba(18,21,29,.62);border:1px solid rgba(255,255,255,.08);
  border-radius:20px;backdrop-filter:blur(16px) saturate(1.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  box-shadow:0 18px 48px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.035);}
.ld2 .glass-lg{background:rgba(18,21,29,.76);border:1px solid rgba(255,255,255,.10);
  border-radius:28px;backdrop-filter:blur(22px) saturate(1.15);
  -webkit-backdrop-filter:blur(22px) saturate(1.15);
  box-shadow:0 32px 80px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.05);}
.ld2 .glass-pill{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);
  border-radius:999px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}

/* ---- шапка: прозрачная, при прокрутке фон + blur (ТЗ п.10) ---- */
.ld2 .hdr{background:transparent;border-block-end:1px solid transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  transition:background var(--t),border-color var(--t);}
.ld2 .hdr .in{block-size:72px;}
.ld2 .nav{font-size:14px;gap:30px;color:var(--text-secondary);}
.ld2 .nav a.on,.ld2 .nav a:hover{color:var(--text-primary);}
body.ld2.scrolled .hdr{background:rgba(8,9,13,.76);backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);border-block-end:1px solid rgba(255,255,255,.06);}
.ld2 .hdr .btn.pri{block-size:40px;padding-inline:17px;border-radius:10px;
  background:rgba(255,255,255,.08);color:var(--text-primary);box-shadow:none;}
.ld2 .hdr .btn.pri:hover{background:rgba(255,255,255,.13);}

/* ---- живые карточки на тёмном ---- */
.ld2 .pcard{box-shadow:none;}
.ld2 .glass-lg .pcard,.ld2 .glass-p .pcard{background:transparent;border:0;box-shadow:none;}

/* ================= 1. Hero ================= */
/* 🐞 13.08 (Igor: «при открытии сайта пустое пространство наверху»): к 150 px собственного
   отступа добавлялась липкая шапка 73 px - первая строка начиналась почти в трети экрана.
   Отступ уменьшен; на большом экране герой всё равно центрируется внутри min-height. */
.l2hero{position:relative;min-block-size:860px;display:flex;align-items:center;
  padding-block-start:72px!important;overflow:hidden;}
.l2hero .l2grid{position:absolute;inset:0;opacity:.1;pointer-events:none;
  background-image:linear-gradient(var(--border-strong) 1px,transparent 1px),
    linear-gradient(90deg,var(--border-strong) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 72% 40%,#000 0%,transparent 62%);
  -webkit-mask-image:radial-gradient(circle at 72% 40%,#000 0%,transparent 62%);}
.l2hero .wrap.in{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:center;
  position:relative;}
.l2htxt h1{font-size:clamp(58px,5.3vw,78px);line-height:.98;font-weight:650;
  letter-spacing:-.055em;max-inline-size:740px;}
.l2htxt h1 .acc{color:var(--c-accent-ink);}
.l2sub{margin-block-start:28px;font-size:20px;line-height:1.55;letter-spacing:-.01em;
  max-inline-size:680px;color:var(--text-secondary);}
.l2cta{margin-block-start:36px;display:flex;gap:14px;flex-wrap:wrap;}
.l2cta.center{justify-content:center;}
.l2trust{margin-block-start:34px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  font-size:14px;color:var(--text-secondary);}
.l2trust i{inline-size:5px;block-size:5px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 10px var(--orange-glow);}
.l2stage{position:relative;display:flex;justify-content:center;}
.l2glow{position:absolute;inset-block-start:50%;inset-inline-start:50%;
  transform:translate(-50%,-50%);inline-size:560px;block-size:560px;pointer-events:none;
  background:radial-gradient(circle,rgba(224,79,63,.17) 0%,rgba(224,79,63,.13) 43%,transparent 72%);
  filter:blur(30px);}
.l2spark{position:absolute;inset-block-start:-8%;inset-inline-end:-6%;inline-size:78%;
  color:var(--brand-blue-light);opacity:.22;pointer-events:none;}
.l2maincard{position:relative;inline-size:min(480px,100%);padding:18px;
  transition:opacity .24s ease,transform .24s ease;}
.l2maincard.swap{opacity:0;transform:translateY(8px);}
.l2rr{position:absolute;inset-block-end:-18px;inset-inline-start:-6px;
  padding:10px 16px;font-size:13px;color:var(--text-secondary);display:flex;gap:7px;
  align-items:baseline;white-space:nowrap;}
.l2rr b{color:var(--brand-blue-light);font-weight:650;}
.l2rr span{font-size:11px;color:var(--text-muted);}

/* ================= 2. Сравнение ================= */
.l2cmp{background:var(--bg-secondary);}
.l2duo{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.l2pane{min-block-size:440px;padding:40px;border-radius:24px;display:flex;
  flex-direction:column;gap:22px;}
.l2pane.bad{background:radial-gradient(circle at 20% 20%,rgba(240,100,100,.06),transparent 48%),
  rgba(255,255,255,.018);border:1px solid var(--border-default);}
.l2pane.good{background:radial-gradient(circle at 80% 20%,rgba(224,79,63,.11),transparent 52%),
  rgba(18,21,29,.62);}
.l2pane .scene{inline-size:100%;flex:1 1 auto;}
.l2pt{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-muted);}
.l2pt.on{color:var(--c-accent-ink);}
.l2minicard{flex:1 1 auto;display:flex;align-items:center;}
.l2minicard .pcard{inline-size:100%;background:var(--bg-elevated);border:1px solid var(--border-default);}
.l2sum{font-size:16px;line-height:1.5;color:var(--text-secondary);}
.l2vs{position:absolute;inset-block-start:50%;inset-inline-start:50%;z-index:2;
  transform:translate(-50%,-50%);inline-size:46px;block-size:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
  letter-spacing:.06em;color:var(--text-secondary);background:var(--bg-elevated);
  border:1px solid var(--border-strong);}

/* ================= 3. Диаграмма работы ================= */
.l2chain{display:flex;align-items:stretch;gap:0;}
.l2sys{flex:1 1 auto;}
.l2syscap{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand-blue-light);margin-block-end:22px;}
.l2nodes{list-style:none;display:flex;justify-content:space-between;gap:8px;position:relative;
  padding-block-start:0;}
.l2nodes::before{content:"";position:absolute;inset-inline:24px;inset-block-start:24px;
  block-size:1px;background:var(--brand-blue-line);}
.l2nodes li{position:relative;flex:1 1 0;display:flex;flex-direction:column;align-items:center;
  gap:12px;text-align:center;}
.l2nodes li i{inline-size:48px;block-size:48px;border-radius:50%;background:var(--bg-secondary);
  border:1px solid var(--brand-blue-line);position:relative;z-index:1;}
.l2nodes li i::after{content:"";position:absolute;inset:19px;border-radius:50%;
  background:var(--brand-blue-light);opacity:.85;}
.l2nodes li span{font-size:13px;line-height:1.35;color:var(--text-secondary);max-inline-size:110px;}
.l2gap{inline-size:48px;flex:0 0 48px;}
.l2you{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:12px;
  text-align:center;padding-block-start:0;margin-block-start:0;}
.l2you i{inline-size:48px;block-size:48px;border-radius:50%;background:var(--orange-soft);
  border:1px solid var(--orange-line);position:relative;}
.l2you i::after{content:"";position:absolute;inset:17px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 14px var(--orange-glow);}
.l2you span{font-size:13px;font-weight:600;color:var(--text-primary);max-inline-size:110px;}
.l2you.brk-o{padding-inline-start:24px;}
.l2flow .l2note.center{max-inline-size:640px;margin-inline:auto;}

/* ================= 4. Showcase карточки ================= */
.l2show{background:var(--bg-tertiary);position:relative;}
.l2show::before,.l2show::after{content:"";position:absolute;inset-inline:0;block-size:1px;
  background:linear-gradient(90deg,transparent,rgba(224,79,63,.22),transparent);}
.l2show::before{inset-block-start:0;}
.l2show::after{inset-block-end:0;}
/* 09.09: настоящий снимок карточки + ровные подписи по бокам (Igor: «плашки вразнобой,
   кружок уехал»). Никаких процентных привязок: снимок меняет пропорции - вёрстка не едет. */
.l2anat{display:grid;grid-template-columns:minmax(200px,1fr) minmax(340px,440px) minmax(200px,1fr);
  gap:32px;align-items:center;margin-inline:auto;max-inline-size:1180px;}
.l2legend{display:flex;flex-direction:column;gap:14px;list-style:none;margin:0;padding:0;}
.l2anat .l2legend:first-child{align-items:flex-end;text-align:end;}
.l2legend li{display:flex;align-items:center;gap:10px;font-size:15px;line-height:20px;
  inline-size:fit-content;max-inline-size:100%;
  color:var(--ink2);background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:9px 16px;box-shadow:var(--shadow-card);}
.l2legend li i{inline-size:6px;block-size:6px;border-radius:50%;background:var(--orange);flex:0 0 auto;}
.l2shot{margin:0;}
.l2shot img{display:block;inline-size:100%;block-size:auto;border-radius:var(--rad-card);
  border:1px solid var(--line);box-shadow:var(--shadow-card);}
.l2shot figcaption{margin-block-start:12px;font-size:14px;line-height:20px;color:var(--ink2);}
.l2shot figcaption b{color:var(--ink);font-weight:600;}
.l2spaces{display:flex;flex-direction:column;gap:26px;margin-block-start:26px;}
.l2spair{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start;}
@media (max-width:860px){
  .l2anat{grid-template-columns:1fr;gap:18px;}
  .l2anat .l2legend:first-child{align-items:stretch;text-align:start;}
  .l2anat .l2shot{order:-1;max-inline-size:340px;margin-inline:auto;}
  .l2spair{grid-template-columns:1fr;}
}
  background:var(--border-strong);}
/* позиции девяти выносок финального текста - ниже, в блоке «БЛОКИ ФИНАЛЬНОГО ТЕКСТА»
   (прежние пять правил убраны 02.08: они складывались с новыми и растягивали теги) */

/* ================= 5. Funnel ================= */
.l2funnel .l2big{font-size:clamp(30px,3.2vw,40px);line-height:1.12;font-weight:620;
  letter-spacing:-.035em;max-inline-size:880px;margin-inline:auto;font-family:var(--font-display);}
.l2fun{inline-size:min(900px,100%);margin-block-start:64px;}
.l2fun .fdots circle{fill:var(--text-muted);opacity:.45;}
.ldjs .l2fun .fdots circle{animation:l2drift 5s ease-in-out infinite;animation-delay:var(--d);}
@keyframes l2drift{0%,100%{transform:translateX(0);opacity:.45;}
  50%{transform:translateX(26px);opacity:.7;}}
.l2fun .ffilters rect{fill:var(--brand-blue-line);}
.l2fun .fout circle{fill:var(--orange);filter:drop-shadow(0 0 8px var(--orange-glow));}
.l2funcap{inline-size:min(900px,100%);margin-inline:auto;display:flex;
  justify-content:space-between;gap:12px;margin-block-start:10px;font-size:13px;
  color:var(--text-muted);}
.l2funcap .blue{color:var(--brand-blue-light);}
.l2funcap .orange{color:var(--c-accent-ink);}

/* ================= 6. Глава доверия ================= */
.l2proof{padding-block:168px!important;
  background:radial-gradient(circle at 75% 10%,rgba(224,79,63,.16),transparent 40%),#0B0C13;}
.l2proofpanel{display:grid;grid-template-columns:1fr 300px;gap:36px;align-items:center;
  padding:44px;margin-block-start:8px;}
.l2proofpanel .story{min-block-size:280px;}
@media (max-width:767px){
  /* Igor 03.08: график должен занимать высоту, а не оставлять пустое поле снизу */
  .l2proofpanel{padding:20px 16px;}
  .l2proofpanel .story{min-block-size:0;}
  .ld2 .story .stchart{block-size:auto;}
}
.l2pstat{display:flex;flex-direction:column;gap:6px;text-align:start;}
.l2pv{font-size:88px;line-height:.95;font-weight:650;letter-spacing:-.06em;
  color:var(--brand-blue-light);font-family:var(--font-display);}
.l2pk{font-size:15px;font-weight:600;color:var(--text-primary);margin-block-start:10px;}
.l2pl{font-size:13px;color:var(--text-muted);}
.l2prooftxt{margin-block-start:44px;max-inline-size:680px;}
.l2prooftxt p{color:var(--text-secondary);}
.l2prooftxt p+p{margin-block-start:14px;}
/* история сигнала внутри панели */
.ld2 .story .sthead{display:flex;align-items:center;gap:8px;margin-block-end:10px;}
.ld2 .story .stnum{margin-inline-start:auto;font-size:12px;color:var(--text-muted);}
.ld2 .story .stchart{inline-size:100%;block-size:auto;}
.ld2 .story .stbar{opacity:0;}
.ld2 .story .stbar.on{opacity:1;}
.ld2 .story .stln,.ld2 .story .stmk{opacity:0;transition:opacity .3s ease;}
.ld2 .story .stln.on,.ld2 .story .stmk.on{opacity:1;}
.ld2 .story .stview{transition:transform .17s linear;}
.ld2 .story .stmsg{min-block-size:22px;margin-block-start:8px;font-size:14px;
  color:var(--text-secondary);}
.ld2 .story .stmsg .acc{color:var(--c-accent-ink);}
.ld2 .story .stmsg .ok{color:var(--c-green-ink);}
.ld2 .story .stmsg .far{color:var(--brand-blue-light);}   /* «цена пошла дальше - 2 ATR» */
.ld2 .bigchart .bchead{display:flex;align-items:center;gap:8px;margin-block-end:10px;}
.ld2 .bigchart .bclv{margin-inline-start:auto;font-size:12px;color:var(--text-muted);}

/* ================= 7. Reach ≠ Win ================= */
.l2math{background:var(--bg-secondary);}
.l2mathgrid{display:grid;grid-template-columns:5fr 7fr;gap:24px;align-items:stretch;}
.l2terms{display:flex;flex-direction:column;gap:14px;}
.l2term{background:rgba(255,255,255,.025);border:1px solid var(--border-default);
  border-radius:20px;padding:28px;flex:1 1 auto;}
.l2term .tt{font-size:15px;font-weight:650;letter-spacing:.02em;margin-block-end:10px;}
.l2term.blue .tt{color:var(--brand-blue-light);}
.l2term:not(.blue) .tt{color:var(--c-accent-ink);}
.l2term p:not(.tt){font-size:15px;line-height:1.55;color:var(--text-secondary);}
.l2neq{align-self:center;font-size:30px;color:var(--text-muted);line-height:1;}
.l2calc{padding:32px;}
.l2calccap{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-muted);}
.l2bars{display:flex;gap:28px;align-items:flex-end;margin-block-start:26px;block-size:180px;}
.l2bar{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1 1 0;
  block-size:100%;justify-content:flex-end;}
.l2bar b{font-size:19px;color:var(--brand-blue-light);}
.l2bar i{inline-size:min(64px,100%);block-size:calc(var(--h)*120px);border-radius:8px 8px 0 0;
  background:linear-gradient(180deg,var(--brand-blue-surface),rgba(224,79,63,.06));
  border:1px solid var(--brand-blue-line);border-block-end:0;}
.l2bar span{font-size:13px;color:var(--text-secondary);}
.l2ex{margin-block-start:28px;border-block-start:1px solid var(--border-default);
  padding-block-start:22px;}
.l2ex p.num{margin-block-start:8px;font-size:16px;color:var(--text-secondary);}
.l2ex p.num b{color:var(--c-green-ink);}
.l2disc{margin-block-start:44px;font-size:14px;line-height:1.6;color:var(--text-muted);
  max-inline-size:760px;}
.l2disc i{display:none;}

/* ================= 8. Контекст показателей ================= */
.l2map{display:grid;grid-template-columns:1fr auto 1fr;gap:44px;align-items:center;
  max-inline-size:1080px;margin-inline:auto;}
.l2params{list-style:none;display:flex;flex-direction:column;gap:30px;}
.l2params li{display:flex;gap:14px;align-items:flex-start;}
.l2params svg{inline-size:20px;block-size:20px;flex:0 0 auto;margin-block-start:2px;
  fill:none;stroke:var(--brand-blue-light);stroke-width:1.6;stroke-linecap:round;
  stroke-linejoin:round;}
.l2params b{display:block;font-size:16px;font-weight:600;}
.l2params span{display:block;margin-block-start:3px;font-size:14px;color:var(--text-muted);}
.l2params.l{text-align:end;}
.l2params.l li{flex-direction:row-reverse;}
.l2mapcard{inline-size:230px;block-size:270px;border:1px solid var(--border-strong);
  border-radius:20px;background:var(--bg-tertiary);padding:22px;display:flex;}
.l2mapcard .mc{display:flex;flex-direction:column;gap:12px;inline-size:100%;}
.l2mapcard .mrow{display:block;block-size:10px;border-radius:5px;
  background:rgba(255,255,255,.10);}
.l2mapcard .mrow.w60{inline-size:60%;}
.l2mapcard .mrow.w40{inline-size:40%;background:var(--orange-soft);}
.l2mapcard .mrow.w80{inline-size:80%;}
.l2mapcard .mchart{flex:1 1 auto;border-radius:12px;background:
  linear-gradient(135deg,var(--brand-blue-soft),transparent 60%),rgba(255,255,255,.03);
  border:1px solid var(--border-default);}

/* ================= 9. Пломба и история ================= */
.l2seal{background:rgba(224,79,63,.055);
  border-block-start:1px solid rgba(224,79,63,.16);
  border-block-end:1px solid rgba(224,79,63,.16);}
.l2sealgrid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.l2sealgrid .l2head{margin-block-end:0;}
.l2steps{list-style:none;position:relative;display:flex;flex-direction:column;gap:26px;
  padding-inline-start:0;}
.l2steps::before{content:"";position:absolute;inset-inline-start:8px;
  inset-block:10px;inline-size:1px;background:var(--brand-blue-line);}
.l2steps li{position:relative;padding-inline-start:34px;font-size:16px;
  color:var(--text-secondary);}
.l2steps li i{position:absolute;inset-inline-start:2px;inset-block-start:3px;
  inline-size:13px;block-size:13px;border-radius:50%;background:var(--bg-secondary);
  border:1px solid var(--brand-blue-light);}
.l2steps li:last-child i{background:var(--brand-blue-light);}
.sl2status{position:relative;padding:24px 24px 24px 28px;margin-block:30px 22px;
  background:rgba(18,21,29,.62);border:1px solid rgba(255,255,255,.08);border-radius:20px;
  backdrop-filter:blur(16px) saturate(1.1);-webkit-backdrop-filter:blur(16px) saturate(1.1);}
.sl2status::before{content:"";position:absolute;inset-inline-start:0;inset-block:8px;
  inline-size:4px;border-radius:0 4px 4px 0;background:var(--brand-blue);
  box-shadow:0 0 18px color-mix(in srgb,var(--brand-blue) 24%,transparent);}
.sl2ok{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;}
.sl2ok svg{inline-size:18px;block-size:18px;color:var(--c-green-ink);flex:0 0 auto;}
.sl2hash{display:block;margin-block-start:14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;color:var(--brand-blue-light);background:rgba(0,0,0,.24);
  border:1px solid rgba(224,79,63,.22);border-radius:10px;padding:12px 14px;
  overflow-wrap:anywhere;}
.sl2meta{margin-block-start:10px;font-size:12px;color:var(--text-muted);}
.l2hist{margin-block-start:72px;}
.htwrap{inline-size:100%;overflow-x:auto;border:1px solid var(--border-default);
  border-radius:16px;background:var(--bg-tertiary);}
.htable{inline-size:100%;border-collapse:collapse;font-size:14px;min-inline-size:640px;}
.htable th{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted);text-align:start;padding:14px 16px;
  border-block-end:1px solid var(--border-default);}
.htable td{padding:13px 16px;border-block-end:1px solid var(--border-default);
  color:var(--text-secondary);}
.htable tr:last-child td{border-block-end:0;}
.htable .hsym{font-weight:650;color:var(--text-primary);}
.htable code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;
  color:var(--text-muted);}
.htable a{color:var(--brand-blue-light);font-weight:500;}
.htable .hout.ok{color:var(--c-green-ink);}
.htable .hout.no{color:var(--c-red-ink);}
.htable .hout.wait{color:var(--text-muted);}
.sl2ok.wait svg{color:var(--brand-blue-light);}

/* ================= 10. Симулятор ================= */
.l2simgrid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center;}
.l2simtxt p:not(.l2label){margin-block:18px 30px;color:var(--text-secondary);}
.l2simfeat{margin-block-start:28px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:13px;color:var(--text-muted);}
.l2simfeat i{inline-size:4px;block-size:4px;border-radius:50%;
  background:var(--brand-blue-light);}
.l2simmock{padding:0;overflow:hidden;}
.l2wtop{display:flex;align-items:center;gap:7px;padding:13px 18px;
  border-block-end:1px solid var(--border-default);}
.l2wtop i{inline-size:9px;block-size:9px;border-radius:50%;background:rgba(255,255,255,.14);}
.l2wtop span{margin-inline-start:8px;font-size:12px;font-weight:600;letter-spacing:.03em;
  color:var(--text-muted);}
.l2wtop .simbadge{margin-inline-start:auto;font-style:normal;font-size:10px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--brand-blue-light);
  border:1px solid var(--brand-blue-line);border-radius:999px;padding:3px 10px;
  background:var(--brand-blue-soft);}
.l2simbody{display:grid;grid-template-columns:1fr 272px;gap:0;}
.l2simchart{padding:20px;min-inline-size:0;display:flex;}
/* панель настоящая (Igor 03.08) - отступы держит сама .l2order */
.l2simside{border-inline-start:1px solid var(--border-default);display:flex;flex-direction:column;}
.l2simside .sr{display:flex;flex-direction:column;gap:3px;font-size:12px;}
.l2simside .sr span{color:var(--text-muted);font-size:10px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;}
.l2simside .sr b{color:var(--text-secondary);font-weight:600;}
.l2simside .srbtn{margin-block-start:auto;text-align:center;padding:11px;border-radius:10px;
  background:var(--orange);color:#fff;font-size:13px;font-weight:600;}
.l2simside .srstep{text-align:center;padding:10px;border-radius:10px;
  border:1px solid var(--border-strong);font-size:13px;color:var(--text-secondary);}

/* ================= 11. Тезис ================= */
.l2thesis{padding-block:88px!important;}
.l2thesis p{font-size:30px;line-height:1.3;max-inline-size:840px;margin-inline:auto;
  font-family:var(--font-display);font-weight:600;letter-spacing:-.02em;}

/* ================= 12. Рабочее пространство ================= */
.l2space{background:var(--bg-secondary);overflow:hidden;}
.l2spacegrid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center;}
.l2spacetxt p:not(.l2label){margin-block-start:18px;color:var(--text-secondary);}
.l2wsp{padding:0;overflow:hidden;inline-size:min(860px,100%);}
.l2wbody{display:grid;grid-template-columns:52px 1fr 268px;}
.l2wnav{border-inline-end:1px solid var(--border-default);padding-block:18px;
  display:flex;flex-direction:column;align-items:center;gap:20px;}
.l2wnav svg{inline-size:19px;block-size:19px;fill:none;stroke:var(--text-muted);
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.l2wnav svg:first-child{stroke:var(--c-accent-ink);}
.l2wmain{padding:16px;min-inline-size:0;}
/* справа - настоящая панель сделки, отступы держит .l2order (Igor 03.08) */
.l2wside{border-inline-start:1px solid var(--border-default);display:flex;
  flex-direction:column;min-inline-size:0;}
.l2wside .pcard{background:transparent;border:0;box-shadow:none;padding:0;font-size:13px;}
/* снизу - журнал: тот самый шаг «результат сохранился и попал в статистику» */
.l2wfoot{border-block-start:1px solid var(--border-default);padding:14px 18px;}
.l2wfoot .pcard{background:transparent;border:0;box-shadow:none;padding:0;font-size:13px;}
.l2wfoot .jrow{font-size:12px;}

/* ================= 13. Путь сделки ================= */
.l2stages{list-style:none;counter-reset:l2s;display:grid;
  grid-template-columns:repeat(3,1fr);gap:40px 28px;max-inline-size:1080px;
  margin-inline:auto;}
.l2stages li{counter-increment:l2s;position:relative;padding-block-start:58px;}
.l2stages li::before{content:counter(l2s,decimal-leading-zero);position:absolute;
  inset-block-start:0;inset-inline-start:0;inline-size:40px;block-size:40px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:1px solid var(--border-strong);font-size:13px;font-weight:650;
  color:var(--text-secondary);font-variant-numeric:tabular-nums;}
.l2stages li:first-child::before{border-color:var(--orange-line);
  color:var(--c-accent-ink);background:var(--orange-soft);}
.l2stages li b{display:block;font-size:17px;font-weight:650;letter-spacing:-.015em;}
.l2stages li span{display:block;margin-block-start:6px;font-size:13px;
  color:var(--text-muted);}

/* ================= 14. Торговля · Аналитика · Развитие ================= */
.l2triple{background:var(--bg-secondary);}
.l2orbit{max-inline-size:980px;margin-inline:auto;}
.l2center{inline-size:fit-content;margin-inline:auto;padding:14px 30px;border-radius:999px;
  background:var(--bg-elevated);border:1px solid var(--border-strong);font-size:15px;
  font-weight:650;}
.l2lines{display:block;inline-size:min(900px,100%);block-size:70px;margin-inline:auto;}
.l2lines path{fill:none;stroke:rgba(255,255,255,.2);stroke-width:1;}
.l2sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.l2sector{background:rgba(255,255,255,.025);border:1px solid var(--border-default);
  border-radius:20px;padding:28px;}
.l2sector h3{font-size:19px;margin-block-end:12px;}
.l2sector.orange h3{color:var(--c-accent-ink);}
.l2sector.blue h3{color:var(--brand-blue-light);}
.l2sector p{font-size:14px;line-height:1.7;color:var(--text-secondary);}

/* ================= 15. Цикл после сделки ================= */
.l2cyclewrap{display:flex;justify-content:center;}
.l2ring{inline-size:min(460px,100%);}
.l2ring .ringbg{fill:none;stroke:var(--border-strong);stroke-width:1;}
.l2ring .ringarrows path{fill:none;stroke:var(--text-muted);stroke-width:1.3;
  stroke-linecap:round;stroke-linejoin:round;opacity:.7;}
.l2ring .cynode circle{fill:var(--bg-elevated);stroke:var(--border-strong);stroke-width:1;}
.l2ring .cynode.orange circle{fill:var(--orange);stroke:none;}
.l2ring .cynode.blue circle{fill:var(--brand-blue-light);stroke:none;}
.l2ring .cynode.white circle{fill:#fff;stroke:none;}
.l2ring .cynode text{fill:var(--text-secondary);font-size:14px;text-anchor:middle;
  font-family:var(--font-ui);}
.l2ring .cycenter{fill:var(--text-primary);font-size:15px;font-weight:600;text-anchor:middle;
  font-family:var(--font-ui);}

/* ================= 16. Управление риском ================= */
.l2riskgrid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center;}
.l2risktxt p{margin-block:18px 24px;color:var(--text-secondary);}
.l2principles{list-style:none;display:flex;flex-direction:column;gap:12px;}
.l2principles li{position:relative;padding-inline-start:24px;font-size:16px;
  color:var(--text-secondary);}
.l2principles li::before{content:"";position:absolute;inset-inline-start:0;
  inset-block-start:9px;inline-size:8px;block-size:8px;border-radius:50%;
  background:var(--orange-soft);border:1px solid var(--orange-line);}
.l2riskpanel{padding:30px;}
.l2riskpanel .rrows .rr{display:flex;justify-content:space-between;gap:16px;
  padding-block:11px;border-block-end:1px solid var(--border-default);font-size:14px;}
.l2riskpanel .rrows .rr:last-child{border-block-end:0;}
.l2riskpanel .rr .k{color:var(--text-muted);}
.l2riskpanel .rr b{font-weight:600;text-align:end;}
.l2riskpanel .rr b.soft{color:var(--text-secondary);font-weight:500;}
.l2scale{margin-block-start:20px;border-block-start:1px solid var(--border-default);
  padding-block-start:20px;}
.l2scale .sc-cap{font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-muted);}
.l2scale .sc-track{margin-block-start:12px;block-size:8px;border-radius:4px;
  background:rgba(255,255,255,.07);position:relative;overflow:hidden;}
.l2scale .sc-track i{position:absolute;inset-block:0;inset-inline-start:0;
  inline-size:calc(var(--v)*100%);border-radius:4px;
  background:linear-gradient(90deg,var(--orange-soft),var(--orange));}
.l2scale .sc-marks{margin-block-start:8px;display:flex;justify-content:space-between;
  font-size:11px;color:var(--text-muted);}

/* ================= 17. Устройства ================= */
.l2devices{background:radial-gradient(circle at 50% 40%,rgba(224,79,63,.12),transparent 54%),
  var(--bg-primary);}
.l2devcomp{position:relative;display:flex;justify-content:center;align-items:flex-end;
  gap:0;max-inline-size:980px;margin-inline:auto;}
.l2dev{margin:0;position:relative;}
.l2dev figcaption{margin-block-start:14px;font-size:13px;color:var(--text-muted);
  text-align:center;}
.l2dev.desk{inline-size:min(520px,52%);z-index:1;background:var(--bg-tertiary);
  border:1px solid var(--border-default);border-radius:18px;overflow:visible;}
.l2dev.desk .l2devbody{padding:14px;}
.l2dev.phone{inline-size:min(270px,30%);z-index:2;margin-inline-start:-60px;
  background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:26px;
  padding:12px 8px;box-shadow:0 32px 80px rgba(0,0,0,.4);}
.l2dev.phone .pcard{font-size:12px;}
.l2dev.tg{inline-size:min(300px,30%);z-index:3;margin-inline-start:-40px;
  margin-block-end:26px;padding:12px;}
.l2dev .pcard{background:transparent;border:0;box-shadow:none;}
/* 09.09: внутри рамок теперь НАСТОЯЩИЕ снимки приложения (tools/app_shots.py), а не вёрстка.
   Картинка обязана вписываться в рамку целиком: иначе она вылезала за края и резалась. */
.l2dev .l2devbody img{display:block;inline-size:100%;block-size:auto;border-radius:10px;}
.l2dev.desk .l2devbody{padding:10px;}
.l2dev.phone .l2devbody{padding:0;overflow:hidden;border-radius:inherit;}
.l2dev.phone .l2devbody img{border-radius:inherit;}
.l2dev.desk .pcard{background:var(--bg-secondary);border:1px solid var(--border-default);}
/* 🔴 14.08: в Telegram-«устройстве» теперь стоит НАСТОЯЩИЙ рендер карточки канала - тот самый
   PNG, что уходит подписчику. Размеры заданы в разметке (1508x1104), поэтому место под него
   резервируется до загрузки и макет не прыгает (см. #44). */
.l2tgimg{display:block;inline-size:100%;block-size:auto;border-radius:12px;}

/* ================= 18. Тарифы ================= */
.l2plans{background:var(--bg-secondary);}
.l2planrow{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;}
.l2plan{inline-size:min(440px,100%);border-radius:24px;padding:38px;position:relative;
  background:rgba(255,255,255,.02);border:1px solid var(--border-default);
  display:flex;flex-direction:column;}
.l2plan.pro{border:1px solid rgba(224,79,63,.34);
  background:radial-gradient(circle at 80% 0%,rgba(224,79,63,.11),transparent 42%),
  rgba(255,255,255,.03);}
.l2protag{position:absolute;inset-block-start:-13px;inset-inline-start:38px;
  font-size:11px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;
  color:var(--c-accent-ink);background:var(--bg-secondary);
  border:1px solid rgba(224,79,63,.34);border-radius:999px;padding:5px 12px;}
.l2plan .pn{font-size:26px;font-weight:650;font-family:var(--font-display);}
/* цена тарифа (12.08): требование эквайера - стоимость услуги должна быть видна на сайте */
.l2plan .pp{margin-block:14px 0;font-size:32px;line-height:1.15;font-weight:700;
  font-family:var(--font-display);letter-spacing:-.02em;}
.l2plan .pp small{display:block;margin-block-start:6px;font-size:13px;font-weight:500;
  letter-spacing:0;color:var(--text-muted);}
.l2plan .ps{margin-block:6px 20px;font-size:14px;color:var(--text-muted);}
.l2plan ul{list-style:none;display:flex;flex-direction:column;gap:11px;flex:1 1 auto;
  margin-block-end:28px;}
.l2plan li{position:relative;padding-inline-start:26px;font-size:15px;line-height:1.5;
  color:var(--text-secondary);}
.l2plan li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:6px;
  inline-size:14px;block-size:8px;border-inline-start:1.8px solid var(--c-green-ink);
  border-block-end:1.8px solid var(--c-green-ink);transform:rotate(-48deg) scale(.9);}

/* ================= 19. FAQ ================= */
.l2faqlist{max-inline-size:900px;margin-inline:auto;}
.l2faqlist details{padding-block:24px;border-block-end:1px solid var(--border-default);}
.l2faqlist summary{display:flex;align-items:center;gap:18px;cursor:pointer;
  font-size:18px;font-weight:500;list-style:none;}
.l2faqlist summary::-webkit-details-marker{display:none;}
.l2faqlist summary i{margin-inline-start:auto;position:relative;inline-size:16px;
  block-size:16px;flex:0 0 auto;}
.l2faqlist summary i::before,.l2faqlist summary i::after{content:"";position:absolute;
  background:var(--text-muted);transition:transform var(--t);}
.l2faqlist summary i::before{inset-block-start:7px;inset-inline:0;block-size:1.6px;}
.l2faqlist summary i::after{inset-inline-start:7px;inset-block:0;inline-size:1.6px;}
.l2faqlist details[open] summary i::after{transform:scaleY(0);}
.l2faqlist .ans{margin-block-start:14px;font-size:16px;line-height:1.65;
  color:var(--text-secondary);max-inline-size:760px;}

/* ================= 20. Финальный CTA ================= */
.l2final{background:
  radial-gradient(circle at 20% 30%,rgba(224,79,63,.16),transparent 36%),
  radial-gradient(circle at 80% 20%,rgba(224,79,63,.17),transparent 42%),#0A0B10;
  border-block-start:1px solid rgba(255,255,255,.08);}
.l2final h2{font-size:clamp(46px,5vw,68px);line-height:1.02;max-inline-size:900px;
  margin-inline:auto;font-weight:650;letter-spacing:-.05em;}
.l2final .l2sub{margin-inline:auto;margin-block-start:26px;font-size:18px;}
.l2final .l2cta{justify-content:center;}
.l2final .l2note{margin-block-start:26px;}

/* ================= подвал ================= */
.ld2 footer{background:#07080B;border-block-start:1px solid rgba(255,255,255,.06);
  padding-block:72px 40px;}
/* заголовки колонок футера - это h2, и общее правило .ld2 h2 (60px) их раздувало:
   колонки наезжали друг на друга (Igor 03.08). Возвращаем футеру его собственный размер. */
.ld2 footer .fcol h2{font-size:11px;line-height:16px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-muted);font-family:var(--font-ui);
  max-inline-size:none;}
/* 13.08: было --text-muted - контраст к плашке 3.8:1 при норме 4.5 для мелкого шрифта.
   Предупреждение о риске обязано читаться: это юридический текст, а не подпись. */
.ld2 footer .risk{font-size:12px;line-height:1.6;color:var(--text-secondary);
  max-inline-size:1100px;}

/* ================================================================================
   БЛОКИ ФИНАЛЬНОГО ТЕКСТА (02.08, docs/plans/landing_final_copy_2026-08-02.md):
   экраны, которых не было в первом каркасе редизайна - списки в сравнении, «что делает
   ChiPro», переход к главе 2, крупные цифры, темп достижения цели, потенциал хода,
   два рабочих процесса, блок Free. Токены и ритм те же, что у остальной .ld2.
   ================================================================================ */

/* ---- списки-пункты в панелях (экраны 2, 12) ---- */
.l2plist{list-style:none;display:flex;flex-direction:column;gap:12px;margin-block-start:auto;
  padding-inline-start:0;}
.l2plist li{position:relative;padding-inline-start:22px;font-size:15px;line-height:1.5;
  color:var(--text-secondary);}
.l2plist li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:9px;
  inline-size:6px;block-size:6px;border-radius:50%;background:var(--text-muted);}
.l2plist.on li::before{background:var(--orange);box-shadow:0 0 10px var(--orange-glow);}
.l2simtxt .l2plist{margin-block:24px 32px;}

/* ---- что делает ChiPro (экран 3) ---- */
.l2do{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-block-start:72px;}
.l2docard{background:rgba(255,255,255,.025);border:1px solid var(--border-default);
  border-radius:20px;padding:26px;}
.l2docard .dk{font-size:15px;font-weight:650;letter-spacing:.01em;color:var(--text-primary);
  margin-block-end:10px;}
.l2docard p{font-size:15px;line-height:1.55;color:var(--text-secondary);}

/* ---- выноски карточки: их девять, по четыре слева и пять справа (экран 4).
       Столбцы выровнены по внутреннему краю, поэтому все соединительные линии одной длины. ---- */
.l2anat{padding-inline:250px;}
/* сброс: первый каркас позиционировал пять выносок через inset-block-end/inline-start -
   без явного auto старые значения складывались бы с новыми и теги наезжали друг на друга */
.l2tag{max-inline-size:210px;white-space:normal;line-height:1.3;
  inset-block-end:auto;inset-inline-start:auto;inset-inline-end:auto;}
.l2tag.t1,.l2tag.t2,.l2tag.t3,.l2tag.t4{inset-inline-end:calc(100% - 206px);
  justify-content:flex-end;text-align:end;}
.l2tag.t5,.l2tag.t6,.l2tag.t7,.l2tag.t8,.l2tag.t9{inset-inline-start:calc(100% - 206px);}
.l2tag.t1{inset-block-start:2%;}
.l2tag.t2{inset-block-start:24%;}
.l2tag.t3{inset-block-start:46%;}
.l2tag.t4{inset-block-start:68%;}
.l2tag.t5{inset-block-start:1%;}
.l2tag.t6{inset-block-start:21%;}
.l2tag.t7{inset-block-start:41%;}
.l2tag.t8{inset-block-start:61%;}
.l2tag.t9{inset-block-start:81%;}
.l2tag.t1::before,.l2tag.t2::before,.l2tag.t3::before,
.l2tag.t4::before{inset-inline-end:-44px;inset-block-start:50%;}
.l2tag.t5::before,.l2tag.t6::before,.l2tag.t7::before,.l2tag.t8::before,
.l2tag.t9::before{inset-inline-start:-44px;inset-block-start:50%;}

/* ---- переход к главе 2 (экран 5) ---- */
.l2bridge{margin-block-start:64px;padding-block-start:44px;
  border-block-start:1px solid var(--border-default);}
.l2bridge p{max-inline-size:760px;margin-inline:auto;color:var(--text-secondary);}
.l2bridge .l2btn{margin-block-start:28px;}

/* ---- крупные цифры (экраны 6, 9) ---- */
.l2facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-block-start:56px;}
.l2facts.two{grid-template-columns:repeat(2,1fr);max-inline-size:840px;margin-inline:auto;}
.l2fact{background:rgba(255,255,255,.025);border:1px solid var(--border-default);
  border-radius:20px;padding:30px;display:flex;flex-direction:column;gap:10px;}
.l2fact b{font-size:44px;line-height:1;font-weight:650;letter-spacing:-.045em;
  font-family:var(--font-display);color:var(--brand-blue-light);}
.l2fact span{font-size:14px;line-height:1.5;color:var(--text-secondary);}
.l2facts.two .l2fact b{color:var(--c-accent-ink);}

/* ---- темп достижения цели (экран 7) ---- */
.l2speed{background:var(--bg-secondary);}
.l2speedgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:start;}
.l2tempo{border-radius:24px;padding:34px;}
.l2tbars{display:flex;flex-direction:column;gap:18px;margin-block-start:26px;}
.l2tbar{display:grid;grid-template-columns:88px 1fr 52px;align-items:center;gap:14px;}
.l2tbar .th{font-size:13px;color:var(--text-secondary);}
.l2tbar .tt{position:relative;block-size:18px;border-radius:999px;
  background:rgba(255,255,255,.05);}
.l2tbar i{position:absolute;inset-block:0;inset-inline-start:0;inline-size:100%;
  border-radius:999px;transform:scaleX(var(--w));transform-origin:left center;
  background:linear-gradient(90deg,rgba(224,79,63,.55),rgba(224,79,63,.22));
  border:1px solid var(--brand-blue-line);}
.ldjs .l2tempo i{transform:scaleX(0);transition:transform .9s cubic-bezier(.22,.7,.3,1);}
.ldjs .l2tempo.run i{transform:scaleX(var(--w));}
.l2tbar b{font-size:16px;font-weight:650;color:var(--brand-blue-light);text-align:end;}
.l2speedfacts{list-style:none;display:flex;flex-direction:column;gap:20px;
  padding-inline-start:0;}
.l2speedfacts li{display:flex;flex-direction:column;gap:6px;padding-inline-start:22px;
  border-inline-start:2px solid var(--orange-line);}
.l2speedfacts b{font-size:30px;line-height:1.1;font-weight:650;letter-spacing:-.035em;
  font-family:var(--font-display);color:var(--text-primary);}
.l2speedfacts span{font-size:14px;line-height:1.5;color:var(--text-secondary);}

/* ---- потенциал больше цели (экран 9) ---- */
.l2scaleviz{max-inline-size:840px;margin:0 auto;}
.l2sline{display:flex;justify-content:space-between;gap:20px;margin-block-end:14px;}
.l2spt{display:flex;flex-direction:column;gap:4px;}
.l2spt b{font-size:20px;font-weight:650;font-family:var(--font-display);}
.l2spt span{font-size:13px;color:var(--text-muted);}
.l2spt.one b{color:var(--c-accent-ink);}
.l2spt.two{text-align:end;}
.l2spt.two b{color:var(--brand-blue-light);}
.l2strack{position:relative;block-size:14px;border-radius:999px;
  background:rgba(255,255,255,.05);overflow:hidden;}
.l2strack i{position:absolute;inset-block:0;border-radius:999px;}
.l2strack .s1{inset-inline-start:0;inline-size:50%;background:var(--orange);opacity:.85;}
.l2strack .s2{inset-inline-start:50%;inline-size:50%;
  background:linear-gradient(90deg,var(--brand-blue-surface),rgba(224,79,63,.08));
  border-inline-start:1px solid rgba(255,255,255,.14);}

/* ---- пломба: пара кнопок, заглушка канала до публичности (решение Igor 02.08) ---- */
.l2sealbtns{display:flex;gap:12px;flex-wrap:wrap;margin-block-start:24px;}
.l2btn.off{color:var(--text-muted);border:1px dashed var(--border-strong);cursor:default;
  gap:8px;}
.l2btn.off em{font-size:11px;font-style:normal;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted);opacity:.75;}

/* ---- история модели отдельной секцией (экран 11) ---- */
.l2histsec{background:var(--bg-secondary);}
.l2histsec .l2hist{margin-block-start:0;}

/* ---- безубыточность: подпись под столбиком (экран 12A) ---- */
.l2bar em{font-size:11px;font-style:normal;line-height:1.35;color:var(--text-muted);
  text-align:center;max-inline-size:120px;}
.l2bar.on i{background:linear-gradient(180deg,rgba(224,79,63,.30),rgba(224,79,63,.06));
  border-color:var(--orange-line);}
.l2bar.on b{color:var(--c-accent-ink);}
.l2math .l2neq{color:var(--text-muted);}

/* ---- два рабочих процесса (экран 19) ---- */
.l2procs{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.l2proc{border-radius:24px;padding:36px;border:1px solid var(--border-default);
  background:rgba(255,255,255,.018);}
.l2proc.good{background:radial-gradient(circle at 80% 0%,rgba(224,79,63,.07),transparent 46%),
  rgba(18,21,29,.62);border-color:rgba(224,79,63,.24);}
.l2procsteps{list-style:none;counter-reset:pstep;display:flex;flex-direction:column;gap:0;
  padding-inline-start:0;margin-block-start:24px;}
.l2procsteps li{counter-increment:pstep;position:relative;padding:12px 0 12px 42px;
  font-size:15px;line-height:1.45;color:var(--text-secondary);}
.l2procsteps li::before{content:counter(pstep);position:absolute;inset-inline-start:0;
  inset-block-start:10px;inline-size:26px;block-size:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;
  color:var(--text-muted);background:rgba(255,255,255,.05);
  border:1px solid var(--border-default);}
.l2procsteps li+li::after{content:"";position:absolute;inset-inline-start:13px;
  inset-block-start:-14px;block-size:24px;inline-size:1px;background:var(--border-default);}
.l2procsteps.on li{color:var(--text-primary);}
.l2procsteps.on li::before{color:#fff;background:var(--orange-soft);
  border-color:var(--orange-line);}
.l2procsteps.on li+li::after{background:var(--orange-line);}

/* ---- начните бесплатно (экран 20) ---- */
.l2freegrid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center;}
.l2freetxt h2+p{margin-block-start:20px;color:var(--text-secondary);max-inline-size:560px;}
.l2freetxt .l2btn{margin-block-start:32px;}
.l2freetxt .l2note{margin-block-start:20px;}
.l2freelist{list-style:none;border-radius:24px;padding:34px;display:flex;
  flex-direction:column;gap:16px;padding-inline-start:34px;}
.l2freelist li{position:relative;padding-inline-start:30px;font-size:16px;
  color:var(--text-secondary);}
.l2freelist li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:6px;
  inline-size:16px;block-size:9px;border-inline-start:2px solid var(--orange);
  border-block-end:2px solid var(--orange);transform:rotate(-45deg);}

/* ---- ЭКРАН СИМУЛЯТОРА: шапка с уровнем, метрики, график, ряд ТФ (Igor 03.08) ---- */
.l2simscr{display:flex;flex-direction:column;gap:0;}
.l2sshead{display:flex;align-items:center;gap:10px;padding-block-end:10px;}
.l2sshead .pcsym{font-size:17px;font-weight:700;letter-spacing:-.01em;}
.l2sslvl{margin-inline-start:auto;font-size:12px;color:var(--text-muted);}
.l2sslvl b{font-size:15px;color:var(--text-primary);font-weight:650;margin-inline-end:6px;
  font-variant-numeric:tabular-nums;}
.l2ssmet{display:flex;flex-wrap:wrap;gap:6px 26px;padding-block:10px;font-size:12px;
  color:var(--text-muted);border-block:1px solid var(--border-default);}
.l2ssmet b{color:var(--text-primary);font-weight:650;margin-inline-start:6px;
  font-variant-numeric:tabular-nums;}
.l2ssmet b.warn{color:#E8A33D;}
.l2ssmet b.bad{color:var(--c-red-ink);}
.l2ssmet b.ok{color:var(--c-green-ink);}
/* график занимает всю оставшуюся высоту панели, а не висит полосой сверху (Igor 03.08) */
.l2simscr{block-size:100%;}
.l2ssbody{padding-block:14px;min-inline-size:0;flex:1 1 auto;display:flex;}
.l2ssbody .pcwrap{inline-size:100%;position:relative;}
.l2ssbody svg{inline-size:100%;block-size:100%;min-block-size:260px;display:block;}
.l2sstf{display:flex;align-items:center;gap:14px;padding-block-start:10px;font-size:12px;
  color:var(--text-muted);border-block-start:1px solid var(--border-default);}
.l2sstf span.on{color:var(--text-primary);background:var(--brand-blue-soft);
  border:1px solid var(--brand-blue-line);border-radius:8px;padding:3px 9px;}
.l2sstf i{flex:1 1 auto;}
.l2simact{display:flex;gap:10px;padding:14px 18px;border-block-start:1px solid var(--border-default);}
.l2simact span{flex:1 1 0;text-align:center;padding:10px;border-radius:10px;font-size:13px;
  font-weight:600;color:var(--text-secondary);border:1px solid var(--border-default);}
.l2simact span.pri{color:var(--text-primary);background:rgba(255,255,255,.06);}
.l2simact span.off{opacity:.45;}

/* ---- НАСТОЯЩАЯ панель сделки (Igor 03.08): повторяет vxSimOrderSheet приложения ---- */
.l2order{display:flex;flex-direction:column;gap:2px;padding:20px 22px;font-family:var(--font-ui);}
.l2ohead{display:flex;align-items:center;gap:8px;margin-block-end:14px;flex-wrap:wrap;}
.l2ohead .pcsym{font-size:16px;font-weight:700;letter-spacing:-.01em;}
.l2olvl{margin-inline-start:auto;font-size:12px;color:var(--text-muted);}
.l2order .tkrow{display:flex;align-items:center;gap:12px;padding-block:11px;
  border-block-end:1px solid var(--border-default);font-size:14px;}
.l2order .tkrow.flat{border-block-end:0;padding-block-start:14px;}
.l2order .tkrow .lb{color:var(--text-secondary);}
.l2order .tkrow .lb.rr{margin-inline-start:auto;}
.l2order .ctr{margin-inline-start:auto;display:flex;align-items:center;gap:10px;}
.l2order .ctr button{inline-size:26px;block-size:26px;border-radius:8px;font-size:15px;
  color:var(--text-secondary);background:rgba(255,255,255,.05);
  border:1px solid var(--border-default);line-height:1;}
.l2order .ctr b,.l2order .tkrow>b{font-size:15px;font-weight:650;font-variant-numeric:tabular-nums;}
.l2order .ctr b.neg{color:var(--c-red-ink);}
.l2order .ctr b.pos{color:var(--c-green-ink);}
.l2seg{display:flex;gap:6px;margin-block:14px 4px;}
.l2seg button{flex:1 1 0;block-size:34px;border-radius:10px;font-size:13px;font-weight:600;
  color:var(--text-secondary);background:rgba(255,255,255,.04);
  border:1px solid var(--border-default);}
.l2seg button.on{color:#fff;background:var(--brand-blue-surface);border-color:var(--brand-blue-line);}
.l2slider{block-size:3px;border-radius:2px;background:rgba(255,255,255,.10);margin-block:16px 4px;
  position:relative;}
.l2slider i{position:absolute;inset-block:0;inset-inline-start:0;inline-size:12%;border-radius:2px;
  background:var(--brand-blue-light);}
.l2slider::after{content:"";position:absolute;inset-block-start:50%;inset-inline-start:12%;
  inline-size:14px;block-size:14px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);}
.l2onote{font-size:12px;line-height:1.45;color:var(--text-muted);margin-block:14px 0;}
.l2obtn{margin-block-start:16px;block-size:46px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-size:15px;font-weight:650;color:#fff;background:var(--brand-blue);}
.l2obtn.live{background:var(--orange);}     /* контракт: синий = симуляция, оранжевый = live */
.l2obar{margin-block-start:10px;block-size:44px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-size:15px;font-weight:650;color:var(--text-primary);
  background:rgba(255,255,255,.06);border:1px solid var(--border-default);}

/* ---- обязательный дисклеймер в финале ---- */
.l2legal{margin-block-start:40px;padding-block-start:28px;
  border-block-start:1px solid rgba(255,255,255,.08);font-size:12px;line-height:1.6;
  color:var(--text-muted);max-inline-size:820px;margin-inline:auto;}

/* ---- адаптив новых блоков ---- */
@media (max-width:1099px){
  .l2do{grid-template-columns:repeat(2,1fr);}
  .l2speedgrid,.l2freegrid{grid-template-columns:1fr;gap:32px;}
  /* выноски встают столбиком под карточкой - выравнивание одно для всех девяти */
  .l2anat{padding-inline:0;}
  .l2tag{max-inline-size:none;text-align:start;justify-content:flex-start;}
  .l2tag.t1,.l2tag.t2,.l2tag.t3,.l2tag.t4,.l2tag.t5,.l2tag.t6,.l2tag.t7,.l2tag.t8,
  .l2tag.t9{inset:auto;text-align:start;justify-content:flex-start;}
  .l2facts{grid-template-columns:1fr;}
  .l2facts.two{grid-template-columns:1fr;}
}
@media (max-width:899px){
  .l2procs{grid-template-columns:1fr;}
}
@media (max-width:767px){
  .l2do{grid-template-columns:1fr;gap:14px;margin-block-start:48px;}
  .l2docard,.l2fact,.l2tempo,.l2proc,.l2freelist{padding:24px;}
  .l2fact b{font-size:36px;}
  .l2tbar{grid-template-columns:66px 1fr 44px;gap:10px;}
  .l2speedfacts b{font-size:26px;}
  .l2bar em{display:none;}
  .l2sline{flex-direction:row;gap:12px;}
  .l2spt b{font-size:17px;}
  .l2bridge{margin-block-start:44px;padding-block-start:32px;}
}

/* ================= появление (fade-up 16-24px, ТЗ п.33) ================= */
.ldjs .ld2rv-init{}
.ld2 .ldrv{opacity:0;transform:translateY(20px);
  transition:opacity .6s ease,transform .6s ease;}
.ld2 .ldrv.in{opacity:1;transform:none;}
/* 🐞 13.08: раздел, на который перешли по меню, показывается СРАЗУ. Иначе его заголовок сдвинут
   вниз на 20px анимацией появления, и прокрутка целится в смещённую позицию - сверху получается
   лишний провал, который потом «подтягивается». Анимация остаётся для обычной прокрутки. */
.ld2 main section:target .ldrv{opacity:1;transform:none;transition:none;}

/* ================= адаптивность ================= */
@media (max-width:1099px){
  .l2hero .wrap.in{grid-template-columns:1fr;gap:56px;}
  .l2hero{min-block-size:0;padding-block-start:48px!important;}
  .l2stage{justify-content:flex-start;}
  /* 🔴 22.09 (Igor: «на сайте склеились»): здесь стояло gap:0 - правило осталось от ПРЕЖНЕЙ
     разметки блока (крупная карточка `.l2bigcard`, которой в шаблонах давно нет). У нынешней
     разметки внутри блока два списка подписей, и с нулевым зазором нижняя плашка первого
     списка упиралась в верхнюю плашку второго. Зазор берём РАВНЫЙ шагу внутри списка (14px),
     иначе на стыке двух списков ритм плашек заметно сбивается. */
  .l2anat{padding:16px 0;inline-size:100%;display:flex;flex-direction:column;
    align-items:center;gap:14px;}
  .l2tag{position:static;margin:6px 4px 0 0;}
  .l2tag::before{display:none;}
  .l2proofpanel{grid-template-columns:1fr;gap:28px;}
  .l2pstat{flex-direction:row;align-items:baseline;gap:16px;flex-wrap:wrap;}
  .l2mathgrid,.l2simgrid,.l2spacegrid,.l2riskgrid,.l2sealgrid{grid-template-columns:1fr;
    gap:36px;}
  .l2map{grid-template-columns:1fr;gap:36px;}
  .l2params.l{text-align:start;}
  .l2params.l li{flex-direction:row;}
  .l2mapcard{display:none;}
  .l2wsp{inline-size:100%;}
  .l2stages{grid-template-columns:repeat(2,1fr);}
  .l2sectors{grid-template-columns:1fr;}
  .l2lines{display:none;}
  .l2center{margin-block-end:24px;}
}
@media (max-width:1023px){
  .ld2 main section{padding-block:112px;}
  .ld2 main section[id]{scroll-margin-block-start:calc(24px + 73px - 76px - 112px);}
  .l2proof{padding-block:112px!important;}
  .ld2 .l2head{margin-block-end:44px;}
}
@media (max-width:899px){
  .l2duo{grid-template-columns:1fr;}
  .l2vs{display:none;}
  .l2pane{min-block-size:0;}
  /* диаграмма работы: вертикальный timeline (ТЗ п.13) */
  .l2chain{flex-direction:column;}
  .l2nodes{flex-direction:column;gap:24px;align-items:flex-start;}
  .l2nodes::before{inset-inline:24px auto;inset-inline-start:24px;inset-block:24px;
    inline-size:1px;block-size:auto;}
  .l2nodes li{flex-direction:row;text-align:start;gap:16px;}
  .l2nodes li span{max-inline-size:none;}
  .l2gap{inline-size:auto;block-size:48px;flex:0 0 48px;}
  .l2you{flex-direction:row;text-align:start;gap:16px;}
  .l2you span{max-inline-size:none;}
  .l2simbody{grid-template-columns:1fr;}
  .l2simside{border-inline-start:0;border-block-start:1px solid var(--border-default);}
  .l2wbody{grid-template-columns:52px 1fr;}
  .l2wside{display:none;}
  .l2devcomp{flex-direction:column;align-items:center;gap:28px;}
  .l2dev.desk{inline-size:min(520px,100%);}
  .l2dev.phone{inline-size:min(300px,86%);margin-inline-start:0;}
  .l2dev.tg{inline-size:min(320px,92%);margin:0;}
}
@media (max-width:767px){
  .ld2 main section{padding-block:88px;}
  .ld2 main section[id]{scroll-margin-block-start:calc(24px + 73px - 76px - 88px);}
  .l2proof{padding-block:88px!important;}
  .l2thesis{padding-block:64px!important;}
  .ld2 h2{font-size:32px;line-height:1.08;letter-spacing:-.035em;}
  .ld2 h3{font-size:23px;line-height:1.2;}
  .ld2 p{font-size:16px;line-height:1.6;}
  .l2htxt h1{font-size:38px;line-height:1.04;letter-spacing:-.04em;}
  .l2sub{font-size:17px;line-height:1.55;}
  .l2cta{flex-direction:column;align-items:stretch;}
  .l2cta .l2btn{inline-size:100%;}
  .l2final .l2cta{align-items:center;}
  .l2final .l2cta .l2btn{inline-size:min(360px,100%);}
  .l2maincard{inline-size:100%;}
  .l2glow{inline-size:340px;block-size:340px;}
  .l2pane{padding:24px;}
  .l2pv{font-size:64px;}
  .l2stages{grid-template-columns:1fr;gap:30px;}
  .l2thesis p{font-size:22px;}
  .l2funcap{font-size:11px;}
  .l2big{letter-spacing:-.025em;}
  .l2bars{gap:14px;}
  .l2plan{padding:28px;}
  .l2protag{inset-inline-start:28px;}
  .l2faqlist summary{font-size:16px;}
  .l2faqlist .ans{font-size:15px;}
  .l2hero{padding-block-start:32px!important;}
  .l2rr{inset-inline-start:50%;transform:translateX(-50%);}
}
@media (max-width:519px){
  .l2simchart{padding:12px;}
  .l2wmain{padding:10px;}
  .l2tag{white-space:normal;}
}
@media (min-width:1360px){
  .l2space .wrap{max-inline-size:1360px;}
  .l2wsp{margin-inline-end:-48px;}      /* лёгкий выход интерфейса за границу (ТЗ п.22) */
}
/* тонкая сетка для больших экранов: тексту просторно, но не шире контейнера ТЗ */
@media (max-width:1279px) and (min-width:768px){
  .ld2 .wrap{padding-inline:24px;}
}
@media (prefers-reduced-motion: reduce){
  .ldjs .l2fun .fdots circle{animation:none;}
}

/* ===== Страница оплаты: условия подписки и согласие на периодические платежи (ТЗ 20.08) =====
   Условия обязаны читаться ДО оплаты, поэтому таблица идёт крупно и в две колонки, а на
   телефоне разворачивается в строки: «Первое списание 3 990 ₽ - 27 августа 2026 года» должно
   быть видно целиком, а не обрезаться. Флажок согласия НЕ предустановлен и стоит выше кнопки. */
.paygrid{inline-size:100%;border-collapse:collapse;margin-block:18px 14px;}
.paygrid td{padding:11px 2px;border-block-end:1px solid var(--line);vertical-align:top;
  font-size:15px;line-height:1.45;}
.paygrid tr:last-child td{border-block-end:0;}
.paygrid td:first-child{color:var(--ink2);inline-size:44%;padding-inline-end:14px;}
.paygrid td:last-child{color:var(--ink);}
.agree{display:flex;gap:11px;align-items:flex-start;margin-block:20px 14px;padding:14px 16px;
  border:1px solid var(--line);border-radius:16px;background:var(--surface2);cursor:pointer;}
.agree input{inline-size:20px;block-size:20px;margin-block-start:1px;flex:0 0 auto;accent-color:var(--c-accent);}
.agree span{font-size:14px;line-height:1.5;color:var(--ink);}
@media (max-width:519px){
  .paygrid td{display:block;border-block-end:0;padding:2px 0;}
  .paygrid td:first-child{inline-size:auto;font-size:13px;padding-block-start:12px;}
  .paygrid tr{display:block;border-block-end:1px solid var(--line);padding-block-end:10px;}
}

/* ===== оплата в USDT (checkout), 06.09.2026. Только токены сайта: поверхности, радиусы, шрифты,
   акцент Live для скобки и статуса; ничего не подобрано заново (BRAND_VISUAL_SPEC). ===== */
.cpay{display:flex;flex-direction:column;gap:14px;margin-block-start:18px;max-inline-size:560px;}
.cpay-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--rad-card);
  box-shadow:var(--shadow-card);padding:20px 20px 18px;}
.cpay-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.cpay-plan{font-size:13px;line-height:18px;font-weight:600;color:var(--ink2);}
.cpay-chip{font-size:10px;line-height:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 9px;border-radius:var(--rad-tag);background:var(--surface2);color:var(--ink2);border:1px solid var(--line);}
.cpay-chip.test{color:var(--c-orange);border-color:var(--c-orange-l);}
.cpay-amt{margin-block-start:10px;font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:38px;line-height:44px;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.cpay-amt small{font-family:var(--font-ui);font-size:15px;font-weight:600;color:var(--ink2);letter-spacing:normal;}
.cpay-st{margin-block-start:12px;display:flex;align-items:center;gap:9px;font-size:14px;line-height:20px;color:var(--ink2);flex-wrap:wrap;}
.cpay-st .d{inline-size:8px;block-size:8px;border-radius:50%;background:var(--ink3);flex:0 0 auto;}
.cpay-st[data-s="DETECTED"] .d,.cpay-st[data-s="CONFIRMING"] .d{background:var(--c-orange);box-shadow:0 0 10px rgba(245,158,11,.35);}
.cpay-st[data-s="PAID"] .d{background:var(--c-green-ink);box-shadow:0 0 10px rgba(60,185,164,.35);}
.cpay-st[data-s="UNDERPAID"] .d,.cpay-st[data-s="EXPIRED"] .d,.cpay-st[data-s="MANUAL_REVIEW"] .d{background:var(--c-live);box-shadow:0 0 10px rgba(224,79,63,.22);}
.cpay-st .cd{margin-inline-start:auto;font-variant-numeric:tabular-nums;color:var(--ink3);}
.cpay-qr{display:flex;justify-content:center;margin-block:6px 16px;}
.cpay-qr img{inline-size:200px;block-size:200px;padding:10px;background:#fff;border-radius:16px;}
.cpay-lbl{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink3);}
.cpay-addr{margin-block-start:6px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;line-height:19px;
  word-break:break-all;color:var(--ink);background:var(--inset);border:1px solid var(--line);border-radius:14px;padding:12px 14px;}
.cpay-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-block-start:14px;}
.cpay-btns .btn{inline-size:100%;justify-content:center;text-align:center;}
.cpay-warn{position:relative;padding:14px 16px 14px 24px;font-size:14px;line-height:21px;color:var(--ink);}
.cpay-warn::before{content:"";position:absolute;inset-inline-start:0;inset-block:8px;inline-size:4px;border-radius:0 4px 4px 0;
  background:var(--c-live);box-shadow:0 0 18px color-mix(in srgb,var(--c-live) 24%,transparent);}
.cpay-warn .muted{display:block;margin-block-start:6px;font-size:13px;line-height:19px;}
.cpay-paid{border-color:var(--c-green-line);}
.cpay-paid h2{margin:0;font-size:21px;line-height:27px;}
.cpay-paid p{margin-block-start:6px;color:var(--ink2);}
.cpay-paid .cpay-btns{grid-template-columns:1fr 1fr;}
.cpay details summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;font-size:15px;line-height:22px;font-weight:600;}
.cpay details summary::-webkit-details-marker{display:none;}
.cpay details summary::after{content:"+";margin-inline-start:auto;font-size:20px;color:var(--ink3);font-weight:400;transition:transform var(--t);}
.cpay details[open] summary::after{transform:rotate(45deg);}
.cpay details p{margin-block-start:10px;}
.cpay input[type=text]{inline-size:100%;font:inherit;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;
  color:var(--ink);background:var(--inset);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-block-start:10px;}
.cpay input[type=text]:focus{outline:2px solid var(--c-live-line);outline-offset:0;}
.cpay .muted{color:var(--ink2);}
.cpay-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-block:18px 8px;}
.cpay-plans .plan form{margin-block-start:16px;}
.cpay-plans .plan .btn{inline-size:100%;justify-content:center;text-align:center;}
/* 11.10: поле промокода у демо (акция Instagram) */
.cpay-plans .pcode{margin-block-start:14px;font-size:14px;}
.cpay-plans .pcode summary{cursor:pointer;color:var(--ink2);text-decoration:underline;text-underline-offset:3px;}
.cpay-plans .pcode input{inline-size:100%;font:inherit;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;text-transform:uppercase;color:var(--ink);background:var(--inset);border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin-block-start:10px;}
@media (max-width:420px){.cpay-amt{font-size:32px;line-height:38px;}.cpay-btns{grid-template-columns:1fr;}}
.cpay-topup{margin-block-start:12px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 14px;border-radius:14px;background:var(--c-live-soft);border:1px solid var(--c-live-line);font-size:14px;line-height:20px;}
.cpay-topup b{font-family:var(--font-display);font-size:18px;}
.cpay [hidden]{display:none!important;}   /* 06.09: display:flex у .cpay-topup перебивал атрибут hidden - блок «Доплатить» висел пустым */

/* Личный кабинет (09.09): состояние доступа крупной строкой, история счетов таблицей. */
.acct-hero{margin-block:18px;padding:24px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--rad-card);box-shadow:var(--shadow-card);display:flex;flex-wrap:wrap;
  gap:18px 34px;align-items:center;}
.acct-hero .cell .k{font-size:13px;line-height:18px;color:var(--ink2);}
.acct-hero .cell .v{margin-block-start:4px;font-size:22px;line-height:28px;font-weight:700;
  font-family:var(--font-display);letter-spacing:-.01em;}
.acct-hero .cta{margin-inline-start:auto;}
@media (max-width:560px){.acct-hero .cta{margin-inline-start:0;inline-size:100%;}
  .acct-hero .cta .btn{inline-size:100%;justify-content:center;}}
table.pay-hist td:last-child{color:var(--ink2);}

/* 10.09: снимки приложения внутри блоков лендинга - вписываются в контейнер целиком. */
.l2maincard img,.l2minicard img{display:block;inline-size:100%;block-size:auto;border-radius:14px;}
.l2minicard{padding:0;overflow:hidden;}
.l2riskshot{display:block;inline-size:100%;block-size:auto;border-radius:14px;
  border:1px solid var(--line);}
.l2shot.sim{max-inline-size:360px;margin-inline:auto;}

/* ===== 24.09 (Igor): Telegram-канал и соцсети - чёрная кнопка, белый контур, белый знак ===== */
.tgbtn{background:#000;color:#fff;border:1px solid #fff;}
.tgbtn:hover{background:#111;}
.tgbtn .ic{inline-size:18px;block-size:18px;flex:none;}
.mmenu .tgbtn{display:flex;align-items:center;justify-content:center;gap:10px;color:#fff;
  font-weight:600;margin-block:8px 12px;}
.fsoc{display:flex;gap:10px;margin-block-start:16px;}
.fsoc a{inline-size:40px;block-size:40px;display:grid;place-items:center;border-radius:12px;
  background:#000;color:#fff;border:1px solid #fff;}
.fsoc a:hover{background:#111;}
.fsoc .ic{inline-size:18px;block-size:18px;}
@media(max-width:900px){ .deskonly{display:none!important;} }

/* 24.09 (Igor): низ мобильного меню - значки соцсетей как в подвале + компактный RU / EN */
.mmenu .mfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 10px 4px;margin-block-start:6px;border-block-start:1px solid var(--line);}
.mmenu .msoc{display:flex;gap:10px;}
.mmenu .msoc a{inline-size:40px;block-size:40px;padding:0;display:grid;place-items:center;
  border-radius:12px;background:#000;color:#fff;border:1px solid #fff;}
.mmenu .msoc .ic{inline-size:18px;block-size:18px;}
.mmenu .mlang2{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;}
.mmenu .mlang2 a{padding:8px 12px;border-radius:0;font-size:13px;font-weight:600;
  letter-spacing:.04em;color:var(--ink3);}
.mmenu .mlang2 a.on{color:#fff;background:rgba(255,255,255,.10);}


/* ================================================================================
   ПЕРЕРАБОТКА ЛЕНДИНГА ПО ТЗ 14.10 (песочница): 8 блоков воронки бесплатного старта.
   Новые элементы - только из прежних токенов (оранжевый действия, фирменный синий, поверхности).
   ================================================================================ */
/* hero: метрика между абзацем и кнопкой, тихая ссылка «Как начать» */
.l2hmet{margin-block-start:28px;display:flex;align-items:center;gap:18px;max-inline-size:640px;}
.ld2 .l2hmet b{font-family:var(--font-display);font-size:48px;line-height:1;font-weight:650;
  letter-spacing:-.04em;color:var(--text-primary);flex:0 0 auto;}
.ld2 .l2hmet span{font-size:15px;line-height:1.5;color:var(--text-secondary);}
.ld2 .l2hmet strong{display:block;font-weight:600;color:var(--text-primary);}
.l2htxt .l2cta{align-items:center;}
.l2htxt .l2cta .l2note{margin:0;flex:1 1 220px;}
.l2quiet{font-size:14px;color:var(--brand-blue-light);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(102,130,255,.4);}
.l2quiet:hover{text-decoration-color:currentColor;}
.l2htxt .l2quiet{flex-basis:100%;}

/* блок 2: три шага */
.l2steps3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.l2steps3 .l2docard{position:relative;padding-block-start:64px;}
.l2stepn{position:absolute;inset-block-start:24px;inset-inline-start:28px;inline-size:30px;
  block-size:30px;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:700;
  color:#fff;background:var(--orange);box-shadow:0 0 18px var(--orange-glow);}
.l2steps3 .dk{font-size:18px!important;margin-block-end:8px;}

/* раскрытия: тот же язык, что вопросы (плюс-минус), но на поверхности */
.l2mores{max-inline-size:1000px;margin:56px auto 0;display:flex;flex-direction:column;gap:12px;}
.l2more{border:1px solid var(--border-default);border-radius:16px;background:rgba(255,255,255,.02);
  transition:border-color var(--t),background var(--t);}
.l2more[open]{border-color:var(--border-strong);background:rgba(18,21,29,.55);}
.l2more>summary{display:flex;align-items:center;gap:18px;cursor:pointer;list-style:none;
  padding:20px 24px;font-size:17px;font-weight:600;color:var(--text-primary);border-radius:16px;}
.l2more>summary::-webkit-details-marker{display:none;}
.l2more>summary:hover{background:rgba(255,255,255,.03);}
.l2more>summary:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}
.l2more>summary i{margin-inline-start:auto;position:relative;inline-size:16px;block-size:16px;flex:0 0 auto;}
.l2more>summary i::before,.l2more>summary i::after{content:"";position:absolute;
  background:var(--text-muted);transition:transform var(--t);}
.l2more>summary i::before{inset-block-start:7px;inset-inline:0;block-size:1.6px;}
.l2more>summary i::after{inset-inline-start:7px;inset-block:0;inline-size:1.6px;}
.l2more[open]>summary i::after{transform:scaleY(0);}
.l2moreb{padding:8px 24px 32px;}
.ld2 .l2moreb h3{font-size:clamp(24px,2.4vw,32px);line-height:1.15;font-weight:620;letter-spacing:-.03em;}
.ld2 .l2moreb h4{font-family:var(--font-display);font-size:20px;font-weight:600;}
.ld2 .l2moreb .l2head{margin-block-end:32px;}
.ld2 .l2moreb>*+*{margin-block-start:28px;}
.ld2 .l2morep{font-size:16px;line-height:1.65;color:var(--text-secondary);max-inline-size:760px;}
.ld2 .l2morep+.l2morep{margin-block-start:12px;}
.ld2 .l2morep a{color:var(--brand-blue-light);}
.l2moreb.center .l2morep{margin-inline:auto;}
.l2morecols{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:start;}
.l2moreb .l2do{margin-block-start:40px;}
.l2moreb .l2funnel{margin-block-start:56px;}
.l2btns{display:flex;gap:12px;flex-wrap:wrap;margin-block-start:20px;}
.l2btns.center{justify-content:center;}

/* блок 3: подписи карточки - с пояснением, уведомления - стеклянная плашка */
.l2flow .l2show{margin-block-end:72px;}
.l2legend li span b{color:var(--text-primary);font-weight:600;}
.l2legend li span{color:var(--text-secondary);}
.l2flow .l2legend li{align-items:flex-start;}
.l2flow .l2legend li i{margin-block-start:7px;}
.l2notif{max-inline-size:860px;margin:64px auto 0;padding:32px 36px;}
.ld2 .l2nbig{font-family:var(--font-display);font-size:22px;line-height:1.4;font-weight:600;
  color:var(--text-primary);letter-spacing:-.02em;}
.ld2 .l2notif p+p{margin-block-start:12px;color:var(--text-secondary);font-size:16px;}
.l2nlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.l2nlist li{padding:20px 22px;border:1px solid var(--border-default);border-radius:14px;
  background:rgba(255,255,255,.02);display:flex;flex-direction:column;gap:6px;}
.l2nlist b{font-size:15px;color:var(--text-primary);}
.l2nlist span{font-size:15px;line-height:1.55;color:var(--text-secondary);}
.l2pcap{margin-block-start:18px;font-size:15px;line-height:1.55;color:var(--text-secondary);}
.l2pcap.on{color:var(--text-primary);}

/* блок 4: определение цели и таблица под панелью */
.l2def{max-inline-size:860px;margin:40px auto 0;}
.l2proof .l2histsec{margin-block-start:72px;}
.l2proof .l2histsec h3{font-size:clamp(26px,2.6vw,36px);}
.l2hist .l2btns{margin-block-start:16px;}

/* блок 5: четыре части с настоящими снимками */
.l2space .l2shot.wide{max-inline-size:1100px;margin-inline:auto;}
.l2parts{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-block-start:48px;}
.l2part{display:flex;flex-direction:column;gap:14px;}
.l2part .l2shot{background:var(--bg-secondary);border:1px solid var(--border-default);
  border-radius:var(--rad-card);overflow:hidden;aspect-ratio:860/900;}
.l2part .l2shot img{border-radius:0;inline-size:100%;block-size:100%;object-fit:cover;object-position:top;}
.l2part .l2shot.risk img{object-fit:contain;object-position:center;}
.ld2 .l2part h3{font-size:19px;line-height:1.3;}
.ld2 .l2part p{font-size:15px;line-height:1.55;color:var(--text-secondary);}

/* блок 6: две карточки, сроки - выбор внутри Pro */
.l2planrow.two .l2plan{inline-size:min(520px,100%);}
.ld2 .l2plus{font-size:14px;font-weight:600;color:var(--text-primary);margin-block-end:12px;}
.l2periods{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-block:24px 12px;}
.l2per{border:1px solid var(--border-strong);border-radius:12px;padding:12px 10px;text-align:center;
  display:flex;flex-direction:column;gap:4px;}
.l2per span{font-size:13px;color:var(--text-secondary);}
.l2per b{font-size:17px;font-weight:700;color:var(--text-primary);}
.l2per.best{border-color:rgba(224,79,63,.5);background:var(--orange-soft);}
.l2plan ul.l2perlist{flex:0 0 auto;gap:6px;margin-block-end:22px;}
.l2plan ul.l2perlist li{font-size:13px;color:var(--text-muted);}
.l2plan .l2quiet{display:block;text-align:center;margin-block-start:14px;}
.l2plans .l2mores{margin-block-start:40px;}

/* блоки 7-8, шапка, меню */
.l2faq .l2cta{margin-block-start:48px;}
.mmenu a.mtrial{background:var(--orange);color:#fff;text-align:center;font-weight:600;margin-block-start:6px;}
.ld2 .hdr .btn.hdrtrial{background:var(--orange);color:#fff;}
.ld2 .hdr .btn.hdrtrial:hover{background:var(--orange);filter:brightness(1.08);}

/* нижняя панель на телефоне */
.l2mbar{display:none;}
@media (max-width:767px){
  .l2mbar{display:block;position:fixed;inset-inline:0;inset-block-end:0;z-index:40;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(8,9,13,.86);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border-block-start:1px solid var(--border-default);
    transform:translateY(110%);transition:transform .3s ease;}
  .l2mbar.on{transform:none;}
  .l2mbar .l2btn{inline-size:100%;}
  body.mbar-on{padding-block-end:calc(72px + env(safe-area-inset-bottom));}
}
@media (prefers-reduced-motion: reduce){ .l2mbar{transition:none;} }

/* адаптивность новых элементов */
/* шапка: шесть разделов + Telegram + приложение + пробный Pro. Telegram - значком, на узком
   экране «Открыть приложение» сокращается до «Открыть» */
.ld2 .nav a{white-space:nowrap;}
.ld2 .hdr .tgbtn{font-size:0;gap:0;padding-inline:11px;}
@media (max-width:1439px){ .ld2 .nav{gap:22px;} }
@media (max-width:1279px){ .ld2 .hdr .deskcta{display:none;} .ld2 .hdr .mobcta{display:inline-flex;} }
@media (max-width:1099px){ .ld2 .nav{gap:16px;font-size:13px;} .ld2 .hdr .tgbtn{display:none!important;} }
/* блок 3: карточка на общем фоне раздела, подписи - плашками с пояснением */
.l2flow .l2show{background:none;}
.l2flow .l2show::before,.l2flow .l2show::after{display:none;}
.l2flow .l2legend li{border-radius:14px;padding:14px 18px;max-inline-size:320px;line-height:1.45;}
@media (max-width:1099px){
  .l2parts{grid-template-columns:repeat(2,1fr);}
  .l2morecols{grid-template-columns:1fr;}
}
@media (max-width:899px){
  .l2steps3{grid-template-columns:1fr;gap:14px;}
  .l2nlist{grid-template-columns:1fr;}
}
@media (max-width:767px){
  .l2hmet{gap:14px;}
  .ld2 .l2hmet b{font-size:38px;}
  .ld2 .l2hmet span{font-size:14px;}
  .l2mores{margin-block-start:40px;}
  .l2more>summary{padding:16px 18px;font-size:16px;}
  .l2moreb{padding:4px 18px 24px;}
  .l2notif{padding:24px;margin-block-start:48px;}
  .ld2 .l2nbig{font-size:19px;}
  .l2flow .l2legend li{max-inline-size:none;}
  .l2steps3 .l2docard{padding-block-start:60px;}
  .l2stepn{inset-inline-start:24px;}
}
@media (max-width:519px){
  .l2parts{grid-template-columns:1fr;}
  .l2periods{gap:6px;}
  .l2per b{font-size:15px;}
}

/* плашка песочницы - над нижней кнопкой телефона не стоит */
a[href="/sandbox/exit"]{inset-block-end:auto!important;inset-block-start:84px!important;bottom:auto!important;top:84px!important;}


/* ================================================================================
   20.10 ТЗ Ксюши (docs/site_research/TZ_site_sandbox_2026-10-20.md), песочница:
   капс как на обложках сториз, красный свет фоном секции, наклон и свечение снимков.
   Значения - блок site_v3 в docs/design/brand_tokens.json (одни и те же для сайта и роликов).
   ================================================================================ */
:root{
  --v3-caps-weight:800; --v3-caps-track:-.04em; --v3-caps-ink:#F5F6F8;
  --v3-caps-acc:linear-gradient(90deg,#FF5D5D,#E04F3F);
  --v3-rule-w:72px; --v3-rule-h:3px; --v3-rule-color:#FF5D5D;
  --v3-rule-glow:0 0 14px rgba(255,93,93,.85),0 0 32px rgba(224,79,63,.55);
  --v3-spaced-weight:600; --v3-spaced-track:.2em;
  --v3-light-0:#050304; --v3-light-1:#460C0A; --v3-light-2:#B02C22; --v3-light-3:#E04F3F;
  --v3-light-4:#EC6A5A; --v3-light-5:#FFA894; --v3-grain-alpha:.07;
  --v3-tilt:perspective(1800px) rotateY(-12deg) rotateX(6deg);
  --v3-tilt-phone:perspective(1800px) rotateY(-6deg) rotateX(3deg);
  --v3-shot-glow:0 50px 120px -30px rgba(224,79,63,.70),0 30px 70px -10px rgba(0,0,0,.75);
  --v3-shot-edge:inset 0 1px 0 rgba(255,255,255,.22);
}

/* --- капс-фраза: заглавные, плотно, точка в конце, вторая строка - красным градиентом --- */
.ld2 .l2caps{font-family:var(--font-display);font-weight:var(--v3-caps-weight);text-transform:uppercase;
  letter-spacing:var(--v3-caps-track);color:var(--v3-caps-ink);}
.ld2 .l2caps .ln{display:block;}
.ld2 .l2caps .acc{background:var(--v3-caps-acc);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;}
/* 20.10 Ксюша: строка под чертой крупнее, заголовок чуть мельче. Модульная шкала 1.25 от строки:
   18 -> 22.5 -> 28 -> 35 -> 44 -> 55 - заголовок на пять ступеней выше строки (телефон 14 -> 28, три ступени) */
.ld2 .l2htxt h1.l2caps{font-size:clamp(40px,3.85vw,56px);line-height:1;max-inline-size:720px;}
.l2rule{display:block;inline-size:var(--v3-rule-w);block-size:var(--v3-rule-h);border-radius:2px;
  background:var(--v3-rule-color);box-shadow:var(--v3-rule-glow);margin-block:30px 20px;}
.ld2 .l2spaced{font-family:var(--font-display);font-size:18px;line-height:1.45;font-weight:var(--v3-spaced-weight);
  letter-spacing:var(--v3-spaced-track);text-transform:uppercase;color:rgba(245,246,248,.86);}
.ld2 .l2final h2.l2caps{font-size:clamp(36px,3.85vw,56px);line-height:1;max-inline-size:980px;}
.l2final .l2rule{margin-inline:auto;}
/* появление - из лёгкого размытия и подъёма, по строке с шагом 0.15 с */
@keyframes v3in{from{opacity:0;filter:blur(8px);transform:translateY(10px);}to{opacity:1;filter:none;transform:none;}}
.ldjs .l2caps .ln,.ldjs .l2lit .l2rule,.ldjs .l2hero .l2spaced{animation:v3in .7s cubic-bezier(.2,.7,.2,1) both;}
.ldjs .l2caps .ln:nth-child(2){animation-delay:.15s;}
.ldjs .l2lit .l2rule{animation-delay:.3s;}
.ldjs .l2hero .l2spaced{animation-delay:.45s;}
.ldjs .l2final .l2caps .ln,.ldjs .l2final .l2rule{animation-play-state:paused;}
.ldjs .l2final.v3on .l2caps .ln,.ldjs .l2final.v3on .l2rule{animation-play-state:running;}

/* --- красный свет фоном секции: тёмные углы, пятно из-за левого края, зерно --- */
.l2lit{position:relative;isolation:isolate;background:var(--v3-light-0);}
.l2lit::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(ellipse 34% 30% at -4% 72%,var(--v3-light-5) 0%,var(--v3-light-4) 22%,transparent 70%),
  radial-gradient(ellipse 70% 62% at 0% 68%,var(--v3-light-3) 0%,var(--v3-light-2) 30%,var(--v3-light-1) 62%,transparent 92%),
  radial-gradient(ellipse 90% 80% at 30% 60%,rgba(70,12,10,.9) 0%,rgba(70,12,10,.35) 55%,transparent 85%),
  var(--v3-light-0);}
.l2lit::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--v3-grain-alpha);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.l2final.l2lit{border-block-start:0;}
.l2final.l2lit::before{background:
  radial-gradient(ellipse 28% 26% at -4% 24%,var(--v3-light-5) 0%,var(--v3-light-4) 20%,transparent 70%),
  radial-gradient(ellipse 70% 50% at 0% 26%,var(--v3-light-3) 0%,var(--v3-light-2) 30%,var(--v3-light-1) 62%,transparent 92%),
  var(--v3-light-0);}
/* синей части свечения в освещённых секциях нет */
.l2lit .l2glow{background:radial-gradient(circle,rgba(224,79,63,.30) 0%,rgba(70,12,10,.25) 45%,transparent 72%);}
.l2lit .l2rr b{color:var(--v3-caps-ink);}
.ld2 .l2lit .l2sub,.l2lit .l2trust{color:rgba(245,246,248,.78);}

/* --- кнопка, условия, факты, ссылка без входа --- */
.ld2 .l2cond{margin:0;font-size:13px;line-height:1.4;color:rgba(245,246,248,.62);}
.ld2 .l2cond.center{text-align:center;margin-block-start:12px;}
.l2htxt .l2cta{flex-direction:column;align-items:flex-start;gap:10px;}
.l2htxt .l2cta .l2cond{margin-block-start:-2px;}
.ld2 .l2lit .l2quiet{color:#F5F6F8;text-decoration-color:rgba(255,93,93,.7);}
.l2htxt .l2guest{flex-basis:auto;font-weight:600;}
.ld2 .l2facts{margin-block-start:26px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;
  font-family:'JetBrains Mono',ui-monospace,Consolas,monospace;font-size:13px;line-height:1.4;
  letter-spacing:.02em;color:rgba(245,246,248,.9);}
.l2facts i{font-style:normal;color:var(--v3-rule-color);}
.l2htxt .l2howto{display:inline-block;margin-block-start:22px;}

/* --- наклон и свечение главных снимков --- */
.l2tilt{position:relative;inline-size:min(480px,100%);transform:var(--v3-tilt);transform-origin:50% 50%;
  transition:transform .8s cubic-bezier(.2,.7,.2,1);border-radius:var(--rad-card);
  box-shadow:var(--v3-shot-glow);}
.l2tilt .l2maincard{inline-size:100%;box-shadow:var(--v3-shot-edge),0 0 0 1px rgba(255,255,255,.06);}
.l2stage:hover .l2tilt{transform:perspective(1800px) rotateY(-5deg) rotateX(2deg);}
.l2tiltshot img{transform:perspective(2000px) rotateY(-12deg) rotateX(6deg) scale(.94);
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
  box-shadow:var(--v3-shot-glow),var(--v3-shot-edge);}
.l2tiltshot:hover img{transform:perspective(2000px) rotateY(-4deg) rotateX(2deg) scale(.96);}

@media (prefers-reduced-motion: reduce){
  .ldjs .l2caps .ln,.ldjs .l2lit .l2rule,.ldjs .l2hero .l2spaced{animation:none;}
  .l2tilt,.l2tiltshot img{transition:none;}
  .l2stage:hover .l2tilt{transform:var(--v3-tilt);}
  .l2tiltshot:hover img{transform:perspective(2000px) rotateY(-12deg) rotateX(6deg) scale(.94);}
}

/* --- телефон: заголовок -> кнопка -> факты -> карточка, остальное ниже карточки --- */
@media (max-width:767px){
  .l2hero .wrap.in{display:flex;flex-direction:column;align-items:stretch;gap:0;}
  .l2hero .l2rule{align-self:flex-start;}
  .l2hero .l2htxt{display:contents;}
  .l2hero h1.l2caps{order:1;}
  .l2hero .l2rule{order:2;margin-block:18px 12px;}
  .ld2 .l2hero .l2spaced{order:3;font-size:14px;letter-spacing:.16em;}
  .l2hero .l2cta{order:4;margin-block-start:20px;align-items:stretch;gap:8px;}
  .l2hero .l2cta .l2cond{text-align:center;}
  .l2hero .l2cta .l2guest{align-self:center;margin-block-start:2px;}
  .ld2 .l2hero .l2facts{order:5;margin-block-start:14px;justify-content:center;font-size:12px;gap:4px 8px;}
  .l2hero .l2stage{order:6;margin-block-start:28px;justify-content:center;}
  .ld2 .l2hero .l2sub{order:7;margin-block-start:44px;}
  .l2hero .l2howto{order:8;}
  .l2hero .l2trust{order:9;}
  .ld2 .l2hero h1.l2caps{font-size:28px;line-height:1.04;letter-spacing:-.035em;}
  .ld2 .l2final h2.l2caps{font-size:28px;}
  .l2tilt{inline-size:min(340px,92%);transform:var(--v3-tilt-phone);}
  .l2stage:hover .l2tilt{transform:var(--v3-tilt-phone);}
  .l2tiltshot img,.l2tiltshot:hover img{transform:perspective(2000px) rotateY(-6deg) rotateX(3deg) scale(.96);}
  .l2lit::before{background:
    radial-gradient(ellipse 55% 16% at -8% 30%,var(--v3-light-5) 0%,var(--v3-light-4) 22%,transparent 70%),
    radial-gradient(ellipse 130% 32% at 0% 30%,var(--v3-light-3) 0%,var(--v3-light-2) 30%,var(--v3-light-1) 62%,transparent 92%),
    radial-gradient(ellipse 120% 30% at 0% 75%,rgba(176,44,34,.55) 0%,rgba(70,12,10,.5) 45%,transparent 85%),
    var(--v3-light-0);}
}

/* --- 20.10 шаг 4: полоса последних пломб под первым экраном --- */
.l2seals{padding-block:26px 30px;border-block:1px solid var(--border-default);background:rgba(5,3,4,.92);}
.ld2 .l2seals .l2spaced{font-size:12px;letter-spacing:.2em;margin-block-end:14px;color:rgba(245,246,248,.7);}
.l2sealrow{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px;}
.l2sitem{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:1px solid var(--border-default);
  border-radius:12px;background:rgba(255,255,255,.02);color:var(--text-primary);text-decoration:none;
  transition:border-color var(--t),background var(--t);min-inline-size:0;}
.l2sitem:hover{border-color:rgba(255,93,93,.55);background:rgba(224,79,63,.07);}
.l2sealtop{display:flex;align-items:center;gap:6px;min-inline-size:0;}
.l2sealtop b{font-family:var(--font-display);font-size:14px;font-weight:700;white-space:nowrap;}
.l2sealtop .pill{font-size:10px;padding:2px 6px;}
.l2sitem code{font-family:'JetBrains Mono',ui-monospace,Consolas,monospace;font-size:11px;color:rgba(245,246,248,.8);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.l2sealbot{display:flex;flex-direction:column;gap:2px;font-size:11px;line-height:1.3;}
.l2sealbot .hout.ok{color:var(--c-green-ink);}
.l2sealbot .hout.no{color:var(--c-red-ink);}
.l2sealbot .hout.wait{color:var(--text-muted);}
.l2sealbot i{font-style:normal;color:var(--text-muted);font-family:'JetBrains Mono',ui-monospace,Consolas,monospace;}
@media (max-width:1279px){ .l2sealrow{grid-template-columns:repeat(4,minmax(0,1fr));} .l2sitem:nth-child(n+5){display:none;} }
@media (max-width:767px){
  .l2sealrow{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-inline:-16px;padding-inline:16px;scrollbar-width:none;}
  .l2sealrow::-webkit-scrollbar{display:none;}
  .l2sitem,.l2sitem:nth-child(n+5){display:flex;flex:0 0 148px;scroll-snap-align:start;}
}

/* ================================================================================
   20.10 Ксюша: «без ChiPro / с ChiPro» и варианты подписки анимацией, по стилю как в Instagram
   (рилс 6 - переключатель-таблетка, ночь у мониторов -> день с телефоном, карточка выходит из
   телефона; капс с красной чертой; красный свет на чёрном, без синего). Значения - site_v3.vs и
   site_v3.plans в docs/design/brand_tokens.json.
   ================================================================================ */
:root{
  --v3-vs-dur:.9s; --v3-vs-ease:cubic-bezier(.2,.7,.2,1);
  --v3-vs-frame-w:380px; --v3-vs-frame-r:34px;
  --v3-tog-bg:rgba(255,255,255,.06); --v3-tog-border:rgba(255,255,255,.12);
  --v3-tog-knob-bad:#2A2D33; --v3-tog-knob-good:linear-gradient(90deg,#FF5D5D,#E04F3F);
  --v3-tog-knob-glow:0 0 18px rgba(255,93,93,.65),0 0 40px rgba(224,79,63,.35);
}

/* --- секция: свет меняется вместе с состоянием --- */
.l2vsx{position:relative;isolation:isolate;overflow:hidden;background:var(--v3-light-0);
  padding-block:clamp(72px,9vw,128px);}
.l2vsx::before,.l2vsx::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  transition:opacity 1.2s var(--v3-vs-ease);}
/* ночь: узкий красный свет из-за левого края, как экраны мониторов в рилсе */
.l2vsx::before{background:
  radial-gradient(ellipse 26% 46% at -4% 50%,var(--v3-light-4) 0%,var(--v3-light-2) 30%,transparent 72%),
  radial-gradient(ellipse 60% 70% at 0% 50%,var(--v3-light-1) 0%,transparent 80%);}
/* день: тёплый мягкий свет справа, за кадром */
.l2vsx::after{opacity:0;background:
  radial-gradient(ellipse 46% 60% at 78% 48%,rgba(236,106,90,.42) 0%,rgba(176,44,34,.28) 34%,transparent 72%),
  radial-gradient(ellipse 30% 30% at 80% 40%,rgba(255,168,148,.30) 0%,transparent 70%);}
.l2vsx[data-state="good"]::before{opacity:.35;}
.l2vsx[data-state="good"]::after{opacity:1;}
.l2vsxin{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(40px,6vw,96px);}

/* --- текст: капс меняется как в рилсе - старая фраза уходит в размытие, новая проявляется --- */
.ld2 .l2vsxh{position:relative;display:grid;margin-block:18px 0;font-size:clamp(36px,3.85vw,56px);line-height:1;}
.l2vsxh .hb,.l2vsxh .hg{grid-area:1/1;transition:opacity var(--v3-vs-dur) var(--v3-vs-ease),
  filter var(--v3-vs-dur) var(--v3-vs-ease),transform var(--v3-vs-dur) var(--v3-vs-ease);}
.l2vsxh em{font-style:normal;}
.l2vsxh .hg{opacity:0;filter:blur(10px);transform:translateY(12px);}
.l2vsx[data-state="good"] .l2vsxh .hb{opacity:0;filter:blur(10px);transform:translateY(-12px);}
.l2vsx[data-state="good"] .l2vsxh .hg{opacity:1;filter:none;transform:none;}
.l2vsx .l2rule{margin-block:26px 26px;}

/* --- переключатель-таблетка БЕЗ / С, ручка ездит, на «с» загорается красным --- */
.l2tog{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:999px;
  background:var(--v3-tog-bg);border:1px solid var(--v3-tog-border);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
.l2tog .knob{position:absolute;inset-block:5px;inset-inline-start:5px;inline-size:calc(50% - 5px);
  border-radius:999px;background:var(--v3-tog-knob-bad);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 4px 14px rgba(0,0,0,.5);
  transition:transform .6s var(--v3-vs-ease),background .6s ease,box-shadow .6s ease;}
.l2vsx[data-state="good"] .l2tog .knob{transform:translateX(100%);background:var(--v3-tog-knob-good);
  box-shadow:var(--v3-tog-knob-glow);}
.l2tog button{position:relative;z-index:1;appearance:none;border:0;background:none;cursor:pointer;
  padding:12px 26px;border-radius:999px;font:600 13px/1 var(--font-display);letter-spacing:.14em;
  text-transform:uppercase;color:rgba(245,246,248,.45);transition:color .5s ease;white-space:nowrap;}
.l2tog button[aria-pressed="true"]{color:#F5F6F8;}
.l2tog button:focus-visible{outline:2px solid #FF5D5D;outline-offset:2px;}

/* --- шаги: список «без» гаснет, «с» появляется по строке --- */
.l2vsxlists{display:grid;margin-block-start:34px;}
.l2vsxsteps{grid-area:1/1;list-style:none;counter-reset:vs;display:flex;flex-direction:column;gap:2px;
  margin:0;padding:0;}
.l2vsxsteps li{counter-increment:vs;position:relative;padding:8px 0 8px 40px;font-size:16px;line-height:1.4;
  color:rgba(245,246,248,.62);transition:opacity .5s ease,filter .5s ease,transform .5s ease;}
.l2vsxsteps li::before{content:counter(vs,decimal-leading-zero);position:absolute;inset-inline-start:0;
  inset-block-start:10px;font:600 12px/1 'JetBrains Mono',ui-monospace,Consolas,monospace;
  color:rgba(245,246,248,.38);letter-spacing:.04em;}
.l2vsxsteps.good li{color:#F5F6F8;}
.l2vsxsteps.good li::before{color:#FF5D5D;}
.l2vsxsteps.good li,.l2vsx[data-state="good"] .l2vsxsteps.bad li{opacity:0;filter:blur(6px);
  transform:translateY(8px);pointer-events:none;}
.l2vsx[data-state="good"] .l2vsxsteps.good li{opacity:1;filter:none;transform:none;pointer-events:auto;}
.l2vsxsteps li:nth-child(2){transition-delay:.06s;} .l2vsxsteps li:nth-child(3){transition-delay:.12s;}
.l2vsxsteps li:nth-child(4){transition-delay:.18s;} .l2vsxsteps li:nth-child(5){transition-delay:.24s;}
.l2vsxsteps li:nth-child(6){transition-delay:.30s;} .l2vsxsteps li:nth-child(7){transition-delay:.36s;}
.l2vsxsteps li:nth-child(8){transition-delay:.42s;}
/* «без» - перечёркнутая рутина: тонкая линия проходит по каждой строке, когда включается «с» */
.l2vsxsteps.bad li::after{content:"";position:absolute;inset-inline:40px 0;inset-block-start:50%;block-size:1px;
  background:rgba(255,93,93,.7);transform:scaleX(0);transform-origin:0 50%;transition:transform .5s ease;}

/* --- кадр как сториз: 9:16, скругление, наклон и красное свечение --- */
.l2vsxstage{position:relative;display:grid;place-items:center;}
.l2vsxglow{position:absolute;inset:-12% -18%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(224,79,63,.38) 0%,rgba(70,12,10,.30) 45%,transparent 72%);
  filter:blur(10px);transition:opacity 1.2s ease;}
.l2vsxframe{position:relative;margin:0;inline-size:var(--v3-vs-frame-w);aspect-ratio:9/16;
  border-radius:var(--v3-vs-frame-r);overflow:visible;transform:var(--v3-tilt);
  transition:transform .8s var(--v3-vs-ease);}
.l2vsxstage:hover .l2vsxframe{transform:perspective(1800px) rotateY(-5deg) rotateX(2deg);}
.l2vsxframe video{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover;
  border-radius:var(--v3-vs-frame-r);box-shadow:var(--v3-shot-glow),var(--v3-shot-edge);
  background:#000;transition:opacity 1s var(--v3-vs-ease),filter 1s var(--v3-vs-ease);}
.l2vsxframe .vg{opacity:0;filter:blur(8px) brightness(1.4);}
.l2vsx[data-state="good"] .l2vsxframe .vb{opacity:0;filter:blur(8px);}
.l2vsx[data-state="good"] .l2vsxframe .vg{opacity:1;filter:none;}
/* верх кадра затемнён, как в сториз; рамка - тонкая светлая кромка */
.l2vsxframe::after{content:"";position:absolute;inset:0;border-radius:var(--v3-vs-frame-r);pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,transparent 26%,transparent 70%,rgba(0,0,0,.45) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);}
/* карточка выходит из телефона к зрителю (рилс 6) */
.l2vsxcard{position:absolute;z-index:2;inset-inline-end:-14%;inset-block-end:6%;inline-size:78%;
  border-radius:20px;overflow:hidden;opacity:0;
  transform:translate(-30%,10%) scale(.55);filter:blur(6px);
  box-shadow:0 40px 90px -20px rgba(224,79,63,.6),0 20px 50px rgba(0,0,0,.7);
  transition:opacity .7s ease .45s,transform .9s cubic-bezier(.2,.9,.25,1.05) .45s,filter .7s ease .45s;}
.l2vsxcard img{display:block;inline-size:100%;block-size:auto;}
.l2vsx[data-state="good"] .l2vsxcard{opacity:1;transform:none;filter:none;}
.l2vsx:not([data-state="good"]) .l2vsxcard{transition-delay:0s;}
.l2vsx[data-state="good"] .l2vsxsteps.bad li::after{transform:scaleX(1);}

/* --- тарифы: капс, свет за Pro, бегущая красная кромка, сроки появляются по одному --- */
.l2plans .l2head .l2caps{font-size:clamp(30px,3.1vw,44px);line-height:1.04;max-inline-size:none;}
.l2plans .l2head .l2rule{margin:26px auto 22px;}
.l2plans{position:relative;isolation:isolate;}
.l2plans::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(ellipse 40% 46% at 66% 46%,rgba(176,44,34,.30) 0%,rgba(70,12,10,.25) 45%,transparent 75%);}
@property --v3ang{syntax:'<angle>';inherits:false;initial-value:0deg;}
.l2plan.pro{isolation:isolate;box-shadow:0 50px 120px -40px rgba(224,79,63,.55);}
.l2plan.pro::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;z-index:-1;
  pointer-events:none;
  background:conic-gradient(from var(--v3ang),transparent 0deg,transparent 250deg,#FF5D5D 310deg,#FFA894 335deg,#E04F3F 350deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:v3spin 6s linear infinite;}
@keyframes v3spin{to{--v3ang:360deg;}}
.l2plan li{transition:opacity .5s ease,transform .5s ease;}
.ldjs .l2plan:not(.in) li{opacity:0;transform:translateX(-8px);}
.l2plan.in li:nth-child(2){transition-delay:.06s;} .l2plan.in li:nth-child(3){transition-delay:.12s;}
.l2plan.in li:nth-child(4){transition-delay:.18s;} .l2plan.in li:nth-child(5){transition-delay:.24s;}
.l2plan.in li:nth-child(6){transition-delay:.30s;} .l2plan.in li:nth-child(7){transition-delay:.36s;}
.l2per{transition:opacity .6s ease,transform .6s var(--v3-vs-ease),box-shadow .6s ease;}
.ldjs .l2plan:not(.in) .l2per{opacity:0;transform:translateY(14px) scale(.96);}
.l2plan.in .l2per:nth-child(1){transition-delay:.35s;} .l2plan.in .l2per:nth-child(2){transition-delay:.5s;}
.l2plan.in .l2per:nth-child(3){transition-delay:.65s;}
.l2per.best{position:relative;box-shadow:0 0 0 1px rgba(255,93,93,.55),0 0 26px rgba(224,79,63,.35);}
.l2plan.in .l2per.best{animation:v3pulse 2.8s ease-in-out 1.4s infinite;}
@keyframes v3pulse{50%{box-shadow:0 0 0 1px rgba(255,93,93,.9),0 0 38px rgba(255,93,93,.55);}}
.l2per b.num{font-variant-numeric:tabular-nums;}

@media (prefers-reduced-motion: reduce){
  .l2vsx *,.l2vsx::before,.l2vsx::after{transition:none !important;}
  .l2vsxstage:hover .l2vsxframe{transform:var(--v3-tilt);}
  .l2plan.pro::after,.l2plan.in .l2per.best{animation:none;}
}

@media (max-width:1279px){
  .l2vsxframe{inline-size:300px;}
  .l2vsxcard{inset-inline-end:-16%;inline-size:76%;}
}
/* --- телефон: текст -> переключатель -> кадр -> шаги --- */
@media (max-width:1023px){
  .l2vsxin{grid-template-columns:1fr;justify-items:start;gap:0;}
  .l2vsxtxt{display:contents;}
  .l2vsx .l2spaced{order:1;} .l2vsxh{order:2;} .l2vsx .l2rule{order:3;} .l2tog{order:4;}
  .l2vsxstage{order:5;justify-self:center;margin-block:30px 6px;}
  .l2vsxlists{order:6;margin-block-start:0;inline-size:100%;}
}
@media (max-width:767px){
  .ld2 .l2vsx .l2spaced{font-size:14px;letter-spacing:.16em;}
  .ld2 .l2vsxh{font-size:28px;line-height:1.02;}
  .l2vsx .l2rule{margin-block:18px 20px;}
  .l2tog{inline-size:100%;}
  .l2tog button{padding:12px 10px;font-size:12px;letter-spacing:.12em;}
  .l2vsxframe{inline-size:min(250px,64vw);transform:var(--v3-tilt-phone);}
  .l2vsxstage:hover .l2vsxframe{transform:var(--v3-tilt-phone);}
  .l2vsxcard{inset-inline-end:-14%;inline-size:76%;}
  .l2vsxsteps li{font-size:15px;padding-block:7px;}
  .ld2 .l2plans .l2head .l2caps{font-size:26px;}
}

/* капс и черта секций ниже первого экрана проявляются, когда секция попала в экран (класс v3on) */
.ldjs .l2vsx .l2rule,.ldjs .l2plans .l2head .l2rule{animation:v3in .7s cubic-bezier(.2,.7,.2,1) .3s both;}
.ldjs .l2vsx .l2spaced{animation:v3in .7s cubic-bezier(.2,.7,.2,1) both;}
.ldjs .l2vsx .l2caps .ln,.ldjs .l2vsx .l2rule,.ldjs .l2vsx .l2spaced,
.ldjs .l2plans .l2caps .ln,.ldjs .l2plans .l2head .l2rule{animation-play-state:paused;}
.ldjs .l2vsx.v3on .l2caps .ln,.ldjs .l2vsx.v3on .l2rule,.ldjs .l2vsx.v3on .l2spaced,
.ldjs .l2plans.v3on .l2caps .ln,.ldjs .l2plans.v3on .l2head .l2rule{animation-play-state:running;}
@media (prefers-reduced-motion: reduce){
  .ldjs .l2vsx .l2rule,.ldjs .l2plans .l2head .l2rule,.ldjs .l2vsx .l2spaced{animation:none;}
}

/* правило Instagram (ПРАВИЛА_ТЕКСТА_И_ДВИЖЕНИЯ): при минусовом межбуквенном - пробел между словами шире */
.ld2 .l2caps{word-spacing:.15em;}
/* тихая ссылка в тарифах - как в первом экране: белая с красным подчёркиванием, без синего */
.ld2 .l2plans .l2quiet{color:#F5F6F8;text-decoration-color:rgba(255,93,93,.7);}

/* ================================================================================
   20.10 Ксюша, первый экран заново: «мелкота разными шрифтами» убрана, вместо неё - две кнопки
   и три плитки-обложки (как хайлайты Instagram); карточка не висит в воздухе - подложка-обложка
   с красным светом, телефон с приложением, тень на полу. Один шрифт - Manrope.
   Значения - site_v3.hero2 в docs/design/brand_tokens.json.
   ================================================================================ */
/* один шрифт на всём сайте: моноширинный (его и не грузили - браузер брал свой) заменён на Manrope */
.l2sitem code,.l2sealbot i,.l2vsxsteps li::before{font-family:var(--font-display) !important;
  font-variant-numeric:tabular-nums;}

/* --- кнопки: главная + вторая стеклянная, условие одной строкой под ними --- */
.l2htxt .l2cta{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px;margin-block-start:34px;}
.l2htxt .l2cta .l2cond{flex-basis:100%;margin-block-start:4px;font-size:14px;color:rgba(245,246,248,.7);}
.ld2 .l2btn.glass2{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:#F5F6F8;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-weight:600;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);transition:background .3s ease,border-color .3s ease;}
.ld2 .l2btn.glass2:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3);}

/* --- плитки-обложки: как обложки хайлайтов - красный свет на чёрном, капс, черта, разреженная строка --- */
.l2hl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-block-start:38px;max-inline-size:600px;}
.l2hlc{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  block-size:142px;padding:16px;border-radius:20px;text-decoration:none;color:#F5F6F8;
  background:#050304;border:1px solid rgba(255,255,255,.09);
  box-shadow:0 24px 50px -24px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease,border-color .5s ease;}
.l2hlc::before{content:"";position:absolute;inset:0;z-index:-2;transition:transform .8s cubic-bezier(.2,.7,.2,1);}
.l2hlc.c1::before{background:
  radial-gradient(ellipse 70% 60% at 0% 0%,#EC6A5A 0%,#B02C22 34%,#460C0A 64%,transparent 90%),#050304;}
.l2hlc.c2::before{background:
  radial-gradient(ellipse 80% 60% at 100% 70%,#E04F3F 0%,#B02C22 30%,#460C0A 62%,transparent 92%),#050304;}
.l2hlc.c3::before{background:
  radial-gradient(ellipse 90% 55% at 20% 40%,#EC6A5A 0%,#B02C22 32%,#460C0A 62%,transparent 92%),#050304;}
.l2hlc::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--v3-grain-alpha);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.l2hlc b{font:800 22px/1.02 var(--font-display);letter-spacing:-.03em;word-spacing:.12em;text-transform:uppercase;}
.l2hlc b.num{font-size:34px;font-variant-numeric:tabular-nums;}
.l2hlc i{display:block;inline-size:26px;block-size:2px;margin-block:10px 9px;border-radius:2px;
  background:#FF5D5D;box-shadow:0 0 10px rgba(255,93,93,.8);}
.l2hlc span{font:600 11px/1.35 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:rgba(245,246,248,.86);}
/* стрелка в углу - видно, что это переход */
.l2hlc>span::after{content:"";position:absolute;inset-block-start:14px;inset-inline-end:14px;inline-size:28px;block-size:28px;
  border-radius:50%;background:rgba(255,255,255,.10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F6F8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/14px no-repeat;
  border:1px solid rgba(255,255,255,.16);transition:background-color .4s ease;}
.l2hlc:hover{transform:translateY(-4px);border-color:rgba(255,93,93,.45);
  box-shadow:0 30px 60px -24px rgba(224,79,63,.55),inset 0 1px 0 rgba(255,255,255,.12);}
.l2hlc:hover::before{transform:scale(1.08);}
.l2hlc:hover>span::after{background-color:rgba(255,93,93,.85);}
.l2hlc:focus-visible{outline:2px solid #FF5D5D;outline-offset:3px;}

/* --- сцена: подложка-обложка, телефон, живая карточка выходит из телефона, тень на полу --- */
.l2hero .l2stage{display:block;position:relative;min-block-size:640px;}
.l2back{position:absolute;inset:2% 0 7% 10%;border-radius:36px;overflow:hidden;isolation:isolate;
  background:
   radial-gradient(ellipse 70% 55% at 85% 20%,#EC6A5A 0%,#B02C22 30%,#460C0A 62%,transparent 90%),
   radial-gradient(ellipse 60% 50% at 10% 95%,rgba(176,44,34,.55) 0%,transparent 75%),#050304;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.10);
  transform:perspective(1800px) rotateY(-12deg) rotateX(6deg);}
.l2back::after{content:"";position:absolute;inset:0;opacity:var(--v3-grain-alpha);pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
/* современный телефон: тонкая титановая рамка, «остров» камеры */
.l2phone{position:absolute;z-index:1;inset-block-start:5%;inset-inline-end:7%;inline-size:262px;aspect-ratio:9/19.3;
  padding:9px;border-radius:46px;
  background:linear-gradient(145deg,#4A4D55 0%,#1A1C20 22%,#2E3137 55%,#121316 80%,#3A3D44 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 0 0 3px rgba(0,0,0,.6),
    0 50px 100px -30px rgba(0,0,0,.95),0 0 80px -10px rgba(224,79,63,.35);
  transform:perspective(1800px) rotateY(-12deg) rotateX(6deg);transition:transform .8s cubic-bezier(.2,.7,.2,1);}
.l2phone .scr{position:relative;inline-size:100%;block-size:100%;border-radius:38px;overflow:hidden;background:#0B0C0F;}
.l2phone .scr img{display:block;inline-size:100%;block-size:auto;padding-block-start:34px;}
.l2phone .isl{position:absolute;inset-block-start:20px;inset-inline-start:50%;translate:-50% 0;
  inline-size:78px;block-size:22px;border-radius:12px;background:#000;}
.l2hero .l2tilt{position:absolute;z-index:2;inset-inline-start:0;inset-block-end:12%;inline-size:min(330px,72%);}
.l2stage:hover .l2phone{transform:perspective(1800px) rotateY(-5deg) rotateX(2deg);}
.l2floor{position:absolute;z-index:0;inset-inline:8% 4%;inset-block-end:-2%;block-size:60px;pointer-events:none;
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(0,0,0,.75) 0%,rgba(70,12,10,.35) 50%,transparent 75%);
  filter:blur(8px);}

@media (prefers-reduced-motion: reduce){
  .l2hlc,.l2hlc::before,.l2phone{transition:none;}
  .l2hlc:hover{transform:none;} .l2hlc:hover::before{transform:none;}
  .l2stage:hover .l2phone{transform:perspective(1800px) rotateY(-12deg) rotateX(6deg);}
}

@media (max-width:1279px){
  .l2hero .l2stage{min-block-size:560px;}
  .l2phone{inline-size:226px;}
  .l2hero .l2tilt{inline-size:min(290px,74%);}
}
@media (max-width:1023px){
  .l2hero .l2stage{inline-size:min(520px,100%);margin-inline:auto;}
}
/* телефон: заголовок -> кнопки -> сцена -> плитки (листаются пальцем) -> описание */
@media (max-width:767px){
  .l2hero .l2cta{order:4;flex-direction:column;align-items:stretch;gap:10px;margin-block-start:22px;}
  .l2hero .l2cta .l2btn{inline-size:100%;}
  .l2hero .l2cta .l2cond{text-align:center;margin-block-start:2px;font-size:13px;}
  .l2hero .l2stage{order:5;min-block-size:440px;inline-size:100%;margin-block-start:26px;}
  .l2hero .l2hl{order:6;}
  .ld2 .l2hero .l2sub{order:7;margin-block-start:34px;}
  .l2back{inset:2% 0 6% 8%;border-radius:28px;transform:perspective(1800px) rotateY(-6deg) rotateX(3deg);}
  .l2phone{inline-size:178px;border-radius:34px;padding:7px;inset-inline-end:5%;
    transform:perspective(1800px) rotateY(-6deg) rotateX(3deg);}
  .l2stage:hover .l2phone{transform:perspective(1800px) rotateY(-6deg) rotateX(3deg);}
  .l2phone .scr{border-radius:28px;} .l2phone .scr img{padding-block-start:24px;}
  .l2phone .isl{inset-block-start:14px;inline-size:56px;block-size:16px;}
  .l2hero .l2tilt{inline-size:min(250px,70%);inset-block-end:10%;}
  .l2hl{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-block-start:26px;
    margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px;padding-block-end:6px;scrollbar-width:none;max-inline-size:none;}
  .l2hl::-webkit-scrollbar{display:none;}
  .l2hlc{flex:0 0 156px;scroll-snap-align:start;}
  /* лента плиток не распирает первый экран: у flex-элемента по умолчанию min-width = ширина содержимого */
  .l2hero .wrap.in,.l2hl{min-inline-size:0;}
  .l2hero .wrap.in{inline-size:100%;}
}
/* в первом экране строка заголовка длинная - пробел между словами чуть меньше, чтобы фраза не рвалась */
.ld2 .l2hero h1.l2caps{word-spacing:.06em;max-inline-size:none;}
.ld2 .l2caps .ln{text-wrap:balance;}

/* 20.10 Ксюша: «не надо кнопок с градиентом - сайт, а не Instagram». Плитки-обложки заменены одной
   сдержанной стеклянной панелью: из Instagram - только пара «капс-заголовок + подзаголовок» и красная
   черта, без цветного света. Анимация - стеклянный блик по наведению и сдвиг стрелки. */
.l2hl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-block-start:40px;max-inline-size:620px;
  border-radius:20px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 60px -30px rgba(0,0,0,.8);overflow:hidden;}
.l2hlc{block-size:auto;padding:20px 22px 22px;border:0;border-radius:0;background:none;box-shadow:none;
  justify-content:flex-start;overflow:hidden;transition:background-color .4s ease;}
.l2hlc+.l2hlc{border-inline-start:1px solid rgba(255,255,255,.08);}
.l2hlc::after{content:none;}
/* блик: узкая светлая полоса проходит по стеклу при наведении */
.l2hlc::before,.l2hlc.c1::before,.l2hlc.c2::before,.l2hlc.c3::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.07) 50%,transparent 65%);
  transform:translateX(-110%);transition:transform .9s cubic-bezier(.2,.7,.2,1);}
.l2hlc:hover::before{transform:translateX(110%);}
.l2hlc:hover{transform:none;background-color:rgba(255,255,255,.035);border-color:rgba(255,255,255,.08);box-shadow:none;}
.l2hlc b,.l2hlc b.num{font:700 20px/1.1 var(--font-display);letter-spacing:-.02em;word-spacing:.1em;color:#F5F6F8;}
.l2hlc b.num{font-size:26px;letter-spacing:-.03em;}
.l2hlc i{inline-size:20px;block-size:2px;margin-block:12px 10px;box-shadow:none;transition:inline-size .5s cubic-bezier(.2,.7,.2,1);}
.l2hlc:hover i{inline-size:40px;}
.l2hlc span{font:500 13px/1.4 var(--font-display);letter-spacing:0;text-transform:none;color:rgba(245,246,248,.62);}
/* стрелка - тонкая, без кружка, справа сверху; на наведении уходит вправо-вверх */
.l2hlc>span::after{inset-block-start:22px;inset-inline-end:20px;inline-size:16px;block-size:16px;border:0;border-radius:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F6F8' stroke-opacity='.55' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M9 7h8v8'/%3E%3C/svg%3E") center/16px no-repeat;
  transition:transform .4s ease;}
.l2hlc:hover>span::after{background-color:transparent;transform:translate(3px,-3px);}
@media (prefers-reduced-motion: reduce){ .l2hlc::before{display:none;} .l2hlc i{transition:none;} }
/* телефон: та же панель, три строки одна под другой - текст крупный, без ленты вбок */
@media (max-width:767px){
  .l2hl{display:grid;grid-template-columns:1fr;overflow:hidden;margin-inline:0;padding:0;margin-block-start:26px;}
  .l2hlc{flex:none;padding:18px 20px;}
  .l2hlc+.l2hlc{border-inline-start:0;border-block-start:1px solid rgba(255,255,255,.08);}
  .l2hlc i{margin-block:10px 8px;}
}
/* подложка сцены - тёмное стекло, а не ещё один красный градиент поверх градиентного фона */
.l2back{background:rgba(255,255,255,.035);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 60px 120px -40px rgba(0,0,0,.9);}
.l2back::after{content:none;}

/* ================================================================================
   20.10 Ксюша: шапка и первый экран.
   Меню - заглавными тонким шрифтом, как разреженная строка под заголовком; дальше кнопки, справа
   в одном стиле значки Telegram, Instagram, X. Первый экран - только заголовок, черта, подзаголовок,
   описание, две кнопки; справа живая карточка и плашка «83% ситуаций достигли цели».
   ================================================================================ */
.ld2 .nav a{font-family:var(--font-display);font-size:12px;font-weight:400;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(245,246,248,.72);}
.ld2 .nav a.on,.ld2 .nav a:hover{font-weight:400;color:#F5F6F8;}
.ld2 .nav{gap:22px;}
.ld2 .hdr .in{gap:28px;}
@media (min-width:1280px){ .ld2 .hdr .wrap{max-inline-size:1360px;} }
.hsoc{display:inline-flex;align-items:center;gap:8px;margin-inline-start:6px;}
.hsoc a{display:inline-grid;place-items:center;inline-size:38px;block-size:38px;border-radius:50%;color:#F5F6F8;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.16);
  transition:background-color .3s ease,border-color .3s ease;}
.hsoc a:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.32);}
.hsoc .ic{inline-size:17px;block-size:17px;}
@media (max-width:1439px){ .ld2 .nav{gap:16px;} .ld2 .nav a{font-size:11px;letter-spacing:.12em;} .ld2 .hdr .in{gap:20px;} }
/* уже 1280 значкам в шапке нет места - они остаются в меню и подвале */
@media (max-width:1279px){ .ld2 .hsoc{display:none!important;} }
@media (max-width:1099px){ .ld2 .nav a{letter-spacing:.08em;} }

/* первый экран: только кнопки под описанием */
.l2hero .l2hl{display:none;}
.l2htxt .l2cta{margin-block-start:36px;}

/* плашка результата: стекло, кольцо, крупная цифра */
.l2win{position:absolute;z-index:4;inset-inline-end:-2%;inset-block-start:6%;display:flex;align-items:center;gap:16px;
  padding:16px 22px 16px 16px;border-radius:22px;background:rgba(14,15,18,.55);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 30px 70px -20px rgba(0,0,0,.85);
  opacity:0;transform:translateY(12px);filter:blur(6px);
  transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1),filter .8s ease;}
.l2win.on{opacity:1;transform:none;filter:none;}
.l2win .ring{inline-size:58px;block-size:58px;flex:none;transform:rotate(-90deg);}
.l2win .ring circle{fill:none;stroke-width:5;}
.l2win .ring .tr{stroke:rgba(255,255,255,.10);}
.l2win .ring .fg{stroke:#FF5D5D;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 0 4px rgba(255,93,93,.6));}
.l2win.on .ring .fg{stroke-dashoffset:calc(100 - var(--p));}
.l2win p{margin:0;display:flex;flex-direction:column;gap:2px;}
.l2win b{font:800 34px/1 var(--font-display);letter-spacing:-.03em;color:#F5F6F8;font-variant-numeric:tabular-nums;}
.l2win span{font:600 12px/1.35 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:rgba(245,246,248,.78);}
@keyframes v3flash{0%{filter:drop-shadow(0 0 4px rgba(255,93,93,.6));}35%{filter:drop-shadow(0 0 14px rgba(255,93,93,1));}100%{filter:drop-shadow(0 0 4px rgba(255,93,93,.6));}}
.l2win.flash .ring .fg{animation:v3flash 1.1s ease;}
@media (prefers-reduced-motion: reduce){ .l2win,.l2win .ring .fg{transition:none;} .l2win.flash .ring .fg{animation:none;} }
@media (max-width:1279px){ .l2win{inset-inline-end:0;} .l2win b{font-size:28px;} .l2win .ring{inline-size:48px;block-size:48px;} }

/* телефон: заголовок, черта, подзаголовок, описание, кнопки, потом сцена */
@media (max-width:767px){
  .ld2 .l2hero .l2sub{order:4;margin-block-start:18px;}
  .l2hero .l2cta{order:5;margin-block-start:22px;}
  .l2hero .l2stage{order:6;}
  .l2win{inset-inline-end:0;inset-block-start:0;padding:12px 16px 12px 12px;gap:12px;border-radius:18px;}
  .l2win b{font-size:24px;} .l2win span{font-size:10px;letter-spacing:.12em;}
  .l2win .ring{inline-size:40px;block-size:40px;}
}

/* ================================================================================
   20.10 Ксюша, большой список правок (общие правила всего сайта):
   - заголовки разделов и раскрытий - ЗАГЛАВНЫЕ, наш плотный Manrope, размер прежний;
   - подзаголовок (первая строка под заголовком и метка над ним) - ЗАГЛАВНЫЕ ТОНКИЕ с разрядкой;
   - заголовки внутри текста (карточки, пункты) - как были, строчные;
   - все прямоугольные кнопки - ЗАГЛАВНЫЕ ТОНКИЕ с разрядкой;
   - больше воздуха; фирменная скобка открывается к тексту, как обычная «(».
   ================================================================================ */
.ld2 .l2head h2,.ld2 .l2head h3,.ld2 .l2moreb h3:not(.l2part h3){text-transform:uppercase;font-weight:800;
  letter-spacing:-.025em;word-spacing:.12em;}
.ld2 .l2label,.ld2 .l2label.blue,
.ld2 .l2head > h2 + p:not(.l2label),.ld2 .l2head > h3 + p:not(.l2label),.ld2 .l2plans .l2head > .l2rule + p{
  font-family:var(--font-display);text-transform:uppercase;font-weight:400;font-size:14px;line-height:1.75;
  letter-spacing:.12em;color:rgba(245,246,248,.74);}
.ld2 .l2label,.ld2 .l2label.blue{font-size:13px;line-height:1.5;margin-block-end:18px;}
.ld2 .l2head > h2 + p:not(.l2label),.ld2 .l2head > h3 + p:not(.l2label){margin-block-start:22px;}
.ld2 .l2head{margin-block-end:64px;}

/* кнопки: заглавные тонкие, как подзаголовок */
.ld2 .l2btn{font-family:var(--font-display);text-transform:uppercase;font-weight:500;font-size:13px;letter-spacing:.12em;}
.ld2 .hdr .btn,.ld2 .mmenu .mtrial{font-family:var(--font-display);text-transform:uppercase;font-weight:500;
  font-size:12px;letter-spacing:.12em;}
/* шапка не перегружена: «Открыть приложение» - тонкая рамка, «Попробовать бесплатно» - красная */
.ld2 .hdr .btn.pri.deskcta,.ld2 .hdr .btn.pri.mobcta{background:transparent;border:1px solid rgba(255,255,255,.24);}
.ld2 .hdr .btn.pri.deskcta:hover,.ld2 .hdr .btn.pri.mobcta:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.4);}
.ld2 .hdr .btn{block-size:38px;padding-inline:16px;}

/* фирменная скобка-«луна»: изгиб к тексту, как у «(» */
.brk-b::before,.brk-o::before{background:none !important;inline-size:10px;border-radius:100% 0 0 100% / 50% 0 0 50%;
  border-inline-start:4px solid currentColor;box-shadow:none;}
.brk-o::before{color:var(--orange);filter:drop-shadow(0 0 6px rgba(224,79,63,.45));}
.brk-b::before{color:#FF5D5D;filter:drop-shadow(0 0 6px rgba(255,93,93,.4));}
.brk-b.large::before,.brk-o.large::before{inline-size:12px;border-inline-start-width:5px;border-radius:100% 0 0 100% / 50% 0 0 50%;}
/* синих меток больше нет - бренд-синий на тёмном спорит с красным светом */
.ld2 .l2note a{color:#F5F6F8;text-decoration-color:rgba(255,93,93,.7);}

/* ================================================================================
   20.10 Ксюша: правая часть первого экрана, три варианта (?hv=a|b|c). Старые подложка-стекло,
   отдельный телефон и карточка поверх - убраны (всё перекрывало друг друга).
   ================================================================================ */
.l2back{display:none;}
.l2hero .l2stage{display:block;position:relative;min-block-size:600px;}
.l2stage .hvA,.l2stage .hvB{position:absolute;inset:0;}
.l2stage[data-hv="a"] .hvB,.l2stage:not([data-hv="a"]) .hvA{display:none;}

/* --- А: ноутбук сзади, телефон впереди, плашка 83% внизу слева --- */
.l2lap{position:absolute;inset-inline:0 6%;inset-block-start:6%;}
.l2lap .lid{position:relative;padding:12px 12px 16px;border-radius:18px 18px 6px 6px;
  background:linear-gradient(180deg,#2A2D33,#17191D);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 40px 90px -30px rgba(0,0,0,.9);}
.l2lap .scr{border-radius:8px;overflow:hidden;background:#0B0C0F;aspect-ratio:16/10.25;}
.l2lap .scr img{display:block;inline-size:100%;block-size:100%;object-fit:cover;object-position:0 0;
  animation:v3pan 18s ease-in-out infinite alternate;transform-origin:20% 10%;}
@keyframes v3pan{to{transform:scale(1.08) translate(-2%,-1%);}}
.l2lap .base{display:block;block-size:12px;margin-inline:-7%;border-radius:0 0 14px 14px;
  background:linear-gradient(180deg,#3A3D44,#1C1E22);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 30px 40px -20px rgba(0,0,0,.9);}
.l2lap .base::after{content:"";display:block;inline-size:16%;block-size:4px;margin:0 auto;border-radius:0 0 6px 6px;background:rgba(0,0,0,.45);}
.hvA .l2phone{inset-block-start:auto;inset-block-end:2%;inset-inline-end:0;inline-size:250px;transform:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 0 0 3px rgba(0,0,0,.6),0 50px 100px -30px rgba(0,0,0,.95),0 0 70px -10px rgba(224,79,63,.3);}
.hvA .l2phone .scr{position:relative;}
.hvA .l2phone .scr .rest{position:absolute;inset-inline:0;inset-block-start:0;inline-size:100%;block-size:auto;padding:0;z-index:0;}
/* живая карточка - внутри экрана телефона, как раздел «Возможность сейчас» */
.l2hero .hvA .l2tilt{position:absolute;z-index:1;inset-inline:3%;inset-block-start:13%;inline-size:auto;transform:none;box-shadow:none;}
.l2stage:hover .hvA .l2tilt{transform:none;}
.hvA .l2tilt .l2maincard{padding:0;border-radius:16px;overflow:hidden;background:#0B0C0F;box-shadow:0 0 0 1px rgba(255,255,255,.08);}
.l2stage[data-hv="a"] .l2win{inset-inline-start:0;inset-inline-end:auto;inset-block-start:auto;inset-block-end:6%;}
.hvA .l2floor{inset-block-end:-3%;}

/* --- Б и В: как сториз «83%» - цифра набирается, полоски-ситуации растут к линии цели --- */
.hvB{display:flex;flex-direction:column;justify-content:flex-end;}
.l2bignum{position:absolute;inset-inline-start:0;inset-block-start:2%;margin:0;line-height:.86;
  font:800 clamp(120px,12vw,188px)/.86 var(--font-display);letter-spacing:-.06em;
  background:linear-gradient(180deg,#FFFFFF 0%,rgba(255,255,255,.92) 55%,rgba(255,255,255,.35) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums;}
.l2bignum sup{font-size:.36em;font-weight:500;vertical-align:top;margin-inline-start:.06em;letter-spacing:0;position:relative;top:.18em;}
.l2stage:not([data-hv="a"]) .l2win{inset-inline-start:0;inset-inline-end:auto;inset-block-start:calc(2% + clamp(120px,12vw,188px)*.92);
  padding:0;background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;}
.l2stage:not([data-hv="a"]) .l2win .ring,.l2stage:not([data-hv="a"]) .l2win b{display:none;}
.l2stage:not([data-hv="a"]) .l2win span{font:800 clamp(22px,2vw,30px)/1.08 var(--font-display);letter-spacing:-.02em;
  word-spacing:.12em;color:#F5F6F8;max-inline-size:340px;display:block;}
.l2rise{position:absolute;inset-inline:0;inset-block-end:0;inline-size:100%;block-size:52%;overflow:visible;}
.l2rise .goal{stroke:rgba(255,255,255,.55);stroke-width:1;stroke-dasharray:4 6;vector-effect:non-scaling-stroke;}
.l2rise .bars line{stroke-width:2.4;stroke-linecap:round;vector-effect:non-scaling-stroke;}
.l2rise .bars line.hit{stroke:url(#v3barhit);stroke:#FF5D5D;}
.l2rise .bars line.miss{stroke:rgba(255,255,255,.22);}
.l2rise .bars circle{fill:#FFA894;filter:drop-shadow(0 0 4px rgba(255,93,93,.9));}
.l2rise .chart path{fill:none;stroke-width:1.2;vector-effect:non-scaling-stroke;}
.l2rise .chart .up{stroke:rgba(76,201,140,.35);} .l2rise .chart .dn{stroke:rgba(255,93,93,.35);}
.l2rise .chart .lvl{stroke:rgba(255,93,93,.5);stroke-width:1;stroke-dasharray:2 4;}
.l2stage[data-hv="b"] .l2rise .chart{display:none;}
.l2stage[data-hv="c"] .l2rise{block-size:60%;}

@media (prefers-reduced-motion: reduce){ .l2lap .scr img{animation:none;} }
@media (max-width:1279px){ .hvA .l2phone{inline-size:210px;} .l2hero .l2stage{min-block-size:520px;} }
@media (max-width:767px){
  .l2hero .l2stage{min-block-size:420px;}
  .hvA .l2phone{inline-size:168px;inset-inline-end:2%;transform:none;}
  .l2lap{inset-inline:0 10%;inset-block-start:4%;}
  .l2lap .lid{padding:7px 7px 9px;border-radius:12px 12px 4px 4px;}
  .l2lap .base{block-size:8px;}
  .l2stage[data-hv="a"] .l2win{inset-block-end:4%;}
  .l2stage:not([data-hv="a"]) .l2win{inset-block-start:calc(2% + 108px);}
  .l2bignum{font-size:120px;}
  .l2stage:not([data-hv="a"]) .l2win span{font-size:22px;}
}
/* правки вариантов: цифра крупная (перебивал общий размер абзаца), полоски тонкие и гаснут книзу, как в сториз */
.ld2 .l2bignum{font:800 clamp(120px,12vw,188px)/.86 var(--font-display);letter-spacing:-.06em;}
.l2rise .bars line{stroke-width:1.4;}
.l2rise .bars line.hit{stroke:url(#v3hit);}
.l2rise .bars line.miss{stroke:url(#v3miss);}
.l2rise .bars circle{fill:#FFD2C6;}
.l2stage[data-hv="c"] .l2rise .chart .up{stroke:rgba(76,201,140,.55);}
.l2stage[data-hv="c"] .l2rise .chart .dn{stroke:rgba(255,93,93,.55);}
.l2stage[data-hv="c"] .l2rise .bars line{opacity:.75;}
/* А: ноутбук крупнее и левее, телефон справа меньше, плашка слева внизу - не заходит на телефон */
.l2lap{inset-inline:-14% 14%;inset-block-start:4%;}
.hvA .l2phone{inline-size:230px;}
.l2stage[data-hv="a"] .l2win{max-inline-size:calc(100% - 270px);inset-block-end:3%;}
.l2stage[data-hv="a"] .l2win span{font-size:11px;}
/* шапка: заглавные кнопки шире - чуть меньше разрядка и поля, чтобы строка помещалась */
.ld2 .hdr .btn{padding-inline:14px;letter-spacing:.1em;}
.ld2 .hsoc a{inline-size:34px;block-size:34px;}
.ld2 .hsoc .ic{inline-size:15px;block-size:15px;}
.ld2 .hsoc{gap:6px;margin-inline-start:2px;}
.ld2 .hdr .act{gap:8px;}
/* две кнопки первого экрана - в один ряд */
.l2htxt .l2cta .l2btn{padding-inline:22px;letter-spacing:.1em;font-size:12.5px;}
@media (max-width:1279px){ .l2lap{inset-inline:-6% 16%;} .hvA .l2phone{inline-size:200px;} .l2stage[data-hv="a"] .l2win{max-inline-size:calc(100% - 230px);} }
@media (max-width:767px){ .l2lap{inset-inline:0 18%;} .hvA .l2phone{inline-size:160px;} .l2stage[data-hv="a"] .l2win{max-inline-size:calc(100% - 175px);}
  .ld2 .l2bignum{font-size:120px;} }

/* ================================================================================
   20.10 Ксюша, этап 2: смысл «без / с», подсветки карточки как в сториз, анимации
   «Работа ChiPro», уведомлений и пути сделки, свои картинки инструментов, воздух.
   ================================================================================ */

/* --- без / с: без ChiPro - плотная серая гора дел, с ChiPro - три крупных шага --- */
.l2vsxsteps.bad{display:grid;grid-template-columns:1fr 1fr;column-gap:22px;row-gap:0;}
.l2vsxsteps.bad li{font-size:14px;padding-block:6px;color:rgba(245,246,248,.5);}
.l2vsxsteps.good{gap:10px;}
.l2vsxsteps.good li{font:700 22px/1.25 var(--font-display);letter-spacing:-.015em;padding-block:12px;padding-inline-start:52px;}
.l2vsxsteps.good li::before{font-size:14px;inset-block-start:18px;}
.l2procsteps:not(.on){columns:2;column-gap:28px;}
.l2procsteps:not(.on) li{break-inside:avoid;color:var(--text-muted);font-size:14px;padding-block:8px;}
.l2procsteps.on li{font:700 20px/1.3 var(--font-display);padding-block:16px;}
@media (max-width:767px){ .l2vsxsteps.bad{grid-template-columns:1fr 1fr;column-gap:14px;} .l2vsxsteps.bad li{font-size:13px;padding-inline-start:30px;}
  .l2vsxsteps.good li{font-size:19px;} }

/* --- рамка-подсветка на снимке: стекло, приподнимается, подсказка над ней --- */
.l2hlwrap{position:relative;}
.l2hb{position:absolute;left:var(--x);top:var(--y);inline-size:var(--w);block-size:var(--h);border-radius:12px;
  border:1.5px solid rgba(255,255,255,.0);background:rgba(255,255,255,0);pointer-events:none;
  transition:border-color .5s ease,background-color .5s ease,box-shadow .5s ease,transform .6s cubic-bezier(.2,.7,.2,1);}
.l2hb em{position:absolute;inset-inline-start:0;inset-block-end:calc(100% + 10px);white-space:nowrap;font-style:normal;
  font:600 11px/1 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:#F5F6F8;
  padding:8px 12px;border-radius:999px;background:rgba(14,15,18,.72);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;transform:translateY(6px);
  transition:opacity .45s ease,transform .45s ease;}
.l2hb.on{border-color:rgba(255,93,93,.85);background:rgba(255,255,255,.06);transform:translateY(-4px) scale(1.02);
  box-shadow:0 0 0 4px rgba(255,93,93,.12),0 18px 40px -10px rgba(224,79,63,.55);}
.l2hb.on em{opacity:1;transform:none;}
/* у нижней рамки подсказка - под ней, чтобы не закрывать график */
.l2hb[style*="--y:8"] em,.l2hb[style*="--y:7"] em{inset-block-end:auto;inset-block-start:calc(100% + 10px);}
.l2legend li[data-hk]{transition:color .4s ease,opacity .4s ease;}
.l2hlwrap.cycle ~ .l2legend li[data-hk],.l2anat .l2legend li[data-hk]{opacity:.55;}
.l2anat .l2legend li.on{opacity:1;}
.l2anat .l2legend li.on i{box-shadow:0 0 10px rgba(255,93,93,.9);}

/* --- «Каждая сделка...»: без ChiPro - серо и голо, с ChiPro - ярко, всё подсвечено --- */
.l2pane.bad{background:rgba(255,255,255,.015);}
.l2pane.bad .scene{filter:grayscale(1);opacity:.55;}
.l2pane.bad .l2pt,.l2pane.bad .l2pcap{color:var(--text-muted);}
.l2pane.good{background:rgba(255,255,255,.03);border:1px solid rgba(255,93,93,.35);
  box-shadow:0 40px 90px -40px rgba(224,79,63,.55),inset 0 1px 0 rgba(255,255,255,.08);}
.l2pane.good .l2minicard{position:relative;}
.l2pane.good .l2minicard img{display:block;inline-size:100%;block-size:auto;border-radius:14px;}
.l2pane.good .l2hb{border-color:rgba(255,93,93,.85);background:rgba(255,255,255,.05);
  box-shadow:0 0 0 3px rgba(255,93,93,.12);opacity:0;transform:scale(.96);transition:opacity .5s ease,transform .5s ease;}
.l2pane.good .l2hb em{opacity:1;transform:none;font-size:10px;padding:6px 10px;}
.l2pane.good.in .l2hb,.l2pane.good.v3on .l2hb{opacity:1;transform:none;}
.l2pane.good .l2hb:nth-of-type(2){transition-delay:.25s;} .l2pane.good .l2hb:nth-of-type(3){transition-delay:.5s;}
.l2pane.good .l2hb:nth-of-type(4){transition-delay:.75s;}
.l2cmp{margin-block-end:40px;}
.l2funnel{padding-block-end:56px;}

/* «ChiPro анализирует»: технологичнее - сетка и бегущий луч сканирования */
.l2fun .fscan{fill:url(#v3scan);animation:v3scan 3.2s linear infinite;}
@keyframes v3scan{from{transform:translateX(-120px);}to{transform:translateX(900px);}}
.l2fun .fgrid{stroke:rgba(255,255,255,.05);stroke-width:1;}
.l2fun .ffilters rect{fill:rgba(255,93,93,.55);filter:drop-shadow(0 0 6px rgba(255,93,93,.7));}
.l2funcap .blue{color:#F5F6F8;}

/* --- «Работа ChiPro»: шаги пульсируют по очереди, затем «Сообщает вам» поднимается со звонком --- */
.l2chain .l2nodes li i,.l2chain .l2you i{transition:box-shadow .4s ease,background-color .4s ease,transform .4s ease;}
.l2chain .l2nodes li span,.l2chain .l2you span{transition:color .4s ease;}
.l2chain .l2nodes li.on i{background:rgba(255,93,93,.18);box-shadow:0 0 0 6px rgba(255,93,93,.12),0 0 24px rgba(255,93,93,.65);transform:scale(1.08);}
.l2chain .l2nodes li.on span{color:#F5F6F8;}
.l2chain .l2you{transition:transform .6s cubic-bezier(.2,.9,.25,1.2);}
.l2chain .l2you.on{transform:translateY(-14px);}
.l2chain .l2you.on i{background:rgba(255,93,93,.25);box-shadow:0 0 0 8px rgba(255,93,93,.14),0 0 34px rgba(255,93,93,.85);
  animation:v3ding .6s ease;}
.l2chain .l2you.on span{color:#F5F6F8;}
@keyframes v3ding{0%{transform:rotate(0);}20%{transform:rotate(-14deg);}40%{transform:rotate(12deg);}60%{transform:rotate(-8deg);}80%{transform:rotate(4deg);}100%{transform:rotate(0);}}
.l2notif{background:none;border:0;box-shadow:none;padding-inline:0;text-align:center;}
.ld2 .l2notif .l2nbig{max-inline-size:760px;margin-inline:auto;}

/* --- уведомления: телефон, в который по очереди приходят уведомления --- */
.l2notifx{display:grid;grid-template-columns:auto 1fr;gap:56px;align-items:center;}
.l2nphone{position:relative;inline-size:250px;aspect-ratio:9/19.3;padding:9px;border-radius:44px;
  background:linear-gradient(145deg,#4A4D55 0%,#1A1C20 22%,#2E3137 55%,#121316 80%,#3A3D44 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 0 0 3px rgba(0,0,0,.6),0 40px 90px -30px rgba(0,0,0,.95),0 0 70px -20px rgba(224,79,63,.35);}
.l2nphone .scr{position:relative;inline-size:100%;block-size:100%;border-radius:36px;overflow:hidden;
  background:radial-gradient(ellipse 90% 60% at 50% 0%,#2A0E0C 0%,#0B0C0F 70%);}
.l2nphone .isl{position:absolute;inset-block-start:19px;inset-inline-start:50%;translate:-50% 0;inline-size:74px;block-size:21px;border-radius:12px;background:#000;}
.ld2 .l2nphone .clock{margin:58px 0 0;text-align:center;font:300 54px/1 var(--font-display);letter-spacing:-.02em;color:rgba(245,246,248,.92);}
.l2nstack{position:absolute;inset-inline:10px;inset-block-start:150px;display:flex;flex-direction:column;gap:8px;}
.l2npush{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;
  background:rgba(40,42,48,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.08);opacity:0;transform:translateY(-14px) scale(.96);
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.9,.25,1.1),border-color .4s ease;}
.l2npush.in{opacity:1;transform:none;}
.l2npush.new{border-color:rgba(255,93,93,.6);box-shadow:0 0 24px -6px rgba(255,93,93,.6);}
.l2npush .ap{flex:none;inline-size:28px;block-size:28px;border-radius:8px;
  background:#0B0C0F url("/site/static/brand/favicon.svg") center/18px no-repeat;border:1px solid rgba(255,255,255,.12);}
.l2npush p{margin:0;display:flex;flex-direction:column;gap:2px;min-inline-size:0;}
.ld2 .l2npush b{font:700 11px/1.2 var(--font-display);color:#F5F6F8;}
.ld2 .l2npush span{font:500 12px/1.3 var(--font-display);color:rgba(245,246,248,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.l2notifx .l2nlist{grid-template-columns:1fr 1fr;}
.l2notifx .l2nlist li{transition:border-color .4s ease,background-color .4s ease;}
.l2notifx .l2nlist li.on{border-color:rgba(255,93,93,.55);background:rgba(255,255,255,.03);}
@media (max-width:1023px){ .l2notifx{grid-template-columns:1fr;justify-items:center;} .l2notifx .l2nlist{inline-size:100%;} }
@media (max-width:767px){ .l2notifx .l2nlist{grid-template-columns:1fr;} .l2nphone{inline-size:220px;} }

/* --- путь сделки: шаги загораются по очереди, между ними тонкие стрелки --- */
.l2stx li{transition:opacity .5s ease;}
.l2stx li::before{transition:background-color .5s ease,border-color .5s ease,color .5s ease,box-shadow .5s ease;}
.l2stx li b,.l2stx li span{transition:color .5s ease,opacity .5s ease,transform .5s ease;}
.l2stx.run li{opacity:.4;}
.l2stx.run li.done{opacity:.75;}
.l2stx.run li.on{opacity:1;}
.l2stx li.on::before,.l2stx li.done::before{border-color:#FF5D5D;color:#fff;background:rgba(255,93,93,.2);}
.l2stx li.on::before{background:#E04F3F;box-shadow:0 0 0 6px rgba(255,93,93,.15),0 0 24px rgba(255,93,93,.75);}
.l2stx li.on b{color:#FF5D5D;}
.l2stx.run li:not(.on):not(.done) b{transform:translateY(6px);}
.l2stx li:not(:nth-child(3n))::after{content:"";position:absolute;inset-block-start:19px;inset-inline-start:52px;
  inset-inline-end:-22px;block-size:1px;background:linear-gradient(90deg,rgba(255,255,255,.25),rgba(255,255,255,.25)) left/calc(100% - 8px) 1px no-repeat;}
.l2stx li:not(:nth-child(3n))::after{mask:none;}
.l2stx li:not(:nth-child(3n)):not(:last-child) b::after{content:"";}
.l2stx li.done:not(:nth-child(3n))::after{background:linear-gradient(90deg,rgba(255,93,93,.8),rgba(255,93,93,.8)) left/calc(100% - 8px) 1px no-repeat;}
.l2stx li:not(:nth-child(3n)):not(:last-child)::after{border-inline-end:0;}
.l2stx li:not(:nth-child(3n)):not(:last-child) span::after{content:none;}
@media (max-width:1023px){ .l2stx li::after{display:none;} }
@media (prefers-reduced-motion: reduce){ .l2stx.run li{opacity:1;} }

/* --- инструменты: квадратная картинка по смыслу + заголовок + текст --- */
.l2partsx .l2pic{aspect-ratio:1/1;max-inline-size:150px;inline-size:100%;display:grid;place-items:center;border-radius:24px;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 30px 60px -30px rgba(0,0,0,.8);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .5s ease,box-shadow .5s ease;}
.l2partsx .l2part:hover .l2pic{transform:translateY(-4px);border-color:rgba(255,93,93,.45);box-shadow:0 30px 60px -24px rgba(224,79,63,.5);}
.l2pic svg{inline-size:62%;block-size:62%;overflow:visible;}
.l2pic .ln{fill:none;stroke:rgba(245,246,248,.85);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.l2pic .ln.th{stroke-width:1.6;stroke:rgba(245,246,248,.5);}
.l2pic .ac{fill:none;stroke:#FF5D5D;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(255,93,93,.7));}
.l2pic .acf{fill:#FF5D5D;filter:drop-shadow(0 0 8px rgba(255,93,93,.7));}
.l2pic .cd{stroke:rgba(245,246,248,.4);stroke-width:1.6;stroke-linecap:round;}
.l2pic .cb{fill:rgba(255,93,93,.85);} .l2pic .cb.up{fill:rgba(76,201,140,.85);}
.l2pic .tp,.l2pic .en,.l2pic .sl{fill:none;stroke-width:1.6;stroke-dasharray:4 4;}
.l2pic .tp{stroke:rgba(76,201,140,.8);} .l2pic .en{stroke:rgba(245,246,248,.7);} .l2pic .sl{stroke:#FF5D5D;}
.l2partsx .l2part{align-items:flex-start;gap:18px;}
.l2partsx{gap:40px;margin-block-start:64px;}

/* --- параметры: настоящая карточка в середине --- */
.l2mapcard.real{block-size:auto;inline-size:300px;padding:0;border:0;background:none;}
.l2mapcard.real img{display:block;inline-size:100%;block-size:auto;border-radius:16px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 80px -30px rgba(0,0,0,.9),0 0 60px -20px rgba(224,79,63,.4);}

/* --- воздух --- */
.ld2 .l2moreb{padding:clamp(28px,4vw,56px);}
.l2devices{background:none !important;}
.l2devcomp{gap:40px;margin-block:44px 8px;}
.l2dev figcaption{margin-block-start:18px;}
.l2btns{gap:16px;margin-block-start:44px;flex-wrap:wrap;}
.l2devices .l2morep{max-inline-size:760px;margin-inline:auto;}
.l2sector{padding:30px 28px;}
.ld2 .l2sector h4{margin-block-end:16px;font-size:18px;}
.ld2 .l2sector p{line-height:1.7;}
.l2triple{padding-block-start:24px;}
.l2orbit{margin-block-start:24px;}
.ld2 .l2mores{margin-block-start:56px;}

/* финал: подзаголовок - заглавные тонкие */
.ld2 .l2final .l2sub{font-family:var(--font-display);text-transform:uppercase;font-weight:400;font-size:15px;
  line-height:1.75;letter-spacing:.12em;color:rgba(245,246,248,.78);}
/* рамки считаются от самой картинки; у верхних рамок подпись - под рамкой, чтобы не обрезалась */
.hlin{position:relative;display:block;inline-size:100%;}
.hlin img{display:block;inline-size:100%;block-size:auto;}
.l2hb[style*="--y:3%"] em,.l2hb[style*="--y:4%"] em{inset-block-end:auto;inset-block-start:calc(100% + 8px);}
.l2pane.good .l2hb[style*="--x:62%"] em{inset-inline-start:auto;inset-inline-end:0;}
.ld2 .l2syscap{color:rgba(245,246,248,.74);font-weight:400;letter-spacing:.14em;}
/* «с ChiPro»: подписи не наезжают - направление над рамкой, статус под ней, «до уровня» под карточкой */
.l2pane.good .l2hb[style*="--x:24%"] em{inset-block-start:auto;inset-block-end:calc(100% + 8px);}
.l2pane.good .l2hb[style*="--y:84%"] em{inset-block-end:auto;inset-block-start:calc(100% + 8px);}
.l2pane.good .l2minicard{margin-block:34px 40px;}
.l2pane.good,.l2pane.good .l2minicard,.l2pane.good .hlin{overflow:visible !important;}

/* ================================================================================
   20.10 Ксюша, вариант D (по умолчанию): три включённых устройства в реальных пропорциях.
   Сзади большой ноутбук - живые графики монет; впереди телефон - листаются карточки
   «Возможность сейчас»; внизу слева планшет - полоски-ситуации и 83%.
   ================================================================================ */
.l2stage[data-hv="d"] .hvB{display:none;}
.l2stage[data-hv="d"] .hvA{display:block;}
.l2stage[data-hv="d"] .l2win{display:none;}
.l2tab{display:none;}
.l2stage[data-hv="d"] .l2tab{display:block;}
.lapgrid{display:none;}
.l2stage[data-hv="d"] .lapgrid{display:grid;}

/* ноутбук: крупный, экран 16:10 */
.l2stage[data-hv="d"] .l2lap{inset-inline:-10% -6%;inset-block-start:0;}
.l2stage[data-hv="d"] .l2lap .scr{position:relative;aspect-ratio:16/10;}
.l2stage[data-hv="d"] .l2lap .scr > img{opacity:.0;}
.l2stage[data-hv="d"] .lapgrid{position:absolute;inset:0;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px;padding:8px;
  background:#0B0C0F;}
.l2stage[data-hv="d"] .lapgrid:not(.on){background:transparent;}
.l2stage[data-hv="d"] .lapgrid:not(.on) ~ *{display:none;}
.l2stage[data-hv="d"] .l2lap .scr:has(.lapgrid:not(.on)) > img{opacity:1;}
.lapgrid .lt{position:relative;display:flex;flex-direction:column;border-radius:8px;padding:8px 10px 6px;
  background:#121418;border:1px solid rgba(255,255,255,.06);transition:opacity .35s ease;min-inline-size:0;}
.lapgrid .lt.sw{opacity:0;}
.ld2 .lapgrid .lt p{margin:0;display:flex;align-items:baseline;gap:8px;font:600 10px/1.2 var(--font-display);color:rgba(245,246,248,.6);}
.lapgrid .lt b{font:800 12px/1 var(--font-display);color:#F5F6F8;letter-spacing:.02em;}
.lapgrid .lt .px{font-variant-numeric:tabular-nums;}
.lapgrid .lt .ch{margin-inline-start:auto;font-variant-numeric:tabular-nums;}
.lapgrid .lt .ch.u{color:#4CC98C;} .lapgrid .lt .ch.d{color:#FF5D5D;}
.lapgrid .lt svg{flex:1 1 auto;inline-size:100%;block-size:100%;min-block-size:0;margin-block-start:4px;}
.lapgrid .lt svg path{stroke-width:1;vector-effect:non-scaling-stroke;}
.lapgrid .lt svg path.u{stroke:#4CC98C;fill:#4CC98C;} .lapgrid .lt svg path.d{stroke:#FF5D5D;fill:#FF5D5D;}

/* телефон: ближе к зрителю, справа; карточки листаются вбок */
.l2stage[data-hv="d"] .hvA .l2phone{inline-size:196px;inset-inline-end:-4%;inset-block-end:0;z-index:3;}
.l2stage[data-hv="d"] .l2maincard.swap{opacity:0;transform:translateX(-24px);}
.l2stage[data-hv="d"] .l2maincard{transition:opacity .3s ease,transform .45s cubic-bezier(.2,.7,.2,1);}

/* планшет: внизу слева, альбомный, ближе ноутбука */
.l2tab{position:absolute;z-index:2;inset-inline-start:-16%;inset-block-end:5%;inline-size:320px;aspect-ratio:1.45/1;padding:10px;
  border-radius:20px;background:linear-gradient(145deg,#3A3D44 0%,#17191D 30%,#26292E 70%,#111215 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 0 0 3px rgba(0,0,0,.55),0 40px 80px -24px rgba(0,0,0,.95);}
.l2tab .scr{position:relative;inline-size:100%;block-size:100%;border-radius:12px;overflow:hidden;
  background:radial-gradient(ellipse 80% 70% at 15% 0%,#3A0F0C 0%,#0B0C0F 70%);}
.l2tab .l2rise.tb{position:absolute;inset-inline:6% 6%;inset-block-end:6%;inline-size:88%;block-size:48%;}
.ld2 .l2tab .tnum{position:absolute;inset-inline-start:8%;inset-block-start:7%;margin:0;
  font:800 64px/.9 var(--font-display);letter-spacing:-.05em;color:#F5F6F8;font-variant-numeric:tabular-nums;}
.l2tab .tnum sup{font-size:.38em;font-weight:500;vertical-align:top;position:relative;top:.16em;margin-inline-start:2px;letter-spacing:0;}
.ld2 .l2tab .tcap{position:absolute;inset-inline-start:8%;inset-block-start:calc(7% + 62px);margin:0;max-inline-size:60%;
  font:600 10px/1.35 var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:rgba(245,246,248,.8);}

@media (max-width:1279px){
  .l2stage[data-hv="d"] .hvA .l2phone{inline-size:170px;}
  .l2tab{inline-size:270px;inset-inline-start:-10%;}
  .ld2 .l2tab .tnum{font-size:52px;} .ld2 .l2tab .tcap{inset-block-start:calc(7% + 50px);}
}
@media (max-width:767px){
  .l2stage[data-hv="d"] .l2lap{inset-inline:0 0;}
  .l2stage[data-hv="d"] .hvA .l2phone{inline-size:132px;inset-inline-end:0;border-radius:26px;padding:6px;}
  .l2tab{inline-size:200px;inset-inline-start:0;inset-block-end:3%;padding:7px;border-radius:14px;}
  .l2tab .scr{border-radius:9px;}
  .ld2 .l2tab .tnum{font-size:38px;} .ld2 .l2tab .tcap{inset-block-start:calc(7% + 36px);font-size:8px;letter-spacing:.1em;}
  .lapgrid .lt{padding:4px 6px 3px;} .ld2 .lapgrid .lt p{font-size:7px;gap:4px;} .lapgrid .lt b{font-size:8px;}
}
.l2tab{inset-inline-start:-4%;}
@media (max-width:1279px){ .l2tab{inset-inline-start:0;} }

/* ================================================================================
   20.10 Ксюша: 5 вариантов всего первого экрана (?hl=1..5). Тексты и кнопки те же.
   ================================================================================ */
.l2hbg,.hvC{display:none;}

/* --- 1. Студия: текст по центру, под ним три устройства в ряд на «полу» с отражением --- */
.l2hero[data-hl="1"] .wrap.in{grid-template-columns:1fr;gap:40px;justify-items:center;text-align:center;}
.l2hero[data-hl="1"] .l2htxt{display:flex;flex-direction:column;align-items:center;}
.l2hero[data-hl="1"] .l2rule{margin-inline:auto;}
.l2hero[data-hl="1"] .l2cta{justify-content:center;}
.ld2 .l2hero[data-hl="1"] .l2sub{max-inline-size:720px;}
.l2hero[data-hl="1"] .l2stage{inline-size:min(1000px,100%);min-block-size:520px;}
.l2hero[data-hl="1"] .l2lap{inset-inline:18% 18%;inset-block-start:0;}
.l2hero[data-hl="1"] .l2tab{inset-inline-start:0;inset-block-end:8%;inline-size:330px;}
.l2hero[data-hl="1"] .hvA .l2phone{inset-inline-end:4%;inset-block-end:4%;inline-size:190px;}
.l2hero[data-hl="1"] .l2stage::after{content:"";position:absolute;inset-inline:-10%;inset-block-end:-40px;block-size:120px;z-index:-1;
  background:radial-gradient(ellipse 50% 40% at 50% 30%,rgba(255,93,93,.18),transparent 70%);filter:blur(6px);}
.l2hero[data-hl="1"]{min-block-size:0;padding-block:120px 80px;}

/* --- 2. Каскад: телефон с живой карточкой впереди, две карточки веером позади, огромное 83% контуром --- */
.l2hero[data-hl="2"] .l2lap{display:none;}
.l2hero[data-hl="2"] .hvC{display:block;position:absolute;inset:0;}
.l2hero[data-hl="2"] .hvC .wm{position:absolute;inset-inline-end:-6%;inset-block-start:-4%;margin:0;
  font:800 300px/.8 var(--font-display);letter-spacing:-.07em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.14);}
.l2hero[data-hl="2"] .hvC img{position:absolute;inline-size:300px;block-size:auto;border-radius:18px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 80px -30px rgba(0,0,0,.9);}
.l2hero[data-hl="2"] .hvC .c3{inset-inline-start:2%;inset-block-start:16%;transform:rotate(-9deg);opacity:.45;filter:grayscale(.4);}
.l2hero[data-hl="2"] .hvC .c2{inset-inline-start:14%;inset-block-start:26%;transform:rotate(-4deg);opacity:.75;}
.l2hero[data-hl="2"] .hvA .l2phone{inset-inline-end:4%;inset-block-end:2%;inline-size:250px;transform:rotate(3deg);}
.l2hero[data-hl="2"] .l2win{inset-inline-start:0;inset-block-end:2%;}

/* --- 3. Живой рынок на весь фон: минутный график BTC, светящийся уровень; справа телефон и 83% --- */
.l2hero[data-hl="3"] .l2hbg,.l2hero[data-hl="5"] .l2hbg{display:block;position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.l2hero[data-hl="3"] .wrap.in,.l2hero[data-hl="5"] .wrap.in{position:relative;z-index:1;}
.l2hero[data-hl="3"] .l2hbg .mk{position:absolute;inset:0;inline-size:100%;block-size:100%;opacity:0;transition:opacity 1.2s ease;
  -webkit-mask:linear-gradient(90deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.6) 45%,#000 75%);mask:linear-gradient(90deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.6) 45%,#000 75%);}
.l2hero.mkon[data-hl="3"] .l2hbg .mk{opacity:.5;}
.l2hbg .mk path{stroke-width:1;vector-effect:non-scaling-stroke;}
.l2hbg .mk path.u{stroke:#4CC98C;fill:rgba(76,201,140,.6);} .l2hbg .mk path.d{stroke:#FF5D5D;fill:rgba(255,93,93,.6);}
.l2hbg .mk .lvl{stroke:#FF5D5D;stroke-width:2;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 6px rgba(255,93,93,.9));
  stroke-dasharray:6 8;animation:v3dash 2s linear infinite;}
@keyframes v3dash{to{stroke-dashoffset:-28;}}
.l2hero[data-hl="3"] .l2lap,.l2hero[data-hl="5"] .l2lap{display:none;}
.l2hero[data-hl="3"] .hvA .l2phone,.l2hero[data-hl="5"] .hvA .l2phone{inset-inline-end:6%;inset-block-end:4%;inline-size:250px;}
.l2hero[data-hl="3"] .l2win,.l2hero[data-hl="5"] .l2win{inset-inline-start:-4%;inset-block-start:14%;inset-block-end:auto;max-inline-size:none;padding:22px 28px 22px 22px;}
.l2hero[data-hl="3"] .l2win b,.l2hero[data-hl="5"] .l2win b{font-size:46px;}
.l2hero[data-hl="3"] .l2win .ring,.l2hero[data-hl="5"] .l2win .ring{inline-size:72px;block-size:72px;}
.l2hero[data-hl="3"] .l2win span,.l2hero[data-hl="5"] .l2win span{font-size:12px;}

/* --- 4. Кадр сториз: справа вертикальный кадр 9:16 с красным светом, полосками прогресса и 83% --- */
.l2hero[data-hl="4"] .l2stage{justify-self:center;inline-size:340px;min-block-size:0;aspect-ratio:9/16;border-radius:30px;overflow:hidden;
  background:radial-gradient(ellipse 80% 60% at 20% 30%,#B02C22 0%,#460C0A 45%,#050304 85%);
  box-shadow:0 0 0 1px rgba(255,255,255,.10),0 60px 120px -40px rgba(224,79,63,.6),0 40px 80px -30px rgba(0,0,0,.9);
  transform:perspective(1800px) rotateY(-10deg) rotateX(4deg);}
.l2hero[data-hl="4"] .l2stage::before{content:"";position:absolute;z-index:5;inset-inline:14px;inset-block-start:14px;block-size:3px;border-radius:2px;
  background:linear-gradient(90deg,#fff 0 31%,transparent 31% 34.5%,rgba(255,255,255,.35) 34.5% 65.5%,transparent 65.5% 69%,rgba(255,255,255,.35) 69% 100%);}
.l2hero[data-hl="4"] .l2stage::after{content:"";position:absolute;z-index:6;inset-inline-start:14px;inset-block-start:14px;block-size:3px;inline-size:0;
  border-radius:2px;background:#fff;animation:v3story 6s linear infinite;max-inline-size:calc((100% - 28px) * .31);}
@keyframes v3story{to{inline-size:calc((100% - 28px) * .31);}}
.l2hero[data-hl="4"] .hvB{inset:44px 24px 24px;}
.ld2 .l2hero[data-hl="4"] .l2bignum{font-size:120px;inset-block-start:40px;}
.l2hero[data-hl="4"] .l2win{inset-inline-start:24px !important;inset-block-start:200px !important;}
.l2hero[data-hl="4"] .l2win span{font-size:22px !important;}
.l2hero[data-hl="4"] .l2rise{block-size:46%;}

/* --- 5. Тысячи монет фоном: сетка тикеров, ChiPro по очереди находит ситуации; справа телефон и 83% --- */
.l2hero[data-hl="5"] .l2hbg .mosaic{position:absolute;inset:-20px;display:grid;grid-template-columns:repeat(16,1fr);gap:10px;
  -webkit-mask:radial-gradient(ellipse 70% 80% at 75% 50%,#000 0%,rgba(0,0,0,.35) 60%,transparent 90%);
  mask:radial-gradient(ellipse 70% 80% at 75% 50%,#000 0%,rgba(0,0,0,.35) 60%,transparent 90%);}
.l2hbg .mosaic span{display:grid;place-items:center;block-size:52px;border-radius:10px;font:600 11px/1 var(--font-display);
  letter-spacing:.08em;color:rgba(245,246,248,.28);background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05);
  transition:color .6s ease,background-color .6s ease,border-color .6s ease,box-shadow .6s ease;}
.l2hbg .mosaic span.hit{color:#fff;background:rgba(255,93,93,.22);border-color:rgba(255,93,93,.7);box-shadow:0 0 24px rgba(255,93,93,.5);}

@media (max-width:767px){
  .l2hero[data-hl="1"] .l2stage{min-block-size:380px;}
  .l2hero[data-hl="1"] .l2tab{inline-size:190px;} .l2hero[data-hl="1"] .hvA .l2phone{inline-size:120px;}
  .l2hero[data-hl="2"] .hvC .wm{font-size:170px;} .l2hero[data-hl="2"] .hvC img{inline-size:190px;}
  .l2hero[data-hl="2"] .hvA .l2phone,.l2hero[data-hl="3"] .hvA .l2phone,.l2hero[data-hl="5"] .hvA .l2phone{inline-size:170px;}
  .l2hero[data-hl="3"] .l2win,.l2hero[data-hl="5"] .l2win{inset-inline-start:0;inset-block-start:auto;inset-block-end:4%;padding:14px 18px 14px 14px;}
  .l2hero[data-hl="3"] .l2win b,.l2hero[data-hl="5"] .l2win b{font-size:30px;}
  .l2hero[data-hl="3"] .l2win .ring,.l2hero[data-hl="5"] .l2win .ring{inline-size:46px;block-size:46px;}
  .l2hero[data-hl="4"] .l2stage{inline-size:min(300px,86vw);transform:none;}
  .l2hbg .mosaic span{block-size:36px;font-size:8px;} .l2hero[data-hl="5"] .l2hbg .mosaic{grid-template-columns:repeat(7,1fr);}
}
.l2hero[data-hl="2"] .hvA{z-index:2;} .l2hero[data-hl="2"] .hvC{z-index:1;}
/* первый экран не даёт прокрутки вбок: устройства выходят за край колонки */
.l2hero{overflow-x:clip;}
/* шапка помещается на 1024-1439: меню и кнопки чуть плотнее */
@media (max-width:1439px){ .ld2 .hdr .in{gap:16px;} .ld2 .nav{gap:14px;} .ld2 .nav a{font-size:11px;letter-spacing:.1em;}
  .ld2 .hdr .btn{padding-inline:12px;font-size:11px;letter-spacing:.08em;} }
@media (max-width:1279px){ .ld2 .nav{gap:12px;} .ld2 .nav a{font-size:10.5px;letter-spacing:.06em;} }

/* 20.10 Ксюша: на сайте без синего («только красный свет на чёрном»). На лендинге фирменные синие переменные
   получают сдержанные значения: линии и метки - белые, подсветки - красные той же силы, плашки - тёмное стекло.
   Сами токены не меняются (brand_tokens.json), это решение для сайта; синие подсветки разделов в файле заменены
   на красные той же прозрачности. */
body.ld2.ld2{--brand-blue:#E04F3F;--brand-blue-light:#F5F6F8;--brand-blue-soft:rgba(224,79,63,.10);
  --brand-blue-surface:rgba(255,255,255,.04);--brand-blue-line:rgba(255,255,255,.18);--brand-blue-glow:rgba(224,79,63,.2);}
.ld2 .l2ring .cynode.blue circle{fill:#F5F6F8;}
.ld2 .l2sector.blue h3,.ld2 .l2sector.blue h4{color:#F5F6F8;}
/* только песочница: переключатель вариантов первого экрана */
.sbxvar{position:fixed;z-index:60;inset-inline:0;inset-block-end:16px;margin-inline:auto;inline-size:max-content;max-inline-size:calc(100% - 24px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;padding:8px 10px;border-radius:16px;
  background:rgba(14,15,18,.85);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,93,93,.5);
  box-shadow:0 20px 50px -10px rgba(0,0,0,.9);font:500 12px/1 var(--font-display);}
.sbxvar span{color:rgba(245,246,248,.7);padding-inline:4px;}
.sbxvar a{padding:8px 10px;border-radius:10px;color:#F5F6F8;text-decoration:none;border:1px solid rgba(255,255,255,.14);}
.sbxvar a.on{background:#E04F3F;border-color:#E04F3F;}
@media (max-width:767px){ .sbxvar{inset-block-end:84px;font-size:11px;} .sbxvar span{inline-size:100%;text-align:center;} }

/* ================================================================================
   20.10 Ксюша: выбран вариант 5 «монеты» (фон не трогаем). Новый телефон - последний iPhone Pro
   в реальных пропорциях, внутри настоящие снимки приложения листаются; плашка 83% - 4 варианта
   (?p=a рядом с анимацией, b рядом без анимации, c под телефоном, d крупное кольцо без плашки).
   ================================================================================ */
.l2iph{display:none;}
.l2hero[data-hl="5"] .hvA .l2phone{display:none;}
.l2hero[data-hl="5"] .l2iph{display:block;position:absolute;z-index:3;inset-inline-end:4%;inset-block-start:50%;
  translate:0 -50%;inline-size:276px;}
/* корпус: титановая кромка, тонкая ровная чёрная рамка, большие скругления как у iPhone 17 Pro */
.l2iph .frm{position:relative;padding:3px;border-radius:52px;
  background:linear-gradient(140deg,#8C8F96 0%,#3B3E44 14%,#9A9DA3 30%,#45484E 52%,#2A2C31 70%,#8A8D93 88%,#3A3C41 100%);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.95),0 30px 60px -30px rgba(0,0,0,.8),0 0 90px -20px rgba(224,79,63,.35);}
.l2iph .scr{position:relative;overflow:hidden;border-radius:49px;background:#000;padding:7px;}
.l2iph .scr::after{content:"";position:absolute;inset:7px;border-radius:43px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);background:linear-gradient(160deg,rgba(255,255,255,.07),transparent 35%);}
.l2iph .trk{display:flex;border-radius:43px;overflow:hidden;background:#0B0C0F;padding-block-start:38px;
  --i:0;}
.l2iph .scr{--w:100%;}
.l2iph .trk img{flex:0 0 100%;inline-size:100%;block-size:auto;display:block;
  transform:translateX(calc(var(--i) * -100%));transition:transform .9s cubic-bezier(.65,0,.35,1);}
/* у ленты перелистывания ширина - один экран, сдвигается сама лента */
.l2iph .scr > .trk{inline-size:100%;}
.l2iph .isl{position:absolute;z-index:2;inset-block-start:17px;inset-inline-start:50%;translate:-50% 0;
  inline-size:31%;block-size:25px;border-radius:14px;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);}
/* кнопки на корпусе */
.l2iph .kb{position:absolute;inline-size:3px;border-radius:2px;background:linear-gradient(90deg,#55585E,#8C8F96);}
.l2iph .k1{inset-inline-start:-2px;inset-block-start:17%;block-size:5%;}
.l2iph .k2{inset-inline-start:-2px;inset-block-start:25%;block-size:9%;}
.l2iph .k3{inset-inline-end:-2px;inset-block-start:23%;block-size:12%;}

/* плашка: базовый вид - стекло, вертикально: кольцо, цифра, подпись */
.l2hero[data-hl="5"] .l2win{flex-direction:column;align-items:flex-start;gap:14px;inset-block-start:50%;inset-block-end:auto;translate:0 -50%;
  inset-inline-start:auto;inset-inline-end:calc(4% + 276px + 22px);max-inline-size:none;inline-size:200px;padding:22px;}
.l2hero[data-hl="5"] .l2win.on{translate:0 -50%;}
.l2hero[data-hl="5"] .l2win .ring{inline-size:64px;block-size:64px;}
.l2hero[data-hl="5"] .l2win b{font-size:44px;}
.l2hero[data-hl="5"] .l2win span{font-size:11px;line-height:1.45;}
.l2win.still .ring .fg{transition:none;}
/* В: под телефоном, захватывает только нижний край корпуса */
.l2hero[data-hp="c"] .l2iph{inset-block-start:0;translate:0 0;inline-size:250px;inset-inline-end:8%;}
.l2hero[data-hp="c"] .l2win{flex-direction:row;align-items:center;inset-block-start:auto;inset-block-end:0;translate:0 0;
  inset-inline-end:calc(8% - 40px);inline-size:330px;padding:16px 22px 16px 16px;}
.l2hero[data-hp="c"] .l2win.on{translate:0 0;}
.l2hero[data-hp="c"] .l2win b{font-size:36px;}
.l2hero[data-hp="c"] .l2win .ring{inline-size:54px;block-size:54px;}
/* Г: без плашки - крупное кольцо, цифра внутри, подпись под ним */
.l2hero[data-hp="d"] .l2win{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;
  align-items:center;text-align:center;padding:0;inline-size:210px;}
.l2hero[data-hp="d"] .l2win .ring{inline-size:190px;block-size:190px;}
.l2hero[data-hp="d"] .l2win .ring circle{stroke-width:3.2;}
.l2hero[data-hp="d"] .l2win p{position:absolute;inset-block-start:0;inset-inline:0;block-size:190px;justify-content:center;align-items:center;}
.l2hero[data-hp="d"] .l2win b{font-size:54px;}
.l2hero[data-hp="d"] .l2win span{position:absolute;inset-block-start:calc(100% + 20px);inline-size:200px;font-size:12px;}

@media (max-width:1279px){
  .l2hero[data-hl="5"] .l2iph{inline-size:236px;inset-inline-end:2%;}
  .l2hero[data-hl="5"] .l2win{inset-inline-end:calc(2% + 236px + 16px);inline-size:180px;padding:18px;}
  .l2hero[data-hp="c"] .l2iph{inline-size:220px;}
  .l2hero[data-hp="c"] .l2win{inset-inline-end:0;inline-size:300px;}
  .l2hero[data-hp="d"] .l2win{inline-size:170px;padding:0;} .l2hero[data-hp="d"] .l2win .ring{inline-size:160px;block-size:160px;}
  .l2hero[data-hp="d"] .l2win p{block-size:160px;}
}
@media (max-width:1023px){ .l2hero[data-hl="5"] .l2stage{min-block-size:640px;} }
/* телефон по центру, плашка - под ним во всех вариантах */
@media (max-width:767px){
  .l2hero[data-hl="5"] .l2stage{min-block-size:560px;}
  .l2hero[data-hl="5"] .l2iph,.l2hero[data-hp="c"] .l2iph{inline-size:220px;inset-inline:0;margin-inline:auto;inset-block-start:0;translate:0 0;}
  .l2iph .frm{border-radius:42px;} .l2iph .scr{border-radius:39px;padding:6px;} .l2iph .trk{border-radius:34px;padding-block-start:30px;}
  .l2iph .scr::after{inset:6px;border-radius:34px;} .l2iph .isl{inset-block-start:13px;block-size:20px;}
  .l2hero[data-hl="5"] .l2win,.l2hero[data-hp="c"] .l2win{flex-direction:row;align-items:center;inset-block-start:auto;inset-block-end:0;translate:0 0;
    inset-inline:0;margin-inline:auto;inline-size:min(320px,100%);padding:14px 18px 14px 14px;}
  .l2hero[data-hl="5"] .l2win.on{translate:0 0;}
  .l2hero[data-hl="5"] .l2win b{font-size:30px;} .l2hero[data-hl="5"] .l2win .ring{inline-size:46px;block-size:46px;}
  .l2hero[data-hp="d"] .l2win{inline-size:auto;padding:0;}
  .l2hero[data-hp="d"] .l2win .ring{inline-size:46px;block-size:46px;} .l2hero[data-hp="d"] .l2win p{position:static;block-size:auto;}
  .l2hero[data-hp="d"] .l2win span{position:static;inline-size:auto;}
}

/* --- шапка: логотип - меню по центру - справа красная «Открыть приложение» и значки --- */
.ld2 .hdr .in{display:grid;grid-template-columns:1fr auto 1fr;}
.ld2 .hdr .brand{justify-self:start;}
.ld2 .hdr .nav{justify-self:center;}
.ld2 .hdr .act{justify-self:end;margin-inline-start:0;}
.ld2 .hdr .btn.pri.deskcta,.ld2 .hdr .btn.pri.mobcta{background:#E04F3F;border-color:#E04F3F;color:#fff;}
.ld2 .hdr .btn.pri.deskcta:hover,.ld2 .hdr .btn.pri.mobcta:hover{background:#E04F3F;filter:brightness(1.08);border-color:#E04F3F;}
/* без «Попробовать бесплатно» в шапке места хватает - «Открыть приложение» видна и на 1024-1279 */
@media (max-width:1279px) and (min-width:901px){ .ld2 .hdr .deskcta{display:inline-flex !important;} .ld2 .hdr .mobcta{display:none !important;} }
@media (max-width:900px){ .ld2 .hdr .in{display:flex;} }
/* без ChiPro - две колонки, читаются сверху вниз: 1-6 слева, 7-12 справа */
.l2vsxsteps.bad{display:block;columns:2;column-gap:26px;}
.l2vsxsteps.bad li{break-inside:avoid;}
.l2procsteps:not(.on){columns:2;}
/* с ChiPro - шаг крупно, под ним коротко, что делает ChiPro */
.l2vsxsteps.good li small,.l2procsteps.on li small{display:block;margin-block-start:6px;font:400 14px/1.45 var(--font-display);
  letter-spacing:0;color:rgba(245,246,248,.62);}
/* видео - экран iPhone в титановом корпусе */
.l2vsxframe.iph{aspect-ratio:9/19.5;padding:3px;border-radius:52px;
  background:linear-gradient(140deg,#8C8F96 0%,#3B3E44 14%,#9A9DA3 30%,#45484E 52%,#2A2C31 70%,#8A8D93 88%,#3A3C41 100%);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.95),0 0 90px -20px rgba(224,79,63,.4);}
.l2vsxframe.iph::before{content:"";position:absolute;inset:3px;border-radius:49px;background:#000;z-index:0;}
.l2vsxframe.iph video{inset:10px;inline-size:calc(100% - 20px);block-size:calc(100% - 20px);border-radius:42px;box-shadow:none;z-index:1;}
.l2vsxframe.iph::after{inset:10px;border-radius:42px;z-index:2;}
.l2vsxframe.iph .isl{position:absolute;z-index:3;inset-block-start:20px;inset-inline-start:50%;translate:-50% 0;inline-size:30%;block-size:24px;
  border-radius:14px;background:#000;}
.l2vsxframe.iph .l2vsxcard{z-index:4;}
@media (max-width:767px){ .l2vsxframe.iph{border-radius:40px;} .l2vsxframe.iph::before{border-radius:37px;}
  .l2vsxframe.iph video,.l2vsxframe.iph::after{inset:8px;inline-size:calc(100% - 16px);block-size:calc(100% - 16px);border-radius:32px;}
  .l2vsxframe.iph .isl{inset-block-start:15px;block-size:18px;}
  .l2vsxsteps.bad{column-gap:14px;} }
.l2vsxframe.iph{inline-size:300px;}
@media (max-width:1279px){ .l2vsxframe.iph{inline-size:260px;} }
@media (max-width:767px){ .l2vsxframe.iph{inline-size:min(220px,60vw);} }
.sbxvar{transition:opacity .3s ease;} .sbxvar.off{opacity:0;pointer-events:none;}

/* ================================================================================
   20.10 Ксюша, третий список правок.
   ================================================================================ */

/* --- фирменная скобка: согласованный вид (полоса 4/5px, свечение), меняется ТОЛЬКО направление:
       скругление снаружи, ровная сторона к тексту - как у обычной «(» --- */
.brk-b::before,.brk-o::before{inline-size:4px !important;border:0 !important;border-radius:4px 0 0 4px !important;filter:none !important;}
.brk-o::before{background:var(--orange) !important;box-shadow:0 0 18px color-mix(in srgb,var(--orange) 24%,transparent) !important;}
.brk-b::before{background:#FF5D5D !important;box-shadow:0 0 18px rgba(255,93,93,.24) !important;}
.brk-b.large::before,.brk-o.large::before{inline-size:5px !important;border-radius:5px 0 0 5px !important;}

/* --- «Открывайте график»: рамка ровно по содержимому, без подписей на карточке --- */
#how .l2hb em{display:none;}
#how .l2hb{border-radius:10px;}
#how .l2hb.on{transform:none;}
.l2anat .l2legend{gap:22px;}

/* --- «Работа ChiPro»: «Сообщает вам» стоит в одной линии с кружками и поднимается, когда до него доходит --- */
.l2chain{align-items:flex-end;}
.l2chain .l2you{padding-block-end:0;}
.l2chain .l2you.on{transform:translateY(-44px);}

/* --- уведомления: телефон - как iPhone первого экрана --- */
.l2nphone{inline-size:280px;aspect-ratio:9/19.5;padding:3px;border-radius:52px;
  background:linear-gradient(140deg,#8C8F96 0%,#3B3E44 14%,#9A9DA3 30%,#45484E 52%,#2A2C31 70%,#8A8D93 88%,#3A3C41 100%);}
.l2nphone::before{content:"";position:absolute;inset:3px;border-radius:49px;background:#000;}
.l2nphone .scr{position:absolute;inset:10px;inline-size:auto;block-size:auto;border-radius:42px;}
.l2nphone .isl{inset-block-start:20px;inline-size:31%;block-size:25px;border-radius:14px;z-index:2;}
.l2nstack{inset-inline:12px;inset-block-start:160px;}
.l2npush{padding:12px 14px;border-radius:20px;}
@media (max-width:767px){ .l2nphone{inline-size:240px;border-radius:44px;} .l2nphone::before{border-radius:41px;}
  .l2nphone .scr{inset:8px;border-radius:36px;} }

/* --- «Сколько ручной работы»: без ChiPro - графики цветные, просто тусклее; с ChiPro - рамки анимированные,
       уровень с бегущим бликом, как в сториз --- */
.l2pane.bad .scene{filter:none;opacity:.8;}
.l2pane.good .l2hb{border-radius:10px;border-color:rgba(255,93,93,.0);background:none;box-shadow:none;overflow:visible;}
.l2pane.good .l2hb::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--v3ang),rgba(255,93,93,.25) 0deg,#FF5D5D 60deg,#FFD2C6 90deg,#FF5D5D 120deg,rgba(255,93,93,.25) 200deg,rgba(255,93,93,.25) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:v3spin 3.2s linear infinite;}
.l2pane.good .l2hb::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 3px rgba(255,93,93,.10),0 0 22px rgba(255,93,93,.35);animation:v3glow 2.4s ease-in-out infinite;}
@keyframes v3glow{50%{box-shadow:0 0 0 5px rgba(255,93,93,.16),0 0 34px rgba(255,93,93,.6);}}
.l2pane.good .l2hb[data-lv]{overflow:hidden;border-radius:6px;}
.l2pane.good .l2hb[data-lv]::after{box-shadow:none;animation:none;
  background:linear-gradient(90deg,transparent 0%,rgba(255,210,198,.0) 35%,rgba(255,210,198,.85) 50%,rgba(255,210,198,0) 65%,transparent 100%);
  background-size:40% 100%;background-repeat:no-repeat;animation:v3sheen 2.6s ease-in-out infinite;}
@keyframes v3sheen{from{background-position:-40% 0;}to{background-position:140% 0;}}
.l2pane.good .l2hb[data-lv] em{overflow:visible;}
.l2pane.good .l2hb{transform:scale(1.18);opacity:0;transition:opacity .5s ease,transform .6s cubic-bezier(.2,.9,.25,1.15);}
.l2pane.good.in .l2hb{transform:none;opacity:1;}
.l2pane.good .l2hb:nth-of-type(1){transition-delay:.2s;} .l2pane.good .l2hb:nth-of-type(2){transition-delay:.55s;}
.l2pane.good .l2hb:nth-of-type(3){transition-delay:.9s;} .l2pane.good .l2hb:nth-of-type(4){transition-delay:1.25s;}
@media (prefers-reduced-motion: reduce){ .l2pane.good .l2hb::before,.l2pane.good .l2hb::after{animation:none;} }

/* --- без / с: номер стоит ровно напротив начала своего текста --- */
.l2vsxsteps li{display:grid;grid-template-columns:34px 1fr;align-items:baseline;padding-inline-start:0 !important;}
.l2vsxsteps li::before{position:static;inset:auto;}
.l2vsxsteps.good li{grid-template-columns:44px 1fr;}
.l2vsxsteps.good li > span{display:block;}
.l2vsxsteps.bad li::after{inset-inline-start:34px;}
/* раскрытие «Один рынок...»: кружок по центру своей строки, без колонок-обрывов линий */
.l2procsteps li{display:flex;align-items:center;gap:16px;padding:10px 0 !important;}
.l2procsteps li::before{position:static;flex:0 0 26px;}
.l2procsteps li+li::after{display:none;}
.l2procsteps:not(.on){columns:auto;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(6,auto);grid-auto-flow:column;column-gap:28px;}
.l2procsteps.on li{align-items:flex-start;}
.l2procsteps.on li::before{margin-block-start:4px;}
.l2procsteps.on li > span{display:block;}

/* --- тарифы: «Открыть Free» и «Оплатить Pro» на одной высоте --- */
.ld2 .l2plan .l2freenote{margin:14px 0 0;text-align:center;font-size:14px;line-height:20px;block-size:20px;color:var(--text-muted);}
.ld2 .l2plan .l2quiet{line-height:20px;block-size:20px;}

/* --- полоса пломб: самостоятельный блок во всю ширину, крупные стеклянные пломбы листаются --- */
.l2sealsx{padding-block:64px 70px;border:0;background:none;position:relative;}
.l2sealsx::before{content:"";position:absolute;inset:10px 0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(176,44,34,.22),transparent 70%);}
.l2sealsx .wrap{max-inline-size:none;padding-inline:0;}
.l2sealsx .l2spaced{text-align:center;margin-block-end:28px;padding-inline:16px;}
.l2sealsx .l2sealrow{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:none;padding:14px 32px 22px;scrollbar-width:none;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  cursor:grab;user-select:none;}
.l2sealsx .l2sealrow.drag{cursor:grabbing;}
.l2sealsx .l2sealrow::-webkit-scrollbar{display:none;}
.l2sealsx .l2sitem{flex:0 0 250px;gap:14px;padding:22px 22px 20px;border-radius:22px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 30px 60px -30px rgba(0,0,0,.9);position:relative;overflow:hidden;
  transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .4s ease,background-color .4s ease,box-shadow .5s ease;}
.l2sealsx .l2sitem::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.10) 48%,transparent 62%);transform:translateX(-120%);
  transition:transform .9s cubic-bezier(.2,.7,.2,1);}
.l2sealsx .l2sitem:hover{transform:translateY(-6px) scale(1.03);border-color:rgba(255,93,93,.55);background:rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 60px -24px rgba(224,79,63,.5);}
.l2sealsx .l2sitem:hover::after{transform:translateX(120%);}
.l2sealsx .l2sealtop b{font-size:20px;}
.l2sealsx .l2sealtop .pill{font-size:11px;padding:3px 8px;}
.l2sealsx .l2sitem code{font-size:13px;letter-spacing:.02em;}
.l2sealsx .l2sealbot{font-size:13px;gap:4px;}
@media (max-width:767px){ .l2sealsx{padding-block:44px 48px;} .l2sealsx .l2sitem{flex-basis:200px;padding:18px;}
  .l2sealsx .l2sealrow{padding-inline:16px;} .l2sealsx .l2sealtop b{font-size:17px;} }
/* картинки инструментов: объёмное стекло - мягкий свет внутри плитки, никаких тонких линий */
.l2partsx .l2pic{max-inline-size:170px;border-radius:32px;
  background:radial-gradient(ellipse 80% 70% at 30% 20%,rgba(255,255,255,.08),transparent 60%),rgba(255,255,255,.03);}
.l2pic svg{inline-size:76%;block-size:76%;filter:drop-shadow(0 14px 22px rgba(0,0,0,.55));}
.l2partsx .l2part:hover .l2pic svg{transform:translateY(-3px) scale(1.04);}
.l2pic svg{transition:transform .5s cubic-bezier(.2,.7,.2,1);}
.l2sealsx .l2sealrow{margin-inline:0 !important;}
.l2sealsx .l2sitem{display:flex !important;}

/* ================================================================================
   20.10 Ксюша: вариант 5 - телефон по высоте экрана ноутбука, внутри неподвижный главный экран
   и листающиеся карточки; плашка 83% - 5 вариантов формы и наезда (?p=1..5), полупрозрачное стекло.
   ================================================================================ */
.l2hero[data-hl="5"]{--pw:min(276px,calc((100svh - 240px) * .46));}
.l2hero[data-hl="5"] .l2iph{inline-size:var(--pw);inset-inline-end:4%;}
.l2iph .home{position:relative;margin-block-start:38px;border-radius:0 0 43px 43px;overflow:hidden;}
.l2iph .scr > .home{border-radius:0 0 calc(var(--pw) * .155) calc(var(--pw) * .155);}
.l2iph .scr{padding-block-start:0;}
.l2iph .scr::before{content:"";position:absolute;inset:7px 7px auto;block-size:46px;border-radius:43px 43px 0 0;background:#0B0C0F;}
.l2iph .home > img{display:block;inline-size:100%;block-size:auto;}
.l2iph .slot{position:absolute;left:4.65%;top:13.98%;inline-size:90.7%;block-size:43.86%;overflow:hidden;border-radius:7%;
  background:#0B0C0F;}
.l2iph .strk{position:absolute;inset:0;display:flex;--i:0;}
.l2iph .sl{flex:0 0 100%;block-size:100%;position:relative;transform:translateX(calc(var(--i) * -100%));
  transition:transform .8s cubic-bezier(.65,0,.35,1);}
.l2iph .sl > img{display:block;inline-size:100%;block-size:100%;object-fit:cover;}
.l2iph .pcwrap2{position:absolute;inset-inline-start:0;inset-block-start:0;inline-size:440px;transform-origin:0 0;}
.l2iph .pcwrap2 .pcard{margin:0;border-radius:28px;}
.l2iph .dots{position:absolute;left:0;right:0;top:58.4%;block-size:1.5%;display:flex;justify-content:center;align-items:center;gap:5px;background:#08090C;}
.l2iph .dots i{inline-size:6px;block-size:4px;border-radius:2px;background:rgba(255,255,255,.22);transition:inline-size .4s ease,background-color .4s ease;}
.l2iph .dots i.on{inline-size:16px;background:#E04F3F;}

/* плашка: полупрозрачное стекло во всех вариантах; кольцо и цифра набираются от нуля */
.l2hero[data-hl="5"] .l2win{background:rgba(14,15,18,.38);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 24px 60px -20px rgba(0,0,0,.8);
  inset:auto;translate:none;inline-size:auto;max-inline-size:none;}
.l2hero[data-hl="5"] .l2win.on{translate:none;}
/* 1. длинная полоса внизу: заходит на левый край телефона на пятую часть */
.l2hero[data-hp="1"] .l2win{flex-direction:row;align-items:center;gap:14px;padding:14px 22px 14px 14px;border-radius:20px;
  inset-block-end:16%;inset-inline-end:calc(4% + var(--pw) * .8);}
.l2hero[data-hp="1"] .l2win .ring{inline-size:46px;block-size:46px;} .l2hero[data-hp="1"] .l2win b{font-size:32px;}
.l2hero[data-hp="1"] .l2win p{flex-direction:row;align-items:center;gap:12px;} .l2hero[data-hp="1"] .l2win span{max-inline-size:120px;font-size:11px;}
/* 2. та же полоса вверху, у верхнего угла телефона */
.l2hero[data-hp="2"] .l2win{flex-direction:row;align-items:center;gap:14px;padding:14px 22px 14px 14px;border-radius:20px;
  inset-block-start:15%;inset-inline-end:calc(4% + var(--pw) * .82);}
.l2hero[data-hp="2"] .l2win .ring{inline-size:46px;block-size:46px;} .l2hero[data-hp="2"] .l2win b{font-size:32px;}
.l2hero[data-hp="2"] .l2win p{flex-direction:row;align-items:center;gap:12px;} .l2hero[data-hp="2"] .l2win span{max-inline-size:120px;font-size:11px;}
/* 3. узкая вертикальная - сбоку, на середине высоты, заходит на телефон чуть-чуть */
.l2hero[data-hp="3"] .l2win{flex-direction:column;align-items:flex-start;gap:12px;padding:18px;border-radius:22px;inline-size:150px;
  inset-block-start:38%;inset-inline-end:calc(4% + var(--pw) * .88);}
.l2hero[data-hp="3"] .l2win .ring{inline-size:52px;block-size:52px;} .l2hero[data-hp="3"] .l2win b{font-size:36px;}
.l2hero[data-hp="3"] .l2win span{font-size:10px;}
/* 4. как уведомление: широкая плашка опускается из-под «острова» на верх экрана и выходит за левый край */
.l2hero[data-hp="4"] .l2win{flex-direction:row;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:24px;
  inset-block-start:calc(50% - var(--pw) * 1.06 + 60px);inset-inline-end:calc(4% + var(--pw) * .1);inline-size:calc(var(--pw) * 1.25);
  background:rgba(30,32,38,.55);}
.l2hero[data-hp="4"] .l2win .ring{inline-size:40px;block-size:40px;} .l2hero[data-hp="4"] .l2win b{font-size:26px;}
.l2hero[data-hp="4"] .l2win p{flex-direction:row;align-items:center;gap:10px;} .l2hero[data-hp="4"] .l2win span{font-size:10px;}
/* 5. круглый стеклянный значок на нижнем левом углу телефона */
.l2hero[data-hp="5"] .l2win{inline-size:150px;block-size:150px;border-radius:50%;padding:0;display:grid;place-items:center;
  inset-block-end:calc(50% - var(--pw) * 1.06 + 10px);inset-inline-end:calc(4% + var(--pw) * .72);}
.l2hero[data-hp="5"] .l2win .ring{position:absolute;inset:10px;inline-size:auto;block-size:auto;}
.l2hero[data-hp="5"] .l2win .ring circle{stroke-width:3;}
.l2hero[data-hp="5"] .l2win p{align-items:center;text-align:center;gap:4px;}
.l2hero[data-hp="5"] .l2win b{font-size:34px;} .l2hero[data-hp="5"] .l2win span{font-size:8.5px;max-inline-size:90px;letter-spacing:.1em;}

/* переключатель - наверху под шапкой, ничего не закрывает */
.sbxvar{inset-block-end:auto;inset-block-start:76px;}
@media (max-width:767px){
  .l2hero[data-hl="5"]{--pw:220px;}
  .sbxvar{inset-block-start:auto;inset-block-end:84px;}
  .l2hero[data-hl="5"] .l2win{inset-inline:0 !important;inset-block-start:auto !important;inset-block-end:0 !important;margin-inline:auto;
    inline-size:min(320px,100%) !important;block-size:auto !important;border-radius:20px !important;flex-direction:row !important;
    display:flex !important;align-items:center;padding:14px 18px 14px 14px !important;}
  .l2hero[data-hl="5"] .l2win .ring{position:static !important;inline-size:44px !important;block-size:44px !important;}
  .l2hero[data-hl="5"] .l2win p{flex-direction:column !important;align-items:flex-start !important;text-align:start !important;}
  .l2hero[data-hl="5"] .l2win span{font-size:10px !important;max-inline-size:none !important;}
}
/* второй экран: видео как кадр фильма - во всю правую половину, без рамки, уходит в фон к тексту */
.l2vsx{min-block-size:min(860px,100svh);display:flex;align-items:center;}
.l2vsx .l2vsxin{position:static;inline-size:100%;}
.l2vsx .l2vsxtxt{position:relative;z-index:2;max-inline-size:620px;}
.l2vsx .l2vsxstage{position:absolute;z-index:0;inset-block:0;inset-inline-end:0;inline-size:56%;display:block;}
.l2vsx .l2vsxglow{display:none;}
.l2vsxframe.cine{position:absolute;inset:0;inline-size:auto;aspect-ratio:auto;border-radius:0;transform:none !important;margin:0;}
.l2vsxframe.cine video{border-radius:0;box-shadow:none;object-fit:cover;object-position:50% 30%;
  -webkit-mask:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 22%,#000 48%);mask:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 22%,#000 48%);}
.l2vsxframe.cine::after{border-radius:0;box-shadow:none;
  background:linear-gradient(180deg,var(--v3-light-0) 0%,transparent 16%,transparent 80%,var(--v3-light-0) 100%);}
.l2vsxframe.cine .l2vsxcard{inset-inline-end:8%;inset-block-end:12%;inline-size:min(330px,48%);}
@media (max-width:1023px){
  .l2vsx{display:block;min-block-size:0;}
  .l2vsx .l2vsxstage{position:relative;inset:auto;inline-size:auto;margin-inline:-16px;block-size:min(560px,120vw);order:5;margin-block:28px 6px;}
  .l2vsxframe.cine video{-webkit-mask:linear-gradient(180deg,transparent 0%,#000 18%,#000 82%,transparent 100%);
    mask:linear-gradient(180deg,transparent 0%,#000 18%,#000 82%,transparent 100%);}
  .l2vsxframe.cine .l2vsxcard{inset-inline-end:6%;inset-block-end:8%;inline-size:min(260px,62%);}
  .l2vsx .l2vsxtxt{max-inline-size:none;}
}
@media (max-width:1023px){ .l2vsx .l2vsxstage{justify-self:stretch !important;inline-size:calc(100% + 32px) !important;} .l2vsxframe.cine{inline-size:auto !important;} }
@media (max-width:1023px){ .l2vsxframe.cine .l2vsxcard{inline-size:min(220px,52%) !important;inset-inline-end:5% !important;inset-block-end:9% !important;} }
/* 20.10 Ксюша выбрала круглый значок: блок «цифра + подпись» стоит по центру круга, 83% крупно,
   подпись мелко под ней - по левому краю восьмёрки */
.l2hero[data-hp="5"] .l2win{display:flex !important;align-items:center;justify-content:center;inline-size:164px;block-size:164px;}
.l2hero[data-hp="5"] .l2win p{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;text-align:start;gap:6px;margin:0;}
.l2hero[data-hp="5"] .l2win b{display:block;font-size:46px;line-height:.9;letter-spacing:-.04em;}
.l2hero[data-hp="5"] .l2win span{display:block;font-size:9px;line-height:1.35;letter-spacing:.12em;max-inline-size:92px;text-align:start;padding-inline-start:2px;}
.l2hero[data-hp="5"] .l2win .ring{inset:9px;}
@media (max-width:767px){
  .l2hero[data-hp="5"] .l2win{inline-size:136px !important;block-size:136px !important;border-radius:50% !important;padding:0 !important;
    justify-content:center !important;inset-inline:auto 4% !important;inset-block-end:4% !important;margin:0 !important;}
  .l2hero[data-hp="5"] .l2win .ring{position:absolute !important;inset:8px !important;inline-size:auto !important;block-size:auto !important;}
  .l2hero[data-hp="5"] .l2win b{font-size:38px;} .l2hero[data-hp="5"] .l2win span{font-size:8px !important;max-inline-size:78px !important;}
}
/* 20.10 Ксюша: шапка во всю ширину - логотип у левого края, кнопка и значки у правого, меню ровно по центру экрана */
.ld2 .hdr .wrap,.ld2 .hdr .wrap.in{max-inline-size:none !important;padding-inline:clamp(16px,2.6vw,44px) !important;}
.ld2 .hdr .in{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) !important;column-gap:24px;}
.ld2 .nav{gap:20px;}
.ld2 .nav a{font-size:11.5px;letter-spacing:.12em;}
@media (max-width:1439px){ .ld2 .nav{gap:14px;} .ld2 .nav a{font-size:11px;letter-spacing:.09em;} }
@media (max-width:1279px){ .ld2 .nav{gap:11px;} .ld2 .nav a{font-size:10.5px;letter-spacing:.05em;} }
/* 20.10 воронка: кнопка старта во втором экране - под шагами «с ChiPro» */
.l2vsx .l2vsxcta{margin-block-start:36px;}
@media (max-width:1023px){ .l2vsx .l2vsxcta{order:7;inline-size:100%;margin-block-start:28px;} .l2vsx .l2vsxcta .l2btn{inline-size:100%;} }
/* финал: две кнопки рядом, на телефоне - друг под другом */
.l2final .l2cta.center{gap:12px;}
@media (max-width:767px){ .l2final .l2cta.center{flex-direction:column;align-items:stretch;} }
/* 20.10: Safari не растягивает svg по inset - кольцу задан точный размер и место, центр совпадает с кругом значка */
.l2hero[data-hp="5"] .l2win .ring{position:absolute !important;inset:auto !important;top:9px !important;left:9px !important;
  inline-size:calc(100% - 18px) !important;block-size:calc(100% - 18px) !important;transform-origin:50% 50%;}
.l2win .ring{overflow:visible;}
@media (max-width:767px){
  .l2hero[data-hp="5"] .l2win .ring{top:8px !important;left:8px !important;inline-size:calc(100% - 16px) !important;block-size:calc(100% - 16px) !important;}
}
/* подсказка к полосе пломб - тихая ссылка под подписью */
.ld2 .l2sealsx .l2spaced{margin-block-end:8px;}
.ld2 .l2sealhint{margin:0 0 22px;text-align:center;font-size:13px;line-height:1.4;}
.ld2 .l2sealhint a{color:rgba(245,246,248,.5);text-decoration:underline;text-decoration-color:rgba(255,93,93,.45);text-underline-offset:3px;transition:color .3s ease;}
.ld2 .l2sealhint a:hover{color:#F5F6F8;}

/* ================================================================================
   20.10 Ксюша: мобильная версия легче - меньше текста, картинок и списков.
   ================================================================================ */
.l2mmore{display:none;}
@media (max-width:767px){
  /* первый экран: кнопка под телефоном */
  .ld2 .l2hero .l2sub{order:5;margin-block-start:16px;}
  .l2hero .l2stage{order:10;}
  .l2hero .l2cta{order:20;margin-block-start:28px;}
  /* длинные списки: первые три пункта, остальное - по кнопке «Ещё» */
  .mmjs .mcut[data-mshow="3"] > :nth-child(n+4){display:none;}
  .mmjs .l2mmore{display:block;margin:14px auto 0;padding:10px 26px;border-radius:999px;cursor:pointer;
    border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#F5F6F8;
    font:500 12px/1.2 inherit;font-family:inherit;letter-spacing:.16em;text-transform:uppercase;}
  .l2plan .l2mmore{margin-block:6px 18px;}
  .l2faqlist + .l2mmore{margin-block:18px 8px;}
  /* «Работа ChiPro»: простой столбик по центру, «Сообщает вам» - четвёртым шагом той же линии */
  .l2chain{flex-direction:column;align-items:flex-start !important;inline-size:fit-content;max-inline-size:100%;margin-inline:auto;}
  .l2chain .l2sys{inline-size:100%;}
  .l2chain .l2syscap{text-align:center;}
  .l2chain .l2nodes{align-items:flex-start;gap:20px;}
  .l2chain .l2gap{display:block;inline-size:1px;block-size:20px;flex:0 0 20px;margin-inline-start:23.5px;background:rgba(255,255,255,.14);}
  .l2chain .l2you,.l2chain .l2you.brk-o{flex-direction:row;padding-inline-start:0;gap:16px;}
  .l2chain .l2you.brk-o::before{display:none !important;}
  .l2chain .l2you.on{transform:none;}
  .l2chain .l2nodes li.on i,.l2chain .l2you.on i{transform:none;}
  /* инструменты: только иконки по две в ряд, заголовок всплывает по нажатию, описания нет */
  #tools .l2tiltshot{display:none;}
  .l2parts.l2partsx{grid-template-columns:1fr 1fr;gap:14px;margin-block-start:28px;}
  .l2partsx .l2part{position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .l2partsx .l2part > p{display:none;}
  .l2partsx .l2pic{max-inline-size:none;}
  .ld2 .l2partsx .l2part h3{position:absolute;inset-inline:8px;inset-block-end:8px;margin:0;padding:8px 10px;border-radius:12px;
    background:rgba(14,15,18,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);
    font-size:13px;line-height:1.25;text-align:center;opacity:0;transform:translateY(6px);pointer-events:none;
    transition:opacity .3s ease,transform .3s ease;}
  .l2partsx .l2part.tap h3{opacity:1 !important;transform:none !important;}
  .l2partsx .l2part.tap .l2pic{border-color:rgba(255,93,93,.45);}
  /* лишние постоянные анимации на телефоне выключены */
  .l2plan.pro::after,.l2plan.in .l2per.best,.l2pane.good .l2hb::before,.l2pane.good .l2hb::after,
  .l2fun .fscan,.l2fun .fdots circle,.l2lap .scr img{animation:none !important;}
  /* финал: две кнопки компактно, по центру */
  .l2final .l2cta.center{flex-direction:column;align-items:center !important;inline-size:100%;margin-inline:auto;gap:10px;}
  .l2final .l2cta .l2btn{inline-size:min(320px,100%);min-block-size:48px;padding-block:12px;margin:0;}
}
@media (max-width:767px) and (hover:hover){ .l2partsx .l2part:hover h3{opacity:1;transform:none;} }
@media (max-width:767px){
  .l2final .l2cta .l2btn{inline-size:100%;max-inline-size:360px;white-space:nowrap;font-size:12px;letter-spacing:.1em;padding-inline:12px;}
}

/* 21.10 Ксюша: заголовки - прежний размер; каждая смысловая часть не больше двух строк.
   Строки рвутся только между неразрывными кусками (.nw), на телефоне без выравнивания строк по ширине:
   Safari с balance делал строки уже экрана, и часть заголовка уходила на третью строку. */
.nw{white-space:nowrap;}
@media (max-width:340px){ .nw{white-space:normal;} }
@media (max-width:767px){
  .ld2 .l2caps .ln,.ld2 .l2caps,.ld2 .l2head h2,.ld2 .l2head h3,.ld2 h1{text-wrap:wrap;}
  /* шапка: логотип слева, справа у края - меню, рядом с ним «Открыть» */
  .ld2 .hdr .in{grid-template-columns:1fr auto;}
  .ld2 .hdr .act{justify-self:end;gap:10px;margin-inline-start:auto;}
  .ld2 .hdr .burger{inline-size:46px;block-size:46px;padding:14px 11px;border-radius:14px;}
  .ld2 .hdr .burger span{block-size:2.5px;}
  body.menu-on .burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
  body.menu-on .burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
  /* инструменты: без плашек со значками - список пунктов с живыми маркерами */
  .l2parts.l2partsx{grid-template-columns:1fr;gap:0;margin-block-start:24px;}
  .l2partsx .l2pic{display:none;}
  .l2partsx .l2part{cursor:default;padding:16px 0;border-block-end:1px solid rgba(255,255,255,.08);}
  .l2partsx .l2part:last-child{border-block-end:0;}
  .ld2 .l2partsx .l2part h3{position:relative;inset:auto;opacity:1;transform:none;pointer-events:auto;background:none;border:0;
    -webkit-backdrop-filter:none;backdrop-filter:none;padding:0 0 0 40px;margin:0;border-radius:0;text-align:start;
    font-size:17px;line-height:1.35;min-block-size:26px;display:flex;align-items:center;}
  .ld2 .l2partsx .l2part h3::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:50%;inline-size:26px;block-size:26px;
    margin-block-start:-13px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%,#FF8A7A,#D9402F 70%);
    box-shadow:0 0 0 4px rgba(255,93,93,.14),0 0 16px rgba(255,93,93,.45);
    animation:v3mark 2.8s ease-in-out infinite;animation-delay:calc(var(--k,0) * .7s);}
  .ld2 .l2partsx .l2part h3::after{content:"";position:absolute;inset-inline-start:9px;inset-block-start:50%;inline-size:8px;block-size:4px;
    margin-block-start:-4px;border-inline-start:2px solid #fff;border-block-end:2px solid #fff;transform:rotate(-45deg);}
  .l2partsx .l2part:nth-child(2){--k:1;} .l2partsx .l2part:nth-child(3){--k:2;} .l2partsx .l2part:nth-child(4){--k:3;}
}
@keyframes v3mark{0%,70%,100%{box-shadow:0 0 0 4px rgba(255,93,93,.14),0 0 16px rgba(255,93,93,.45);}
  35%{box-shadow:0 0 0 8px rgba(255,93,93,.06),0 0 26px rgba(255,93,93,.8);}}
@media (prefers-reduced-motion: reduce){ .ld2 .l2partsx .l2part h3::before{animation:none;} }
@media (max-width:767px){
  /* 21.10 Ксюша: смысловая часть заголовка - с новой строки и не длиннее двух строк; обычные заголовки разделов -
     того же размера, что на первом экране и в финале (28px) */
  .ld2 .l2head h2 .sm{display:block;}
  .ld2 .l2head > h2:not(.l2caps){font-size:28px;line-height:1.06;}
}
@media (max-width:767px){ .ld2 #trust .l2head > h2{font-size:min(25px,calc((100vw - 32px) / 15));} }
@media (max-width:379px){ .ld2 .l2vsx h2.l2caps{font-size:26px;} }

/* ================================================================================
   21.10 Ксюша: у каждого экрана заголовок -> черта -> подзаголовок (заглавные тонкие), как на первом;
   заголовки внутри экрана - крупный текст, под ним тонкий, без черты; первый экран - заголовок крупнее,
   подзаголовок мельче; «Где пользоваться» на телефоне - маленькие схемки в строку с подписью.
   ================================================================================ */
.ld2 .l2head > .l2rule{margin-block:26px 22px;}
.ld2 .l2head.center > .l2rule{margin-inline:auto;}
.ld2 .l2head > .l2spaced{font-size:15px;letter-spacing:.2em;}
.ld2 .l2head.center > .l2spaced{text-align:center;}
.ld2 .l2head > .l2rule + p:not(.l2spaced),.ld2 .l2head > .l2spaced + p{
  font-family:var(--font-display);text-transform:uppercase;font-weight:400;font-size:14px;line-height:1.75;
  letter-spacing:.12em;color:rgba(245,246,248,.74);margin-block-start:18px;}
.ld2 .l2head > .l2rule + p:not(.l2spaced){margin-block-start:0;}
.ld2 .l2vsx .l2spaced{margin-block:0 26px;}
/* внутренние: метка под заголовком, отдельной тонкой строкой */
.ld2 h3 + .l2label{margin-block:16px 0;}
.ld2 h3 + .l2label + p{margin-block-start:20px;}
@media (max-width:1023px){ .l2vsx .l2spaced{order:3;} }
@media (max-width:767px){
  .ld2 .l2hero h1.l2caps{font-size:min(34px,calc((100vw - 32px) / 11));line-height:1.02;}
  .ld2 .l2hero .l2spaced,.ld2 .l2vsx .l2spaced,.ld2 .l2head > .l2spaced{font-size:12px;letter-spacing:.16em;line-height:1.6;}
  .ld2 .l2head > .l2rule{margin-block:18px 16px;}
  .ld2 .l2vsx .l2spaced{margin-block:0 20px;}
  .ld2 .l2head > .l2rule + p:not(.l2spaced),.ld2 .l2head > .l2spaced + p{font-size:13px;}
  /* устройства: схемки 84px слева, подпись справа */
  .l2devcomp{flex-direction:column !important;align-items:stretch !important;gap:12px !important;margin-block:28px 0 !important;}
  .l2dev,.l2dev.desk,.l2dev.phone,.l2dev.tg{display:grid;grid-template-columns:84px 1fr;align-items:center;gap:16px;
    inline-size:100% !important;margin:0 !important;padding:12px !important;border-radius:16px !important;
    background:rgba(255,255,255,.03) !important;border:1px solid rgba(255,255,255,.08) !important;box-shadow:none !important;}
  .l2dev figcaption{margin:0 !important;text-align:start;font-size:13px;line-height:1.45;color:var(--text-secondary);}
  .l2dev .l2devbody{inline-size:84px;padding:0 !important;justify-self:center;overflow:hidden;}
  .l2dev.desk .l2devbody{padding:3px !important;border-radius:5px 5px 0 0;background:#1C1E24;border:1px solid rgba(255,255,255,.18);
    position:relative;overflow:visible;margin-block-end:4px;}
  .l2dev.desk .l2devbody::after{content:"";position:absolute;inset-inline:-7px;inset-block-end:-5px;block-size:4px;
    border-radius:0 0 4px 4px;background:#3A3D44;}
  .l2dev.desk .l2devbody img{border-radius:2px;}
  .l2dev.phone .l2devbody{inline-size:34px;aspect-ratio:9/19;border-radius:7px;border:2px solid #4A4D54;background:#000;}
  .l2dev.phone .l2devbody img{inline-size:100%;block-size:100%;object-fit:cover;object-position:top;border-radius:5px;}
  .l2dev.tg .l2devbody{inline-size:84px;border-radius:8px;}
  .l2dev.tg .l2devbody > :not(img){zoom:.25;}
  .l2dev .l2devbody img.l2tgimg{border-radius:6px;}
}

/* ================================================================================
   21.10 Ксюша, второй круг: заголовки экранов крупнее, подзаголовки мельче и тоньше; первый экран телефона
   целиком в одном экране (до кнопки): описание слева, уменьшенный смартфон справа, значок 83% - на углу смартфона.
   ================================================================================ */
.ld2 .l2spaced{font-weight:400;}
.ld2 .l2head > .l2spaced,.ld2 .l2vsx .l2spaced{font-size:14px;letter-spacing:.18em;color:rgba(245,246,248,.72);}
.ld2 .l2head > .l2rule + p:not(.l2spaced),.ld2 .l2head > .l2spaced + p{font-size:13px;color:rgba(245,246,248,.66);}
@media (max-width:767px){
  .ld2 .l2head > h2:not(.l2caps){font-size:min(30px,calc((100vw - 32px) / 11.9));line-height:1.04;}
  .ld2 .l2head > h2.l2caps,.ld2 .l2vsxh,.ld2 .l2final h2.l2caps{font-size:min(30px,calc((100vw - 32px) / 11.9)) !important;line-height:1.04;}
  .ld2 #trust .l2head > h2{font-size:min(25px,calc((100vw - 32px) / 15));}
  .ld2 .l2hero .l2spaced,.ld2 .l2vsx .l2spaced,.ld2 .l2head > .l2spaced{font-size:11px;letter-spacing:.14em;line-height:1.6;}
  .ld2 .l2head > .l2rule + p:not(.l2spaced),.ld2 .l2head > .l2spaced + p,.ld2 .l2final .l2sub{font-size:12px;letter-spacing:.1em;}

  /* первый экран: всё до кнопки - в высоту экрана */
  .l2hero{padding-block-start:18px !important;padding-block-end:28px !important;}
  .l2hero .wrap.in{display:grid !important;grid-template-columns:1fr 128px;column-gap:14px;align-items:start;}
  .l2hero h1.l2caps,.l2hero .l2rule,.l2hero .l2spaced,.l2hero .l2cta{grid-column:1 / -1;}
  .l2hero h1.l2caps{grid-row:1;} .l2hero .l2rule{grid-row:2;} .l2hero .l2spaced{grid-row:3;}
  .ld2 .l2hero .l2sub{grid-row:4;grid-column:1;margin-block-start:14px !important;font-size:14px;line-height:1.5;}
  .l2hero .l2stage{grid-row:4;grid-column:2;margin-block-start:14px !important;min-block-size:0 !important;block-size:272px;position:relative;}
  .l2hero .l2cta{grid-row:5;margin-block-start:20px !important;}
  .l2hero .l2rule{margin-block:14px 10px !important;}
  .l2hero[data-hl="5"] .l2iph{zoom:.58;inset-inline:auto 0 !important;margin:0 !important;}
  .ld2 .l2hero[data-hl="5"] .l2win{inset-inline:auto calc(100% - 44px) !important;inset-block:auto 0 !important;inline-size:max-content !important;flex-wrap:nowrap !important;
    margin:0 !important;padding:8px 12px 8px 8px !important;gap:8px !important;border-radius:14px !important;}
  .ld2 .l2hero[data-hl="5"] .l2win{display:flex !important;flex-direction:row !important;align-items:center !important;block-size:auto !important;}
  .ld2 .l2hero[data-hl="5"] .l2win .ring{position:static !important;inset:auto !important;inline-size:34px !important;block-size:34px !important;flex:0 0 34px;}
  .ld2 .l2hero[data-hl="5"] .l2win p{align-items:flex-start !important;text-align:start !important;}
  .ld2 .l2hero[data-hl="5"] .l2win b{font-size:18px !important;}
  .ld2 .l2hero[data-hl="5"] .l2win span{font-size:9px !important;max-inline-size:84px !important;line-height:1.3;}
  .ld2 .l2hero[data-hl="5"] .l2win p{gap:2px !important;}
}

/* ================================================================================
   21.10 Ксюша, третий круг (первый экран телефона): кнопка - внизу экрана, без пустоты под ней;
   телефон по высоте свободного места (ширину --pw считает скрипт), плашка 83% крупнее, описание слева
   крупнее и по центру свободного места.
   ================================================================================ */
@media (max-width:767px){
  .ld2 .l2hero{min-block-size:calc(100svh - var(--l2hdr,73px)) !important;align-items:stretch !important;padding-block-end:20px !important;}
  .l2hero .wrap.in{inline-size:100%;flex:1 1 auto;grid-template-columns:1fr var(--pw,128px) !important;
    grid-template-rows:auto auto auto minmax(0,1fr) auto;column-gap:12px !important;}
  .ld2 .l2hero .l2sub{align-self:center;margin-block:16px 84px !important;font-size:15px !important;line-height:1.55 !important;}
  .l2hero .l2stage{align-self:stretch;block-size:auto !important;min-block-size:200px !important;margin-block-start:16px !important;}
  .l2hero[data-hl="5"] .l2iph{zoom:1 !important;inline-size:var(--pw,128px) !important;inset-block:0 auto !important;translate:0 0 !important;}
  .ld2 .l2hero[data-hl="5"] .l2win{inset-inline:auto calc(var(--pw,128px) - 56px) !important;inset-block:auto 6px !important;padding:10px 16px 10px 10px !important;gap:10px !important;border-radius:16px !important;}
  .ld2 .l2hero[data-hl="5"] .l2win .ring{inline-size:46px !important;block-size:46px !important;flex:0 0 46px;}
  .ld2 .l2hero[data-hl="5"] .l2win b{font-size:26px !important;}
  .ld2 .l2hero[data-hl="5"] .l2win span{font-size:10.5px !important;max-inline-size:100px !important;}
  .l2hero .l2cta{margin-block-start:18px !important;}
}
@media (max-width:767px) and (max-height:640px){
  .ld2 .l2hero .l2sub{font-size:13.5px !important;line-height:1.45 !important;margin-block:12px 78px !important;}
  .ld2 .l2hero h1.l2caps{margin-block-start:0 !important;}
}
/* 21.10: EN «Getting started is easy.» на 30px шире телефона 360-400 - страница расползалась вбок */
@media (max-width:767px){ html[lang="en"] .ld2 #start .l2head > h2{font-size:min(30px,calc((100vw - 32px) / 13.2)) !important;} }