/* Окно товара EditFlow Studio — общее: рамка окна, шрифт и цвета приложения, заголовки блоков, кнопки, проявление блоков.
   Стили блоков — в blocks/<имя>.css, у каждого свой префикс (.svm-<имя>). Собирает build.py в visual/studio/modal.css */
.modal-window:has(.svm){width:1040px;background:#121212;border-color:#2a2a2a;border-radius:12px}
.modal-window:has(.svm) .modal-scroll-container{padding:0;background:#121212}   /* фон непрозрачный — прокрутка без перерисовки */
.modal-window:has(.svm) .modal-scroll-container::-webkit-scrollbar-thumb{border-color:#121212}
.modal-window:has(.svm) .modal-close{top:16px;right:16px;width:32px;height:32px;padding:0;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;
    font:400 22px/32px 'EF Manrope',sans-serif;text-align:center;transition:background-color .15s,transform .12s}
.modal-window:has(.svm) .modal-close:hover{background:rgba(0,0,0,.75);transform:scale(1.06)}
.modal-window:has(.svm) .modal-close:focus-visible{outline:2px solid #fff;outline-offset:2px}

.svm{--acc:#bb86fc;--acc2:#c99dfd;--txt:#fff;--sub:#b3b3b3;--dim:#7c7c7c;--line:rgba(255,255,255,.08);--card:#181818;
    font:500 15px/1.5 'EF Manrope','Segoe UI',sans-serif;color:var(--txt);text-align:left}
.svm *{box-sizing:border-box}
.svm-b{padding:56px 48px 0}
.svm-b:last-child{padding-bottom:56px}

/* заголовок блока: маленькая подпись сверху, крупный заголовок, серый текст */
.svm-k{margin:0 0 10px;font:700 12px/1 'EF Manrope',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.svm-h{margin:0;font:800 34px/1.1 'EF Manrope',sans-serif;letter-spacing:-.03em;color:var(--txt)}
.svm-p{margin:12px 0 0;max-width:560px;color:var(--sub)}

/* кнопки — как в приложении: главная фиолетовая, вторая — контур */
.svm-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 28px;border-radius:500px;border:1px solid transparent;
    font:700 15px/1 'EF Manrope',sans-serif;white-space:nowrap;text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s,transform .12s}
.svm-btn:active{transform:scale(.98)}
.svm-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.svm-btn-main{background:var(--acc);color:#000}
.svm-btn-main:hover{background:var(--acc2);color:#000;transform:scale(1.03)}
.svm-btn-line{background:none;border-color:#7c7c7c;color:#fff}
.svm-hero .svm-btn-line,.svm-final .svm-btn-line{background:#121212}   /* жидкость окна идёт под кнопками (fx.js) — не просвечивает */
.svm-btn-line:hover{border-color:#fff;color:#fff;transform:scale(1.03)}
.svm-btn svg{flex:none}
.svm-soon-on{pointer-events:none}

/* проявление: блок ниже шапки поднимается на 16 px и проступает, когда доходит до него прокрутка (один раз) */
.svm-js .svm-b:not(.svm-hero){opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.svm-js .svm-b.svm-in{opacity:1;transform:none}
/* фокус прокрутки (core.js): в полную силу — только текущая часть, пролистанное и то, что впереди, притухает;
   у «Что умеет» — заголовок и каждый пункт отдельно */
.svm-js .svm-hero,.svm-js .svm-feat>li,.svm-js .svm-features>.svm-k,.svm-js .svm-features>.svm-h{transition:opacity .5s ease}
.svm-js .svm-past,.svm-js .svm-b.svm-past{opacity:.28}
.svm-js .svm-next,.svm-js .svm-b.svm-in.svm-next{opacity:.35}

@media (max-width:760px){
    .svm-b{padding:40px 20px 0}
    .svm-b:last-child{padding-bottom:40px}
    .svm-h{font-size:26px}
    .modal-window:has(.svm) .modal-close{top:10px;right:10px}
}
@media (prefers-reduced-motion:reduce){.svm-js .svm-b:not(.svm-hero){opacity:1;transform:none;transition:none}}

/* жидкость на весь фон окна (fx.js): холст под прокруткой во весь размер окна, блоки — поверх, их фон прозрачный.
   Яркость холста (opacity) fx.js убавляет по мере прокрутки — ниже шапки жидкость тише, текст читается */
.modal-window.svm-fx-on .modal-scroll-container{position:relative;z-index:1;background:transparent}
.modal-window:has(.svm) .modal-close{z-index:3}
.svm-fxw{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.svm-fx{display:block;width:100%;height:100%}

/* ===== hero ===== */
/* шапка: под ней — жидкость всего окна (fx.js), фон прозрачный; без жидкости (нет WebGL) — тёмно-серая плашка, как была */
.svm-hero{position:relative;padding:0}
.modal-window:not(.svm-fx-on) .svm-hero{background:#181818}
.svm-hero-in{display:flex;flex-direction:column;align-items:flex-start;min-height:400px;justify-content:flex-end;padding:72px 48px 44px}

/* «карточка программы» (04.11.2026): значок приложения, название, что это за программа */
.svm-app{display:flex;align-items:center;gap:20px}
.svm-app-i{flex:none;display:block;width:88px;height:88px;border-radius:20px;
    box-shadow:0 0 0 1px rgba(255,255,255,.14)}   /* тёмный значок на тёмном фоне — тонкий край, чтобы не растворялся */
.svm-app-n{margin:0;font:800 40px/1.05 'EF Manrope',sans-serif;letter-spacing:-.03em;color:#fff}
.svm-app-s{margin:8px 0 0;font:600 15px/1.35 'EF Manrope',sans-serif;color:rgba(255,255,255,.72)}

.svm-hero-h{margin:40px 0 0;max-width:820px;font:900 52px/1.04 'EF Manrope',sans-serif;letter-spacing:-.04em;color:#fff}
.svm-hero-p{margin:16px 0 0;max-width:560px;font:500 16px/1.5 'EF Manrope',sans-serif;color:rgba(255,255,255,.85)}
.svm-hero-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.svm-hero .svm-btn-line{border-color:rgba(255,255,255,.55)}
.svm-hero-price{margin-top:20px;font:600 15px/1.4 'EF Manrope',sans-serif;color:rgba(255,255,255,.7)}
.svm-hero-price a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px;transition:text-decoration-color .15s}
.svm-hero-price a:hover{text-decoration-color:#fff}
.svm-hero-free{display:inline-block;margin-bottom:6px;color:#fff;font-weight:700}
.svm-hero-price span{white-space:nowrap}   /* «· первые 14 дней бесплатно» переносится целиком, без висящего «бесплатно» */

/* появление при открытии окна: строки проступают снизу вверх по очереди, пока сходятся капли жидкости */
@keyframes svmHeroUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.svm-hero-in>*{animation:svmHeroUp .55s cubic-bezier(.22,1,.36,1) both}
.svm-hero-in>:nth-child(2){animation-delay:.06s}
.svm-hero-in>:nth-child(3){animation-delay:.12s}
.svm-hero-in>:nth-child(4){animation-delay:.18s}
.svm-hero-in>:nth-child(5){animation-delay:.24s}

@media (max-width:760px){
    .svm-hero-in{min-height:0;padding:64px 20px 32px}
    .svm-app{gap:14px}
    .svm-app-i{width:64px;height:64px;border-radius:15px}
    .svm-app-n{font-size:28px}
    .svm-app-s{margin-top:5px;font-size:13px}
    .svm-app-s>span{display:block}   /* «Программа для…» и «работает с…» — двумя строками, без точки */
    .svm-app-s>.svm-app-dot{display:none}
    .svm-hero-h{margin-top:28px;font-size:34px}
    .svm-hero-acts{flex-direction:column;align-self:stretch}
}
@media (prefers-reduced-motion:reduce){.svm-hero-in>*{animation:none}}

/* ===== tour ===== */
/* «Что внутри»: слева разделы (у открытого — текст и полоска времени сверху, как у шагов «Как это работает»), справа — запись
   окна Studio 16:9; записи сменяются плавным наплывом */
.svt{display:grid;grid-template-columns:290px minmax(0,1fr);gap:32px;align-items:start;margin-top:28px}
.svt-list{display:flex;flex-direction:column}
/* раздел: значок как в боковой полосе Studio + название; у открытого — значок фиолетовый, название белое и крупнее, текст
   и полоска времени (фиолетовая). Наведение — светлее и чуть сдвигается вправо. Без плашек под значками */
.svt-i{position:relative;display:flex;align-items:flex-start;gap:14px;width:100%;padding:15px 8px 15px 2px;border:0;border-top:2px solid #262626;background:none;
  text-align:left;cursor:pointer;color:inherit;font:inherit;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.svt-i::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:var(--acc);transform:scaleX(var(--p,0));transform-origin:left}
.svt-i:not(.on)::before{opacity:0}
.svt-ic{flex:none;width:22px;height:22px;margin-top:-1px;color:#6a6a6a;transition:color .25s,transform .4s cubic-bezier(.2,1.6,.4,1)}
.svt-c{flex:1;min-width:0}
.svt-i b{display:block;font:800 18px/1.2 'EF Manrope',sans-serif;letter-spacing:-.01em;color:#8a8a8a;transition:color .25s}
.svt-i:not(.on):hover{transform:translateX(4px)}
.svt-i:hover b{color:#fff}
.svt-i:hover .svt-ic{color:#b3b3b3}
.svt-i.on b{color:#fff}
.svt-i.on .svt-ic{color:var(--acc);transform:scale(1.12)}
.svt-t{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.7,.2,1)}
.svt-t>span{overflow:hidden;font:500 14px/1.45 'EF Manrope',sans-serif;color:#b3b3b3;opacity:0;transition:opacity .3s ease}
.svt-i.on .svt-t{grid-template-rows:1fr}
.svt-i.on .svt-t>span{padding-top:6px;opacity:1;transition-delay:.08s}
.svt-i:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:2px}
.svt-stage{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#121212;border:1px solid #2a2a2a}
.svt-v{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s ease}
.svt-v.on{opacity:1}
/* сайт оборачивает каждое видео окна в .video-loader-wrap со спиннером (index_dev.php) — обёртка на всю сцену, спиннер не нужен */
.svt-stage>.video-loader-wrap{position:absolute!important;inset:0;border-radius:0!important}
.svt-stage .video-spinner{display:none}
@media (max-width:820px){
    .svt{grid-template-columns:minmax(0,1fr);gap:16px}
    .svt-stage{order:-1}
    .svt-i{padding:12px 4px 12px 2px}
    .svt-i b{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.svt-t,.svt-t>span,.svt-v,.svt-i,.svt-ic{transition:none}}

/* ===== trailer ===== */
/* Трейлер: кадр 16:9 во всю ширину, у ролика свои кнопки управления */
.svm-trailer{padding-top:8px}
.svm-tr{position:relative;width:100%;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#0c0c10;border:1px solid #2a2a2a}
.svm-tr-vid{display:block;width:100%;height:100%;object-fit:cover;background:#0c0c10}
.svm-tr-yt{margin:12px 0 0;font:500 14px/1.4 'EF Manrope',sans-serif}
.svm-tr-yt a{color:#b3b3b3;text-decoration:none}
.svm-tr-yt a:hover{color:#fff;text-decoration:underline}

/* ===== lib ===== */
/* «Библиотека EditFlow»: цифры, несколько карточек с волнами и стена на весь экран (.svl) — как список в Studio: тёмные
   карточки, белая волна, фиолетовое — только у играющего. Без градиентов и свечения */
.svl-nums{display:flex;gap:48px;margin:28px 0 0;flex-wrap:wrap}
.svl-nums b{display:block;font:800 44px/1 'EF Manrope',sans-serif;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.svl-nums span{display:block;margin-top:6px;color:var(--sub);font-size:14px}
.svl-peek{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:28px 0 0}
.svl-acts{display:flex;align-items:center;gap:20px;margin:24px 0 0;flex-wrap:wrap}
.svl-note{color:var(--dim);font-size:13px}

/* карточка: название, папка и длина, волна; ▶ — при наведении (у играющего — всегда) */
.svl-c{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:auto auto 30px;column-gap:10px;
    padding:12px 12px 10px;border-radius:8px;background:#181818;cursor:pointer;transition:background-color .15s}
.svl-c:hover{background:#242424}
.svl-c b{grid-column:2;font:700 14px/1.3 'EF Manrope',sans-serif;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svl-c i{grid-column:2;font-style:normal;font-size:12px;line-height:1.4;color:var(--dim,#7c7c7c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.svl-c canvas{grid-column:1/-1;width:100%;height:30px;margin-top:8px;display:block}
.svl-p{grid-row:1/3;width:32px;height:32px;border-radius:50%;border:0;padding:0;background:#2a2a2a;color:#fff;display:grid;place-items:center;
    transition:background-color .15s,color .15s,transform .12s;cursor:pointer}
.svl-c:hover .svl-p,.svl-c.on .svl-p{background:#fff;color:#000}
.svl-p:active{transform:scale(.94)}
.svl-p svg{width:12px;height:12px}
.svl-c.on b{color:#bb86fc}
.svl-peek .svl-c{cursor:default}
.svl-peek .svl-p{display:none}
.svl-peek .svl-c{grid-template-columns:minmax(0,1fr)}
.svl-peek .svl-c b,.svl-peek .svl-c i{grid-column:1}

/* стена на весь экран */
.svl{--acc:#bb86fc;--acc2:#c99dfd;--sub:#b3b3b3;--dim:#7c7c7c;   /* стена вне .svm — цвета кнопок свои */
    position:fixed;inset:0;z-index:100000;display:flex;flex-direction:column;background:#121212;color:#fff;color-scheme:dark;
    font:500 15px/1.5 'EF Manrope','Segoe UI',sans-serif;opacity:0;transition:opacity .25s ease}
.svl.in{opacity:1}
.svl *{box-sizing:border-box}
.svl-top{display:flex;align-items:center;gap:24px;padding:18px 32px;border-bottom:1px solid #2a2a2a;flex-wrap:wrap}
.svl-t b{display:block;font:800 22px/1.1 'EF Manrope',sans-serif;letter-spacing:-.02em}
.svl-t span{display:block;margin-top:4px;color:#b3b3b3;font-size:13px}
.svl-tabs{display:flex;gap:22px}
.svl-tabs button,.svl-folders button{background:none;border:0;padding:8px 0;color:#b3b3b3;font:700 15px 'EF Manrope',sans-serif;cursor:pointer;
    border-bottom:2px solid transparent;white-space:nowrap}
.svl-tabs button:hover,.svl-folders button:hover{color:#fff}
.svl-tabs button.on,.svl-folders button.on{color:#fff;border-bottom-color:#bb86fc}
.svl-tabs small,.svl-folders small{margin-left:5px;color:#7c7c7c;font-weight:600}
.svl-q{flex:1;min-width:200px;max-width:420px;height:40px;margin-left:auto;padding:0 14px;border-radius:6px;border:1px solid #333;background:#1f1f1f;
    color:#fff;font:500 14px 'EF Manrope',sans-serif;outline:0}
.svl-q:focus{border-color:#7c7c7c}
.svl-x{width:40px;height:40px;border-radius:50%;border:0;background:#242424;color:#fff;font:400 20px/40px sans-serif;cursor:pointer;flex:none}
.svl-x:hover{background:#333}
.svl-folders{display:flex;gap:20px;padding:0 32px;border-bottom:1px solid #2a2a2a;overflow-x:auto;scrollbar-width:none}
.svl-folders::-webkit-scrollbar{display:none}   /* листается колесом (lib.js) и пальцем */
.svl-folders button{font-size:13px;padding:10px 0}
.svl-view{position:relative;flex:1;min-height:0;display:flex;overflow:hidden}
.svl-scroll{flex:1;overflow-y:auto;padding:28px 48px 120px}
/* линза: карточки искажаются по месту на экране (lib.js, data-lens), края — размытие и затемнение поверх (сквозь них щёлкается) */
.svl[data-lens="convex"] .svl-c{will-change:transform;transform-origin:50% 50%}
.svl-blur,.svl-vig{position:absolute;inset:0;pointer-events:none}
.svl-blur{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
    -webkit-mask-image:radial-gradient(ellipse 72% 68% at 50% 50%,transparent 58%,#000 100%);mask-image:radial-gradient(ellipse 72% 68% at 50% 50%,transparent 58%,#000 100%)}
.svl-vig{background:radial-gradient(ellipse 78% 74% at 50% 50%,transparent 52%,rgba(0,0,0,.72) 100%)}
.svl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.svl-none{padding:60px 0;text-align:center;color:#7c7c7c}
.svl-foot{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:center;gap:16px;padding:10px 12px 10px 20px;
    border-radius:8px;background:#242424;border:1px solid #333;color:#b3b3b3;font-size:14px;z-index:2;max-width:calc(100% - 32px)}
.svl-foot[hidden]{display:none}
.svl-foot .svm-btn{height:38px;padding:0 18px;font-size:14px}
@media (max-width:760px){
    .svl-top{padding:14px 16px;gap:12px}.svl-folders{padding:0 16px}.svl-scroll{padding:14px 16px 96px}
    .svl-blur{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
    .svl-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.svl-peek{grid-template-columns:repeat(2,minmax(0,1fr))}
    .svl-nums{gap:28px}.svl-nums b{font-size:34px}.svl-q{order:3;max-width:none;margin-left:0}
}
@media (prefers-reduced-motion:reduce){.svl{transition:none}}

/* ===== plans ===== */
/* Цена (07.11.2026): один крупный блок «Бесплатно» с «Скачать», под ним тихая строка PRO, сравнение и покупка — под
   «Подробнее» (раскрывается по высоте, plans.js ставит svm-more-open). Плашка — ровная тёмная, без жидкости и рамок */
.svm-free{margin-top:6px;padding:40px 40px 36px;border-radius:12px;background:#181818}
.svm-free-h{margin:0;font:800 56px/1 'EF Manrope',sans-serif;letter-spacing:-.04em;color:#fff}
.svm-free-p{margin:16px 0 28px;max-width:560px;font:600 19px/1.45 'EF Manrope',sans-serif;color:#fff}
.svm-free-os{margin-top:12px;font:500 13px/1.4 'EF Manrope',sans-serif;color:var(--dim)}

/* PRO — одна строка, мелко и спокойно */
.svm-pro-line{margin:18px 0 0;font:500 14px/1.6 'EF Manrope',sans-serif;color:var(--sub)}
.svm-pro-sep{color:var(--dim)}
.svm-more-btn{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;cursor:pointer;
    font:600 14px/1.6 'EF Manrope',sans-serif;color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px;transition:text-decoration-color .15s}
.svm-more-btn:hover{text-decoration-color:#fff}
.svm-more-btn:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:2px}
.svm-more-btn svg{transition:transform .35s cubic-bezier(.22,1,.36,1)}
.svm-more-open .svm-more-btn svg{transform:rotate(180deg)}

/* «Подробнее» — свёрнуто по умолчанию; высота плавно (как «Как установить» в блоке get) */
.svm-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s cubic-bezier(.22,1,.36,1)}
.svm-more-open .svm-more{grid-template-rows:1fr}
.svm-more-in{min-height:0;overflow:hidden;opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .4s cubic-bezier(.22,1,.36,1);visibility:hidden}
.svm-more-open .svm-more-in{opacity:1;transform:none;transition-delay:.08s;visibility:visible}

/* сравнение — как таблица «Тарифа» в приложении (.efp-*), колонка PRO чуть светлее */
.svm-plan{margin-top:20px}
.svm-pr{display:grid;grid-template-columns:minmax(0,1fr) 160px 160px}
.svm-pr>div{display:flex;flex-direction:column;justify-content:center;gap:3px;padding:12px 16px}
.svm-pr:not(.svm-pr-group)+.svm-pr:not(.svm-pr-head)>.svm-pn,.svm-pr:not(.svm-pr-group)+.svm-pr>.svm-pf{border-top:1px solid rgba(255,255,255,.07)}
.svm-pn{font:500 14px/1.4 'EF Manrope',sans-serif;color:#fff}
.svm-pf,.svm-pp{align-items:center;text-align:center;font:600 14px/1.3 'EF Manrope',sans-serif;color:#fff}
.svm-pp{background:rgba(255,255,255,.035)}
.svm-pr-head>div{justify-content:flex-start;gap:2px;padding:18px 16px 14px}
.svm-pr-head .svm-pp{border-radius:8px 8px 0 0}
.svm-pr:last-child .svm-pp{border-radius:0 0 8px 8px}
.svm-pr-head b{font:800 15px/1.2 'EF Manrope',sans-serif;color:#fff}
.svm-pr small{font:400 12px/1.4 'EF Manrope',sans-serif;color:var(--sub)}
.svm-pr-group>div{padding:26px 16px 8px}
.svm-pr-head+.svm-pr-group>div{padding-top:14px}
.svm-pr-group .svm-pn{font:800 15px/1.25 'EF Manrope',sans-serif;color:var(--sub)}
.svm-pr:last-child>div{padding-bottom:18px}
.svm-yes{display:flex;color:#fff}
.svm-no{color:#6a6a6a}
.svm-inf{display:flex;color:#fff}
.svm-inf path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:80 20;animation:svmInf 2.8s linear infinite}
@keyframes svmInf{to{stroke-dashoffset:-100}}

/* покупка PRO — две контурные кнопки обычного размера, без акцента */
.svm-buy-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px}
.svm-buy-t{margin-right:4px;font:700 15px/1.2 'EF Manrope',sans-serif;color:#fff}
.svm-plans .svm-btn-line{background:#121212}   /* жидкость окна идёт под кнопками (fx.js) — не просвечивает */
.svm-buy-btn{height:42px;padding:0 22px;font-size:14px}
.svm-buy-note{margin:14px 0 4px;max-width:640px;font:500 13px/1.55 'EF Manrope',sans-serif;color:var(--dim)}

@media (max-width:760px){
    .svm-free{padding:28px 20px 24px}
    .svm-free-h{font-size:42px}
    .svm-free-p{font-size:17px}
    .svm-free .svm-btn{width:100%}
    .svm-pr{grid-template-columns:minmax(0,1fr) 78px 78px}
    .svm-pr>div{padding:10px 6px}
    .svm-pr>.svm-pn{padding-left:0}
    .svm-pn{font-size:13px}
    .svm-pr-head small{display:none}
    .svm-buy-t{width:100%}
}
@media (prefers-reduced-motion:reduce){
    .svm-inf path{animation:none;stroke-dasharray:none}
    .svm-more,.svm-more-in,.svm-more-btn svg{transition:none}
}

/* PRO на месяц и на год под «Подробнее» — прежние карточки (blocks/buy.css), две в ряд; у каждой своя жидкость (plans.js) */
.svm-tc-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px}
.svm-tc{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:400px;padding:28px 24px 24px;border-radius:12px;background:#181818;overflow:hidden}
.svm-tc-pro{background:#111a1a}
.svm-tc-year{background:#1a1722}
.svm-tc-fx{position:absolute;inset:0;z-index:-1;pointer-events:none}
.svm-tc-fx canvas{display:block;width:100%;height:100%}
.svm-tc-n{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;font:800 18px/1.2 'EF Manrope',sans-serif;color:#fff}
.svm-tc-tag{font:700 13px/1.2 'EF Manrope',sans-serif;color:#fff}
.svm-tc-price{margin-top:22px;font:900 46px/1 'EF Manrope',sans-serif;letter-spacing:-.035em;color:#fff}
.svm-tc-sub{margin-top:10px;font:500 14px/1.4 'EF Manrope',sans-serif;color:rgba(255,255,255,.72)}
.svm-tc-list{display:grid;gap:12px;margin:28px 0 32px;padding:0;list-style:none}
.svm-tc-list li{display:flex;gap:10px;font:500 14px/1.4 'EF Manrope',sans-serif;color:#fff}
.svm-tc-list svg{flex:none;margin-top:2px;color:#fff}
.svm-tc .svm-btn{width:100%;margin-top:auto}
.svm-tc .svm-btn-line{border-color:rgba(255,255,255,.6)}
@media (max-width:760px){
    .svm-tc-row{grid-template-columns:1fr}
    .svm-tc{min-height:0}
    .svm-tc-price{font-size:40px}
}

/* ===== get ===== */
/* Скачать: карточки систем (своя — первой: тонкая рамка цвета акцента и «Ваша система»). Значок системы — просто знак, без
   плашки; под кнопкой — «Как установить», инструкция раскрывается по высоте (get.js, класс svm-get-open).
   Две карточки рядом, кнопка на всю ширину (02.11.2026 Никита выбрал из двух: карточки рядом или строки одна под другой) */
.svm-get-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px;align-items:start}
.svm-get-os{position:relative;display:flex;flex-direction:column;padding:28px 28px 8px;border-radius:12px;background:var(--card);
    box-shadow:inset 0 0 0 1px var(--line);transition:background-color .25s,box-shadow .25s}
.svm-get-os:hover{background:#1c1c1c}
.svm-os-mac .svm-get-os[data-os="mac"]{order:-1}
.svm-os-win [data-os="win"],.svm-os-mac [data-os="mac"]{box-shadow:inset 0 0 0 1px rgba(187,134,252,.45)}

.svm-get-head{display:flex;align-items:center;gap:16px}
.svm-get-logo{flex:none;width:30px;height:30px;color:#fff}
.svm-get-t{min-width:0}
.svm-get-n{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;font:800 24px/1.15 'EF Manrope',sans-serif;letter-spacing:-.02em;color:#fff}
.svm-get-mine{display:none;font:700 12px/1.2 'EF Manrope',sans-serif;letter-spacing:0;color:var(--acc)}
.svm-os-win [data-os="win"] .svm-get-mine,.svm-os-mac [data-os="mac"] .svm-get-mine{display:inline}
.svm-get-req{margin-top:4px;font:500 14px/1.4 'EF Manrope',sans-serif;color:var(--sub)}
.svm-get-meta{margin-top:22px;font:600 13px/1.3 'EF Manrope',sans-serif;color:var(--dim);font-variant-numeric:tabular-nums}
.svm-get-dl{width:100%;margin-top:12px}

/* «Как установить»: текстовая кнопка, стрелка переворачивается */
.svm-get-how{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:8px;padding:14px 0;border:0;background:none;
    font:700 14px/1 'EF Manrope',sans-serif;color:var(--sub);cursor:pointer;transition:color .15s}
.svm-get-how:hover,.svm-get-open .svm-get-how{color:#fff}
.svm-get-how:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:4px}
.svm-get-how svg{width:16px;height:16px;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.svm-get-open .svm-get-how svg{transform:rotate(180deg)}
/* инструкция: высота 0 → по содержимому (grid 0fr → 1fr), текст проступает и чуть опускается на место */
.svm-get-guide{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1)}
.svm-get-open .svm-get-guide{grid-template-rows:1fr}
.svm-get-gi{min-height:0;overflow:hidden;opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .45s cubic-bezier(.22,1,.36,1)}
.svm-get-open .svm-get-gi{opacity:1;transform:none;transition-delay:.08s}
.svm-get-lead{margin:6px 0 0;padding-top:20px;border-top:1px solid var(--line);font:500 14px/1.5 'EF Manrope',sans-serif;color:var(--sub)}
.svm-get-steps{display:grid;gap:12px;margin:16px 0 0;padding:0;list-style:none;counter-reset:svm-step}
.svm-get-steps li{position:relative;padding-left:26px;font:500 14px/1.5 'EF Manrope',sans-serif;color:var(--sub);counter-increment:svm-step}
.svm-get-steps li::before{content:counter(svm-step);position:absolute;left:0;top:0;font:800 14px/1.5 'EF Manrope',sans-serif;color:var(--acc)}
.svm-get-steps b{font-weight:700;color:#fff}
.svm-get-alt{margin:14px 0 0;padding-left:26px;font:500 13px/1.5 'EF Manrope',sans-serif;color:var(--dim)}
.svm-get-alt code{font:500 12px/1.5 ui-monospace,Menlo,Consolas,monospace;color:var(--txt);user-select:all;word-break:break-all}
.svm-get-gi > :last-child{margin-bottom:22px}

.svm-get-note{margin:18px 0 0;max-width:640px;font:500 13px/1.5 'EF Manrope',sans-serif;color:var(--dim)}
.svm-get-note a{color:var(--sub);text-decoration:underline;text-underline-offset:3px}
.svm-get-note a:hover{color:#fff}

@media (max-width:760px){.svm-get-row{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.svm-get-guide,.svm-get-gi,.svm-get-how svg{transition:none}}

/* ===== faq ===== */
/* Вопросы: строки через линию. Блок проявился — вопросы поднимаются по очереди (--i). Открытый: линия под ним светлее,
   плюс сворачивается в минус, ответ проступает и чуть съезжает на место (svm-o ставит faq.js; высоту анимирует он же) */
.svm-faq{margin-top:20px;max-width:760px}
.svm-faq details{border-bottom:1px solid var(--line);
    transition:opacity .5s ease calc(var(--i,0) * 70ms + .15s),transform .6s cubic-bezier(.22,1,.36,1) calc(var(--i,0) * 70ms + .15s),border-color .3s}
.svm-js .svm-faq details{opacity:0;transform:translateY(12px)}
.svm-js .svm-in .svm-faq details{opacity:1;transform:none}
.svm-faq details.svm-o{border-bottom-color:rgba(255,255,255,.22)}
.svm-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;list-style:none;cursor:pointer;
    font:700 16px/1.35 'EF Manrope',sans-serif;color:#fff}
.svm-faq summary::-webkit-details-marker{display:none}
.svm-faq summary:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:2px}
.svm-faq-q{transition:transform .25s cubic-bezier(.22,1,.36,1),color .2s}
.svm-faq details:not(.svm-o) .svm-faq-q{color:#d6d6d6}
.svm-faq summary:hover .svm-faq-q{color:#fff;transform:translateX(4px)}
/* плюс → минус: вертикальная черта ложится, сам значок проворачивается на пол-оборота */
.svm-faq-i{position:relative;flex:none;width:14px;height:14px;color:var(--sub);transition:transform .35s cubic-bezier(.22,1,.36,1),color .2s}
.svm-faq-i i{position:absolute;left:0;top:6px;width:14px;height:2px;border-radius:1px;background:currentColor;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.svm-faq-i i+i{transform:rotate(90deg)}
.svm-faq summary:hover .svm-faq-i{color:#fff}
.svm-faq .svm-o .svm-faq-i{color:#fff;transform:rotate(180deg)}
.svm-faq .svm-o .svm-faq-i i+i{transform:rotate(0)}
.svm-faq p{margin:0;padding:0 40px 22px 0;font:500 14px/1.6 'EF Manrope',sans-serif;color:var(--sub);
    opacity:0;transform:translateY(-6px);transition:opacity .25s ease,transform .3s cubic-bezier(.22,1,.36,1)}
.svm-faq .svm-o p,.svm-faq details[open]:not(.svm-faq-js) p{opacity:1;transform:none;transition-delay:.08s}
@media (prefers-reduced-motion:reduce){
    .svm-faq details,.svm-faq p,.svm-faq-q,.svm-faq-i,.svm-faq-i i{transition:none}
    .svm-js .svm-faq details{opacity:1;transform:none}
}

/* ===== final ===== */
/* Финал: по центру, отделён линией */
.svm-final-in{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:48px;border-top:1px solid var(--line)}
.svm-final-in .svm-p{margin-bottom:24px}
.svm-final-meta{margin-top:14px;font:500 13px/1.4 'EF Manrope',sans-serif;color:var(--dim)}
.svm-final-next{max-width:520px;margin:28px 0 0;font:500 14px/1.55 'EF Manrope',sans-serif;color:var(--sub)}