/* palleto.ru — общие стили страниц в новом оформлении (октябрь 2026), из холста Claude Design.
   Стили конкретной страницы — в её <style>. Шрифты — /fonts/fonts.css. */
body{margin:0}
/* Palleto — главная, чистовая сборка 22.10.
   Одна система на всю страницу: Manrope (в Plus Jakarta Sans нет кириллицы — русский текст уходил в системный шрифт),
   одна шкала кеглей, один вид карточки, панели и подписи; ритм секций navy → светлый; цвет аудитории — только там,
   где он что-то значит (свой склад — индиго, фулфилмент — синий, продавец без склада — бирюзовый). */
:root{
  --navy:#0D1326; --navy-2:#141B33; --on-navy:#E8EBF5; --on-navy-2:rgba(232,235,245,.74); --on-navy-3:rgba(232,235,245,.62); --navy-line:rgba(232,235,245,.12);
  --ink:#0E1322; --ink-2:#3B4459; --ink-3:#5B6478; --line:#E3E6EF; --line-2:#EDEFF5; --bg:#F5F6FA; --surface:#FFFFFF;
  --indigo:#4F46E5; --indigo-600:#4338CA; --indigo-soft:#8B93FA; --indigo-50:#EEF0FF; --indigo-100:#E0E3FF;
  --own:#4F46E5; --own-50:#EEF0FF; --ff:#0369A1; --ff-50:#E6F2FA; --sel:#0F766E; --sel-50:#E3F4F1;
  --ok:#047857; --ok-50:#ECFDF5; --bad:#B91C1C; --bad-50:#FEF2F2; --warn:#B45309; --warn-50:#FFF7ED;
  --f:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:18px; --sec:104px;
  --sh-pop:0 28px 64px -28px rgba(14,19,34,.30),0 2px 6px rgba(14,19,34,.05);
  --c:var(--indigo); --c50:var(--indigo-50);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}
body{font:500 16px/1.6 var(--f);color:var(--ink);background:var(--surface);-webkit-font-smoothing:antialiased}
a{color:var(--indigo);text-decoration:none}
a:hover{color:var(--indigo-600)}
img{display:block;max-width:100%}
p{text-wrap:pretty}
::selection{background:#C7CCFF;color:var(--ink)}
/* фокус с клавиатуры виден на любом фоне; якоря не прячутся под липкой шапкой */
:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:6px}
.navy :focus-visible,.hd :focus-visible{outline-color:#fff}
[id]{scroll-margin-top:84px}
button{font:inherit;color:inherit}
a,button,summary,label{touch-action:manipulation}
.msi{font-family:'Material Symbols Outlined';font-weight:400;font-style:normal;font-size:20px;line-height:1;display:inline-block;letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;-webkit-font-feature-settings:'liga';font-feature-settings:'liga'}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.tnum{font-variant-numeric:tabular-nums}
.c-own{--c:var(--own);--c50:var(--own-50)}.c-ff{--c:var(--ff);--c50:var(--ff-50)}.c-sel{--c:var(--sel);--c50:var(--sel-50)}

/* ── кнопки и ссылки ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 26px;border-radius:12px;font:700 16px/1 var(--f);white-space:nowrap;border:1px solid transparent;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .16s ease-out,border-color .16s ease-out,color .16s ease-out,transform .16s ease-out}
.btn .msi{font-size:19px}
.btn:active{transform:scale(.97)}
.btn-primary,.btn-primary:hover{background:var(--indigo);color:#fff}
.btn-on-navy,.btn-on-navy:hover{color:var(--on-navy);border-color:rgba(232,235,245,.28)}
.btn-ghost,.btn-ghost:hover{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-sm{height:44px;padding:0 18px;font-size:14.5px;border-radius:11px}
@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--indigo-600);box-shadow:0 10px 24px -8px rgba(79,70,229,.6)}
  .btn-on-navy:hover{color:#fff;border-color:rgba(232,235,245,.6);background:rgba(232,235,245,.05)}
  .btn-ghost:hover{border-color:#C9CEE0;box-shadow:0 6px 16px -8px rgba(14,19,34,.25)}
}
.btn:active{box-shadow:none}
/* ссылки внутри текста — с подчёркиванием, чтобы отличались от кнопок и заголовков */
.faq p a,.foot a,.row .txt p a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(79,70,229,.35)}
.faq p a:hover,.foot a:hover,.row .txt p a:hover{text-decoration-color:currentColor}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.more{display:inline-flex;align-items:center;gap:6px;font:700 15px/1.2 var(--f);color:var(--c)}
.more .msi{font-size:19px;transition:transform .18s ease-out}
@media (hover:hover) and (pointer:fine){.more:hover{color:var(--c)}.more:hover .msi{transform:translateX(3px)}}

