/* Автоэлектрик · Минск. Мир: страница техруководства, гамма по good2go.ru. Мобильная версия первая */

@font-face{font-family:"Manrope";src:url("../../fonts/manrope-cyrillic.woff2") format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Manrope";src:url("../../fonts/manrope-latin.woff2") format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* широкий гротеск только для заголовков и крупных слов */
@font-face{font-family:"Unbounded";src:url("../../fonts/unbounded-cyrillic.woff2") format("woff2");font-weight:200 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Unbounded";src:url("../../fonts/unbounded-latin.woff2") format("woff2");font-weight:200 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --paper:#F6F5F1;
  --ink:#1D1E27;
  --ink-h:#353743;
  --g1:#EDEBE6;
  --g2:#DEDCD6;
  --g3:#C4C1BA;
  --g4:#8E8B86;
  --g5:#6A6763;
  --g6:#46454A;
  --g7:#2B2D35;
  --tint:#EDEBE4;
  --deep:#112D2B;
  /* один акцент: лайм. На бумаге им заливают, текстом и маркерами он печатается оливой */
  --lime:#EFFDA4;
  --lime-d:#E2F27A;
  /* наведение на лайм: светлее и с сиянием, а не темнее. Нажатие: насыщеннее и ярче ореол */
  --lime-hi:#F3FEB9;
  --lime-p:#E8FA6E;
  --olive:#5B6500;
  --err:#A3361F;
  --err-l:#F95D51;

  --f:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fd:"Unbounded","Manrope",system-ui,sans-serif;
  --gut:16px;
  --sec:52px;
  --h1:clamp(25px,1.2vw + 20px,40px);
  --h2:clamp(22px,1.1vw + 17px,34px);
  --ease:cubic-bezier(.16,1,.3,1);

  /* глубина: на бумаге лежат листы и снимки, кнопки выпуклые, поля вдавлены. Тень тёплая графитовая */
  --e1:0 1px 2px rgba(29,30,39,.07),0 4px 10px -4px rgba(29,30,39,.12);
  --e2:0 1px 2px rgba(29,30,39,.06),0 12px 28px -12px rgba(29,30,39,.24);
  --e3:0 2px 4px rgba(29,30,39,.06),0 28px 56px -20px rgba(29,30,39,.34);
  --e-neg:0 2px 4px rgba(1,20,19,.3),0 22px 44px -18px rgba(1,20,19,.7);
  --sunk:inset 0 1px 3px rgba(29,30,39,.12);
  --edge:inset 0 -2px 0 rgba(1,20,19,.2);
  /* сияние лаймовых кнопок (решение владельца 25.10): кольцо и тёплое свечение вниз.
     На тёмной панели светится сам лайм, на бумаге его не видно, поэтому там ореол насыщеннее */
  --glow-rest:0 10px 24px -14px rgba(239,253,164,.28);
  --glow:0 0 0 3px rgba(239,253,164,.08),0 12px 28px -12px rgba(239,253,164,.34);
  --glow-on:0 0 0 3px rgba(239,253,164,.14),0 8px 22px -10px rgba(239,253,164,.42);
  --glow-p:0 0 0 4px rgba(222,246,80,.55),0 10px 22px -8px rgba(110,128,0,.5);
  --glow-p-on:0 0 0 5px rgba(222,246,80,.75),0 4px 14px -4px rgba(110,128,0,.55);
  /* скругления: поле, кнопка, карточка, панель, мелочь */
  --r-f:12px;
  --r-b:14px;
  --r-c:16px;
  --r-p:18px;
  --r-s:8px;
}
@media (min-width:768px){:root{--gut:32px;--sec:60px}}
@media (min-width:1200px){:root{--gut:48px;--sec:68px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
/* синий прямоугольник браузера при касании убран: отклик дают свои :active у кнопок и ссылок */
html,/* синий прямоугольник браузера при касании убран: отклик дают свои .is-press у кнопок и ссылок */
html{-webkit-tap-highlight-color:transparent}
/* страховка от бокового сдвига на телефонах: clip, а не hidden, чтобы не ломать липкую шапку */
body{overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.55 var(--f);font-variant-numeric:tabular-nums lining-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--lime);color:var(--ink)}
img,svg{display:block}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
h1,h2,h3,p,ol,ul,dl,dd,figure,blockquote{margin:0}
ol,ul{padding:0;list-style:none}
button,input{font:inherit;color:inherit}
/* нажатие без задержки: состояние нажатия включается сразу, плавным остаётся только возврат.
   .is-press ставит скрипт по первому касанию, не дожидаясь, пока телефон включит :active */
:is(a,button,summary,label):active,:is(a,button,summary,label):active *,.is-press,.is-press *,.dsw:has(.is-press,a:active) .dsw__pill{transition-duration:0s!important}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.sec--neg :focus-visible{outline-color:var(--lime)}
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
html{scrollbar-color:var(--g4) var(--g1)}

.wrap{width:100%;max-width:1360px;margin:0 auto;padding:0 var(--gut)}
h1,h2{font-family:var(--fd);font-weight:600;letter-spacing:-.03em;text-wrap:balance;overflow-wrap:break-word}
/* колонки секций не растягиваются по самому длинному слову: иначе на 320px сетка шире экрана */
.form4,.about,.hour,.biz,.fin,.faq,.ev,.probs{grid-template-columns:minmax(0,1fr)}
.form4>*,.about>*,.hour>*,.biz>*,.fin>*,.faq>*,.ev>*,.probs>*{min-width:0}
h1{font-size:var(--h1);line-height:1.12}
h2{font-size:var(--h2);line-height:1.14;max-width:24ch}
strong,b{font-weight:700}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border:1px solid var(--ink);border-radius:var(--r-b);font-weight:700;font-size:16px;line-height:1.2;text-decoration:none;text-align:center;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,box-shadow .25s var(--ease),transform .25s var(--ease)}
.btn svg{width:20px;height:20px;flex:none}
.btn:active,.btn.is-press{transform:translateY(1px)}
.btn--ink{background:var(--ink);border-color:var(--ink);color:var(--paper);box-shadow:var(--edge),0 10px 20px -10px rgba(29,30,39,.6)}
.btn--ink svg{color:var(--lime)}
/* наведение: кнопка светлеет и поднимается, иконка сдвигается вперёд. Нажатие возвращает её вниз */
.btn svg{transition:transform .3s var(--ease)}
.btn:hover svg{transform:translateX(2px)}
.btn--ink:hover{background:var(--ink-h);border-color:var(--ink-h);transform:translateY(-2px);box-shadow:var(--edge),0 18px 30px -12px rgba(29,30,39,.75)}
.btn--ink:active,.btn--ink.is-press{background:#000;border-color:#000;transform:translateY(1px);box-shadow:var(--edge),0 4px 10px -6px rgba(29,30,39,.6)}
/* лаймовая иконка на графите при наведении загорается */
.btn--ink svg{transition:transform .3s var(--ease),filter .3s}
.btn--ink:hover svg{filter:drop-shadow(0 0 5px rgba(239,253,164,.85))}
.btn--line{background:transparent;color:var(--ink)}
.btn--line:hover{background:#fff;transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--ink),var(--e2)}
.btn--line:active,.btn--line.is-press{transform:translateY(1px);box-shadow:inset 0 0 0 1px var(--ink),var(--e1)}
.hero .btn--line{background:#fff}
.btn--paper{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--paper:hover{background:var(--g2);border-color:var(--g2)}
/* лаймовая кнопка на тёмной панели светится уже в покое; наведение светлее, с бликом и ореолом, нажатие ярче */
.sec--neg .btn--paper{position:relative;isolation:isolate;overflow:hidden;background:var(--lime);border-color:var(--lime);color:var(--ink);box-shadow:var(--edge),0 12px 24px -12px rgba(1,20,19,.9),var(--glow-rest)}
.sec--neg .btn--paper::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.sec--neg .btn--paper:hover{background:var(--lime-hi);border-color:var(--lime-hi);transform:translateY(-2px);box-shadow:var(--edge),0 20px 32px -12px rgba(1,20,19,.95),var(--glow)}
.sec--neg .btn--paper:hover::after{transform:translateX(120%);transition:transform .8s var(--ease)}
.sec--neg .btn--paper:active,.sec--neg .btn--paper.is-press{background:var(--lime-p);border-color:var(--lime-p);transform:translateY(1px) scale(.99);box-shadow:var(--edge),var(--glow-on)}
.btn[disabled]{opacity:.55;cursor:progress;transform:none}
.sec--neg .btn--line{color:var(--paper);border-color:var(--paper)}
.sec--neg .btn--line:hover{background:var(--paper);border-color:var(--paper);color:var(--ink);box-shadow:var(--e-neg)}
.hint{font-size:14px;font-weight:500;line-height:1.4;color:var(--g5)}
.sec--neg .hint{color:var(--g3)}

/* ---------- шапка ---------- */
/* шапка: тёмная панель, как обложка руководства. Цвета и рамки взяты из тёмных секций */
.hdr{--g3:#A7BBB7;--g6:#2A4B48;--g7:#193432;position:sticky;top:0;z-index:40;background:var(--deep);color:var(--paper);border-bottom:1px solid var(--g6);box-shadow:0 10px 24px -14px rgba(1,20,19,.75)}
.hdr :focus-visible{outline-color:var(--lime)}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px}
.logo{--lw:var(--ink);--lo:var(--ink);--la:var(--olive);display:inline-flex;align-items:center;gap:.36em;font-weight:800;font-size:16px;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.logo__mark{flex:none;width:36px;height:25px;margin-right:6px}
.logo span{color:var(--olive)}
.hdr .logo{display:flex;--lw:var(--g3);--lo:var(--paper);--la:var(--lime)}
/* в шапке вместо словесного знака адрес: знак слева, адрес и часы двумя строками */
.brand{display:flex;align-items:center;gap:13px}
.brand .logo__mark{width:40px;height:28px;margin:0}
.brand__addr{display:flex;flex-direction:column;padding-left:13px;border-left:1px solid var(--g6);font-size:16px;font-weight:800;line-height:1.2;letter-spacing:-.01em;color:var(--paper);text-decoration:none;white-space:nowrap}
.brand__addr small{font-size:13px;font-weight:600;letter-spacing:0;color:var(--g3)}
/* адрес остаётся ссылкой, но без постоянной линии: она проявляется только при наведении мышью */
.brand__addr>span{text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.22em;transition:text-decoration-color .2s,color .2s}
.brand__addr small{transition:color .2s}
@media (hover:hover){.brand__addr:hover>span{text-decoration-color:var(--lime)}.brand__addr:hover small{color:var(--lime)}}
.brand__addr:active>span,.brand__addr:active small,.brand__addr.is-press>span,.brand__addr.is-press small{color:var(--lime)}
/* телефоны: без вертикальной черты между знаком и адресом, шапка легче */
@media (max-width:599px){.brand{gap:12px}.brand__addr{padding-left:0;border-left:0}}
/* узкие телефоны: знак держим крупным, ужимаем только отступы, на 360-374 и до 339 знак чуть меньше */
@media (max-width:399px){.hdr__in{gap:6px}.brand{gap:10px}.brand__addr{font-size:14px}.brand__addr small{font-size:12px}}
@media (max-width:374px){.brand{gap:8px}.brand .logo__mark{width:34px;height:24px}}
/* 340-359: адрес с часами и две клавиши не влезали на 4px, ужимаем поля шапки и зазор между клавишами */
@media (max-width:359px){.hdr__in{padding:0 12px}.hdr__act{gap:2px}}
@media (max-width:339px){.brand .logo__mark{width:29px;height:20px}.brand__addr{font-size:13px}.brand__addr small{font-size:11px}}
.hdr__act{display:flex;align-items:center;gap:6px}
/* телефон: лаймовая клавиша, главный способ связи в шапке */
.hdr__tel{display:none;align-items:center;gap:9px;min-height:44px;padding:0 16px;margin-right:6px;border-radius:var(--r-f);background:var(--lime);color:var(--ink);font-weight:800;font-size:16px;text-decoration:none;white-space:nowrap;box-shadow:var(--edge),0 10px 20px -12px rgba(1,20,19,.9);transition:background-color .2s,transform .25s var(--ease),box-shadow .25s var(--ease)}
.hdr__tel svg{width:18px;height:18px}
.hdr__tel:hover{background:var(--lime-hi);transform:translateY(-1px);box-shadow:var(--edge),var(--glow)}
.hdr__tel:active,.hdr__tel.is-press{background:var(--lime-p);transform:translateY(1px);box-shadow:var(--edge),var(--glow-on)}
/* на телефоне клавиша плоская и на 4px меньше на вид, зона нажатия остаётся 44px */
.hdr .ibtn--tel{position:relative;width:40px;height:40px;margin:2px;background:var(--lime);color:var(--ink)}
.hdr .ibtn--tel::before{content:"";position:absolute;inset:-2px}
.hdr .ibtn--tel svg{width:20px;height:20px}
.hdr .ibtn--tel:hover{background:var(--lime-hi);color:var(--ink);box-shadow:var(--edge),var(--glow)}
.hdr .ibtn--tel:active,.hdr .ibtn--tel.is-press{background:var(--lime-p);box-shadow:var(--edge),var(--glow-on)}
.ibtn{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:var(--r-f);background:none;cursor:pointer;color:var(--paper);transition:background-color .2s,color .2s,box-shadow .2s}
.ibtn svg{width:22px;height:22px}
.ibtn:hover,.ibtn:active,.ibtn.is-press{color:var(--lime)}
.ibtn--menu:active,.ibtn--menu.is-press{background:var(--g7)}
.ibtn--msg{width:40px;height:40px;background:var(--g7);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),var(--edge)}
.ibtn--msg svg{width:20px;height:20px}
.ibtn--msg:hover{background:var(--lime);color:var(--ink);box-shadow:var(--edge),var(--glow)}
.ibtn--menu .i-shut,.hdr.is-open .ibtn--menu .i-open{display:none}
.hdr.is-open .ibtn--menu .i-shut{display:block}
.nav{display:none}
.hdr.is-open .nav{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:100%;background:var(--deep);border-bottom:1px solid var(--g6);padding:8px var(--gut) 16px;box-shadow:var(--e-neg)}
.nav a{padding:12px 0;border-bottom:1px solid var(--g6);text-decoration:none;font-weight:600;font-size:17px}
.nav a:hover,.nav a:active,.nav a.is-press{color:var(--lime)}
.nav .nav__tel{border:0;font-weight:800}
@media (max-width:499px){.hdr .ibtn--msg{display:none}}
@media (min-width:1100px){
  .nav{display:flex;gap:28px}
  .nav a{position:relative;padding:0;border:0;font-size:15px;color:var(--g3)}
  .nav a::after{content:"";position:absolute;left:0;right:0;bottom:-24px;height:2px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
  .nav a:hover{color:#fff}
  .nav a:hover::after{transform:scaleX(1)}
  .nav .nav__tel{display:none}
  .hdr__tel{display:inline-flex}
  .ibtn--menu,.ibtn--tel{display:none}
  .hdr__in{min-height:72px}
}
@media (min-width:1100px) and (max-width:1299px){.nav{gap:18px}}
/* 1100-1239: меню, телефон и два мессенджера не влезают в строку, мессенджеры остаются в плавающей кнопке */
@media (min-width:1100px) and (max-width:1239px){.hdr .ibtn--msg{display:none}.hdr__tel{margin-right:0}}
/* Galaxy Fold и уже: знак уходит, остаётся адрес с часами */
@media (max-width:319px){.brand .logo__mark{display:none}}
@media (max-width:299px){:root{--gut:12px}.hdr__in{padding:0 10px;gap:2px}.brand__addr{font-size:12px}.brand__addr small{font-size:10px}}

/* ---------- фигуры и плейсхолдеры ---------- */
.fig figcaption{padding-top:10px;font-size:13px;line-height:1.4;color:var(--g5)}
.ph{position:relative;background:var(--g1);overflow:hidden;border-radius:var(--r-c)}
.ph::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(29,30,39,.1)}
.hero__fig .ph,.about__fig .ph,.fig--wide .ph,.biz__fig .ph{box-shadow:var(--e3)}
.case .ph{box-shadow:var(--e1)}

/* лист: белая бумага поверх серой, открывается линией 2px, как таблица в руководстве */
.sheet{position:relative;overflow:hidden;background:#fff;border:1px solid var(--g2);border-radius:var(--r-p);box-shadow:var(--e2)}
.ph--43{aspect-ratio:4/3}
.ph--45{aspect-ratio:4/5}
.ph--169{aspect-ratio:16/9}
.ph img{width:100%;height:100%;object-fit:cover}
.ph.is-missing{background:repeating-linear-gradient(135deg,var(--g1) 0 9px,var(--g2) 9px 10px)}
.ph.is-missing img{display:none}
.ph.is-missing::after{content:attr(data-file);position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 8px;background:var(--paper);border:1px solid var(--g3);border-radius:var(--r-s);font-size:12px;font-weight:600;color:var(--g5)}

/* ---------- 1. первый экран ---------- */
.hero{position:relative;isolation:isolate;padding-top:24px}
/* миллиметровка под первым экраном: снимок и форма лежат поверх неё и гаснут к низу */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(var(--g2) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,var(--g2) 1px,transparent 1px) 0 0/24px 24px;opacity:.55;-webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 60%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.5) 60%,transparent 100%)}
/* лупа над миллиметровкой: под курсором или пальцем слабо проступает та же сетка темнее, с сантиметровыми линиями через 5 клеток.
   Слой ставит скрипт, маска двигается через --mx/--my */
.hero__lens{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;background:linear-gradient(rgba(29,30,39,.16) 1px,transparent 1px) 0 0/120px 120px,linear-gradient(90deg,rgba(29,30,39,.16) 1px,transparent 1px) 0 0/120px 120px,linear-gradient(var(--g3) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,var(--g3) 1px,transparent 1px) 0 0/24px 24px;-webkit-mask-image:radial-gradient(circle 170px at var(--mx,-999px) var(--my,-999px),#000,rgba(0,0,0,.35) 45%,transparent 100%);mask-image:radial-gradient(circle 170px at var(--mx,-999px) var(--my,-999px),#000,rgba(0,0,0,.35) 45%,transparent 100%)}
.hero.is-lens .hero__lens{opacity:.5}
.hero__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.hero__sub{margin-top:16px;font-size:17px;line-height:1.5;color:var(--g6);max-width:46ch}
/* три гарантии: один белый лист, разделённый на ячейки, в каждой иконка на лаймовой клавише */
.facts{display:grid;margin-top:22px;overflow:hidden;background:#fff;border:1px solid var(--g2);border-radius:var(--r-c);box-shadow:var(--e1)}
.facts li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:center;padding:14px 16px;font-weight:600;font-size:15px;line-height:1.35}
.facts li+li{border-top:1px solid var(--g2)}
.facts svg{width:40px;height:40px;padding:9px;border-radius:10px;background:var(--lime);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(91,101,0,.24)}
@media (min-width:1000px){.facts li{padding:10px 18px;font-size:16px}}
@media (min-width:600px) and (max-width:999px){
  .facts{grid-template-columns:repeat(3,1fr)}
  .facts li{grid-template-columns:1fr;align-content:start;gap:12px;padding:16px}
  .facts li+li{border-top:0;border-left:1px solid var(--g2)}
}
.msg{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}
.msg .btn{padding:0 12px}
@media (max-width:479px){.msg{grid-template-columns:1fr}}
.hero__fig{margin:0}
/* телефон и планшет: мессенджеры сразу под подзаголовком, чтобы были в первом экране; потом факты, иллюстрация в конце */
@media (max-width:999px){
  .hero__grid{gap:0}
  .hero__copy{display:contents}
  .msg{order:3}
  .facts{order:4}
  .hero__fig{order:5;margin-top:24px}
}
@media (min-width:768px){
  .hero__fig{margin:0}
  .msg{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
  .msg .btn{padding:0 22px;font-size:16px}
}
@media (min-width:1000px){
  /* уплотнено, чтобы на 1440×900 форма со строкой согласия помещалась в первый экран целиком */
  .hero{padding-top:28px}
  .hero__sub{margin-top:12px}
  .facts{margin-top:18px}
  .msg{margin-top:16px}
  .hero__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
  .hero__sub{font-size:19px}
}

/* ---------- формы ---------- */
.lead{position:relative}
.lead--strip{margin:32px 0 0;padding:20px 18px 22px;background:#fff;border:1px solid var(--g2);border-radius:var(--r-p);box-shadow:var(--e2)}
@media (min-width:768px){.lead--strip{margin:40px 0 0;padding:26px 28px 28px}}
.lead__title{font-size:20px;line-height:1.3;font-weight:800;letter-spacing:-.01em;max-width:28ch}
.lead__fields{display:grid;gap:12px;margin-top:16px}
.fld{display:block}
.fld__l{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.fld input{display:block;width:100%;height:52px;padding:0 14px;border:1px solid var(--g4);border-radius:var(--r-f);background:#fff;font-size:17px;box-shadow:var(--sunk);transition:border-color .2s,box-shadow .2s}
.lead--strip .fld input,.sheet .fld input{background:var(--paper)}
.fld input::placeholder{color:var(--g5)}
.fld input:hover{border-color:var(--ink)}
.fld input:focus{outline:0;border-color:var(--ink);box-shadow:var(--sunk),inset 0 0 0 1px var(--ink),0 0 0 4px var(--lime)}
.fld.is-bad input{border-color:var(--err);box-shadow:var(--sunk),inset 0 0 0 1px var(--err)}
.fld__e{display:block;min-height:0;font-size:13px;line-height:1.35;color:var(--err);margin-top:4px}
.fld__e:empty{margin:0}
/* согласие: своя галочка вместо системной. Пусто: вдавленная клетка; отмечено: лаймовая клавиша с графитовой галочкой */
.chk{display:flex;gap:12px;align-items:center;min-height:44px;margin-top:8px;font-size:14px;font-weight:500;line-height:1.4;color:var(--g6);cursor:pointer;transition:color .2s}
.chk input{-webkit-appearance:none;appearance:none;flex:none;display:grid;place-items:center;width:24px;height:24px;margin:0;border:1.5px solid var(--g4);border-radius:7px;background:#fff;box-shadow:var(--sunk);cursor:pointer;transition:background-color .2s,border-color .2s,box-shadow .3s var(--ease)}
.chk input::after{content:"";width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='m2.5 7.3 3 3 6-6.6' fill='none' stroke='%231D1E27' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transform:scale(0);transition:transform .3s var(--ease)}
.chk:hover input{border-color:var(--ink)}
.chk input:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.chk input:checked{background:var(--lime);border-color:var(--ink);box-shadow:var(--edge),var(--glow-p)}
.chk input:checked::after{transform:scale(1)}
.chk:has(input:checked){color:var(--ink)}
/* ссылка на текст согласия: открывается в новой вкладке, галочку не переключает */
.chk a{color:inherit;text-decoration:underline;text-decoration-color:var(--g4);transition:color .2s,text-decoration-color .2s}
.chk a:hover{color:var(--olive);text-decoration-color:var(--olive)}
.sec--neg .chk a:hover{color:var(--lime);text-decoration-color:var(--lime)}
.chk.is-bad{color:var(--err)}
/* текст ошибки согласия под галочкой, с отступом на ширину клетки */
.chk__e{padding-left:36px;margin-top:0}
.chk.is-bad input{border-color:var(--err);box-shadow:var(--sunk),inset 0 0 0 1px var(--err)}
.lead__go{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:18px}
.lead__go .btn{flex:1 1 100%}
/* заявка отправлена: текст сверху, под ним схема, где сигнал доходит по проводу до найденной точки и в кольце рисуется галочка */
.done{margin-top:18px}
.done:focus{outline:0}
.done__t{font-size:16px;line-height:1.5;color:var(--g6)}
.done__t b{display:block;margin-bottom:2px;font-size:20px;font-weight:800;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.sec--neg .done__t{color:var(--g3)}
.sec--neg .done__t b{color:var(--paper)}
.done__art{margin-top:20px;aspect-ratio:2/1;border-radius:var(--r-c);background-color:#0D2523;background-image:linear-gradient(#1A3835 1px,transparent 1px),linear-gradient(90deg,#1A3835 1px,transparent 1px);background-size:24px 24px;background-position:center;box-shadow:inset 0 0 0 1px var(--g6),inset 0 2px 8px rgba(1,20,19,.55)}
.done__art svg{width:100%;height:100%;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* на телефоне схема ужата почти вдвое, линии утолщаем, как у схем 16:9 */
.done__art{--w:1}
@media (max-width:767px){.done__art{--w:1.6}}
.done__wire{stroke:#5C7A76;stroke-width:calc(2.5px * var(--w))}
.done__blk{fill:#193432;stroke:#A7BBB7;stroke-width:calc(3px * var(--w))}
.done__core{fill:var(--lime)}
.done__trace{stroke:var(--lime);stroke-width:calc(4px * var(--w));stroke-dasharray:1;animation:done-draw .6s var(--ease) .15s both}
.done__ring{fill:#0D2523;stroke:var(--lime);stroke-width:calc(3px * var(--w));stroke-dasharray:1;transform:rotate(-90deg);transform-origin:center;transform-box:fill-box;animation:done-draw .55s var(--ease) .6s both}
.done__halo{stroke:var(--lime);stroke-width:calc(2px * var(--w));opacity:.3;transform-origin:center;transform-box:fill-box;animation:done-halo .9s var(--ease) 1.25s both}
.done .done__tick{stroke:var(--lime);stroke-width:calc(5px * var(--w));stroke-dasharray:1;animation:done-draw .4s var(--ease) 1.05s both}
/* на белом листе первого экрана: компактная лаймовая шайба с графитовой галочкой слева от текста */
.done--s{display:flex;align-items:center;gap:14px}
.done__ok{flex:none;width:48px;height:48px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.done__disc{fill:var(--lime);stroke:var(--olive);stroke-width:1;transform-origin:center;transform-box:fill-box;animation:done-pop .45s var(--ease) both}
.done--s .done__tick{stroke:var(--ink);stroke-width:3;stroke-dasharray:1;animation:done-draw .35s var(--ease) .25s both}
@keyframes done-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes done-halo{from{opacity:0;transform:scale(.72)}to{opacity:.3;transform:scale(1)}}
@keyframes done-pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.done *{animation:none!important}}
.lead.is-sent .lead__fields,.lead.is-sent .chk,.lead.is-sent .lead__go,.lead.is-sent .step{display:none}
@media (min-width:768px){
  .lead__go .btn{flex:0 0 auto}
  .lead__fields{grid-template-columns:1fr 1fr}
}
@media (min-width:1000px){
  /* title | name | phone | button: three equal controls on one line, consent and hint on the row below */
  .lead--strip{display:grid;grid-template-columns:4fr 3fr 3fr 3fr;grid-template-areas:"t n p b" "t c c h" "t e e .";gap:0 16px;align-items:start;margin-top:24px;padding:22px 28px 16px}
  .lead--strip .lead__title{grid-area:t;margin-right:16px;font-size:22px}
  .lead--strip .lead__fields,.lead--strip .lead__go{display:contents}
  .lead--strip .fld{grid-area:n}
  .lead--strip .fld+.fld{grid-area:p}
  .lead--strip .fld__l{line-height:20px}
  .lead--strip .lead__go .btn{grid-area:b;margin-top:26px}
  .lead--strip .lead__go .hint{grid-area:h;align-self:center;margin-top:10px}
  .lead--strip .chk{grid-area:c;margin:10px 0 0}
  .lead--strip .chk__e{grid-area:e}
  .lead--strip .lead__done{grid-column:n-start/b-end;grid-row:n-start/c-end;margin:0;align-self:center}
  .lead--strip.is-sent{align-items:center}
  .lead--strip.is-sent .lead__title{align-self:center}
}
/* too narrow for the title beside three controls: title goes on its own line above them */
@media (min-width:1000px) and (max-width:1199px){
  .lead--strip{grid-template-columns:repeat(3,1fr);grid-template-areas:"t t t" "n p b" "c c h" "e e ."}
  .lead--strip .lead__title{max-width:none;margin:0 0 14px}
}

/* ---------- секции ---------- */
.sec{padding:var(--sec) 0}
.sec--rule{border-top:1px solid var(--ink)}
.sec h2+*{margin-top:28px}
.sec__head h2+.sec__sub{margin-top:16px}
.sec__sub{font-size:17px;color:var(--g6);max-width:60ch}
.sec__head+*{margin-top:28px}
.sec--neg{--g3:#A7BBB7;--g4:#71908B;--g5:#5C7A76;--g6:#2A4B48;--g7:#193432;--sunk:inset 0 2px 4px rgba(1,20,19,.45);background:var(--deep);color:var(--paper);box-shadow:inset 0 18px 30px -22px rgba(1,20,19,.9)}
.sec--tint{background:var(--tint)}
.sec--tint+.sec--rule{border-top-color:transparent}
.sec--neg .sec__sub{color:var(--g3)}
/* тёмная секция как скруглённая панель внутри полей, а не во всю ширину */
.sec--card{padding:0 0 var(--gut);background:none;box-shadow:none}
.panel{padding:36px 18px;border-radius:24px;background:var(--deep);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--e3)}
@media (min-width:768px){.panel{padding:52px 40px}}
@media (min-width:1200px){.panel{padding:64px 56px}}

/* клавиша со стрелкой: квадрат лайма; ссылка «текст + клавиша» для второстепенных действий */
/* наведение не гасит клавишу в графит: она остаётся лаймовой, подрастает и загорается ореолом */
.key{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:10px;background:var(--lime);color:var(--ink);box-shadow:var(--edge);transition:background-color .2s,color .2s,box-shadow .3s var(--ease),transform .3s var(--ease)}
.key svg{width:20px;height:20px;transition:transform .3s var(--ease)}
.go{display:inline-flex;align-items:center;gap:14px;padding:0;border:0;background:none;font-weight:700;font-size:14px;line-height:1.2;letter-spacing:.02em;text-transform:uppercase;text-decoration:none;cursor:pointer}
.go:hover .key{transform:scale(1.08);box-shadow:var(--edge),var(--glow-p)}
.go:hover .key svg{transform:translate(2px,-2px)}
.go:active .key,.go.is-press .key{background:var(--lime-p);transform:scale(.97);box-shadow:var(--edge),var(--glow-p-on)}

/* 2. проблемы: крупные слова вместо карточек. Клик выбирает проблему в форме блока 4 */
.probs__list{border-top:2px solid var(--ink)}
.prob{display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:center;padding:18px 0;border-bottom:1px solid var(--g3);text-decoration:none}
.prob__t{font-family:var(--fd);font-weight:600;font-size:clamp(17px,4.6vw + 4px,44px);line-height:1.08;letter-spacing:-.03em;text-transform:uppercase;transition:color .25s,transform .4s var(--ease)}
.prob__d{grid-column:1;font-size:15px;line-height:1.45;color:var(--g6);max-width:46ch}
/* только здесь стрелка: крупная клавиша, в покое лаймовая, на наведении светится и тянется к форме */
.prob .key{grid-column:2;grid-row:1/3;width:52px;height:52px;border-radius:var(--r-f)}
.prob .key svg{width:24px;height:24px}
.prob:hover .key,.prob:focus-visible .key{transform:scale(1.08);box-shadow:var(--edge),var(--glow-p)}
.prob:hover .key svg,.prob:focus-visible .key svg{transform:translate(3px,-3px)}
.prob:active .key,.prob.is-press .key{background:var(--lime-p);transform:scale(.97);box-shadow:var(--edge),var(--glow-p-on)}
@media (max-width:599px){.prob .key{width:44px;height:44px}.prob .key svg{width:20px;height:20px}}
.probs__fig{display:none;margin:0}
@media (min-width:1000px){
  .probs{display:grid;grid-template-columns:7fr 5fr;gap:48px;align-items:start}
  .prob{padding:22px 0}
  /* колонка 7/12: «Электромобиль» с клавишей влезает на 1000px только при 38px */
  .prob__t{font-size:min(44px,3.2vw + 6px)}
  .prob__d{font-size:16px}
  .probs__fig{display:block;position:sticky;top:96px}
  .probs__fig .ph{box-shadow:var(--e3)}
  .probs__fig .ph{background:#112D2B}
}
/* Схемы вместо снимков: тёмная пластина, линии из зелёной шкалы, лаймом то, что нашли или поставили.
   Сценарий у каждой свой, задержки и длительности в style элемента (--d, --t).
   --k держит толщину линий в увеличенной группе такой же, как на остальных схемах */
.probs__art{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .25s;fill:none;stroke-linecap:round;stroke-linejoin:round}
.probs__art.is-on{opacity:1}
.is-swap>.probs__art{opacity:0}
.pa-bg{fill:#112D2B}
.pa-s{stroke:#5C7A76;stroke-width:calc(2.5px * var(--k,1) * var(--w,1))}
.pa-l{stroke:#A7BBB7;stroke-width:calc(3px * var(--k,1) * var(--w,1))}
.pa-t{stroke:#A7BBB7;stroke-width:calc(2.5px * var(--k,1) * var(--w,1))}
.pa-n{stroke:var(--paper);stroke-width:calc(3.5px * var(--k,1) * var(--w,1))}
.pa-hub{fill:#193432;stroke:#A7BBB7;stroke-width:calc(2px * var(--k,1) * var(--w,1))}
.pa-d{fill:#0B2321;stroke:#5C7A76;stroke-width:calc(2px * var(--k,1) * var(--w,1))}
.pa-b{fill:#193432;stroke:#A7BBB7;stroke-width:calc(3px * var(--k,1) * var(--w,1))}
.pa-c{fill:#193432;stroke:#5C7A76;stroke-width:calc(2.5px * var(--k,1) * var(--w,1))}
.pa-w{stroke:#5C7A76;stroke-width:calc(3px * var(--k,1) * var(--w,1))}
.pa-p{stroke:#A7BBB7;stroke-width:calc(5px * var(--k,1) * var(--w,1))}
.pa-seg{fill:#A7BBB7;stroke:none}
.pa-dash{stroke-dasharray:2 9}
.pa-glow{fill:var(--lime);stroke:none;opacity:.32}
.pa-x{stroke:var(--lime);stroke-width:calc(3px * var(--k,1) * var(--w,1))}
.pa-fov,.pa-sig{stroke-width:calc(2px * var(--k,1) * var(--w,1));stroke-dasharray:2 9;opacity:.6}
.pa-lf{fill:var(--lime);stroke:none}
.pa-trace{stroke:var(--lime);stroke-width:calc(4px * var(--k,1) * var(--w,1))}
.pa-trace.pa-g{stroke:#5C7A76;stroke-width:calc(2.5px * var(--k,1) * var(--w,1))}
.pa-ring{stroke:var(--lime);stroke-width:calc(2.5px * var(--k,1) * var(--w,1));transform-box:fill-box;transform-origin:center}
.pa-ring--2{opacity:.3}
/* широкие схемы на телефоне ужимаются втрое: линии толще, чтобы не таять */
@media (max-width:767px){.ph--169 .probs__art{--w:1.7}}
.a-hot{stroke:var(--lime)}
.a-off{opacity:.12}
.a-swing{transform-box:view-box}
/* без анимации сразу конечный кадр; с ней схема ждёт показа в начальном */
.js-anim .probs__art .pa-trace{stroke-dasharray:1;stroke-dashoffset:1}
.js-anim .probs__art:not(.is-run) :is(.a-on,.a-blink,.pa-ring){opacity:0}
.js-anim .probs__art:not(.is-run) .a-off{opacity:1}
.js-anim .probs__art:not(.is-run) .a-hot{stroke:#5C7A76}
.js-anim .probs__art:not(.is-run) .a-swing{transform:rotate(var(--r))}
.js-anim .is-run .pa-trace{animation:pa-draw var(--t,.6s) cubic-bezier(.6,0,.4,1) var(--d,0s) both}
.js-anim .is-run .a-on{animation:pa-on var(--t,.25s) ease-out var(--d,0s) both}
.js-anim .is-run .a-blink{animation:pa-blink .7s linear var(--d,0s) both}
.js-anim .is-run .a-off{animation:pa-off .3s ease-in var(--d,0s) both}
.js-anim .is-run .a-hot{animation:pa-hot .3s ease-out var(--d,0s) both}
.js-anim .is-run .a-swing{animation:pa-swing var(--t,1s) var(--ease) var(--d,0s) both}
.js-anim .is-run .pa-ring{animation:pa-ring .6s var(--ease) var(--d,0s) both}
.js-anim .is-run .pa-ring--2{animation:pa-ring .6s var(--ease) var(--d,0s) both,pa-pulse 2.4s ease-in-out calc(var(--d,0s) + .7s) 2}
@keyframes pa-blink{0%{opacity:0}12%{opacity:1}24%{opacity:.15}40%,100%{opacity:1}}
@keyframes pa-on{from{opacity:0}}
@keyframes pa-off{from{opacity:1}}
@keyframes pa-draw{to{stroke-dashoffset:0}}
@keyframes pa-hot{from{stroke:#5C7A76}}
@keyframes pa-swing{from{transform:rotate(var(--r))}}
@keyframes pa-ring{from{opacity:0;transform:scale(.4)}}
@keyframes pa-pulse{50%{opacity:.08;transform:scale(1.12)}}
@media (min-width:1000px) and (hover:hover){
  .prob:hover .prob__t{transform:translateX(8px)}
  .probs__list:hover .prob:not(:hover) .prob__t{color:var(--g4)}
}

/* 3. цены */
.price{width:100%;border-collapse:collapse;border-top:2px solid var(--ink)}
/* фон выбранной строки не прилипает к тексту: отступ живёт в строке, лист даёт остальное */
.sheet--price{margin:28px 0 0;padding:4px 4px 8px}
.sheet--price .price{border-top:0}
.sheet--price .price tr{padding-left:12px;padding-right:12px}
.sheet--price .price tbody tr:last-child{border-bottom:0}
@media (min-width:768px){.sheet--price{margin:32px 0 0;padding:6px 14px 10px}}
@media (min-width:900px){.sheet--price .price :is(th,td):first-child{padding-left:14px}.sheet--price .price td:last-child{padding-right:14px}}
.price thead{display:none}
.price tr{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding:16px 0;border-bottom:1px solid var(--g3);transition:background-color .2s}
.price th[scope=row]{text-align:left;font-weight:700;font-size:17px;line-height:1.35}
.price td{padding:0}
.price__v{text-align:right;font-weight:800;font-size:19px;white-space:nowrap}
.price__n{grid-column:1;font-size:15px;color:var(--g5)}
.price__n:empty{display:none}
/* стрелка записи справа под ценой, вся строка кликабельна */
.price tbody tr{cursor:pointer}
.price td:last-child{grid-column:2;grid-row:2;justify-self:end;align-self:end}
/* пометка сезона над названием услуги: олива капсом, чтобы не спорить с лаймовой кнопкой записи */
.tag{display:block;margin-bottom:4px;color:var(--olive);font-size:11px;font-weight:800;line-height:1.3;letter-spacing:.08em;text-transform:uppercase}
/* запись в прайсе: контурная плашка со словом, без стрелки, чтобы таблица не повторяла список проблем.
   В покое графитовый контур на белом (тише десяти лаймовых плашек подряд), лайм загорается на наведении строки,
   фокусе и выборе; выбранная строка показывает галочку «Выбрано» */
.pick{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 16px;border:1px solid var(--g5);border-radius:10px;background:transparent;color:var(--ink);font-weight:700;font-size:14px;line-height:1;white-space:nowrap;cursor:pointer;transition:background-color .2s,border-color .2s,box-shadow .3s var(--ease),transform .3s var(--ease)}
.pick svg{display:none;width:16px;height:16px;margin-left:-2px}
.pick:hover,.pick:focus-visible,.price tbody tr:hover .pick{background:var(--lime);border-color:var(--olive);transform:translateY(-1px);box-shadow:var(--edge),var(--glow-p)}
.pick:active,.pick.is-press{background:var(--lime-p);border-color:var(--olive);transform:translateY(1px);box-shadow:var(--edge),var(--glow-p-on)}
.price tr.is-picked{background:var(--g1);border-radius:var(--r-f);border-bottom-color:transparent}
.price tr.is-picked .pick{background:var(--lime-p);border-color:var(--olive);box-shadow:var(--edge),var(--glow-p)}
.price tr.is-picked .pick svg{display:block}
.price__more{margin-top:24px;font-size:16px;color:var(--g6);max-width:80ch}
@media (min-width:900px){
  .price thead{display:table-header-group}
  .price tr{display:table-row}
  .price th,.price td{padding:16px 16px 16px 0;vertical-align:baseline;text-align:left}
  .price thead th{padding:10px 16px 10px 0;font-size:13px;font-weight:700;color:var(--g5);border-bottom:1px solid var(--ink)}
  .price td:last-child{text-align:right;padding-right:0;margin:0;white-space:nowrap}
  .price__v{text-align:left;width:9em}
  .price__n{width:34%}
  .price__n:empty{display:table-cell}
  .price tbody tr:hover{background:var(--g1)}
}

/* 4. форма с шагами */
.form4{display:grid;gap:32px}
.sec--neg h2{max-width:20ch}
.step{margin:0;padding:0;border:0;min-width:0}
.step+.step{margin-top:28px}
.step legend{padding:0;margin-bottom:14px;font-weight:800;font-size:18px}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tile{position:relative;display:flex;align-items:center;min-height:64px;padding:12px 14px;background:var(--deep);border:1px solid var(--g6);border-radius:var(--r-b);box-shadow:inset 0 1px 0 rgba(255,255,255,.05);cursor:pointer;font-weight:600;font-size:15px;line-height:1.3;transition:background-color .2s,color .2s,opacity .2s,box-shadow .2s}
.tile input{position:absolute;opacity:0;pointer-events:none}
.tile:hover,.tile:active,.tile.is-press{background:var(--g7)}
.tile:has(input:focus-visible){outline:2px solid var(--lime);outline-offset:2px}
.tile:has(input:checked){z-index:1;background:var(--lime);border-color:var(--lime);color:var(--ink);box-shadow:var(--edge),0 14px 26px -12px rgba(1,20,19,.95),var(--glow-rest)}
.tile:has(input:checked):hover{background:var(--lime-hi);box-shadow:var(--edge),var(--glow)}
.tiles:has(input:checked) .tile:not(:has(input:checked)){color:var(--g4)}
/* выбор необязателен: снять можно повторным кликом по плитке или этой кнопкой */
.tiles__x{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin-top:10px;padding:0 14px 0 10px;border:1px solid var(--g6);border-radius:10px;background:none;color:var(--g3);font-size:14px;font-weight:600;cursor:pointer;transition:color .2s,border-color .2s,background-color .2s}
.tiles__x svg{width:16px;height:16px}
.tiles__x:hover,.tiles__x:active,.tiles__x.is-press{color:var(--paper);border-color:var(--g5);background:var(--g7)}
/* услуга из прайса: шаг 1 сворачивается в одну строку на месте плиток, плитки прячутся, отправляется только услуга */
.svc{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 8px 8px 14px;border:1px solid var(--lime);border-radius:var(--r-b);background:var(--g7);font-size:15px;line-height:1.3;color:var(--g3)}
.svc:focus{outline:0}
.svc:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.svc>svg{flex:none;width:28px;height:28px;padding:5px;border-radius:8px;background:var(--lime);color:var(--ink);cursor:pointer}
.svc span{flex:1;min-width:0}
.svc b{color:var(--paper);font-weight:700}
.svc__x{flex:none;min-height:44px;padding:0 12px;border:0;border-radius:10px;background:none;color:var(--g3);font-size:14px;font-weight:600;text-decoration:underline;text-decoration-color:var(--g5);text-underline-offset:.2em;cursor:pointer;transition:color .2s,background-color .2s}
.svc__x:hover,.svc__x:active,.svc__x.is-press{color:var(--lime);background:var(--deep)}
.lead.has-svc .tiles,.lead.has-svc .tiles__x{display:none}
.sec--neg .fld input{background:var(--g7);border-color:var(--g5);color:var(--paper)}
.sec--neg .fld input::placeholder{color:var(--g3)}
.sec--neg .fld input:hover{border-color:var(--paper)}
.sec--neg .fld input:focus{border-color:var(--lime);box-shadow:inset 0 0 0 1px var(--lime)}
.sec--neg .fld.is-bad input{border-color:var(--err-l);box-shadow:inset 0 0 0 1px var(--err-l)}
.sec--neg .fld__e,.sec--neg .chk.is-bad{color:var(--err-l)}
.sec--neg .chk{color:var(--g3)}
.sec--neg .chk input{background:var(--g7);border-color:var(--g5)}
.sec--neg .chk:hover input{border-color:var(--paper)}
.sec--neg .chk input:focus-visible{outline-color:var(--lime)}
.sec--neg .chk input:checked{background:var(--lime);border-color:var(--lime);box-shadow:var(--edge),var(--glow)}
.sec--neg .chk:has(input:checked){color:var(--paper)}
.sec--neg .chk.is-bad input{border-color:var(--err-l);box-shadow:var(--sunk),inset 0 0 0 1px var(--err-l)}
@media (min-width:768px){.tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* узкие телефоны: «сигнализацию» не влезает в плитку половинной ширины, плитки в одну колонку */
@media (max-width:359px){.tiles{grid-template-columns:minmax(0,1fr)}.tile{min-height:52px}}
@media (min-width:360px) and (max-width:399px){.tile{padding:12px 10px;font-size:14px}}
/* после отправки текст встаёт на уровень заголовка, схема с галочкой тянется до низа левой колонки */
@media (min-width:1000px){
  .form4{grid-template-columns:5fr 7fr;gap:48px}
  .form4 .lead.is-sent{display:flex;flex-direction:column}
  .form4 .done{flex:1;display:flex;flex-direction:column;margin-top:0}
  .form4 .done__t{padding-top:4px;font-size:17px}
  .form4 .done__t b{font-size:22px}
  .form4 .done__art{flex:1;min-height:260px;margin-top:28px;aspect-ratio:auto}
}
/* схема выбранной проблемы под заголовком: те же схемы, что в блоке 2, утоплены в панель */
.form4__art{display:none}
@media (min-width:1000px){
  .form4__art{display:block;position:relative;aspect-ratio:4/3;max-width:560px;margin-top:40px;border-radius:var(--r-c);overflow:hidden}
  .form4__art::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px var(--g6),inset 0 2px 8px rgba(1,20,19,.55)}
  .form4__art .pa-bg{fill:#0D2523}
}

/* 5. шаги */
.steps{display:grid;border-top:2px solid var(--ink)}
.steps li{position:relative;display:grid;grid-template-columns:44px 1fr;gap:12px;padding:20px 0;border-bottom:1px solid var(--g3)}
.steps b{font-family:var(--fd);font-size:26px;line-height:1;font-weight:600;color:var(--olive)}
.steps p{font-size:16px;color:var(--g6)}
.steps strong{display:block;color:var(--ink);font-size:18px;margin-bottom:4px}
.steps__end strong{font-size:24px;letter-spacing:-.01em}
.steps__end b{font-size:38px}
.note{margin-top:24px;font-size:16px;color:var(--g6);max-width:70ch}
@media (min-width:900px){
  .steps{grid-template-columns:1fr 1fr 1fr 1.35fr;border-top:0}
  .steps li{grid-template-columns:1fr;align-content:start;gap:16px;padding:20px 24px 8px 0;border:0;border-top:2px solid var(--ink)}
  .steps li::before{content:"";position:absolute;z-index:1;top:-6px;left:0;width:10px;height:10px;border-radius:50%;background:var(--ink)}
  .steps__end::before{background:var(--lime)!important;width:16px!important;height:16px!important;top:-9px!important;left:9.5px!important;box-shadow:inset 0 0 0 2px var(--ink)}
  .steps__end{border-top-color:var(--olive)!important}
}

/* 6. час дешевеет */
.hour{display:grid;gap:40px}
.hour__txt{font-size:17px;color:var(--g6);max-width:56ch}
.quote{margin-top:28px;padding:20px 0;border-top:1px solid var(--g3);border-bottom:1px solid var(--g3)}
.quote p{font-size:21px;line-height:1.35;font-weight:700;letter-spacing:-.01em;max-width:34ch}
.quote footer{margin-top:10px;font-size:14px;color:var(--g5)}
.hour .lead__go{margin-top:28px}
/* цена часа: лист, как прайс. Три вдавленные шкалы на общей базе, заливка идёт по гамме сайта:
   тёмно-зелёный, приглушённый зелёный, лайм */
.meter{padding:18px 16px 16px}
.meter .meter__cap{padding:0 0 14px;margin-bottom:20px;border-bottom:1px solid var(--g2);font-size:16px;font-weight:800;line-height:1.3;color:var(--ink)}
.meter__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.meter__track{position:relative;height:220px;border-radius:var(--r-b);background:var(--g1) repeating-linear-gradient(0deg,transparent 0 43px,var(--g2) 43px 44px);box-shadow:var(--sunk)}
.meter__fill{position:absolute;left:4px;right:4px;bottom:4px;height:calc(var(--h) - 8px);border-radius:10px;background:var(--deep);box-shadow:var(--edge),inset 0 1px 0 rgba(255,255,255,.1)}
.meter__col:nth-child(2) .meter__fill{background:#5C7A76}
.meter__col--end .meter__fill{background:var(--lime);box-shadow:inset 0 0 0 1px rgba(91,101,0,.28),inset 0 -2px 0 rgba(91,101,0,.2),0 10px 22px -10px rgba(110,128,0,.55)}
.meter__hr{margin-top:14px;font-size:14px;font-weight:700;line-height:1.2;color:var(--g6)}
.meter__hr b{font-family:var(--fd);font-size:26px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}
.meter__lv{margin-top:4px;font-size:15px;font-weight:800;line-height:1.25}
.meter__col--end .meter__lv{color:var(--olive)}
/* при входе в экран шкалы наполняются по очереди снизу */
.js-anim .meter__fill{clip-path:inset(100% 0 0 0 round 10px);transition:clip-path 1s var(--ease)}
.js-anim .is-in .meter__fill{clip-path:inset(0 0 0 0 round 10px)}
.js-anim .meter__col:nth-child(2) .meter__fill{transition-delay:.18s}
.js-anim .meter__col:nth-child(3) .meter__fill{transition-delay:.36s}
@media (min-width:600px){.meter{padding:24px 24px 20px}.meter__cols{gap:16px}.meter__track{height:260px}}
@media (min-width:1000px){.hour{grid-template-columns:6fr 5fr;gap:48px;align-items:start}.meter__track{height:300px}.meter__hr b{font-size:30px}.meter__lv{font-size:16px}}

/* 7. кто работает */
.about{display:grid;gap:40px}
/* цитата сразу под заголовком про благодарность, список фактов ниже отделён своей линией 2px */
.about .quote{margin-top:24px;padding:0 0 4px;border:0}
.about .quote+.spec{margin-top:28px}
/* общая сетка на весь список: первая колонка по самому длинному термину, строки выровнены */
.spec{display:grid;grid-template-columns:auto 1fr;column-gap:24px;border-top:2px solid var(--ink)}
.spec div{display:grid;grid-column:1/-1;grid-template-columns:subgrid;padding:16px 0;border-bottom:1px solid var(--g3);align-items:baseline}
.spec dt{font-family:var(--fd);font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.spec dd{font-size:16px;color:var(--g6)}
/* на узких телефонах термин и значение в одну колонку: «Официально» рядом с «автоэлектрике» шире экрана */
@media (max-width:359px){.spec{grid-template-columns:minmax(0,1fr)}.spec div{row-gap:2px}}
@media (min-width:1000px){.about{grid-template-columns:7fr 5fr;gap:48px;align-items:start}.about__fig{width:min(100%,400px);justify-self:end}.spec dt{font-size:24px}}

/* 8. электромобили: под подзаголовком кнопка в Telegram, как в блоках 6 и 9 */
.ev__go{margin-top:28px}
@media (min-width:1000px){.ev{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:start}.ev .sec__head+*{margin-top:0}.ev .fig--wide{margin:0}}
.fig--wide{margin-left:0;margin-right:0}

/* 9. компании */
.biz{display:grid;gap:36px}
.pts{border-top:2px solid var(--ink)}
.pts li{padding:14px 0;border-bottom:1px solid var(--g3);font-size:16px;color:var(--g6)}
.pts b{color:var(--ink)}
.biz__copy .btn{margin-top:28px}
@media (min-width:1000px){.biz{grid-template-columns:7fr 5fr;gap:48px;align-items:start}}

/* 10. вопросы */
.faq{display:grid;gap:8px}
.faq__list{border-top:2px solid var(--ink)}
.faq details{border-bottom:1px solid var(--g3)}
.faq summary{position:relative;display:block;padding:18px 44px 18px 0;font-size:17px;font-weight:700;line-height:1.35;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after,.faq summary::before{content:"";position:absolute;right:6px;top:50%;width:16px;height:2px;background:var(--ink);transition:transform .3s var(--ease)}
.faq summary::before{transform:rotate(90deg)}
.faq details[open] summary::before{transform:rotate(0)}
.faq summary:hover,.faq summary:active,.faq summary.is-press{color:var(--olive)}
.faq details p{padding:0 0 20px;font-size:16px;color:var(--g6);max-width:68ch}
@media (min-width:1000px){.faq{grid-template-columns:4fr 8fr;gap:48px}.faq h2{position:sticky;top:96px;align-self:start}}

/* 11. финал */
.fin{display:grid;gap:40px}
.fin__form .lead{margin-top:24px}
.addr{border-top:1px solid var(--g6)}
.addr div{display:grid;grid-template-columns:1fr;gap:2px;padding:14px 0;border-bottom:1px solid var(--g6)}
.addr dt{font-size:13px;font-weight:700;color:var(--g3)}
.addr dd{font-size:17px;font-weight:600}
.addr a{text-decoration:none}
.addr a:hover{color:var(--lime)}
.fin__info .msg{margin-top:24px}
/* карта: схема проезда из геометрии OSM (tools/map_art.py), две компоновки: для телефона и широкая.
   Линии зелёной шкалой, лаймом только маршрут и метка; --k переводит экранные пиксели в единицы схемы */
.map{position:relative;overflow:hidden;aspect-ratio:1/1;background:#0D2523;border:1px solid var(--g6);border-radius:var(--r-p)}
.map__art--w{display:none}
.map .pa-bg{fill:#0D2523}
.mp-res{fill:#193432;opacity:.5}
.mp-water{fill:#081A19;stroke:#2A4B48;stroke-width:calc(1.5px * var(--k))}
.mp-mk{fill:#193432;stroke:#2A4B48;stroke-width:calc(1px * var(--k))}
.mp-minor{stroke:#1F3D3A;stroke-width:calc(1px * var(--k))}
.map__art--m .mp-minor{opacity:.6}
.mp-rail{stroke:#5C7A76;stroke-width:calc(1.5px * var(--k));stroke-dasharray:calc(6px * var(--k)) calc(4px * var(--k));stroke-linecap:butt}
.mp-street{stroke:#2A4B48;stroke-width:calc(2px * var(--k))}
.mp-link{stroke:#3B5D59;stroke-width:calc(1.5px * var(--k))}
.mp-main{stroke:#5C7A76;stroke-width:calc(3px * var(--k))}
.mp-mkad{stroke:#A7BBB7;stroke-width:calc(2.5px * var(--k))}
.mp-wash{fill:#5C7A76}
.mp-chev{stroke:var(--lime);stroke-width:calc(3px * var(--k))}
.mp-t{fill:#71908B;font-size:calc(12px * var(--k));font-weight:700;letter-spacing:.02em;paint-order:stroke;stroke:#0D2523;stroke-width:calc(4px * var(--k))}
.mp-t--hi{fill:#A7BBB7;letter-spacing:.14em}
.mp-t--s{font-size:calc(11px * var(--k))}
.mp-tag,.mp-plate{fill:#112D2B;stroke:#2A4B48;stroke-width:calc(1px * var(--k))}
.mp-tagt{fill:var(--paper);font-size:calc(13px * var(--k));font-weight:800}
.mp-ring{stroke:#A7BBB7;stroke-width:calc(1.5px * var(--k))}
.mp-ring2{stroke:#5C7A76;stroke-width:calc(1.5px * var(--k))}
.mp-pin{stroke:var(--lime);stroke-width:calc(1.5px * var(--k));opacity:.6}
.map__src{position:absolute;right:8px;top:6px;font-size:12px;color:var(--g4)}
.map__link{position:absolute;left:16px;bottom:16px;padding:6px 6px 6px 18px;border-radius:var(--r-b);background:var(--deep);color:var(--paper);box-shadow:var(--e-neg)}
.map__link:hover .key{background:var(--lime-hi);box-shadow:var(--edge),var(--glow)}
.map__link:active .key,.map__link.is-press .key{background:var(--lime-p);box-shadow:var(--edge),var(--glow-on)}
.map{box-shadow:var(--sunk)}
@media (min-width:700px){.map{aspect-ratio:auto;min-height:300px}.map__art--m{display:none}.map__art--w{display:block}}
@media (min-width:600px){.addr div{grid-template-columns:150px 1fr;gap:16px;align-items:baseline}}
@media (min-width:1000px){.fin{grid-template-columns:1fr 1fr;gap:36px 48px}.map{grid-column:1/-1;aspect-ratio:8/3}}

/* подвал: колофон руководства. Тихий, на бумаге; верхняя черта как провод из знака: точка пайки слева, клемма справа */
.ftr{padding:40px 0;font-size:14px;line-height:1.5;color:var(--g5)}
.ftr p{margin:0}
.ftr a{color:inherit;text-decoration:none;transition:color .2s}
.ftr__in{position:relative;display:grid;gap:24px;padding-top:28px;border-top:1px solid var(--g2)}
.ftr__in::before,.ftr__in::after{content:"";position:absolute;top:0;box-sizing:border-box}
.ftr__in::before{left:0;width:7px;height:7px;margin-top:-4px;border-radius:50%;background:var(--g3)}
.ftr__in::after{right:0;width:9px;height:9px;margin-top:-5px;border:1.5px solid var(--g3);border-radius:2px;background:var(--paper)}
.ftr__id{display:grid;gap:10px}
.ftr .logo{color:var(--ink)}
/* разделитель между знаком и словами, как в шапке */
.ftr .logo__mark{order:-2}
.ftr .logo::after{content:"";order:-1;align-self:stretch;width:1px;margin:2px 6px 2px 0;background:var(--g2)}
/* адрес начинается под словами логотипа: знак 36 + черта с полями 13 + зазоры .36em */
.ftr__id p{padding-left:61px}
.ftr__nav{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;max-width:360px}
.ftr__nav a{padding:10px 0;color:var(--g6);font-weight:500}
.ftr__reach{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 20px}
/* на телефоне связь выше оглавления */
.ftr__nav{order:1}
.ftr__tel{justify-self:start;padding:8px 0;color:var(--ink)!important;font-weight:700;font-size:17px;font-variant-numeric:tabular-nums;letter-spacing:-.005em}
.ftr__legal{display:grid;gap:6px;margin-top:24px;padding-top:18px;border-top:1px solid var(--g2);font-size:13px;color:var(--g5)}
/* на телефоне документы друг под другом, точка между ними только в строку */
.ftr__docs{display:grid;justify-items:start;gap:6px}
.ftr__sep{display:none}
/* зона нажатия 44px по высоте, строки не раздвигаются */
.ftr p a,.addr a{display:inline-block;padding:12px 0;margin:-12px 0}
@media (hover:hover){
  .ftr a:hover{color:var(--ink)}
  .ftr__nav a:hover,.ftr p a:hover{text-decoration:underline;text-decoration-color:var(--g3);text-underline-offset:4px;text-decoration-thickness:1px}
}
.ftr a:active,.ftr a.is-press{color:var(--olive)!important}
.ftr a:focus-visible{outline:2px solid var(--olive);outline-offset:3px;border-radius:4px}
@media (min-width:600px){
  .ftr__in{grid-template-columns:1fr 1fr}
  .ftr__nav{grid-template-columns:repeat(3,auto);justify-content:start;max-width:none}
  .ftr__nav{order:0;grid-column:1/-1}
  .ftr__reach{grid-column:2;grid-row:1;display:grid;gap:4px;justify-self:end;text-align:right}
  .ftr__tel{justify-self:end}
}
/* десктоп: три колонки на 12-частной сетке (знак 4, оглавление 5, связь 3), юрстрока в одну линию */
@media (min-width:1000px){
  .ftr{padding:56px 0 40px}
  .ftr__in{grid-template-columns:4fr 5fr 3fr;gap:32px;align-items:start;padding-top:32px}
  .ftr__nav{grid-column:auto;grid-template-columns:repeat(3,max-content);gap:0 40px;margin-top:-6px}
  .ftr__docs{display:block}
  .ftr__sep{display:inline}
  .ftr__reach{grid-column:auto;grid-row:auto}
  .ftr__tel{margin-top:-6px}
  .ftr__legal{display:flex;flex-wrap:wrap;align-items:center;gap:4px 32px;margin-top:36px}
  .ftr__legal p:last-child{margin-left:auto}
}

/* плавающая кнопка */
.fab{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:8px;transition:opacity .25s,transform .25s var(--ease)}
/* скрытая кнопка уходит и из Tab: visibility гасится после затухания */
.fab.is-hidden{opacity:0;visibility:hidden;transform:translateY(16px);pointer-events:none;transition:opacity .25s,transform .25s var(--ease),visibility 0s .25s}
.fab__btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 14px;border:0;border-radius:var(--r-f);background:var(--ink);color:var(--paper);font-weight:700;font-size:14px;cursor:pointer;box-shadow:var(--edge),var(--e3)}
.fab__btn{transition:background-color .2s,transform .25s var(--ease)}
.fab__btn:hover{background:var(--ink-h);transform:translateY(-2px)}
.fab__btn:active,.fab__btn.is-press{background:#000;transform:translateY(1px)}
.fab__btn svg{width:18px;height:18px;color:var(--lime)}
.fab__btn .i-shut,.fab[data-open=true] .fab__btn .i-open{display:none}
.fab[data-open=true] .fab__btn .i-shut{display:block;animation:fab-x .35s var(--ease)}
@keyframes fab-x{from{opacity:0;transform:rotate(-90deg) scale(.6)}}
/* меню выезжает из кнопки: лист растёт от правого нижнего угла, строки встают снизу вверх по очереди.
   Закрытое меню скрыто через visibility после затухания, поэтому Tab по нему не ходит */
.fab__menu{display:flex;flex-direction:column;min-width:210px;padding:4px;background:var(--paper);border:1px solid var(--g3);border-radius:var(--r-c);outline:1px solid var(--paper);box-shadow:var(--e3);transform-origin:100% 100%;opacity:0;visibility:hidden;transform:translateY(12px) scale(.94);pointer-events:none;transition:opacity .2s,transform .3s var(--ease),visibility 0s .3s}
.fab[data-open=true] .fab__menu{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .2s,transform .45s var(--ease),visibility 0s}
.fab__menu a{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 16px;border-bottom:1px solid var(--g2);border-radius:10px;font-weight:700;text-decoration:none;opacity:0;transform:translateY(8px);transition:opacity .15s,transform .15s var(--ease),background-color .2s,color .2s}
.fab[data-open=true] .fab__menu a{opacity:1;transform:none;transition:opacity .3s var(--ease) var(--fd,0s),transform .4s var(--ease) var(--fd,0s),background-color .2s,color .2s}
.fab__menu a:nth-last-child(1){--fd:.05s}
.fab__menu a:nth-last-child(2){--fd:.1s}
.fab__menu a:nth-last-child(3){--fd:.15s}
@media (prefers-reduced-motion:reduce){.fab__menu,.fab__menu a{transform:none!important}.fab[data-open=true] .fab__btn .i-shut{animation:none}}
.fab__menu a:last-child{border:0}
.fab__menu a:hover,.fab__menu a:active,.fab__menu a.is-press{background:var(--g1);color:var(--olive)}
.fab__menu svg{width:20px;height:20px}

/* ---------- движение ---------- */
/* Всё один раз и только при .js-anim (нет просьбы убрать движение, есть IntersectionObserver).
   Иконки фактов первого экрана встают по очереди */
.js-anim .facts svg{animation:pop-in .5s var(--ease) .2s both}
.js-anim .facts li:nth-child(2) svg{animation-delay:.3s}
.js-anim .facts li:nth-child(3) svg{animation-delay:.4s}
@keyframes pop-in{from{opacity:0;transform:scale(.6)}}
@keyframes rise-in{from{opacity:0;transform:translateY(8px)}}

/* Шаги работы: на телефоне строки проявляются по очереди, на ПК линия идёт через шаги,
   точка встаёт, когда линия до неё дошла, последняя лаймовая отмечается кольцом */
.steps li:nth-child(2){--si:1}
.steps li:nth-child(3){--si:2}
.steps li:nth-child(4){--si:3}
.js-anim .steps:not(.is-in) li>*{opacity:0}
.js-anim .steps.is-in li>*{animation:rise-in .5s var(--ease) calc(var(--si,0) * .08s) both}
@media (min-width:900px){
  .js-anim .steps li{border-top-color:transparent!important}
  .js-anim .steps li::after{content:"";position:absolute;top:-2px;left:0;right:0;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left}
  .js-anim .steps__end::after{background:var(--olive)}
  .js-anim .steps.is-in li::after{animation:st-rule .3s linear calc(var(--si,0) * .3s) both}
  .js-anim .steps:not(.is-in) li::before{transform:scale(0)}
  .js-anim .steps.is-in li::before{animation:pop-in .4s var(--ease) calc(var(--si,0) * .3s) both}
  .js-anim .steps.is-in .steps__end::before{animation:pop-in .4s var(--ease) .9s both,st-ping 1.2s ease-out 1.2s}
  .js-anim .steps.is-in li>*{animation-delay:calc(var(--si,0) * .3s + .1s)}
}
@keyframes st-rule{to{transform:scaleX(1)}}
@keyframes st-ping{from{box-shadow:inset 0 0 0 2px var(--ink),0 0 0 0 rgba(91,101,0,.4)}to{box-shadow:inset 0 0 0 2px var(--ink),0 0 0 14px rgba(91,101,0,0)}}

/* Вопросы раскрываются по высоте там, где браузер это умеет; в остальных открываются сразу */
@supports selector(::details-content){
  .faq details{interpolate-size:allow-keywords}
  .faq details::details-content{height:0;overflow:clip;transition:height .35s var(--ease),content-visibility .35s allow-discrete}
  .faq details[open]::details-content{height:auto}
  .faq details p{transition:opacity .3s}
  .faq details:not([open]) p{opacity:0}
}

/* Отклик: выбранная услуга в форме, галочка в строке прайса */
.js-anim .svc:not([hidden]){animation:rise-in .35s var(--ease) both}
.js-anim .price tr.is-picked .pick svg{animation:pop-in .3s var(--ease) both}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;transition-delay:0s!important}
}

/* ---------- стекло: ОТКЛЮЧЕНО, чтобы вернуть, удалить этот открывающий маркер и закрывающий ниже ----------
   матовое тёмно-зелёное стекло только на том, что лежит поверх страницы: шапка, плавающая кнопка, подписи карты.
   Класс .glass ставит скрипт в head, на слабых телефонах его нет и остаётся сплошная заливка.
   Размытие небольшое и только на мелких площадях, чтобы прокрутка не дёргалась
.glass .hdr{background:rgba(17,45,43,.86);-webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5)}
.glass .hdr.is-open{background:var(--deep);-webkit-backdrop-filter:none;backdrop-filter:none}
.glass .fab__btn{background:rgba(29,30,39,.78);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4)}
.glass .fab__btn:hover{background:rgba(53,55,67,.86)}
.glass .fab__menu{background:rgba(246,245,241,.8);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4)}
.glass .map__link{background:rgba(17,45,43,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
@media (max-width:767px){
  .glass .hdr{background:rgba(17,45,43,.88);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4)}
}
*/
.nw{white-space:nowrap}
.byn{display:inline-block;width:.6em;height:.74em;vertical-align:-.01em;fill:currentColor;overflow:visible}
h2 .byn,.price__v .byn{width:.675em}