/* ВНИМАНИЕ: файл собирается из style.css + steklo.css.
   Править нужно их, а не этот файл, и пересобирать. */

:root{
  --bg:#e7eaf1;
  --bg-soft:#edf0f6;
  --card:#e7eaf1;
  --sh-light:#ffffff;
  --sh-dark:#c5cbd9;
  --txt:#2e3440;
  --txt-2:#68718a;
  --accent:#3d6bff;
  --accent-2:#2c53d8;
  --mint:#9fd8bb;
  --peach:#f3c9a8;
  --r:24px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);color:var(--txt);line-height:1.55;
  overflow-x:hidden;
}
/* ===== неоморфные примитивы ===== */
.nm{
  background:var(--card);
  border-radius:var(--r);
  box-shadow:9px 9px 22px var(--sh-dark),-9px -9px 22px var(--sh-light);
}
.nm-in{
  background:var(--bg-soft);
  border-radius:18px;
  box-shadow:inset 6px 6px 12px var(--sh-dark),inset -6px -6px 12px var(--sh-light);
}
/* ===== декоративные 3d-капли ===== */
.blob{display:none}
.blob.b1{width:170px;height:170px;top:70px;left:4vw;background:radial-gradient(circle at 32% 28%,#ffffff,#b7d9c8 60%,#93c4ab);box-shadow:18px 24px 40px rgba(150,170,160,.45)}
.blob.b2{width:90px;height:90px;top:330px;right:7vw;background:radial-gradient(circle at 35% 30%,#fff,#f3cfae 55%,#e4af84);box-shadow:12px 18px 30px rgba(190,160,130,.4)}
.blob.b3{width:56px;height:56px;top:120px;right:16vw;background:radial-gradient(circle at 35% 30%,#fff,#c3cff2 55%,#9db1e8);box-shadow:10px 14px 24px rgba(140,155,200,.4)}
/* ===== шапка ===== */
header{position:relative;z-index:5;max-width:calc(1460px + 8vw);margin:0 auto;padding:22px 4vw;display:flex;align-items:center;gap:36px}
.logo{display:flex;align-items:center;gap:0;font-size:27px;font-weight:800;letter-spacing:-.5px;text-decoration:none;color:var(--txt)}
.logo-mark{width:60px;height:60px;object-fit:contain;display:block}
nav{display:flex;gap:5px;margin-left:auto;flex-wrap:nowrap;padding:6px;border-radius:17px;
  background:var(--bg-soft);box-shadow:inset 4px 4px 9px var(--sh-dark),inset -4px -4px 9px var(--sh-light)}
nav a{display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:12px;color:var(--txt-2);font-weight:600;font-size:14.5px;text-decoration:none;transition:.18s}
nav a svg{flex-shrink:0;opacity:.8}
.burger{display:none;width:40px;height:40px;flex-shrink:0;border:0;cursor:pointer;border-radius:9px;background:var(--card);box-shadow:5px 5px 12px var(--sh-dark),-5px -5px 12px var(--sh-light);padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px;margin-left:auto;transition:.15s}
.burger:active{box-shadow:inset 3px 3px 7px var(--sh-dark),inset -3px -3px 7px var(--sh-light)}
/* высота 2px и зазор 5px дают целые координаты полосок внутри кнопки 40px
   (12, 19, 26) — иначе дробные позиции размывают полоски по-разному и
   крайние выглядят жирнее средней */
.burger span{width:18px;height:2px;border-radius:2px;background:var(--txt);transition:.25s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ===== hero ===== */
.hero{position:relative;padding:52px 4vw 30px;text-align:center}
h1{font-size:clamp(30px,4.2vw,54px);font-weight:800;letter-spacing:-1.3px;line-height:1.14}
h1 .grad{background:linear-gradient(120deg,#3d6bff,#7a5cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{max-width:860px;margin:20px auto 0;color:var(--txt-2);font-size:18px}
.tool{max-width:980px;margin:38px auto 0;padding:34px;position:relative;z-index:2}
.sec-guides{padding-top:20px}
.url-row{display:flex;gap:16px;align-items:stretch}
.url-field{flex:1;display:flex;align-items:center;gap:12px;padding:6px 22px}
.url-field svg{flex-shrink:0;opacity:.55}
.url-field input{flex:1;border:0;outline:0;background:transparent;font-size:17px;color:var(--txt);padding:16px 0}
.url-field input::placeholder{color:#9aa3b8}
.btn{border:0;cursor:pointer;font-weight:700;font-size:17px;border-radius:18px;transition:.15s;font-family:inherit}
.btn-cta{
  padding:19px 42px;color:#fff;letter-spacing:.2px;
  background:linear-gradient(145deg,#4d79ff,#2c53d8);
  box-shadow:8px 8px 18px var(--sh-dark),-6px -6px 14px var(--sh-light),inset 1px 2px 3px rgba(255,255,255,.4);
}
.btn-cta:hover{transform:translateY(-2px);box-shadow:10px 12px 24px var(--sh-dark),-6px -6px 14px var(--sh-light),inset 1px 2px 3px rgba(255,255,255,.4)}
.btn-cta:active{transform:translateY(1px)}
/* переключатель формата до нажатия кнопки */
.mode-row{display:flex;justify-content:center;margin-top:22px}
.mode{display:inline-flex;gap:5px;padding:6px;border-radius:16px}
.seg{border:0;cursor:pointer;font-family:inherit;font-weight:700;font-size:14.5px;padding:11px 26px;border-radius:12px;color:var(--txt-2);background:transparent;transition:.18s;display:flex;align-items:center;gap:8px}
.seg.on{color:var(--txt);background:var(--card);box-shadow:5px 5px 10px var(--sh-dark),-5px -5px 10px var(--sh-light)}
.seg svg{flex-shrink:0}
.terms{margin-top:18px;font-size:13px;color:#98a0b5}
.terms a{color:var(--accent);text-decoration:none}
/* ===== карточка загрузки (демо) ===== */
.dl{max-width:980px;margin:22px auto 0;padding:24px 28px;text-align:left;position:relative;z-index:2}
.dl-head{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.dl-thumb{width:58px;height:42px;border-radius:12px;background:linear-gradient(140deg,#aebadb,#8794bd);flex-shrink:0;display:grid;place-items:center}
.dl-title{font-weight:700;font-size:15.5px;line-height:1.3}
.dl-sub{color:var(--txt-2);font-size:13.5px;margin-top:3px}
.fmt-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.fmt{padding:8px 16px;border-radius:12px;font-size:13.5px;font-weight:700;color:var(--txt-2);cursor:pointer;background:var(--card);box-shadow:4px 4px 10px var(--sh-dark),-4px -4px 10px var(--sh-light);border:0;font-family:inherit;transition:.15s}
.fmt.on{color:#fff;background:linear-gradient(145deg,#4d79ff,#2c53d8);box-shadow:inset 3px 3px 7px rgba(20,40,120,.45),inset -2px -2px 5px rgba(255,255,255,.25)}
.fmt.mp3{color:#3f7d5f}
.fmt.mp3.on{color:#fff;background:linear-gradient(145deg,#59b98a,#3a9268);box-shadow:inset 3px 3px 7px rgba(30,90,60,.45),inset -2px -2px 5px rgba(255,255,255,.25)}
.bar-wrap{padding:7px;border-radius:16px}
.bar{height:16px;border-radius:11px;width:64%;position:relative;overflow:hidden;
  background:repeating-linear-gradient(-55deg,#4d79ff 0 14px,#6f92ff 14px 28px);
  background-size:40px 40px;animation:mv 1s linear infinite;
  box-shadow:0 2px 6px rgba(60,100,220,.45)}
@keyframes mv{to{background-position:40px 0}}
.dl-stats{display:flex;justify-content:space-between;gap:10px;margin-top:12px;flex-wrap:nowrap;font-size:13.5px;color:var(--txt-2)}
.stat{display:flex;align-items:center;gap:7px;min-width:0;white-space:nowrap}
.stat svg{flex-shrink:0}
/* min-width у значения: подпись со значком стоит на месте при смене цифр
   (блок «Скорость» прижат вправо, но его ширина не дышит) */
.stat b{color:var(--txt);font-weight:700;font-variant-numeric:tabular-nums;min-width:5.4em}
@media (max-width:480px){.dl-stats{font-size:12px;gap:8px}.stat{gap:5px}}
/* Полоса Turbo у прогресса (структуру строит turbo.js): компактный
   баннер — заголовок обычным крупным текстом, преимущества «стеклянными»
   чипами в поток, значок состояния — большой полупрозрачный watermark
   на фоне справа (glassmorphism-2026, решение владельца 13.08) */
.turbo-strip{width:100%;margin-top:16px;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:15px 18px;border:0;cursor:pointer;font-family:inherit;text-align:left;border-radius:18px;
  background:var(--card);
  box-shadow:6px 6px 14px var(--sh-dark),-6px -6px 14px var(--sh-light);transition:.15s}
.turbo-strip:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(120,90,210,.3),-6px -6px 14px var(--sh-light)}
/* Состояния полосы Turbo (содержимым владеет turbo.js):
   st-sell — продающая с живым градиентом и бликом, st-on — подтверждение
   подписчику, st-frz — пауза антишеринга */
/* Первым слоем — статичный «свет сверху, тень снизу»: он даёт кнопке объём.
   Сдвигается вместе с градиентом по горизонтали, но он вертикальный, поэтому
   выглядит неподвижным */
.turbo-strip.st-sell{position:relative;overflow:hidden;
  background:linear-gradient(120deg,#3d6bff,#7a5cff,#3d6bff);
  background-size:220% 100%;
  animation:tspFlow 7s linear infinite}
.turbo-strip.st-sell::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.28) 50%,transparent 58%);transform:translateX(-110%);animation:tspShine 3.4s ease-in-out infinite;pointer-events:none}
.turbo-strip.st-on{background:linear-gradient(120deg,#12764a,#1f9d60)}
.turbo-strip.st-frz{background:linear-gradient(120deg,#c98f2e,#e0ae4e)}
/* Значок состояния — БОЛЬШОЙ полупрозрачный watermark на фоне справа
   (вместо отдельной иконки-плитки, которая читалась как кнопка) */
.tsp-wm{position:absolute;right:10px;top:50%;transform:translateY(-50%) rotate(-12deg);pointer-events:none;opacity:.17}
.tsp-wm svg{width:132px;height:132px;display:block}
.tsp-wm svg *{stroke:#fff}
.tsp-tick svg{animation:tspTick 1.7s ease-in-out infinite;transform-origin:50% 62%}
/* заголовок — обычный крупный жирный текст, без подложек-«кнопок» */
.tsp-head{position:relative;z-index:1}
.tsp-title{color:#fff;font-weight:800;font-size:21px;line-height:1.1;letter-spacing:-.4px;white-space:nowrap;text-shadow:0 1px 4px rgba(20,20,60,.2)}
/* Преимущества (только у подписчика) — сетка 2×2 по всей ширине плашки:
   значок + текст, БЕЗ пилюль и обводок (решение владельца 14.08) */
.tsp-bens{position:relative;z-index:1;margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 20px}
.tsp-ben{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.96);
  font-size:13px;font-weight:600;line-height:1.25;letter-spacing:-.1px}
.tsp-ben svg{width:17px;height:17px;flex-shrink:0}
.tsp-ben svg *{stroke:#fff}
/* Гость: полоса = кнопка во всю ширину, текст по центру, без списка выгод.
   Ощущение скорости даём тремя слоями: (1) переливающийся градиент-фон,
   (2) летящие штрихи двух размеров — за один цикл каждый слой смещается на
   СВОЮ ширину плитки, отсюда параллакс и «поток», (3) пролетающие искры.
   Анимируем только background-position, transform и opacity — без дёрганья
   раскладки. Всё выключается при prefers-reduced-motion (правило ниже) */
/* Объём (фаски + цветная тень) ПРОБОВАЛИ и откатили 14.08: владельцу
   больше нравится плоская плашка на неоморфной тени от .turbo-strip —
   вся «жизнь» держится на потоке штрихов и искрах, а не на выпуклости */
.turbo-strip.st-sell{align-items:center;padding:14px 18px}
/* Слой бегущих диагональных штрихов ПРОБОВАЛИ и убрали 14.08 по просьбе
   владельца: рябил на фоне. Скорость показывают только искры + перелив */
/* Искры: тонкие «кометы» с хвостом, летят слева направо (параметры — в turbo.js) */
.tsp-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;border-radius:18px}
.tsp-fx i{position:absolute;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95));
  animation-name:tspFly;animation-timing-function:linear;animation-iteration-count:infinite;
  /* backwards обязателен: без него искра ЖДЁТ свою задержку прямо у левого
     края кнопки (стиль до старта = transform:none) и только потом улетает */
  animation-fill-mode:backwards;
  will-change:transform}
/* Часть искр — тёплые, золотистые: поток перестаёт быть однотонным
   и читается живее (решение владельца 14.08) */
.tsp-fx i.warm{background:linear-gradient(90deg,rgba(255,214,120,0),rgba(255,205,90,.98))}
@keyframes tspFly{0%{transform:translateX(-160px)}100%{transform:translateX(105vw)}}
.tsp-cta{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:11px;text-align:center}
.tsp-cta-ic svg{width:27px;height:27px;display:block}
.tsp-cta-ic svg *{stroke:#fff}
/* Без тени под текстом (решение владельца 15.08) */
.tsp-cta-txt{color:#fff;font-weight:800;font-size:19.5px;letter-spacing:-.3px}
@keyframes tspFlow{to{background-position:220% 0}}
@keyframes tspShine{0%,55%{transform:translateX(-110%)}85%,100%{transform:translateX(110%)}}
@keyframes tspTick{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(9deg)}}
/* Полосы прогресса при живом ускорении (body.turbo-live ставит turbo.js):
   форма и поведение полос — исходные, меняется только заливка: зелёный
   градиент + мягкое пульсирующее свечение у начала полосы */
/* заливка полосы при живом ускорении задаётся в теме (steklo.css, раздел 6) */
.tsp-frz-txt{position:relative;z-index:1;color:rgba(255,255,255,.94);font-size:13.5px;font-weight:600}
@media (prefers-reduced-motion:reduce){
  .turbo-strip.st-sell,.turbo-strip.st-sell::after,
  .tsp-fx i,.tsp-tick svg{animation:none}
  .tsp-fx{display:none}
}
/* Телефоны: те же чипы, но во всю ширину столбиком — читаются как чек-лист;
   watermark меньше и бледнее, чтобы не мешал тексту */
@media (max-width:560px){
  .turbo-strip{gap:9px;padding:15px 14px}
  .turbo-strip.st-sell{padding:13px 14px}
  .tsp-title{font-size:19px}
  .tsp-cta-txt{font-size:16px}
  .tsp-cta-ic svg{width:24px;height:24px}
  .tsp-bens{grid-template-columns:1fr;gap:9px}
  .tsp-wm{opacity:.12;right:4px}
  .tsp-wm svg{width:104px;height:104px}
}
/* Ступеньки кегля надписи «Ускорить загрузку до 20 МБ/с»: на каждой ширине
   экрана текст обязан влезать в ОДНУ строку (решение владельца 15.08) */
@media (max-width:400px){
  .tsp-cta-txt{font-size:15px}
  .tsp-cta-ic svg{width:22px;height:22px}
}
/* Совсем узкие (≤360): компактнее шрифты */
@media (max-width:360px){
  .tsp-title{font-size:17.5px}
  .tsp-ben{font-size:12px;gap:6px}
  .tsp-cta-txt{font-size:14px}
  .tsp-cta{gap:8px}
  .tsp-cta-ic svg{width:20px;height:20px}
}
@media (max-width:335px){
  .tsp-cta-ic{display:none}
  .tsp-cta-txt{font-size:13.5px}
}
.turbo-ic-sm{width:42px;height:42px;border-radius:13px;flex-shrink:0;display:grid;place-items:center;background:linear-gradient(145deg,#8a5cff,#5f37d8);box-shadow:4px 4px 10px rgba(120,90,210,.4),-3px -3px 8px var(--sh-light),inset 1px 2px 3px rgba(255,255,255,.35)}
.turbo-strip-txt{flex:1;display:flex;flex-direction:column;min-width:0}
.turbo-strip-txt b{font-size:14.5px;color:#5f37d8;letter-spacing:-.2px;line-height:1.3}
.turbo-strip-txt span{font-size:12.5px;color:var(--txt-2);line-height:1.3}
.turbo-arrow{width:30px;height:30px;flex-shrink:0;border-radius:9px;display:grid;place-items:center;background:var(--bg-soft);box-shadow:inset 2px 2px 5px var(--sh-dark),inset -2px -2px 5px var(--sh-light)}
/* ===== секции ===== */
section{position:relative;padding:70px 4vw}
.wrap{max-width:1460px;margin:0 auto}
h2{font-size:clamp(24px,2.6vw,36px);font-weight:800;letter-spacing:-.8px;text-align:center;margin-bottom:14px}
.sec-sub{text-align:center;color:var(--txt-2);max-width:760px;margin:0 auto 44px;font-size:16.5px}
/* шаги */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.step{padding:34px 30px;position:relative}
.step-num{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;font-size:22px;font-weight:800;color:var(--accent);flex-shrink:0;
  background:var(--card);box-shadow:inset 5px 5px 10px var(--sh-dark),inset -5px -5px 10px var(--sh-light)}
.step-head{display:flex;align-items:center;gap:18px;margin-bottom:16px}
.step h3{font-size:18.5px;letter-spacing:-.3px}
.step p{color:var(--txt-2);font-size:15.5px}
/* преимущества */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.feat{padding:32px 30px}
.feat-head{display:flex;align-items:center;gap:18px;margin-bottom:14px}
.feat-ic{width:58px;height:58px;border-radius:19px;flex-shrink:0;display:grid;place-items:center;
  background:var(--card);box-shadow:6px 6px 13px var(--sh-dark),-6px -6px 13px var(--sh-light)}
.feat h3{font-size:17.5px;letter-spacing:-.3px}
.feat p{color:var(--txt-2);font-size:15px}
/* тизеры посадочных */
.lands{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.land{padding:36px 32px;text-decoration:none;color:var(--txt);display:flex;flex-direction:column;transition:.2s}
.land:hover{transform:translateY(-4px)}
.land-head{display:flex;align-items:center;gap:18px;margin-bottom:14px}
.land h3{font-size:19px;letter-spacing:-.3px}
.land p{color:var(--txt-2);font-size:15px}
.land .go{display:inline-block;margin-top:auto;padding-top:16px;color:var(--accent);font-weight:700;font-size:15px}
/* faq */
.faq{max-width:960px;margin:0 auto}
.q{margin-bottom:20px;overflow:hidden}
.q-head{width:100%;text-align:left;padding:22px 28px;font-size:16.5px;font-weight:700;color:var(--txt);background:transparent;border:0;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;font-family:inherit}
.q-head svg{transition:.25s;flex-shrink:0}
.q.open .q-head svg{transform:rotate(45deg)}
.q-body{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--txt-2);font-size:15.5px}
.q.open .q-body{max-height:300px}
.q-body p{padding:0 28px 24px}
/* текстовый блок */
.seo-text{max-width:1050px;margin:0 auto;color:var(--txt-2);font-size:16px}
.seo-text h2{text-align:left;font-size:26px;margin-bottom:18px}
.seo-text p{margin-bottom:14px}
.seo-text .upd{font-size:13.5px;color:#98a0b5;margin-top:20px}
/* подвал */
footer{padding:40px 4vw 34px;text-align:center;color:var(--txt-2);font-size:13.5px}
footer .cols{display:flex;gap:8px 20px;justify-content:center;flex-wrap:wrap;margin-bottom:16px}
footer a{color:var(--txt-2);text-decoration:none;font-size:13px}
footer a:hover{color:var(--accent)}
@media(max-width:560px){footer .cols{gap:7px 16px}footer a{font-size:12.5px}}
/* ===== попап Турбо ===== */
.ovl{position:fixed;inset:0;background:rgba(46,52,64,.45);backdrop-filter:blur(5px);display:none;place-items:center;z-index:50;padding:20px}
/* Малые экраны: попап прижат кверху и скроллится внутри — никогда не
   упирается в нижнюю зону экрана (там живёт рекламный оверлей; на время
   открытого попапа он и так на паузе, это страховка) */
@media (max-width:600px){.ovl{place-items:center;padding:10px}.ovl .modal{max-height:calc(100dvh - 20px);overflow-y:auto;padding:22px 22px 20px}}
.ovl.show{display:grid}
.modal{width:100%;max-width:460px;padding:38px 36px;position:relative;text-align:center}
.modal .x{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:13px;border:0;cursor:pointer;display:grid;place-items:center;background:var(--card);box-shadow:4px 4px 9px var(--sh-dark),-4px -4px 9px var(--sh-light)}
.modal h3{font-size:23px;letter-spacing:-.5px;margin:14px 0 6px}
.modal .price{font-size:15px;color:var(--txt-2);margin-bottom:22px}
.modal .price b{color:var(--txt);font-size:19px}
/* Цена как у больших подписок: крупная цифра фирменным градиентом в
   неоморфной вдавленной пилюле, «в месяц» — мелко серым */
/* Цена: две строки — старая цена со скидочным чипом сверху, сумма и срок
   «на 30 дней» крупно снизу (срок раньше терялся — замечание владельца 15.08) */
/* перечёркнутая базовая цена (конструкция «цена по акции»; базовая цена
   прописывается в оферте) */
/* значки способов оплаты: официальные логотипы (Викисклад, SVG) на белых
   выпуклых капсулах ОДИНАКОВОЙ высоты; у каждого логотипа своя оптическая
   высота — пропорции у всех разные, одинаковый height давал разнобой */
.pay-marks{display:flex;gap:8px;justify-content:center;align-items:center;margin-top:18px;flex-wrap:wrap}
.pay-chip{width:64px;height:28px;border-radius:9px;background:#fff;display:grid;place-items:center;box-shadow:2px 2px 5px var(--sh-dark),-2px -2px 5px var(--sh-light)}
.pay-chip img{display:block;width:auto}
.pl-mir{height:11px}
.pl-visa{height:12px}
.pl-mc{height:17px}
.pl-sbp{height:18px}
.pl-t{height:19px}
/* стрелка спидометра в шапке модалок — живая, как на плашках */
@keyframes mnNeedle{0%{transform:rotate(-55deg)}60%{transform:rotate(55deg)}70%{transform:rotate(55deg)}100%{transform:rotate(-55deg)}}

.tlist{text-align:left;margin:0 auto 24px;max-width:340px}
.tlist li{list-style:none;display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;font-size:15px;font-weight:600;color:var(--txt)}
.tlist svg{flex-shrink:0;margin-top:2px}
.mail-field{display:flex;align-items:center;padding:4px 18px;margin-bottom:16px}
.mail-field input{flex:1;border:0;outline:0;background:transparent;font-size:16px;padding:14px 4px;color:var(--txt);font-family:inherit}
.btn-pay{width:100%;padding:17px;color:#fff;font-size:16px;background:linear-gradient(145deg,#8a5cff,#5f37d8);box-shadow:6px 6px 14px var(--sh-dark),-5px -5px 12px var(--sh-light),inset 1px 2px 3px rgba(255,255,255,.35)}
.modal .alt{margin-top:18px;font-size:14px}
.modal .alt a{color:var(--accent);text-decoration:none;font-weight:600;cursor:pointer}
.modal .fine{margin-top:16px;font-size:12.5px;color:#98a0b5}
/* Чек-бокс согласия на автопродление (требование Т-Банка): неоморфная
   вдавленная галочка + текст с суммой/периодичностью и условием отмены */
.t-consent{display:flex;align-items:flex-start;gap:10px;margin:2px 0 14px;text-align:left;cursor:pointer;user-select:none}
.t-consent input{position:absolute;opacity:0;width:0;height:0}
.t-consent-box{flex-shrink:0;width:22px;height:22px;margin-top:1px;border-radius:7px;background:var(--card);box-shadow:inset 2px 2px 5px var(--sh-dark),inset -2px -2px 5px var(--sh-light);position:relative;transition:.15s}
.t-consent input:checked + .t-consent-box{background:linear-gradient(145deg,#8a5cff,#5f37d8);box-shadow:2px 2px 6px rgba(120,90,210,.4)}
.t-consent input:checked + .t-consent-box::after{content:'';position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid #fff;border-width:0 2.4px 2.4px 0;transform:rotate(42deg)}
.t-consent input:focus-visible + .t-consent-box{outline:2px solid var(--accent);outline-offset:2px}
.t-consent-txt{font-size:12px;line-height:1.45;color:#8a92a6}
/* Выделение в согласии точечное и «еле заметное» (решение владельца 14.08):
   только суммы, полужирные тем же цветом и размером — без тревожности */
.t-consent-txt b{font-weight:600;color:inherit}
.t-consent-txt a{color:#68718a;text-decoration:underline}
/* Подсветка незаполненного при нажатии «Оплатить»: мягкая красная обводка
   (заметно, но не тревожно) — только на поле почты и галке, текст не красим */
.mail-field.err{box-shadow:inset 2px 2px 5px var(--sh-dark),inset -2px -2px 5px var(--sh-light),0 0 0 1.5px #e8a7a7}
.t-consent.err .t-consent-box{box-shadow:inset 2px 2px 5px var(--sh-dark),inset -2px -2px 5px var(--sh-light),0 0 0 1.5px #e8a7a7}
.turbo-badge{width:64px;height:64px;margin:0 auto;border-radius:20px;display:grid;place-items:center;background:linear-gradient(145deg,#8a5cff,#5f37d8);box-shadow:8px 8px 18px var(--sh-dark),-6px -6px 14px var(--sh-light)}
/* планшет: строго по 2 в ряд, без сирот и пустот */
@media(min-width:761px) and (max-width:1100px){
  header{gap:16px}
  nav{gap:3px;padding:5px}
  nav a{font-size:13px;padding:9px 12px;gap:6px}
  nav a svg{width:14px;height:14px}
  .steps,.feats,.lands{grid-template-columns:repeat(2,1fr)}
  /* нечётный третий блок занимает всю ширину, без пустоты справа */
  .steps .step:last-child,.lands .land:last-child{grid-column:1 / -1}
}
@media(max-width:760px){
  .url-row{flex-direction:column}
  .mode-row{margin-top:16px}
  .btn-cta{width:100%}
  /* 4. мобильное меню: лого слева, бургер справа, выпадающая панель */
  header{align-items:center;gap:12px;padding:8px 4vw}
  .hero{padding-top:13px}
  .hero-guides{padding-bottom:15px}
  .sec-guides{padding-top:10px}
  .lead{font-size:16.5px}
  .tool{margin-top:19px}
  .burger{display:flex}
  nav{position:absolute;top:calc(100% - 6px);right:4vw;left:auto;width:auto;min-width:214px;margin-left:0;flex-direction:column;flex-wrap:nowrap;gap:4px;padding:12px;border-radius:18px;
    background:var(--card);box-shadow:9px 9px 24px var(--sh-dark),-9px -9px 24px var(--sh-light);
    opacity:0;transform:translateY(-10px) scale(.98);pointer-events:none;transition:.2s;z-index:40}
  nav.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
  nav a{padding:13px 16px;font-size:15px;border-radius:12px;white-space:nowrap;background:transparent;box-shadow:none}
  .blob{display:none}
  section{padding:48px 5vw}
  .steps,.feats,.lands{grid-template-columns:1fr}
  .dl{padding:20px 18px}
}
/* 2. выбор качества компактной сеткой 3x2 на узких экранах */
@media(max-width:560px){
  .fmt-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .fmt{padding:9px 6px;text-align:center}
}
/* ===== движок: статусы, инжектируемая карточка ===== */
.connection-status{position:fixed;top:18px;right:18px;padding:10px 16px;border-radius:12px;font-size:13.5px;font-weight:600;z-index:60;display:none;background:#fdecec;color:#b4372f;box-shadow:5px 5px 12px var(--sh-dark),-5px -5px 12px var(--sh-light)}
.connection-status.show{display:block}
.dl-thumb svg{opacity:.9}
.dl-note{margin-top:14px;padding:12px 18px;border-radius:13px;font-size:14px;text-align:center;font-weight:600}
.dl-note.processing{color:var(--accent);background:var(--bg-soft);box-shadow:inset 4px 4px 9px var(--sh-dark),inset -4px -4px 9px var(--sh-light)}
.dl-note.done{color:#2f7d52;background:var(--bg-soft);box-shadow:inset 4px 4px 9px var(--sh-dark),inset -4px -4px 9px var(--sh-light)}
.dl-note.error{color:#d96d6d;background:var(--bg-soft);box-shadow:inset 4px 4px 9px var(--sh-dark),inset -4px -4px 9px var(--sh-light)}
.dl-note.queue{color:#6b7a99;background:var(--bg-soft);box-shadow:inset 4px 4px 9px var(--sh-dark),inset -4px -4px 9px var(--sh-light)}
.fmt[disabled]{opacity:.5;cursor:default}
.bar.indet{width:100% !important;transition:none}
/* Плавная полоса: браузер дорисовывает кадры между обновлениями ширины,
   серверу это не стоит ничего */
.bar{transition:width .55s linear}
.again-row{margin-top:20px;display:flex;justify-content:center}
/* блок РСЯ в карточке загрузки: только компьютер, высота 250px, лишнее обрезается */
/* высота ЖЁСТКАЯ (не max): при смене блока новый контейнер секунду пуст,
   пока сеть рисует объявление, и с max-height всё ниже прыгало вверх-вниз;
   место зарезервировано на всё время загрузки, как советует РСЯ (плейсхолдер) */
.ad-card{margin-top:14px;height:250px;overflow:hidden;display:flex;flex-direction:column}
.ad-card-block{display:none;flex:0 0 250px;width:100%;height:250px;overflow:hidden}
/* .pre = следующий блок подгружается под текущим, за нижним краем обрезки (order:1 из скрипта) */
.ad-card-block.on,.ad-card-block.pre{display:block}
@media (max-width:768px){.ad-card{display:none!important}}
.btn-again{padding:15px 34px;color:#fff;background:linear-gradient(145deg,#59b98a,#3a9268);box-shadow:6px 6px 14px var(--sh-dark),-5px -5px 12px var(--sh-light),inset 1px 2px 3px rgba(255,255,255,.35)}
.btn-again:hover{transform:translateY(-1px)}
.btn-cta.busy{opacity:.75;cursor:default}

/* ===== служебные текстовые страницы ===== */
.legal{max-width:900px;margin:0 auto;padding:40px 44px}
.legal h1{font-size:clamp(26px,3vw,38px);text-align:left;letter-spacing:-.8px;margin-bottom:8px}
.legal .upd{color:#98a0b5;font-size:13.5px;margin-bottom:28px}
.legal h2{font-size:20px;text-align:left;letter-spacing:-.3px;margin:28px 0 12px}
.legal p{color:var(--txt-2);font-size:16px;margin-bottom:12px}
.legal ul{color:var(--txt-2);font-size:16px;margin:0 0 12px 4px;padding-left:22px}
.legal li{margin-bottom:8px}
.legal a{color:var(--accent);text-decoration:none}
.legal a:hover{text-decoration:underline}
.contact-box{display:flex;align-items:center;gap:22px;padding:28px 30px;margin:24px 0;flex-wrap:wrap}
.contact-ic{width:60px;height:60px;border-radius:19px;flex-shrink:0;display:grid;place-items:center;background:var(--card);box-shadow:6px 6px 13px var(--sh-dark),-6px -6px 13px var(--sh-light)}
.contact-box .cmail{font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--txt);text-decoration:none}
.contact-box .cmail:hover{color:var(--accent)}
.contact-box .csub{color:var(--txt-2);font-size:14.5px;margin-top:3px}
.btn-mail{margin-left:auto;padding:15px 30px;color:#fff;background:linear-gradient(145deg,#4d79ff,#2c53d8);box-shadow:6px 6px 14px var(--sh-dark),-5px -5px 12px var(--sh-light),inset 1px 2px 3px rgba(255,255,255,.4);text-decoration:none;display:inline-block}
.btn-mail:hover{transform:translateY(-1px)}
.err-wrap{text-align:center;padding:80px 5vw}
.err-code{font-size:clamp(90px,16vw,180px);font-weight:800;letter-spacing:-4px;line-height:1;background:linear-gradient(120deg,#3d6bff,#7a5cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.err-wrap h1{font-size:26px;margin:10px 0 14px}
.err-wrap p{color:var(--txt-2);font-size:17px;margin-bottom:28px}
@media(max-width:760px){.legal{padding:30px 24px}.btn-mail{margin-left:0;width:100%;text-align:center}}

/* выбор качества перед скачиванием */
.q-label{font-size:13.5px;font-weight:600;color:var(--txt-2);margin-bottom:10px}
.dl-go{width:100%;margin-top:4px}

/* кнопка на служебных страницах — как основная кнопка сайта */
a.btn-mail{margin-left:auto;padding:16px 32px;color:#fff;font-size:16px;font-weight:700;border-radius:16px;
  background:linear-gradient(145deg,#4d79ff,#2c53d8);
  box-shadow:6px 6px 14px var(--sh-dark),-5px -5px 12px var(--sh-light),inset 1px 2px 3px rgba(255,255,255,.4);
  text-decoration:none;display:inline-block;transition:.15s}
a.btn-mail:hover{transform:translateY(-2px);color:#fff}
a.btn-mail:active{transform:translateY(1px)}

/* статьи-гайды */
.crumbs{font-size:13.5px;color:#98a0b5;margin-bottom:18px}
.crumbs a{color:#98a0b5;text-decoration:none}
.crumbs a:hover{color:var(--accent)}
.art-meta{margin-top:18px;font-size:13.5px;color:#98a0b5}
.article{max-width:900px;margin:0 auto;text-align:left}
.article h2{text-align:left;font-size:clamp(21px,2.2vw,27px);letter-spacing:-.5px;margin:38px 0 14px;scroll-margin-top:24px}
.article h3{text-align:left;font-size:18.5px;letter-spacing:-.3px;margin:22px 0 8px;color:var(--txt)}
.article p{color:var(--txt-2);font-size:16px;line-height:1.68;margin-bottom:13px}
.article a{color:var(--accent);text-decoration:none}
.article a:hover{text-decoration:underline}
.article .art-cta{margin:24px 0 8px}
.article a.art-go{display:block;width:100%;text-align:center;padding:16px;border-radius:16px;font-weight:700;font-size:15.5px;color:var(--txt-2);text-decoration:none;background:var(--card);box-shadow:6px 6px 14px var(--sh-dark),-6px -6px 14px var(--sh-light);transition:.15s}
.article a.art-go:hover{color:var(--accent);text-decoration:none;transform:translateY(-1px)}
.article a.art-go:active{transform:translateY(1px);box-shadow:inset 3px 3px 7px var(--sh-dark),inset -3px -3px 7px var(--sh-light)}
/* шапка статьи: всё слева, кромка в кромку с колонкой текста */
.art-crumbs-wrap{max-width:1230px;margin:0 auto 16px}
.art-head-wrap{max-width:1230px;margin:0 auto 18px}
.art-head-wrap h1{text-align:left;margin:0}
.art-layout .art-meta{margin:0 0 18px}
.art-lead{color:var(--txt-2);font-size:16px;line-height:1.68;margin:0 0 20px;max-width:930px}

/* содержание на мобильных: сворачиваемый блок */
.toc-mob{display:none}
@media(max-width:1100px){
  .toc-mob{display:block;margin:24px 0 30px;border-radius:16px;background:var(--card);box-shadow:6px 6px 14px var(--sh-dark),-6px -6px 14px var(--sh-light)}
  .toc-mob summary{list-style:none;cursor:pointer;padding:15px 20px;font-weight:700;font-size:15px;color:var(--txt);display:flex;justify-content:space-between;align-items:center}
  .toc-mob summary::-webkit-details-marker{display:none}
  .toc-mob summary::after{content:'';width:9px;height:9px;border-right:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);border-radius:1px;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
  .toc-mob[open] summary::after{transform:rotate(225deg) translateY(-2px)}
  .toc-mob a{display:block;padding:10px 20px;font-size:14.5px;font-weight:600;color:var(--txt-2);text-decoration:none;border-top:1px solid rgba(150,160,190,.14)}
}

/* обложки гайдов */
.lands-guides{grid-template-columns:repeat(3,1fr)}
@media(min-width:761px) and (max-width:1100px){.lands-guides{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.lands-guides{grid-template-columns:1fr}}
.land-img{display:block;width:100%;height:auto;border-radius:16px;margin-bottom:18px}
.lands-guides .land h3{min-height:3.1em}
.lands-guides .land p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(4 * 1.55em)}
.lands-guides .land .go{padding-top:18px;align-self:flex-end} /* ссылка справа (владелец 15.09) */
.art-cover{display:block;width:100%;height:auto;border-radius:22px;margin-bottom:20px;
  box-shadow:7px 7px 16px var(--sh-dark),-7px -7px 16px var(--sh-light)}

/* макет статьи с оглавлением-сайдбаром */
.art-layout{max-width:1290px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:44px;align-items:start}
.art-col{min-width:0}
.art-layout .article{max-width:none;margin:0}
.faq-article{max-width:none;margin:26px 0 0}
.toc-side{position:sticky;top:24px;padding:20px 14px 18px 20px;border-radius:20px}
.toc-side b{display:block;font-size:14.5px;color:var(--txt);margin:0 0 10px 12px}
.toc-side a{position:relative;display:block;padding:7.5px 10px 7.5px 14px;font-size:14px;font-weight:600;line-height:1.35;color:var(--txt-2);text-decoration:none;border-left:2.5px solid transparent;border-radius:0 11px 11px 0;transition:color .15s,background .15s,border-color .15s}
.toc-side a:hover{color:var(--txt)}
.toc-side a.on{color:var(--accent);border-left-color:var(--accent);background:var(--bg-soft);box-shadow:inset 2px 2px 5px var(--sh-dark),inset -2px -2px 5px var(--sh-light)}
@media(max-width:1100px){.art-layout{display:block}.toc-side{display:none}}

/* сравнительная таблица: на десктопе таблица, на телефоне карточки.
   Разметка остаётся <table> ради машиночитаемости (SEO/GEO). */
.cmp{width:100%;margin:10px 0 26px;border-collapse:separate;border-spacing:0;font-size:14.5px;color:var(--txt-2);
  background:var(--card);border-radius:20px;overflow:hidden;
  box-shadow:7px 7px 16px var(--sh-dark),-7px -7px 16px var(--sh-light)}
.cmp th{font-weight:700;color:var(--txt);text-align:left;padding:15px 16px;font-size:13.5px}
.cmp td{padding:13px 16px;border-top:1px solid rgba(150,160,190,.16);vertical-align:top}
.cmp td:first-child{font-weight:700;color:var(--txt)}
@media(max-width:760px){
  .cmp,.cmp tbody,.cmp tr,.cmp td{display:block;width:100%}
  .cmp thead{display:none}
  .cmp{background:transparent;box-shadow:none;overflow:visible;border-radius:0}
  .cmp tr{background:var(--card);border-radius:18px;margin-bottom:16px;padding:6px 0 10px;
    box-shadow:6px 6px 14px var(--sh-dark),-6px -6px 14px var(--sh-light)}
  .cmp td{border:0;padding:7px 18px;display:flex;justify-content:space-between;gap:14px;text-align:right}
  .cmp td::before{content:attr(data-label);color:#98a0b5;font-size:13px;flex-shrink:0;text-align:left}
  .cmp td:first-child{font-size:16.5px;padding-top:13px;padding-bottom:4px;text-align:left}
  .cmp td:first-child::before{display:none}
  .article{padding:0 2px}
}

/* Рекламная панель РСЯ — липучка снизу, перенесена с прежнего сайта как есть:
   высота 320px на десктопе и 250px на мобильных, лишнее обрезается */
.ad-ovl{position:fixed;bottom:0;left:0;right:0;z-index:9999;transition:transform .4s ease-in-out,opacity .4s ease-in-out;backdrop-filter:blur(5px);background:rgba(33,33,33,.3);border-top:1px solid #666;max-height:320px;box-shadow:0 -4px 24px rgba(0,0,0,.15)}
.ad-ovl-hidden{transform:translateY(100%);opacity:0;pointer-events:none}
.ad-ovl-toggle{position:absolute;top:-26px;right:0;z-index:10001}
.ad-ovl-close{width:40px;height:26px;background:#666;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:8px 0 0 0;transition:background-color .3s ease;padding:0}
.ad-ovl-close:hover{background:#888}
.ad-ovl-close:disabled{cursor:default}
.ad-ovl-count{color:#fff;font-size:13px;font-weight:700;line-height:1}
.ad-ovl-content{position:relative;padding:0;max-height:320px;overflow:hidden}
.ad-ovl-block{display:none;width:100%}
@media (min-width:769px){.ad-ovl-block.ad-desktop.on{display:block}}
@media (max-width:768px){
  .ad-ovl-block.ad-mobile.on{display:block}
  .ad-ovl,.ad-ovl-content{max-height:250px}
  .ad-ovl-close{width:35px}
}

/* логотипы платёжных систем в подвале (требование эквайринга) */

/* мелкий юр-текст: ссылки тёмно-серые, не кричат */
.modal .fine a{color:#68718a;text-decoration:underline}
/* единая ссылка входа для подписчиков: фирменный градиент, заметная */
.modal .alt a.alt-grad{font-size:15.5px;font-weight:700;background:linear-gradient(120deg,#3d6bff,#7a5cff);-webkit-background-clip:text;background-clip:text;color:transparent;cursor:pointer;text-decoration:underline;text-decoration-color:#5f6cff;text-underline-offset:4px;text-decoration-thickness:2px}
.modal .alt a.alt-grad:hover{filter:brightness(1.1)}

/* Компактное окно Турбо на мобильных — в КОНЦЕ файла, чтобы
   перебивать базовые размеры (иначе окно скроллится на iPhone) */
@media (max-width:600px){.turbo-badge{width:48px;height:48px;border-radius:15px}.turbo-badge svg{width:24px;height:24px}.modal h3{font-size:20px;margin:8px 0 4px}.tlist{margin:0 auto 12px;max-width:320px}.tlist li{margin-bottom:8px;font-size:13px;gap:9px}.tlist svg{width:16px;height:16px}.mail-field{margin-bottom:11px}.mail-field input{padding:11px 4px;font-size:15px}.btn-pay{padding:14px;font-size:15px}.pay-marks{margin-top:11px;gap:6px}.pay-chip{width:54px;height:24px}.modal .alt{margin-top:11px}.modal .alt a.alt-grad{font-size:14.5px}.modal .fine{margin-top:9px;font-size:11px;line-height:1.4}.tc-code{padding:10px;font-size:20px}}
/* совсем низкие экраны (iPhone SE1/альбомная): убираем логотипы,
   ещё плотнее — лишь бы влезало без скролла */
@media (max-height:600px){.ovl .modal{padding:16px 20px 16px}.turbo-badge{display:none}.ts-info{margin:8px 0 2px}.ts-row{padding:6px 0}.ts-bens{margin:10px 0 2px;padding:9px 14px}.ts-ben{font-size:12.5px;line-height:1.5}.ts-active{margin:4px 0 2px}.ts-note{margin-top:8px;font-size:11.5px}.ts-manage-link{margin-top:9px}.ts-resume-btn{margin-top:9px;padding:10px}.turbo-badge{width:40px;height:40px}.turbo-badge svg{width:20px;height:20px}.modal h3{font-size:18px;margin:6px 0 3px}.tlist{margin:0 auto 10px}.tlist li{margin-bottom:6px;font-size:12.5px}.pay-marks{display:none}.mail-field{margin-bottom:9px}.modal .fine{margin-top:8px}}

/* на узких экранах статистика загрузки — в 2 строки, чтобы не резалась */
@media (max-width:400px){.dl-stats{flex-wrap:wrap;justify-content:flex-start;gap:4px 0}.dl-stats .stat{flex:0 0 100%}}
/* ссылка в поле не выезжает за рамку на узких экранах */
.url-field{min-width:0}
.url-field input{min-width:0;text-overflow:ellipsis}
/* плашка не влезает рядом с логотипом — ужимаем (не двигаем вниз) */
.turbo-badge-fx.tb-tight{font-size:11px;padding:5px 9px 5px 7px;gap:4px;border-radius:11px}
.turbo-badge-fx.tb-tight svg{width:13px;height:13px}
/* на мобильных: 6px между иконкой и словом «rutlink» */
@media (max-width:600px){.logo-mark{margin-right:-8px}}
/* очень узкие экраны: компактнее лого, чтобы плашка «Ускорение вкл.»
   влезала в шапку в одну строку без наезда */
@media (max-width:360px){.logo{font-size:22px}.logo-mark{width:46px;height:46px;margin-right:-6px}}

/* ===== бегущая строка преимуществ (замена чипсов) ===== */
.ticker{margin-top:24px;position:relative;overflow:hidden;padding:11px 0;
  border-top:1px solid rgba(120,130,160,.22);border-bottom:1px solid rgba(120,130,160,.22)}
.tick-row{display:flex;flex-wrap:wrap;justify-content:center;white-space:normal}
.ti{font-size:13.5px;font-weight:700;color:var(--accent);display:inline-flex;align-items:center}
.ti::after{content:'';width:4px;height:4px;margin:0 14px;background:currentColor;opacity:.5}


/* ==================== ТЕМА ==================== */

:root{
  /* ---- ПАЛИТРА: графит и кислотный лайм ----
     Лайм как текст на чёрном даёт 14.7:1 — лучший показатель,
     поэтому он работает и заголовками, и значками, и заливкой
     на продающей кнопке. Фон почти обесцвечен, чтобы лайм
     оставался единственным ярким цветом */
  --ink:#0b0c0a;
  --ink-2:#131510;
  --on:#eef1fa;
  --on-2:rgba(238,241,250,.62);
  --on-3:rgba(238,241,250,.38);

  --a:#cfef00;         /* лайм: заголовки, значки, акценты */
  --a-2:#e2ff3d;
  /* Кнопка Турбо: розовый градиент на Hot Pink из палитры,
     текст и значки лаймом */
  --sell:#ff4fa3;
  --sell-2:#cc2f7d;
  --sell-ink:#cfef00;  /* лайм: текст и значки НА кнопке */
  --cta:#cfef00;       /* главная «Скачать»: лайм */
  --cta-ink:#12140d;   /* тёмный текст на нём, 14.7:1 */
  --own:#2fd18c;       /* подписка активна */
  --hot:#ff5a2b;       /* ошибка */
  --ok:#31d98a;        /* готово */
  --line:rgba(255,255,255,.12);

  --bl-1:rgba(70,78,60,.46);--bl-2:rgba(48,54,42,.44);
  --bl-3:rgba(38,42,34,.42);--bl-4:rgba(207,239,0,.10);

  --g-bg:linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.028));
  --g-blur:blur(16px) saturate(1.5);
  --g-edge:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(255,255,255,.05),
           inset 1px 0 0 rgba(255,255,255,.07),inset -1px 0 0 rgba(255,255,255,.07);
  --g-drop:0 18px 48px rgba(0,0,0,.5);
  --r:22px;

  --bg:var(--ink);--bg-soft:rgba(255,255,255,.06);--card:rgba(255,255,255,.06);
  --sh-light:rgba(255,255,255,0);--sh-dark:rgba(0,0,0,.4);
  --txt:var(--on);--txt-2:var(--on-2);--accent:var(--a);--accent-2:var(--a-2);
}

/* ===== 1. Сброс светлого оформления ===== */
.nm,.nm-in,.nm-flat,header,nav,nav a,.burger,.burger span,
.url-field,.url-field input,.btn,.btn-cta,.btn-again,
.mode,.seg,.seg.on,.chip,.chip .ci,.dl,.dl-thumb,.bar-wrap,.bar,
.step,.step-num,.feat,.feat-ic,.q,.q-head,.land,
.dl-note,.dl-note.processing,.dl-note.done,.dl-note.error,.dl-note.queue,
footer,.connection-status,.turbo-strip{
  background:none;box-shadow:none;
}
.blob{display:none!important}

*{box-sizing:border-box}
/* Плавную прокрутку включаем только после первого действия человека.
   Глобальное scroll-behavior:smooth заставляет браузер анимировать и
   собственные поправки прокрутки при загрузке — страница уезжает и
   пару секунд возвращается на место */
html{scroll-behavior:auto}
html.smooth{scroll-behavior:smooth}
html{background:var(--ink)}
body{
  margin:0;background:transparent;color:var(--on);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  line-height:1.55;padding-top:14px;
  /* Не hidden: в Safari overflow-x:hidden на теле делает его областью
     прокрутки, и прилипающая шапка при загрузке прыгает. clip обрезает
     так же, но области прокрутки не создаёт. Старым браузерам правило
     непонятно, они его пропустят — горизонтального выезда у нас нет */
  overflow-x:clip;
}
::selection{background:var(--a);color:var(--ink)}
::-moz-selection{background:var(--a);color:var(--ink)}

/* ============================================================
   Палитры. Связка индиго → фиолетовый выброшена: по данным
   разборов 2026 года это главная примета сайта, сделанного
   нейросетью, и идёт она от цвета по умолчанию в Tailwind.

   В каждой палитре у кнопки Турбо СВОЙ цвет (--sell), которого
   больше нет нигде на странице. Она обязана оставаться самой
   заметной точкой: это продажа.
   ============================================================ */

/* ===== 2. Живой фон: стеклу нужно что преломлять ===== */
/* Фон уходит СВОИМ слоем за содержимое. Раньше здесь было правило
   body > *:not(.bgfx){position:relative}, и оно ломало попапы: скрипт
   кладёт оверлей прямо в body, тот получал position:relative вместо
   fixed и вываливался под футер */
.bgfx{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-color:var(--ink);
  background-image:
    radial-gradient(34vw 34vw at 16% 13%, var(--bl-1), transparent 68%),
    radial-gradient(30vw 30vw at 89% 32%, var(--bl-2), transparent 68%),
    radial-gradient(27vw 27vw at 42% 93%, var(--bl-3), transparent 68%),
    radial-gradient(18vw 18vw at 71% 77%, var(--bl-4), transparent 70%);
}
/* Зерно против полос в градиентах. Раньше тут была сетка из точек с
   шагом 3px — она складывалась в видимую клетку. Теперь настоящий шум:
   у него нет повторяющегося рисунка, и браузер рисует его один раз */
.bgfx::after{
  content:"";position:absolute;inset:0;opacity:.055;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='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px;
}

/* ===== 3. Стекло ===== */
.gl{
  position:relative;background:var(--g-bg);
  border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--g-drop),var(--g-edge);
}
/* размытие фона — только на главных поверхностях: каждая такая панель
   заставляет видеокарту пересчитывать фон под собой */
header.gl,.tool.gl,.dl.gl,.modal.gl{
  -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur);
}
/* остальным хватает плотной заливки: под ними фон неподвижен */
.step.gl,.feat.gl,.land.gl,.q.gl{
  background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.03)),
             rgba(12,14,21,.72);
}
/* блик по верхней кромке — то, что отличает стекло от простой заливки */
.gl::after{
  content:"";position:absolute;left:14%;right:14%;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);
  pointer-events:none;
}
/* преломление включается скриптом только там, где браузер умеет */
html.can-refract header.gl,html.can-refract .tool.gl,html.can-refract .dl.gl{
  -webkit-backdrop-filter:blur(18px) saturate(1.6) url(#glRefract);
  backdrop-filter:blur(18px) saturate(1.6) url(#glRefract);
}

/* ===== 4. Шапка одной плашкой ===== */
/* Верхний отступ шапки перенесён на тело страницы. Пока шапка была
   первым элементом, её margin-top схлопывался с краем документа, а
   как только скрипт вставлял фоновый слой, схлопывание прекращалось
   и шапка опускалась на 14px — страница дёргалась в первом же кадре */
/* Шапка едет вместе со страницей: прилипание убрано по решению владельца.
   top не задаём вовсе — при relative он работал бы смещением вниз, из-за
   чего шапка и прыгала на 14px, когда скрипт вешал на неё класс .gl */
header{
  position:relative;z-index:40;
  width:min(1180px,calc(100% - 32px));margin:0 auto;
  display:flex;align-items:center;gap:18px;padding:10px 10px 10px 20px;
  border-radius:999px;
}
.logo{
  display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--on);
  font-weight:800;font-size:19px;letter-spacing:-.5px;flex:0 0 auto;
}
.logo-mark{width:28px;height:28px}
header nav{
  margin:0 auto;display:flex;align-items:center;gap:4px;
  background:none;border:0;padding:0;border-radius:0;
}
/* Пункты меню: рамка выбора из пиксельных уголков, как в восьмибитных
   играх. Выбранный пункт — фиолетовая плашка с лаймовыми уголками и
   знаком; при наведении оттенок фиолетового и полупрозрачные уголки.
   Скругления нет: уголки стоят ровно в углах плашки */
header nav a{
  position:relative;display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:0;
  white-space:nowrap; /* пункт меню никогда не переносится на две строки (владелец 15.09) */
  font-size:14px;color:var(--on-2);text-decoration:none;
  transition:color .2s ease,background .2s ease;
}
header nav a svg{opacity:.6;transition:opacity .2s ease,color .2s ease}
header nav a::before,header nav a::after{
  content:'';position:absolute;width:9px;height:9px;opacity:0;pointer-events:none;
  transition:opacity .2s ease;
}
header nav a::before{left:0;top:0;border-left:3px solid var(--a);border-top:3px solid var(--a)}
header nav a::after{right:0;bottom:0;border-right:3px solid var(--a);border-bottom:3px solid var(--a)}
header nav a:hover{color:var(--on);background:rgba(123,63,242,.18)}
header nav a:hover svg{opacity:1}
header nav a:hover::before,header nav a:hover::after{opacity:.55}
header nav a.on{color:#fff;background:#7b3ff2}
header nav a.on svg{opacity:1;color:var(--a)}
header nav a.on::before,header nav a.on::after{opacity:1}

/* кнопка Ускорить — самая заметная точка шапки */
.hd-turbo{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:9px;
  padding:11px 20px;border:0;border-radius:999px;cursor:pointer;font:inherit;
  /* отступ 9px нужен между значком и текстом, но между словами он
     давал дыру — поэтому слова собраны в один блок со своим шагом */
  font-size:14.5px;font-weight:700;color:var(--sell-ink);position:relative;overflow:hidden;
  background:linear-gradient(120deg,var(--sell),var(--sell-2),var(--sell));
  background-size:100% 100%;font-weight:800;
  /* верхняя белая линия убрана: она осветляла розовый.
     Бегущий блик оставлен */
  box-shadow:0 6px 20px color-mix(in srgb,var(--sell) 55%,transparent);
  transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s ease;
}
@keyframes tFlow{to{background-position:220% 0}}
.hd-turbo::before{
  content:"";position:absolute;top:-50%;bottom:-50%;left:-140px;width:120px;
  /* белого в блике 20%: движение видно, розовый не выцветает */
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.20),transparent);
  transform:skew(-24deg);animation:tShine 4.2s ease-in-out infinite;
}
@keyframes tShine{0%,62%{transform:translateX(0) skew(-24deg)}
  92%,100%{transform:translateX(420px) skew(-24deg)}}
.hd-turbo:hover{transform:translateY(-2px);
  box-shadow:0 13px 34px color-mix(in srgb,var(--sell) 68%,transparent)}
.hd-turbo > *{position:relative}
.hd-turbo .dot{width:7px;height:7px;border-radius:50%;background:#8affc4;
  box-shadow:0 0 8px #8affc4}
/* активная подписка: те же розовые штрихи, что на полосе скачивания, но неподвижные; надпись и знак лаймовые как у гостя (решение владельца 14.09) */
.hd-turbo.is-on{background:repeating-linear-gradient(-45deg,var(--sell) 0 25%,color-mix(in srgb,var(--sell) 86%,#fff) 25% 50%);
  background-size:34px 34px;animation:none}
.hd-turbo.is-frozen{background:linear-gradient(120deg,#b07a12,#dfae4e);animation:none}
/* родная плавающая кнопка не нужна: она переехала в шапку */
.turbo-badge-fx{display:none!important}

.burger{display:none}

/* ===== 5. Первый экран ===== */
.hero{padding:70px 4vw 26px;text-align:center;position:relative}
.hero h1{font-size:clamp(34px,5vw,60px);line-height:1.06;font-weight:800;letter-spacing:-1.6px}
/* градиент по буквам убран: см. раздел 11 — цвет берётся из палитры */
.lead{max-width:820px;margin:20px auto 0;color:var(--on-2);font-size:17px}

.tool{max-width:980px;margin:34px auto 0;padding:26px;border-radius:26px}
.url-row{display:flex;gap:12px;flex-wrap:wrap}
.url-field{
  flex:1 1 260px;display:flex;align-items:center;gap:10px;min-height:58px;padding:0 18px;
  background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:16px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.url-field svg path{stroke:currentColor}
.url-field input{
  flex:1;min-width:0;border:0;background:none;outline:0;font:inherit;font-size:16px;color:var(--on);
}
.url-field input::placeholder{color:var(--on-3)}
.url-field:focus-within{border-color:rgba(122,162,255,.6);
  box-shadow:0 0 0 4px rgba(77,124,255,.14)}

.btn{border:0;cursor:pointer;font-family:inherit;font-weight:700}
.btn-cta{
  min-height:58px;padding:0 30px;border-radius:16px;font-size:16px;color:#fff;
  background:var(--cta);color:var(--cta-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .16s cubic-bezier(.16,1,.3,1),box-shadow .16s ease,filter .16s ease;
}
.btn-cta:hover{transform:translateY(-2px);filter:brightness(1.08);
  box-shadow:0 8px 22px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-cta:active{transform:translateY(0)}
.btn-cta.busy{background:rgba(255,255,255,.1);color:var(--on-3);box-shadow:none;
  transform:none;filter:none;cursor:default}

.mode-row{display:flex;justify-content:center;margin-top:18px}
.mode{
  display:inline-flex;gap:4px;padding:5px;border-radius:999px;
  background:rgba(0,0,0,.3);border:1px solid var(--line);
}
.seg{
  display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:0;
  border-radius:999px;background:none;cursor:pointer;font-size:14px;font-weight:600;
  color:var(--on-2);transition:.2s ease;
}
.seg:hover{color:var(--on)}
.seg.on{background:rgba(255,255,255,.14);color:var(--on);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.terms{margin-top:18px;font-size:13px;color:var(--on-3);text-align:center}
.terms a{color:#9db4ff;text-decoration:none}

/* ===== 6. Карточка загрузки ===== */
.dl{max-width:980px;margin:20px auto 0;padding:24px 26px;border-radius:24px;text-align:left}
.dl-head{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.dl-thumb{
  flex:0 0 auto;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--a),var(--a-2));
  box-shadow:0 6px 18px rgba(80,80,220,.45);
}
.dl-title{font-size:16px;font-weight:700;line-height:1.3}
.dl-sub{font-size:13px;color:var(--on-3);margin-top:3px}
.q-label{font-size:12.5px;font-weight:600;color:var(--on-3);margin-bottom:10px;
  text-transform:uppercase;letter-spacing:.8px}
.fmt-row{display:flex;flex-wrap:wrap;gap:8px}
.fmt{
  padding:9px 16px;border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.04);color:var(--on-2);
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:.2s ease;
}
.fmt:hover:not(:disabled){background:rgba(255,255,255,.1);color:var(--on)}
.fmt.on{background:linear-gradient(120deg,var(--a),var(--a-2));color:#fff;border-color:transparent;
  box-shadow:0 6px 18px rgba(80,80,220,.4)}
.fmt:disabled{opacity:.4;cursor:default}
.dl-go{width:100%;margin-top:18px}

#dlProgress{margin-top:20px}
.bar-wrap{padding:4px;border-radius:999px;background:rgba(0,0,0,.34);
  border:1px solid var(--line)}
.bar{height:12px;border-radius:999px;
  background:linear-gradient(90deg,var(--a),var(--a-2));
  /* синее свечение убрано: оно осталось от прежней синей полосы и
     расплывалось под лаймовой. И снят бег фона — анимация mv из
     старой вёрстки гоняла подсветку от начала полосы по кругу.
     Бегущая заливка на этапе подготовки живёт отдельным правилом
     .bar.indet.moving и работает как раньше */
  box-shadow:none;animation:none}
/* живое ускорение у подписчика (body.turbo-live ставит turbo.js): бегущие лаймовые
   штрихи и свечение вместо ровной заливки, видно, что скорость поднята */
/* штрихи заданы в долях квадратной плитки 34px под углом 45°: период рисунка по горизонтали
   ровно равен плитке, а сдвиг анимации ровно одна плитка, поэтому петля бесшовная, без рывка */
body.turbo-live .bar{background:repeating-linear-gradient(-45deg,var(--sell) 0 25%,color-mix(in srgb,var(--sell) 86%,#fff) 25% 50%);
  background-size:34px 34px;animation:turboMv .9s linear infinite;
  box-shadow:0 0 14px color-mix(in srgb,var(--sell) 45%,transparent)}
@keyframes turboMv{to{background-position:34px 0}}
/* полоса подготовки у подписчика: тот же пробегающий блик, что у гостя, но розовый (штрихи только у полосы скачивания) */
body.turbo-live .bar.indet{background:linear-gradient(90deg,transparent,var(--sell),var(--sell-2),transparent) no-repeat;
  background-size:40% 100%;animation:none;box-shadow:none}
body.turbo-live .bar.indet.moving{animation:glSweep 1.3s cubic-bezier(.5,0,.4,1) infinite}
@media (prefers-reduced-motion:reduce){body.turbo-live .bar,body.turbo-live .bar.indet.moving{animation:none}}
.bar.indet{width:100%!important;
  background:linear-gradient(90deg,transparent,var(--a),var(--a-2),transparent) no-repeat;
  background-size:40% 100%}
.bar.indet.moving{animation:glSweep 1.3s cubic-bezier(.5,0,.4,1) infinite}
@keyframes glSweep{0%{background-position:-45% 0}100%{background-position:145% 0}}
.dl-stats{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  margin-top:14px;font-size:13.5px;color:var(--on-3)}
.dl-stats .stat{display:inline-flex;align-items:center;gap:8px}
.dl-stats b{color:var(--on);font-weight:700}
.dl-note{
  margin-top:16px;padding:13px 18px;border-radius:14px;font-size:14px;font-weight:600;
  text-align:center;background:rgba(255,255,255,.05);border:1px solid var(--line);
}
.dl-note.processing{color:#9db4ff}
.dl-note.queue{color:#b9c2dd}
.dl-note.done{color:var(--ok);border-color:rgba(49,217,138,.32)}
.dl-note.error{color:#ff8a7a;border-color:rgba(255,138,122,.32)}
.again-row{display:flex;justify-content:center;margin-top:16px}
/* лаймовая, как главная кнопка «Скачать видео» (замечание владельца 15.09) */
.btn-again{
  min-height:50px;padding:0 26px;border-radius:14px;border:0;
  background:var(--cta);color:var(--cta-ink);font-size:15px;font-weight:800;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .16s cubic-bezier(.16,1,.3,1),filter .16s ease;
}
.btn-again:hover{transform:translateY(-2px);filter:brightness(1.08)}
@media (max-width:620px){.btn-again{width:100%}}

/* полоса Турбо внутри карточки */
.turbo-strip,.turbo-strip.st-sell,.turbo-strip.st-on,.turbo-strip.st-frz{
  flex-direction:row;align-items:center;gap:14px;margin-top:18px;padding:15px 18px;
  border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(120deg,rgba(77,124,255,.2),rgba(139,92,246,.2));
  animation:none;
}
.turbo-strip.st-on{background:linear-gradient(120deg,rgba(255,79,163,.2),rgba(123,63,242,.22))}
/* заголовок подписчика: лаймовая пиксельная молния + текст в одну строку */
.turbo-strip.st-on .tsp-head,.turbo-strip.st-frz .tsp-head{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.turbo-strip.st-on .tsp-head svg,.turbo-strip.st-frz .tsp-head svg{width:18px;height:18px;flex:0 0 auto;color:var(--a);image-rendering:pixelated}
.turbo-strip.st-on .tsp-head svg rect{fill:currentColor;stroke:none}
.turbo-strip.st-on .tsp-title,.turbo-strip.st-frz .tsp-title{font-size:16.5px;text-shadow:none}
.turbo-strip.st-on .tsp-bens{flex:1 1 auto;min-width:0;gap:8px 16px}
.turbo-strip.st-on .tsp-ben{font-size:12px;font-weight:600}
/* Телефон: заголовок сверху, выгоды под ним в один столбец, водяной знак
   мельче и в правом нижнем углу, чтобы не лез под текст (жалоба владельца 15.09) */
@media (max-width:560px){
  .turbo-strip.st-on,.turbo-strip.st-frz{flex-direction:column;align-items:stretch;gap:10px;padding:14px 14px 13px}
  .turbo-strip.st-on .tsp-bens{grid-template-columns:1fr;gap:6px}
  .turbo-strip.st-on .tsp-ben{font-size:12px}
  .turbo-strip.st-on .tsp-title,.turbo-strip.st-frz .tsp-title{font-size:15.5px}
  .turbo-strip.st-on .tsp-head svg,.turbo-strip.st-frz .tsp-head svg{width:16px;height:16px}
  .turbo-strip.st-on .tsp-wm,.turbo-strip.st-frz .tsp-wm{top:auto;bottom:-14px;right:-6px;transform:rotate(-12deg);opacity:.1}
  .turbo-strip.st-on .tsp-wm svg,.turbo-strip.st-frz .tsp-wm svg{width:84px;height:84px}
}
@media (min-width:561px) and (max-width:760px){.turbo-strip.st-on .tsp-bens{grid-template-columns:1fr}}
.turbo-strip.st-frz{background:linear-gradient(120deg,rgba(255,196,0,.16),rgba(123,63,242,.18))}
/* подписчик: водяной знак-молния и лаймовые пиксельные галочки у выгод */
.tsp-wm svg{color:#7b3ff2;image-rendering:pixelated;opacity:1}
.tsp-wm svg rect{fill:currentColor;stroke:none}
.turbo-strip.st-frz .tsp-wm svg{color:#ffc400}
.turbo-strip.st-on .tsp-ben svg{width:13px;height:13px;color:var(--a);image-rendering:pixelated}
.turbo-strip.st-on .tsp-ben svg rect{fill:currentColor;stroke:none}
.turbo-strip.st-on .tsp-ben{color:var(--on)}
.turbo-strip::after{display:none!important}
.turbo-ic-sm{flex:0 0 auto;width:36px;height:36px;border-radius:11px;display:grid;
  place-items:center;background:linear-gradient(135deg,var(--a),var(--a-2))}
.turbo-strip-txt{flex:1;min-width:0;display:block;text-align:left}
.turbo-strip-txt b{display:block;font-size:14.5px;color:var(--on)}
.turbo-strip-txt span{display:block;font-size:12.5px;color:var(--on-3);margin-top:2px}
.turbo-arrow svg path{stroke:#9db4ff}

/* ===== 7. Секции ===== */
h2{font-size:clamp(26px,3vw,40px);font-weight:800;letter-spacing:-1px;
  text-align:center;margin-bottom:14px}
.sec-sub{text-align:center;color:var(--on-2);max-width:760px;margin:0 auto 44px;font-size:16.5px}
section{padding:70px 0}
/* Ширина разделов ровно как у шапки. Было max-width:1180 плюс поля
   по 4vw — из-за них разделы оказывались уже шапки на 59px при
   окне 1139, и разрыв рос вместе с окном, потому что 4vw тянулись
   за шириной экрана. Теперь формула та же, что у header */
.wrap{width:min(1180px,calc(100% - 32px));max-width:none;margin:0 auto;padding:0}
/* Обёртки статей и текстового блока после вопросов — та же ширина, что у
   разделов и шапки. В старом файле у них только предельная ширина, а
   боковые поля давало section{padding:0 4vw}, которое тема заменила на
   вертикальные отступы, — текст упирался в края экрана. Нижние поля
   обёрток не трогаем, поэтому margin только слева и справа */
.art-crumbs-wrap,.art-head-wrap,.art-layout,.seo-text{
  width:min(1180px,calc(100% - 32px));max-width:none;margin-left:auto;margin-right:auto;
}
.steps,.feats,.lands{gap:18px}
.step,.feat,.land{padding:24px;border-radius:20px}
.step-head{display:flex;align-items:center;gap:13px;margin-bottom:10px}
.step-num{
  width:38px;height:38px;flex:0 0 auto;border-radius:12px;display:grid;place-items:center;
  font-size:15px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--a),var(--a-2));
  box-shadow:0 6px 16px rgba(80,80,220,.42);
}
.step h3,.feat h3,.land h3{font-size:17px;font-weight:700}
.step p,.feat p,.land p{color:var(--on-2);font-size:14.5px;margin-top:8px}
.feat-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:rgba(255,255,255,.07)!important;border:1px solid var(--line)}

/* блок вопросов на посадочных стоит вне .wrap и на телефоне упирался в края экрана;
   у статей свой .faq-article внутри колонки, его не трогаем */
.faq:not(.faq-article){width:min(960px,calc(100% - 32px));max-width:none;margin-left:auto;margin-right:auto}
.q{margin-bottom:12px;border-radius:18px;overflow:hidden}
.q-head{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;border:0;background:none;cursor:pointer;font:inherit;
  font-size:16.5px;font-weight:700;color:var(--on);text-align:left;
}
.q-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.q.open .q-body{max-height:500px}
.q-body p{padding:0 24px 20px;color:var(--on-2);font-size:14.5px}

footer{padding:44px 4vw 40px;text-align:center;color:var(--on-2);font-size:13.5px;
  border-top:1px solid var(--line);margin-top:40px}
footer a{color:var(--on-2)}

/* ===== 8. Попапы ===== */
.ovl{background:rgba(4,5,9,.7);backdrop-filter:blur(8px)}
.ovl .modal{
  background:linear-gradient(135deg,rgba(30,33,48,.92),rgba(16,18,28,.94))!important;
  border:1px solid var(--line);border-radius:24px;color:var(--on);
  box-shadow:0 30px 80px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.modal h3{color:var(--on)}
/* крестик окна в стиле кнопки закрытия бургера: круг, тот же фон и рамка,
   лаймовый пиксельный знак (решение владельца 14.09) */
.modal .x{background:rgba(255,255,255,.08);border:1px solid var(--line);
  border-radius:999px;box-shadow:none;color:var(--a)}
.modal .x svg{color:var(--a)}
/* знак окна покупки описан в разделе 16 */
.tlist li{color:var(--on-2)}
.mail-field{background:rgba(0,0,0,.3);border:1px solid var(--line);border-radius:14px;
  box-shadow:none}
.mail-field input{color:var(--on)}
/* .btn-pay ушла отсюда: у кнопки оплаты свой вид в разделе 16 */

/* ===== 8b. Экраны подписки: статус, код, после оплаты =====
   Та же семья, что окно покупки: шапка со знаком-молнией (правила .m-head/.mi/.mtx/.x
   в разделе 16 общие для #turbo, #turbo-status и #turbo-paid), лаймовые пиксельные
   знаки, розовая кнопка. turbo.js своих стилей для этих экранов больше не несёт. */
#turbo-status .modal,#turbo-paid .modal{text-align:left;padding:22px 22px 20px}
#turbo-status .modal .m-head,#turbo-paid .modal .m-head{margin-bottom:18px}
/* плашка состояния и ссылка выхода по центру окна, шапка остаётся слева как в окне покупки */
.ts-active{display:flex;width:max-content;align-items:center;gap:7px;font-size:13px;font-weight:700;
  padding:6px 12px;border-radius:999px;margin:0 auto 8px;
  background:rgba(49,217,138,.12);border:1px solid rgba(49,217,138,.3);color:var(--ok)}
.ts-active .dot{width:7px;height:7px;background:var(--ok);box-shadow:0 0 6px var(--ok)}
.ts-active.off{background:rgba(255,90,43,.12);border-color:rgba(255,90,43,.35);color:var(--hot)}
.ts-active.off .dot{background:var(--hot);box-shadow:0 0 6px var(--hot)}
.ts-active.frz{background:rgba(255,196,0,.12);border-color:rgba(255,196,0,.35);color:#ffc400}
.ts-active.frz .dot{background:#ffc400;box-shadow:0 0 6px #ffc400}
.ts-info,.ts-bens,.ts-next{margin:14px 0 0;padding:2px 14px;border-radius:16px;
  background:rgba(0,0,0,.28);border:1px solid var(--line);box-shadow:none}
.ts-row{display:flex;align-items:center;gap:12px;padding:12px 0;text-align:left;border-bottom:1px solid var(--line)}
.ts-row:last-child{border-bottom:0}
.ts-row-ic{flex:0 0 auto;width:18px;height:18px;color:var(--a);image-rendering:pixelated}
.ts-row-txt{flex:1;min-width:0}
.ts-row-label{font-size:11.5px;color:var(--on-3);margin-bottom:1px}
.ts-row-val{font-size:14.5px;font-weight:700;color:var(--on);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-bens{padding:12px 14px}
.ts-bens-t{font-size:11.5px;font-weight:800;color:var(--on-3);letter-spacing:.4px;text-transform:uppercase;margin-bottom:6px}
.ts-ben{display:flex;align-items:flex-start;gap:9px;padding:4px 0;font-size:13.5px;line-height:1.35;color:#c4ccd8;font-weight:600}
.ts-ben svg{flex:0 0 auto;width:13px;height:13px;margin-top:2px;color:var(--a);image-rendering:pixelated}
.ts-note{margin:12px 2px 0;font-size:12.5px;line-height:1.6;color:var(--on-3)}
.ts-note b{color:var(--on-2)}
.ts-manage-link,.ts-exit-link,.ts-off-link{display:block;margin-top:12px;font-size:12.5px;color:var(--on-3);cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.ts-manage-link:hover,.ts-exit-link:hover,.ts-off-link:hover{color:var(--on)}
.ts-exit-link{margin:0 0 6px;text-align:center}
.ts-resume-btn,.ts-back-btn{display:block;width:100%;margin-top:14px;min-height:46px;border:0;border-radius:14px;padding:12px;
  cursor:pointer;font:inherit;font-size:15px;font-weight:800;color:var(--sell-ink);
  background:linear-gradient(120deg,var(--sell),var(--sell-2),var(--sell));
  box-shadow:0 10px 30px color-mix(in srgb,var(--sell) 45%,transparent);text-shadow:0 1px 4px rgba(0,0,0,.26)}
.ts-resume-btn:hover,.ts-back-btn:hover{transform:translateY(-1px)}
.ts-quiet-btn{display:block;width:100%;margin-top:10px;border:1px solid var(--line);border-radius:14px;padding:11px;
  cursor:pointer;font:inherit;font-size:13.5px;font-weight:600;color:var(--on-2);background:rgba(255,255,255,.06)}
.ts-quiet-btn:hover{color:var(--on)}
.ts-next{padding:13px 14px}
.ts-next-l{font-size:12px;color:var(--on-3);font-weight:600}
.ts-next-v{font-size:16.5px;font-weight:800;color:var(--on);margin-top:2px}
.ts-conf-q{font-size:16px;font-weight:800;color:var(--on);margin-top:12px}
/* экран кода живёт внутри #turbo */
#turbo .tc-sub{font-size:13.5px;color:var(--on-2);line-height:1.5;margin:0 0 14px}
#turbo .tc-timer{font-size:12.5px;color:var(--on-3);margin-top:10px;text-align:center}
#turbo .tc-resend{color:var(--a);font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
#turbo .tc-resend.off{color:var(--on-3);cursor:default;font-weight:400;text-decoration:none}
#turbo .tc-err{color:var(--hot);font-size:12.5px;margin-top:8px;text-align:center;min-height:15px}
#turbo .tc-code::placeholder{color:var(--on-3)}
.pay-chip{background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:10px;
  box-shadow:none}
.connection-status{background:rgba(255,90,43,.16);border:1px solid rgba(255,138,122,.4);
  color:#ff8a7a;border-radius:14px;box-shadow:none}

/* ===== 9. Узкие экраны ===== */
@media (max-width:1000px){
  /* Меню на телефоне: лист с плитками 2×2 под шапкой (выбор владельца 14.09,
     вариант В без дублирования кнопки «Ускорить»). Значок крупнее, подпись
     под ним, текущий раздел фиолетовый с лаймовыми уголками как на компьютере */
  header nav{
    position:fixed;top:76px;left:0;right:0;z-index:60;display:none;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding:12px;
    background:#7b3ff2;
    border:1px solid rgba(255,255,255,.18);border-radius:22px;
    box-shadow:0 24px 60px rgba(0,0,0,.6);
  }
  header nav.open{display:grid}
  header nav a{
    flex-direction:column;align-items:flex-start;gap:10px;padding:16px 12px 14px;min-width:0;
    white-space:nowrap;line-height:1.2;
    border-radius:14px;font-size:clamp(12px,4.2vw,14.5px);font-weight:800;color:#fff;
    background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.12);
  }
  header nav.open a svg{width:22px;height:22px;opacity:1;color:var(--a)}
  header nav a:hover{background:rgba(0,0,0,.4);color:#fff}
  header nav a.on{background:rgba(0,0,0,.55);border-color:var(--a);color:#fff}
  header nav a.on::before,header nav a.on::after{width:10px;height:10px}
  .burger{
    display:flex!important;flex-direction:column;justify-content:center;gap:5px;
    order:3;width:44px;height:44px;padding:0 11px;border-radius:999px;
    background:rgba(255,255,255,.08);border:1px solid var(--line);
  }
  /* значок бургера пиксельный, как остальные знаки сайта: три полоски, в открытом
     состоянии пиксельный крестик из темы; полоски-span скрыты, рисуем фоном */
  .burger span{display:none}
  .burger::before{content:"";width:16px;height:16px;image-rendering:pixelated;
    background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22%23cfef00%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%2210%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%225%22%20width%3D%2210%22%20height%3D%222%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%222%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat}
  .burger.open::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22%23cfef00%22%20shape-rendering%3D%22crispEdges%22%3E%3Crect%20x%3D%221%22%20y%3D%221%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%221%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%222%22%20width%3D%223%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%222%22%20width%3D%223%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%223%22%20width%3D%223%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%223%22%20width%3D%223%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%223%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%224%22%20width%3D%223%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%223%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%223%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%226%22%20width%3D%223%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%224%22%20y%3D%226%22%20width%3D%223%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%226%22%20y%3D%227%22%20width%3D%223%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%223%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%228%22%20width%3D%223%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%222%22%20y%3D%228%22%20width%3D%223%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%229%22%20width%3D%223%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%229%22%20width%3D%223%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3Crect%20x%3D%221%22%20y%3D%2210%22%20width%3D%222%22%20height%3D%221%22%2F%3E%3C%2Fsvg%3E")}
  header{gap:10px;padding:9px 12px 9px 14px}
  /* кнопка той же высоты, что бургер (44px); без текста — такой же круг */
  .hd-turbo{order:2;margin-left:auto;height:44px;padding:0 16px;font-size:13.5px}
  header .hd-turbo.tight{padding:0 12px}
  header .hd-turbo.icon-only{width:44px;padding:0;justify-content:center}
  /* у бургера в style.css тоже стоит margin-left:auto, и две
     автоматические подушки делили свободное место пополам —
     кнопка оказывалась посередине. Оставляем подушку только
     у кнопки: тогда она и бургер идут парой у правого края */
  .burger{margin-left:0}
  /* на планшете места вдоволь, поэтому длинная надпись остаётся;
     прячем её только на телефоне, ниже отдельным запросом */
}
@media (max-width:620px){
  /* Компактный первый экран (замечание владельца 14.09): форма ссылки должна
     стоять выше, снизу будет реклама. Заголовок 27px вместо 34, абзац
     14.5px, отступы вдвое меньше. Поле ссылки поднялось с 498 до ~330px */
  .hero{padding:22px 4vw 14px}
  .hero h1{font-size:27px;line-height:1.1;letter-spacing:-.9px}
  .lead{font-size:14.5px;line-height:1.45;margin-top:12px}
  .tool{padding:14px;margin-top:16px}
  .btn-cta{width:100%}
  .sec-sub,.step p,.feat p,.land p,.seo-text p,.faq .q-body p{font-size:14.5px}
  .article p{font-size:15.5px}
  h2{font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  .hd-turbo,.hd-turbo::before,
  .turbo-strip.st-sell .tsp-cta-ic svg{animation:none!important}
}

/* надпись кнопки Турбо одним блоком: дыра между словами убрана */
.hd-turbo .txt{display:inline-flex;align-items:baseline;gap:6px;white-space:nowrap}
.hd-turbo .lbl-long{opacity:.9;font-weight:800}
.hd-turbo.is-frozen{color:#fff}
/* стрелка убрана по правке владельца; нажатие продавливается */
.hd-turbo:active{transform:scale(.96)}

/* ============================================================
   11. ЗНАЧКИ И ГРАДИЕНТНЫЙ ТЕКСТ

   В разметке страницы цвета значков прошиты прямо в атрибутах:
   19 штук синим #3d6bff, 7 зелёным, 6 тёмным #2e3440 (на тёмном
   фоне такие просто пропадают). Менять разметку не нужно:
   атрибут stroke в SVG — презентационный, любое правило CSS
   его перебивает. Поэтому переводим все значки на currentColor
   и дальше задаём цвет там, где он осмыслен.
   ============================================================ */
svg *[stroke]{stroke:currentColor}
svg *[fill]:not([fill="none"]){fill:currentColor}

/* по умолчанию значок повторяет цвет текста рядом */
body{color:var(--on)}
header nav a svg{color:inherit}
.chip .ci,.feat-ic,.dl-stats .stat svg,.modal svg,.q-head svg{color:var(--a)}
.turbo-ic-sm svg,.dl-thumb svg,.btn-cta svg{color:#fff}
.hd-turbo svg{color:inherit}
.turbo-strip.st-on .turbo-ic-sm svg,.turbo-strip.st-frz .turbo-ic-sm svg{color:#fff}
.turbo-arrow svg{color:var(--a)}
.tlist svg{color:var(--a)!important}
.dl-note.done svg{color:var(--ok)}
.dl-note.error svg{color:var(--hot)}

/* Градиентный текст убран. Связка индиго → фиолетовый в заголовке
   и в окне оплаты — та самая примета нейросети; плюс сам приём
   «градиент по буквам» стоит в тех же списках. Ставим плотный
   цвет палитры: читается лучше и выглядит собраннее */
h1 .grad,.err-code,.modal .alt a.alt-grad,.t-price-sum{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:currentColor;color:var(--a);
}
.modal .alt a.alt-grad{text-decoration-color:var(--a)}
/* Блок контактов: значок, почта и кнопка в стиле сайта (владелец 15.09: кнопка была рутстеровская синяя) */
.contact-ic{background:#7b3ff2;border:0;border-radius:16px;box-shadow:none;color:var(--a)}
.contact-ic svg{width:28px;height:28px;image-rendering:pixelated}
.contact-box .cmail{color:var(--on)}
.contact-box .cmail:hover{color:var(--a)}
.contact-box .csub{color:var(--on-2)}
a.btn-mail{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 30px;border-radius:16px;
  background:var(--cta);color:var(--cta-ink);font-size:16px;font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);transition:transform .16s cubic-bezier(.16,1,.3,1),filter .16s ease}
a.btn-mail:hover{transform:translateY(-2px);filter:brightness(1.08);color:var(--cta-ink)}
a.btn-mail:active{transform:translateY(0)}

/* подписи под значками и мелкий текст: держим на второй ступени,
   чтобы не спорили с заголовками, но и не пропадали */
.dl-stats{color:var(--on-2)}

/* ============================================================
   12. АКЦЕНТ ПО ВСЕЙ СТРАНИЦЕ

   Заголовки разделов, значки, плашки с цифрами и переключатель
   формата берут цвет палитры. В лаймовой это сам лайм.

   Кнопка Турбо при этом остаётся особенной: только у неё сплошная
   заливка со свечением, бегущий блик и уезжающая стрелка. Лайм
   текстом и штрихом значка весит совсем иначе, чем лайм плашкой.
   ============================================================ */

/* заголовки разделов */
h2{color:var(--a)}

/* «онлайн по ссылке» в главном заголовке */
h1 .grad{color:var(--a)}

/* плашки с цифрами: заливка акцентом, цифра — цветом фона */
.step-num{
  background:var(--a);color:var(--ink);
  box-shadow:none;font-weight:800;
}

/* значки разделов и вопросов */
.feat-ic{color:var(--a);background:rgba(255,255,255,.05)!important;
  border:1px solid var(--line)}
.feat-ic svg,.land svg,.q-head svg{color:var(--a)}

/* переключатель формата: активный — акцентом, значки тоже */
.seg{color:var(--on-2)}
.seg svg{color:var(--on-3)}
.seg:hover{color:var(--on)}
.seg.on{
  background:color-mix(in srgb,var(--a) 16%,transparent);
  color:var(--a);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a) 34%,transparent);
}
.seg.on svg{color:var(--a)}

/* значки в плашке инструмента */

/* ссылки в тексте */
.terms a,.q-body a,footer a,.seo-text a{color:var(--a)}
.seo-text a:hover{color:var(--a-2)}

/* Подписи под полем: текст Chrome Silver, значки лаймом */

/* Ссылка «правилами сервиса» — Chrome Silver из палитры владельца */
.terms a{color:#c4ccd8}
.terms a:hover{color:#e6ebf2}

/* Значок ссылки в поле ввода — как было */
.url-field svg{color:var(--on-3)}

/* Переключатель «Видео MP4 / Аудио MP3» — фиолетовый:
   фон дорожки, текст и значки */
.mode{
  background:rgba(123,63,242,.18);
  border:1px solid rgba(123,63,242,.40);
}
.seg{color:#7b3ff2}
.seg svg{color:#7b3ff2}
.seg:hover{color:#9d6bff}
.seg:hover svg{color:#9d6bff}
/* активный лежит на сплошном фиолетовом, поэтому его текст светлый —
   фиолетовым по фиолетовому надпись пропала бы */
.seg.on{background:#7b3ff2;color:#fff;box-shadow:none}
.seg.on svg{color:#fff}

/* Плашки под цифрами 1 2 3 — синие, сами цифры лаймовые */
.step-num{background:#3155ff;color:#cfef00;box-shadow:none}

/* Раздел «Почему RutLink»: подложка значков фиолетовая, значки лайм.
   Прежние варианты подложки (розовая, синяя) убраны, чтобы правила
   не накладывались друг на друга */
.feats .feat-ic{
  background:#7b3ff2!important;border:0!important;
  color:#cfef00;
}
.feats .feat-ic svg{color:#cfef00}

/* Пиксельные значки крупнее обычных: иначе точки сливаются
   и пиксельность пропадает */
.feats .feat-ic svg{width:26px;height:26px;image-rendering:pixelated}

/* ---- Логотип: шрифт прежний, знак пиксельный ---- */
.logo{gap:10px}
.logo .rut{color:#eef1fa}
.logo .link{color:var(--a)}
.logo-pix{
  display:grid;place-items:center;width:26px;height:26px;flex:0 0 auto;
}
.logo-pix svg{width:26px;height:26px;image-rendering:pixelated}

/* ---- Пиксельные значки в плашке и меню ---- */
.url-field svg,.seg svg,.chips .chip .ci svg,#nav a svg{
  image-rendering:pixelated;
}
/* Сетка 10, размер 20px → клетка ровно 2px. Меньше нельзя:
   при 16px клетка выходит 1.6px и ступеньки смазываются */
.url-field svg{width:20px;height:20px}
.seg svg{width:20px;height:20px}
#nav a svg{width:20px;height:20px}

/* Знак логотипа двуцветный, и общее правило «заливка значка наследует
   цвет текста» его обесцвечивало. Возвращаем цвета слоям напрямую:
   специфичность выше, чем у общего правила */
.logo-pix svg g:first-child{fill:#7b3ff2}
.logo-pix svg g:last-child{fill:#cfef00}
.logo-pix svg g rect{fill:inherit}

/* Знак на кнопке Турбо: пиксельный, без сглаживания */
.hd-turbo svg{
  image-rendering:pixelated;width:20px;height:20px;
  display:block;transform-origin:center;
  animation:boltZap 3.6s ease-in-out infinite;
}
/* Разряд: большую часть времени молния неподвижна, раз в несколько
   секунд коротко дёргается. Постоянное шевеление в шапке мельтешит */
@keyframes boltZap{
  0%,74%   {transform:none}
  78%      {transform:rotate(-8deg) scale(1.14)}
  82%      {transform:rotate(6deg)  scale(1.06)}
  86%      {transform:rotate(-4deg) scale(1.1)}
  90%,100% {transform:none}
}
@media (prefers-reduced-motion:reduce){
  .hd-turbo svg{animation:none}
}

/* ============================================================
   13. БЕГУЩАЯ СТРОКА ПРЕИМУЩЕСТВ

   Вместо четырёх плашек в ряд (раскладка прежнего сайта) — одна
   строка, которая едет справа налево. Значков нет вовсе, поэтому
   и дублей со значками меню и переключателя формата нет.

   Как это делают на хороших сайтах: короткие слова, а не фразы,
   и один цвет. Разделитель — пиксельный квадрат: тот же язык,
   что у знака логотипа и молнии на кнопке Турбо.

   Разметка лежит в index.html, то есть текст видят поисковики.
   Второй экземпляр строки для бесшовной петли клонирует steklo.js
   и помечает aria-hidden, чтобы не считался повтором.

   Мигание, заход первый: строка длинных фраз вышла 16 451 px при
   пределе текстуры 16 384 px — слой не влезал и рвался на плитки.
   Короткие слова дали 4 713 px, и эта причина ушла.

   Мигание, заход второй: осталось. Сняты маска по краям и явное
   вынесение слоя (will-change, backface-visibility, contain) —
   в связке «панель с backdrop-filter + едущий композитный слой»
   именно они дают мерцание, заметнее всего в Safari. Осталась
   голая схема: overflow:hidden и transform у строки, без слоёв.
   ============================================================ */
.ticker{
  margin-top:22px;position:relative;overflow:hidden;padding:13px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.ticker .tick-row{
  display:flex;flex-wrap:nowrap;white-space:nowrap;width:max-content;
  will-change:transform;backface-visibility:hidden; /* свой слой: без перерисовки на стыке петли */
}
.ticker.run .tick-row{animation:tickRun 37s linear infinite}
.ticker.rest .tick-row{animation-play-state:paused}
@media (hover:hover){.ticker.run:hover .tick-row{animation-play-state:paused}}
@keyframes tickRun{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

.ticker .ti{
  flex:0 0 auto;display:inline-flex;align-items:center;
  font-size:14px;font-weight:700;letter-spacing:.01em;color:var(--a);
}
/* разделитель: пиксельный квадрат, а не точка шрифта */
.ticker .ti::after{
  content:'';flex:0 0 auto;width:4px;height:4px;margin:0 17px;
  background:var(--a);opacity:.5;
}
@media (prefers-reduced-motion:reduce){.ticker.run .tick-row{animation:none}}
@media (max-width:700px){
  .ticker .ti{font-size:12.5px}
  .ticker .ti::after{margin:0 12px;width:3px;height:3px}
  .ticker.run .tick-row{animation-duration:30s}
}

/* Раздел «Отдельные инструменты»: подложка лаймовая, значки синие */
.lands .feat-ic{
  background:#cfef00!important;border:0!important;
  color:#3155ff;
}
.lands .feat-ic svg{
  color:#3155ff;width:26px;height:26px;image-rendering:pixelated;
}

/* Ссылки-переходы в карточках инструментов — розовые */
.land .go{color:#ff4fa3}
/* На витрине инструкций «Читать» — фиолетовая кнопка с лаймовой надписью (владелец 15.09) */
.lands-guides .land .go{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 22px;
  border-radius:12px;background:#7b3ff2;color:var(--a);font-weight:800;font-size:14.5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);transition:transform .16s cubic-bezier(.16,1,.3,1),filter .16s ease}
.lands-guides .land:hover .go{transform:translateY(-2px);filter:brightness(1.1)}

/* ---- Пиксельные знаки в «Вопросах и ответах» ---- */
/* поворот прежнего плюса отменяем: он мылил ступеньки */
.q.open .q-head svg{transform:none}
.q-head .q-plus,.q-head .q-x{
  /* сетка 12 при 24px — клетка ровно 2px */
  width:24px;height:24px;flex-shrink:0;image-rendering:pixelated;color:var(--a);
}
.q-head .q-x{display:none}
.q.open .q-head .q-plus{display:none}
.q.open .q-head .q-x{display:block}

/* Цифры шагов пиксельные. Клетка 3px давала 15x21 — втрое больше
   по площади, чем прежняя цифра текстом (её чернила 9.6x10.8).
   Клетка 2px даёт 10x14: по ширине вровень, по высоте чуть выше,
   мельче нельзя — при 1.5px ступеньки смазываются */
.step-num svg{width:12px;height:14px;display:block;image-rendering:pixelated}

/* Плашка с цифрой была выровнена по центру заголовка, а заголовки
   разной высоты: две строки у первых двух шагов и одна у третьего.
   Поэтому третья плашка стояла на 7px выше соседних. Прижимаем все
   к верху карточки, а заголовку даём отступ (38-26.35)/2 ≈ 6px,
   чтобы первая строка шла вровень с серединой плашки */
.step-head{align-items:flex-start}
.step-head h3{padding-top:6px}

/* Ссылки в подвале — тем же Chrome Silver, что и «правилами сервиса».
   Общее правило выше красило их лаймом, здесь специфичность та же,
   но правило идёт ниже, поэтому побеждает */
footer a{color:#c4ccd8}
footer a:hover{color:#e6ebf2}

/* Шапка карточки загрузки — значок и название ролика. Пока ролик
   не найден (ошибка, проверка ссылки), название пустое, и значок
   висит сам по себе, ничего не обозначая. Прячем всю шапку, пока
   в названии пусто; появилось имя ролика — вернётся и значок */
.dl-head:has(.dl-title:empty){display:none}
/* и снимаем отступ, которым надпись отделялась от шапки: без шапки
   он давал сверху 41px против 25 снизу. Условие узкое — только когда
   ролик не найден и в карточке не осталось ничего, кроме надписи */
.dl:has(.dl-title:empty) .dl-note.error{margin-top:0}

/* Узкие экраны: в style.css ряд «поле + кнопка» до 760px становится
   колонкой. В колонке flex-basis задаёт главную ось, то есть высоту,
   и 260px, поставленные как подсказка по ширине для горизонтальной
   раскладки, превращались в 260px высоты поля. Отдаём высоту
   содержимому — остаётся min-height:58px */
@media (max-width:760px){
  .url-field{flex:0 0 auto}
}

/* Плашка ролика в карточке загрузки: подложка фиолетовая,
   значок лаймовый и пиксельный. Сетка 10 при 20px — клетка 2px */
.dl-thumb{background:#7b3ff2;box-shadow:none}
.dl-thumb svg{color:#cfef00;width:20px;height:20px;image-rendering:pixelated}

/* Этап «ищем ролик»: рамка остаётся на месте, но синий уходит.
   Текст тем же Chrome Silver, что и остальные подписи, слева
   пульсирует лаймовая точка. Точка — псевдоэлемент, поэтому
   переживает смену текста движком */
.dl-note.processing{color:#c4ccd8}
/* Точка строчно-блочная, а не флексовая: движок ставит надписи
   display:block прямым стилем в атрибуте, и он сильнее любого
   правила из файла. Строчная точка работает при любом display */
.dl-note.processing::before{
  content:'';display:inline-block;vertical-align:middle;position:relative;top:-1px;
  width:8px;height:8px;border-radius:50%;margin-right:10px;
  background:var(--a);animation:dotPulse 1.2s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{opacity:.25;transform:scale(.8)}
  50%{opacity:1;transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){.dl-note.processing::before{animation:none;opacity:1}}

/* ---- Плашки выбора качества ----
   Выбранная: синяя подложка, значение лаймом.
   Наведение продумано так, чтобы цвет подсказывал результат клика:
   у невыбранной плашки текст заранее становится лаймовым и кромка
   чуть лаймовой — это ровно то, что человек получит после нажатия;
   подложка при этом остаётся тёмной, чтобы «наведено» и «выбрано»
   нельзя было спутать. Выбранная на наведении синеет глубже:
   нажатие читается вдавливанием, а контраст лайма на ней растёт
   с 4.13 до 5.44 */
.fmt.on{
  background:#3155ff;color:#cfef00;border-color:transparent;
  /* тень та же, что у невыбранных плашек: синее свечение убрано,
     стоит обычная тёмная из общего набора */
  box-shadow:4px 4px 10px var(--sh-dark),-4px -4px 10px var(--sh-light);
}
.fmt:hover:not(:disabled):not(.on){
  background:rgba(255,255,255,.08);color:#cfef00;border-color:rgba(207,239,0,.45);
}
.fmt.on:hover:not(:disabled){background:#2745d9;color:#cfef00}

/* ============================================================
   15. ПРОДАЮЩАЯ ПЛАШКА В КАРТОЧКЕ ЗАГРУЗКИ

   Делаем её той же, что кнопка в шапке: розовый градиент, лаймовый
   текст, пиксельная молния и один бегущий блик. Прежние искры-кометы
   гасим — два разных эффекта на одном товаре спорят друг с другом.

   Справа от призыва идёт бегущая строка выгод. Формулировки взяты
   из окна покупки, не выдуманы. Цвет у неё белый, а не лаймовый:
   лайм уже занят призывом, и второй лайм рядом слил бы их в одно
   пятно. На светлой половине градиента белый даёт 3.03, на тёмной
   4.92 — для второстепенной строки достаточно, для призыва нет,
   поэтому призыв остаётся лаймовым (5.2 на розовом).
   ============================================================ */
.turbo-strip.st-sell{
  background:linear-gradient(120deg,var(--sell),var(--sell-2),var(--sell));
  border:0;position:relative;overflow:hidden;
  box-shadow:0 8px 26px color-mix(in srgb,var(--sell) 45%,transparent);
}
.turbo-strip.st-sell .tsp-fx{display:none!important}
/* Блик идёт по всей ширине. Прежний был кусочком в 120px, который
   двигался на фиксированные 420px — размер под кнопку в шапке, а
   плашка втрое шире, поэтому блик гулял только в начале. Теперь это
   полоса во всю плашку, а движение задаётся положением фона в
   процентах: при любой ширине блик проходит от края до края */
.turbo-strip.st-sell::before{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.22) 50%,transparent 58%);
  background-size:260% 100%;background-repeat:no-repeat;
  animation:tspShineWide 4.6s ease-in-out infinite;
}
/* Ход слева направо. При фоне шире плашки (260%) рост процента
   сдвигает картинку ВЛЕВО, поэтому счёт идёт от 130% к -30%:
   так блик едет вправо, как у кнопки в шапке */
@keyframes tspShineWide{0%,8%{background-position:130% 0}88%,100%{background-position:-30% 0}}
.turbo-strip.st-sell .tsp-cta{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto}
.turbo-strip.st-sell .tsp-cta-ic{background:none;box-shadow:none;width:auto;height:auto;display:grid}
/* Молния дёргается ровно так же, как в шапке: та же раскадровка
   boltZap, та же длительность — знак один, и вести себя должен
   одинаково в обоих местах */
.turbo-strip.st-sell .tsp-cta-ic svg{
  width:20px;height:20px;image-rendering:pixelated;
  display:block;transform-origin:center;
  animation:boltZap 3.6s ease-in-out infinite;
}
/* В style.css живёт .tsp-cta-ic svg *{stroke:#fff} — оно писалось под
   прежний контурный спидометр. Знак из клеток от такой обводки белеет
   и толстеет: белая линия в 1px на клетке в 2px закрывает заливку */
.turbo-strip .tsp-cta-ic svg rect{fill:#cfef00;stroke:none}
/* Вместо канта — мягкая тень. Кант из восьми теней по сторонам давал
   сплошной графитовый контур: цифра высокая, но буквы грубели. Тень
   размыта и вполсилы: край читается, надпись остаётся лёгкой.
   Контраст самого лайма на розовом она не поднимает (2.32), прибавка
   к читаемости примерно десятая часть — это плата за мягкость */
.turbo-strip.st-sell .tsp-cta-txt{
  color:#cfef00;font-weight:800;font-size:15px;white-space:nowrap;
  text-shadow:0 1px 4px rgba(0,0,0,.26),0 0 9px rgba(0,0,0,.15);
}
.turbo-strip.st-sell .tsp-cta-ic svg{
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.3));
}

/* бегущая строка выгод */
/* слева строка растворяется, а не обрывается на полуслове */
.turbo-strip.st-sell .tsp-bens{flex:1 1 auto;min-width:0;overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 100%)}
.tsp-bens-row{display:flex;flex-wrap:nowrap;white-space:nowrap;width:max-content;
  animation:tspBens 26s linear infinite}
.turbo-strip.st-sell:hover .tsp-bens-row{animation-play-state:paused}
.tsp-bens-row > span[aria-hidden]{display:inline-flex;flex:0 0 auto}
.turbo-strip.st-sell .tsp-ben{flex:0 0 auto;display:inline-flex;align-items:center;
  font-size:12.5px;font-weight:700;color:rgba(255,255,255,.92)}
.turbo-strip.st-sell .tsp-ben::after{content:'';flex:0 0 auto;width:4px;height:4px;margin:0 14px;
  background:rgba(255,255,255,.55)}
@keyframes tspBens{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (prefers-reduced-motion:reduce){.tsp-bens-row{animation:none}}
/* на узких экранах выгоды прячем: призыв важнее */
@media (max-width:760px){.turbo-strip.st-sell .tsp-bens{display:none}}
/* на 300-320 надпись «Ускорить загрузку до 20 МБ/с» должна влезать в одну строку */
@media (max-width:335px){.turbo-strip.st-sell .tsp-cta-ic{display:none}.turbo-strip.st-sell .tsp-cta-txt{font-size:12.5px}}

/* Пока в карточке висит предложение ускорить, верхняя бегущая строка
   стоит: два движущихся текста рядом тянут внимание друг у друга, а
   продающая плашка в этот момент важнее. Под курсором строка едет —
   если человек захотел дочитать, пусть читает */
.ticker.run.hold .tick-row{animation-play-state:paused}
@media (hover:hover){.ticker.run.hold:hover .tick-row{animation-play-state:running}}

/* Кнопка в шапке: та же мягкая тень, что и у плашки в карточке —
   знак и надпись ведут себя одинаково в обоих местах */
.hd-turbo{text-shadow:0 1px 4px rgba(0,0,0,.26),0 0 9px rgba(0,0,0,.15)}
.hd-turbo svg{filter:drop-shadow(0 1px 3px rgba(0,0,0,.3))}

/* Длинная надпись «до 20 МБ/с» видна везде, где влезает в шапку.
   Класс .short ставит steklo.js, замерив шапку: без него любой порог
   по ширине экрана врёт на планшетах и узких телефонах */
.hd-turbo.short .lbl-long{display:none}
/* Ступени ужатия, если и «Ускорить» не влезает: сначала теснее отступы,
   потом только значок. Бургер и логотип при этом всегда остаются
   внутри плашки шапки, выпадать за её край им нельзя */
.hd-turbo.tight{padding:10px 12px;gap:6px}
.hd-turbo.icon-only .txt{display:none}
.hd-turbo.icon-only{padding:10px 12px}
header>*{min-width:0}
header .burger,header .logo{flex:0 0 auto}

/* ============================================================
   16. ОКНО ПОКУПКИ ТУРБО

   Раскладка: узкая шапка, прокручиваемая середина, прибитый низ.
   Почта и кнопка не уезжают никогда — на узком телефоне до них
   иначе пришлось бы листать больше двухсот точек.

   Отступы тремя ступенями по высоте экрана: ниже 600 сжатые,
   601–700 средние, выше обычные по шагу 8. На каждой ступени
   содержимое помещается целиком, без прокрутки.

   Цвета по ролям: лайм — бесплатное действие, розовый — Турбо.
   Поэтому кнопка оплаты розовая с лаймовой надписью, как кнопка
   в шапке сайта и полоса в карточке загрузки.
   ============================================================ */
#turbo .modal{
  --pad:22px;--pad-b:18px;--head:18px;--bl-top:18px;--bl-gap:10px;--foot:18px;
  --mail-h:48px;--mail-m:12px;--pay-h:52px;--marks:14px;--have:20px;
  --f-title:16.5px;--f-ben:13.5px;--f-pay:15px;--f-sum:38px;
  width:100%;max-width:430px;height:auto;max-height:100%;
  display:flex;flex-direction:column;overflow:hidden;
  padding:var(--pad) var(--pad) var(--pad-b);border-radius:26px;
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02)),rgba(12,14,21,.9);
  border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.6);
}
@media (max-height:700px){
  #turbo .modal{--pad:18px;--pad-b:14px;--head:14px;--bl-top:13px;--bl-gap:6px;--foot:12px;
    --mail-h:46px;--mail-m:10px;--pay-h:50px;--marks:10px;--have:18px;
    --f-title:16px;--f-ben:13px;--f-pay:14.5px;--f-sum:34px}
}
@media (max-height:600px){
  #turbo .modal{--pad:14px;--pad-b:10px;--head:10px;--bl-top:8px;--bl-gap:4px;--foot:5px;
    --mail-h:42px;--mail-m:7px;--pay-h:46px;--marks:6px;--have:16px;
    --f-title:15.5px;--f-ben:12.5px;--f-pay:14px;--f-sum:30px}
}
#turbo #turbo-buy{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
#turbo .scroll{flex:1 1 auto;min-height:0;overflow-y:auto}
#turbo .foot{flex:0 0 auto;padding-top:var(--foot)}

/* шапка окна */
/* у окна в старом файле text-align:center — из-за него надпись шапки
   уезжала вправо и налезала на крестик. Выравниваем по левому краю и
   резервируем место под крестик */
#turbo .m-head,#turbo-status .m-head,#turbo-paid .m-head{display:flex;align-items:center;gap:12px;margin-bottom:var(--head);
  text-align:left;padding-right:34px}
#turbo .mtx,#turbo-status .mtx,#turbo-paid .mtx{flex:1 1 auto;min-width:0}
#turbo .mi,#turbo-status .mi,#turbo-paid .mi{
  flex:0 0 auto;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--sell),var(--sell-2))!important;box-shadow:none!important;
}
#turbo .mi svg,#turbo-status .mi svg,#turbo-paid .mi svg{width:17px;height:17px;color:var(--a);image-rendering:pixelated;
  transform-origin:center;animation:boltZap 3.6s ease-in-out infinite}
#turbo .mi.tp-ok,#turbo-status .mi.tp-ok,#turbo-paid .mi.tp-ok{background:linear-gradient(135deg,#0e9e63,#2fd18c)!important}
#turbo .mtx b,#turbo-status .mtx b,#turbo-paid .mtx b{display:block;font-size:var(--f-title);font-weight:800;line-height:1.15}
#turbo .mtx i,#turbo-status .mtx i,#turbo-paid .mtx i{display:block;font-style:normal;font-size:11.5px;color:var(--on-3);margin-top:2px}

#turbo .x,#turbo-status .x,#turbo-paid .x{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:999px;z-index:2;
  background:rgba(255,255,255,.08);border:1px solid var(--line);display:grid;place-items:center;box-shadow:none}
#turbo .x svg,#turbo-status .x svg,#turbo-paid .x svg{width:13px;height:13px;color:var(--a);image-rendering:pixelated}
/* в окне покупки крестик стоит по центру строки шапки (высота шапки 38px) */
#turbo .x{top:calc(var(--pad) - 2px);right:var(--pad);width:30px;height:30px}
#turbo .x svg{width:12px;height:12px}
#turbo .x:hover,#turbo-status .x:hover,#turbo-paid .x:hover{background:rgba(255,255,255,.14)}

/* что входит */
#turbo .tlist{list-style:none;margin:var(--bl-top) 0 0;padding:0;display:grid;gap:var(--bl-gap)}
#turbo .tlist li{display:flex;align-items:flex-start;gap:9px;
  font-size:var(--f-ben);line-height:1.35;color:#c4ccd8;font-weight:600}
#turbo .tlist li svg{flex:0 0 auto;width:13px;height:13px;margin-top:2px;
  color:var(--a)!important;image-rendering:pixelated}

#turbo .mail-field{padding:0 14px;min-height:var(--mail-h);display:flex;align-items:center;
  border-radius:13px;background:rgba(0,0,0,.3);border:1px solid var(--line);box-shadow:none;
  margin-bottom:var(--mail-m)}
#turbo .mail-field:focus-within{border-color:color-mix(in srgb,var(--sell) 60%,transparent)}
#turbo .mail-field input{font-size:14.5px;color:var(--on)}
#turbo .mail-field input::placeholder{color:var(--on-3)}

/* кнопка оплаты — семья кнопки Турбо */
#turbo .btn-pay{
  width:100%;min-height:var(--pay-h);border-radius:14px!important;
  font-size:var(--f-pay);font-weight:800;color:var(--sell-ink)!important;
  background:linear-gradient(120deg,var(--sell),var(--sell-2),var(--sell))!important;
  box-shadow:0 10px 30px color-mix(in srgb,var(--sell) 45%,transparent)!important;
  position:relative;overflow:hidden;
  text-shadow:0 1px 4px rgba(0,0,0,.26),0 0 9px rgba(0,0,0,.15);
}
#turbo .btn-pay::before{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.22) 50%,transparent 58%);
  background-size:260% 100%;background-repeat:no-repeat;
  animation:tspShineWide 4.6s ease-in-out infinite;
}
#turbo .btn-pay:hover{transform:translateY(-1px)}

#turbo .pay-marks{display:flex;justify-content:center;gap:6px;margin-top:var(--marks);flex-wrap:wrap}
#turbo .pay-chip{background:#fff!important;border:0!important;border-radius:10px!important;
  box-shadow:0 2px 8px rgba(0,0,0,.35)}
#turbo .alt{text-align:center;margin-top:var(--have);font-size:13px;color:var(--on-2)}
#turbo .alt a{color:var(--a);cursor:pointer;font-weight:700;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
#turbo .alt a:hover{color:var(--a-2)}
#turbo .fine{text-align:center;margin-top:var(--have);font-size:11px;line-height:1.45;color:var(--on-3)}
#turbo .fine a{color:#c4ccd8;text-decoration:underline;text-underline-offset:2px}
#turbo .tc-code{width:100%;text-align:center;letter-spacing:.5em;font-size:24px;font-weight:800;
  padding:16px;border-radius:15px;background:rgba(0,0,0,.3);border:1px solid var(--line);color:var(--on)}
/* фокус в поле кода: лаймовая рамка вместо системной оранжевой обводки */
#turbo .tc-code:focus{outline:none;border-color:var(--a);box-shadow:0 0 0 3px rgba(207,239,0,.18)}
@media (prefers-reduced-motion:reduce){
  #turbo .btn-pay::before,#turbo .mi svg,#turbo-status .mi svg,#turbo-paid .mi svg{animation:none}
}

/* ---- Строки выбора срока в окне покупки ----
   Разметка утверждённого макета: срок, цена за месяц и итоговая цена
   в одной строке, у годового бейдж. Выгода видна сразу, без нажатий.
   Класс soon — временный: длинные сроки заперты, пока движок не умеет
   продавать периоды кроме месяца */
#turbo .plans{display:grid;gap:var(--plan-gap,8px);margin-bottom:14px}
#turbo .plan{
  display:flex;align-items:center;gap:10px;width:100%;position:relative;
  padding:11px 12px;border-radius:14px;cursor:pointer;font:inherit;text-align:left;
  border:1px solid var(--line);background:rgba(255,255,255,.04);
  box-shadow:none;transition:border-color .18s ease,background .18s ease;
}
#turbo .plan.on{border-color:var(--a);background:rgba(207,239,0,.10)}
#turbo .plan:hover:not(.on){border-color:rgba(207,239,0,.4)}
#turbo .plan .dot{
  flex:0 0 auto;width:16px;height:16px;border-radius:50%;border:2px solid var(--on-3);
}
#turbo .plan.on .dot{border-color:var(--a);
  background:radial-gradient(circle,var(--a) 0 42%,transparent 44%)}
#turbo .plan .pn{flex:1 1 auto;min-width:0}
#turbo .plan .pn b{display:block;font-size:14px;font-weight:800;color:var(--on)}
#turbo .plan .pn i{display:block;font-style:normal;font-size:11.5px;color:var(--on-3);margin-top:1px}
#turbo .plan .pp{flex:0 0 auto;text-align:right}
#turbo .plan .pp b{display:block;font-size:15.5px;font-weight:800;color:var(--on)}
#turbo .plan .pp i{display:block;font-style:normal;font-size:11px;font-weight:700;color:var(--a)}
#turbo .plan .tag{
  position:absolute;top:-7px;right:10px;padding:1px 7px;border-radius:999px;
  font-size:9px;line-height:1.4;font-weight:800;background:var(--a);color:#12140d;
}
/* временно недоступные сроки: видны и читаемы, но приглушены */
#turbo .plan.shake{animation:planShake .4s ease}
@keyframes planShake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
#turbo .plans-note{font-size:11.5px;color:var(--on-3);text-align:center;margin-top:2px}
/* Низкие экраны: тарифы, список выгод и низ окна ужимаются так, чтобы окно
   покупки влезало БЕЗ прокрутки даже на 300×560 (решение владельца 15.09) */
@media (max-height:700px){#turbo .plans{--plan-gap:8px;margin-bottom:6px}#turbo .plan{padding:6px 11px;border-radius:12px}
  #turbo .plan .pn i{margin-top:0}
  #turbo .plan .tag{font-size:8px;line-height:12px;padding:0 6px;top:-6px;right:9px}
  #turbo .tlist{gap:3px}#turbo .pay-marks{flex-wrap:nowrap;gap:5px}#turbo .pay-chip{width:48px;height:22px}
  #turbo .modal{--pad-b:12px;--bl-top:6px;--mail-h:44px;--mail-m:6px;--pay-h:46px;--marks:6px;--have:11px}#turbo .fine{font-size:10.5px}}
@media (max-height:600px){#turbo .plans{--plan-gap:8px;margin-bottom:7px}#turbo .plan{padding:4px 10px}
  #turbo .plan .pn b{font-size:13.5px}#turbo .plan .pn i{font-size:11px}
  #turbo .plan .pp b{font-size:14.5px}#turbo .plan .pp i{font-size:10.5px}
  #turbo .tlist{gap:2px}#turbo .tlist li{font-size:12.5px}
  #turbo .modal{--pad:12px;--pad-b:4px;--head:5px;--bl-top:5px;--mail-h:40px;--mail-m:5px;--pay-h:42px;--marks:5px;--have:10px}
  #turbo .pay-marks{gap:4px}#turbo .pay-chip{width:44px;height:20px}#turbo .pay-chip img{max-width:34px;max-height:14px}
  #turbo .fine{font-size:10px;line-height:1.35}}
@media (max-width:340px){#turbo .modal,#turbo-status .modal,#turbo-paid .modal{--f-title:14.5px}#turbo .mtx i,#turbo-status .mtx i,#turbo-paid .mtx i{font-size:11px}}
/* Окна статуса и «оплата прошла» на низких экранах: плотнее, чтобы список
   выгод влезал целиком на 300×560 и 320×568 (замечание владельца 15.09) */
@media (max-height:600px){
  #turbo-status .modal,#turbo-paid .modal{padding:14px 14px 12px}
  #turbo-status .m-head,#turbo-paid .m-head{margin-bottom:10px}
  #turbo-status .ts-active{margin:2px 0 4px}
  #turbo-status .ts-row{padding:8px 0}
  #turbo-status .ts-bens,#turbo-paid .ts-bens{margin-top:10px;padding:9px 11px}
  #turbo-status .ts-bens-t,#turbo-paid .ts-bens-t{margin-bottom:4px}
  #turbo-status .ts-ben,#turbo-paid .ts-ben{font-size:12.5px;line-height:1.3;padding:3px 0;gap:8px}
  #turbo-paid .ts-resume-btn{margin-top:10px}
}