/* ── шапка ── */
.hd{position:sticky;top:0;z-index:50;background:rgba(13,19,38,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--navy-line)}
.hd-in{display:flex;align-items:center;gap:36px;height:68px}
.logo{display:flex;align-items:center;gap:10px;color:#fff;font:800 20px/1 var(--f);letter-spacing:-.02em}
.logo:hover{color:#fff}
.logo svg{width:26px;height:26px;flex:none}
.nav{display:flex;align-items:center;gap:28px}
.nav>a,.dd>a{display:inline-flex;align-items:center;gap:2px;padding:12px 0;color:var(--on-navy-2);font:600 14.5px/1 var(--f)}
.nav>a:hover,.dd>a:hover{color:#fff}
.dd{position:relative}
.dd>a .msi{font-size:18px;opacity:.7}
.dd-menu{position:absolute;top:100%;left:-14px;padding-top:6px;display:none;min-width:300px;z-index:60}
.dd:hover .dd-menu,.dd:focus-within .dd-menu{display:block}
.dd-menu>div{display:flex;flex-direction:column;gap:2px;padding:8px;background:var(--navy-2);border:1px solid var(--navy-line);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.4);animation:drop .18s ease-out}
.dd-menu a{display:block;padding:10px 12px;border-radius:10px;color:var(--on-navy);font:700 14.5px/1.25 var(--f)}
.dd-menu a:hover{color:#fff}
.dd-menu small{display:block;margin-top:4px;font:500 12.5px/1.35 var(--f);color:var(--on-navy-3)}
@media (hover:hover) and (pointer:fine){.dd-menu a:hover{background:rgba(232,235,245,.06)}}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.hd-r{margin-left:auto;display:flex;align-items:center;gap:20px}
.login{padding:14px 2px;color:var(--on-navy-2);font:600 14.5px/1 var(--f)}
.login:hover{color:#fff}
.burger{display:none;place-items:center;width:44px;height:44px;margin-right:-10px;background:none;border:0;border-radius:10px;color:#fff;cursor:pointer}
.burger .msi{font-size:26px}
.mnav{display:none}
.mnav.open{display:flex;flex-direction:column;padding:6px 24px 18px;border-top:1px solid var(--navy-line);animation:drop .2s ease-out}
.mnav a{padding:13px 0;border-bottom:1px solid var(--navy-line);color:var(--on-navy);font:700 16px/1.2 var(--f)}
.mnav a.sub{padding-left:16px;font-weight:600;font-size:15px;color:var(--on-navy-2)}
.mnav a:last-child{border-bottom:0}

/* ── общее для секций ── */
.sec{padding-block:var(--sec)}
.bg{background:var(--bg)}
.navy{position:relative;background:var(--navy);color:var(--on-navy);overflow:hidden}
.navy>.wrap{position:relative;z-index:1}
.label{display:flex;width:fit-content;align-items:center;gap:8px;margin-bottom:16px;font:700 12.5px/1.2 var(--f);letter-spacing:.09em;text-transform:uppercase;color:var(--c)}
.head{max-width:780px}
.head h2{font:800 44px/1.08 var(--f);letter-spacing:-.03em;text-wrap:balance}
.head>p{margin-top:16px;font:500 18px/1.55 var(--f);color:var(--ink-2);max-width:36em;text-wrap:pretty}
.head.split{max-width:none;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:end}
.head.split>p{margin-top:0}
.navy .label{color:var(--indigo-soft)}
.navy .head h2{color:#fff}
.navy .head>p{color:var(--on-navy-2)}

/* ── первый экран ── */
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 70% at 78% 40%,rgba(99,91,255,.30),transparent 70%),radial-gradient(40% 50% at 10% 110%,rgba(79,70,229,.22),transparent 70%)}
.hero::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;background:linear-gradient(rgba(232,235,245,.04) 1px,transparent 1px) 0 0/64px 64px,linear-gradient(90deg,rgba(232,235,245,.04) 1px,transparent 1px) 0 0/64px 64px;-webkit-mask-image:linear-gradient(#000,transparent 85%);mask-image:linear-gradient(#000,transparent 85%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,13fr);grid-template-areas:"k f" "h f" "l f" "c f" "p f";column-gap:56px;align-items:start;padding-block:72px 64px}
.kicker{grid-area:k;display:flex;align-items:center;gap:10px;font:700 12.5px/1.3 var(--f);letter-spacing:.09em;text-transform:uppercase;color:var(--indigo-soft)}
.kicker i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--indigo-soft);box-shadow:0 0 0 4px rgba(139,147,250,.18)}
.hero h1{grid-area:h;margin-top:20px;font:800 58px/1.03 var(--f);letter-spacing:-.035em;color:#fff;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--indigo-soft)}
.hero .lead{grid-area:l;margin-top:22px;font:500 18.5px/1.55 var(--f);color:var(--on-navy-2);max-width:34em;text-wrap:pretty}
.hero .ctas{grid-area:c;margin-top:32px}
.hero .kv{grid-area:p;margin-top:36px}
.kv{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;padding-top:22px;border-top:1px solid var(--navy-line)}
.kv>div{padding:0 22px;border-left:1px solid var(--navy-line)}
.kv>div:first-child{padding-left:0;border-left:0}
.kv dt{font:600 13px/1.3 var(--f);color:var(--on-navy-3)}
.kv dd{margin-top:6px;font:800 19px/1.15 var(--f);letter-spacing:-.015em;color:#fff;white-space:nowrap}
.kv dd small{font:600 13px/1 var(--f);letter-spacing:0;color:var(--on-navy-3)}
.film{grid-area:f;align-self:center;position:relative;border-radius:20px;overflow:hidden;aspect-ratio:16/9;background:#0A0F20;border:1px solid var(--navy-line);box-shadow:0 40px 90px -20px rgba(5,8,25,.8),0 0 0 1px rgba(139,147,250,.08),0 0 80px -10px rgba(99,91,255,.35)}
.film img{width:100%;height:100%;object-fit:cover}
.play{position:absolute;left:20px;bottom:20px;display:flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;border:0;border-radius:999px;cursor:pointer;background:rgba(255,255,255,.96);color:var(--ink);font:800 15px/1 var(--f);box-shadow:0 14px 34px rgba(0,0,0,.4);transition:transform .16s ease-out}
.play:active{transform:scale(.97)}
.play b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--indigo);color:#fff}
.play b .msi{font-size:26px}
.play small{font:600 13px/1 var(--f);color:var(--ink-3)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--navy-line)}
.fact{padding:26px 24px 28px;border-left:1px solid var(--navy-line)}
.fact:first-child{padding-left:0;border-left:0}
.fact b{display:block;font:800 34px/1 var(--f);letter-spacing:-.03em;color:#fff}
.fact span{display:block;margin-top:10px;max-width:18em;font:600 14px/1.4 var(--f);color:var(--on-navy-2)}
.marks{display:flex;align-items:center;flex-wrap:wrap;gap:10px 30px;padding:22px 0 30px;border-top:1px solid var(--navy-line)}
.marks .lbl{font:700 12px/1.3 var(--f);letter-spacing:.09em;text-transform:uppercase;color:var(--on-navy-3)}
.marks>span:not(.lbl){display:inline-flex;align-items:center;gap:9px;font:700 16px/1.2 var(--f);letter-spacing:-.01em;color:var(--on-navy-2)}
.marks .msi{font-size:20px;color:var(--indigo-soft)}

/* ── «Кто вы?»: три равноправные карточки, строки выровнены сеткой ── */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(6,auto);column-gap:20px;margin-top:44px}
.card{position:relative;display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0;align-content:start;padding:28px 28px 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);transition:border-color .18s ease-out,box-shadow .18s ease-out,transform .16s ease-out}
.card:active{transform:scale(.985)}
@media (hover:hover) and (pointer:fine){.card:hover{border-color:#C9CEE0;box-shadow:0 18px 40px -18px rgba(14,19,34,.25)}.card:hover .go .msi{transform:translateX(4px)}}
.top{display:flex;align-items:center;gap:12px}
.ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--c50);color:var(--c)}
.ic .msi{font-size:23px}
.tag{font:700 12.5px/1.2 var(--f);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.card h3{margin-top:22px;font:800 22px/1.25 var(--f);letter-spacing:-.02em;text-wrap:balance}
.card .desc{margin-top:10px;font:500 15px/1.55 var(--f);color:var(--ink-2);text-wrap:pretty}
.price{font:800 32px/1.05 var(--f);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price small{font:600 14px/1 var(--f);letter-spacing:0;color:var(--ink-3)}
.card .price{margin-top:22px}
.card .note{margin-top:10px;font:500 14px/1.5 var(--f);color:var(--ink-3);text-wrap:pretty}
.card .alt{display:block;margin-top:8px;color:var(--ink-2)}
.card .alt a{position:relative;z-index:1;color:var(--c);font-weight:700;white-space:nowrap}
.go{align-self:end;display:flex;align-items:center;gap:6px;margin-top:22px;padding:18px 0 22px;border-top:1px solid var(--line-2);font:800 15.5px/1.2 var(--f);color:var(--c)}
.go:hover{color:var(--c)}
.go::before{content:'';position:absolute;inset:0;border-radius:var(--r)}
.go .msi{font-size:20px;transition:transform .18s ease-out}

/* ── «Фулфилмент без хаоса»: вкладки шагов слева, кадр шага справа ── */
.path::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(50% 60% at 85% 55%,rgba(99,91,255,.22),transparent 70%)}
.tour{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center;margin-top:56px}
.steps{list-style:none;display:flex;flex-direction:column;gap:4px}
.step-b{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:16px;width:100%;padding:14px 18px;border:0;border-radius:14px;background:none;text-align:left;cursor:pointer;transition:background-color .18s ease-out}
.step-b .n{grid-row:1 / span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid rgba(232,235,245,.22);font:800 14px/1 var(--f);color:var(--on-navy-2);transition:background-color .18s ease-out,border-color .18s ease-out}
.step-b .t{display:flex;align-items:center;min-height:36px;font:800 18px/1.3 var(--f);letter-spacing:-.015em;color:var(--on-navy-2)}
.step-b .d{display:block;margin-top:4px;font:500 15px/1.55 var(--f);color:var(--on-navy-2);text-wrap:pretty}
.step:not(.on) .d{display:none}
.step.on .step-b{background:rgba(232,235,245,.06);box-shadow:inset 0 0 0 1px rgba(232,235,245,.1)}
.step.on .n{background:var(--indigo);border-color:var(--indigo);color:#fff}
.step.on .t{color:#fff}
@media (hover:hover) and (pointer:fine){.step:not(.on) .step-b:hover{background:rgba(232,235,245,.035)}.step:not(.on) .step-b:hover .t{color:#fff}}
.stage{display:grid}
.shot{position:relative;margin:0;border-radius:18px;overflow:hidden;aspect-ratio:3/2;background:#fff;border:1px solid var(--navy-line);box-shadow:0 40px 90px -24px rgba(5,8,25,.85)}
.shot img{width:100%;height:100%;object-fit:cover}
.shot.dark{background:#0E1228}
.stage .shot{grid-area:1 / 1;opacity:0;visibility:hidden;transition:opacity .3s ease-out,visibility .3s}
.stage .shot.on{opacity:1;visibility:visible}
.step .mini{display:none}
.hint{display:none}
.cap{position:absolute;left:16px;bottom:16px;max-width:calc(100% - 32px);display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;background:rgba(255,255,255,.97);color:var(--ink);font:800 15px/1.25 var(--f);box-shadow:0 12px 28px rgba(14,19,34,.28)}
.cap .msi{flex:none;font-size:19px;color:var(--indigo)}
.cap.bad{background:var(--bad-50);color:var(--bad)}.cap.bad .msi{color:#DC2626}
.cap.ok{background:var(--ok-50);color:var(--ok)}.cap.ok .msi{color:#059669}

/* ── рамка браузера и кадры кабинета ── */
.bframe{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--sh-pop)}
.bf-top{display:flex;align-items:center;gap:12px;height:40px;padding:0 14px;background:#F7F8FB;border-bottom:1px solid var(--line-2)}
.bf-dots{display:flex;gap:6px;flex:none}
.bf-dots i{width:10px;height:10px;border-radius:50%;background:#DDE1EA}
.bf-url{flex:0 1 340px;min-width:0;height:24px;margin:0 auto;display:flex;align-items:center;justify-content:safe center;gap:6px;padding:0 10px;overflow:hidden;white-space:nowrap;background:#EDEFF5;border-radius:7px;font:500 12px/1 var(--mono);color:var(--ink-3)}
.bf-url .msi{font-size:13px}
.bf-sp{flex:none;width:46px}
.media{position:relative;aspect-ratio:16/10;background:#F1F3F8}
.media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top}
.bframe.dark{border-color:rgba(232,235,245,.14);box-shadow:0 40px 90px -24px rgba(5,8,25,.85)}
.bframe.dark .bf-top{background:#1A2238;border-color:rgba(232,235,245,.08)}
.bframe.dark .bf-dots i{background:#334155}
.bframe.dark .bf-url{background:var(--navy);color:#94A3B8}
.bframe.dark .media{background:#121A30;aspect-ratio:3/2}
/* метка ролика — того же вида, что кнопка ролика на первом экране */
.playbadge{position:absolute;left:14px;bottom:14px;display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;background:rgba(255,255,255,.96);color:var(--ink);font:800 14px/1 var(--f);box-shadow:0 12px 28px rgba(0,0,0,.35)}
.playbadge b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--indigo);color:#fff}
.playbadge b .msi{font-size:20px}
.playbadge small{font:600 12.5px/1 var(--f);color:var(--ink-3)}

/* ── глава «Нет своего склада»: общий кадр, затем пять разворотов текст ↔ панель ── */
.chap-shot{position:relative;margin-top:56px}
.chap-shot .media{aspect-ratio:16/9}
.rows{display:flex;flex-direction:column;gap:112px;margin-top:112px}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:center}
.row.rev .txt{order:2}
.row h3{font:800 30px/1.15 var(--f);letter-spacing:-.022em;text-wrap:balance}
.row .txt>p{margin-top:16px;font:500 16.5px/1.65 var(--f);color:var(--ink-2);text-wrap:pretty}
.row .ctas{margin-top:28px}
.pts{list-style:none;display:grid;gap:12px;margin-top:24px}
.pts li{display:flex;align-items:center;gap:12px;font:700 15px/1.4 var(--f);color:var(--ink)}
.pts .msi{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--c50);color:var(--c);font-size:18px}

/* панели — один вид для сметы, кошелька и документов */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-pop);overflow:hidden}
.panel-h{display:flex;align-items:center;gap:10px;padding:16px 22px;border-bottom:1px solid var(--line-2);font:800 15px/1.3 var(--f)}
.panel-h>.msi{flex:none;font-size:21px;color:var(--indigo)}
.pill{margin-left:auto;flex:none;display:inline-flex;align-items:center;padding:6px 10px;border-radius:999px;font:700 11.5px/1 var(--f);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.pill.ok{background:var(--ok-50);color:var(--ok);box-shadow:inset 0 0 0 1px #A7F3D0}
.pill.warn{background:var(--warn-50);color:var(--warn);box-shadow:inset 0 0 0 1px #FED7AA}
.calc{padding:6px 22px 22px}
.calc-row{display:grid;grid-template-columns:minmax(0,1fr) 150px 60px;align-items:center;gap:16px;padding:13px 0}
.calc-row label{font:600 14.5px/1.35 var(--f);color:var(--ink-2)}
.calc-row output{font:800 16px/1 var(--f);text-align:right;font-variant-numeric:tabular-nums}
.calc-row input{width:100%;height:6px;border-radius:99px;cursor:pointer;-webkit-appearance:none;appearance:none;background:linear-gradient(var(--indigo),var(--indigo)) 0 0 / 40% 100% no-repeat var(--indigo-100);outline-offset:6px}
.calc-row input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;border:2.5px solid var(--indigo);box-shadow:0 2px 8px rgba(79,70,229,.35)}
.calc-row input::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:2.5px solid var(--indigo);box-shadow:0 2px 8px rgba(79,70,229,.35)}
.calc-out{margin-top:8px;padding:14px 18px;background:var(--bg);border-radius:14px}
.calc-line{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font:500 14px/1.4 var(--f);color:var(--ink-2)}
.calc-line b{font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.calc-total{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:10px;padding-top:12px;border-top:1px dashed #D5D9E4}
.calc-total span{font:800 15px/1 var(--f)}
.calc-total b{font:800 28px/1 var(--f);letter-spacing:-.02em;color:var(--indigo);white-space:nowrap;font-variant-numeric:tabular-nums}
.calc-note{margin-top:14px;font:500 12.5px/1.5 var(--f);color:var(--ink-3)}
.esc{padding:4px 22px}
.esc-step{display:flex;gap:16px;padding:18px 0}
.esc-step+.esc-step{border-top:1px solid var(--line-2)}
.esc-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--indigo-50);color:var(--indigo);font-size:22px}
.esc-ic.ok{background:var(--ok-50);color:var(--ok)}
.esc-step b{display:block;font:800 15.5px/1.35 var(--f)}
.esc-step .s{display:block;margin-top:2px;font:500 14px/1.5 var(--f);color:var(--ink-2)}
.esc-tag{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:6px 11px;border-radius:999px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font:500 12px/1 var(--mono);color:var(--ink-2);font-variant-numeric:tabular-nums}
.esc-tag.ok{background:var(--ok-50);box-shadow:inset 0 0 0 1px #A7F3D0;font:700 12.5px/1 var(--f);color:var(--ok)}
.esc-tag.ok i{width:7px;height:7px;border-radius:50%;background:currentColor}
.doc-rows{padding:6px 22px}
.doc-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:16px;padding:11px 0;border-bottom:1px solid var(--line-2);font:500 14px/1.45 var(--f)}
.doc-row:last-child{border-bottom:0}
.doc-row>span{color:var(--ink-3)}
.doc-row b{font-weight:700}
.doc-row code{font:500 12.5px/1.45 var(--mono);color:var(--indigo)}
.doc-foot{display:flex;align-items:flex-start;gap:10px;padding:14px 22px;background:var(--bg);font:500 13.5px/1.45 var(--f);color:var(--ink-2)}
.doc-foot .msi{flex:none;font-size:19px;color:var(--ok)}

/* ── тарифы сети ── */
.rates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:48px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.rate{padding:30px 28px 28px;border-left:1px solid var(--line-2)}
.rate:first-child{border-left:0}
.rate b{display:block;font:800 42px/1 var(--f);letter-spacing:-.03em;white-space:nowrap;font-variant-numeric:tabular-nums}
.rate b small{margin-right:2px;font:700 18px/1 var(--f);letter-spacing:0;color:var(--ink-3)}
.rate span{display:block;margin-top:12px;font:600 14.5px/1.4 var(--f);color:var(--ink-2)}
.rates-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px 40px;margin-top:28px}
.rates-foot p{max-width:620px;font:500 14px/1.55 var(--f);color:var(--ink-3);text-wrap:pretty}

/* ── подписка WMS ── */
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(6,auto);column-gap:20px;margin-top:48px}
.plan{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0;padding:30px 32px 28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.plan .label{margin-bottom:0}
.plan .label .msi{font-size:18px}
.plan h3{margin-top:12px;font:800 24px/1.2 var(--f);letter-spacing:-.02em}
.plan .price{margin-top:14px;font-size:36px}
.plan .sub{margin-top:8px;font:500 14.5px/1.5 var(--f);color:var(--ink-2);text-wrap:pretty}
.checks{list-style:none;display:grid;align-content:start;gap:12px;margin-top:22px;padding-top:22px;border-top:1px solid var(--line-2)}
.checks li{display:flex;align-items:flex-start;gap:10px;font:500 15px/1.5 var(--f);color:var(--ink-2)}
.checks .msi{flex:none;margin-top:1px;font-size:19px;color:var(--c)}
.checks b{font-weight:700;color:var(--ink)}
.plan-cta{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-top:28px}
.plan-cta .btn{flex:1 1 220px}
.api{display:flex;align-items:center;gap:16px;margin-top:20px;padding:18px 22px;border-radius:16px;background:var(--bg);border:1px solid var(--line-2);font:500 15px/1.5 var(--f);color:var(--ink-2);transition:border-color .18s ease-out}
.api:hover{color:var(--ink-2)}
.api b{font-weight:800;color:var(--ink)}
.api>.msi{flex:none;font-size:24px;color:var(--indigo)}
.api>.msi:last-child{margin-left:auto;font-size:20px;transition:transform .18s ease-out}
@media (hover:hover) and (pointer:fine){.api:hover{border-color:var(--indigo-100)}.api:hover>.msi:last-child{transform:translateX(3px)}}
.foot{margin-top:20px;font:500 14px/1.55 var(--f);color:var(--ink-3)}
.foot a{font-weight:700}

/* ── складам (navy): заголовок, текст и кадр приёмки, внизу — специфика РФ ── */
.wh{padding-bottom:0}
.wh::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(45% 55% at 82% 45%,rgba(99,91,255,.24),transparent 70%)}
.wh-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;margin-top:40px;padding-bottom:56px}
.wh .txt>p{font:500 17px/1.65 var(--f);color:var(--on-navy-2);text-wrap:pretty}
.pts.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;margin-top:28px}
.navy .pts li{color:var(--on-navy);font-size:14.5px}
.navy .pts .msi{background:rgba(139,147,250,.14);color:var(--indigo-soft)}
.wh-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px 40px;padding:28px 0 30px;border-top:1px solid var(--navy-line)}
.wh-bar .kv{padding-top:0;border-top:0}
.wh .ctas{gap:12px 24px}
.wh .more{--c:var(--indigo-soft)}
.wh .more:hover{color:#fff}

/* ── поддержка ── */
.sup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px}
.sup-c{padding:28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.sup-c b{display:block;margin-top:20px;font:800 19px/1.3 var(--f);letter-spacing:-.015em}
.sup-c p{margin-top:8px;font:500 15px/1.55 var(--f);color:var(--ink-2);text-wrap:pretty}

/* ── вопросы ── */
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:start}
.faq-grid .head{position:sticky;top:100px}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;gap:16px;padding:22px 0;cursor:pointer;list-style:none;font:700 17px/1.4 var(--f)}
.faq summary::-webkit-details-marker{display:none}
.faq summary .msi{margin-left:auto;flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--bg);color:var(--ink-3);font-size:20px;transition:transform .2s ease-out,background-color .2s ease-out,color .2s ease-out}
.faq details[open] summary .msi{transform:rotate(45deg);background:var(--indigo);color:#fff}
.faq details p{padding:0 56px 24px 0;font:500 16px/1.65 var(--f);color:var(--ink-2);text-wrap:pretty}
.faq details[open]>p{animation:drop .2s ease-out}
.faq a{font-weight:700}
@media (hover:hover) and (pointer:fine){.faq summary:hover .msi{background:var(--indigo-50);color:var(--indigo)}.faq details[open] summary:hover .msi{background:var(--indigo-600);color:#fff}}

/* ── финал ── */
.fin::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(640px 360px at 50% 120%,rgba(99,91,255,.36),transparent 70%)}
.fin::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;background:linear-gradient(rgba(232,235,245,.04) 1px,transparent 1px) 0 0/64px 64px,linear-gradient(90deg,rgba(232,235,245,.04) 1px,transparent 1px) 0 0/64px 64px;-webkit-mask-image:linear-gradient(transparent,#000 60%);mask-image:linear-gradient(transparent,#000 60%)}
.fin .wrap{text-align:center}
.fin h2{font:800 48px/1.08 var(--f);letter-spacing:-.03em;color:#fff;text-wrap:balance}
.fin p{max-width:640px;margin:18px auto 0;font:500 18.5px/1.55 var(--f);color:var(--on-navy-2);text-wrap:balance}
.fin .ctas{justify-content:center;margin-top:34px}

/* ── подвал ── */
.ft{padding:72px 0 36px;background:var(--bg);border-top:1px solid var(--line-2)}
.ft-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px}
.ft .logo{color:var(--ink)}
.ft-tag{max-width:300px;margin-top:16px;font:500 14.5px/1.6 var(--f);color:var(--ink-2)}
.ft-contacts{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.ft-contacts a{display:inline-flex;align-items:flex-start;gap:10px;font:600 14.5px/1.4 var(--f);color:var(--ink-2)}
.ft-contacts .msi{flex:none;margin-top:1px;font-size:18px;color:var(--indigo)}
.ft h4{margin-bottom:12px;font:700 12.5px/1.2 var(--f);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.ft-col a{display:block;padding:7px 0;font:600 14.5px/1.3 var(--f);color:var(--ink-2)}
.ft a:hover{color:var(--indigo)}
.ft-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font:500 13.5px/1.5 var(--f);color:var(--ink-3)}
.ft-bot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.ft-bot a{color:var(--ink-2)}

/* ── вариант 2 (короче): первый экран без строки цен и ряда фактов — карточки «Кто вы?» с ценами поднимаются
   к первому экрану; все цены — в одном разделе по тем же аудиториям; глава продавцу короче; в финале одна главная кнопка ── */
.hero-grid{grid-template-areas:"k f" "h f" "l f" "c f";padding-block:44px 40px}
.hero h1{font-size:52px}
.hero .marks{padding:18px 0 24px}
#kto{padding-top:40px}
#kto .head{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 18px;max-width:none}
#kto .head>p{margin-top:0}
#kto .cards{margin-top:24px}
.cards{grid-template-rows:repeat(4,auto)}
.card{grid-row:span 4;padding:24px 24px 0}
.card h3{margin-top:18px;font-size:20px}
.card .desc{margin-top:8px}
.card .go{margin-top:18px;padding:16px 0 18px}
.c-wh .more,.c-wh .alt a{color:var(--indigo)}
/* поддержка — без рамок: три колонки с линией сверху, меньше карточек на странице */
.sup{gap:32px 40px}
.sup-c{padding:24px 0 0;background:none;border:0;border-top:1px solid var(--line);border-radius:0}
#set .rows{margin-top:72px}
.wh .txt .ctas{margin-top:32px}
.c-wh{--c:#475569;--c50:#EEF1F5}
.plans.four{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:16px}
.four .plan{padding:24px 22px 22px}
.four .plan h3{margin-top:10px;font-size:19px;line-height:1.25;text-wrap:balance}
.four .plan .price{margin-top:12px;font-size:28px}
.four .plan .sub{font-size:13.5px}
.four .checks{gap:10px;margin-top:18px;padding-top:18px}
.four .checks li{font-size:14px}
.four .checks .msi{font-size:18px}
.rl{list-style:none;display:grid;align-content:start;gap:10px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line-2)}
.rl li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:500 14px/1.4 var(--f);color:var(--ink-2)}
.rl b{flex:none;font-weight:800;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.four .plan-cta{flex-direction:column;align-items:stretch;gap:10px;margin-top:22px}
.four .plan-cta .btn{flex:none;height:48px;padding:0 16px;font-size:15px}
.four .plan-cta .more{justify-content:center;font-size:14.5px}
.faq summary .msi{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.faq details[open] summary .msi{box-shadow:none}
.demo{display:inline-flex;align-items:center;gap:8px;margin-top:20px;padding:10px 4px;font:700 15px/1.2 var(--f);color:var(--indigo-soft)}
.demo:hover{color:#fff}
.demo .msi{font-size:20px}

/* ── адаптив ── */
@media (max-width:1100px){
  .hero h1{font-size:50px}
  .hero-grid,.head.split,.tour,.wh-grid,.faq-grid{column-gap:40px}
  .row{gap:48px}
  .nav{gap:20px}
  .hd-in{gap:28px}
  .kv>div{padding:0 16px}
  .kv dd{font-size:17.5px}
  .marks{column-gap:24px}
}
@media (max-width:960px){
  :root{--sec:80px}
  .nav,.login{display:none}
  .burger{display:grid}
  .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"k" "h" "f" "l" "c" "p";padding-block:48px 40px}
  .film{margin-top:28px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact:nth-child(3){padding-left:0;border-left:0}
  .fact:nth-child(n+3){border-top:1px solid var(--navy-line)}
  .head.split{grid-template-columns:minmax(0,1fr);gap:16px}
  .cards{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:14px}
  .card{grid-row:auto;grid-template-rows:none;display:flex;flex-direction:column;padding-bottom:0}
  .go{align-self:stretch}
  .tour{grid-template-columns:minmax(0,1fr);margin-top:36px}
  .stage{display:none}
  .steps{flex-direction:row;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-24px;padding:0 24px 6px;scroll-padding-inline:24px;scrollbar-width:none}
  .steps::-webkit-scrollbar{display:none}
  .step{flex:0 0 min(80%,420px);scroll-snap-align:start;display:flex;flex-direction:column;background:var(--navy-2);border:1px solid var(--navy-line);border-radius:18px;overflow:hidden}
  .step .mini{display:block;order:-1;border:0;border-radius:0;box-shadow:none}
  .step .step-b,.step.on .step-b{padding:18px 18px 20px;background:none;box-shadow:none;cursor:default}
  .step .n,.step.on .n{background:var(--indigo);border-color:var(--indigo);color:#fff}
  .step .t{color:#fff}
  .step:not(.on) .d{display:block}
  .hint{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;font:600 13.5px/1 var(--f);color:var(--on-navy-3)}
  .hint .msi{font-size:18px}
  .rows{gap:80px;margin-top:80px}
  .row{grid-template-columns:minmax(0,1fr);gap:32px}
  .row.rev .txt{order:0}
  .rates{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rate:nth-child(3){border-left:0}
  .rate:nth-child(n+3){border-top:1px solid var(--line-2)}
  .plans{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:14px}
  .plan{grid-row:auto;grid-template-rows:none;display:flex;flex-direction:column}
  .wh-grid{grid-template-columns:minmax(0,1fr);gap:40px;padding-bottom:48px}
  .sup{grid-template-columns:minmax(0,1fr);gap:14px}
  .faq-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .faq-grid .head{position:static}
  .ft-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft-grid>div:first-child{grid-column:1 / -1}
  .ft-col:last-child{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
  .ft-col:last-child h4{grid-column:1 / -1}
}
@media (max-width:640px){
  :root{--sec:56px}
  .wrap,.mnav.open{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .hd-in{gap:12px;height:60px}
  .hd-r{gap:8px}
  .hd-r .btn-sm{padding:0 14px;font-size:14px}
  .logo{font-size:19px}
  .kicker .m-x{display:none}
  .hero-grid{padding-block:28px 32px}
  .hero h1{margin-top:14px;font-size:36px;letter-spacing:-.03em}
  .film{margin-top:20px;border-radius:14px}
  .play{left:12px;bottom:12px;gap:9px;padding:6px 14px 6px 6px;font-size:14px}
  .play b{width:34px;height:34px}
  .play b .msi{font-size:23px}
  .hero .lead{margin-top:18px;font-size:16.5px}
  .hero .ctas{margin-top:24px}
  .hero .ctas .btn{flex:1 1 100%}
  .hero .kv{margin-top:26px}
  .kv{grid-template-columns:minmax(0,1fr);gap:10px;padding-top:18px}
  .kv>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:0;border-left:0}
  .kv dt{font-size:14px}
  .kv dd{margin-top:0;font-size:17px}
  .fact{padding:18px 12px 20px 0}
  .fact:nth-child(even){padding-left:16px}
  .fact b{font-size:27px}
  .fact span{margin-top:8px;font-size:13px}
  .marks{gap:8px 18px;padding:18px 0 22px}
  .marks .lbl{flex-basis:100%}
  .marks>span:not(.lbl){font-size:14.5px}
  .head h2{font-size:30px;letter-spacing:-.025em}
  .head>p{margin-top:12px;font-size:16px}
  .m-hide{display:none}
  .cards{margin-top:24px;row-gap:10px}
  .card{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:14px;row-gap:4px;align-items:start;padding:16px 16px 0;border-radius:16px}
  .card .top{display:contents}
  .card .ic{grid-row:1 / span 4;width:38px;height:38px;border-radius:11px}
  .card .ic .msi{font-size:21px}
  .card>*:not(.top),.card .tag{grid-column:2}
  .card .tag{font-size:12px}
  .card h3{margin-top:0;font-size:17.5px}
  .card .desc,.card .m-x{display:none}
  .card .price{margin-top:4px;font-size:22px}
  .card .price small{font-size:13px}
  .card .note{margin-top:2px;font-size:13.5px}
  .card .alt{margin-top:4px}
  .go{grid-column:1 / -1 !important;margin-top:12px;padding:13px 0 15px;font-size:15px}
  .go::before{border-radius:16px}
  .tour{margin-top:28px}
  .steps{margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px}
  .step{flex-basis:86%}
  .step-b .t{font-size:17px}
  .step-b .d{font-size:14.5px}
  .cap{left:10px;bottom:10px;max-width:calc(100% - 20px);gap:6px;padding:7px 11px;font-size:13px;border-radius:10px}
  .cap .msi{font-size:16px}
  .chap-shot{margin-top:32px}
  .chap-shot .media{aspect-ratio:4/3}
  .bf-top{height:34px;padding:0 10px}
  .bf-dots i{width:8px;height:8px}
  .bf-url{font-size:11px}
  .bf-sp{display:none}
  .rows{gap:64px;margin-top:64px}
  .row{gap:24px}
  .row h3{font-size:24px}
  .row .txt>p{font-size:15.5px}
  .pts{gap:10px;margin-top:20px}
  .pts li{font-size:14.5px}
  .panel-h{padding:14px 16px}
  .calc{padding:4px 16px 16px}
  .calc-row{grid-template-columns:minmax(0,1fr) 92px 50px;gap:12px}
  .calc-row label{font-size:13.5px}
  .calc-total b{font-size:24px}
  .esc{padding:2px 16px}
  .esc-step{gap:12px;padding:16px 0}
  .esc-ic{width:38px;height:38px;border-radius:11px;font-size:20px}
  .doc-rows{padding:4px 16px}
  .doc-row{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:12px;font-size:13.5px}
  .doc-foot{padding:12px 16px;font-size:13px}
  .rates{margin-top:28px}
  .rate{padding:20px 16px}
  .rate b{font-size:30px}
  .rate b small{font-size:14px}
  .rate span{margin-top:8px;font-size:13px}
  .rates-foot{margin-top:20px}
  .rates-foot p{font-size:13px}
  .rates-foot .ctas .btn{flex:1 1 auto}
  .plans{margin-top:24px;row-gap:12px}
  .plan{padding:20px 18px 18px;border-radius:16px}
  .plan h3{margin-top:8px;font-size:20px}
  .plan .price{margin-top:8px;font-size:27px}
  .plan .sub{font-size:13.5px}
  .checks{gap:8px;margin-top:14px;padding-top:14px}
  .checks li{font-size:14px}
  .plans:not(.four) .checks li:nth-child(n+3){display:none}
  .plan-cta{margin-top:16px;justify-content:center;gap:12px}
  .plan-cta .btn{flex:1 1 100%;height:48px;font-size:15px}
  .plan-cta .more{font-size:14.5px}
  .api{align-items:flex-start;padding:14px 16px;font-size:14px}
  .api>.msi:last-child{display:none}
  .foot{font-size:13px}
  .wh-grid{margin-top:24px;gap:32px;padding-bottom:36px}
  .wh .txt>p{font-size:15.5px}
  .pts.two{grid-template-columns:minmax(0,1fr);gap:10px;margin-top:20px}
  .wh-bar{flex-direction:column;align-items:stretch;gap:24px;padding:24px 0}
  .wh .ctas .btn{flex:1 1 100%}
  .wh .marks>span:not(.lbl){flex:1 1 40%}
  .sup{margin-top:24px;gap:10px}
  .sup-c{display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:14px;padding:18px 16px;border-radius:16px}
  .sup-c .ic{grid-row:1 / span 2;width:38px;height:38px;border-radius:11px}
  .sup-c .ic .msi{font-size:21px}
  .sup-c b{margin-top:6px;font-size:17px}
  .sup-c p{margin-top:4px;font-size:14px}
  .faq summary{padding:18px 0;font-size:16px}
  .faq summary .msi{width:30px;height:30px}
  .faq details p{padding:0 0 20px;font-size:15px}
  .fin h2{font-size:32px}
  .fin p{font-size:16.5px}
  .fin .ctas .btn{flex:1 1 100%}
  .ft{padding:52px 0 28px}
  .ft-grid{gap:28px 16px}
  .ft-col a{padding:11px 0}
  .ft-contacts{gap:4px}
  .ft-contacts a{padding:7px 0}
  .ft-bot{margin-top:36px}
}
@media (max-width:360px){
  .logo{font-size:17px}
  .logo svg{width:22px;height:22px}
  .hd-r .btn-sm{padding:0 10px;font-size:13px}
  .hero h1{font-size:32px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .btn:active,.card:active,.play:active{transform:none}
}
/* вариант 2: сетка тарифов — 4 колонки, 2×2 на планшете, столбик на телефоне */
@media (max-width:1100px){.plans.four{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(12,auto);row-gap:16px}}
@media (max-width:960px){.plans.four{grid-template-rows:none;row-gap:14px}}
@media (max-width:640px){
  .plans.four{grid-template-columns:minmax(0,1fr);row-gap:12px}
  .four .plan{padding:20px 18px 18px}
  .four .plan .price{font-size:26px}
  .four .plan-cta{margin-top:16px}
  #kto{padding-top:40px}
  .sup{gap:0}
  .sup-c{padding:18px 0 0;border-radius:0}
  .sup-c:first-child{border-top:0;padding-top:0}
  .card .desc{display:block;margin-top:2px;font-size:13.5px;line-height:1.45}
  .card .go{margin-top:12px}
  .demo{margin-top:14px}
}
.nw{white-space:nowrap}
/* неразрывный кусок (типограф): без своего бокса — во flex-строке не становится отдельным элементом с зазорами и не ловит правила вида «.card span{display:block}» */
span.nw{display:contents!important}
h3,.step .t{text-wrap:balance}
p,li,dd{text-wrap:pretty}
.shot img{object-position:left top}
/* ── общее для продуктовых страниц ── */
.hero .kv{margin-top:34px}
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"k f" "h f" "l f" "c f" "p f" "x f";padding-block:56px 48px}
.hero .alt{grid-area:x;margin-top:22px;font:500 15px/1.5 var(--f);color:var(--on-navy-3)}
.hero .alt a{color:var(--indigo-soft);font-weight:700;white-space:nowrap}
.hero .alt a:hover{color:#fff}
.hero .marks{padding:18px 0 24px}
.hero h1{font-size:52px}
.film{display:flex;flex-direction:column}
.film .bframe{flex:1;display:flex;flex-direction:column;min-height:0;border-radius:0;border:0;box-shadow:none}
.film .bf-top{flex:none}
.film .media{flex:1;min-height:0;aspect-ratio:auto}
/* группы «что входит» — без карточек, линия сверху */
.grps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 40px;margin-top:44px}
.grp{padding-top:22px;border-top:1px solid var(--line)}
.grp>b{display:flex;align-items:center;gap:10px;font:800 17px/1.3 var(--f);letter-spacing:-.01em}
.grp>b .msi{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--c50);color:var(--c);font-size:20px}
.grp ul{list-style:none;display:grid;gap:9px;margin-top:14px}
.grp li{position:relative;padding-left:16px;font:500 14.5px/1.5 var(--f);color:var(--ink-2);text-wrap:pretty}
.grp li::before{content:'';position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--c)}
.grp li a{font-weight:700}
/* лесенка цены с ползунком */
.lad{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start;margin-top:44px}
.lad-in{padding:26px 28px 28px}
.lad-in label{display:block;font:700 15px/1.3 var(--f)}
.lad-in .big{display:flex;align-items:baseline;gap:10px;margin-top:14px}
.lad-in .big b{font:800 40px/1 var(--f);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.lad-in .big span{font:600 14px/1.3 var(--f);color:var(--ink-3)}
.lad-in input[type=range]{width:100%;height:6px;margin-top:18px;border-radius:99px;cursor:pointer;-webkit-appearance:none;appearance:none;background:linear-gradient(var(--indigo),var(--indigo)) 0 0/40% 100% no-repeat var(--indigo-100);outline-offset:6px}
.lad-in input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;border:2.5px solid var(--indigo);box-shadow:0 2px 8px rgba(79,70,229,.35)}
.lad-in input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:2.5px solid var(--indigo);box-shadow:0 2px 8px rgba(79,70,229,.35)}
.lad-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.lad-chips button{padding:8px 13px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font:600 13px/1.2 var(--f);color:var(--ink-2);cursor:pointer;transition:border-color .16s,color .16s,background-color .16s}
.lad-chips button[aria-pressed="true"]{background:var(--indigo);border-color:var(--indigo);color:#fff}
@media (hover:hover) and (pointer:fine){.lad-chips button:hover{border-color:var(--indigo);color:var(--indigo)}.lad-chips button[aria-pressed="true"]:hover{color:#fff}}
.lad-res{margin-top:22px;padding:18px 20px;border-radius:14px;background:var(--indigo-50)}
.lad-res .pl{font:700 13px/1.3 var(--f);letter-spacing:.06em;text-transform:uppercase;color:var(--indigo)}
.lad-res .pr{margin-top:6px;font:800 34px/1.05 var(--f);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.lad-res .pr i{font-style:normal;font:600 14px/1 var(--f);color:var(--ink-3);letter-spacing:0}
.lad-res .rg{margin-top:6px;font:500 13.5px/1.45 var(--f);color:var(--ink-2)}
.lad-res .per{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:12px;padding-top:12px;border-top:1px dashed #C7CCFF;font:500 13.5px/1.4 var(--f);color:var(--ink-2)}
.lad-res .per b{font:800 15px/1 var(--f);color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.lad-in .btn{width:100%;margin-top:16px}
.lad-in .cap{position:static;display:block;max-width:none;margin-top:12px;padding:0;background:none;box-shadow:none;font:500 12.5px/1.5 var(--f);color:var(--ink-3)}
.rungs{list-style:none;display:grid;gap:8px}
.rung{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface);transition:border-color .18s,box-shadow .18s,transform .18s}
.rung b{display:block;font:800 16px/1.25 var(--f)}
.rung span{display:block;margin-top:3px;font:500 13.5px/1.4 var(--f);color:var(--ink-2)}
.rung em{font-style:normal;font:800 20px/1 var(--f);letter-spacing:-.02em;white-space:nowrap;font-variant-numeric:tabular-nums}
.rung em i{font-style:normal;font:600 12.5px/1 var(--f);color:var(--ink-3);letter-spacing:0}
.rung.on{border-color:var(--indigo);box-shadow:0 0 0 1px var(--indigo),0 14px 34px -18px rgba(79,70,229,.5)}
.rung.on em{color:var(--indigo)}
.lad-foot{margin-top:28px}
.lad-foot .checks{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 32px;margin-top:0;padding-top:0;border-top:0}
/* шаги запуска — строкой */
.steps4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-top:44px}
.st4{padding-top:22px;border-top:2px solid var(--line)}
.st4 i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--indigo);color:#fff;font:800 14px/1 var(--f);font-style:normal}
.st4 b{display:block;margin-top:14px;font:800 17px/1.3 var(--f);letter-spacing:-.01em}
.st4 p{margin-top:6px;font:500 14.5px/1.55 var(--f);color:var(--ink-2)}
.st-note{margin-top:28px;font:500 14.5px/1.55 var(--f);color:var(--ink-2)}
.st-note a{font-weight:700}
/* финал: строка условий под кнопками */
.fin .note{margin-top:22px;font:500 14px/1.5 var(--f);color:var(--on-navy-3)}
.fin .note a{color:var(--on-navy-2);text-decoration:underline;text-underline-offset:3px}
.fin .note a:hover{color:#fff}
/* светлый тур — когда шаги идут сразу за тёмным первым экраном */
.lt .step-b .n{border-color:#D5D9E4;color:var(--ink-3)}
.lt .step-b .t,.lt .step-b .d{color:var(--ink-2)}
.lt .step.on .step-b{background:var(--surface);box-shadow:0 0 0 1px var(--line),0 18px 40px -26px rgba(14,19,34,.35)}
.lt .step.on .n{background:var(--indigo);border-color:var(--indigo);color:#fff}
.lt .step.on .t{color:var(--ink)}
@media (hover:hover) and (pointer:fine){.lt .step:not(.on) .step-b:hover{background:rgba(14,19,34,.035)}.lt .step:not(.on) .step-b:hover .t{color:var(--ink)}}
.lt .shot{border-color:var(--line);box-shadow:0 40px 90px -44px rgba(14,19,34,.45),0 2px 6px rgba(14,19,34,.05)}
.lt .shot.dark{border-color:transparent}
.lt .hint{color:var(--ink-3)}
@media (max-width:960px){.lt .step{background:var(--surface);border-color:var(--line)}.lt .step .t{color:var(--ink)}.lt .step .n{background:var(--indigo);border-color:var(--indigo);color:#fff}}
/* мини-кадр шага на телефоне: нарисованная панель видна целиком, подпись не закрывает низ */
@media (max-width:960px){.step .mini:has(.ui){aspect-ratio:auto}.step .mini .ui{position:relative;inset:auto;height:auto;padding-bottom:64px}}
@media (max-width:1100px){.grps{gap:32px 28px}.lad{gap:28px}.steps4{gap:24px}}
@media (max-width:960px){
  .hero-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"k" "h" "f" "l" "c" "p" "x"}
  .grps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lad{grid-template-columns:minmax(0,1fr)}
  .lad-foot .checks{grid-template-columns:minmax(0,1fr)}
  .steps4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .hero h1{font-size:34px}
  .hero .alt{margin-top:16px;font-size:14px}
  .hero .kv>div{align-items:flex-start}
  .hero .kv dt{flex:0 0 42%}
  .hero .kv dd{text-align:right;white-space:normal}
  .grps{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:28px}
  .grp{padding-top:16px}
  .lad{margin-top:28px}
  .lad-in{padding:18px 16px 20px}
  .lad-in .big b{font-size:32px}
  .lad-res .pr{font-size:28px}
  .rung{padding:12px 14px}
  .rung b{font-size:15px}
  .rung em{font-size:18px}
  .steps4{grid-template-columns:minmax(0,1fr);gap:18px;margin-top:28px}
  .st4{padding-top:16px}
  .fin .note{font-size:13px}
}

/* ── для palleto-home.js: калькулятор (--fill), ролики (video.mfill), тост чата, ChatPico на телефоне ── */
.calc-row input{background-size:var(--fill,40%) 100%}
.media>video,.film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.film video{position:static}
/* Ролик на узком экране включается по тапу — без этого он весит как половина
   страницы. Курсор и подсказка в бейдже показывают, что кадр кликабельный. */
.media.tap-to-play{cursor:pointer}
.media.tap-to-play .playbadge b{background:var(--indigo-600)}
/* Уведомление «подключение через чат» — CTA продукта не уводят на закрытый кабинет */
.ptoast{position:fixed;left:50%;top:18px;width:max-content;transform:translate(-50%,-14px);z-index:9999;display:flex;align-items:flex-start;gap:12px;max-width:min(520px,calc(100vw - 24px));padding:14px 14px 14px 16px;background:#fff;border:1px solid var(--border-soft,#E2E8F0);border-radius:14px;box-shadow:0 18px 40px -12px rgba(15,23,42,.28);opacity:0;visibility:hidden;transition:opacity .22s ease,transform .22s ease,visibility .22s}
.ptoast.on{opacity:1;visibility:visible;transform:translate(-50%,0)}
.ptoast-ico{flex-shrink:0;color:var(--indigo,#4F46E5);font-size:22px;line-height:1}
.ptoast-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.ptoast-t{font:700 14.5px/1.3 var(--f);color:var(--text,#0F172A)}
.ptoast-m{font:500 13.5px/1.45 var(--f);color:var(--text-2,#475569)}
.ptoast-m a{color:var(--indigo,#4F46E5);font-weight:600}
.ptoast-x{flex-shrink:0;margin-left:2px;width:26px;height:26px;border:0;border-radius:8px;background:transparent;color:var(--text-3,#94A3B8);font-size:20px;line-height:1;cursor:pointer}
@media (hover:hover) and (pointer:fine){.ptoast-x:hover{background:var(--bg-soft,#F1F5F9);color:var(--text-2,#475569)}}
@media (max-width:560px){.ptoast{top:12px;padding:12px;width:calc(100vw - 20px);max-width:none}.ptoast-t{font-size:14px}.ptoast-m{font-size:13px}}
@media (prefers-reduced-motion:reduce){.ptoast{transition:opacity .01s}}
/* ── Чат ChatPico на телефоне (22.10.2026, аудит воронки) ─────────────────────
   Виджет чужой (chatpico.com): его сервер и настройки не трогаем — правим со стороны сайта.
   1. Приветствие «Привет! Нужна помощь?» всплывало через 3 с и ложилось на главную кнопку
      первого экрана (/wms/selleram, /wms/fulfilment, /tarify/svoy-sklad). На телефоне его нет:
      виджет ставит display:flex прямо в style, перебить можно только !important.
      Пульсация кнопки — его же спутник, тоже снята.
   2. Круг чата уступает место: пока кнопка действия страницы проходит под ним (нижняя полоса
      экрана), он прячется. Класс cp-yield на <html> ставит palleto-home.js, раздел 9.
      Анимации виджета задают transform — без animation:none круг не уйдёт. */
@media (max-width:480px){
  #chatpico-widget.chatpico-right{right:calc(10px + env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  #chatpico-widget .chatpico-greeting{display:none!important}
  #chatpico-widget .chatpico-button.chatpico-attention{animation:none}
  #chatpico-widget .chatpico-button{transition:opacity .2s,transform .2s}
  html.cp-yield #chatpico-widget:not(.chatpico-open) .chatpico-button{opacity:0;transform:scale(.6);animation:none;pointer-events:none}
}